/* Компоненты ST EVENT — переиспользуемые блоки (docs/02-DESIGN-SYSTEM.md, раздел 6) */ /* === Кнопка primary === */ .btn { display: inline-flex; align-items: center; gap: var(--s-4); height: var(--btn-h); padding-left: var(--btn-pad-text); padding-right: var(--btn-pad-circle); border: none; border-radius: var(--r-full); cursor: pointer; text-decoration: none; } /* Ещё одна правка стиля primary-кнопки (ночь 24.09.2026, второй заход) — отменяет предыдущую версию (тонкая обводка + прозрачный фон в покое, заливка и круг только на ховере). Теперь наоборот: кнопка ВСЕГДА залита сплошным --accent, круг со стрелкой виден всегда — обводки и скрытого до-ховера состояния больше нет. */ .btn--primary { position: relative; isolation: isolate; background: var(--accent); border: none; /* Лёгкое затемнение на ховере — единственный оставшийся hover-эффект, без исчезающей заливки/круга (сам просили: "затемнение фона или сдвиг стрелки") */ transition: filter var(--dur-fast) var(--ease); } .btn--primary:hover { filter: brightness(.93); } .btn__text { position: relative; z-index: 2; font-family: var(--font-text); /* "тёмный и жирный" — было 600, недостаточно жирно для сплошной заливки */ font-weight: 700; font-size: var(--fs-body); color: var(--bg); } /* Белый круг с оранжевой стрелкой внутри — виден всегда, никакого opacity:0/transform-скрытия до ховера, никакой отдельной ::after заливки под ним (кнопка и так уже полностью --accent) */ .btn__circle { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: calc(var(--btn-h) - var(--btn-pad-circle) * 2); height: calc(var(--btn-h) - var(--btn-pad-circle) * 2); border-radius: var(--r-full); background: var(--text); color: var(--accent); transition: transform var(--dur-fast) var(--ease); } /* Стрелка слегка "въезжает" на ховере — тот же лёгкий эффект, который разрешал доп. промпт, только без исчезновения самого круга */ .btn--primary:hover .btn__circle { transform: translateX(2px); } .btn__circle svg { width: 40%; height: 40%; } /* Вторичная кнопка (ТЗ 2026: «Посмотреть проекты» — менее заметная рядом с основной): та же высота и капсула, без заливки и круга */ .btn--ghost { padding-right: var(--btn-pad-text); border: 1px solid var(--line-strong); background: none; transition: border-color var(--dur-fast) var(--ease); } .btn--ghost .btn__text { color: var(--text); font-weight: 600; } .btn--ghost:hover { border-color: var(--text); } /* === Шапка === */ .header { position: fixed; top: 0; left: 0; right: 0; /* Было 100, ниже .mobile-menu (z-index:200) — при открытом мобильном меню бургер физически оказывался ПОД панелью меню и переставал ловить клики: единственный способ закрыть меню тем же тапом по бургеру не работал (воспроизведено — клик перехватывался #mobileMenu). Шапка (и бургер в ней) должна оставаться поверх панели меню всегда — правка, ночь 24.09.2026. */ z-index: 300; transition: background var(--dur) var(--ease); } /* Постоянная подложка сверху вниз — меню читается на любом фоне под ним, не только когда включается --header--scrolled (docs/04-REVISION-01.md, R1.2) */ .header::before { content: ''; position: absolute; inset: 0 0 auto 0; height: var(--header-scrim-h); background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 75%, transparent), transparent); pointer-events: none; z-index: -1; } /* .header--scrolled намеренно не задаёт фон/blur самой шапке — правка, ночь 24.09.2026, п.2: раньше здесь был полупрозрачный тёмный фон на всю ширину, из-за которого при скролле появлялась сплошная тёмная полоса во весь экран. Стекло/фон остаются только у .nav-capsule (единственное разрешённое место, см. комментарий выше); сам класс .header--scrolled остаётся — им уплотняется капсула ниже. */ /* Сетка 1fr auto 1fr — капсула стоит ровно по центру экрана при любой ширине логотипа и правого блока, независимо от паддингов контейнера (математически: при симметричных боковых паддингах центр auto-колонки всегда = window.innerWidth/2). docs/05-REVISION-02.md, R17. */ .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--content-x); /* Отступ сверху = отступ острова от края экрана + 24px (R17) */ padding-top: calc(var(--hero-island-inset) + 24px); padding-bottom: var(--s-4); } /* === Капсула меню — стекло (docs/05-REVISION-02.md, R10, уточнено R17) === Единственное место на сайте со стеклом — глобальный запрет на glassmorphism в остальных компонентах остаётся в силе. */ /* impeccable detect: cramped-padding — «children flush against border+bg on all sides» смотрит на padding-block самой .nav-capsule (его нет, инсет даёт flex align-items:center + padding у вложенного .header__link двумя уровнями глубже — см. его правило ниже). Перемерено Playwright после R17: реальный зазор текст→край капсулы 14.8–15.2px (верт.), 25px+ (гор.) — не искать здесь, уже проверено глазами и числом. */ .nav-capsule { grid-column: 2; position: relative; height: var(--nav-capsule-h); display: flex; /* stretch, не center — .header__nav должен получить полную высоту капсулы, чтобы САМ мог растянуть .header__link до 48px (impeccable audit, P3: клик-зона пункта была ~42px). .nav-capsule__highlight не задет — она absolute, вне flex-потока. */ align-items: stretch; border-radius: var(--r-full); padding-inline: var(--nav-capsule-pad); /* .08/.22 вместо .07/.18 — на тёмном фото капсула читалась как обводка, не как стекло (R17, п. «Стекло»). Ревизия №6, п.1: всё ещё читалось блёкло — blur 24→36px и saturate 180→220% дают заметно более искажённый контент под капсулой (само по себе главный сигнал «это стекло»); contrast(112%) добавляет лёгкое «стеклянное» пятно без отдельного слоя преломления (полноценная refraction-текстура через SVG displacement на backdrop-filter не работает ни в одном браузере — не тот примитив, filter применяется до backdrop). */ background: rgba(255, 255, 255, .08); backdrop-filter: blur(36px) saturate(220%) contrast(112%); -webkit-backdrop-filter: blur(36px) saturate(220%) contrast(112%); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 8px 32px rgba(0, 0, 0, .35); transition: padding var(--dur) var(--ease), background var(--dur) var(--ease); } /* Фолбэк для браузеров без backdrop-filter */ @supports not (backdrop-filter: blur(1px)) { .nav-capsule { background: rgba(8, 8, 10, .88); } } /* При скролле капсула уплотняется */ .header--scrolled .nav-capsule { padding-inline: 4px; background: rgba(255, 255, 255, .10); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); } /* Скользящая подсветка под наведённым пунктом — позиция/ширина считаются в js/animations.js от bounding box пункта */ .nav-capsule__highlight { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--r-full); background: rgba(255, 255, 255, .10); opacity: 0; pointer-events: none; } .header__nav { position: relative; z-index: 1; display: flex; /* stretch, не center — клик-зона пункта растягивается на всю высоту капсулы (48px), а не только на высоту текста + padding (~42px, ниже рекомендованных WCAG 2.5.5 44px). Сама капсула не меняется — это только hit-area, R17 её 48px не трогает. impeccable audit, P3. */ align-items: stretch; gap: var(--nav-item-gap); } /* Правый блок пустой всегда — кнопка «Обсудить проект» убрана из шапки целиком (правка, ночь 24.09.2026, п.2), обсуждение проекта доступно только через кнопку в hero. .header__right остаётся пустым div — grid 1fr auto 1fr не требует контента в крайних колонках, чтобы капсула стояла по центру (тот же приём, что и у пустой левой). */ .header__right { grid-column: 3; justify-self: end; height: var(--nav-capsule-h); display: flex; align-items: center; } /* Текст нигде не касается границы капсулы — R17 явно назвал это реальным cramped-padding, не ложным срабатыванием (см. также docs/05-REVISION-02.md R17, пересмотр 19 ранее подавленных находок). */ .header__link { display: flex; align-items: center; padding: var(--nav-item-pad-y) var(--nav-item-pad-x); font-family: var(--font-text); font-weight: 500; font-size: var(--fs-small); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); transition: color var(--dur-fast) var(--ease); } .header__link:hover { color: var(--text); } /* Шапка на мобильном — без фона (чёрная плашка при скролле убрана явным решением, правка ночь 24.09.2026, п.2), поэтому бургер как fixed-элемент постоянно висит поверх контента страницы, который проезжает под ним при скролле. Без собственной подложки его тонкие линии сливались с текстом снизу — на конкретном скролле накрывали "Сочи" в списке городов раздела География, обрезая слово визуально (баг найден и воспроизведён реальным колёсным скроллом, не как особенность именно Географии — совпадение скролл-позиции; тот же эффект был бы над любым другим текстом в этой полосе). Небольшая собственная подложка по кругу — тот же приём, что у остальных круглых icon-кнопок сайта (крестик модалки, стрелки галереи), просто с непрозрачным фоном вместо только обводки, т.к. этой кнопке нужно перекрыть контент под собой, а не просто выделиться на своём фоне. color-mix, не backdrop-filter — блюр разрешён только капсуле меню. */ .header__burger { grid-column: 3; justify-self: end; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s-1); /* Было var(--s-7) = 64px — заметно крупнее остальных элементов шапки (капсула меню в среднем ~48px высотой), непропорционально на мобильном (правка, ночь 24.09.2026). var(--s-6) = 48px — стандартный минимальный размер тач-таргета, тот же приём, что у остальных круглых icon-кнопок сайта. */ width: var(--s-6); height: var(--s-6); background: color-mix(in srgb, var(--bg) 82%, transparent); border-radius: var(--r-full); border: none; cursor: pointer; } .header__burger span { display: block; /* Было var(--s-5) = 32px — пропорционально уменьшено вместе с самой кнопкой (правка, ночь 24.09.2026) */ width: var(--s-4); height: 2px; background: var(--text); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } /* Три линии складываются в крестик, когда меню открыто — единственная визуальная подсказка, что повторный тап по той же кнопке закроет меню (правка, ночь 24.09.2026 — раньше кнопка никак не показывала своё состояние открыто/закрыто) */ .header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Бургер и десктоп-меню никогда не показаны одновременно (docs/04-REVISION-01.md, R1.1). Точечное исключение до полного шага «Адаптив» — остальная сетка/типографика пока не переверстаны. Идут после базовых правил, чтобы выигрывать при равной специфичности. */ @media (min-width: 1024px) { .header__burger { display: none; } } @media (max-width: 1023px) { .nav-capsule, .header__right { display: none; } } /* === Мобильное меню (полноэкранное) === */ .mobile-menu { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-5); /* Боковой запас — без него длинный пункт мог вплотную подойти к краю экрана (правка, ночь 24.09.2026) */ padding-inline: var(--s-5); text-align: center; background: var(--bg); transform: translateY(-100%); transition: transform var(--dur) var(--ease); } .mobile-menu--open { transform: translateY(0); } /* Ссылки внутри