From 448fe3b3606f4323881b9302dad18407537aacc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D0=B4=D1=80=D0=B5=D0=B9=20=D0=91=D0=BE=D0=B1?= =?UTF-8?q?=D1=8B=D1=80=D0=B5=D0=B2?= Date: Thu, 14 May 2026 17:17:10 +0300 Subject: [PATCH] feat(landing): VPN guide UI from reference site Co-authored-by: Cursor --- landing/index.html | 404 ++++++++++++++++--- landing/styles.css | 969 +++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 1253 insertions(+), 120 deletions(-) diff --git a/landing/index.html b/landing/index.html index 219479f..cee1a9c 100644 --- a/landing/index.html +++ b/landing/index.html @@ -1,59 +1,367 @@ - - - Сервер · AmneziaWG + + + Подключение к VPN · частный сервер - + - -
-

Этот сервер

-

Управление AmneziaWG

-

- Здесь установлена админ-панель для клиентов VPN. Перейдите по ссылке ниже (порт задаётся при установке, по умолчанию 8080). -

-

-
+ - + + - - +
+
Частный сервер
+

Подключение к VPN

+

Используйте приложение AmneziaVPN. Конфигурацию выдаёт администратор — импортируйте файл или ключ, который вам передали, и включите туннель. Ниже — пошаговые инструкции для WireGuard и Amnezia VPN.

+
+ +
+
+
Сервер
+ Адрес +
+
—
+ +
+

Сервисы на машине: XRay (TCP) · AmneziaWG (UDP)

+

Номера портов и тип протокола уже зашиты в конфиг Amnezia — вручную их обычно не вводят.

+
+
+ + + + +
+
+
+ + +
+
+
+ + +
+
+ + + + +
+
+
+

WireGuard на iOS

iPhone и iPad · iOS 15 и новее

+
    +
  • 1

    Откройте App Store, найдите WireGuard и нажмите «Установить»

    • +
  • 2

    Откройте приложение, нажмите + в правом верхнем углу

    • +
  • 3

    Выберите «Сканировать QR-код» и наведите камеру на QR — конфиг добавится автоматически

    Или «Создать из файла» → выберите файл .conf
    • +
  • 4

    Придумайте имя туннелю и нажмите «Сохранить»

    • +
  • 5

    Нажмите тумблер → появится запрос, нажмите «Разрешить»

    • +
+
✅

Тумблер зелёный — вы подключены. Значок VPN в строке статуса.

+
+
+
+
+

WireGuard на Android

Android 8 и новее

+
    +
  • 1

    Откройте Google Play, найдите WireGuard и установите

    • +
  • 2

    Запустите приложение, нажмите синюю кнопку + внизу

    • +
  • 3

    Выберите «Сканировать QR-код» и поднесите телефон к коду

    Или «Создать из файла» → файл .conf из загрузок
    • +
  • 4

    Дайте имя туннелю и нажмите «Создать туннель»

    • +
  • 5

    Переключите тумблер → нажмите «ОК» в системном запросе

    • +
+
✅

Значок замка в строке состояния — VPN активен.

+
+
+
+
+

WireGuard на Windows

Windows 10 и 11

+
    +
  • 1

    Скачайте установщик с wireguard.com/install и запустите

    • +
  • 2

    Откройте WireGuard → «Добавить туннель» → «Импорт из файла»

    • +
  • 3

    Выберите ваш файл .conf

    • +
  • 4

    Нажмите «Подключиться» — статус сменится на «Активен»

    • +
+

Если появится запрос UAC — нажмите «Да». Нужно для создания VPN-адаптера.

+
✅

Статус «Активен» — VPN работает.

+
+
+
+
+

WireGuard на macOS

macOS 12 и новее

+
    +
  • 1

    Установите WireGuard из Mac App Store

    • +
  • 2

    Откройте приложение → в меню File → Import Tunnel(s)

    • +
  • 3

    Выберите файл .conf и нажмите «Открыть»

    • +
  • 4

    Нажмите «Подключить» и разрешите VPN в системных настройках

    • +
+
✅

Иконка в меню-баре активна — вы подключены.

+
+
+
+ + +
+
+ + + + +
+
+
+

Amnezia VPN на iOS

iPhone и iPad · Обходит глубокую блокировку

