/* ═══════════════════════════════════════════════════════════════════════════ POLISH-BUTTONS: КНОПКИ ПЕРЕСТАЮТ БЫТЬ КАМЕННЫМИ (25.08.2026) ═══════════════════════════════════════════════════════════════════════════ ТРЕБОВАНИЕ ВЛАДЕЛЬЦА ДОСЛОВНО: «с переливом градиентом должны быть все кнопки. Они какие-то каменные сейчас. У тебя всё какое-то квадратное... Ты можешь за эталон взять мой сайт просто ApolloProduction.studio.» ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ДОПИСКА В styles.css. В styles.css 8480 строк и 15 зон от разных исполнителей, часть из них правится прямо сейчас соседями. Встречная запись в один файл кончается потерей чужой работы - этот класс аварии в агентстве уже разбирали. Файл подключён ПОСЛЕ styles.css и mobile.css, поэтому при равной специфичности выигрывает по порядку каскада, и почти нигде не нужен ни !important, ни лишний вес. ─── ЧТО ЗАМЕРЕНО НА ЖИВОЙ СТРАНИЦЕ ДО ПРАВКИ ─────────────────────────── Свой headless-Chrome по протоколу отладки, локальный сервер, окно 1440x900. Контроль прибора сошёлся: полотно rgb(12,13,17), innerWidth 1440, scrollWidth 1440, найдены все семь искомых органов управления. кнопка радиус overflow animation ::before header CTA «Обменять» 126x44 10px visible none синяя засечка hero .btn--primary 239x56 12px visible none content:none .svc .btn--tg 307x50 12px visible none нет .final .btn--primary 271x56 14px visible none content:none .btn--ghost 202x48 12px visible none нет .btn--full 466x56 12px visible none content:none .seg__btn 226x44 10px visible none нет ДВА ФАКТА ИЗ ЗАМЕРА, НА КОТОРЫХ ДЕРЖИТСЯ ВЕСЬ ФАЙЛ. 1) animation НИ У ОДНОЙ кнопки не равно none только на бумаге - оно равно none у всех семи. То есть «каменные» - это не впечатление владельца, а измеренный факт: на кнопках нет ни одного движущегося слоя. Заливка у них статическая, и весь «металл» виден лишь как неподвижное пятно. 2) У кнопок ЗАНЯТЫ ОБА псевдоэлемента, и заняты ПО-РАЗНОМУ: .btn::after - верхняя фаска (блик), жива везде; .btn--primary::before - content:none, слой мёртв с зоны 5A; .header__cta::before - синяя засечка зоны 15, ЖИВА. Отсюда развилка, без которой перелив снёс бы чужую работу: - обычные кнопки получают перелив в СВОБОДНЫЙ ::before, фаска ::after не тронута вовсе; - у кнопки «Обменять» ::before занят засечкой, поэтому перелив едет в ::after, а фаска, которую ::after нёс, возвращается сюда же inset-тенями. Металл зоны 15 (--z15-metal на самом элементе) НЕ ТРОГАЕТСЯ - перелив ложится поверх него, как и требовалось. ЧТО ВЗЯТО ИЗ ЭТАЛОНА (orchids-projects/project/src/index.css, .btn-cosmic строка 1971): физика тени - inset-блик сверху rgba(255,255,255,.6), мягкая тень снизу 0 6px 20px -6px, а на наведении тень НАБИРАЕТ СИНЕВУ rgba(0,120,180,.5) плюс серебряный ореол. Копия один в один невозможна: там React и Tailwind, тут статика без сборки, и заливки кнопок уже свои. Перенесены настроение и физика, а не значения. ДВИЖЕНИЕ. Только transform и opacity, ровно как требует канон: перелив - это translateX + skewX у слоя, яркость - opacity. Ни background-position, ни ширины, ни фильтров в анимации нет, поэтому кадр не пересобирается композитором. Внизу файла обязательный @media (prefers-reduced-motion). АКЦЕНТ. Синий #4FC4E9 добавлен только во внешнюю тень при наведении, то есть в состояние, которое существует лишь под курсором и лишь у одной кнопки одновременно. Доля синего в покое не выросла ни на пиксель. ═════════════════════════════════════════════════════════════════════════ */ /* --------------------------------------------------------------------------- 1. ТОКЕНЫ ПЕРЕЛИВА. Живут на самой кнопке, а не в :root, потому что у светлого серебра и у тёмного стекла блик обязан быть разным: на тёмной кнопке достаточно белого, на светлом металле чистый белый не виден вовсе - там глинт читается только вместе с теневыми плечами по краям полосы. Пользовательские свойства наследуются в псевдоэлемент, поэтому одна переменная обслуживает оба слота (::before у обычных, ::after у «Обменять») и правило перелива не приходится дублировать под каждый вид кнопки. --------------------------------------------------------------------------- */ .btn{ /* Тёмное стекло и тёмный металл: хватает белого малой непрозрачности. */ --pb-sweep: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 26%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.06) 74%, rgba(255,255,255,0) 100%); --pb-idle: .5; /* покой: перелив на грани заметности, как и просили */ --pb-hot: 1; /* наведение: тот же слой в полную силу */ --pb-band: 38%; /* ширина полосы от ширины кнопки */ } /* Светлое серебро: hero, финал и «Обменять». Чистый белый на #F4F7FA не даёт контраста, поэтому у полосы появляются тёмные плечи цвета полотна - именно они и читаются как блик на полированном металле, а не как белое пятно. 🔴 СЕЛЕКТОРЫ ЗДЕСЬ - НЕ `.hero` И НЕ `.final`, И ЭТО НЕ ПРИДИРКА. Первая редакция файла была написана как `.hero .btn--primary`, и замер её поймал: серебро зона 10 раздаёт по `.hero__cta` и `.final__inner`, а внутри `.hero` лежит ещё и ТЁМНАЯ кнопка калькулятора (.calc__kzt, замер: заливка rgb(74,78,86) -> rgb(11,12,16), 466x56). Широкий селектор выдал ей светлый блик и белую фаску .62 - на почти чёрной кнопке это грязное белое пятно сверху. Селектор обязан повторять чужой ДОСЛОВНО, иначе он ловит не то. */ .hero__cta .btn--primary, .final__inner .btn--primary, .header__cta.btn--tg{ --pb-sweep: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(12,13,17,.055) 30%, rgba(255,255,255,.92) 50%, rgba(12,13,17,.055) 70%, rgba(255,255,255,0) 100%); --pb-idle: .34; --pb-hot: .8; } /* --------------------------------------------------------------------------- 2. СКРУГЛЕНИЯ. Жалоба «всё квадратное» проверена прибором: 10/12/14px при высотах 44/50/56-58px - это примерно пятая часть высоты, край читается почти прямым. Поднято до трети высоты, ступени сохранены (маленькая < обычная < крупная), пилюли не получилось: у пилюли радиус равен половине высоты, и на широкой кнопке она выглядит дёшево. Вес селектора 0,3,0 взят не для красоты: чужие правила зоны 10 объявлены как `.hero .btn--lg` и `.btn--sm.btn--primary`, то есть 0,2,0 и 0,2,1, и одиночный `.btn` их бы не перебил даже стоя последним. --------------------------------------------------------------------------- */ .btn.btn.btn{ border-radius:16px; } /* было 12 */ .btn.btn.btn--sm{ border-radius:14px; } /* было 10 */ .btn.btn.btn--lg{ border-radius:18px; } /* было 14 */ /* --------------------------------------------------------------------------- 3. ОБРЕЗКА. Перелив едет за пределы кнопки и обязан пропадать на кромке, иначе белая полоса всплывает рядом с кнопкой на голом полотне. overflow:hidden - единственный способ обрезать движущийся слой по СКРУГЛЁННОМУ контуру; clip-path здесь не годится, он применяется в локальных координатах слоя и уезжает вместе с ним. ПОБОЧНОЕ ДЕЙСТВИЕ, которое пришлось оплатить отдельно: обрезка режет и внешнее свечение синей засечки у «Обменять» (её box-shadow принадлежит псевдоэлементу, то есть потомку). Компенсация - синий вынесен во внешнюю тень самой кнопки в разделе 6, там он не обрезается ничем. --------------------------------------------------------------------------- */ .btn.btn.btn{ overflow:hidden; } /* --------------------------------------------------------------------------- 4. ПЕРЕЛИВ У ВСЕХ КНОПОК, КРОМЕ «ОБМЕНЯТЬ». Слот ::before выбран потому, что замер показал его мёртвым (content:none с зоны 5A) у .btn--primary и отсутствующим у .btn--tg и .btn--ghost. Фаска ::after при этом не трогается ни на одной кнопке - у неё своя работа. z-index:-1 повторяет приём чужой фаски: при isolation:isolate на кнопке отрицательный слой ложится ПОВЕРХ заливки, но ПОД текстом. Значит полоса идёт по металлу и не моет подпись - контраст текста остаётся прежним. Наследство, которое надо погасить явно: у .btn--primary::before остались от засечки ширина 2px, синий фон, синяя тень и радиус 2px. Каждое из этих свойств переопределено ниже. Вес 0,4,1 выбран так, чтобы перебить и `.btn--lg.btn--primary::before` (0,2,1), и `.btn--primary:hover::before` (0,2,2) - иначе на наведении вернулась бы синяя тень на полосе перелива. --------------------------------------------------------------------------- */ .btn.btn.btn:not(.header__cta)::before{ content:""; position:absolute; z-index:-1; top:-2px; bottom:-2px; /* -2px: полоса перекрывает кромку и не оставляет тонкой щели у границы */ left:0; right:auto; width:var(--pb-band); border-radius:0; /* углы режет overflow родителя */ background-image:var(--pb-sweep); box-shadow:none; /* гасим синюю тень бывшей засечки */ pointer-events:none; opacity:var(--pb-idle); transform:translateX(-120%) skewX(-14deg); animation:pb-glint 8s ease-in-out infinite; transition:opacity 220ms cubic-bezier(.22,.61,.36,1); } /* Разбег по фазе. Без него все кнопки экрана вспыхивают одновременно и это читается как мигание страницы, а не как блик на металле. Задержки взяты отрицательными: слой стартует уже в середине цикла, а не ждёт первый проход. Значения не кратны друг другу, иначе фазы снова сойдутся. 🔴 ПОЧЕМУ ВЕС ЗДЕСЬ ЧЕТЫРЁХКЛАССОВЫЙ. Первая редакция писала эти задержки как `.btn--tg::before` (0,1,1), и замер поймал, что они не работают: правило выше объявляет анимацию СОКРАЩЁННЫМ свойством `animation:`, а сокращённое сбрасывает animation-delay в 0s, и при весе 0,4,1 оно перебивало все три строки. Внешне всё выглядело исправным - анимация есть, значение задано, - но шесть кнопок шли фаза в фазу, то есть ровно то мигание, против которого задержки и написаны. Теперь вес равен весу сокращённого правила, а спор решает порядок: эти строки стоят ниже. */ .btn.btn.btn.btn--tg::before{ animation-delay:-2.7s; } .btn.btn.btn.btn--ghost::before{ animation-delay:-5.3s; } .final__inner .btn.btn.btn--primary::before{ animation-delay:-4.1s; } .calc .btn.btn.btn--primary::before{ animation-delay:-6.4s; } /* --------------------------------------------------------------------------- 5. ПЕРЕЛИВ У КНОПКИ «ОБМЕНЯТЬ» (.header__cta). Здесь ::before занят синей засечкой зоны 15 - её трогать нельзя, это единственное место, где на кнопке живёт синий канона. Поэтому перелив занимает ::after, а фаска, которую ::after нёс (вертикальный градиент белое->прозрачное->чёрное), возвращается inset-тенями в разделе 6. Замена равноценная: и градиент, и inset-тень рисуют одно и то же - светлый верх и притемнённый низ, - но тень не занимает слой. Металл --z15-metal остаётся на самом элементе и не переопределяется. --------------------------------------------------------------------------- */ .header__cta.btn--tg.btn--tg::after{ content:""; z-index:-1; top:-2px; bottom:-2px; left:0; right:auto; width:var(--pb-band); border-radius:0; background-image:var(--pb-sweep); pointer-events:none; opacity:var(--pb-idle); transform:translateX(-120%) skewX(-14deg); animation:pb-glint 8s ease-in-out infinite; animation-delay:-1.3s; transition:opacity 220ms cubic-bezier(.22,.61,.36,1); } /* Засечка обязана заканчиваться внутри нового скругления. У зоны 15 её торцы поджаты на 10px - ровно на прежний радиус кнопки. Радиус стал 14px, и без этой правки прямой торец полосы вылез бы за скруглённый угол отдельным язычком. Урок в styles.css разобран дважды, повторять незачем. */ .header__cta.btn--tg.btn--tg::before{ top:14px; bottom:14px; } /* --------------------------------------------------------------------------- 6. ТЕНИ ПО ЭТАЛОНУ: inset-блик сверху, мягкая тень снизу, синева только на наведении. Полный набор теней переписывается целиком, а не дописывается: box-shadow не складывается, и частичное объявление стёрло бы чужие внешние тени. Поэтому в каждой строке ниже внешние тени зоны 15 и зоны 10 повторены дословно, а добавлены только inset-слои и синева. --------------------------------------------------------------------------- */ /* Тёмное стекло: .btn--tg и .btn--ghost жили вовсе без тени (замер: none), отсюда и ощущение наклейки вместо кнопки. Даём им объём эталона. */ .btn.btn--tg, .btn.btn--ghost{ box-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -8px 12px -10px rgba(0,0,0,.5), 0 6px 18px -8px rgba(0,0,0,.65); } @media (hover:hover){ .btn.btn--tg:hover, .btn.btn--ghost:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -8px 12px -10px rgba(0,0,0,.5), 0 12px 26px -10px rgba(0,120,180,.5), 0 0 0 1px rgba(200,205,216,.22); } } /* Тёмная .btn--primary - и в карточках, и в калькуляторе внутри hero. Идёт ПЕРВОЙ намеренно: у неё и у светлой пары ниже одинаковый вес 0,3,0, и спор решает порядок. Поставь её после - светлая фаска досталась бы тёмной кнопке, а это ровно тот брак, который нашёл замер. У неё уже был --rim сверху; добавлены нижнее притемнение и синева hover. */ .btn.btn.btn--primary{ box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -9px 14px -12px rgba(0,0,0,.6), 0 18px 34px -22px rgba(0,0,0,.95); } @media (hover:hover){ .btn.btn.btn--primary:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -9px 14px -12px rgba(0,0,0,.6), 0 14px 30px -14px rgba(0,120,180,.5), 0 0 0 1px rgba(79,196,233,.26); } } /* Светлая серебряная главная кнопка - только там, где серебро действительно раздаёт зона 10: `.hero__cta` и `.final__inner`. Внешние тени скопированы с действующих значений дословно (замер: 0 6px 18px -10px rgba(0,0,0,.9) и 0 0 22px -10px rgba(79,196,233,.55)), добавлены только верхний блик серебра по эталону и притемнение низа. */ .hero__cta .btn.btn--primary, .final__inner .btn.btn--primary{ box-shadow: inset 0 1px 0 rgba(255,255,255,.62), inset 0 -9px 14px -10px rgba(0,0,0,.28), 0 6px 18px -10px rgba(0,0,0,.9), 0 0 22px -10px rgba(79,196,233,.55); } @media (hover:hover){ .hero__cta .btn.btn--primary:hover, .final__inner .btn.btn--primary:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -9px 14px -10px rgba(0,0,0,.28), 0 12px 30px -8px rgba(0,120,180,.5), 0 0 22px -4px rgba(200,205,216,.4); } } /* «Обменять». Первые два inset-слоя - это ровно та фаска, которую раньше рисовал ::after, отданный теперь под перелив. Внешние тени зоны 15 повторены дословно, синий усилен ради компенсации обрезанного свечения засечки (см. раздел 3). Четыре состояния расписаны поимённо, потому что зона 15 объявляет тень отдельно для покоя, для .is-cta-armed и для их наведений - при одном общем правиле взведённая кнопка осталась бы без фаски. Вес каждой строки на класс выше чужой: 0,3,0 против 0,2,0. */ .header__cta.btn--tg.btn--tg{ box-shadow: inset 0 1px 0 rgba(255,255,255,.66), inset 0 7px 11px -9px rgba(255,255,255,.34), inset 0 -8px 12px -9px rgba(0,0,0,.22), 0 6px 18px -10px rgba(0,0,0,.9), 0 0 20px -10px rgba(79,196,233,.5); } .header.is-cta-armed .header__cta.btn--tg.btn--tg{ box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 7px 11px -9px rgba(255,255,255,.38), inset 0 -8px 12px -9px rgba(0,0,0,.22), 0 6px 18px -10px rgba(0,0,0,.9), 0 0 22px -8px rgba(79,196,233,.55); } @media (hover:hover){ .header__cta.btn--tg.btn--tg:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.74), inset 0 7px 11px -9px rgba(255,255,255,.4), inset 0 -8px 12px -9px rgba(0,0,0,.22), 0 10px 24px -10px rgba(0,120,180,.5), 0 0 0 1px rgba(200,205,216,.32); } .header.is-cta-armed .header__cta.btn--tg.btn--tg:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 7px 11px -9px rgba(255,255,255,.42), inset 0 -8px 12px -9px rgba(0,0,0,.22), 0 12px 30px -12px rgba(0,120,180,.55), 0 0 0 1px rgba(79,196,233,.42); } } /* --------------------------------------------------------------------------- 7. НАВЕДЕНИЕ: перелив ускоряется и набирает силу. Заперто в @media (hover:hover) намеренно: на сенсорном экране наведения нет, палец оставлял бы на кнопке залипший яркий блик. Приём повторяет решение зоны 15, спорить с ним нечем. Смена имени анимации перезапускает её с нуля - это и нужно: блик проходит сразу под курсором, а не когда доедет очередной медленный цикл. --------------------------------------------------------------------------- */ @media (hover:hover){ .btn.btn.btn:not(.header__cta):hover::before, .header__cta.btn--tg.btn--tg:hover::after{ opacity:var(--pb-hot); animation-name:pb-glint-hot; animation-duration:1.5s; animation-delay:0s; animation-timing-function:cubic-bezier(.3,.05,.2,1); } } /* --------------------------------------------------------------------------- 8. КАДРЫ. Обе анимации двигают ТОЛЬКО transform - ни одного свойства, требующего пересчёта раскладки или перекраски. В покое полоса стоит за левой кромкой почти половину цикла: проход длится около трёх секунд из восьми, остальное - пауза за правым краем. Именно это и даёт «медленно и почти незаметно», а не замедление самого прохода: равномерно ползущая полоса выглядит как индикатор загрузки. Диапазон -120%...280% считан от ширины САМОЙ ПОЛОСЫ (38% кнопки), а не от кнопки: 280% от 38% чуть больше ширины кнопки, значит полоса гарантированно уходит за правую кромку и не замирает в кадре. --------------------------------------------------------------------------- */ @keyframes pb-glint{ 0%, 6% { transform:translateX(-120%) skewX(-14deg); } 44%, 100%{ transform:translateX(280%) skewX(-14deg); } } @keyframes pb-glint-hot{ from { transform:translateX(-120%) skewX(-14deg); } to { transform:translateX(280%) skewX(-14deg); } } /* --------------------------------------------------------------------------- 8Б. ПЕРЕКЛЮЧАТЕЛЬ НАПРАВЛЕНИЯ (.seg__btn). ДОБАВЛЕНО ПО ЗАМЕРУ СКЕПТИКА. 🔴 ПОЧЕМУ ЭТО ВЕРНУЛОСЬ В РАБОТУ. Замер живой страницы: .seg__btn 226x44, радиус 10px, box-shadow ровно none, оба псевдоэлемента свободны (content none), движущихся слоёв ноль. То есть единственный орган управления на странице, оставшийся ровно таким «каменным», каким владелец их и назвал. Прежняя редакция вынесла его в раздел 10 как сознательный пропуск, но владелец сказал «все кнопки», а разметка тут именно