/* ══════════════════════════════════════════════════════ 皮肤定义 · skins.css ────────────────────────────────────────────────────── 两套皮肤： 素笺（elegant）淡雅简洁 —— 默认，令牌定义在 style.css 的 :root 星穹（tech）未来科技 —— 深色科幻，令牌在本文件覆盖 切换开关：；去掉该属性即回到「素笺」。 加载顺序：style.css → landing.css → skins.css（本文件必须在最后， 因为 [data-skin] 与 :not([data-skin]) 依赖「同优先级靠后胜」）。 ══════════════════════════════════════════════════════ */ /* ════════ 一、星穹（未来科技·深色）令牌覆盖 ════════ */ html[data-skin="tech"] { color-scheme: dark; --brand: #38bdf8; /* 电光蓝（数据链路） */ --brand-rgb: 56, 189, 248; --brand-d: #0b1220; --brand-2: #6366f1; /* 量子紫 */ --brand-2-rgb: 99, 102, 241; --brand-ink: #7dd3fc; --brand-ink-2: #e0f2fe; --seal: #ff4d6d; /* 霓虹绯红（保留印章识别度） */ --seal-rgb: 255, 77, 109; --seal-d: #c9184a; --seal-lite: #ff7a90; --seal-ink: #ff9db0; --ok: #34d399; --ok-rgb: 52, 211, 153; --ok-ink: #6ee7b7; --warn: #fbbf24; --warn-rgb: 251, 191, 36; --warn-ink: #fcd34d; --warn-ink-2: #f2d68a; --warn-ink-3: #ffd98a; --warn-ink-4: #c9a24a; --err: #ff5470; --err-rgb: 255, 84, 112; --err-ink: #ff8ca3; --violet-rgb: 167, 139, 250; --violet-ink: #c4b5fd; --neutral-rgb: 148, 176, 214; --txt-2-rgb: 139, 163, 199; --knob: #cbd5e1; --overlay-rgb: 255, 255, 255; /* 深底上用白色蒙版 */ --ink-rgb: 226, 242, 255; --shadow-rgb: 0, 0, 0; --btn-rgb: 14, 165, 233; --bg: #060a14; --bg-0: #050a15; --bg-2: #0b1220; --bg-3: #10233d; --bg-4: #101c31; --surface: rgba(14, 24, 42, .88); --surface-solid: #0b1424; --card: var(--surface); --line: rgba(56, 189, 248, .18); --line-soft: rgba(148, 176, 214, .14); --txt: #e6f0ff; --txt-2: #8ba3c7; --topbar-ink: #ffffff; --hero-ink: #ffffff; --hero-em: #9be7ff; --hero-chip-rgb: 12, 24, 42; --btn-white-rgb: 233, 246, 255; --btn-white-ink: #061225; --mask-rgb: 2, 6, 16; --badge-rgb: 6, 12, 24; --actbar-rgb: 9, 16, 29; --btn-1: #0ea5e9; --btn-2: #2563eb; --shadow: 0 10px 30px rgba(0, 0, 0, .45); --glow: 0 0 18px rgba(56, 189, 248, .35); } /* ════════ 二、素笺（淡雅简洁）专属：收起科幻装饰 ════════ :not([data-skin="tech"]) 命中"素笺"与"未设置属性"两种情形， 保证零 JS 时默认也是素笺。 */ /* 页面底：保留极淡的三色晕染，去掉数据网格底纹 */ html:not([data-skin="tech"]) body { background: radial-gradient(1100px 560px at 10% -10%, rgba(var(--brand-rgb), .10), transparent 62%), radial-gradient(900px 520px at 92% 4%, rgba(var(--seal-rgb), .07), transparent 62%), radial-gradient(900px 620px at 50% 110%, rgba(var(--ok-rgb), .06), transparent 62%), var(--bg); } html:not([data-skin="tech"]) body::before { display: none; } /* 顶栏：纸白 + 一条细底线，去掉扫描光带与呼吸点脉冲 */ html:not([data-skin="tech"]) .topbar { background: var(--bg-0); box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(var(--shadow-rgb), .05); } html:not([data-skin="tech"]) .topbar::after { display: none; } html:not([data-skin="tech"]) .topbar .logo .dot { animation: none; box-shadow: 0 0 0 3px rgba(var(--seal-rgb), .14); } /* 卡片：去掉对角渐变光环描边与发光悬停，改柔和投影 */ html:not([data-skin="tech"]) .card::after, html:not([data-skin="tech"]) .panel::after, html:not([data-skin="tech"]) .wallet-card::after { display: none; } html:not([data-skin="tech"]) .card:hover, html:not([data-skin="tech"]) .wallet-card:hover { box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .05), 0 10px 26px rgba(var(--shadow-rgb), .09); border-color: #dfe4ea; } /* 面板标题：光条改实色，细描边不加辉光 */ html:not([data-skin="tech"]) .panel-head { background: linear-gradient(90deg, rgba(var(--brand-rgb), .07), transparent 70%); } html:not([data-skin="tech"]) .panel-head::before { box-shadow: none; background: var(--brand); } html:not([data-skin="tech"]) h2.section-title .tag { box-shadow: none; } html:not([data-skin="tech"]) .lp-kicker { box-shadow: none; letter-spacing: 1.4px; } /* 内嵌发光效果统一收敛 */ html:not([data-skin="tech"]) .lp-strip .item::before { display: none; } html:not([data-skin="tech"]) .lp-feature .f-ico, html:not([data-skin="tech"]) .lp-feature.red .f-ico, html:not([data-skin="tech"]) .lp-strip .ico { box-shadow: none; } html:not([data-skin="tech"]) .lp-adv-item .ck { box-shadow: none; } html:not([data-skin="tech"]) .lp-scene .s-ico { filter: none; } html:not([data-skin="tech"]) .code-display { box-shadow: none; } html:not([data-skin="tech"]) .switch input:checked + .slider { box-shadow: none; } html:not([data-skin="tech"]) .lp-plan .hot-badge { box-shadow: 0 4px 12px rgba(var(--seal-rgb), .26); } html:not([data-skin="tech"]) .lp-plan .p-price { text-shadow: none; } html:not([data-skin="tech"]) .lp-plan.hot { border: 1px solid rgba(var(--seal-rgb), .45); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .05), 0 8px 24px rgba(var(--shadow-rgb), .07); } html:not([data-skin="tech"]) .pulse-dot { animation: none; box-shadow: 0 0 0 3px rgba(var(--ok-rgb), .16); } /* 悬停阴影减弱（深色皮肤下的大黑阴影在浅底上过重） */ html:not([data-skin="tech"]) .lp-feature:hover, html:not([data-skin="tech"]) .lp-scene:hover { transform: none; box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .06), 0 8px 22px rgba(var(--shadow-rgb), .08); border-color: #dfe4ea; } /* 遮罩与预览画布 */ html:not([data-skin="tech"]) .modal-mask { background: rgba(var(--mask-rgb), .34); } html:not([data-skin="tech"]) .modal { box-shadow: 0 20px 60px rgba(var(--shadow-rgb), .16); } html:not([data-skin="tech"]) #previewScroll { background: var(--bg-4); box-shadow: inset 0 0 0 1px var(--line); } html:not([data-skin="tech"]) .pdf-page-wrap { box-shadow: 0 1px 3px rgba(var(--shadow-rgb), .12), 0 8px 24px rgba(var(--shadow-rgb), .08); } html:not([data-skin="tech"]) .act-bar { box-shadow: 0 -4px 16px rgba(var(--shadow-rgb), .10); } html:not([data-skin="tech"]) ::-webkit-scrollbar-thumb { background: rgba(var(--overlay-rgb), .18); background-clip: content-box; } html:not([data-skin="tech"]) ::-webkit-scrollbar-thumb:hover { background: rgba(var(--overlay-rgb), .3); background-clip: content-box; } /* ════════ 三、素笺：落地页视觉转浅 ════════ */ /* Hero：纸白底 + 极淡晕染，去掉网格/扫描线/漂浮节点 */ html:not([data-skin="tech"]) .lp-hero { background: radial-gradient(900px 420px at 82% -12%, rgba(var(--brand-rgb), .10), transparent 62%), radial-gradient(760px 380px at 10% 108%, rgba(var(--seal-rgb), .07), transparent 62%), linear-gradient(180deg, var(--bg-0) 0%, var(--bg) 100%); } html:not([data-skin="tech"]) .lp-hero-fx { display: none; } html:not([data-skin="tech"]) .lp-hero h1 { text-shadow: none; } html:not([data-skin="tech"]) .lp-hero h1 em { text-shadow: none; } html:not([data-skin="tech"]) .lp-hero-qs span { background: var(--surface); border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04); } html:not([data-skin="tech"]) .lp-hero-qs span:hover { border-color: rgba(var(--brand-rgb), .45); box-shadow: 0 4px 14px rgba(var(--shadow-rgb), .08); } html:not([data-skin="tech"]) .lp-hero .lp-hero-sub { color: var(--txt-2); } html:not([data-skin="tech"]) .lp-hero-note { color: var(--txt-2); } /* Hero 上的"幽灵按钮"在白底上要有描边才看得见 */ html:not([data-skin="tech"]) .lp-hero-cta .btn-white { background: var(--surface); color: var(--txt); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .05); } html:not([data-skin="tech"]) .lp-hero-cta .btn-white:hover { border-color: rgba(var(--brand-rgb), .5); box-shadow: 0 4px 14px rgba(var(--shadow-rgb), .08); } html:not([data-skin="tech"]) .lp-hero-cta .btn-seal { box-shadow: 0 6px 18px rgba(var(--seal-rgb), .22); } /* 护盾插画：去掉辉光与自转，改为静默线稿（配色改由令牌驱动） */ html:not([data-skin="tech"]) .lp-shield { filter: none; } html:not([data-skin="tech"]) .lp-shield .r1 { stroke: rgba(var(--brand-rgb), .22); animation: none; } html:not([data-skin="tech"]) .lp-shield .r2 { stroke: rgba(var(--seal-rgb), .18); animation: none; } html:not([data-skin="tech"]) .lp-shield .shield-path { fill: rgba(var(--brand-rgb), .05); stroke: var(--brand); animation: none; } html:not([data-skin="tech"]) .lp-shield .shield-path2 { stroke: rgba(var(--brand-rgb), .26); } html:not([data-skin="tech"]) .lp-shield .seal-inner { stroke: rgba(var(--seal-rgb), .4); animation: none; } html:not([data-skin="tech"]) .lp-shield .lock { animation: none; } html:not([data-skin="tech"]) .lp-shield .lock rect { fill: rgba(var(--brand-rgb), .08); } html:not([data-skin="tech"]) .lp-shield .node { fill: var(--brand); animation: none; } html:not([data-skin="tech"]) .lp-shield .node[fill="#ff4d6d"] { fill: var(--seal); } html:not([data-skin="tech"]) .lp-shield .node[fill="#7dd3fc"] { fill: var(--brand-ink); } html:not([data-skin="tech"]) .lp-shield #shg stop:first-child { stop-color: var(--brand); } html:not([data-skin="tech"]) .lp-shield #shg stop:last-child { stop-color: var(--brand-2); } html:not([data-skin="tech"]) .lp-shield #shg2 stop:first-child { stop-color: var(--seal-lite); } html:not([data-skin="tech"]) .lp-shield #shg2 stop:last-child { stop-color: var(--seal-d); } /* 区块之间的分隔线：改成一条素净的细线 */ html:not([data-skin="tech"]) .lp-section + .lp-section::before { background: linear-gradient(90deg, transparent, var(--line), transparent); } /* 落地页顶栏：白底细线 */ html:not([data-skin="tech"]) .lp-topbar { background: var(--bg-0); border-bottom: 1px solid var(--line); } html:not([data-skin="tech"]) .lp-topbar .btn-signin { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04); } html:not([data-skin="tech"]) .lp-topbar .btn-signin:hover { background: rgba(var(--brand-rgb), .08); border-color: rgba(var(--brand-rgb), .4); } html:not([data-skin="tech"]) .lp-topbar .lp-nav.open { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 12px 28px rgba(var(--shadow-rgb), .12); } /* 底部 CTA 带：改为浅色卡 */ html:not([data-skin="tech"]) .lp-final .band { background: radial-gradient(600px 260px at 20% 0%, rgba(var(--brand-rgb), .10), transparent 62%), radial-gradient(600px 260px at 85% 100%, rgba(var(--seal-rgb), .07), transparent 62%), var(--surface); border-color: var(--line); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .05), 0 12px 32px rgba(var(--shadow-rgb), .07); } html:not([data-skin="tech"]) .lp-final .band-fx { display: none; } html:not([data-skin="tech"]) .lp-final .band h2 { text-shadow: none; } html:not([data-skin="tech"]) .lp-final .band p { color: var(--txt-2); } html:not([data-skin="tech"]) .lp-final .band .lp-hero-cta .btn-white:hover { background: var(--surface); } /* 页脚：纸白 + 细线 */ html:not([data-skin="tech"]) .lp-foot { border-top: 1px solid var(--line); } html:not([data-skin="tech"]) .lp-foot .copy { border-top-color: var(--line); color: var(--txt-2); } html:not([data-skin="tech"]) .lp-foot a { color: var(--txt-2); } html:not([data-skin="tech"]) .lp-foot a:hover { color: var(--brand-ink); } /* ════════ 四、切换控件（两套皮肤共用） ════════ */ /* 原生控件（滑块/复选/单选）跟随品牌色，避免浏览器默认蓝与皮肤冲突 */ input[type=range], input[type=checkbox], input[type=radio], progress { accent-color: var(--brand); } /* 顶栏品牌名是 ，会被全局 a{color:var(--brand)} 染色；这里跟随顶栏前景色 */ .topbar a.logo { color: var(--topbar-ink); } .lp-actions .skin-switch { margin-left: 0; } .skin-switch { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: 12px; padding: 3px; border-radius: 999px; border: 1px solid rgba(var(--overlay-rgb), .14); background: rgba(var(--overlay-rgb), .07); } .skin-switch button { display: inline-flex; align-items: center; gap: 5px; border: none; background: transparent; cursor: pointer; padding: 5px 11px; border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 600; font-family: inherit; color: var(--topbar-ink); opacity: .6; transition: opacity .15s, background .15s, color .15s; } .skin-switch button:hover { opacity: 1; } .skin-switch button:focus-visible { outline: 2px solid rgba(var(--brand-rgb), .6); outline-offset: 1px; } .skin-switch button.on { opacity: 1; background: rgba(var(--brand-rgb), .16); color: var(--brand-ink); } .skin-switch .sk-ico { font-size: 12px; line-height: 1; } @media (max-width: 640px) { .skin-switch { margin-left: 6px; padding: 2px; } .skin-switch button { padding: 6px 9px; } .skin-switch .sk-txt { display: none; } /* 窄屏只留符号，给汉堡与登录让位 */ }