/* ============================================================ HASchange — слой редизайна. Грузится последним в style.css, поэтому перекрывает main.min.css движка. Состоит из двух частей: 1) МОСТ — переопределение 111 переменных движка на фирменные токены. Это перекрашивает всю разметку, которую генерирует плагин (формы обмена, таблицы, личный кабинет) без правки самого плагина. 2) КАРКАС — шапка и футер по макетам, собранные из инлайновых стилей прототипа в классы. ============================================================ */ /* ──────────────────────────────────────────────────────────── 1. МОСТ К ПЕРЕМЕННЫМ ДВИЖКА Движок вешает класс .light/.dark И на (header.php:72-90), И на (body_class + includes/sites_func.php). Его правило .light объявляет переменные на ОБОИХ уровнях, поэтому перекрывать только html.light бесполезно: body переобъявит их ниже по дереву, и элементы унаследуют значение от body. Поэтому целимся в оба узла. Фирменный цвет движка — синий #4d7bf1 (9 переменных), ховер #1043c7 (3), вторичный ховер #456fd9 (2). ──────────────────────────────────────────────────────────── */ html.light, html.dark, body.light, body.dark { /* Шрифт: у движка Rubik + Unbounded, у нас один Onest */ --font: 'Onest', Inter, Arial, sans-serif; --font-secondary: 'Onest', Inter, Arial, sans-serif; /* tokens/typography.css из бандла перечисляет только «TT Norms» и «TT Norms Pro». Шрифт платный, физически его нет — без Onest в цепочке сайт молча падает на Arial. Дизайнер решил это, назвав Onest «TT Norms»; мы не подменяем название, а дописываем реальное семейство следом: если TT Norms когда-нибудь купят и подключат — он выиграет сам. Селектор с классом (0,1,1) перебивает :root (0,1,0) из токенов. */ --font-sans: 'TT Norms', 'TT Norms Pro', 'Onest', Inter, Arial, sans-serif; } html.light, body.light { /* — заливки и кнопки: синий → фирменный жёлтый — */ --Colors-Fills-Primary: var(--has-yellow); --Primary-Button: var(--has-yellow); --Form-Button: var(--has-yellow); --Colors-Fills-Dropmenu-Burgermenu: var(--has-yellow); /* ховеры кнопок: #456fd9 → светлый жёлтый */ --Form-Button-Hover: var(--has-yellow-light); --Colors-States-Accordeon-Hover: var(--has-yellow-light); /* Текст на жёлтом обязан быть тёмным, иначе нечитаемо */ --Colors-Texts-Primary-Button-Text: var(--has-black); --Colors-Texts-Form-Button-Text: var(--has-black); /* — текстовые ссылки — Жёлтый на белом для текста нечитаем (контраст ~1.5:1), поэтому ссылки уводим в тёмное золото, а ховер — в графит. */ --Colors-Texts-Link: var(--has-gold-deep); --Colors-Texts-Form-Link: var(--has-gold-deep); --Colors-Header-Footer-Header-Link: var(--has-gold-deep); --Colors-Header-Footer-Footer-Link: var(--has-gold-deep); --Colors-Texts-Secondary-Button-Text: var(--has-gold-deep); --Colors-Texts-Link-Hover: var(--has-black); --Colors-Header-Footer-Header-Link-Click: var(--has-black); --Colors-Header-Footer-Footer-Link-Click: var(--has-black); /* — подсветки выбора и наведения: синие вымывки → жёлтые — */ --Colors-Fills-Comments-Timers: var(--yellow-ring); --Colors-States-Currency-Item-Hover: var(--yellow-ring); --Colors-States-Droplist-Item-Hover: var(--yellow-ring); --Colors-Fills-Table-Header: var(--yellow-wash); --Colors-States-Currency-Item-Selected: var(--yellow-wash); --Colors-States-Droplist-Item-Selected: var(--yellow-wash); /* — текст и поверхности под тёплую палитру — */ --Colors-Texts-Text: var(--has-graphite); --Colors-Texts-On-Page: var(--has-graphite); --Colors-Texts-Form-Text: var(--has-graphite); --Colors-Fills-Dividers: var(--border-light); --Colors-Fills-Form-Dividers: var(--border-light); /* статусные цвета — на фирменные */ --Colors-Fills-Positive: var(--success); --Colors-Fills-Error: var(--error); } html.dark, body.dark { --Colors-Fills-Primary: var(--has-yellow); --Primary-Button: var(--has-yellow); --Form-Button: var(--has-yellow); --Colors-Fills-Dropmenu-Burgermenu: var(--has-yellow); --Form-Button-Hover: var(--has-yellow-light); --Colors-States-Accordeon-Hover: var(--has-yellow-light); --Colors-Texts-Primary-Button-Text: var(--has-black); --Colors-Texts-Form-Button-Text: var(--has-black); /* на тёмном фоне жёлтый читается — ссылки можно оставить жёлтыми */ --Colors-Texts-Link: var(--has-yellow); --Colors-Texts-Form-Link: var(--has-yellow); --Colors-Header-Footer-Header-Link: var(--has-yellow); --Colors-Header-Footer-Footer-Link: var(--has-yellow); --Colors-Texts-Secondary-Button-Text: var(--has-yellow); --Colors-Texts-Link-Hover: var(--has-yellow-light); --Colors-Fills-Comments-Timers: var(--yellow-ring); --Colors-States-Currency-Item-Hover: var(--yellow-ring); --Colors-States-Droplist-Item-Hover: var(--yellow-ring); --Colors-Fills-Table-Header: var(--yellow-wash); --Colors-States-Currency-Item-Selected: var(--yellow-wash); --Colors-States-Droplist-Item-Selected: var(--yellow-wash); --Colors-Fills-Positive: var(--success); --Colors-Fills-Error: var(--error); } /* Тёмная тема токенов дизайн-системы. Дизайн задаёт её через [data-theme="dark"], движок — через html.dark. Поддерживаем оба, чтобы макеты и движок жили в одной теме. */ html.dark, body.dark, [data-theme='dark'] { --has-white: #1a1712; --has-cream: #100e09; --surface-sunken: #221e16; --surface-card: #1a1712; --surface-page: #100e09; --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.74); --text-muted: rgba(255, 255, 255, 0.46); --border-light: rgba(255, 255, 255, 0.12); } /* ──────────────────────────────────────────────────────────── 2. КАРКАС: ШАПКА Собрано из инлайновых стилей макета «Главная Desktop». Схлопывание в капсулу — класс .is-stuck, его вешает js/has-head.js. В прототипе это делалось правкой inline-стилей в rAF-цикле; здесь состояние описано CSS, скрипт только переключает класс. ──────────────────────────────────────────────────────────── */ .hc-head { position: sticky; top: 0; z-index: 50; background: var(--has-white); border-bottom: 1px solid var(--border-light); padding-top: 0; transition: background var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), padding var(--dur-slow) var(--ease-out); } .hc-head-inner { max-width: var(--container-max); margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: transparent; border: 1px solid transparent; border-radius: 0; box-shadow: none; transition: max-width var(--dur-slow) var(--ease-out), background var(--dur-slow) var(--ease-out), border-radius var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), padding var(--dur-slow) var(--ease-out); } /* состояние после прокрутки > 24px — плавающая капсула */ .hc-head.is-stuck { background: transparent; border-bottom-color: transparent; padding-top: 12px; } .hc-head.is-stuck .hc-head-inner { max-width: 1120px; background: var(--has-white); border-color: var(--border-light); border-radius: 18px; box-shadow: 0 10px 30px rgba(18, 16, 10, 0.1); padding: 10px 18px 10px 22px; } .hc-logo { height: 28px; display: block; flex: none; } .hc-nav { display: flex; align-items: center; gap: 30px; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .hc-nav::-webkit-scrollbar { display: none; } .hc-nav a { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); } .hc-nav a:hover, .hc-nav a.is-active { color: var(--text-primary); } .hc-actions { display: flex; align-items: center; gap: 10px; flex: none; } /* квадратная иконочная кнопка 40×40 */ .hc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; /* в макете у кнопок шапки скругление 12px */ border-radius: 12px; border: 1px solid var(--border-light); background: var(--has-white); color: var(--text-primary); cursor: pointer; text-decoration: none; font-family: var(--font-sans); font-weight: 800; font-size: 13px; letter-spacing: -0.02em; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .hc-icon-btn:hover { border-color: var(--has-gold); } .hc-divider { width: 1px; height: 24px; background: var(--border-light); } /* ---- переключатель светлой/тёмной темы ---- Движок прячет .header__dark-mode (display:none) и показывает только внутри родителя с классом .switcher. В нашей шапке кнопка выводится в PHP лишь при h_change['switcher'] === 2, поэтому показываем безусловно. Иконки свои, инлайновые: background-image движка нам не подходит. */ .hc-theme-toggle.header__dark-mode { display: inline-flex; background-image: none; } .hc-theme-toggle svg { flex: none; } /* Видна ровно одна иконка: в светлой теме — луна (предложение переключиться на тёмную), в тёмной — солнце. Без этих правил обе рисуются разом. */ .hc-theme-toggle .hc-ico-sun { display: none; } .hc-theme-toggle .hc-ico-moon { display: block; } html.dark .hc-theme-toggle .hc-ico-sun, body.dark .hc-theme-toggle .hc-ico-sun { display: block; } html.dark .hc-theme-toggle .hc-ico-moon, body.dark .hc-theme-toggle .hc-ico-moon { display: none; } /* ---- переключатель языка ---- Разметку отдаёт движок (the_lang_list), приводим её к макету: кнопка 92×40, radius 12, рамка 1px, 13.5px/700, глобус + код + шеврон меню 170 шириной, radius 14, padding 6, тень 0 16px 48px rgba(18,16,10,.12) пункт 34px: код заглавными + название языка Мост перекрасил --Colors-Fills-Dropmenu-Burgermenu в жёлтый, из-за чего выпадающий список движка стал жёлтым — возвращаем ему белый фон. */ .hc-lang .tolbar_lang, .hc-lang .langlist_div { position: relative; } .hc-lang .langlist_title { display: inline-flex; align-items: center; gap: 7px; height: 40px; /* движок задаёт этому блоку фиксированную ширину — сбрасываем, чтобы кнопка сжалась по содержимому, как в макете (92px) */ width: auto; min-width: 0; padding: 0 12px; border: 1px solid var(--border-light); /* в макете 12px, а не токен --radius-md (14px) */ border-radius: 12px; background: var(--has-white); cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 13.5px; color: var(--text-primary); text-transform: uppercase; white-space: nowrap; } /* У движка своя стрелка через ::after (20×20). Мы рисуем собственный шеврон, иначе их две и кнопка шире макета на 27px. */ .hc-lang .langlist_title::after, .hc-lang .langlist_title::before { content: none; display: none; } .hc-lang .langlist_title > svg:first-child { color: var(--text-muted); flex: none; } .hc-lang .langlist_title > svg:last-child { color: var(--text-muted); flex: none; } .hc-lang .langlist_title span { line-height: 1; } .hc-lang .langlist_ul { position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 60; width: 170px; padding: 6px; border: 1px solid var(--border-light); border-radius: 14px; background: var(--has-white); box-shadow: var(--shadow-lg); } /* Движок красит ссылки списка белым (список у него был жёлтым). На белом фоне название языка становилось невидимым, оставался только код — поэтому цвет задаём с повышенной специфичностью. */ .hc-lang .langlist_ul a.langlist_li { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 10px; text-decoration: none; font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); white-space: nowrap; } .hc-lang .langlist_ul a.langlist_li:hover { background: var(--yellow-wash); color: var(--text-secondary); } /* активный язык: подсветка и галочка */ .hc-lang .langlist_ul a.langlist_li.is-active { background: var(--surface-sunken); } .hc-lang__code { flex: none; font-weight: 700; font-size: 13px; color: var(--text-primary); min-width: 24px; } .hc-lang__check { margin-left: auto; display: inline-flex; color: var(--has-gold); flex: none; } /* кнопка MAX: 40×40, как иконочные соседи */ /* MAX и Telegram в макете одного веса — обе чёрные, без приглушения. Пока ссылка на MAX не задана, кнопка просто некликабельна. */ .hc-max { font-weight: 800; font-size: 13px; letter-spacing: -0.02em; color: var(--text-primary); } .hc-max.is-inactive { cursor: default; } .hc-max.is-inactive:hover { border-color: var(--border-light); } /* переключатель языка */ .hc-lang { position: relative; } .hc-lang__btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-light); background: var(--has-white); cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 13.5px; color: var(--text-primary); } .hc-lang__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 170px; background: var(--has-white); border: 1px solid var(--border-light); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; max-height: 280px; overflow-y: auto; } .hc-lang__menu[hidden] { display: none; } .hc-lang__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: none; background: transparent; border-radius: 10px; cursor: pointer; font-family: var(--font-sans); text-align: left; color: var(--text-primary); } .hc-lang__item:hover { background: var(--yellow-wash); } /* кнопки входа и регистрации */ .hc-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border-light); background: var(--has-white); font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text-secondary); text-decoration: none; cursor: pointer; white-space: nowrap; } .hc-btn--primary { padding: 0 18px; border: none; background: var(--has-yellow); font-weight: 700; color: var(--has-black); box-shadow: var(--shadow-yellow-sm); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .hc-btn--primary:hover { background: var(--has-yellow-light); } .hc-btn--primary:active { background: var(--has-gold-deep); transform: translateY(1px); } /* ──────────────────────────────────────────────────────────── 3. КАРКАС: ФУТЕР ──────────────────────────────────────────────────────────── */ .hc-foot { background: var(--has-black); color: #fff; } .hc-foot__inner { max-width: var(--container-max); margin: 0 auto; padding: 56px 40px 32px; } .hc-foot__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .hc-foot__logo { height: 28px; display: block; margin-bottom: 16px; } .hc-foot__tagline { font-family: var(--font-sans); font-size: 14px; line-height: var(--lh-snug); color: rgba(255, 255, 255, 0.6); margin: 0 0 20px; max-width: 300px; } .hc-foot__tg { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; font-family: var(--font-sans); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.16); transition: background var(--dur-fast) var(--ease-out); } .hc-foot__tg:hover { background: rgba(255, 255, 255, 0.14); } .hc-foot__title { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: var(--ls-caps); color: rgba(255, 255, 255, 0.45); margin-bottom: 16px; } .hc-foot__col a { display: block; font-family: var(--font-sans); color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 14.5px; margin-bottom: 11px; transition: color var(--dur-fast) var(--ease-out); } .hc-foot__col a:last-child { margin-bottom: 0; } .hc-foot__col a:hover { color: var(--has-yellow); } .hc-foot__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 24px; } .hc-foot__disclaimer { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.4); margin: 0 0 12px; max-width: 760px; } .hc-foot__copy { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-sans); font-size: 13px; color: rgba(255, 255, 255, 0.5); } .hc-foot__slogan { color: var(--has-yellow); font-weight: 600; } /* ──────────────────────────────────────────────────────────── 4. АДАПТИВ Макеты сворачивают две колонки в одну на ≤900px. ──────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .hc-head-inner { padding: 14px 20px; } .hc-nav { gap: 20px; } } @media (max-width: 900px) { .hc-nav { display: none; } .hc-foot__cols { grid-template-columns: 1fr 1fr; gap: 28px; } .hc-foot__inner { padding: 40px 20px 24px; } } @media (max-width: 640px) { .hc-actions .hc-btn:not(.hc-btn--primary), .hc-actions .hc-divider, .hc-actions .hc-icon-btn[data-optional] { display: none; } .hc-foot__cols { grid-template-columns: 1fr; } .hc-foot__copy { flex-direction: column; align-items: flex-start; gap: 8px; } } /* wp_nav_menu отдаёт ul > li > a — приводим к горизонтальному ряду макета */ .hc-nav__list, .hc-foot__menu { list-style: none; margin: 0; padding: 0; } .hc-nav__list { display: flex; align-items: center; gap: 30px; } .hc-nav__list li { flex: none; } .hc-foot__menu li a { display: block; font-family: var(--font-sans); color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 14.5px; margin-bottom: 11px; transition: color var(--dur-fast) var(--ease-out); } .hc-foot__menu li a:hover { color: var(--has-yellow); } .hc-logo-link { flex: none; display: block; } /* штатный список языков движка приводим к виду макета */ /* ──────────────────────────────────────────────────────────── 1б. ХОЛОДНЫЕ ПОВЕРХНОСТИ ДВИЖКА → ТЁПЛАЯ ПАЛИТРА В .light движка 31 переменная в синей гамме (H≈223). Ниже — остаток, не покрытый основным мостом выше: фоны, поля, обводки и состояния кнопок. ──────────────────────────────────────────────────────────── */ html.light, body.light { /* фоны страницы и блоков: голубые → кремовые */ --Bg: var(--surface-sunken); --Page-Fill: var(--has-cream); --Field-Fill: var(--surface-sunken); --Table-2-Icon-Block: var(--surface-sunken); --Footer: var(--has-cream); --Colors-Fills-Cookies-Fill: var(--has-yellow-pale); /* обводки */ --Colors-Strokes-Form-Fields-Stroke: var(--border-light); --Colors-Header-Footer-Header-Button-Stroke: var(--border-light); --Colors-Strokes-Dropdown-Menu-Strokes: var(--border-light); --Colors-Strokes-Secondary-Button-Stroke: var(--has-gold); /* состояния основной кнопки */ --Primary-Button-Hover: var(--has-yellow-light); --Primary-Button-Click: var(--has-gold-deep); --Form-Button-Click: var(--has-gold-deep); --Header-0: var(--has-yellow); /* ссылки: наведение и нажатие */ --Colors-Header-Footer-Header-Link-Hover: var(--has-gold); --Colors-Header-Footer-Footer-Link-Hover: var(--has-gold); --Colors-Texts-Link-Click: var(--has-black); } html.dark, body.dark { --Colors-Fills-Cookies-Fill: rgba(249, 205, 46, 0.14); --Colors-Strokes-Secondary-Button-Stroke: var(--has-gold); --Primary-Button-Hover: var(--has-yellow-light); --Primary-Button-Click: var(--has-gold-deep); --Form-Button-Click: var(--has-gold-deep); --Header-0: var(--has-yellow); --Colors-Header-Footer-Header-Link-Hover: var(--has-yellow-light); --Colors-Header-Footer-Footer-Link-Hover: var(--has-yellow-light); } /* ──────────────────────────────────────────────────────────── 1в. ОСТАТОК: градиенты полей, вымывки и оверлей Эти значения — не плоские цвета, поэтому в выборку по hex не попали. Проверено в браузере: после них холодных переменных у движка не остаётся. ──────────────────────────────────────────────────────────── */ html.light, body.light { /* поля ввода: сине-сиреневый градиент → тёплый кремовый */ --Form-Field-Fill: linear-gradient(180deg, #F2EEDC 0%, #FBF9F1 100%); --Form-Total-Field-Fill: linear-gradient(180deg, #F2EEDC 0%, #FBF9F1 100%); --Total-Field-Fill: linear-gradient(156.57deg, #F2EEDC 14.29%, #FBF9F1 100%); /* вымывки строк таблиц и пунктов кабинета */ --Colors-Fills-Table-Item: rgba(249, 205, 46, 0.06); --Colors-States-Personal-Account-Item-Hover: var(--yellow-ring); --Colors-States-Personal-Account-Item-Selected: var(--yellow-wash); /* затемнение под модалками: холодное синее → тёплое графитовое */ --Colors-Fills-Popup-Overlay: rgba(18, 16, 10, 0.8); } html.dark, body.dark { --Form-Field-Fill: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%); --Form-Total-Field-Fill: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%); --Total-Field-Fill: linear-gradient(156.57deg, rgba(255,255,255,.06) 14.29%, rgba(255,255,255,.03) 100%); --Colors-Fills-Table-Item: rgba(249, 205, 46, 0.06); --Colors-States-Personal-Account-Item-Hover: var(--yellow-ring); --Colors-States-Personal-Account-Item-Selected: var(--yellow-wash); --Colors-Fills-Popup-Overlay: rgba(0, 0, 0, 0.82); } /* Фоновая картинка вендора images/Bg.jpg — голубая, к бренду отношения не имеет и не является переменной. Заменяем на фирменный фон. */ body.light, body.dark { background-image: none !important; } body.light { background-color: var(--surface-sunken); } body.dark { background-color: var(--has-cream); } /* ──────────────────────────────────────────────────────────── ГЛАВНАЯ: снимаем отступы обёртки движка header.php открывает
, а CSS движка задаёт ему padding 40px сверху и 80px снизу. На внутренних страницах это нужно, но наши секции главной идут во всю ширину и держат отступы сами — сверху из-за этого между шапкой и hero светилась полоса фона body, снизу висел лишний зазор перед футером. Сужаем правило до главной, чтобы не задеть остальные страницы. ──────────────────────────────────────────────────────────── */ body.home main.main { padding-top: 0; padding-bottom: 0; } /* То же для внутренних страниц редизайна: у них сверху своя полноширинная полоса-заголовок (hero / title strip), которая должна примыкать к шапке. Отступ движка сверху показывал полосу фона body между шапкой и полосой — убираем его ТОЛЬКО когда такая полоса реально есть (через :has), чтобы не задеть обычные страницы без своей полосы. */ main.main:has(.has-hero), main.main:has(.has-faqp-hero), main.main:has(.has-phero), main.main:has(.has-blog-hero), main.main:has(.has-art-hero), main.main:has(.dir-hero), main.main:has(.st-strip) { padding-top: 0; } /* ──────────────────────────────────────────────────────────── 7. ГЛАВНАЯ Секции чередуют фон крем/белый на всю ширину, контент внутри — 1200px. Соответствие макету «Главная Desktop»: hero крем · мониторинги белый · баннеры крем · шаги крем · преимущества белый · направления крем · города белый · отзывы крем · FAQ белый · реферал белый · SEO крем ──────────────────────────────────────────────────────────── */ .has-sec { padding: var(--space-16) 0; } .has-sec--cream { background: var(--has-cream); } .has-sec--white { background: var(--has-white); } .has-sec--tight { padding: var(--space-10) 0; } .has-sec__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 40px; } .has-sec__head { margin-bottom: var(--space-8); } .has-sec__head--center { text-align: center; } .has-sec__head--center > div { max-width: 720px; margin: 0 auto; } .has-sec__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .has-sec__title { font-family: var(--font-sans); font-weight: 800; font-size: 34px; line-height: 1.15; letter-spacing: var(--ls-heading); color: var(--text-primary); margin: 0; } .has-sec__sub { font-size: 15px; color: var(--text-muted); margin-top: 8px; } .has-sec__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 700; font-size: 14.5px; color: var(--has-gold-deep); text-decoration: none; white-space: nowrap; } .has-sec__link:hover { color: var(--has-black); } .has-center { display: flex; justify-content: center; margin-top: var(--space-8); } /* ---- единая кнопка ---- */ .has-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-h-lg); padding: 0 22px; border-radius: var(--radius-button); border: 1px solid var(--border-light); background-color: var(--has-white); font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--text-primary); text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .has-btn--sm { height: var(--control-h-sm); padding: 0 16px; font-size: 14px; } .has-btn--ghost:hover { border-color: var(--has-gold); } .has-btn--primary { border-color: transparent; background-color: var(--has-yellow); color: var(--has-black); box-shadow: var(--shadow-yellow-sm); } .has-btn--primary:hover { background-color: var(--has-yellow-light); color: var(--has-black); } /* ---- HERO ---- */ .has-hero { background: var(--has-cream); } .has-hero__inner { max-width: var(--container-max); margin: 0 auto; padding: 56px 40px 68px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .has-hero__title { font-family: var(--font-sans); font-weight: 800; font-size: 44px; line-height: 1.1; letter-spacing: var(--ls-hero); color: var(--text-primary); margin: 0 0 18px; } .has-hero__title .has-accent { color: var(--has-gold); } .has-hero__lead { font-family: var(--font-sans); font-size: 17px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 30px; max-width: 520px; } .has-hero__cta { display: flex; gap: 12px; margin-bottom: 38px; } .has-hero__stats { max-width: 480px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 20px; } .has-hero__stat:nth-child(2), .has-hero__stat:nth-child(4) { padding-left: 28px; border-left: 1px solid var(--border-light); } .has-hero__stat:nth-child(3), .has-hero__stat:nth-child(4) { padding-top: 20px; border-top: 1px solid var(--border-light); } .has-hero__stat-v { font-weight: 800; font-size: 28px; line-height: 1; color: var(--text-primary); } .has-hero__stat-l { font-size: 13px; color: var(--text-muted); margin-top: 4px; } .has-hero__right { display: flex; justify-content: flex-end; } .has-hero__calc { width: 100%; max-width: 440px; } /* ---- мониторинги ---- */ .has-mons { background: var(--has-white); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); } .has-mons__inner { max-width: var(--container-max); margin: 0 auto; padding: 20px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; } .has-mons__item { font-weight: 700; font-size: 14px; color: var(--text-muted); white-space: nowrap; } /* ---- промо-баннеры: жёлтые, радиус 28 ---- */ .has-banners__track { position: relative; min-height: 190px; } .has-banner { position: absolute; inset: 0; display: none; align-items: center; justify-content: space-between; gap: 32px; padding: 30px 36px; border-radius: var(--radius-xl); background: var(--has-yellow); color: var(--has-black); } .has-banner.is-active { display: flex; } .has-banner__tag { font-size: 11.5px; text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 800; color: rgba(18, 16, 10, 0.55); margin-bottom: 8px; } .has-banner__title { font-family: var(--font-sans); font-weight: 800; font-size: 27px; line-height: 1.15; letter-spacing: var(--ls-heading); color: var(--has-black); margin: 0 0 16px; } .has-banner__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .has-banner__list li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(18, 16, 10, 0.08); font-size: 13.5px; font-weight: 600; color: var(--has-black); } .has-banner__cta { flex: none; display: inline-flex; align-items: center; gap: 8px; height: var(--control-h-md); padding: 0 22px; border-radius: var(--radius-pill); background: var(--has-black); color: #fff; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out); } .has-banner__cta:hover { opacity: 0.86; color: #fff; } .has-banners__dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; } .has-banners__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(18, 16, 10, 0.18); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), width var(--dur-base) var(--ease-out); } .has-banners__dot.is-active { background: var(--has-gold); width: 24px; border-radius: var(--radius-pill); } /* ---- как это работает: последняя карточка чёрная ---- */ .has-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .has-steps[hidden] { display: none; } .has-step { display: flex; flex-direction: column; padding: 22px 20px; background: var(--has-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .has-step--final { background: var(--has-black); border-color: var(--has-black); } .has-step--final .has-step__t { color: #fff; } .has-step--final .has-step__d { color: rgba(255, 255, 255, 0.68); } .has-step__n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--has-yellow); color: var(--has-black); font-weight: 800; font-size: 14px; margin-bottom: 14px; } .has-step__t { font-weight: 700; font-size: 15px; color: var(--text-primary); margin-bottom: 6px; } .has-step__d { font-size: 13px; line-height: 1.45; color: var(--text-muted); } /* ---- преимущества: иконка в жёлтом скруглённом квадрате ---- */ .has-advs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .has-adv { padding: 26px; background: var(--has-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .has-adv__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--yellow-wash); color: var(--has-gold-deep); margin-bottom: 18px; } .has-adv__t { font-weight: 700; font-size: 17px; color: var(--text-primary); margin-bottom: 8px; } .has-adv__d { font-size: 14px; line-height: 1.5; color: var(--text-muted); } /* ---- направления ---- */ .has-dirs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .has-dir { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--has-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .has-dir:hover { border-color: var(--has-gold); box-shadow: var(--shadow-sm); } /* пара валют: две иконки внахлёст, вторая с белой обводкой (как в макете) */ .has-dir__ico { flex: none; display: inline-flex; align-items: center; } .has-dir__ico img { display: block; border-radius: 50%; } .has-dir__ico > :nth-child(2) { margin-left: -12px; border: 2px solid var(--has-white); border-radius: 50%; box-sizing: border-box; } .has-dir__body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .has-dir__pair { font-weight: 700; font-size: 15px; color: var(--text-primary); } .has-dir__meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .has-dir__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } .has-dir__rate { font-weight: 800; font-size: 16px; color: var(--text-primary); } .has-dir__badge { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--has-gold-deep); background: var(--yellow-wash); padding: 3px 8px; border-radius: var(--radius-sm); } /* ---- города: 4 колонки, булавка и статус ---- */ .has-offices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .has-office { padding: 18px 20px; background: var(--has-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .has-office__top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .has-office__pin { color: var(--has-gold); display: inline-flex; } .has-office__city { font-weight: 700; font-size: 15.5px; color: var(--text-primary); } .has-office__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-left: auto; flex: none; } .has-office__addr { font-size: 13.5px; color: var(--text-secondary); } .has-office__addr--soon { color: var(--text-muted); font-style: italic; } .has-office__hours { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; } /* ---- отзывы (без звёзд) ---- */ .has-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .has-review { margin: 0; padding: 24px; background: var(--has-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .has-review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .has-review__ava { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--yellow-wash); color: var(--has-gold-deep); font-weight: 800; font-size: 14px; flex: none; } .has-review__who { display: flex; flex-direction: column; } .has-review__name { font-weight: 700; font-size: 15px; color: var(--text-primary); } .has-review__when { font-size: 12.5px; color: var(--text-muted); } .has-review__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); } /* ---- FAQ: две колонки ---- */ .has-faq-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; } .has-faq-contacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .has-faq { display: flex; flex-direction: column; gap: 10px; } .has-faq__item { background: var(--surface-sunken); border: 1px solid var(--border-light); border-radius: 14px; overflow: hidden; } .has-faq__q { display: flex; align-items: center; gap: 12px; width: 100%; padding: 18px 20px; background: transparent; border: none; cursor: pointer; text-align: left; font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--text-primary); } .has-faq__q > span:first-child { flex: 1; } /* В макете закрытый пункт — серый плюс, открытый — золотой минус (НЕ повёрнутый плюс: поворот на 45° даёт крестик, а нужен именно минус). */ .has-faq__chev { flex: none; display: inline-flex; } .has-faq__ico { display: inline-flex; } .has-faq__ico--plus { color: var(--text-muted); } .has-faq__ico--minus { display: none; color: var(--has-gold); } .has-faq__q[aria-expanded='true'] .has-faq__ico--plus { display: none; } .has-faq__q[aria-expanded='true'] .has-faq__ico--minus { display: inline-flex; } .has-faq__a { padding: 0 20px 18px; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); } .has-faq__a[hidden] { display: none; } /* ---- реферальная программа: жёлтый блок (как в макете) ---- */ .has-ref { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; padding: 40px 44px; border-radius: 28px; background: var(--has-yellow); } .has-ref__badge { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 148px; height: 148px; border-radius: 24px; background: var(--has-black); text-align: center; } .has-ref__pct { font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -0.02em; color: var(--has-yellow); } .has-ref__cap { font-size: 12.5px; line-height: 1.25; color: rgba(255, 255, 255, 0.72); } .has-ref__body { flex: 1; min-width: 280px; } .has-ref__tag { display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--has-gold-deep); margin-bottom: 10px; } .has-ref__title { font-weight: 800; font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; color: var(--has-black); margin: 0 0 10px; } .has-ref__text { font-size: 16px; line-height: 1.5; color: var(--has-graphite); margin: 0; max-width: 580px; } .has-ref__text b { font-weight: 800; } .has-ref__act { flex: none; } .has-ref__cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 26px; border-radius: 16px; background: var(--has-black); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .has-ref__cta:hover { transform: translateY(-1px); background: #1f1b12; color: #fff; } /* ---- отзывы: шапка с плашкой BestChange ---- */ .has-reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; } .has-bestchange { display: inline-flex; align-items: center; gap: 13px; padding: 14px 20px; border-radius: 16px; background: var(--has-black); text-decoration: none; } .has-bestchange__ico { flex: none; } .has-bestchange__txt { display: flex; flex-direction: column; } .has-bestchange__n { font-weight: 800; font-size: 18px; color: #fff; } .has-bestchange__s { font-size: 12.5px; color: rgba(255, 255, 255, 0.7); } .has-bestchange:hover .has-bestchange__n { color: var(--has-yellow); } /* ---- SEO-текст ---- Как в макете: интро видно всегда, остальное скрыто и раскрывается кнопкой. Раскрытый текст остаётся в разметке (нужен поисковику) — просто hidden. */ .has-seo__intro, .has-seo__more { max-width: 920px; } .has-seo__more { margin-top: 24px; } .has-seo__more[hidden] { display: none; } .has-seo__intro p { font-size: 16px; line-height: 1.65; color: var(--text-secondary); margin: 0; } .has-seo__more h3 { font-weight: 800; font-size: 22px; line-height: 1.2; color: var(--text-primary); margin: 0 0 12px; } .has-seo__more h3:not(:first-child) { margin-top: 24px; } .has-seo__more p { font-size: 16px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 12px; } .has-seo__more p strong { color: var(--text-primary); } /* Кнопка-пилюля с жёлтым кружком и шевроном (вниз — свёрнуто, вверх — раскрыто). */ .has-seo__toggle { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; padding: 11px 12px 11px 20px; background: var(--has-white); border: 1px solid var(--border-light); border-radius: 999px; cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--text-primary); box-shadow: 0 2px 8px rgba(18, 16, 10, 0.05); transition: background var(--dur-fast) var(--ease-out); } .has-seo__toggle:hover { background: var(--surface-sunken); } .has-seo__toggle-ic { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--has-yellow); color: var(--has-black); } .has-seo__toggle-ic svg { transition: transform var(--dur-base) var(--ease-out); } .has-seo__toggle.is-open .has-seo__toggle-ic svg { transform: rotate(180deg); } /* ═══════════════════ СТРАНИЦА FAQ (/faq/) ═══════════════════ */ /* Титульная полоса — на всю ширину, белый фон с нижней границей. */ .has-faqp-hero { background: var(--has-white); border-bottom: 1px solid var(--border-light); } .has-faqp-hero__inner { max-width: 1120px; margin: 0 auto; padding: 32px 40px 30px; } .has-faqp-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; } .has-faqp-crumbs a { color: var(--text-muted); text-decoration: none; } .has-faqp-crumbs a:hover { color: var(--text-secondary); } .has-faqp-crumbs__cur { color: var(--text-secondary); font-weight: 600; } .has-faqp-title { font-family: var(--font-sans); font-weight: 800; font-size: 38px; line-height: 1.08; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 10px; } .has-faqp-sub { font-family: var(--font-sans); font-size: 17px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 22px; max-width: 560px; } .has-faqp-search { position: relative; max-width: 520px; } /* Движок задаёт input{position:relative}; инпут идёт после svg в DOM, поэтому его непрозрачный фон рисуется поверх иконки. Поднимаем иконку по слою и делаем её сквозной для кликов, чтобы фокус уходил в поле. */ .has-faqp-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #9C9A97; z-index: 2; pointer-events: none; } .has-faqp-search input { width: 100%; height: auto; padding: 14px 16px 14px 46px; border: 1px solid var(--border-light); border-radius: 14px; background: var(--surface-sunken); font-family: var(--font-sans); font-size: 15px; color: var(--text-primary); outline: none; } .has-faqp-search input:focus { border-color: var(--has-gold); } /* Сетка: слева липкий фильтр категорий, справа аккордеон. */ .has-faqp-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; max-width: 1120px; margin: 0 auto; padding: 24px 40px 56px; align-items: start; } .has-faqp-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 4px; } .has-faqp-catbtn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 12px; border: none; background: transparent; cursor: pointer; font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; color: var(--text-secondary); text-align: left; transition: background 0.14s ease, color 0.14s ease; } .has-faqp-catbtn:hover { background: var(--surface-sunken); } .has-faqp-catbtn.is-active { background: var(--has-yellow); color: var(--has-black); font-weight: 700; } .has-faqp-count { flex: none; min-width: 22px; text-align: center; padding: 2px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; background: var(--surface-sunken); color: var(--text-muted); } .has-faqp-catbtn.is-active .has-faqp-count { background: rgba(18, 16, 10, 0.14); color: var(--has-black); } .has-faqp-main { min-width: 0; } .has-faqp-list { display: flex; flex-direction: column; gap: 10px; } .has-faqp-item { background: var(--has-white); border: 1px solid var(--border-light); border-radius: 16px; box-shadow: 0 2px 8px rgba(18, 16, 10, 0.04); overflow: hidden; } .has-faqp-item[hidden] { display: none; } .has-faqp-q { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; background: transparent; border: none; cursor: pointer; text-align: left; font-family: var(--font-sans); } .has-faqp-q__txt { flex: 1; font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--text-primary); } .has-faqp-q__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--surface-sunken); transition: background var(--dur-base) var(--ease-out); } .has-faqp-q[aria-expanded='true'] .has-faqp-q__ic { background: var(--has-yellow); } .has-faqp-ico { display: inline-flex; } .has-faqp-ico--down { color: var(--text-muted); } .has-faqp-ico--up { display: none; color: var(--has-black); } .has-faqp-q[aria-expanded='true'] .has-faqp-ico--down { display: none; } .has-faqp-q[aria-expanded='true'] .has-faqp-ico--up { display: inline-flex; } .has-faqp-a { padding: 0 20px 20px; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); } .has-faqp-a[hidden] { display: none; } .has-faqp-a b, .has-faqp-a strong { color: var(--text-primary); } .has-faqp-empty { text-align: center; padding: 48px 20px; background: var(--has-white); border: 1px solid var(--border-light); border-radius: 16px; margin-top: 10px; } .has-faqp-empty[hidden] { display: none; } .has-faqp-empty__t { font-family: var(--font-sans); font-weight: 700; font-size: 17px; color: var(--text-primary); margin-bottom: 6px; } .has-faqp-empty__s { font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); } /* Чёрная карточка «Не нашли ответ?» */ .has-faqp-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--has-black); border-radius: 20px; padding: 24px 28px; margin-top: 24px; } .has-faqp-cta__body { flex: 1; min-width: 220px; } .has-faqp-cta__t { font-family: var(--font-sans); font-weight: 800; font-size: 20px; color: #fff; margin-bottom: 4px; } .has-faqp-cta__s { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.65); } .has-faqp-cta__btns { display: flex; gap: 10px; flex-wrap: wrap; } .has-faqp-cta__tg { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: var(--has-yellow); color: var(--has-black); font-family: var(--font-sans); font-weight: 700; font-size: 14px; padding: 13px 20px; border-radius: 12px; } .has-faqp-cta__all { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.16); font-family: var(--font-sans); font-weight: 700; font-size: 14px; padding: 13px 20px; border-radius: 12px; } .has-faqp-cta__all:hover { color: #fff; background: rgba(255, 255, 255, 0.16); } @media (max-width: 860px) { .has-faqp-hero__inner { padding: 24px 16px 22px; } .has-faqp-title { font-size: 30px; } .has-faqp-grid { grid-template-columns: 1fr; padding: 16px 16px 44px; gap: 16px; } .has-faqp-side { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; } .has-faqp-catbtn { width: auto; background: var(--has-white); border: 1px solid var(--border-light); } .has-faqp-catbtn.is-active { border-color: var(--has-yellow); } } /* ═══════════════════ БЛОГ (/blog/) ═══════════════════ */ .has-blog-hero { background: var(--has-white); border-bottom: 1px solid var(--border-light); } .has-blog-hero__inner { max-width: 1120px; margin: 0 auto; padding: 32px 40px 26px; } .has-blog-sub { max-width: 640px; } .has-blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .has-blog-chip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border-light); background: var(--has-white); cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 14px; white-space: nowrap; color: var(--text-secondary); transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease; } .has-blog-chip:hover { border-color: var(--has-black); } .has-blog-chip.is-active { background: var(--has-black); color: #fff; border-color: var(--has-black); } .blog-wrap { max-width: 1120px; margin: 0 auto; padding: 28px 40px 56px; } .blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .blog-card { display: flex; flex-direction: column; background: var(--has-white); border: 1px solid var(--border-light); border-radius: 20px; overflow: hidden; box-shadow: 0 2px 8px rgba(18, 16, 10, 0.04); text-decoration: none; transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.16s, border-color 0.16s; } .blog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(18, 16, 10, 0.10); border-color: rgba(224, 167, 20, 0.4); } .blog-card[hidden] { display: none; } .blog-cover { height: 168px; display: flex; align-items: center; justify-content: center; background: var(--has-cream); border-bottom: 1px solid var(--border-light); } .blog-cover img { display: block; } .has-blog-ico { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: var(--has-yellow); color: var(--has-black); } .has-blog-ico--pin { background: var(--has-yellow); } .blog-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px; } .blog-badge { display: inline-flex; align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: var(--yellow-wash); color: var(--has-gold-deep); font-family: var(--font-sans); font-weight: 700; font-size: 12px; margin-bottom: 12px; } .blog-badge--dark { background: rgba(249, 205, 46, 0.16); color: var(--has-yellow); margin-bottom: 14px; padding: 6px 12px; } .blog-card__title { font-family: var(--font-sans); font-weight: 800; font-size: 19px; line-height: 1.22; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 8px; } .blog-card__excerpt { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 16px; } .blog-more { display: flex; align-items: center; gap: 14px; margin-top: auto; } .blog-more__link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-weight: 700; font-size: 14px; color: var(--has-gold-deep); } .blog-more__meta { font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); } /* Крупная чёрная карточка-фичер */ .blog-feat { grid-column: 1 / -1; padding: 30px 32px; background: var(--has-black); border-color: var(--has-black); } .blog-feat__title { font-family: var(--font-sans); font-weight: 800; font-size: 26px; line-height: 1.16; letter-spacing: -0.01em; color: #fff; margin: 0 0 10px; max-width: 680px; } .blog-feat__excerpt { font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.7); margin: 0 0 18px; max-width: 680px; } .blog-more--dark .blog-more__link { color: var(--has-yellow); font-size: 14.5px; } .blog-more--dark .blog-more__meta { color: rgba(255, 255, 255, 0.5); font-size: 12.5px; } .blog-feat:hover { transform: translateY(-3px); border-color: var(--has-black); } .has-blog-empty { text-align: center; padding: 40px 20px; } .has-blog-empty[hidden] { display: none; } /* SEO-описание под списком статей (секция из макета) */ .has-blog-seo { background: var(--surface-sunken); } .has-blog-seo__inner { max-width: 860px; margin: 0 auto; padding: 8px 40px 52px; } .has-blog-seo__title { font-family: var(--font-sans); font-weight: 800; font-size: 24px; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 12px; } .has-blog-seo__text { font-family: var(--font-sans); font-size: 15px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 10px; } .has-blog-seo__text:last-child { margin-bottom: 0; } .has-blog-seo__text a { color: var(--has-gold-deep); text-decoration: none; font-weight: 600; } .has-blog-seo__text a:hover { text-decoration: underline; } @media (max-width: 820px) { .has-blog-hero__inner { padding: 24px 16px 22px; } .blog-grid { grid-template-columns: 1fr; } .blog-wrap { padding: 18px 16px 44px; } .has-blog-seo__inner { padding: 8px 16px 40px; } .has-blog-seo__title { font-size: 20px; } } /* ═══════════════════ СТАТЬЯ ═══════════════════ */ .has-art-hero { background: var(--has-white); border-bottom: 1px solid var(--border-light); } .has-art-hero__inner { max-width: 1120px; margin: 0 auto; padding: 30px 40px 26px; } .has-art-hero .has-faqp-crumbs { margin-bottom: 16px; flex-wrap: wrap; } .has-art-hero .has-faqp-crumbs a { color: var(--text-muted); text-decoration: none; } .has-art-hero .blog-badge { margin-bottom: 14px; padding: 6px 13px; font-size: 12.5px; } .has-art-title { font-family: var(--font-sans); font-weight: 800; font-size: 38px; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 16px; max-width: 820px; } .has-art-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .has-art-author { display: inline-flex; align-items: center; gap: 8px; } .has-art-ava { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--has-yellow); color: var(--has-black); font-family: var(--font-sans); font-weight: 800; font-size: 13px; } .has-art-author__name { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--text-secondary); } .has-art-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border-light); } .has-art-date, .has-art-read { font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); } .art-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; max-width: 1120px; margin: 0 auto; padding: 28px 40px 56px; align-items: start; } /* Типографика тела статьи */ .art-body { min-width: 0; } .art-body h2 { font-family: var(--font-sans); font-weight: 800; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-primary); margin: 34px 0 12px; scroll-margin-top: 90px; } .art-body h2:first-child { margin-top: 0; } .art-body h3 { font-family: var(--font-sans); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--text-primary); margin: 24px 0 8px; } .art-body p { font-family: var(--font-sans); font-size: 16.5px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 14px; } .art-body ul { margin: 0 0 16px; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 10px; } .art-body ul li { position: relative; padding-left: 26px; font-family: var(--font-sans); font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); } .art-body ul li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--has-gold); } .art-body ol { margin: 0 0 16px; padding-left: 22px; } .art-body ol li { font-family: var(--font-sans); font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 8px; } .art-body a { color: var(--has-gold-deep); text-decoration: none; font-weight: 600; } .art-body a:hover { text-decoration: underline; } .art-body strong { color: var(--text-primary); font-weight: 700; } .art-body img { max-width: 100%; height: auto; border-radius: 14px; margin: 8px 0 16px; } .art-body table { width: 100%; border-collapse: collapse; margin: 4px 0 18px; display: block; overflow-x: auto; } .art-body table th { text-align: left; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 0 14px 10px; border-bottom: 1px solid var(--border-light); } .art-body table td { font-family: var(--font-sans); font-size: 15px; line-height: 1.45; color: var(--text-secondary); padding: 13px 14px; border-bottom: 1px solid var(--border-light); vertical-align: top; } .art-body table td:first-child { font-weight: 700; color: var(--text-primary); } .art-disclaimer { font-style: italic; color: var(--text-muted); font-size: 14.5px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-light); } /* Сайдбар */ .art-aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; } .art-toc { background: var(--surface-sunken); border: 1px solid var(--border-light); border-radius: 18px; padding: 18px 20px; } .art-toc__title { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 12px; } .art-toc__nav { display: flex; flex-direction: column; gap: 9px; } .art-toc__nav a { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; color: var(--text-secondary); text-decoration: none; } .art-toc__nav a:hover { color: var(--has-gold-deep); } .art-toc--m { display: none; } /* мобильное оглавление сверху — на десктопе скрыто */ .art-cta { background: var(--has-black); border-radius: 18px; padding: 20px; } .art-cta__title { font-family: var(--font-sans); font-weight: 800; font-size: 17px; color: #fff; margin-bottom: 6px; } .art-cta__text { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.65); margin: 0 0 14px; } .art-cta__btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--has-yellow); color: var(--has-black); text-decoration: none; font-family: var(--font-sans); font-weight: 700; font-size: 14px; padding: 12px; border-radius: 12px; } /* Читайте также */ .has-art-related { background: var(--surface-sunken); border-top: 1px solid var(--border-light); } .has-art-related__inner { max-width: 1120px; margin: 0 auto; padding: 52px 40px 48px; } .has-art-related__title { font-family: var(--font-sans); font-weight: 800; font-size: 24px; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 20px; } .has-art-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .has-art-relcard { display: flex; flex-direction: column; background: var(--has-white); border: 1px solid var(--border-light); border-radius: 16px; padding: 20px; text-decoration: none; transition: border-color 0.16s, transform 0.16s; } .has-art-relcard:hover { border-color: rgba(224, 167, 20, 0.4); transform: translateY(-2px); } .has-art-relcard__cat { font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; color: var(--has-gold-deep); margin-bottom: 8px; } .has-art-relcard__title { font-family: var(--font-sans); font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--text-primary); } @media (max-width: 900px) { .has-art-hero__inner { padding: 24px 16px 20px; } .has-art-title { font-size: 29px; } .art-grid { grid-template-columns: 1fr; padding: 16px 16px 44px; gap: 20px; } .art-aside { position: static; order: 3; } /* оглавление: на мобилке показываем верхнее (.art-toc--m), нижнее в сайдбаре прячем */ .art-toc--m { display: block; order: -1; margin-bottom: 4px; } .art-aside .art-toc { display: none; } .has-art-related__grid { grid-template-columns: 1fr; } .has-art-related__inner { padding: 36px 16px 32px; } } /* ═══════════════════ СТРАНИЦА ОТЗЫВОВ (/reviews/) ═══════════════════ Список, форму и пагинацию отдаёт движок ([reviews_page]); мы только переодеваем его разметку в карточки макета. */ .rv-page { max-width: 1120px; margin: 0 auto; padding: 28px 40px 56px; } /* шапка отзывов: заголовок слева + плашка мониторингов справа */ .rv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .rv-head__main { min-width: 0; } .rv-mon { flex: none; display: flex; flex-direction: column; gap: 8px; background: var(--has-black); border-radius: 18px; padding: 16px 20px; } .rv-mon__cap { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); } .rv-mon__links { display: flex; gap: 8px; flex-wrap: wrap; } .rv-mon__link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); text-decoration: none; font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: #fff; } .rv-mon__link:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } .rv-mon__star { flex: none; } .rv-mon__ext { flex: none; color: rgba(255, 255, 255, 0.5); } /* отзывы на Яндекс Картах: официальные виджеты по офисам, 2 колонки */ .rv-ya { margin-top: 44px; } .rv-ya__title { font-family: var(--font-sans); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 8px; } .rv-ya__sub { font-family: var(--font-sans); font-size: 15px; color: var(--text-muted); margin: 0 0 20px; } .rv-ya-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .rv-ya-card { display: flex; flex-direction: column; background: var(--has-white); border: 1px solid var(--border-light); border-radius: 20px; overflow: hidden; } .rv-ya-card__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-light); } .rv-ya-card__ya { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: #fc3f1d; color: #fff; font-family: var(--font-sans); font-weight: 800; font-size: 18px; } .rv-ya-card__loc { display: flex; flex-direction: column; min-width: 0; } .rv-ya-card__city { font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--text-primary); } .rv-ya-card__addr { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-ya-frame { width: 100%; height: 560px; border: none; display: block; background: #fff; } /* адаптив сетки отзывов: 3 → 2 (≤980) → 1 (≤820) */ @media (max-width: 980px) { .rv-page .many_reviews_ins { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .rv-page .many_reviews_ins { grid-template-columns: 1fr; } .rv-mon { align-self: stretch; } .rv-ya-grid { grid-template-columns: 1fr; } .rv-ya-frame { height: 480px; } } /* список отзывов → ровная сетка карточек: 3 колонки, одинаковая высота в ряду */ .rv-page .many_reviews, .rv-page .many_reviews_ins { display: block; } .rv-page .many_reviews_ins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; transform: none !important; /* на случай swiper-обёртки */ /* у движка это самостоятельная карточка (белый фон, рамка, radius 28, padding 24) — обнуляем, карточки теперь сами .one_reviews */ background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; } .rv-page .one_reviews { float: none; width: auto; margin: 0; background: var(--has-white); border: 1px solid var(--border-light); border-radius: 18px; padding: 20px 22px; box-shadow: 0 2px 8px rgba(18, 16, 10, 0.04); } .rv-page .one_reviews_ins { padding: 0; } .rv-page .one_reviews_abs { display: none; } .rv-page .one_reviews_name { font-family: var(--font-sans); font-weight: 700; font-size: 17px; color: var(--text-primary); margin-bottom: 4px; } .rv-page .one_reviews_name span { font-weight: 700; color: var(--text-primary); } .rv-page .one_reviews_date { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border-light); } .rv-page .one_reviews_text { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); } .rv-page .one_reviews_text p { margin: 0 0 8px; } .rv-page .one_reviews_text p:last-child { margin: 0; } .rv-page .reviews-button-navigation { display: none; } /* стрелки карусели не нужны в сетке */ /* ---- форма «Оставить отзыв» (rf_line) ---- */ .rv-page .reviewsform, .rv-page .review_form_wrap { max-width: 760px; margin: 40px 0 0; } /* Поля занимают примерно половину карточки, правая половина пустовала — кладём туда панель «Расскажите о нас на мониторингах» (её дописывает has_reviews_page.php через штатный фильтр движка reviews_form_temp). */ .rv-page .rf_div_wrap form { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px 40px; align-items: start; } .rv-page .rf_div_title { grid-column: 1 / -1; } /* движок зажимает поля в фиксированные 364px — растягиваем на колонку */ .rv-page .rf_div_ins { width: 100% !important; max-width: none !important; box-sizing: border-box; } .rv-ask { background: var(--surface-sunken); border: 1px solid var(--border-light); border-radius: 20px; padding: 22px 24px; } .rv-ask__title { font-family: var(--font-sans); font-weight: 800; font-size: 17px; color: var(--text-primary); margin-bottom: 8px; } .rv-ask__text { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 16px; } .rv-ask__list { display: flex; flex-direction: column; gap: 10px; } .rv-ask__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; background: var(--has-white); border: 1px solid var(--border-light); border-radius: 14px; transition: transform .16s cubic-bezier(.22, 1, .36, 1), border-color .16s, box-shadow .16s; } .rv-ask__item:hover { transform: translateY(-2px); border-color: rgba(224, 167, 20, .45); box-shadow: 0 10px 26px rgba(18, 16, 10, .08); } .rv-ask__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: var(--has-yellow); } .rv-ask__t { min-width: 0; flex: 1; } .rv-ask__n { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 14.5px; color: var(--text-primary); } .rv-ask__s { display: block; font-family: var(--font-sans); font-size: 12.5px; color: var(--text-muted); } .rv-ask__ext { flex: none; color: var(--text-muted); } .rv-ask__hint { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 14px 0 0; } @media (max-width: 860px) { .rv-page .rf_div_wrap form { grid-template-columns: 1fr; gap: 0; } .rv-ask { margin-top: 24px; } } .rv-page .rf_line .form_field_label label { display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .rv-page .rf_line .req { color: var(--error); } .rv-page .rf_line input[type="text"], .rv-page .rf_line input[type="email"], .rv-page .rf_line textarea { width: 100%; height: auto; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: 14px; background: var(--has-white); font-family: var(--font-sans); font-size: 15px; color: var(--text-primary); outline: none; box-shadow: none; } .rv-page .rf_line textarea { min-height: 130px; resize: vertical; } .rv-page .rf_line input:hover, .rv-page .rf_line input:focus, .rv-page .rf_line textarea:hover, .rv-page .rf_line textarea:focus { border-color: var(--has-gold) !important; box-shadow: none !important; } .rv-page .form_field_line { margin-bottom: 14px; } .rv-page .form_field_errors_ins { margin-top: 6px; font-size: 12.5px; color: var(--error); } /* капча в форме отзыва — тот же вид, что в авторизации */ .rv-page .captcha_div { margin: 4px 0 14px; } .rv-page .captcha_title { display: none; } .rv-page .captcha_body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rv-page .captcha_divimg { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: none; background: repeating-linear-gradient(45deg, #EFEAD9, #EFEAD9 6px, #E4DDC7 6px, #E4DDC7 12px); } .rv-page .captcha_divimg img { display: block; width: 100%; height: 100%; object-fit: cover; } .rv-page .captcha_divznak { font-weight: 700; font-size: 18px; color: var(--text-muted); } .rv-page input.captcha_divpole { width: 64px; padding: 11px; border-radius: 12px; text-align: center; font-weight: 700; font-size: 19px; background: var(--has-white); border: 1px solid var(--border-light); } .rv-page input[type="submit"] { margin-top: 8px; padding: 15px 28px; border: none; border-radius: 14px; background: var(--has-black); font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: #fff; cursor: pointer; transition: opacity var(--dur-fast) var(--ease-out); width: auto; } .rv-page input[type="submit"]:hover { opacity: 0.88; } /* На широком экране капча и отправка — одна компактная строка. Поля формы остаются на всю ширину; на мобильном сохраняется обычный стек. */ @media (min-width: 641px) { .rv-page .rf_div_ins { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: end; } .rv-page .rf_div_ins > .form_field_line, .rv-page .rf_div_ins > .resultgo { grid-column: 1 / -1; } .rv-page .rf_div_ins > .captcha_div { grid-column: 1; min-width: 0; margin: 4px 0 0; } .rv-page .rf_div_ins > .captcha_div .captcha_body { margin-bottom: 0; } .rv-page .rf_div_ins > .rf_line.has_submit { grid-column: 2; align-self: end; margin: 0; } .rv-page .rf_div_ins > .rf_line.has_submit .rf_submit { height: 60px; margin: 0; padding: 0 28px; } } /* пагинация движка (.pagenavi_ins) → пилюли макета */ .rv-page .pagenavi_ins { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 34px; flex-wrap: wrap; } .rv-page .pagenavi_ins a, .rv-page .pagenavi_ins span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 10px; border-radius: 13px; border: 1px solid var(--border-light); background: var(--has-white); font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--text-secondary); text-decoration: none; } .rv-page .pagenavi_ins span.current, .rv-page .pagenavi_ins .current { background: var(--has-black); color: #fff; border-color: var(--has-black); } .rv-page .pagenavi_ins a:hover { border-color: var(--has-black); color: var(--text-primary); } .rv-page .pagenavi_ins .pages, .rv-page .pagenavi_ins .extend { border: none; background: transparent; min-width: 24px; height: auto; color: var(--text-muted); } @media (max-width: 820px) { .rv-page { padding: 18px 16px 44px; } .rv-page .many_reviews_ins { grid-template-columns: 1fr; } } /* ═══════════════════ КОНТЕНТНЫЕ СТРАНИЦЫ: общая шапка ═══════════════════ */ .has-phero { background: var(--has-white); border-bottom: 1px solid var(--border-light); } .has-phero__inner { max-width: 1120px; margin: 0 auto; padding: 32px 40px 28px; } .has-phero__badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; padding: 7px 14px; border-radius: 999px; background: var(--yellow-wash); color: var(--has-gold-deep); font-family: var(--font-sans); font-weight: 700; font-size: 13px; } .has-phero__title { font-family: var(--font-sans); font-weight: 800; font-size: 34px; line-height: 1.14; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 10px; max-width: 820px; } .has-phero__sub { font-family: var(--font-sans); font-size: 15px; color: var(--text-muted); margin: 0; max-width: 640px; line-height: 1.5; } .has-accent { color: var(--has-yellow); } /* тёмный герой (кэшбек) */ .has-phero--dark { background: var(--has-black); border-bottom: none; } .has-phero--dark .has-faqp-crumbs, .has-phero--dark .has-faqp-crumbs a { color: rgba(255, 255, 255, 0.5); } .has-phero--dark .has-faqp-crumbs__cur { color: rgba(255, 255, 255, 0.8); } .has-phero--dark .has-phero__inner { padding: 30px 40px 40px; } .has-phero--dark .has-phero__badge { background: rgba(249, 205, 46, 0.16); color: var(--has-yellow); } .has-phero--dark .has-phero__title { color: #fff; font-size: 40px; } .has-phero--dark .has-phero__sub { color: rgba(255, 255, 255, 0.66); font-size: 17px; } /* ═══════════════════ AML ═══════════════════ */ .aml-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; max-width: 1120px; margin: 0 auto; padding: 24px 40px 56px; align-items: start; } .aml-toc { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; } .aml-toc__title { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 12px 10px; } .aml-toc a { display: flex; gap: 10px; padding: 8px 12px; border-radius: 10px; text-decoration: none; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.4; color: var(--text-secondary); transition: background 0.14s ease, color 0.14s ease; } .aml-toc a:hover { background: var(--surface-sunken); color: var(--text-primary); } .aml-toc a .n { font-weight: 700; color: var(--text-muted); flex: none; min-width: 18px; } .aml-sec { background: var(--has-white); border: 1px solid var(--border-light); border-radius: 20px; box-shadow: 0 2px 8px rgba(18, 16, 10, 0.04); padding: 26px 30px; margin-bottom: 16px; } .aml-body h2 { font-family: var(--font-sans); font-weight: 800; font-size: 24px; line-height: 1.24; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 14px; scroll-margin-top: 88px; } .aml-body h2 .num { color: var(--has-gold-deep); } .aml-body p { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 14px; } .aml-body p:last-child { margin-bottom: 0; } .aml-body ul, .aml-body ol { margin: 0 0 16px; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 9px; } .aml-body li { position: relative; padding-left: 24px; font-family: var(--font-sans); font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); } .aml-body li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--has-gold); } .aml-body strong { color: var(--text-primary); font-weight: 700; } .aml-body a { color: var(--has-gold-deep); text-decoration: none; font-weight: 600; } /* ═══════════════════ КЭШБЕК ═══════════════════ */ .cb-wrap { max-width: 1120px; margin: 0 auto; padding: 32px 40px 56px; } .cb-h { font-family: var(--font-sans); font-weight: 800; font-size: 24px; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 18px; } .cb-sub { font-family: var(--font-sans); font-size: 15px; color: var(--text-muted); margin: 0 0 16px; } .cb-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 28px; } .cb-tier { background: var(--has-white); border: 1px solid var(--border-light); border-radius: 18px; padding: 20px 22px; box-shadow: 0 2px 8px rgba(18, 16, 10, 0.04); } .cb-tier__range { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; min-height: 30px; } .cb-tier__val { font-family: var(--font-sans); font-weight: 800; font-size: 26px; color: var(--text-primary); margin-bottom: 4px; } .cb-tier__note { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-muted); } .cb-tier--dark { background: var(--has-black); border-color: var(--has-black); } .cb-tier--dark .cb-tier__range { color: rgba(255, 255, 255, 0.55); } .cb-tier--dark .cb-tier__val { color: var(--has-yellow); } .cb-tier--dark .cb-tier__note { color: rgba(255, 255, 255, 0.55); } .cb-card { background: var(--has-white); border: 1px solid var(--border-light); border-radius: 20px; box-shadow: 0 2px 8px rgba(18, 16, 10, 0.04); padding: 26px 28px; margin-bottom: 24px; } .cb-steps { display: flex; flex-direction: column; gap: 16px; } .cb-step { display: flex; align-items: flex-start; gap: 14px; } .cb-step__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--has-yellow); color: var(--has-black); font-family: var(--font-sans); font-weight: 800; font-size: 15px; } .cb-step__n--done { background: var(--has-black); color: var(--has-yellow); } .cb-step__t { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--text-primary); margin-bottom: 2px; } .cb-step__d { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text-secondary); } .cb-cities { display: flex; flex-wrap: wrap; gap: 10px; } .cb-city { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; background: var(--surface-sunken); border: 1px solid var(--border-light); font-family: var(--font-sans); font-size: 14.5px; color: var(--text-primary); } .cb-city svg { color: var(--has-gold); } .cb-conds { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 32px; } .cb-cond { display: flex; align-items: flex-start; gap: 12px; background: var(--has-white); border: 1px solid var(--border-light); border-radius: 16px; padding: 16px 18px; } .cb-cond__ic { flex: none; display: inline-flex; margin-top: 1px; } .cb-cond__ic--yes { color: #2EAD5B; } .cb-cond__ic--no { color: var(--text-muted); } .cb-cond__t { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); } .cb-cond__t strong { color: var(--text-primary); font-weight: 700; } .cb-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--has-yellow); border-radius: 20px; padding: 28px 32px; } .cb-cta__body { flex: 1; min-width: 220px; } .cb-cta__t { font-family: var(--font-sans); font-weight: 800; font-size: 24px; color: var(--has-black); margin-bottom: 4px; } .cb-cta__d { font-family: var(--font-sans); font-size: 14.5px; color: rgba(18, 16, 10, 0.72); } .cb-cta__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--has-black); color: #fff; text-decoration: none; font-family: var(--font-sans); font-weight: 700; font-size: 15px; padding: 14px 24px; border-radius: 14px; } .cb-disclaimer { font-family: var(--font-sans); font-style: italic; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: 24px 0 0; max-width: 760px; } /* ═══════════════════ КОНТАКТЫ ═══════════════════ */ .ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; max-width: 1120px; margin: 0 auto; padding: 24px 40px 56px; align-items: start; } .ct-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .ct-card { background: var(--has-white); border: 1px solid var(--border-light); border-radius: 20px; box-shadow: 0 2px 8px rgba(18, 16, 10, 0.04); padding: 26px 30px; } .ct-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .ct-card__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--has-yellow); color: var(--has-black); } .ct-card__t { font-family: var(--font-sans); font-weight: 800; font-size: 20px; color: var(--text-primary); } .ct-card__hours { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); margin-top: 2px; } .ct-card p { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 12px; } .ct-card__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .ct-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; text-decoration: none; font-family: var(--font-sans); font-weight: 700; font-size: 14px; } .ct-btn--ghost { background: var(--surface-sunken); border: 1px solid var(--border-light); color: var(--text-primary); } .ct-btn--dark { background: var(--has-black); color: #fff; } .ct-btn--primary { background: var(--has-yellow); color: var(--has-black); } .ct-form__t { font-family: var(--font-sans); font-weight: 800; font-size: 24px; color: var(--text-primary); margin: 0 0 6px; } .ct-form__sub { font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); margin: 0 0 18px; } /* движковая форма [contact_form] под макет */ .ct-form .form_field_label label { display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .ct-form .req { color: var(--error); } .ct-form input[type="text"], .ct-form input[type="email"], .ct-form textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: 14px; background: var(--surface-sunken); font-family: var(--font-sans); font-size: 15px; color: var(--text-primary); outline: none; } .ct-form textarea { min-height: 130px; resize: vertical; } .ct-form input:focus, .ct-form textarea:focus { border-color: var(--has-gold) !important; } .ct-form .form_field_line { margin-bottom: 14px; } .ct-form .form_field_errors_ins { margin-top: 6px; font-size: 12.5px; color: var(--error); } .ct-form .captcha_title { display: none; } .ct-form .captcha_body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ct-form .captcha_divimg { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: none; background: repeating-linear-gradient(45deg, #EFEAD9, #EFEAD9 6px, #E4DDC7 6px, #E4DDC7 12px); } .ct-form .captcha_divimg img { display: block; width: 100%; height: 100%; object-fit: cover; } .ct-form input.captcha_divpole { width: 64px; padding: 11px; border-radius: 12px; text-align: center; font-weight: 700; } .ct-form input[type="submit"] { margin-top: 8px; padding: 15px 28px; border: none; border-radius: 14px; background: var(--has-black); font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: #fff; cursor: pointer; width: auto; } .ct-form input[type="submit"]:hover { opacity: 0.88; } .ct-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; } .ct-quick { background: var(--has-black); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 8px; } .ct-quick__title { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); margin-bottom: 6px; } .ct-quick__row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; font-family: var(--font-sans); font-weight: 600; font-size: 14px; } .ct-quick__row:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } .ct-quick__row svg { color: var(--has-yellow); flex: none; } .ct-quick__max { display: inline-flex; align-items: center; justify-content: center; width: 16px; font-weight: 800; font-size: 11px; color: var(--has-yellow); flex: none; } .ct-hours { background: var(--has-white); border: 1px solid var(--border-light); border-radius: 20px; padding: 20px 22px; box-shadow: 0 2px 8px rgba(18, 16, 10, 0.04); } .ct-hours__title { font-family: var(--font-sans); font-weight: 800; font-size: 17px; color: var(--text-primary); margin-bottom: 12px; } .ct-hours__row { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-sans); font-size: 14px; color: var(--text-secondary); padding: 6px 0; } .ct-hours__row b { color: var(--text-primary); font-weight: 700; } .ct-hours__note { font-family: var(--font-sans); font-size: 13px; color: #2EAD5B; margin-top: 8px; } @media (max-width: 900px) { .aml-grid { grid-template-columns: 1fr; padding: 16px 16px 44px; gap: 16px; } .aml-toc { position: static; } .ct-grid { grid-template-columns: 1fr; padding: 16px 16px 44px; } .ct-aside { position: static; } .has-phero__inner { padding: 24px 16px 22px; } .has-phero--dark .has-phero__title, .has-phero__title { font-size: 28px; } .cb-wrap { padding: 24px 16px 44px; } .cb-tiers { grid-template-columns: 1fr 1fr; } .cb-conds { grid-template-columns: 1fr; } } /* ═══════════════════ ПРЕДУПРЕЖДЕНИЕ (/notice/) ═══════════════════ */ .nt-wrap { max-width: 880px; margin: 0 auto; padding: 24px 40px 56px; display: flex; flex-direction: column; gap: 18px; } .nt-intro { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--text-secondary); } .nt-intro p { margin: 0 0 12px; } .nt-sec { background: var(--has-white); border: 1px solid var(--border-light); border-radius: 20px; box-shadow: 0 2px 8px rgba(18, 16, 10, 0.04); padding: 26px 30px; } .nt-sec h2 { font-family: var(--font-sans); font-weight: 800; font-size: 24px; line-height: 1.24; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; } .nt-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--yellow-wash); color: var(--has-gold-deep); flex: none; } .nt-body p { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 14px; } .nt-body p:last-child { margin-bottom: 0; } .nt-body strong { color: var(--text-primary); font-weight: 700; } .nt-body ul { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 12px; } .nt-body li { position: relative; padding-left: 26px; font-family: var(--font-sans); font-size: 15.5px; line-height: 1.55; color: var(--text-secondary); } .nt-body li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--has-gold); } .nt-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--has-black); border-radius: 20px; padding: 24px 28px; } .nt-cta__body { flex: 1; min-width: 220px; } .nt-cta__t { font-family: var(--font-sans); font-weight: 800; font-size: 20px; color: #fff; margin-bottom: 4px; } .nt-cta__s { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.65); } .nt-cta__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--has-yellow); color: var(--has-black); text-decoration: none; font-family: var(--font-sans); font-weight: 700; font-size: 14px; padding: 13px 20px; border-radius: 12px; } @media (max-width: 720px) { .nt-wrap { padding: 16px 16px 44px; } .nt-sec { padding: 22px 20px; } } /* Клиентский блок «Отзывы на Яндекс Картах» в контенте /reviews/ использует хардкод-цвета (#3f3f3f/#6b6b6b/#fff) — в тёмной теме форсируем читаемость. Сам блок — плейсхолдер под официальный виджет Яндекса. */ html.dark .rv-page [style*="#3f3f3f"], body.dark .rv-page [style*="#3f3f3f"] { color: var(--text-primary) !important; } html.dark .rv-page [style*="#6b6b6b"], body.dark .rv-page [style*="#6b6b6b"] { color: var(--text-secondary) !important; } html.dark .rv-page [style*="background:#fff"], html.dark .rv-page [style*="background: #fff"], body.dark .rv-page [style*="background:#fff"], body.dark .rv-page [style*="background: #fff"] { background: var(--surface-card) !important; border-color: var(--border-light) !important; } /* ═══════════════════ ОФИСЫ (/office/) ═══════════════════ */ .of-wrap { max-width: 1120px; margin: 0 auto; padding: 24px 40px 56px; } .of-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .of-card { background: var(--has-white); border: 1px solid var(--border-light); border-radius: 20px; overflow: hidden; box-shadow: 0 2px 8px rgba(18, 16, 10, 0.04); transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.16s; } .of-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(18, 16, 10, 0.10); } .of-cover { position: relative; height: 132px; background: var(--has-cream); border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; } .of-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: var(--has-white); border: 1px solid var(--border-light); border-radius: 999px; padding: 5px 11px; font-family: var(--font-sans); font-weight: 600; font-size: 11.5px; color: var(--text-secondary); } .of-badge svg { color: var(--has-gold); } .of-mark { color: var(--has-gold); opacity: 0.55; } .of-body { padding: 20px 22px; } .of-city { font-family: var(--font-sans); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--text-primary); margin-bottom: 12px; } .of-addr, .of-hours { display: flex; align-items: flex-start; gap: 9px; font-family: var(--font-sans); font-size: 14px; line-height: 1.4; color: var(--text-secondary); margin-bottom: 10px; } .of-addr svg, .of-hours svg { color: var(--text-muted); flex: none; margin-top: 1px; } .of-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; } .of-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--success-wash); color: #1d7a3f; font-family: var(--font-sans); font-weight: 700; font-size: 12px; } .of-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2EAD5B; } .of-book { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 700; font-size: 13.5px; color: var(--has-gold-deep); text-decoration: none; } /* ═══════════════════ О СЕРВИСЕ (/about/) ═══════════════════ */ .ab-wrap { max-width: 1120px; margin: 0 auto; padding: 24px 40px 56px; display: flex; flex-direction: column; gap: 18px; } .ab-sec { background: var(--has-white); border: 1px solid var(--border-light); border-radius: 20px; box-shadow: 0 2px 8px rgba(18, 16, 10, 0.04); padding: 28px 30px; } .ab-sec h2 { font-family: var(--font-sans); font-weight: 800; font-size: 24px; line-height: 1.24; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 16px; } .ab-sec p { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 12px; } .ab-sec p:last-child { margin-bottom: 0; } .ab-sec strong { color: var(--text-primary); font-weight: 700; } .ab-sec ul { margin: 0 0 12px; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 9px; } .ab-sec li { position: relative; padding-left: 24px; font-family: var(--font-sans); font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); } .ab-sec li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--has-gold); } .ab-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ab-link { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--surface-sunken); text-decoration: none; font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text-secondary); transition: background 0.14s ease, color 0.14s ease; } .ab-link:hover { background: var(--yellow-wash); color: var(--has-gold-deep); } .ab-link svg { color: var(--has-gold); flex: none; } /* min-width:0 обязателен: flex-элемент по умолчанию не сжимается меньше своего содержимого, поэтому nowrap-заголовок не обрезался многоточием, а распирал страницу — на 375px «О сервисе» уезжала вбок до 601px. */ .ab-link { min-width: 0; } .ab-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Списки-ссылки внутри авторского контента («Направления обменов» и т.п.): движок отдаёт их обычным