/* 白泽翻译工作台 · 内测官网 * * 视觉:深色首屏 + 浅色正文(产品页常见节奏)。首屏用近黑底 + 巨字 + 发光的 * 界面图拉气势;往下切回浅色,保证 SHA-256、规格表、法务长文本仍然好读。 * * 零依赖:不引 CDN、不引外部字体、不引统计脚本。字体走系统栈。 * 动效全部自写(IntersectionObserver + rAF),尊重 prefers-reduced-motion。 */ :root { color-scheme: light; /* ── 浅色区(正文)── */ --bg: #FFFFFF; --bg-alt: #F7F8FA; --fg: #0B0C10; --fg-soft: #3F4550; --muted: #6B7280; --card: #FFFFFF; --border: #E6E8EE; --hairline: rgba(11, 12, 16, .07); /* ── 深色区(首屏/页脚)── */ --dark-bg: #08090C; --dark-fg: #FFFFFF; --dark-muted: #8A90A0; --dark-line: rgba(255, 255, 255, .10); --dark-card: rgba(255, 255, 255, .045); /* ── 品牌 ── */ --primary: #4F46E5; --primary-lit: #6D66F0; --primary-hover: #4038D6; --accent-bg: #EEF0FF; --accent-fg: #362FBE; /* ── 状态语义(与客户端译文状态同源)── */ --done: #047857; --done-bg: #ECFDF5; --draft: #1D4ED8; --draft-bg: #EFF6FF; --todo: #B45309; --todo-bg: #FFFBEB; --lock: #6B7280; --lock-bg: #F3F4F6; --danger: #B91C1C; --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 26px; --shadow-sm: 0 1px 2px rgba(11, 12, 16, .05), 0 2px 6px rgba(11, 12, 16, .04); --shadow-md: 0 2px 4px rgba(11, 12, 16, .04), 0 12px 28px -14px rgba(11, 12, 16, .18); --shadow-lg: 0 4px 8px rgba(11, 12, 16, .05), 0 30px 60px -28px rgba(11, 12, 16, .28); --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --ease: cubic-bezier(.22, .8, .28, 1); --maxw: 1120px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } p { margin: 0; } h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; } code, kbd, .mono { font-family: var(--mono); } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } /* ── 滚动渐现 ───────────────────────────────────────────── .reveal 初始下移+透明,进入视口加 .in。stagger 由内联 --d 控制。 **初始隐藏态一律挂在 .js 下**:head 里那行内联脚本给 加 .js。 这样 JS 被禁用/报错/未执行时,内容默认就是可见的 —— 否则一旦脚本挂了, 整页就是空白。渐进增强,不是渐进消失。 */ .js .reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: var(--d, 0ms); will-change: opacity, transform; } .js .reveal.in { opacity: 1; transform: none; } /* ── 顶栏 ───────────────────────────────────────────────── 有首屏的页面:初始透明浮在深色上;滚过首屏后变浅色玻璃。 */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 62px; transition: background-color .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease); border-bottom: 1px solid transparent; } .topbar .wrap { display: flex; align-items: center; gap: 18px; height: 100%; } body.has-hero .topbar { background: transparent; } body.has-hero .topbar .brand-name { background-image: linear-gradient(90deg, #fff, #C7C4FF); } body.has-hero .topbar .brand-sub, body.has-hero .topbar .navlinks a { color: rgba(255, 255, 255, .62); } body.has-hero .topbar .navlinks a:hover { color: #fff; } /* 滚过首屏 / 无首屏的页面 → 实心玻璃。 注意选择器必须**同样带 body**:上面那组透明态写的是 `body.has-hero .topbar …`, 带了 body 元素选择器,优先级高于裸 `.topbar.solid …`。少写这个 body, 顶栏变白后字仍是白的 —— 白底白字,整条导航消失(2026-08-18 踩过)。 */ body .topbar.solid, body:not(.has-hero) .topbar { background: rgba(255, 255, 255, .78); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom-color: var(--hairline); } body .topbar.solid .brand-name, body:not(.has-hero) .topbar .brand-name { background-image: linear-gradient(90deg, #2A2585, #4F46E5); } body .topbar.solid .brand-sub, body:not(.has-hero) .topbar .brand-sub { color: var(--muted); } body .topbar.solid .navlinks a, body:not(.has-hero) .topbar .navlinks a { color: var(--muted); } body .topbar.solid .navlinks a:hover, body:not(.has-hero) .topbar .navlinks a:hover { color: var(--fg); } .brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .brand:hover { text-decoration: none; } .brand svg { width: 21px; height: 21px; display: block; } .brand-name { font-size: 17px; font-weight: 800; letter-spacing: .06em; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-image .35s var(--ease); } .brand-sub { font-size: 13.5px; font-weight: 500; transition: color .35s var(--ease); } .navlinks { display: flex; gap: 26px; margin-left: auto; font-size: 14px; } .navlinks a { font-weight: 500; transition: color .2s var(--ease); } .navlinks a:hover { text-decoration: none; } /* ── 按钮 ───────────────────────────────────────────────── hover 微上浮 + 阴影加深,是「有质感」最省力也最有效的一处。 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 50px; padding: 0 28px; border-radius: 999px; border: 1px solid transparent; font-family: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: transform .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease), border-color .28s var(--ease); } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: linear-gradient(180deg, var(--primary-lit), var(--primary)); color: #fff; box-shadow: 0 1px 2px rgba(11, 12, 16, .12), 0 10px 26px -10px rgba(79, 70, 229, .70); } .btn-primary:hover { background: linear-gradient(180deg, #7A73F5, var(--primary-hover)); box-shadow: 0 2px 4px rgba(11, 12, 16, .14), 0 18px 40px -12px rgba(79, 70, 229, .78); } /* 深色区上的次要按钮 = 玻璃描边 */ .btn-glass { background: rgba(255, 255, 255, .07); color: #fff; border-color: rgba(255, 255, 255, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .btn-glass:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .3); } .btn-ghost { background: var(--card); color: var(--fg); border-color: var(--border); box-shadow: var(--shadow-sm); } .btn-ghost:hover { background: var(--bg-alt); box-shadow: var(--shadow-md); } .btn-sm { height: 38px; padding: 0 18px; font-size: 13.5px; } /* ── 徽标 / 胶囊 ───────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.5; background: var(--accent-bg); color: var(--accent-fg); border: 1px solid rgba(79, 70, 229, .14); } .badge-neutral { background: var(--bg-alt); color: var(--muted); border-color: var(--border); } .badge-warn { background: var(--todo-bg); color: var(--todo); border-color: rgba(180, 83, 9, .18); } /* 深色区上的玻璃徽标 */ .hero .badge { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hero .badge-neutral { color: rgba(255, 255, 255, .58); } .hero .badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); } .pill { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; } .pill-done { background: var(--done-bg); color: var(--done); } .pill-draft { background: var(--draft-bg); color: var(--draft); } .pill-todo { background: var(--todo-bg); color: var(--todo); } .pill-lock { background: var(--lock-bg); color: var(--lock); } /* ── 区块骨架 ─────────────────────────────────────────── */ section { padding: 128px 0; } section[id] { scroll-margin-top: 78px; } .sec-alt { background: var(--bg-alt); } .sec-alt + .sec-alt { padding-top: 0; } .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); margin-bottom: 18px; } .section-title { font-size: clamp(28px, 4.2vw, 44px); letter-spacing: -0.035em; margin-bottom: 18px; max-width: 22ch; } .section-lede { color: var(--muted); font-size: 17.5px; max-width: 60ch; line-height: 1.75; } .section-head { margin-bottom: 60px; } /* ── 首屏(深色)─────────────────────────────────────────── */ .hero { position: relative; background: var(--dark-bg); color: var(--dark-fg); padding: 168px 0 0; overflow: hidden; isolation: isolate; } /* 光斑:左上主品牌光 + 右侧冷光,营造纵深 */ .hero::before { content: ""; position: absolute; inset: -30% -10% auto -25%; height: 130%; background: radial-gradient(58% 48% at 22% 18%, rgba(99, 102, 241, .30), transparent 68%), radial-gradient(42% 40% at 88% 6%, rgba(56, 189, 248, .13), transparent 70%), radial-gradient(70% 50% at 50% 108%, rgba(79, 70, 229, .18), transparent 72%); z-index: -2; pointer-events: none; } /* 细网格纹理:科技感的低成本来源,压到极淡免得脏 */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(76% 60% at 50% 26%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(76% 60% at 50% 26%, #000 20%, transparent 78%); } .hero-badges { display: flex; flex-wrap: wrap; gap: 9px; } .hero h1 { font-size: clamp(40px, 8.2vw, 88px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.04; margin: 26px 0 0; max-width: 15ch; } .hero h1 em { font-style: normal; background: linear-gradient(96deg, #8B85FF 6%, #6D66F0 44%, #38BDF8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* 逐行入场:每行独立上移淡入(初始态同样只在 .js 下生效)。 overflow:hidden 会裁掉字形下缘,故上下留 padding 再用负 margin 抵回。 */ .hero h1 .line { display: block; overflow: hidden; padding: .12em 0; margin: -.12em 0; } .js .hero h1 .line > span { display: block; transform: translate3d(0, 110%, 0); opacity: 0; transition: transform .8s var(--ease), opacity .8s var(--ease); transition-delay: var(--d, 0ms); } .js body.ready .hero h1 .line > span { transform: none; opacity: 1; } .hero-lede { margin-top: 26px; font-size: 18.5px; line-height: 1.78; color: rgba(255, 255, 255, .70); max-width: 54ch; } .hero-lede code { font-size: .92em; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #C7C4FF; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; } .hero-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 26px; font-size: 14px; color: rgba(255, 255, 255, .56); } .hero-meta span { display: inline-flex; align-items: center; gap: 8px; } .hero-meta span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .34); } /* ── 工作台示意图(纯 CSS/HTML,零位图)──────────────────── 浅色界面浮在深底上 = 天然的「产品图」对比。 */ .shot-stage { position: relative; margin-top: 78px; padding-bottom: 96px; } /* 图下方的品牌辉光 */ .shot-stage::before { content: ""; position: absolute; left: 50%; top: 12%; width: min(880px, 88%); height: 62%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(99, 102, 241, .42), transparent 76%); filter: blur(46px); z-index: 0; pointer-events: none; } .shot-scroll { position: relative; z-index: 1; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; /* 右缘渐隐:窄屏下提示「还能横向滑」 */ -webkit-overflow-scrolling: touch; } .shot { min-width: 940px; border: 1px solid rgba(255, 255, 255, .10); border-radius: var(--r-xl); background: #FDFDFF; overflow: hidden; font-size: 11.5px; line-height: 1.55; user-select: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 6px rgba(0, 0, 0, .30), 0 44px 90px -30px rgba(0, 0, 0, .70), 0 0 0 1px rgba(255, 255, 255, .05); /* 初始略带俯视透视,滚动时归位(JS 控制 --tilt) */ transform: perspective(1600px) rotateX(var(--tilt, 0deg)) scale(var(--tscale, 1)); transform-origin: 50% 0%; transition: transform .1s linear; } /* ── 首屏轮播 ───────────────────────────────────────────── 横向 scroll-snap 做轨道:不用 JS 也能滑动/翻页,JS 只加按钮、圆点与自动播放。 高度由 --ratio(第一张的宽高比)锁死,切换时页面不跳动。 */ .gal { position: relative; z-index: 1; border-radius: var(--r-xl); border: 1px solid rgba(255, 255, 255, .10); background: #0D0F14; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 2px 6px rgba(0, 0, 0, .30), 0 44px 90px -30px rgba(0, 0, 0, .70); overflow: hidden; /* 与单图版共用透视归位(JS 写 --tilt/--tscale)。 */ transform: perspective(1600px) rotateX(var(--tilt, 0deg)) scale(var(--tscale, 1)); transform-origin: 50% 0%; transition: transform .1s linear; } .gal-track { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; } .gal-track::-webkit-scrollbar { display: none; } .gal-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; } /* 图片区按第一张的宽高比留位;object-position 顶对齐,裁掉的是底部状态栏。 */ /* min-height:0 是必需的:弹性项默认 min-height:auto,会被图片的内容高度撑住, 导致 aspect-ratio 失效、底部裁切完全不生效(2026-08-18 实测踩到)。 */ .gal-shot { aspect-ratio: 1 / var(--ratio, .55); min-height: 0; overflow: hidden; background: #fff; } .gal-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* 说明条:放在图片**下方**的深色条里,不遮挡界面内容。 固定高度,避免各张文案长短不一导致切换时高度跳动。 */ .gal-cap { flex: 0 0 auto; height: 92px; padding: 16px 26px; color: #fff; background: #0D0F14; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; justify-content: center; } .gal-cap b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .gal-cap span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .62); } .gal-nav { position: absolute; top: calc((100% - 92px) / 2); transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(12, 14, 20, .55); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s var(--ease), background-color .25s var(--ease); } .gal:hover .gal-nav, .gal-nav:focus-visible { opacity: 1; } .gal-nav:hover { background: rgba(12, 14, 20, .8); } .gal-nav.prev { left: 14px; } .gal-nav.next { right: 14px; } .gal-dots { position: relative; z-index: 1; display: flex; justify-content: center; gap: 9px; margin-top: 20px; } .gal-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .22); cursor: pointer; transition: width .3s var(--ease), background-color .3s var(--ease); } .gal-dot.on { width: 24px; background: var(--primary-lit); } /* 真实截图版:沿用 .shot 的描边/圆角/浮起/透视,但不要 min-width 与横向滚动。 */ .shot-img { display: block; width: 100%; height: auto; min-width: 0; position: relative; z-index: 1; background: #FDFDFF; } .shot-chrome { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, #FAFBFE, #F4F6FA); } .shot-logo svg { width: 15px; height: 15px; display: block; } .shot-pet-mark { width: 22px; height: 20px; border-radius: 6px; background: #1F2430; position: relative; flex-shrink: 0; } .shot-pet-mark i { position: absolute; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: #fff; } .shot-pet-mark i:nth-child(1) { left: 5px; } .shot-pet-mark i:nth-child(2) { right: 5px; } .shot-sel { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 9px; border: 1px solid var(--border); background: #fff; color: #9CA3AF; font-size: 11px; } .shot-sel b { color: #0B0C10; font-weight: 600; } .shot-sel em { font-style: normal; color: #C4C8D2; } .shot-chip { padding: 5px 11px; border-radius: 9px; border: 1px solid var(--border); background: #fff; color: #4B5563; font-size: 11px; font-weight: 500; } .shot-chip.primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; box-shadow: 0 2px 8px -2px rgba(79, 70, 229, .55); } .shot-search { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 9px; border: 1px solid var(--border); background: #fff; color: #A2A8B6; font-size: 11px; min-width: 200px; } .shot-search kbd { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: #C4C8D2; border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; } .shot-save { padding: 5px 12px; border-radius: 9px; border: 1px solid var(--border); background: #fff; color: #374151; font-size: 11px; font-weight: 600; } .shot-body { position: relative; min-height: 546px; background: #fff; } /* 底层:双栏对照表 */ .shot-grid { padding-bottom: 6px; } .shot-row { display: grid; grid-template-columns: 28px .82fr 1fr 58px; gap: 12px; padding: 9px 14px; border-bottom: 1px solid rgba(11, 12, 16, .045); align-items: start; } .shot-row.head { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #A2A8B6; background: #FAFBFD; padding-top: 7px; padding-bottom: 7px; } .shot-row.on { background: #F3F4FF; } .shot-row .no { color: #C4C8D2; font-variant-numeric: tabular-nums; } .shot-row .src { color: #6B7280; } .shot-row .tgt { color: #0B0C10; } .shot-row .st { text-align: right; } .shot-row mark { background: #FEF3C7; color: #92400E; padding: 0 3px; border-radius: 3px; } /* 上层:宠物 agent 浮窗 */ .shot-pet { position: absolute; left: 14px; top: 12px; bottom: 12px; width: 384px; display: flex; flex-direction: column; background: #fff; border: 1px solid #E6E8EE; border-radius: 16px; box-shadow: 0 2px 6px rgba(11, 12, 16, .06), 0 26px 54px -18px rgba(11, 12, 16, .30); overflow: hidden; } .shot-pet-head { display: flex; align-items: center; padding: 11px 13px; border-bottom: 1px solid var(--hairline); } .shot-pet-head .t { font-size: 12px; font-weight: 700; color: #0B0C10; } .shot-pet-head .ops { margin-left: auto; display: flex; gap: 9px; color: #C4C8D2; font-style: normal; } .shot-pet-head .ops i { font-style: normal; font-size: 11px; } .shot-pet-body { flex: 1; padding: 12px 13px; overflow: hidden; } .pet-user { margin-left: auto; width: fit-content; max-width: 82%; background: var(--primary); color: #fff; border-radius: 13px 13px 4px 13px; padding: 7px 12px; font-size: 11.5px; } .pet-skill { margin: 6px 0 0 auto; width: fit-content; background: #EEF0FF; color: #362FBE; border: 1px solid rgba(79,70,229,.16); border-radius: 6px; padding: 2px 8px; font-size: 10px; font-weight: 600; } .pet-think { margin-top: 10px; color: #A2A8B6; font-size: 10.5px; padding-left: 10px; border-left: 2px solid #E6E8EE; } .pet-tool { margin-top: 6px; color: #4B5563; font-size: 10.5px; } .pet-tool .ok { color: #10B981; font-weight: 700; margin-right: 5px; } .pet-say { margin-top: 10px; color: #0B0C10; font-size: 11.5px; line-height: 1.7; } .pet-say b { color: var(--accent-fg); } .pet-card { margin-top: 10px; border: 1px solid #D9DDF5; border-radius: 11px; background: #FBFBFF; overflow: hidden; } .pet-card-h { display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; border-bottom: 1px solid #EDEFFA; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #6B7280; } .pet-card-h .n { background: #EEF0FF; color: #362FBE; border-radius: 5px; padding: 1px 7px; letter-spacing: 0; } .pet-cand { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; align-items: center; padding: 7px 11px; border-bottom: 1px solid #F2F3FB; background: #fff; } .pet-cand.warn { background: #FFFCF5; } .pet-cand .w { min-width: 0; } .pet-cand .w b { display: block; font-size: 11px; color: #0B0C10; font-weight: 600; } .pet-cand .w span { font-size: 10.5px; color: #6B7280; } .pet-cand .w em { font-style: normal; color: #B45309; } .pet-cand .f { font-size: 10px; color: #A2A8B6; font-variant-numeric: tabular-nums; } .pet-cand .a { display: flex; gap: 5px; } .pet-cand .ad, .pet-cand .ig { font-size: 10px; font-weight: 600; border-radius: 5px; padding: 2px 8px; border: 1px solid transparent; } .pet-cand .ad { background: var(--primary); color: #fff; } .pet-cand .ig { background: #fff; color: #6B7280; border-color: var(--border); } .pet-card-f { padding: 6px 11px; font-size: 10px; color: #A2A8B6; } .shot-pet-input { border-top: 1px solid var(--hairline); padding: 10px 13px 11px; background: #FCFCFE; } .shot-pet-input .ph { color: #C4C8D2; font-size: 11.5px; } .shot-pet-input .tools { display: flex; align-items: center; gap: 7px; margin-top: 9px; } .shot-pet-input .tools span { font-size: 10px; color: #6B7280; border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; background: #fff; } .shot-pet-input .tools .on { background: #EEF0FF; color: #362FBE; border-color: rgba(79,70,229,.2); font-weight: 600; } .shot-pet-input .tools .send { margin-left: auto; background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; padding: 3px 14px; } /* 状态栏 */ .shot-status { display: flex; align-items: center; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--hairline); background: #FAFBFD; font-size: 10px; color: #9CA3AF; } .shot-status .path { font-family: var(--mono); color: #A2A8B6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; } .shot-status .okc { margin-left: auto; color: #047857; font-weight: 600; } .shot-note { position: relative; z-index: 1; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .32); margin-top: 22px; } /* 示意图有 min-width,窄屏下在自己的容器里横向滚动 —— 提示用户可滑动。 */ .scroll-hint { display: none; } /* ── 能力卡 ───────────────────────────────────────────── */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px 28px 32px; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(79, 70, 229, .22); } .card h3 { font-size: 18px; margin-bottom: 11px; letter-spacing: -0.02em; } .card p { color: var(--muted); font-size: 15px; line-height: 1.75; } .card-icon { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(150deg, #EEF0FF, #E3E5FF); border: 1px solid rgba(79, 70, 229, .14); color: var(--accent-fg); display: grid; place-items: center; margin-bottom: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); } .card-icon svg { width: 21px; height: 21px; display: block; } /* ── 下载区 ───────────────────────────────────────────── */ .dl { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; transition: box-shadow .35s var(--ease); } .dl:hover { box-shadow: var(--shadow-lg); } .dl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 30px 32px; border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, #FCFCFE, #FFFFFF); } .dl-os { display: flex; align-items: center; gap: 18px; } .dl-os > svg { width: 52px; height: 52px; padding: 13px; flex-shrink: 0; border-radius: 15px; color: var(--primary); background: linear-gradient(150deg, #EEF0FF, #E3E5FF); border: 1px solid rgba(79, 70, 229, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); } .dl-os-name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } .dl-os-sub { font-size: 13px; color: var(--muted); font-family: var(--mono); margin-top: 3px; word-break: break-all; } .dl-top .btn { margin-left: auto; } .dl-meta { display: grid; grid-template-columns: repeat(2, 1fr); } .dl-row { display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 14px 32px; border-bottom: 1px solid var(--hairline); font-size: 14.5px; align-items: baseline; } .dl-row dt { color: var(--muted); font-size: 13.5px; } .dl-row dd { margin: 0; word-break: break-word; } .dl-meta > .dl-row:nth-child(odd) { border-right: 1px solid var(--hairline); } .dl-hash { padding: 22px 32px 26px; } .dl-hash-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); margin-bottom: 11px; } .hashbox { display: flex; align-items: center; gap: 12px; background: #0B0C10; border-radius: var(--r); padding: 14px 16px; } .hashbox code { font-size: 12.5px; color: #A7F3D0; word-break: break-all; line-height: 1.7; flex: 1; min-width: 0; } .copybtn { flex-shrink: 0; height: 30px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; background: rgba(255, 255, 255, .07); font-family: inherit; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .78); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); } .copybtn:hover { background: rgba(255, 255, 255, .14); color: #fff; } .copybtn.ok { color: #6EE7B7; border-color: rgba(110, 231, 183, .4); } /* ── 提醒条 ───────────────────────────────────────────── */ .notice { display: flex; gap: 15px; border-radius: var(--r-lg); padding: 22px 24px; background: var(--todo-bg); border: 1px solid rgba(180, 83, 9, .18); font-size: 15px; line-height: 1.75; } .notice svg { width: 20px; height: 20px; color: var(--todo); flex-shrink: 0; margin-top: 4px; } .notice strong { color: #92400E; } .notice-info { background: var(--accent-bg); border-color: rgba(79, 70, 229, .16); } .notice-info svg { color: var(--primary); } .notice-info strong { color: var(--accent-fg); } /* ── 平台小标题 ───────────────────────────────────────── */ .plat-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; font-size: 20px; margin-bottom: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); } .plat-head svg { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; } .plat-note { font-size: 13.5px; font-weight: 500; color: var(--muted); } /* ── 步骤 ─────────────────────────────────────────────── */ .steps { display: grid; gap: 2px; counter-reset: step; } .step { display: grid; grid-template-columns: 38px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--hairline); } .step:last-child { border-bottom: none; } .step-n { counter-increment: step; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(150deg, #EEF0FF, #E3E5FF); border: 1px solid rgba(79, 70, 229, .16); color: var(--accent-fg); font-size: 14px; font-weight: 700; display: grid; place-items: center; } .step-n::before { content: counter(step); } .step h3 { font-size: 17px; margin-bottom: 7px; letter-spacing: -0.02em; } .step p { color: var(--muted); font-size: 15px; } .step .kbd { display: inline-block; margin: 4px 0; padding: 7px 12px; border-radius: 9px; background: #0B0C10; color: #A7F3D0; font-family: var(--mono); font-size: 12.5px; max-width: 100%; word-break: break-all; line-height: 1.7; } /* SmartScreen 示意(纯 CSS) */ .ss { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-md); max-width: 400px; font-size: 12.5px; } .ss-head { background: #0F4C81; color: #fff; padding: 13px 16px; font-size: 13px; font-weight: 600; } .ss-body { padding: 15px 16px; color: #4B5563; line-height: 1.75; } .ss-more { color: #1D4ED8; text-decoration: underline; font-weight: 600; } .ss-run { display: inline-block; margin-top: 12px; padding: 5px 14px; border: 1px solid #9CA3AF; border-radius: 4px; background: #F3F4F6; font-size: 12px; color: #0B0C10; } .ss-foot { border-top: 1px solid var(--hairline); padding: 11px 16px; text-align: right; } /* ── FAQ ──────────────────────────────────────────────── */ .faq { border-top: 1px solid var(--hairline); } .faq details { border-bottom: 1px solid var(--hairline); } .faq summary { padding: 24px 44px 24px 0; cursor: pointer; position: relative; font-size: 17.5px; font-weight: 600; list-style: none; letter-spacing: -0.015em; transition: color .2s var(--ease); } .faq summary:hover { color: var(--primary); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 10px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .3s var(--ease); } .faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .faq .ans { padding: 0 0 26px; color: var(--muted); font-size: 16px; line-height: 1.85; max-width: 74ch; } .faq .ans code { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; font-size: 13.5px; color: var(--fg-soft); } /* ── 反馈 ─────────────────────────────────────────────── */ .contact { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; } .qr { width: 190px; height: 190px; flex-shrink: 0; border: 1px dashed var(--border); border-radius: var(--r-lg); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: #9CA3AF; font-size: 13px; line-height: 1.6; padding: 14px; } .qr small { font-size: 11.5px; color: #C4C8D2; } .contact-text { flex: 1; min-width: 280px; } /* ── 页脚(深色,与首屏呼应)───────────────────────────── */ footer { background: var(--dark-bg); color: rgba(255, 255, 255, .52); padding: 56px 0 48px; font-size: 14.5px; border-top: 1px solid var(--dark-line); } .foot { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; } .foot strong { color: #fff; font-weight: 700; } .foot-links { display: flex; gap: 24px; margin-left: auto; } .foot-links a { color: rgba(255, 255, 255, .62); font-weight: 500; } .foot-links a:hover { color: #fff; text-decoration: none; } .foot-note { width: 100%; font-size: 13px; color: rgba(255, 255, 255, .30); line-height: 1.85; padding-top: 24px; margin-top: 8px; border-top: 1px solid var(--dark-line); } /* ── 法务页 ───────────────────────────────────────────── */ .legal { max-width: 780px; margin: 0 auto; padding: 122px 28px 110px; } .legal-back { font-size: 14px; color: var(--muted); font-weight: 500; } .legal-back:hover { color: var(--fg); text-decoration: none; } .legal article { margin-top: 10px; } .legal article h1 { font-size: clamp(28px, 5vw, 40px); margin-bottom: 22px; letter-spacing: -0.035em; } .legal article h2 { font-size: 22px; margin: 52px 0 14px; padding-top: 28px; border-top: 1px solid var(--hairline); } .legal article h3 { font-size: 17px; margin: 32px 0 10px; } .legal article p { margin: 15px 0; color: var(--fg-soft); } .legal article ul, .legal article ol { margin: 15px 0; padding-left: 24px; color: var(--fg-soft); } .legal article li { margin: 8px 0; } .legal article strong { color: var(--fg); } .legal article code { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; font-size: 13.5px; color: var(--fg-soft); } .legal article blockquote { margin: 20px 0; padding: 16px 20px; border-left: 3px solid rgba(79, 70, 229, .3); background: var(--bg-alt); border-radius: 0 var(--r) var(--r) 0; color: var(--muted); font-size: 14.5px; } .legal article blockquote p { margin: 5px 0; color: inherit; } .legal article hr { border: none; border-top: 1px solid var(--hairline); margin: 40px 0; } .legal-tablewrap { overflow-x: auto; margin: 20px 0; } .legal article table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 460px; } .legal article th, .legal article td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; vertical-align: top; } .legal article th { background: var(--bg-alt); font-weight: 600; } /* ── 响应式 ───────────────────────────────────────────── */ @media (max-width: 1000px) { .scroll-hint { display: inline; } .cards { grid-template-columns: repeat(2, 1fr); } .dl-meta { grid-template-columns: 1fr; } .dl-meta > .dl-row:nth-child(odd) { border-right: none; } } @media (max-width: 720px) { section { padding: 80px 0; } .section-head { margin-bottom: 40px; } .hero { padding-top: 128px; } .wrap { padding: 0 20px; } .navlinks { display: none; } .cards { grid-template-columns: 1fr; } .hero-lede, .section-lede { font-size: 16.5px; } .hero-cta .btn { flex: 1 1 100%; } .shot-stage { margin-top: 52px; padding-bottom: 64px; } .shot { min-width: 820px; } .dl-top { padding: 22px; } .dl-top .btn { margin-left: 0; width: 100%; } .dl-os > svg { width: 44px; height: 44px; padding: 11px; } .dl-row { grid-template-columns: 86px 1fr; padding: 12px 22px; font-size: 14px; } .dl-hash { padding: 18px 22px 22px; } .hashbox { flex-direction: column; align-items: stretch; } .copybtn { width: 100%; height: 34px; } .foot-links { margin-left: 0; width: 100%; } .legal { padding: 100px 20px 72px; } .step { grid-template-columns: 30px 1fr; gap: 14px; } } /* ── 无障碍:尊重「减少动画」 ─────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } .hero h1 .line > span { transform: none; opacity: 1; } .shot { transform: none; } } @media print { .topbar, .hero-cta, .copybtn { display: none; } .reveal { opacity: 1; transform: none; } }