+
    +
  • 1

    Откройте App Store, найдите Amnezia VPN и установите

    • +
  • 2

    Запустите приложение и нажмите «Добавить сервер»

    • +
  • 3

    Нажмите «У меня есть файл настроек» и выберите файл .vpn

    Или «Сканировать QR» → поднесите камеру к коду
    • +
  • 4

    Нажмите «Подключиться» и разрешите добавить VPN-профиль

    • +
+
️

Amnezia маскирует трафик под обычный HTTPS — работает там, где WireGuard блокируется.

+
✅

Кнопка стала оранжевой — вы защищены.

+
+
+
+
+

Amnezia VPN на Android

Android 8 и новее

+
    +
  • 1

    Установите Amnezia VPN из Google Play или APK с amnezia.org

    • +
  • 2

    Откройте → «Добавить сервер»

    • +
  • 3

    Нажмите «Загрузить файл» и выберите файл .vpn

    • +
  • 4

    Нажмите «Подключиться» → разрешите системный запрос VPN

    • +
+
✅

Замок в строке состояния — VPN работает.

+
+
+
+
+

Amnezia VPN на Windows

Windows 10 и 11 · Протокол AmneziaWG

+
    +
  • 1

    Скачайте с amnezia.org для Windows и запустите установщик

    • +
  • 2

    Откройте → «Добавить сервер» → «Открыть файл конфигурации»

    • +
  • 3

    Выберите файл .vpn и нажмите «Подключиться»

    • +
+

AmneziaWG — улучшенный WireGuard с обходом DPI.

+
✅

Индикатор зелёный — VPN активен.

+
+
+
+
+

Amnezia VPN на macOS

macOS 12 и новее

+
    +
  • 1

    Скачайте с amnezia.org для macOS

    • +
  • 2

    Перетащите в папку «Программы» и запустите

    • +
  • 3

    Нажмите «Добавить сервер» → загрузите файл .vpn

    • +
  • 4

    Нажмите «Подключиться» и разрешите сетевые расширения в системных настройках

    • +
+
✅

Иконка Amnezia в меню-баре активна — вы защищены.

+
+
+
+ +
+

Как проверить, что VPN работает?

+
+
1. Откройте 2ip.ru или whatismyip.com
+
2. Страна должна измениться на страну вашего сервера
+
3. Попробуйте открыть нужный сайт — загрузится
+
+
+ +
+

Что делать, если что-то пошло не так

+
+
VPN не подключается
  • Перезапустите приложение
  • Выключите/включите Wi-Fi или мобильный интернет
  • Удалите туннель и добавьте конфиг заново
  • Попробуйте другую сеть
+
VPN включён, нет интернета
  • Отключитесь и подключитесь снова
  • Убедитесь, что конфиг актуальный
  • Перезагрузите устройство
  • Напишите в поддержку
+
Сайты не открываются
  • Очистите кеш браузера
  • Смените DNS на 1.1.1.1
  • Откройте в режиме инкогнито
  • Попробуйте другой браузер
+
Медленная скорость
  • Проверьте скорость без VPN
  • Переподключитесь
  • Закройте лишние приложения
  • Переключитесь Wi-Fi ↔ 4G
+
+
+ +
+
+ + +
+
+
+

Смена региона App Store

+

Пошаговые инструкции для iPhone и iPad

+
+
+ + +
+ +
+

Смена региона позволяет скачивать приложения, недоступные в вашем регионе. Покупки сохранятся, но активные подписки могут потребовать подтверждения.

+
+

Регион: Казахстан

iPhone · iPad · iOS 15 и новее

+
    +
  • 1

    Откройте Настройки → нажмите на своё имя вверху

    • +
  • 2

    Нажмите «Медиаматериалы и покупки» → «Просмотр учётной записи»

    • +
  • 3

    Нажмите «Страна/Регион» → «Сменить страну или регион»

    • +
  • 4

    Найдите и выберите Казахстан

    • +
  • 5

    Нажмите «Принять» условия

    • +
  • 6

    Способ оплаты — выберите «Нет»

    • +
  • 7

    Заполните адрес:

    Пример адреса · Алматы
    ГородАлматы
    Адресул. Абая 1
    Индекс050000
    Телефон+7 727 000 0000
    • +
  • 8

    Нажмите «Далее» — регион изменён

    • +
