/* Баннер «Установить ЛК на телефон». Выезжает сверху, поверх содержимого; уважает safe-area («чёлку») iPhone. Сверху — чтобы не перекрывать поля формы входа и кнопку «Войти». */ .lk-pwa-banner { position: fixed; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 1080; padding: 18px 16px 16px; border-radius: 16px; /* Фирменный градиент бренда + матовое стекло. Цвет берём из --brand-primary, поэтому у каждой организации баннер в её палитре. Фон полупрозрачный — иначе backdrop-filter нечего размывать. */ --lk-pwa-c1: var(--brand-primary, #43b77a); /* Фолбэк для Safari < 16.2 (нет color-mix) — сплошной фирменный цвет. */ background: var(--lk-pwa-c1); background: linear-gradient(135deg, color-mix(in srgb, var(--lk-pwa-c1) 82%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--lk-pwa-c1) 88%, black) 82%, transparent) 100%); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); color: #fff; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 8px 28px rgba(0, 0, 0, .22); transform: translateY(-140%); opacity: 0; transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .28s ease; } .lk-pwa-banner.is-visible { transform: translateY(0); opacity: 1; } @media (prefers-reduced-motion: reduce) { .lk-pwa-banner { transition: none; transform: none; /* Без transform баннер уже на месте, но ещё прозрачен: убираем его из потока событий, иначе он перехватывает клики по форме входа. */ visibility: hidden; } .lk-pwa-banner.is-visible { visibility: visible; } } /* Вертикальная компоновка: иконка сверху по центру, под ней текст и кнопки. */ .lk-pwa-body { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } /* Иконка и текст лежат на цветном градиенте — подложка светлая полупрозрачная. */ .lk-pwa-icon { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 1.35rem; } .lk-pwa-text { min-width: 0; } .lk-pwa-title { margin: 0 0 3px; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: #fff; } .lk-pwa-sub { margin: 0; font-size: .8125rem; line-height: 1.35; color: rgba(255, 255, 255, .82); } /* На iOS в подписи выделены названия пунктов меню Safari. */ .lk-pwa-sub strong { color: #fff; font-weight: 600; } .lk-pwa-actions { display: flex; gap: 8px; width: 100%; margin-top: 2px; } .lk-pwa-actions .lk-pwa-btn { flex: 1; /* кнопки делят ширину поровну */ } .lk-pwa-btn { min-height: 44px; /* touch target */ padding: 0 14px; border: 0; border-radius: 10px; font-size: .9375rem; font-weight: 600; white-space: nowrap; cursor: pointer; } /* На фирменном градиенте инвертируем: главная кнопка — белая. */ .lk-pwa-btn-primary { background: #fff; color: var(--lk-pwa-c1, #43b77a); } .lk-pwa-btn-ghost { background: rgba(255, 255, 255, .14); color: #fff; } .lk-pwa-btn-ghost:hover { background: rgba(255, 255, 255, .24); } .lk-pwa-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Тёмная тема — ЛК переключается через data-bs-theme на . */ [data-bs-theme="dark"] .lk-pwa-banner { border-color: rgba(255, 255, 255, .1); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); } [data-bs-theme="dark"] .lk-pwa-btn-ghost:hover { background: rgba(255, 255, 255, .08); } /* На широком экране баннер не растягивается на всю ширину. */ @media (min-width: 576px) { .lk-pwa-banner { left: 50%; right: auto; top: 20px; width: 460px; margin-left: -230px; /* центрируем: половина width */ } }