/* Логотип — картинка (решение владельца 19.09.2026). Ширина — как у прежней надписи: 170px, в подвале 201px, поэтому раскладка шапки не сдвинулась. В шапке и меню два файла: logo_dark.svg (тёмные буквы) для светлой темы и logo_light.svg (белые буквы) для тёмной; нужный выбирает data-theme на , который выставляется до первой отрисовки. */ .logo { display: inline-flex; align-items: center; flex: none; } .logo img { display: block; width: 170px; height: auto; } .logo--lg img { width: 201px; } .logo img[data-logo="light"], [data-theme="dark"] .logo img[data-logo="dark"] { display: none; } [data-theme="dark"] .logo img[data-logo="light"] { display: block; } .btn { --btn-h: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--btn-h); padding: 0 26px; border-radius: var(--radius); font-family: var(--font-text); font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease); } .btn:active { transform: translateY(1px); } .btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; } .btn--primary { background: var(--red); color: #fff; } .btn--primary:hover { background: var(--red-dark); color: #fff; box-shadow: 0 12px 26px rgba(228, 2, 45, .3); } .btn--navy { background: var(--navy); color: #fff; } .btn--navy:hover { background: var(--navy-3); color: #fff; } .btn--dark { background: var(--black); color: #fff; } .btn--dark:hover { background: var(--navy); color: #fff; } .btn--white { background: #fff; color: var(--black); } .btn--white:hover { background: var(--mist); color: var(--black); } .btn--outline { background: transparent; color: var(--outline-ink); border-color: var(--outline-ink); } .btn--outline:hover { background: var(--outline-ink); color: var(--page-bg); } .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .8); } .btn--outline-light:hover { background: #fff; color: var(--black); } .btn--ghost { color: var(--ink); padding-inline: 0; } .btn--ghost:hover { color: var(--red); } .btn--sm { --btn-h: 48px; font-size: 15px; padding-inline: 20px; } .btn--xs { --btn-h: 44px; font-size: 14px; padding-inline: 16px; } .btn--lg { --btn-h: 64px; font-size: 18px; padding-inline: 34px; } .btn--block { width: 100%; } .btn--icon { width: var(--btn-h); padding: 0; } .btn.is-loading { pointer-events: none; position: relative; color: transparent !important; } .btn.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: #fff; animation: bzSpin .7s linear infinite; } .btn--outline.is-loading::after { color: var(--outline-ink); } .arrow-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--red); } .arrow-link i { font-style: normal; transition: transform .2s var(--ease); } .arrow-link:hover { color: var(--red); } .arrow-link:hover i { transform: translateX(5px); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); background: transparent; color: var(--ink-2); font-size: 15px; transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease); } .icon-btn:hover { border-color: var(--outline-ink); color: var(--outline-ink); } .icon-btn--lg { width: 44px; height: 44px; } .icon-btn--filled { background: var(--red); border-color: var(--red); color: #fff; } .icon-btn--filled:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; } .icon-btn--badged { position: relative; } .icon-btn__badge { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; } .field { display: flex; flex-direction: column; min-width: 0; } .field--span2 { grid-column: span 2; } .field__label { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--gray); margin-bottom: 8px; } .input, .textarea { width: 100%; height: 56px; padding: 0 18px; background: transparent; border: 1px solid var(--field-border); border-radius: var(--radius); color: var(--ink); font-size: 16px; font-family: var(--font-text); font-variant-numeric: tabular-nums; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .textarea { height: 120px; padding: 16px 18px; resize: vertical; line-height: 1.5; } .input::placeholder, .textarea::placeholder { color: var(--gray); } .input:hover, .textarea:hover { border-color: var(--ink-2); } .input:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(228, 2, 45, .12); } .input.is-filled, .textarea.is-filled { border-color: var(--ink); } .input--plate { height: 68px; font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .input--sm { height: 48px; font-size: 15px; padding-inline: 16px; } .field.has-error .input, .field.has-error .textarea, .field.has-error .select__button { border-color: var(--red); } .field__error { display: none; font-size: 12px; color: var(--red); margin-top: 6px; } .field.has-error .field__error { display: block; } .field__hint { font-size: 12px; color: var(--gray); margin-top: 6px; line-height: 1.45; } .check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; user-select: none; } .check input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .check__box { flex: none; width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--field-border); background: transparent; color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: background-color .18s var(--ease), border-color .18s var(--ease); } .check__box::after { content: "✓"; opacity: 0; transform: scale(.5); transition: opacity .15s, transform .15s; } input:checked + .check__box { background: var(--red); border-color: var(--red); } input:checked + .check__box::after { opacity: 1; transform: none; } input:focus-visible + .check__box { outline: 2px solid var(--red); outline-offset: 2px; } .check__text { font-size: 13px; line-height: 1.5; color: var(--ink-2); padding-top: 2px; } .check.has-error .check__box { border-color: var(--red); } .check-row { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color .18s var(--ease); } .check-row:hover { border-color: var(--ink-2); } .check-row:has(input:checked) { border-color: var(--ink); } .check-row__count { margin-left: auto; font-size: 13px; color: var(--gray); font-variant-numeric: tabular-nums; } .select { position: relative; } .select__button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 56px; padding: 0 18px; background: transparent; border: 1px solid var(--field-border); border-radius: var(--radius); color: var(--ink); font-size: 16px; text-align: left; cursor: pointer; transition: border-color .2s var(--ease); } .select__button:hover { border-color: var(--ink-2); } .select.is-open .select__button { border-color: var(--ink); } .select__button.is-placeholder { color: var(--gray); } .select__caret { flex: none; position: relative; width: 10px; height: 10px; font-size: 0; color: var(--gray); transition: transform .2s var(--ease); } .select__caret::after { content: ""; position: absolute; left: 1px; top: 0; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); } .select.is-open .select__caret { transform: rotate(180deg); } .select--sm .select__button { height: 48px; font-size: 15px; } .select--xs .select__button { height: 40px; font-size: 14px; padding-inline: 14px; } .select__list { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; max-height: 280px; overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--pop-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; } .select.is-open .select__list { opacity: 1; visibility: visible; transform: none; } .select.is-up .select__list { top: auto; bottom: calc(100% + 6px); } .select__option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 8px; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; } .select__option:hover, .select__option.is-active { background: var(--section-bg); } .select__option[aria-selected="true"] { color: var(--red); font-weight: 600; } .select__option small { color: var(--gray); font-size: 13px; } .chip { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--field-border); background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } .chip__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .chip:hover { border-color: var(--ink); } .chip:focus-within { outline: 2px solid var(--red); outline-offset: 2px; } .chip.is-active { background: var(--chip-active-bg); border-color: var(--chip-active-bg); color: var(--chip-active-fg); font-weight: 600; } .chip--red.is-active { background: var(--red); border-color: var(--red); color: #fff; } .chip--lg { height: 44px; padding-inline: 18px; } .chip__caret { position: relative; width: 9px; height: 9px; font-size: 0; opacity: .7; flex: none; } .chip__caret::after { content: ""; position: absolute; left: 1px; top: 0; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); } .chip__count { background: rgba(255, 255, 255, .24); border-radius: 999px; padding: 1px 7px; font-size: 12px; font-variant-numeric: tabular-nums; } .chip--solid { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; } .chip--solid:hover { background: var(--red-dark); border-color: var(--red-dark); } /* Сброс условий в строке выбранных фильтров: чип без заливки, рамка и текст красные (решение владельца 19.09.2026). */ .chip--reset { border-color: var(--red); color: var(--red); } .chip--reset:hover { border-color: var(--red-dark); color: var(--red-dark); } .chip--static { cursor: default; } .chip--static:hover { border-color: var(--field-border); } .chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chip-row--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; } .chip-row--scroll::-webkit-scrollbar { display: none; } .chip-row--scroll > * { flex: none; } .segmented { display: inline-flex; gap: 6px; padding: 4px; background: var(--section-bg); border-radius: var(--radius); } .segmented__item { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius); font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); } .segmented__item:hover { color: var(--ink); } .segmented__item.is-active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 2px 8px rgba(11, 13, 18, .06); } .segmented--sm .segmented__item { height: 36px; padding-inline: 14px; } .badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; background: var(--red); color: #fff; white-space: nowrap; } .badge--dark { background: var(--black); color: #fff; } .badge--white { background: #fff; color: var(--black); border: 1px solid rgba(11, 13, 18, .18); } .tag { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--border-alt); border-radius: 999px; color: var(--ink-2); font-size: 11px; white-space: nowrap; } .photo { position: relative; overflow: hidden; background: linear-gradient(150deg, #13315C, #0E2547 65%, #081729); } .photo--b { background: linear-gradient(150deg, #1B4174, #0E2547 60%, #071426); } .photo--c { background: linear-gradient(140deg, #0E2547, #13315C 70%, #081729); } .photo--d { background: linear-gradient(160deg, #1B4174, #13315C 55%, #071426); } .photo::before { content: ""; position: absolute; inset: 0; } .photo__note { position: absolute; left: 14px; bottom: 12px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gray); } .photo__frame { border: 1px solid rgba(255, 255, 255, .16); background: transparent; } .topbar { height: var(--topbar-h); background: var(--topbar-bg); color: var(--gray); font-size: 12px; } .topbar__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .topbar__place { display: flex; align-items: center; gap: 10px; } .topbar__slash { color: var(--red); font-weight: 700; } .topbar__side { display: flex; align-items: center; gap: 18px; } .topbar__sep { color: var(--navy-2); } .topbar a { color: var(--mist); } /* Адрес — ссылка на окно выбора города: цвет строки сохраняется, при наведении — как у ссылки на почту рядом. */ .topbar__place a { color: inherit; } .topbar__place a:hover { color: var(--mist); } .header { position: sticky; top: 0; z-index: 90; background: var(--page-bg); border-bottom: 1px solid var(--border); transition: box-shadow .25s var(--ease), background-color var(--dur) var(--ease), transform .34s var(--ease); } .header.is-stuck { box-shadow: 0 10px 30px rgba(11, 13, 18, .09); } .header.is-hidden { transform: translateY(-100%); } .header__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; } .nav { display: flex; align-items: center; gap: 26px; font-size: 15px; font-weight: 500; } .nav__link { position: relative; padding: 4px 0; color: var(--ink); white-space: nowrap; } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); } .nav__link:hover::after { transform: scaleX(1); } .nav__link.is-current { color: var(--ink); } .nav__link.is-current::after { transform: scaleX(1); } .header__side { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 16px; } .header__phone { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .header__phone b { white-space: nowrap; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--logo-ink); font-variant-numeric: tabular-nums; } .header__phone span { font-size: 11px; color: var(--gray); text-transform: uppercase; letter-spacing: .1em; } .header__burger { display: none; } @media (max-width: 1520px) { .nav { gap: 18px; font-size: 14px; } .header__inner { gap: 20px; } .header__side { gap: 12px; } } @media (max-width: 1300px) { .header__phone { display: none; } } @media (max-width: 1180px) { .nav { display: none; } .header__burger { display: inline-flex; } .header__phone { display: none; } .header .btn--callback { display: none; } } @media (max-width: 1180px) { .header__inner { height: 62px; gap: 12px; } .topbar { display: none; } } @media (max-width: 560px) { .header__inner { height: 56px; } .header__search { display: none; } } .drawer { position: fixed; inset: 0; z-index: 130; visibility: hidden; pointer-events: none; transition: visibility .3s var(--ease); } .drawer.is-open { visibility: visible; pointer-events: auto; } .drawer__backdrop { position: absolute; inset: 0; background: rgba(7, 20, 38, .62); opacity: 0; transition: opacity .3s var(--ease); } .drawer.is-open .drawer__backdrop { opacity: 1; } .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); background: var(--page-bg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .34s var(--ease); overflow-y: auto; } .drawer.is-open .drawer__panel { transform: none; } .drawer__head { display: flex; align-items: center; justify-content: space-between; height: 62px; padding-inline: 20px; border-bottom: 1px solid var(--border); flex: none; } .drawer__nav { padding: 8px 20px 20px; } .drawer__link { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); } .drawer__link i { font-style: normal; color: var(--red); font-size: 16px; } .drawer__foot { padding: 20px; display: flex; flex-direction: column; gap: 12px; } .drawer__phone { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); color: var(--ink-2); font-size: 15px; transition: border-color .2s var(--ease), color .2s var(--ease); } .theme-toggle:hover { border-color: var(--outline-ink); color: var(--outline-ink); } .theme-toggle__sun { display: none; } [data-theme="dark"] .theme-toggle__sun { display: block; } [data-theme="dark"] .theme-toggle__moon { display: none; } .footer { background: var(--footer-bg); color: var(--mist); margin-top: 96px; } .footer__top { padding-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: 320px repeat(4, minmax(0, 1fr)); gap: 48px; } .footer__about { display: flex; flex-direction: column; gap: 24px; } .footer__text { font-size: 14px; line-height: 1.55; color: var(--gray); max-width: 260px; } .footer_messengers { display: flex; gap: 8px; } .footer_messenger { width: 44px; height: 44px; border: 1px solid var(--navy-2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--mist); transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease); } .footer_messenger:hover { border-color: var(--red); color: #fff; } .footer_messenger svg { width: 20px; height: 20px; } .footer__col { display: flex; flex-direction: column; gap: 14px; } .footer__col h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--gray); margin-bottom: 4px; } .footer__links > div { display: flex; flex-direction: column; gap: 14px; } .footer__col a { font-size: 15px; color: var(--mist); } .footer__col a:hover { color: #fff; } .footer__toggle { display: none; } .footer__col--contacts .footer__links > div { gap: 14px; } .footer__phone { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; } .footer__phone:hover { color: var(--red); } .footer__addr { font-size: 15px; line-height: 1.5; color: var(--mist); } .footer__hours { font-size: 15px; color: var(--gray); } .footer__age { width: 34px; height: 22px; flex: none; border: 1px solid var(--navy-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--gray); font-variant-numeric: tabular-nums; } .footer__bottom { margin-top: clamp(32px, 4vw, 56px); padding: 24px 0 28px; border-top: 1px solid var(--navy-2); display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; } .footer__legal { font-size: 12px; line-height: 1.6; color: var(--slate); max-width: 720px; } .footer__meta { display: flex; align-items: center; gap: 20px; white-space: nowrap; font-size: 12px; color: var(--gray); } .footer__meta a:hover { color: #fff; } .footer__meta > span { color: var(--slate); } .footer__stripe { height: 6px; background: var(--red); } @media (max-width: 1240px) { .footer { margin-top: 56px;} .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; } .footer__about { grid-column: span 2; } } @media (max-width: 700px) { .footer__top { display: flex; flex-direction: column; gap: 0; } .footer__about { margin-bottom: 22px; order: 1; } .footer__col--contacts { order: 2; border-top: 0; margin-bottom: 8px; } .footer__col--contacts .footer__toggle { display: none; } .footer__col--contacts .footer__links { grid-template-rows: 1fr; } .footer__col--contacts .footer__links > div { padding-bottom: 0; gap: 10px; } .footer__col:not(.footer__col--contacts) { order: 3; } .footer__col { gap: 0; border-top: 1px solid var(--navy-2); } .footer__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; color: var(--mist); font-size: 15px; cursor: pointer; } .footer__toggle i { font-style: normal; color: var(--gray); font-size: 18px; transition: transform .2s var(--ease); } .footer__col.is-open .footer__toggle i { transform: rotate(45deg); } .footer__col h4 { display: none; } .footer__links { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); } .footer__col.is-open .footer__links { grid-template-rows: 1fr; } .footer__links > div { overflow: hidden; gap: 12px; } .footer__col.is-open .footer__links > div { padding-bottom: 18px; } .footer__bottom { flex-direction: column; gap: 16px; } .footer__meta { flex-direction: column; align-items: flex-start; gap: 8px; } } @media (max-width: 560px) { .footer { margin-top: 36px; } } .ticker { height: clamp(52px, 7vw, 104px); background: var(--black); transform: skewY(-1.4deg); overflow: hidden; display: flex; align-items: center; margin-block: clamp(28px, 3vw, 34px) clamp(40px, 7vw, 92px); } .ticker__track { display: flex; width: max-content; transform: skewY(1.4deg); animation: bzTicker 60s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } .ticker__group { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); padding-right: clamp(14px, 2vw, 30px); font-family: var(--font-display); font-size: clamp(18px, 2.6vw, 36px); font-weight: 800; text-transform: uppercase; color: #fff; white-space: nowrap; } .ticker__group i { font-style: normal; color: var(--red); } .bank-ticker { overflow: hidden; } .bank-ticker__track { display: flex; width: max-content; animation: bzTicker 34s linear infinite; } .bank-ticker:hover .bank-ticker__track { animation-play-state: paused; } .bank-ticker__group { display: flex; align-items: center; gap: 20px; padding-right: 20px; } .bank { height: 84px; width: 210px; flex: none; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 10px; filter: grayscale(1); opacity: .72; transition: filter .25s var(--ease), opacity .25s var(--ease); } .bank:hover { filter: grayscale(0); opacity: 1; } .bank__mark { width: 26px; height: 26px; border-radius: 4px; } .bank__mark--round { border-radius: 50%; } .bank__name { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); } .accordion { border-bottom: 1px solid var(--border); } .accordion__item { border-top: 1px solid var(--border); } .accordion__head { display: flex; align-items: baseline; gap: 20px; width: 100%; padding: 24px 0; text-align: left; cursor: pointer; } .accordion__i { font-size: 12px; color: var(--gray); font-variant-numeric: tabular-nums; flex: none; } .accordion__q { flex: 1; font-family: var(--font-display); font-size: clamp(19px, 1.9vw, 28px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; transition: color .2s var(--ease); } .accordion__head:hover .accordion__q { color: var(--red); } .accordion__sign { flex: none; font-size: 24px; color: var(--red); line-height: 1; } .accordion__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); } .accordion__item.is-open .accordion__body { grid-template-rows: 1fr; } .accordion__body > div { overflow: hidden; } .accordion__body p { font-size: 16px; line-height: 1.6; color: var(--ink-2); padding: 0 44px 24px 32px; } @media (max-width: 640px) { .accordion__head { padding: 18px 0; gap: 12px; } .accordion__i { display: none; } .accordion__body p { padding: 0 0 18px; font-size: 15px; } } .modal { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; pointer-events: none; transition: visibility .28s var(--ease); } .modal.is-open { visibility: visible; pointer-events: auto; } .modal__backdrop { position: absolute; inset: 0; background: rgba(7, 20, 38, .62); backdrop-filter: blur(2px); opacity: 0; transition: opacity .28s var(--ease); } .modal.is-open .modal__backdrop { opacity: 1; } .modal__dialog { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 48px); overflow-y: auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .28s var(--ease), transform .28s var(--ease); } .modal.is-open .modal__dialog { opacity: 1; transform: none; } .modal__dialog::before { content: ""; display: block; height: 6px; background: var(--red); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .modal__inner { padding: 28px 32px 32px; } .modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .modal__title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.025em; color: var(--ink); line-height: 1.05; } .modal__lead { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin-top: 10px; } .modal__grip { display: none; } .modal--wide .modal__dialog { max-width: 1180px; } .modal--full .modal__dialog { max-width: 1440px; height: min(920px, calc(100vh - 48px)); display: flex; flex-direction: column; } .modal__success { display: none; } .modal.is-success .modal__form { display: none; } .modal.is-success .modal__success { display: block; animation: bzPopIn .35s var(--ease); } .success-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--red); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; } .success-facts { background: var(--section-bg); border-radius: var(--radius); padding: 18px 20px; margin-top: 22px; } .success-facts__row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding: 5px 0; } .success-facts__row span:first-child { color: var(--ink-2); } .success-facts__row span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .modal { padding: 0; align-items: flex-end; } .modal__dialog { max-width: none; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(100%); } .modal.is-open .modal__dialog { transform: none; } .modal__inner { padding: 16px 20px 28px; } .modal__grip { display: flex; justify-content: center; padding-bottom: 14px; } .modal__grip span { width: 44px; height: 4px; border-radius: 999px; background: var(--border-alt); } .modal--full .modal__dialog { height: 92vh; } } .slider { padding-block: 6px; } .slider__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .slider__value { font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 24px); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; } .slider__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray); margin-top: 14px; font-variant-numeric: tabular-nums; } input[type="range"].range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; margin: 0; display: block; } input[type="range"].range::-webkit-slider-runnable-track { height: 4px; border-radius: 0; background: linear-gradient(to right, var(--red) var(--fill, 0%), var(--border-alt) var(--fill, 0%)); } input[type="range"].range::-moz-range-track { height: 4px; background: var(--border-alt); } input[type="range"].range::-moz-range-progress { height: 4px; background: var(--red); } input[type="range"].range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); box-shadow: 0 2px 8px rgba(11, 13, 18, .18); transition: transform .15s var(--ease), border-color .15s var(--ease); } input[type="range"].range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); } input[type="range"].range:hover::-webkit-slider-thumb { border-color: var(--red); transform: scale(1.06); } input[type="range"].range:active::-webkit-slider-thumb { border-color: var(--red); transform: scale(1.12); } .range-dual { position: relative; height: 24px; margin-top: 4px; } .range-dual__track { position: absolute; left: 0; right: 0; top: 10px; height: 4px; background: var(--border-alt); } .range-dual__fill { position: absolute; top: 10px; height: 4px; background: var(--red); } .range-dual input[type="range"] { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 24px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; } .range-dual input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 4px; } .range-dual input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); box-shadow: 0 2px 8px rgba(11, 13, 18, .18); cursor: grab; } .range-dual input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); cursor: grab; } .range-dual input[type="range"]::-moz-range-track { background: transparent; height: 4px; } .skel { background: var(--skeleton); background-size: 420px 100%; animation: bzShimmer 1.4s linear infinite; } .toast-host { position: fixed; z-index: 200; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 12px; min-width: 240px; max-width: 360px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: var(--radius); box-shadow: var(--shadow-pop); font-size: 14px; color: var(--ink); animation: bzPopIn .3s var(--ease); } .toast.is-hiding { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; } @media (max-width: 560px) { .toast-host { left: 12px; right: 12px; bottom: 84px; } .toast { max-width: none; } } .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; color: var(--ink-2); } .crumbs i { font-style: normal; color: var(--red); } .crumbs b { font-weight: 400; color: var(--ink); } .crumbs--light { color: var(--gray); font-size: 13px; } .crumbs--light b { color: #fff; } .pager { display: flex; gap: 6px; flex-wrap: wrap; } .pager__item { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); } .pager__item:hover { border-color: var(--red); color: var(--red); } .pager__item.is-active { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; } .pager__item.is-dots { border: 0; color: var(--gray); pointer-events: none; } .pager__item[disabled] { color: #B9C2CB; pointer-events: none; } .action-bar { position: sticky; bottom: 0; z-index: 80; display: none; gap: 10px; padding: 12px var(--pad); background: var(--surface); border-top: 1px solid var(--border); } @media (max-width: 860px) { .action-bar { display: flex; } } .chip--center { justify-content: center; } .chip--brand { height: 48px; font-family: var(--font-display); font-size: 17px; font-weight: 700; } .field__label--flush { margin: 0; } .field__label--gap { margin: 20px 0 10px; } .field__label--gap-lg { margin: 22px 0 10px; } .btn--tall { height: 68px; } .popover--xs { width: 320px; } .popover--sm { width: 340px; } .popover--md { width: 360px; } .popover--lg { width: 380px; } .bank__mark--red { background: var(--red); } .bank__mark--navy { background: var(--navy); } .bank__mark--blue { background: var(--navy-3); } .skel--title { height: 26px; width: 46%; } .skel--line { height: 14px; width: 62%; } .skel--line-wide { height: 14px; width: 70%; } .skel--line-full { height: 14px; width: 80%; } .skel--head { height: 26px; width: 60%; } .skel--price { height: 30px; } .skel--cell { height: 32px; } .skel--btn { height: 48px; } .skel--btn-bottom { height: 48px; margin-top: auto; } .skel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 22px; margin-top: 8px; } .modal__success--static { display: block; } .btn--ghost-light { color: #fff; } .btn--ghost-light:hover { color: var(--red); } .lead--w260 { max-width: 260px; } .lead--w320 { max-width: 320px; } .lead--w380 { max-width: 380px; } .lead--w420 { max-width: 420px; } .lead--w620 { max-width: 620px; } .chip__remove { opacity: .6; } .card-tools { position: absolute; right: 12px; top: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; } .card-tools__btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(11, 13, 18, .55); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: background-color .2s var(--ease), transform .2s var(--ease); } .card-tools__btn:hover { background: var(--red); color: #fff; transform: scale(1.08); } .card-tools__btn.is-on { background: var(--red); color: #fff; } .collect-list { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; max-height: 52vh; overflow-y: auto; } .collect-item { display: flex; align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color .2s var(--ease); } .collect-item:hover { border-color: var(--ink-2); } .collect-item__media { width: 96px; height: 66px; flex: none; border-radius: 8px; overflow: hidden; background: var(--section-bg); } .collect-item__media img { width: 100%; height: 100%; object-fit: cover; } .collect-item__media--empty::after, .compare__photo--empty::after { content: 'нет фото'; display: grid; width: 100%; height: 100%; place-items: center; color: var(--gray); font-size: 11px; text-transform: uppercase; } .collect-item__body { flex: 1; min-width: 0; } .collect-item__title { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; } .collect-item__sub { font-size: 13px; color: var(--ink-2); margin-top: 4px; font-variant-numeric: tabular-nums; } .collect-item__price { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 6px; } .collect-item__remove { flex: none; width: 32px; height: 32px; border-radius: 50%; color: var(--gray); font-size: 20px; line-height: 1; transition: background-color .2s var(--ease), color .2s var(--ease); } .collect-item__remove:hover { background: var(--section-bg); color: var(--red); } .collect-empty { padding: 26px 0 6px; } .collect-empty b { color: var(--red); } .collect-notice { margin-top: 16px; color: var(--ink-2); font-size: 14px; line-height: 1.45; } .collect-page .collect-list { max-height: none; } .compare-scroll { overflow-x: auto; margin-top: 22px; } .compare { display: grid; grid-template-columns: 190px repeat(var(--compare-cars, 1), minmax(190px, 1fr)); width: 100%; font-size: 14px; } .compare__row { display: contents; } .compare__cell { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; } .compare__label { font-weight: 400; color: var(--ink-2); white-space: nowrap; } .compare__value { color: var(--ink); font-variant-numeric: tabular-nums; } .compare__diff { color: var(--red); font-weight: 600; } .compare__photo { display: block; height: 70px; border-radius: 8px; margin-bottom: 10px; overflow: hidden; background: var(--section-bg); } .compare__photo img { width: 100%; height: 100%; object-fit: cover; } .compare__title { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.2; } .compare__remove { font-size: 12px; color: var(--gray); text-decoration: underline; margin-top: 6px; } .compare__remove:hover { color: var(--red); } .compare-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 82; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -10px 30px rgba(11, 13, 18, .12); animation: bzPopIn .3s var(--ease); } .compare-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; flex-wrap: wrap; } .compare-bar__text { font-size: 14px; color: var(--ink-2); } .compare-bar__text b { color: var(--ink); font-variant-numeric: tabular-nums; } @media (max-width: 860px) { .compare-bar { bottom: 72px; } .compare-bar__text { display: none; } .compare-bar__inner { justify-content: stretch; } .compare-bar .row { width: 100%; } .compare-bar .btn { flex: 1; } } .share-copy { display: flex; gap: 10px; } .share-copy .input { flex: 1; min-width: 0; } .share-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .share-grid__item { padding-inline: 8px; font-size: 14px; } @media (max-width: 560px) { .share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .share-copy { flex-direction: column; } } @media (max-width: 1180px) { .header__compare { display: none; } }