/* ========================================================================== Фазы главного баннера: точки-переключатели по макету и мягкая смена кадра. Правка заказчика (снимок с рядом из шести точек): «анимация, там каждые 8 или 10 секунд же меняется баннер, вот сделать, чтобы было несколько фаз». Число фаз = число баннеров в разметке; точки под ними теперь строит home.js по числу слайдов, а этот файл отвечает только за вид. Размеры взяты из набора Figma — ряд точек, файл design/figma/ui-kit/kit-20.svg (docs/DESIGN-SYSTEM-FIGMA.md, «Точки карусели»). Разбор файла: · ряд 131,195 × 11,2017, семь точек; · круг точки — радиус 5 (диаметр 10), рукотворная кромка добавляет по 0,56 сверху и снизу, отсюда высота ряда 11,2; · шаг между центрами 20 → просвет между точками 8,8; · первая точка залита сплошь — это активная; у остальных внутри белый круг радиусом 4,5, то есть остаётся кольцо: от 4,5 до 5,6 с учётом кромки ≈ 1,06 толщины; · цвет в наборе брендовый, но набор нарисован на белом листе. На баннере точки лежат поверх фотографии, там с 02.09 стоит белый (правка дизайнера в site.css) — цвет не трогаем, приводим только геометрию: было 11 × 11 с просветом 10 и кольцом 1,6. Порядок подключения. Файл написан так, чтобы работать на любом месте в очереди стилей: display у .hero-dots здесь НЕ задаётся ни разу, поэтому мобильный и планшетный слои (mobile/hero.css, mobile/tablet.css прячут ряд целиком) остаются в силе, даже если этот файл окажется после них. Всё перебиваемое перебивается специфичностью, без !important: site.css: .hero-dots (0,1,0), .hero-dots i (0,1,1), .hero-dots i.on (0,2,1), .hero-slide (0,1,0), .hero-slide.on (0,2,0); здесь: .hero-b .hero-dots (0,2,0), .hero-b .hero-dots i (0,2,1), .hero-b .hero-dots i.on (0,3,1), .hero-b .hero-slide (0,2,0), .hero-b .hero-slide.on (0,3,0). ========================================================================== */ /* ---- Смена кадра ------------------------------------------------------ Было: у всех слайдов transition:opacity .6s, слои лежат в порядке разметки. При переходе «последний → первый» уходящий кадр оказывался ВЫШЕ приходящего, и в середине перехода оба стояли около половинной непрозрачности — под ними просвечивал зелёный фон секции, картинка на миг блёкла. Чем больше фаз, тем чаще это заметно. Стало: активный слайд поднят над остальными, и новый кадр проявляется ПОВЕРХ старого, а старый гаснет уже закрытым. Провала нет ни в одном направлении. Длительность 0,9 с при шаге в 8 с — спокойное затухание, как просил заказчик («несколько фаз», а не мигание). */ .hero-b .hero-slide{ z-index:1; transition:opacity .9s cubic-bezier(.4, 0, .2, 1); } .hero-b .hero-slide.on{z-index:2} /* ---- Ряд точек -------------------------------------------------------- */ .hero-b .hero-dots{gap:calc(8.8 * var(--u))} /* шаг 20 при точке 11,2 */ .hero-b .hero-dots i{ width:calc(11.2 * var(--u)); height:calc(11.2 * var(--u)); border-radius:50%; background:none; /* Кольцо 1,06 из макета. На узком экране это меньше пикселя и кольцо пропадает вовсе, поэтому нижняя граница — 1 px. Первая строка — запасная, для браузеров без max(). */ box-shadow:inset 0 0 0 1px rgba(255,255,255,.9); box-shadow:inset 0 0 0 max(1px, calc(1.06 * var(--u))) rgba(255,255,255,.9); position:relative; /* держит тап-зону ::after */ /* Ширина больше не анимируется: точка круглая и не растягивается, а плавным остаётся только налив активной. */ transition:background-color .25s ease, box-shadow .25s ease; } /* Активная — залита сплошь, размер тот же (в макете активная точка не крупнее прочих, отличается только заливкой). */ .hero-b .hero-dots i.on{ width:calc(11.2 * var(--u)); height:calc(11.2 * var(--u)); background:#fff; box-shadow:none; } /* Наведение: подсказываем, что точка кликается, не подменяя активную. Обёрнуто в @media (hover:hover) по общему правилу проекта (interactions.css:20 «на телефоне :hover залипает», так же сделано в card-actions.css:47, favorites.css:26). Здесь это не формальность: ряд точек спрятан только до 1023px (mobile/hero.css, mobile/tablet.css), а планшет в альбоме от 1024px попадает в десктопный слой и точки на нём видны. Без обёртки после тапа полузалитая точка осталась бы висеть и читалась как вторая активная, причём вместе с тап-зоной ::after — то есть подсвеченной была бы и полоса выше/ниже точки. Специфичность медиазапрос не меняет: site.css:4547 (.hero-dots i, background:none) перебивается по-прежнему (0,2,1) против (0,1,1). */ @media (hover:hover){ .hero-b .hero-dots i:hover{background:rgba(255,255,255,.4)} .hero-b .hero-dots i.on:hover{background:#fff} } /* Точка сама по себе 12 px — для пальца мало. Невидимая зона добивает высоту до 44 px. Вширь расширяем ровно на половину просвета (4,4), иначе соседние зоны наложились бы и палец попадал бы не в ту фазу; на сенсорных слоях ряд точек и вовсе спрятан, там промах невозможен. */ .hero-b .hero-dots i::after{ content:""; position:absolute; inset:-16px calc(-4.4 * var(--u)); } /* Точкам в разметке проставлен tabindex="0" — фокус должен быть виден. Свечение по кругу точки, без прямоугольной обводки (правило «без обводки», BRAND-RULES §3.2); на фотографии баннера — белое. Тап-цель ::after прозрачная, в свечение не попадает. */ .hero-b .hero-dots i:focus-visible{ outline:none; filter:drop-shadow(0 0 3px #fff); } /* Узкий десктоп: в site.css на ≤1099 точки фиксируются в 9 px (единицы --u там уже упёрлись в минимум). Повторяем тот же размер и пересчитываем под него просвет и кольцо по пропорции макета: 9 · 8,8/11,2 ≈ 7. */ @media (max-width:1099px){ .hero-b .hero-dots{gap:7px} .hero-b .hero-dots i, .hero-b .hero-dots i.on{width:9px;height:9px} .hero-b .hero-dots i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)} .hero-b .hero-dots i.on{box-shadow:none} .hero-b .hero-dots i::after{inset:-17px -3px} } /* Просили меньше движения — меняем кадр без затухания. Автопрокрутку в этом режиме home.js не заводит вовсе, остаётся ручное переключение. */ @media (prefers-reduced-motion:reduce){ .hero-b .hero-slide{transition:none} .hero-b .hero-dots i{transition:none} }