/* Шапка. Порт ds-source/components/layout/Header.jsx. Прозрачная поверх первого экрана, плотная после 48 px прокрутки, переход 400 мс. */ .tf-header{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--header-height,72px);display:flex;align-items:center;box-sizing:border-box;padding:0 var(--page-margin,64px);background:transparent;border-bottom:1px solid transparent;transition:background-color var(--dur-base,400ms) var(--ease,cubic-bezier(0.2,0,0,1)),border-color var(--dur-base,400ms) var(--ease,cubic-bezier(0.2,0,0,1))} .tf-header--solid{background:var(--bg,#0A0A0A)} /* Линии под шапкой нет (третий круг замечаний Степана, 17.09): шапка и страница стыкуются без черты в обоих состояниях. С 15.09 по 17.09 её рисовал псевдоэлемент .tf-header::after (серебро брендбука 0.55, 1 px, bottom:-1px на строке прозрачной рамки). border-bottom у .tf-header остаётся 1 px прозрачным: рамка в высоте шапки (box-sizing border-box), ни одно состояние ей цвет не задаёт, переход border-color в transition ничего не красит. */ /* Полоса «закат» над шапкой (созвон 15.09, выбор владельца: «закат плюс серебро»). Была пятном по центру с прозрачностью 0.10, заказчику «видно только в центре, а хотелось бы на протяжении всей строки». Теперь от края до края, оттенок меняется по горизонтали, как закат вдоль горизонта: наклон 105°, слева направо сиреневый 0.30, серо-сиреневый 0.26, бежевый 0.20, сиреневый 0.28 - все три из брендбука. Высота равна высоте шапки, --header-height (72 на широком, 56 на телефоне): полоса заканчивается ровно на серебристой линии, ниже неё ни одного пикселя подсветки. Была 220 и свисала на 148 px под линию, при прокрутке ложилась на текст страницы - замечание заказчика 16.09. Вниз гаснет маской внутри этой высоты, чтобы не обрываться резким краем: непрозрачно вверху, 0.75 на семи десятых, 0.45 у самой линии. Лежит под логотипом и меню (z -1 внутри стекового контекста фиксированной шапки), поверх её фона, поэтому видна и на прозрачной шапке над кадром, и на плотной после прокрутки. Первая строка background - запас для браузеров без color-mix, вторая - токены. pointer-events:none и aria-hidden в разметке: клики и читалки её не замечают. Контраст белого меню к полосе на 1440 в трёх точках не ниже 11:1 (замер в pravki-1d). */ .tf-header__haze{position:absolute;top:0;left:0;right:0;height:var(--header-height,72px);z-index:-1;pointer-events:none;background:linear-gradient(105deg,rgba(218,191,218,0.30) 0%,rgba(151,149,161,0.26) 33%,rgba(211,205,196,0.20) 66%,rgba(218,191,218,0.28) 100%);background:linear-gradient(105deg,color-mix(in srgb,var(--accent-violet,#DABFDA) 30%,transparent) 0%,color-mix(in srgb,var(--accent-silver,#9795A1) 26%,transparent) 33%,color-mix(in srgb,var(--accent-sand,#D3CDC4) 20%,transparent) 66%,color-mix(in srgb,var(--accent-violet,#DABFDA) 28%,transparent) 100%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,0.75) 70%,rgba(0,0,0,0.45) 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,0.75) 70%,rgba(0,0,0,0.45) 100%)} .tf-header__in{width:100%;max-width:var(--container-max,1440px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px} .tf-header__nav{display:flex;align-items:center;gap:32px} .tf-header__burger{display:none} .tf-header__menu{display:none} @media (max-width:767px){ .tf-header__nav{display:none} .tf-header__burger{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;margin-right:-10px;background:none;border:0;color:var(--fg,#F2F2F2);cursor:pointer;font-family:var(--font-family,"Golos Text","Helvetica Neue",Arial,sans-serif);font-size:var(--type-ui-size,14px);font-weight:500;letter-spacing:var(--type-ui-ls,0.02em);gap:8px;padding:0 10px} .tf-header__burger:focus-visible{outline:var(--focus-width,2px) solid var(--action,#FFFFFF);outline-offset:var(--focus-offset,2px)} .tf-header__menu{position:fixed;inset:var(--header-height,56px) 0 0 0;background:var(--bg,#0A0A0A);display:flex;flex-direction:column;padding:32px var(--page-margin,20px);gap:8px;opacity:0;visibility:hidden;transition:opacity var(--dur-fast,300ms) var(--ease,cubic-bezier(0.2,0,0,1)),visibility 0s linear var(--dur-fast,300ms)} .tf-header__menu--open{opacity:1;visibility:visible;transition:opacity var(--dur-fast,300ms) var(--ease,cubic-bezier(0.2,0,0,1)),visibility 0s} } /* Иконка бургера: два состояния переключаются атрибутом, без JS-переписывания SVG */ .tf-header__burger .tf-burger__close{display:none} .tf-header__burger[aria-expanded=true] .tf-burger__open{display:none} .tf-header__burger[aria-expanded=true] .tf-burger__close{display:inline} /* Прокрутка страницы блокируется, пока открыто мобильное меню */ body.tf-menu-open{overflow:hidden} /* Меню на случай, когда скрипт не отработал. Показывается только на телефоне: на широком экране обычное меню видно и без JS, там дублировать нечего. Правило показа лежит внутри самого