/* ========================================================================== Дизайн-система проекта Тёмно-красный акцент, светлая и тёмная темы. Темы переключаются атрибутом data-bs-theme на , поэтому компоненты Bootstrap 5.3 подхватывают тёмный режим автоматически. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap'); /* --- Токены: светлая тема --- */ :root, [data-bs-theme="light"] { --bg: #F3F1F1; --bg-gradient: radial-gradient(1200px 600px at 100% -5%, rgba(238,20,40,.10), transparent 60%), radial-gradient(1000px 500px at -10% 105%, rgba(238,20,40,.06), transparent 55%); --surface: #FFFFFF; --surface-2: #F9F7F7; --border: #E4DEDF; --text: #191315; --text-dim: #6D6367; --accent: #EE1428; --accent-hover: #C6101F; --accent-soft: #FDE3E1; --accent-ink: #FFFFFF; --positive: #1D7A44; --shadow-sm: 0 1px 2px rgba(25, 19, 21, .06); --shadow-md: 0 4px 16px rgba(25, 19, 21, .08); --sk-base: #E8E3E4; --sk-shine: #F5F1F2; /* Заливка полей — глубина держится на слоях, а не на рамках */ --fill: #EFEBEC; --fill-strong: #E5DFE0; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); } /* --- Токены: тёмная тема --- */ [data-bs-theme="dark"] { --bg: #121012; --bg-gradient: radial-gradient(1200px 600px at 100% -5%, rgba(255,60,74,.14), transparent 60%), radial-gradient(1000px 500px at -10% 105%, rgba(120,20,30,.18), transparent 55%); --surface: #1B1618; --surface-2: #231C1F; --border: #332A2C; --text: #F1EBEC; --text-dim: #9E9398; /* На тёмном фоне глубокий красный нечитаем, поэтому акцент осветлён */ --accent: #FF3B4A; --accent-hover: #FF5A67; --accent-soft: #2E1518; --accent-ink: #FFFFFF; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 6px 20px rgba(0, 0, 0, .45); --sk-base: #262022; --sk-shine: #322A2D; --fill: #221C1F; --fill-strong: #2C2428; } /* --- База --- */ * { -webkit-tap-highlight-color: transparent; } body { background: var(--bg); background-image: var(--bg-gradient); background-attachment: fixed; color: var(--text); font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.55; margin: 0; min-height: 100vh; overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5 { font-weight: 600; letter-spacing: -0.015em; color: var(--text); } h1 { font-size: 1.75rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15rem; } .text-dim { color: var(--text-dim) !important; } .text-muted { color: var(--text-dim) !important; } .text-accent { color: var(--accent) !important; } /* Текстовый символ рубля — в этой версии bootstrap-icons нет знака ₽, поэтому рисуем его как обычный текст в той же визуальной ячейке. */ .rub-sign { font-weight: 700; line-height: 1; display: inline-block; } /* Цветной кружок-подложка под иконкой — карточки выбора и списки */ .icon-chip { width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: 0 0 auto; } .icon-chip.sm { width: 36px; height: 36px; border-radius: 11px; font-size: 1.05rem; } /* В профиле иконки — насыщенно-красные с белым значком, а не розоватые */ .list-group-flat .icon-chip { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); color: #fff; } .list-group-flat .list-row-danger .icon-chip { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); color: #fff; } /* Плавающая кнопка поддержки — как чат-виджет в мессенджерах */ .fab-wrap { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 82px); width: 100%; max-width: 480px; padding: 0 16px; display: flex; justify-content: flex-end; pointer-events: none; z-index: 900; } .fab { pointer-events: auto; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 1.35rem; box-shadow: var(--shadow-md); transition: transform .15s ease; } .fab:hover { transform: scale(1.06); color: var(--accent-ink); } .fab:active { transform: scale(.96); } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } code, .mono { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace; font-size: 0.92em; } /* Видимый фокус с клавиатуры — без этого интерфейс недоступен с Tab */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* --- Поверхности --- */ .card, .surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } /* Ховер-подъём оставлен только там, где карточка действительно кликабельна */ .card-tap { cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease; } .card-tap:hover, .card-tap:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-md); } .card-tap:active { transform: scale(.995); } /* --- Кнопки --- */ .btn { border-radius: var(--r-md); font-weight: 500; padding: .7rem 1.25rem; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .btn-nspk, .btn-accent { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); } .btn-nspk:hover, .btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); } .btn-nspk:disabled, .btn-accent:disabled { opacity: .55; } .btn-quiet { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-quiet:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); } .btn-lg { padding: .9rem 1.5rem; font-size: 1.02rem; } /* --- Поля ввода --- */ .form-control, .form-select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-md); padding: .75rem .9rem; font-size: 1rem; } .form-control:focus, .form-select:focus { background: var(--surface); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px var(--accent-soft); } .form-control::placeholder { color: var(--text-dim); opacity: .8; } /* Автозаполнение браузера иначе заливает поле своим голубым/жёлтым фоном */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); caret-color: var(--text); transition: background-color 9999s ease-in-out 0s; box-shadow: 0 0 0 1000px var(--surface-2) inset; } .form-label { font-weight: 500; font-size: .88rem; color: var(--text-dim); margin-bottom: .4rem; } .form-text { color: var(--text-dim); font-size: .82rem; } .input-group-text { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--r-md); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } /* --- Уведомления --- */ .alert { border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); padding: .85rem 1rem; font-size: .92rem; } .alert-danger { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .alert-success { border-left: 3px solid #2E8B57; } .alert-warning { border-left: 3px solid #C08A2E; } .alert-info { border-left: 3px solid var(--accent); } /* --- Модальные окна --- */ .modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); } .modal-header, .modal-footer { border-color: var(--border); } /* ========================================================================== Скелетоны загрузки ========================================================================== */ .sk { position: relative; overflow: hidden; background: var(--sk-base); border-radius: var(--r-sm); animation: sk-pulse 2s ease-in-out infinite; } .sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent 0%, var(--sk-shine) 45%, var(--sk-shine) 55%, transparent 100% ); animation: sk-shimmer 1.6s cubic-bezier(.4,0,.2,1) infinite; } @keyframes sk-shimmer { 100% { transform: translateX(100%); } } @keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } } .sk-line { height: 12px; margin-bottom: 10px; } .sk-line.w-40 { width: 40%; } .sk-line.w-60 { width: 60%; } .sk-line.w-80 { width: 80%; } .sk-title { height: 22px; width: 45%; margin-bottom: 18px; border-radius: 8px; } .sk-circle { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; } .sk-btn { height: 44px; width: 150px; border-radius: var(--r-md); } .sk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.4rem; } /* Скелетон по умолчанию скрыт; контент виден всегда. Скелетон можно показать через JS на время загрузки, но он никогда не «съедает» контент. */ #pageSkeleton, #routeSkeleton { display: none; } #pageContent, #mainContent { display: block; } #pageContent.revealed, #mainContent.revealed { animation: sk-reveal .3s cubic-bezier(.32, .72, 0, 1); } @keyframes sk-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Отклик на нажатие — интерфейс должен «отвечать» на палец */ .bank-card, .promo-tile, .action-btn, .list-row, .bank-option, .tab, .card-tap, .mini-card { transition: transform .12s ease, border-color .14s ease, background-color .14s ease, box-shadow .18s ease; } .bank-card:active, .promo-tile:active, .action-btn:active, .list-row:active, .bank-option:active, .card-tap:active, .mini-card:active { transform: scale(.98); } .tab:active { transform: scale(.93); } /* ========================================================================== Каркас: топбар, контент, нижний таббар ========================================================================== */ .brand-logo { height: 30px; width: auto; display: block; } .brand-mark { width: 34px; height: 34px; display: block; } /* Контент держим в ширину «телефона» и центрируем — так кабинет выглядит как мобильное приложение и на десктопе, и на телефоне. */ .app-shell { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg); position: relative; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: calc(var(--sat) + 14px) 16px 4px; background: var(--bg); min-height: 0; } .profile-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: .95rem; text-decoration: none; flex: 0 0 auto; transition: transform .12s ease, filter .14s ease; } .profile-btn:hover { color: var(--accent-ink); filter: brightness(1.06); } .profile-btn:active { transform: scale(.94); } .profile-hero { display: flex; align-items: center; gap: 14px; } /* Градиентная карточка профиля */ .profile-card { display: flex; align-items: center; gap: 16px; border-radius: var(--r-xl); padding: 1.4rem 1.3rem; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); color: #fff; position: relative; overflow: hidden; box-shadow: 0 12px 28px -12px rgba(238,20,40,.55); } .profile-card::after { content: ""; position: absolute; right: -40px; top: -50px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.12); } .profile-card-ava { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.4rem; flex: 0 0 auto; position: relative; z-index: 1; } .profile-card-info { position: relative; z-index: 1; min-width: 0; } .profile-card-name { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; } .profile-card-phone { font-size: .9rem; opacity: .85; margin-top: 2px; } .profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; flex: 0 0 auto; } .profile-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; } .app-content { padding: 0 16px calc(var(--sab) + 92px); min-height: 100vh; } /* --- Нижний таббар --- */ .tabbar { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; display: flex; align-items: flex-start; background: var(--surface); border-top: 1px solid var(--border); padding: 10px 4px calc(var(--sab) + 8px); z-index: 1000; } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: .35rem 0; border-radius: var(--r-sm); color: var(--text-dim); font-size: .68rem; font-weight: 500; transition: color .14s ease; } .tab i { font-size: 1.3rem; } .tab:hover { color: var(--text); } .tab.active { color: var(--accent); } /* Центральная кнопка «Пополнить» — приподнята и всегда красная */ .tab-center { position: relative; color: var(--accent) !important; font-weight: 600; } .tab-center-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 1.5rem; margin-top: -22px; margin-bottom: 1px; box-shadow: 0 6px 18px -4px rgba(238, 20, 40, .6); transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease; } .tab-center:hover .tab-center-btn { transform: translateY(-2px) scale(1.04); } .tab-center:active .tab-center-btn { transform: scale(.92); } .tab-center i { font-size: 1.5rem; } /* --- Список пунктов (страница «Ещё») --- */ .list-group-flat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .list-row { display: flex; align-items: center; gap: 12px; padding: .95rem 1rem; color: var(--text); font-weight: 500; font-size: .95rem; border-bottom: 1px solid var(--border); } button.list-row { width: 100%; border: none; background: transparent; text-align: left; font-family: inherit; cursor: pointer; } .list-row:last-child { border-bottom: none; } .list-row:hover { background: var(--surface-2); color: var(--text); } .list-row i:first-child { font-size: 1.2rem; color: var(--accent); width: 22px; } .list-row > span:not(.icon-chip):not(.bank-initial) { flex: 1; } .list-row .chevron { color: var(--text-dim); font-size: 1rem; } .list-row-danger, .list-row-danger i:first-child { color: var(--accent); } .list-row-sk { display: flex; align-items: center; gap: 12px; padding: .95rem 0; } /* --- Компактная строка счёта для списка на главной --- */ /* --- Карточка счёта в стиле банковской карты --- */ .bank-card { position: relative; border-radius: var(--r-xl); padding: 1.35rem 1.4rem 1.25rem; overflow: hidden; display: block; min-height: 132px; } /* Мягкий блик, чтобы плашка не выглядела плоской заливкой */ .bank-card::after { content: ""; position: absolute; top: -55%; right: -25%; width: 75%; height: 190%; background: rgba(255, 255, 255, .09); transform: rotate(22deg); pointer-events: none; } .bank-card > * { position: relative; z-index: 1; } .bank-card:hover { color: #fff; } .bank-card .bc-type { font-size: .78rem; opacity: .85; margin-bottom: .35rem; } .bank-card .bc-balance { font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .9rem; } .bank-card .bc-number { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: .85rem; opacity: .9; letter-spacing: .06em; } .bank-card .bc-chip { width: 30px; height: 22px; border-radius: 5px; background: rgba(255,255,255,.32); margin-bottom: .8rem; } /* --- Цвета карт --- Рублёвый входящий — тёплый нежный (песок → персик), текст тёмный. Валютные входящие, кредитный и эскроу — свои тёмные градиенты. */ /* По умолчанию (рублёвый входящий): тёплая светлая карта */ .bank-card { background: linear-gradient(140deg, #F6E7D4 0%, #EFC9A8 55%, #E7B48C 100%); color: #4A3524; box-shadow: 0 12px 28px -10px rgba(160, 110, 60, .5); } .bank-card:hover { color: #4A3524; } .bank-card .bc-type { opacity: .75; } .bank-card .bc-number { opacity: .7; } .bank-card .bc-chip { background: rgba(74, 53, 36, .22); } .bank-card::after { background: rgba(255, 255, 255, .18); } /* Валютные входящие — прохладные оттенки, текст светлый */ .bank-card.c-usd { background: linear-gradient(140deg, #2E6E5B 0%, #1C4A3E 100%); color: #fff; } .bank-card.c-eur { background: linear-gradient(140deg, #34568B 0%, #1E3157 100%); color: #fff; } .bank-card.c-cny { background: linear-gradient(140deg, #9E4B2E 0%, #5E2618 100%); color: #fff; } /* Кредитный и эскроу — тёмные, независимо от валюты */ .bank-card.t-credit { background: linear-gradient(140deg, #4B3A57 0%, #241726 100%); color: #fff; } .bank-card.t-escrow { background: linear-gradient(140deg, #1F4A52 0%, #10262E 100%); color: #fff; } /* Для всех тёмных вариантов возвращаем светлые вспомогательные тона */ .bank-card.c-usd, .bank-card.c-eur, .bank-card.c-cny, .bank-card.t-credit, .bank-card.t-escrow { box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .5); } .bank-card.c-usd:hover, .bank-card.c-eur:hover, .bank-card.c-cny:hover, .bank-card.t-credit:hover, .bank-card.t-escrow:hover { color: #fff; } .bank-card.c-usd .bc-chip, .bank-card.c-eur .bc-chip, .bank-card.c-cny .bc-chip, .bank-card.t-credit .bc-chip, .bank-card.t-escrow .bc-chip { background: rgba(255,255,255,.32); } .bank-card.c-usd .bc-type, .bank-card.c-eur .bc-type, .bank-card.c-cny .bc-type, .bank-card.t-credit .bc-type, .bank-card.t-escrow .bc-type { opacity: .85; } .bank-card.c-usd .bc-number, .bank-card.c-eur .bc-number, .bank-card.c-cny .bc-number, .bank-card.t-credit .bc-number, .bank-card.t-escrow .bc-number { opacity: .9; } .bank-card.c-usd::after, .bank-card.c-eur::after, .bank-card.c-cny::after, .bank-card.t-credit::after, .bank-card.t-escrow::after { background: rgba(255,255,255,.09); } /* --- Кнопки действий под карточкой --- */ .actions-row { display: flex; gap: 8px; } .action-btn { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: .75rem .4rem; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--text); font-size: .73rem; font-weight: 500; text-align: center; transition: border-color .14s ease, background-color .14s ease; } .action-btn i { font-size: 1.25rem; color: var(--accent); } .action-btn:hover { border-color: var(--accent); color: var(--text); } .action-btn:active { transform: scale(.97); } .action-btn.disabled { opacity: .45; pointer-events: none; } /* --- Промо-полоса на главной --- */ .promo-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 1.25rem; scrollbar-width: none; } .promo-strip::-webkit-scrollbar { display: none; } .promo-tile { flex: 0 0 128px; height: 92px; border-radius: 14px; padding: .65rem .7rem; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; color: var(--text); font-size: .78rem; font-weight: 500; line-height: 1.25; transition: border-color .14s ease; } .promo-tile:hover { border-color: var(--accent); color: var(--text); } .promo-tile i { font-size: 1.1rem; color: var(--accent); } /* --- Выбор банка: кнопка + нижняя шторка --- */ .picker-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: .8rem .9rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font-size: .95rem; font-weight: 500; text-align: left; cursor: pointer; transition: border-color .14s ease; } .picker-btn:hover { border-color: var(--accent); } .picker-btn:active { transform: scale(.99); } .picker-btn .picker-label { flex: 1; } .picker-btn.empty .picker-label { color: var(--text-dim); font-weight: 400; } .picker-btn .chevron { color: var(--text-dim); } .picker-btn.invalid { border-color: var(--accent); } /* Строка банка внутри шторки */ .bank-row .bank-check { margin-left: auto; color: var(--accent); opacity: 0; } .bank-row.selected { color: var(--accent); } .bank-row.selected .bank-check { opacity: 1; } /* Кружок с первой буквой вместо логотипа банка — чужие логотипы не используем */ .bank-initial { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: .95rem; flex: 0 0 auto; } /* Шторка снизу */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1200; opacity: 0; pointer-events: none; transition: opacity .22s ease; } .sheet-backdrop.open { opacity: 1; pointer-events: auto; } .sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%); width: 100%; max-width: 480px; max-height: 78vh; background: var(--surface); border-radius: 20px 20px 0 0; z-index: 1201; display: flex; flex-direction: column; visibility: hidden; transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility .28s; } .sheet.open { transform: translateX(-50%) translateY(0); visibility: visible; } .sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--border); margin: 10px auto 4px; flex: 0 0 auto; } .sheet-head { padding: .5rem 1.1rem .75rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .sheet-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 .6rem; } .sheet-body { overflow-y: auto; padding: .35rem 0 calc(var(--sab) + 1rem); -webkit-overflow-scrolling: touch; } .sheet-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: .8rem 1.1rem; background: transparent; border: none; color: var(--text); font-size: .95rem; font-weight: 500; text-align: left; cursor: pointer; font-family: inherit; } .sheet-option:hover { background: var(--surface-2); } .sheet-option .check { margin-left: auto; color: var(--accent); display: none; } .sheet-option.selected .check { display: block; } .sheet-option.selected { color: var(--accent); } /* --- Анимации нажатия и появления страницы --- */ .tappable { transition: transform .1s ease; } .tappable:active { transform: scale(.97); } /* --- Компактная карточка счёта для списка на главной --- */ .mini-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: .8rem .9rem; color: var(--text); transition: border-color .14s ease, transform .12s ease; } .mini-card:hover { border-color: var(--accent); color: var(--text); } .mini-card:active { transform: scale(.985); } /* Цветной прямоугольник слева — визуальный «пластик» карты в миниатюре */ .mini-chip { width: 42px; height: 30px; border-radius: 7px; flex: 0 0 auto; background: linear-gradient(140deg, #EFC9A8 0%, #E7B48C 100%); position: relative; } .mini-chip::after { content: ""; position: absolute; left: 5px; top: 10px; width: 9px; height: 7px; border-radius: 2px; background: rgba(74, 53, 36, .38); } .mini-chip.c-usd { background: linear-gradient(140deg, #2E6E5B 0%, #1C4A3E 100%); } .mini-chip.c-eur { background: linear-gradient(140deg, #34568B 0%, #1E3157 100%); } .mini-chip.c-cny { background: linear-gradient(140deg, #9E4B2E 0%, #5E2618 100%); } .mini-chip.t-credit { background: linear-gradient(140deg, #4B3A57 0%, #241726 100%); } .mini-chip.t-escrow { background: linear-gradient(140deg, #1F4A52 0%, #10262E 100%); } .mini-chip.c-usd::after, .mini-chip.c-eur::after, .mini-chip.c-cny::after, .mini-chip.t-credit::after, .mini-chip.t-escrow::after { background: rgba(255,255,255,.55); } .mini-card .mc-body { flex: 1; min-width: 0; } .mini-card .mc-type { font-size: .82rem; color: var(--text-dim); margin-bottom: 1px; } .mini-card .mc-balance { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; } .mini-card .mc-num { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: .76rem; color: var(--text-dim); } .mini-card .mc-chevron { color: var(--text-dim); font-size: .95rem; } /* --- Шапка информационной страницы --- */ .info-hero { display: flex; align-items: center; gap: 12px; } /* ========================================================================== Поля с плавающей подписью Заливка вместо рамки — так поле читается как «углубление» в поверхности, а не как нарисованный прямоугольник. ========================================================================== */ .field { position: relative; background: var(--fill); border-radius: var(--r-lg); padding: .85rem 1.1rem .7rem; border: 1px solid transparent; transition: background-color .16s ease, border-color .16s ease; } .field:focus-within { background: var(--fill-strong); border-color: var(--accent); } .field.invalid { border-color: var(--accent); } .field-label { display: block; font-size: .78rem; color: var(--text-dim); line-height: 1.2; margin-bottom: 2px; transition: color .16s ease; } .field:focus-within .field-label { color: var(--accent); } /* Сам input — прозрачный, без рамок: контейнер уже нарисован */ .field-input { width: 100%; border: none; background: transparent; color: var(--text); font-family: inherit; font-size: 1.05rem; font-weight: 500; padding: 0; outline: none; } .field-input::placeholder { color: var(--text-dim); font-weight: 400; } .field-input:focus { outline: none; box-shadow: none; } /* Крупный ввод суммы */ .field-amount .field-input { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; } .field-row { display: flex; align-items: center; gap: 10px; } .field-row .field-suffix { font-size: 1.55rem; font-weight: 700; color: var(--text-dim); flex: 0 0 auto; } textarea.field-input { resize: none; line-height: 1.45; } /* ========================================================================== Горизонтальный ряд карточек-получателей ========================================================================== */ .chip-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; scroll-snap-type: x proximity; } .chip-row::-webkit-scrollbar { display: none; } .chip-card { flex: 0 0 142px; scroll-snap-align: start; background: var(--fill); border: 2px solid transparent; border-radius: var(--r-lg); padding: .8rem .85rem; cursor: pointer; color: var(--text); text-align: left; font-family: inherit; position: relative; transition: border-color .16s ease, background-color .16s ease, transform .12s ease; } .chip-card:active { transform: scale(.97); } .chip-card.selected { border-color: var(--accent); background: var(--accent-soft); } .chip-card .chip-avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: #fff; margin-bottom: .55rem; } .chip-card .chip-name { font-size: .86rem; font-weight: 600; line-height: 1.2; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chip-card .chip-sub { font-size: .76rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chip-card .chip-check { position: absolute; top: .7rem; right: .7rem; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: .7rem; opacity: 0; transform: scale(.6); transition: opacity .16s ease, transform .16s ease; } .chip-card.selected .chip-check { opacity: 1; transform: scale(1); } /* Оттенки аватаров берём из своей палитры, а не из фирменных цветов банков */ .av-1 { background: #6B4EA8; } .av-2 { background: #1F7A5C; } .av-3 { background: #B5561F; } .av-4 { background: #2E5FA3; } .av-5 { background: #A32E5C; } .av-6 { background: #4A6572; } /* ========================================================================== Нижняя закреплённая кнопка действия ========================================================================== */ .cta-dock { position: sticky; bottom: calc(var(--sab) + 78px); padding-top: .75rem; margin-top: 1.5rem; background: linear-gradient(to top, var(--bg) 62%, transparent); z-index: 5; } .btn-cta { width: 100%; border: none; border-radius: var(--r-lg); background: var(--accent); color: var(--accent-ink); font-family: inherit; font-size: 1.02rem; font-weight: 600; padding: 1rem; transition: background-color .16s ease, transform .12s ease, opacity .16s ease; } .btn-cta:hover { background: var(--accent-hover); color: var(--accent-ink); } .btn-cta:active { transform: scale(.985); } .btn-cta:disabled { opacity: .45; } .cta-note { text-align: center; font-size: .78rem; color: var(--text-dim); margin: .7rem 0 0; } /* iOS зумит страницу при фокусе на поле со шрифтом < 16px. На узких экранах поднимаем шрифт полей до 16px, чтобы этого не было. */ @media (max-width: 700px) { .form-control, .form-select, .field-input, input, textarea, select { font-size: 16px; } } /* ========================================================================== Главная страница ========================================================================== */ .home-greet { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); padding: 2px 2px; } .home-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 1rem; flex: 0 0 auto; } .home-greet-name { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; } .home-greet-caret { color: var(--text-dim); font-size: 1rem; } /* Крупные промо-плитки как на витрине приложения */ .promo-hero { flex: 0 0 132px; height: 132px; border-radius: 18px; padding: .85rem; display: flex; flex-direction: column; justify-content: space-between; color: #fff; font-size: .92rem; font-weight: 600; line-height: 1.2; position: relative; overflow: hidden; transition: transform .14s ease, box-shadow .18s ease; } .promo-hero::after { content: ""; position: absolute; right: -30px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.12); pointer-events: none; } .promo-hero:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(0,0,0,.4); } .promo-hero:active { transform: scale(.97); } .promo-hero i { font-size: 1.6rem; position: relative; z-index: 1; } .promo-hero span { position: relative; z-index: 1; } .promo-hero.ph-1 { background: linear-gradient(150deg, #EE1428 0%, #A00E1B 100%); } .promo-hero.ph-2 { background: linear-gradient(150deg, #3E63B0 0%, #21356B 100%); } .promo-hero.ph-3 { background: linear-gradient(150deg, #2E9E8F 0%, #175E57 100%); } .promo-hero.ph-4 { background: linear-gradient(150deg, #B5642C 0%, #6E3418 100%); } .promo-hero.ph-5 { background: linear-gradient(150deg, #6B4EA8 0%, #3A2568 100%); } .promo-hero.ph-6 { background: linear-gradient(150deg, #EE1428 0%, #A00E1B 100%); } /* Виджеты «Все операции / Уведомления» */ .widget-tile { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 1rem 1.1rem 1.15rem; color: var(--text); transition: transform .12s ease, border-color .14s ease; } .widget-tile:hover { border-color: var(--accent); color: var(--text); } .widget-tile:active { transform: scale(.98); } .widget-title { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .1rem; display: flex; align-items: center; gap: 6px; } .widget-badge { background: var(--accent); color: var(--accent-ink); font-size: .7rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-grid; place-items: center; padding: 0 5px; } .widget-sub { font-size: .78rem; color: var(--text-dim); margin-bottom: .9rem; } .widget-value { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Быстрые действия */ .quick-row { display: flex; gap: 8px; } .quick-act { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--text); font-size: .72rem; font-weight: 500; text-align: center; line-height: 1.15; } .quick-ic { width: 54px; height: 54px; border-radius: 50%; background: var(--fill); color: var(--accent); display: grid; place-items: center; font-size: 1.35rem; transition: transform .12s ease, background-color .14s ease; } .quick-act:hover { color: var(--text); } .quick-act:hover .quick-ic { background: var(--accent-soft); } .quick-act:active .quick-ic { transform: scale(.9); } /* Инфо-баннер снизу */ .promo-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--fill); border-radius: var(--r-xl); padding: 1.1rem 1.2rem; color: var(--text); transition: transform .12s ease; } .promo-banner:active { transform: scale(.99); } .promo-banner-title { font-weight: 700; letter-spacing: -.01em; } .promo-banner-sub { font-size: .82rem; color: var(--text-dim); margin-top: 2px; } .promo-banner > i { font-size: 1.8rem; color: var(--accent); flex: 0 0 auto; } /* Статусы операций и кнопки квитанции */ .badge-done { background: rgba(46,139,87,.15); color: #2E8B57; font-weight: 600; } .badge-processing { background: rgba(200,140,46,.16); color: #C08A2E; font-weight: 600; } [data-bs-theme="dark"] .badge-done { background: rgba(46,139,87,.22); color: #5FCf8f; } [data-bs-theme="dark"] .badge-processing { background: rgba(200,140,46,.22); color: #E0A94A; } .op-actions { display: flex; gap: 8px; flex-wrap: wrap; } .op-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--fill); color: var(--text); border-radius: 999px; padding: .45rem .85rem; font-size: .82rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: border-color .14s ease, background-color .14s ease, transform .12s ease; } .op-btn:hover { border-color: var(--accent); color: var(--accent); } .op-btn:active { transform: scale(.96); } /* ========================================================================== Чат поддержки (мессенджер) ========================================================================== */ .chat-head { display: flex; align-items: center; gap: 10px; } .chat-head-ava { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 1.15rem; flex: 0 0 auto; } .chat-head-name { font-weight: 600; font-size: 1.02rem; line-height: 1.1; } .chat-head-status { font-size: .78rem; color: #2E8B57; } /* Лента занимает высоту между шапкой и полем ввода */ .chat-thread { display: flex; flex-direction: column; gap: 8px; padding: 6px 2px calc(96px + var(--sab)); min-height: 40vh; } .chat-sk { padding: 12px 0; } .chat-empty { margin: auto; text-align: center; color: var(--text-dim); padding: 3rem 1rem; } .chat-empty i { font-size: 2.2rem; display: block; margin-bottom: .6rem; color: var(--accent); opacity: .7; } .chat-msg { display: flex; max-width: 82%; } .chat-msg.out { align-self: flex-end; justify-content: flex-end; } .chat-msg.in { align-self: flex-start; } .bubble { position: relative; border-radius: 18px; padding: .5rem .75rem .95rem; font-size: .95rem; line-height: 1.4; word-break: break-word; animation: bubble-in .22s cubic-bezier(.32,.72,0,1); } @keyframes bubble-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } } .chat-msg.out .bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 6px; } .chat-msg.in .bubble { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 6px; } .bubble-text { white-space: pre-wrap; } .bubble-time { position: absolute; right: 10px; bottom: 5px; font-size: .66rem; opacity: .65; } .chat-msg.out .bubble-time { color: rgba(255,255,255,.8); } /* Вложения в пузыре */ .bubble-img { display: block; margin: -.1rem 0 .3rem; } .bubble-img img { display: block; max-width: 220px; max-height: 240px; border-radius: 12px; object-fit: cover; } .bubble-file { display: flex; align-items: center; gap: 10px; padding: .5rem .3rem; color: inherit; text-decoration: none; } .bubble-file-ic { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 1.2rem; flex: 0 0 auto; } .chat-msg.in .bubble-file-ic { background: var(--accent-soft); color: var(--accent); } .bubble-file-name { font-size: .9rem; word-break: break-all; } /* Поле ввода, закреплённое над таббаром */ .chat-composer { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + var(--sab)); width: 100%; max-width: 480px; padding: 8px 12px; background: var(--bg); border-top: 1px solid var(--border); z-index: 30; } .chat-input-row { display: flex; align-items: flex-end; gap: 8px; } .chat-attach { width: 40px; height: 40px; border-radius: 50%; background: var(--fill); color: var(--text-dim); display: grid; place-items: center; font-size: 1.25rem; cursor: pointer; flex: 0 0 auto; } .chat-attach:hover { color: var(--accent); } .chat-input { flex: 1; border: 1px solid var(--border); background: var(--fill); border-radius: 20px; padding: .6rem 1rem; font-family: inherit; font-size: 16px; color: var(--text); resize: none; outline: none; max-height: 120px; line-height: 1.35; } .chat-input:focus { border-color: var(--accent); background: var(--surface); } .chat-send { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 1.3rem; cursor: pointer; flex: 0 0 auto; transition: transform .12s ease, opacity .14s ease; } .chat-send:active { transform: scale(.9); } .chat-send:disabled { opacity: .4; cursor: default; } /* Превью выбранного файла до отправки */ .attach-preview { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px 10px; margin-bottom: 8px; animation: sk-reveal .2s ease-out; } .attach-preview img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; } .attach-fileic { width: 44px; height: 44px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 1.3rem; flex: 0 0 auto; } .attach-name { flex: 1; font-size: .88rem; color: var(--text); word-break: break-all; } .attach-remove { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--fill-strong); color: var(--text-dim); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; } .acc-head-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; } .acc-head-balance { font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; margin: .1rem 0; } .acc-head-num { font-size: .85rem; color: var(--text-dim); letter-spacing: .06em; } /* Мини-карта под балансом */ .acc-mini-card { width: 92px; height: 58px; border-radius: 12px; position: relative; background: linear-gradient(140deg, #EFC9A8 0%, #E7B48C 100%); overflow: hidden; } .acc-mini-card.c-usd { background: linear-gradient(140deg, #2E6E5B 0%, #1C4A3E 100%); } .acc-mini-card.c-eur { background: linear-gradient(140deg, #34568B 0%, #1E3157 100%); } .acc-mini-card.c-cny { background: linear-gradient(140deg, #9E4B2E 0%, #5E2618 100%); } .acc-mini-card.t-credit { background: linear-gradient(140deg, #4B3A57 0%, #241726 100%); } .acc-mini-card.t-escrow { background: linear-gradient(140deg, #1F4A52 0%, #10262E 100%); } .acc-mini-chip { position: absolute; left: 10px; top: 12px; width: 20px; height: 15px; border-radius: 3px; background: rgba(255,255,255,.55); } .acc-mini-sys { position: absolute; right: 9px; bottom: 8px; font-size: .62rem; font-weight: 700; letter-spacing: .05em; color: rgba(255,255,255,.9); } /* Ряд действий */ .acc-actions { display: flex; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 1rem .5rem; } .acc-action { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--text); font-size: .74rem; font-weight: 500; text-align: center; line-height: 1.15; } .acc-action-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 1.25rem; transition: transform .12s ease, background-color .14s ease; } .acc-action:hover { color: var(--text); } .acc-action:active .acc-action-ic { transform: scale(.9); } /* Виджеты операций/бонусов */ .acc-widget { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 1rem 1.1rem 1.15rem; color: var(--text); transition: transform .12s ease, border-color .14s ease; } .acc-widget:hover { border-color: var(--accent); color: var(--text); } .acc-widget:active { transform: scale(.98); } .acc-widget-muted { background: var(--fill); border-color: transparent; } .acc-widget-title { font-size: 1.02rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; } .acc-widget-sub { font-size: .78rem; color: var(--text-dim); margin: .3rem 0 .6rem; } .acc-widget-value { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; } .acc-widget-crown { display: inline-flex; align-items: center; gap: 5px; background: var(--fill-strong); color: var(--text-dim); border-radius: 999px; padding: .2rem .6rem; font-size: .8rem; font-weight: 600; } /* Памятка над кнопкой кредитной линии */ .credit-note { font-size: .8rem; color: var(--text-dim); text-align: center; margin: 0 0 .7rem; padding: 0 .5rem; } /* ========================================================================== Модалка операции: спиннер → галочка ========================================================================== */ .op-backdrop { position: fixed; inset: 0; background: var(--om-scrim, rgba(0,0,0,.5)); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 1400; } .op-backdrop.open { opacity: 1; pointer-events: auto; } .op-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.96); width: calc(100% - 48px); max-width: 360px; background: var(--surface); border-radius: var(--r-xl); padding: 2.2rem 1.5rem 1.5rem; text-align: center; opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s cubic-bezier(.32,.72,0,1); z-index: 1401; } .op-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .op-stage { display: flex; flex-direction: column; align-items: center; } .op-text { font-size: .95rem; color: var(--text-dim); } .op-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; } .op-sub { font-size: .88rem; color: var(--text-dim); margin-top: .4rem; } /* Крутящийся кружок */ .op-spinner { width: 58px; height: 58px; border-radius: 50%; border: 5px solid var(--fill-strong); border-top-color: var(--accent); border-right-color: var(--accent); animation: op-spin .7s cubic-bezier(.45,.05,.35,.95) infinite; will-change: transform; } @keyframes op-spin { to { transform: rotate(360deg); } } /* Галочка с прорисовкой */ .op-check-svg { width: 72px; height: 72px; } .op-check-circle { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: op-circle .5s ease-out forwards; } .op-check-mark { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: op-mark .35s .45s ease-out forwards; } @keyframes op-circle { to { stroke-dashoffset: 0; } } @keyframes op-mark { to { stroke-dashoffset: 0; } } /* --- Способы перевода: цветные карточки --- */ .method-card { width: 100%; display: flex; align-items: center; gap: 14px; border: none; border-radius: var(--r-xl); padding: 1.15rem 1.2rem; margin-bottom: 12px; cursor: pointer; text-align: left; font-family: inherit; color: #fff; position: relative; overflow: hidden; transition: transform .14s ease, box-shadow .18s ease; } .method-card::after { content: ""; position: absolute; right: -20px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.1); pointer-events: none; } .method-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0,0,0,.4); } .method-card:active { transform: scale(.98); } .method-card .method-ic { width: 50px; height: 50px; border-radius: 15px; background: rgba(255,255,255,.2); color: #fff; display: grid; place-items: center; font-size: 1.5rem; flex: 0 0 auto; position: relative; z-index: 1; } .method-card .method-body { flex: 1; min-width: 0; position: relative; z-index: 1; } .method-card .method-name { display: block; font-weight: 700; font-size: 1.05rem; color: #fff; } .method-card .method-sub { display: block; font-size: .82rem; color: rgba(255,255,255,.95); margin-top: 2px; } .method-card .method-caret { opacity: .9; color: #fff; position: relative; z-index: 1; } .mc-card { background: linear-gradient(135deg, #EE1428 0%, #A00E1B 100%); } .mc-sbp { background: linear-gradient(135deg, #7A3EA8 0%, #45215E 100%); } .mc-nspk { background: linear-gradient(135deg, #2E9E8F 0%, #175E57 100%); } .method-row { width: 100%; display: flex; align-items: center; gap: 14px; background: var(--fill); border: none; border-radius: var(--r-lg); padding: 1rem 1.1rem; margin-bottom: 10px; cursor: pointer; text-align: left; font-family: inherit; color: var(--text); transition: background-color .14s ease, transform .12s ease; } .method-row:hover { background: var(--fill-strong); } .method-row:active { transform: scale(.985); } .method-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 1.4rem; flex: 0 0 auto; } .method-body { flex: 1; min-width: 0; } .method-name { display: block; font-weight: 600; font-size: 1rem; } .method-sub { display: block; font-size: .82rem; color: var(--text-dim); margin-top: 1px; } .method-caret { color: var(--text-dim); } .nspk-found { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-md); padding: .7rem 1rem; font-weight: 600; font-size: .95rem; animation: sk-reveal .28s cubic-bezier(.32,.72,0,1); } .nspk-found i { font-size: 1.2rem; } /* --- Строки перевода «Откуда / Куда» (между счетами) --- */ .xfer-row { display: flex; align-items: center; gap: 12px; background: var(--fill); border-radius: var(--r-lg); padding: .85rem 1rem; cursor: pointer; transition: background-color .14s ease, transform .12s ease; } .xfer-row:active { transform: scale(.99); } .xfer-row:hover { background: var(--fill-strong); } .xfer-main { flex: 1; min-width: 0; } .xfer-cap { font-size: .78rem; color: var(--text-dim); margin-bottom: 2px; } .xfer-balance { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; } .xfer-sub { font-size: .82rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xfer-badge { width: 40px; height: 28px; border-radius: 7px; flex: 0 0 auto; background: linear-gradient(140deg, #EFC9A8 0%, #E7B48C 100%); } .xfer-badge.warm { background: linear-gradient(140deg, #EFC9A8 0%, #E7B48C 100%); } .xfer-badge.c-usd { background: linear-gradient(140deg, #2E6E5B 0%, #1C4A3E 100%); } .xfer-badge.c-eur { background: linear-gradient(140deg, #34568B 0%, #1E3157 100%); } .xfer-badge.c-cny { background: linear-gradient(140deg, #9E4B2E 0%, #5E2618 100%); } .xfer-badge.t-credit { background: linear-gradient(140deg, #4B3A57 0%, #241726 100%); } .xfer-badge.t-escrow { background: linear-gradient(140deg, #1F4A52 0%, #10262E 100%); } .xfer-caret { color: var(--text-dim); font-size: .95rem; } .xfer-swap-wrap { display: flex; justify-content: center; height: 0; position: relative; z-index: 2; } .xfer-swap { width: 40px; height: 40px; margin: -12px 0; border-radius: 50%; border: 3px solid var(--bg); background: var(--surface); color: var(--accent); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .22s ease; } .xfer-swap:active { transform: rotate(180deg) scale(.9); } .xfer-amount { background: var(--fill); border-radius: var(--r-lg); padding: .85rem 1rem; } .xfer-amount-input { width: 100%; border: none; background: transparent; color: var(--text); font-family: inherit; font-size: 1.5rem; font-weight: 700; padding: 0; outline: none; } .xfer-clear { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--fill-strong); color: var(--text-dim); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; } .xfer-all { margin-top: 10px; border: none; background: var(--fill); border-radius: 999px; padding: .5rem 1rem; font-size: .88rem; font-weight: 500; color: var(--text); cursor: pointer; } .xfer-all:active { transform: scale(.97); } /* --- Разделитель со сменой счётов местами --- */ .swap-divider { display: flex; align-items: center; gap: 12px; } .swap-line { flex: 1; height: 1px; background: var(--border); } .swap-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--accent); display: grid; place-items: center; font-size: 1rem; cursor: pointer; flex: 0 0 auto; transition: transform .22s ease, border-color .16s ease; } .swap-btn:hover { border-color: var(--accent); } .swap-btn:active { transform: rotate(180deg) scale(.92); } /* --- Свайп-карусель счетов --- */ .acc-carousel { position: relative; } /* Вьюпорт шире слайда — соседние карты подглядывают по краям, это и создаёт ощущение стопки, а не одной плоской плашки */ .acc-viewport { overflow: hidden; margin: 0 -16px; padding: 4px 0 6px; } .acc-track { display: flex; transition: transform .42s cubic-bezier(.22, .61, .36, 1); touch-action: pan-y; cursor: grab; } .acc-track.dragging { transition: none; cursor: grabbing; } .acc-slide { flex: 0 0 100%; min-width: 0; padding: 0 16px; box-sizing: border-box; /* Неактивные карты чуть меньше и приглушены — глубина по оси Z */ transform: scale(.92); opacity: .5; transition: transform .42s cubic-bezier(.22, .61, .36, 1), opacity .42s ease; } .acc-slide.is-active { transform: scale(1); opacity: 1; } .acc-dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; } .acc-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--border); transition: width .26s ease, background-color .26s ease; } .acc-dots span.active { width: 18px; background: var(--accent); } /* --- Переключатель темы --- */ .theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); cursor: pointer; display: grid; place-items: center; font-size: 1rem; flex: 0 0 auto; transition: color .14s ease, border-color .14s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } /* Иконка зависит от активной темы */ [data-bs-theme="light"] [data-theme-toggle] .icon-dark { display: inline-block; } [data-bs-theme="light"] [data-theme-toggle] .icon-light { display: none; } [data-bs-theme="dark"] [data-theme-toggle] .icon-dark { display: none; } [data-bs-theme="dark"] [data-theme-toggle] .icon-light { display: inline-block; } /* ========================================================================== Страницы входа и регистрации ========================================================================== */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem 5rem; } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); width: 100%; max-width: 400px; overflow: hidden; } .auth-body { padding: 2rem 1.75rem 1.75rem; } .auth-title { font-size: 1.3rem; margin: 0 0 .3rem; } .auth-sub { color: var(--text-dim); font-size: .9rem; margin-bottom: 1.5rem; } /* Метка и переключатель темы сидят в углах страницы, а не внутри карточки */ .corner-mark { position: fixed; top: calc(var(--sat) + 1rem); left: calc(var(--sal) + 1rem); width: 40px; height: 40px; display: grid; place-items: center; z-index: 10; } .corner-mark img { width: 40px; height: 40px; display: block; } .corner-theme.theme-toggle { position: fixed; top: calc(var(--sat) + 1rem); right: calc(var(--sar) + 1rem); z-index: 10; } /* Индикатор шага регистрации */ .steps { display: flex; gap: 5px; margin-bottom: 1.5rem; } .steps span { height: 3px; flex: 1; border-radius: 2px; background: var(--border); } .steps span.done { background: var(--accent); } .corner-links { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: .9rem 1.25rem calc(var(--sab) + .9rem); font-size: .8rem; pointer-events: none; } .corner-links a { color: var(--text-dim); pointer-events: auto; } .corner-links a:hover { color: var(--accent); } @media (max-width: 420px) { .corner-links { font-size: .72rem; padding-inline: .75rem; } } /* --- Документы (условия, политика) --- */ .doc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); max-width: 72ch; margin: 2.5rem auto; padding: 2.5rem; } .doc h1 { margin-bottom: .3rem; } .doc h2 { font-size: 1.05rem; margin-top: 2rem; } .doc p, .doc li { font-size: .94rem; line-height: 1.7; } /* --- Уважение к настройке «уменьшить движение» --- */ @media (prefers-reduced-motion: reduce) { *:not(.op-spinner):not(.op-check-circle):not(.op-check-mark):not(.sk):not(.sk::after), *::before, *:not(.sk)::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } /* Индикаторы прогресса должны крутиться всегда — это статус операции */ .op-spinner { animation: op-spin .8s linear infinite !important; } .op-check-circle { animation: op-circle .5s ease-out forwards !important; } .op-check-mark { animation: op-mark .35s .45s ease-out forwards !important; } .sk { animation: sk-pulse 2s ease-in-out infinite !important; } .sk::after { animation: sk-shimmer 1.6s cubic-bezier(.4,0,.2,1) infinite !important; } } /* ========================================================================== Админ-панель ========================================================================== */ .admin-shell { max-width: 720px; margin: 0 auto; min-height: 100vh; } .admin-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--sat) + 14px) 16px 14px; background: var(--bg); border-bottom: 1px solid var(--border); } .admin-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; } .admin-mark { width: 28px; height: 28px; } .admin-content { padding: 1.25rem 16px calc(var(--sab) + 3rem); } .admin-search { position: relative; display: flex; align-items: center; background: var(--fill); border-radius: var(--r-lg); padding: 0 .9rem; } .admin-search i { color: var(--text-dim); } .admin-search input { flex: 1; border: none; background: transparent; outline: none; padding: .85rem .7rem; font-size: 16px; color: var(--text); font-family: inherit; } .admin-search-clear { color: var(--text-dim); padding: .4rem; } .admin-client-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: .85rem 1rem; margin-bottom: 8px; color: var(--text); transition: border-color .14s ease, transform .12s ease; } .admin-client-card:hover { border-color: var(--accent); color: var(--text); } .admin-client-card:active { transform: scale(.99); } .admin-client-ava { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; flex: 0 0 auto; text-transform: uppercase; } .admin-client-ava.lg { width: 60px; height: 60px; font-size: 1.5rem; } .admin-client-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .admin-client-name { font-weight: 600; } .admin-client-sub { font-size: .8rem; color: var(--text-dim); } .verif-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .vd-full { background: #2E8B57; } .vd-partial { background: #C08A2E; } .vd-none { background: var(--border); } .admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.1rem; } .admin-card-title { font-weight: 700; margin-bottom: .8rem; } .admin-acct { padding: .8rem 0; border-bottom: 1px solid var(--border); } .admin-acct:last-child { border-bottom: none; padding-bottom: 0; } .admin-inline-form { display: flex; gap: 6px; flex-wrap: wrap; } .admin-inline-form .form-control { max-width: 160px; } .admin-op { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--border); gap: 10px; } .admin-op:last-child { border-bottom: none; } /* Плашка верификации в профиле клиента */ .verif-badge { display: inline-flex; align-items: center; gap: 8px; padding: .6rem 1rem; border-radius: var(--r-md); font-weight: 600; font-size: .92rem; } .verif-full { background: rgba(46,139,87,.15); color: #2E8B57; } .verif-partial { background: rgba(200,140,46,.16); color: #C08A2E; } .verif-none { background: var(--fill); color: var(--text-dim); } [data-bs-theme="dark"] .verif-full { color: #5FCf8f; } [data-bs-theme="dark"] .verif-partial { color: #E0A94A; } /* ========================================================================== Оверлей операции (перевод) + анимация баланса ========================================================================== */ .op-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 1500; padding: 24px; } .op-overlay.open { display: flex; animation: op-fade .2s ease; } @keyframes op-fade { from { opacity: 0; } to { opacity: 1; } } .op-box { background: var(--surface); border-radius: var(--r-xl); padding: 2.4rem 1.5rem 1.5rem; width: 100%; max-width: 360px; text-align: center; animation: op-pop .26s cubic-bezier(.32,.72,0,1); } @keyframes op-pop { from { transform: scale(.94); opacity: .6; } to { transform: scale(1); opacity: 1; } } .op-stage { display: flex; flex-direction: column; align-items: center; } .op-text { color: var(--text-dim); } .op-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; } .op-sub { color: var(--text-dim); font-size: .9rem; margin-top: .3rem; } .op-spinner { width: 58px; height: 58px; border-radius: 50%; border: 5px solid var(--fill-strong); border-top-color: var(--accent); border-right-color: var(--accent); animation: op-spin .7s cubic-bezier(.45,.05,.35,.95) infinite; } @keyframes op-spin { to { transform: rotate(360deg); } } .op-check-svg { width: 76px; height: 76px; } .op-check-circle { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: op-circle .5s ease-out forwards; } .op-check-mark { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: op-mark .35s .45s ease-out forwards; } @keyframes op-circle { to { stroke-dashoffset: 0; } } @keyframes op-mark { to { stroke-dashoffset: 0; } } .btn-quiet-cta { width: 100%; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: var(--r-lg); padding: 1rem; font-family: inherit; font-size: 1.02rem; font-weight: 600; text-align: center; text-decoration: none; display: block; cursor: pointer; } .btn-quiet-cta:hover { border-color: var(--accent); color: var(--accent); } /* Подсветка баланса при росте */ .balance-bump { animation: bal-bump .9s ease; color: #2E8B57 !important; } @keyframes bal-bump { 0% { transform: scale(1); } 30% { transform: scale(1.08); } 100% { transform: scale(1); } } /* Кнопки-действия в индикаторах ставим одинаковой ширины */ .op-check { line-height: 0; } /* Обеспечиваем reduced-motion исключение для нового спиннера/галочки */ @media (prefers-reduced-motion: reduce) { .op-spinner { animation: op-spin .7s linear infinite !important; } .op-check-circle { animation: op-circle .5s ease-out forwards !important; } .op-check-mark { animation: op-mark .35s .45s ease-out forwards !important; } } /* ========================================================================== Пинпад (цифровая клавиатура) ========================================================================== */ .pinpad { max-width: 300px; margin: 0 auto; } .pin-dots { display: flex; justify-content: center; gap: 16px; margin: 0 0 2rem; } .pin-dots span { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--border); background: transparent; transition: background-color .15s ease, border-color .15s ease, transform .1s ease; } .pin-dots span.filled { background: var(--accent); border-color: var(--accent); transform: scale(1.05); } .pin-dots.shake { animation: pin-shake .4s; } @keyframes pin-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } } .pin-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .pin-key { height: 66px; border-radius: 50%; border: none; background: var(--fill); color: var(--text); font-size: 1.6rem; font-weight: 600; font-family: inherit; cursor: pointer; display: grid; place-items: center; transition: background-color .12s ease, transform .1s ease; } .pin-key:hover { background: var(--fill-strong); } .pin-key:active { transform: scale(.92); background: var(--accent-soft); color: var(--accent); } .pin-key.pin-blank { background: transparent; pointer-events: none; } .pin-key.pin-action { background: transparent; font-size: 1.3rem; color: var(--text-dim); } .pin-key.pin-action:active { background: transparent; color: var(--accent); } /* Блок выписки/справки в истории */ .doc-tools { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem; } .doc-period-fields { display: flex; gap: 8px; margin-bottom: 8px; } .field-mini { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--text-dim); } .field-mini input { border: 1px solid var(--border); background: var(--fill); border-radius: var(--r-md); padding: .5rem .6rem; color: var(--text); font-family: inherit; font-size: 15px; } .field-mini input:focus { border-color: var(--accent); outline: none; } /* Логотипы банков в чипах и списке */ .chip-logo { width: 26px; height: 26px; min-width: 26px; border-radius: 7px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 26px; } .chip-logo img { max-width: 20px; max-height: 20px; width: auto; height: auto; display: block; object-fit: contain; } .chip-avatar-more { background: var(--fill-strong); color: var(--text-dim); } .bank-logo { width: 30px; height: 30px; min-width: 30px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 30px; } .bank-logo img { max-width: 24px; max-height: 24px; width: auto; height: auto; display: block; object-fit: contain; } /* Подписи в чипах — читаемые (не тусклые) */ .chip-name { color: var(--text); font-weight: 600; } .chip-sub { color: var(--text-dim); } /* Плитки документов в истории */ .doc-tile { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem; margin-bottom: 8px; color: var(--text); transition: border-color .14s ease, transform .12s ease; } .doc-tile:hover { border-color: var(--accent); color: var(--text); } .doc-tile:active { transform: scale(.99); } .doc-tile-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 1.35rem; flex: 0 0 auto; } .doc-tile-body { flex: 1; min-width: 0; } .doc-tile-title { font-weight: 600; } .doc-tile-sub { font-size: .82rem; color: var(--text-dim); } /* Страница выписки — новый вид */ .stmt-hero { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); border-radius: var(--r-xl); padding: 1.3rem; color: #fff; box-shadow: 0 12px 28px -12px rgba(238,20,40,.5); } .stmt-hero-doc { width: 64px; height: 80px; border-radius: 10px; background: #fff; flex: 0 0 auto; position: relative; padding: 9px; box-shadow: 0 6px 14px -4px rgba(0,0,0,.3); } .stmt-hero-star { width: 20px; height: 20px; } .stmt-hero-star img { width: 100%; height: 100%; display: block; } .stmt-hero-lines { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; } .stmt-hero-lines span { height: 4px; border-radius: 2px; background: #e7e0e1; } .stmt-hero-lines span:nth-child(1){ width:100%; } .stmt-hero-lines span:nth-child(2){ width:80%; } .stmt-hero-lines span:nth-child(3){ width:90%; } .stmt-hero-lines span:nth-child(4){ width:60%; } .stmt-hero-info { flex: 1; min-width: 0; } .stmt-hero-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; } .stmt-hero-sub { font-size: .82rem; opacity: .85; margin-top: 3px; } /* Сегментированный переключатель */ .seg { display: flex; background: var(--fill); border-radius: 999px; padding: 4px; gap: 2px; } .seg-item { flex: 1; border: none; background: transparent; color: var(--text-dim); border-radius: 999px; padding: .55rem .3rem; font-size: .84rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .18s ease; } .seg-item.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); } .stmt-custom-toggle { width: 100%; display: flex; align-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-lg); padding: .85rem 1rem; font-family: inherit; font-size: .92rem; font-weight: 500; cursor: pointer; margin-top: 12px; } .stmt-custom-toggle .bi-chevron-down { transition: transform .2s ease; } .stmt-custom-toggle.open .bi-chevron-down { transform: rotate(180deg); } .stmt-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .stmt-date { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--text-dim); } .stmt-date input { border: 1px solid var(--border); background: var(--fill); color: var(--text); border-radius: var(--r-md); padding: .65rem .7rem; font-family: inherit; font-size: 15px; } .stmt-date input:focus { border-color: var(--accent); outline: none; } /* ========================================================================== Экран пинкода (как блокировка телефона) ========================================================================== */ .lock-body { margin: 0; } .lock-screen { min-height: 100vh; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--sat) + 8vh) 24px calc(var(--sab) + 24px); box-sizing: border-box; } .lock-top { display: flex; flex-direction: column; align-items: center; } .lock-avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--fill-strong); color: var(--text-dim); display: grid; place-items: center; font-size: 2.6rem; margin-bottom: 1rem; } .lock-name { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; } .lock-hint { color: var(--text-dim); font-size: .9rem; margin-top: .3rem; } .lock-dots { display: flex; gap: 18px; margin-top: 1.75rem; } .lock-dots span { width: 14px; height: 14px; border-radius: 50%; background: transparent; border: 2px solid var(--text-dim); opacity: .5; transition: all .15s ease; } .lock-dots span.filled { background: var(--accent); border-color: var(--accent); opacity: 1; } .lock-dots.shake { animation: pin-shake .4s; } .lock-error { color: var(--accent); font-size: .88rem; margin-top: 1rem; } .lock-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 40px; max-width: 320px; margin: 0 auto; width: 100%; } .lock-key { height: 72px; border: none; background: transparent; color: var(--text); font-size: 2.1rem; font-weight: 400; font-family: inherit; cursor: pointer; border-radius: 50%; transition: background-color .12s ease, transform .1s ease; } .lock-key:active { background: var(--fill); transform: scale(.94); } .lock-key-text { font-size: 1rem; color: var(--text-dim); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; } .lock-key-icon { font-size: 1.5rem; color: var(--text-dim); } /* Форма перевода и блок банка скрыты до выбора — без мелькания при загрузке */ #transferForm[style*="display:none"], #transferForm[style*="display: none"] { display: none !important; } #bankBlock { will-change: auto; } .lock-alt-link { display: block; text-align: center; margin-top: 1.5rem; color: var(--accent); font-size: .95rem; font-weight: 500; text-decoration: none; } .lock-alt-link:hover { text-decoration: underline; }