/* tunbee — оформление. Тем несколько, по умолчанию берётся системная (prefers-color-scheme). Выбор пользователя пишется в data-theme на и переживает перезагрузку. */ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"); /* ---------- тёмно-фиолетовая: база ---------- */ :root, :root[data-theme="violet"]{ --bg:#0a0b12; --bg-glow-1:rgba(139,92,246,.16); --bg-glow-2:rgba(52,211,153,.09); --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.075); --panel-solid:#14161f; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --ink:#e8eaf2; --ink-2:#a3a9bd; --ink-3:#6e748a; --acc:#a78bfa; --acc-2:#8b5cf6; --acc-ink:#0a0611; --acc-soft:rgba(167,139,250,.14); --acc2:#34d399; --ok:#34d399; --err:#f87171; --glass-blur:16px; } /* ---------- тёмно-зелёная ---------- */ :root[data-theme="green"]{ --bg:#050c09; --bg-glow-1:rgba(52,211,153,.16); --bg-glow-2:rgba(16,185,129,.08); --panel:rgba(255,255,255,.04); --panel-2:rgba(255,255,255,.07); --panel-solid:#0c1712; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --ink:#e2f0e9; --ink-2:#9ab5a9; --ink-3:#66837a; --acc:#34d399; --acc-2:#10b981; --acc-ink:#04120c; --acc-soft:rgba(52,211,153,.14); --acc2:#a78bfa; --ok:#34d399; --err:#f87171; } /* ---------- «терминал»: почти монохром ---------- */ :root[data-theme="term"]{ --bg:#000502; --bg-glow-1:rgba(0,255,120,.10); --bg-glow-2:rgba(0,255,120,.05); --panel:rgba(0,255,120,.035); --panel-2:rgba(0,255,120,.06); --panel-solid:#04120a; --line:rgba(0,255,120,.16); --line-2:rgba(0,255,120,.3); --ink:#c8ffdd; --ink-2:#61c78c; --ink-3:#3f8b60; --acc:#00ff88; --acc-2:#00cc6a; --acc-ink:#001a0c; --acc-soft:rgba(0,255,136,.12); --acc2:#00ff88; --ok:#00ff88; --err:#ff5f56; } /* ---------- светлая ---------- */ :root[data-theme="light"]{ --bg:#f6f6fb; --bg-glow-1:rgba(139,92,246,.12); --bg-glow-2:rgba(16,185,129,.08); --panel:rgba(255,255,255,.72); --panel-2:rgba(255,255,255,.9); --panel-solid:#ffffff; --line:rgba(16,18,32,.10); --line-2:rgba(16,18,32,.20); --ink:#14162a; --ink-2:#4c5068; --ink-3:#7b8098; --acc:#6d28d9; --acc-2:#5b21b6; --acc-ink:#ffffff; --acc-soft:rgba(109,40,217,.10); --acc2:#059669; --ok:#059669; --err:#dc2626; } /* системная светлая, если пользователь ничего не выбирал */ @media (prefers-color-scheme: light){ :root:not([data-theme]){ --bg:#f6f6fb; --bg-glow-1:rgba(139,92,246,.12); --bg-glow-2:rgba(16,185,129,.08); --panel:rgba(255,255,255,.72); --panel-2:rgba(255,255,255,.9); --panel-solid:#ffffff; --line:rgba(16,18,32,.10); --line-2:rgba(16,18,32,.20); --ink:#14162a; --ink-2:#4c5068; --ink-3:#7b8098; --acc:#6d28d9; --acc-2:#5b21b6; --acc-ink:#ffffff; --acc-soft:rgba(109,40,217,.10); --acc2:#059669; --ok:#059669; --err:#dc2626; } } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-size:16.5px; line-height:1.68; -webkit-font-smoothing:antialiased; background-image: radial-gradient(58rem 38rem at 12% -8%, var(--bg-glow-1), transparent 62%), radial-gradient(46rem 34rem at 96% 4%, var(--bg-glow-2), transparent 62%); background-attachment:fixed; } .mono{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;} a{color:var(--acc); text-decoration:none;} a:hover{text-decoration:underline;} .wrap{max-width:53rem; margin:0 auto; padding:0 1.4rem;} .wide{max-width:68rem;} /* ---------- стекло ---------- */ .glass{ background:var(--panel); border:1px solid var(--line); border-radius:16px; backdrop-filter:blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%); } /* ---------- шапка ---------- */ header{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0;} .brand{display:flex; align-items:center; gap:.55rem; color:var(--ink); font-weight:700; font-size:1.06rem; letter-spacing:-.01em;} .brand:hover{text-decoration:none; opacity:.85;} .brand svg{display:block; flex:none;} .nav-right{display:flex; align-items:center; gap:.6rem;} .themes{display:flex; gap:.15rem; padding:.2rem; border:1px solid var(--line); border-radius:10px;} .themes button{ width:1.6rem; height:1.6rem; border-radius:7px; border:1px solid transparent; cursor:pointer; padding:0; font-size:0; background:transparent; } .themes button i{display:block; width:100%; height:100%; border-radius:6px;} .themes button[data-set="violet"] i{background:linear-gradient(135deg,#8b5cf6,#34d399);} .themes button[data-set="green"] i{background:linear-gradient(135deg,#10b981,#065f46);} .themes button[data-set="term"] i{background:linear-gradient(135deg,#00ff88,#001a0c);} .themes button[data-set="light"] i{background:linear-gradient(135deg,#ffffff,#c7c9dd);} .themes button.on{border-color:var(--acc);} .themes button:hover{border-color:var(--line-2);} .lang{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden;} .lang button{ background:none; border:0; color:var(--ink-3); cursor:pointer; padding:.42rem .6rem; font:600 .74rem/1 "JetBrains Mono",monospace; } .lang button.on{background:var(--panel-2); color:var(--acc);} .lang button:hover{color:var(--ink);} /* ---------- кнопки ---------- */ .btn{ display:inline-block; border:0; border-radius:11px; cursor:pointer; padding:.78rem 1.5rem; font:600 .96rem/1.4 inherit; text-align:center; } .btn:hover{text-decoration:none;} .btn-main{background:var(--acc); color:var(--acc-ink); box-shadow:0 6px 22px -8px var(--acc);} .btn-main:hover{background:var(--acc-2);} .btn-main:disabled{background:var(--line-2); color:var(--ink-3); cursor:not-allowed; box-shadow:none;} .btn-ghost{background:transparent; border:1px solid var(--line-2); color:var(--ink);} .btn-ghost:hover{border-color:var(--acc);} .btn-lg{padding:1rem 2.1rem; font-size:1.02rem; border-radius:13px;} .btn-wide{width:100%;} /* ---------- текст ---------- */ h1{font-size:clamp(1.9rem,4.4vw,2.9rem); line-height:1.16; letter-spacing:-.025em; margin:0 0 1.1rem; text-wrap:balance;} h2{font-size:clamp(1.35rem,2.7vw,1.75rem); line-height:1.24; letter-spacing:-.018em; margin:0 0 .9rem; text-wrap:balance;} h3{font-size:1.02rem; margin:0 0 .4rem;} p{margin:0 0 1.15rem;} .lead{font-size:1.09rem; color:var(--ink-2);} .muted{color:var(--ink-3); font-size:.9rem;} .big{font-size:1.16rem;} .kicker{ font:600 .74rem/1 "JetBrains Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--acc2); margin:0 0 1rem; } .kicker::before{content:"> "; opacity:.7;} section{padding:4.4rem 0;} section + section{border-top:1px solid var(--line);} .story p{color:var(--ink-2);} .story p strong{color:var(--ink); font-weight:600;} .story .first{font-size:1.16rem; color:var(--ink);} /* врезка */ .note{ border-left:2px solid var(--acc); padding:1rem 1.2rem; margin:1.8rem 0; background:var(--panel); border-radius:0 12px 12px 0; color:var(--ink-2); font-size:.97rem; } .note strong{color:var(--ink);} /* карточки */ .cards{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin-top:2rem;} .card{padding:1.5rem;} .card h3{font-size:1rem;} .card p{color:var(--ink-2); font-size:.92rem; margin:0;} .card .ic{ width:2.1rem; height:2.1rem; border-radius:9px; margin-bottom:.9rem; background:var(--acc-soft); color:var(--acc); display:flex; align-items:center; justify-content:center; font:600 .9rem/1 "JetBrains Mono",monospace; } /* призыв */ .final{text-align:center; padding:4.8rem 0 5.2rem;} .final .glass{padding:2.6rem 1.8rem;} .final h2{margin-bottom:.7rem;} .final .lead{max-width:36rem; margin:0 auto 1.9rem;} /* донаты */ .donate{margin-top:1.6rem;} .wallets{display:grid; gap:.6rem; margin-top:1.2rem;} /* Строка кошелька: сетка в три колонки, чтобы монеты и кнопки стояли ровно друг под другом, а не гуляли по ширине адреса. */ .wallet{ display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:.9rem; row-gap:.55rem; padding:.8rem .95rem; border:1px solid var(--line); border-radius:10px; background:var(--panel); } /* Монета и сеть — двумя строками: сеть должна быть ВИДНА, а не прятаться в подсказке. На телефоне подсказки нет вовсе, а ошибка в сети стоит денег. */ .wallet .coin{grid-area:1 / 1; display:flex; flex-direction:column; gap:.15rem; min-width:0;} .wallet .tag{ color:var(--acc2); font-weight:700; font-size:.84rem; letter-spacing:.02em; font-family:"JetBrains Mono",monospace; } .wallet .net{color:var(--ink-3); font-size:.72rem; line-height:1.2;} /* Адрес — отдельной строкой во всю ширину и с переносом. Многоточие здесь недопустимо: человек должен сверить адрес целиком, иначе деньги уходят вслепую. Колонка под адрес ужимается на любом экране, строка — нет. */ .wallet .addr{ grid-area:2 / 1 / 3 / -1; color:var(--ink); font-family:"JetBrains Mono",monospace; font-size:.76rem; line-height:1.5; letter-spacing:.01em; word-break:break-all; user-select:all; /* Адрес всегда слева направо, даже на арабской странице: двунаправленный текст переставил бы куски адреса местами, и человек скопировал бы глазами не то. */ direction:ltr; text-align:left; unicode-bidi:isolate; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:.45rem .55rem; } .wallet button{ grid-area:1 / 2; justify-self:end; background:transparent; border:1px solid var(--line-2); color:var(--ink-2); border-radius:7px; padding:.34rem .72rem; font:600 .72rem/1 inherit; cursor:pointer; white-space:nowrap; } .wallet button:hover{border-color:var(--acc); color:var(--acc);} .wallet button.ok{border-color:var(--acc); color:var(--acc);} /* ---------- согласия ---------- */ .agreements{display:flex; flex-direction:column; gap:.4rem; margin:1.8rem 0 1.6rem;} .agree{display:flex; gap:.8rem; align-items:flex-start; padding:1rem 1.1rem; cursor:pointer;} .agree:hover{border-color:var(--line-2);} .agree input{margin:.2rem 0 0; width:1.05rem; height:1.05rem; accent-color:var(--acc); flex:none; cursor:pointer;} .agree span{font-size:.94rem; color:var(--ink-2); line-height:1.55;} .agree.checked span{color:var(--ink);} .field{margin-bottom:1rem; text-align:left;} .field label{display:block; font:600 .82rem/1 inherit; color:var(--ink-2); margin-bottom:.45rem;} .field input{ width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line-2); border-radius:10px; padding:.75rem .9rem; font:400 .97rem/1.4 inherit; } .field input:focus{outline:none; border-color:var(--acc);} .field input:disabled{opacity:.45; cursor:not-allowed;} .field .err{color:var(--err); font-size:.83rem; margin-top:.4rem; display:none;} .field .err.on{display:block;} /* ---------- модалка ---------- */ .overlay{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:1.2rem; background:rgba(3,4,8,.74); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .17s ease; } .overlay.open{opacity:1; pointer-events:auto;} .modal{ background:var(--panel-solid); border:1px solid var(--line-2); border-radius:18px; width:100%; max-width:27rem; padding:1.9rem 1.7rem 1.5rem; position:relative; max-height:92vh; overflow-y:auto; transform:translateY(.5rem); transition:transform .17s ease; } .overlay.open .modal{transform:none;} .modal h3{font-size:1.28rem; margin-bottom:.5rem;} .modal .sub{color:var(--ink-2); font-size:.93rem; margin-bottom:1.4rem;} .x{position:absolute; top:.7rem; right:.9rem; background:none; border:0; color:var(--ink-3); font-size:1.5rem; line-height:1; cursor:pointer; padding:.2rem .5rem;} .x:hover{color:var(--ink);} .done{text-align:center; padding:.5rem 0 .2rem;} .done .tick{ width:3.2rem; height:3.2rem; border-radius:50%; margin:0 auto 1rem; background:var(--acc-soft); color:var(--ok); display:flex; align-items:center; justify-content:center; font-size:1.6rem; } footer{border-top:1px solid var(--line); padding:2.4rem 0 3.4rem; color:var(--ink-3); font-size:.86rem;} .foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;} .foot a{color:var(--ink-3);} :focus-visible{outline:2px solid var(--acc); outline-offset:2px;} @media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto;}} @media (max-width:640px){ section{padding:3.2rem 0;} .nav-right{gap:.4rem;} } /* ---------- первый экран: слоган вперёд ---------- */ .hero{padding:5.2rem 0 4.4rem;} .tagline{ font-size:clamp(1.5rem,3.6vw,2.35rem); line-height:1.28; letter-spacing:-.02em; font-weight:600; margin:0 0 2.6rem; text-wrap:balance; color:var(--ink); } .tagline .saas{ background:linear-gradient(100deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; } .tagline .quiet{display:block; margin-top:.5rem; font-size:.62em; font-weight:400; color:var(--ink-2); letter-spacing:-.01em;} .prompt{ font-family:"JetBrains Mono",monospace; font-size:.9rem; font-weight:500; color:var(--acc2); margin:0 0 .9rem; letter-spacing:.02em; } .prompt .cur{ display:inline-block; width:.55em; height:1.05em; margin-left:.12em; background:var(--acc); vertical-align:-.18em; animation:blink 1.15s step-end infinite; } @keyframes blink{0%,49%{opacity:1} 50%,100%{opacity:0}} @media (prefers-reduced-motion:reduce){.prompt .cur{animation:none}} .hero h1{font-size:clamp(1.5rem,3.1vw,2.15rem); color:var(--ink-2); font-weight:500; letter-spacing:-.015em;} .hero h1 b{color:var(--ink); font-weight:700;} /* ---------- одна кнопка тем, как в 3x-ui ---------- */ .theme-btn{ width:2.1rem; height:2.1rem; border-radius:10px; cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--acc); display:flex; align-items:center; justify-content:center; padding:0; } .theme-btn:hover{border-color:var(--acc);} .theme-btn svg{width:1.05rem; height:1.05rem; display:block;} /* ---------- язык выпадающим списком ---------- */ .lang-sel{ appearance:none; -webkit-appearance:none; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); border-radius:10px; padding:.42rem 1.7rem .42rem .6rem; cursor:pointer; font:600 .74rem/1.3 "JetBrains Mono",monospace; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 12px) 52%, calc(100% - 8px) 52%; background-size:4px 4px, 4px 4px; background-repeat:no-repeat; } .lang-sel:hover{border-color:var(--acc); color:var(--ink);} .lang-sel:focus{outline:none; border-color:var(--acc);} .lang-sel option{background:var(--panel-solid); color:var(--ink);} /* ---------- донаты внизу, в подвале ---------- */ .support{border-top:1px solid var(--line); padding:3.4rem 0 1.4rem;} .support-card{max-width:34rem; margin:0 auto; text-align:center; padding:2.1rem 1.9rem 2.3rem;} .support-card h3{font-size:1.18rem; margin:.7rem 0 .55rem;} .support-card .muted{max-width:44ch; margin:0 auto 1.5rem;} .support-ico{display:inline-flex; width:2.6rem; height:2.6rem; border-radius:50%; align-items:center; justify-content:center; color:var(--acc2); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);} .support-ico svg{width:1.35rem; height:1.35rem;} /* ---- правовые страницы: условия и конфиденциальность ---- */ .doc section{padding:3.2rem 0 4rem;} .doc .doc-date{color:var(--ink-3); font-size:.86rem; margin:-.5rem 0 1.6rem; font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;} .doc h2{display:flex; align-items:baseline; gap:.7rem; font-size:1.18rem; margin:2.6rem 0 .8rem; scroll-margin-top:5rem;} .doc h2 .num{color:var(--acc2); font-size:.82rem; font-weight:700; flex:none; font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;} .doc p{color:var(--ink-2); font-size:.96rem; line-height:1.72;} .doc p strong{color:var(--ink); font-weight:600;} .doc .lead{color:var(--ink-2); font-size:1.05rem;} .doc-list{margin:0 0 1.15rem; padding-left:1.15rem; color:var(--ink-2); font-size:.96rem; line-height:1.72;} .doc-list li{margin-bottom:.6rem;} .doc-list li strong{color:var(--ink); font-weight:600;} .doc-tldr{margin:1.8rem 0 .6rem;} .doc-foot{margin-top:2.8rem;} /* ссылка на документ рядом с галочкой согласия */ .agree-doc{font-size:.88rem; white-space:nowrap;} /* ---- личный кабинет ---- */ .narrow{max-width:34rem;} .center{text-align:center;} .mid{display:flex; align-items:center; min-height:82vh;} .pad-lg{padding:1.9rem 1.7rem;} .h-sm{font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:.7rem;} .h-xs{font-size:1.05rem; margin:0 0 .7rem;} .block{margin-top:1rem;} .btn-sm{padding:.45rem 1rem; font-size:.86rem; border-radius:9px;} .btnrow{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.1rem;} .eyebrow{color:var(--acc2); font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 .5rem; font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;} /* плитки со статусом */ .tiles{display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); margin:1.4rem 0 .4rem;} .tile{padding:1.05rem 1.2rem; display:flex; flex-direction:column; gap:.3rem;} .tile-k{color:var(--ink-3); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;} .tile-v{color:var(--ink); font-size:1.12rem; font-weight:600;} /* шаги знакомства */ .guide-step p{color:var(--ink-2);} .guide-step p strong{color:var(--ink); font-weight:600;} .guide-nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line);} .guide-nav .btn-ghost{order:0;} .dots{display:flex; gap:.4rem; flex:1; justify-content:center;} .dots i{width:7px; height:7px; border-radius:50%; background:var(--line-2); display:block; transition:background .2s, transform .2s;} .dots i.on{background:var(--acc); transform:scale(1.25);} /* строка со ссылкой на подписку */ .copyrow{display:flex; gap:.6rem; align-items:center; margin-top:.9rem; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:.6rem .75rem;} .copyval{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); font-size:.86rem; font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;} /* ── кабинет: номер клиента, инструкция, передача ─────────────────── */ .idline{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.2rem 0 .5rem;} .cid{font-family:var(--mono,monospace); font-size:1.02rem; letter-spacing:.06em; padding:.28rem .6rem; border-radius:.5rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);} .idnote{margin:0 0 1.6rem; max-width:52ch;} .howto{margin:.4rem 0 1rem; padding-left:1.15rem; line-height:1.65;} .howto li{margin:.5rem 0;} .hocount{margin:1.2rem 0 .5rem;} .horow{display:flex; gap:.5rem; flex-wrap:wrap;} .horow input{flex:1 1 12rem; min-width:0; padding:.6rem .8rem; border-radius:.6rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:inherit; font-family:var(--mono,monospace); letter-spacing:.05em;} .horow input:focus{outline:none; border-color:rgba(255,255,255,.28);} .hoerr{display:none; margin:.5rem 0 0; font-size:.86rem; color:var(--err);} .hoerr.on{display:block;} .hoerr.ok{color:var(--ok,#5fd39a);} .tg-soon{opacity:.55; cursor:default;} /* ── обещание передать лично ──────────────────────────────────────── */ .warnbox{border-left:3px solid var(--acc2); padding:.7rem 0 .7rem .9rem; margin:1rem 0; color:var(--ink-2); line-height:1.6;} .banner{margin:1rem 0 0; padding:.85rem 1rem; border-radius:.7rem; background:rgba(95,211,154,.10); border:1px solid rgba(95,211,154,.28); line-height:1.55;} /* поля контактов в кабинете */ .idfields{display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.2rem; margin:0 0 2rem; font-size:.94rem; max-width:34rem;} .idfields dt{color:var(--ink-2);} .idfields dd{margin:0;} .small-note{font-size:.87rem; margin:.7rem 0 0; max-width:52ch;} /* ── частые вопросы ───────────────────────────────────────────────── */ .faq{border-top:1px solid var(--line); padding:.15rem 0;} .faq:first-of-type{border-top:none;} .faq summary{cursor:pointer; padding:.85rem 0; font-weight:600; list-style:none; display:flex; align-items:center; gap:.6rem;} .faq summary::-webkit-details-marker{display:none;} .faq summary::before{content:"+"; color:var(--acc2); font-weight:700; flex:none; width:1rem; text-align:center;} .faq[open] summary::before{content:"−";} .faq summary:hover{color:var(--acc);} .faq p{color:var(--ink-2); line-height:1.7; margin:0 0 .95rem 1.6rem; font-size:.94rem;} .copyval{word-break:break-all;} /* ── устройства ───────────────────────────────────────────────────── */ .devlist{list-style:none; margin:1.2rem 0 1rem; padding:0; display:grid; gap:.7rem;} .dev{border:1px solid var(--line); border-radius:.75rem; padding:.9rem 1rem; background:rgba(255,255,255,.02);} .dev-this{border-color:rgba(120,200,255,.35);} .dev-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .8rem; margin-bottom:.6rem;} .dev-head .muted{font-size:.85rem;} .dev .copyrow{margin-bottom:.6rem;} .dev-off{opacity:.75;} .dev-off:hover{opacity:1;} /* скачать и установить */ .dlrow{display:flex; gap:1rem; flex-wrap:wrap; margin:1rem 0 1.1rem;} .dlrow label{display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; color:var(--ink-2); flex:1 1 12rem;} .dlrow select{padding:.55rem .7rem; border-radius:.6rem; font-size:.95rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:var(--ink);} .dlrow select:focus{outline:none; border-color:var(--acc);} /* AmneziaWG-ключи */ .awglist{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.8rem;} .awgpeer{border:1px solid var(--line); border-radius:.75rem; padding:.9rem 1rem; background:rgba(255,255,255,.02);} .awgcfg{margin-top:.7rem;} .awgconf{width:100%; margin:.4rem 0; font-family:var(--mono,monospace); font-size:.78rem; background:rgba(0,0,0,.25); color:var(--ink-2); border:1px solid var(--line); border-radius:.5rem; padding:.5rem; resize:vertical;} /* ── кабинет: боковая навигация ────────────────────────────── Разделов стало много, и одной длинной лентой они не читались: человек искал «где сменить пароль», прокручивая мимо устройств. На узких экранах колонка превращается в ленту вкладок — сбоку на телефоне она съела бы половину ширины. */ .cab { display: grid; grid-template-columns: 190px 1fr; gap: 1.2rem; align-items: start; } .cabnav { display: flex; flex-direction: column; gap: .25rem; position: sticky; top: 5rem; } .cabtab { text-align: left; padding: .5rem .7rem; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: .95rem; border-radius: 8px; } .cabtab:hover { color: var(--fg); background: rgba(127,127,127,.08); } .cabtab.on { color: var(--fg); background: rgba(127,127,127,.10); border-color: var(--line); font-weight: 600; } .cabmain > .block:first-child { margin-top: 0; } .emailrow { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .4rem 0 0; } .emailrow input { flex: 1; min-width: 12rem; } .h-xxs { font-size: .95rem; margin: 1.2rem 0 .3rem; } @media (max-width: 820px) { .cab { grid-template-columns: 1fr; } .cabnav { position: static; flex-direction: row; overflow-x: auto; gap: .35rem; padding-bottom: .5rem; margin-bottom: .3rem; } .cabtab { white-space: nowrap; } } /* Вход в шапке. Раньше попасть в кабинет можно было только зная адрес /login: со страницы входа ссылка на заявку была, обратной не было нигде. Держим неяркой — главное действие на сайте всё-таки «получить доступ». */ .nav-login{ padding:6px 14px; border:1px solid var(--line); border-radius:8px; color:var(--fg); text-decoration:none; font-size:.9rem; white-space:nowrap; } .nav-login:hover{border-color:var(--acc); color:var(--acc)} /* Имя устройства при добавлении. Без него все устройства одной системы выглядят одинаково («Windows», «Windows»), и человек не знает, какое отвязывает. */ .devadd{margin:14px 0 6px} .devadd label{display:block; margin-bottom:6px; font-size:.9rem} .devadd input{ width:100%; max-width:420px; box-sizing:border-box; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg2); color:var(--fg); font:inherit; font-size:.95rem; } .devadd input:focus{outline:none; border-color:var(--acc)} .dev-rename{margin-left:8px} /* Ссылки на подписки по кольцам. Видны только тем, у кого колец больше одного: у обычного человека оно одно, и блок ему ни к чему. */ .ringLinks{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0} .ringLinks .small-note{flex-basis:100%; margin:0 0 2px} /* ---------- кабинет: вид «новичок» / «профи» ---------- */ /* Переключатель стоит над навигацией: он меняет саму навигацию, и прятать его внутрь одного из разделов значило бы прятать от того, кому он нужен. */ .modebar{ display:flex; align-items:center; gap:.7rem; margin:0 0 .9rem; flex-wrap:wrap; } .modesw{ display:inline-flex; border:1px solid var(--line-2); border-radius:9px; overflow:hidden; } .modebtn{ background:transparent; border:0; color:var(--ink-2); cursor:pointer; font:600 .8rem/1 inherit; padding:.45rem .8rem; } .modebtn:hover{color:var(--ink);} .modebtn.on{background:rgba(127,127,127,.14); color:var(--ink);} /* Устройство в левой колонке — подпункт «Устройств», а не равный им пункт. */ .cabsub{ padding-left:1.5rem; font-size:.88rem; border-left:2px solid var(--line); border-radius:0 8px 8px 0; } .cabsub.dev-here::after{content:" ·"; color:var(--acc);} .proring{margin-top:1.4rem;} .proring:first-of-type{margin-top:.6rem;} .prolist{display:flex; flex-direction:column; gap:.5rem;} .prorow{ border:1px solid var(--line); border-radius:9px; padding:.55rem .7rem; background:var(--panel); display:flex; flex-direction:column; gap:.35rem; } .prohead{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;} .prohead b{font-size:.9rem;} .prohead .btn{margin-left:auto;} /* Предупреждение про звонки: оно важнее названия узла, потому и цветом. */ .pronote{ color:var(--err); font-size:.72rem; border:1px solid var(--err); border-radius:6px; padding:.1rem .4rem; white-space:nowrap; } .prorow .copyval{ font-family:"JetBrains Mono",monospace; font-size:.72rem; line-height:1.45; color:var(--ink-2); word-break:break-all; user-select:all; direction:ltr; text-align:left; unicode-bidi:isolate; } /* Удаление аккаунта. Красным — не для красоты: это единственное действие в кабинете, которое нельзя отменить. */ h3.danger{color:var(--err);} .btn-danger{border-color:var(--err); color:var(--err);} .btn-danger:hover{background:var(--err); color:#fff; border-color:var(--err);} #delBlock{margin-top:1.6rem; border-top:1px solid var(--line); padding-top:1.2rem;} /* ---------- кабинет: своя ширина ---------- */ /* Обычные страницы — это текст, и узкая колонка там правильная: длинную строку тяжело читать. Кабинет устроен иначе: слева навигация, справа таблицы, ссылки на подписку и конфиги. В колонке от главной левое меню начиналось с середины экрана, а справа оставалась пустота. */ .cabwrap{max-width:min(90rem, 100% - 3rem); padding-inline:1.5rem;} /* Текстовые пояснения внутри всё равно держим читаемой длины: во всю ширину монитора абзац превращается в полосу, которую глазом не собрать. */ .cabwrap .cabmain p:not(.devcount):not(.prohead p), .cabwrap .cabmain .muted{max-width:46rem;} /* Без этого длинная ссылка внутри распирает колонку и уводит всю страницу вбок — появляется горизонтальная прокрутка на пустом месте. */ .cab{min-width:0;} .cabmain{min-width:0;} .cabmain .copyval, .cabmain code{min-width:0; overflow-wrap:anywhere;} @media (max-width:900px){ .cabwrap{max-width:100%; padding-inline:1.1rem;} } /* ---------- кабинет: первый экран ---------- */ /* Человек открывает кабинет с одним вопросом — работает или нет. Поэтому ответ стоит выше всего остального и читается, не приближаясь. */ .hero{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; margin:0 0 1rem; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:12px; background:var(--panel); } .hero-main{display:flex; align-items:center; gap:.9rem; min-width:0;} .hero-dot{ width:.7rem; height:.7rem; border-radius:50%; flex:none; background:var(--ink-3); } .hero-dot.on{background:var(--acc); box-shadow:0 0 0 4px color-mix(in srgb, var(--acc) 22%, transparent);} .hero-dot.off{background:var(--err); box-shadow:0 0 0 4px color-mix(in srgb, var(--err) 22%, transparent);} .hero-title{font:700 1.15rem/1.2 inherit; color:var(--ink);} .hero-note{font-size:.82rem; margin-top:.15rem;} .hero-ch{ display:flex; flex-direction:column; align-items:flex-end; gap:.1rem; background:transparent; border:1px solid var(--line-2); border-radius:10px; padding:.5rem .8rem; cursor:pointer; color:inherit; font:inherit; } .hero-ch:hover{border-color:var(--acc);} .hero-ch-n{font:700 1.05rem/1 "JetBrains Mono",monospace; color:var(--acc);} .hero-ch-n.warn{color:var(--err);} .hero-ch-l{font-size:.72rem;} .chanlist{ margin:0 0 1rem; padding:.8rem 1rem; border:1px solid var(--line); border-radius:12px; background:var(--panel); } .chan{display:flex; align-items:center; gap:.6rem; padding:.3rem 0;} .chan-dot{width:.5rem; height:.5rem; border-radius:50%; flex:none; background:var(--ink-3);} .chan-dot.on{background:var(--acc);} .chan-dot.off{background:var(--err);} .chan-dot.skip{background:var(--ink-3);} .chan-name{font-size:.88rem; color:var(--ink-2);} .chan-st{margin-left:auto; font-size:.75rem;}