/* =========================================================================== ДЕШАБЛОН: СВЕЧЕНИЯ, ПУЛЬСЫ, ПОЛОСКИ Подключается ПОСЛЕДНИМ, поэтому при равной специфичности выигрывает по каскаду. Ничего, кроме этого файла, не правится. 🔴 ЧТО ЗДЕСЬ НЕ ТРОГАЕТСЯ И ПОЧЕМУ. 1. Круглая кнопка помощника (.aai-fab и все её слои) - прямая просьба владельца 25.08: «чтобы его прям видно было, чтобы какое-нибудь свечение было». Детектор зовёт это dark-glow и radial-halo, но здесь это ЗАКАЗ, а не штамп. Ни одного селектора .aai-* ниже нет. 2. Синий #4FC4E9 как пометка важного и серебро на заголовках - канон агентства от 17.08. Синий нигде не заменяется на другой цвет. Убирается только ОРЕОЛ вокруг синего там, где ореол ничего не сообщает, и там, где он больше самого элемента. 3. Перелив pb-glint на кнопках - просьба владельца, не трогается. 4. Кнопки (.btn, .header__cta) и их свечение - зона polish-buttons.css, выкачена и принята сегодня. Ни одного правила по ним нет. МЕТОД РАЗБОРА. Про каждое свечение задавался один вопрос: что этот элемент СООБЩАЕТ. Если ореол несёт информацию (живые данные, состояние «вы здесь», канонная метка важного раздела) - он остаётся, проверяется только на избыточность. Если ореол просто красит элемент, который ничего не сообщает, - он уходит и заменяется честной подложкой. =========================================================================== */ /* --------------------------------------------------------------------------- 1. ШТАМП: СИНЯЯ КЛЯКСА ПОД КАЛЬКУЛЯТОРОМ. Замер до: .hero__grid > .calc несла тень 0 44px 90px -46px rgba(79,196,233,.42) - размытие 90px цветом акцента под панелью 520x744. Это ровно тот приём, который детектор называет «цветная тень как подсветка»: панель не сообщает ничего синего, синим она просто покрашена снизу. Панель уже помечена канонной синей полосой слева (.calc::before), то есть «важное» на ней сказано ДВАЖДЫ, и второй раз - краской. Эталон apolloproduction.studio в этом месте берёт нейтральную высоту: box-shadow: 0 8px 32px 0 rgba(0,0,0,.37). Делаю в ту же сторону, но глубже, потому что панель большая и стоит на первом экране. 🔴 Тень именно ДОПИСЫВАЕТСЯ к --rim и --shadow-panel, как и в исходной строке: box-shadow не накапливается между правилами, и голое своё значение стёрло бы стеклянный блик по верхней кромке вместе со штатной тенью - панель потеряла бы материал. Порядок слоёв сохранён. --------------------------------------------------------------------------- */ .hero__grid > .calc{ box-shadow: var(--rim), var(--shadow-panel), /* Честная высота вместо цветной подсветки: панель приподнята, а не подкрашена. Смещение вниз есть - значит свет сверху, как и у всех фасок на странице. */ 0 36px 72px -40px rgba(0,0,0,.72); } /* --------------------------------------------------------------------------- 2. ШТАМП: ЦВЕТНАЯ ТЕНЬ У БОКОВЫХ КОЛОНОК. Замер до: .side--left и .side--right несли 14px 0 34px -13px rgba(150,170,195,.42) - размытая тень голубовато-серого цвета на тёмном полотне. Смещение по горизонтали есть, то есть это НЕ ореол, а край: тень отделяет колонку от текста. Работа честная, цвет - нет. Цветная дымка на тёмном фоне читается как плёнка, а не как вес, и это одна из причин жалобы «квадратное»: у колонки не было тяжести, был налёт. Заменяю на ту же геометрию (то же смещение, то же размытие, тот же отрицательный разброс), но чёрным. Колонка становится тяжелее, а не бледнее: у чёрного при .5 контраст к полотну #0C0D11 больше, чем у серо-голубого при .42. Серебряный внутренний свет по кромке (radial-gradient rgba(178,192,212, .075)) НЕ трогается: серебро на кромке - канон агентства, и это рисованный источник света, а не тень. --------------------------------------------------------------------------- */ .side.side--left{ box-shadow:14px 0 34px -13px rgba(0,0,0,.62); } .side.side--right{ box-shadow:-14px 0 34px -13px rgba(0,0,0,.62); } /* --------------------------------------------------------------------------- 3. ШТАМП: СИНЯЯ ЗАЛИВКА ПОД ФИНАЛЬНЫМ БЛОКОМ. Замер до: .final::before рисовал два радиальных слоя, верхний - rgba(79,196,233,.14) на площади min(1120px,100%) x 120% высоты секции (820x473 в замере). Синего в этом блоке и без него уже два: канонная полоса .final__inner::before и свечение самой кнопки. Третий синий слой не добавляет ни одного нового сообщения - он просто красит фон, и это тот самый radial-halo из списка штампов. Что вместо: остаётся НИЖНИЙ белый слой, он честный - это свет от пола под плашкой, тот же приём, что и фаски по всей странице. Поднимаю его с .07 до .09, чтобы блок не потерял объём вместе с синим, и добавляю ровную вертикальную подложку - «честную подложку» из формулировки задачи: поверхность приподнята, но не покрашена. 🔴 Ширина остаётся min(1120px,100%). В исходном правиле над ней стоит красное предупреждение: при 114% слой вылезал за правый край секции на 22px и на экране 320px рождал горизонтальную прокрутку на всю страницу. Значение переписано дословно, чтобы правка не воскресила ту аварию. --------------------------------------------------------------------------- */ .final.final::before{ width:min(1120px,100%); height:120%; background: linear-gradient(180deg, rgba(255,255,255,.030) 0%, rgba(255,255,255,0) 62%), radial-gradient(40% 46% at 50% 100%, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 72%); } /* --------------------------------------------------------------------------- 4. ШТАМП: НЕВИДИМЫЕ ЛУЧИ ИЗ repeating-conic-gradient. Замер до: .bg-glow::after - слой на весь экран (position:fixed, inset:0, 1440x900) с repeating-conic-gradient белым по 3.4 градуса и opacity:.20. ЧТО ЭТОТ СЛОЙ ДАЁТ НА ЭКРАНЕ: rgba(255,255,255,.012) при opacity .20 - это 0.012 * 0.20 * 255 = 0.61 единицы белого из 255 поверх полотна #0C0D11. Ноль или единица после округления канала. Ни один пиксель не отличим от соседнего. ЧТО ЭТОТ СЛОЙ СТОИТ: постоянный композиторский слой во весь экран с конической заливкой, повторённой 105 раз по кругу, и с риском муара при любом масштабировании. Плата берётся каждый кадр прокрутки. Декорация, которая ничего не сообщает и которую не видно, - это чистый штамп генератора. Убираю. Терять нечего: доказательство выше в числах, а не «на мой взгляд». Нижний слой .bg-glow (два нейтральных радиальных подъёма фона) остаётся: он серый, не цветной, и именно он даёт полотну неровность. --------------------------------------------------------------------------- */ .bg-glow::after{ background:none; } /* --------------------------------------------------------------------------- 5. СМЫСЛ, НО ИЗБЫТОЧНО: ОРЕОЛ БОЛЬШЕ САМОГО ЭЛЕМЕНТА. Три ореола ниже помечают ЖИВОЕ и остаются. Проверка была на избыточность, и все три её не прошли: ореол по диаметру превосходил помеченный элемент в разы, то есть на экране светилось пятно, а метки видно не было. 5.1 .pill__dot - точка у строки курса в первом экране. Курс в этой строке живой, его пишет обработчик ae:rate в #heroPillRate, значит метка честная. Замер до: точка 6x6, тень 0 0 10px 2px rgba(79,196,233,.6) - светящееся пятно 30px вокруг точки 6px, в пять раз крупнее её. Свожу к ореолу, который читается как свечение самой точки, а не как лампа за ней. 5.2 #marketStamp::before - точка «в эфире» у котировок. Самая честная метка на странице: app.js ставит её ТОЛЬКО по факту удачной загрузки (stampLive снимает data-placeholder), а при любой неудаче атрибут возвращается - точка гаснет. Не трогаю ни цвет, ни сам факт свечения. Замер до: два слоя, 0 0 10px 1px при .55 и 0 0 22px 4px при .16. Второй слой имеет диаметр 30px при высоте штампа 19px: он выходит за строку и моет соседний текст. Оставляю первый слой, второй убираю. --------------------------------------------------------------------------- */ .pill .pill__dot{ box-shadow:0 0 6px 0 rgba(79,196,233,.55); } /* Селектор повторён дословно из styles.css:6109, включая :not([data-placeholder]). Первая моя редакция была короче (.market__stamp.market__stamp::before, вес 0,2,1) и по замеру НЕ выиграла у исходных 0,3,1 - тень осталась прежней. Заодно этот селектор и есть доказательство честности метки: пока атрибут data-placeholder на месте, точки не существует вовсе. */ .side .market__stamp:not([data-placeholder])::before{ box-shadow:0 0 8px 0 rgba(79,196,233,.55); } /* --------------------------------------------------------------------------- 6. СМЫСЛ, НО ИЗБЫТОЧНО: ВТОРОЙ СЛОЙ КАНОННОЙ ПОЛОСЫ НА КОРОТКИХ СТРОКАХ. Канонная пара свечения полосы важного - 0 0 26px 3px rgba(79,196,233,.42) и 0 0 62px 9px rgba(79,196,233,.16). На узлах страницы (.rate-strip, .calc, .honest, .vs__col--good, .final__inner и два заголовка ранга 1) она остаётся ЦЕЛИКОМ и ниже не упоминается: там полоса стоит вдоль высокой плашки, и 62px ореола гаснут внутри её же высоты. Здесь речь о трёх местах, где та же пара навешена на КОРОТКУЮ строку и работает как индикатор состояния, а не как метка раздела: .side .qcard.is-current::before - «вы здесь» в боковой колонке, .flow__item.is-open::before - раскрытый шаг сделки, .faq__item[open]::before - раскрытый вопрос. Замер до: строка .qcard высотой 48px, второй слой ореола 62px размытия плюс 9px разброса = пятно около 140px по вертикали. Оно перекрывает соседние строки сверху и снизу. Собственный комментарий в styles.css обещает «горит ровно одна строка из шести» - на экране светились три. Индикатор, который засвечивает соседей, перестаёт указывать место. Оставляю первый слой канонной пары дословно, второй снимаю. Синий, ширина полосы, радиус и сам факт свечения не меняются. --------------------------------------------------------------------------- */ .side .qcard.is-current::before, .flow__item.is-open::before, .faq__item[open]::before{ box-shadow:0 0 26px 3px rgba(79,196,233,.42); } /* --------------------------------------------------------------------------- 7. ПУЛЬС У ЖИВЫХ ДАННЫХ: ЧЕСТНЫЙ, НО СДЕЛАН ЗАПРЕЩЁННЫМ СПОСОБОМ. .whyus-live__dot стоит у строки «1 USDT сейчас», а числа рядом (₽ и ₸) пишет paintRate из живого курса. Данные меняются - значит пульс честный, и он остаётся. Но сделан он был через анимацию box-shadow (@keyframes whyusPulse гонит 0 0 0 0 -> 0 0 0 7px). Анимация тени - это перерисовка на каждом кадре, и она прямо нарушает закон «движение только на transform и opacity». Переношу то же кольцо на псевдоэлемент и анимирую transform+opacity: на экране рисунок тот же, расходящееся кольцо, но кадр складывает композитор, а не заново красит движок. Точка остаётся 7x7 - размер не меняю, это не цель нажатия, а метка. --------------------------------------------------------------------------- */ .whyus-live .whyus-live__dot{ position:relative; animation:none; /* гасим анимацию тени */ box-shadow:0 0 7px rgba(79,196,233,.55); /* статичный ореол метки */ } .whyus-live .whyus-live__dot::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(79,196,233,.55); animation:dg-live-ring 2.6s ease-out infinite; pointer-events:none; } @keyframes dg-live-ring{ 0% { transform:scale(1); opacity:.6; } 70%, 100%{ transform:scale(3.2); opacity:0; } } /* --------------------------------------------------------------------------- 8. ШТАМП: ПУЛЬС ТАМ, ГДЕ ДАННЫЕ НЕ МЕНЯЮТСЯ. 8.1 .geo__now i - зелёная точка у надписи LIVE на карте. Проверка привязки: поиск по app.js и effects.js по geo__now, geoLive и geo-now не дал НИ ОДНОГО совпадения. Ни одного обработчика, который бы что-то в этом блоке обновлял, нет: карта - статичный SVG с четырьмя постоянными метками. Мигание изображает поступление данных, которых не поступает. Это обман, и детектор здесь прав. Что делаю: гашу мигание, точку ОСТАВЛЯЮ. Точка - обычная метка состояния («здесь выдают наличные»), она честна и без движения. Надпись LIVE в разметке не трогаю: она относится к курсу и суммам в блоке ниже, а те живые - решать за владельца, что писать, не моя зона. 8.2 .geo__ping - радарная волна от московской метки, бесконечный цикл 2.9s. Замер до: transform scale(.35 -> 3.1) плюс opacity, то есть техника законная, вопрос только в бесконечности. Волна, идущая от неподвижной точки вечно, изображает вещание, которого нет. Что делаю: волна остаётся, но получает КОНЕЦ - три прохода. Она успевает привести глаз к главной метке, когда карта появляется на экране, и замолкает. Это ровно та работа, ради которой волна ставилась; бесконечность к этой работе ничего не добавляла. --------------------------------------------------------------------------- */ .geo__now i{ animation:none; } .geo__map .geo__ping{ animation-iteration-count:3; } /* --------------------------------------------------------------------------- 9. СНИЖЕННОЕ ДВИЖЕНИЕ. Обязательный блок. Гасит и то кольцо, которое я завёл в разделе 7, и волну карты. Всё остальное движение на странице гасится своими разделами в styles.css, здесь только своё и то, чему я поменял счётчик. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .whyus-live .whyus-live__dot::after{ animation:none; opacity:.5; /* кольцо остаётся видимой рамкой метки */ } .geo__map .geo__ping{ animation:none; opacity:0; } }