/* ─── styles.css ──────────────────────────────────────────────────────────── Вся стилизация Mini App. Цвета живут в CSS-переменных — тёмная тема переключается автоматически через атрибут data-theme="dark" на . ──────────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ CSS ПЕРЕМЕННЫЕ — СВЕТЛАЯ ТЕМА ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Фоны */ --bg: #f2f2f7; --card-bg: #ffffff; --input-bg: #f2f2f7; /* Текст */ --text: #1c1c1e; --text-sub: #6d6d72; --text-hint: #aeaeb2; /* Акцент */ --accent: #2aabee; --accent-dim: rgba(42, 171, 238, 0.12); --accent-dark: #1a8bc4; /* Статусы */ --success: #34c759; --danger: #ff3b30; --warning: #ff9500; /* Разделители и тени */ --sep: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10); /* Скругления */ --r: 16px; --r-sm: 10px; --r-xs: 8px; /* Отступы */ --p: 16px; --p-sm: 12px; /* Нижняя навигация */ --nav-h: 60px; --safe-b: env(safe-area-inset-bottom, 0px); } /* ═══════════════════════════════════════════════════════════════════════════ ТЁМНАЯ ТЕМА ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { --bg: #1c1c1e; --card-bg: #2c2c2e; --input-bg: #3a3a3c; --text: #ffffff; --text-sub: #ebebf5cc; --text-hint:#aeaeb2; --sep: rgba(255, 255, 255, 0.08); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); } /* ═══════════════════════════════════════════════════════════════════════════ СБРОС И БАЗА ═══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; font-size: 16px; -webkit-text-size-adjust: 100%; background: var(--bg); } body { background: var(--bg); color: var(--text); overscroll-behavior: none; user-select: none; -webkit-tap-highlight-color: transparent; } img { display: block; max-width: 100%; } /* ═══════════════════════════════════════════════════════════════════════════ КОНТЕЙНЕР ПРИЛОЖЕНИЯ ═══════════════════════════════════════════════════════════════════════════ */ #app { position: fixed; inset: 0; overflow: hidden; } /* ═══════════════════════════════════════════════════════════════════════════ ЭКРАНЫ — НАВИГАЦИЯ И АНИМАЦИИ ═══════════════════════════════════════════════════════════════════════════ */ .screen { position: absolute; top: 0; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b)); background: var(--bg); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* По умолчанию — за экраном справа */ transform: translateX(100%); opacity: 0; pointer-events: none; transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease; will-change: transform, opacity; } /* Активный экран */ .screen.active { transform: translateX(0); opacity: 1; pointer-events: auto; } /* Экран уходит «в глубину» при прямой навигации */ .screen.pushed-back { transform: translateX(-28%); opacity: 0.5; pointer-events: none; } /* Таб-экраны не слайдятся — просто fade */ .screen.is-tab { transform: none; } .screen.is-tab.pushed-back { transform: none; opacity: 0; } /* ─── Прокрутка ─── */ .screen-content { padding: var(--p); padding-bottom: calc(var(--nav-h) + var(--safe-b) + var(--p) + 8px); } /* Экраны с MainButton — дополнительный отступ снизу под кнопку */ .screen.has-main-btn .screen-content { padding-bottom: calc(72px + 20px); } /* ═══════════════════════════════════════════════════════════════════════════ НИЖНЯЯ НАВИГАЦИЯ ═══════════════════════════════════════════════════════════════════════════ */ #bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--card-bg); border-top: 1px solid var(--sep); display: flex; align-items: stretch; z-index: 1000; } .nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: none; background: transparent; color: var(--text-hint); font-size: 10px; font-weight: 500; letter-spacing: 0.2px; cursor: pointer; padding: 8px 4px; transition: color 180ms ease, transform 120ms ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .nav-btn svg { width: 24px; height: 24px; transition: transform 180ms ease; } .nav-btn.active { color: var(--accent); } .nav-btn:active { transform: scale(0.92); } /* ═══════════════════════════════════════════════════════════════════════════ КНОПКИ ═══════════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: var(--r-sm); font-size: 16px; font-weight: 600; border: none; cursor: pointer; transition: opacity 150ms, transform 120ms; -webkit-tap-highlight-color: transparent; touch-action: manipulation; width: 100%; } .btn:active { transform: scale(0.97); opacity: 0.85; } .btn-primary { background: var(--accent); color: #fff; } .btn-secondary { background: var(--accent-dim); color: var(--accent); } .btn-ghost { background: var(--input-bg); color: var(--text); } .btn-danger { background: rgba(255, 59, 48, 0.10); color: var(--danger); } .btn-sm { min-height: 36px; font-size: 14px; padding: 0 14px; border-radius: var(--r-xs); } /* ═══════════════════════════════════════════════════════════════════════════ КАРТОЧКИ ═══════════════════════════════════════════════════════════════════════════ */ .card { background: var(--card-bg); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; } .card-padded { padding: var(--p); } /* ═══════════════════════════════════════════════════════════════════════════ ГЛАВНАЯ — МАСТЕР ═══════════════════════════════════════════════════════════════════════════ */ .master-card { display: flex; align-items: center; gap: 14px; background: var(--card-bg); border-radius: var(--r); padding: var(--p); box-shadow: var(--shadow-sm); margin-bottom: 12px; } .master-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #1a8bc4); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: -1px; } .master-info { flex: 1; min-width: 0; } .master-name { font-size: 17px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .master-title { font-size: 13px; color: var(--text-sub); margin-top: 2px; } .master-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--text-hint); } .master-status.active { color: var(--success); } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-hint); flex-shrink: 0; } .master-status.active .status-dot { background: var(--success); } .master-address { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-sub); margin-bottom: 12px; padding: 0 2px; } /* ─── Ближайший слот ─── */ .next-slot-card { background: linear-gradient(135deg, var(--accent), #1a8bc4); border-radius: var(--r); padding: var(--p); color: #fff; margin-bottom: 12px; } .next-slot-label { font-size: 12px; opacity: 0.8; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .next-slot-time { font-size: 20px; font-weight: 700; margin-bottom: 14px; } .next-slot-card .btn { background: rgba(255,255,255,0.22); color: #fff; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.3); } .next-slot-card .btn:active { background: rgba(255,255,255,0.32); } /* ─── Секция ─── */ .section-header { font-size: 13px; font-weight: 600; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 10px; } /* ─── Галерея работ (горизонтальный скролл) ─── */ .works-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin: 0 calc(-1 * var(--p)); padding-left: var(--p); padding-right: var(--p); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .works-scroll::-webkit-scrollbar { display: none; } .work-thumb { flex-shrink: 0; width: 100px; height: 100px; border-radius: var(--r-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; transition: transform 150ms; box-shadow: var(--shadow-sm); } .work-thumb:active { transform: scale(0.94); } .work-emoji { width: 52px; height: 34px; color: rgba(255,255,255,0.95); filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3)); } .work-emoji svg { width: 100%; height: 100%; } .work-name { font-size: 10px; font-weight: 600; color: rgba(0,0,0,0.55); text-align: center; padding: 0 6px; line-height: 1.3; } /* ─── Отзыв ─── */ .btn-book-detail { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 16px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; border: none; border-radius: var(--r-sm); cursor: pointer; transition: opacity 150ms, transform 120ms; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .btn-book-detail:active { transform: scale(0.97); opacity: 0.85; } .review-card { background: var(--card-bg); border-radius: var(--r); padding: var(--p); margin-top: 12px; box-shadow: var(--shadow-sm); border-left: 3px solid var(--accent); } .review-text { font-size: 14px; line-height: 1.5; color: var(--text); font-style: italic; } .review-author { font-size: 12px; color: var(--text-hint); margin-top: 6px; font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════════ КАТАЛОГ — ТАБЫ И КАРТОЧКИ УСЛУГ ═══════════════════════════════════════════════════════════════════════════ */ .tabs-scroll { display: flex; gap: 8px; overflow-x: auto; padding: var(--p) var(--p) 12px; scrollbar-width: none; background: var(--bg); position: sticky; top: 0; z-index: 10; } .tabs-scroll::-webkit-scrollbar { display: none; } .tab-chip { flex-shrink: 0; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; border: none; background: var(--card-bg); color: var(--text-sub); cursor: pointer; transition: background 180ms, color 180ms, transform 120ms; box-shadow: var(--shadow-sm); min-height: 36px; } .tab-chip.active { background: var(--accent); color: #fff; } .tab-chip:active { transform: scale(0.95); } /* ─── Список услуг ─── */ .services-list { padding: 0 var(--p) var(--p); display: flex; flex-direction: column; gap: 12px; } .service-card { background: var(--card-bg); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 150ms, box-shadow 150ms; } .service-card:active { transform: scale(0.98); box-shadow: var(--shadow-md); } .service-card-thumb { height: 130px; display: flex; align-items: center; justify-content: center; position: relative; } .service-card-emoji { width: 80px; height: 52px; color: rgba(255,255,255,0.95); filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25)); } .service-card-emoji svg { width: 100%; height: 100%; } .service-card-body { padding: 12px var(--p); } .service-card-name { font-size: 16px; font-weight: 700; color: var(--text); } .service-card-desc { font-size: 13px; color: var(--text-sub); margin-top: 3px; } .service-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } .service-price { font-size: 17px; font-weight: 700; color: var(--text); } .service-meta { font-size: 12px; color: var(--text-hint); } .deposit-badge { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-dim); padding: 3px 8px; border-radius: 20px; margin-top: 6px; display: inline-block; } /* ═══════════════════════════════════════════════════════════════════════════ ДЕТАЛИ УСЛУГИ ═══════════════════════════════════════════════════════════════════════════ */ .detail-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; } .ba-frame { aspect-ratio: 1 / 1; border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden; position: relative; } .ba-frame img { object-position: top center; } .ba-emoji { font-size: 40px; } .ba-label { position: absolute; bottom: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(0,0,0,0.55); background: rgba(255,255,255,0.75); padding: 3px 10px; border-radius: 20px; backdrop-filter: blur(4px); } html[data-theme="dark"] .ba-label { color: rgba(255,255,255,0.7); background: rgba(0,0,0,0.35); } .detail-title { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 10px; } .detail-meta-row { display: flex; gap: 16px; margin-bottom: 6px; } .detail-meta-item { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-sub); } .detail-meta-item svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; } .detail-deposit { font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-dim); padding: 4px 10px; border-radius: 20px; display: inline-block; margin: 8px 0 14px; } .detail-description { font-size: 14px; line-height: 1.6; color: var(--text-sub); margin-bottom: 16px; } /* ═══════════════════════════════════════════════════════════════════════════ ВЫБОР ДАТЫ И ВРЕМЕНИ ═══════════════════════════════════════════════════════════════════════════ */ /* Sticky-плашка с услугой */ .sticky-service-bar { position: sticky; top: 0; background: var(--bg); padding: 12px var(--p); display: flex; align-items: center; gap: 8px; justify-content: space-between; border-bottom: 1px solid var(--sep); z-index: 10; } .sticky-back-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--accent); cursor: pointer; padding: 4px; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .sticky-service-name { font-size: 15px; font-weight: 600; color: var(--text); } .sticky-service-price { font-size: 15px; font-weight: 700; color: var(--accent); } /* Полоса дат */ .dates-strip-wrap { position: relative; } .dates-strip-wrap::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 48px; background: linear-gradient(to left, var(--bg), transparent); pointer-events: none; } .dates-strip { display: flex; gap: 8px; overflow-x: auto; padding: 14px var(--p); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .dates-strip::-webkit-scrollbar { display: none; } .date-btn { flex-shrink: 0; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--r-sm); border: none; background: var(--card-bg); color: var(--text-sub); cursor: pointer; transition: background 180ms, color 180ms, transform 120ms; box-shadow: var(--shadow-sm); min-height: 72px; touch-action: manipulation; } .date-btn .day-name { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .date-btn .day-num { font-size: 20px; font-weight: 700; line-height: 1; } .date-btn .day-month { font-size: 10px; font-weight: 500; opacity: 0.7; text-transform: lowercase; } .date-btn.active { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(42, 171, 238, 0.35); } .date-btn.active .day-month { opacity: 0.85; } .date-btn.disabled { opacity: 0.35; pointer-events: none; } .date-btn:not(.disabled):not(.active):active { transform: scale(0.94); } /* Заголовок дня */ .slots-date-heading { font-size: 15px; font-weight: 600; color: var(--text); padding: 0 var(--p) 10px; } /* Сетка слотов */ .slots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 var(--p) var(--p); } .slot-btn { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; border: 2px solid var(--sep); background: var(--card-bg); color: var(--text); cursor: pointer; transition: border-color 180ms, background 180ms, color 180ms, transform 120ms; touch-action: manipulation; } .slot-btn.selected { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); } .slot-btn.taken { background: var(--input-bg); color: var(--text-hint); border-color: transparent; pointer-events: none; text-decoration: line-through; } .slot-btn:not(.taken):not(.selected):active { transform: scale(0.95); border-color: var(--accent); } /* Пустое состояние слотов */ .slots-empty { padding: var(--p); text-align: center; color: var(--text-hint); font-size: 14px; } .custom-time-block { margin: 20px 0 8px; text-align: center; } .custom-time-text { font-size: 13px; color: var(--text-hint); margin-bottom: 8px; } .custom-time-btn { background: none; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 20px; padding: 8px 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; } .custom-time-btn:active { background: var(--accent); color: #fff; } /* ═══════════════════════════════════════════════════════════════════════════ ПОДТВЕРЖДЕНИЕ ЗАПИСИ ═══════════════════════════════════════════════════════════════════════════ */ .booking-summary-card { background: var(--card-bg); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 12px; } .booking-summary-header { padding: 12px var(--p); background: linear-gradient(135deg, var(--accent), #1a8bc4); color: #fff; } .booking-summary-service { font-size: 17px; font-weight: 700; } .booking-summary-sub { font-size: 13px; opacity: 0.85; margin-top: 2px; } .booking-summary-rows { padding: var(--p-sm) var(--p); } .summary-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--sep); } .summary-row:last-child { border-bottom: none; } .summary-row-label { font-size: 14px; color: var(--text-sub); } .summary-row-value { font-size: 14px; font-weight: 600; color: var(--text); } /* Блок депозита */ .deposit-card { background: var(--card-bg); border-radius: var(--r); padding: var(--p); margin-bottom: 12px; box-shadow: var(--shadow-sm); border: 1.5px solid var(--accent-dim); } .deposit-amount { font-size: 22px; font-weight: 800; color: var(--accent); margin-bottom: 4px; } .deposit-desc { font-size: 13px; color: var(--text-sub); line-height: 1.5; } /* Условия отмены */ .cancel-policy { font-size: 12px; color: var(--text-hint); text-align: center; padding: 8px var(--p); margin-bottom: 8px; } /* Комментарий */ .comment-field { width: 100%; min-height: 80px; border-radius: var(--r-sm); border: 1.5px solid var(--sep); background: var(--input-bg); color: var(--text); font-size: 15px; font-family: inherit; padding: 12px var(--p-sm); resize: none; outline: none; transition: border-color 180ms; } .comment-field:focus { border-color: var(--accent); } .comment-field::placeholder { color: var(--text-hint); } .comment-label { font-size: 13px; color: var(--text-sub); margin-bottom: 6px; font-weight: 500; } /* ═══════════════════════════════════════════════════════════════════════════ ЭКРАН УСПЕХА ═══════════════════════════════════════════════════════════════════════════ */ .success-screen-inner { display: flex; flex-direction: column; align-items: center; padding: 32px var(--p) var(--p); } .success-icon { width: 80px; height: 80px; border-radius: 50%; background: rgba(52, 199, 89, 0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .success-checkmark { width: 40px; height: 40px; stroke: var(--success); stroke-width: 3; fill: none; stroke-dasharray: 60; stroke-dashoffset: 60; animation: dash 0.5s 0.2s ease forwards; } @keyframes dash { to { stroke-dashoffset: 0; } } .success-title { font-size: 24px; font-weight: 800; color: var(--text); margin-bottom: 6px; } .success-subtitle { font-size: 15px; color: var(--text-sub); text-align: center; margin-bottom: 24px; line-height: 1.5; } .success-card { width: 100%; background: var(--card-bg); border-radius: var(--r); padding: var(--p); box-shadow: var(--shadow-sm); margin-bottom: 12px; } .success-card-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sep); } .success-card-row:last-child { border-bottom: none; } .success-card-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; margin-top: 1px; } .success-card-text { flex: 1; } .success-card-label { font-size: 12px; color: var(--text-hint); } .success-card-value { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 1px; } .success-reminder { font-size: 13px; color: var(--text-hint); text-align: center; margin-bottom: 20px; } .success-nav-hint { font-size: 13px; color: var(--text-hint); text-align: center; margin-top: 8px; padding: 0 16px 24px; } /* ═══════════════════════════════════════════════════════════════════════════ МОИ ЗАПИСИ ═══════════════════════════════════════════════════════════════════════════ */ .bookings-section-title { font-size: 13px; font-weight: 600; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 8px; } .bookings-section-title:first-child { margin-top: 0; } .booking-item { background: var(--card-bg); border-radius: var(--r); padding: var(--p); margin-bottom: 10px; box-shadow: var(--shadow-sm); } .booking-item-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; } .booking-item-name { font-size: 16px; font-weight: 700; color: var(--text); } .booking-item-date { font-size: 13px; color: var(--text-sub); margin-top: 2px; } .booking-item-price { font-size: 15px; font-weight: 700; color: var(--accent); white-space: nowrap; } /* Пустое состояние */ .empty-state { display: flex; flex-direction: column; align-items: center; padding: 48px var(--p) 24px; text-align: center; } .empty-state-emoji { font-size: 56px; margin-bottom: 16px; } .empty-state-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; } .empty-state-desc { font-size: 14px; color: var(--text-sub); line-height: 1.5; margin-bottom: 20px; max-width: 260px; } /* ═══════════════════════════════════════════════════════════════════════════ МЕЛКИЕ КОМПОНЕНТЫ ═══════════════════════════════════════════════════════════════════════════ */ /* Заголовок страницы */ .page-title { font-size: 22px; font-weight: 800; color: var(--text); padding: var(--p) var(--p) 0; } /* Разделитель */ .divider { height: 1px; background: var(--sep); margin: 4px 0; } /* Таговая строчка с иконкой */ .icon-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-sub); margin-bottom: 8px; } /* Skeleton loader — пульсирующие плашки */ .skeleton { background: linear-gradient(90deg, var(--card-bg) 25%, var(--input-bg) 50%, var(--card-bg) 75%); background-size: 200% 100%; animation: skeleton-pulse 1.4s ease infinite; border-radius: var(--r-xs); } @keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Тактильный ripple-эффект */ .ripple { position: relative; overflow: hidden; } .ripple::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.06); opacity: 0; transition: opacity 150ms; } html[data-theme="dark"] .ripple::after { background: rgba(255,255,255,0.06); } .ripple:active::after { opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════════ ОФФЕР-МОДАЛКА ═══════════════════════════════════════════════════════════════════════════ */ .offer-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; animation: offer-fade-in 280ms ease both; } @keyframes offer-fade-in { from { opacity: 0; } to { opacity: 1; } } .offer-card { background: var(--card-bg); border-radius: 20px; padding: 28px 24px 24px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.20); animation: offer-card-in 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes offer-card-in { from { opacity: 0; transform: scale(0.88) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } } .offer-emoji { font-size: 52px; line-height: 1; margin-bottom: 16px; } .offer-title { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.25; margin-bottom: 8px; } .offer-subtitle { font-size: 14px; color: var(--text-sub); line-height: 1.5; margin-bottom: 16px; } .offer-bullets { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; } .offer-bullets li { font-size: 14px; color: var(--text); padding: 5px 0 5px 22px; position: relative; line-height: 1.4; } .offer-bullets li::before { content: '•'; position: absolute; left: 6px; color: var(--accent); font-weight: 700; } .offer-btn { display: block; width: 100%; min-height: 50px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; border-radius: var(--r-sm); text-decoration: none; display: flex; align-items: center; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: opacity 150ms, transform 120ms; margin-bottom: 12px; } .offer-btn:active { opacity: 0.85; transform: scale(0.97); } .offer-skip { background: none; border: none; font-size: 14px; color: var(--text-hint); cursor: pointer; padding: 6px 16px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .offer-skip:active { opacity: 0.6; } /* ─── Онбординг ─────────────────────────────────────────────────────────── */ .onboard-overlay { align-items: flex-end; padding: 0; } .onboard-card { border-radius: 20px 20px 0 0; padding: 32px 24px calc(24px + env(safe-area-inset-bottom, 0px)); max-width: 100%; animation: onboard-slide-up 340ms cubic-bezier(0.34, 1.30, 0.64, 1) both; } @keyframes onboard-slide-up { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .onboard-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; background: var(--accent-dim); border: 3px solid var(--accent); } .onboard-avatar img { width: 100%; height: 100%; object-fit: cover; } .onboard-name { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .onboard-title { font-size: 15px; color: var(--text-sub); margin-bottom: 18px; line-height: 1.5; } .onboard-bullets li { font-size: 15px; } /* ─── Кнопка «Поделиться» ──────────────────────────────────────────────── */ .share-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; background: var(--input-bg); color: var(--text-sub); border: none; border-radius: var(--r-sm); font-size: 15px; font-weight: 500; cursor: pointer; margin-top: 8px; margin-bottom: 16px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: opacity 150ms, transform 120ms; } .share-btn:active { opacity: 0.75; transform: scale(0.97); }