/* ========================================================================= stripe-diffuse.css - РАССЕЯННАЯ СИНЯЯ ПОЛОСА СЛЕВА (30.09.2026) РЕШЕНИЕ ВЯЧЕСЛАВА 30.09, ДОСЛОВНО: «такая же полоска слева да рассеянная сделай» ЧТО ЭТО ЗНАЧИТ И ЧТО НЕ ЗНАЧИТ. Полоса остаётся на своём месте, того же цвета #4FC4E9, той же толщины (3px) и той же длины. На подчёркивание НЕ меняем. Меняется только то, как она нарисована: вместо жёсткой линии с прямоугольным ореолом - мягкий край и растушёвка. Раскладку, кнопки, стекло, отступы, размеры блоков и анимации появления (ae5BarIn, переход шага сделки, переход «вы здесь») не трогаем. ЧТО БЫЛО ЖЁСТКИМ (замер на 1440x900, 2x): 1. Ядро: ровный край в 3px, ни намёка на растушёвку по ширине. 2. Ореол был box-shadow (26px + 62px): он повторяет ПРЯМОУГОЛЬНИК полосы, и на концах, где сама заливка уже прозрачная, ореол оставался и рисовал тёмный «язычок» плотнее самой полосы. 3. Четыре места (карточка «выдача по QR», сноска #qr, пункт «Выдача по QR» в шторке телефона, галочка шага) вообще были сплошными без сходящих концов. ЧТО СДЕЛАНО. - Заливка: вертикальный градиент, прозрачный на обоих концах и плотный в середине. Сход идёт не прямой линией, а по сглаженной кривой (0 / .10 / .35 / .65 / .90 / 1), поэтому нет видимого излома там, где линия переходит в плато. Длина схода прежняя: min(56px, 30%). - Ядро размыто: filter blur(1.2px) у длинных полос, 1px у коротких (второй проход 30.09: .6px скептик замерил как «почти не видно разницы»). - Ореол: filter drop-shadow вместо box-shadow. drop-shadow повторяет ФОРМУ полосы вместе с её прозрачными концами, а не её прямоугольник, поэтому свечение сходит на нет вместе с полосой. Слои идут по нарастанию радиуса (4px, 12px, 28px), сила по убыванию (.9 / .6 / .45): получается плавный спад, а не «линия плюс коробка света». Профиль яркости ореола поперёк полосы замерен на стенде (синий канал, тёмный фон): на расстоянии 12-36px от ядра он отличается от прежнего не больше чем на 3 единицы из 255, у самого ядра (8px) чуть ярче. Полоса стала мягче, но не тусклее и не ярче в целом. - Каждое filter продублировано -webkit-filter: iOS до 18 (WKWebView, в нём открывается Telegram и мини-приложения) знает только префиксную запись. - backface-visibility:hidden - защита от мигания фильтра в WebView iOS (тот же приём, что transform:translateZ(0) в мини-аппе, но без transform, потому что у шага сделки и у узлов с ae5BarIn transform уже занят анимацией и перебивать его нельзя). ЧТО НЕ ТРОГАЕМ (и почему). - Только свойства отрисовки: background и background-*, box-shadow, filter, backface-visibility, а в шторке телефона ещё border-left-color. Ни width/height/top/bottom/left/margin/padding/position/display/transform/ transition/animation. Геометрию и движение хозяева задают сами. - Серебряные метки 2px второго ранга (#why, #diff, #options, #offline). - Жёлтых полос рекламы (#F2C94C) на этом сайте нет. Жёлтые/тёплые линии (.aai-note и т.п.) не входят в список. - Фиолетового нет. Акцент #4FC4E9 занимает меньше 10% экрана: площадь ядра не изменилась, ореол мягче прежнего. - Кнопка «Обменять» в шапке (.header__cta.btn--tg::before): засечка на КНОПКЕ, а задача велит кнопки не трогать. Готовый блок лежит в конце файла ЗАКОММЕНТИРОВАННЫМ - включить, если Вячеслав скажет «и на кнопке». - Токены --accent, --accent-glow, --bar, --ae5-bar-glow не меняем: ими пользуются булавки карты и другие места вне задачи. ПОЧЕМУ ВСЁ В ОДНОМ @media (prefers-contrast: no-preference). Человек с повышенным контрастом просит «чётче видно границу» - расфокусированный край ему как раз мешает. styles.css (10.6, 14.5) возвращает ему сплошную ножевую заливку. Этот файл подключён ПОСЛЕДНИМ и перебил бы тот возврат, поэтому все правила заперты в no-preference: при контрасте more они просто не применяются и работает прежний код. Плюс страховка: браузер, не знающий этого условия, пропустит блок целиком и покажет прежние полосы, то есть отказ стоит мягкости, а не самой полосы. ПОРЯДОК: подключён последним в index.html. Селекторы взяты с запасом специфичности (:root спереди), чтобы не зависеть от порядка при равном весе. ========================================================================= */ @media (prefers-contrast: no-preference){ /* ------------------------------------------------------------------------- 1. ЗАЛИВКА ЯДРА: девять узлов канона, отметки заголовков ранга 1 и два места, которые были сплошными (карточка QR, сноска #qr). Две литеральные строки background идут подряд ПО ТОМУ ЖЕ ПРИЁМУ, что в styles.css 10.1: первая (проценты) - запасная для движка без min(), вторая - с min(56px, 30%). var(--токен) в background НЕ вводим: при отказе var() обнуляет свойство и полоса пропала бы совсем. Кривая схода сглаженная: доли 0.2 / 0.4 / 0.6 / 0.8 от длины схода получают прозрачность .10 / .35 / .65 / .90. ------------------------------------------------------------------------- */ :root .rate-strip::before, :root .calc::before, :root .honest::before, :root .vs__col--good::before, :root .final__inner::before, :root .modal__dialog::before, :root .flow__item::before, :root .faq__item[open]::before, :root #how .section__head::before, :root #safety .section__head::before, :root .qrtop-card::before, :root .qr__note::before, :root .net-calc::before, :root .net-get::before, :root .net-honest::before, :root .net-ph-card--accent::before{ background:linear-gradient(180deg, rgba(79,196,233,0) 0%, rgba(79,196,233,.10) 2.2%, rgba(79,196,233,.35) 4.4%, rgba(79,196,233,.65) 6.6%, rgba(79,196,233,.90) 8.8%, #4FC4E9 11%, #4FC4E9 89%, rgba(79,196,233,.90) 91.2%, rgba(79,196,233,.65) 93.4%, rgba(79,196,233,.35) 95.6%, rgba(79,196,233,.10) 97.8%, rgba(79,196,233,0) 100%); background:linear-gradient(180deg, rgba(79,196,233,0) 0, rgba(79,196,233,.10) calc(min(56px, 30%) * .2), rgba(79,196,233,.35) calc(min(56px, 30%) * .4), rgba(79,196,233,.65) calc(min(56px, 30%) * .6), rgba(79,196,233,.90) calc(min(56px, 30%) * .8), #4FC4E9 min(56px, 30%), #4FC4E9 calc(100% - min(56px, 30%)), rgba(79,196,233,.90) calc(100% - min(56px, 30%) * .8), rgba(79,196,233,.65) calc(100% - min(56px, 30%) * .6), rgba(79,196,233,.35) calc(100% - min(56px, 30%) * .4), rgba(79,196,233,.10) calc(100% - min(56px, 30%) * .2), rgba(79,196,233,0) 100%); } /* ------------------------------------------------------------------------- 2. ОРЕОЛ: box-shadow снят, вместо него filter (ядро .6px + три слоя drop-shadow) - для длинных полос. Спад 3px -> 10px -> 24px по радиусу и .9 -> .6 -> .5 по силе. Каждый следующий drop-shadow берёт за исходник уже размытый предыдущий слой, поэтому слои складываются в гладкий гауссов хвост. ------------------------------------------------------------------------- */ :root .rate-strip::before, :root .calc::before, :root .honest::before, :root .vs__col--good::before, :root .final__inner::before, :root .modal__dialog::before, :root #how .section__head::before, :root #safety .section__head::before, :root .qrtop-card::before, :root .qr__note::before, :root .net-calc::before, :root .net-get::before, :root .net-honest::before{ box-shadow:none; -webkit-filter:blur(1.2px) drop-shadow(0 0 4px rgba(79,196,233,.90)) drop-shadow(0 0 12px rgba(79,196,233,.60)) drop-shadow(0 0 28px rgba(79,196,233,.45)); filter:blur(1.2px) drop-shadow(0 0 4px rgba(79,196,233,.90)) drop-shadow(0 0 12px rgba(79,196,233,.60)) drop-shadow(0 0 28px rgba(79,196,233,.45)); -webkit-backface-visibility:hidden; backface-visibility:hidden; } /* ------------------------------------------------------------------------- 3. ОРЕОЛ ПОКОРОЧЕ - для полос-индикаторов на коротких строках: шаг сделки, раскрытый вопрос, метка «вы здесь» в колонке разделов (от 1200px). Зона deshablon-glow (п.6) уже урезала их свечение до одного слоя ради соседей: строка 48px, а канонная пара светила на 140px по вертикали и залезала на соседние строки. Здесь то же соображение: два слоя, самый широкий 10px, соседей не задевает и не шире прежнего одного слоя 26px. ------------------------------------------------------------------------- */ :root .flow__item::before, :root .faq__item[open]::before, :root .net-ph-card--accent::before{ box-shadow:none; -webkit-filter:blur(1px) drop-shadow(0 0 4px rgba(79,196,233,.90)) drop-shadow(0 0 12px rgba(79,196,233,.55)); filter:blur(1px) drop-shadow(0 0 4px rgba(79,196,233,.90)) drop-shadow(0 0 12px rgba(79,196,233,.55)); -webkit-backface-visibility:hidden; backface-visibility:hidden; } /* Метка «вы здесь» живёт ТОЛЬКО от 1200px (в styles.css её правило заперто в том же @media). Ниже 1200px у `.side .qcard--qr::before` совсем другая полоса - ГОРИЗОНТАЛЬНАЯ метка 2px сверху пункта нижней панели (bottom-nav-strip.css:131). Поэтому эти правила без запора нельзя: они перекрасили бы горизонтальную метку вертикальным градиентом (поймано на замере 375px, исправлено). */ @media (min-width:1200px){ :root .side .qcard::before{ background:linear-gradient(180deg, rgba(79,196,233,0) 0%, rgba(79,196,233,.10) 2.2%, rgba(79,196,233,.35) 4.4%, rgba(79,196,233,.65) 6.6%, rgba(79,196,233,.90) 8.8%, #4FC4E9 11%, #4FC4E9 89%, rgba(79,196,233,.90) 91.2%, rgba(79,196,233,.65) 93.4%, rgba(79,196,233,.35) 95.6%, rgba(79,196,233,.10) 97.8%, rgba(79,196,233,0) 100%); background:linear-gradient(180deg, rgba(79,196,233,0) 0, rgba(79,196,233,.10) calc(min(56px, 30%) * .2), rgba(79,196,233,.35) calc(min(56px, 30%) * .4), rgba(79,196,233,.65) calc(min(56px, 30%) * .6), rgba(79,196,233,.90) calc(min(56px, 30%) * .8), #4FC4E9 min(56px, 30%), #4FC4E9 calc(100% - min(56px, 30%)), rgba(79,196,233,.90) calc(100% - min(56px, 30%) * .8), rgba(79,196,233,.65) calc(100% - min(56px, 30%) * .6), rgba(79,196,233,.35) calc(100% - min(56px, 30%) * .4), rgba(79,196,233,.10) calc(100% - min(56px, 30%) * .2), rgba(79,196,233,0) 100%); box-shadow:none; -webkit-filter:blur(1px) drop-shadow(0 0 4px rgba(79,196,233,.90)) drop-shadow(0 0 12px rgba(79,196,233,.55)); filter:blur(1px) drop-shadow(0 0 4px rgba(79,196,233,.90)) drop-shadow(0 0 12px rgba(79,196,233,.55)); -webkit-backface-visibility:hidden; backface-visibility:hidden; } } /* ------------------------------------------------------------------------- 4. ПУНКТ «ВЫДАЧА ПО QR» В ШТОРКЕ ТЕЛЕФОНА (<1200px). Это не ::before, а левая рамка 2px (border-left) на пункте. Пункт - обычный блок с рамкой и радиусом 12px; ставить на него filter нельзя (размоет текст), а добавлять ::before нельзя (это position/top/bottom, то есть раскладка, вне договорённости). Приём без раскладки: левая рамка остаётся на месте (2px, ничего не сдвигается), но получает тот же цвет, что и остальные три стороны (rgba .42), поэтому контур пункта остаётся целым замкнутым скруглением. Под рамкой (background-origin: border-box) рисуется полоса 2px градиентом со сходящими концами: рамка .42 ложится поверх неё, в середине полоса остаётся плотной #4FC4E9, а к концам растворяется в тот же контур. Прежняя прямоугольная тень заменена лёгким отсветом: снаружи узкая мягкая тень с отрицательным разбегом (не доходит до углов), внутри эллиптическое свечение, которое гаснет и к центру пункта, и к его верху и низу. ------------------------------------------------------------------------- */ @media (max-width:1199px){ :root .qmenu__item--qr{ border-left-color:rgba(79,196,233,.42); box-shadow:-2px 0 10px -3px rgba(79,196,233,.42); background-image: linear-gradient(180deg, rgba(79,196,233,0) 0%, rgba(79,196,233,.10) 6%, rgba(79,196,233,.35) 12%, rgba(79,196,233,.65) 18%, rgba(79,196,233,.90) 24%, #4FC4E9 30%, #4FC4E9 70%, rgba(79,196,233,.90) 76%, rgba(79,196,233,.65) 82%, rgba(79,196,233,.35) 88%, rgba(79,196,233,.10) 94%, rgba(79,196,233,0) 100%), radial-gradient(ellipse 30px 55% at 0 50%, rgba(79,196,233,.16) 0%, rgba(79,196,233,.09) 35%, rgba(79,196,233,.03) 70%, rgba(79,196,233,0) 100%); background-size:2px 100%, 100% 100%; background-position:0 0, 0 0; background-repeat:no-repeat; background-origin:border-box; background-clip:border-box; } } } /* конец @media (prefers-contrast: no-preference) */ /* ========================================================================= НЕ ВКЛЮЧЕНО (ждёт слова владельца): засечка на кнопке «Обменять» в шапке. .header__cta.btn--tg::before - синяя полоса 2x14px слева ВНУТРИ кнопки. Задача велит кнопки не трогать, поэтому блок закомментирован. Хост держит overflow:clip, свечение всё равно обрезается кнопкой. Если включать - только этот блок, transition и is-cta-armed (styles.css:8552) остаются как есть. @media (prefers-contrast: no-preference){ :root .header__cta.btn--tg.btn--tg::before{ background:linear-gradient(180deg, rgba(79,196,233,0) 0%, rgba(79,196,233,.65) 22%, #4FC4E9 50%, rgba(79,196,233,.65) 78%, rgba(79,196,233,0) 100%); box-shadow:none; -webkit-filter:blur(.3px) drop-shadow(0 0 4px rgba(79,196,233,.6)); filter:blur(.3px) drop-shadow(0 0 4px rgba(79,196,233,.6)); } } ========================================================================= */