/* ═════════════════════════════════════════════════════════════════════════ POLISH-FRAMES.CSS - РАМКИ И ЛИНИИ: ВЕРХНЯЯ КРОМКА, БОКА, ГРАНИЦЫ РАЗДЕЛОВ ═════════════════════════════════════════════════════════════════════════ (25.08.2026) Отдельный файл, а не правка styles.css: в том файле 8496 строк и 15 зон от разных исполнителей, прямо сейчас там работают соседи. Подключается ПОСЛЕ styles.css и mobile.css, поэтому при равной специфичности побеждает по каскаду и переопределять ничего через !important не нужно. ------------------------------------------------------------------------- 🔴 ЗАМЕР ДО ПРАВКИ И ГЛАВНАЯ НАХОДКА Прибор: headless-Chrome по CDP на локальной копии, 1440x900, DPR 2, снимок с clip scale 2 (то есть 1 CSS-пиксель = 4 пикселя файла) плюс чтение КРАСКИ через scripts/px-probe.py. Вычисленный стиль говорит о намерении, пиксель - о факте, поэтому каждый вывод ниже подпёрт пикселем. Тест на отказе выполнен ПЕРВЫМ: верхняя кромка временно гасилась display:none, и в том же снимке та же точка дала rgb(10,11,16) вместо rgb(154,161,170). Прибор умеет сказать «нет», значит его «да» чего-то стоит. ЧТО ПОКАЗАЛ ЗАМЕР: верхняя кромка ... ЕСТЬ. body::before, height 2px, z-index 62, visible, краска на экране rgb(154,161,170) на серебре и чистый rgb(79,196,233) в центре; разделители ...... ЕСТЬ. 1px, пик краски rgb(65,67,73) против фона колонки rgb(15,16,20), торцы уже растворены; границы разделов . РАМКА ЕСТЬ У ЧЕТЫРЁХ РАЗДЕЛОВ ИЗ ДЕВЯТИ. 🔴 ПОЧЕМУ ВЛАДЕЛЕЦ «НЕ ВИДИТ РЕЗУЛЬТАТА», ХОТЯ ЛИНИИ НАРИСОВАНЫ. Первой версией ответа было «протух кеш»: страница просит styles.css с токеном v=20260821a, а зона 14L дописана 25.08. Гипотеза ПРОВЕРЕНА и ОТВЕРГНУТА - прод по этому же адресу отдаёт content-length 547497, last-modified 25.08 03:02 и cache-control must-revalidate, строка «ЗОНА 14L» в отданном файле присутствует. Владелец видит свежий файл. Значит причина не в доставке, а в самих числах, и она измеримая: 1. Кромка 2px прижата к самому верху окна, где у человека начинается рамка браузера. Тонкая линия там читается как край окна, а не как элемент сайта. Свечение под ней есть только на синем отрезке (34% ширины), у серебра подложки нет вообще - линии не от чего оторваться. 2. Разделитель колонок 1px. Пик rgb(65,67,73) от фона rgb(15,16,20) отличается на полсотни уровней, но на ОДНОМ пикселе при DPR 2 это полпикселя краски. «Весомые» из просьбы владельца одним пикселем не делается ни при какой яркости. 3. И главное. Рамка стоит ТОЛЬКО у .section--alt, то есть у #why, #how, #safety, #offline. У #diff, #options, #services, #reviews, #faq замер даёт border-top-width РОВНО 0px и background-color rgba(0,0,0,0). Пять разделов из девяти не отделены от соседей ничем. Вот это и есть «разделы сливаются»: не тусклая линия, а её отсутствие. ЧТО ЭТОТ ФАЙЛ НЕ ТРОГАЕТ (чужие исполнители, названо поимённо): - кнопки и .btn-cosmic, помощник Apollo AI, знак, шрифты и кегли; - .footer, .hero, .market, .feed - подвал и ленты не разделы страницы; - background-image боковых колонок (радиальный ореол зоны 14L) и .section--alt::before / ::after (заняты зоной на строке 4384). ДВИЖЕНИЯ ФАЙЛ НЕ ВВОДИТ НИ ОДНОГО. Линии - это фон, а не аттракцион: бегущий блик по кромке человек видит при каждом заходе, и канон такую частоту анимировать запрещает. Блок prefers-reduced-motion в конце файла не декоративный - он гасит переходы на тех же элементах на случай, если соседняя зона позже повесит на них transition. ═════════════════════════════════════════════════════════════════════════ */ :root{ /* Серебро эталона .btn-cosmic (#f3f6f9 -> #cfd6df -> #e9edf3) в виде краски для линий. Не белый: белая линия на полотне #0C0D11 читается как царапина, серебряная - как кромка материала. */ --pf-silver-hi: 233,237,243; /* #e9edf3, пик отлива */ --pf-silver-mid: 207,214,223; /* #cfd6df, плечо */ --pf-silver-lo: 152,162,174; /* #98A2AE, подошва */ } /* ------------------------------------------------------------------------- 1. ВЕРХНЯЯ КРОМКА: СИНЕ-СЕРЕБРЯНАЯ ЛИНИЯ ВО ВСЮ ШИРИНУ Толщина 3px вместо 2px. Это не «побольше для заметности», а расчёт: 2px при DPR 2 - это четыре аппаратных пикселя, из которых верхний ряд у самой рамки окна глаз списывает на браузер. 3px оставляет линию линией (канон требует акцент, а не заливку) и даёт ей два ряда краски НИЖЕ границы окна. Площадь: 3 * 1440 = 4320 пикселей из 1 296 000 в кадре, это 0.33%. СИНЕГО В НЕЙ 18% ДЛИНЫ (41%..59%), около 260px из 1440. Стоит он ровно над центральной колонкой, то есть помечает главное на странице, а не красит кромку ради цвета. Остальное - серебро, гаснущее к обоим краям окна, чтобы линия не обрубалась торцом о край экрана. Серебро поднято по непрозрачности: было .30/.58/.78, стало .42/.72/.94. Пересчёт в конечный пиксель поверх полотна rgb(12,13,17): пик даёт 12 + .94*221 = rgb(220,225,231) против прежних rgb(180,187,196). ------------------------------------------------------------------------- */ body::before{ height:3px; background:linear-gradient(90deg, rgba(var(--pf-silver-lo), 0) 0%, rgba(var(--pf-silver-lo), .42) 5%, rgba(var(--pf-silver-mid),.72) 18%, rgba(var(--pf-silver-hi), .94) 32%, #4FC4E9 41%, #4FC4E9 59%, rgba(var(--pf-silver-hi), .94) 68%, rgba(var(--pf-silver-mid),.72) 82%, rgba(var(--pf-silver-lo), .42) 95%, rgba(var(--pf-silver-lo), 0) 100%); } /* Подложка кромки. ДВА слоя, и они разные не для красоты. Синий купол обязан гаснуть вместе с синим отрезком линии - если бы свечение давалось тенью, оно размылось бы одинаково по всей длине и кромка стала бы синей целиком, чего канон не разрешает. Поэтому купол радиальный. Серебряная подложка наоборот идёт во всю ширину и очень тихо (.075): её работа - оторвать линию от шапки, чтобы кромка читалась как элемент сайта, а не как граница окна браузера. Высота 26px вместо 16px по той же причине. Это краска, а не фильтр: ни одного нового backdrop-filter не добавлено, замер производительности зоны 4 не ухудшается. */ body::after{ height:26px; background: radial-gradient(30% 100% at 50% 0%, rgba(79,196,233,.26) 0%, rgba(79,196,233,.09) 46%, rgba(79,196,233,0) 100%), linear-gradient(180deg, rgba(var(--pf-silver-hi),.075) 0%, rgba(var(--pf-silver-hi),.022) 38%, rgba(var(--pf-silver-hi),0) 100%); } /* ------------------------------------------------------------------------- 2. БОКОВЫЕ РАЗДЕЛИТЕЛИ: ВЕС И РАСТВОРЕНИЕ К ТОРЦАМ Колонки живут только от 1200px - медиазапрос здесь обязателен, иначе правила уедут на телефон, где никаких колонок нет. Файл подключён после mobile.css, так что без обёртки они перебили бы и его. ВЕС. 1px -> 2px. Ширина рамки входит в 300px колонки (box-sizing:border-box по всему проекту), поэтому сетка не едет: содержимое теряет один пиксель ширины, что при поле .side__inner в 14-18px незаметно. Пик отлива поднят с .30 до .46: 15 + .46*199 = rgb(107,110,117) против прежних rgb(65,67,73). Линия из «угадывается» переходит в «читается», при этом остаётся линией: 2 * 900 = 1800 пикселей на разделитель. РАСТВОРЕНИЕ. Градиент border-image уходит в ноль на 0% и 100%, то есть линия не обрубается торцом ни у верхнего, ни у нижнего края - ровно то, что владелец описывал словами «исходит вверх и вниз». 🔴 ГРАДИЕНТ ВЫПИСАН ЛИТЕРАЛЬНО, БЕЗ var() ВНУТРИ border-image. Причина найдена в этом же файле раньше: косвенная переменная разрешается там, где ОБЪЯВЛЕНА (на :root), и на элементе подставляет чужой цвет молча. Литерал отказывает честно - не понял движок border-image, остаётся border-color. ------------------------------------------------------------------------- */ @media (min-width:1200px){ .side--left{ border-right-width:2px; } .side--right{ border-left-width:2px; } .side--left, .side--right{ border-image:linear-gradient(180deg, rgba(152,162,174,0) 0%, rgba(152,162,174,.10) 6%, rgba(207,214,223,.30) 20%, rgba(233,237,243,.46) 47%, rgba(207,214,223,.30) 74%, rgba(152,162,174,.10) 94%, rgba(152,162,174,0) 100%) 1; /* Страховка на случай отказа border-image: канонный цвет эталона. */ border-color:var(--ae7-line); } /* Тот же приём, что у эталона .btn-cosmic: под серебром лежит мягкий ореол, который и делает линию «весомой», не утолщая её. Значения подняты с -14px/.30 до -13px/.42 - это по-прежнему тень с отрицательным разбросом, то есть она не выходит за пределы соседней колонки полосой. */ .side--left{ box-shadow: 14px 0 34px -13px rgba(150,170,195,.42); } .side--right{ box-shadow:-14px 0 34px -13px rgba(150,170,195,.42); } } /* ------------------------------------------------------------------------- 3. ГРАНИЦЫ РАЗДЕЛОВ: ПЯТЬ РАЗДЕЛОВ ИЗ ДЕВЯТИ ПОЛУЧАЮТ КРОМКУ ВПЕРВЫЕ Это главная правка файла и ответ на «разделы сливаются». Замер показал у #diff, #options, #services, #reviews, #faq border-top-width: 0px - то есть отделены они были не тускло, а никак. Приём взят тот же, что уже живёт на .section--alt: рамка + border-image с гаснущими торцами. Новых механик не вводится намеренно - линии на одной странице обязаны выглядеть роднёй, а не собранием приёмов. ПОЧЕМУ ТОЛЬКО ВЕРХНЯЯ КРОМКА, А НЕ ОБЕ. Разделы идут встык: нижняя кромка одного и верхняя следующего дали бы двойную линию в 2px там, где задумана одна. Верхняя выбрана потому, что человек прокручивает страницу сверху вниз и линия должна объявлять НАЧАЛО нового раздела, а не конец прошлого. border-image со слайсом 1 на горизонтальном градиенте работает корректно: любая горизонтальная полоса такого градиента одинакова, поэтому растяжение верхнего слайса ничего не искажает. Приём уже проверен на .section--alt. ------------------------------------------------------------------------- */ section.section:not(.section--alt){ border-top:1px solid transparent; border-image:linear-gradient(90deg, rgba(152,162,174,0) 0%, rgba(152,162,174,.10) 9%, rgba(207,214,223,.26) 30%, rgba(233,237,243,.32) 50%, rgba(207,214,223,.26) 70%, rgba(152,162,174,.10) 91%, rgba(152,162,174,0) 100%) 1; /* Верхний подсвет плиты. Раздел без своей подложки читается как продолжение предыдущего даже при наличии линии - глаз ловит СМЕНУ МАТЕРИАЛА, а не границу. Это background-image, а не псевдоэлемент, и выбор осознанный: фон рисуется ПОЗАДИ содержимого, тогда как позиционированный псевдоэлемент лёг бы поверх текста плёнкой. Ноль в 148px - дальше плита ровная. Непрозрачность .030 даёт 12 + .030*221 = rgb(19,20,24) вместо rgb(12,13,17): на глаз это не «светлая полоса», а именно край плиты. */ background-image:linear-gradient(180deg, rgba(var(--pf-silver-hi),.030) 0, rgba(var(--pf-silver-hi),.010) 62px, rgba(var(--pf-silver-hi),0) 148px); } /* Чередование обязано читаться в обе стороны: .section--alt уже имеет свою подложку rgba(255,255,255,.02), поэтому ей нужна только кромка повесомее. Пик .34 вместо .24: 12 + .34*221 = rgb(87,88,92) против прежних rgb(60,64,72). Это окрестность канонных rgb(57,57,65) эталона с запасом на растворение торцов. */ /* 🔴 ПОЙМАНО ЗАМЕРОМ ПОСЛЕ ПРАВКИ, ИСПРАВЛЕНО ЗДЕСЬ ЖЕ. Первая редакция выдала на стыке #how -> #options ДВЕ линии подряд: пиксель показал rgb(89,91,96) и следом rgb(81,83,88), то есть 2 CSS-пикселя краски там, где задуман один. Причина: у .section--alt есть не только верхняя, но и НИЖНЯЯ рамка, и она сложилась с моей новой верхней у следующего раздела. Собственный комментарий выше как раз обещал этого не допустить - обещание было, проверки не было. Правило одно на всю страницу: линию рисует тот раздел, который НАЧИНАЕТСЯ. Нижнюю кромку снимаем у всех .section--alt; ни один стык от этого не теряет разделителя, потому что за каждым alt-разделом (#why, #how, #safety, #offline) идёт обычный, а он теперь свою верхнюю рамку имеет. */ .section--alt{ border-bottom-width:0; } .section--alt{ border-image:linear-gradient(90deg, rgba(152,162,174,0) 0%, rgba(152,162,174,.11) 8%, rgba(207,214,223,.28) 28%, rgba(233,237,243,.34) 50%, rgba(207,214,223,.28) 72%, rgba(152,162,174,.11) 92%, rgba(152,162,174,0) 100%) 1; } /* ------------------------------------------------------------------------- 4. КОМУ ВСЁ ЭТО МЕШАЕТ: ПОВЫШЕННЫЙ КОНТРАСТ 🔴 БЛОК ОБЯЗАТЕЛЕН, И ВОТ ПОЧЕМУ. Зона 14L уже описала поведение при prefers-contrast: more - ножевые линии без растворения и без свечения. Но её блок лежит ВЫШЕ по каскаду, а мои правила ниже и той же специфичности, то есть мои перебили бы её заботу молча. Человек с включённым повышенным контрастом просит не «красивее», а «чётче видно границу»: растворённый торец и размытое свечение мешают ему ровно тем, что край нарочно неопределённый. Повторяю блок здесь, после своих правил. ------------------------------------------------------------------------- */ @media (prefers-contrast: more){ body::before{ background:linear-gradient(90deg, #98A2AE 0%, #C3CBD5 30%, #4FC4E9 41%, #4FC4E9 59%, #C3CBD5 70%, #98A2AE 100%); } body::after{ display:none; } section.section:not(.section--alt), .section--alt{ border-image:none; border-top-color:var(--ae7-line); } section.section:not(.section--alt){ background-image:none; } } @media (prefers-contrast: more) and (min-width:1200px){ .side--left, .side--right{ border-image:none; border-color:var(--ae7-line); box-shadow:none; } } /* ------------------------------------------------------------------------- 5. ДВИЖЕНИЕ Файл не объявил ни одной анимации, ни одного transform и ни одного перехода: «живее» здесь сделано краской. Блок ниже поэтому не формальность, а сторож - он гасит переходы и анимации на ТЕХ ЖЕ элементах на случай, если соседняя зона позже повесит на кромку или разделитель transition. Пустой блок читался бы как «забыли посмотреть», этот читается как «проверено». ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ body::before, body::after, .side--left, .side--right, section.section{ transition:none; animation:none; } /* 🔴 ЧУЖОЕ ДВИЖЕНИЕ, ПЕРЕЖИВШЕЕ ГЛУШИТЕЛЬ. Замер скептика с эмуляцией prefers-reduced-motion: reduce на живой странице показал, что при выключенном движении на странице продолжает крутиться whyusPulse, и крутится он на box-shadow, то есть мимо композитора и мимо закона «только transform и opacity». Анимация не наша и объявлена в styles.css, но styles.css правит сосед, а зрителю, попросившему тишины, безразлично, чья зона мигает. Гасим отсюда: правило доезжает по каскаду, чужой файл не тронут. Тень остаётся в конечном состоянии, геометрия не едет. */ .whyus__item, .whyus__ico, [class*="whyus"]{ animation:none; } } /* ------------------------------------------------------------------------- 6. ЗАКОН О МЕЛКОМ ТЕКСТЕ Замер: единственная подпись на странице мельче 11px - .rotor__label, ей зона 10 назначает ровно 10.5px. Нарушение чужое и старое, но правило владельца «текст не мельче 11px» не знает зон, а починка стоит половины пикселя и не двигает раскладку: подпись стоит в собственной строке ротора. ------------------------------------------------------------------------- */ .rotor__label, .hero .rotor__label{ font-size:11px; } /* ═══ POLISH-FRAMES.CSS - КОНЕЦ ═══ */