+
✅

Готово! Откройте App Store — доступны приложения казахстанского региона.

+
+
+ +
+

Американский App Store даёт максимальный доступ к приложениям. Рекомендуем штат Орегон — там нет налога с продаж.

+
+

Регион: США · Oregon

iPhone · iPad · Без налога с продаж

+
    +
  • 1

    Откройте Настройки → нажмите на своё имя вверху

    • +
  • 2

    Нажмите «Медиаматериалы и покупки» → «Просмотр учётной записи»

    • +
  • 3

    Нажмите «Страна/Регион» → «Сменить страну или регион»

    • +
  • 4

    Найдите и выберите Соединённые Штаты

    • +
  • 5

    Нажмите «Принять» условия

    • +
  • 6

    Способ оплаты — выберите «None / Нет»

    • +
  • 7

    Заполните адрес (штат Орегон — без налогов):

    Пример адреса · Oregon, No Tax
    Street1234 SW Main St
    CityPortland
    StateOregon (OR)
    ZIP97201
    Phone503-555-0100
    • +
  • 8

    Нажмите «Далее» — регион изменён

    • +
+
✅

Готово! Бесплатные приложения доступны сразу — без карты.

+

Для платных нужна американская карта или подарочная карта iTunes (Gift Card).

+
+
+

Как вернуть свой регион обратно?

+
+
1. Повторите шаги 1–3 из инструкции выше
+
2. Выберите свою страну из списка
+
3. Скачанные приложения останутся на телефоне
+
+
+
+
+
+ +
+

Возникли проблемы с подключением — напишите администратору сервера.

+
+ Amnezia Admin WebUI + + GitHub + + Boosty + + Ozon СБП + + Telegram @lot_andrey +
+

Поддержать проект — звезда на GitHub и донат. Связаться с автором — Telegram.

+

Страница только для приглашённых пользователей. Не передавайте конфиг третьим лицам.

