, а CSS движка задаёт ему padding 40px сверху и 80px снизу. На внутренних страницах это нужно, но наши секции главной идут во всю ширину и держат отступы сами — сверху из-за этого между шапкой и hero светилась полоса фона body, снизу висел лишний зазор перед футером. Сужаем правило до главной, чтобы не задеть остальные страницы. ──────────────────────────────────────────────────────────── */ body.home main.main { padding-top: 0; padding-bottom: 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; } .has-dir__ico img { display: block; border-radius: 50%; } .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: 320px 1fr; gap: 48px; align-items: start; } .has-faq-contacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .has-faq { display: flex; flex-direction: column; gap: 8px; } .has-faq__item { background: var(--has-white); border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; } .has-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 15px 18px; background: transparent; border: none; cursor: pointer; text-align: left; font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; color: var(--text-primary); } .has-faq__chev { flex: none; color: var(--text-muted); display: inline-flex; transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .has-faq__q[aria-expanded='true'] .has-faq__chev { transform: rotate(45deg); color: var(--has-gold); } .has-faq__a { padding: 0 18px 16px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); } .has-faq__a[hidden] { display: none; } /* ---- реферальная программа: жёлтый блок ---- */ .has-ref { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; padding: 34px 36px; border-radius: var(--radius-xl); background: var(--has-yellow); } .has-ref__badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 118px; height: 118px; border-radius: 50%; background: var(--has-black); color: #fff; flex: none; text-align: center; } .has-ref__pct { font-weight: 800; font-size: 32px; line-height: 1; color: var(--has-yellow); } .has-ref__cap { font-size: 11px; color: rgba(255, 255, 255, 0.7); margin-top: 6px; max-width: 82px; line-height: 1.3; } .has-ref__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-ref__title { font-weight: 800; font-size: 27px; letter-spacing: var(--ls-heading); color: var(--has-black); margin: 0 0 10px; } .has-ref__text { font-size: 14.5px; line-height: 1.55; color: rgba(18, 16, 10, 0.78); margin: 0; max-width: 620px; } .has-ref__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-ref__cta:hover { opacity: 0.86; color: #fff; } /* ---- SEO-текст ---- */ .has-seo__body { position: relative; } /* Свёрнутый вид: текст в разметке целиком (он нужен поисковику), визуально ограничен по высоте. */ .has-seo__body.is-clamped { max-height: 190px; overflow: hidden; } .has-seo__body.is-clamped::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, rgba(245, 241, 223, 0) 0%, var(--has-cream) 100%); pointer-events: none; } .has-seo__body h3 { font-weight: 800; font-size: 19px; color: var(--text-primary); margin: 24px 0 10px; } .has-seo__body p { font-size: 15px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 12px; } .has-seo [data-toggle-seo] { margin-top: var(--space-4); } /* ---- адаптив ---- */ @media (max-width: 1100px) { .has-steps { grid-template-columns: repeat(3, 1fr); } .has-offices { grid-template-columns: repeat(3, 1fr); } .has-faq-wrap { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 900px) { .has-sec { padding: var(--space-12) 0; } .has-sec__inner { padding: 0 20px; } .has-sec__title { font-size: 26px; } .has-hero__inner { grid-template-columns: 1fr; gap: 32px; padding: 32px 20px 40px; } .has-hero__title { font-size: 32px; } .has-hero__right { justify-content: stretch; } .has-hero__calc { max-width: none; } .has-mons__inner { padding: 14px 20px; justify-content: flex-start; } .has-banner { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px 22px; } .has-banner__title { font-size: 21px; } .has-banners__track { min-height: 300px; } .has-steps, .has-advs, .has-dirs, .has-reviews { grid-template-columns: 1fr; } .has-offices { grid-template-columns: repeat(2, 1fr); } .has-ref { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; } .has-ref__title { font-size: 22px; } } @media (max-width: 640px) { .has-hero__stats { grid-template-columns: 1fr; } .has-hero__stat:nth-child(2), .has-hero__stat:nth-child(4) { padding-left: 0; border-left: none; } .has-hero__stat:nth-child(2), .has-hero__stat:nth-child(3), .has-hero__stat:nth-child(4) { padding-top: 16px; border-top: 1px solid var(--border-light); } .has-offices { grid-template-columns: 1fr; } } /* ──────────────────────────────────────────────────────────── КАЛЬКУЛЯТОР ОБМЕНА Значения сняты с отрендеренного макета ExchangeCalc: карточка 440×535, padding 18, radius 24, рамка 1px полоса вкладок 402×46, padding 4, radius 14, рамка 1px вкладка 194×36, radius 11, 13.5px/700 поле 402×95, padding 13/14, radius 16, рамка 1px чип валюты 116×44, radius 999, padding 5/12/5/5, 15px/700 сумма 22px/700 · swap 44×44, круг, обводка 3px белым строка курса 13px · примечание 12px ──────────────────────────────────────────────────────────── */ .has-calc { position: relative; width: 100%; box-sizing: border-box; background: var(--has-white); border: 1px solid var(--border-light); border-radius: 24px; box-shadow: var(--shadow-card); padding: 18px; font-family: var(--font-sans); } /* ---- вкладки ---- */ .has-calc__tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-sunken); border: 1px solid var(--border-light); border-radius: 14px; margin-bottom: 12px; } .has-calc__tab { flex: 1; height: 36px; padding: 0 6px; border: none; border-radius: 11px; background: transparent; font-family: var(--font-sans); font-weight: 700; font-size: 13.5px; color: var(--text-muted); cursor: pointer; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .has-calc__tab.is-active { background: var(--has-yellow); color: var(--has-black); } /* ---- поля сумм ---- */ .has-calc__row { position: relative; display: flex; flex-direction: column; gap: 8px; } .has-calc__field { background: var(--surface-sunken); border: 1px solid var(--border-light); border-radius: 16px; padding: 13px 14px; } .has-calc__label { font-size: 12.5px; line-height: 1.2; color: var(--text-muted); margin-bottom: 8px; } .has-calc__control { display: flex; align-items: center; gap: 10px; } /* Селектор движка input:not([type="submit"]) имеет специфичность (0,1,1) и перебивает одиночный класс. Поднимаем до (0,2,1), иначе поле получает фон, рамку и высоту 60px вместо 27 — и вся карточка становится выше. */ .has-calc input.has-calc__input { flex: 1; min-width: 0; height: auto; border: none; border-radius: 0; background: transparent; box-shadow: none; font-family: var(--font-sans); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--text-primary); text-align: right; outline: none; padding: 1px 2px; margin: 0; } /* Движок вешает на инпуты вложенное правило &:not(:disabled):hover / :focus { border: 1px solid var(--Colors-Fills-Primary) !important; box-shadow: 0 0 0 1px var(--Colors-Fills-Primary) inset !important; } Раньше эта рамка была синей и терялась, но мост перекрасил переменную в фирменный жёлтый — и она стала бросаться в глаза при наведении и вводе. В макете у поля суммы никакой рамки нет, поэтому гасим. Перебить можно только своим !important: у движка он тоже стоит. */ .has-calc input.has-calc__input:hover, .has-calc input.has-calc__input:focus, .has-calc input.has-calc__input:focus-visible { border: none !important; box-shadow: none !important; outline: none !important; background: transparent !important; } /* ---- swap: круг с белой обводкой, «вырезающей» его из промежутка ---- */ .has-calc__swap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid var(--has-white); background-color: var(--has-yellow); color: var(--has-black); /* В макете у кнопки есть жёлтое свечение — rgba(249,205,46,.3) 0 4px 14px */ box-shadow: var(--shadow-yellow-sm); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); } .has-calc__swap:hover { background-color: var(--has-yellow-light); } /* ---- чип валюты ---- */ .has-pick { position: relative; flex: none; } .has-pick[hidden] { display: none; } .has-pick__btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 5px 12px 5px 5px; background-color: var(--has-white); border: 1px solid var(--border-light); border-radius: var(--radius-pill); cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--text-primary); white-space: nowrap; } /* В макете иконка в чипе 26px, а в строке списка — 32px (не наоборот). */ .has-pick__btn img { display: block; width: 26px; height: 26px; border-radius: 50%; } .has-pick__badge { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--has-graphite); color: var(--has-white); font-size: 10px; font-weight: 800; letter-spacing: -0.02em; flex: none; } .has-pick__menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 248px; max-height: 264px; overflow-y: auto; background: var(--has-white); border: 1px solid var(--border-light); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; } .has-pick__menu[hidden] { display: none; } .has-pick__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: transparent; border: none; border-radius: 10px; cursor: pointer; text-align: left; font-family: var(--font-sans); } .has-pick__item:hover { background: var(--yellow-wash); } .has-pick__ico { flex: none; } .has-pick__ico img { display: block; width: 32px; height: 32px; border-radius: 50%; } .has-pick__text { display: flex; flex-direction: column; min-width: 0; } .has-pick__t1 { font-weight: 700; font-size: 14px; color: var(--text-primary); } .has-pick__t2 { font-size: 12px; color: var(--text-muted); } /* ---- бейдж сети ---- Четыре USDT (TRC20/ERC20/BEP20/TON) в списке иначе неразличимы: строка «USDT · Tether» у них одинаковая. Цвет бейджа — фирменный цвет сети, приходит с сервера (has_net_color). */ .has-net { display: inline-flex; align-self: flex-start; /* иначе pill растянется на всю строку */ color: #fff; font-weight: 700; font-size: 10px; line-height: 1.35; padding: 2px 7px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; } /* Бейдж рядом с выбранной монетой — снаружи кнопки-чипа, как в макете. */ /* Бейдж — соседний flex-элемент строки, а не потомок .has-pick: вертикальное центрирование даёт align-items:center самой строки, горизонтальный отступ — её gap. Собственных отступов не задаём. */ .has-pick__net { display: inline-flex; align-items: center; flex: none; } /* Активный пункт: подложка + золотая галочка справа. */ .has-pick__item.is-active { background: var(--yellow-wash); } .has-pick__check { flex: none; margin-left: auto; } /* ---- поле города ---- */ .has-calc__city { margin-top: 8px; } .has-calc__city .has-pick { width: 100%; } .has-calc__city .has-pick__btn { width: 100%; height: auto; justify-content: flex-start; gap: 10px; padding: 0; border: none; background: transparent; } .has-pick__pin { color: var(--has-gold); display: inline-flex; flex: none; } .has-pick__citytext { display: flex; flex-direction: column; min-width: 0; text-align: left; } .has-pick__addr { font-weight: 400; font-size: 12px; line-height: 15px; color: var(--text-muted); margin-top: 0; } .has-pick__citytext .has-pick__label { line-height: 19px; } .has-calc__city .has-pick__btn > svg:last-child { margin-left: auto; color: var(--text-muted); flex: none; } /* Меню вложено в .has-pick, а тот — внутрь отступов поля (13px 14px). Чтобы список занял всю ширину поля, как в макете, выносим его за горизонтальные отступы отрицательными сдвигами. */ .has-calc__city .has-pick__menu { left: -14px; right: -14px; width: auto; max-height: 260px; } /* Пункт в макете 46px: две строки без лишнего интерлиньяжа. */ .has-calc__city .has-pick__item { padding: 8px 10px; align-items: flex-start; } .has-calc__city .has-pick__t1 { font-size: 15px; font-weight: 700; line-height: 17px; } .has-calc__city .has-pick__t2 { font-size: 13px; line-height: 13px; margin-top: 0; } .has-calc__bank { margin-top: 4px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--yellow-wash); font-size: 13px; color: var(--text-secondary); } .has-calc__bank[hidden] { display: none; } /* ---- курс и резерв ---- */ /* В макете блок курса/резерва высотой 59 и без верхнего margin — воздух над ним создаётся внутренним padding. */ .has-calc__meta { margin-top: 0; padding-top: 19px; display: flex; flex-direction: column; gap: 6px; } /* В макете строка курса ровно 17px при кегле 13 — иконка не должна растягивать строку, поэтому line-height фиксирован. */ .has-calc__mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 17px; color: var(--text-secondary); } .has-calc__mrow svg { display: block; } .has-calc__mlbl { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); } .has-calc__mlbl svg { color: var(--has-gold); flex: none; } .has-calc__mval { font-weight: 700; color: var(--text-primary); text-align: right; } .has-calc__error { font-size: 13px; color: var(--error); font-weight: 600; } .has-calc__error[hidden] { display: none; } /* ---- кнопка и примечание ---- */ .has-calc__submit { display: flex; align-items: center; justify-content: center; margin-top: 10px; height: var(--control-h-lg); border-radius: var(--radius-button-lg); background: var(--has-yellow); color: var(--has-black); font-family: var(--font-sans); font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: var(--shadow-yellow-sm); transition: background var(--dur-fast) var(--ease-out); } .has-calc__submit:hover { background: var(--has-yellow-light); color: var(--has-black); } .has-calc__submit.is-disabled { background: var(--disabled-bg); color: var(--disabled-text); box-shadow: none; pointer-events: none; } .has-calc__note { margin: 12px 0 0; text-align: center; font-size: 12px; line-height: 14px; color: var(--text-muted); } @media (max-width: 640px) { .has-calc { padding: 14px; border-radius: 20px; } .has-calc__tab { font-size: 12.5px; } .has-calc__input { font-size: 20px; } .has-pick__menu { width: 220px; } } /* ──────────────────────────────────────────────────────────── МОДАЛКА ВХОДА И РЕГИСТРАЦИИ Разметка форм — движковая (шорткоды login_form / register_form / lostpass_page), поэтому стилизуем его классы: .form_field_line, .log_input, .reg_input, .captcha_div и т.д. Значения из макета: карточка 440, r24, padding 30/30/28, оверлей rgba(18,16,10,.55), кнопка отправки ЧЁРНАЯ. ──────────────────────────────────────────────────────────── */ .has-auth { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px; overflow-y: auto; } .has-auth[hidden] { display: none; } .has-auth__overlay { position: fixed; inset: 0; background: rgba(18, 16, 10, 0.55); } .has-auth__card { position: relative; width: 100%; max-width: 440px; margin: auto; /* 64px сверху — в обновлённом макете вкладки опущены ниже крестика, чтобы он не наезжал на «Регистрация». */ padding: 64px 30px 28px; background: var(--has-white); border: 1px solid var(--border-light); border-radius: 24px; box-shadow: 0 24px 68px rgba(18, 16, 10, 0.28); } .has-auth__x { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 10px; background: var(--surface-sunken); color: var(--text-muted); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } /* Ховера в макете нет, но кнопке нужна обратная связь — берём соседний по светлоте токен, чтобы не спорить с макетом яркостью. */ .has-auth__x:hover { background: var(--border-light); color: var(--text-primary); } /* заголовок только для скринридеров — визуально роль играют вкладки */ .has-auth__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .has-auth__tabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 22px; background: var(--surface-sunken); border: 1px solid var(--border-light); border-radius: 14px; } .has-auth__tabs[hidden] { display: none; } .has-auth__tab { flex: 1; padding: 10px 8px; text-align: center; border: none; border-radius: 11px; background: transparent; font-family: var(--font-sans); font-weight: 700; font-size: 14px; color: var(--text-muted); cursor: pointer; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .has-auth__tab.is-active { background: var(--has-yellow); color: var(--has-black); box-shadow: 0 2px 8px rgba(249, 205, 46, 0.30); } .has-auth__pane[hidden] { display: none; } /* ---- приводим движковую разметку формы к макету ---- */ /* Заголовки форм лишние: на входе и регистрации их роль выполняют вкладки, на восстановлении — наш собственный заголовок из макета. */ .has-auth .log_div_title, .has-auth .reg_div_title, .has-auth .lp_div_title { display: none; } /* Движок оформляет свои контейнеры как самостоятельную карточку (белый фон, padding 24, рамка, radius 28). Внутри модалки это даёт «коробку в коробке» — обнуляем, карточкой служит .has-auth__card. */ .has-auth .not_frame, .has-auth .log_div_wrap, .has-auth .log_div, .has-auth .log_div_ins, .has-auth .reg_div_wrap, .has-auth .reg_div, .has-auth .reg_div_ins, .has-auth .lp_div_wrap, .has-auth .lp_div, .has-auth .lp_div_ins { background: transparent; border: none; border-radius: 0; padding: 0; margin: 0; box-shadow: none; } .has-auth .form_field_line { margin-bottom: 14px; } .has-auth .form_field_label label { display: block; margin-bottom: 6px; font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--text-secondary); } .has-auth .form_field_label .req { color: var(--error); } /* поля ввода: .au-in из макета — 100%, r14, padding 14/16, 15px */ .has-auth input[type="text"], .has-auth input[type="email"], .has-auth input[type="password"] { width: 100%; height: auto; 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; box-shadow: none; } /* движок вешает на инпуты жёлтую рамку через !important — гасим */ .has-auth input[type="text"]:hover, .has-auth input[type="text"]:focus, .has-auth input[type="email"]:hover, .has-auth input[type="email"]:focus, .has-auth input[type="password"]:hover, .has-auth input[type="password"]:focus { border: 1px solid var(--has-gold) !important; box-shadow: none !important; } .has-auth input::placeholder { color: var(--text-muted); opacity: 0.7; } .has-auth .form_field_errors_ins { margin-top: 8px; font-size: 12.5px; color: var(--error); } /* скрытые движком поля (персональный пин) остаются скрытыми */ .has-auth .hidden_line { display: none; } /* ---- капча ---- В макете капча — открытый ряд плиток без подложки и без заголовка: две плитки 46x46, знак действия, поле ответа 64px, кнопка обновления. */ .has-auth .captcha_div { margin: 18px 0 4px; padding: 0; background: transparent; border: none; border-radius: 0; } /* Подписи «Введите ответ» в макете нет — сам ряд читается однозначно. */ .has-auth .captcha_title { display: none; } .has-auth .captcha_body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Плитка 46x46 из макета. Картинку с цифрой генерирует движок — она уже идёт со штриховкой, поэтому просто кадрируем её в плитку нужного размера. */ .has-auth .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); } .has-auth .captcha_divimg img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .has-auth .captcha_divznak { font-weight: 700; font-size: 18px; color: var(--text-muted); } .has-auth input.captcha_divpole { width: 64px; padding: 11px; border-radius: 12px; text-align: center; font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; background: var(--has-white); } .has-auth .captcha_reload { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--text-muted); text-decoration: none; } /* у движка своя фоновая иконка — собственный символ не добавляем */ .has-auth .captcha_reload { background-size: 18px 18px; background-position: center; background-repeat: no-repeat; opacity: 0.65; } .has-auth .captcha_reload:hover { opacity: 1; background-color: var(--has-white); } /* ---- согласие с правилами ---- Разметка движка:

