From b9daab963608a30fbdbb9035d2f461fc47417307 Mon Sep 17 00:00:00 2001 From: Rocky <72559939+hkgood@users.noreply.github.com> Date: Wed, 29 Jul 2026 21:52:07 +0800 Subject: [PATCH] docs(site): add soft aurora wash to marketing hero Replace the flat green hero background with a restrained animated green/teal/violet aurora, and keep a static fallback for reduced motion. --- CHANGELOG.md | 1 + docs/index.html | 123 ++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 120 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1f5e210..4f22da9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] ### Added +- **Hero aurora background**: soft animated green/teal/violet aurora wash on the marketing site hero, with reduced-motion static fallback. / **Hero 极光背景**：官网首屏加入缓慢漂移的绿/青/紫极光柔光，并在减少动态模式下退回静态。 - **App Store download badges**: official badges on bilingual READMEs (hero + Get sections) and the website, with China-store `/cn/` links for Chinese and regionless App Store links for English. / **App Store 下载徽章**：中英文 README（顶部与获取区）与官网挂载官方徽章；中文链 `/cn/`，英文用无地区链接。 - **Website SEO & AI discovery**: richer meta/JSON-LD/FAQ, `llms.txt`, expanded sitemap, English landing, plus install / compare / Mac-dictation content pages. / **官网 SEO 与 AI 发现**：强化 meta/JSON-LD/FAQ、`llms.txt`、sitemap，并新增英文落地页与安装 / 对比 / Mac 听写专题页。 - **Context-aware polish safeguards**: polish can use a redacted cursor-neighborhood snapshot for natural continuation, validates protected terms and identifiers, retries once, and falls back to a conservative local cleanup when needed. / **上下文润色护栏**：润色可使用经截断脱敏的光标附近文字自然衔接，并校验受保护词与标识符；失败时重试一次，仍不合格则降级为本地保守清理。 diff --git a/docs/index.html b/docs/index.html index f2f0cb2..84dfea5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -137,7 +137,11 @@ --bg: #f7f7f5; --bg-elevated: #ffffff; --bg-soft: #efefec; - --hero-wash: #e7f3eb; + --hero-wash: #eef3f0; + --aurora-a: rgba(47, 154, 82, 0.42); + --aurora-b: rgba(56, 178, 172, 0.34); + --aurora-c: rgba(99, 102, 241, 0.22); + --aurora-d: rgba(34, 197, 94, 0.18); --text: #121214; --text-2: #5a5a62; --text-3: #8e8e96; @@ -157,7 +161,11 @@ --bg: #0a0a0b; --bg-elevated: #131316; --bg-soft: #18181b; - --hero-wash: #102018; + --hero-wash: #070b0a; + --aurora-a: rgba(52, 211, 153, 0.38); + --aurora-b: rgba(34, 211, 238, 0.28); + --aurora-c: rgba(129, 140, 248, 0.30); + --aurora-d: rgba(74, 222, 128, 0.22); --text: #f4f4f2; --text-2: #a8a8b0; --text-3: #6f6f78; @@ -175,7 +183,11 @@ --bg: #0a0a0b; --bg-elevated: #131316; --bg-soft: #18181b; - --hero-wash: #102018; + --hero-wash: #070b0a; + --aurora-a: rgba(52, 211, 153, 0.38); + --aurora-b: rgba(34, 211, 238, 0.28); + --aurora-c: rgba(129, 140, 248, 0.30); + --aurora-d: rgba(74, 222, 128, 0.22); --text: #f4f4f2; --text-2: #a8a8b0; --text-3: #6f6f78; @@ -318,10 +330,93 @@ /* —— Hero —— */ .hero { position: relative; - /* Full-bleed solid wash (no side gaps from inset gradients). */ background: var(--hero-wash); padding: 4.5rem 0 2.5rem; overflow: hidden; + isolation: isolate; + } + .hero-aurora { + position: absolute; + inset: -12% -8% -18%; + z-index: 0; + pointer-events: none; + overflow: hidden; + } + .hero-aurora::after { + content: ""; + position: absolute; + inset: 0; + background: + linear-gradient(180deg, transparent 55%, var(--hero-wash) 96%), + radial-gradient(ellipse 70% 50% at 50% 0%, transparent 40%, var(--hero-wash) 100%); + opacity: 0.85; + } + .aurora-blob { + position: absolute; + border-radius: 50%; + filter: blur(72px); + will-change: transform, opacity; + mix-blend-mode: normal; + opacity: 0.9; + } + .aurora-blob-1 { + width: min(72vw, 720px); + height: min(52vw, 520px); + top: -8%; + left: -6%; + background: var(--aurora-a); + animation: aurora-drift-1 22s ease-in-out infinite alternate; + } + .aurora-blob-2 { + width: min(64vw, 640px); + height: min(48vw, 480px); + top: 8%; + right: -10%; + background: var(--aurora-b); + animation: aurora-drift-2 28s ease-in-out infinite alternate; + } + .aurora-blob-3 { + width: min(58vw, 560px); + height: min(42vw, 420px); + top: 28%; + left: 28%; + background: var(--aurora-c); + animation: aurora-drift-3 26s ease-in-out infinite alternate; + } + .aurora-blob-4 { + width: min(48vw, 440px); + height: min(36vw, 360px); + bottom: 6%; + left: 12%; + background: var(--aurora-d); + animation: aurora-drift-4 20s ease-in-out infinite alternate; + opacity: 0.7; + } + @keyframes aurora-drift-1 { + 0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } + 50% { transform: translate3d(12%, 10%, 0) scale(1.12) rotate(8deg); } + 100% { transform: translate3d(6%, 18%, 0) scale(1.05) rotate(-4deg); } + } + @keyframes aurora-drift-2 { + 0% { transform: translate3d(0, 0, 0) scale(1.05) rotate(0deg); } + 50% { transform: translate3d(-14%, 12%, 0) scale(1.18) rotate(-10deg); } + 100% { transform: translate3d(-8%, 20%, 0) scale(0.96) rotate(6deg); } + } + @keyframes aurora-drift-3 { + 0% { transform: translate3d(0, 0, 0) scale(0.95); opacity: 0.75; } + 50% { transform: translate3d(-10%, -8%, 0) scale(1.2); opacity: 1; } + 100% { transform: translate3d(10%, 6%, 0) scale(1.05); opacity: 0.8; } + } + @keyframes aurora-drift-4 { + 0% { transform: translate3d(0, 0, 0) scale(1); } + 100% { transform: translate3d(18%, -12%, 0) scale(1.15); } + } + html[data-theme="dark"] .aurora-blob, + html[data-theme="system"] .aurora-blob { + mix-blend-mode: screen; + } + @media (prefers-color-scheme: light) { + html[data-theme="system"] .aurora-blob { mix-blend-mode: normal; } } .hero .wrap { position: relative; z-index: 1; } .hero-copy { @@ -799,6 +894,20 @@ } .reveal { opacity: 1; transform: none; } .hero-stage { opacity: 1; transform: none; } + .aurora-blob { + filter: blur(64px); + opacity: 0.55; + will-change: auto; + } + .aurora-blob-1 { transform: translate3d(4%, 6%, 0); } + .aurora-blob-2 { transform: translate3d(-6%, 8%, 0); } + .aurora-blob-3 { transform: translate3d(-2%, 0, 0); } + .aurora-blob-4 { transform: translate3d(8%, -4%, 0); } + } + + @media (max-width: 720px) { + .aurora-blob { filter: blur(56px); } + .aurora-blob-4 { display: none; } } @@ -838,6 +947,12 @@
+