/* Matryoshka VPN World — mini-app (личный кабинет в Telegram). Каркас конкурента (нижний таб-бар + хедер + drawer + дашборд), НАШ бренд. Dual-theme: dark = navy-фон/жёлтый-акцент; light = крем-фон/навью-акцент (accent-flip). Тему выставляет app.js через (по tg.colorScheme). Дефолт — dark. */ @font-face { font-family:'Oswald'; font-style:normal; font-weight:600 700; font-display:swap; src:url("oswald.v2.woff2") format("woff2"); } @font-face { font-family:'Nunito'; font-style:normal; font-weight:500; font-display:swap; src:url("nunito_med.woff2") format("woff2"); } @font-face { font-family:'Nunito'; font-style:normal; font-weight:700; font-display:swap; src:url("nunito_bold.woff2") format("woff2"); } /* ===================== БРЕНД-ТОКЕНЫ (dual-theme) ===================== */ :root{ --bg:#1B1B17; --panel:#242420; --panel2:#1f1f1b; --inset:#2C2C26; --ink:#F4EFDD; --soft:#C3BDA6; --dim:#9A957E; --stroke:#45443A; --stroke-soft:#37372F; --accent:#FADB3F; --accent-ink:#241f06; /* dark: акцент = жёлтый, текст на нём тёмный */ --navy:#3350c9; /* навью-акцент, поднят для контраста на тёмном */ --ok:#5FCE93; --ok-ink:#0e1a12; --danger:#E79086; --warn:#EBB765; --accent-wash:rgba(250,219,63,.10); --accent-line:rgba(250,219,63,.40); --ok-wash:rgba(95,206,147,.10); --ok-line:rgba(95,206,147,.30); --shadow:0 22px 44px -24px rgba(0,0,0,.7); --disp:"Oswald", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --body:"Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --r:16px; --r-sm:12px; color-scheme:dark; } :root[data-theme="light"]{ --bg:#F4EFDD; --panel:#FCF8EC; --panel2:#F7F1DD; --inset:#EDE6CE; --ink:#1B1B17; --soft:#5C5847; --dim:#6B6550; /* был #8A836B = 3.29-3.57:1 на наших фонах (ниже AA 4.5); #6B6550 = 4.67-5.49:1 */ --stroke:#D9D2B8; --stroke-soft:#E6DFC7; --accent:#18399B; --accent-ink:#FFFFFF; /* light: акцент = навью, текст на нём белый (accent-flip) */ --navy:#18399B; --ok:#2E9E63; --ok-ink:#FFFFFF; --danger:#C0453B; --warn:#9A6B12; --accent-wash:rgba(24,57,155,.08); --accent-line:rgba(24,57,155,.30); --ok-wash:rgba(46,158,99,.10); --ok-line:rgba(46,158,99,.30); --shadow:0 20px 40px -26px rgba(24,57,155,.28); color-scheme:light; } /* ===================== БАЗА ===================== */ *{ box-sizing:border-box; } /* UA-правило `[hidden]{display:none}` слабее ЛЮБОГО авторского `display` (.tier{display:inline-flex}, .drawer-link{display:flex}), поэтому el.hidden=true молча переставал скрывать. Без ресета гейты видимости — no-op: клиенту БЕЗ подписки показывался бейдж «✓ Активна». */ [hidden]{ display:none !important; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; background-image:radial-gradient(1100px 560px at 82% -12%, var(--accent-wash), transparent 60%); min-height:100vh; } h1,h2,h3{ font-family:var(--disp); font-weight:700; margin:0; letter-spacing:.2px; } .muted{ color:var(--dim); font-size:13px; } .soft{ color:var(--soft); } a{ color:var(--accent); } /* ===================== ОБОЛОЧКА: ХЕДЕР / MAIN / ТАБ-БАР ===================== */ .app-header{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:9px; padding:11px 14px; background:var(--panel); border-bottom:1px solid var(--stroke-soft); } .hd-brand{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; } .hd-doll{ width:17px; height:30px; object-fit:contain; flex:none; } /* 17:30 ≈ 460/825, без летербокса */ .hd-word{ font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.6px; font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hd-word .dim{ color:var(--dim); } .hd-ico{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px; background:var(--inset); border:1px solid var(--stroke-soft); color:var(--soft); font-size:15px; cursor:pointer; position:relative; } .hd-ico:active{ opacity:.8; } .hd-lang{ width:auto; padding:0 9px; gap:5px; font-size:12px; font-weight:700; } .hd-ico .dot-badge{ position:absolute; top:-3px; right:-3px; min-width:15px; height:15px; padding:0 3px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:9px; font-weight:800; display:grid; place-items:center; font-family:var(--disp); } .app-main{ padding:16px 14px 96px; max-width:640px; margin:0 auto; } .panel{ display:none; } .panel.is-active{ display:block; animation:fade .18s ease; } @keyframes fade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } } .tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; background:var(--panel); border-top:1px solid var(--stroke-soft); padding:7px 4px calc(8px + env(safe-area-inset-bottom,0px)); } .tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:2px 0; font-size:10px; font-weight:700; color:var(--dim); background:none; border:0; cursor:pointer; font-family:var(--body); } .tab .ti{ width:40px; height:26px; display:grid; place-items:center; border-radius:10px; font-size:16px; } .tab.is-active{ color:var(--accent); } .tab.is-active .ti{ background:var(--accent-wash); } /* ===================== DRAWER ===================== */ .scrim{ position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; } .scrim.is-open{ opacity:1; visibility:visible; } .drawer{ position:fixed; top:0; right:0; bottom:0; z-index:50; width:min(320px,86vw); background:var(--panel); border-left:1px solid var(--stroke-soft); box-shadow:var(--shadow); transform:translateX(100%); visibility:hidden; transition:transform .22s ease, visibility 0s linear .22s; display:flex; flex-direction:column; padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px)); overflow-y:auto; } /* visibility 0s с задержкой (НЕ интерполируем): открытие — сразу видим; закрытие — прячем ПОСЛЕ слайда. Закрытый drawer visibility:hidden → вне tab-порядка/a11y-дерева (#1). */ .drawer.is-open{ transform:none; visibility:visible; transition:transform .22s ease, visibility 0s linear 0s; } .drawer-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; } .avatar{ width:46px; height:46px; flex:none; border-radius:14px; display:grid; place-items:center; font-family:var(--disp); font-weight:700; font-size:18px; color:#241f06; background:linear-gradient(135deg, #FADB3F, #FAC83D); } /* фикс-бренд-жёлтый чип (НЕ --accent: тот флипается в navy на светлой) */ .drawer-id{ min-width:0; } .drawer-name{ font-family:var(--disp); font-weight:700; font-size:16px; } .drawer-sub{ font-size:12px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .drawer-close{ margin-left:auto; } .drawer-nav{ display:flex; flex-direction:column; gap:2px; margin-top:14px; } .drawer-link{ display:flex; align-items:center; gap:11px; padding:11px 10px; border-radius:11px; color:var(--ink); background:none; border:0; font-size:15px; font-family:var(--body); text-align:left; cursor:pointer; width:100%; } .drawer-link:active{ background:var(--inset); } .drawer-link .di{ width:22px; text-align:center; font-size:16px; } .drawer-link .soon-tag{ margin-left:auto; } .drawer-sep{ height:1px; background:var(--stroke-soft); margin:10px 2px; border:0; } /* ===================== КАРТОЧКИ / ТИПОГРАФИКА СЕКЦИЙ ===================== */ .screen-h1{ font-family:var(--disp); font-size:23px; font-weight:700; line-height:1.1; margin:2px 0 2px; } .welcome{ font-family:var(--disp); font-size:24px; font-weight:700; line-height:1.08; margin:2px 0; } .sec-row{ display:flex; justify-content:space-between; align-items:baseline; margin:20px 0 10px; } .sec-row .t{ font-family:var(--disp); text-transform:uppercase; letter-spacing:.9px; font-size:12px; color:var(--dim); font-weight:700; } .sec-row .a{ font-size:12px; color:var(--accent); font-weight:700; background:none; border:0; cursor:pointer; font-family:var(--body); } .section-title{ font-family:var(--disp); text-transform:uppercase; letter-spacing:.9px; font-size:12px; color:var(--dim); font-weight:700; margin:20px 0 9px; } .card{ background:var(--panel); border:1px solid var(--stroke-soft); border-radius:var(--r); padding:14px; margin:11px 0; } .card + .card{ margin-top:11px; } .card-title{ font-family:var(--disp); text-transform:uppercase; letter-spacing:.7px; font-size:12px; color:var(--dim); font-weight:700; margin-bottom:9px; } /* tier-бейдж (заглушка — поля tier в БД нет) */ .tier{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin:4px 0 2px; font-size:11px; font-weight:800; color:var(--accent); background:var(--accent-wash); border:1px solid var(--accent-line); padding:4px 10px; border-radius:999px; } /* карточка подписки */ .sub-top{ display:flex; align-items:center; gap:8px; } .sub-name{ font-family:var(--disp); font-weight:700; font-size:16px; flex:1; } .pill{ font-size:10px; font-weight:800; letter-spacing:.4px; padding:3px 9px; border-radius:999px; text-transform:uppercase; } .pill.on{ color:#fff; background:#137a42; } /* фикс-контраст ~5.3:1 white-on-dark-green, AA в обеих темах */ .pill.off{ color:var(--dim); background:var(--inset); border:1px solid var(--stroke-soft); } .bar-row{ display:flex; justify-content:space-between; font-size:11px; color:var(--dim); margin:12px 0 5px; font-weight:700; } .bar-row b{ color:var(--soft); font-variant-numeric:tabular-nums; } .bar{ height:6px; border-radius:999px; background:var(--inset); overflow:hidden; } .bar i{ display:block; height:100%; width:0%; border-radius:999px; background:var(--ok); transition:width .4s ease; } /* solid-токен: адаптивен к теме (мятный tip тонул на светлой) */ .bar i.is-low{ background:var(--warn); } .bar i.is-crit{ background:var(--danger); } .meta{ display:flex; gap:13px; flex-wrap:wrap; margin-top:12px; font-size:11.5px; color:var(--dim); font-weight:700; } .meta .warn-x{ color:var(--danger); } .meta .soon-inline{ color:var(--dim); } /* мини-карты (Баланс / Рефералы) */ .duo{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:11px; } .duo.solo{ grid-template-columns:1fr; } /* реферал-карта скрыта (флаг OFF) → баланс на всю ширину */ .mini{ background:var(--panel); border:1px solid var(--stroke-soft); border-radius:var(--r); padding:13px; text-align:left; cursor:pointer; font-family:var(--body); color:var(--ink); } .mini:active{ opacity:.85; } .mini .k{ display:flex; justify-content:space-between; font-size:11px; color:var(--dim); font-weight:700; } .mini .v{ font-family:var(--disp); font-weight:700; font-size:20px; margin-top:8px; color:var(--ink); } .mini .v.acc{ color:var(--accent); } .mini .s{ font-size:10.5px; color:var(--dim); margin-top:1px; } /* промо / инфо-полоса */ .promo{ background:linear-gradient(120deg, var(--accent-wash), transparent); border:1px solid var(--accent-line); border-radius:var(--r); padding:13px; display:flex; gap:11px; align-items:center; margin:11px 0; } .promo.ok{ background:linear-gradient(120deg, var(--ok-wash), transparent); border-color:var(--ok-line); } .promo .em{ font-size:24px; flex:none; } .promo .tt{ font-family:var(--disp); font-weight:700; font-size:14px; } .promo.ok .tt{ color:var(--ok); } .promo .dd{ font-size:12px; color:var(--soft); margin-top:2px; } /* тарифы / пакеты */ .plan-card{ background:var(--panel); border:1px solid var(--stroke-soft); border-radius:var(--r); padding:14px; margin:11px 0; } .plan-card.is-selected{ border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-line) inset; } .plan-head{ display:flex; align-items:baseline; gap:8px; } .plan-name{ font-family:var(--disp); font-weight:700; font-size:16px; flex:1; } .plan-desc{ font-size:12.5px; color:var(--dim); margin-top:5px; line-height:1.4; } .plan-feat{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--soft); margin-top:9px; font-weight:700; } .plan-feat .soon-inline{ color:var(--dim); font-weight:700; } .price{ font-family:var(--disp); font-weight:700; font-size:19px; color:var(--accent); margin-top:11px; } .price .from{ font-size:11px; color:var(--dim); font-weight:700; text-transform:uppercase; letter-spacing:.5px; } .price .stars{ font-size:13px; color:var(--soft); } /* провайдеры оплаты / пополнения */ .prov{ display:flex; flex-direction:column; gap:9px; } .prov .p{ background:var(--panel); border:1px solid var(--stroke-soft); border-radius:var(--r-sm); padding:12px 13px; display:flex; align-items:center; gap:11px; text-align:left; width:100%; font-family:var(--body); color:var(--ink); cursor:pointer; } .prov .p:disabled{ cursor:default; opacity:.75; } .prov .p:not(:disabled):active{ opacity:.85; } .prov .p .pv-em{ font-size:20px; flex:none; } .prov .p .pv-main{ flex:1; min-width:0; } .prov .p b{ font-family:var(--disp); font-size:13.5px; font-weight:700; display:block; } .prov .p small{ color:var(--dim); font-size:11px; } .prov .p .lim{ color:var(--soft); font-size:11px; margin-top:2px; } /* поле ввода (промокод / код привязки) */ /* min-width:0 на инпуте + wrap: без них строка «поле + кнопка» вылезала за вьюпорт на 320px (scrollWidth 329 > clientWidth 320) и давала горизонтальный скролл всей вкладке. */ .field{ display:flex; gap:9px; flex-wrap:wrap; } .field .in{ flex:1 1 140px; min-width:0; background:var(--inset); border:1px solid var(--stroke-soft); border-radius:11px; padding:11px 12px; color:var(--ink); font-size:14px; font-family:var(--body); } .field .in::placeholder{ color:var(--dim); } /* пустое состояние */ .empty{ display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--dim); padding:26px 0; font-size:13px; text-align:center; } .empty .eb{ width:56px; height:56px; border-radius:16px; background:var(--inset); border:1px solid var(--stroke-soft); display:grid; place-items:center; font-size:24px; } /* «скоро»-метка */ .soon-tag{ font-family:var(--disp); font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--soft); background:var(--inset); border:1px solid var(--stroke-soft); border-radius:6px; padding:2px 6px; } /* --soft (не --dim): AA в светлой теме (--dim на --inset давал ~3:1) */ /* ===================== КНОПКИ ===================== */ .btn{ display:block; width:100%; border:0; border-radius:12px; text-align:center; cursor:pointer; font-family:var(--disp); text-transform:uppercase; letter-spacing:.6px; font-weight:700; font-size:13px; padding:13px; margin-top:11px; } .btn:active{ opacity:.85; } .btn:disabled{ opacity:.5; cursor:default; } .btn.solid{ background:var(--accent); color:var(--accent-ink); } .btn.ghost{ background:var(--inset); border:1px solid var(--stroke-soft); color:var(--accent); } .btn.navy{ background:var(--navy); color:#fff; } .btn.buy{ display:inline-block; width:auto; margin:0; white-space:nowrap; padding:11px 16px; } .btn.sm{ padding:10px 12px; font-size:12px; } /* конфиг / QR / сторы (перенесены из старого экрана «Конфиг») */ .config-url{ display:block; word-break:break-all; background:var(--inset); border:1px solid var(--stroke-soft); border-radius:10px; padding:11px; font-size:12px; line-height:1.4; color:var(--ink); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; } .qr-host{ display:flex; justify-content:center; } .qr-img{ width:220px; max-width:80%; height:auto; margin:11px auto 0; background:#fff; padding:10px; border-radius:12px; } .store-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; } .store-link{ flex:1 1 30%; text-align:center; text-decoration:none; white-space:nowrap; background:var(--inset); color:var(--ink); border:1px solid var(--stroke-soft); border-radius:11px; padding:10px 8px; font-weight:700; font-size:13px; } .store-link:active{ opacity:.85; } .hint{ margin-top:8px; line-height:1.45; } .help-details{ margin-top:12px; } .help-details > summary{ cursor:pointer; color:var(--accent); font-size:14px; } .help-details[open] > summary{ margin-bottom:6px; } .code-box{ margin-top:10px; text-align:center; font-size:26px; font-weight:800; letter-spacing:.18em; background:var(--inset); border:1px solid var(--stroke-soft); border-radius:12px; padding:14px; font-family:var(--disp); color:var(--ink); } .ok-line{ color:var(--ok); font-weight:700; } .kv-line{ margin:3px 0; font-size:14px; } .kv-line b{ font-weight:700; } /* всплывающая панель (колокол / язык) */ .pop{ position:fixed; top:54px; right:12px; z-index:45; width:min(280px,80vw); background:var(--panel); border:1px solid var(--stroke); border-radius:14px; box-shadow:var(--shadow); padding:12px; display:none; } .pop.is-open{ display:block; animation:fade .16s ease; } .pop-title{ font-family:var(--disp); text-transform:uppercase; letter-spacing:.7px; font-size:11px; color:var(--dim); font-weight:700; margin-bottom:8px; } .lang-opt{ display:flex; align-items:center; gap:9px; padding:9px 8px; border-radius:10px; cursor:pointer; font-size:14px; color:var(--ink); background:none; border:0; width:100%; font-family:var(--body); text-align:left; } .lang-opt:active{ background:var(--inset); } .lang-opt.is-active{ color:var(--accent); font-weight:700; } .lang-opt .soon-tag{ margin-left:auto; } footer.foot{ text-align:center; color:var(--dim); font-size:12px; line-height:1.4; margin-top:22px; } /* утилит-классы вместо inline style= (CSP mini-app: script-src/default-src 'self', style-src нет → inline-стили дропаются) */ .mt16{ margin-top:16px; } .empty.tight{ padding:16px 0; } .balance-card{ text-align:center; padding:18px; } #balance-value{ font-size:34px; margin-top:4px; } .field .btn{ width:auto; margin:0; } .dw-label{ margin:2px 2px 6px; } #account-body{ padding:0 2px; }