. Строка согласия — единственный .reg_line с прямым потомком , у строки сабмита внутри только

. Этим и различаем, без :has(). */ .has-auth .reg_line > label { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); cursor: pointer; } .has-auth .reg_line > label a { color: var(--has-gold-deep); text-decoration: none; } /* Инпут остаётся в DOM и реально переключается — сервер читает check_rule. Меняем только внешний вид, поведение чекбокса нативное. */ .has-auth input[name="check_rule"] { position: relative; flex: none; width: 22px; height: 22px; margin: 1px 0 0; padding: 0; appearance: none; -webkit-appearance: none; border: 2px solid #D8D2C2; border-radius: 6px; background: transparent; cursor: pointer; } .has-auth input[name="check_rule"]:checked { background: var(--has-yellow); border-color: var(--has-yellow); } /* Галочка нарисована двумя границами — не требует ни иконки, ни шрифта. */ .has-auth input[name="check_rule"]:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px; border: solid var(--has-black); border-width: 0 3px 3px 0; transform: rotate(45deg); } .has-auth input[name="check_rule"]:focus-visible { outline: 2px solid var(--has-gold-deep); outline-offset: 2px; } /* ---- регистрация: поля сеткой 2x2 ---- Логин | E-mail Пароль | Пароль снова Капча, согласие и кнопка идут во всю ширину. */ .has-auth [data-auth-pane="register"] .reg_div_ins { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .has-auth [data-auth-pane="register"] .reg_div_ins > .form_field_line { margin-bottom: 0; } .has-auth [data-auth-pane="register"] .reg_div_ins > .captcha_div, .has-auth [data-auth-pane="register"] .reg_div_ins > .reg_line:not(.form_field_line), .has-auth [data-auth-pane="register"] .reg_div_ins > .resultgo { grid-column: 1 / -1; } /* Движковый .form_field_clear — распорка под float, в гриде она лишний ряд. */ .has-auth .form_field_clear, .has-auth .reg_line:not(.form_field_line) > .clear, .has-auth .log_line:not(.form_field_line) > .clear { display: none; } /* Дубль: ссылка «Авторизация» под кнопкой — её роль выполняет вкладка и наша строка «Уже есть аккаунт?» ниже. */ .has-auth .reg_line_subm_right { display: none; } .has-auth .reg_line_subm_left { float: none; width: auto; } /* ---- кнопка отправки: в макете чёрная ---- */ .has-auth input[type="submit"], .has-auth .log_submit, .has-auth .reg_submit { width: 100%; margin-top: 2px; padding: 15px; 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); } .has-auth input[type="submit"]:hover { opacity: 0.88; } /* В макете отступ над кнопкой разный: вход 16px, регистрация 18px. */ .has-auth [data-auth-pane="login"] input[type="submit"] { margin-top: 16px; } .has-auth [data-auth-pane="register"] input[type="submit"] { margin-top: 18px; } .has-auth [data-auth-pane="forgot"] input[type="submit"] { margin-top: 16px; } /* В макете «Забыли пароль?» стоит СПРАВА и НАД кнопкой «Войти». Движок кладёт кнопку и ссылки в один .log_line: кнопку слева, ссылки справа. Разметку не трогаем — меняем порядок флексом. */ .has-auth .log_line:not(.form_field_line) { display: flex; flex-direction: column; } .has-auth .log_line_subm_left, .has-auth .log_line_subm_right { float: none; width: auto; } .has-auth .log_line_subm_left { order: 2; } /* Движок делает этот блок flex-контейнером, поэтому text-align на него не действует — прижимаем ссылку через justify-content. */ .has-auth .log_line_subm_right { order: 1; display: flex; justify-content: flex-end; margin: 8px 0 0; padding: 0; font-size: 13px; } /* Обёртка кнопки: у движка на ней собственные отступы под float-раскладку. */ .has-auth .log_line_subm_left { margin: 0; padding: 0; } .has-auth .log_line_subm_right p { margin: 0; } /* Ссылку «Регистрация» прячем — у нас своя строка «Нет аккаунта?» ниже. Вместе с ней снимаем движковый разделитель «|»: он рисуется через ::after и без второй ссылки висел одинокой палочкой перед «Забыли пароль?». */ .has-auth .log_line_subm_right p:first-child { display: none; } .has-auth .log_line_subm_right::after { content: none; } .has-auth .log_line_subm_right a { color: var(--has-gold-deep); text-decoration: none; font-weight: 400; } .has-auth .log_line_subm_right a:hover { color: var(--has-black); } /* ---- подвал модалки и экран восстановления ---- */ .has-auth__title { margin: 0 0 6px; font-family: var(--font-sans); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--text-primary); } .has-auth__foot { margin-top: 16px; text-align: center; font-family: var(--font-sans); font-size: 13.5px; color: var(--text-muted); } .has-auth__link { border: none; background: transparent; padding: 0 0 0 4px; font-family: var(--font-sans); font-weight: 700; font-size: 13.5px; color: var(--has-gold-deep); cursor: pointer; } .has-auth__link:hover { color: var(--has-black); } .has-auth__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 0; border: none; background: transparent; font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; color: var(--text-muted); cursor: pointer; } .has-auth__back:hover { color: var(--text-primary); } .has-auth__hint { margin-bottom: 16px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); } .has-auth .resultgo { margin-top: 12px; font-size: 13.5px; } @media (max-width: 640px) { .has-auth { padding: 20px 14px; } .has-auth__card { padding: 24px 20px 22px; border-radius: 20px; } }