/* ============================================================ Попап-гейт «зарегистрируйтесь» — ОБЩИЙ для витрины и анкеты. Жил в teazy-profile.css, когда гейт был только на странице анкеты. Кнопка «Написать» в ленте вела на href="#" и не делала ничего; чтобы повесить на неё тот же гейт, стили понадобились и на странице листинга. Копия в двух файлах разъехалась бы на первой же правке — поэтому отдельный файл, который подключают оба шаблона (partials/head.ejs и partials/profile/head.ejs). Разметка — views/mobile/partials/profile/gate-modal.ejs, поведение — teazy-profile.js (анкета) и teazy-mobile.js (лента, делегированный обработчик: карточки догружаются через /api/feed уже после загрузки страницы). ============================================================ */ .tzp-gate { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.2s; } .tzp-gate.is-open { opacity: 1; visibility: visible; } .tzp-gate__ovl { position: absolute; inset: 0; background: rgba(12, 14, 24, 0.5); } .tzp-gate__box { position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 0 8px 8px; background: var(--tzm-card); border-radius: 22px; padding: 26px 20px 20px; text-align: center; transform: translateY(12px); transition: transform 0.22s; } .tzp-gate.is-open .tzp-gate__box { transform: translateY(0); } .tzp-gate__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: none; border-radius: 50%; background: #f1f3f8; color: var(--tzm-muted); font-size: 21px; line-height: 1; cursor: pointer; } .tzp-gate__ico { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 16px; background: var(--tzm-purple-tint); color: var(--tzm-purple); } .tzp-gate__ico svg { width: 27px; height: 27px; } .tzp-gate__title { margin: 0 0 8px; font-size: 19px; font-weight: 800; } .tzp-gate__text { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--tzm-muted); } .tzp-gate__login { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--tzm-purple); } /* Кнопки внутри гейта задаём здесь и без опоры на класс : на анкете body.tzp-body, на витрине body.tzm-body, а попап должен выглядеть одинаково на обеих страницах. */ .tzp-gate .tzp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-size: 15.5px; font-weight: 700; cursor: pointer; font-family: inherit; } .tzp-gate .tzp-btn--block { width: 100%; height: 50px; } .tzp-gate .tzp-btn--solid { background: linear-gradient(120deg, var(--tzm-pink-2), var(--tzm-purple)); color: #fff; border: none; }