/* ══════════════════════════════════════════════════════════════════ dock.css — нижняя навигация ttt.tg (паттерн portal-market): 2 круглые кнопки + стеклянный остров из 3 табов со скользящим бегунком. Liquid Glass (класс .lg). Подключать на страницах с доком: Разметка и поведение — partials/dock.html (параметр dock_active). ══════════════════════════════════════════════════════════════════ */ /* ══ §ДОК НАВИГАЦИИ (patent portal-market): остров из 3 табов со скользящим бегунком + 2 круглые кнопки по краям. Liquid Glass: полупрозрачное тело + blur/saturate + многослойная inset-фаска (светлые блики сверху, тёмная глубина снизу) — как оригинальный таббар portals / iOS 26. ══ */ /* §источник света под доком: стеклу есть что преломлять (в portals под таббаром течёт контент; у нас низ экрана пустой — из-за этого blur выглядел как серая сплошная заливка). Виден и без backdrop-filter. */ .dock-light { position: fixed; left: 50%; bottom: -170px; width: 460px; height: 380px; margin-left: -230px; border-radius: 50%; background: radial-gradient(closest-side, rgba(41, 182, 246, 0.34), rgba(108, 93, 211, 0.16) 55%, transparent 75%); filter: blur(34px); z-index: 1; /* над амбиентом, под контентом */ pointer-events: none; } @supports (-webkit-touch-callout: none) { .dock-light { filter: none; opacity: .8; } } .dock { /* §центрирование БЕЗ transform: постоянный transform на родителе ломает backdrop-filter у детей в WebKit (остров выглядит серым) */ position: fixed; left: 0; right: 0; margin: 0 auto; width: fit-content; width: max-content; max-width: calc(100vw - 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 70; /* ниже модалок (81) и аккаунт-меню (90) */ display: flex; align-items: center; gap: 10px; } .lg { /* §liquid glass v2 (ближе к portals): прозрачнее, сильнее blur/saturate, яркая верхняя свет-линия + двойные блики фаски + линза + глубокая тень */ background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03) 38%, rgba(255,255,255,0) 58%), rgba(12, 14, 20, 0.26); backdrop-filter: blur(16px) saturate(185%); -webkit-backdrop-filter: blur(16px) saturate(185%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1.2px 0 -0.5px rgba(255, 255, 255, 0.36), inset 1.8px 3px 1px -2px rgba(255, 255, 255, 0.26), inset -2px -2.5px 1px -2px rgba(255, 255, 255, 0.16), inset -4px -10px 14px -8px rgba(255, 255, 255, 0.06), inset 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.32), inset 0 -8px 16px -8px rgba(0, 0, 0, 0.34), 0 1px 4px rgba(0, 0, 0, 0.40), 0 16px 40px rgba(0, 0, 0, 0.55); } .dock-island { position: relative; display: flex; border-radius: 99em; padding: 4px; } .dock-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 99em; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%), rgba(41, 182, 246, 0.15); box-shadow: inset 0 0 0 1px rgba(41, 182, 246, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 8px rgba(41, 182, 246, 0.18); transition: transform .24s ease, width .24s ease; will-change: transform, width; pointer-events: none; } /* §reset: WebKit рисует нативную СЕРУЮ кнопку поверх стекла — убираем appearance/background/border у всех кнопок дока */ :where(.dock-btn, .dock-round) { -webkit-appearance: none; appearance: none; background: transparent; border: 0; margin: 0; box-shadow: none; font: inherit; font-family: inherit; } .dock-btn { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 56px; padding: 0 16px; border-radius: 99em; color: rgba(255, 255, 255, 0.40); transition: color .2s ease, transform .15s ease; } .dock-btn svg { width: 22px; height: 22px; } .dock-btn span { font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; } .dock-btn.is-active { color: var(--accent-primary); } .dock-btn:active { transform: scale(0.92); } .dock-round { width: 54px; height: 54px; border-radius: 99em; display: grid; place-items: center; color: rgba(255, 255, 255, 0.70); transition: transform .15s ease, color .2s ease, box-shadow .25s ease; } .dock-round svg { width: 22px; height: 22px; } .dock-round:active { transform: scale(0.90); color: var(--accent-primary); } .dock-round.is-on { color: var(--accent-primary); box-shadow: inset 0 0 0 1px rgba(41, 182, 246, 0.45), inset 1.6px 2.6px 0 -2px rgba(255, 255, 255, 0.22), inset -2px -2px 0 -2px rgba(255, 255, 255, 0.13), inset -3px -9px 12px -6px rgba(255, 255, 255, 0.05), inset 0.3px 1px 4px 0 rgba(0, 0, 0, 0.30), inset 0 -7px 14px -7px rgba(0, 0, 0, 0.30), 0 1px 5px rgba(0, 0, 0, 0.35), 0 0 20px rgba(41, 182, 246, 0.25); } @media (max-width: 350px) { .dock-btn { padding: 0 10px; } .dock-btn span { font-size: 9px; } .dock { gap: 8px; } } /* iOS-фолбэк УБРАН: современный Telegram-iOS (WKWebView) поддерживает -webkit-backdrop-filter из .lg v2 — сплошная заливка портила стекло. Прежний незакрытый @supports заодно ломал пульс/авто-скрытие вне iOS. */ /* §D пульс таба «Маркет» при новых лотах (флаг ttt.market.pulse из SSE маркета, паттерн attention cycle portal-market: иконка + аура, цикл 4.2s) */ .dock-btn.dock-pulse { color: var(--accent-primary, #29b6f6); position: relative; } .dock-btn.dock-pulse svg { animation: dockPulseIcon 4.2s ease-in-out infinite; } .dock-btn.dock-pulse::after { content: ""; position: absolute; inset: 20%; border-radius: 99em; background: radial-gradient(circle, currentColor 0%, transparent 68%); opacity: 0; animation: dockPulseAura 4.2s ease-in-out infinite; pointer-events: none; } @keyframes dockPulseIcon { 0%, 100% { transform: translateY(0) scale(1); } 12% { transform: translateY(-1px) scale(1.09); } 24% { transform: translateY(0) scale(1); } } @keyframes dockPulseAura { 0%, 100% { opacity: 0; transform: scale(.7); } 12% { opacity: .28; transform: scale(1.15); } 30% { opacity: 0; transform: scale(1.4); } } /* §C авто-скрытие при скролле вниз (паттерн Telegram-клиента) */ .dock { transition: transform .3s ease, opacity .3s ease; } .dock.dock--hidden { transform: translateY(170%); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .dock { transition: none; } .dock-btn.dock-pulse svg, .dock-btn.dock-pulse::after { animation: none; } }