/* ========================================================================== VPNDT · base.css 设计令牌 / reset / 排版 / 按钮 / 头部 / 页脚 / 通用纸卡 / reveal 过渡 「直通隧道」主题 · warm-paper 浅色策略 ========================================================================== */ :root{ /* ---- 基底三级：基底 → 氛围 → 面板 ---- */ --bg:#F7EFE1; --bg-panel:#FDF9F0; --bg-panel2:#EEE3CF; --border:#E1D4BB; /* ---- 强调（全站强调色不超过四个） ---- */ --accent:#1A5CB0; --accent-dark:#123F7C; --apricot:#F3B53F; --coral:#EF8F93; --mist:#A9C4EA; --white:#FFFFFF; /* ---- 文字 ---- */ --text:#2A2118; --muted:#6B5E4E; /* ---- 语义 ---- */ --success:#2E7D4F; --warn:#C4860F; --error:#B23A2E; /* ---- 透明度阶梯（带色柔影与高光边的原料） ---- */ --accent-05:rgba(26,92,176,.05); --accent-08:rgba(26,92,176,.08); --accent-10:rgba(26,92,176,.10); --accent-12:rgba(26,92,176,.12); --accent-14:rgba(26,92,176,.14); --accent-22:rgba(26,92,176,.22); --ink-05:rgba(42,33,24,.05); --ink-06:rgba(42,33,24,.06); --ink-10:rgba(42,33,24,.10); --ink-16:rgba(42,33,24,.16); --success-10:rgba(46,125,79,.10); --warn-12:rgba(196,134,15,.12); --error-10:rgba(178,58,46,.10); --hilite:rgba(255,255,255,.86); --hilite-soft:rgba(255,255,255,.55); /* ---- 旗帜色（简化小旗专用，不参与 UI 语义） ---- */ --flag-red:#D6312F; --flag-blue:#2F4A9E; --flag-white:#FFFFFF; --flag-black:#1F1A17; --flag-gold:#F2C33B; /* ---- 圆角 ---- */ --r-panel:20px; --r-card:14px; --r-sm:10px; --r-pill:999px; --r-section:48px; /* ---- 字体 ---- */ --font-display:Georgia,'Iowan Old Style','Palatino Linotype','Songti SC','STSong','Noto Serif CJK SC','SimSun',serif; --font-body:'Inter','Noto Sans SC','Noto Sans JP','Noto Sans KR','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif; --font-mono:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace; /* ---- 阴影：带色柔影 + 高光边 ---- */ --shadow-card:0 16px 34px -20px var(--accent-14),0 2px 6px var(--ink-05),inset 0 1px 0 var(--hilite); --shadow-panel:0 28px 64px -24px var(--accent-14),0 3px 8px var(--ink-06),inset 0 1px 0 var(--hilite); --shadow-window:0 40px 90px -30px var(--accent-22),0 14px 30px -18px var(--accent-12),0 2px 6px var(--ink-06),inset 0 1px 0 var(--hilite); --shadow-float:0 18px 40px -16px var(--accent-14),0 2px 6px var(--ink-06),inset 0 1px 0 var(--hilite); --shadow-pill:0 10px 24px -12px var(--accent-14),0 1px 3px var(--ink-06),inset 0 1px 0 var(--hilite); /* ---- 布局 ---- */ --wrap:1200px; --gutter:24px; --header-h:68px; --speed:.18s; } /* ---------- reset ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; /* 锚点落点避开吸顶导航 */ scroll-padding-top:calc(var(--header-h) + 16px); } body{ font-family:var(--font-body); font-size:15px; line-height:1.6; color:var(--text); background:var(--bg); overflow-x:clip; min-width:0; } img,svg{max-width:100%} img{height:auto} svg{display:block;flex-shrink:0} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul,ol{list-style:none} table{border-collapse:collapse;width:100%} strong,b{font-weight:600} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} /* 中文关键词防断词：只包 2~4 个汉字 */ .no-break{white-space:nowrap} /* 长不可断串（订阅 URL / 安装包文件名）就地防溢出 */ code,kbd,samp{font-family:var(--font-mono);font-size:.92em;overflow-wrap:anywhere;word-break:break-word} pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} pre code{overflow-wrap:normal} /* ---------- 版心 ---------- */ .wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter); } /* 区块节奏只声明纵向，避免覆盖版心左右留白 */ .sec{padding-top:72px;padding-bottom:72px} .sec--tight{padding-top:44px;padding-bottom:44px} .sec--paper{background:var(--bg-panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} /* ---------- 排版层级 ---------- */ h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.18;letter-spacing:-.015em} h1{font-size:clamp(30px,4.6vw,58px);line-height:1.1;letter-spacing:-.02em} h2{font-size:clamp(25px,3.1vw,38px)} h3{font-size:clamp(19px,2.1vw,24px)} h4{font-size:17px;font-family:var(--font-body);font-weight:700;letter-spacing:0} p{max-width:74ch} .lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:72ch} .kicker{ display:inline-flex;align-items:center;gap:8px; font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);font-family:var(--font-body); } .kicker::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--accent);flex:none} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums} .muted{color:var(--muted)} .center{text-align:center} .center p,.center .lead{margin-inline:auto} .sec-head{max-width:760px;margin:0 auto 34px;text-align:center} .sec-head h2{margin:10px 0 12px} .sec-head p{color:var(--muted);margin-inline:auto} /* ---------- 徽标 / 胶囊 / 标签 ---------- */ .badge{ display:inline-flex;align-items:center;gap:7px; max-width:100%;overflow:hidden; height:26px;padding:0 11px;border-radius:var(--r-pill); background:var(--bg-panel);border:1px solid var(--border); font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em; box-shadow:inset 0 1px 0 var(--hilite); } .badge i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 0 3px var(--accent-12)} .badge--accent{color:var(--accent);border-color:var(--accent-22);background:var(--accent-08)} .badge--apricot{background:var(--apricot);border-color:transparent;color:var(--text)} .badge--coral{background:var(--coral);border-color:transparent;color:var(--text)} .badge--mist{background:var(--mist);border-color:transparent;color:var(--text)} .tag{ display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-pill); font-size:11.5px;font-weight:600;line-height:1; border:1px solid var(--border);background:var(--bg-panel2);color:var(--muted); max-width:100%;overflow:hidden;white-space:nowrap; } .tag--accent{color:var(--accent);border-color:var(--accent-22);background:var(--accent-08)} .tag--success{color:var(--success);border-color:rgba(46,125,79,.28);background:var(--success-10)} .tag--warn{color:var(--warn);border-color:rgba(196,134,15,.3);background:var(--warn-12)} /* ---------- 按钮 ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-body);font-weight:600;border-radius:var(--r-pill); white-space:nowrap;flex-shrink:0; transition:background var(--speed),color var(--speed),border-color var(--speed),box-shadow var(--speed),transform var(--speed); } .btn--primary{ min-height:46px;padding:0 30px;font-size:15.5px;color:var(--white); background:linear-gradient(180deg,var(--accent) 0%,var(--accent-dark) 100%); box-shadow:0 14px 28px -12px var(--accent-22),inset 0 1px 0 var(--hilite-soft); } .btn--primary:hover{background:var(--accent-dark)} .btn--ghost{ min-height:46px;padding:0 26px;font-size:15.5px;color:var(--text); border:1.5px solid var(--border);background:var(--bg-panel); } .btn--ghost:hover{border-color:var(--accent);color:var(--accent)} .btn--login{ min-height:38px;padding:0 20px;font-size:14px;color:var(--accent); border:1.5px solid var(--accent);background:var(--bg-panel); } .btn--login:hover{background:var(--accent);color:var(--white)} .btn--small{min-height:34px;padding:0 16px;font-size:13px} .btn--block{width:100%} .btn[aria-disabled="true"]{opacity:.55;pointer-events:none} .btn-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} /* 文本链接箭头 */ .link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent);min-height:24px} .link-arrow:hover{color:var(--accent-dark)} .link-arrow svg{width:15px;height:15px} /* ---------- 纸卡 / 面板 ---------- */ .card{ background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:20px; min-width:0; } .panel{ background:var(--bg-panel); border-radius:var(--r-panel); box-shadow:var(--shadow-panel); padding:26px; min-width:0; } .card--tint-a{background:var(--bg-panel2);border-color:transparent;box-shadow:none} .card--tint-b{background:var(--apricot);border-color:transparent;box-shadow:none;color:var(--text)} .card--tint-c{background:var(--coral);border-color:transparent;box-shadow:none;color:var(--text)} .card--tint-d{background:var(--mist);border-color:transparent;box-shadow:none;color:var(--text)} /* 事实胶囊行 */ .fact-row{display:flex;flex-wrap:wrap;gap:8px} .fact-chip{ display:inline-flex;align-items:center;gap:8px; min-height:30px;padding:0 12px;border-radius:var(--r-pill); background:var(--bg-panel2);border:1px solid var(--border); font-size:12.5px;color:var(--text);box-shadow:inset 0 1px 0 var(--hilite); } .fact-chip svg{width:13px;height:13px;color:var(--accent)} .fact-chip b{font-weight:600} /* ---------- 顶部导航（header.js 注入） ---------- */ .topbar{ position:sticky;top:0;z-index:60; height:var(--header-h); background:var(--bg); border-bottom:1px solid transparent; } .topbar__in{ position:relative; height:var(--header-h); display:flex;align-items:center;gap:26px; } .brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0} .brand__logo{width:32px;height:32px;flex:none} .brand__name{font-family:var(--font-body);font-weight:700;font-size:19px;letter-spacing:.02em;color:var(--text);white-space:nowrap} .dotnav{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--muted);min-width:0} .dotnav a{display:inline-flex;align-items:center;min-height:30px;padding:0 2px;transition:color var(--speed)} .dotnav a:hover{color:var(--text)} .dotnav a[aria-current="page"]{color:var(--text);font-weight:600} .dotnav i{font-style:normal;color:var(--border);font-size:16px;line-height:1;user-select:none;flex:none} .topbar__tools{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0} .lang-wrap{position:relative} .lang{ display:inline-flex;align-items:center;justify-content:center;gap:6px; min-height:36px;padding:0 12px;border-radius:var(--r-pill); font-size:14px;color:var(--muted); } .lang:hover{background:var(--accent-05);color:var(--text)} .lang span[aria-hidden]{font-size:11px} .lang-menu{ position:absolute;top:calc(100% + 8px);right:0;min-width:168px; background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-card); box-shadow:var(--shadow-float);padding:6px;z-index:70; } .lang-menu[hidden]{display:none} .lang-menu a{ display:flex;align-items:center;min-height:38px;padding:0 12px;border-radius:var(--r-sm); font-size:14px;color:var(--text); } .lang-menu a:hover{background:var(--accent-05);color:var(--accent)} .lang-menu a[aria-current="true"]{color:var(--muted);background:var(--bg-panel2)} .burger{ display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px; min-width:44px;min-height:44px;border-radius:var(--r-sm); border:1px solid var(--border);background:var(--bg-panel); } .burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--text);transition:transform var(--speed),opacity var(--speed)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* 抽屉：必须是