/* ========================================================================= * bf-topbar.css — ЄДИНА плаваюча верхня панель + ЄДИНА кнопка «Назад» * ------------------------------------------------------------------------- * Apple HIG / Liquid Glass. Верхній бар більше не «приклеєна квадратна * плита» на всю ширину — це плаваюча скляна капсула з м'яким радіусом, * як бічний сайдбар, але СТРИМАНІШЕ (менший відступ, менший радіус), * щоб не перетягувати увагу на себе. * * Складається з двох шарів (обидва — псевдоелементи, розмітка не змінюється): * ::before — «scroll edge» смуга на всю ширину, що розмиває контент, * який проїжджає у зазорі над/збоку капсули при скролі; * ::after — сама капсула (скло, радіус, грані, тінь левітації). * * ПІДКЛЮЧАТИ ОСТАННІМ у — щоб перекрити локальні стилі сторінки. * Розмітка: додати клас `bf-topbar` існуючому .top-bar / .top-nav / .hero-header. * Тонке налаштування на сторінці: style="--bf-tb-z: 3000". * ========================================================================= */ .bf-topbar { /* 16px = margin сайдбара, тож верхні краї бару і сайдбара збігаються */ --bf-tb-gap: 16px; /* вертикальний зазор «парения» */ --bf-tb-inset-l: 0px; /* зліва вже є 16px зазору від сайдбара */ --bf-tb-inset-r: 16px; /* справа — стільки ж, скільки у сайдбара зліва */ --bf-tb-radius: 20px; /* стримане закруглення (сайдбар — 28px) */ --bf-tb-z: 60; --bf-tb-blur: 30px; position: sticky; top: var(--bf-tb-gap); z-index: var(--bf-tb-z); margin: var(--bf-tb-gap) var(--bf-tb-inset-r) 0 var(--bf-tb-inset-l); padding: 12px 22px; border-radius: var(--bf-tb-radius); flex-shrink: 0; box-sizing: border-box; /* Сам елемент — лише позиційна оболонка: усе скло малюють псевдоелементи, інакше backdrop-filter батька «вбиває» backdrop-filter дітей. */ background: transparent; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; } /* ── Шар 1: scroll-edge смуга на всю ширину ─────────────────────────────── Перекриває зазор зверху і бічні «кишені», щоб контент, який скролиться повз капсулу, був розмитим, а не миготів гострими краями. */ .bf-topbar::before { content: ''; position: absolute; z-index: -2; top: -240px; /* обрізається контейнером */ bottom: 0; left: calc(-1 * var(--bf-tb-inset-l)); right: calc(-1 * var(--bf-tb-inset-r)); pointer-events: none; box-sizing: border-box; /* Тінт МІНІМАЛЬНИЙ: смуга має лише розмивати те, що проїжджає повз, а не замальовувати фон. Із щільним тінтом вона гасила амбієнтне підсвічування сторінки (у маркеті — помаранчеве) і на межі бару з'являвся видимий стик: зліва під сайдбаром світло є, а під баром його раптом немає. */ background: linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.05) 100%); backdrop-filter: saturate(150%) blur(20px); -webkit-backdrop-filter: saturate(150%) blur(20px); /* Смуга видима ЛИШЕ під час скролу. У спокої її немає взагалі — інакше на лівій межі контенту видно різкий стик: під сайдбаром амбієнтне підсвічування сторінки є, а під смугою воно приглушене й розмите. */ opacity: 0; transition: opacity 0.22s ease; /* Гасимо ВСІ грані: низ — щоб не було зрізу розмиття, боки — щоб не з'являлася вертикальна межа там, де смуга закінчується. */ -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent 100%), linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent 100%), linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); mask-composite: intersect; } .bf-topbar.is-scrolled::before { opacity: 1; } /* ── Шар 2: сама капсула ─────────────────────────────────────────────────── */ .bf-topbar::after { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; box-sizing: border-box; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.018) 48%, rgba(0, 0, 0, 0.14) 100%); backdrop-filter: saturate(190%) blur(var(--bf-tb-blur)); -webkit-backdrop-filter: saturate(190%) blur(var(--bf-tb-blur)); /* Заломлення світла на гранях скла — як у .nav-item сайдбара */ border: 1px solid rgba(255, 255, 255, 0.06); border-top: 1px solid rgba(255, 255, 255, 0.16); border-left: 1px solid rgba(255, 255, 255, 0.09); /* Стримана левітація: тінь щільна, але коротка — не «б'є в очі» */ box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.75), 0 2px 10px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* Вміст бару завжди над обома шарами */ .bf-topbar > * { position: relative; z-index: 1; } /* ── Планшет / мобільний ─────────────────────────────────────────────────── */ @media (max-width: 1000px) { .bf-topbar { /* сайдбар їде за екран — бар відступає з обох боків однаково */ --bf-tb-gap: 10px; --bf-tb-inset-l: 10px; --bf-tb-inset-r: 10px; --bf-tb-radius: 16px; --bf-tb-blur: 22px; padding: 10px 14px; } .bf-topbar::before { backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.16) 100%); } .bf-topbar::after { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); } } @media (max-width: 640px) { .bf-topbar { --bf-tb-gap: 8px; --bf-tb-inset-l: 8px; --bf-tb-inset-r: 8px; --bf-tb-radius: 14px; padding: 9px 12px; } } /* ── Модифікатор «тихий бар» ────────────────────────────────────────────── Для сторінок з великим заголовком у контенті (Apple large-title): на десктопі капсула проявляється лише коли контент прокрутили і в барі з'явився компактний заголовок. На мобільному бар видно завжди — там у ньому живуть бургер і кнопка «Назад». */ @media (min-width: 1001px) { .bf-topbar.bf-topbar-quiet::before, .bf-topbar.bf-topbar-quiet::after { opacity: 0; transition: opacity 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); } .bf-topbar.bf-topbar-quiet.is-condensed::before, .bf-topbar.bf-topbar-quiet.is-condensed::after { opacity: 1; } } /* ── Windows «Ефекти прозорості» вимкнено / Reduce Transparency ──────────── Тут не можна лишати blur: система прямо просить його прибрати. Але раніше капсула ставала майже суцільною плитою (alpha 0.96) — на сторінках з амбієнтним підсвічуванням (маркет із помаранчевим світлом) бар читався як чорний прямокутник, наліплений поверх сторінки. Тепер без blur, але напівпрозоро: світло сторінки проходить крізь бар, а контраст тексту лишається високим (фон під баром і так темний). Смуга ::before лишається щільною — це маскувальний шар, її задача саме ховати контент, що проїжджає під капсулою під час скролу. */ @media (prefers-reduced-transparency: reduce) { .bf-topbar::before, .bf-topbar::after { backdrop-filter: none; -webkit-backdrop-filter: none; } .bf-topbar::after { background: linear-gradient(180deg, rgba(24, 24, 32, 0.60) 0%, rgba(8, 8, 12, 0.68) 100%); } .bf-topbar::before { background: rgba(6, 6, 9, 0.94); } } /* ========================================================================= * ЄДИНА КНОПКА «НАЗАД» * Еталон — кнопка з гаманця (mycabinet → .wlt-back-bar). Один вигляд на * ВСІХ сторінках: маркет, статистика, профіль, турніри, пост, патруль… * * * Back * * ВАЖЛИВО: клас лише замінює вигляд НАЯВНИХ кнопок «Назад». Нові кнопки * на сторінки не додаються — на кореневих екранах (Панель, Спільнота, * Рейтинг, Маркет…) кнопки «Назад» немає і бути не повинно. * ========================================================================= */ .bf-back { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; padding: 8px 14px; border-radius: 18px; box-sizing: border-box; --bf-back-accent: #00d4ff; --bf-back-accent-rgb: 0, 212, 255; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); border-top: 1px solid rgba(255, 255, 255, 0.14); color: var(--bf-back-accent); font-family: 'Blastron', sans-serif; font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; } .bf-back i, .bf-back svg { font-size: 0.95em; line-height: 1; color: inherit; width: auto; margin: 0; } .bf-back:hover { background: rgba(var(--bf-back-accent-rgb), 0.15); border-color: rgba(var(--bf-back-accent-rgb), 0.3); color: #fff; box-shadow: 0 4px 15px rgba(var(--bf-back-accent-rgb), 0.2); transform: scale(0.96); text-shadow: none; } .bf-back:active { transform: scale(0.92); background: rgba(var(--bf-back-accent-rgb), 0.22); } .bf-back:focus-visible { outline: 2px solid rgba(var(--bf-back-accent-rgb), 0.6); outline-offset: 2px; } @media (max-width: 1000px) { .bf-back { padding: 9px 13px; font-size: 12px; border-radius: 16px; } } /* Дуже вузькі екрани — лишаємо тільки шеврон (текст не влазить поруч із назвою) */ @media (max-width: 359px) { .bf-back { padding: 9px 11px; gap: 6px; } .bf-back .bf-back-label { display: none; } }