:root { --brand: #0a6cff; --brand-press: #075ad6; --bg: #000000; /* 一级背景 */ --card: #151515; /* 二级背景 */ --bg-3: #222222; /* 三级背景 */ --text: #f5f6f8; --text-dim: #9aa0a8; --border: #2a2a2a; --shadow: none; --radius: 28px; /* 统一大圆角 */ } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* 产品 Logo：固定于页面顶部（body 顶部 padding 已含安全距离） */ .page-logo { display: block; height: 72px; width: auto; max-width: 60vw; margin-bottom: 24px; } /* 卡片 + App 按钮：借助 flex 主轴 auto-margin，在 logo（若有）与版权之间的剩余空间垂直居中 */ .page-center { width: 100%; display: flex; flex-direction: column; align-items: center; margin: auto 0; } /* 语言切换：默认隐藏 [lang="en"]，由 JS 按检测结果切换 */ html[lang="zh"] [lang="en"] { display: none; } html[lang="en"] [lang="zh"] { display: none; } .card { width: 100%; max-width: 440px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 24px 24px; } .card__head { text-align: center; margin-bottom: 24px; } .brand { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--brand); margin-bottom: 14px; } .product-name { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.3; } .product-name-en { margin: 4px 0 0; font-size: 14px; color: var(--text-dim); } .hint { text-align: center; font-size: 14px; color: var(--text-dim); margin: 0 0 18px; } /* ---------- 下载按钮 ---------- */ .downloads { display: flex; flex-direction: column; gap: 12px; } /* 下载 App 按钮：卡片外、与卡片平级，同宽、56 高、单独一行 */ .btn.app-btn { width: 100%; max-width: 440px; height: 56px; margin-top: 16px; } .btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 72px; padding: 0 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.05s, background 0.15s; } .btn:hover { border-color: #2ABB39; } .btn:active { transform: scale(0.99); } .btn__text { flex: 0 1 auto; min-width: 0; } .btn__label { display: block; font-size: 16px; font-weight: 600; } .btn__sub { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; } .btn__chev { color: var(--text-dim); font-size: 18px; flex-shrink: 0; } /* 说明书下载按钮：保持原有文字左、icon 右的左右排布（不采用居中样式） */ .downloads .btn { justify-content: flex-start; gap: 12px; } .downloads .btn__text { flex: 1; min-width: 0; } /* 只显示浏览器语言对应的 [data-lang] 元素（说明书下载按钮、App 按钮均适用；无 JS 时回退默认 zh） */ html[lang="zh"] [data-lang="en"], html[lang="en"] [data-lang="zh"] { display: none; } .card__foot { margin-top: 22px; text-align: center; } .updated { font-size: 12px; color: var(--text-dim); } /* 版权信息：页面内容最下方 */ .copyright { margin: 24px 0 0; text-align: center; font-size: 12px; color: var(--text-dim); } /* ---------- 首页产品列表 ---------- */ .product-list { display: flex; flex-direction: column; gap: 12px; } .product-list .btn__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 首页产品按钮：与说明书下载按钮一致，保持文字左、icon 右的左右排布 */ .product-list .btn { justify-content: flex-start; gap: 12px; } .product-list .btn__text { flex: 1; min-width: 0; } /* ---------- 微信引导浮层 ---------- */ .wx-guide { position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, 0.82); display: flex; flex-direction: column; align-items: flex-end; padding: 16px; color: #fff; } .wx-guide[hidden] { display: none; } .wx-guide__arrow { margin: 4px 14px 0 0; animation: wx-bounce 1.2s ease-in-out infinite; } @keyframes wx-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .wx-guide__arrow { animation: none; } } .wx-guide__body { margin: auto auto; max-width: 320px; text-align: center; } .wx-guide__title { font-size: 19px; font-weight: 700; margin: 0 0 10px; } .wx-guide__desc { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin: 0 0 22px; } .wx-guide__actions { display: flex; flex-direction: column; gap: 10px; } .btn-ghost { font: inherit; padding: 12px 18px; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; color: #fff; cursor: pointer; } .btn-ghost:active { background: rgba(255, 255, 255, 0.12); }