/* =========================================================== Nota-bene — компоненты: buttons, cards, forms, badges =========================================================== */ /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 14px 30px; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); white-space: nowrap; line-height: 1; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(23, 27, 26, 0.06); } .btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); } /* Второстепенная кнопка — намеренно тише первой: без заливки, тонкая граница, приглушённый цвет — не спорит с btn-primary. */ .btn-outline { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); } .btn-outline:hover { color: var(--ink); border-color: var(--ink-soft); background: var(--paper-alt); } .btn-outline-invert { background: transparent; color: var(--navy-ink); border-color: var(--navy-line); } .btn-outline-invert:hover { background: rgba(246, 244, 238, 0.08); color: #fff; } .btn-ghost { background: transparent; color: var(--ink-soft); padding-inline: var(--sp-2); } .btn-ghost:hover { color: var(--ink); } /* Тихая текстовая ссылка в шапке (напр. «Калькулятор») — не кнопка, не должна визуально спорить с основным CTA. */ .link-quiet { font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; } .link-quiet:hover { color: var(--accent); text-decoration: none; } @media (pointer: coarse) { .link-quiet { display: inline-block; padding-block: 10px; } } .btn-block { width: 100%; } /* Кнопка-ссылка с длинной подписью («Подробная презентация модели работы →»): на узком телефоне подпись переносится на вторую строку, а не уходит за край экрана (обычные кнопки не переносятся: white-space: nowrap). */ .btn-wrap { white-space: normal; text-align: left; line-height: 1.35; } /* Тихая кнопка-ссылка у левой линии блока: у .btn-ghost есть боковой отступ 8px, из-за которого текст стоял правее заголовка и карточек. */ .btn-flush { margin-left: calc(-1 * var(--sp-2)); } .btn[disabled] { opacity: 0.55; cursor: not-allowed; } /* ---------- Cards ---------- */ .card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); } .card-raised { box-shadow: var(--shadow-card); border-color: transparent; } .stat-card { padding: var(--sp-5) 0; border-top: 1px solid var(--line-strong); } .stat-card .stat-value { font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); color: var(--ink); display: block; margin-bottom: var(--sp-1); } .stat-card .stat-label { color: var(--muted); font-size: var(--text-small); } /* Значения полосы фактов на главной длиннее одной строки («Условия согласовываются заранее»): плотный межстрочный интервал вместо унаследованного от текста (1.65) и ровные переносы, иначе строки заголовка разъезжались с огромным просветом. */ .stat-card .stat-value { line-height: 1.15; text-wrap: balance; } .service-card { display: flex; flex-direction: column; gap: var(--sp-3); } .service-card .icon-mark { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); margin-bottom: var(--sp-2); } .service-card h4, .service-card .h4 { margin-bottom: var(--sp-1); } .service-card p { margin-bottom: 0; font-size: var(--text-small); } /* Шесть карточек услуг (главная и «Услуги») отзываются на наведение: лёгкий подъём, едва заметное увеличение и мягкая золотая рамка за 200 мс, плавный возврат. Это не ссылки, поэтому курсор остаётся обычным, а действия по клику нет. Эффект включается только там, где есть настоящее наведение мыши (hover: hover и pointer: fine): на телефоне и планшете карточка не «залипает» после касания. Увеличение 1% на карточке шириной ~380px — около 4px по краям, при промежутке между карточками 32px соседей оно не задевает. */ .service-card-lift { position: relative; transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease; } .service-card-lift .icon-mark { transition: border-color 200ms ease; } @media (hover: hover) and (pointer: fine) { .service-card-lift:hover { transform: translateY(-4px) scale(1.01); z-index: 1; border-color: rgba(198, 161, 91, 0.5); background-color: #24211b; box-shadow: inset 0 1px 0 rgba(242, 237, 226, 0.05), 0 22px 40px -22px rgba(0, 0, 0, 0.75); } .service-card-lift:hover .icon-mark { border-color: rgba(198, 161, 91, 0.55); } } @media (prefers-reduced-motion: reduce) { .service-card-lift:hover { transform: none; } } /* Карточка раздела «Полезная информация» (pages/useful_info.html) — единственная кликабельная карточка среди service-card, поэтому отдельный класс: убирает подчёркивание/цвет ссылки по умолчанию и добавляет лёгкий hover-отклик, не заходя на территорию partner-tile. */ .useful-info-card { text-decoration: none; color: inherit; transition: border-color var(--transition), background var(--transition); } .useful-info-card:hover { text-decoration: none; border-color: var(--accent); background: var(--paper-alt); } /* Этапы работы (partials/work_steps.html): компактные тёмные карточки с золотыми номерами. Один компонент на главной (пять этапов) и на странице «Модель работы» (шесть этапов). Сетка из шести колонок даёт любое число карточек в ряду и центрирование неполной нижней строки: - телефон: одна колонка, порядок 01…N; - планшет (≥640px): две колонки; нечётная последняя карточка по центру; - компьютер (≥1024px): три в ряд; при пяти этапах две нижние по центру. */ .work-steps { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } .work-step { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); } .work-step-number { font-family: var(--font-display); font-size: 1.85rem; line-height: 1; letter-spacing: 0.02em; color: var(--accent); } .work-step-title { margin: var(--sp-2) 0 0; font-size: 1.1rem; line-height: 1.3; letter-spacing: normal; } .work-step-text { margin: 0; font-size: var(--text-small); line-height: 1.55; color: var(--ink-soft); } .work-steps-links { margin-top: var(--sp-6); gap: var(--sp-5); } @media (min-width: 640px) { .work-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .work-step { grid-column: span 2; } .work-step:last-child:nth-child(odd) { grid-column: 2 / span 2; } } @media (min-width: 1024px) { .work-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-5); } .work-step { grid-column: span 2; } .work-step:last-child:nth-child(odd) { grid-column: span 2; } .work-steps-5 .work-step:nth-child(4) { grid-column: 2 / span 2; } .work-steps-5 .work-step:nth-child(5) { grid-column: 4 / span 2; } } /* Партнёры на телефоне: два логотипа в строке (решение владельца 10 октября 2026 года, раздел 13.38; раньше один логотип занимал около 380px высоты, и страница из 25 партнёров была длиннее 7 600px). Плитки сохраняют пропорции 3:2, логотипы по-прежнему вписываются в 84% плитки без искажения; промежуток 12px. От 640px сетка прежняя (2 и 4 колонки). */ @media (max-width: 639.98px) { .partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } } .partner-tile { aspect-ratio: 3 / 2; border: 1px dashed var(--line-strong); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--muted); font-family: var(--font-mono); font-size: 0.78rem; text-align: center; padding: var(--sp-3); background: var(--paper-alt); } /* Настоящий партнёр (не визуальная заглушка этапа 4) — сплошная, не пунктирная граница; с логотипом или просто названием, если логотип не указан (ТЗ этапа 8: «аккуратное отображение без логотипа»). Фон карточки — нейтральный тёмный графит (--partner-card-bg, tokens.css), один и тот же для ВСЕХ тайлов партнёров независимо от того, есть ли логотип: так сетка партнёров выглядит как единая спокойная зона, а не смесь тёмных и светлых плашек (правка после визуальной приёмки — предыдущая версия заливала подложкой весь тайл под логотипом, и такие сплошные светлые прямоугольники "выбивались" из тёмного сайта). Светлая подложка, где она нужна конкретному логотипу, — компактная, только под самим изображением, см. класс `.logo-chip` ниже. */ .partner-tile-real { border-style: solid; border-color: var(--partner-card-border); background: var(--partner-card-bg); color: var(--ink-soft); font-family: var(--font-body); font-size: var(--text-small); text-decoration: none; transition: border-color var(--transition), color var(--transition), background var(--transition); } .partner-tile-real:hover { border-color: var(--accent); color: var(--ink); background: var(--partner-card-hover-bg); text-decoration: none; } /* Общая граница масштаба логотипа: без неё длинные горизонтальные знаки (например NEWKEY, VELES) растягиваются почти на всю ширину тайла и выглядят крупнее квадратных (например OLDOS, ОСТРОВ), хотя ни один из них не должен визуально доминировать над соседями в сетке. min() даёт фиксированный верхний предел на обычных экранах и одновременно не даёт логотипу вылезти за пределы тайла на очень узких карточках. */ .partner-tile-real img { max-width: min(190px, 84%); max-height: min(52px, 60%); object-fit: contain; } /* Логотипы партнёров приходят готовыми файлами со старого сайта — у части из них тёмный текст на прозрачном фоне (рассчитан на светлую страницу-источник) и на новом тёмном фоне карточки не читается (найдено на «Термотронике» и подтверждено расчётом контраста ещё для 9 логотипов — полный список и решение по каждому из всех 27 — в app/data/partner_logo_style.py). Для них — и только для них — изображение оборачивается в компактную светлую плашку размером «сам логотип + небольшой внутренний отступ», а не подложку на весь тайл: карточка вокруг остаётся тёмной. Пиксели самого файла логотипа не меняются — ни инверсии, ни фильтров, только фон в CSS вокруг изображения. */ .logo-chip { display: inline-flex; align-items: center; justify-content: center; background: var(--logo-chip-bg); border-radius: var(--radius); padding: 10px 16px; max-width: 84%; } .logo-chip img { max-width: min(160px, 100%); max-height: min(40px, 100%); } .news-card { display: flex; flex-direction: column; } .news-card .news-thumb { aspect-ratio: 16 / 10; background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--muted); font-family: var(--font-mono); font-size: 0.75rem; margin-bottom: var(--sp-4); } .news-card time { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .news-card h4 { margin: var(--sp-2) 0 var(--sp-1); } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; background: var(--paper-alt); color: var(--muted); border: 1px solid var(--line); } .badge-preview { background: var(--accent-soft); color: var(--accent-hover); border-color: transparent; } /* Приглушённая мелкая пометка — используется и внутри полей формы, и как самостоятельный элемент (сноски «уточняется на этапе N» и т.п.). */ .hint { font-size: 0.82rem; color: var(--muted); } /* ---------- Forms ---------- */ .field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); } .field label { font-size: var(--text-small); font-weight: 600; color: var(--ink); } .input, .textarea, .select { font-family: var(--font-body); font-size: 1rem; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink); width: 100%; transition: border-color var(--transition), box-shadow var(--transition); } .input:hover, .textarea:hover, .select:hover { border-color: var(--ink-soft); } /* Подсказка в поле (placeholder): контраст не ниже 4,5:1 на фоне поля (браузерный по умолчанию был 3,6-4,0:1). */ .input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .textarea { resize: vertical; min-height: 110px; } .checkbox-field { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-4); } .checkbox-field input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; } .checkbox-field label { font-size: var(--text-small); color: var(--ink-soft); font-weight: 400; } /* Быстрые контакты на главной («Свяжитесь с нами»): почта и телефоны видимым текстом, они же ссылки. Значения те же, что на /contacts и в подвале (site_contacts()). */ .contact-quick { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-8); margin-top: var(--sp-6); } .contact-quick-item h4, .contact-quick-item .h4 { margin: 0 0 var(--sp-2); font-size: var(--text-small); font-weight: 600; color: var(--muted); } .contact-quick-item p { margin: 0; font-size: var(--text-body-lg); line-height: 1.55; overflow-wrap: anywhere; } .contact-quick-phones a { display: block; } /* Сенсорный экран: почта и телефоны получают область нажатия около 44px по высоте (внутренний отступ). */ @media (pointer: coarse) { .contact-quick-item a, .contacts-details a { display: block; padding-block: 10px; } } /* Якорь формы заявки (/contacts#application). Раньше верхний отступ формы (24px) «выпирал» наружу обёртки (схлопывание полей), и якорь стоял на эти 24px ниже верха блока «Свяжитесь с нами». flow-root оставляет отступ внутри обёртки: верх обёртки = верх блока, а положение страницы после перехода задаёт scroll-padding-top (base.css). Внешний вид формы не меняется. */ #application { display: flow-root; } /* Форма заявки: поля идут плотнее, чем в общей сетке сайта. Раньше между полями складывались два отступа — 24px от `.stack` и ещё 24px от `.field` (итого 48px), из-за чего три короткие поля выглядели разреженно. Теперь между блоками формы один отступ 16px — одинаково на компьютере и на телефоне. Правило привязано к форме заявки (`.application-form`): остальные формы сайта и CRM не меняются. */ .application-form { gap: var(--sp-4); } .application-form .field { margin-bottom: 0; } /* Панель формы «Узнайте условия вашего платежа» (partials/application_form.html): отдельная тёмная карточка с мягкой рамкой на главной, на /contacts и на странице результата. Заголовок и пояснение лежат внутри панели, поэтому якорь /contacts#application ведёт к началу панели: после перехода под закреплённой шапкой видны и заголовок, и начало полей (отступ под шапку задаёт scroll-padding-top в base.css). Поля чуть выше и светлее рамкой обычных: удобнее нажимать пальцем и читать введённое. */ .application-panel { background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--sp-5); } @media (min-width: 640px) { .application-panel { padding: var(--sp-7); } } .application-title { margin-bottom: var(--sp-3); font-size: var(--text-h3); line-height: 1.15; } .application-lede { margin-bottom: var(--sp-5); color: var(--ink-soft); } /* После успешной отправки пояснение над формой уже не нужно: остаётся заголовок и сообщение об успехе. */ .application-panel:has(.form-note-success) .application-lede { display: none; } .application-panel .input { min-height: 52px; padding: 14px 16px; background: var(--paper); } .application-panel .input.input-error { border-color: #b5564a; } .application-panel .form-note { margin-top: 0; } .application-panel .form-note-success { padding: var(--sp-4) var(--sp-5); font-size: 1rem; line-height: 1.5; } .form-note-error { background: rgba(198, 120, 109, 0.14); color: #e0958a; } .form-note[hidden] { display: none; } .application-form.htmx-request button[type="submit"] { cursor: progress; } /* Страница «Контакты»: на компьютере слева заголовок и контакты, справа форма; на телефоне заголовок, затем форма, затем контакты. Вторая строка растягивается (1fr), поэтому высокая форма не раздвигает заголовок и контакты. */ .contacts-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "details"; gap: var(--sp-6); } .contacts-head { grid-area: head; max-width: 480px; } .contacts-details { grid-area: details; max-width: 480px; } .contacts-form { grid-area: form; min-width: 0; } @media (min-width: 900px) { .contacts-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; grid-template-areas: "head form" "details form"; column-gap: var(--sp-8); row-gap: var(--sp-6); align-items: start; } } .contacts-details h4, .contacts-details .h4 { font-size: 1rem; } .contacts-details .contact-phones a { display: block; } /* Партнёры: заголовок и вводный текст ближе к логотипам (раньше между ними было 32px+ и крупный отступ секции). */ .partners-title { margin-bottom: var(--sp-4); } .partners-title.has-intro { margin-bottom: var(--sp-2); } .partners-intro { margin-bottom: var(--sp-4); } #partners { padding-top: var(--sp-8); } /* Ошибка конкретного поля — рядом с ним, не общим блоком сверху формы. */ .field-error { display: block; margin-top: calc(-1 * var(--sp-1)); font-size: 0.82rem; color: #e0958a; } .input.input-error, .textarea.input-error { border-color: #b5564a; } .input.input-error:focus, .textarea.input-error:focus { box-shadow: 0 0 0 3px rgba(198,120,109,0.18); } /* Honeypot: скрыт от обычных пользователей (в т.ч. клавиатурных и screen-reader — off-screen + aria-hidden + tabindex="-1"), но простые боты, слепо заполняющие все input на странице, всё равно его заполнят. */ .honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 640px) { .form-row-2 { grid-template-columns: 1fr 1fr; } } /* Пара полей, где подписи/подсказки могут быть разной длины (например «Телефон (основной)» / «Телефон (дополнительный)») — обычный `.form-row-2` с `.field` внутри (flex-column на каждое поле) не выравнивает сами input: высота flex-колонки у более длинной подписи больше, но внутри неё контент прижат к началу (flex-start), поэтому input во ВТОРОЙ колонке "гуляет" по своей колонке независимо от первой — визуально едет вниз, если подпись длиннее. Здесь вместо этого сама пара — CSS grid с ЯВНО прописанными grid-row/grid-column для label/input/подсказки/ошибки каждого поля (`.aligned-pair-col-1`/`.aligned-pair-col-2`), а не автораскладка по количеству элементов. Более ранняя версия этого правила использовала `grid-auto-flow: column` без явных grid-row — и именно это, а не кэш браузера, было настоящей причиной, по которой предыдущая правка не сработала: автораскладка считает ячейки ПОДРЯД по количеству детей `.field-contents`, а `.field-error` рендерится условно (`{% if %}`) — если у одного поля ошибка есть, а у другого нет, число элементов не совпадает, и вторая колонка "съезжает" на позицию раньше. Явные grid-row у каждого элемента не зависят от количества элементов у соседа — input всегда строго в строке 2 у обоих полей, независимо от наличия ошибки/подсказки. `.field-contents` "растворяется" (`display: contents`), но остаётся валидным якорем для CSS-селекторов у потомков — сам элемент не рендерится, его дети становятся напрямую элементами grid-а. На мобильном экране (нет `@media`) `.field-contents` просто выводит свои элементы в порядке разметки — поля идут друг под другом, как обычно, без всякой сетки. */ .field-contents { display: contents; } .field-contents label { font-size: var(--text-small); font-weight: 600; color: var(--ink); } @media (min-width: 640px) { .form-row-2.aligned-pair { grid-template-rows: auto auto auto auto; /* подпись / поле / подсказка / ошибка */ align-items: start; row-gap: var(--sp-2); } .aligned-pair-col-1 label { grid-column: 1; grid-row: 1; } .aligned-pair-col-1 input, .aligned-pair-col-1 textarea { grid-column: 1; grid-row: 2; } .aligned-pair-col-1 .hint { grid-column: 1; grid-row: 3; } .aligned-pair-col-1 .field-error { grid-column: 1; grid-row: 4; } .aligned-pair-col-2 label { grid-column: 2; grid-row: 1; } .aligned-pair-col-2 input, .aligned-pair-col-2 textarea { grid-column: 2; grid-row: 2; } .aligned-pair-col-2 .hint { grid-column: 2; grid-row: 3; } .aligned-pair-col-2 .field-error { grid-column: 2; grid-row: 4; } } .form-note { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); font-size: var(--text-small); margin-top: var(--sp-4); } .form-note-success { background: var(--success-soft); color: var(--success); } /* ---------- Калькулятор (рабочий, этап 5) ---------- */ .calc-mock, .calc-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--sp-5); } @media (min-width: 640px) { .calc-mock, .calc-card { padding: var(--sp-7); } } .calc-mock .calc-result { margin-top: var(--sp-5); padding: var(--sp-5); background: var(--paper-alt); border-radius: var(--radius); text-align: center; } .calc-mock .calc-result .rate-figure { display: flex; font-size: clamp(2.2rem, 1.8rem + 2vw, 3rem); } .calc-mock .calc-result .stat-label { display: block; margin-top: var(--sp-2); color: var(--muted); font-size: var(--text-small); } /* Плитка калькулятора на главной (превью-виджет в секции #calculator) — ВЕРНУЛИ тёмное оформление вровень с остальными карточками сайта (статистика, услуги, партнёры). Предыдущая версия заливала карточку целиком фирменным золотом — владелец счёл это визуально слишком агрессивным для превью-блока; жёлтый остался только там, где он и так уже был точечным акцентом по умолчанию — выбранная валюта (.currency-switch ниже) и обычные жёлтые CTA-кнопки сайта. */ /* Переключатель валюты USD / EUR / CNY / RUB (страница калькулятора и статичный пример на главной). По разметке это группа радиокнопок: стрелки и Tab работают в браузере сами, фокус виден. Золотая «таблетка» — один псевдоэлемент, который плавно переезжает под выбранную валюту (transform за 220 мс), а цвет текста затухает за то же время. Положение задаёт переменная --index (0…3), её ставит выбранная радиокнопка через :has(); ширины колонок равные, поэтому «таблетка» остаётся ровно под своей валютой при любом размере окна без расчётов в JS. Быстрые нажатия ничего не накапливают: CSS-переход просто продолжается к новому положению. Расчёт обновляется сразу, независимо от анимации. В браузерах без :has() выбранная валюта подсвечивается без движения. */ .currency-switch { --count: 4; --index: 0; --switch-pad: 4px; --switch-time: 220ms; --switch-ease: cubic-bezier(0.4, 0, 0.2, 1); position: relative; display: grid; grid-template-columns: repeat(var(--count), minmax(0, 1fr)); padding: var(--switch-pad); margin-bottom: var(--sp-4); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper-alt); isolation: isolate; } .currency-switch-option { position: relative; z-index: 1; display: block; border-radius: 999px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .currency-switch-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .currency-switch-label { display: block; padding: 11px 8px; border-radius: 999px; text-align: center; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-soft); transition: color var(--switch-time) var(--switch-ease), background-color var(--switch-time) var(--switch-ease); } .currency-switch-option:hover input:not(:checked) + .currency-switch-label { color: var(--ink); } .currency-switch-option input:checked + .currency-switch-label, .currency-switch-option.is-active .currency-switch-label { color: var(--accent-ink); background-color: var(--accent); } .currency-switch-option input:focus-visible + .currency-switch-label { outline: 2px solid var(--focus-ring); outline-offset: 2px; } @supports selector(:has(*)) { .currency-switch::before { content: ""; position: absolute; z-index: 0; top: var(--switch-pad); bottom: var(--switch-pad); left: var(--switch-pad); width: calc((100% - 2 * var(--switch-pad)) / var(--count)); border-radius: 999px; background: var(--accent); transform: translateX(calc(var(--index) * 100%)); transition: transform var(--switch-time) var(--switch-ease); } .currency-switch-option input:checked + .currency-switch-label, .currency-switch-option.is-active .currency-switch-label { background-color: transparent; } .currency-switch:has(.currency-switch-option:nth-child(2) input:checked) { --index: 1; } .currency-switch:has(.currency-switch-option:nth-child(3) input:checked) { --index: 2; } .currency-switch:has(.currency-switch-option:nth-child(4) input:checked) { --index: 3; } } /* Реальный результат расчёта (partials/calculator_result.html). Главный и единственный крупный показатель — ПРОЦЕНТ, без крупной денежной суммы (по решению владельца — визуально спокойнее). */ .calc-result-real { margin-top: var(--sp-6); } .calc-result-primary { text-align: center; padding: var(--sp-6) var(--sp-5); background: var(--paper-alt); border: 1px solid var(--accent-soft); border-radius: var(--radius); } /* Крупная расчётная ставка (результат калькулятора и пример на главной; 10 октября 2026 года, раздел 13.33): шрифт Manrope Medium (вес 500, он уже подключён на всех страницах), ровные табличные цифры, золотой цвет. Знак процента на 40% меньше цифр (0.6 от размера) и стоит на той же базовой линии. Число показывается по-русски: «2,0», «1,8», «1,5». */ .rate-figure { display: inline-flex; align-items: baseline; justify-content: center; font-family: var(--font-body); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; font-size: clamp(2.6rem, 2.1rem + 2.2vw, 3.6rem); letter-spacing: -0.01em; line-height: 1; color: var(--accent); } .rate-figure-sign { margin-left: 0.07em; font-size: 0.6em; letter-spacing: 0; } .calc-result-percent { display: flex; } .calc-result-percent-label { display: block; margin-top: var(--sp-2); color: var(--muted); font-size: var(--text-small); } /* Второстепенная строка: сумма/валюта/USD-эквивалент — компактно, тихо */ .calc-result-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); font-size: var(--text-small); font-variant-numeric: tabular-nums; color: var(--ink-soft); text-align: center; } .calc-result-meta-sep { color: var(--muted); } .calc-result-usd { color: var(--muted); } /* На узком телефоне строки результата идут друг под другом без точек-разделителей: иначе точка повисает в конце строки. */ @media (max-width: 479.98px) { .calc-result-meta { flex-direction: column; align-items: center; gap: 2px; } .calc-result-meta-sep { display: none; } } /* ---------- Таблица данных (публичная страница "Модель работы" — сравнение допсоглашения и агентского договора, этап 9) ---------- */ .table-scroll { overflow-x: auto; } .data-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: var(--text-small); } .data-table th, .data-table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); } .data-table th { color: var(--muted); font-weight: 600; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; } .data-table td:not(:first-child) { font-variant-numeric: tabular-nums; white-space: nowrap; } .data-table tbody tr:last-child td { border-bottom: none; } /* ---------- FAQ (публичная /faq, управляется из /admin/faq) ---------- Вопрос — кнопка с aria-expanded и aria-controls (Enter и Space работают у кнопки сами), ответ — область, которая плавно раскрывается: высота переходит от 0 к содержимому через grid-template-rows (0fr -> 1fr), поэтому ответ любой длины раскрывается целиком и не обрезается, а при изменении ширины окна высота подстраивается сама. Текст ответа за 240 мс плавно проявляется, значок «+» превращается в «−». Состояние ведёт faq.js (класс is-open и aria-expanded). Без JavaScript (