/* header.css — sticky-шапка. Правит только тикет 01. */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--color-surface-base) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* линия — тенью, чтобы фактическая высота шапки равнялась токену --header-height */ box-shadow: 0 1px 0 color-mix(in srgb, var(--color-accent-primary) 25%, transparent); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: var(--header-height); padding-block: 0; } /* Бренд-блок (тикет N3): SVG-монограмма SM + имя капителью + слоган тоньше */ .site-header__brand { display: flex; flex-direction: row; align-items: center; gap: 10px; color: var(--color-text-primary); min-height: var(--tap-target-min); justify-content: center; } /* G71/G84: растровый лок-ап; прозрачность честная (фон снят в файле), blend не нужен. max-width + object-fit: в тесной шапке знак ужимается пропорционально, без искажений. */ .site-header__logo-img { display: block; height: 56px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; pointer-events: none; } .site-nav__list { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; } .site-nav__link { display: inline-flex; align-items: center; min-height: var(--tap-target-min); padding: var(--space-1) var(--space-2); color: var(--color-text-primary); font-size: var(--text-xs); /* Caption/UI эталона: 12px/500/1.4 */ font-weight: 500; line-height: 1.4; letter-spacing: var(--tracking-wide); text-transform: uppercase; } .site-nav__link:hover { color: var(--color-accent-primary); opacity: 1; } /* CTA в шапке компактнее эталонных кнопок контента (высота шапки), тач-цель >= 44px */ .site-header .site-header__cta { padding: 8px 16px; } /* Между кнопкой «Записаться» и бургером было 8px — палец промахивался и попадал не туда. 12px разводят две соседние тач-цели по 44px. */ .site-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Пока мобильное меню открыто, страница под ним не прокручивается: класс вешает js/header.js на . Позиция прокрутки сохраняется — закрыв меню, посетитель остаётся там же, где был. ВАЖНО: правило только для . Тот же overflow на превращает тело страницы в собственную область прокрутки, и «колода» секций (position: sticky) начинает считать себя от неё — вёрстка складывается, страница прыгает. */ html.has-nav-open { overflow: hidden; } /* Бургер: показывается на <=768px */ .site-header__burger { display: none; flex-shrink: 0; flex-direction: column; justify-content: center; gap: 5px; width: var(--tap-target-min); height: var(--tap-target-min); padding: 10px; background: none; border: var(--button-outline) solid var(--color-accent-primary); border-radius: var(--button-radius); cursor: pointer; } .site-header__burger-line { display: block; height: 2px; width: 100%; background: var(--color-accent-primary); transition: transform var(--motion-duration) var(--motion-ease), opacity var(--motion-duration) var(--motion-ease); } @media (max-width: 768px) { .site-header__burger { display: flex; } .site-header__brand { min-width: 0; } .site-header__logo-img { height: 48px; } /* Компактная CTA рядом с бургером; тач-цель остаётся >= 44px */ .site-header .site-header__cta { padding: 8px 16px; font-size: 0.6875rem; letter-spacing: 0.04em; } .site-nav { position: fixed; inset: var(--header-height) 0 auto 0; z-index: var(--z-overlay); background: var(--color-surface-card); border-bottom: 1px solid color-mix(in srgb, var(--color-accent-primary) 25%, transparent); /* Меню не длиннее экрана: на коротком телефоне листается внутри себя */ max-height: calc(100vh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; transform: translateY(-120%); opacity: 0; visibility: hidden; transition: transform var(--motion-duration) var(--motion-ease), opacity var(--motion-duration) var(--motion-ease), visibility 0s linear var(--motion-duration); } .site-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; transition: transform var(--motion-duration) var(--motion-ease), opacity var(--motion-duration) var(--motion-ease); } /* Пункты стояли вплотную (зазор 0) — палец попадал в соседний. 8px между тач-целями по 44px убирают промах. */ .site-nav__list { flex-direction: column; align-items: stretch; gap: var(--space-1); padding: var(--space-2) var(--gutter) var(--space-3); } .site-nav__link { width: 100%; } .site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(2) { opacity: 0; } .site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } }