/** * css/pay.css — страница подписки (/pay/) и страница возврата из банка. * * Подключается прямо в теле pay/index.php и pay/return.php: head.php свой * уже закрыл (тот же приём, что у funny.php и defects.php). Общего в style.css нет * ничего специфичного для оплаты — карточка тарифа, дорожка промокода и полоска * статуса нигде больше не встречаются. * * Цвета и радиусы — только переменными из style.css: страница оплаты обязана * выглядеть частью сайта, а не вставкой из платёжного шлюза. У соседнего проекта * форма нарисована фирменными цветами банка (жёлтая кнопка, синие поля), и на * светлом сайте это читается как чужая врезка — то есть ровно как то, чему не * стоит доверять карту. * * Мобильный вид не «поддерживается», а рассчитан: платят с телефона. Тарифы * ставятся в столбик, кнопки — во всю ширину, история платежей превращается из * строк в карточки (горизонтальной прокрутки на странице оплаты быть не должно). */ /* Уже 1120 px у tp-page: это форма и три карточки, а не список на 200 строк. Широкая колонка заставляла бы глаз ходить от цены слева к кнопке справа. */ .pay-wrap { max-width: 780px; } .pay-card h3 { display: flex; align-items: center; gap: 0.4rem; } .pay-card p { font-size: 0.85rem; line-height: 1.6; color: var(--text-2); margin: 0 0 0.6rem; } .pay-card p:last-child { margin-bottom: 0; } .pay-note { font-size: 0.78rem; line-height: 1.6; color: var(--text-3); margin: 0.5rem 0 0; } .pay-note a { color: var(--accent); } /* ── Состояние подписки ─────────────────────────────────────────────────── */ .pay-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; } .pay-state .big { font-size: 1.05rem; font-weight: 700; color: var(--text); } .pay-state .big.off { color: var(--text-2); } .pay-days { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); background: var(--green-bg); color: var(--green); } .pay-days.warn { background: var(--yellow-bg); color: var(--yellow); } .pay-days.off { background: var(--red-bg); color: var(--red); } /* Автопродление. Рамка слева цветом статуса: блок читают мельком, и «включено» от «остановлено» должно отличаться раньше, чем человек дочитает строку. */ .pay-rec { margin-top: 1rem; padding: 0.7rem 0.9rem; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--border-light); border-left: 3px solid var(--text-3); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; } .pay-rec.on { border-left-color: var(--green); } .pay-rec.fail { border-left-color: var(--red); } .pay-rec .txt { font-size: 0.82rem; color: var(--text-2); line-height: 1.5; flex: 1 1 260px; } .pay-rec .txt b { color: var(--text); font-weight: 600; } .pay-rec form { margin: 0; } /* ── Тарифы ─────────────────────────────────────────────────────────────── */ .pay-plans { display: grid; gap: 0.6rem; margin-bottom: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .pay-plan { display: block; margin: 0; cursor: pointer; } .pay-plan input { position: absolute; opacity: 0; width: 0; height: 0; } .pay-plan-b { display: block; position: relative; height: 100%; padding: 0.85rem 0.9rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-input); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .pay-plan:hover .pay-plan-b { border-color: var(--text-3); } .pay-plan input:checked + .pay-plan-b { border-color: var(--accent); background: var(--accent-light); box-shadow: 0 0 0 2px rgba(184,122,21,0.12); } /* Клавиатура: рамку выбора надо видеть и тем, кто не пользуется мышью. */ .pay-plan input:focus-visible + .pay-plan-b { box-shadow: 0 0 0 3px rgba(184,122,21,0.28); } .pay-plan-t { display: block; font-size: 0.85rem; font-weight: 700; color: var(--text); } .pay-plan-p { display: block; margin-top: 0.35rem; font-size: 1.15rem; font-weight: 700; color: var(--text); } .pay-plan-old { font-size: 0.85rem; font-weight: 500; color: var(--text-3); text-decoration: line-through; margin-right: 0.4em; } .pay-plan-per { display: block; margin-top: 0.15rem; font-size: 0.72rem; color: var(--text-3); } .pay-plan-badge { position: absolute; top: -0.5rem; right: 0.6rem; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--accent); color: var(--text-inv); padding: 0.12rem 0.4rem; border-radius: var(--radius-sm); } /* ── Промокод ───────────────────────────────────────────────────────────── */ .pay-promo { display: flex; gap: 0.4rem; align-items: stretch; } .pay-promo input { flex: 1 1 auto; min-width: 0; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 0.55rem 0.75rem; font-size: 0.85rem; font-family: var(--font); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .pay-promo input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(184,122,21,0.12); } .pay-promo input::placeholder { color: var(--text-3); } .pay-promo button { flex: 0 0 auto; white-space: nowrap; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); font-family: var(--font); font-size: 0.82rem; font-weight: 600; padding: 0.55rem 0.9rem; transition: border-color 0.15s, color 0.15s; } .pay-promo button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .pay-promo button:disabled { opacity: 0.6; cursor: default; } .pay-promo-msg { font-size: 0.78rem; margin-top: 0.35rem; line-height: 1.5; } .pay-promo-msg.ok { color: var(--green); } .pay-promo-msg.err { color: var(--red); } /* ── Итог и кнопки ──────────────────────────────────────────────────────── */ .pay-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.8rem 0 0.2rem; margin-top: 0.4rem; border-top: 1px solid var(--border); } .pay-total .lbl { font-size: 0.8rem; color: var(--text-2); } .pay-total .val { font-size: 1.45rem; font-weight: 700; color: var(--text); } .pay-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; } .pay-btn { flex: 1 1 200px; cursor: pointer; text-align: center; text-decoration: none; background: var(--accent); border: 1px solid var(--accent); color: var(--text-inv); font-family: var(--font); font-size: 0.88rem; font-weight: 700; padding: 0.65rem 1rem; border-radius: var(--radius); transition: filter 0.15s, background 0.15s; } .pay-btn:hover { background: var(--accent-hover); color: var(--text-inv); text-decoration: none; } .pay-btn:disabled { opacity: 0.6; cursor: default; } /* Вторая кнопка — обводкой: автопродление это согласие на повторное списание, и выглядеть оно должно как выбор, а не как главное действие страницы. */ .pay-btn.sec { background: transparent; color: var(--accent); border-color: var(--accent); } .pay-btn.sec:hover { background: var(--accent-light); color: var(--accent); } .pay-btn.ghost { background: transparent; color: var(--text-2); border-color: var(--border); } .pay-btn.ghost:hover { background: var(--bg-hover); color: var(--text); } .pay-btn.small { flex: 0 0 auto; font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.8rem; } .pay-rec-note { font-size: 0.76rem; line-height: 1.55; color: var(--text-2); background: var(--bg-alt); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; margin-top: 0.6rem; } .pay-legal { font-size: 0.72rem; line-height: 1.55; color: var(--text-3); margin-top: 0.8rem; } .pay-legal a { color: var(--text-2); text-decoration: underline; } .pay-legal a:hover { color: var(--accent); } /* ── История платежей ───────────────────────────────────────────────────── */ .pay-hist { border-top: 1px solid var(--border-light); } .pay-hist-row { display: grid; grid-template-columns: 92px 1fr 100px 190px; align-items: center; gap: 0.5rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border-light); font-size: 0.82rem; } .pay-hist-row:last-child { border-bottom: none; } .pay-hist .d { color: var(--text-3); font-size: 0.76rem; } .pay-hist .t { color: var(--text); font-weight: 500; } .pay-hist .s { text-align: right; color: var(--text); white-space: nowrap; } .pay-hist .st { text-align: right; min-width: 0; } /* Подпись статуса бывает длинной («Деньги захолдированы, не подтверждено» — 37 знаков), и в колонке она не помещается ни на телефоне, ни на широком экране. Резать её нельзя: смысл ровно в том, чтобы холд не выглядел оплатой, — поэтому в истории полоска переносится по словам, а nowrap остаётся у остальных мест. */ .pay-hist .pay-pill { white-space: normal; } .pay-hist-err { grid-column: 1 / -1; font-size: 0.74rem; color: var(--red); } /* Полоска статуса. Оплаченный — зелёный, и только CONFIRMED: у соседнего проекта в «оплачено» покрашен и AUTHORIZED, то есть холд, по которому доступа нет. */ .pay-pill { display: inline-block; font-size: 0.7rem; font-weight: 600; white-space: nowrap; padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); background: var(--bg-alt); color: var(--text-2); border: 1px solid var(--border-light); } .pay-pill.ok { background: var(--green-bg); color: var(--green); border-color: rgba(22,163,74,0.15); } .pay-pill.warn { background: var(--yellow-bg); color: var(--yellow); border-color: rgba(202,138,4,0.15); } .pay-pill.err { background: var(--red-bg); color: var(--red); border-color: rgba(220,38,38,0.15); } /* ── Страница возврата из банка ─────────────────────────────────────────── */ .pay-ret { text-align: center; padding: 2rem 1.5rem; } .pay-ret .ico { font-size: 2.2rem; line-height: 1; margin-bottom: 0.8rem; } .pay-ret .ico.ok { color: var(--green); } .pay-ret .ico.warn { color: var(--yellow); } .pay-ret .ico.err { color: var(--red); } .pay-ret h2 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0 0 0.6rem; } .pay-ret p { font-size: 0.85rem; line-height: 1.65; color: var(--text-2); margin: 0 auto 0.6rem; max-width: 460px; } .pay-ret .pay-btns { justify-content: center; margin-top: 1.2rem; } .pay-ret .pay-btn { flex: 0 1 220px; } /* ── Мобильный ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .pay-wrap .tp-card-padded { padding: 1rem; } /* Один столбец: две карточки тарифа рядом на 375 px дают строку в 12 знаков, а название «3 месяца» переносится посередине слова. */ .pay-plans { grid-template-columns: 1fr; } .pay-plan-badge { top: 0.6rem; right: 0.6rem; } /* Кнопка во всю ширину: на телефоне в неё целятся большим пальцем. */ .pay-btns { flex-direction: column; } .pay-btn { flex: 1 1 auto; width: 100%; } .pay-btn.small { width: auto; align-self: flex-start; } .pay-total .val { font-size: 1.25rem; } /* История: сетка в четыре колонки на 343 px нечитаема, поэтому строка превращается в карточку — дата и статус сверху, название и сумма ниже. */ .pay-hist-row { grid-template-columns: 1fr auto; gap: 0.15rem 0.5rem; padding: 0.6rem 0; } .pay-hist .d { order: 1; } .pay-hist .st { order: 2; text-align: right; } .pay-hist .t { order: 3; grid-column: 1 / -1; } .pay-hist .s { order: 4; grid-column: 1 / -1; text-align: left; font-weight: 600; } /* В колонке flex-basis становится ВЫСОТОЙ: с «flex: 1 1 260px» текст занимал 260 px, и между ним и кнопкой отмены зияла пустая треть экрана. */ .pay-rec { flex-direction: column; align-items: stretch; } .pay-rec .txt { flex: 0 0 auto; } .pay-rec .pay-btn.small { align-self: flex-start; } }