/* ============================================================ DEMO COMPONENT: SITE HEADER ------------------------------------------------------------ Перенос аппрувнутого хедера прототипа (site\index.html, .gb-header / .gbh-*) один в один; правила подключены к токенам demo\assets\tokens.css. Провенанс каждой цифры = прототип + live-замеры (SYSTEM.md 2026-08-12; harvest public-home и public-home-sweep 2026-08-17): бар 80px на ВСЕХ ширинах, мобильной ступени нет фон #fcfdfd, на lg+ white/90 + blur 6px тень константная 0 4px 8px rgba(102,102,102,.05) нав-пункт Inter 500 uppercase, ls 0.5, 14px -> 16px c 1280; с 1280 высота пункта 56 (16+16 пад + lh 24) кнопки семья шапки min-h 36 / 42 (>=1280) / 48 (>=2000); порог 2000 КАСТОМНЫЙ, не Tailwind-сетка (свип 17.08: 1999 = 42, 2000 = 48) лейбл кнопки внутренний span[data-pc-section="label"]: 11px / 600 / ls 1px / lh normal, 12px c 2000 DEVIATION прототип держит sticky вместо живого fixed (у лайва плейсхолдер h-0 + fixed бар); перенесено как в прототипе. ГЛИФЫ ШАПКИ ТОЖЕ .gb-btn (gbppl-icon-consumers-1, 28.08). ------------------------------------------------------------ Четыре круглых кнопки сайтового бара — лупа, корзина, человечек/инициалы и бургер (с gbppl-demo-fixes-1 он стоит на ОБОИХ барах, не только в варианте auth) — носят `.gb-btn .gb-btn--icon .gb-btn--ghost .gb-btn--secondary`, ровно как контурная пара носит `.gb-btn --medium`. Замер до/после на 1280/390/1920 (live/index, live/catalog, live/checkout): круг 44, глиф 22, stroke 1.5, чернила Zinc 900, ховер --v1-ink-hover — всё совпало число в число. ЕДИНСТВЕННОЕ ОСОЗНАННОЕ РАСХОЖДЕНИЕ: ДЛИТЕЛЬНОСТЬ 300 -> 200ms. Здесь стояло `transition: background 300ms, color 300ms` (живой глиф 24.08 отдавал color .3s), у организма --gb-btn-duration 200ms (LIVE 24-25.08 на кнопке). Две длительности на одной кнопке невозможны, и по Тон-6 побеждает организм: кнопка одна, и её часы одни. Разница видна только на ховере и только в 100ms. ЧТО ОСТАЛОСЬ ЗДЕСЬ ОТ .gbh-icon-button: ТОЛЬКО ПОРТАЛЬНАЯ ПЛАНКА. Три глифа `.gbh-pbar__icon` и `.gbh-pbar__burger` (live/portal.html) ждут решения Тона по ТИХОЙ СЕМЬЕ ЦВЕТОВ (Zinc 500 -> Zinc 700): такой колонки у организма нет, и выдумывать её волна не стала (раздел 8 скилла). До того дня класс живёт ради них четверых. ============================================================ */ /* Кастом-элемент несёт sticky-позицию: внутренний header.gb-header остаётся измеримой копией живого бара. */ gb-site-header { display: block; position: sticky; top: 0; z-index: 31; } /* ОТКРЫТАЯ ПАНЕЛЬ ПОДНИМАЕТ ХЕДЕР НАД ПОЛОСОЙ КАТАЛОГА (gbppl-demo-fixes-1, 29.08). Панели семьи .gbh-menu лежат ВНУТРИ хедера, а он стоит на 31, и полоса категорий вендорного каталога на 32 срезает им низ: на 1280 у панели Gifts (последняя строка «Wine & Spirits» уходит под полосу), ниже 1280 у бургера. Пока панель открыта, хедер встаёт над полосой; панель закрылась — всё вернулось, и полоса снова ложится поверх при прокрутке, как решил Тон (Тон-16). Условие на состояние, а не на страницу: правило одно для всех, а режет только там, где есть полоса. NO TOKEN: 33 — ступень над полосой каталога (32); шкалы слоёв у системы нет, список в разделе 8 скилла. */ gb-site-header:has(.gbh-menu[data-open="true"]), gb-site-header:has(.gbh-navitem--menu[data-open="true"]) { z-index: 33; } .gb-header { background: var(--live-body); box-shadow: var(--shadow-header); } @media (min-width: 1024px) { .gb-header { background: var(--header-glass); backdrop-filter: blur(6px); } } /* Бар 80px на каждой ширине (harvest public-home 2026-08-17: 80 на всех тринадцати свип-ширинах, включая 360 и 768). СЕТКА ПЕРЕСНЯТА С ЛАЙВА 2026-08-27 (gbppl-header-fit-1). Было `230px 1fr auto` при gap 48: брендовая дорожка на 62px шире знака, зазоры вдвое шире живых, и `1fr` с автоминимумом не давал наву ужаться — правая пара уезжала за окно на всём 900..1439 (замер: .gbh-actions правая кромка 1282 при окне 1024 и 1332 при 1280, горизонтальный скролл на каждой странице с шапкой). Живой замер https://www.gildedbox.com, 900..1920 (JSON: scratchpad d1\live-header.json): знак 168 (x 24 при полях 24, x 48 при 1920) знак -> нав 32 РОВНО на всех ширинах (192 -> 224 при 1280) нав flex-1, содержимое влево, правый карман сразу за ним: при 1280 нав кончается на 885.7 и там же начинается Book a meeting, зазора нет пункт кегль 14 / 16 с 1280; поля li 8 / 16 с 1280; паддинг ссылки 16px 8px / 16px с 1280 Поэтому дорожка знака = 168, зазор = 32, средняя дорожка minmax(0,1fr): она обязана уметь ужиматься, иначе автоминимум нава распирает сетку. */ .gbh-bar { height: var(--header-h); display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; align-items: center; gap: 32px; } .gbh-brand { display: inline-flex; width: 168px; height: 56px; align-items: center; } .gbh-brand img { width: 100%; height: auto; } /* Живой ритм нава: li margin 0 16px + link padding 16px (SYSTEM.md site chrome, live 2026-08-12), 64px между лейблами. */ .gbh-nav { display: flex; align-items: center; } .gbh-link { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0 16px; padding: 16px; background: transparent; border: 0; color: var(--zinc-900); font-size: 14px; font-weight: 500; letter-spacing: 0.5px; line-height: 1.5; text-transform: uppercase; /* LIVE 24.08: живой пункт носит transition-all duration-300 ease-in-out, ховер гасит до opacity .8 — гаснет плавно, за 300ms. Переносим ровно те свойства, которые у пункта меняются: цвет (прозрачный вариант ниже) и прозрачность. */ transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 1280px) { .gbh-link { font-size: 16px; } } .gbh-link:hover { opacity: 0.8; } /* Золотой чип Beta на CUSTOMIZE: легаси-акцент лайва, #bea042 (SYSTEM.md site chrome, live 2026-08-12). Новых золотых элементов не заводить (BRAND.md). */ .gbh-beta { border-radius: var(--radius); padding: 3px 6px; background: var(--gold-beta); color: var(--white); font-size: 12px; font-weight: 500; letter-spacing: 0.5px; line-height: 1.5; text-transform: none; } /* Правый карман. Ритм 12 между СОСЕДЯМИ: flex-gap считается по живым детям, поэтому карман без корзины (гость, gbppl-header-cart-1, Тон 28.08: «Корзина должна быть видна только авторизованным пользователям. Пока ты не авторизован, она не отображается») просто короче — пустого зазора на её месте не остаётся, и ни одна ступень бара не двигается. Сетку бара и порог схлопывания нава (ловушка 17) та волна не трогала: «по поводу меню: я бы оставил бургер». */ .gbh-actions { display: flex; align-items: center; gap: 12px; } /* ============================================================ КНОПОЧНАЯ СЕМЬЯ ШАПКИ — СВЕРКА С ЛАЙВОМ 2026-08-24 ------------------------------------------------------------ Тон, 24.08: «самое главное, чтобы в хедере были действительно настоящие системные кнопки правильного размера, и чтобы эти кнопки, как компонент, имели правильные цвета, шрифты, hover-эффекты и всё прочее. Давай сделаем это один раз». Прогон прибором по https://www.gildedbox.com (getComputedStyle на главной и на /catalog/products, свип ширин 900..2200, page.hover с выдержкой 600ms; JSON снятия — scratchpad hub\header\live-header-measure.json). Что сошлось и что нет: ЛЕСТНИЦА сошлась полностью. 36 / 42 (>=1280) / 48 (>=2000), пад 8/16 -> 8/20 с 1280, gap 12 -> 20, радиус 5, лейбл 11/600/ls 1/uppercase -> 12 с 2000. Ни одной цифры менять не пришлось. ФОН CTA РАСХОЖДЕНИЕ. Живая Book a Meeting — Blue 600 #2563eb, а не Zinc 800. Мы носили тёмную с 18.08; live\portal.html уже перекрашивал заимствованную кнопку локальным .pth-cta («the one repaint... Blue 600 fill, Blue 700 hover»), то есть владелец отставал от лайва, а потребитель чинил у себя — та же болезнь, что и с цветом лейбла ниже. Лечим у владельца, локальная заплатка портала становится безвредным дублем. Это и Тон-5: основная CTA синяя. ЛЕЙБЛ CTA живой #fafafa = --zinc-50, не чистый белый. ХОВЕР CTA РАСХОЖДЕНИЕ. Живой Blue 700 #1d4ed8 — ТЕМНЕЕ покоя. Мы светлели (zinc-800 -> zinc-700), и Тон это поймал дословно: «по ховеру кнопка становится светлее, а не темнее, как должно быть». КОНТУРНАЯ покой сошёлся (прозрачная, Zinc 900 текст и бордер). Ховер РАСХОЖДЕНИЕ: живой rgba(212,212,216,.2) = Zinc 300 на 20%, у нас стояла плотная заливка Zinc 100. ПЕРЕХОД живой 200ms cubic-bezier(.4,0,.2,1) по цвету, фону и бордеру; у нас было 160ms linear. ИКОНОКНОПКА живой хедер несёт один глиф-линк (поиск, href /search): 24px иконошрифт, цвет = цвет бара, ХОВЕРА НЕТ ВООБЩЕ, только переход цвета 300ms. Круг 44px с подложкой — v1-канон прототипа (SYSTEM.md components), сознательно оставлен: глиф обязан отвечать курсору (прецедент «the heart answers the pointer»), а лайв тут пары не даёт. Перенесена только длительность. Лестница M 36/42/48 живёт в LIVE BUTTON LADDER (tokens.css; harvest public-home 2026-08-17). Ступень 48 включается ровно с 2000px — кастомный порог вне Tailwind-сетки. ============================================================ */ /* КНОПКИ ШАПКИ ТЕПЕРЬ .gb-btn (gbppl-button-2, 26.08). Тон дал добро на миграцию, и вся семья .gbh-cta уехала в организм componentsutton.css одной строкой каждая: .gbh-cta -> .gb-btn --medium --filled --primary .gbh-cta--outline -> .gb-btn --medium --outline --secondary .gbh-cta--inverted -> .gb-btn --medium --outline --inverse Ни одной цифры при этом не тронуто: лестница S организма И ЕСТЬ эта лестница (36 / 42 с 1280 / 48 с 2000, пад 8/16 -> 8/20, gap 12 -> 20, радиус 5, лейбл 11/600/ls 1 -> 12 с 2000, ховер Blue 600 -> 700, контурный ховер rgba(212,212,216,.2), переход 200ms cubic-bezier(.4,0,.2,1)) — она была снята с этого самого хедера 24.08 и перенесена в токены под именами --gb-btn-medium-* (до 02.09 они назывались --gb-btn-s-*; переименование ничего не сдвинуло, gbppl-btn-ladder-1). Прибор до и после: 1280/1920/2258 на восьми страницах с шапкой, расхождений ноль. ЧТО ОСТАЛОСЬ ЗДЕСЬ. Только размещение: кто где стоит и кто на какой ширине исчезает. Селектор перестал быть именем кнопки и стал адресом — «кнопка, стоящая в правом кармане шапки»: .gbh-actions .gb-btn правая пара бара .gbh-menu__actions .gb-btn колонка кнопок тёмной панели Gifts Антидот a.gbh-cta против body.gb-demo a { color: inherit } тоже уехал: button.css несёт свою пару a.gb-btn / body.gb-demo a.gb-btn и читает цвет из слота, поэтому она держит и ховер. Здесь он больше не нужен и удалён, а не продублирован. */ /* Бейдж корзины per live (SYSTEM.md site chrome, live 2026-08-12): 16x16, шрифт 10, Blue 600, белое кольцо 1px. DEVIATION: у лайва якорь top -13px right 5px от 20px иконобокса; адаптировано к нашей круглой 44px кнопке (как в прототипе). */ .gbh-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 4px; background: var(--blue-600); border: 1px solid var(--white); border-radius: var(--radius-pill); color: var(--white); font-size: 10px; } /* ПОСЛЕДНИЕ ЧЕТВЕРО (gbppl-icon-consumers-1, 28.08). Сайтовый бар свои круглые кнопки отдал организму (`.gb-btn--icon`, шапка файла); здесь класс остался ради портальной планки, где глиф носит ТИХИЕ чернила Zinc 500 -> Zinc 700, а такой цветовой семьи у организма нет и волна её не выдумывала. Числа те же, что у организма: круг 44 (--icon-button-size = --gb-btn-icon-size), радиус круга, ховер --v1-ink-hover; расходится только длительность, и она тоже уйдёт вместе с последним потребителем. */ .gbh-icon-button { position: relative; width: var(--icon-button-size); height: var(--icon-button-size); display: grid; place-items: center; flex: 0 0 auto; padding: 0; background: transparent; border: 0; border-radius: var(--radius-circle); color: var(--zinc-900); /* Длительность живого глифа (LIVE 24.08: color .3s ease-in-out); подложка — v1-канон прототипа, живой пары у неё нет. */ transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1); } .gbh-icon-button:hover { background: var(--v1-ink-hover); } /* Бейджу корзины нужна система координат, и организм её не даёт: круглая кнопка ничем не позиционирована. Одна строка по АДРЕСУ (глиф в кармане шапки), не по имени. */ .gbh-actions .gb-btn--icon { position: relative; } /* ============================================================ СТУПЕНИ СХЛОПЫВАНИЯ — ПЕРЕСНЯТЫ С ЛАЙВА 2026-08-27 (gbppl-header-fit-1) ------------------------------------------------------------ Живой бар (замер 360..1920, см. шапку .gbh-bar): нав уходит ЦЕЛИКОМ ниже 1024 (lg), на его место встаёт бургер 30x40, а правая пара кнопок остаётся до 640. В полосе 1024..1279 нав есть, но живёт УПЛОТНЁННЫМ ритмом: поля пункта 8 вместо 16, паддинг ссылки 16px 8px вместо 16px, кегль 14. С 1280 ритм раскрывается: кегль 16, поля 16, паддинг 16. ДВА ОСОЗНАННЫХ ОТКЛОНЕНИЯ, и оба про одно: НАШ ПРАВЫЙ КАРМАН ШИРЕ ЖИВОГО. У лайва там три предмета (Book a meeting, Start Gifting, корзина = 337 при 1024), у нас четыре на сайте (плюс точка поиска = 373) и пять на каталоге (плюс точка аккаунта из моста = 429). Разница 36 и 92 пикселя, и она не сходится ни одним ритмом: при 1024 наву остаётся 332px, а его голые лейблы без единого паддинга уже 367. 1) НАВ УХОДИТ НИЖЕ 1280, а не ниже 1024. Живой ответ на тесноту тот же (первым уходит нав), просто наша полоса кончается на порог раньше. Кнопки и точки остаются, как у лайва: карман встаёт к правому краю (justify-self). 2) ПОЛЯ ПУНКТА 8 ДЕРЖАТСЯ ДО 1440, а не до 1280. Кегль и паддинг живые (16), сжаты только внешние поля: 48 между лейблами вместо 64. Без этого каталог с пятью предметами не влезает в 1280 (1285.6 против 1265 доступных). ============================================================ */ /* gbppl-studio-bar-1, 28.08: исключение studio-бара из этой ступени СНЯТО. Оно стояло по одной причине — «его нав помещается и без сжатия» — а с центровкой нава по оси окна (ниже) перестало быть безобидным: при полях 16 замок 313.6 и нав 573.8 не оставляли на правую дорожку столько же, сколько занимает левая, и на 1280 нав вставал на 24px правее оси. Поля 8 до 1440 отдают наву те самые 48px, и ось сходится с 1233 (замер 28.08). Ритм у семьи планок теперь один, а не один плюс исключение. */ @media (max-width: 1439px) { .gbh-bar .gbh-navitem, .gbh-bar .gbh-link { margin: 0 8px; } } @media (max-width: 1279px) { .gbh-bar:not(.gbh-bar--studio) .gbh-nav { display: none; } /* Нав ушёл из сетки — третья дорожка осталась бы пустой, а зазор перед ней всё равно бы считался, и карман встал бы на 32px левее поля. Дорожек становится две, карман прижимается к краю (тот же приём, что у бара хаба ниже). С gbppl-demo-fixes-1 это ступень планки БЕЗ бургера: рукописный сайтовый бар live/portal.html. Планки с бургером переопределяют её ниже, в разделе «ступени ширины». */ .gbh-bar:not(.gbh-bar--studio) { grid-template-columns: 168px minmax(0, 1fr); } .gbh-bar:not(.gbh-bar--studio) .gbh-actions { justify-self: end; } } /* Ступень 1279 (нав в бургер) бар студии НЕ читает: его нав это три коротких имени (Live / Sandboxes / Design System), он помещается и на 1024, и собственная ступень у него была и осталась 900 (ниже). Ступень 1440 (поля пункта 8) он с 28.08 читает вместе со всеми. */ /* Минимальный мобильный фолбэк, перенос из прототипа один в один (@media max-width 900px): меню и CTA уходят, знак ужимается до 126x42, сетка бара теряет фиксированную брендовую колонку. Бар держит 80px и здесь: лайв читает 80 на каждой ширине (harvest public-home 2026-08-17). Живая мобильная шапка (бургер, 144x48 знак на 360) не переносилась и в прототип: фолбэк свой, felt values (провенанс прототипа). */ @media (max-width: 900px) { /* Две дорожки, а не три: пустая третья уносила правый карман на ширину зазора от поля страницы (замер 360: кромка 313 при поле 329). Сайтовый бар на этой ширине нава уже не носит, у бара студии колонки переопределены ниже своим модификатором. */ .gbh-bar { gap: 16px; } /* Тот же вес 0-2-0, что у ступени 1279 выше, и позже по тексту: иначе брендовая дорожка осталась бы 168 под знаком 126. Планку с бургером это правило тоже не касается — она переопределяет сетку ниже, на своей ступени 1279. */ .gbh-bar:not(.gbh-bar--studio) { grid-template-columns: auto minmax(0, 1fr); } .gbh-nav { display: none; } .gbh-brand { width: 126px; height: 42px; } /* Адрес, а не имя: кнопки уходят, глифы остаются. :not(--icon) с gbppl-icon-consumers-1: глифы теперь тоже .gb-btn, а правило всегда значило «кнопки уходят, ГЛИФЫ ОСТАЮТСЯ». Без оговорки лупа исчезала бы на 390, где она стояла всегда. С gbppl-demo-fixes-1 ЗДЕСЬ ОСТАЛИСЬ ТОЛЬКО ПЛАНКИ БЕЗ БУРГЕРА: студийная (замок LOCK), портальная и рукописная сайтовая копия в live/portal.html. Планка с бургером отпускает кнопки на ступень 1023, и там им есть куда уйти. Оговорка обязана быть здесь и по второй причине: имя `.gb-btn` накрыло бы и пару кнопок ВНУТРИ бургер-меню, а это ровно те, ради которых всё затевалось. */ .gbh-bar:not(:has(.gbh-burger)) .gb-btn:not(.gb-btn--icon), .gbh-pbar .gb-btn:not(.gb-btn--icon) { display: none; } } /* ============================================================ ВАРИАНТ: STUDIO BAR (gbppl-hub-7, Тон 2026-08-23) ------------------------------------------------------------ Тон, 23.08: «почему для хаба не используем те же стили? Навигация не такая, как навигация в GildedBox. Мы должны использовать те же компоненты и стили, что на лайве». Хаб (site\index.html) носил самодельную планку: 64px вместо 80, нав 13px Zinc 500 sentence-case вместо живых 14/16 Inter 500 UPPERCASE ls 0.5. Теперь он носит ЭТОТ файл — .gb-header, .gbh-bar, .gbh-nav, .gbh-link, .gbh-actions и контурную .gb-btn без единой перемеренной цифры. Компонент взять целиком нельзя: его шаблон (header.js) жёстко несёт меню лайва Gifts/Customize/Portal/Explore и правую пару Book a Meeting / My Portal, слотов и атрибутов набора у него нет. Поэтому хаб собран НА КЛАССАХ этого файла, а не на копии его правил. Своего здесь ровно три вещи, и они живут тут, чтобы у хаба не заводилось приватных двойников хедерных правил: 1. ЗАМОК (знак | волосок | слово) — анатомия портального .pth-lock из live\portal.html (gbppl-portal-header-2, Тон 19.08: волосок 30px, мерянный по слову, не по знаку; слово в eyebrow-голосе, но на ступень крупнее — 14, оно называет приложение). portal.html пока держит свою копию этих правил (файл автономный, без внешних стилей); её нужно свести на эти классы, когда тот бар тронут снова. 2. АКТИВНОЕ состояние нав-линка. У лайва его НЕТ — живой нав никогда не отмечает страницу, на которой ты стоишь, — так что значение наше: Blue 600, потому что активность это СОСТОЯНИЕ (Тон-5). Инертно для лайв-страниц: класса .is-active никто из них не носит. 3. Своя сетка бара: замок шире 168px знака, под который нарезана живая колонка 230px. ============================================================ */ /* Sticky носит кастом-элемент (см. верх файла); бар, собранный на классах, несёт позицию сам — иначе скроллспай в наве отмечает секцию, которую уже не видно. Тот же ранг 31. */ .gb-header--studio { position: sticky; top: 0; z-index: 31; } /* ------------------------------------------------------------ gbppl-studio-bar-1 — БАР СТУДИИ ВЫХОДИТ ИЗ ВРАППЕРА (Тон 28.08) ------------------------------------------------------------ Тон, 28.08, о шапке студийных страниц на примере витрины Oro: «Хедер Design Studio выглядит странно. Убрать его из нашего системного враппера и поместить по всей ширине с небольшими, но одинаковыми отступами слева и справа (как у левого меню), потому что визуальный баланс нарушен. Саму навигацию можно отцентровать. Сейчас название Design Studio читается как часть навигации, а я не вижу это так.» ЧТО ОН ВИДЕЛ (замер прибором 28.08, system/oro/index.html, headed Chrome). Бар носит в разметке .gb-container, и на широком экране контейнерный потолок уводит его от края: ширина 1700 бар 42..1642, левая кромка замка 66.5 ширина 1920 бар 0..1905, левая кромка замка 48 ширина 2026 бар 46..1966, левая кромка замка 93.8 <- Тон рельса Oro левая кромка ВСЕГДА 20 (padding рельсы) 93.8 против 20 в одной строке взгляда — это и есть «баланс нарушен». Поэтому у бара СВОЯ мера, а не мера контейнера: сам .gb-container не трогаем (он живая линейка сайта, ловушка 16), а перебиваем его ровно на этом баре весом 0-2-0. 1. ПО ВСЕЙ ШИРИНЕ. max-width: none снимает потолки 1600/1920; поля --space-16 / --space-24 с 768 — те же две нижние ступени, что берёт сам контейнер, а ступень 48 с 1920 НЕ берётся: Тон просил «небольшие», а рельса слева стоит на 20 и с шириной не растёт. Остаток 4px до рельсы не наш: 20 у .oro-rail (oro.css) не ступень шкалы, выпрямить её до 24 должна волна витрины; 24 — ближайшая ступень и она же поле контейнера. 2. НАВ ПО ОСИ ОКНА. Дорожки minmax(max-content, 1fr) / auto / minmax(max-content, 1fr): центр держит нав, боковые дорожки делят остаток поровну, и середина нава встаёт на ось содержимого, хотя замок (~314) вчетверо тяжелее LOCK (~76). Голое 1fr auto 1fr тут не годится: автоминимум fr-дорожки это min-content, и на 1200..1330 сетка отбирала у замка его законные 314 и ЛОМАЛА слово на две строки (замер 28.08: высота слова 24 вместо 12 на всех ширинах до 1340). max-content в дне дорожки это запрещает; там, где остатка на две равные дорожки не хватает (ниже 1233), бар сам раскладывается как раньше — замок по содержимому, нав сразу за ним, LOCK у правого поля, без переноса и без скролла. 3. ЗАМОК НЕ ЧАСТЬ НАВА. Зазор до нава задаёт теперь дорожка, а не gap 32: на 1280 это 32 -> ~56, на 1920 ~282, на экране Тона ~336. Голос слова — ниже, у .gbh-lock__word. Сверка после (system/oro/index.html, headed Chrome, 28.08), центр нава против оси содержимого document.documentElement: 1233 d +0.20 1280 d +0.25 1440 d -0.17 1600 d -0.02 1920 d +0.15 2026 d +0.25 2560 d +0.07 и левое поле бара 24 = правое поле бара 24 на каждой из них. ------------------------------------------------------------ */ .gbh-bar.gbh-bar--studio { max-width: none; padding-left: var(--space-16); padding-right: var(--space-16); grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); } @media (min-width: 768px) { .gbh-bar.gbh-bar--studio { padding-left: var(--space-24); padding-right: var(--space-24); } } /* Дорожка шире замка на всём, что выше 1234 (на 1920 она 610 при замке 314). Без этого замок растягивался бы на всю дорожку и ссылка на хаб собирала бы клики с трети бара. */ .gbh-bar--studio .gbh-lock { justify-self: start; } /* Правый карман у края и на трёх дорожках, и на двух дорожках мобильной ступени ниже. Одно правило на обе. */ .gbh-bar--studio .gbh-actions { justify-self: end; } /* Бар хаба: тот же studio-бар БЕЗ нава (gbppl-hub-13, Тон 25.08: «может нам убрать хедер или переделать его на Хабе, именно только на Хабе? Он выглядит немножко misleading»). Нав не спрятан, а не написан: на index.html три имени стоят на трёх дверях под баром, и повторять их сверху нечем. Внутри комнат (sandboxes.html, витрина Oro) нав остаётся как был. Модификатор нужен ровно из-за одного: в сетке остались два ребёнка, и без него действия сели бы во вторую колонку (1fr) и прижались к центру. Средняя дорожка держит пустоту, замок слева, LOCK справа, высота бара та же --header-h. Ничего нового, кроме раскладки. Аддитивно: только этот селектор. gbppl-studio-bar-1: вес поднят до 0-2-0, потому что столько же теперь весит сетка studio-бара выше; порядок в файле решает, и правило хаба стоит позже. Дорожек по-прежнему две: центровать на хабе нечего, нава нет. */ .gbh-bar.gbh-bar--studio-hub { grid-template-columns: auto 1fr; } .gbh-bar--studio-hub .gbh-actions { grid-column: 2; justify-self: end; } .gbh-lock { display: inline-flex; align-items: center; gap: 16px; flex: 0 0 auto; text-decoration: none; } /* Знак в коробке .gbh-brand — 168x56, ни одного нового размера. */ .gbh-lock__mark { display: block; width: 168px; height: 56px; } .gbh-lock__rule { width: 1px; height: 30px; background: var(--zinc-300); flex: 0 0 auto; } .gbh-lock__word { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; color: var(--zinc-500); } /* gbppl-studio-bar-1, Тон 28.08: «название Design Studio читается как часть навигации, а я не вижу это так». Слово стояло на 14 — ступенью КРУПНЕЕ роли Eyebrow, потому что портальный замок (Тон 19.08) им называет приложение. В баре студии рядом стоят три пункта нава, тоже капсом, 14 и 16 с 1280, и на этой ступени слово читалось четвёртым пунктом. Возвращаем его в роль 44 Eyebrow — ЕДИНСТВЕННУЮ капс-подпись системы (Тон 19.08), теми же токенами, что берёт .gb-eyebrow: 12 / 600 / .12em / Zinc 500. Ни одного нового числа; тише пунктов и по кеглю, и по цвету (Zinc 500 против Zinc 900). Замок остаётся ссылкой на хаб (это дверь, а не украшение) — но вида пункта у него нет и не было: ни подчёркивания, ни ховера .gbh-link, ни .is-active. Второй половиной жеста работает сетка выше: между словом и навом теперь дорожка, а не gap 32. Область правила ровно .gbh-bar--studio: тот же .gbh-lock__word носит портальный бар (live/portal.html, слово «Portal»), и он линкует ЭТОТ файл — там 14 остаётся. */ .gbh-bar--studio .gbh-lock__word { font-size: var(--eyebrow-size); } /* Активная секция. Ховер не переопределяем: opacity 0.8 — один и тот же жест для каждого линка бара, активный не исключение. */ .gbh-link.is-active { color: var(--blue-600); } @media (max-width: 900px) { /* Компактная ступень замка — та же пара 126x42, что берёт .gbh-brand, волосок 24 (пропорция портального бара). */ .gbh-lock__mark { width: 126px; height: 42px; } .gbh-lock__rule { height: 24px; } .gbh-lock__word { font-size: 12px; } /* У живого бара на этой ширине кнопки складываются в бургер; у studio-бара бургера нет, а LOCK — единственная дверь назад к замку, поэтому он остаётся. Селектор 0-2-0 бьёт .gbh-bar .gb-btn { display: none } той же медиа. */ .gbh-bar--studio .gbh-actions .gb-btn { display: inline-flex; } /* gbppl-studio-bar-1. Нав на этой ступени скрыт (.gbh-nav выше в этой же медиа) — и третья дорожка оставалась пустой, а зазор перед ней всё равно считался: LOCK стоял на 16px левее правого поля (замер 390: правая кромка 343.2 при поле 359.2). Тот же приём, что у сайтового бара на 1279 и 900: дорожек две, карман к краю. Слово на этой ступени берёт свой компактный кегль 12 из правила выше — он же кегль Eyebrow, так что на мобильном ничего не меняется. */ .gbh-bar.gbh-bar--studio { grid-template-columns: 1fr auto; } } /* ============================================================ GIFTS: ВЫПАДАЮЩЕЕ МЕНЮ (gbppl-gifts-menu, Тон 24.08) ------------------------------------------------------------ Тон, 24.08: «сабменю должно работать везде, где стоит актуальный хедер сайта, и выглядеть один в один с лайвом». Каждая цифра снята прибором с https://www.gildedbox.com, ширина 1920, 24.08 (getComputedStyle + getBoundingClientRect; JSON снятия — scratchpad hub\gifts\live-submenu-measure.json). Разметка и поведение задокументированы в header.js. Провенанс ниже помечен LIVE 24.08; там, где живое значение совпало с токеном, стоит токен, а не литерал: панель rgba(0,0,0,.8) + blur 3px, тень 0 8px 24px 3px rgba(0,46,76,.05), радиус 0, паддинг 32, w-max, absolute top 74 / left 0, z 1001 колонки flex, gap 48, min-width 600 заголовок Inter 600, 12/16, ls .6, uppercase, #a1a1aa (= --zinc-400 в один в один), mb 16, pb 8 пункт Inter 400, 14/20, ls .2, белый, sentence-case, паддинг 5px 0, шаг между пунктами 4 ховер пункта цвет -> #bea042 (= --gold-beta), opacity .8. ПЕРЕХОД ТОЛЬКО ПО ЦВЕТУ: у лайва transition-colors 300ms cubic-bezier(.4,0,.2,1), а hover:opacity-80 в список переходов не попадает и щёлкает мгновенно. Золото здесь не новый акцент, а снятое живое значение (BRAND.md про новые золотые элементы). кнопки та же лестница .gb-btn --medium (36/42/48, пад 8/20, лейбл 11/600/ls 1) — лайв берёт ровно те же классы; своё здесь только инвертирование под тёмную панель и зазор 12 между кнопками. появление @keyframes showBlock лайва: 200ms linear forwards, opacity 0->1 + translateY(-10px)->0. Ветки prefers-reduced-motion НЕТ намеренно: фирменный моушен играет всегда (Тон-7). Мобильная ступень своя: с 900px .gbh-nav уходит целиком, и меню уходит вместе с ним. Живого мобильного выдвижного листа (панель на весь экран, шеврон, «назад») мы не переносим — мобильной шапки у прототипа нет в принципе (см. фолбэк выше). ============================================================ */ /* Пункт-обёртка. Живой li несёт mx-2/xl:mx-4 сам, а ссылка внутри только padding: коробка li ровно равна коробке ссылки (снятие: обе x 263.99, w 81). Повторяем расстановку — иначе left: 0 панели уехало бы на 16px левее живого. */ .gbh-navitem { position: relative; display: inline-flex; align-items: center; margin: 0 16px; } .gbh-navitem > .gbh-link { margin: 0; } /* Gifts стал ссылкой, а не кнопкой. Тот же антидот, что держит a.gb-btn в button.css: shell.css несёт body.gb-demo a { color: inherit } весом 0-1-2, поэтому голого a.gbh-link (0-1-1) мало — рядом стоит 0-2-2. Подчёркивание живой нав-пункт не носит. */ a.gbh-link, body.gb-demo a.gbh-link { color: var(--zinc-900); text-decoration: none; } /* Панель. top 74 — живая константа: планка 80, ссылка стоит на 12 сверху, 12 + 74 = 86 = низ планки + 6. z 1001 тоже живой; он внутри стекового контекста самого хедера (z 31), так что наружу не выстреливает. */ .gbh-menu { display: none; position: absolute; top: 74px; /* LIVE 24.08 */ left: 0; z-index: 1001; /* LIVE 24.08 */ width: max-content; padding: 32px; /* LIVE 24.08 */ background: rgba(0, 0, 0, 0.8); /* LIVE 24.08, вне токенов */ backdrop-filter: blur(3px); /* LIVE 24.08 */ box-shadow: 0 8px 24px 3px rgba(0, 46, 76, 0.05); /* LIVE 24.08, вне токенов */ border-radius: 0; /* LIVE 24.08: rounded-none, панель не скруглена */ transform-origin: top left; text-align: left; } .gbh-navitem--menu[data-open="true"] .gbh-menu { display: block; animation: gbh-menu-in 200ms linear forwards; /* LIVE 24.08: showBlock */ } @keyframes gbh-menu-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Мостик над панелью. Разрыв между низом ссылки (68) и верхом панели (86) курсор проходит по воздуху; живой ::before кроет 30px над панелью и удерживает наведение на пункте. */ .gbh-menu::before { content: ''; position: absolute; top: -30px; /* LIVE 24.08 */ left: 0; width: 100%; height: 30px; /* LIVE 24.08 */ background: transparent; } .gbh-menu__cols { display: flex; gap: 48px; /* LIVE 24.08 */ min-width: 600px; /* LIVE 24.08 */ } .gbh-menu__title { margin: 0 0 16px; /* LIVE 24.08 */ padding: 0 0 8px; /* LIVE 24.08 */ color: var(--zinc-400); /* LIVE 24.08 #a1a1aa — токен один в один */ font-size: 12px; font-weight: 600; letter-spacing: 0.6px; line-height: 16px; text-transform: uppercase; text-align: left; } .gbh-menu__list { margin: 0; padding: 0; list-style: none; } .gbh-menu__list li + li { margin-top: 4px; } /* LIVE 24.08: space-y-1 */ /* Тот же антидот 0-2-2 (24.08): пункты панели — ссылки, и на страницах с body.gb-demo они наследовали Zinc 900 по тёмному. */ .gbh-menu__item, body.gb-demo a.gbh-menu__item { display: block; padding: 5px 0; /* LIVE 24.08 */ color: var(--white); font-size: 14px; font-weight: 400; letter-spacing: 0.2px; line-height: 20px; text-transform: none; text-decoration: none; transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1); /* LIVE 24.08 */ } .gbh-menu__item:hover { color: var(--gold-beta); /* LIVE 24.08 #bea042 — токен один в один */ opacity: 0.8; /* LIVE 24.08: не в списке переходов, щёлкает */ } .gbh-menu__actions { display: flex; flex-direction: column; align-items: flex-start; } .gbh-menu__actions .gb-btn + .gb-btn { margin-top: 12px; } /* LIVE 24.08 */ /* Контурная кнопка тёмной панели — это .gb-btn --medium --outline --inverse организма (белые чернила, белый волосок, ховер rgba(255,255,255,.2), всё LIVE 24.08). Своего правила ей больше не нужно: имена уехали в разметку header.js. */ /* ============================================================ ВАРИАНТ: ХЕДЕР НАД ВИДЕО (variant="transparent-dark", Тон 24.08) ------------------------------------------------------------ Тон, 24.08: «на живой главной GildedBox.com прозрачный хедер и все элементы белые. При скролле он становится белым и стандартным» и, отдельно: «хедер динамически меняется при скролле НЕ на всех страницах, а на определённых, где он лежит на видео». Тон, 24.08, вторая подача, дословно: «как только ты начинаешь скроллить, он становится тёмным стеклом — полупрозрачным и матовым. Но когда ты касаешься им следующей секции (белой), тогда он становится белым стеклом. Он залит не полностью: тоже полупрозрачный и матовый, но на белом фоне». ЗАМЕР 24.08 (headed Chrome, JSON — scratchpad hub\header\ live-header-measure.json, live-threshold.json, live-stage2.json, live-stage2b.json). У живой планки ТРИ ступени: 1 ПОКОЙ bg rgba(0,0,0,.01) (bg-black/[0.01]), ни тени, ни блюра. Все элементы белые: вордмарк через --logo-color:#ffffff, нав #ffffff, контурная кнопка белая, глиф белый. Book a Meeting синяя во всех трёх ступенях. 2 ТЁМНОЕ bg rgba(0,0,0,.85) + backdrop-blur(8px), тени нет, СТЕКЛО элементы остаются белыми. ПОРОГ: scrollY >= 50 ровно (49 = прозрачный, 50 = тёмный; обратный ход тот же, гистерезиса нет). 3 БЕЛОЕ bg rgba(255,255,255,.9) + backdrop-blur(6px) — один СТЕКЛО в один наши --header-glass и стандартный блюр бара, ничего нового мерить не пришлось. Ink возвращается стандартный: нав #18181b, вордмарк #000000, глиф #131313, контурная кнопка Zinc 900. Тень своя: 0 -16px 26px rgba(0,0,0,.4) — направлена ВВЕРХ и при top:0 не видна вовсе (внешняя тень режется по коробке, а вверх уходит за экран). Перенесена как есть, помечена LIVE. ПОРОГ 2-3 ГЕОМЕТРИЯ, НЕ ЧИСЛО. Планка белеет ровно тогда, когда её нижний край КАСАЕТСЯ низа героя. Проверено тремя высотами окна (свип 1px): vh 1080, герой 1081 -> перелом на 1003 vh 900, герой 900 -> перелом на 821 vh 700, герой 700 -> перелом на 621 каждый раз = высота героя минус 80 (высота бара). Значит порог считается от геометрии героя, и пикселей здесь не хардкодим: JS сравнивает низ секции с низом бара (header.js). ПЕРЕХОД transition-colors 500ms cubic-bezier(.4,0,.2,1) на всех переключениях; блюр в списке переходов не участвует и щёлкает. Вариант ОПТ-ИН: без атрибута ни одно правило этого блока не включается и планка байт-в-байт прежняя. Позиционирование вариант не трогает — sticky и ординаты остаются общими. Ветки prefers-reduced-motion нет намеренно (Тон-7). ============================================================ */ /* 0-2-0, чтобы наверняка перебить lg-правило стекла в начале файла. */ .gb-header.gb-header--transparent { background: rgba(0, 0, 0, 0.01); /* LIVE 24.08 */ backdrop-filter: none; box-shadow: none; transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1); /* LIVE 24.08 */ } .gb-header.gb-header--transparent.is-scrolled { background: rgba(0, 0, 0, 0.85); /* LIVE 24.08 */ backdrop-filter: blur(8px); /* LIVE 24.08 */ box-shadow: none; /* LIVE 24.08: тени нет на этой ступени */ } /* Ступень 3: планка коснулась белой секции. Ground и блюр — ровно те, что носит стандартный бар (см. начало файла), поэтому здесь стоят те же токен и цифра, а не второе значение того же цвета. Живой класс: bg-[#fcfdfd] lg:bg-white/90 lg:backdrop-blur-[6px] — до 1024 грунт плотный, стекло включается с lg; повторяем ту же ступень. */ .gb-header.gb-header--transparent.is-past-hero { background: var(--live-body); backdrop-filter: none; /* LIVE 24.08: тень направлена вверх и при top:0 невидима (внешняя тень режется по коробке), перенесена как есть. */ box-shadow: 0 -16px 26px rgba(0, 0, 0, 0.4); } @media (min-width: 1024px) { .gb-header.gb-header--transparent.is-past-hero { background: var(--header-glass); /* LIVE 24.08 rgba(255,255,255,.9) */ backdrop-filter: blur(6px); /* LIVE 24.08 */ } } /* Белый вордмарк. Живой знак — инлайновый SVG, красящий пути через --logo-color:#ffffff; наш стоит картинкой (), и переменная внутрь не проходит. Тот же самый файл знака (пути и id совпадают один в один, у нас fill #18181b), поэтому вместо второго ассета — фильтр: brightness(0) кладёт знак в чистый чёрный, invert(1) переворачивает в чистый #ffffff. Ровно тот цвет, что стоит на лайве, и ни одного нового файла. */ .gb-header--transparent .gbh-brand img { filter: brightness(0) invert(1); } /* Нав, глифы, контурная кнопка — белые. Пара селекторов на каждое правило по той же причине, что и в антидоте выше, только на ступень выше: цвет ссылок уже держит body.gb-demo a.gbh-link (0-2-2), и вариант обязан весить больше (0-3-2). */ .gb-header--transparent .gbh-link, .gb-header--transparent a.gbh-link, body.gb-demo .gb-header--transparent a.gbh-link { color: var(--white); } /* ГЛИФЫ В ПРОЗРАЧНОМ БАРЕ ТОЖЕ НЕ ПЕРЕКРАШИВАЮТСЯ ЗДЕСЬ (gbppl-icon-consumers-1, 28.08) — ровно та же операция, что контурная кнопка прошла с gbppl-button-2 и о которой сказано абзацем ниже. Круглая кнопка МЕНЯЕТ ЦВЕТОВОЙ МОДИФИКАТОР: --inverse над видео, --secondary на белом стекле, обе стороны переключает header.js в том же apply(). Значения не новые: белые чернила и ховер rgba(255,255,255,.2) наверху, Zinc 900 и --v1-ink-hover внизу — те же, что стояли здесь двумя правилами, просто теперь они сказаны в button.css по одному разу (пара .gb-btn--icon.gb-btn--inverse). */ /* КОНТУРНАЯ КНОПКА В ПРОЗРАЧНОМ БАРЕ НЕ ПЕРЕКРАШИВАЕТСЯ ЗДЕСЬ (gbppl-button-2). Раньше вариант дважды переписывал ей цвет и бордер — белым над видео и обратно Zinc 900 у низа героя, — и это была третья копия одних и тех же живых значений. Теперь она просто МЕНЯЕТ ЦВЕТОВОЙ МОДИФИКАТОР: --inverse над тёмным, --secondary на белом стекле. Переключает header.js там же, где ведёт .is-past-hero (одна строка в apply()), а значения обоих состояний живут в организме по одному разу. Значения те же самые: белые чернила, белый волосок, ховер rgba(255,255,255,.2) наверху и rgba(212,212,216,.2) внизу — всё LIVE 24.08, просто теперь сказано в button.css. */ /* Ступень 3, ink. Белые правила выше весят до 0-3-2, поэтому возвращение к стандартным чернилам идёт на ступень выше (0-4-2). Значения не новые: это те же самые, что носит бар на всех остальных страницах — вариант просто перестаёт их перекрывать. ДВА ОСОЗНАННЫХ ОТКЛОНЕНИЯ от лайва, оба унаследованы от стандартного бара и не заводятся здесь: живой вордмарк на белом стекле #000000 (наш ассет #18181b) и живой глиф #131313 (наш Zinc 900). Ровнять их надо у стандартного бара разом, а не в одном варианте. */ .gb-header--transparent.is-past-hero .gbh-brand img { filter: none; } .gb-header--transparent.is-past-hero .gbh-link, .gb-header--transparent.is-past-hero a.gbh-link, body.gb-demo .gb-header--transparent.is-past-hero a.gbh-link { color: var(--zinc-900); } /* ============================================================ ВАРИАНТ: PORTAL BAR (gbppl-portal-system, 2026-08-25) ------------------------------------------------------------ Планка САМОГО ПОРТАЛА — второй бар, живущий рядом с сайтовым. Решение встречи Тона и Марка 2026-08-19: портал это ОТДЕЛЬНОЕ ПРИЛОЖЕНИЕ со своей идентичностью, поэтому он перестаёт носить хром публичного сайта. Отсюда две обязанности бара: человек всегда видит, ГДЕ он (замок GildedBox | Portal слева) и всегда имеет дверь назад на сайт (Go to website справа — дверь в другое здание, НЕ логаут; логаут остаётся внизу сайдбара). Правила ниже перенесены СЛОВО В СЛОВО из live\portal.html, где они прожили с 19.08 (маркеры gbppl-portal-header, -2, -3): та страница была единственной live-страницей без системных CSS и держала копии хедерных правил у себя. 25.08 она стала потребителем системы, и её собственный бар переехал сюда — к владельцу .gbh-*. Ни одна цифра при переезде не изменилась (сверка до/после прибором, 2 013 058 свойств). ЧТО ПРИШЛО ОТ СИСТЕМЫ, а не переписано заново: .gbh-lock (+__mark/__rule/__word) замок. header.css уже нёс его как атом, снятый С ЭТОГО САМОГО бара для studio-планки, и просил свести портал на эти классы (задача записана в блоке STUDIO BAR). Сведено. Портальная подварианта stack добавлена сюда же как .gbh-lock--stack. .gb-btn --medium кнопка BOOK A MEETING: вся лестница medium и лейбл-спан приходят с классом организма (до 26.08 это была .gbh-cta, те же цифры под старым именем). Синяя заливка у владельца, поэтому портальная перекраска .pth-cta удалена как безвредный дубль — она говорила ровно то же самое. .gbh-icon-button круг 44px, глиф 22.8, ховер-подложка. .gbh-count бейдж корзины, без единой поправки. СВОЁ здесь ровно четыре вещи: 1. Грунт. Бар СПЛОШНОЙ БЕЛЫЙ (Тон 19.08: «залитый белый, лёгкая тень снизу»), стекла lg+ у него нет: из пары живых хедеров тень носит именно залитый, а портал, заявляющий свою идентичность, не должен показывать страницу, уезжающую под него. Тень и высота — те же --shadow-header и --header-h, что у сайтового бара. 2. Ряд: не сетка 230/1fr/auto сайтового бара, а flex со space-between — слева замок, справа кластер. 3. .gbh-away, тихая дверь наружу. Sentence case против капса кнопок: это предложение, и разница регистра здесь и есть то, что отличает ссылку от контрола. 4. Порядок и краски кластера (gbppl-portal-header-3, Тон 19.08, третий проход): Go to website -> BOOK A MEETING -> поиск -> помощь -> КОРЗИНА в самом углу. Утилиты жмутся к краю, кнопка следующая, тихая дверь стоит БЛИЖЕ ВСЕГО К СЕРЕДИНЕ. Корзина закрывает ряд в углу: сильнейшая позиция для единственного контрола, ведущего в чекаут, и максимальное расстояние между её синим бейджем и синей кнопкой (два синих разного размера рядом читаются как случайность, не система). Глифы отдыхают на чернилах своей иконосемьи (#71717A = Zinc 500) и темнеют по ховеру. Гейт ?pth=1 и правило «один хром за раз» остаются НА СТРАНИЦЕ: это переключатели прототипа, а не часть компонента. ============================================================ */ /* Бары, собранные НА КЛАССАХ, без кастом-элемента , несут позицию сами (та же причина, что у .gb-header--studio выше; тот же ранг 31). Портальная страница собирает так ОБА своих бара, поэтому модификатор общий, а не второй именной. */ .gb-header--sticky { position: sticky; top: 0; z-index: 31; } /* ============================================================ ТЕНЬ ПОРТАЛЬНОГО БАРА ЧИТАЕТСЯ НА БЕЛОМ gbppl-checkout-header-1 (17.09) ------------------------------------------------------------ Тон, увидев чекаут после того, как страница отдала воздух белому: «хедер потерял тень внизу — у хедера должна быть тень». Прибор согласен наполовину: тень объявлена и была объявлена всегда (--shadow-header, 0 4px 8px rgba(102,102,102,.05)), но её альфа снята с ГРУНТА ПОРТАЛА — тело портальной страницы Zinc 100 — и на чистом белом пять процентов серого уходят под порог. Тень не пропала; пропал фон, на котором её мерили. НОВОГО ЗНАЧЕНИЯ НЕ ЗАВОДИМ. Берём ту тень дома, которая уже замерена и чья строка провенанса сама называет портальный хром: --shadow-card (tokens.css, «tailwind shadow-md, exact per live (prototype .gift-card, SYSTEM.md portal chrome)»). Направление то же, ход тот же, читается на обоих грунтах. ЭТО DECLARED, И ВОПРОС ТОНУ ОТКРЫТ: если --shadow-header устарел вообще (сайтовый бар теряет тень на белом ровно так же), поднимать надо сам токен — это волна по владельцу токенов с гейтом по всем страницам с баром. Здесь один носитель и одна строка. ============================================================ */ .gbh-pbar { position: sticky; top: 0; z-index: 31; background: var(--white); box-shadow: var(--shadow-card); } /* 80 на каждой ширине — тот же живой ответ, что у сайтового бара (harvest public-home 2026-08-17: 80 на всех тринадцати свипах). */ .gbh-pbar__row { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .gbh-pbar__actions { display: flex; align-items: center; gap: 12px; /* ритм .gbh-actions */ } /* Замок, подвариант stack: слово ПОД знаком, правые края по одной оси. Рукописный знак поднимается тонким выносным элементом слева и заканчивается тяжёлым хвостом «box» справа, поэтому слово по левому краю равняется в пустоту, а по правому — на настоящий край, и PORTAL читается подписью знака, а не второй колонкой с начала (gbppl-portal-header-2, Тон 19.08, второй проход). Знак берёт компактную пару 126x42, которая у бара уже есть, волоску нечего делить. */ .gbh-lock--stack { flex-direction: column; align-items: flex-end; gap: 2px; } .gbh-lock--stack .gbh-lock__mark { width: 126px; height: 42px; } .gbh-lock--stack .gbh-lock__rule { display: none; } .gbh-lock--stack .gbh-lock__word { font-size: 12px; } /* Go to website: самое тихое в баре, намеренно. Это дверь ИЗ приложения — её обязано быть видно и она обязана никогда не спорить со встречей. */ .gbh-away { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; padding: 8px 4px; font-size: 14px; font-weight: 400; letter-spacing: -0.1px; line-height: 1; color: var(--zinc-500); text-decoration: none; transition: color var(--mo-micro) var(--mo-move); } /* Тот же антидот 0-2-2, что держат .gb-btn и .gbh-link выше: shell.css несёт body.gb-demo a { color: inherit } весом 0-1-2. */ a.gbh-away, body.gb-demo a.gbh-away { color: var(--zinc-500); } .gbh-away:hover, body.gb-demo a.gbh-away:hover { color: var(--zinc-900); } .gbh-away svg { display: block; flex: 0 0 auto; } /* Глифы кластера. Круг, подложка и длительность — от .gbh-icon-button; своё здесь только чернила иконосемьи. */ .gbh-pbar__icon { color: var(--zinc-500); } .gbh-pbar__icon:hover { color: var(--zinc-700); } /* Бургер — ВИД, а не меню (бриф Тона 19.08: мобильной навигации в той волне не строили); появляется только в компактном баре. */ .gbh-pbar__burger { display: none; color: var(--zinc-900); } /* Компактный бар <=900: замок и бургер, больше ничего. Кнопке правило не нужно — она носит .gb-btn, а фолбэк в начале файла складывает .gbh-pbar .gb-btn на этой ширине. */ @media (max-width: 900px) { .gbh-away, .gbh-pbar__icon { display: none; } .gbh-pbar__burger { display: grid; } .gbh-lock--stack .gbh-lock__mark { width: 108px; height: 36px; } .gbh-lock--stack .gbh-lock__word { font-size: 11px; } } /* ============================================================ ВАРИАНТ: SIGNING IN THROUGH THE BAR (.gbh-bar--auth) gbppl-header-auth-1, 2026-08-28 ------------------------------------------------------------ Ton-16, verbatim: «Сейчас на лайве отвратительное решение: кнопка Start Gifting фактически даёт авторизацию и отправляет на портал... Это единственное, что мы точно не хотим повторять за текущим лайвом.» И там же: «Попробуем так сделать на сэндбоксе и посмотрим, как оно будет выглядеть.» ЭТО ПЕСОЧНИЦА. Ни одно правило ниже не читается без класса .gbh-bar--auth, который header.js ставит только на ?hdr=auth. Замер бара до и после волны на live/index и live/catalog, 1280 и 390, без ключа: 0 расхождений. ЧТО В КАРМАНЕ. Одна синяя кнопка и ряд глифов: Book a meeting · лупа · [корзина] · человечек-или-инициалы. Кнопки My Portal в баре НЕТ, она первым пунктом меню под инициалами: две кнопки, из которых одна на деле вход, это то самое «жрёт горизонтальное место». ТРИ СТУПЕНИ ШИРИНЫ (картина, утверждённая Тоном 28.08 12:58): >= 1280 нав в баре, как сегодня. 1024..1279 нав в бургере. Порог наш (ловушка 17: правый карман шире живого), новое здесь только то, что наву есть куда уйти, а не «нав исчезает». <= 1023 бургер, знак, угол. Book a meeting уходит из бара и становится ПЕРВОЙ СТРОКОЙ бургер-меню. БУРГЕР СТОИТ СЛЕВА НА ОБЕИХ СТУПЕНЯХ. Тон назвал сторону только для < 1024 («бургер слева, логотип»); одна сторона у одного контрола — системный ответ, и заодно ничто не перепрыгивает бар при переходе окна через 1024. ОДНА СЕМЬЯ ВЫПАДАШЕК. Меню аккаунта и бургер-меню — это .gbh-menu, та же тёмная плита, тот же вход 200ms и те же строки .gbh-menu__item, что у Gifts (Тон-6: вторая визуальная семья в том же углу и есть тот «разнобой», против которого Тон-16). Своего у модификаторов ровно три вещи: сторона привязки, плотность полей и отсутствие ховер-мостика (он у Gifts закрывает разрыв для КУРСОРА, а эти две панели открываются кликом, и мостик накрыл бы низ самой кнопки). ОБЩАЯ ЛИНИЯ ПАНЕЛЕЙ. Живая панель Gifts стоит на 86 от верха бара (top 74 от пункта высотой 56, центрированного в 80). Глиф — круг 44, центрированный в тех же 80, то есть его низ на 62; чтобы панель встала НА ТУ ЖЕ ЛИНИЮ, отступ под кнопкой = 86 - 62 = 24 = --space-24. Не число, а следствие: обе панели читаются как одна полка. ============================================================ */ /* Правый карман становится системой координат: под ним висят меню аккаунта и тихая строка, и обе привязаны к его правой кромке. */ .gbh-bar--auth .gbh-actions { position: relative; } /* ---- БУРГЕР -------------------------------------------------- */ /* Не вариантная деталь с gbppl-demo-fixes-1: бургер стоит в обоих барах (см. «ступени ширины» ниже), и правила у него общие. */ .gbh-burger { position: relative; display: none; align-items: center; } .gbh-burger__btn { flex: 0 0 auto; } /* ---- ЧЕЛОВЕЧЕК, КОТОРЫЙ СТАНОВИТСЯ ИНИЦИАЛАМИ ---------------- */ /* ОДНА кнопка с двумя лицами, а не две кнопки: Тон сказал «человечек СТАНОВИТСЯ кругом с инициалами», а подмена узлов ещё и роняла бы фокус посреди фразы. */ .gbh-account { position: relative; display: flex; align-items: center; } .gbh-account__btn { position: relative; } .gbh-account__glyph { display: grid; place-items: center; transition: opacity var(--mo-small) var(--mo-move), transform var(--mo-small) var(--mo-move); } .gbh-account__initials { position: absolute; top: 50%; left: 50%; width: var(--space-32); height: var(--space-32); display: grid; place-items: center; border-radius: var(--radius-circle); background: var(--zinc-900); color: var(--white); font-size: 12px; font-weight: 600; /* Организм ведёт кнопку как ТЕКСТОВУЮ: трекинг лестницы L и uppercase достаются всякому потомку. Инициалы не лейбл кнопки, а бейдж, и стоят по центру круга 32 — трекинг сдвинул бы их влево на пол-пикселя (gbppl-icon-consumers-1). */ letter-spacing: normal; line-height: 1; opacity: 0; transform: translate(-50%, -50%) scale(0.8); transition: opacity var(--mo-small) var(--mo-move), transform var(--mo-small) var(--mo-move); } .gbh-account__btn.is-known .gbh-account__glyph { opacity: 0; transform: scale(0.8); } .gbh-account__btn.is-known .gbh-account__initials { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Круг сам себе подложка: наведение красит его, а не 44px вокруг. */ .gbh-account__btn.is-known:hover { background: transparent; } .gbh-account__btn.is-known:hover .gbh-account__initials { background: var(--zinc-700); } /* ---- КОРЗИНА ПРИЕЗЖАЕТ ИЗ-ЗА ИНИЦИАЛОВ ----------------------- */ /* Отрицательное поле в первом кадре ровно равно зазору кармана (12), поэтому соседи не прыгают на старте, а ЕДУТ вместе с шириной. */ @keyframes gbh-cart-in { from { width: 0; margin-right: -12px; opacity: 0; transform: translateX(var(--space-8)) scale(0.8); } to { width: var(--icon-button-size); margin-right: 0; opacity: 1; transform: none; } } .gbh-bar--auth [data-gbh-cart].is-arriving { overflow: hidden; animation: gbh-cart-in var(--mo-medium) var(--mo-enter) both; } /* ---- ДВЕ ПАНЕЛИ СЕМЬИ .gbh-menu ------------------------------ */ .gbh-menu[data-open="true"] { display: block; animation: gbh-menu-in 200ms linear forwards; /* LIVE 24.08: showBlock */ } .gbh-menu--account, .gbh-menu--burger { top: calc(100% + var(--space-24)); /* см. «общая линия панелей» выше */ padding: var(--space-16) var(--space-24); } /* Мостик — только для наведения; кликовым панелям он накрывает низ их собственной кнопки. */ .gbh-menu--account::before, .gbh-menu--burger::before { content: none; } .gbh-menu--account { left: auto; right: 0; transform-origin: top right; } .gbh-menu--burger { left: 0; /* Три ступени шкалы: блочной кнопке нужна ширина, а max-content по четырём коротким словам дал бы 96px и «Book a Meeting» в две строки. */ min-width: calc(var(--space-64) * 3); } /* Строки-кнопки (Log out, мёртвые пункты нава) носят те же чернила и тот же ховер, что строки-ссылки: разметка разная, строка одна. */ .gbh-menu__item--btn { width: 100%; background: transparent; border: 0; text-align: left; cursor: pointer; font-family: inherit; } /* CTA бургера: свой блок над списком, ритм со шкалы. Это .gbh-menu__actions — та же колонка кнопок, что у панели Gifts на этой же плите (12 между кнопками, LIVE 24.08), поэтому у пары Book a Meeting + My Portal на Live нет ни одного своего числа. Адрес с gbppl-demo-fixes-1 = сама панель, а не вариант бара: бургер стоит в обоих. Вес 0-2-0 не косметика — он был нужен, пока класс жил на самой кнопке (`.gb-btn { display: inline-flex }` весит столько же, а button.css подключён ПОСЛЕ header.css на сайтовых страницах и ДО него на вендорном каталоге), и остаётся ровно тем же весом теперь, когда класс на обёртке. */ .gbh-menu--burger .gbh-menu__cta { display: none; margin-bottom: var(--space-16); } /* ---- ТИХАЯ СТРОКА -------------------------------------------- */ /* «На пару секунд появляется тихая строка». Висит ПОД УГЛОМ, а не по центру бара: фраза про инициалы и корзину, и то и другое в этом углу, а строка через весь бар читалась бы как баннер страницы. В раскладке не участвует (absolute), поэтому под хедером ничего не двигается, пока она на экране. Кегль 14 и Zinc 600 — вторичный голос системы (раздел 3 скилла). */ .gbh-flash { position: absolute; top: calc(100% + var(--space-24)); right: 0; margin: 0; /* Карман узкий (141px на 390), а абсолютный блок по умолчанию ужимается под НЕГО: строка ломалась на две и вторая уезжала под ярлык консоли (снято глазами на 390). max-content отвязывает ширину от кармана и даёт строке уйти влево, потолок держит её в полосе контейнера. */ width: max-content; max-width: calc(var(--space-64) * 5); color: var(--zinc-600); font-size: 14px; line-height: 1.5; text-align: right; opacity: 0; transform: translateY(calc(var(--space-8) * -1)); transition: opacity var(--mo-small) var(--mo-arrive), transform var(--mo-small) var(--mo-arrive); pointer-events: none; } .gbh-flash.is-in { opacity: 1; transform: none; } /* ---- СТУПЕНИ ШИРИНЫ ------------------------------------------ */ /* gbppl-demo-fixes-1 (29.08): три ступени перестали быть частью песочницы и стали ступенями САЙТОВОГО бара. Причина в отчёте прогона показа: без ключа ?hdr=auth бар ниже 1280 не давал навигации вообще — нав уходил (ловушка 17), а бургера у него не было. Тон 28.08 про эту же картинку: «бургер, лайв подтягивается». УСЛОВИЕ ЗДЕСЬ СТРУКТУРНОЕ, А НЕ ПОИМЁННОЕ: `:has(.gbh-burger)`. Ступени описывают планку, У КОТОРОЙ ЕСТЬ КУДА ДЕТЬ НАВ И КНОПКИ, и это ровно то, что решает, читать их или нет. Планки без бургера — студийная (свой нав из трёх имён, замок, своя ступень 900 выше) и рукописная сайтовая копия в live/portal.html — остаются на прежних ступенях выше по файлу, байт в байт. Список имён в :not() пришлось бы дописывать при каждой новой планке; структура дописывается сама. */ /* >= 1280: три дорожки, как у сегодняшнего бара. Своего правила у этой ступени нет и не нужно: бургер здесь display:none и в сетке не участвует, а `168px minmax(0,1fr) auto` объявлены у самого .gbh-bar один раз (ловушка 17). Вариант auth держал тут копию с весом 0-2-0; копия ушла вместе с песочницей. */ /* <= 1279: бургер · знак · карман. Зазор 16 — та же ступень, на которой стоит бар ниже 900; 32 между бургером и знаком читалось бы как две отдельные вещи. */ @media (max-width: 1279px) { .gbh-bar:has(.gbh-burger) { grid-template-columns: auto auto minmax(0, 1fr); column-gap: var(--space-16); } .gbh-bar:has(.gbh-burger) .gbh-burger { display: flex; } .gbh-bar:has(.gbh-burger) .gbh-actions { justify-self: end; } } /* <= 1023: кнопки уходят из бара в первый блок меню. На Live их две (Book a meeting и My Portal), в варианте auth одна — My Portal там живёт под инициалами. Адресуем именно карман: .gb-btn внутри бургер-меню тем же именем накрылся бы вместе с ними. */ @media (max-width: 1023px) { .gbh-bar:has(.gbh-burger) .gbh-actions .gb-btn:not(.gb-btn--icon) { display: none; } .gbh-bar:has(.gbh-burger) .gbh-menu--burger .gbh-menu__cta { display: flex; } } /* ---- ПРОЗРАЧНЫЙ БАР ------------------------------------------ */ /* Над видео чернила переворачиваются, ровно как у .gbh-icon-button выше: круг инициалов становится белым с тёмными буквами, тихая строка белой. Ниже героя всё возвращается. */ .gb-header--transparent .gbh-account__initials { background: var(--white); color: var(--zinc-900); } .gb-header--transparent .gbh-account__btn.is-known:hover .gbh-account__initials { background: rgba(255, 255, 255, 0.8); /* пара к ховеру глифа выше, вне токенов */ } .gb-header--transparent .gbh-flash { color: var(--white); } .gb-header--transparent.is-past-hero .gbh-account__initials { background: var(--zinc-900); color: var(--white); } .gb-header--transparent.is-past-hero .gbh-account__btn.is-known:hover .gbh-account__initials { background: var(--zinc-700); } .gb-header--transparent.is-past-hero .gbh-flash { color: var(--zinc-600); } /* ---- ВЕЖЛИВОСТЬ ---------------------------------------------- */ /* Тон-7 запрещает вежливые ветки ФИРМЕННОЙ хореографии (двери, стекло хедера). Здесь служебный микро-моушен состояния — смена лица, приезд корзины, приход строки, — и ему ветка положена. Сама строка при этом никуда не девается: она несёт СМЫСЛ, а не эффект, и просто появляется без хода. */ @media (prefers-reduced-motion: reduce) { .gbh-account__glyph, .gbh-account__initials, .gbh-flash { transition: none; } .gbh-bar--auth [data-gbh-cart].is-arriving { animation: none; } } /* ---- ДРОВЕР ВХОДА -------------------------------------------- */ /* gbppl-header-auth-2. Тело дровера — ЦЕЛИКОМ из auth.js: заголовок, Google, «or», поле, Continue, шаг кода, пароль, Resend, возврат. Своего облика у входа в хедере нет и не должно быть (Тон-6). Антидот preflight (ловушка 3) отсюда УШЁЛ вместе с самодельной формой: компонент несёт свой скоуп preflight сам (auth.css: gb-auth-flow *), и внутри дровера он работает так же, как на мерочной странице. Осталось ровно то, чем колонка СТРАНИЦЫ отличается от тела дровера, и ни строкой больше. Вес 0-2-0 против 0-1-0 у владельца: порядок загрузки не участвует. */ /* (1) Колонка на странице центрируется в экране: min-height calc(100vh - шапка) и воздух 96/128 сверху и снизу с 1280. В дровере высоту даёт тело дровера, а воздух у него свой, --space-24. */ .gbh-signin .gba-section { min-height: 0; padding-top: 0; padding-bottom: 0; } /* (2) Живая сетка Materialize: form.row с полями -8, ячейка с паддингом 8. На странице это часть 600-й колонки, а в теле дровера форма вылезает на 8px за правый край и даёт горизонтальную прокрутку (тело с overflow-y: auto считает overflow-x за auto). Жёлоб снимается с обеих половин сразу, иначе поле уедет на 8px от кромки. */ .gbh-signin .gba-form { margin-left: 0; margin-right: 0; } .gbh-signin .gba-field { padding-left: 0; padding-right: 0; }