/* ============================================================================ BanketPro · proto-overrides — финальный слой правок для прод-уровня. Подключается ПОСЛЕДНИМ на публичных страницах (после onboarding-tour.css). ============================================================================ */ /* ─── Hero: контент ВСЕГДА видим ───────────────────────────────────────────── Было: hero-элементы держали opacity:0 и проявлялись только entrance-анимацией. На части окружений анимация не доигрывала/обнулялась → заголовок, подзаголовок, CTA и превью оставались НЕВИДИМЫМИ (пустой первый экран). Решение по образцу upgrades.css кабинета: базовый opacity:1, а вход — анимация ТОЛЬКО по transform, поэтому видимость не зависит от анимации/JS/вкладки. */ .bp-public .bp-hero__pill, .bp-public .bp-hero__eyebrow, .bp-public .bp-hero__title, .bp-public .bp-hero__sub, .bp-public .bp-hero__cta, .bp-public .bp-hero__meta, .bp-public .bp-hero__preview { opacity: 1 !important; } @keyframes bpHeroRise { from { transform: translateY(16px); } to { transform: none; } } @media (prefers-reduced-motion: no-preference) { .bp-public .bp-hero__eyebrow { animation: bpHeroRise 0.6s 0.05s var(--ease-out, cubic-bezier(0.2,0.8,0.2,1)) both; } .bp-public .bp-hero__title { animation: bpHeroRise 0.6s 0.14s var(--ease-out, cubic-bezier(0.2,0.8,0.2,1)) both; } .bp-public .bp-hero__sub { animation: bpHeroRise 0.6s 0.24s var(--ease-out, cubic-bezier(0.2,0.8,0.2,1)) both; } .bp-public .bp-hero__cta { animation: bpHeroRise 0.6s 0.34s var(--ease-out, cubic-bezier(0.2,0.8,0.2,1)) both; } .bp-public .bp-hero__meta { animation: bpHeroRise 0.6s 0.42s var(--ease-out, cubic-bezier(0.2,0.8,0.2,1)) both; } .bp-public .bp-hero__preview { animation: bpHeroRise 0.7s 0.52s var(--ease-out, cubic-bezier(0.2,0.8,0.2,1)) both; } } /* ─── Auth-панель: контент всегда видим ────────────────────────────────────── Тот же паттерн, что и hero: бренд/заголовок/лид/мета на левой индиго-панели проявлялись только анимацией bp-aside-rise (fill backwards → до доигрывания opacity:0). Делаем базовый opacity:1, вход — transform-only. */ .bp-auth__aside-head, .bp-auth__aside-brand, .bp-auth__aside-eyebrow, .bp-auth__aside-title, .bp-auth__aside-lede, .bp-auth__aside-meta, .bp-auth__aside-foot, .bp-auth__aside-wordmark { opacity: 1 !important; } @media (prefers-reduced-motion: no-preference) { .bp-auth__aside-head { animation: bpHeroRise 0.6s 0.08s var(--ease-out, cubic-bezier(0.2,0.8,0.2,1)) both; } .bp-auth__aside-eyebrow { animation: bpHeroRise 0.6s 0.20s var(--ease-out, cubic-bezier(0.2,0.8,0.2,1)) both; } .bp-auth__aside-title { animation: bpHeroRise 0.6s 0.30s var(--ease-out, cubic-bezier(0.2,0.8,0.2,1)) both; } .bp-auth__aside-lede { animation: bpHeroRise 0.6s 0.40s var(--ease-out, cubic-bezier(0.2,0.8,0.2,1)) both; } .bp-auth__aside-meta { animation: bpHeroRise 0.6s 0.50s var(--ease-out, cubic-bezier(0.2,0.8,0.2,1)) both; } .bp-auth__aside-foot { animation: bpHeroRise 0.6s 0.58s var(--ease-out, cubic-bezier(0.2,0.8,0.2,1)) both; } } /* ─── Auth-панель на телефоне: без entrance-анимации ───────────────────────── На ≤600px индиго-панель сжимается в полоску ~61px с overflow:hidden, где виден только заголовок. Анимация входа (translateY) внутри клиппнутой полоски давала визуальный «двойной»/смазанный текст в рамке устройства. Делаем содержимое статичным — ровно тот же чистый resting-state, без съезжания. */ @media (max-width: 600px) { .bp-auth__aside-head, .bp-auth__aside-brand, .bp-auth__aside-eyebrow, .bp-auth__aside-title, .bp-auth__aside-lede, .bp-auth__aside-meta, .bp-auth__aside-foot, .bp-auth__aside-wordmark { animation: none !important; transform: none !important; } /* запас по высоте, чтобы наклонный italic-заголовок не подрезался сверху/снизу */ .bp-auth__aside { overflow: visible !important; } } /* ─── Мобильный header лендинга: один ряд ──────────────────────────────────── На ≤780px «Войти» должен уезжать в drawer (остаётся лого + «Попробовать» + бургер), но более поздняя декларация .bp-btn перебивала media-правило display:none, и шапка ломалась в 2 ряда (112px). Жёстко фиксируем последним слоем. */ @media (max-width: 780px) { .bp-public .bp-pub-cta-login { display: none !important; } .bp-public .bp-pub-header__inner { gap: 10px !important; flex-wrap: nowrap !important; } .bp-public .bp-pub-header .hstack { flex-wrap: nowrap !important; gap: 8px !important; flex: 0 0 auto; } .bp-public .bp-pub-header .bp-logo { flex: 0 1 auto; min-width: 0; } } /* ─── Онбординг: страховка от микро-overflow на телефоне ──────────────────── */ @media (max-width: 700px) { .bp-onb-root, .bp-onb-body { overflow-x: clip; } } /* ─── Auth на телефоне: чистая одноколоночная форма в стиле Notion ─────────── Десктоп сохраняет красивый split с индиго-панелью. На телефоне «панель с editorial-заголовком + бренд-лого в форме + заголовок формы» = три шапки подряд (избыточно и не воздушно). Прячем декоративную панель, оставляем одну центрированную форму: бренд-лого → заголовок → форма, с щедрым воздухом. */ @media (max-width: 700px) { .bp-auth { display: block !important; min-height: 100svh; background: var(--bg-elev, #fff); } .bp-auth__aside { display: none !important; } .bp-auth__form { min-height: 100svh; box-sizing: border-box; padding: clamp(40px, 8vh, 76px) 24px calc(44px + env(safe-area-inset-bottom)) !important; display: flex; flex-direction: column; align-items: center; justify-content: center; } .bp-auth__form-inner { width: 100%; max-width: 400px; } /* бренд-лого крупнее и центрируем как у Notion */ .bp-auth__mobile-logo { margin: 0 0 26px !important; } .bp-auth__title { font-size: 27px !important; line-height: 1.16; letter-spacing: -0.02em; } .bp-auth__sub { margin-top: 8px !important; } /* нижняя строка («Уже есть аккаунт?») с воздухом */ .bp-auth__form-inner > .bp-auth__alt, .bp-auth__form-inner .bp-auth__switch { margin-top: 26px; } } /* ─── Auth на телефоне: брендовая шапка-градиент с лого (по запросу владельца) ── Раньше на телефоне декоративная индиго-панель пряталась → сверху над мелким лого зияла пустота. Возвращаем бренд компактной ШАПКОЙ во всю ширину: тот же градиент/ орб/зерно/«морозный» знак и serif-вордмарк, что и в десктоп-панели. Форма — под шапкой (без вертикального центрирования). Всё скоупится на `:has(.bp-auth__mhero)`, поэтому прочие auth-страницы без шапки не затрагиваются. */ .bp-auth__mhero { display: none; } /* Лого-в-форме больше не нужно на страницах с брендовой шапкой: на телефоне брендирует шапка, на планшете (701–960) — панель-лента сверху, на десктопе — боковая панель. Прячем на ВСЕХ ширинах → на планшете уходит дубль лого (лента-панель + мелкое лого). */ .bp-auth__form:has(.bp-auth__mhero) .bp-auth__mobile-logo { display: none !important; } @media (max-width: 700px) { /* Форма: шапка сверху во всю ширину, контент под ней. */ .bp-auth__form:has(.bp-auth__mhero) { padding: 0 0 calc(40px + env(safe-area-inset-bottom)) !important; display: block !important; min-height: 100svh; box-sizing: border-box; } .bp-auth__form:has(.bp-auth__mhero) .bp-auth__form-inner { max-width: 400px; margin: 0 auto; padding: 30px 24px 0; } .bp-auth__mhero { display: flex; align-items: center; gap: 15px; position: relative; overflow: hidden; isolation: isolate; padding: calc(32px + env(safe-area-inset-top)) 26px 32px; color: #fff; text-decoration: none; border-radius: 0 0 28px 28px; background: radial-gradient(125% 90% at 0% 0%, rgba(255,255,255,0.14), transparent 55%), radial-gradient(95% 85% at 110% 118%, rgba(167,139,250,0.24), transparent 55%), linear-gradient(160deg, var(--accent-press) 0%, var(--accent-hover) 40%, var(--accent) 78%, var(--accent-hover) 100%); box-shadow: 0 20px 44px -22px rgba(15,11,60,0.5); } /* Мягкое свечёное пятно сверху-слева. */ .bp-auth__mhero-orb { position: absolute; z-index: -1; pointer-events: none; width: 300px; height: 300px; top: -155px; left: -115px; border-radius: 50%; background: radial-gradient(circle, rgba(196,181,253,0.42), transparent 70%); filter: blur(46px); } /* Зерно — та же текстура, что в десктоп-панели. */ .bp-auth__mhero-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.14; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* Нижняя виньетка — мягкая посадка знака. */ .bp-auth__mhero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, transparent 55%, rgba(15,11,60,0.22) 100%); } /* Знак — «морозное стекло», как в десктоп-панели. */ .bp-auth__mhero-mark { flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.10), 0 12px 26px -12px rgba(15,11,60,0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .bp-auth__mhero-word { display: inline-flex; flex-direction: column; gap: 4px; line-height: 1; min-width: 0; } .bp-auth__mhero-name { font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-size: 28px; font-weight: 400; letter-spacing: -0.01em; color: #fff; } .bp-auth__mhero-tag { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.82); letter-spacing: 0.01em; } } /* Главная CTA форм (.bp-btn--lg: Войти/Создать аккаунт/Подтвердить/Установить пароль) держала фикс. height:36px (components.css) + min-height:36 (polish-pro.css) → на телефоне тач-цель была 36–39px < WCAG-минимума 44. Гасим здесь (proto-overrides грузится ПОСЛЕ polish-pro, иначе min-height:36 переигрывал бы). */ @media (max-width: 768px) { .bp-auth__form .bp-btn--lg { height: auto; min-height: var(--tap-min); } } /* ─── Онбординг: на телефоне/планшете прячем live-сводку ────────────────────── Сводка-зеркало (bp-preview) полезна ТОЛЬКО в desktop-режиме сбоку — видно, как во время ввода заполняется карточка организации. В одноколоночной раскладке (≤1080px) она уезжает ПОД форму, и приходится листать вниз ради информации, которую только что ввёл. Это лишний скролл — убираем, оставляем чистую форму. */ @media (max-width: 1080px) { .bp-preview { display: none !important; } .bp-onb-grid { grid-template-columns: minmax(0, 640px) !important; justify-content: center; } } /* ── Мобильный UX-аудит 2026-07-06: тач-зоны текстовых ссылок auth/legal ── */ /* Ссылки согласия в label чекбокса (регистрация), «Забыли пароль?», «Вернуться ко входу», «← На главную» на юр-страницах — высота 16–24px. Расширяем хит-зону паддингом без сдвига раскладки. */ .bp-field__check a, a.bp-auth__forgot, .bp-auth__alt-foot a, .bp-legal__back, .bp-pub-nav a { display: inline-block; padding: 10px 2px; margin: -10px -2px; position: relative; z-index: 1; } /* Ландшафт телефона: инпуты 14px триггерили iOS-зум — базовые 16px всегда. */ .bp-form .bp-input, .bp-form input[type="email"], .bp-form input[type="password"], .bp-form input[type="text"] { font-size: 16px; } /* Чекбоксы согласия/«Запомнить» 16px → 20px (тач). */ .bp-field__check input[type="checkbox"] { width: 20px; height: 20px; } /* ── Планшетный аудит 2026-07-06: глазок пароля на тач-устройствах ──────── */ /* Тач-гард 44px (production-fixes) заперт в ≤768 — на планшете 834–1180 глазок оставался 30×30. Гейт по устройству, не по ширине; значение то же, что в mobile-гарде (--tap-min=44) — на телефоне ничего не меняется, мышиный десктоп сохраняет компактные 30px. Кнопка прозрачная (absolute от правого края инпута), рост min-размеров расширяет хит-зону, как это уже работает на телефоне. */ @media (pointer: coarse) { .bp-input__icon-btn { min-width: var(--tap-min, 44px); min-height: var(--tap-min, 44px); } }