/* ============================================================ ШАПКА ДЛЯ ВЁРСТКИ ДО 1199. Повторяет десктопную (rec2001050241): слева птичка, справа конверт и бургер, теми же inline-SVG из экспорта. На 1200 и выше не показывается — там работает тильдовская. ── ПОЧЕМУ ОНА ВООБЩЕ НУЖНА ── В рукописной вёрстке шапка лежала внутри секции героя, а первый экран страницы занимает блок #ebNext, поэтому герой начинается только на 1246px. Сверху страницы на телефоне не было ни логотипа, ни меню. ── ПОЧЕМУ РАЗМЕРЫ ФИКСИРОВАННЫЕ ── У десктопной шапки высота 56 единиц сетки 1200, то есть 66px при окне 1440. Если тянуть это в vw, на телефоне выйдет 18px. Шапка должна оставаться пальцедоступной, поэтому высота постоянная, а по ширине меняются только боковые отступы. Пропорции взяты с десктопа: птичка 32 при полосе 56, иконки 34, то есть знак примерно 61% высоты полосы. На планшете это 34/36 при полосе 68, на телефоне крупнее — 40/44 при полосе 72. ============================================================ */ #ebHeader{ display:none; } @media (max-width:1199px){ #ebHeader{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; padding:0 20px; /* ── ЗАКРЕПЛЕНИЕ ── position:sticky, а не fixed: sticky сохраняет своё место в потоке, поэтому контент под шапкой не надо подпирать компенсирующим padding — и не будет расхождения, если высота шапки поменяется. Проверил, что закрепление вообще возможно: ни у html, ни у body нет overflow, скроллит documentElement — иначе sticky молча не работает. z-index ниже меню-оверлея (#ebMenu, 1000), чтобы открытое меню перекрывало шапку. */ position:sticky; top:0; z-index:90; /* Полупрозрачное стекло вместо глухой заливки: под шапкой проезжают фотографии (фон героя, кадры артистов), и глухая чёрная полоса читалась бы как обрезка. Стекло — язык сайта, тот же приём, что у логотипов и кнопок. Без backdrop-filter (старый Firefox, отключённые эффекты) остаётся почти непрозрачный чёрный, см. @supports ниже. */ background:rgba(0,0,0,.92); } @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)){ #ebHeader{ background:rgba(0,0,0,.62); -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%); } } @media (min-width:641px){ #ebHeader{ height:68px; padding:0 32px; } } #ebHeader .ebh-mark, #ebHeader .ebh-ic{ display:flex; align-items:center; justify-content:center; /* 44x44 — минимальная зона касания; сам знак меньше, поэтому даём прозрачное поле вокруг через padding, а не увеличиваем иконку */ min-width:44px; min-height:44px; padding:5px; margin:-5px; background:none; border:0; color:inherit; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; } #ebHeader .ebh-mark svg{ width:34px; height:34px; display:block; } #ebHeader .ebh-ic svg{ width:36px; height:36px; display:block; } #ebHeader .ebh-icons{ display:flex; align-items:center; gap:8px; } /* Свечение по наведению и по фокусу — то же, что у иконок десктопной шапки (.eb-glow-icon в css/eb-buttons.css). Тёмные круги-подложки из экспорта сюда не переносил: это чёрный виньетный растр, на чёрном фоне он ничего не добавляет, а однажды уже вылез артефактом под box-shadow. */ #ebHeader .ebh-mark svg, #ebHeader .ebh-ic svg{ transition:filter .2s ease, transform .2s ease; } #ebHeader .ebh-mark:hover svg, #ebHeader .ebh-ic:hover svg, #ebHeader .ebh-mark:focus-visible svg, #ebHeader .ebh-ic:focus-visible svg{ filter:drop-shadow(0 0 4px rgba(169,218,247,.65)) drop-shadow(0 0 12px rgba(169,218,247,.45)) drop-shadow(0 0 26px rgba(169,218,247,.25)); } #ebHeader .ebh-ic:active svg{ transform:scale(.94); } #ebHeader .ebh-mark:focus-visible, #ebHeader .ebh-ic:focus-visible{ outline:2px solid #A9DAF7; outline-offset:2px; border-radius:8px; } @media (prefers-reduced-motion: reduce){ #ebHeader .ebh-mark svg, #ebHeader .ebh-ic svg{ transition:none; } #ebHeader .ebh-ic:active svg{ transform:none; } } /* Старая шапка внутри героя больше не нужна: логотип и иконки теперь сверху страницы. Сама секция героя остаётся. */ #ebMobile .ebm-nav{ display:none; } /* ── ТЕЛЕФОНЫ: ЗНАКИ КРУПНЕЕ ── На десктопе иконки 34 при полосе 56 — это 61% высоты полосы, и на мониторе такой пропорции хватает. На телефоне палец ближе к экрану, а сама полоса единственный элемент навигации, поэтому знаки поднимаем до 44 при полосе 72 (те же 61%, но в абсолюте заметно крупнее). Полоса растёт вместе с ними: 44 + 2x14 воздуха = 72, иначе знаки упираются в края. Блок стоит в КОНЦЕ файла осознанно: при равной специфичности решает порядок, и стоя выше базовых правил он проигрывал им — полоса вырастала, а сами знаки оставались планшетными. */ @media (max-width:640px){ #ebHeader{ height:72px; padding:0 18px; } #ebHeader .ebh-mark svg{ width:40px; height:40px; } #ebHeader .ebh-ic svg{ width:44px; height:44px; } #ebHeader .ebh-icons{ gap:10px; } #ebHeader .ebh-mark, #ebHeader .ebh-ic{ min-width:52px; min-height:52px; padding:6px; margin:-6px; } } } /* ============================================================ БУРГЕР → КРЕСТИК. Крестик нарисован прямо в SVG отдельным путём (`class="ebx"`): те же 18 единиц длины и 1 единица толщины, что у линий бургера, только по диагоналям через центр (17, 16.5). При открытом меню три линии гаснут, а крестик проявляется — всё состояние это opacity, ни одной трансформации. Раньше крестик собирался из самих линий: крайние сводились к центру и разворачивались на ±45 через transform на плюс transform-box:view-box. В Chrome это работало, а на маке крестик ломался (10.09.2026). Трансформации на SVG-детях — самое зыбкое место такой связки: своя система координат, разная поддержка transform-box, а сверху ещё filter:drop-shadow подсветки из css/eb-buttons.css — Safari известен тем, что не пересчитывает отфильтрованный слой, когда у потомка меняется transform. У готового пути и opacity таких зависимостей нет. Правила покрывают и новую шапку (#ebBurgerTop), и десктопную из экспорта: иконка там та же, а её артборд position:fixed, значит бургер всегда на экране и крестик всегда доступен. Поэтому отдельную кнопку закрытия в оверлее скрываем (см. css/eb-mobile.css) — крестик один и на месте. ============================================================ */ #ebBurgerTop svg path, .tn-elem__20010502411772787365671000003 .tn-atom svg path{ transition:opacity .18s linear; } /* пока меню закрыто, крестик не виден */ #ebBurgerTop svg .ebx, .tn-elem__20010502411772787365671000003 .tn-atom svg .ebx{ opacity:0; } /* меню открыто: три линии гаснут, крестик проявляется */ .eb-menu-open #ebBurgerTop svg path:nth-of-type(2), .eb-menu-open #ebBurgerTop svg path:nth-of-type(3), .eb-menu-open #ebBurgerTop svg path:nth-of-type(4), .eb-menu-open .tn-elem__20010502411772787365671000003 .tn-atom svg path:nth-of-type(2), .eb-menu-open .tn-elem__20010502411772787365671000003 .tn-atom svg path:nth-of-type(3), .eb-menu-open .tn-elem__20010502411772787365671000003 .tn-atom svg path:nth-of-type(4){ opacity:0; } .eb-menu-open #ebBurgerTop svg .ebx, .eb-menu-open .tn-elem__20010502411772787365671000003 .tn-atom svg .ebx{ opacity:1; } /* Пока меню открыто, шапка поднимается над оверлеем (#ebMenu, z-index 1000), иначе крестик окажется под затемнением и станет ненажимаемым. */ .eb-menu-open #ebHeader{ z-index:1100; } .eb-menu-open #rec2001050241 .t396__artboard{ z-index:1100; } @media (prefers-reduced-motion: reduce){ #ebBurgerTop svg path, .tn-elem__20010502411772787365671000003 .tn-atom svg path{ transition:none; } }