/* ================================================================ Welcome Popup — audioknigi.fun Подключить в после common.css / styles.css ================================================================ */ /* ── Оверлей ─────────────────────────────────────────────────── */ .wlc-overlay { position: fixed; inset: 0; z-index: 10500; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .3s ease; /* скрыт до добавления класса --visible */ } .wlc-overlay--visible { opacity: 1; } .wlc-overlay--hiding { opacity: 0; pointer-events: none; } /* ── Карточка ────────────────────────────────────────────────── */ .wlc-box { position: relative; background-color: var(--ui-bg, #222); border-radius: 6px; box-shadow: 0 0 0 8px rgba(255,255,255,.06), 0 20px 60px rgba(0,0,0,.9); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; transform: translateY(24px); transition: transform .3s ease; /* скроллбар */ scrollbar-width: thin; scrollbar-color: var(--bg-lightest, #585858) transparent; } .wlc-box::-webkit-scrollbar { width: 4px; } .wlc-box::-webkit-scrollbar-track { background: transparent; } .wlc-box::-webkit-scrollbar-thumb { background: var(--bg-lightest, #585858); border-radius: 2px; } .wlc-overlay--visible .wlc-box { transform: translateY(0); } /* ── Шапка с градиентом ──────────────────────────────────────── */ .wlc-header { background: linear-gradient(135deg, #8b3b32 0%, #b33a2d 55%, #6d2b23 100%); padding: 28px 28px 22px; border-radius: 6px 6px 0 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .wlc-header-left { display: flex; align-items: center; gap: 14px; } .wlc-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; flex-shrink: 0; } .wlc-header-text {} .wlc-badge { display: inline-block; background: var(--accent-2, #f8d268); color: #000; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 20px; margin-bottom: 5px; } .wlc-title { font-family: 'Fredoka One', 'Manrope', sans-serif; font-size: 22px; font-weight: 400; color: #fff; line-height: 1.2; margin: 0; } .wlc-subtitle { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 3px; } /* ── Кнопка закрытия ─────────────────────────────────────────── */ .wlc-close { background: rgba(255,255,255,.12) !important; border: none !important; border-radius: 50% !important; width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; cursor: pointer; color: rgba(255,255,255,.8); font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s, color .2s; margin-top: 2px; } .wlc-close:hover { background: rgba(255,255,255,.25) !important; color: #fff; } /* ── Тело ────────────────────────────────────────────────────── */ .wlc-body { padding: 22px 28px 0; } /* ── Фичи (список преимуществ) ───────────────────────────────── */ .wlc-features { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 11px; } .wlc-features li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--tt-lighter, #e0dfdc); line-height: 1.5; } .wlc-feat-icon { width: 30px; height: 30px; border-radius: 6px; background: rgba(139,59,50,.25); border: 1px solid rgba(139,59,50,.4); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--accent-darker, #b33a2d); flex-shrink: 0; margin-top: 1px; } /* ── Блоки «Регистрация» и «Adblock» ────────────────────────── */ .wlc-section { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 5px; font-size: 13px; color: var(--tt, #a8a8a8); line-height: 1.55; margin-bottom: 12px; } .wlc-section strong { color: var(--tt-lighter, #e0dfdc); } .wlc-section-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } /* Регистрация */ .wlc-section--reg { background: rgba(154,185,109,.08); border: 1px solid rgba(154,185,109,.2); } .wlc-section--reg .wlc-section-icon { background: rgba(154,185,109,.18); color: var(--accent-3, #9ab96d); } /* Adblock */ .wlc-section--adblock { background: rgba(248,210,104,.07); border: 1px solid rgba(248,210,104,.18); } .wlc-section--adblock .wlc-section-icon { background: rgba(248,210,104,.15); color: var(--accent-2, #f8d268); } .wlc-section--adblock .wlc-amount { color: var(--accent-2, #f8d268); font-weight: 700; white-space: nowrap; } /* ── Разделитель ─────────────────────────────────────────────── */ .wlc-divider { height: 1px; background: var(--bdc, rgba(0,0,0,.5)); box-shadow: 0 1px rgba(255,255,255,.05); margin: 4px 0 20px; } /* ── Футер с кнопкой ─────────────────────────────────────────── */ .wlc-footer { padding: 0 28px 24px; display: flex; gap: 10px; flex-wrap: wrap; } .wlc-btn { flex: 1; min-width: 140px; height: 42px !important; padding: 0 20px !important; border-radius: 4px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; transition: background .2s, transform .1s !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px; } .wlc-btn:active { transform: scale(.97); } /* Основная кнопка */ .wlc-btn--primary { background: linear-gradient(135deg, #8b3b32, #b33a2d) !important; color: #fff !important; box-shadow: 0 3px 12px rgba(139,59,50,.45); } .wlc-btn--primary:hover { background: linear-gradient(135deg, #a34540, #c44030) !important; box-shadow: 0 4px 18px rgba(139,59,50,.6); } /* Второстепенная кнопка (ссылка на регистрацию) */ .wlc-btn--secondary { background: var(--bg-lighter, #3f3f3f) !important; color: var(--tt-lighter, #e0dfdc) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .wlc-btn--secondary:hover { background: var(--bg-lightest, #585858) !important; color: #fff !important; } /* ── Адаптив ─────────────────────────────────────────────────── */ @media (max-width: 540px) { .wlc-header { padding: 20px 18px 18px; } .wlc-body { padding: 18px 18px 0; } .wlc-footer { padding: 0 18px 20px; flex-direction: column; } .wlc-btn { flex: none; width: 100%; } .wlc-title { font-size: 19px; } .wlc-section { padding: 12px 12px; } }