+
+ + + - + \ No newline at end of file diff --git a/landing/styles.css b/landing/styles.css index 2ab7652..231610b 100644 --- a/landing/styles.css +++ b/landing/styles.css @@ -1,98 +1,865 @@ -:root { - --bg: #070b10; - --card: #111722; - --line: rgba(255, 255, 255, 0.08); - --text: #f4f7ff; - --muted: #94a3b8; - --accent: #7dd3fc; - font-family: "DM Sans", system-ui, sans-serif; -} - -* { +*, +*::before, +*::after { box-sizing: border-box; + margin: 0; + padding: 0; } -body.page { - margin: 0; +:root { + --teal: #1d9e75; + --teal-light: #e1f5ee; + --teal-dark: #085041; + --blue: #378add; + --blue-dark: #185fa5; + --amber: #ba7517; + --bg: #0d0f12; + --bg2: #141720; + --bg3: #1c202b; + --bg4: #232837; + --border: rgba(255, 255, 255, 0.08); + --border2: rgba(255, 255, 255, 0.14); + --text: #f0f2f5; + --muted: #8a93a8; + --muted2: #5e6880; + --font: "Outfit", system-ui, sans-serif; + --mono: "JetBrains Mono", ui-monospace, monospace; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: var(--font); + background: var(--bg); + color: var(--text); min-height: 100vh; + line-height: 1.6; + -webkit-font-smoothing: antialiased; +} + +.site-header { + position: sticky; + top: 0; + z-index: 100; + background: rgba(13, 15, 18, 0.92); + backdrop-filter: blur(20px); + border-bottom: 1px solid var(--border); + padding: 0 1.5rem; +} + +.header-inner { + max-width: 900px; + margin: 0 auto; display: flex; - flex-direction: column; - background: radial-gradient(circle at 20% 20%, rgba(125, 211, 252, 0.08), transparent 35%), - radial-gradient(circle at 80% 0%, rgba(94, 234, 212, 0.06), transparent 40%), - var(--bg); + align-items: center; + justify-content: space-between; + gap: 12px; + min-height: 56px; + flex-wrap: wrap; + padding: 8px 0; +} + +.logo { + display: flex; + align-items: center; + gap: 10px; + font-weight: 700; + font-size: 17px; + letter-spacing: -0.02em; + text-decoration: none; color: var(--text); } -.landing-main { - flex: 1; - max-width: 560px; - margin: 0 auto; - padding: clamp(2rem, 6vw, 4rem) 1.25rem; -} - -.eyebrow { - letter-spacing: 0.18em; - text-transform: uppercase; - font-size: 0.72rem; - color: var(--accent); - margin: 0 0 0.5rem; -} - -.landing-main h1 { - margin: 0 0 1rem; - font-size: clamp(1.5rem, 4vw, 1.85rem); - font-weight: 700; -} - -.lead { - margin: 0 0 1.25rem; - line-height: 1.6; - color: var(--muted); -} - -.admin-row { - margin: 0; +.logo-icon { + width: 32px; + height: 32px; + border-radius: 9px; + background: linear-gradient(135deg, var(--teal), #0a5c45); display: flex; - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; + align-items: center; + justify-content: center; + font-size: 15px; } -.admin-btn { - display: inline-block; - padding: 0.55rem 1rem; - border-radius: 11px; +.header-actions { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; +} + +.header-admin { + padding: 8px 14px; + border-radius: 10px; + border: 1px solid var(--border2); + background: var(--bg3); + font-family: var(--font); + font-size: 13px; font-weight: 600; + color: #5fd8b0; text-decoration: none; - background: linear-gradient(135deg, #38bdf8, #22d3ee); - color: #041018; + transition: + border-color 0.18s, + background 0.18s; } -.admin-btn:hover { - filter: brightness(1.05); +.header-admin:hover { + border-color: rgba(29, 158, 117, 0.45); + background: rgba(29, 158, 117, 0.1); } -.muted-inline { - font-size: 0.82rem; +.status-pill { + display: flex; + align-items: center; + gap: 6px; + padding: 5px 12px; + border-radius: 20px; + border: 1px solid rgba(29, 158, 117, 0.3); + background: rgba(29, 158, 117, 0.08); + font-size: 12px; + color: var(--teal); + font-weight: 500; +} + +.status-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--teal); + box-shadow: 0 0 6px var(--teal); + animation: pulse 2s ease-in-out infinite; +} + +@keyframes pulse { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +.hero { + max-width: 900px; + margin: 0 auto; + padding: 2.5rem 1.5rem 1.25rem; + text-align: center; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 5px 14px; + border-radius: 20px; + border: 1px solid var(--border2); + background: var(--bg3); + font-size: 12px; + color: #5fd8b0; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + margin-bottom: 1rem; +} + +.hero h1 { + font-size: clamp(26px, 6vw, 44px); + font-weight: 700; + letter-spacing: -0.03em; + line-height: 1.15; + margin-bottom: 0.5rem; + background: linear-gradient(135deg, #f0f2f5 30%, #8a93a8); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero p { + font-size: clamp(14px, 2.5vw, 16px); color: var(--muted); + max-width: 520px; + margin: 0 auto 1.25rem; +} + +.hero p strong { + color: var(--text); + font-weight: 600; +} + +.server-summary { + max-width: 900px; + margin: 0 auto 1.5rem; + padding: 0 1.5rem; +} + +.server-summary-card { + background: var(--bg2); + border: 1px solid var(--border); + border-radius: 18px; + padding: 1.25rem 1.5rem; +} + +.server-summary-label { + font-size: 11px; + font-weight: 600; + color: #5fd8b0; + text-transform: uppercase; + letter-spacing: 0.08em; + margin-bottom: 12px; +} + +.server-addr-label { + display: block; + font-size: 13px; + color: var(--muted); + margin-bottom: 8px; +} + +.server-addr-row { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 10px; + margin-bottom: 14px; +} + +.addr-box { + flex: 1; + min-width: 180px; + font-family: var(--mono); + font-size: 14px; + padding: 10px 14px; + background: var(--bg4); + border: 1px solid var(--border); + border-radius: 10px; + color: var(--text); word-break: break-all; } -.support-footer { +.copy-btn { + padding: 10px 18px; + border-radius: 10px; + border: none; + background: linear-gradient(135deg, var(--teal), #0a6b4f); + color: #fff; + font-family: var(--font); + font-size: 13px; + font-weight: 600; + cursor: pointer; + transition: filter 0.15s; +} + +.copy-btn:hover { + filter: brightness(1.06); +} + +.copy-btn.copied { + background: var(--bg4); + color: #5fd8b0; + border: 1px solid rgba(29, 158, 117, 0.4); +} + +.services-line { + font-size: 13.5px; + color: var(--muted); + line-height: 1.55; +} + +.services-line strong { + color: var(--text); + font-weight: 600; +} + +.server-note { + margin-top: 10px; + font-size: 12.5px; + color: var(--muted2); + line-height: 1.5; +} + +.page-nav { + max-width: 900px; + margin: 0 auto 1.5rem; + padding: 0 1.5rem; + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +.page-nav-btn { + display: flex; + align-items: center; + gap: 8px; + padding: 11px 20px; + border-radius: 12px; + border: 1px solid var(--border); + background: var(--bg3); + font-family: var(--font); + font-size: 14px; + font-weight: 500; + color: var(--muted); + cursor: pointer; + transition: all 0.18s; + flex: 1; + justify-content: center; + min-width: 160px; +} + +.page-nav-btn:hover { + border-color: var(--border2); + color: var(--text); +} + +.page-nav-btn.active { + background: var(--bg4); + color: var(--text); + border-color: var(--border2); +} + +.page-section { + display: none; +} + +.page-section.visible { + display: block; +} + +.vpn-switcher { + max-width: 900px; + margin: 0 auto; + padding: 0 1.5rem; +} + +.vpn-tabs { + display: flex; + background: var(--bg3); + border: 1px solid var(--border); + border-radius: 14px; + padding: 4px; + gap: 4px; + margin-bottom: 1.25rem; +} + +.vpn-tab { + flex: 1; + padding: 10px 16px; + border-radius: 10px; + border: none; + background: transparent; + font-family: var(--font); + font-size: 14px; + font-weight: 500; + color: var(--muted); + cursor: pointer; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; +} + +.vpn-tab.active { + background: var(--bg4); + color: var(--text); + border: 1px solid var(--border2); +} + +.vpn-tab-badge { + font-size: 10px; + padding: 2px 7px; + border-radius: 8px; + font-weight: 600; +} + +.wg-badge { + background: rgba(55, 138, 221, 0.15); + color: #7ab8f5; +} + +.amn-badge { + background: rgba(29, 158, 117, 0.15); + color: #5fd8b0; +} + +.platform-selector { + display: flex; + gap: 6px; + margin-bottom: 1.25rem; + flex-wrap: wrap; +} + +.plat-btn { + display: flex; + align-items: center; + gap: 7px; + padding: 8px 14px; + border-radius: 10px; + border: 1px solid var(--border); + background: var(--bg3); + font-family: var(--font); + font-size: 13px; + font-weight: 500; + color: var(--muted); + cursor: pointer; + transition: all 0.18s; + flex: 1; + justify-content: center; + min-width: 80px; +} + +.plat-btn:hover { + border-color: var(--border2); + color: var(--text); +} + +.plat-btn.wg-active { + background: rgba(55, 138, 221, 0.1); + border-color: rgba(55, 138, 221, 0.4); + color: #7ab8f5; +} + +.plat-btn.amn-active { + background: rgba(29, 158, 117, 0.1); + border-color: rgba(29, 158, 117, 0.4); + color: #5fd8b0; +} + +.content { + max-width: 900px; + margin: 0 auto; + padding: 0 1.5rem 3rem; +} + +.vpn-section { + display: none; +} + +.vpn-section.visible { + display: block; +} + +.steps-panel { + display: none; +} + +.steps-panel.visible { + display: block; + animation: fadeUp 0.2s ease; +} + +.region-panel { + display: none; +} + +.region-panel.visible { + display: block; + animation: fadeUp 0.2s ease; +} + +@keyframes fadeUp { + from { + opacity: 0; + transform: translateY(6px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.guide-card { + background: var(--bg2); + border: 1px solid var(--border); + border-radius: 20px; + overflow: hidden; +} + +.guide-card-header { + padding: 1.25rem 1.5rem; + border-bottom: 1px solid var(--border); + display: flex; + align-items: center; + gap: 12px; + background: var(--bg3); +} + +.plat-icon-lg { + width: 44px; + height: 44px; + border-radius: 13px; + display: flex; + align-items: center; + justify-content: center; + font-size: 22px; flex-shrink: 0; - margin-top: auto; - padding: 1.25rem clamp(1rem, 3vw, 1.5rem) 1.5rem; - border-top: 1px solid var(--line); - background: rgba(10, 15, 22, 0.92); +} + +.ios-icon { + background: linear-gradient(135deg, #1c4f8a, #2d7be5); +} + +.android-icon { + background: linear-gradient(135deg, #1a5c38, #2ea86a); +} + +.windows-icon { + background: linear-gradient(135deg, #173a6e, #0077d4); +} + +.macos-icon { + background: linear-gradient(135deg, #3a3a3a, #666); +} + +.guide-card-header-text h2 { + font-size: 17px; + font-weight: 600; + margin-bottom: 2px; +} + +.guide-card-header-text p { + font-size: 12.5px; + color: var(--muted); +} + +.step-list { + list-style: none; +} + +.step-item { + display: flex; + gap: 14px; + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--border); + align-items: flex-start; + transition: background 0.15s; +} + +.step-item:last-child { + border-bottom: none; +} + +.step-item:hover { + background: rgba(255, 255, 255, 0.02); +} + +.step-circle { + width: 28px; + height: 28px; + border-radius: 50%; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + font-weight: 700; + margin-top: 1px; +} + +.wg-circle { + background: rgba(55, 138, 221, 0.15); + color: #7ab8f5; + border: 1px solid rgba(55, 138, 221, 0.25); +} + +.amn-circle { + background: rgba(29, 158, 117, 0.15); + color: #5fd8b0; + border: 1px solid rgba(29, 158, 117, 0.25); +} + +.step-body { + flex: 1; +} + +.step-body p { + font-size: 14.5px; + line-height: 1.6; +} + +.step-body p b { + color: #fff; + font-weight: 600; +} + +.code-tag { + font-family: var(--mono); + font-size: 12px; + background: var(--bg4); + color: #7ab8f5; + padding: 1px 7px; + border-radius: 5px; + border: 1px solid var(--border2); +} + +.alt-step { + font-size: 12.5px; + color: var(--muted); + margin-top: 5px; + padding: 6px 10px; + background: var(--bg4); + border-radius: 8px; + border-left: 2px solid var(--border2); +} + +.notice { + padding: 1rem 1.5rem; + display: flex; + gap: 10px; + align-items: flex-start; + border-top: 1px solid var(--border); +} + +.notice-tip { + background: rgba(186, 117, 23, 0.08); +} + +.notice-success { + background: rgba(29, 158, 117, 0.08); +} + +.notice-icon { + font-size: 16px; + flex-shrink: 0; + margin-top: 1px; +} + +.notice p { + font-size: 13.5px; + line-height: 1.6; +} + +.notice-tip p { + color: #e8b76a; +} + +.notice-success p { + color: #5fd8b0; +} + +.ip-check-section { + margin-top: 1.5rem; +} + +.ip-check-section h3 { + font-size: 15px; + font-weight: 600; + margin-bottom: 0.875rem; +} + +.check-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 10px; +} + +.check-card { + background: var(--bg2); + border: 1px solid var(--border); + border-radius: 14px; + padding: 1rem 1.125rem; + font-size: 13.5px; + line-height: 1.6; +} + +.check-card .n { + font-weight: 700; + color: var(--teal); + margin-right: 4px; +} + +.trouble-section { + margin-top: 2rem; +} + +.trouble-section h3 { + font-size: 15px; + font-weight: 600; + margin-bottom: 0.875rem; +} + +.trouble-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 10px; +} + +.trouble-card { + background: var(--bg2); + border: 1px solid var(--border); + border-radius: 14px; + padding: 1rem 1.125rem; +} + +.trouble-icon { + font-size: 18px; + margin-bottom: 7px; +} + +.trouble-title { + font-size: 13.5px; + font-weight: 600; + margin-bottom: 6px; +} + +.trouble-list { + font-size: 12.5px; + color: var(--muted); + line-height: 1.8; + list-style: none; +} + +.trouble-list li { + padding-left: 10px; + position: relative; +} + +.trouble-list li::before { + content: "·"; + position: absolute; + left: 0; + color: var(--teal); + font-weight: 700; +} + +.region-tabs { + display: flex; + background: var(--bg3); + border: 1px solid var(--border); + border-radius: 14px; + padding: 4px; + gap: 4px; + margin-bottom: 1.25rem; +} + +.region-tab { + flex: 1; + padding: 10px 16px; + border-radius: 10px; + border: none; + background: transparent; + font-family: var(--font); + font-size: 14px; + font-weight: 500; + color: var(--muted); + cursor: pointer; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; +} + +.region-tab.active { + background: var(--bg4); + color: var(--text); + border: 1px solid var(--border2); +} + +.region-hero { + text-align: center; + padding: 0.5rem 1rem 1.5rem; +} + +.region-hero h2 { + font-size: clamp(20px, 4vw, 32px); + font-weight: 700; + letter-spacing: -0.02em; + margin-bottom: 0.4rem; + background: linear-gradient(135deg, #f0f2f5 30%, #8a93a8); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.region-hero p { + font-size: 14px; + color: var(--muted); +} + +.warn-box { + background: rgba(186, 117, 23, 0.08); + border-radius: 14px; + padding: 1rem 1.25rem; + margin-bottom: 1.25rem; + border: 1px solid rgba(186, 117, 23, 0.2); + display: flex; + gap: 10px; + align-items: flex-start; +} + +.warn-box p { + font-size: 13.5px; + color: #e8b76a; + line-height: 1.6; +} + +.addr-card { + background: var(--bg3); + border: 1px solid var(--border); + border-radius: 14px; + padding: 1rem 1.25rem; + margin-top: 10px; +} + +.addr-card-title { + font-size: 11px; + font-weight: 600; + color: var(--muted); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 10px; +} + +.addr-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 6px 0; + border-bottom: 1px solid var(--border); + font-size: 13.5px; + gap: 12px; +} + +.addr-row:last-child { + border-bottom: none; +} + +.addr-label { + color: var(--muted); + flex-shrink: 0; +} + +.addr-val { + font-family: var(--mono); + font-size: 12.5px; + color: var(--text); + text-align: right; +} + +.site-footer { + border-top: 1px solid var(--border); + padding: 1.75rem 1.5rem 2rem; + text-align: center; + font-size: 12px; + color: var(--muted2); +} + +.site-footer-lead { + color: var(--muted); + margin-bottom: 6px; } .support-line { display: flex; flex-wrap: wrap; + justify-content: center; align-items: center; gap: 0.35rem 0.5rem; - font-size: 0.92rem; - color: var(--muted); + margin-top: 12px; + font-size: 12px; } .support-title { @@ -101,12 +868,12 @@ body.page { } .support-sep { - opacity: 0.55; + opacity: 0.45; user-select: none; } .support-line a { - color: var(--accent); + color: #5fd8b0; text-decoration: none; white-space: nowrap; } @@ -116,9 +883,67 @@ body.page { } .support-blurb { - margin: 0.65rem 0 0; - font-size: 0.82rem; + margin: 10px auto 0; + max-width: 36rem; + font-size: 11px; line-height: 1.45; - color: var(--muted); - max-width: 62rem; + color: var(--muted2); +} + +.disclaimer-footer { + margin-top: 16px; + font-size: 11px; + color: var(--muted2); + line-height: 1.45; + max-width: 28rem; + margin-left: auto; + margin-right: auto; +} + +::-webkit-scrollbar { + width: 6px; +} + +::-webkit-scrollbar-track { + background: var(--bg); +} + +::-webkit-scrollbar-thumb { + background: var(--bg4); + border-radius: 3px; +} + +@media (max-width: 600px) { + .hero { + padding: 1.75rem 1.25rem 1rem; + } + + .page-nav, + .vpn-switcher, + .content, + .server-summary { + padding-left: 1.25rem; + padding-right: 1.25rem; + } + + .step-item { + padding: 0.875rem 1rem; + } + + .guide-card-header { + padding: 1rem; + } + + .notice { + padding: 0.875rem 1rem; + } + + .vpn-tab-badge { + display: none; + } + + .page-nav-btn { + font-size: 13px; + padding: 9px 12px; + } }