/* Общее оформление Lumeo: витрина, кабинет и страница подключения — одна система. Шрифты. Unbounded вшит base64, но подсет в нём — только «Lumeo VPN», цифры и несколько знаков: кириллицы там НЕТ, и без интернета заголовки честно падают на системный шрифт. Мгновенно и всегда рисуется только логотип — ради него подсет и вшит. Знака ₽ в подсете тоже нет, поэтому цены набраны Montserrat: иначе «245» рисовалось Unbounded, а «₽» рядом — системным шрифтом, разной толщины и высоты, в самом заметном месте страницы. Montserrat и полный Unbounded тянутся с Google асинхронно и при недоступности откатываются на системный. */ @font-face{font-family:'Unbounded';font-weight:700;font-display:swap;src:url(data:font/woff2;base64,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) format('woff2')} @font-face {font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @font-face {font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.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 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: 'Unbounded'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(https://fonts.gstatic.com/s/unbounded/v12/Yq6W-LOTXCb04q32xlpwtsZfrxE.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @font-face {font-family: 'Unbounded'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(https://fonts.gstatic.com/s/unbounded/v12/Yq6W-LOTXCb04q32xlpwv8ZfrxE.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face {font-family: 'Unbounded'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(https://fonts.gstatic.com/s/unbounded/v12/Yq6W-LOTXCb04q32xlpwtcZfrxE.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Unbounded'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(https://fonts.gstatic.com/s/unbounded/v12/Yq6W-LOTXCb04q32xlpwu8Zf.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* ─────────────────────────────────────────────────────────── токены Всё, что повторяется, названо. До этого в трёх файлах жили 15 кеглей, 8 интерлиньяжей, 7 радиусов и два десятка отступов — не система, а осадок. Числа выбраны так, чтобы соседние ступени отличались заметно: шкала, в которой 13 и 13,5 стоят рядом, иерархии не создаёт, а дробные кегли ещё и мылят на экранах с дробным масштабом. */ :root{ color-scheme:dark; --bg:#0d1117; --surf:#161b22; --surf-2:#21262d; --fg:#f0f6fc; --fg-2:#c9d1d9; /* Серые подняты до 4.5:1 даже поверх цветных пятен фона: на прежних #6e7681 и #7b838e подписи под цифрами читались на пределе. */ --mute:#9aa2ac; --dim:#8b949e; /* Две линии разного назначения. Тонкая — разделитель внутри карточки, ей контраст не нужен. Контурная — граница поля и кнопки, то есть граница органа управления: ей нужно 3:1, иначе поле не видно как поле. */ --line:#30363d; --line-2:#21262d; --line-ctl:#656d78; --line-strong:#656d78; --accent:#22d3ee; --accent-ink:#04222b; --accent-soft:rgba(34,211,238,.13); --accent-line:rgba(34,211,238,.32); --ok:#3fb950; --ok-soft:rgba(63,185,80,.13); --ok-line:rgba(63,185,80,.3); --warn:#d29922; --warn-soft:rgba(210,153,34,.13); --warn-line:rgba(210,153,34,.3); --info:#58a6ff; --info-soft:rgba(88,166,255,.13); --info-line:rgba(88,166,255,.3); --bad:#ff7b72; --bad-soft:rgba(255,123,114,.13); --bad-line:rgba(255,123,114,.32); --t-xs:12px; --t-sm:13px; --t-md:14px; --t-base:16px; --t-lg:18px; --t-xl:20px; --t-2xl:26px; --t-3xl:34px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --r-lg:20px; --r:14px; --r-sm:10px; --r-xs:8px; --r-full:999px; --sh-1:0 1px 2px rgba(1,4,9,.5); --sh-2:0 1px 2px rgba(1,4,9,.5), 0 8px 24px -12px rgba(1,4,9,.9); --sh-3:0 2px 4px rgba(1,4,9,.5), 0 16px 32px -16px rgba(1,4,9,.9); --sh-accent:0 1px 2px rgba(1,4,9,.6), 0 8px 20px -10px rgba(34,211,238,.45); --sh:var(--sh-2); --sh-btn:var(--sh-accent); /* прежние имена ещё в ходу */ --dur-1:120ms; --dur-2:180ms; --dur-3:280ms; --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --tint-a:#161b22; --tint-b:#0d1117; --wm:rgba(34,211,238,.06); --pad-x:max(18px,env(safe-area-inset-left)); --pad-r:max(18px,env(safe-area-inset-right)); } /* ──────────────────────────────────────────────────────────── основа */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;min-height:100dvh;background:var(--bg);color:var(--fg); font:var(--t-base)/1.6 'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI", Roboto,"Helvetica Neue",Arial,sans-serif; /* Табличные цифры были включены на весь текст: «1000 ГБ в месяц» в прозе от них разъезжается. Включаем точечно там, где цифры сравнивают глазами. */ padding:max(20px,env(safe-area-inset-top)) var(--pad-r) calc(40px + env(safe-area-inset-bottom)) var(--pad-x); display:flex;justify-content:center; hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word; } .num,.sum,.plan b,.fact .v,.row span:last-child{font-variant-numeric:tabular-nums} ::selection{background:var(--accent-soft);color:var(--fg)} body::before{content:"";position:fixed;inset:-20%;pointer-events:none;z-index:0; background:radial-gradient(38% 30% at 22% 28%, rgba(151,117,250,.13), transparent 60%), radial-gradient(42% 34% at 82% 72%, rgba(34,211,238,.11), transparent 60%), radial-gradient(34% 28% at 62% 12%, rgba(63,185,80,.07), transparent 60%); animation:drift 42s ease-in-out infinite alternate} body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background-image:linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(70% 55% at 50% 30%, #000, transparent 75%); mask-image:radial-gradient(70% 55% at 50% 30%, #000, transparent 75%)} @keyframes drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(2.5%,-2%,0) scale(1.06)}} /* Контент обязан лежать выше подложки: body::before позиционирован и красится поверх непозиционированного текста — заголовки уходили под пелену. */ .wrap,footer,.sec,.hero,main{position:relative;z-index:1} .wrap{width:100%;max-width:440px;margin:0 auto} .wrap.wide{max-width:960px} /* ─────────────────────────────────────────────────────── типографика */ h1{margin:0 0 var(--s3);font-size:clamp(var(--t-2xl),4.6vw,30px);line-height:1.15; letter-spacing:-.02em;font-weight:700; font-family:'Unbounded','Montserrat',-apple-system,sans-serif; text-wrap:balance;hyphens:manual} h2{font-family:'Unbounded','Montserrat',-apple-system,sans-serif;font-weight:600; font-size:var(--t-xl);line-height:1.25;letter-spacing:-.02em;margin:0 0 var(--s3); text-wrap:balance;hyphens:manual} h3{font-size:var(--t-lg);line-height:1.3;margin:0 0 var(--s1);font-weight:650; text-wrap:balance;hyphens:manual} p{margin:0 0 var(--s3);text-wrap:pretty} .lede{color:var(--mute);font-size:var(--t-base);line-height:1.55;margin:0 0 var(--s5); text-wrap:pretty} .hint{color:var(--dim);font-size:var(--t-sm);line-height:1.55;margin:var(--s2) 0 0} a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px} a:hover{text-decoration-color:currentColor} /* ────────────────────────────────────────────────────────── карточка */ .card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg);padding:var(--s4);margin:0 0 var(--s3); position:relative;overflow:hidden; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:border-color var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)} /* Подсветка при наведении уместна только там, где по карточке можно кликнуть. Иначе на телефоне она залипает после тапа и висит до следующего касания. */ a.card,button.card{display:block;text-decoration:none;color:var(--fg)} /* ───────────────────────────────────────────────────────────── кнопка */ .btn{--btn-h:54px; --btn-px:var(--s4); --btn-fs:var(--t-base); display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%; min-height:var(--btn-h);padding:0 var(--btn-px);border-radius:var(--r); border:1px solid transparent;cursor:pointer;text-decoration:none;font-family:inherit; font-size:var(--btn-fs);font-weight:650;line-height:1.25;text-align:center; background:var(--accent);color:var(--accent-ink);box-shadow:var(--sh-accent); transition:filter var(--dur-1) var(--ease),transform 80ms var(--ease)} .btn.ghost{background:var(--bg);color:var(--fg);border-color:var(--line-strong); box-shadow:none} .btn.sm{--btn-h:44px; --btn-px:var(--s4); --btn-fs:var(--t-md); width:auto;box-shadow:none} .btn.auto{width:auto;min-width:210px} .btn .ic{width:20px;height:20px} .btn+.btn{margin-top:var(--s2)} .btn:active{transform:translateY(1px);filter:brightness(.96)} /* Индикатор занятости: раньше каждая страница подменяла надпись своим текстом («Минутку…», «Считаем…», «Отвязываю…») и на кнопке с иконкой стирала её. */ .btn.is-busy{cursor:progress} .btn.is-busy::before{content:"";width:16px;height:16px;border-radius:50%;flex:none; border:2px solid currentColor;border-top-color:transparent; animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(1turn)}} /* Прозрачность на 55% давала 3.6:1 — «недоступно» не значит «нечитаемо». */ button[disabled],.btn[disabled],a.btn[aria-disabled="true"]{ opacity:1;background:var(--surf-2);color:var(--mute);border-color:var(--line); box-shadow:none;cursor:not-allowed;filter:none} /* Наведение — только там, где есть настоящий курсор. На тач-экране :hover срабатывает от тапа и залипает; вместо него всем даём отклик на нажатие. */ @media (hover:hover) and (pointer:fine){ .btn:hover{filter:brightness(1.05)} .btn.ghost:hover{filter:none;background:var(--surf);border-color:var(--accent-line)} a.card:hover,button.card:hover{border-color:var(--accent-line);box-shadow:var(--sh-2)} .plan:hover{border-color:var(--accent-line)} } .plan:active,a.card:active,button.card:active,.pressable:active{ transform:scale(.985);filter:brightness(1.12)} /* ──────────────────────────────────────────────────────────── формы */ label{display:block;font-size:var(--t-sm);color:var(--mute);margin:0 0 var(--s1)} input,select,textarea{width:100%;padding:13px 14px;border-radius:var(--r); border:1px solid var(--line-ctl);background:var(--surf);color:var(--fg); font:inherit;font-size:var(--t-base);margin-bottom:var(--s3); transition:border-color var(--dur-2) var(--ease)} input::placeholder{color:var(--dim)} /* Кольцо фокуса раньше снималось правилом input:focus{outline:none}, которое стояло позже общего и било по специфичности вровень. Гасим только мышиный. */ input:focus,select:focus{border-color:var(--accent)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, [role="radio"]:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--accent);outline-offset:2px} input:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none} .btn:focus-visible{outline-color:var(--fg)} /* кольцо цвета кнопки на ней не видно */ /* ─────────────────────────────────────────────── сообщения и плашки */ .msg{padding:11px 13px;border-radius:var(--r);margin-bottom:var(--s3); font-size:var(--t-md);line-height:1.5;display:none;white-space:pre-line} .msg.ok{display:block;color:var(--ok);background:var(--ok-soft);border:1px solid var(--ok-line)} .msg.warn{display:block;color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn-line)} /* Ошибка обязана быть красной. Жёлтым красится предупреждение — это разные вещи, и человек их различает быстрее, чем читает. */ .msg.err{display:block;color:var(--bad);background:var(--bad-soft);border:1px solid var(--bad-line)} .badge{display:inline-flex;align-items:center;gap:var(--s1);padding:5px 10px; border-radius:var(--r-full);font-size:var(--t-xs);font-weight:600; color:var(--ok);background:var(--ok-soft);border:1px solid var(--ok-line)} .badge.off{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)} .badge.dead{color:var(--bad);background:var(--bad-soft);border-color:var(--bad-line)} /* ───────────────────────────────────────────── строка «поле — значение» */ /* Граница только МЕЖДУ строками. Прежнее :first-of-type не совпадало с .row, если перед ним в карточке стоял любой другой блок, — и первая строка каждой подписки получала лишнюю линию поверх разделителя между подписками. */ .row{display:flex;gap:var(--s3);padding:var(--s3) 0;align-items:baseline} .row+.row{border-top:1px solid var(--line-2)} .row:first-child{padding-top:0} .row span:first-child{color:var(--mute);flex:none} .row span:last-child{margin-left:auto;text-align:right;color:var(--fg-2); min-width:0;overflow-wrap:anywhere} /* ──────────────────────────────────────────── выбор тарифа (общий) */ .plans{display:grid;gap:var(--s2);grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 0 var(--s3)} @media (min-width:440px){.plans{grid-template-columns:repeat(4,minmax(0,1fr))}} .plan{min-width:0;min-height:58px;padding:var(--s3) var(--s2);border-radius:var(--r); border:1px solid var(--line-ctl);background:var(--surf);color:var(--fg);cursor:pointer; font-family:inherit;text-align:center; transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease), color var(--dur-2) var(--ease)} .plan[aria-checked="true"]{background:var(--accent-soft);border-color:var(--accent); color:var(--accent)} .plan b{display:block;font-family:'Montserrat',-apple-system,sans-serif;font-weight:700; font-size:clamp(var(--t-md),4vw,var(--t-base));white-space:nowrap} .plan i{font-style:normal;font-size:var(--t-xs);color:var(--mute)} .plan[aria-checked="true"] i{color:var(--accent)} /* ────────────────────────────────────────────────── логотип и шапка */ .ic{width:20px;height:20px;flex:none;vertical-align:-.14em} .ic.sm{width:16px;height:16px} .logo-t{font-family:'Unbounded',-apple-system,sans-serif;font-weight:700;letter-spacing:-.02em} .top{display:flex;align-items:center;gap:11px;margin-bottom:var(--s5)} /* Белый штрих на бирюзовом давал 1.81:1 — знак почти не читался, а это главный элемент бренда на всех страницах. Чернила акцента дают 9.2:1. */ .mark{width:40px;height:40px;border-radius:var(--r-sm);flex:none;display:grid; place-items:center;background:var(--accent);color:var(--accent-ink)} .mark svg{width:24px;height:24px} .name{font-size:var(--t-lg);line-height:1.2} .top-link{margin-left:auto;min-height:44px;display:inline-flex;align-items:center; font-size:var(--t-md);font-weight:600;color:var(--mute);text-decoration:none} .top-link:hover{color:var(--accent)} /* ─────────────────────────────────────────────────────────── подвал */ footer{border-top:1px solid var(--line-2);margin-top:var(--s6);padding-top:var(--s5); padding-bottom:calc(20px + env(safe-area-inset-bottom)); color:var(--mute);font-size:var(--t-sm);line-height:1.55;text-align:center} footer a{color:var(--mute)} footer a:hover{color:var(--accent)} /* ────────────────────────────────────────────────── доступность */ .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap} .vh--focusable:focus{position:static;width:auto;height:auto;clip:auto; display:inline-block;padding:10px 14px;background:var(--accent); color:var(--accent-ink);border-radius:var(--r-sm);text-decoration:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} .plan:active,a.card:active,button.card:active,.pressable:active,.btn:active{transform:none}} @media (min-width:520px){.hero{border-radius:0 0 var(--r-lg) var(--r-lg)}}