diff --git a/docs/assets/site.css b/docs/assets/site.css index 9871d49..0ec84d1 100644 --- a/docs/assets/site.css +++ b/docs/assets/site.css @@ -1,9 +1,11 @@ /*! - * OSGKeyboard 主页设计系统（2026-10 动效版） - * 方向：Apple 式产品页 —— 深色产品舞台 + 实机画面优先 + 滚动叙事。 - * 动效母题：「声音变成文字」—— 声波、涟漪、逐字浮现、流式转写。 - * 主题跟随系统（site.js 可手动覆盖）；Hero / 隐私 / 下载区块在两种 - * 主题下都使用固定的深色「舞台」调色板，与新应用图标同一语言。 + * OSGKeyboard 主页设计系统（2026-10 亚克力版） + * 方向：整页是一套「亚克力键帽」—— 与应用图标同一种材质：乳白、半透、顶边高光、底边厚度、柔和弥散投影。 + * · 材质只有一种，分三档厚度：底板（页面）→ 面板（.acrylic 卡片）→ 键帽（.keycap 按钮 / .chip 标签）。 + * · 形状只有四档圆角：标签 10 / 按钮 14 / 卡片 24 / 大面板 32；嵌套时内圆角 = 外圆角 − 内边距。 + * · 品牌绿取自图标（#0B9019），只用于状态与指示，其余全部中性色。 + * 动效母题：「声音变成文字」—— 声波、逐字浮现、流式转写；另加一道跟随指针的亚克力反光。 + * 主题跟随系统（site.js 可手动覆盖），首屏与整页一起切换深浅。 * * 渐进增强约定：所有「先隐藏、再显现」的初始态都挂在 html.js 之下； * 无 JavaScript 或开启「减弱动态效果」时，页面以完整静态形态呈现。 @@ -14,37 +16,83 @@ * -------------------------------------------------------------------------- */ :root { color-scheme: light dark; - --canvas: #f3f5f7; - --surface: #ffffff; - --surface-soft: #eceff3; - --surface-strong: #e4e9ee; - --ink: #0f1214; - --ink-2: #55606a; - --ink-3: #8a939c; - --line: rgba(15, 18, 20, 0.09); - --line-strong: rgba(15, 18, 20, 0.16); - --accent: #2c8a52; - --accent-strong: #217142; - --accent-soft: rgba(44, 138, 82, 0.12); - /* 深色舞台：Hero / 隐私 / 下载共用，两种主题下保持一致 */ - --stage-1: #272d35; - --stage-2: #14171c; - --stage-3: #0c0e12; - --stage-ink: #f4f6f7; - --stage-ink-2: #a7b0b9; - --stage-line: rgba(255, 255, 255, 0.1); - --stage-accent: #6fc491; + + /* 底板：图标乳白（#F0F2F1）略提亮 */ + --canvas: #eff1f0; + --ink: #15181a; + --ink-2: #596067; + --ink-3: #8b9298; + --line: rgba(21, 24, 26, 0.08); + --line-strong: rgba(21, 24, 26, 0.14); + + /* 品牌绿：图标三个圆点的颜色；--accent-ink 用于小字，保证对比度 */ + --accent: #0f9124; + --accent-ink: #0c7a1f; + --accent-soft: rgba(15, 145, 36, 0.1); + + /* 底板背后的环境光：亚克力需要背后有东西才能透出质感 */ + --glow-1: rgba(255, 255, 255, 0.95); + --glow-2: rgba(178, 222, 192, 0.5); + --glow-3: rgba(196, 214, 232, 0.55); + + /* 面板：半透乳白 + 背景模糊；阴影四层 = 顶边高光 / 底边厚度 / 发丝描边 / 弥散投影 */ + --acrylic-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.6)); + --acrylic-edge: rgba(21, 24, 26, 0.07); + --acrylic-shadow: + inset 0 1px 0 rgba(255, 255, 255, 1), + inset 0 -1px 0 rgba(21, 24, 26, 0.04), + 0 0 0 1px var(--acrylic-edge), + 0 1px 2px rgba(21, 24, 26, 0.04), + 0 24px 48px -24px rgba(21, 24, 26, 0.18); + --acrylic-blur: blur(28px) saturate(1.6); + + /* 键帽：比面板更实；按下时内阴影加深、整体下沉 1px */ + --key-fill: linear-gradient(180deg, #ffffff, #eef0ef); + --key-shadow: + inset 0 1px 0 #fff, + inset 0 -2px 0 rgba(21, 24, 26, 0.06), + 0 0 0 1px rgba(21, 24, 26, 0.09), + 0 2px 3px rgba(21, 24, 26, 0.05), + 0 8px 18px -8px rgba(21, 24, 26, 0.22); + --key-shadow-hover: + inset 0 1px 0 #fff, + inset 0 -2px 0 rgba(21, 24, 26, 0.06), + 0 0 0 1px rgba(21, 24, 26, 0.11), + 0 3px 5px rgba(21, 24, 26, 0.06), + 0 14px 26px -10px rgba(21, 24, 26, 0.26); + --key-shadow-pressed: + inset 0 1px 2px rgba(21, 24, 26, 0.14), + 0 0 0 1px rgba(21, 24, 26, 0.1), + 0 1px 1px rgba(21, 24, 26, 0.05); + + /* 指针反光：亚克力表面跟随光标的一块高光 */ + --sheen: rgba(255, 255, 255, 0.75); + --sheen-edge: rgba(255, 255, 255, 0.95); + + /* 烟熏亚克力：整页唯一的深色时刻（隐私面板） */ + --smoke-fill: linear-gradient(165deg, rgba(34, 38, 41, 0.95), rgba(17, 19, 21, 0.97)); + --smoke-ink: #f2f4f3; + --smoke-ink-2: #a5adb3; + --smoke-line: rgba(255, 255, 255, 0.09); + --smoke-accent: #4fcb68; + + /* 磨砂颗粒：约 5% 的灰噪点，叠在面板最上层 */ + --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); + + --shadow-device: rgba(21, 24, 26, 0.24); + + /* 四档圆角 */ + --r-chip: 10px; + --r-btn: 14px; + --r-card: 24px; + --r-panel: 32px; + --content: min(1120px, calc(100vw - 48px)); - --radius-xl: 28px; - --radius-lg: 22px; - --radius-md: 14px; - --shadow-card: 0 28px 56px -28px rgba(16, 20, 24, 0.25); - --shadow-media: 0 32px 64px -32px rgba(16, 20, 24, 0.35); /* 动效令牌：统一的缓动曲线与时长，所有组件只引用这里 */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); - /* 物理弹簧（linear() 采样），用于需要「落定感」的元素：气泡、芯片、胶囊 */ + /* 物理弹簧（linear() 采样），用于需要「落定感」的元素：键帽、标签、胶囊 */ --ease-spring: linear( 0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, @@ -55,30 +103,81 @@ --dur-base: 0.5s; --dur-slow: 0.95s; - /* 嵌入式手机演示的配色（随主题切换） */ - - /* 键盘复刻色：取自 App 源码 ColorLibrary（brandAccent / aiTeal / recordRed）与原生键面色 */ + /* 键盘复刻色：取自 App 源码 ColorLibrary（brandAccent / aiTeal / recordRed），只用于首屏语音胶囊 */ --kb-accent: #3aa05a; --kb-teal: #2bafa4; --kb-red: #ff3b30; } html[data-theme="dark"] { - --canvas: #0e1013; - --surface: #16191d; - --surface-soft: #12151a; - --surface-strong: #20252b; - --ink: #f2f4f5; - --ink-2: #a4adb5; - --ink-3: #7c858d; - --line: rgba(255, 255, 255, 0.09); - --line-strong: rgba(255, 255, 255, 0.16); - --accent: #68bf8d; - --accent-strong: #7dcd9e; - --accent-soft: rgba(104, 191, 141, 0.14); - --shadow-card: 0 28px 56px -28px rgba(0, 0, 0, 0.6); - --shadow-media: 0 32px 64px -32px rgba(0, 0, 0, 0.65); + --canvas: #0e1011; + --ink: #eef1f0; + --ink-2: #a3abb1; + --ink-3: #79828a; + --line: rgba(255, 255, 255, 0.08); + --line-strong: rgba(255, 255, 255, 0.14); + --accent: #3ec45a; + --accent-ink: #5fd178; + --accent-soft: rgba(62, 196, 90, 0.14); + + --glow-1: rgba(255, 255, 255, 0.05); + --glow-2: rgba(62, 196, 90, 0.1); + --glow-3: rgba(90, 130, 170, 0.13); + + --acrylic-fill: linear-gradient(180deg, rgba(46, 50, 54, 0.64), rgba(28, 31, 34, 0.52)); + --acrylic-edge: rgba(255, 255, 255, 0.07); + --acrylic-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.09), + inset 0 -1px 0 rgba(0, 0, 0, 0.3), + 0 0 0 1px var(--acrylic-edge), + 0 24px 48px -24px rgba(0, 0, 0, 0.6); + + --key-fill: linear-gradient(180deg, #2d3135, #222528); + --key-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.1), + inset 0 -2px 0 rgba(0, 0, 0, 0.35), + 0 0 0 1px rgba(255, 255, 255, 0.07), + 0 8px 18px -8px rgba(0, 0, 0, 0.7); + --key-shadow-hover: + inset 0 1px 0 rgba(255, 255, 255, 0.12), + inset 0 -2px 0 rgba(0, 0, 0, 0.35), + 0 0 0 1px rgba(255, 255, 255, 0.1), + 0 14px 26px -10px rgba(0, 0, 0, 0.8); + --key-shadow-pressed: + inset 0 1px 3px rgba(0, 0, 0, 0.5), + 0 0 0 1px rgba(255, 255, 255, 0.06); + + --sheen: rgba(255, 255, 255, 0.07); + --sheen-edge: rgba(255, 255, 255, 0.28); + + /* 深色主题下底板已经是深色，烟熏面板略微提亮、带一点绿光，仍是整页最「重」的一块 */ + --smoke-fill: linear-gradient(165deg, rgba(40, 45, 48, 0.86), rgba(20, 23, 25, 0.9)); + + --shadow-device: rgba(0, 0, 0, 0.6); +} + +/* 支持连续曲率圆角的浏览器：换成与图标一致的「方圆」，半径相应放大以保持视觉大小 */ +@supports (corner-shape: squircle) { + :root { + --r-chip: 15px; + --r-btn: 21px; + --r-card: 38px; + --r-panel: 50px; + } + + .acrylic, + .acrylic-smoke, + .keycap, + .chip, + .language-button, + .nav-shell, + .nav-indicator, + .mobile-nav, + .media-inset, + .story-act { + corner-shape: squircle; + } } /* -------------------------------------------------------------------------- @@ -88,9 +187,10 @@ html[data-theme="dark"] { box-sizing: border-box; } +/* 底色挂在 html 上，body 保持透明，固定的环境光层（body::before）才能透出来 */ html { scroll-behavior: smooth; - scroll-padding-top: 84px; + scroll-padding-top: 96px; background: var(--canvas); } @@ -99,7 +199,6 @@ body { /* clip 不会生成滚动容器，滚动叙事的 position: sticky 才能正常工作 */ overflow-x: hidden; overflow-x: clip; - background: var(--canvas); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif; @@ -172,7 +271,7 @@ html[data-lang="zh"] h3 { top: 12px; left: 12px; padding: 9px 14px; - border-radius: 999px; + border-radius: var(--r-btn); background: var(--ink); color: var(--canvas); transform: translateY(-160%); @@ -216,52 +315,155 @@ html[data-lang="zh"] h3 { vertical-align: -0.28em; } -/* 页面滚动进度条：由 site.js 直接写 transform，避免每帧触发全局样式重算 */ -.scroll-progress { +/* -------------------------------------------------------------------------- + * 3. 底板：固定的环境光，滚动时面板「滑过」柔光，模糊才有东西可透 + * -------------------------------------------------------------------------- */ +body::before { position: fixed; - z-index: 60; - top: 0; - right: 0; - left: 0; - height: 2px; - background: linear-gradient(90deg, var(--stage-accent), #b5ecc9 60%, var(--stage-accent)); - box-shadow: 0 0 12px rgba(111, 196, 145, 0.6); + z-index: -1; + inset: 0; + background: + radial-gradient(55% 45% at 12% 6%, var(--glow-1), transparent 70%), + radial-gradient(45% 40% at 92% 30%, var(--glow-2), transparent 72%), + radial-gradient(55% 45% at 30% 100%, var(--glow-3), transparent 72%); + content: ""; + pointer-events: none; +} + +/* -------------------------------------------------------------------------- + * 4. 材质：面板 / 烟熏面板 / 键帽 / 标签 + * -------------------------------------------------------------------------- */ +.acrylic { + border-radius: var(--r-card); + background: var(--grain), var(--acrylic-fill); + box-shadow: var(--acrylic-shadow); + -webkit-backdrop-filter: var(--acrylic-blur); + backdrop-filter: var(--acrylic-blur); +} + +.acrylic-smoke { + --sheen: rgba(255, 255, 255, 0.06); + --sheen-edge: rgba(255, 255, 255, 0.3); + border-radius: var(--r-panel); + background: var(--grain), var(--smoke-fill); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.12), + inset 0 -1px 0 rgba(0, 0, 0, 0.4), + 0 0 0 1px rgba(0, 0, 0, 0.08), + 0 40px 80px -36px rgba(10, 14, 16, 0.55); + color: var(--smoke-ink); +} + +/* 键帽：所有按钮统一为圆角长方形（App Store 官方徽章除外） */ +.keycap { + display: inline-flex; + min-height: 48px; + align-items: center; + justify-content: center; + gap: 9px; + padding: 0 20px; + border: 0; + border-radius: var(--r-btn); + background: var(--key-fill); + box-shadow: var(--key-shadow); + color: var(--ink); + cursor: pointer; + font-size: 0.95rem; + font-weight: 600; + letter-spacing: -0.005em; + white-space: nowrap; + transition: box-shadow 0.25s ease, translate 0.25s var(--ease-out), transform 0.5s var(--ease-spring); +} + +.keycap:hover { + box-shadow: var(--key-shadow-hover); + translate: 0 -1px; +} + +.keycap:active { + box-shadow: var(--key-shadow-pressed); + translate: 0 1px; +} + +.keycap .i { + width: 17px; + height: 17px; + color: var(--ink-2); + transition: transform 0.5s var(--ease-spring); +} + +.keycap:hover .i { + transform: translate(2px, -2px); +} + +/* 标签：小一号的键帽，不可按，只有一层高光和发丝描边 */ +.chip { + display: inline-flex; + align-items: center; + gap: 7px; + padding: 7px 13px; + border-radius: var(--r-chip); + background: var(--key-fill); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.9), + 0 0 0 1px var(--line), + 0 4px 10px -6px rgba(21, 24, 26, 0.18); + color: var(--ink-2); + font-size: 0.86rem; + font-weight: 560; +} + +html[data-theme="dark"] .chip { + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.08), + 0 0 0 1px var(--line), + 0 4px 10px -6px rgba(0, 0, 0, 0.6); +} + +/* -------------------------------------------------------------------------- + * 5. 导航：悬浮的亚克力条 + * -------------------------------------------------------------------------- */ +/* 页面滚动进度：导航条底边的一根细线，由 site.js 直接写 transform */ +.scroll-progress { + position: absolute; + right: 18px; + bottom: 0; + left: 18px; + height: 1.5px; + border-radius: 2px; + background: var(--accent); + opacity: 0.7; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; } -/* -------------------------------------------------------------------------- - * 3. 导航 - * -------------------------------------------------------------------------- */ -/* Hero 是深色舞台：导航在页面顶部时按深色舞台配色，滚动后切换为主题色 */ .site-nav { position: fixed; z-index: 50; - top: 0; + top: 12px; right: 0; left: 0; - border-bottom: 1px solid transparent; - color: var(--stage-ink); - transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease; -} - -.site-nav.is-scrolled { - border-bottom-color: var(--line); - background: color-mix(in srgb, var(--canvas) 78%, transparent); - color: var(--ink); - -webkit-backdrop-filter: blur(20px) saturate(1.6); - backdrop-filter: blur(20px) saturate(1.6); + pointer-events: none; } .nav-shell { + position: relative; display: flex; width: var(--content); - height: 64px; + height: 58px; align-items: center; justify-content: space-between; - margin: 0 auto; gap: 24px; + margin: 0 auto; + padding: 0 10px 0 14px; + overflow: hidden; + border-radius: 18px; + background: var(--grain), var(--acrylic-fill); + box-shadow: var(--acrylic-shadow); + pointer-events: auto; + -webkit-backdrop-filter: var(--acrylic-blur); + backdrop-filter: var(--acrylic-blur); } .brand { @@ -274,9 +476,9 @@ html[data-lang="zh"] h3 { } .brand img { - width: 30px; - height: 30px; - border-radius: 8px; + width: 32px; + height: 32px; + filter: drop-shadow(0 3px 5px rgba(21, 24, 26, 0.16)); transition: transform var(--dur-base) var(--ease-spring); } @@ -295,26 +497,26 @@ html[data-lang="zh"] h3 { position: relative; z-index: 1; padding: 8px 14px; - border-radius: 999px; + color: var(--ink-2); font-size: 0.92rem; - opacity: 0.72; - transition: opacity 0.2s ease; + transition: color 0.2s ease; } .nav-links a:hover, .nav-links a.is-active { - opacity: 1; + color: var(--ink); } -/* 导航滑块：位置与宽度由 site.js 写入，弹簧曲线让它「跟手」 */ +/* 导航滑块：一颗小键帽，位置与宽度由 site.js 写入，弹簧曲线让它「跟手」 */ .nav-indicator { position: absolute; top: 50%; left: 0; width: var(--iw, 0px); - height: 34px; - border-radius: 999px; - background: color-mix(in srgb, currentColor 11%, transparent); + height: 36px; + border-radius: var(--r-chip); + background: var(--key-fill); + box-shadow: var(--key-shadow); opacity: 0; pointer-events: none; transform: translate3d(var(--ix, 0px), -50%, 0); @@ -329,9 +531,10 @@ html[data-lang="zh"] h3 { .nav-actions { display: flex; align-items: center; - gap: 8px; + gap: 6px; } +/* 图标按钮保持圆形；语言按钮是文字按钮，与其他按钮一样用圆角长方形 */ .icon-button, .language-button { display: inline-grid; @@ -341,14 +544,20 @@ html[data-lang="zh"] h3 { justify-content: center; padding: 0; border: 0; - border-radius: 999px; background: transparent; + color: var(--ink-2); cursor: pointer; - opacity: 0.78; - transition: opacity 0.2s ease, background 0.2s ease, transform 0.4s var(--ease-spring); + transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, + transform 0.4s var(--ease-spring); +} + +.icon-button { + border-radius: 50%; } .language-button { + padding: 0 10px; + border-radius: var(--r-chip); font-size: 0.82rem; font-weight: 650; letter-spacing: 0.02em; @@ -356,13 +565,14 @@ html[data-lang="zh"] h3 { .icon-button:hover, .language-button:hover { - background: color-mix(in srgb, currentColor 9%, transparent); - opacity: 1; + background: var(--key-fill); + box-shadow: var(--key-shadow); + color: var(--ink); } .icon-button:active, .language-button:active { - transform: scale(0.9); + transform: scale(0.92); } .icon-button .i { @@ -384,7 +594,7 @@ html[data-lang="zh"] h3 { } /* -------------------------------------------------------------------------- - * 4. Hero —— 深色产品舞台 + * 6. Hero：乳白（或烟熏）底板上的一颗亚克力键帽 * -------------------------------------------------------------------------- */ .hero { position: relative; @@ -392,17 +602,13 @@ html[data-lang="zh"] h3 { min-height: 100svh; flex-direction: column; align-items: center; - padding: 136px 0 0; + padding: 128px 0 0; overflow: hidden; isolation: isolate; - background: - radial-gradient(120% 90% at 50% 110%, rgba(111, 196, 145, 0.14), transparent 55%), - linear-gradient(180deg, var(--stage-1) 0%, var(--stage-2) 52%, var(--stage-3) 100%); - color: var(--stage-ink); text-align: center; } -/* 背景层：极光 + 声波涟漪 + 点阵 + 指针光斑 */ +/* 背景层：柔光 + 声波涟漪 + 指针光斑 */ .hero-backdrop { position: absolute; z-index: -1; @@ -414,38 +620,37 @@ html[data-lang="zh"] h3 { .aurora { position: absolute; border-radius: 50%; - filter: blur(70px); - mix-blend-mode: screen; - opacity: 0.6; + filter: blur(80px); + opacity: 0.9; will-change: transform; } .aurora-a { - top: -220px; - left: calc(50% - 640px); + top: -240px; + left: calc(50% - 680px); width: 640px; height: 640px; - background: radial-gradient(circle, rgba(111, 196, 145, 0.5), transparent 66%); - animation: aurora-a 24s ease-in-out infinite alternate; + background: radial-gradient(circle, var(--glow-2), transparent 66%); + animation: aurora-a 26s ease-in-out infinite alternate; } .aurora-b { - top: 40px; - right: calc(50% - 660px); - width: 560px; - height: 560px; - background: radial-gradient(circle, rgba(70, 150, 190, 0.42), transparent 66%); - animation: aurora-b 28s ease-in-out infinite alternate; + top: 60px; + right: calc(50% - 700px); + width: 580px; + height: 580px; + background: radial-gradient(circle, var(--glow-3), transparent 66%); + animation: aurora-b 30s ease-in-out infinite alternate; } .aurora-c { - bottom: -220px; + top: 26%; left: 50%; - width: 900px; - height: 460px; - margin-left: -450px; - background: radial-gradient(closest-side, rgba(111, 196, 145, 0.32), transparent); - animation: aurora-c 19s ease-in-out infinite alternate; + width: 760px; + height: 420px; + margin-left: -380px; + background: radial-gradient(closest-side, var(--glow-1), transparent); + animation: aurora-c 21s ease-in-out infinite alternate; } @keyframes aurora-a { @@ -461,51 +666,43 @@ html[data-lang="zh"] h3 { } @keyframes aurora-c { - 0% { transform: translate3d(-80px, 0, 0) scale(1); } - 100% { transform: translate3d(80px, -40px, 0) scale(1.12); } + 0% { transform: translate3d(-60px, 0, 0) scale(1); } + 100% { transform: translate3d(60px, -30px, 0) scale(1.1); } } -/* 声波涟漪：三圈错相扩散，像一次持续的「开口」 */ +/* 声波涟漪：三圈错相扩散，像一次持续的「开口」；中性色，只做气氛 */ .hero-rings i { position: absolute; - top: 36%; + top: 24%; left: 50%; - width: 560px; - height: 560px; - margin: -280px 0 0 -280px; - border: 1px solid rgba(111, 196, 145, 0.28); + width: 520px; + height: 520px; + margin: -260px 0 0 -260px; + border: 1px solid var(--line-strong); border-radius: 50%; opacity: 0; - animation: ring-pulse 7.5s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; + animation: ring-pulse 8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; } -.hero-rings i:nth-child(2) { animation-delay: 2.5s; } -.hero-rings i:nth-child(3) { animation-delay: 5s; } +.hero-rings i:nth-child(2) { animation-delay: 2.66s; } +.hero-rings i:nth-child(3) { animation-delay: 5.33s; } @keyframes ring-pulse { - 0% { opacity: 0; transform: scale(0.3); } + 0% { opacity: 0; transform: scale(0.25); } 14% { opacity: 0.9; } 100% { opacity: 0; transform: scale(2); } } -.hero-grid { - position: absolute; - inset: 0; - background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px); - background-size: 28px 28px; - -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 28%, #000 25%, transparent 75%); - mask-image: radial-gradient(ellipse 70% 55% at 50% 28%, #000 25%, transparent 75%); -} - -/* 指针光斑：--hx / --hy 由 site.js 以插值方式写入，移动有「拖尾」 */ +/* 指针光斑：--hx / --hy 由 site.js 以插值方式写入，像一盏灯照在亚克力上 */ .hero-spot { position: absolute; inset: 0; background: radial-gradient( - 560px circle at var(--hx, 50%) var(--hy, 30%), - rgba(111, 196, 145, 0.13), + 520px circle at var(--hx, 50%) var(--hy, 26%), + var(--sheen), transparent 62% ); + opacity: 0.8; } /* 文字层随滚动轻微上移淡出（--hp 为 Hero 滚动进度 0 → 1） */ @@ -516,66 +713,96 @@ html[data-lang="zh"] h3 { transform: translate3d(0, calc(var(--hp, 0) * -70px), 0); } -.launch-pill { - display: inline-flex; - align-items: center; - gap: 9px; - margin-bottom: 26px; - padding: 8px 16px; - border: 1px solid var(--stage-line); - border-radius: 999px; - background: rgba(255, 255, 255, 0.06); - -webkit-backdrop-filter: blur(12px); - backdrop-filter: blur(12px); - color: var(--stage-ink-2); - font-size: 0.82rem; - font-weight: 550; - letter-spacing: 0.01em; +/* 主视觉的第一眼：放大的应用图标，本身就是一颗亚克力键帽；缓慢悬浮，一道反光定期扫过 */ +.hero-mark { + position: relative; + width: 96px; + height: 96px; + margin: 0 auto 26px; } +.hero-mark img { + width: 100%; + height: 100%; + filter: drop-shadow(0 18px 22px rgba(21, 24, 26, 0.16)) drop-shadow(0 4px 6px rgba(21, 24, 26, 0.1)); + animation: mark-float 7s ease-in-out infinite; +} + +/* 反光只落在图标自身的形状里（用图标本身做遮罩） */ +.hero-mark::after { + position: absolute; + inset: 0; + background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%); + background-size: 300% 100%; + content: ""; + -webkit-mask: url("app-icon.png?v=20260927b") center / contain no-repeat; + mask: url("app-icon.png?v=20260927b") center / contain no-repeat; + mix-blend-mode: soft-light; + animation: mark-float 7s ease-in-out infinite, mark-sheen 7s ease-in-out infinite; +} + +@keyframes mark-float { + 0%, 100% { translate: 0 0; rotate: 0deg; } + 50% { translate: 0 -7px; rotate: -2deg; } +} + +@keyframes mark-sheen { + 0%, 55% { background-position: 100% 0; } + 80%, 100% { background-position: 0 0; } +} + +html[data-theme="dark"] .hero-mark img { + filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.06)); +} + +.launch-pill { + margin-bottom: 20px; + font-size: 0.8rem; +} + +/* 版本标签上的绿点：整屏唯一的绿色，表示「已上线」 */ .launch-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; - background: var(--stage-accent); - box-shadow: 0 0 12px rgba(111, 196, 145, 0.9); + background: var(--accent); } .launch-dot::after { position: absolute; inset: 0; border-radius: 50%; - background: var(--stage-accent); + background: var(--accent); content: ""; animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes ping { - 0% { opacity: 0.8; transform: scale(1); } + 0% { opacity: 0.7; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(3); } } -/* H1 承载品类关键词；视觉上是一行流光小标，主口号在其下方 */ +/* H1 承载品类关键词；视觉上是一行小标，一道银色反光缓慢扫过 */ .hero-kicker { - margin: 0 auto 18px; + margin: 0 auto 16px; background: linear-gradient( 100deg, - var(--stage-accent) 0%, - var(--stage-accent) 38%, - #e2f7ea 50%, - var(--stage-accent) 62%, - var(--stage-accent) 100% + var(--ink-2) 0%, + var(--ink-2) 40%, + var(--ink-3) 50%, + var(--ink-2) 60%, + var(--ink-2) 100% ); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; - font-size: clamp(0.92rem, 1.4vw, 1.06rem); - font-weight: 650; - letter-spacing: 0.04em; + font-size: clamp(0.9rem, 1.3vw, 1.02rem); + font-weight: 600; + letter-spacing: 0.03em; line-height: 1.5; - animation: shimmer 6.5s linear infinite; + animation: shimmer 7s linear infinite; } @keyframes shimmer { @@ -584,33 +811,32 @@ html[data-lang="zh"] h3 { } .hero-slogan { - margin: 0 0 24px; + margin: 0 0 22px; } .slogan-main { display: block; - font-size: clamp(3rem, 7.6vw, 5.7rem); - font-weight: 700; + font-size: clamp(2.9rem, 7.2vw, 5.4rem); + font-weight: 680; letter-spacing: -0.045em; - line-height: 1.02; - text-shadow: 0 0 60px rgba(111, 196, 145, 0.18); + line-height: 1.04; } .slogan-sub { display: block; - margin-top: 14px; - color: var(--stage-ink-2); - font-size: clamp(1.35rem, 2.8vw, 2.1rem); - font-weight: 600; + margin-top: 12px; + color: var(--ink-2); + font-size: clamp(1.3rem, 2.6vw, 1.95rem); + font-weight: 560; letter-spacing: -0.02em; line-height: 1.25; } .hero-copy { - max-width: 640px; - margin: 0 auto 34px; - color: var(--stage-ink-2); - font-size: 1.08rem; + max-width: 620px; + margin: 0 auto 32px; + color: var(--ink-2); + font-size: 1.06rem; line-height: 1.7; } @@ -619,18 +845,19 @@ html[data-lang="zh"] h3 { align-items: center; justify-content: center; flex-wrap: wrap; - gap: 18px; - margin-bottom: 28px; + gap: 14px; + margin-bottom: 26px; } +/* App Store / Mac 官方徽章：按 Apple 营销规范原样使用，只加一层悬停浮起 */ .store-badge { display: inline-flex; - border-radius: 12px; + border-radius: 10px; transition: transform 0.5s var(--ease-spring), filter 0.3s ease; } .store-badge:hover { - filter: drop-shadow(0 10px 24px rgba(111, 196, 145, 0.25)); + filter: drop-shadow(0 10px 18px rgba(21, 24, 26, 0.22)); } .store-badge img { @@ -638,59 +865,15 @@ html[data-lang="zh"] h3 { height: 48px; } -.ghost-action { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 12px 22px; - border: 1px solid var(--stage-line); - border-radius: 999px; - background: rgba(255, 255, 255, 0.06); - color: var(--stage-ink); - font-size: 0.95rem; - font-weight: 600; - transition: background 0.25s ease, border-color 0.25s ease, transform 0.5s var(--ease-spring); -} - -.ghost-action:hover { - border-color: rgba(111, 196, 145, 0.45); - background: rgba(111, 196, 145, 0.12); -} - -.ghost-action .i { - width: 17px; - height: 17px; - transition: transform 0.5s var(--ease-spring); -} - -.ghost-action:hover .i { - transform: translate(3px, -3px) rotate(-8deg); -} - -.text-action { - color: var(--stage-ink-2); - font-size: 0.95rem; - font-weight: 550; - text-decoration: underline; - text-decoration-color: var(--stage-line); - text-underline-offset: 5px; - transition: color 0.2s ease, text-decoration-color 0.2s ease; -} - -.text-action:hover { - color: var(--stage-ink); - text-decoration-color: var(--stage-accent); -} - .hero-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; - gap: 10px 28px; - margin: 0 0 44px; + gap: 10px 26px; + margin: 0 0 40px; padding: 0; - color: var(--stage-ink-2); + color: var(--ink-3); font-size: 0.86rem; list-style: none; } @@ -704,7 +887,6 @@ html[data-lang="zh"] h3 { .hero-trust .i { width: 16px; height: 16px; - color: var(--stage-accent); } /* 主视觉舞台：透视容器，内部设备图随滚动从后仰 14° 立到正视 */ @@ -724,10 +906,14 @@ html[data-lang="zh"] h3 { .hero-devices img { width: 100%; height: auto; - filter: drop-shadow(0 48px 80px rgba(0, 0, 0, 0.5)); + filter: drop-shadow(0 40px 60px var(--shadow-device)); } -/* 语音胶囊：毛玻璃深色药丸，悬浮在 Mac 屏幕下沿 */ +/* + * 语音胶囊：一块悬浮的亚克力面板（圆角长方形），里面的麦克风胶囊与键盘真实组件同色同形。 + * 待机 = 品牌绿 + 麦克风；录音 = 红色 + 7 条声波；长按问 AI = 青色 + 声波； + * 处理中 = 半透明红 + 转圈；插入成功 = 品牌绿 + 对勾。状态类由 site.js 切换。 + */ .voice-capsule { position: absolute; z-index: 2; @@ -737,22 +923,11 @@ html[data-lang="zh"] h3 { max-width: 92%; align-items: center; gap: 14px; - padding: 9px 22px 9px 10px; - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 999px; - background: rgba(14, 16, 19, 0.74); - -webkit-backdrop-filter: blur(18px) saturate(1.6); - backdrop-filter: blur(18px) saturate(1.6); - box-shadow: 0 28px 60px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08); - color: var(--stage-ink); + padding: 9px 20px 9px 9px; + border-radius: 18px; translate: -50% 0; } -/* - * 麦克风胶囊：与键盘真实组件同色同形（156×60pt 的胶囊按比例缩小）。 - * 待机 = 品牌绿 + 麦克风；录音 = 红色 + 7 条声波；长按问 AI = 青色 + 声波； - * 处理中 = 半透明红 + 转圈；插入成功 = 品牌绿 + 对勾。状态类由 site.js 切换。 - */ .capsule-mic { position: relative; display: grid; @@ -819,14 +994,10 @@ html[data-lang="zh"] h3 { } /* 声波条：site.js 每帧写 scaleY，只动 transform，不触发布局 */ -.capsule-wave, -.mic-wave { - display: flex; - align-items: center; -} - .capsule-wave { + display: flex; height: 16px; + align-items: center; gap: 2.5px; } @@ -834,7 +1005,7 @@ html[data-lang="zh"] h3 { width: 2.5px; height: 100%; border-radius: 2px; - background: #ffc7c7; + background: #ffd6d6; transform: scaleY(0.14); } @@ -843,8 +1014,7 @@ html[data-lang="zh"] h3 { } /* 系统风格的转圈：处理中状态 */ -.capsule-spin, -.mic-spin { +.capsule-spin { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, 0.35); @@ -869,20 +1039,20 @@ html[data-lang="zh"] h3 { .capsule-tag { flex: none; - padding: 3px 10px; - border-radius: 999px; - background: rgba(111, 196, 145, 0.16); - color: var(--stage-accent); + padding: 3px 9px; + border-radius: 7px; + background: var(--line); + color: var(--ink-2); font-size: 0.74rem; - font-weight: 700; - letter-spacing: 0.04em; + font-weight: 650; + letter-spacing: 0.03em; transition: background 0.3s ease, color 0.3s ease; } /* 标签颜色跟随胶囊状态：问 AI 用青色，与麦克风胶囊呼应 */ .voice-capsule:is(.is-ai, .is-ai-busy) .capsule-tag { - background: color-mix(in srgb, var(--kb-teal) 22%, transparent); - color: #7fded4; + background: color-mix(in srgb, var(--kb-teal) 16%, transparent); + color: color-mix(in srgb, var(--kb-teal) 70%, var(--ink)); } .capsule-line { @@ -898,7 +1068,7 @@ html[data-lang="zh"] h3 { flex: none; margin-left: 1px; border-radius: 1px; - background: var(--stage-accent); + background: var(--ink-2); vertical-align: -0.18em; animation: caret-blink 1.05s steps(1) infinite; } @@ -907,6 +1077,7 @@ html[data-lang="zh"] h3 { 50% { opacity: 0; } } +/* 向下滚动提示：圆角长方形的「鼠标」轮廓 */ .scroll-cue { position: absolute; z-index: 3; @@ -917,8 +1088,8 @@ html[data-lang="zh"] h3 { height: 38px; justify-items: center; padding-top: 7px; - border: 1.5px solid rgba(255, 255, 255, 0.28); - border-radius: 999px; + border: 1.5px solid var(--line-strong); + border-radius: 12px; opacity: calc(1 - var(--hp, 0) * 4); } @@ -926,7 +1097,7 @@ html[data-lang="zh"] h3 { width: 3px; height: 8px; border-radius: 3px; - background: var(--stage-ink); + background: var(--ink-3); animation: cue 2s var(--ease-in-out) infinite; } @@ -956,7 +1127,7 @@ html.js .voice-capsule { } /* -------------------------------------------------------------------------- - * 5. 逐字动效（data-split） + * 7. 逐字动效（data-split） * site.js 把文字拆成 .w（词，防止英文断词）与 .ch（字符）， * 每个字符带 --ci 序号，延迟 = 基础延迟 + 序号 × 步长。 * -------------------------------------------------------------------------- */ @@ -980,8 +1151,8 @@ html.js .hero-slogan .ch { animation-delay: calc(var(--base, 0.2s) + var(--ci) * var(--step, 45ms)); } -.slogan-main { --base: 0.22s; --step: 52ms; } -.slogan-sub { --base: 0.52s; --step: 24ms; } +.slogan-main { --base: 0.3s; --step: 52ms; } +.slogan-sub { --base: 0.6s; --step: 24ms; } @keyframes char-in { from { opacity: 0; filter: blur(10px); transform: translateY(0.55em) rotate(3deg); } @@ -1004,21 +1175,19 @@ html.js .reveal.is-visible [data-split] .ch { } /* -------------------------------------------------------------------------- - * 6. 能力跑马灯 + * 8. 能力跑马灯：一行安静的中性色小字 * -------------------------------------------------------------------------- */ .marquee { overflow: hidden; - padding: 12px 0; - border-bottom: 1px solid var(--line); - background: var(--canvas); - -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); - mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); + padding: 14px 0; + -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); + mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; width: max-content; - animation: marquee 52s linear infinite; + animation: marquee 56s linear infinite; } .marquee:hover .marquee-track { @@ -1039,22 +1208,21 @@ html.js .reveal.is-visible [data-split] .ch { padding-right: 16px; color: var(--ink-3); font-size: clamp(0.6rem, 0.9vw, 0.72rem); - font-weight: 650; - letter-spacing: -0.01em; + font-weight: 600; + letter-spacing: 0.01em; white-space: nowrap; } .marquee li:nth-child(-n + 3) { - color: var(--ink); + color: var(--ink-2); } .marquee li::after { width: 4px; height: 4px; border-radius: 50%; - background: var(--accent); + background: var(--line-strong); content: ""; - opacity: 0.55; } @keyframes marquee { @@ -1062,14 +1230,10 @@ html.js .reveal.is-visible [data-split] .ch { } /* -------------------------------------------------------------------------- - * 7. 通用区块节奏 + * 9. 区块节奏：所有区块共用同一块底板，靠留白而不是色带分隔 * -------------------------------------------------------------------------- */ .section { - padding: clamp(88px, 11vw, 136px) 0; -} - -.section-alt { - background: var(--surface-soft); + padding: clamp(80px, 10vw, 128px) 0; } .section-inner { @@ -1079,29 +1243,29 @@ html.js .reveal.is-visible [data-split] .ch { .eyebrow { margin-bottom: 14px; - color: var(--accent); - font-size: 0.82rem; + color: var(--ink-3); + font-size: 0.8rem; font-weight: 650; - letter-spacing: 0.06em; + letter-spacing: 0.08em; } h2 { margin-bottom: 18px; - font-size: clamp(1.9rem, 3.8vw, 2.8rem); - font-weight: 700; - letter-spacing: -0.024em; + font-size: clamp(1.9rem, 3.7vw, 2.75rem); + font-weight: 680; + letter-spacing: -0.026em; line-height: 1.14; } h3 { - font-size: 1.12rem; - font-weight: 650; + font-size: 1.1rem; + font-weight: 640; letter-spacing: -0.01em; } .center-heading { max-width: 700px; - margin: 0 auto clamp(48px, 6vw, 72px); + margin: 0 auto clamp(44px, 6vw, 68px); text-align: center; } @@ -1110,24 +1274,18 @@ h3 { font-size: 1.05rem; } -/* 分栏布局：文案 + 媒体 */ +/* 分栏布局：文案 + 真机 */ .split-layout { display: grid; align-items: center; gap: clamp(40px, 6vw, 88px); - grid-template-columns: 1.02fr 1fr; -} - -/* 账号段落只保留文字，限制行宽保证可读性 */ -.account-layout .feature-copy { - max-width: 760px; + grid-template-columns: 1.05fr 1fr; } .split-layout.reverse .feature-copy { order: 2; } -.split-layout.reverse .media-frame, .split-layout.reverse .device-stage { order: 1; } @@ -1145,124 +1303,18 @@ h3 { font-size: 0.92rem; } -/* 实机媒体框：边框 + 定向长投影，呼应 iOS 端 2.1 的卡片层次 */ -.media-frame { +/* 嵌在面板里的小画面（截图 / 录屏）：同心圆角 = 卡片圆角 − 内边距 */ +.media-inset { overflow: hidden; - border: 1px solid var(--line); - border-radius: var(--radius-lg); - background: var(--surface-strong); - box-shadow: var(--shadow-media); -} - -.media-frame video, -.media-frame img { - width: 100%; - height: auto; + border-radius: calc(var(--r-card) - 12px); + background: var(--canvas); + box-shadow: 0 0 0 1px var(--line); } /* -------------------------------------------------------------------------- - * 8. 四种输入方式速览 - * -------------------------------------------------------------------------- */ -.ways-section { - padding: clamp(64px, 8vw, 96px) 0; -} - -.ways-grid { - display: grid; - gap: 16px; - grid-template-columns: repeat(4, 1fr); -} - -.way-card { - display: block; - padding: 26px 24px 24px; - border: 1px solid var(--line); - border-radius: var(--radius-lg); - background: var(--surface); - transition: transform 0.5s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease; -} - -.way-card:hover { - border-color: var(--line-strong); - box-shadow: var(--shadow-card); -} - -.way-icon { - position: relative; - display: inline-grid; - width: 46px; - height: 46px; - margin-bottom: 18px; - place-items: center; - border-radius: 14px; - background: var(--accent-soft); - color: var(--accent); -} - -.way-icon .i { - width: 23px; - height: 23px; -} - -/* 图标微动效：每张卡片一个与功能对应的小动作 */ -.way-icon-mic::after { - position: absolute; - inset: 0; - border: 1.5px solid var(--accent); - border-radius: inherit; - content: ""; - opacity: 0; -} - -.way-card:hover .way-icon-mic::after { - animation: orb-ripple 1.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; -} - -.way-card:hover .way-icon-sparkle .i { - animation: twinkle 0.9s var(--ease-spring); -} - -.way-card:hover .way-icon-bubble .i { - animation: bob 0.9s var(--ease-spring); -} - -.way-card:hover .way-icon-paste .i { - animation: drop 0.9s var(--ease-spring); -} - -@keyframes twinkle { - 0% { transform: scale(1) rotate(0); } - 40% { transform: scale(0.7) rotate(-40deg); } - 100% { transform: scale(1) rotate(0); } -} - -@keyframes bob { - 0% { transform: translateY(0); } - 35% { transform: translateY(-5px) rotate(-6deg); } - 100% { transform: translateY(0); } -} - -@keyframes drop { - 0% { transform: translateY(0); } - 35% { transform: translateY(4px) scale(0.92); } - 100% { transform: translateY(0); } -} - -.way-card h3 { - margin-bottom: 6px; -} - -.way-card p { - margin: 0; - color: var(--ink-2); - font-size: 0.92rem; - line-height: 1.55; -} - -/* -------------------------------------------------------------------------- - * 9. 滚动叙事（三幕剧） + * 10. 滚动叙事（四幕） * 滚动进度决定当前幕；手机里播放这一幕的真机录屏，幕内进度条跟随播放进度（--ap）。 - * 无 JavaScript 时三幕文案平铺，手机停在第一幕的首帧。 + * 无 JavaScript 时四幕文案平铺，手机停在第一幕的首帧。 * -------------------------------------------------------------------------- */ .story-section { padding-bottom: 0; @@ -1274,7 +1326,7 @@ h3 { .story { position: relative; - height: 430vh; + height: 520vh; } .story-sticky { @@ -1284,7 +1336,7 @@ h3 { height: 100vh; height: 100svh; align-items: center; - padding-top: 64px; + padding-top: 70px; } .story-layout { @@ -1299,36 +1351,44 @@ h3 { .story-acts { display: grid; max-width: 540px; - gap: 12px; + gap: 8px; margin: 0; padding: 0; list-style: none; } +/* 未激活的幕只是文字；激活的幕浮起成一块亚克力面板 */ .story-act { display: flex; - gap: 22px; - padding: 22px 24px; - border-radius: var(--radius-lg); - opacity: 0.36; + gap: 20px; + padding: 18px 22px; + border-radius: var(--r-card); + opacity: 0.42; transition: opacity 0.5s ease, background 0.5s ease, box-shadow 0.5s ease, transform 0.7s var(--ease-out); } .story-act.is-active { - background: var(--surface); - box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); + background: var(--grain), var(--acrylic-fill); + box-shadow: var(--acrylic-shadow); opacity: 1; transform: translateX(6px); + -webkit-backdrop-filter: var(--acrylic-blur); + backdrop-filter: var(--acrylic-blur); } .act-index { - padding-top: 3px; - color: var(--accent); - font-size: 0.82rem; + padding-top: 2px; + color: var(--ink-3); + font-size: 0.8rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.04em; + transition: color 0.4s ease; +} + +.story-act.is-active .act-index { + color: var(--accent-ink); } .act-body { @@ -1336,31 +1396,37 @@ h3 { } .act-kicker { - margin: 0 0 6px; - color: var(--accent); - font-size: 0.8rem; - font-weight: 700; + margin: 0 0 4px; + color: var(--ink-3); + font-size: 0.78rem; + font-weight: 650; letter-spacing: 0.06em; } .act-body h3 { - margin-bottom: 8px; - font-size: clamp(1.22rem, 2vw, 1.55rem); + margin-bottom: 6px; + font-size: clamp(1.16rem, 1.8vw, 1.42rem); letter-spacing: -0.02em; } .act-body > p:not(.act-kicker) { margin: 0; color: var(--ink-2); - font-size: 0.97rem; + font-size: 0.95rem; } -/* 幕内进度条：--ap 由 site.js 写入（0 → 1） */ +/* 未激活的幕收起正文，只留标题，四幕才放得进一屏 */ +html.js .story-act:not(.is-active) .act-body > p:not(.act-kicker), +html.js .story-act:not(.is-active) .act-bar { + display: none; +} + +/* 幕内进度条：--ap 由 site.js 写入（0 → 1）；绿色只用在这根指示线上 */ .act-bar { display: block; overflow: hidden; height: 2px; - margin-top: 16px; + margin-top: 14px; border-radius: 2px; background: var(--line); } @@ -1374,27 +1440,28 @@ h3 { transition: transform 0.3s linear; } -/* 舞台：真机 + 背后呼吸光晕 */ +/* 舞台：真机 + 背后一团呼吸的白光 */ .story-device { position: relative; display: grid; place-items: center; } -.story-device::before { +.story-device::before, +.device-stage::before { position: absolute; - width: 140%; - height: 80%; + width: 130%; + height: 76%; border-radius: 50%; - background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent); + background: radial-gradient(closest-side, var(--glow-1), transparent); content: ""; filter: blur(30px); animation: device-glow 6s ease-in-out infinite; } @keyframes device-glow { - 0%, 100% { opacity: 0.45; transform: scale(1); } - 50% { opacity: 0.85; transform: scale(1.08); } + 0%, 100% { opacity: 0.6; transform: scale(1); } + 50% { opacity: 1; transform: scale(1.06); } } /* -------------------------------------------------------------------------- @@ -1407,7 +1474,7 @@ h3 { position: relative; width: var(--w); aspect-ratio: 1350 / 2760; - filter: drop-shadow(0 40px 48px rgba(8, 12, 16, 0.26)) drop-shadow(0 12px 16px rgba(8, 12, 16, 0.14)); + filter: drop-shadow(0 40px 48px var(--shadow-device)) drop-shadow(0 12px 16px rgba(8, 12, 16, 0.12)); } .iphone-screen { @@ -1449,6 +1516,7 @@ h3 { /* 分栏区块里的真机：与文案并排居中 */ .device-stage { + position: relative; display: grid; margin: 0; place-items: center; @@ -1459,97 +1527,67 @@ h3 { } /* -------------------------------------------------------------------------- - * 10. 数字带 + * 11. 嘴替输入法：三块面板 * -------------------------------------------------------------------------- */ -.numbers-section { - padding: clamp(64px, 8vw, 104px) 0; -} - -.numbers-grid { +.personal-grid { display: grid; - gap: 28px; - grid-template-columns: repeat(4, 1fr); + gap: 20px; + grid-template-columns: repeat(3, 1fr); } -.number { - position: relative; - padding-top: 24px; +.personal-card { + display: flex; + flex-direction: column; + padding: 12px; } -/* 顶部细线随进场从左向右「画」出 */ -.number::before { - position: absolute; - top: 0; - right: 0; - left: 0; - height: 1px; - background: linear-gradient(90deg, var(--accent), var(--line-strong) 40%); - content: ""; - transform-origin: 0 50%; - transition: transform 1.3s var(--ease-out) var(--d, 0s); +/* 截图本身就是一张带底色的卡片：完整显示（contain），像一张小卡片浮在面板里 */ +.personal-media { + display: grid; + aspect-ratio: 4 / 3; + place-items: center; + padding: 14px; } -html.js .number:not(.is-visible)::before { - transform: scaleX(0); +.personal-media img { + width: 100%; + height: 100%; + object-fit: contain; + filter: drop-shadow(0 8px 14px rgba(21, 24, 26, 0.1)); + transition: transform 1.2s var(--ease-out); } -.number strong { - display: block; - margin-bottom: 12px; - background: linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--ink) 50%, var(--accent))); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - font-size: clamp(2.4rem, 4.8vw, 3.7rem); - font-variant-numeric: tabular-nums; - font-weight: 700; - letter-spacing: -0.045em; - line-height: 1; +.personal-media.is-video { + padding: 0; } -.number span { - display: block; - max-width: 24ch; +.personal-media video { + width: 100%; + height: 100%; + object-fit: cover; + object-position: top center; + transition: transform 1.2s var(--ease-out); +} + +.personal-card:hover .personal-media img, +.personal-card:hover .personal-media video { + transform: scale(1.03); +} + +.personal-card h3 { + margin: 20px 12px 8px; +} + +.personal-card p { + margin: 0; + padding: 0 12px 14px; color: var(--ink-2); font-size: 0.94rem; } /* -------------------------------------------------------------------------- - * 11. 功能区块细节 + * 12. 功能区块：技能 / 打字 * -------------------------------------------------------------------------- */ -.step-list { - display: grid; - gap: 20px; - margin: 30px 0 0; - padding: 0; - list-style: none; -} - -.step-list li { - display: flex; - align-items: flex-start; - gap: 18px; -} - -.step-index { - padding-top: 2px; - color: var(--accent); - font-size: 0.82rem; - font-variant-numeric: tabular-nums; - font-weight: 700; - letter-spacing: 0.04em; -} - -.step-list h3 { - margin-bottom: 4px; -} - -.step-list p { - margin: 0; - color: var(--ink-2); - font-size: 0.95rem; -} - .mini-feature { margin-top: 24px; } @@ -1564,7 +1602,7 @@ html.js .number:not(.is-visible)::before { .mini-feature h3 .i { width: 19px; height: 19px; - color: var(--accent); + color: var(--ink-3); } .mini-feature p { @@ -1580,37 +1618,27 @@ html.js .number:not(.is-visible)::before { margin: 26px 0 4px; } -.skill-chips > span { - display: inline-flex; - align-items: center; - gap: 7px; - padding: 8px 15px; - border: 1px solid var(--line); - border-radius: 999px; - background: var(--surface); - font-size: 0.88rem; - font-weight: 550; - transition: transform 0.5s var(--ease-spring), border-color 0.25s ease, color 0.25s ease; +.skill-chips .chip { + color: var(--ink); + transition: transform 0.5s var(--ease-spring), box-shadow 0.25s ease; } -.skill-chips > span:hover { - border-color: color-mix(in srgb, var(--accent) 50%, transparent); - color: var(--accent); +.skill-chips .chip:hover { transform: translateY(-3px); } .skill-chips .i { width: 15px; height: 15px; - color: var(--accent); + color: var(--ink-3); } /* 进场用 animation 而非 transition，避免进场延迟拖慢之后的悬停反馈 */ -html.js .reveal:not(.is-visible) .skill-chips > span { +html.js .reveal:not(.is-visible) .skill-chips .chip { opacity: 0; } -html.js .reveal.is-visible .skill-chips > span { +html.js .reveal.is-visible .skill-chips .chip { animation: chip-in 0.8s var(--ease-spring) both; animation-delay: calc(0.3s + var(--ci, 0) * 60ms); } @@ -1637,11 +1665,11 @@ html.js .reveal.is-visible .skill-chips > span { .quiet-list li::before { position: absolute; - top: 2px; + top: 3px; left: 0; width: 16px; height: 16px; - color: var(--accent); + color: var(--ink-3); /* 内联 check 图标，避免外部字体依赖 */ content: ""; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; @@ -1649,89 +1677,80 @@ html.js .reveal.is-visible .skill-chips > span { background: currentColor; } -/* -------------------------------------------------------------------------- - * 12. 嘴替输入法（2.1 卖点） - * -------------------------------------------------------------------------- */ -.personal-grid { +/* 数字：进入视口时滚动计数（无 JS 时直接显示最终数值） */ +.stat-row { display: grid; - gap: 20px; - grid-template-columns: repeat(3, 1fr); + gap: 12px; + margin-top: 28px; + grid-template-columns: 1fr 1fr; } -.personal-card { - overflow: hidden; - border: 1px solid var(--line); - border-radius: var(--radius-xl); - background: var(--surface); - transition: transform 0.5s var(--ease-out), box-shadow 0.35s ease; +.stat { + padding: 18px 20px; } -.personal-card:hover { - box-shadow: var(--shadow-card); - transform: translateY(-6px); +.stat strong { + display: block; + margin-bottom: 4px; + font-size: clamp(1.9rem, 3.4vw, 2.5rem); + font-variant-numeric: tabular-nums; + font-weight: 680; + letter-spacing: -0.04em; + line-height: 1.05; } -.personal-media { - overflow: hidden; - aspect-ratio: 4 / 3; - background: var(--surface-strong); -} - -.personal-media img, -.personal-media video { - width: 100%; - height: 100%; - object-fit: cover; - object-position: top center; - transition: transform 1.2s var(--ease-out); -} - -.personal-card:hover .personal-media img, -.personal-card:hover .personal-media video { - transform: scale(1.04); -} - -.personal-card h3 { - margin: 22px 24px 8px; -} - -.personal-card p { - margin: 0; - padding: 0 24px 26px; +.stat span { + display: block; color: var(--ink-2); - font-size: 0.94rem; + font-size: 0.88rem; + line-height: 1.5; } /* -------------------------------------------------------------------------- - * 13. 隐私：三种服务路径（深色舞台） + * 13. 隐私：整页唯一的烟熏亚克力面板（含可选账号） * -------------------------------------------------------------------------- */ -.privacy-section { - --spot-color: var(--stage-accent); - background: linear-gradient(180deg, var(--stage-2), var(--stage-3)); - color: var(--stage-ink); +.privacy-panel { + position: relative; + padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 56px) clamp(24px, 4vw, 40px); + overflow: hidden; + isolation: isolate; } -.center-heading.inverse p:not(.eyebrow) { - color: var(--stage-ink-2); +/* 面板顶部一团极淡的光，像灯从上方照进烟熏亚克力 */ +.privacy-panel::before { + position: absolute; + z-index: -1; + top: -40%; + left: 50%; + width: 760px; + height: 520px; + margin-left: -380px; + border-radius: 50%; + background: radial-gradient(closest-side, rgba(255, 255, 255, 0.08), transparent); + content: ""; } -.privacy-section .eyebrow { - color: var(--stage-accent); +.privacy-panel .center-heading p:not(.eyebrow) { + color: var(--smoke-ink-2); +} + +.privacy-panel .eyebrow { + color: var(--smoke-ink-2); } /* 端侧徽记：声波在设备轮廓内跳动，轨道粒子绕行但从不越界 */ .device-emblem { position: relative; - width: 124px; - height: 124px; - margin: 0 auto 26px; + width: 112px; + height: 112px; + margin: 0 auto 24px; } .device-emblem::before { position: absolute; inset: -20%; border-radius: 50%; - background: radial-gradient(closest-side, rgba(111, 196, 145, 0.28), transparent); + background: radial-gradient(closest-side, rgba(79, 203, 104, 0.2), transparent); content: ""; animation: breathe 4s ease-in-out infinite; } @@ -1749,15 +1768,15 @@ html.js .reveal.is-visible .skill-chips > span { .emblem-orbit { fill: none; - stroke: rgba(111, 196, 145, 0.4); + stroke: rgba(255, 255, 255, 0.22); stroke-dasharray: 2 6; stroke-width: 1; } .emblem-spin { - fill: var(--stage-accent); + fill: var(--smoke-ink-2); transform-origin: 80px 80px; - animation: spin 10s linear infinite; + animation: orbit 10s linear infinite; } .emblem-spin-rev { @@ -1766,18 +1785,18 @@ html.js .reveal.is-visible .skill-chips > span { animation-duration: 15s; } -@keyframes spin { +@keyframes orbit { to { transform: rotate(360deg); } } .emblem-device { - fill: rgba(255, 255, 255, 0.04); - stroke: rgba(255, 255, 255, 0.42); + fill: rgba(255, 255, 255, 0.05); + stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.5; } .emblem-wave rect { - fill: var(--stage-accent); + fill: var(--smoke-accent); transform-box: fill-box; transform-origin: center; animation: eq 1.3s ease-in-out infinite; @@ -1793,128 +1812,156 @@ html.js .reveal.is-visible .skill-chips > span { 50% { transform: scaleY(1); } } +/* 烟熏面板里的子卡片：同一种材质再叠一层，靠高光和更亮的底区分 */ .service-paths { display: grid; align-items: stretch; - gap: 18px; - grid-template-columns: 1.25fr 1fr 1fr; + gap: 14px; + grid-template-columns: 1.2fr 1fr 1fr; } -.service-paths article { +.smoke-card { position: relative; - padding: 30px 28px 26px; - border: 1px solid var(--stage-line); - border-radius: var(--radius-xl); + padding: 26px 24px 22px; + border-radius: calc(var(--r-panel) - 12px); background: rgba(255, 255, 255, 0.045); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px var(--smoke-line); } -.service-paths .path-primary { - border-color: rgba(111, 196, 145, 0.35); - background: rgba(111, 196, 145, 0.08); +.smoke-card.is-primary { + background: rgba(255, 255, 255, 0.075); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.14); } +/* 「默认」标签：烟熏面板里唯一的绿色 */ .path-badge { position: absolute; - top: 22px; - right: 24px; - padding: 4px 11px; - border-radius: 999px; - background: var(--stage-accent); - color: #0c0e12; + top: 20px; + right: 20px; + padding: 4px 10px; + border-radius: 8px; + background: color-mix(in srgb, var(--smoke-accent) 18%, transparent); + color: var(--smoke-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; } .path-icon { - width: 26px; - height: 26px; - margin-bottom: 18px; - color: var(--stage-accent); + width: 24px; + height: 24px; + margin-bottom: 16px; + color: var(--smoke-ink-2); } -.service-paths h3 { - margin-bottom: 10px; - font-size: 1.25rem; +.smoke-card h3 { + margin-bottom: 8px; + font-size: 1.18rem; } -.service-paths p { - color: var(--stage-ink-2); - font-size: 0.95rem; +.smoke-card p { + color: var(--smoke-ink-2); + font-size: 0.94rem; } .path-note { display: block; - margin-top: 18px; + margin-top: 16px; padding-top: 14px; - border-top: 1px solid var(--stage-line); - color: var(--stage-ink-2); + border-top: 1px solid var(--smoke-line); + color: var(--smoke-ink-2); font-size: 0.82rem; letter-spacing: 0.01em; } +/* 可选账号：并入隐私面板，标题 + 两列要点 */ +.account-row { + display: grid; + align-items: start; + gap: 18px 40px; + margin-top: 14px; + padding: 26px 28px; + grid-template-columns: minmax(200px, 0.8fr) 2fr; +} + +.account-row h3 { + margin: 0 0 6px; + font-size: 1.12rem; +} + +.account-row > div > p { + margin: 0; + color: var(--smoke-ink-2); + font-size: 0.9rem; +} + +.account-row .quiet-list { + margin: 0; + color: var(--smoke-ink-2); + font-size: 0.92rem; + grid-template-columns: 1fr 1fr; + gap: 12px 28px; +} + +.account-row .quiet-list li::before { + color: rgba(255, 255, 255, 0.4); +} + .privacy-proof { display: flex; align-items: center; justify-content: space-between; - gap: 32px; - margin-top: 22px; - padding: 26px 30px; - border: 1px solid var(--stage-line); - border-radius: var(--radius-xl); - background: rgba(255, 255, 255, 0.045); + gap: 28px; + margin-top: 14px; + padding: 22px 28px; } .privacy-proof > div { display: flex; align-items: center; - gap: 16px; + gap: 20px; } -.privacy-proof .i { - width: 26px; - height: 26px; +/* 「0」：0 个第三方追踪 SDK，从 99 倒数到 0 */ +.privacy-proof strong { flex: none; - color: var(--stage-accent); + font-size: 2.6rem; + font-variant-numeric: tabular-nums; + font-weight: 680; + letter-spacing: -0.04em; + line-height: 1; } .privacy-proof h3 { margin: 0; - font-size: 1.02rem; - font-weight: 600; + color: var(--smoke-ink); + font-size: 1rem; + font-weight: 560; letter-spacing: 0; } -.inverse-link { - display: inline-flex; +/* 烟熏面板里的键帽：深色版 */ +.acrylic-smoke .keycap { flex: none; - align-items: center; - gap: 7px; - color: var(--stage-ink); - font-size: 0.92rem; - font-weight: 600; - text-decoration: underline; - text-decoration-color: var(--stage-line); - text-underline-offset: 5px; - transition: text-decoration-color 0.2s ease; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.16), + inset 0 -2px 0 rgba(0, 0, 0, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.1), + 0 8px 18px -8px rgba(0, 0, 0, 0.6); + color: var(--smoke-ink); } -.inverse-link:hover { - text-decoration-color: var(--stage-ink); +.acrylic-smoke .keycap:active { + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08); } -.inverse-link .i { - width: 15px; - height: 15px; - transition: transform 0.5s var(--ease-spring); -} - -.inverse-link:hover .i { - transform: translate(3px, -3px); +.acrylic-smoke .keycap .i { + color: var(--smoke-ink-2); } /* -------------------------------------------------------------------------- - * 14. 平台 + * 14. 平台 + 稳定性 * -------------------------------------------------------------------------- */ .platform-grid { display: grid; @@ -1923,25 +1970,14 @@ html.js .reveal.is-visible .skill-chips > span { } .platform-card { - overflow: hidden; - border: 1px solid var(--line); - border-radius: var(--radius-xl); - background: var(--surface); - transition: box-shadow 0.35s ease; + padding: 12px; } -.platform-card:hover { - box-shadow: var(--shadow-card); -} - -.platform-card .media-frame { - margin: 14px 14px 0; +.platform-card .media-inset { aspect-ratio: 4 / 3; - border-radius: var(--radius-md); - box-shadow: none; } -.platform-card .media-frame img { +.platform-card .media-inset img { width: 100%; height: 100%; object-fit: cover; @@ -1949,26 +1985,26 @@ html.js .reveal.is-visible .skill-chips > span { transition: transform 1.4s var(--ease-out); } -.platform-card:hover .media-frame img { - transform: scale(1.035); +.platform-card:hover .media-inset img { + transform: scale(1.03); } .platform-label { display: block; - margin: 24px 28px 8px; - color: var(--accent); + margin: 22px 16px 8px; + color: var(--ink-3); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; } .platform-card h3 { - margin: 0 28px 10px; + margin: 0 16px 10px; } .platform-card > p { margin: 0; - padding: 0 28px 30px; + padding: 0 16px 18px; color: var(--ink-2); font-size: 0.95rem; } @@ -1981,68 +2017,34 @@ html.js .reveal.is-visible .skill-chips > span { text-align: center; } -/* -------------------------------------------------------------------------- - * 15. 稳定性信任条 - * -------------------------------------------------------------------------- */ -.reliability-section { - padding: clamp(48px, 6vw, 72px) 0; -} - -.reliability-strip { +/* 稳定性：一行标签，挂在平台区末尾 */ +.reliability { display: flex; align-items: center; - justify-content: space-between; - gap: 20px 40px; - padding: 26px 32px; - border: 1px solid var(--line); - border-radius: var(--radius-xl); - background: var(--surface); + justify-content: center; + flex-wrap: wrap; + gap: 10px; + margin-top: 22px; } -.strip-title { - flex: none; - font-size: 0.95rem; +.reliability-title { + margin-right: 6px; + color: var(--ink-2); + font-size: 0.9rem; font-weight: 650; } -.reliability-strip ul { - display: flex; - flex-wrap: wrap; - gap: 8px 26px; - margin: 0; - padding: 0; - color: var(--ink-2); - font-size: 0.88rem; - list-style: none; -} - -.reliability-strip li { - display: inline-flex; - align-items: center; - gap: 8px; -} - -.reliability-strip li::before { - width: 5px; - height: 5px; - border-radius: 50%; - background: var(--accent); - content: ""; +.reliability .chip { + font-size: 0.82rem; } /* -------------------------------------------------------------------------- - * 16. FAQ（展开高度由 site.js 用 Web Animations 过渡） + * 15. FAQ：居中单栏（展开高度由 site.js 用 Web Animations 过渡） * -------------------------------------------------------------------------- */ -.faq-layout { - display: grid; - align-items: start; - gap: clamp(40px, 6vw, 80px); - grid-template-columns: 1fr 1.4fr; -} - -.faq-heading { - position: sticky; - top: 100px; +.faq-list { + max-width: 780px; + margin: 0 auto; + padding: 8px 28px; } .faq-item { @@ -2050,8 +2052,8 @@ html.js .reveal.is-visible .skill-chips > span { border-top: 1px solid var(--line); } -.faq-item:last-child { - border-bottom: 1px solid var(--line); +.faq-item:first-child { + border-top: 0; } .faq-item summary { @@ -2088,7 +2090,7 @@ html.js .reveal.is-visible .skill-chips > span { } .faq-item summary:hover { - color: var(--accent); + color: var(--ink-2); } .faq-item p { @@ -2108,16 +2110,12 @@ html.js .reveal.is-visible .skill-chips > span { } /* -------------------------------------------------------------------------- - * 17. 下载 CTA（深色舞台，与 Hero 呼应） + * 16. 下载：一块大亚克力面板，与首屏的图标键帽首尾呼应 * -------------------------------------------------------------------------- */ .download-section { padding-top: 0; } -.faq-section + .download-section { - padding-top: clamp(72px, 9vw, 120px); -} - .download-panel { position: relative; display: flex; @@ -2125,13 +2123,9 @@ html.js .reveal.is-visible .skill-chips > span { align-items: center; justify-content: space-between; gap: 40px; - padding: clamp(40px, 6vw, 80px); - border-radius: calc(var(--radius-xl) + 4px); + padding: clamp(36px, 6vw, 72px); + border-radius: var(--r-panel); isolation: isolate; - background: - radial-gradient(110% 130% at 90% 120%, rgba(111, 196, 145, 0.16), transparent 55%), - linear-gradient(160deg, var(--stage-1), var(--stage-3)); - color: var(--stage-ink); } .download-backdrop { @@ -2142,21 +2136,21 @@ html.js .reveal.is-visible .skill-chips > span { } .download-backdrop .aurora-a { - top: -60%; - left: -12%; + top: -70%; + left: -14%; width: 520px; height: 520px; } .download-backdrop .aurora-b { top: auto; - right: -14%; - bottom: -70%; + right: -16%; + bottom: -80%; width: 520px; height: 520px; } -/* 声波路径：虚线沿曲线流动，两条反向错速 */ +/* 声波路径：虚线沿曲线流动，两条反向错速；中性色 */ .download-wave { position: absolute; right: 0; @@ -2164,12 +2158,12 @@ html.js .reveal.is-visible .skill-chips > span { left: 0; width: 100%; height: 55%; - opacity: 0.45; + opacity: 0.5; } .download-wave path { fill: none; - stroke: var(--stage-accent); + stroke: var(--line-strong); stroke-dasharray: 6 12; stroke-width: 1.5; vector-effect: non-scaling-stroke; @@ -2177,7 +2171,7 @@ html.js .reveal.is-visible .skill-chips > span { } .download-wave path:nth-child(2) { - opacity: 0.5; + opacity: 0.6; animation-direction: reverse; animation-duration: 8s; } @@ -2186,19 +2180,22 @@ html.js .reveal.is-visible .skill-chips > span { to { stroke-dashoffset: -180; } } +.download-mark { + width: 64px; + height: 64px; + margin-bottom: 22px; + filter: drop-shadow(0 10px 14px rgba(21, 24, 26, 0.16)); +} + .download-copy h2 { margin-bottom: 12px; - font-size: clamp(2rem, 4.2vw, 3.1rem); + font-size: clamp(1.9rem, 4vw, 2.9rem); } .download-copy p { max-width: 460px; margin: 0; - color: var(--stage-ink-2); -} - -.download-panel .eyebrow { - color: var(--stage-accent); + color: var(--ink-2); } .download-actions { @@ -2206,38 +2203,14 @@ html.js .reveal.is-visible .skill-chips > span { flex: none; flex-direction: column; align-items: stretch; - gap: 14px; -} - -.outline-action { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 9px; - padding: 13px 22px; - border: 1px solid var(--stage-line); - border-radius: 999px; - color: var(--stage-ink); - font-size: 0.92rem; - font-weight: 600; - transition: background 0.25s ease, border-color 0.25s ease, transform 0.5s var(--ease-spring); -} - -.outline-action:hover { - border-color: rgba(111, 196, 145, 0.45); - background: rgba(255, 255, 255, 0.08); -} - -.outline-action .i { - width: 16px; - height: 16px; + gap: 12px; } /* -------------------------------------------------------------------------- - * 18. 页脚 + * 17. 页脚 * -------------------------------------------------------------------------- */ .site-footer { - padding: 44px 0 52px; + padding: 40px 0 52px; } .footer-inner { @@ -2265,19 +2238,19 @@ html.js .reveal.is-visible .skill-chips > span { } /* -------------------------------------------------------------------------- - * 19. 动效系统：滚动显现 / 遮罩揭示 / 光斑 / 倾斜 / 磁吸 / 主题过渡 + * 18. 动效系统：滚动显现 / 遮罩揭示 / 亚克力反光 / 磁吸 / 主题过渡 * -------------------------------------------------------------------------- */ /* - * 进场只动 opacity + translate（独立属性），把 transform 留给悬停倾斜与视差， + * 进场只动 opacity + translate（独立属性），把 transform 留给悬停与视差， * 两套动效互不覆盖。进场延迟只作用在进场属性上，悬停反馈始终即时。 */ html.js .reveal { opacity: 0; translate: 0 30px; - transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s, 0s, var(--d, 0s); - transition-duration: 0.9s, 1.05s, 0.5s, 0.35s, 0.35s, 1.25s; - transition-property: opacity, translate, transform, box-shadow, border-color, clip-path; - transition-timing-function: ease-out, var(--ease-out), var(--ease-out), ease, ease, var(--ease-out); + transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s, var(--d, 0s); + transition-duration: 0.9s, 1.05s, 0.5s, 0.35s, 1.25s; + transition-property: opacity, translate, transform, box-shadow, clip-path; + transition-timing-function: ease-out, var(--ease-out), var(--ease-out), ease, var(--ease-out); } html.js .reveal.is-visible { @@ -2287,30 +2260,22 @@ html.js .reveal.is-visible { /* 视差元素的 transform 每帧由脚本写入，不再叠加过渡 */ html.js .reveal[data-parallax] { - transition-duration: 0.9s, 1.05s, 0s, 0.35s, 0.35s, 1.25s; + transition-duration: 0.9s, 1.05s, 0s, 0.35s, 1.25s; } -/* 遮罩揭示：媒体框从内缩的圆角矩形展开，内部画面同时从 112% 回落 */ +/* 遮罩揭示：画面从内缩的圆角矩形展开，内部画面同时从 112% 回落 */ html.js .unmask.reveal { - clip-path: inset(9% 7% 9% 7% round var(--radius-lg)); + clip-path: inset(9% 7% 9% 7% round var(--r-card)); } html.js .unmask.reveal.is-visible { - clip-path: inset(0 0 0 0 round var(--radius-lg)); + clip-path: inset(0 0 0 0 round var(--r-card)); } -html.js .unmask > video, -html.js .unmask > img { - transform: scale(1.12); - transition: transform 1.6s var(--ease-out) var(--d, 0s); -} - -html.js .unmask.is-visible > video, -html.js .unmask.is-visible > img { - transform: none; -} - -/* 指针光斑：卡片内部高光 + 边框描光，--mx / --my 由脚本写入 */ +/* + * 亚克力反光：指针所在处一块柔和高光 + 边缘描光，像灯光照在亚克力上。 + * --mx / --my 由脚本写入；反光颜色由 --sheen / --sheen-edge 决定，随主题与材质变化。 + */ .spot { position: relative; isolation: isolate; @@ -2330,9 +2295,9 @@ html.js .unmask.is-visible > img { .spot::before { z-index: -1; background: radial-gradient( - 420px circle at var(--mx, 50%) var(--my, 50%), - color-mix(in srgb, var(--spot-color, var(--accent)) 13%, transparent), - transparent 46% + 380px circle at var(--mx, 50%) var(--my, 50%), + var(--sheen), + transparent 55% ); } @@ -2340,8 +2305,8 @@ html.js .unmask.is-visible > img { z-index: 2; padding: 1px; background: radial-gradient( - 260px circle at var(--mx, 50%) var(--my, 50%), - color-mix(in srgb, var(--spot-color, var(--accent)) 70%, transparent), + 240px circle at var(--mx, 50%) var(--my, 50%), + var(--sheen-edge), transparent 62% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); @@ -2354,15 +2319,13 @@ html.js .unmask.is-visible > img { opacity: 1; } -/* 3D 倾斜：--rx / --ry 由脚本根据指针位置写入 */ -.tilt { - transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) - translateY(var(--lift, 0px)); - transform-style: preserve-3d; +/* 可悬停的面板：轻微浮起 */ +.lift { + transition: transform 0.5s var(--ease-out), box-shadow 0.35s ease; } -.tilt:hover { - --lift: -5px; +.lift:hover { + transform: translateY(-4px); } /* 主题切换：View Transitions 以按钮为圆心扩散（site.js 驱动 clip-path） */ @@ -2377,7 +2340,7 @@ html.vt-theme::view-transition-new(root) { } /* -------------------------------------------------------------------------- - * 20. 减弱动态效果：所有持续动画停止，内容以最终态直接呈现 + * 19. 减弱动态效果：所有持续动画停止，内容以最终态直接呈现 * -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { @@ -2405,11 +2368,6 @@ html.vt-theme::view-transition-new(root) { clip-path: none; } - html.js .unmask > video, - html.js .unmask > img { - transform: none; - } - html.js .reveal [data-split] .ch { opacity: 1; filter: none; @@ -2437,13 +2395,13 @@ html.vt-theme::view-transition-new(root) { justify-content: center; } - .tilt { + .lift:hover { transform: none; } } /* -------------------------------------------------------------------------- - * 21. 响应式 + * 20. 响应式 * -------------------------------------------------------------------------- */ @media (max-width: 960px) { .nav-links { @@ -2454,14 +2412,18 @@ html.vt-theme::view-transition-new(root) { display: inline-grid; } + /* 移动端菜单：导航条下方再悬浮一块亚克力面板 */ .mobile-nav { display: block; - padding: 8px 24px 18px; - border-bottom: 1px solid var(--line); - background: color-mix(in srgb, var(--canvas) 88%, transparent); - -webkit-backdrop-filter: blur(20px) saturate(1.6); - backdrop-filter: blur(20px) saturate(1.6); - color: var(--ink); + width: var(--content); + margin: 8px auto 0; + padding: 8px; + border-radius: 18px; + background: var(--grain), var(--acrylic-fill); + box-shadow: var(--acrylic-shadow); + pointer-events: auto; + -webkit-backdrop-filter: var(--acrylic-blur); + backdrop-filter: var(--acrylic-blur); } .mobile-nav[hidden] { @@ -2470,46 +2432,37 @@ html.vt-theme::view-transition-new(root) { .mobile-nav a { display: block; - padding: 12px 8px; - border-radius: 10px; + padding: 12px 14px; + border-radius: var(--r-chip); font-size: 1rem; } - .split-layout, - .faq-layout { - grid-template-columns: 1fr; + .mobile-nav a:active { + background: var(--line); } - .faq-heading { - position: static; + .split-layout { + grid-template-columns: 1fr; } .split-layout.reverse .feature-copy { order: 1; } - .split-layout.reverse .media-frame, .split-layout.reverse .device-stage { order: 2; } - .ways-grid, - .numbers-grid { - grid-template-columns: 1fr 1fr; - } - - .personal-grid { - grid-template-columns: 1fr; - } - - .service-paths { - grid-template-columns: 1fr; - } - + .personal-grid, + .service-paths, .platform-grid { grid-template-columns: 1fr; } + .account-row { + grid-template-columns: 1fr; + } + .download-panel { flex-direction: column; align-items: flex-start; @@ -2519,14 +2472,9 @@ html.vt-theme::view-transition-new(root) { align-items: flex-start; } - .reliability-strip { - flex-direction: column; - align-items: flex-start; - } - /* 滚动叙事：手机在上，当前一幕的文案在下方叠放切换 */ .story { - height: 400vh; + height: 480vh; } .story-layout { @@ -2578,25 +2526,39 @@ html.vt-theme::view-transition-new(root) { @media (max-width: 600px) { :root { - --content: calc(100vw - 40px); + --content: calc(100vw - 32px); } .hero { - padding-top: 116px; + padding-top: 112px; } - .ways-grid { - grid-template-columns: 1fr; + .hero-mark { + width: 80px; + height: 80px; } + /* 窄屏：商店徽章独占一行，两枚键帽平分下一行，避免二加一的参差 */ .hero-actions { - gap: 14px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + } + + .hero-actions .store-badge { + grid-column: 1 / -1; + justify-self: center; + } + + .hero-actions .keycap { + padding-inline: 12px; } .voice-capsule { bottom: 12%; gap: 10px; padding: 6px 14px 6px 6px; + border-radius: 14px; } .capsule-mic { @@ -2609,18 +2571,26 @@ html.vt-theme::view-transition-new(root) { font-size: 0.84rem; } + .account-row .quiet-list { + grid-template-columns: 1fr; + } + .privacy-proof { flex-direction: column; align-items: flex-start; } + .faq-list { + padding: 4px 20px; + } + .footer-inner { flex-direction: column; align-items: flex-start; } } -/* 无 JavaScript：滚动叙事退化为静态展示，不保留 430vh 的空白滚动距离 */ +/* 无 JavaScript：滚动叙事退化为静态展示，不保留 520vh 的空白滚动距离 */ html.no-js .story { height: auto; } diff --git a/docs/assets/site.js b/docs/assets/site.js index 1352508..657a311 100644 --- a/docs/assets/site.js +++ b/docs/assets/site.js @@ -5,16 +5,15 @@ * 2. 深浅色主题（默认跟随系统，手动选择后持久化；支持时以圆形扩散过渡） * 3. 移动端导航开合、导航滑块与当前区块高亮 * 4. 逐字拆分标题（data-split） - * 5. 滚动引擎：进度条、Hero 设备「立起」、媒体视差、三幕滚动叙事（真机录屏随幕切换） + * 5. 滚动引擎：进度条、Hero 设备「立起」、媒体视差、四幕滚动叙事（真机录屏随幕切换） * 6. 声波渲染、Hero 语音胶囊打字机、数字计数 - * 7. 指针光斑 / 3D 倾斜 / 磁吸按钮、FAQ 高度过渡、离屏视频暂停 + * 7. 亚克力反光 / 磁吸按钮、FAQ 高度过渡、离屏视频暂停 * 开启「减弱动态效果」时，持续动画与指针动效全部停用，内容直接呈现最终态。 */ (function () { "use strict"; const root = document.documentElement; - const siteNav = document.getElementById("siteNav"); const languageButton = document.getElementById("languageToggle"); const themeButton = document.getElementById("themeToggle"); const themeIconUse = document.getElementById("themeIconUse"); @@ -211,8 +210,8 @@ themeButton.setAttribute("aria-label", label); } - // 深色舞台在各主题下配色一致，theme-color 跟随舞台色 - themeColor?.setAttribute("content", "#0e1013"); + // 浏览器顶栏颜色与底板一致（与 site.css 的 --canvas 保持同步） + themeColor?.setAttribute("content", resolved === "dark" ? "#0e1011" : "#eff1f0"); document.querySelectorAll("[data-shot]").forEach((image) => { const lang = root.dataset.lang || "zh"; @@ -541,10 +540,9 @@ languageHooks.push(queueClipRefresh); themeHooks.push(queueClipRefresh); - /* ---------------- 三幕滚动叙事 ---------------- */ + /* ---------------- 四幕滚动叙事 ---------------- */ // 滚动只决定「当前是哪一幕」；画面是这一幕的真机片段，从头播放，播完停留片刻再重播 - const ACT_RANGES = [[0, 0.34], [0.34, 0.67], [0.67, 1]]; const STORY_REPLAY_DELAY = 2200; const story = document.getElementById("storyStage"); @@ -576,8 +574,8 @@ const inView = rect.bottom > 0 && rect.top < viewport; const p = clamp(-rect.top / Math.max(1, story.offsetHeight - viewport)); - let act = 0; - ACT_RANGES.forEach(([start], i) => { if (p >= start) act = i; }); + // 滚动距离按幕数均分 + const act = Math.min(storyActs.length - 1, Math.floor(p * storyActs.length)); // 离开视口暂停，回来接着播 if (inView !== storyInView) { @@ -625,17 +623,11 @@ let scrollTicking = false; let lastHeroProgress = -1; - function updateNavState() { - siteNav?.classList.toggle("is-scrolled", window.scrollY > 24); - } - function updateScroll() { scrollTicking = false; const y = window.scrollY; const viewport = innerHeight; - updateNavState(); - if (progressBar) { const max = Math.max(1, root.scrollHeight - viewport); progressBar.style.transform = `scaleX(${clamp(y / max).toFixed(4)})`; @@ -822,9 +814,10 @@ if (!document.hidden) wakeWaves(); }); - /* ---------------- 指针动效：光斑 / 倾斜 / 磁吸 / Hero 光斑 ---------------- */ + /* ---------------- 指针动效：亚克力反光 / 磁吸 / Hero 光斑 ---------------- */ if (finePointer && !reduceMotion) { + // 亚克力反光：高光跟随指针在面板表面移动 document.querySelectorAll(".spot").forEach((element) => { element.addEventListener("pointermove", (event) => { const rect = element.getBoundingClientRect(); @@ -833,20 +826,6 @@ }); }); - document.querySelectorAll(".tilt").forEach((element) => { - element.addEventListener("pointermove", (event) => { - const rect = element.getBoundingClientRect(); - const x = (event.clientX - rect.left) / rect.width; - const y = (event.clientY - rect.top) / rect.height; - element.style.setProperty("--rx", `${((0.5 - y) * 9).toFixed(2)}deg`); - element.style.setProperty("--ry", `${((x - 0.5) * 11).toFixed(2)}deg`); - }); - element.addEventListener("pointerleave", () => { - element.style.setProperty("--rx", "0deg"); - element.style.setProperty("--ry", "0deg"); - }); - }); - // 磁吸按钮：指针靠近时按钮被「吸」向指针，离开时弹簧回位 document.querySelectorAll(".magnetic").forEach((element) => { element.addEventListener("pointermove", (event) => { diff --git a/docs/assets/story/ask-en-dark-key.jpg b/docs/assets/story/ask-en-dark-key.jpg new file mode 100644 index 0000000..a66c520 Binary files /dev/null and b/docs/assets/story/ask-en-dark-key.jpg differ diff --git a/docs/assets/story/ask-en-dark.jpg b/docs/assets/story/ask-en-dark.jpg new file mode 100644 index 0000000..d958e06 Binary files /dev/null and b/docs/assets/story/ask-en-dark.jpg differ diff --git a/docs/assets/story/ask-en-dark.mp4 b/docs/assets/story/ask-en-dark.mp4 new file mode 100644 index 0000000..35d89d2 Binary files /dev/null and b/docs/assets/story/ask-en-dark.mp4 differ diff --git a/docs/assets/story/ask-en-light-key.jpg b/docs/assets/story/ask-en-light-key.jpg new file mode 100644 index 0000000..822d6db Binary files /dev/null and b/docs/assets/story/ask-en-light-key.jpg differ diff --git a/docs/assets/story/ask-en-light.jpg b/docs/assets/story/ask-en-light.jpg new file mode 100644 index 0000000..1bc1b8a Binary files /dev/null and b/docs/assets/story/ask-en-light.jpg differ diff --git a/docs/assets/story/ask-en-light.mp4 b/docs/assets/story/ask-en-light.mp4 new file mode 100644 index 0000000..a71aa63 Binary files /dev/null and b/docs/assets/story/ask-en-light.mp4 differ diff --git a/docs/assets/story/ask-zh-dark-key.jpg b/docs/assets/story/ask-zh-dark-key.jpg new file mode 100644 index 0000000..d29eae0 Binary files /dev/null and b/docs/assets/story/ask-zh-dark-key.jpg differ diff --git a/docs/assets/story/ask-zh-dark.jpg b/docs/assets/story/ask-zh-dark.jpg new file mode 100644 index 0000000..e62a12d Binary files /dev/null and b/docs/assets/story/ask-zh-dark.jpg differ diff --git a/docs/assets/story/ask-zh-dark.mp4 b/docs/assets/story/ask-zh-dark.mp4 new file mode 100644 index 0000000..5fb0bbf Binary files /dev/null and b/docs/assets/story/ask-zh-dark.mp4 differ diff --git a/docs/assets/story/ask-zh-light-key.jpg b/docs/assets/story/ask-zh-light-key.jpg new file mode 100644 index 0000000..27061d4 Binary files /dev/null and b/docs/assets/story/ask-zh-light-key.jpg differ diff --git a/docs/assets/story/ask-zh-light.jpg b/docs/assets/story/ask-zh-light.jpg new file mode 100644 index 0000000..850bea5 Binary files /dev/null and b/docs/assets/story/ask-zh-light.jpg differ diff --git a/docs/assets/story/ask-zh-light.mp4 b/docs/assets/story/ask-zh-light.mp4 new file mode 100644 index 0000000..7bf42b3 Binary files /dev/null and b/docs/assets/story/ask-zh-light.mp4 differ diff --git a/docs/index.html b/docs/index.html index 38ae0e9..eb278a0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -15,7 +15,7 @@ content="语音输入法,嘴替输入法,AI 输入法,AI 语音键盘,Agentic keyboard,agentic 键盘,iPhone 语音输入法,Mac 语音输入,端侧语音识别,OSGKeyboard" > - + @@ -50,7 +50,7 @@ - + +