/* ========================================================================== ГЛАВНАЯ СТРАНИЦА ========================================================================== ЧТО ЭТО ЗА ФАЙЛ И ЧЕГО В НЕМ НЕТ. Здесь лежит ТОЛЬКО то, чего нет в кабинете: раскладка секций, первый экран, сетки карточек, подвал и виджет поддержки. Палитру, кнопки, карточки, чипы и обе темы приносит ultra.css — тот же файл, что и в кабинете, подключенный строкой выше в . ДО ЭТОГО ТУТ БЫЛО 1757 СТРОК. Файл был самодостаточным: своя палитра, свои кнопки, шесть цветовых оттенков секций, четыре размытых шара на фоне и отдельный цвет рамки у каждой карточки. Выглядело это как другой продукт: человек заходил с главной в кабинет и попадал в другой сервис. Каждая смена фирменного цвета требовала править два файла, и они расходились. Правило одно: если стиль можно взять из ultra.css — берем оттуда. Все, что ниже, описано под .landing и никуда больше не достает. ========================================================================== */ .landing{color:var(--ink); background:var(--bg); min-height:100dvh} .landing .container{width:100%; max-width:1180px; margin:0 auto; padding:0 20px} .landing .container-narrow{max-width:780px} .landing .section{padding:76px 0} .landing .section:first-of-type{padding-top:56px} /* Заголовок секции. Один размер на все — «маленький» вариант остался в разметке из оригинала, но разница там была в два пикселя. */ .landing .section-head{text-align:center; margin-bottom:34px} .landing .section-title{font-size:clamp(24px, 3.4vw, 34px); font-weight:800; letter-spacing:-.02em; margin:0} .landing .section-sub{margin:10px auto 0; color:var(--ink-2); font-size:15px; line-height:1.6; max-width:640px} .landing .section-sub-narrow{max-width:560px} .landing .section-sub-gap{margin-bottom:22px} /* Выделение в текстах и крупные числа — один акцент на всю страницу. Было пять: оранжевый, бирюзовый, синий, зеленый и отдельный градиент для «99.9%». Пять цветов подряд не делят текст на группы, они просто соперничают друг с другом. */ .landing .accent{color:var(--brand-strong); font-weight:700} .landing .text-gradient{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .landing .empty-state{text-align:center; color:var(--ink-2); font-size:14px; margin:0} /* --- ссылка «проскочить меню» ------------------------------------------- */ /* Видима только с клавиатуры: мыши она не нужна, а Tab должен вести к содержимому, а не через восемь пунктов меню. */ .landing .skip-link{ position:absolute; left:-9999px; top:12px; z-index:60; background:var(--surface); color:var(--ink); padding:10px 16px; border-radius:var(--r-ctl); border:var(--bw) solid var(--card-line); text-decoration:none; } .landing .skip-link:focus{left:16px} /* --- шапка -------------------------------------------------------------- */ .landing .nav{ position:sticky; top:0; z-index:40; background:color-mix(in oklab, var(--bg), transparent 12%); backdrop-filter:blur(10px); border-bottom:var(--bw) solid var(--line); } .landing .nav-inner{display:flex; align-items:center; gap:18px; height:62px} .landing .brand{ display:flex; align-items:center; gap:10px; padding:0; margin:0; font-weight:800; font-size:17px; color:inherit; text-decoration:none; flex:none; } .landing .brand-logo{width:30px; height:30px; border-radius:9px; object-fit:cover} .landing .nav-links{display:flex; gap:22px; margin-left:14px; flex:1; min-width:0} .landing .nav-link{color:var(--ink-2); text-decoration:none; font-size:14px; font-weight:600} .landing .nav-link:hover{color:var(--ink)} /* Отступ и волосяная линия отделяют единственный пункт, который уводит со страницы, от якорей, которые ее лишь прокручивают. */ .landing .nav-terms{margin-left:6px; padding-left:22px; border-left:var(--bw) solid var(--line)} .landing .nav-actions{display:flex; align-items:center; gap:10px; margin-left:auto; flex:none} @media (max-width:900px){ .landing .nav-links{display:none} .landing .nav-inner{gap:10px} } /* --- первый экран ------------------------------------------------------- */ /* * Градиентная карточка. ЕДИНСТВЕННАЯ большая заливка на всю страницу — дальше * идут ровные поверхности, и именно поэтому первый экран виден как первый: он * не соперничает с остальным, он от него отличается. * * Текст внутри всегда светлый, в ОБЕИХ темах: под ним не поверхность страницы, * а собственный градиент, и он одинаков и днем, и ночью. */ .landing .hero{padding:28px 0 8px} .landing .hero-card{ position:relative; overflow:hidden; border-radius:26px; background:var(--grad); color:#FFF; padding:clamp(28px, 5vw, 58px); } /* Круг в углу — единственное украшение страницы. Светлый, чуть заметный: он должен придавать карточке глубину, а не читаться как второй элемент. */ .landing .hero-orb{ position:absolute; top:-24%; right:-6%; width:min(46%, 420px); aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.12); pointer-events:none; } .landing .hero-body{position:relative; max-width:660px} .landing .hero-eyebrow{ margin:0 0 18px; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.85; } .landing .hero-title{ font-size:clamp(30px, 5.4vw, 52px); line-height:1.06; letter-spacing:-.03em; font-weight:800; margin:0; text-wrap:balance; } .landing .hero-sub{margin:18px 0 0; max-width:560px; font-size:16.5px; line-height:1.6; opacity:.92} .landing .hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px} /* Кнопки карточки — свои: .btn из ultra.css рассчитан на поверхность страницы, а здесь фон градиентный, и фирменный цвет на нем не читается. */ .landing .hero-cta{ display:inline-flex; align-items:center; justify-content:center; padding:13px 26px; border-radius:var(--r-ctl); text-decoration:none; font-size:15px; font-weight:700; letter-spacing:var(--btn-track); text-transform:var(--btn-caps); background:#FFF; color:#0F2027; border:var(--bw) solid transparent; } .landing .hero-cta:hover{filter:brightness(.95)} .landing .hero-cta.ghost{background:transparent; color:#FFF; border-color:rgba(255,255,255,.55)} .landing .hero-cta.ghost:hover{background:rgba(255,255,255,.12); filter:none} /* Числа под кнопками: сколько стран, сколько протоколов, за сколько подключаешься. Все — из справочника, кроме двух подписей. */ .landing .hero-stats{display:flex; flex-wrap:wrap; gap:26px 40px; margin-top:38px} .landing .stat-value{font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1} .landing .stat-label{margin-top:4px; font-size:12.5px; font-weight:600; opacity:.82} .landing .dot{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none} .landing .pulse-dot{animation:land-pulse 1.8s ease-in-out infinite} @media (max-width:560px){ .landing .hero-card{border-radius:20px} .landing .hero-actions .hero-cta{width:100%} .landing .hero-stats{gap:20px 28px} } /* --- сетки -------------------------------------------------------------- */ .landing .grid{display:grid; gap:14px} /* Ровно три колонки, а не auto-fit: на широком экране auto-fit давал четыре, и последняя карточка ряда оставалась одна — сетка теряла ритм. */ .landing .grid-3{grid-template-columns:repeat(3, minmax(0, 1fr))} .landing .grid-4{grid-template-columns:repeat(4, minmax(0, 1fr))} /* Ровно пять колонок: с auto-fill пять карточек сбивались в левый угол и оставляли половину ряда пустой. */ .landing .grid-5{grid-template-columns:repeat(5, minmax(0, 1fr))} /* auto-fill, а не auto-fit: в справочнике может быть две страны, и auto-fit растянул бы две карточки на весь ряд — они выглядели бы как баннеры, а не как перечень локаций. Пустые колонки честнее. */ .landing .grid-flags{grid-template-columns:repeat(auto-fill, minmax(158px, 1fr))} /* --- преимущества ------------------------------------------------------- */ .landing .feature{padding:20px} .landing .feature-icon{ width:42px; height:42px; border-radius:var(--r-ctl); margin-bottom:14px; display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand-strong); } .landing .feature-icon svg{width:21px; height:21px; stroke-width:1.7} .landing .feature-title{font-size:16px; font-weight:800; margin:0 0 7px} .landing .feature-text{margin:0; font-size:14px; line-height:1.6; color:var(--ink-2)} /* --- тарифы ------------------------------------------------------------- */ /* .plan в ultra.css — карточка тарифа на витрине кабинета; здесь она своя, поэтому правила под .landing перекрывают ее целиком. */ .landing .plan{display:flex; flex-direction:column; padding:22px 20px; position:relative} .landing .plan.has-badge{border-color:var(--brand)} .landing .plan-badge{ position:absolute; top:-10px; left:20px; padding:3px 10px; border-radius:var(--r-chip); background:var(--grad); color:var(--grad-ink); font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } /* Цвет тарифа — тот же, что в конфигураторе кабинета: подложка и граница считаются от него. Полосы сверху нет намеренно: цвет несет сама карточка, а полоса поверх нее оказалась третьим объяснением того же самого. */ .landing .plan{ background:color-mix(in srgb, var(--tier) 8%, var(--surface)); border-color:color-mix(in srgb, var(--tier) 35%, var(--card-line)); } .landing .plan.has-badge{border-color:var(--brand)} .landing .plan-name{ font-size:15px; font-weight:800; margin:0; color:color-mix(in oklab, var(--tier), var(--ink) 32%); } .landing .plan-price{display:flex; align-items:baseline; gap:7px; margin:8px 0 16px} .landing .plan-amount{font-size:34px; font-weight:800; letter-spacing:-.02em} .landing .plan-period{font-size:13px; color:var(--ink-2)} .landing .plan-list{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:9px} .landing .plan-row{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--ink-2)} .landing .plan-ic{flex:none; width:18px; text-align:center; filter:grayscale(1); opacity:.6} .landing .plan-key{color:var(--ink-2)} .landing .plan-cta{margin-top:auto; width:100%; justify-content:center; text-align:center} /* --- локации ------------------------------------------------------------ */ .landing .flag-card{display:flex; align-items:center; gap:11px; padding:13px 15px; position:relative} .landing .flag-card:hover{border-color:var(--brand)} /* Рекомендованная — метка на карточке, а не отдельный список: перечень один, и в нем сразу видно все страны. */ .landing .flag-card.is-top{border-color:var(--brand)} .landing .flag-top{ position:absolute; top:-8px; right:12px; padding:2px 8px; border-radius:var(--r-chip); background:var(--brand); color:var(--brand-ink); font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; } .landing .flag-badge{width:28px; height:20px; flex:none; display:flex; align-items:center; justify-content:center} .landing .flag-badge .flag-img{width:100%; height:100%; object-fit:cover; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.12)} /* У символьного флажка рамки нет: вокруг эмодзи она читается как ошибка верстки. Правило из двух классов, чтобы перебить размер выше. */ .landing .flag-badge .flag-img.flag-emoji{width:auto; height:auto; font-size:19px; box-shadow:none; border-radius:0} .landing .flag-name{font-size:14px; font-weight:700} /* --- оплата ------------------------------------------------------------- */ .landing .pay-card{text-align:center; padding:26px 22px} .landing .pay-title{font-size:17px; font-weight:800; margin:0 0 20px} /* Монеты — цветными кружочками: серый перечень слов читался как примечание, а не как то, чем здесь на самом деле платят. */ .landing .pay-coins{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px} .landing .coin{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 8px; border-radius:var(--r-chip); background:var(--surface-2); border:var(--bw) solid var(--card-line); font-size:13px; font-weight:700; } .landing .coin-mark{ width:24px; height:24px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#FFF; font-size:13px; font-weight:800; line-height:1; } .landing .pay-more{margin:18px 0 12px; font-size:13px; color:var(--ink-2)} /* Шлюзы — строкой под монетами: человека интересует, примут ли его монету, а не через кого мы ее проведем. */ .landing .pay-gates{display:flex; flex-wrap:wrap; justify-content:center; gap:9px} .landing .pay-logo{ padding:6px 14px; border-radius:var(--r-ctl); font-size:12.5px; font-weight:700; color:var(--ink-2); background:var(--surface-2); border:var(--bw) solid var(--card-line); } /* --- протоколы ---------------------------------------------------------- */ /* Плитка с описанием, а не одно название: между «AmneziaWG» и «XRay» выбор без объяснения делается наугад. Значок и текст те же, что в конфигураторе. */ /* Слева, а не по центру: под значком теперь предложение, и центрированный абзац на три строки читается заметно хуже выровненного по краю. */ .landing .proto{display:flex; flex-direction:column; gap:10px; padding:18px 16px; text-align:left} .landing .proto-ic{width:40px; height:40px; flex:none} .landing .proto-ic svg{width:100%; height:100%; display:block; border-radius:var(--r-ctl)} .landing .proto-name{font-size:15px; font-weight:800; margin:0} .landing .proto-text{margin:0; font-size:13px; line-height:1.55; color:var(--ink-2)} /* --- устройства --------------------------------------------------------- */ /* Карточки, а не голые значки в пустом ряду: пять серых кружочков читались как служебное примечание, хотя это ответ на самый частый вопрос — «а у меня заработает?». Цвет значка приходит из разметки: он фирменный у платформы. */ .landing .device{text-align:center; padding:20px 12px} .landing .device-box{ width:52px; height:52px; margin:0 auto 12px; border-radius:var(--r-card); display:flex; align-items:center; justify-content:center; } .landing .device-box svg{width:26px; height:26px} .landing .device-name{font-size:14.5px; font-weight:800; margin:0} .landing .device-sub{font-size:12.5px; color:var(--ink-2); margin:4px 0 0} /* --- почему именно мы --------------------------------------------------- */ .landing .reason{display:flex; gap:13px; padding:18px} .landing .reason-num{ width:30px; height:30px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand-strong); font-size:13px; font-weight:800; } .landing .reason-title{font-size:15px; font-weight:800; margin:0 0 5px} .landing .reason-text{font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:0} /* --- призыв ------------------------------------------------------------- */ .landing .cta-card{ position:relative; overflow:hidden; text-align:center; padding:40px 26px; background:var(--surface); border:var(--bw) solid var(--card-line); border-radius:var(--r-card); } /* Единственная заливка градиентом на всю страницу — и она здесь намеренно: это последний экран, после которого остается только нажать кнопку. */ .landing .cta-wash{position:absolute; inset:0; background:var(--grad); opacity:.09; pointer-events:none} .landing .cta-body{position:relative} .landing .cta-title{font-size:clamp(22px, 3.2vw, 30px); font-weight:800; letter-spacing:-.02em; margin:0} .landing .cta-text{margin:12px auto 24px; max-width:520px; font-size:15px; line-height:1.6; color:var(--ink-2)} /* --- подвал ------------------------------------------------------------- */ .landing .footer{border-top:var(--bw) solid var(--line); padding:30px 0 34px; margin-top:20px} .landing .footer-top{display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between} .landing .footer-brand{display:flex; align-items:center; gap:10px; font-weight:800} .landing .footer-logo{width:26px; height:26px; border-radius:8px; object-fit:cover} .landing .footer-nav{display:flex; flex-wrap:wrap; gap:18px} .landing .footer-nav a{color:var(--ink-2); text-decoration:none; font-size:13.5px} .landing .footer-nav a:hover{color:var(--ink)} .landing .footer-copy{margin:20px 0 0; font-size:12.5px; color:var(--ink-2)} /* --- появление при прокрутке -------------------------------------------- */ /* Без скриптов блоки видно сразу: .active им никто не поставит, поэтому резервное правило ниже и тег