/* Palm Exchange — хром и серебро на чёрном
ЭТАП 1: единый слой токенов. Структура секций и копирайт не тронуты. */
:root{
/* ═══ ОТСТУПЫ — шкала на базе 8px ═══ */
--space-8:8px;
--space-40:40px;
/* ═══════════════ ПУЛЬТ ПОРТРЕТОВ ═══════════════
Меняйте ТОЛЬКО числа — остальное подхватится само.
После правки обязательно:
python tools/stamp.py
иначе браузер отдаст старый файл. */
/* Шесть фигур стоят на полях страницы, в шахматном порядке: первая
слева, вторая справа и так далее. Размер у всех один, поэтому они
читаются как ровный ряд, а не как случайный набор картинок.
Номер фигуры — это её место сверху вниз, а не имя картинки. Сторона
считается от номера, поэтому переставить героев между разделами
можно, поменяв только картинку в правиле .fig-N: шахматка при этом
сохраняется сама.
Рост тянется за шириной окна, отсюда clamp, а не одно число.
fig-h — рост всех шести
fig-edge — отступ коробки от края окна
fig-bleed — свес по умолчанию: насколько картинка заходит за край
окна и там срезается. Режется внутри коробки, поэтому
страница не получает лишней ширины
bleedN — свес именно этой фигуры. Больше числа — фигура уходит
дальше за свой край; это и есть «сдвинуть её к краю»
fig-gap — просвет между фигурой и краем текста
fig-dim — общая приглушённость: 1 в полную силу, 0 совсем прозрачная
zoomN — размер одной фигуры относительно общего роста:
1 как у всех, 1.1 на десятую крупнее
headN — если задано, фигура встаёт не по центру раздела, а по
верху его заголовка. Число — расстояние от верхней
границы раздела до заголовка. Оно одинаково на любой
ширине окна: отступ самого раздела берётся токеном, а
строки над заголовком заданы в пикселях. Проверено
замером на 1920, 1600 и 1440
upN — приподнять или опустить конкретную фигуру
sideN — сдвинуть её вбок: больше нуля от края, меньше нуля к краю
fadeN — приглушить одну фигуру отдельно от остальных */
--fig-h:clamp(400px,28vw,600px);
--fig-edge:0px;
--fig-bleed:24px;
--fig-gap:var(--space-32);
/* Приглушённость фигур. При таком росте фигура заходит за колонку
текста — иначе тексту не остаётся ширины, — и в полную силу это
мешает читать: замер показал, что ники в отзывах накрыты целиком,
заголовок четвёртого шага почти наполовину, лид первого экрана на
четверть. На 0.3 то же перекрытие читается как фон, но фигуру
уже видно как следует.
Приглушение осталось только здесь. На светлой теме оно выключено —
своё число у неё ниже, в её блоке. */
--fig-dim:.3;
/* Ширина коробки задана по самой широкой из шести картинок (0.84 от
роста). Картинка вписывается в коробку целиком, поэтому упирается
всегда в высоту, а не в ширину — и все шесть выходят ровно одного
роста, хотя пропорции у файлов разные. */
--fig-w:calc(var(--fig-h) * .84);
/* А вот полоса, которую фигура отнимает у текста, считается только от
половины её ширины. Иначе при таком росте текста не остаётся: на
окне 1600 px полная полоса с обеих сторон срезала бы колонку до
688 px, и заголовки в «Четырёх шагах» поехали бы на третью строку.
Вторая половина фигуры заходит за текст — она позади него и
приглушена, поэтому читать не мешает. */
--fig-rail:calc(var(--fig-w) / 2 + var(--fig-edge) + var(--fig-gap));
/* 1. ЗЕЛЁНАЯ ПАНАМКА — первый экран, слева */
--p1-zoom:1; --p1-bleed:44px; --p1-up:0px; --p1-side:0px; --p1-fade:1;
--p1-head:calc(var(--section-y-compact) + 152px);
/* 2. МУЛАТКА — «Комиссия без неожиданностей», у калькулятора, справа */
--p2-zoom:1; --p2-bleed:24px; --p2-up:0px; --p2-side:0px; --p2-fade:1;
--p2-head:calc(var(--section-y) + 34px);
/* 3. СИРЕНЕВАЯ — «Четыре шага до выплаты», слева */
--p3-zoom:1; --p3-bleed:44px; --p3-up:0px; --p3-side:0px; --p3-fade:1;
/* 4. ПОЦ1 — «Начните с малого», справа */
--p4-zoom:1; --p4-bleed:24px; --p4-up:0px; --p4-side:0px; --p4-fade:1;
--p4-head:calc(var(--section-y) + 34px);
/* 5. БЛОНДИНКА — «Говорят те, кто уже обменял», слева */
--p5-zoom:1.1; --p5-bleed:44px; --p5-up:0px; --p5-side:0px; --p5-fade:1;
/* 6. ПОЦ2 — «Остались вопросы?», справа */
--p6-zoom:1.1; --p6-bleed:24px; --p6-up:0px; --p6-side:0px; --p6-fade:1;
/* ═════════════ КОНЕЦ ПУЛЬТА ═════════════ */
/* ═══════════════ ПУЛЬТ ШРИФТОВ ═══════════════
Меняйте ТОЛЬКО числа. После правки обязательно:
python tools/stamp.py
иначе браузер отдаст старый файл.
── ВСЁ РАЗОМ ──
Множитель ниже действует на каждую букву сайта: и на заголовки, и на
мелкие подписи в кабинете, и на цифры в панели владельца. 1 — как
сейчас, 1.1 — на десятую крупнее, 0.9 — на десятую мельче. Пропорции
между ролями при этом сохраняются, поэтому вёрстка не разъезжается.
Это самый безопасный способ поменять размер: если нужно «покрупнее»
или «помельче» вообще, правьте одно это число и больше ничего. */
--font-scale:1;
/* ── ПО РОЛЯМ ──
Каждая строка — своё место на сайте. Числа в пикселях, при
--font-scale:1 они и получаются. Множитель применяется поверх.
Крупные заголовки задаются тремя числами, потому что на телефоне и на
широком мониторе они должны быть разными. min — минимум на узком
экране, grow — насколько тянутся за шириной окна, max — потолок.
Правьте min и max; grow трогайте, только если заголовок растёт
слишком резко или слишком вяло. */
/* «Токены — в рубли на карту» — главный заголовок первого экрана */
--size-display-min:48px;
--size-display-grow:5.5vw;
--size-display-max:88px;
/* «Комиссия без неожиданностей», «Остались вопросы?» — заголовки секций */
--size-h2-min:36px;
--size-h2-grow:4vw;
--size-h2-max:64px;
/* Заголовки карточек: «Без комиссии», названия шагов, «Личный кабинет» */
--size-h3:24px;
/* Крупные цифры: курс в калькуляторе, суммы в кабинете */
--size-number:32px;
/* Подзаголовок под главным заголовком */
--size-lead:18px;
/* Основной текст: абзацы, ответы в FAQ, отзывы */
--size-body:18px;
/* Мелкий текст: подписи под полями, пояснения, строки таблиц */
--size-small:16px;
/* Служебные надписи вразрядку: «РАСЧЁТ ОБМЕНА», даты, номера заявок */
--size-mono:14px;
/* Совсем мелкие подписи внутри карточек кабинета и панели владельца.
Их на сайте восемь десятков разных, и каждую по отдельности вынести
сюда значило бы сделать пульт длиннее самой вёрстки. Все они считаются
от --font-scale, поэтому общий множитель их тоже двигает. */
/* ═════════════ КОНЕЦ ПУЛЬТА ШРИФТОВ ═════════════ */
--space-16:16px;
--space-24:24px;
--space-32:32px;
--space-48:48px;
--space-64:64px;
--space-96:96px;
--space-128:128px;
--space-160:160px;
/* Вертикальный ритм секций — ровно два значения.
clamp сжимает их на узких экранах, не вводя третьего значения в систему. */
--section-y:clamp(80px,8vw,128px);
--section-y-compact:clamp(64px,6vw,96px);
/* ═══ КОНТЕЙНЕР ═══ */
--container:1440px;
--gutter:var(--space-48);
--container-half:calc(var(--container) / 2);
/* ═══ ФОН И ПОВЕРХНОСТИ ═══ */
--bg:#0A0A0A; /* единственный фон секций */
--surface:#121214; /* карточки */
--surface-2:#17171A; /* выделенные карточки */
--line:#2A2A31;
--line-soft:#1C1C20;
/* ═══ ТЕКСТ ═══ */
--text-primary:#F5F5F7; /* 18.2:1 на --bg */
--text-secondary:#A1A1AA; /* 7.7:1 на --bg */
--text-tertiary:#71717A; /* 4.1:1 — только крупный кегль и декор */
/* ═══ АКЦЕНТЫ ═══ */
--silver:#D4D4D8;
--silver-deep:#A1A1AA;
--silver-dark:#3F3F46;
--silver-darker:#27272A;
/* ═══ ЧТО ЛЕЖИТ НА ЦВЕТЕ ═══ */
/* Розовый градиент в обеих темах одинаково светлый, поэтому текст на нём
всегда тёмный. Раньше тут стоял var(--bg): на чёрной теме это совпадало
с нужным цветом случайно, а на светлой дало бы белое по пастельному. */
--on-warm:#111318;
/* Что пишут поверх серебра. Серебро на светлой теме тёмное, и чёрная
надпись на нём пропадает. */
--on-accent:#0A0A0A;
/* ═══ СОСТОЯНИЯ ═══ */
/* Три цвета выписки: получилось, ждём, сорвалось. Подобраны под фон
своей темы — на светлой те же оттенки выцветают до неразличимых. */
--ok:#8FD9B6; --ok-line:#24382F; --ok-bg:#101A16;
--warn:#D9C88F; --warn-line:#39331F; --warn-bg:#191710;
--bad:#F0907A; --bad-line:#3E2A25; --bad-bg:#1A100D;
--gold:#E8C87A;
/* ═══ ТЕНИ И ОРЕОЛЫ ═══ */
--shadow-lg:0 24px 60px rgba(0,0,0,.55);
--shadow-md:0 12px 34px rgba(0,0,0,.6);
--shadow-sm:0 18px 34px rgba(0,0,0,.7);
--halo:rgba(255,255,255,.05);
--halo-2:rgba(255,255,255,.08);
--halo-3:rgba(255,255,255,.12);
/* ═══ ССЫЛКИ «НАПИСАТЬ В TELEGRAM» ═══ */
/* Ссылка ведёт туда, где происходит обмен, — это второй по важности
переход на странице после кнопки. Серебром она сливалась с обычным
текстом: тот же оттенок, только с подчёркиванием. Теперь она красится
акцентом, как и на светлой теме, и её видно, не вчитываясь. */
--link-tg:var(--accent);
--link-tg-line:var(--accent-line);
--link-tg-hover:var(--accent-deep);
/* ═══ ТОЧКИ ЗАХВАТА ═══ */
/* Раньше акцента в тёмной теме не было вовсе: считалось, что на чёрном
серебро само по себе выделяет. На одной карточке это верно, но на
странице целиком серым оказывалось всё сразу — и надзаголовок раздела,
и выбранная площадка, и точка «вы здесь» на графике. Выделено было
столько всего, что не выделено ничего.
Поэтому у тёмной темы теперь свой акцент — холодный перламутр из
логотипа. Он взят светлым, чтобы гореть на чёрном, и уведён в синеву,
чтобы не спорить с розовым градиентом кнопок: тёплое остаётся за
кнопками, холодное за отметками. Красим им ровно те же четыре вещи,
что и на светлой теме, — не больше.
Роли токенов в обеих темах одни и те же, значения зеркальные:
accent — сам цвет, deep — усиленный (на светлой темнее, на тёмной
ярче), soft — подложка под ним, line — тонкая линия и точка. */
--accent:#B4BDEC; /* 10,8:1 с фоном — годится и для текста */
--accent-deep:#DDE2FB; /* наведение и нажатие */
--accent-soft:#22253A; /* подложка выбранной площадки */
--accent-line:#3C4166; /* тонкие линии и точки на кривой */
/* Три точки перелива на линии кривой: холод — тёплая искра — холод.
Тот же ход, что в заголовках, только вытянутый вдоль графика. */
--curve-a:#C3CCF2;
--curve-b:#E2D3F0;
--curve-c:#A9B4E4;
/* ═══ ДВА ГРАДИЕНТА ═══ */
/* Заголовки и крупные цифры. Перламутр тот же, что и на светлой теме, —
серебро с лиловой и розовой искрой из логотипа, — но развёрнутый в
другую сторону: там он тёмный на белом, здесь светлый на чёрном.
И холода в нём больше. На белом перелив держался тёплыми точками,
иначе серый металл читался как выключенный текст. На чёрном наоборот:
тёплое серебро желтит и рядом с розовой кнопкой выглядит её
выцветшей версией. Поэтому холодных точек шесть из десяти, тёплых
две — они оставлены как искры, чтобы заголовок не стал ледяным.
Самая глубокая точка даёт 9,3:1 с фоном — перелив не проваливается
в нечитаемое ни на одном участке буквы. */
--gradient-chrome:linear-gradient(168deg,
#FFFFFF 0%,
#EAF0FF 9%, /* холодный блик */
#BAC4E6 20%, /* сталь с синевой */
#E3D7F0 30%, /* лиловое серебро — тёплая искра */
#FFFFFF 42%,
#C9D6F5 52%, /* голубой перелив */
#A7B0D6 62%, /* самая глубокая точка холода */
#DCCFE8 72%, /* розовый перламутр — вторая искра */
#EEF3FF 86%,
#FFFFFF 100%);
/* розово-лиловый — акцентные поверхности и CTA */
--gradient-warm:linear-gradient(150deg,
#fff2f9 0%, #ffdcef 22%, #f3c3e2 40%,
#ffffff 56%, #dcd0ff 74%, #f6d9ec 90%, #fffaff 100%);
/* ═══ ТИПОГРАФИКА ═══ */
/* Считается из пульта шрифтов выше — правьте там, а не здесь.
Множитель применён и к grow: без этого на среднем экране размер
упирался бы в проценты ширины окна и пульт переставал бы работать
ровно посередине диапазона, где сайт и смотрят чаще всего. */
--font-display:clamp(calc(var(--size-display-min) * var(--font-scale)),
calc(var(--size-display-grow) * var(--font-scale)),
calc(var(--size-display-max) * var(--font-scale)));
--font-h2:clamp(calc(var(--size-h2-min) * var(--font-scale)),
calc(var(--size-h2-grow) * var(--font-scale)),
calc(var(--size-h2-max) * var(--font-scale)));
--font-h3:calc(var(--size-h3) * var(--font-scale));
--font-lead:calc(var(--size-lead) * var(--font-scale));
--font-body:calc(var(--size-body) * var(--font-scale));
--font-small:calc(var(--size-small) * var(--font-scale));
--font-mono:calc(var(--size-mono) * var(--font-scale));
--font-number:calc(var(--size-number) * var(--font-scale));
--lh-display:1.02;
--ls-display:-.03em;
--radius:8px;
--radius-sm:5px;
/* ═══ КРИВЫЕ ДВИЖЕНИЯ ═══ */
/* Встроенные ease-out и ease слишком вялые. Эти — стандартные сильные
кривые; ease-in на интерфейсе не используем никогда: он тормозит ровно
в тот момент, когда человек смотрит на элемент. */
--ease-out:cubic-bezier(.23,1,.32,1);
--ease-in-out:cubic-bezier(.77,0,.175,1);
}
/* ═══════════════ СВЕТЛАЯ ТЕМА ═══════════════
Переопределяем только цвет. Отступы, шрифты, кривые движения и пульт
портретов общие: тема — это не второй дизайн, а тот же дизайн при другом
освещении.
Светлая тема здесь не «инверсия чёрной». Инверсия даёт чистый белый фон
и чёрный текст — на большом экране это светит в лицо и читается хуже
тёмной. Поэтому фон тёплый и приглушённый (#FAFAFB), а текст не чернее
#18181B: контраст 16:1 вместо 21:1, чего с запасом хватает по AA и AAA,
а глазам заметно легче.
Отдельная забота — серебро. На чёрном это светлый акцент, на белом оно
обязано потемнеть, иначе ссылки и кнопки исчезают. Роль токена та же
(«акцентный цвет»), значение противоположное. */
:root[data-theme="light"]{
/* На светлой теме фигуры не приглушены вовсе — идут в полную силу.
Если понадобится притушить и здесь, поставьте долю меньше единицы:
тёмной темы это число не тронет. */
--fig-dim:1;
--bg:#FAFAFB;
--surface:#FFFFFF;
--surface-2:#F4F4F6;
--line:#E4E4E9;
--line-soft:#EFEFF2;
--text-primary:#18181B; /* 16.1:1 на --bg */
--text-secondary:#52525B; /* 7.5:1 */
--text-tertiary:#79797F; /* 4.6:1 — крупный кегль и декор */
--silver:#3F3F46;
--silver-deep:#52525B;
--silver-dark:#C9C9D1;
--silver-darker:#E4E4E9;
--on-accent:#FFFFFF;
/* Те же три состояния, затемнённые до читаемых на белом */
--ok:#1B7A4F;
--warn:#8A6D1F;
--bad:#B4442C;
--ok-line:#BFE3D0; --ok-bg:#F0F9F4;
--warn-line:#E8DDB4; --warn-bg:#FBF7EA;
--bad-line:#F0CFC6; --bad-bg:#FDF3F0;
--gold:#B08420;
/* На светлом фоне тени густые и мелкие: широкая мягкая тень на белом
читается как грязь, а не как высота. */
--shadow-lg:0 18px 44px rgba(24,24,27,.10);
--shadow-md:0 8px 22px rgba(24,24,27,.10);
--shadow-sm:0 10px 24px rgba(24,24,27,.12);
--halo:rgba(24,24,27,.06);
--halo-2:rgba(24,24,27,.10);
--halo-3:rgba(24,24,27,.14);
/* Заголовки. Розово-серебряный перламутр: цвета взяты из логотипа —
сине-фиолетовый перелив и серебро, — но тёплых точек больше, чем
холодных, шесть из восьми. Серый металл на белом читался как
выключенный текст, а чистый фиолет уводил в холод.
Все точки держатся тёмными не случайно: перелив на белом строится
не яркостью, а оттенком. Самая светлая точка даёт 4,4:1 с фоном —
проходит и для обычного кегля, не только для заголовочного. */
--gradient-chrome:linear-gradient(168deg,
#7E3D60 0%, /* тёплая слива */
#5C2E50 12%,
#A85F82 25%, /* розовое серебро */
#96688E 40%,
#9E6A93 47%,
#7E7398 50%, /* перламутр логотипа — точкой, а не полосой */
#9E6A93 53%,
#96688E 60%,
#8A7A8C 72%, /* тёплое серебро */
#9B5F8E 84%,
#A85F82 93%,
#5E3350 100%);
/* Кнопки и акцентные плашки. На чёрном розово-лиловая пастель светится
сама; на белом она превращалась в едва заметный развод, и кнопка
переставала читаться как кнопка. Здесь тот же розово-лиловый, но
насыщенный — и всё ещё достаточно светлый, чтобы тёмная надпись на
нём держала контраст: на самой тёмной точке 8,9:1. */
--gradient-warm:linear-gradient(150deg,
#FFD5F0 0%, #FBA9E0 22%, #F58FD6 40%,
#F1DAFF 56%, #B9A6FF 74%, #F0AEDC 90%, #FFDCF3 100%);
/* Ссылки в Telegram — фиолетовые, как у логотипа. 7,6:1 на фоне
страницы: видно, что это ссылка, а не подпись. */
/* Один акцент на всю светлую тему — тёплый розово-малиновый из того же
семейства, что и перламутр. Второй цвет здесь только развалил бы
картину: чем меньше разных красок, тем яснее, что именно выделено. */
--accent:#A8437A; /* 5,5:1 с фоном — годится и для текста */
--accent-deep:#7E2E59; /* нажатие, наведение, мелкий кегль */
--accent-soft:#F9E6F1; /* подложка выбранной площадки */
--accent-line:#E7C3D9; /* тонкие линии и точки на кривой */
--link-tg:var(--accent);
--link-tg-line:var(--accent-line);
--link-tg-hover:var(--accent-deep);
/* Линия кривой переливается из тёплого в холодный и обратно — тот же
ход, что в заголовках, только вытянутый вдоль графика. */
--curve-a:#A8437A;
--curve-b:#5A57A8;
--curve-c:#93356B;
/* Линии и разделители чуть тёплые. По отдельности разницы с серым не
видно, но страница перестаёт быть графитовой. */
--line:#E8E0E6;
--line-soft:#F2ECF0;
}
/* На очень широких экранах даём колонке дышать */
@media (min-width:1921px){
:root{--container:1600px}
}
/* Картинки не утаскиваются мышью и не выделяются вместе с текстом.
Это защита от случайного копирования, а не от целенаправленного:
всё, что браузер показал, он уже скачал, и достать это можно. */
img{
-webkit-user-drag:none;
user-select:none;-webkit-user-select:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;min-width:320px;
background:var(--bg);color:var(--text-primary);
font-family:'Manrope',system-ui,sans-serif;
font-size:var(--font-body);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{border:0;background:none}
img{max-width:100%}
::selection{background:var(--silver);color:var(--bg)}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--silver-dark);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:var(--silver-deep)}
:focus-visible{outline:2px solid var(--silver);outline-offset:2px;border-radius:3px}
/* Якорь из меню не должен вставать вплотную под липкую шапку —
отступаем на её высоту в поджатом виде. */
html{scroll-padding-top:88px}
/* ═══ КОНТЕЙНЕР ═══ */
.section-pad{
width:min(100% - var(--gutter),var(--container));
margin-inline:auto;
}
/* ── хромовый текст ──
Перелив не стоит на месте: градиент вдвое выше строки и медленно ходит
по ней сверху вниз и обратно. Металл потому и читается как металл, что
блик на нём двигается; неподвижный перелив — просто пёстрая заливка.
Ходит фон, а не текст. Буквы не сдвигаются ни на пиксель, строка не
меняет высоту и ничего вокруг не задевает.
Сюда же собраны курс и итог в калькуляторе. Они брали тот же градиент,
но стояли неподвижно — на одном экране с живым заголовком это читалось
как недогруженная страница. Правило одно на всех ещё и затем, чтобы
заголовок и цифра под ним шли в такт: у разных правил фазы разъезжаются
и страница начинает рябить. */
.chrome,
.rate-row strong,
.total-row strong{
font-style:normal;
background:var(--gradient-chrome);
background-size:100% 260%;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
animation:sheen 9s ease-in-out infinite;
}
@keyframes sheen{
0%,100%{background-position:50% 0%}
50%{background-position:50% 100%}
}
/* ═══ ТИПОГРАФИЧЕСКИЕ РОЛИ ═══ */
h1,h2,h3,p{margin-top:0}
h1,h2{letter-spacing:var(--ls-display);line-height:var(--lh-display);font-weight:700;text-wrap:balance}
h1{font-size:var(--font-display);margin-bottom:var(--space-24)}
h2{font-size:var(--font-h2)}
h2 em{font-style:normal}
h3{font-size:var(--font-h3);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.lead{font-size:var(--font-lead);line-height:1.6;color:var(--text-secondary)}
/* mono-лейблы: даты, номера, служебные подписи */
.eyebrow,.card-topline,.table-header,.review-meta,.step-number,
.footer-bottom,.image-label{
font-family:'DM Mono',monospace;
font-size:var(--font-mono);
text-transform:uppercase;
letter-spacing:.12em;
}
.eyebrow{color:var(--accent);margin:0 0 var(--space-16)}
.eyebrow-dot{
width:6px;height:6px;display:inline-block;border-radius:50%;
background:var(--silver);margin:0 var(--space-8) 1px 0;
}
/* ── шапка ── */
/* Шапка держится наверху всю страницу. Обёртка нужна ради фона: сам ряд
отцентрован и уже окна, и если липнуть будет он, по бокам сквозь него
поедет содержимое страницы. Обёртка идёт во всю ширину, ряд внутри
остаётся в общей мерке.
position:sticky тут работает, несмотря на overflow-x:clip у html: clip
не создаёт прокручиваемого блока, в отличие от hidden. Проверено. */
.topbar-sentinel{height:1px;margin-bottom:-1px}
.topbar-wrap{
position:sticky;top:0;z-index:50;
background:var(--bg);
transition:box-shadow .2s;
}
/* Отлипла от верха — обозначаем край тенью и поджимаем высоту: 112 px,
занятые сверху постоянно, съедают восьмую часть экрана. */
.topbar-wrap.is-stuck{box-shadow:var(--shadow-md)}
.topbar-wrap.is-stuck .topbar{height:72px}
.topbar{
transition:height .2s;
height:112px;
width:min(100% - var(--gutter),var(--container));
margin-inline:auto;
display:flex;align-items:center;justify-content:space-between;
border-bottom:1px solid var(--line);position:relative;z-index:20;
}
.brand{display:inline-flex;align-items:center;gap:var(--space-24)}
/* Все картинки на странице — фон, а не тег ![]()
. Причина не в красоте:
к тегу изображения браузеры цепляют собственные панели («сохранить»,
«искать по картинке» в Яндексе), и отключить их со стороны сайта нельзя.
У фона такой панели нет, и правая кнопка не предлагает сохранение. */
.brand-logo{
display:block;width:168px;flex-shrink:0;
aspect-ratio:1000/426;
background:url("https://tostkwreukypbkchiiuh.supabase.co/storage/v1/object/public/img/palm-logo.webp") center/contain no-repeat;
transition:transform 160ms var(--ease-out);
}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text small{
color:var(--text-secondary);font-family:'DM Mono',monospace;
font-size:var(--font-mono);letter-spacing:.18em;
}
.nav-links{display:flex;align-items:center;gap:var(--space-32);font-size:var(--font-body);color:var(--text-secondary)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--silver)}
.nav-telegram{
display:inline-flex;align-items:center;gap:var(--space-8);
color:var(--link-tg)!important;border:1px solid var(--link-tg-line);
padding:10px var(--space-16);border-radius:var(--radius-sm);
transition:border-color .2s,background .2s,color .2s;
}
.nav-telegram:hover{border-color:var(--link-tg);background:var(--surface);
color:var(--link-tg-hover)!important}
.menu-toggle{display:none;color:var(--text-primary);cursor:pointer;padding:var(--space-8)}
/* Кнопка «наверх». Держим её невидимой через visibility, а не display:
так она не ловит фокус с клавиатуры, пока не показана, и при этом
плавно проявляется. Скрывать её через [hidden] нельзя — display:grid
ниже перебил бы атрибут, и кнопка висела бы всегда. */
.to-top{
position:fixed;z-index:40;right:var(--space-24);bottom:var(--space-24);
width:46px;height:46px;display:grid;place-items:center;
border:1px solid var(--line);border-radius:50%;
background:var(--surface);color:var(--text-secondary);
box-shadow:var(--shadow-md);cursor:pointer;
visibility:hidden;opacity:0;transform:translateY(8px);
transition:opacity .2s,transform .2s,color .2s,border-color .2s,
visibility 0s .2s;
}
.to-top.is-on{visibility:visible;opacity:1;transform:none;transition-delay:0s}
@media (hover:hover) and (pointer:fine){
.to-top:hover{color:var(--text-primary);border-color:var(--silver-dark)}
}
.to-top:active{transform:translateY(1px)}
.sticky-telegram{
position:fixed;z-index:40;right:var(--space-24);bottom:var(--space-24);
display:flex;align-items:center;gap:var(--space-8);
padding:14px var(--space-16);border-radius:var(--radius-sm);
background:var(--gradient-warm);color:var(--on-warm);
font-size:var(--font-small);font-weight:700;
box-shadow:var(--shadow-md);
transition:transform .2s,filter .2s;
}
.sticky-telegram:hover{transform:translateY(-3px);filter:brightness(1.05)}
/* ── шесть фигур на полях ───────────────────────────────────
Фигура вынута из потока и прижата к краю окна. Пока она была колонкой
сетки, «полей» не получалось: она просто стояла вплотную к тексту и
отъедала ширину прямо в его колонке.
Край окна ловим через calc(50% - 50vw). Контейнер раздела всегда
отцентрован, поэтому эта разница и есть расстояние от его края до края
окна. Отступ --fig-edge держим не меньше полосы прокрутки: 100vw её
не вычитает, и при нулевом отступе страница поехала бы вбок.
Все шесть заданы одной коробкой, картинка вписывается в неё целиком.
Ширина коробки взята по самой широкой из шести, поэтому каждая
упирается в высоту, а не в ширину, и все выходят ровно одного роста
при разных пропорциях файлов. */
/* Свес делаем сдвигом картинки внутри коробки, а не выносом коробки за
край окна. Вынос давал странице лишнюю ширину, и убрать её можно было
только обрезкой на html — а обрезка там отключает прокрутку страницы
целиком. Здесь коробка стоит вплотную к краю и наружу не вылезает, а
картинка внутри сдвинута и на границе коробки обрывается. */
/* По умолчанию фигура стоит по центру своего раздела. Те, у кого задан
--pN-head, переопределяют top ниже и выравниваются по верху заголовка. */
.figure{
position:absolute;top:50%;z-index:0;
pointer-events:none;user-select:none;
--zoom:1;
width:calc(var(--fig-w) * var(--zoom));
height:calc(var(--fig-h) * var(--zoom));
background-size:contain;background-repeat:no-repeat;
}
/* Шахматный порядок: нечётные слева, чётные справа. Картинка каждой
сдвинута к своему краю на --fig-bleed и там срезается краем коробки. */
.fig-1,.fig-3,.fig-5{left:calc(50% - 50vw + var(--fig-edge) + var(--side));
background-position:left calc(-1 * var(--bleed)) bottom 0}
.fig-2,.fig-4,.fig-6{right:calc(50% - 50vw + var(--fig-edge) + var(--side));
background-position:right calc(-1 * var(--bleed)) bottom 0}
.fig-1{--zoom:var(--p1-zoom);--bleed:var(--p1-bleed);--side:var(--p1-side);opacity:calc(var(--p1-fade) * var(--fig-dim));
top:var(--p1-head);
transform:translateY(calc(0px - var(--p1-up)));
background-image:url("assets/portrait-green.webp?v=f23133f8")}
.fig-2{--zoom:var(--p2-zoom);--bleed:var(--p2-bleed);--side:var(--p2-side);opacity:calc(var(--p2-fade) * var(--fig-dim));
top:var(--p2-head);
transform:translateY(calc(0px - var(--p2-up)));
background-image:url("assets/portrait-mulatta.webp?v=9084d3e2")}
.fig-3{--zoom:var(--p3-zoom);--bleed:var(--p3-bleed);--side:var(--p3-side);opacity:calc(var(--p3-fade) * var(--fig-dim));
transform:translateY(calc(-50% - var(--p3-up)));
background-image:url("assets/portrait-lilac.webp?v=b58fe7e2")}
.fig-4{--zoom:var(--p4-zoom);--bleed:var(--p4-bleed);--side:var(--p4-side);opacity:calc(var(--p4-fade) * var(--fig-dim));
top:var(--p4-head);
transform:translateY(calc(0px - var(--p4-up)));
background-image:url("assets/portrait-5.webp?v=cb40112b")}
.fig-5{--zoom:var(--p5-zoom);--bleed:var(--p5-bleed);--side:var(--p5-side);opacity:calc(var(--p5-fade) * var(--fig-dim));
transform:translateY(calc(-50% - var(--p5-up)));
background-image:url("assets/portrait-blonde.webp?v=1393f524")}
.fig-6{--zoom:var(--p6-zoom);--bleed:var(--p6-bleed);--side:var(--p6-side);opacity:calc(var(--p6-fade) * var(--fig-dim));
transform:translateY(calc(-50% - var(--p6-up)));
background-image:url("assets/portrait-6.webp?v=7b52e643")}
/* Каждый раздел с фигурой отсчитывает её от себя, поэтому нужна
собственная система координат. */
.hero,.how-section,.privacy-inner,
.experience-section,.reviews-inner,.faq-section{position:relative}
/* Текст поднимаем над фигурой. Без этого он уходил бы под неё: фигура
позиционирована, а обычный текст в потоке рисуется слоем ниже, и
выигрывала бы картинка. position тут только у обёрток текста —
самой фигуре его трогать нельзя, она на нём и держится. */
.how-copy,.reviews-copy,.faq-copy,.experience-copy,
.privacy-inner > *:not(.figure){position:relative;z-index:1}
/* Полосу под фигуру отнимаем у текста с обеих сторон сразу: тогда текст
остаётся отцентрованным, а фигуры чередуются по краям. Показываем их
только там, где это поле реально есть — ниже 1440 px отдать его значит
сломать вёрстку ради украшения.
Поля отнимаем у всей страницы, а не только у разделов с фигурой. Иначе
раздел без фигуры остаётся шире соседнего, и левый край текста прыгает
от блока к блоку — это заметнее самих фигур. Пустое поле там, где
фигуры нет, читается просто как поле.
Шапку при этом не сужаем: семь ссылок меню занимают около 800 px, и в
суженной мерке «Как это работает» переносилось на вторую строку. Меню
важнее выравнивания логотипа по колонке текста. */
@media (min-width:1440px){
/* Первому экрану нужна высота под панамку: она выровнена по верху
заголовка и оттуда идёт вниз на свой полный рост. Считаем теми же
токенами, что и её положение, — тогда высота следует за размером
фигуры сама и подрезать её больше нечем. */
.hero{min-height:calc(var(--p1-head) + var(--fig-h) * var(--p1-zoom))}
.section-pad{
width:min(100% - var(--gutter) - 2 * var(--fig-rail),var(--container));
}
}
@media (max-width:1439px){
.figure{display:none}
}
/* Шрифты этого блока подняты на ступень: четыре шага стоят в узких колонках
рядом с фигурой в полный рост и читались мельче остального сайта. Считаем
от тех же токенов, что и пульт шрифтов в начале файла, чтобы общий
множитель продолжал двигать и этот блок; точечные px оторвали бы его
от пульта.
Заголовки подняты слабее текста намеренно. На ступени 1.18 «Пишете нам в
Telegram» ломался на три строки, когда соседи занимали две, и ряд шёл
рваным. 1.08 — предел, на котором все четыре держат по две строки;
проверено замером на 1600 и 1280 px. */
.how-section{
--font-h3:calc(var(--size-h3) * 1.08 * var(--font-scale));
--font-small:calc(var(--size-small) * 1.15 * var(--font-scale));
--font-mono:calc(var(--size-mono) * 1.1 * var(--font-scale))}
.how-copy,.reviews-copy{min-width:0}
.faq-copy{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--space-96);
align-items:start;min-width:0}
/* ── герой ── */
/* Без overflow:hidden. Он остался от прежней схемы, где фигуры первого
экрана свисали за край, и теперь только мешал: панамку, выровненную по
верху заголовка, он срезал снизу на 50-219 px. Свес за боковой край
режется на html, отдельная обрезка тут не нужна. */
.hero-wrap{position:relative}
/* Калькулятор уехал в раздел комиссии, к кривой: цена и расчёт — один
разговор, и держать их на разных экранах значило заставлять сверять
по памяти. Здесь остался только заголовок, поэтому колонка одна. */
.hero{
display:grid;grid-template-columns:1fr;gap:var(--space-96);
padding-block:var(--section-y-compact);
align-items:center;position:relative;
}
.hero-copy,.calculator-card{position:relative;z-index:1}
/* Монета: спрайт из 48 кадров, 8 столбцов × 6 строк.
Строка сменяется ровно за один проход столбцов (0.5s × 6 = 3s),
поэтому кадры не разъезжаются. */
.coin-spin{
--coin:128px;
width:var(--coin);height:var(--coin);
margin-bottom:var(--space-24);
background-image:url("assets/coin-spin.webp?v=050944b8");
background-size:calc(var(--coin) * 8) calc(var(--coin) * 6);
background-repeat:no-repeat;
animation:coin-col .5s steps(8) infinite, coin-row 3s steps(6) infinite;
}
@keyframes coin-col{to{background-position-x:calc(var(--coin) * -8)}}
@keyframes coin-row{to{background-position-y:calc(var(--coin) * -6)}}
.hero-lede{
max-width:46ch;color:var(--text-secondary);
font-size:var(--font-lead);line-height:1.6;margin-bottom:var(--space-24);
}
.hero-note{display:flex;align-items:center;gap:var(--space-8);color:var(--text-secondary);font-size:var(--font-small)}
.hero-note svg{color:var(--silver);flex-shrink:0}
/* ── калькулятор ── */
.calculator-card{
background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);padding:var(--space-24);
box-shadow:var(--shadow-lg);
/* страховка: что бы ни подставил расчёт, за карточку это не вылезет */
overflow:hidden;
}
/* без min-width:0 длинное число в flex-строке не сжимается и рвёт вёрстку */
.calculation div > *,.total-row > *{min-width:0}
.calculation b,.total-row strong,.self-payout span:last-child{
overflow:hidden;text-overflow:ellipsis;
}
.card-topline,.rate-row,.calculation div,.total-row,.review-meta{
display:flex;justify-content:space-between;align-items:center;
}
.card-topline{
color:var(--text-secondary);
padding-bottom:var(--space-16);border-bottom:1px solid var(--line);
}
.status{display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0}
.status .dot{
width:5px;height:5px;border-radius:50%;background:var(--silver);
animation:pulse 2s ease-in-out infinite;flex-shrink:0;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.rate-row{padding:var(--space-24) 0;color:var(--text-secondary)}
.muted-label,.field-label{
display:block;color:var(--text-secondary);
font-size:var(--font-small);margin-bottom:var(--space-8);
}
.rate-row strong{
font-size:var(--font-number);letter-spacing:-.03em;
font-variant-numeric:tabular-nums;
}
.rate-row strong small{
font-family:'DM Mono',monospace;font-size:var(--font-mono);letter-spacing:0;
-webkit-text-fill-color:var(--text-secondary);color:var(--text-secondary);
}
.rate-row > svg{color:var(--silver-deep);flex-shrink:0}
/* Выбор площадки. Курс у площадок разный, и человек должен выбрать свою
до того, как увидит цифру, а не после — иначе он запомнит чужую. */
.plat-pick{
display:flex;gap:6px;margin-bottom:var(--space-24);
border:1px solid var(--silver-dark);border-radius:var(--radius-sm);padding:4px;
}
.plat-pick button{
flex:1;min-width:0;height:38px;padding:0 var(--space-8);
border:0;border-radius:calc(var(--radius-sm) - 3px);background:transparent;
font:inherit;color:inherit;font-size:var(--font-small);
/* у button свой цвет от браузера, и он не наследуется: без color:inherit
подпись уходила в чёрное на чёрном */
cursor:pointer;transition:background .18s,color .18s;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.plat-pick button:not(.is-on){color:var(--text-secondary)}
.plat-pick button:hover:not(.is-on){background:var(--surface-2,rgba(127,127,127,.10))}
.plat-pick button.is-on{background:var(--accent-soft);color:var(--accent-deep)}
.plat-pick button:focus-visible{outline:2px solid var(--silver-deep);outline-offset:-2px}
/* Три кнопки с «Другой» на телефоне не помещались: «Chaturbate» обрезалась
до «Chaturba…». На узком экране ужимаем поля и чуть кегль — многоточие
остаётся только страховкой на совсем узкие экраны. */
@media (max-width:480px){
.plat-pick{gap:4px;padding:3px}
.plat-pick button{padding:0 4px;font-size:calc(var(--font-small) * .9)}
}
@media (max-width:340px){
.plat-pick button{padding:0 2px;font-size:calc(var(--font-small) * .8);letter-spacing:-.01em}
}
/* Тот же переключатель под заголовком раздела о комиссии. Во всю ширину
секции он выглядел бы как навигация по сайту, а это выбор площадки. */
.plat-pick-wide{max-width:300px;margin:var(--space-32) 0 0}
/* Чем выбранная площадка удобнее. Место держим всегда: без этого карточка
прыгала бы при переключении, а это ровно то, от чего мы её и лечили. */
.plat-note{margin:0;font-size:calc(14.5px * var(--font-scale));line-height:1.5}
.plat-note.on{
margin:-14px 0 var(--space-24);color:var(--text-tertiary);
min-height:1.5em;
}
.token-input{
display:flex;align-items:center;gap:var(--space-8);
border:1px solid var(--silver-dark);border-radius:var(--radius-sm);
padding:0 var(--space-16);height:58px;margin-bottom:var(--space-24);
background:var(--bg);transition:border-color .2s;
}
.token-input:focus-within{border-color:var(--silver-deep)}
.token-input input{
width:100%;min-width:0;background:transparent;border:0;outline:0;
color:var(--text-primary);font-size:var(--font-h3);font-variant-numeric:tabular-nums;
}
.token-input input::placeholder{color:var(--text-tertiary)}
.token-input span{color:var(--text-secondary);font-size:var(--font-small);white-space:nowrap}
.calculation{border-bottom:1px solid var(--line);padding-bottom:var(--space-16)}
/* display:flex из общего правила выше перебивает браузерное [hidden], и
строка подарка висела с прочерком на любой сумме — в том числе там, где
подарка нет. Ровно та же ловушка была у кнопки «Больше отзывов». */
.calculation div[hidden]{display:none}
.calculation div{font-size:var(--font-small);color:var(--text-secondary);margin:10px 0;gap:var(--space-16)}
.calculation b{
color:var(--text-primary);font-family:'DM Mono',monospace;font-weight:400;
font-size:var(--font-small);font-variant-numeric:tabular-nums;text-align:right;
}
.total-row{padding:var(--space-16) 0 var(--space-8);color:var(--text-secondary);font-size:var(--font-small);gap:var(--space-16)}
.total-row strong{
display:block;min-height:1.2em;
font-size:var(--font-number);letter-spacing:-.03em;
font-variant-numeric:tabular-nums;white-space:nowrap;
}
.total-row strong small{
font-family:'DM Mono',monospace;font-size:var(--font-mono);
-webkit-text-fill-color:var(--text-secondary);color:var(--text-secondary);
}
.self-payout{
display:flex;justify-content:space-between;gap:var(--space-16);
color:var(--text-secondary);font-size:var(--font-small);margin:0 0 var(--space-24);
}
.self-payout span:last-child{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.primary-button,.footer-telegram,.problem-card a{
display:flex;align-items:center;justify-content:center;gap:var(--space-8);
background:var(--gradient-warm);color:var(--on-warm);border-radius:var(--radius-sm);
font-size:var(--font-small);font-weight:700;padding:var(--space-16);
transition:filter 200ms var(--ease-out),transform 140ms var(--ease-out);
}
/* Ховер только там, где есть настоящий курсор: на телефоне тап оставляет
кнопку приподнятой, пока не ткнёшь в другое место. */
@media (hover:hover) and (pointer:fine){
.primary-button:hover,.footer-telegram:hover,.problem-card a:hover{
filter:brightness(1.05);transform:translateY(-2px);
}
}
/* Нажатие перебивает подъём: кнопка уходит вниз под палец. */
.primary-button:active,.footer-telegram:active,.problem-card a:active{
transform:scale(.985);
}
/* ── полоса доверия ── */
.trust-strip{
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding-block:var(--space-24);
display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-24);
}
.trust-strip > div{display:grid;grid-template-columns:32px 1fr;column-gap:var(--space-16);align-items:center}
.strip-icon{
grid-row:span 2;display:grid;place-items:center;
width:32px;height:32px;border-radius:50%;
background:var(--silver-darker);color:var(--silver);
}
.trust-strip b{font-size:var(--font-small);font-weight:600}
.trust-strip div > span:last-child{font-size:var(--font-small);color:var(--text-secondary);margin-top:4px}
/* ── секции ── */
.content-section{padding-block:var(--section-y);position:relative}
.section-heading h2,.faq-heading h2{margin-bottom:0}
/* Кривая слева, калькулятор справа, на одном уровне: сначала видно, как
падает процент, потом сразу можно проверить это на своей сумме.
Ширина правой колонки та же, что была у карточки на первом экране —
поля внутри неё рассчитаны под неё. */
.fees-layout{display:grid;grid-template-columns:minmax(0,1fr) 470px;
gap:var(--space-64);margin-top:var(--space-32);align-items:start}
/* Подсказка живёт под кривой, а не рядом с калькулятором: рядом она
пересказывала бы то, что человек и так видит на экране. */
.fees-left{display:flex;flex-direction:column;gap:var(--space-32);min-width:0}
.fee-table{border-top:1px solid var(--line);padding-top:var(--space-32)}
/* ── кривая комиссии ── */
/* График вместо таблицы ступеней: главное, что должен увидеть человек —
линия идёт вниз плавно, и ждать порога не нужно. */
.fee-chart{width:100%;height:auto;display:block;overflow:visible}
.fee-chart .line{
fill:none;stroke:url(#curveInk);stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;
}
.fee-chart .dots circle{fill:var(--accent-line)}
.fee-chart .lbl text{
font-family:'DM Mono',monospace;font-size:calc(13px * var(--font-scale));fill:var(--text-tertiary);
}
.fee-chart .lbl text.p{fill:var(--text-secondary)}
.fee-chart .you{fill:var(--accent);stroke:var(--bg);stroke-width:2.5}
/* ── точки захвата ──────────────────────────────────────────
Раньше здесь стояли шесть правил с приставкой [data-theme="light"]:
акцент был только у светлой темы, а тёмная обходилась серебром. Теперь
акцент есть у обеих, и правила уехали обратно по своим разделам —
красить приходит токен, а не отдельная ветка на каждую тему.
Крашено ровно то, что клиент ищет глазами: где он на графике
(.fee-chart .you), какую площадку выбрал (.plat-pick .is-on), сколько
набрал ползунком (.fs-fill, .fs-dot) и в каком он разделе (.eyebrow).
Остальное остаётся спокойным — иначе выделенное перестаёт выделяться.
Исключение одно: надзаголовок внутри розовой секции. Там фон свой,
светлый, и акцент на нём пропал бы — у него отдельное правило ниже,
в разделе про приватность. */
/* ── ползунок суммы ── */
/* Дорожка вжата ровно на столько же, на сколько поле графика внутри svg:
ручка идёт точно под точкой кривой, и связь между ними видна без подписи. */
.fee-slider{margin-top:var(--space-40)}
/* без боковых полей: дорожка обязана совпасть с полем графика ровно,
а текстовые строки отступают сами — по 10px, как подпись под таблицей */
.fs-head{display:flex;align-items:baseline;gap:12px;margin-bottom:var(--space-16);padding-inline:10px}
.fs-amount{
font-family:'DM Mono',monospace;font-size:calc(26px * var(--font-scale));line-height:1;
letter-spacing:-.01em; /* крупный кегль всегда просит поджать */
color:var(--text-primary);font-variant-numeric:tabular-nums;
}
.fs-tokens{color:var(--text-tertiary);font-size:var(--font-small)}
.fs-slider{
position:relative;height:44px; /* палец на телефоне не мельче */
padding-inline:var(--fs-inset,1.43%);
display:flex;align-items:center;
touch-action:pan-y; /* влево-вправо наше, вверх — странице */
cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.fs-track{
position:relative;flex:1;height:2px;border-radius:2px;
background:var(--line);overflow:hidden;
}
.fs-fill{
position:absolute;inset:0;display:block;background:var(--accent);
transform-origin:left center;transform:scaleX(0);
}
.fs-thumb{
position:absolute;left:var(--fs-inset,1.43%);top:50%;
translate:-50% -50%; /* центрирование отдельно от позиции */
width:16px;height:16px;pointer-events:none;
}
.fs-dot{
display:block;width:100%;height:100%;border-radius:50%;
background:var(--accent);box-shadow:0 0 0 4px var(--halo);
transition:transform 120ms var(--ease-out),box-shadow 160ms var(--ease-out);
}
.fs-slider:hover .fs-dot{box-shadow:0 0 0 7px var(--halo-2)}
/* Отклик появляется в момент нажатия, а не после отпускания */
.fs-slider.is-grab .fs-dot{transform:scale(1.18);box-shadow:0 0 0 10px var(--halo-3)}
.fs-slider:focus{outline:none}
.fs-slider:focus-visible .fs-dot{
box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent);
}
.fs-out{
display:flex;flex-wrap:wrap;gap:var(--space-16) var(--space-64);
margin-top:var(--space-24);padding-inline:10px;
}
.fs-out div{display:flex;flex-direction:column;gap:10px}
.fs-out span{
color:var(--text-tertiary);font-size:var(--font-mono);line-height:1.4;
letter-spacing:.12em;text-transform:uppercase;
}
.fs-out b{
font-family:'DM Mono',monospace;font-weight:400;font-size:var(--font-body);
color:var(--silver);font-variant-numeric:tabular-nums;
}
/* Ради этой цифры человек и двигал ползунок — она ярче двух соседних */
.fs-out .fs-lead b{color:var(--text-primary)}
@media (prefers-reduced-motion:reduce){
.fs-dot{transition:box-shadow 160ms linear}
.fs-slider.is-grab .fs-dot{transform:none}
}
@media (prefers-contrast:more){
.fs-track{background:var(--text-tertiary)}
.fs-dot{background:var(--text-primary);
box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--text-primary)}
}
/* Подсказка приходит и уходит по ходу набора суммы. Если её просто прятать,
карточка дёргается вверх-вниз прямо под курсором, а кнопка «Обменять»
уезжает из-под пальца. Поэтому место под строку занято всегда, меняется
только текст. */
.calc-hint{
margin:var(--space-16) 0 0;padding:10px 12px;
background:var(--surface-2);border-radius:var(--radius-sm);
color:var(--text-secondary);font-size:calc(15px * var(--font-scale));line-height:1.5;
/* Блок, а не флекс: во флексе соседние текстовые куски становятся
отдельными элементами, и пробелы вокруг схлопывались — выходило
«Ещё769токенов». Высоту держит min-height, ровно в одну строку. */
min-height:calc(1.5em + 20px);
transition:opacity .18s ease-out;
}
/* Пустая подсказка держит место, но не показывает пустую плашку. */
.calc-hint:empty{opacity:0}
/* На узкой карточке подсказка переносится на вторую строку — значит и место
под неё нужно на две. Двадцать лишних пикселей внизу лучше, чем кнопка
«Обменять», уезжающая из-под пальца на каждой набранной цифре. */
@media (max-width:600px){.calc-hint{min-height:calc(3em + 20px)}}
.calc-hint b{color:var(--text-primary);font-family:'DM Mono',monospace}
.table-row{
display:grid;grid-template-columns:1fr .34fr;
padding:var(--space-16) 10px;border-bottom:1px solid var(--line);
color:var(--text-secondary);font-size:var(--font-body);
}
.table-row strong{
font-family:'DM Mono',monospace;font-size:var(--font-body);font-variant-numeric:tabular-nums;
text-align:right;color:var(--silver);
}
.table-header{color:var(--text-secondary);padding:var(--space-16) 10px}
.table-header strong{color:var(--text-secondary);font-size:var(--font-mono);letter-spacing:.12em}
.table-footnote{color:var(--text-secondary);font-size:var(--font-small);line-height:1.65;margin:var(--space-32) 10px 0}
.soft-card{padding:var(--space-24);border:1px solid var(--line);border-radius:var(--radius);color:var(--silver);background:var(--surface)}
.soft-card p{color:var(--text-secondary);font-size:var(--font-body);line-height:1.6;margin:var(--space-16) 0 0}
/* «Другая площадка»: условия обсуждаются лично, считать нечего. Поле ввода,
расчёт и итог прячем — на их месте подсказка, что делать дальше. Кнопка
в Telegram остаётся: это и есть следующий шаг. */
.calculator-card.is-other label[for="tokens"],
.calculator-card.is-other .free-toggle,
.calculator-card.is-other .token-input,
.calculator-card.is-other .calculation,
.calculator-card.is-other .total-row,
.calculator-card.is-other .calc-hint{display:none}
.calc-other{margin:var(--space-16) 0 var(--space-24);padding:var(--space-16) var(--space-24);
border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.calc-other b{display:block;font-size:var(--font-h3);letter-spacing:-.02em;margin-bottom:8px}
.calc-other p{margin:0 0 8px;color:var(--text-secondary);font-size:var(--font-small);line-height:1.6}
.calc-other p:last-child{margin:0}
/* Кнопка «без комиссии»: первый обмен и каждый N-й идут по чистой
витрине. Это вход в расчёт, поэтому она стоит под полем суммы, а не
среди строк итога. Нажатое состояние показываем так же, как выбранную
площадку, — подложкой и цветом: другой механики в карточке нет. */
.free-toggle{
display:inline-flex;align-items:center;gap:var(--space-8);
margin:var(--space-16) 0 0;padding:9px var(--space-16);
border:1px solid var(--line);border-radius:var(--radius-sm);
background:var(--surface-2);color:var(--text-secondary);
font-family:inherit;font-size:var(--font-small);font-weight:600;
cursor:pointer;transition:border-color .2s,color .2s,background .2s;
}
.free-toggle svg{flex:none}
.free-toggle[aria-pressed="true"]{
border-color:var(--accent-line);color:var(--accent);
background:var(--accent-soft);
}
@media (hover:hover) and (pointer:fine){
.free-toggle:hover{border-color:var(--accent-line);color:var(--text-primary)}
.free-toggle[aria-pressed="true"]:hover{color:var(--accent)}
}
/* ── шаги ── */
.wide-heading{text-align:center;position:relative;z-index:1}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--space-48);border-top:1px solid var(--line);position:relative;z-index:1}
.step{padding:var(--space-24) var(--space-24) 0 0}
.step:not(:last-child){border-right:1px solid var(--line);margin-right:var(--space-24)}
.step-number{color:var(--silver-deep)}
/* Пояснений под названиями шагов больше нет: названия говорят сами за
себя, а срок выплаты уже стоит в полосе под первым экраном. Поэтому
у заголовка нет нижнего отступа — под ним ничего не идёт. */
.step h3{margin:var(--space-24) 0 0}
.problem-card{
margin-top:var(--space-48);padding:var(--space-24);background:var(--surface-2);
display:grid;grid-template-columns:1fr 1.2fr auto;align-items:center;gap:var(--space-24);
border-left:2px solid var(--silver-deep);position:relative;z-index:1;
}
.problem-card .eyebrow{margin:0 0 var(--space-8)}
.problem-card h3{margin:0}
.problem-card > p{font-size:var(--font-small);color:var(--text-secondary);line-height:1.6;margin:0}
.problem-card a{padding:12px var(--space-16);white-space:nowrap}
/* ── приватность ── */
.privacy-section{background:var(--gradient-warm);color:var(--on-warm)}
/* Три колонки: значок, текст, фигура. Прежняя сетка была рассчитана ровно
на два блока с распоркой между ними — когда фигура стала третьим, текст
зажало в остаток и он посыпался по одному слову в строку. */
.privacy-inner{display:grid;grid-template-columns:auto minmax(0,1fr);
gap:var(--space-32);padding-block:var(--section-y-compact);align-items:center}
.privacy-inner > div:nth-child(2){min-width:0}
.privacy-icon{
width:46px;height:46px;display:grid;place-items:center;
border:1px solid rgba(17,19,24,.28);border-radius:50%;color:#111318;
}
.privacy-inner .eyebrow{color:rgba(17,19,24,.82)}
.privacy-inner h2{margin-bottom:var(--space-16);color:#111318}
.privacy-inner h2 em{color:rgba(17,19,24,.55)}
.privacy-text{max-width:60ch;color:rgba(17,19,24,.8);font-size:var(--font-body);line-height:1.7;margin:0}
/* Строка о данных переехала сюда с первого экрана. Плашка тут светлая,
поэтому цвета свои: токены --text-secondary и --silver рассчитаны на
тёмный фон и на розовом градиенте выцветают до нечитаемых. */
.privacy-note{display:flex;align-items:center;gap:var(--space-8);
margin:var(--space-24) 0 0;color:rgba(17,19,24,.62);
font-size:var(--font-small)}
.privacy-note svg{color:rgba(17,19,24,.5);flex-shrink:0}
/* ── о команде ── */
.experience-section{display:grid;grid-template-columns:1fr;gap:var(--space-96);align-items:center}
.experience-copy > p:not(.eyebrow){max-width:46ch;color:var(--text-secondary);font-size:var(--font-body);line-height:1.7;margin:var(--space-24) 0}
.text-link{
display:inline-flex;align-items:center;gap:var(--space-8);color:var(--link-tg);
border-bottom:1px solid var(--link-tg-line);padding-bottom:6px;
font-size:var(--font-small);font-weight:600;
transition:border-color .2s,color .2s;
}
.text-link:hover{border-color:var(--link-tg);color:var(--link-tg-hover)}
/* Без маски: у снимка и так вырезан фон, а виньетка срезала макушку. */
/* Приближение по наведению — только там, где есть настоящий курсор.
На тапе ховер залипает, а увеличенная картинка так и остаётся висеть.
Масштаб маленький намеренно: портрет ни на что не нажимается, и сильное
движение обещало бы клик, которого нет. */
@media (hover:hover) and (pointer:fine){
.brand:hover .brand-logo{transform:scale(1.04)}
}
/* Подпись идёт по внешнему краю портрета: он стоит в левой колонке,
поэтому она слева, а не в разрыве между фото и текстом. */
.image-label{
position:absolute;bottom:16%;right:0;left:auto;
color:var(--silver-deep);transform:rotate(-90deg);
}
/* ── отзывы ── */
.reviews-section{background:var(--bg);padding-block:var(--section-y)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-16);margin-top:var(--space-48)}
.review-card{
min-height:200px;padding:var(--space-24);border:1px solid var(--line);background:var(--surface);
border-radius:var(--radius);display:flex;flex-direction:column;
/* Отзывы приходят из базы уже после отрисовки страницы. Без входа они
выпрыгивают все разом. Лесенка — глаз читает её как одно движение,
а не как дюжину отдельных. Шаг берём из --i, который проставляет
landing.js: раньше задержки были расписаны по nth-child до шестого,
и седьмой отзыв выпрыгивал вместе с первым. Ступени обрываем
на восьмой — дальше лесенка превращается в ожидание. */
animation:review-in 380ms var(--ease-out) backwards;
animation-delay:calc(min(var(--i,0),7) * 50ms);
}
@keyframes review-in{
from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:none}
}
/* Вход карточки и дрейф градиента идут списком, а не по очереди: короткая
анимация появления записана первой, бесконечный перелив второй. Если
оставить одну сокращённую запись, вторая стёрла бы первую и карточка
выпрыгивала бы без лесенки. Задержки перечислены тем же списком —
ступенька достаётся входу, перелив начинается сразу. */
.review-card.is-featured{
background:var(--gradient-warm);background-size:220% 220%;
color:var(--on-warm);border-color:transparent;
animation:review-in 380ms var(--ease-out) backwards,
warm-drift 18s ease-in-out infinite;
animation-delay:calc(min(var(--i,0),7) * 50ms),0s;
}
.review-meta{color:var(--text-secondary);gap:10px}
.review-card.is-featured .review-meta{color:rgba(17,19,24,.78)}
.review-stars{letter-spacing:.1em;font-size:var(--font-small);color:var(--silver)}
.review-card.is-featured .review-stars{color:#111318}
.review-card p{font-size:var(--font-body);line-height:1.6;margin:var(--space-24) 0 0;color:var(--text-secondary)}
.review-card.is-featured p{color:rgba(17,19,24,.86)}
/* ── живая розовая поверхность ──
Тот же приём, что на хроме, только развёрнутый поперёк: кнопка шире,
чем выше, и вдоль неё перелив виден целиком, а сверху вниз уходил бы
за край за полшага.
Правило стоит здесь, ниже всех розовых поверхностей, намеренно: каждая
из них задаёт фон сокращённой записью `background`, а та сбрасывает
размер фона обратно в исходный. Стой это правило выше — размер сбросился
бы следом за ним и двигаться было бы нечему.
Восемнадцать секунд на проход выбраны, чтобы кнопка выглядела тёплой и
живой, а не мигала: рядом с ней текст, который читают. */
.sticky-telegram,
.primary-button,.footer-telegram,.problem-card a,
.privacy-section{
background-size:220% 220%;
animation:warm-drift 18s ease-in-out infinite;
}
@keyframes warm-drift{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
/* Кнопка «ещё» — не призыв к действию, а продолжение чтения, поэтому
выглядит как ссылка с рамкой, а не как кнопка обмена: соревноваться
за внимание с «Обменять» ей незачем. */
/* ── переключатель темы ── */
.theme-toggle{
background:none;border:1px solid var(--line);border-radius:var(--radius-sm);
color:var(--text-secondary);cursor:pointer;line-height:1;
width:34px;height:34px;flex:0 0 auto;font-size:calc(17px * var(--font-scale));
display:inline-flex;align-items:center;justify-content:center;
transition:color .2s,border-color .2s;
}
.theme-toggle:hover{color:var(--text-primary);border-color:var(--silver-dark)}
.theme-toggle:focus-visible{outline:2px solid var(--silver-deep);outline-offset:2px}
.review-more{display:flex;justify-content:center;margin-top:var(--space-32)}
/* display:flex перебивает браузерное [hidden]{display:none}, и когда отзывы
кончались, кнопка оставалась на экране и звала нажать ещё раз впустую. */
.review-more[hidden]{display:none}
.review-more button{
background:none;border:1px solid var(--line);border-radius:var(--radius-sm);
color:var(--text-secondary);padding:13px var(--space-32);
font-family:'DM Mono',monospace;font-size:var(--font-mono);letter-spacing:.08em;
cursor:pointer;transition:color .2s,border-color .2s;
}
.review-more button:hover{color:var(--text-primary);border-color:var(--silver-dark)}
.review-more button:focus-visible{outline:2px solid var(--silver-deep);outline-offset:3px}
/* ── площадки ── */
.platforms-section{padding-block:var(--section-y-compact);border-bottom:1px solid var(--line)}
.platforms-section .eyebrow{margin-bottom:var(--space-16)}
.platforms-list{
color:var(--text-secondary);font-size:var(--font-lead);
line-height:1.8;letter-spacing:-.02em;margin:0;
}
.platforms-list i{color:var(--silver-deep);font-style:normal;margin:0 10px}
/* Кликабельные площадки светлее остальных — подчёркивать все три посреди
строки было бы шумно, а разница в тоне читается как «сюда можно нажать». */
.platforms-list a{
color:var(--silver);
border-bottom:1px solid transparent;
transition:border-color .2s,color .2s;
}
.platforms-list a:hover{border-bottom-color:var(--silver-deep)}
/* ── FAQ ── */
/* Раздел — одна колонка. Пару колонок держит .faq-copy внутри него:
фигура ушла на поле, и делить сам раздел больше не на что. Пока здесь
стояла пара, содержимое жалось в первую колонку и делилось ещё раз —
вопросы выходили шириной 176 px и ломались на пять строк, а вторая
колонка раздела стояла пустой. */
.faq-section{display:grid;grid-template-columns:minmax(0,1fr)}
.faq-heading > p:not(.eyebrow){color:var(--text-secondary);font-size:var(--font-body);line-height:1.6;max-width:34ch;margin:var(--space-24) 0}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item button{
width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--space-24);
padding:var(--space-16) 0;color:var(--text-secondary);text-align:left;cursor:pointer;
font-size:var(--font-body);transition:color .2s;
}
.faq-item button:hover{color:var(--text-primary)}
.faq-item button svg{transition:transform .25s;color:var(--silver-deep);flex-shrink:0}
.faq-item.is-open button svg{transform:rotate(180deg)}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s}
/* Ответ — несколько абзацев в одной обёртке. Раскрытие анимируется по
строкам сетки и работает, только когда у сетки один дочерний элемент. */
.faq-answer > div{overflow:hidden}
.faq-answer p{color:var(--text-secondary);font-size:var(--font-body);line-height:1.7;margin:0 0 var(--space-8)}
.faq-answer p:last-child{margin-bottom:0}
.faq-item.is-open .faq-answer{grid-template-rows:1fr}
.faq-item.is-open .faq-answer > div{padding-bottom:var(--space-16)}
/* ── подвал ── */
.footer{border-top:1px solid var(--line);padding-block:var(--space-32)}
.footer > .brand{margin-bottom:var(--space-32)}
.footer-telegram{width:fit-content;padding:12px var(--space-16)}
.footer-bottom{
display:flex;justify-content:space-between;gap:var(--space-16);flex-wrap:wrap;
color:var(--text-secondary);
border-top:1px solid var(--line);padding-top:var(--space-16);margin-top:var(--space-24);
}
.footer-bottom a:hover{color:var(--silver)}
.empty-note{color:var(--text-secondary);font-size:var(--font-small);padding:10px 0}
/* ── адаптив ── */
/* Кривой и калькулятору вдвоём нужно около тысячи пикселей: 470 под
карточку, отступ и остаток под график. Ниже — в одну колонку, иначе
правая карточка выдавливает страницу за край экрана. Порог отдельный,
а не общий 900: там схлопывается почти всё остальное, и до него эта
пара успевает сломаться. */
@media (max-width:1000px){
.fees-layout{grid-template-columns:1fr}
.fees-layout .calculator-card{order:-1;max-width:470px}
}
@media (max-width:900px){
.hero{grid-template-columns:1fr;gap:var(--space-48)}
.hero-copy{max-width:620px}
.coin-spin{--coin:104px}
.fees-layout,.faq-copy{gap:var(--space-48)}
.experience-section{gap:var(--space-48)}
/* Портрет, значок и текст втроём перестают помещаться раньше, чем страница
доходит до телефонной ширины: до этой правки на планшете портрет
выталкивал текст за край и страница ехала вбок. Ломаем сетку здесь,
а не на 650. */
.privacy-inner{grid-template-columns:minmax(0,1fr);gap:var(--space-24)}
}
/* Меню сворачивается в кнопку раньше, чем перестаёт помещаться. Семь
ссылок с укрупнённым шрифтом занимают около 800 пикселей, и вместе с
логотипом они выходили за край экрана на всём промежутке от 650 до 1100:
строка меню просто уезжала вправо, а страница начинала ездить вбок.
Раньше это было видно слабее — шрифт был мельче, — но было. */
@media (max-width:1100px){
.nav-links{
display:flex;position:absolute;top:100%;left:0;right:0;
padding:var(--space-16);background:var(--surface);border:1px solid var(--line);
flex-direction:column;align-items:stretch;gap:0;
box-shadow:var(--shadow-sm);
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity 200ms var(--ease-out),
transform 200ms var(--ease-out),
visibility 0s linear 200ms;
}
.nav-links.is-open{
opacity:1;visibility:visible;transform:none;
transition:opacity 200ms var(--ease-out),
transform 200ms var(--ease-out),
visibility 0s;
}
.nav-links a{padding:14px 4px;border-bottom:1px solid var(--line-soft)}
.nav-links .nav-telegram{border:0;padding:14px 4px}
/* Переключатель темы в раскрытом меню занимает свою строку: рядом со
ссылками он читался как ещё один пункт. */
.theme-toggle{align-self:flex-start;margin-top:var(--space-8)}
.menu-toggle{display:block}
/* Четыре плитки в одну строку тут уже не помещаются: подпись ломается
в три строки и полоса становится выше, чем нужно. Поэтому два на два. */
.trust-strip{grid-template-columns:1fr 1fr}
}
@media (max-width:650px){
:root{--gutter:var(--space-32)}
.topbar{height:68px}
.nav-links{top:68px}
.brand-logo{width:80px}
/* Меню всегда в потоке, прячем прозрачностью: display анимировать нельзя,
а через visibility закрытие дожидается конца перехода и не мигает. */
.nav-links{
display:flex;position:absolute;top:68px;left:0;right:0;
padding:var(--space-16);background:var(--surface);border:1px solid var(--line);
flex-direction:column;align-items:stretch;gap:0;
box-shadow:var(--shadow-sm);
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity 200ms var(--ease-out),
transform 200ms var(--ease-out),
visibility 0s linear 200ms;
}
.nav-links.is-open{
opacity:1;visibility:visible;transform:none;
transition:opacity 200ms var(--ease-out),
transform 200ms var(--ease-out),
visibility 0s;
}
.nav-links a{padding:14px 4px;border-bottom:1px solid var(--line-soft)}
.nav-links .nav-telegram{border:0;padding:14px 4px}
.menu-toggle{display:block}
.sticky-telegram{right:var(--space-16);bottom:var(--space-16);padding:13px 14px}
.to-top{right:var(--space-16);bottom:var(--space-16);width:42px;height:42px}
.sticky-telegram span{display:none}
.calculator-card{padding:var(--space-16)}
.trust-strip{grid-template-columns:1fr;gap:var(--space-16)}
.fees-layout,.experience-section,.faq-copy{grid-template-columns:1fr}
.fees-layout{margin-top:var(--space-32);grid-template-columns:1fr}
/* На телефоне калькулятор идёт первым: считать важнее, чем смотреть
на кривую, а прокручивать до него через весь график — лишний шаг. */
.fees-layout .calculator-card{order:-1}
.steps-grid{grid-template-columns:1fr 1fr;margin-top:var(--space-32)}
.step{padding:var(--space-16) var(--space-16) var(--space-24) 0}
.step:not(:last-child){border-right:0;margin-right:0}
.step:nth-child(odd){border-right:1px solid var(--line);margin-right:var(--space-16)}
.problem-card{grid-template-columns:1fr;gap:var(--space-16);margin-top:var(--space-32)}
.problem-card a{justify-self:start}
.privacy-inner{grid-template-columns:1fr;gap:var(--space-16)}
.image-label{display:none}
.review-grid{grid-template-columns:1fr;margin-top:var(--space-32)}
.review-card{min-height:0}
.platforms-list{font-size:var(--font-body)}
.platforms-list i{margin:0 6px}
.footer-bottom{flex-direction:column;gap:10px}
}
/* ── шаги на узком телефоне ──
В два столбца шаги не помещаются уже на 430 px: самое длинное слово в
названиях, «Подтверждаем», шире половины экрана, а сетка не сжимает
столбец уже слова — вылезала вправо на 20–90 px. Здесь шаги идут
списком: номер слева, название рядом, между шагами линия. */
@media (max-width:480px){
.steps-grid{grid-template-columns:1fr}
.step,.step:nth-child(odd){
display:flex;align-items:baseline;gap:var(--space-16);
padding:var(--space-16) 0;border-right:0;margin-right:0;
border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:0}
.step h3{margin:0}
}
/* ── мобильная версия: второе лицо убрано, первое уходит в фон ── */
@media (max-width:768px){
.side-right{display:none!important}
.side-left{
display:block;
right:auto;left:-16%;bottom:auto;
top:6px;transform:none;
width:min(248px,63vw);min-width:0;max-width:none;height:auto;
opacity:.6;
filter:grayscale(.25) contrast(1.04) brightness(.95);
}
.hero-copy{z-index:2}
.calculator-card{z-index:3}
}
/* «Уменьшить движение» — это меньше и мягче, а не «выключить всё».
Укачивает перемещение и бесконечное вращение; смена цвета и прозрачности
не мешает никому и помогает понять, что произошло. Раньше здесь стояло
animation:none;transition:none на всё подряд — из-за чего у этих людей
и ссылки, и аккордеон начинали дёргаться. */
@media (prefers-reduced-motion:reduce){
/* бесконечное — убрать целиком. Перелив на хроме и дрейф на розовых
поверхностях сюда же: движения на месте, без перемещения, но идут без
остановки, а это и есть то, от чего человека укачивает. Градиент
остаётся — замирает на первом кадре и просто становится заливкой. */
.coin-spin,.chrome,.status .dot,
.rate-row strong,.total-row strong,
.sticky-telegram,.primary-button,.footer-telegram,.problem-card a,
.privacy-section{animation:none!important}
/* входы оставить, но без перемещения */
.review-card{animation-name:review-fade}
/* У карточки-фаворита анимаций две: вход остаётся, дрейф гасим — потому
и список из двух имён, а не одно. */
.review-card.is-featured{animation-name:review-fade,none}
/* подъёмы и сдвиги — убрать, отклик на нажатие оставить */
.nav-links{transform:none!important}
.primary-button:hover,.footer-telegram:hover,.problem-card a:hover,
.sticky-telegram:hover{transform:none!important}
.brand:hover .brand-logo{transform:none!important}
html{scroll-behavior:auto}
}
@keyframes review-fade{from{opacity:0}to{opacity:1}}