feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wangjia
@@ -0,0 +1,29 @@
|
||||
# 穿山甲 VPN — 官网宣传页 UI Kit
|
||||
|
||||
品牌官网落地页,沿用暖大地色设计系统。含 **产品 / 定价 / 下载 / 文档 / Blog** 全部板块,定价结构参考 Bitwarden(分档 + 功能对比表)但配色保持 clay 暖调。
|
||||
|
||||
## 运行
|
||||
打开 `index.html`(响应式:≤980px 单列堆叠,>980px 桌面两列/多列)。
|
||||
- **顶栏**:品牌标 + 锚点导航(产品/定价/下载/文档/Blog)+ 中/EN 切换 + 登录 + 立即下载;滚动时毛玻璃 + 描边。
|
||||
- **Hero**:大标题 + 连接卡(success 态 orb + 速率 + 当前节点)+ 平台条。
|
||||
- **产品**:6 个功能卡(一键连接/智能分流/80+节点/无日志/Kill Switch/多端同步)。
|
||||
- **定价**:月/年切换(年付 -20%)+ 3 档套餐(专业版 clay 渐变高亮「最受欢迎」)+ **为何无支付按钮**说明 + 渠道 chips + 功能对比表。
|
||||
- **下载**:5 平台卡(iOS/Android/macOS/Windows/Linux)。
|
||||
- **文档**:4 个文档入口(快速开始/常见问题/协议安全/隐私政策)。
|
||||
- **Blog**:3 篇文章卡。
|
||||
- **CTA band** + **页脚**(渠道/资源/服务时间)。
|
||||
|
||||
## 文件
|
||||
| 文件 | 内容 |
|
||||
|---|---|
|
||||
| `index.html` | 页面结构(语义化 + `data-i18n` 键) |
|
||||
| `website.css` | 全部样式,基于 `../../colors_and_type.css` 令牌 |
|
||||
| `site.js` | i18n 字典(中/EN 全量切换,持久化)+ 月/年定价切换 + 滚动毛玻璃 |
|
||||
|
||||
## 关键模式
|
||||
- 颜色/字体/圆角/阴影全部走设计系统语义 token;暖大地色,无蓝紫。
|
||||
- **单语言显示**:中/EN 通过顶栏段控整页切换(`data-i18n` + JS 字典),不并排。
|
||||
- **App 内无支付** 原则延伸到官网:定价区不放支付表单,CTA 为「获取激活码」+ 外部渠道(自助发卡/Telegram/LINE/邮箱),并有显式说明。
|
||||
- 连接卡 orb 复用 App 核心连接键的 success 态视觉(满白环 + 盾勾 + 计时 + 绿光晕)。
|
||||
- 图标 Lucide(CDN);品牌标内联 SVG(行走穿山甲,与全系统一致)。
|
||||
- 演示渠道/价格为占位,落地替换。
|
||||
@@ -0,0 +1,378 @@
|
||||
<!-- @dsCard group="UI Kit — Website" name="UI Kit · 官网宣传页" subtitle="产品/定价/下载/文档/Blog · 暖大地色 · 中英切换" viewport="1140x720" -->
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>穿山甲 · Pangolin — 极速 · 稳定 · 省心</title>
|
||||
<link rel="stylesheet" href="../../colors_and_type.css">
|
||||
<link rel="stylesheet" href="website.css?v=quota1">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ===== Announcement bar (A) ===== -->
|
||||
<div class="ann" id="ann">
|
||||
<div class="wrap ann-in">
|
||||
<i data-lucide="gift"></i>
|
||||
<span data-i18n="ann.txt">新用户注册即享 7 天免费试用</span>
|
||||
<a href="#signup" data-i18n="ann.cta">立即注册 →</a>
|
||||
<button class="ann-x" onclick="__closeAnn()" aria-label="close"><i data-lucide="x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Header ===== -->
|
||||
<header class="hdr">
|
||||
<div class="wrap row">
|
||||
<a class="brand" href="#top">
|
||||
<svg width="30" height="30" viewBox="0 0 96 96" fill="none"><g transform="translate(96,0) scale(-1,1)"><path d="M16 59 Q17 51 26 50 Q34 31 45 30 Q55 30 62 37 Q69 41 75 45 Q85 49 89 44 Q92 50 84 52 Q75 53 67 53 Q66 62 60 62 L56 62 Q54 55 49 55 Q47 62 37 62 L33 62 Q31 56 26 56 Q20 59 16 59 Z" fill="#B96A3D"/><g stroke="#FAF3ED" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.85"><path d="M26 50 Q34 43 42 50"/><path d="M36 48 Q44 41 52 48"/><path d="M46 48 Q54 41 62 49"/></g><circle cx="23" cy="55" r="2.2" fill="#FAF3ED"/></g></svg>
|
||||
<span class="nm">穿山甲</span>
|
||||
</a>
|
||||
<nav class="nav">
|
||||
<a href="#product" data-i18n="nav.product">产品</a>
|
||||
<a href="#pricing" data-i18n="nav.pricing">定价</a>
|
||||
<a href="#download" data-i18n="nav.download">下载</a>
|
||||
<a href="#docs" data-i18n="nav.docs">文档</a>
|
||||
<a href="#blog" data-i18n="nav.blog">Blog</a>
|
||||
</nav>
|
||||
<div class="right">
|
||||
<div class="langseg">
|
||||
<button data-lang="zh" onclick="__setLang('zh')">中文</button>
|
||||
<button data-lang="en" onclick="__setLang('en')">EN</button>
|
||||
</div>
|
||||
<span class="linklogin" data-i18n="nav.login">登录</span>
|
||||
<a class="btn btn-primary" href="#download"><i data-lucide="download"></i><span data-i18n="nav.get">立即下载</span></a>
|
||||
<button class="menu-btn" onclick="__toggleMenu()" aria-label="menu"><i data-lucide="menu"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- mobile dropdown nav -->
|
||||
<div class="mnav" id="mnav">
|
||||
<a href="#product" data-i18n="nav.product">产品</a>
|
||||
<a href="#pricing" data-i18n="nav.pricing">定价</a>
|
||||
<a href="#download" data-i18n="nav.download">下载</a>
|
||||
<a href="#docs" data-i18n="nav.docs">文档</a>
|
||||
<a href="#blog" data-i18n="nav.blog">Blog</a>
|
||||
<a class="btn btn-primary" href="#signup"><span data-i18n="su.btn">免费注册</span></a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<a id="top"></a>
|
||||
|
||||
<!-- ===== Hero ===== -->
|
||||
<section class="hero">
|
||||
<div class="wrap grid">
|
||||
<div>
|
||||
<div class="eyebrow" data-i18n="hero.eyebrow">极速 · 稳定 · 省心</div>
|
||||
<h1 style="white-space:pre-line" data-i18n="hero.h1">极速畅连,
|
||||
网络如丝顺滑</h1>
|
||||
<p class="lede" data-i18n="hero.lede">轻盈、亲和、即开即用的跨平台网络加速应用。一键连接,智能选线,稳定不掉线。</p>
|
||||
<!-- inline signup (B) -->
|
||||
<form class="signup" id="signup" onsubmit="return __signup(event)">
|
||||
<div class="su-row">
|
||||
<div class="su-field">
|
||||
<i data-lucide="mail"></i>
|
||||
<input type="email" id="su-email" placeholder="输入邮箱,免费注册" data-i18n-ph="su.ph" required>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-lg su-btn" type="submit"><span data-i18n="su.btn">免费注册</span></button>
|
||||
</div>
|
||||
<div class="su-ok" id="su-ok" hidden>
|
||||
<i data-lucide="check-circle"></i>
|
||||
<span data-i18n="su.ok">验证码已发送!下载 App 并用同一邮箱继续完成注册。</span>
|
||||
</div>
|
||||
<div class="su-hint">
|
||||
<span data-i18n="su.hint">免费注册 · 无需付款 · 7 天免费试用</span>
|
||||
<a class="su-dl" href="#download"><i data-lucide="download"></i><span data-i18n="su.dl">或直接下载 App</span></a>
|
||||
</div>
|
||||
</form>
|
||||
<div class="trust">
|
||||
<span><i data-lucide="check"></i><span data-i18n="hero.t1">80+ 全球加速线路</span></span>
|
||||
<span><i data-lucide="check"></i><span data-i18n="hero.t2">严格无日志</span></span>
|
||||
<span><i data-lucide="check"></i><span data-i18n="hero.t3">端到端加密</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="orb-wrap">
|
||||
<div class="orb-card">
|
||||
<div class="orb">
|
||||
<svg class="ring" viewBox="0 0 184 184"><circle cx="92" cy="92" r="85" fill="none" stroke="rgba(255,255,255,.85)" stroke-width="4" stroke-linecap="round"/></svg>
|
||||
<i data-lucide="shield-check" class="ic"></i>
|
||||
<span class="tm">02:14:08</span>
|
||||
<span class="sf" data-i18n="orb.cap">已连接</span>
|
||||
</div>
|
||||
<div class="orb-meta">
|
||||
<div class="m"><div class="k"><i data-lucide="arrow-down"></i><span data-i18n="orb.down">下载</span></div><div class="v">86.4<span style="font-size:10px;color:var(--fg3)"> Mb/s</span></div></div>
|
||||
<div class="m"><div class="k"><i data-lucide="arrow-up"></i><span data-i18n="orb.up">上传</span></div><div class="v">12.1<span style="font-size:10px;color:var(--fg3)"> Mb/s</span></div></div>
|
||||
</div>
|
||||
<div class="orb-node">
|
||||
<div class="cc">HK</div>
|
||||
<div style="flex:1"><div class="nn" data-i18n="orb.node">香港 · 流媒体</div><div class="ns" data-i18n="orb.nodesub">延迟 18ms · 已连接</div></div>
|
||||
<i data-lucide="chevron-right" style="width:18px;height:18px;color:var(--fg3)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap strip">
|
||||
<span data-i18n="strip.txt">已支持</span>
|
||||
<span><i data-lucide="smartphone"></i>iOS</span>
|
||||
<span><i data-lucide="smartphone"></i>Android</span>
|
||||
<span><i data-lucide="laptop"></i>macOS</span>
|
||||
<span><i data-lucide="monitor"></i>Windows</span>
|
||||
<span><i data-lucide="terminal"></i>Linux</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== Product / Features ===== -->
|
||||
<section id="product" class="sec-tan">
|
||||
<div class="wrap center">
|
||||
<div class="eyebrow" data-i18n="feat.eyebrow">产品</div>
|
||||
<h2 class="h-sec" data-i18n="feat.h">为日常而生的连接体验</h2>
|
||||
<p class="sub-sec" data-i18n="feat.sub">没有复杂配置,没有技术门槛。打开就用,把安全留给我们。</p>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<div class="feat-grid">
|
||||
<div class="feat"><div class="ico"><i data-lucide="power"></i></div><h3 data-i18n="feat.1t">一键连接</h3><p data-i18n="feat.1d"></p></div>
|
||||
<div class="feat"><div class="ico"><i data-lucide="zap"></i></div><h3 data-i18n="feat.2t">智能分流</h3><p data-i18n="feat.2d"></p></div>
|
||||
<div class="feat"><div class="ico"><i data-lucide="globe"></i></div><h3 data-i18n="feat.3t">80+ 全球加速线路</h3><p data-i18n="feat.3d"></p></div>
|
||||
<div class="feat"><div class="ico"><i data-lucide="eye-off"></i></div><h3 data-i18n="feat.4t">严格无日志</h3><p data-i18n="feat.4d"></p></div>
|
||||
<div class="feat"><div class="ico"><i data-lucide="shield"></i></div><h3 data-i18n="feat.5t">Kill Switch</h3><p data-i18n="feat.5d"></p></div>
|
||||
<div class="feat"><div class="ico"><i data-lucide="monitor-smartphone"></i></div><h3 data-i18n="feat.6t">多端同步</h3><p data-i18n="feat.6d"></p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== Why sign up (C) ===== -->
|
||||
<section id="why-signup">
|
||||
<div class="wrap center">
|
||||
<div class="eyebrow" data-i18n="why.eyebrow">免费注册</div>
|
||||
<h2 class="h-sec" data-i18n="why.h">注册一次,处处可用</h2>
|
||||
<p class="sub-sec" data-i18n="why.sub">一个邮箱就能开始。注册免费,不需要任何付款信息。</p>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<div class="why-grid">
|
||||
<div class="why"><div class="ico"><i data-lucide="gift"></i></div><h3 data-i18n="why.1t">7 天免费试用</h3><p data-i18n="why.1d">新用户注册即享 7 天免费使用,无需任何付款信息。</p></div>
|
||||
<div class="why"><div class="ico"><i data-lucide="monitor-smartphone"></i></div><h3 data-i18n="why.2t">多端同步</h3><p data-i18n="why.2d">手机、平板、电脑共用一个账户,套餐与设置随身走。</p></div>
|
||||
<div class="why"><div class="ico"><i data-lucide="badge-check"></i></div><h3 data-i18n="why.3t">无需付款信息</h3><p data-i18n="why.3d">注册只要邮箱。想升级时,再通过外部渠道兑换激活码。</p></div>
|
||||
</div>
|
||||
<div class="steps">
|
||||
<div class="step"><span class="n">1</span><i data-lucide="mail"></i><span class="t" data-i18n="why.s1">填写邮箱</span></div>
|
||||
<span class="step-arr"><i data-lucide="arrow-right"></i></span>
|
||||
<div class="step"><span class="n">2</span><i data-lucide="shield-check"></i><span class="t" data-i18n="why.s2">输入验证码</span></div>
|
||||
<span class="step-arr"><i data-lucide="arrow-right"></i></span>
|
||||
<div class="step"><span class="n">3</span><i data-lucide="power"></i><span class="t" data-i18n="why.s3">开始畅连</span></div>
|
||||
</div>
|
||||
<div class="why-cta">
|
||||
<a class="btn btn-primary btn-lg" href="#signup"><span data-i18n="why.cta">立即免费注册</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== Pricing ===== -->
|
||||
<section id="pricing">
|
||||
<div class="wrap center">
|
||||
<div class="eyebrow" data-i18n="price.eyebrow">定价</div>
|
||||
<h2 class="h-sec" data-i18n="price.h">简单透明的价格</h2>
|
||||
<p class="sub-sec" data-i18n="price.sub">随时升级或取消。所有套餐均含核心加密与无日志承诺。</p>
|
||||
<div class="price-toggle">
|
||||
<button class="on" data-cycle="monthly" onclick="__setCycle('monthly')" data-i18n="price.monthly">按月</button>
|
||||
<button data-cycle="yearly" onclick="__setCycle('yearly')"><span data-i18n="price.yearly">按年</span><span class="save" data-i18n="price.save">省 20%</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<div class="price-grid">
|
||||
<!-- Free -->
|
||||
<div class="plan">
|
||||
<div class="pname" data-i18n="price.free">免费版</div>
|
||||
<div class="price" data-price="free">¥0<small data-i18n="price.permo">/月</small></div>
|
||||
<div class="pdesc" data-i18n="price.freedesc">适合轻度使用与尝鲜</div>
|
||||
<ul class="feats">
|
||||
<li><i data-lucide="check"></i><span data-i18n="pf.free1">每日 10 分钟时长</span></li>
|
||||
<li><i data-lucide="check"></i><span data-i18n="pf.free2">仅 1 个基础节点</span></li>
|
||||
<li><i data-lucide="check"></i><span data-i18n="pf.free3">使用前观看广告</span></li>
|
||||
<li><i data-lucide="check"></i><span data-i18n="pf.free4">核心加密 · 无日志</span></li>
|
||||
</ul>
|
||||
<button class="pcta pcta-out" data-i18n="price.cta_free">免费下载</button>
|
||||
</div>
|
||||
<!-- Pro -->
|
||||
<div class="plan feat-plan">
|
||||
<div class="pop" data-i18n="price.popular">最受欢迎</div>
|
||||
<div class="pname" data-i18n="price.pro">专业版</div>
|
||||
<div class="price" data-price="pro">¥25<small data-i18n="price.permo">/月</small></div>
|
||||
<div class="pdesc" data-i18n="price.prodesc">个人用户的最佳选择</div>
|
||||
<ul class="feats">
|
||||
<li><i data-lucide="check"></i><span data-i18n="pf.pro1">80+ 全球加速线路</span></li>
|
||||
<li><i data-lucide="check"></i><span data-i18n="pf.pro2">无限流量 · 极速</span></li>
|
||||
<li><i data-lucide="check"></i><span data-i18n="pf.pro3">5 台设备同时在线</span></li>
|
||||
<li><i data-lucide="check"></i><span data-i18n="pf.pro4">流媒体 & P2P 优化</span></li>
|
||||
<li><i data-lucide="check"></i><span data-i18n="pf.pro5">Kill Switch · 智能分流</span></li>
|
||||
</ul>
|
||||
<button class="pcta pcta-white" data-i18n="price.cta_pro">获取激活码</button>
|
||||
</div>
|
||||
<!-- Team -->
|
||||
<div class="plan">
|
||||
<div class="pname" data-i18n="price.team">团队版</div>
|
||||
<div class="price" data-price="team">¥99<small data-i18n="price.permo">/月</small></div>
|
||||
<div class="pdesc" data-i18n="price.teamdesc">小团队集中管理</div>
|
||||
<ul class="feats">
|
||||
<li><i data-lucide="check"></i><span data-i18n="pf.team1">专业版全部功能</span></li>
|
||||
<li><i data-lucide="check"></i><span data-i18n="pf.team2">10 个成员席位</span></li>
|
||||
<li><i data-lucide="check"></i><span data-i18n="pf.team3">集中计费与管理</span></li>
|
||||
<li><i data-lucide="check"></i><span data-i18n="pf.team4">优先客服</span></li>
|
||||
</ul>
|
||||
<button class="pcta pcta-fill" data-i18n="price.cta_team">获取激活码</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- payment note -->
|
||||
<div class="pay-note">
|
||||
<i data-lucide="shield-check"></i>
|
||||
<div>
|
||||
<b data-i18n="pay.title">为什么网页上没有支付按钮?</b><br>
|
||||
<span data-i18n="pay.body">出于风控与隐私考虑,穿山甲不在网页或 App 内直接收款。你可以通过以下任一渠道获取激活码,在客户端内兑换即可开通。</span>
|
||||
<div class="chips">
|
||||
<span class="chip"><i data-lucide="shopping-bag"></i><span data-i18n="pay.store">自助发卡商店</span></span>
|
||||
<span class="chip"><i data-lucide="credit-card"></i><span data-i18n="pay.usdt">USDT (TRC20) · 最隐私</span></span>
|
||||
<span class="chip"><i data-lucide="send"></i>Telegram @PangolinVPN_bot</span>
|
||||
<span class="chip"><i data-lucide="message-circle"></i>LINE @pangolinvpn</span>
|
||||
<span class="chip"><i data-lucide="mail"></i>buy@pangolin.vpn</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- comparison table -->
|
||||
<h3 style="font-family:var(--font-display);font-weight:700;font-size:22px;margin:46px 0 0;text-align:center" data-i18n="cmp.h">功能对比</h3>
|
||||
<div class="cmp">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th data-i18n="cmp.feature">功能</th>
|
||||
<th data-i18n="price.free">免费版</th>
|
||||
<th data-i18n="price.pro">专业版</th>
|
||||
<th data-i18n="price.team">团队版</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td data-i18n="cmp.locations">可用线路</td><td class="tx">1</td><td class="tx">80+</td><td class="tx">80+</td></tr>
|
||||
<tr><td data-i18n="cmp.data">流量</td><td class="tx" data-i18n="cmp.daily">不限</td><td class="tx" data-i18n="cmp.unlimited">无限</td><td class="tx" data-i18n="cmp.unlimited">无限</td></tr>
|
||||
<tr><td data-i18n="cmp.time">每日时长</td><td class="tx" data-i18n="cmp.time_free">10 分钟/天(试用期不限)</td><td class="tx" data-i18n="cmp.unlimited">无限</td><td class="tx" data-i18n="cmp.unlimited">无限</td></tr>
|
||||
<tr><td data-i18n="cmp.devices">设备数</td><td class="tx">1</td><td class="tx">5</td><td class="tx">10</td></tr>
|
||||
<tr><td data-i18n="cmp.speed">极速线路</td><td class="no">—</td><td class="yes"><i data-lucide="check"></i></td><td class="yes"><i data-lucide="check"></i></td></tr>
|
||||
<tr><td data-i18n="cmp.stream">流媒体优化</td><td class="no">—</td><td class="yes"><i data-lucide="check"></i></td><td class="yes"><i data-lucide="check"></i></td></tr>
|
||||
<tr><td data-i18n="cmp.kill">Kill Switch</td><td class="no">—</td><td class="yes"><i data-lucide="check"></i></td><td class="yes"><i data-lucide="check"></i></td></tr>
|
||||
<tr><td data-i18n="cmp.support">客服</td><td class="tx" data-i18n="cmp.basic">标准</td><td class="tx" data-i18n="cmp.basic">标准</td><td class="tx" data-i18n="cmp.priority">优先</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== Download ===== -->
|
||||
<section id="download" class="sec-tan">
|
||||
<div class="wrap center">
|
||||
<div class="eyebrow" data-i18n="dl.eyebrow">下载</div>
|
||||
<h2 class="h-sec" data-i18n="dl.h">全平台,随处可用</h2>
|
||||
<p class="sub-sec" data-i18n="dl.sub">一个账户,所有设备同步。下载即用,无需配置。</p>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<div class="dl-grid">
|
||||
<div class="dl"><div class="ico"><i data-lucide="smartphone"></i></div><div class="pn">iOS</div><div class="pv">iOS 16+</div><a class="gb"><i data-lucide="download"></i><span data-i18n="dl.get">下载</span></a></div>
|
||||
<div class="dl"><div class="ico"><i data-lucide="smartphone"></i></div><div class="pn">Android</div><div class="pv">Android 9+</div><a class="gb"><i data-lucide="download"></i><span data-i18n="dl.get">下载</span></a></div>
|
||||
<div class="dl"><div class="ico"><i data-lucide="laptop"></i></div><div class="pn">macOS</div><div class="pv">macOS 12+</div><a class="gb"><i data-lucide="download"></i><span data-i18n="dl.get">下载</span></a></div>
|
||||
<div class="dl"><div class="ico"><i data-lucide="monitor"></i></div><div class="pn">Windows</div><div class="pv">Win 10/11</div><a class="gb"><i data-lucide="download"></i><span data-i18n="dl.get">下载</span></a></div>
|
||||
<div class="dl"><div class="ico"><i data-lucide="terminal"></i></div><div class="pn">Linux</div><div class="pv">deb / rpm</div><a class="gb"><i data-lucide="download"></i><span data-i18n="dl.get">下载</span></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== Docs ===== -->
|
||||
<section id="docs">
|
||||
<div class="wrap center">
|
||||
<div class="eyebrow" data-i18n="docs.eyebrow">文档</div>
|
||||
<h2 class="h-sec" data-i18n="docs.h">需要帮助?都在这里</h2>
|
||||
<p class="sub-sec" data-i18n="docs.sub">从快速上手到协议细节,清晰直接。</p>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<div class="docs-grid">
|
||||
<a class="doc"><div class="ico"><i data-lucide="rocket"></i></div><h3 data-i18n="docs.1t">快速开始</h3><p data-i18n="docs.1d"></p><span class="ln" data-i18n="docs.read">阅读</span></a>
|
||||
<a class="doc"><div class="ico"><i data-lucide="circle-help"></i></div><h3 data-i18n="docs.2t">常见问题</h3><p data-i18n="docs.2d"></p><span class="ln" data-i18n="docs.read">阅读</span></a>
|
||||
<a class="doc"><div class="ico"><i data-lucide="shield-check"></i></div><h3 data-i18n="docs.3t">协议与安全</h3><p data-i18n="docs.3d"></p><span class="ln" data-i18n="docs.read">阅读</span></a>
|
||||
<a class="doc"><div class="ico"><i data-lucide="lock"></i></div><h3 data-i18n="docs.4t">隐私政策</h3><p data-i18n="docs.4d"></p><span class="ln" data-i18n="docs.read">阅读</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== Blog ===== -->
|
||||
<section id="blog" class="sec-tan">
|
||||
<div class="wrap center">
|
||||
<div class="eyebrow" data-i18n="blog.eyebrow">Blog</div>
|
||||
<h2 class="h-sec" data-i18n="blog.h">来自团队的最新动态</h2>
|
||||
<p class="sub-sec" data-i18n="blog.sub">产品更新、安全科普与节点公告。</p>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<div class="blog-grid">
|
||||
<a class="post"><div class="cover"><span class="tag" data-i18n="blog.1tag">产品更新</span></div><div class="body"><div class="date">2026-05-28</div><h3 data-i18n="blog.1t"></h3><p data-i18n="blog.1d"></p></div></a>
|
||||
<a class="post"><div class="cover c2"><span class="tag" data-i18n="blog.2tag">安全</span></div><div class="body"><div class="date">2026-05-12</div><h3 data-i18n="blog.2t"></h3><p data-i18n="blog.2d"></p></div></a>
|
||||
<a class="post"><div class="cover c3"><span class="tag" data-i18n="blog.3tag">公告</span></div><div class="body"><div class="date">2026-04-30</div><h3 data-i18n="blog.3t"></h3><p data-i18n="blog.3d"></p></div></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== CTA band ===== -->
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<div class="cta-band">
|
||||
<h2 data-i18n="cta.h">准备好体验极速畅连了吗?</h2>
|
||||
<p data-i18n="cta.p">免费下载,数分钟内开始你的第一次极速连接。</p>
|
||||
<div class="cta-actions">
|
||||
<a class="btn btn-white btn-lg" href="#signup"><span data-i18n="cta.btn2">免费注册</span></a>
|
||||
<a class="btn btn-lg cta-ghost" href="#download"><i data-lucide="download"></i><span data-i18n="cta.btn">免费下载</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== Footer ===== -->
|
||||
<footer class="ftr">
|
||||
<div class="wrap">
|
||||
<div class="top">
|
||||
<div>
|
||||
<div class="nm">
|
||||
<svg width="28" height="28" viewBox="0 0 96 96" fill="none"><g transform="translate(96,0) scale(-1,1)"><path d="M16 59 Q17 51 26 50 Q34 31 45 30 Q55 30 62 37 Q69 41 75 45 Q85 49 89 44 Q92 50 84 52 Q75 53 67 53 Q66 62 60 62 L56 62 Q54 55 49 55 Q47 62 37 62 L33 62 Q31 56 26 56 Q20 59 16 59 Z" fill="#F4EFE8"/><circle cx="23" cy="55" r="2.2" fill="#9E5630"/></g></svg>
|
||||
穿山甲
|
||||
</div>
|
||||
<p class="tag" data-i18n="ft.tag">极简、轻量、亲和的跨平台网络加速应用。守护你的每一次连接。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 data-i18n="ft.product">产品</h4>
|
||||
<ul>
|
||||
<li><a href="#product" data-i18n="ft.features">功能</a></li>
|
||||
<li><a href="#pricing" data-i18n="ft.pricing">定价</a></li>
|
||||
<li><a href="#download" data-i18n="ft.download">下载</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 data-i18n="ft.resources">资源</h4>
|
||||
<ul>
|
||||
<li><a href="#docs" data-i18n="ft.docs">文档</a></li>
|
||||
<li><a href="#blog" data-i18n="ft.blog">Blog</a></li>
|
||||
<li><a href="#docs" data-i18n="ft.faq">常见问题</a></li>
|
||||
<li><a href="#docs" data-i18n="ft.privacy">隐私政策</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 data-i18n="ft.contact">联系与渠道</h4>
|
||||
<ul>
|
||||
<li><a class="mono">shop.pangolin.vpn</a></li>
|
||||
<li><a class="mono">Telegram @PangolinVPN_bot</a></li>
|
||||
<li><a class="mono">LINE @pangolinvpn</a></li>
|
||||
<li><a class="mono">support@pangolin.vpn</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bot">
|
||||
<span data-i18n="ft.copy">© 2026 穿山甲 · Pangolin</span>
|
||||
<span data-i18n="ft.madenote">App 内不支持直接支付 · 资金流全走外部渠道</span>
|
||||
<span data-i18n="ft.hours">服务时间 每日 9:00–24:00 (GMT+8)</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="site.js?v=plan7"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!-- @dsCard group="UI Kit — Website" name="UI Kit · 官网 · 移动端" subtitle="390px 手机布局 · 汉堡菜单 · 注册引导" viewport="390x800" -->
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>穿山甲 · 官网移动端预览</title>
|
||||
<style>html,body{margin:0;padding:0;height:100%;background:#FAF8F4}iframe{border:0;width:390px;height:100vh;display:block;margin:0 auto}</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe src="index.html?v=plan7" title="穿山甲官网 · 移动端"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,240 @@
|
||||
/* site.js — 穿山甲 VPN 官网 · i18n + 交互 */
|
||||
(function () {
|
||||
// ---------- i18n ----------
|
||||
const I18N = {
|
||||
'ann.txt': ['新用户注册即享 7 天免费试用', 'New users get a 7-day free trial'],
|
||||
'ann.cta': ['立即注册 →', 'Sign up →'],
|
||||
|
||||
'su.ph': ['输入邮箱,免费注册', 'Enter email to sign up free'],
|
||||
'su.btn': ['免费注册', 'Sign up free'],
|
||||
'su.ok': ['验证码已发送!下载 App 并用同一邮箱继续完成注册。', 'Code sent! Download the app and continue with the same email.'],
|
||||
'su.hint': ['免费注册 · 无需付款 · 7 天免费试用', 'Free to join · no payment · 7-day free trial'],
|
||||
'su.dl': ['或直接下载 App', 'or just download the app'],
|
||||
|
||||
'why.eyebrow': ['免费注册', 'Sign up'],
|
||||
'why.h': ['注册一次,处处可用', 'One account, everywhere'],
|
||||
'why.sub': ['一个邮箱就能开始。注册免费,不需要任何付款信息。', 'All you need is an email. Free to join — no payment details, ever.'],
|
||||
'why.1t': ['7 天免费试用', '7-day free trial'],
|
||||
'why.1d': ['新用户注册即享 7 天免费使用,无需任何付款信息。', 'New accounts get 7 days of free, unrestricted use — no payment details.'],
|
||||
'why.2t': ['多端同步', 'Multi-device sync'],
|
||||
'why.2d': ['手机、平板、电脑共用一个账户,套餐与设置随身走。', 'Phone, tablet and desktop share one account — your plan follows you.'],
|
||||
'why.3t': ['无需付款信息', 'No payment details'],
|
||||
'why.3d': ['注册只要邮箱。想升级时,再通过外部渠道兑换激活码。', 'Just an email to join. Upgrade later with an activation code.'],
|
||||
'why.s1': ['填写邮箱', 'Enter email'],
|
||||
'why.s2': ['输入验证码', 'Verify code'],
|
||||
'why.s3': ['开始畅连', 'Start connecting'],
|
||||
'why.cta': ['立即免费注册', 'Sign up free'],
|
||||
|
||||
'cta.btn2': ['免费注册', 'Sign up free'],
|
||||
|
||||
'nav.product': ['产品', 'Product'],
|
||||
'nav.pricing': ['定价', 'Pricing'],
|
||||
'nav.download': ['下载', 'Download'],
|
||||
'nav.docs': ['文档', 'Docs'],
|
||||
'nav.blog': ['Blog', 'Blog'],
|
||||
'nav.login': ['登录', 'Log in'],
|
||||
'nav.get': ['立即下载', 'Get the app'],
|
||||
|
||||
'hero.eyebrow': ['极速 · 稳定 · 省心', 'Fast · Stable · Effortless'],
|
||||
'hero.h1': ['极速畅连,\n网络如丝顺滑', 'Faster, smoother,\neverywhere'],
|
||||
'hero.lede': ['轻盈、亲和、即开即用的跨平台网络加速应用。一键连接,智能选线,稳定不掉线。', 'A lightweight, friendly cross-platform network accelerator. One tap, smart routing, rock-solid.'],
|
||||
'hero.cta1': ['免费下载', 'Download free'],
|
||||
'hero.cta2': ['查看定价', 'See pricing'],
|
||||
'hero.t1': ['80+ 全球加速线路', '80+ global routes'],
|
||||
'hero.t2': ['严格无日志', 'Strict no-logs'],
|
||||
'hero.t3': ['端到端加密', 'End-to-end encrypted'],
|
||||
'orb.cap': ['已连接', 'CONNECTED'],
|
||||
'orb.down': ['下载', 'Down'],
|
||||
'orb.up': ['上传', 'Up'],
|
||||
'orb.node': ['香港 · 流媒体', 'Hong Kong'],
|
||||
'orb.nodesub': ['延迟 18ms · 已连接', '18ms · Connected'],
|
||||
|
||||
'strip.txt': ['已支持', 'Available on'],
|
||||
|
||||
'feat.eyebrow': ['产品', 'Product'],
|
||||
'feat.h': ['为日常而生的连接体验', 'Built for everyday connection'],
|
||||
'feat.sub': ['没有复杂配置,没有技术门槛。打开就用,把稳定与隐私留给我们。', 'No complex setup, no jargon. Just open and go — we handle speed and privacy.'],
|
||||
'feat.1t': ['一键连接', 'One-tap connect'],
|
||||
'feat.1d': ['一颗按钮,智能挑选最快线路。无需手动配置,也能秒连。', 'One button picks the fastest route. No manual setup, instant connect.'],
|
||||
'feat.2t': ['智能分流', 'Smart routing'],
|
||||
'feat.2d': ['按规则智能分流,该加速的加速,本地服务直连,互不打扰。', 'Smart rule-based routing — accelerate what needs it, keep local traffic direct.'],
|
||||
'feat.3t': ['80+ 全球加速线路', '80+ global routes'],
|
||||
'feat.3d': ['覆盖港日新美欧韩等地,视频与游戏优化线路随心选。', 'Routes across HK / JP / SG / US / EU and more, tuned for video & gaming.'],
|
||||
'feat.4t': ['严格无日志', 'Strict no-logs'],
|
||||
'feat.4d': ['我们不记录你的浏览数据。隐私是底线,不是卖点。', 'We never log your browsing. Privacy is the baseline, not a feature.'],
|
||||
'feat.5t': ['Kill Switch', 'Kill Switch'],
|
||||
'feat.5d': ['一旦连接中断,立即阻断网络,杜绝真实 IP 泄露。', 'If the tunnel drops, traffic is blocked instantly — no IP leaks.'],
|
||||
'feat.6t': ['多端同步', 'Multi-device'],
|
||||
'feat.6d': ['一个账户,手机、平板、电脑同时在线,最多 5 台设备。', 'One account across phone, tablet and desktop — up to 5 devices.'],
|
||||
|
||||
'price.eyebrow': ['定价', 'Pricing'],
|
||||
'price.h': ['简单透明的价格', 'Simple, honest pricing'],
|
||||
'price.sub': ['随时升级或取消。所有套餐均含核心加密与无日志承诺。', 'Upgrade or cancel anytime. Every plan includes core encryption and our no-logs promise.'],
|
||||
'price.monthly': ['按月', 'Monthly'],
|
||||
'price.yearly': ['按年', 'Yearly'],
|
||||
'price.save': ['省 20%', 'Save 20%'],
|
||||
'price.permo': ['/月', '/mo'],
|
||||
'price.free': ['免费版', 'Free'],
|
||||
'price.freedesc': ['适合轻度使用与尝鲜', 'For light, casual use'],
|
||||
'price.pro': ['专业版', 'Pro'],
|
||||
'price.prodesc': ['个人用户的最佳选择', 'Best for individuals'],
|
||||
'price.team': ['团队版', 'Team'],
|
||||
'price.teamdesc': ['小团队集中管理', 'For small teams'],
|
||||
'price.popular': ['最受欢迎', 'Most popular'],
|
||||
'price.cta_free': ['免费下载', 'Download free'],
|
||||
'price.cta_pro': ['获取激活码', 'Get a code'],
|
||||
'price.cta_team': ['获取激活码', 'Get a code'],
|
||||
'pf.free1': ['每日 10 分钟时长', '10 min per day'],
|
||||
'pf.free2': ['仅 1 个基础节点', '1 basic node only'],
|
||||
'pf.free3': ['使用前观看广告', 'Watch an ad to start'],
|
||||
'pf.free4': ['核心加密 · 无日志', 'Core encryption · no-logs'],
|
||||
'pf.pro1': ['80+ 全球加速线路', '80+ global routes'],
|
||||
'pf.pro2': ['无限流量 · 极速', 'Unlimited · top speed'],
|
||||
'pf.pro3': ['5 台设备同时在线', '5 devices at once'],
|
||||
'pf.pro4': ['流媒体 & P2P 优化', 'Streaming & P2P routes'],
|
||||
'pf.pro5': ['Kill Switch · 智能分流', 'Kill Switch · smart routing'],
|
||||
'pf.team1': ['专业版全部功能', 'Everything in Pro'],
|
||||
'pf.team2': ['10 个成员席位', '10 seats'],
|
||||
'pf.team3': ['集中计费与管理', 'Central billing & admin'],
|
||||
'pf.team4': ['优先客服', 'Priority support'],
|
||||
|
||||
'pay.title': ['为什么网页上没有支付按钮?', 'Why no checkout on this page?'],
|
||||
'pay.body': ['出于风控与隐私考虑,穿山甲不在网页或 App 内直接收款。你可以通过以下任一渠道获取激活码,在客户端内兑换即可开通。', 'For risk and privacy reasons, Pangolin never takes payment in the web or app. Get an activation code through any channel below, then redeem it in the client.'],
|
||||
'pay.store': ['自助发卡商店', 'Self-serve store'],
|
||||
|
||||
'pay.usdt': ['USDT (TRC20) · 最隐私', 'USDT (TRC20) · most private'],
|
||||
'cmp.h': ['功能对比', 'Compare plans'],
|
||||
'cmp.feature': ['功能', 'Feature'],
|
||||
'cmp.locations': ['可用线路', 'Routes'],
|
||||
'cmp.data': ['流量', 'Data'],
|
||||
'cmp.time': ['每日时长', 'Daily time'],
|
||||
'cmp.time_free': ['10 分钟/天(试用期不限)', '10 min/day (trial: unlimited)'],
|
||||
'cmp.devices': ['设备数', 'Devices'],
|
||||
'cmp.speed': ['极速线路', 'Top-speed routes'],
|
||||
'cmp.stream': ['视频优化', 'Video routes'],
|
||||
'cmp.kill': ['Kill Switch', 'Kill Switch'],
|
||||
'cmp.support': ['客服', 'Support'],
|
||||
'cmp.unlimited': ['无限', 'Unlimited'],
|
||||
'cmp.daily': ['不限', 'Unlimited'],
|
||||
'cmp.basic': ['标准', 'Standard'],
|
||||
'cmp.priority': ['优先', 'Priority'],
|
||||
|
||||
'dl.eyebrow': ['下载', 'Download'],
|
||||
'dl.h': ['全平台,随处可用', 'Every platform, everywhere'],
|
||||
'dl.sub': ['一个账户,所有设备同步。下载即用,无需配置。', 'One account syncs every device. Download and go.'],
|
||||
'dl.get': ['下载', 'Download'],
|
||||
|
||||
'docs.eyebrow': ['文档', 'Docs'],
|
||||
'docs.h': ['需要帮助?都在这里', 'Need help? It’s all here'],
|
||||
'docs.sub': ['从快速上手到协议细节,清晰直接。', 'From quickstart to protocol details — clear and direct.'],
|
||||
'docs.1t': ['快速开始', 'Quickstart'],
|
||||
'docs.1d': ['三分钟完成注册、下载与首次连接。', 'Sign up, download and connect in three minutes.'],
|
||||
'docs.2t': ['常见问题', 'FAQ'],
|
||||
'docs.2d': ['连接、计费、设备与兑换码的常见疑问。', 'Connection, billing, devices and redeem codes.'],
|
||||
'docs.3t': ['协议与安全', 'Protocol & security'],
|
||||
'docs.3d': ['WireGuard、加密方式与无日志架构说明。', 'WireGuard, encryption and our no-logs architecture.'],
|
||||
'docs.4t': ['隐私政策', 'Privacy policy'],
|
||||
'docs.4d': ['我们收集什么、不收集什么,一目了然。', 'Exactly what we collect — and what we never do.'],
|
||||
'docs.read': ['阅读', 'Read'],
|
||||
|
||||
'blog.eyebrow': ['Blog', 'Blog'],
|
||||
'blog.h': ['来自团队的最新动态', 'Latest from the team'],
|
||||
'blog.sub': ['产品更新、安全科普与节点公告。', 'Product updates, security explainers and node news.'],
|
||||
'blog.1tag': ['产品更新', 'Product'],
|
||||
'blog.1t': ['v2.4:更快的智能分流与全新统计页', 'v2.4: faster smart routing & a new stats tab'],
|
||||
'blog.1d': ['本次更新重写了分流引擎,连接建立速度提升约 40%。', 'We rewrote the routing engine — connections are ~40% faster.'],
|
||||
'blog.2tag': ['安全', 'Security'],
|
||||
'blog.2t': ['无日志到底意味着什么?', 'What “no-logs” really means'],
|
||||
'blog.2d': ['我们逐条拆解收集与不收集的数据,以及背后的架构。', 'A line-by-line look at what we keep — and what we never touch.'],
|
||||
'blog.3tag': ['公告', 'News'],
|
||||
'blog.3t': ['新增首尔与法兰克福高速节点', 'New high-speed nodes: Seoul & Frankfurt'],
|
||||
'blog.3d': ['两条新线路已上线,为东北亚与欧洲用户带来更低延迟。', 'Two new routes are live, cutting latency for NE Asia and Europe.'],
|
||||
'blog.readmore': ['阅读全文', 'Read more'],
|
||||
|
||||
'cta.h': ['准备好体验极速畅连了吗?', 'Ready for a faster connection?'],
|
||||
'cta.p': ['免费下载,数分钟内开始你的第一次极速连接。', 'Download free and get connected in minutes.'],
|
||||
'cta.btn': ['免费下载', 'Download free'],
|
||||
|
||||
'ft.tag': ['极简、轻量、亲和的跨平台网络加速应用。守护你的每一次连接。', 'A minimal, friendly cross-platform network accelerator. Protecting every connection.'],
|
||||
'ft.product': ['产品', 'Product'],
|
||||
'ft.resources': ['资源', 'Resources'],
|
||||
'ft.contact': ['联系与渠道', 'Contact'],
|
||||
'ft.features': ['功能', 'Features'],
|
||||
'ft.pricing': ['定价', 'Pricing'],
|
||||
'ft.download': ['下载', 'Download'],
|
||||
'ft.docs': ['文档', 'Docs'],
|
||||
'ft.blog': ['Blog', 'Blog'],
|
||||
'ft.faq': ['常见问题', 'FAQ'],
|
||||
'ft.privacy': ['隐私政策', 'Privacy'],
|
||||
'ft.status': ['服务状态', 'Status'],
|
||||
'ft.hours': ['服务时间 每日 9:00–24:00 (GMT+8)', 'Hours: Daily 9:00–24:00 (GMT+8)'],
|
||||
'ft.copy': ['© 2026 穿山甲 · Pangolin', '© 2026 Pangolin'],
|
||||
'ft.madenote': ['App 内不支持直接支付 · 资金流全走外部渠道', 'No in-app payment · all purchases via external channels'],
|
||||
};
|
||||
|
||||
let lang = localStorage.getItem('pg_site_lang') || 'zh';
|
||||
|
||||
function applyLang() {
|
||||
const i = lang === 'zh' ? 0 : 1;
|
||||
document.documentElement.lang = lang === 'zh' ? 'zh' : 'en';
|
||||
document.querySelectorAll('[data-i18n]').forEach((el) => {
|
||||
const k = el.getAttribute('data-i18n');
|
||||
if (I18N[k]) el.textContent = I18N[k][i];
|
||||
});
|
||||
document.querySelectorAll('[data-i18n-ph]').forEach((el) => {
|
||||
const k = el.getAttribute('data-i18n-ph');
|
||||
if (I18N[k]) el.placeholder = I18N[k][i];
|
||||
});
|
||||
document.querySelectorAll('.langseg button').forEach((b) => b.classList.toggle('on', b.dataset.lang === lang));
|
||||
}
|
||||
window.__setLang = function (l) { lang = l; localStorage.setItem('pg_site_lang', l); applyLang(); };
|
||||
|
||||
// ---------- pricing monthly/yearly ----------
|
||||
const PRICES = { free: ['¥0', '¥0'], pro: ['¥25', '¥20'], team: ['¥99', '¥79'] };
|
||||
let cycle = 'monthly';
|
||||
window.__setCycle = function (c) {
|
||||
cycle = c;
|
||||
const i = c === 'monthly' ? 0 : 1;
|
||||
document.querySelectorAll('[data-price]').forEach((el) => {
|
||||
const p = el.getAttribute('data-price');
|
||||
el.firstChild.textContent = PRICES[p][i];
|
||||
});
|
||||
document.querySelectorAll('.price-toggle button').forEach((b) => b.classList.toggle('on', b.dataset.cycle === c));
|
||||
};
|
||||
|
||||
// ---------- signup (demo: real impl sends a verification code) ----------
|
||||
window.__signup = function (e) {
|
||||
e.preventDefault();
|
||||
const em = document.getElementById('su-email');
|
||||
if (!/\S+@\S+\.\S+/.test(em.value)) { em.focus(); return false; }
|
||||
document.getElementById('su-ok').hidden = false;
|
||||
return false;
|
||||
};
|
||||
|
||||
// ---------- announcement bar ----------
|
||||
window.__closeAnn = function () {
|
||||
const a = document.getElementById('ann');
|
||||
if (a) a.remove();
|
||||
};
|
||||
|
||||
// ---------- mobile menu ----------
|
||||
window.__toggleMenu = function () {
|
||||
document.getElementById('mnav').classList.toggle('open');
|
||||
};
|
||||
|
||||
// ---------- scroll glass header ----------
|
||||
function onScroll() {
|
||||
document.querySelector('.hdr').classList.toggle('scrolled', window.scrollY > 8);
|
||||
}
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// ---------- init ----------
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
applyLang();
|
||||
onScroll();
|
||||
// close mobile menu when a link is tapped
|
||||
document.querySelectorAll('#mnav a').forEach((a) =>
|
||||
a.addEventListener('click', () => document.getElementById('mnav').classList.remove('open')));
|
||||
if (window.lucide) lucide.createIcons();
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,292 @@
|
||||
/* website.css — 穿山甲 VPN 官网宣传页 · 暖大地色系统 */
|
||||
*{box-sizing:border-box}
|
||||
html{scroll-behavior:smooth}
|
||||
body{margin:0;background:var(--bg);color:var(--fg1);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
|
||||
a{color:inherit;text-decoration:none}
|
||||
img,svg{display:block}
|
||||
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
|
||||
.sr{font-family:var(--font-sans)}
|
||||
|
||||
/* ---------- announcement bar (A) ---------- */
|
||||
.ann{background:linear-gradient(90deg,var(--clay-600),var(--clay-700));color:#fff}
|
||||
.ann-in{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 48px;font-size:13.5px;font-weight:600;position:relative}
|
||||
.ann-in span{white-space:nowrap}
|
||||
.ann svg{width:15px;height:15px;flex-shrink:0}
|
||||
.ann a{text-decoration:underline;text-underline-offset:3px;font-weight:700;white-space:nowrap}
|
||||
.ann a:hover{opacity:.85}
|
||||
.ann-x{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:rgba(255,255,255,.8);cursor:pointer;display:flex;padding:4px}
|
||||
.ann-x svg{width:14px;height:14px}
|
||||
|
||||
/* ---------- header ---------- */
|
||||
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base)}
|
||||
.hdr.scrolled{border-bottom-color:var(--border)}
|
||||
.hdr .row{display:flex;align-items:center;gap:28px;height:68px}
|
||||
.brand{display:flex;align-items:center;gap:10px}
|
||||
.brand .nm{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-0.01em}
|
||||
.nav{display:flex;gap:6px;margin-left:8px}
|
||||
.nav a{padding:8px 13px;border-radius:var(--radius-md);font-size:14.5px;font-weight:500;color:var(--fg2);transition:all var(--dur-fast) var(--ease-out)}
|
||||
.nav a:hover{background:var(--accent-subtle);color:var(--accent)}
|
||||
.hdr .right{margin-left:auto;display:flex;align-items:center;gap:14px}
|
||||
.langseg{display:flex;background:var(--bg-subtle);border-radius:var(--radius-full);padding:3px;gap:2px}
|
||||
.langseg button{border:none;cursor:pointer;border-radius:var(--radius-full);padding:5px 11px;font-family:var(--font-sans);font-size:12.5px;font-weight:700;background:transparent;color:var(--fg3)}
|
||||
.langseg button.on{background:var(--accent);color:var(--fg-on-accent)}
|
||||
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:600;font-size:14.5px;border:none;border-radius:var(--radius-full);padding:11px 20px;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);white-space:nowrap}
|
||||
.btn svg{width:16px;height:16px}
|
||||
.btn-primary{background:var(--accent);color:var(--fg-on-accent)}
|
||||
.btn-primary:hover{background:var(--accent-hover)}
|
||||
.btn-ghost{background:transparent;color:var(--fg1)}
|
||||
.btn-ghost:hover{color:var(--accent)}
|
||||
.btn-secondary{background:var(--surface);color:var(--fg1);border:1.5px solid var(--border-strong)}
|
||||
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
|
||||
.btn-lg{padding:14px 26px;font-size:16px}
|
||||
.linklogin{font-size:14.5px;font-weight:600;color:var(--fg1);cursor:pointer}
|
||||
.linklogin:hover{color:var(--accent)}
|
||||
|
||||
/* mobile nav */
|
||||
.menu-btn{display:none;border:none;background:transparent;cursor:pointer;padding:7px;border-radius:var(--radius-sm);color:var(--fg1)}
|
||||
.menu-btn svg{width:22px;height:22px}
|
||||
.mnav{display:none;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-md)}
|
||||
.mnav.open{display:flex;flex-direction:column;padding:8px 28px 18px}
|
||||
.mnav a{padding:13px 4px;font-size:15.5px;font-weight:600;color:var(--fg1);border-bottom:1px solid var(--border)}
|
||||
.mnav a:active{color:var(--accent)}
|
||||
.mnav .btn{margin-top:14px;justify-content:center;border-bottom:none}
|
||||
|
||||
/* ---------- generic section ---------- */
|
||||
section{padding:88px 0}
|
||||
.sec-tan{background:var(--bg-subtle)}
|
||||
.eyebrow{font-family:var(--font-sans);font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent)}
|
||||
.h-sec{font-family:var(--font-display);font-weight:700;font-size:38px;letter-spacing:-0.02em;line-height:1.15;margin:12px 0 0}
|
||||
.sub-sec{font-size:17px;color:var(--fg2);line-height:1.6;margin:14px 0 0;max-width:560px}
|
||||
.center{text-align:center}
|
||||
.center .sub-sec{margin-left:auto;margin-right:auto}
|
||||
|
||||
/* ---------- hero ---------- */
|
||||
.hero{padding:64px 0 84px;position:relative;overflow:hidden}
|
||||
.hero .grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center}
|
||||
.hero h1{font-family:var(--font-display);font-weight:700;font-size:54px;line-height:1.08;letter-spacing:-0.03em;margin:16px 0 0}
|
||||
.hero .lede{font-size:19px;color:var(--fg2);line-height:1.6;margin:20px 0 0;max-width:480px}
|
||||
.hero .cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
|
||||
.trust{display:flex;gap:20px;margin-top:28px;flex-wrap:wrap;color:var(--fg3);font-size:13.5px}
|
||||
.trust span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
|
||||
.trust svg{width:15px;height:15px;color:var(--success)}
|
||||
|
||||
/* hero inline signup (B) */
|
||||
.signup{margin-top:28px;max-width:480px}
|
||||
.su-row{display:flex;gap:10px}
|
||||
.su-field{flex:1;display:flex;align-items:center;gap:9px;background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius-full);padding:0 18px;transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast)}
|
||||
.su-field:focus-within{border-color:var(--accent);box-shadow:var(--shadow-focus)}
|
||||
.su-field svg{width:17px;height:17px;color:var(--fg3);flex-shrink:0}
|
||||
.su-field input{border:none;background:transparent;outline:none;flex:1;font-family:var(--font-sans);font-size:15px;color:var(--fg1);padding:14px 0;min-width:0}
|
||||
.su-btn{flex-shrink:0}
|
||||
.su-ok{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--success);font-size:13.5px;font-weight:600}
|
||||
.su-ok[hidden]{display:none}
|
||||
.su-ok svg{width:16px;height:16px;flex-shrink:0}
|
||||
.su-hint{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--fg3)}
|
||||
.su-hint span{white-space:nowrap}
|
||||
.su-dl{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent);white-space:nowrap}
|
||||
.su-dl svg{width:14px;height:14px}
|
||||
|
||||
/* hero visual: connect orb */
|
||||
.orb-wrap{display:flex;align-items:center;justify-content:center;position:relative}
|
||||
.orb-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);padding:34px 30px;display:flex;flex-direction:column;align-items:center;gap:22px}
|
||||
.orb{position:relative;width:184px;height:184px;border-radius:50%;background:var(--success);color:#fff;box-shadow:0 0 0 9px var(--success-subtle), var(--shadow-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
|
||||
.orb svg.ic{width:46px;height:46px}
|
||||
.orb .tm{font-family:var(--font-mono);font-weight:600;font-size:17px}
|
||||
.orb .sf{font-size:10px;font-weight:700;letter-spacing:0.1em;opacity:.9}
|
||||
.orb .ring{position:absolute;inset:0}
|
||||
.orb-meta{width:100%;display:flex;gap:10px}
|
||||
.orb-meta .m{flex:1;background:var(--bg-subtle);border-radius:var(--radius-md);padding:10px 12px}
|
||||
.orb-meta .k{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--fg3);font-weight:600}
|
||||
.orb-meta .k svg{width:12px;height:12px;color:var(--accent)}
|
||||
.orb-meta .v{font-family:var(--font-mono);font-size:15px;margin-top:3px}
|
||||
.orb-node{width:100%;display:flex;align-items:center;gap:11px;background:var(--bg-subtle);border-radius:var(--radius-lg);padding:11px 13px}
|
||||
.cc{width:34px;height:34px;border-radius:var(--radius-md);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:600;flex-shrink:0}
|
||||
.orb-node .nn{font-size:14px;font-weight:600}
|
||||
.orb-node .ns{font-size:11px;color:var(--fg3)}
|
||||
|
||||
/* logos strip */
|
||||
.strip{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;color:var(--fg3);font-size:13px;font-weight:600;letter-spacing:0.03em;padding-top:8px}
|
||||
.strip span{display:inline-flex;align-items:center;gap:8px}
|
||||
.strip svg{width:18px;height:18px}
|
||||
|
||||
/* ---------- features ---------- */
|
||||
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
|
||||
.feat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:26px;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base)}
|
||||
.feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
|
||||
.feat .ico{width:46px;height:46px;border-radius:var(--radius-lg);background:var(--accent-subtle);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
|
||||
.feat .ico svg{width:23px;height:23px;color:var(--accent)}
|
||||
.feat h3{font-family:var(--font-display);font-weight:600;font-size:18px;margin:0 0 8px}
|
||||
.feat p{font-size:14px;color:var(--fg2);line-height:1.6;margin:0}
|
||||
|
||||
/* ---------- why sign up (C) ---------- */
|
||||
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
|
||||
.why{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:28px 26px;box-shadow:var(--shadow-sm);text-align:center}
|
||||
.why .ico{width:54px;height:54px;border-radius:50%;background:var(--accent-subtle);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
|
||||
.why .ico svg{width:26px;height:26px;color:var(--accent)}
|
||||
.why h3{font-family:var(--font-display);font-weight:600;font-size:18px;margin:0 0 8px}
|
||||
.why p{font-size:14px;color:var(--fg2);line-height:1.6;margin:0}
|
||||
.steps{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:44px;flex-wrap:wrap}
|
||||
.step{display:flex;align-items:center;gap:10px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-full);padding:10px 20px 10px 12px}
|
||||
.step .n{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
|
||||
.step svg{width:17px;height:17px;color:var(--accent)}
|
||||
.step .t{font-size:14px;font-weight:600;white-space:nowrap}
|
||||
.step-arr{display:flex}
|
||||
.step-arr svg{width:18px;height:18px;color:var(--fg3)}
|
||||
.why-cta{text-align:center;margin-top:38px}
|
||||
|
||||
/* ---------- pricing ---------- */
|
||||
.price-toggle{display:inline-flex;background:var(--bg-subtle);border-radius:var(--radius-full);padding:4px;gap:2px;margin:22px auto 0}
|
||||
.price-toggle button{border:none;cursor:pointer;border-radius:var(--radius-full);padding:8px 18px;font-family:var(--font-sans);font-size:13.5px;font-weight:600;background:transparent;color:var(--fg3)}
|
||||
.price-toggle button.on{background:var(--surface);color:var(--fg1);box-shadow:var(--shadow-sm)}
|
||||
.price-toggle .save{font-size:11px;color:var(--success);font-weight:700;margin-left:5px}
|
||||
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px;align-items:start}
|
||||
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-2xl);padding:30px 28px;box-shadow:var(--shadow-sm);position:relative}
|
||||
.plan.feat-plan{background:linear-gradient(160deg,var(--clay-600),var(--clay-800));color:#fff;border:none;box-shadow:var(--shadow-lg)}
|
||||
.plan .pop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#fff;color:var(--clay-700);font-size:11.5px;font-weight:700;padding:5px 14px;border-radius:var(--radius-full);box-shadow:var(--shadow-sm);white-space:nowrap}
|
||||
.plan .pname{font-size:15px;font-weight:600;color:var(--fg2)}
|
||||
.plan.feat-plan .pname{color:rgba(255,255,255,.85)}
|
||||
.plan .price{font-family:var(--font-display);font-weight:700;font-size:42px;letter-spacing:-0.02em;margin:10px 0 2px}
|
||||
.plan .price small{font-size:15px;font-weight:500;color:var(--fg3)}
|
||||
.plan.feat-plan .price small{color:rgba(255,255,255,.7)}
|
||||
.plan .pdesc{font-size:13.5px;color:var(--fg3);min-height:38px}
|
||||
.plan.feat-plan .pdesc{color:rgba(255,255,255,.8)}
|
||||
.plan .feats{list-style:none;padding:0;margin:20px 0 24px;display:flex;flex-direction:column;gap:11px}
|
||||
.plan .feats li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--fg2);line-height:1.45}
|
||||
.plan.feat-plan .feats li{color:rgba(255,255,255,.92)}
|
||||
.plan .feats svg{width:16px;height:16px;color:var(--success);flex-shrink:0;margin-top:1px}
|
||||
.plan.feat-plan .feats svg{color:#fff}
|
||||
.plan .pcta{width:100%;border:none;border-radius:var(--radius-full);padding:13px;font-family:var(--font-sans);font-weight:700;font-size:14.5px;cursor:pointer}
|
||||
.pcta-fill{background:var(--accent);color:#fff}
|
||||
.pcta-white{background:#fff;color:var(--clay-700)}
|
||||
.pcta-out{background:transparent;color:var(--fg2);border:1.5px solid var(--border-strong)!important}
|
||||
.pay-note{display:flex;align-items:flex-start;gap:12px;margin-top:30px;background:var(--accent-subtle);border:1px solid var(--accent-border);border-radius:var(--radius-lg);padding:16px 18px;font-size:13.5px;color:var(--fg2);line-height:1.6}
|
||||
.pay-note svg{width:18px;height:18px;color:var(--accent);flex-shrink:0;margin-top:2px}
|
||||
.pay-note b{color:var(--fg1)}
|
||||
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
|
||||
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--accent);background:var(--surface);border:1px solid var(--accent-border);border-radius:var(--radius-full);padding:6px 12px}
|
||||
.chip svg{width:13px;height:13px}
|
||||
|
||||
/* comparison table */
|
||||
.cmp{margin-top:46px;border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm)}
|
||||
.cmp table{width:100%;border-collapse:collapse}
|
||||
.cmp th,.cmp td{text-align:left;padding:14px 20px;font-size:14px;border-bottom:1px solid var(--border)}
|
||||
.cmp thead th{background:var(--bg-subtle);font-family:var(--font-display);font-weight:700;font-size:14.5px}
|
||||
.cmp thead th:not(:first-child),.cmp td:not(:first-child){text-align:center;width:130px}
|
||||
.cmp tbody tr:last-child td{border-bottom:none}
|
||||
.cmp td:first-child{color:var(--fg2)}
|
||||
.cmp .yes{color:var(--success)}
|
||||
.cmp .yes svg{width:18px;height:18px;display:inline}
|
||||
.cmp .no{color:var(--fg3)}
|
||||
.cmp .tx{font-family:var(--font-mono);font-size:13px;color:var(--fg1)}
|
||||
|
||||
/* ---------- download ---------- */
|
||||
.dl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:46px}
|
||||
.dl{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:24px 18px;text-align:center;box-shadow:var(--shadow-sm);transition:all var(--dur-base) var(--ease-out)}
|
||||
.dl:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent-border)}
|
||||
.dl .ico{width:48px;height:48px;margin:0 auto 14px;border-radius:var(--radius-lg);background:var(--bg-subtle);display:flex;align-items:center;justify-content:center}
|
||||
.dl .ico svg{width:24px;height:24px;color:var(--fg1)}
|
||||
.dl .pn{font-family:var(--font-display);font-weight:600;font-size:16px}
|
||||
.dl .pv{font-size:12px;color:var(--fg3);margin:3px 0 14px;font-family:var(--font-mono)}
|
||||
.dl .gb{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent)}
|
||||
.dl .gb svg{width:14px;height:14px}
|
||||
|
||||
/* ---------- docs ---------- */
|
||||
.docs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
|
||||
.doc{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-sm);transition:all var(--dur-base) var(--ease-out)}
|
||||
.doc:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
|
||||
.doc .ico{width:42px;height:42px;border-radius:var(--radius-lg);background:var(--accent-subtle);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
|
||||
.doc .ico svg{width:21px;height:21px;color:var(--accent)}
|
||||
.doc h3{font-family:var(--font-display);font-weight:600;font-size:16px;margin:0 0 6px}
|
||||
.doc p{font-size:13px;color:var(--fg2);line-height:1.55;margin:0 0 12px}
|
||||
.doc .ln{font-size:13px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:5px}
|
||||
.doc .ln svg{width:14px;height:14px}
|
||||
|
||||
/* ---------- blog ---------- */
|
||||
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
|
||||
.post{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--dur-base) var(--ease-out)}
|
||||
.post:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
|
||||
.post .cover{height:140px;background:linear-gradient(150deg,var(--clay-300),var(--clay-600));position:relative}
|
||||
.post .cover.c2{background:linear-gradient(150deg,var(--sand-300),var(--sand-600))}
|
||||
.post .cover.c3{background:linear-gradient(150deg,var(--green-400),var(--green-600))}
|
||||
.post .cover .tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.9);color:var(--clay-700);font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--radius-full)}
|
||||
.post .body{padding:18px 20px 22px}
|
||||
.post .date{font-size:12px;color:var(--fg3);font-family:var(--font-mono)}
|
||||
.post h3{font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.3;margin:8px 0 8px}
|
||||
.post p{font-size:13.5px;color:var(--fg2);line-height:1.55;margin:0}
|
||||
|
||||
/* ---------- CTA band ---------- */
|
||||
.cta-band{background:linear-gradient(160deg,var(--clay-500),var(--clay-800));color:#fff;border-radius:var(--radius-2xl);padding:56px;text-align:center;box-shadow:var(--shadow-lg)}
|
||||
.cta-band h2{font-family:var(--font-display);font-weight:700;font-size:36px;letter-spacing:-0.02em;margin:0}
|
||||
.cta-band p{font-size:17px;opacity:.9;margin:14px 0 28px}
|
||||
.cta-band .btn-white{background:#fff;color:var(--clay-700)}
|
||||
.cta-band .btn-white:hover{background:var(--sand-100)}
|
||||
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
|
||||
.cta-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
|
||||
.cta-ghost:hover{border-color:#fff}
|
||||
|
||||
/* ---------- footer ---------- */
|
||||
.ftr{background:var(--sand-950);color:#cfc6b8;padding:64px 0 32px}
|
||||
[data-theme="dark"] .ftr{background:#000}
|
||||
.ftr .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
|
||||
.ftr .nm{font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;display:flex;align-items:center;gap:10px}
|
||||
.ftr .tag{font-size:13.5px;line-height:1.6;margin:14px 0 0;max-width:280px;color:#a89e8e}
|
||||
.ftr h4{font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#8a8070;margin:0 0 14px}
|
||||
.ftr ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
|
||||
.ftr ul a{font-size:14px;color:#cfc6b8}
|
||||
.ftr ul a:hover{color:#fff}
|
||||
.ftr .mono{font-family:var(--font-mono);font-size:12.5px}
|
||||
.ftr .bot{display:flex;align-items:center;justify-content:space-between;margin-top:46px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#8a8070;flex-wrap:wrap;gap:12px}
|
||||
|
||||
/* ---------- responsive ---------- */
|
||||
@media (max-width:980px){
|
||||
.nav{display:none}
|
||||
.menu-btn{display:flex}
|
||||
.linklogin{display:none}
|
||||
.hero .grid{grid-template-columns:1fr;gap:36px}
|
||||
.feat-grid,.price-grid,.blog-grid,.why-grid{grid-template-columns:1fr}
|
||||
.docs-grid{grid-template-columns:1fr 1fr}
|
||||
.dl-grid{grid-template-columns:1fr 1fr}
|
||||
.ftr .top{grid-template-columns:1fr 1fr}
|
||||
.hero h1{font-size:40px}
|
||||
.h-sec{font-size:30px}
|
||||
.cmp{overflow-x:auto}
|
||||
.cmp table{min-width:560px}
|
||||
}
|
||||
@media (max-width:640px){
|
||||
.wrap{padding:0 20px}
|
||||
.ann-in span{white-space:normal}
|
||||
section{padding:56px 0}
|
||||
.hero{padding:32px 0 56px}
|
||||
.hero h1{font-size:34px}
|
||||
.hero .lede{font-size:16px}
|
||||
.h-sec{font-size:26px}
|
||||
.sub-sec{font-size:15px}
|
||||
.hdr .row{height:60px;gap:14px}
|
||||
.hdr .right{gap:10px}
|
||||
.hdr .right .btn{display:none}
|
||||
.mnav.open{padding:8px 20px 16px}
|
||||
.ann-in{font-size:12.5px;padding:8px 44px 8px 16px;justify-content:flex-start;flex-wrap:wrap}
|
||||
.su-row{flex-direction:column}
|
||||
.su-btn{justify-content:center;width:100%}
|
||||
.su-field input{padding:13px 0}
|
||||
.trust{gap:12px}
|
||||
.orb-card{max-width:330px;padding:26px 22px}
|
||||
.strip{gap:16px;font-size:12px}
|
||||
.price-toggle{margin-top:18px}
|
||||
.steps{gap:10px}
|
||||
.step{padding:8px 14px 8px 10px}
|
||||
.step .t{font-size:13px}
|
||||
.step-arr{display:none}
|
||||
.docs-grid{grid-template-columns:1fr}
|
||||
.cta-band{padding:42px 24px}
|
||||
.cta-band h2{font-size:27px}
|
||||
.cta-band p{font-size:15px}
|
||||
.ftr{padding:48px 0 28px}
|
||||
.ftr .top{grid-template-columns:1fr 1fr;gap:30px 20px}
|
||||
.ftr .bot{flex-direction:column;align-items:flex-start;gap:8px}
|
||||
}
|
||||
@media (max-width:420px){
|
||||
.dl-grid{grid-template-columns:1fr}
|
||||
.hero h1{font-size:30px}
|
||||
.langseg button{padding:4px 9px}
|
||||
}
|
||||
Reference in New Issue
Block a user