/* * Оформление элементов сайта, которые тема отдаёт без стилей. * * Правки в саму тему запрещены (её обновление их затрёт), поэтому всё * здесь — только поверх её разметки, по её же классам. Разметка выпадашки * городов заодно нездорова: ссылка вложена в ссылку, а
  • лежит вне * списка. Чинить её отсюда нельзя, но можно сделать так, чтобы это * не мешало пользоваться. */ /* --- выпадающий список городов в шапке --- */ .eslcms-submenu-toggle { display: flex; align-items: center; gap: 4px; } /* Стрелка должна показывать состояние: закрыто — вниз, открыто — вверх. */ .eslcms-submenu-toggle button svg { transition: transform 0.18s ease; } .eslcms-submenu-toggle button[aria-expanded='true'] svg { transform: rotate(180deg); } /* * Селектор нарочно тяжёлый. Тема выводит в встроенное правило * .easysite-faflba .easysite-avauyq.easysite-div { background: transparent } * — три класса и объявлено позже нашего файла, поэтому обычное * `.eslcms-dropdown-content` проигрывает: у правила темы три класса. * Здесь три класса плюс тег — на единицу весомее, и !important не нужен. * * Классы вида easysite-avauyq тема генерирует случайно и меняет при * пересохранении элемента, поэтому опираемся только на устойчивые: * тег ul и eslcms-dropdown-content. * * На десктопе прозрачность была незаметна — за панелью пусто. Нашлась * на телефоне: сквозь список просвечивало меню. */ ul.eslcms-dropdown-content.eslcms-dropdown-content.easysite-div { padding: 6px; border: 1px solid #27333b; border-radius: 12px; background: #131a1f; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); } .eslcms-dropdown-content > li { list-style: none; } /* Пустая внешняя ссылка-обёртка (href="#") из разметки темы: она ничего не открывает, но перехватывала бы клик и растягивала область. */ .eslcms-dropdown-content .easysite-text-link { display: block; padding: 0; } .eslcms-dropdown-content .dropdowm-list a[href]:not([href='#']) { display: block; padding: 9px 14px; border-radius: 8px; color: #dfe7ec; font-size: 15px; line-height: 1.3; text-decoration: none; white-space: nowrap; transition: background 0.14s ease, color 0.14s ease; } .eslcms-dropdown-content .dropdowm-list a[href]:not([href='#']):hover, .eslcms-dropdown-content .dropdowm-list a[href]:not([href='#']):focus-visible { background: #16301f; color: #fff; } /* Текущий город — иначе список не отвечает на вопрос «а я сейчас где?». Класс проставляет site.js. */ .eslcms-dropdown-content .mw-city-current { background: #16301f; color: #fff; font-weight: 600; } .eslcms-dropdown-content .mw-city-current::after { content: '✓'; margin-left: 8px; color: #34a85a; } @media (max-width: 782px) { .eslcms-dropdown-content { min-width: 190px; } .eslcms-dropdown-content .dropdowm-list a[href]:not([href='#']) { /* На телефоне палец, а не курсор: 44 пикселя — минимальная удобная высота цели нажатия. */ padding: 12px 14px; } } /* --- текстовый блок на страницах городов (MW\Currency\Site\SeoText) --- */ .mw-seo { padding: 44px 20px 56px; color: #cfd8de; } .mw-seo__inner { /* Ширина контейнера темы, измеренная на странице города: 1184 px. При боковых отступах секции в 20 px блок встаёт ровно по её сетке. */ max-width: 1184px; margin: 0 auto; } .mw-seo__title { margin: 0 0 12px; color: #fff; font-size: 28px; line-height: 1.25; } .mw-seo__title--second { margin-top: 36px; } .mw-seo__lead { max-width: 780px; margin: 0; font-size: 16px; line-height: 1.6; } .mw-seo__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; } .mw-seo__point { padding: 18px 20px; border: 1px solid var(--mw-edge); border-radius: 16px; background: var(--mw-glass); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .mw-seo__point-title { margin: 0 0 6px; color: var(--mw-accent); font-size: 17px; line-height: 1.3; } .mw-seo__point-text { margin: 0; font-size: 15px; line-height: 1.55; } @media (max-width: 980px) { .mw-seo__points { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .mw-seo { padding: 32px 16px 40px; } .mw-seo__title { font-size: 23px; } .mw-seo__points { grid-template-columns: 1fr; } } /* * Цвета взяты с главной страницы, а не придуманы: * фон сайта rgb(11, 15, 22) * плитки курсов rgba(141, 190, 35, 0.21) — оливково-зелёная прозрачность * боковая панель rgb(79, 106, 20) * Поэтому карточки здесь тонируются тем же зелёным, а не нейтральным * белым: белое стекло смотрелось бы чужим на зелёном сайте. */ .mw-amount, .mw-seo { --mw-tint: 141, 190, 35; --mw-glass: rgba(var(--mw-tint), 0.10); --mw-glass-strong: rgba(var(--mw-tint), 0.16); --mw-edge: rgba(var(--mw-tint), 0.22); --mw-accent: #a9dc3c; } /* --- страницы без макета конструктора: сетка --- */ /* * Область содержимого — элемент флекс-колонки body и прижата влево: * у страниц с макетом её ширину задаёт конструктор, у наших — нет. * Автоматические поля центруют её, и заголовок встаёт под шапку. */ #eslcms-content { margin-inline: auto; } /* * Заголовок в стиле главной: Oswald, заглавные, градиент по тексту. * Значения сняты с главной — там linear-gradient(#8DBE23, #101604). * Нижний край градиента поднят: на 68 пикселях он читается, на 46 * буквы уходили бы в чёрное. */ #eslcms-content > h1 { margin: 0; padding: 34px 0 0; font-family: Oswald, var(--font-heading, inherit), sans-serif; font-size: 46px; font-weight: 400; line-height: 1.1; text-transform: uppercase; background-image: linear-gradient(180deg, #b6e34a 0%, #6f9c1c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (max-width: 1224px) { #eslcms-content > h1 { padding-left: 20px; padding-right: 20px; } } @media (max-width: 860px) { #eslcms-content > h1 { font-size: 27px; } } /* --- страница пересчёта суммы (MW\Currency\Site\AmountPage) --- */ .mw-amount { position: relative; padding: 8px 20px 64px; /* Фон не задаётся: сквозь блок видно фон сайта (#0b0f16), и страница читается как продолжение главной, а не как чёрная вставка. */ color: #cfd8de; } /* Свечение и сетка из точек — как в первом экране главной. */ .mw-amount::before { content: ''; position: absolute; top: -160px; left: 50%; width: 1100px; height: 520px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(var(--mw-tint), 0.16), transparent 66%), radial-gradient(circle, rgba(var(--mw-tint), 0.12) 1px, transparent 1px) 0 0 / 26px 26px; -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%); pointer-events: none; } .mw-amount__inner { position: relative; max-width: 1184px; margin: 0 auto; } /* --- главный ответ --- */ .mw-amount__hero { padding: 26px 28px 22px; border: 1px solid var(--mw-edge); border-radius: 20px; /* Матовое стекло: полупрозрачный слой поверх фона сайта плюс размытие. Цвет задан через rgba, а не сплошной, — иначе размывать нечего. */ background: linear-gradient( 155deg, var(--mw-glass-strong) 0%, var(--mw-glass) 55%, rgba(var(--mw-tint), 0.06) 100% ); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 50px rgba(0, 0, 0, 0.38); } .mw-amount__eyebrow { margin: 0 0 14px; color: var(--mw-accent); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .mw-amount__answer { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; } .mw-amount__pill { padding: 8px 16px; border: 1px solid var(--mw-edge); border-radius: 999px; background: rgba(var(--mw-tint), 0.14); color: #eef3f6; font-size: 19px; font-weight: 600; white-space: nowrap; } .mw-amount__eq { color: #6c7c86; font-size: 24px; } .mw-amount__answer strong { color: var(--mw-accent); font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; } .mw-amount__note { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: #8d9ca6; font-size: 14px; } .mw-amount__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mw-accent); box-shadow: 0 0 0 4px rgba(var(--mw-tint), 0.22); } /* --- города --- */ .mw-amount__cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .mw-amount__city { padding: 18px 20px 20px; border: 1px solid var(--mw-edge); border-radius: 16px; background: var(--mw-glass); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: border-color 0.16s ease, transform 0.16s ease; } .mw-amount__city:hover { border-color: rgba(var(--mw-tint), 0.5); transform: translateY(-2px); } .mw-amount__city-name { margin: 0 0 14px; color: #fff; font-size: 17px; font-weight: 600; } .mw-amount__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); } .mw-amount__row span { color: #8d9ca6; font-size: 14px; } .mw-amount__row strong { color: var(--mw-accent); font-size: 22px; font-weight: 700; } .mw-amount__row b { color: #eef3f6; font-size: 20px; font-weight: 600; } .mw-amount__row small { grid-column: 1 / -1; color: #6c7c86; font-size: 12px; } /* --- калькулятор --- */ .mw-amount__calc { display: grid; grid-template-columns: 260px 1fr; gap: 24px 28px; margin-top: 16px; padding: 22px 24px; border: 1px solid var(--mw-edge); border-radius: 16px; background: var(--mw-glass); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .mw-amount__calc-field label { display: block; margin-bottom: 9px; color: #93a3ad; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } /* Код валюты внутри поля: без него «100» ни о чём не говорит. */ .mw-amount__calc-input { display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: rgba(0, 0, 0, 0.3); } .mw-amount__calc-input:focus-within { border-color: var(--mw-accent); } /* Двойной класс намеренно: у темы есть своё правило `input:not([type="submit"]) { border-width: 1px }` той же силы, объявленное позже, и обычный селектор ему проигрывал — вокруг поля оставалась светлая рамка. */ .mw-amount__calc .mw-amount__calc-input input { width: 100%; padding: 13px 6px 13px 14px; border: 0; box-shadow: none; background: none; color: #fff; font-family: inherit; font-size: 20px; font-weight: 600; } .mw-amount__calc .mw-amount__calc-input input:focus { outline: none; box-shadow: none; } .mw-amount__calc-input span { padding: 0 14px 0 4px; color: #93a3ad; font-size: 15px; font-weight: 600; } .mw-amount__cta { width: 100%; margin-top: 12px; padding: 13px 20px; border: 0; border-radius: 12px; background: linear-gradient(140deg, #6f9c1c 0%, #4f6a14 100%); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .mw-amount__cta:hover { filter: brightness(1.12); } .mw-amount__calc-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 16px 24px; } .mw-amount__calc-out > div { display: flex; flex-direction: column; gap: 3px; padding-left: 16px; border-left: 2px solid rgba(var(--mw-tint), 0.35); } .mw-amount__calc-out small { color: #93a3ad; font-size: 13px; } .mw-amount__calc-out strong { color: var(--mw-accent); font-size: 24px; line-height: 1.15; } .mw-amount__calc-out span { color: #cfd8de; font-size: 14px; } /* --- текст и списки --- */ .mw-amount__h2 { margin: 36px 0 10px; color: #fff; font-size: 22px; } .mw-amount__inner p { margin: 0; max-width: 820px; font-size: 16px; line-height: 1.65; } .mw-amount__related { display: flex; flex-wrap: wrap; gap: 10px; } .mw-amount__related a { padding: 9px 16px; border: 1px solid var(--mw-edge); border-radius: 999px; background: var(--mw-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #cfd8de; font-size: 15px; text-decoration: none; } .mw-amount__related a:hover { border-color: var(--mw-accent); color: #fff; } .mw-amount__branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; padding: 0; list-style: none; } .mw-amount__branches li { padding: 12px 16px; border: 1px solid rgba(var(--mw-tint), 0.16); border-radius: 14px; background: rgba(var(--mw-tint), 0.07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 15px; } .mw-amount__branches strong { color: #fff; } .mw-amount__branches small { display: block; margin-top: 2px; color: #8d9ca6; font-size: 13px; } .mw-amount__more { margin-top: 18px; } .mw-amount__more a { color: var(--mw-accent); font-weight: 600; } @media (max-width: 860px) { .mw-amount__cities, .mw-amount__branches, .mw-amount__calc-out { grid-template-columns: 1fr; } .mw-amount__calc { grid-template-columns: 1fr; } .mw-amount__answer strong { font-size: 34px; } .mw-amount__hero { padding: 20px; } } /* Холст с частицами лежит под содержимым и не ловит клики. */ .mw-amount__particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .mw-amount__particles canvas { display: block; } /* Выбор валюты на хабе конвертера. */ .mw-amount__calc-input select { padding: 0 12px 0 6px; border: 0; background: none; color: #eef3f6; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .mw-amount__calc-input select:focus { outline: none; } /* --- ссылки над подвалом (MW\Currency\Site\FooterLinks) --- */ .mw-links { padding: 34px 20px 30px; border-top: 1px solid rgba(141, 190, 35, 0.14); } .mw-links__inner { display: grid; /* Колонок ровно столько, сколько разделов: с появлением услуг их стало четыре, и «MoneyWay» уезжал на вторую строку, оставляя полполосы пустой. Верхнее выравнивание — колонки разной длины. */ grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 26px 40px; max-width: 1184px; margin: 0 auto; } .mw-links__title { margin: 0 0 12px; color: #a9dc3c; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .mw-links__col ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .mw-links__col a { color: #9aa8b2; font-size: 15px; text-decoration: none; } .mw-links__col a:hover { color: #fff; } @media (max-width: 780px) { .mw-links__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .mw-links__inner { grid-template-columns: 1fr; } } @media (max-width: 1100px) and (min-width: 761px) { .mw-links__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- плавающая панель темы на узких экранах --- */ /* * На телефоне панель из четырёх кнопок занимает четверть экрана, а подписи * не помещаются и рвутся посреди слова: «Залиши / ти заявку», «Telegra / m». * Оставляем значки — они узнаваемы, — а подписи убираем: рваный текст * не помогает никому. Заодно панель перестаёт наезжать на содержимое. */ @media (max-width: 900px) { .side-widget__item-text { display: none; } .side-widget__item { width: 48px; min-width: 48px; height: 48px; padding: 0; } .side-widget__item-icon { margin: 0; } .side-widget__container { gap: 8px; padding: 8px; } /* Содержимое не должно уходить под панель. */ .mw-amount__inner, .mw-seo__inner, .mw-links__inner { padding-right: 56px; } } @media (max-width: 560px) { .side-widget__item { width: 42px; min-width: 42px; height: 42px; } .mw-amount__inner, .mw-seo__inner, .mw-links__inner { padding-right: 48px; } /* Кнопка виджета брони не должна стоять вплотную к панели темы. */ .mw-w-bubble { right: 12px; bottom: 12px; width: 52px; height: 52px; } } /* --- кнопка брони под таблицей курсов --- */ .mw-rates-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(141, 190, 35, 0.22); border-radius: 14px; background: rgba(141, 190, 35, 0.10); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } .mw-rates-cta p { flex: 1 1 220px; margin: 0; color: #cfd8de; font-size: 15px; line-height: 1.45; } .mw-rates-cta__button { padding: 12px 22px; border: 0; border-radius: 10px; background: linear-gradient(140deg, #6f9c1c 0%, #4f6a14 100%); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; } .mw-rates-cta__button:hover { filter: brightness(1.12); } /* --- плавающая панель действий (собирается widget.js) --- */ /* Панель темы прячется только когда наша собрана: класс ставит скрипт. Если он не отработает, у клиента останется рабочая панель темы. */ .mw-has-fab .side-widget, .mw-has-fab .side-widget__container { display: none; } .mw-fab { position: fixed; right: 20px; bottom: 20px; z-index: 99998; display: flex; flex-direction: column; /* По центру, а не по правому краю: главная кнопка крупнее остальных, и при выравнивании по краю её центр уезжал на шесть пикселей — столбик читался кривым. */ align-items: center; width: 58px; gap: 10px; } .mw-fab__item { position: relative; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(141, 190, 35, 0.28); border-radius: 50%; background: rgba(141, 190, 35, 0.14); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); color: #e8f2d8; cursor: pointer; transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease; } .mw-fab__item:hover { transform: translateY(-2px); border-color: rgba(141, 190, 35, 0.6); background: rgba(141, 190, 35, 0.24); color: #fff; } .mw-fab__item:focus-visible { outline: 2px solid #a9dc3c; outline-offset: 3px; } .mw-fab__item--primary { width: 58px; height: 58px; border-color: transparent; background: linear-gradient(140deg, #6f9c1c 0%, #4f6a14 100%); color: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); } .mw-fab__item--primary:hover { background: linear-gradient(140deg, #7fb020 0%, #5b7a17 100%); } /* Подпись выезжает при наведении: постоянные подписи и были причиной рваного текста на телефоне. */ .mw-fab__label { position: absolute; right: calc(100% + 12px); display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px; background: #131a1f; color: #eef3f6; font-size: 13px; line-height: 1.3; white-space: nowrap; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity 0.14s ease, transform 0.14s ease; } .mw-fab__label small { color: #93a3ad; font-size: 11px; } .mw-fab__item:hover .mw-fab__label, .mw-fab__item:focus-visible .mw-fab__label { opacity: 1; transform: translateX(0); } /* Уголок «уходит на другой сайт» — у криптообмена. */ .mw-fab__external { position: absolute; right: -1px; top: -1px; display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: #4f6a14; color: #fff; } @media (max-width: 560px) { .mw-fab { right: 12px; bottom: 12px; width: 52px; gap: 8px; } .mw-fab__item { width: 42px; height: 42px; } .mw-fab__item--primary { width: 52px; height: 52px; } /* На телефоне подпись показывать негде — остаётся aria-label для экранного диктора. */ .mw-fab__label { display: none; } } /* --- движение --- */ /* * Анимации сдержанные и короткие: страница про деньги, а не витрина. * Всё, что двигается, выключается системной настройкой «меньше движения» * одним правилом в конце блока. */ /* * Конечный кадр обязателен. Без него браузер берёт конечное значение * из вычисленного стиля, а там `.mw-reveal { opacity: 0 }` — и элемент * с `animation-fill-mode: both` проявляется из нуля в ноль, то есть * остаётся невидимым навсегда, оставляя на странице пустое место. */ @keyframes mw-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes mw-fab-in { from { opacity: 0; transform: translateY(10px) scale(0.9); } } /* Кольцо у кнопки брони: раз в несколько секунд, чтобы её замечали, но не раздражались. */ @keyframes mw-pulse { 0%, 82% { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(141, 190, 35, 0.5); } 91% { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 0 14px rgba(141, 190, 35, 0); } 100% { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(141, 190, 35, 0); } } .mw-fab__item { animation: mw-fab-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Кнопки появляются одна за другой снизу вверх. */ .mw-fab__item:nth-child(1) { animation-delay: 0.24s; } .mw-fab__item:nth-child(2) { animation-delay: 0.18s; } .mw-fab__item:nth-child(3) { animation-delay: 0.12s; } .mw-fab__item:nth-child(4) { animation-delay: 0.06s; } .mw-fab__item--primary { animation: mw-fab-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both, mw-pulse 7s ease-out 2s infinite; } .mw-fab__item--primary:hover { animation-play-state: running, paused; } /* Появление блоков при прокрутке: класс ставит site.js. */ .mw-reveal { opacity: 0; } .mw-reveal.is-visible { animation: mw-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } .mw-amount__city:nth-child(2).is-visible, .mw-seo__point:nth-child(2n).is-visible { animation-delay: 0.08s; } /* Смена шага формы: содержимое проявляется, панель не дёргается. */ .mw-w-body > * { animation: mw-rise 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; } .mw-w-panel { animation: mw-rise 0.26s cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .mw-fab__item, .mw-fab__item--primary, .mw-reveal, .mw-reveal.is-visible, .mw-w-body > *, .mw-w-panel { animation: none; opacity: 1; } } /* --- горизонтальное меню на узком экране --- */ /* * Тема показывает и бургер, и горизонтальное меню одновременно. * С украинскими подписями оно ещё влезало, с русскими — нет: строка * получалась 533 пикселя при экране 500, и вся страница ползла вбок. * * Ниже 900 пикселей меню шапки скрыто: бургер на месте и открывает * то же самое. Мобильное меню внутри бургера (.mobile-menu) правило * не задевает — у него своя обёртка. */ @media (max-width: 900px) { .esl-nav-menu-wrapper:not(.mobile-menu .esl-nav-menu-wrapper) { display: none; } } /* * Курсы криптообмена внутри вкладки переключателя курсов. * * Вид повторяет таблицу кассы на соседней вкладке — иначе переход между * вкладками читается как переход на другой сайт. Размеры не подобраны * на глаз, а сняты с той таблицы в браузере и заданы теми же токенами * темы: подписи --text-xxs (17,9 px), курсы --text-s (23,85 px) с весом * 600, отступ плитки --space-s, промежуток --content-gap. Токены текучие * (clamp по ширине окна), поэтому обе таблицы дышат одинаково. */ .mw-crypto { --mw-edge: rgba(141, 190, 35, 0.35); --mw-accent: #a9dc3c; } .mw-crypto__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--content-gap, 22px); } .mw-crypto__label { margin: 0; color: #fff; font-size: var(--text-xxs, 18px); font-weight: 400; } .mw-crypto__cell { margin-block: var(--space-s, 11px); padding: var(--space-s, 11px); background-color: var(--primary-t-10, rgba(141, 190, 35, 0.21)); color: #fff; font-size: var(--text-s, 24px); font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.5; } /* * Скругление у строки, а не у плитки: в таблице кассы округлены только * внешние углы строки, средняя колонка — прямая. Первые три ячейки * сетки — подписи колонок, поэтому отсчёт кратности совпадает с ними. */ .mw-crypto__cell:nth-child(3n + 1) { border-radius: var(--radius-m, 8px) 0 0 var(--radius-m, 8px); } .mw-crypto__cell:nth-child(3n) { border-radius: 0 var(--radius-m, 8px) var(--radius-m, 8px) 0; } .mw-crypto__cell--pair { font-variant-numeric: normal; } .mw-crypto__icon { width: 1.05em; height: 1.05em; margin-right: 0.4em; vertical-align: -0.17em; } .mw-crypto__cell--pair span { color: #b9c4cb; font-weight: 400; } .mw-crypto__note { margin: var(--space-s, 11px) 0 0; color: #8d9ca6; font-size: 14px; line-height: 1.5; } /* * Узкий экран. Колонке с парой отдаём больше места и запрещаем перенос: * «USDT / UAH» в две строки растягивал плитку и ломал ряд — соседние * ячейки оставались низкими, строка переставала читаться как строка. */ @media (max-width: 720px) { .mw-crypto__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; } .mw-crypto__label { font-size: 14px; } .mw-crypto__cell { margin-block: 4px; padding: 10px 12px; font-size: 17px; white-space: nowrap; } .mw-crypto__icon { margin-right: 0.3em; } .mw-crypto__note { font-size: 13px; } /* Пальцу нужна цель во всю полосу, а не кнопка по ширине надписи. */ .mw-crypto__cta { display: flex; justify-content: center; width: 100%; } } @media (max-width: 380px) { .mw-crypto__cell { padding: 9px 10px; font-size: 15px; } } /* * Кнопка на соседний сайт. Зелёный градиент — тот же, что у кнопки брони * под таблицей курсов: две главные кнопки страницы должны выглядеть * родными друг другу. Стрелка отъезжает при наведении, свечение * подсказывает, что нажатие уводит наружу. */ .mw-crypto__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 13px 24px; border: 0; border-radius: var(--radius-m, 8px); background: linear-gradient(140deg, #7fb022 0%, #4f6a14 100%); box-shadow: 0 6px 18px rgba(141, 190, 35, 0.18); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .mw-crypto__cta:hover { box-shadow: 0 10px 26px rgba(141, 190, 35, 0.32); color: #fff; filter: brightness(1.08); transform: translateY(-2px); } .mw-crypto__cta:active { transform: translateY(0); } .mw-crypto__cta-arrow { width: 18px; height: 18px; transition: transform 0.18s ease; } .mw-crypto__cta:hover .mw-crypto__cta-arrow { transform: translate(2px, -2px); } /* Кому движение мешает — тому только цвет. */ @media (prefers-reduced-motion: reduce) { .mw-crypto__cta, .mw-crypto__cta-arrow { transition: none; } .mw-crypto__cta:hover { transform: none; } .mw-crypto__cta:hover .mw-crypto__cta-arrow { transform: none; } } /* * Карточки отделений с картами на телефоне. * * Конструктор ставит их в сетку из трёх колонок правилом по id, и на узком * экране она сжимается до двух: карта получает полосу шириной в палец * и высоту в 280 пикселей — вертикальный колодец, по которому ничего * не понять. * * Число колонок задано по id, перебить его весом нечем. Зато ширину * элемента в сетке решает и `grid-column` — его тема не объявляет, * поэтому спор о весе не возникает: каждая карточка занимает всю строку, * и сетка становится одноколоночной без единого !important. */ @media (max-width: 900px) { .contact_map__container .eslcms-grid > * { grid-column: 1 / -1; } } /* * Страницы услуг: общий низ — отделения, карта, кнопки связи. * * Эти страницы почти не ищут в поиске, их пересылают: перегонщик или * турагент даёт ссылку клиенту. Поэтому низ отвечает на вопросы того, * кому её прислали, — куда ехать и куда звонить. */ /* * Фон как на главной: свечение и сетка точек. Без него страница услуги * выглядит чужой — чёрный лист рядом с зелёным сайтом. */ .mw-service::before { content: ''; position: absolute; top: -140px; left: 50%; width: 1100px; height: 480px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(141, 190, 35, 0.16), transparent 66%), radial-gradient(circle, rgba(141, 190, 35, 0.12) 1px, transparent 1px) 0 0 / 26px 26px; -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%); pointer-events: none; } .mw-service { position: relative; /* Область содержимого у страниц без макета шириной по содержимому — без этого блок сжимается и уезжает от края текста. */ width: 100%; --mw-tint: 141, 190, 35; --mw-edge: rgba(var(--mw-tint), 0.22); --mw-accent: #a9dc3c; max-width: 1184px; margin: 0 auto; padding: 40px 20px 60px; } .mw-service__title { margin: 0 0 8px; color: #eef3f6; font-size: var(--text-s, 24px); } .mw-service__lead { margin: 0 0 22px; color: #8d9ca6; font-size: 15px; } .mw-service__branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .mw-service__branch { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--mw-edge); border-radius: var(--radius-m, 8px); background-color: var(--primary-t-10, rgba(var(--mw-tint), 0.14)); } .mw-service__branch h3 { margin: 0; color: #eef3f6; font-size: 18px; } .mw-service__address, .mw-service__hours { margin: 0; color: #cfd8de; font-size: 15px; line-height: 1.45; } .mw-service__hours { color: #8d9ca6; } .mw-service__phone, .mw-service__route { color: var(--mw-accent); font-size: 15px; text-decoration: none; } .mw-service__phone:hover, .mw-service__route:hover { text-decoration: underline; } .mw-service__map { margin-top: 18px; } .mw-service__map-button { width: 100%; padding: 16px; border: 1px dashed var(--mw-edge); border-radius: var(--radius-m, 8px); background: transparent; color: var(--mw-accent); font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; } .mw-service__map-button:hover { border-style: solid; } .mw-service__frame { width: 100%; height: 380px; border: 1px solid var(--mw-edge); border-radius: var(--radius-m, 8px); } .mw-service__map-note { margin: 8px 0 0; color: #8d9ca6; font-size: 13px; } .mw-service__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .mw-service__cta { padding: 13px 24px; border: 0; border-radius: var(--radius-m, 8px); background: linear-gradient(140deg, #7fb022 0%, #4f6a14 100%); box-shadow: 0 6px 18px rgba(var(--mw-tint), 0.18); color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform 0.18s ease, filter 0.18s ease; } .mw-service__cta:hover { color: #fff; filter: brightness(1.08); transform: translateY(-2px); } .mw-service__cta--ghost { border: 1px solid var(--mw-edge); background: transparent; box-shadow: none; color: #eef3f6; } .mw-service__siblings { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 10px 0 0; padding: 0; list-style: none; } .mw-service__siblings a { color: #cfd8de; font-size: 15px; text-decoration: none; } .mw-service__siblings a:hover { color: var(--mw-accent); } /* Хаб услуг: карточки вместо голого списка страниц. */ .mw-service__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 1184px; margin: 0 auto; padding: 20px; } .mw-service__card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--mw-edge, rgba(141, 190, 35, 0.22)); border-radius: var(--radius-m, 8px); background-color: var(--primary-t-10, rgba(141, 190, 35, 0.14)); text-decoration: none; transition: transform 0.18s ease, border-color 0.18s ease; } .mw-service__card:hover { border-color: #a9dc3c; transform: translateY(-2px); } .mw-service__card-title { color: #eef3f6; font-size: 18px; font-weight: 600; } .mw-service__card-text { color: #8d9ca6; font-size: 14px; line-height: 1.5; } @media (max-width: 720px) { .mw-service { padding: 28px 16px 44px; } .mw-service__cta { flex: 1 1 100%; text-align: center; } .mw-service__frame { height: 300px; } } /* --- лендинг услуги: секции --- */ .mw-service__hero { padding: 26px 24px 24px; border: 1px solid var(--mw-edge); border-radius: 18px; background: radial-gradient(ellipse at 15% 0%, rgba(var(--mw-tint), 0.18), transparent 60%), var(--primary-t-10, rgba(141, 190, 35, 0.12)); } .mw-service__hero-lead { margin: 0 0 12px; color: #eef3f6; font-size: 19px; line-height: 1.5; } .mw-service__hero-note { margin: 0; color: #a8b4bc; font-size: 15px; line-height: 1.55; } /* Три цифры вместо трёх абзацев: их читают взглядом, а не подряд. */ .mw-service__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 22px 0 4px; } .mw-service__fact { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-left: 2px solid var(--mw-accent); background: rgba(var(--mw-tint), 0.08); border-radius: 0 10px 10px 0; } .mw-service__fact-value { color: var(--mw-accent); font-size: 20px; font-weight: 700; } .mw-service__fact-label { color: #a8b4bc; font-size: 14px; line-height: 1.4; } .mw-service__hero .mw-service__actions { margin-top: 22px; } /* Заголовки секций — как на главной: Oswald, заглавные, зелёный градиент. */ .mw-service__title, .mw-service__form-title, .mw-service__terms h2 { font-family: Oswald, var(--font-heading, inherit), sans-serif; font-weight: 400; text-transform: uppercase; background-image: linear-gradient(180deg, #b6e34a 0%, #6f9c1c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .mw-service__title { margin: 40px 0 14px; font-size: 30px; line-height: 1.15; } .mw-service__cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .mw-service__note { padding: 18px 20px; border: 1px solid var(--mw-edge); border-radius: 14px; background: rgba(var(--mw-tint), 0.07); } .mw-service__note h3 { margin: 0 0 6px; color: var(--mw-accent); font-size: 17px; } .mw-service__note p { margin: 0; color: #cfd8de; font-size: 15px; line-height: 1.55; } /* Предупреждения — тёплым, чтобы отличались от рассказа об услуге. */ .mw-service__cards-row--warning .mw-service__note { border-color: rgba(255, 176, 92, 0.28); background: rgba(255, 176, 92, 0.07); } .mw-service__cards-row--warning .mw-service__note h3 { color: #ffb05c; } .mw-service__covered { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 18px; margin: 0; padding: 0; list-style: none; } .mw-service__covered li { position: relative; padding: 10px 12px 10px 34px; border-radius: 10px; background: rgba(var(--mw-tint), 0.07); color: #cfd8de; font-size: 15px; } .mw-service__covered li::before { content: '✓'; position: absolute; left: 12px; color: var(--mw-accent); font-weight: 700; } .mw-service__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: mw-step; } .mw-service__step { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--mw-edge); border-radius: 14px; background: rgba(var(--mw-tint), 0.07); } .mw-service__step-number { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(140deg, #7fb022 0%, #4f6a14 100%); color: #fff; font-size: 15px; font-weight: 700; } .mw-service__step-title { color: #eef3f6; font-size: 16px; font-weight: 600; } .mw-service__step-text { color: #a8b4bc; font-size: 15px; line-height: 1.5; } .mw-service__terms { margin-top: 34px; padding: 20px 22px; border: 1px dashed var(--mw-edge); border-radius: 14px; } .mw-service__terms h2 { margin: 0 0 8px; color: #eef3f6; font-size: 19px; } .mw-service__terms p { margin: 0; color: #cfd8de; font-size: 15px; line-height: 1.6; } /* * Вопросы — как в блоке «Часті запитання» на главной: заглавные Oswald, * зелёный плюс справа, тонкая линия между строками. Один и тот же элемент * на разных страницах должен выглядеть одинаково, иначе сайт читается * как несколько разных. */ .mw-service__faq { display: flex; flex-direction: column; max-width: 900px; margin: 0 auto; } .mw-service__faq-item { padding: 0; border: 0; border-bottom: 1px solid rgba(141, 190, 35, 0.16); border-radius: 0; background: none; } .mw-service__faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 4px; color: #eef3f6; font-family: Oswald, var(--font-heading, inherit), sans-serif; font-size: 19px; font-weight: 400; line-height: 1.25; text-transform: uppercase; cursor: pointer; list-style: none; } /* Штатный треугольник убираем в обоих движках. */ .mw-service__faq-item summary::-webkit-details-marker { display: none; } .mw-service__faq-item summary::after { content: '+'; flex: 0 0 auto; color: #a9dc3c; font-size: 28px; font-weight: 300; line-height: 1; transition: transform 0.18s ease; } .mw-service__faq-item[open] summary { color: #a9dc3c; margin-bottom: 0; } .mw-service__faq-item[open] summary::after { transform: rotate(45deg); } .mw-service__faq-item p { margin: 0; padding: 0 4px 20px; color: #cfd8de; font-size: 16px; line-height: 1.65; } /* Заголовок раздела вопросов на главной стоит по центру — здесь так же. */ .mw-service__faq-title { text-align: center; } @media (max-width: 620px) { .mw-service__faq-item summary { font-size: 16px; padding: 15px 2px; } } @media (max-width: 720px) { .mw-service__hero { padding: 20px 16px; } /* Три факта в две колонки на телефоне рвут короткие строки пополам. */ .mw-service__facts { grid-template-columns: 1fr; } .mw-service__hero-lead { font-size: 17px; } .mw-service__title { margin-top: 30px; } } /* --- заявка в первом экране страницы услуги --- */ .mw-service__form { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--mw-edge); } .mw-service__form-title { margin: 0 0 4px; color: #eef3f6; font-size: 19px; } .mw-service__form-lead { margin: 0 0 14px; color: #a8b4bc; font-size: 15px; } .mw-service__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mw-service__form input { width: 100%; padding: 13px 15px; border: 1px solid var(--mw-edge); border-radius: 10px; background: rgba(0, 0, 0, 0.25); color: #eef3f6; font-family: inherit; font-size: 16px; } .mw-service__form input::placeholder { color: #7f8b93; } .mw-service__form input:focus { border-color: var(--mw-accent); outline: none; } .mw-service__form-note { margin-top: 10px; } .mw-service__form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 14px; } .mw-service__form-or { color: #8d9ca6; font-size: 15px; } .mw-service__form-or a { color: var(--mw-accent); text-decoration: none; } .mw-service__form-status { margin: 12px 0 0; color: var(--mw-accent); font-size: 15px; } .mw-service__form-status--failed { color: #ffb05c; } @media (max-width: 620px) { .mw-service__form-row { grid-template-columns: 1fr; } .mw-service__form-actions .mw-service__cta { flex: 1 1 100%; text-align: center; } } /* --- свой подвал вместо штатного --- */ /* * Штатная секция подвала — логотип и «© Moneyway 2025» с годом, зашитым * в файлах темы. Скрываем её, а не вырезаем из разметки: в том же теге * лежит шаблон боковой панели. */ #eslcms-footer .footer { display: none; } .mw-links__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; max-width: 1184px; margin: 30px auto 0; padding-top: 22px; border-top: 1px solid rgba(141, 190, 35, 0.18); } .mw-links__logo img { display: block; width: 132px; height: auto; } .mw-links__contacts { display: flex; flex-wrap: wrap; gap: 8px 20px; } .mw-links__contacts a { color: #cfd8de; font-size: 15px; text-decoration: none; } .mw-links__contacts a:hover { color: #a9dc3c; } .mw-links__credit { color: #7f8b93; font-size: 14px; } @media (max-width: 620px) { .mw-links__bottom { flex-direction: column; align-items: flex-start; } } /* --- схема в первом экране страницы услуги --- */ .mw-service__hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 24px 32px; } .mw-service__hero .mw-service__form { grid-column: 1 / -1; } .mw-art { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; } .mw-art__label { fill: #8d9ca6; font-family: inherit; font-size: 15px; } /* Пунктир бежит вдоль линии — направление платежа видно без подписи. */ .mw-art__dash { animation: mw-art-flow 1.1s linear infinite; } @keyframes mw-art-flow { to { stroke-dashoffset: -16; } } /* * Монета идёт от инвойса к аукциону с остановкой в кассе: это и есть * весь смысл услуги. Координаты совпадают с центрами узлов в SVG * (54 → 230 → 406), поэтому она останавливается ровно в окошке. */ .mw-art__coin { animation: mw-art-coin 4s cubic-bezier(0.45, 0, 0.55, 1) infinite; } @keyframes mw-art-coin { 0% { transform: translateX(54px); opacity: 0; } 10%, 90% { opacity: 1; } 40%, 55% { transform: translateX(230px); } 100% { transform: translateX(406px); opacity: 0; } } .mw-art__sum, .mw-art__coin-sign { fill: #0b0f16; font-family: inherit; font-size: 14px; font-weight: 700; } .mw-art__sum { fill: #a9dc3c; } /* Молоток аукциониста слегка постукивает — ровно один раз за проход монеты. */ .mw-art__gavel { transform-origin: 406px 105px; animation: mw-art-gavel 4s ease-in-out infinite; } @keyframes mw-art-gavel { 0%, 78%, 100% { transform: rotate(0deg); } 84% { transform: rotate(-16deg); } 90% { transform: rotate(4deg); } } .mw-art__node rect, .mw-art__node path, .mw-art__node circle { transition: opacity 0.3s ease; } @media (prefers-reduced-motion: reduce) { .mw-art__dash, .mw-art__coin, .mw-art__gavel { animation: none; } .mw-art__coin { transform: translateX(230px); } } @media (max-width: 900px) { .mw-service__hero { grid-template-columns: 1fr; } .mw-service__hero-art { order: -1; } } /* Кошельки поставщика загораются по очереди — Alipay и WeChat как выбор. */ .mw-art__wallet { animation: mw-art-wallet 4s ease-in-out infinite; } .mw-art__wallet--two { animation-delay: 0.5s; } @keyframes mw-art-wallet { 0%, 60%, 100% { opacity: 0.35; } 70%, 85% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mw-art__wallet { animation: none; } } /* Точка на пути пульсирует — деньги в дороге, а не лежат. */ .mw-art__pulse { transform-origin: 230px 108px; animation: mw-art-pulse 2.6s ease-out infinite; } @keyframes mw-art-pulse { 0% { transform: scale(1); opacity: 0.5; } 70%, 100% { transform: scale(1.5); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .mw-art__pulse { animation: none; opacity: 0.4; } } /* --- карточки услуг в хабе --- */ .mw-service__cards { /* Одинаковая высота: карточки с разной длиной описания иначе выстраиваются лесенкой и сетка рассыпается. */ grid-auto-rows: 1fr; padding: 30px 20px 60px; } .mw-service__card { position: relative; gap: 10px; padding: 24px 24px 26px; border-radius: 16px; color: #a9dc3c; } .mw-service__card-icon { width: 34px; height: 34px; color: #a9dc3c; transition: transform 0.18s ease; } .mw-service__card:hover .mw-service__card-icon { transform: scale(1.08); } .mw-service__card-title { font-size: 19px; line-height: 1.25; } /* Стрелка в углу: карточка — ссылка, и это должно быть видно. */ .mw-service__card::after { content: '→'; position: absolute; top: 22px; right: 22px; color: rgba(169, 220, 60, 0.55); font-size: 20px; transition: transform 0.18s ease, color 0.18s ease; } .mw-service__card:hover::after { color: #a9dc3c; transform: translateX(3px); } /* --- страница курса юаня --- */ .mw-yuan { position: relative; width: 100%; max-width: 1184px; margin: 0 auto; padding: 30px 20px 60px; --mw-tint: 141, 190, 35; --mw-edge: rgba(var(--mw-tint), 0.22); --mw-accent: #a9dc3c; } .mw-yuan__card { padding: 26px 28px; border: 1px solid var(--mw-edge); border-radius: 18px; background: radial-gradient(ellipse at 15% 0%, rgba(var(--mw-tint), 0.2), transparent 60%), var(--primary-t-10, rgba(141, 190, 35, 0.12)); } .mw-yuan__label { margin: 0 0 6px; color: #8d9ca6; font-size: 15px; } .mw-yuan__value { margin: 0; color: #eef3f6; font-family: Oswald, var(--font-heading, inherit), sans-serif; font-size: 46px; font-variant-numeric: tabular-nums; line-height: 1.05; } .mw-yuan__value span { color: var(--mw-accent); } .mw-yuan__value small { color: #8d9ca6; font-family: inherit; font-size: 16px; } .mw-yuan__date, .mw-yuan__stale { margin: 8px 0 0; color: #8d9ca6; font-size: 14px; } .mw-yuan__sum { margin: 14px 0 0; color: #cfd8de; font-size: 20px; } .mw-yuan__sum strong { color: #eef3f6; } .mw-yuan__calc { margin-top: 22px; } .mw-yuan__calc-label { display: block; margin-bottom: 8px; color: #8d9ca6; font-size: 15px; } .mw-yuan__calc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .mw-yuan__calc input { width: 220px; padding: 13px 15px; border: 1px solid var(--mw-edge); border-radius: 10px; background: rgba(0, 0, 0, 0.25); color: #eef3f6; font-family: inherit; font-size: 18px; } .mw-yuan__calc input:focus { border-color: var(--mw-accent); outline: none; } .mw-yuan__calc output { color: #eef3f6; font-size: 18px; } .mw-yuan__honest, .mw-yuan__why { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--mw-edge); border-radius: 16px; background: rgba(var(--mw-tint), 0.06); } .mw-yuan__honest h2, .mw-yuan__why h2 { margin: 0 0 10px; color: #eef3f6; font-family: Oswald, var(--font-heading, inherit), sans-serif; font-size: 24px; font-weight: 400; text-transform: uppercase; } .mw-yuan__honest p, .mw-yuan__why p { margin: 0; color: #cfd8de; font-size: 16px; line-height: 1.6; } .mw-yuan__cta { display: inline-block; margin-top: 16px; padding: 13px 24px; border-radius: var(--radius-m, 8px); background: linear-gradient(140deg, #7fb022 0%, #4f6a14 100%); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; } .mw-yuan__cta:hover { color: #fff; filter: brightness(1.08); } @media (max-width: 620px) { .mw-yuan__value { font-size: 34px; } .mw-yuan__calc input { width: 100%; } } /* Текстовые блоки на страницах юаня. */ .mw-yuan__text { margin-top: 28px; } .mw-yuan__text h2 { margin: 0 0 10px; color: #eef3f6; font-family: Oswald, var(--font-heading, inherit), sans-serif; font-size: 24px; font-weight: 400; text-transform: uppercase; } .mw-yuan__text p { margin: 0; max-width: 820px; color: #cfd8de; font-size: 16px; line-height: 1.65; } .mw-yuan__text ul { max-width: 820px; margin: 0; padding-left: 20px; color: #cfd8de; font-size: 16px; line-height: 1.65; } .mw-yuan__text li { margin-bottom: 8px; } .mw-yuan__table { width: 100%; max-width: 560px; margin-top: 6px; border-collapse: collapse; font-size: 16px; } .mw-yuan__table th, .mw-yuan__table td { padding: 11px 12px; border-bottom: 1px solid rgba(var(--mw-tint), 0.16); text-align: left; } .mw-yuan__table thead th { color: #8d9ca6; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .mw-yuan__table tbody th { color: #cfd8de; font-weight: 400; } .mw-yuan__table tbody th a { color: #cfd8de; text-decoration: none; } .mw-yuan__table tbody th a:hover { color: var(--mw-accent); } .mw-yuan__table tbody td { color: #eef3f6; font-variant-numeric: tabular-nums; font-weight: 600; } /* Заголовок на страницах списка статей: шаблон темы его не выводит. */ .mw-archive-heading { max-width: 1184px; margin: 0 auto; padding: 34px 20px 0; } .mw-archive-heading h1 { margin: 0 0 10px; font-family: Oswald, var(--font-heading, inherit), sans-serif; font-size: 40px; font-weight: 400; line-height: 1.1; text-transform: uppercase; background-image: linear-gradient(180deg, #b6e34a 0%, #6f9c1c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .mw-archive-heading p { max-width: 780px; margin: 0; color: #cfd8de; font-size: 16px; line-height: 1.6; } @media (max-width: 860px) { .mw-archive-heading h1 { font-size: 27px; } } /* Заголовок статей, перенесённый в контейнер темы: поля уже даёт контейнер. */ .mw-archive-heading--inside { /* Контейнер темы — флекс с выравниванием по центру: без явной ширины заголовок сжимается по тексту и отъезжает от края сетки. */ align-self: stretch; width: 100%; max-width: none; margin: 0 0 28px; padding: 0; /* По центру — как всё остальное в секции: кнопка фильтра и сетка карточек. Заголовок, прижатый влево, выглядел приклеенным к краю. */ text-align: center; } .mw-archive-heading--inside p { max-width: 720px; margin-inline: auto; } /* * Секция статей дышала 135 пикселями сверху, а её заголовок «Статті» * повторял наш H1 другими словами. Оставляем один заголовок и убираем * провал между ним и карточками. */ .blog .feautures_2__heading { display: none; } /* * Отступ секции тема задаёт правилом по id, перебить его весом нечем. * Подтягиваем сам заголовок: 135 пикселей пустоты над ним не нужны, * когда над секцией уже есть шапка. */ .mw-archive-heading--inside { margin-top: -60px; }