/* Venta / PayGate — платёжная форма. Шрифт лежит рядом: страница оплаты не ходит на чужие домены. Подмножества подключены по unicode-range, поэтому русская страница тянет cyrillic + latin + latin-ext (знак ₽ живёт именно в latin-ext). */ @font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/montserrat-cyrillic-400.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/montserrat-latinext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/montserrat-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/montserrat-cyrillic-600.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/montserrat-latinext-600.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/montserrat-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/montserrat-cyrillic-700.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/montserrat-latinext-700.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/montserrat-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } /* ====================================================================== ТОКЕНЫ. Три скина одним атрибутом data-skin на : venta-lime — светлый, как лендинг Venta (по умолчанию) graphite-dark — тёмный графит, один лаймовый акцент tg-miniapp — фон и текст от клиента Telegram, акцент остаётся наш Скин задаёт мерчант при создании счёта, а не браузер: один шлюз обслуживает несколько брендов без форков. ====================================================================== */ :root, :root[data-skin='venta-lime'] { --bg: #F2F7EC; --surface: #FFFFFF; --surface-2: #F4F7F0; --surface-white: #FFFFFF; /* только подложка QR */ --border: rgba(16, 24, 12, .10); --border-strong: rgba(16, 24, 12, .22); --hairline-top: rgba(16, 24, 12, .04); --text: #101812; --text-muted: #58635C; --text-dim: #8A948D; --text-on-white: #101812; --accent: #8BEA52; --accent-hover: #9CF268; --accent-press: #74D63C; --accent-content: #14250C; --accent-soft: rgba(139, 234, 82, .14); --focus-ring: 0 0 0 3px rgba(139, 234, 82, .38); --success: #12A57A; --success-soft: rgba(18, 165, 122, .12); --error: #D92D20; --error-soft: rgba(217, 45, 32, .10); --warn: #9A6A00; --warn-soft: rgba(255, 201, 96, .18); --shadow-card: 0 1px 2px rgba(16, 30, 12, .05), 0 20px 44px -26px rgba(16, 40, 12, .40); --shadow-btn: 0 8px 20px -10px rgba(60, 140, 20, .65); --shadow-modal: 0 20px 48px rgba(16, 24, 12, .20); --glow: .5; } :root[data-skin='graphite-dark'] { --bg: #0E1113; --surface: #16191D; --surface-2: #1E2228; --surface-white: #FFFFFF; --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .18); --hairline-top: rgba(255, 255, 255, .07); --text: #F2F5F7; --text-muted: #9AA4AD; --text-dim: #6B757E; --text-on-white: #101418; --accent: #C3F53C; --accent-hover: #D2FF5E; --accent-press: #A9DC1F; --accent-content: #0E1113; --accent-soft: rgba(195, 245, 60, .10); --focus-ring: 0 0 0 3px rgba(195, 245, 60, .30); --success: #3EE3A9; --success-soft: rgba(62, 227, 169, .14); --error: #FF6B6B; /* НЕ #D92D20: на графите он не проходит 4.5:1 */ --error-soft: rgba(255, 107, 107, .14); --warn: #FFC960; --warn-soft: rgba(255, 201, 96, .14); --shadow-card: none; --shadow-btn: none; --shadow-modal: 0 24px 64px rgba(0, 0, 0, .55); --glow: .14; } /* Скин Telegram: фон и текст берём у клиента, акцент — нет. В чужой теме кнопка «Оплатить» стала бы нечитаемой. */ :root[data-skin='tg-miniapp'] { --bg: var(--tg-theme-bg-color, #0E1113); --surface: var(--tg-theme-secondary-bg-color, #16191D); --surface-2: var(--tg-theme-secondary-bg-color, #1E2228); --surface-white: #FFFFFF; --border: rgba(128, 128, 128, .22); --border-strong: rgba(128, 128, 128, .38); --hairline-top: rgba(255, 255, 255, .05); --text: var(--tg-theme-text-color, #F2F5F7); --text-muted: var(--tg-theme-hint-color, #9AA4AD); --text-dim: var(--tg-theme-hint-color, #6B757E); --text-on-white: #101418; --accent: #C3F53C; --accent-hover: #D2FF5E; --accent-press: #A9DC1F; --accent-content: #0E1113; --accent-soft: rgba(195, 245, 60, .10); --focus-ring: 0 0 0 3px rgba(195, 245, 60, .30); --success: #3EE3A9; --success-soft: rgba(62, 227, 169, .14); --error: #FF6B6B; --error-soft: rgba(255, 107, 107, .14); --warn: #FFC960; --warn-soft: rgba(255, 201, 96, .14); --shadow-card: none; --shadow-btn: none; --shadow-modal: 0 24px 64px rgba(0, 0, 0, .55); --glow: 0; } /* data-skin="auto" — идём за системной темой пользователя. */ @media (prefers-color-scheme: dark) { :root[data-skin='auto'] { --bg: #0E1113; --surface: #16191D; --surface-2: #1E2228; --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.18); --hairline-top: rgba(255,255,255,.07); --text: #F2F5F7; --text-muted: #9AA4AD; --text-dim: #6B757E; --accent: #C3F53C; --accent-hover: #D2FF5E; --accent-press: #A9DC1F; --accent-content: #0E1113; --accent-soft: rgba(195,245,60,.10); --focus-ring: 0 0 0 3px rgba(195,245,60,.30); --success: #3EE3A9; --success-soft: rgba(62,227,169,.14); --error: #FF6B6B; --error-soft: rgba(255,107,107,.14); --warn: #FFC960; --warn-soft: rgba(255,201,96,.14); --shadow-card: none; --shadow-btn: none; --shadow-modal: 0 24px 64px rgba(0,0,0,.55); --glow: .14; } } :root { --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 26px; --gutter: 16px; --control-h: 52px; --button-h: 56px; --tap-min: 44px; --fs-amount: 34px; --fs-title: 17px; --fs-body: 15px; --fs-input: 16px; /* НИКОГДА меньше: iOS Safari зумит страницу при фокусе */ --fs-label: 13px; --fs-caption: 12px; --fs-legal: 11px; --ease: cubic-bezier(.2, .7, .3, 1); --dur-fast: 130ms; --dur: 220ms; } /* ====================================================================== ОСНОВА ====================================================================== */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* Любой авторский display (block у .field, flex у .overlay) перебивает [hidden] из стилей браузера — и «скрытый» блок остаётся на виду. Чиним один раз и на всю страницу. */ [hidden] { display: none !important; } body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.5 Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Мягкое свечение сверху. Без отрицательных отступов: они растягивают документ вбок и на телефоне появляется горизонтальная прокрутка. */ body::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 52vh; background: radial-gradient(90% 80% at 50% -12%, var(--accent), transparent 68%); opacity: var(--glow); pointer-events: none; z-index: 0; } .shell { position: relative; z-index: 1; width: 100%; max-width: 460px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top)) var(--gutter) calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; } .shell--narrow { max-width: 420px; } .shell--wide { max-width: 860px; } /* ====================================================================== ШАПКА ====================================================================== */ .bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px; min-height: 28px; } .brand { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--text); } .brand__mark { width: 17px; height: 17px; fill: currentColor; transform: rotate(-8deg); } .brand__name { font-weight: 700; letter-spacing: .13em; font-size: 14px; } .pill { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; background: var(--accent-soft); color: var(--text-muted); padding: 5px 10px; border-radius: 999px; } /* Несносимая плашка тестового контура. */ .testbar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-caption); font-weight: 600; line-height: 1.35; } .testbar svg { width: 16px; height: 16px; fill: currentColor; flex: none; } /* ====================================================================== КАРТОЧКА ====================================================================== */ .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); box-shadow: var(--shadow-card); padding: 22px 18px; } /* Объём даёт светлая линия сверху, а не тень: backdrop-filter и «стекло» роняют Telegram WebView на бюджетных Android до 15 кадров. */ .card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--r-2xl) var(--r-2xl) 0 0; background: var(--hairline-top); pointer-events: none; } @media (min-width: 480px) { .card { padding: 26px 24px; } } /* ====================================================================== СУММА И ЗАКАЗ ====================================================================== */ .sum { text-align: center; padding-bottom: 16px; } .sum__label { margin: 0; font-size: var(--fs-label); font-weight: 600; color: var(--text-dim); } .sum__value { margin: 3px 0 0; font-size: var(--fs-amount); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; font-variant-numeric: tabular-nums; } .sum__desc { margin: 7px 0 0; font-size: var(--fs-body); color: var(--text-muted); } .sum__comment { margin: 4px 0 0; font-size: var(--fs-label); color: var(--text-dim); } /* Имя продавца заметнее служебных строк: банк покажет его же. */ .sum__seller { margin: 10px 0 0; font-size: var(--fs-label); font-weight: 600; color: var(--text-muted); } .sum__meta { margin: 10px 0 0; display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; font-size: var(--fs-caption); color: var(--text-dim); } .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; } .timer { font-variant-numeric: tabular-nums; font-weight: 600; } .timer.is-soon { color: var(--error); } /* Ряд «комиссия 0 ₽ / в выписке банка» — снимает половину обращений в поддержку: человек видит, каким именем придёт списание. */ .facts { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 12px; display: grid; gap: 6px; font-size: var(--fs-caption); } .facts__row { display: flex; justify-content: space-between; gap: 12px; } .facts__row dt { color: var(--text-dim); margin: 0; } .facts__row dd { margin: 0; color: var(--text-muted); font-weight: 600; text-align: right; } /* ====================================================================== ВЫБОР СПОСОБА ====================================================================== */ .method-title { margin: 18px 0 8px; font-size: var(--fs-label); font-weight: 600; color: var(--text-muted); text-align: center; } .tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 18px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; } .tab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: none; cursor: pointer; min-height: var(--tap-min); padding: 0 8px; border-radius: 999px; font: 600 14px/1 Montserrat, sans-serif; color: var(--text-muted); transition: color var(--dur-fast) var(--ease); -webkit-tap-highlight-color: transparent; } .tab img, .tab svg { height: 18px; width: auto; flex: none; } /* знак СБП не мельче 18px */ .tab svg { fill: currentColor; } .tab.is-active { color: var(--accent-content); } .tabs__glider { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 999px; background: var(--accent); transition: transform var(--dur) var(--ease); } .tabs[data-active='card'] .tabs__glider { transform: translateX(calc(100% + 4px)); } /* Способ оплаты один — вместо переключателя простая подпись. */ .method-one { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 18px; font-size: var(--fs-label); font-weight: 600; color: var(--text-muted); } .method-one img, .method-one svg { height: 18px; width: auto; flex: none; } .method-one svg { fill: currentColor; } .pane { display: none; } .pane.is-active { display: block; animation: fade var(--dur) var(--ease) both; } @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* ====================================================================== СБП ====================================================================== */ .sbp__hint { margin: 0 0 14px; text-align: center; font-size: var(--fs-body); color: var(--text-muted); } /* QR всегда тёмный на белом. Инвертированный «под тёмную тему» не читают камеры части Android — это не вкусовщина, а отказ оплаты. */ .qr { position: relative; width: 100%; max-width: 252px; margin: 0 auto; aspect-ratio: 1; background: var(--surface-white); border-radius: var(--r-lg); border: 1px solid var(--border); padding: 8px; display: grid; place-items: center; } .qr img { width: 100%; height: 100%; display: block; } .qr__logo { position: absolute; width: 20%; height: 20%; display: grid; place-items: center; background: #fff; border-radius: 7px; } /* Знак СБП вертикальный (283×326) — тянуть его нельзя, вписываем как есть. */ .qr__logo img { width: auto; height: 82%; max-width: 78%; object-fit: contain; } .sbp__caption { margin: 10px 0; text-align: center; font-size: var(--fs-caption); color: var(--text-dim); } .banks { margin-top: 16px; } .banks__title { margin: 0 0 9px; font-size: var(--fs-label); font-weight: 600; color: var(--text-muted); } .banks__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .bank { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 72px; padding: 9px 3px 7px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; text-decoration: none; color: var(--text-muted); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); -webkit-tap-highlight-color: transparent; } .bank:hover, .bank:focus-visible { border-color: var(--border-strong); background: var(--surface-2); } .bank img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; background: var(--surface-2); flex: none; } .bank span { width: 100%; font-size: 9.5px; line-height: 1.2; text-align: center; font-weight: 600; /* Одна строка с многоточием вместо переноса посередине слова: «Райффайзе / н» в плитке читается как опечатка. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .linkrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .linkbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap-min); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-muted); font: 600 13px Montserrat, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; } .linkbtn:hover { border-color: var(--border-strong); } .linkbtn.is-done { color: var(--success); border-color: var(--success); } .banks__search { margin-bottom: 10px; } .banks__list { max-height: 54dvh; overflow: auto; margin: 0 -4px; padding: 0 4px; } .banks__row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap-min); padding: 8px; border: 0; border-radius: var(--r-md); background: none; cursor: pointer; text-align: left; text-decoration: none; font: 600 14px Montserrat, sans-serif; color: var(--text); } .banks__row:hover { background: var(--surface-2); } .banks__row img { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; background: var(--surface-2); flex: none; } .banks__more { margin-top: 10px; width: 100%; min-height: var(--tap-min); background: none; border: 0; cursor: pointer; font: 600 13px Montserrat, sans-serif; color: var(--text-muted); } .banks__more:hover { color: var(--text); } details.qrspoiler { margin-top: 6px; } details.qrspoiler > summary { list-style: none; cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 12px; font: 600 13px Montserrat, sans-serif; color: var(--text-muted); } details.qrspoiler[open] > summary { border-color: transparent; } details.qrspoiler > summary::-webkit-details-marker { display: none; } /* ====================================================================== ПОЛЯ ====================================================================== */ .field { display: block; margin-bottom: 12px; } .field__label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: var(--fs-label); font-weight: 600; color: var(--text-muted); } .field__input { width: 100%; min-height: var(--control-h); padding: 13px 14px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font: 400 var(--fs-input)/1.25 Montserrat, sans-serif; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .field__input::placeholder { color: var(--text-dim); } .field__input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); } .field__input[aria-invalid='true'] { border-color: var(--error); } /* У поля с ошибкой подсветка тоже красная: зелёное кольцо поверх красной рамки читается как «всё хорошо» ровно там, где всё плохо. */ .field__input[aria-invalid='true']:focus { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-soft); } .field__input--code { font-size: 22px; letter-spacing: .45em; text-align: center; font-weight: 600; padding-left: 24px; } .field__error { margin: -6px 0 10px; min-height: 16px; font-size: var(--fs-caption); font-weight: 600; color: var(--error); } .field__note { margin: -6px 0 10px; font-size: var(--fs-caption); color: var(--text-dim); } .field--number { position: relative; } .field--number .field__input { padding-right: 62px; font-variant-numeric: tabular-nums; letter-spacing: .04em; } .brandmark { position: absolute; right: 12px; bottom: 14px; height: 22px; width: 38px; display: grid; place-items: center; opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; } .brandmark.is-on { opacity: 1; } .brandmark svg { max-width: 100%; max-height: 100%; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .receipt { margin-top: 16px; margin-bottom: 0; padding-top: 16px; border-top: 1px solid var(--border); } .receipt .field__note { margin-top: 6px; margin-bottom: 0; } .receipt.is-saved .field__label::after { content: 'сохранено'; margin-left: auto; font-weight: 600; color: var(--success); } /* ====================================================================== КНОПКИ ====================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--button-h); padding: 14px 18px; border: 0; border-radius: 999px; font: 700 15px/1.2 Montserrat, sans-serif; cursor: pointer; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), opacity var(--dur) var(--ease); -webkit-tap-highlight-color: transparent; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: default; transform: none; } .btn--primary { background: var(--accent); color: var(--accent-content); box-shadow: var(--shadow-btn); } .btn--primary:hover:not(:disabled) { background: var(--accent-hover); } .btn--primary:active:not(:disabled) { background: var(--accent-press); } .btn--ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .btn--danger { background: var(--error-soft); color: var(--error); } .btn--ok { background: var(--success-soft); color: var(--success); } .btn__spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite; display: none; } .btn.is-busy .btn__spinner { display: block; } .btn.is-busy .btn__label { opacity: .7; } @keyframes spin { to { transform: rotate(360deg); } } /* ====================================================================== СОСТОЯНИЯ ====================================================================== */ .state { text-align: center; padding: 6px 0 2px; } .state__icon { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; } .state__icon svg { width: 34px; height: 34px; } .state__icon--ok { background: var(--success-soft); } .state__icon--ok svg { fill: var(--success); } .state__icon--bad { background: var(--error-soft); } .state__icon--bad svg { fill: var(--error); } .state__icon--wait { background: var(--accent-soft); } .state__title { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; } .state__text { margin: 0 0 8px; font-size: var(--fs-body); color: var(--text-muted); } .state__sum { margin: 0 0 8px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--text); } .state__note { margin: 12px 0 8px; font-size: var(--fs-caption); color: var(--text-dim); } .state__actions { display: grid; gap: 8px; margin-top: 18px; } /* Код платежа на экране отказа: с ним человеку есть с чем идти в поддержку. */ .paycode { margin: 0 0 4px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-md); font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.6; } .paycode__id { font-weight: 700; color: var(--text); background: none; padding: 0; } .paycode__copy { border: 0; background: none; cursor: pointer; padding: 0; font: 600 var(--fs-caption) Montserrat, sans-serif; color: var(--accent-press); text-decoration: underline; } .pulse { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--accent); border-top-color: transparent; animation: spin .9s linear infinite; } .waiting { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; background: var(--accent-soft); border-radius: var(--r-md); font-size: var(--fs-label); font-weight: 600; color: var(--text-muted); } .waiting .pulse { width: 18px; height: 18px; border-width: 2px; flex: none; } .waiting--bad { background: var(--error-soft); color: var(--error); } .waiting__body { display: grid; gap: 8px; width: 100%; } .waiting__title { font-weight: 700; } .waiting__text { font-weight: 400; color: var(--text-muted); } .waiting--bad .waiting__text { color: var(--error); opacity: .85; } /* Знаки платёжных систем: показывают, чем можно платить. */ .schemes { display: inline-flex; align-items: center; gap: 6px; } .schemes svg, .scheme { height: 16px; width: 48px; flex: none; } .schemes--inline { margin: 0 0 14px; display: flex; justify-content: center; gap: 6px; } /* ====================================================================== ПЕСОЧНИЦА ====================================================================== */ .sandbox { margin-top: 16px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); padding: 13px; } .sandbox__title { margin: 0 0 3px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); } .sandbox__text { margin: 0 0 11px; font-size: var(--fs-caption); color: var(--text-dim); } .sandbox__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sandbox .btn { min-height: var(--tap-min); padding: 10px 8px; font-size: 12px; line-height: 1.25; } /* ====================================================================== ПОДВАЛ ====================================================================== */ .legal { text-align: center; font-size: var(--fs-legal); line-height: 1.65; color: var(--text-dim); padding: 0 6px; } .legal p { margin: 2px 0; } .legal a { color: var(--text-muted); } /* Логотип СБП в подвале — единственное дословное требование НСПК к сайту. Высота 40px и свободное поле вокруг — из их же гайда. */ .legal__marks { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); } .legal__sbp { height: 40px; width: auto; } /* Знак СБП нарисован тёмной надписью — на тёмном скине подкладываем белое поле, а не перекрашиваем: перекрашивать знак гайд запрещает. */ :root[data-skin='graphite-dark'] .legal__marks, :root[data-skin='tg-miniapp'] .legal__marks { background: #fff; border-color: transparent; } @media (prefers-color-scheme: dark) { :root[data-skin='auto'] .legal__marks { background: #fff; border-color: transparent; } } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; } /* ====================================================================== 3-D SECURE ====================================================================== */ .acs__bank { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .acs__lock { width: 32px; height: 32px; flex: none; } .acs__lock svg { width: 100%; height: 100%; fill: var(--success); } .acs__title { margin: 0; font-weight: 700; font-size: var(--fs-title); } .acs__sub { margin: 2px 0 0; font-size: var(--fs-label); color: var(--text-dim); } .acs__text { margin: 0 0 16px; font-size: var(--fs-body); color: var(--text-muted); } .acs__hint { margin: 12px 0 0; font-size: var(--fs-caption); color: var(--warn); text-align: center; } /* ====================================================================== ЭМУЛЯТОР БАНКА ====================================================================== */ .bank__eyebrow { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); } .bank__amount { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -.03em; } .bank__to { margin: 5px 0 16px; font-size: var(--fs-body); color: var(--text-muted); } .bank__rows { margin: 0 0 16px; display: grid; gap: 7px; } .bank__rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-label); } .bank__rows dt { color: var(--text-dim); margin: 0; } .bank__rows dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; } .bank__actions { display: grid; gap: 8px; margin-top: 14px; } .bank__note { margin: 14px 0 0; font-size: 11px; color: var(--text-dim); text-align: center; } /* ====================================================================== ШТОРКА ====================================================================== */ .overlay { position: fixed; inset: 0; z-index: 50; background: rgba(8, 14, 6, .5); display: flex; align-items: flex-end; justify-content: center; animation: fade .16s var(--ease) both; } @media (min-width: 560px) { .overlay { align-items: center; } } .sheet { width: 100%; max-width: 460px; max-height: 88dvh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl) var(--r-2xl) 0 0; box-shadow: var(--shadow-modal); padding-bottom: env(safe-area-inset-bottom); animation: rise .24s var(--ease) both; } @media (min-width: 560px) { .sheet { border-radius: var(--r-2xl); } } @keyframes rise { from { transform: translateY(10%); opacity: .7; } to { transform: none; opacity: 1; } } .sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); } .sheet__title { margin: 0; font-size: var(--fs-title); font-weight: 700; } .sheet__close { border: 0; background: var(--surface-2); color: var(--text-muted); width: var(--tap-min); height: var(--tap-min); border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; } .sheet__body { padding: 14px 16px 16px; overflow: auto; } /* ====================================================================== ПАНЕЛЬ МЕРЧАНТА ====================================================================== */ .cols { display: grid; gap: 12px; } @media (min-width: 900px) { .cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } .side { display: grid; gap: 12px; position: sticky; top: 16px; } } .side { display: grid; gap: 12px; } .m__title { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; } .m__lead { margin: 0 0 20px; font-size: var(--fs-body); color: var(--text-muted); } .m__h2 { margin: 0 0 13px; font-size: var(--fs-title); font-weight: 700; } /* Подзаголовок группы полей: отделяет «основное» от «куда сообщить». */ .m__group { margin: 22px 0 12px; padding-top: 14px; border-top: 1px solid var(--border); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); } .m__group:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .req { color: var(--error); font-weight: 700; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; } .choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 4px; } .choice { display: flex; align-items: center; justify-content: center; min-height: var(--tap-min); padding: 8px 6px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-caption); font-weight: 600; text-align: center; color: var(--text-muted); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .choice input { position: absolute; opacity: 0; pointer-events: none; } .choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--text); } .choice:has(input:focus-visible) { box-shadow: var(--focus-ring); } .linkbox { margin-top: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .m__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .m__qr { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 14px; } .m__qr img { width: 120px; height: 120px; background: #fff; border-radius: var(--r-md); padding: 6px; flex: none; } .m__qrnote { margin: 0; font-size: var(--fs-caption); color: var(--text-dim); } .m__orders { display: grid; gap: 6px; } .m__order { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); text-decoration: none; color: var(--text); } .m__order:hover { background: var(--accent-soft); } .m__ordermain { display: grid; gap: 2px; min-width: 0; } .m__ordermain b { font-size: var(--fs-label); } .m__orderdesc { font-size: var(--fs-caption); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m__ordermeta { display: grid; gap: 3px; justify-items: end; flex: none; } .m__ordertime { font-size: 11px; color: var(--text-dim); } .m__cards { display: grid; gap: 7px; } .m__card { display: grid; gap: 2px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-md); } .m__card b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; font-size: var(--fs-label); } .m__card em { font-style: normal; color: var(--text-dim); font-size: var(--fs-caption); } .badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .badge--canceled, .badge--refunded { background: var(--surface-2); color: var(--text-dim); } .badge--succeeded { background: var(--success-soft); color: var(--success); } .badge--failed, .badge--expired { background: var(--error-soft); color: var(--error); } .badge--pending, .badge--processing { background: var(--accent-soft); color: var(--text-muted); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }