novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hero): refine light hero tech-sense with engineering grid and tuned ink links

Browse Source 
浅色 Hero 科技感变体（HERO_VARIANT='grid'）：墨色工程网格 + 品牌红节点 + 墨色细连线

连线 globalAlpha 上限 0.7→0.42，加边缘径向淡出（确定性，快照零漂移）

工程网格 CSS 加 radial mask 聚焦版心（呼应 McKinsey 穿透噪声）

清理死 CSS：移除 hero-dot-grid/hero-dot-spot 及 --hero-dot-* 变量

保留 --spot-x/--spot-y（spotlight 聚光复用）

门禁：type-check 0 / eslint 0 / 单测 17 passed
This commit is contained in:
zhangxiang
2026-09-01 09:54:45 +08:00
parent 95dc07c3f7
commit bfa49410e4
3 changed files with 182 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+24 -17
View File
@@ -790,29 +790,36 @@ html[data-theme='dark'] body {
background-size: 24px 24px;
}
/* === Hero 背景点阵：L1 静态 + L2 光标聚光 ===
颜色 / 透明度走 CSS 变量，暗黑模式在 html[data-theme='dark'] 覆盖，零 JS 自动反色。
实测：浅色 brand 红 @0.12 → 1.22:1；深底中性浅灰 @0.08 → 1.20:1（可感知不抢戏）。
原 hero 内联点阵为 rgba(196,30,58,0.4)+opacity 0.03，实测仅 1.05:1，等于不可见。
L2 聚光层用 mask + 2 个 CSS 变量（--spot-x/--spot-y），无 canvas、无逐帧 JS。 */
/* === Hero 工程网格 + 品牌红光标聚光（L1 静态网格 + L2 聚光）===
L1 工程网格（hero-grid-overlay--light/dark）：墨色 hairline 44px 网格 + 径向遮罩聚焦版心，零 JS 自动反色。
L2 聚光层（hero-spot-glow）用 2 个 CSS 变量（--spot-x/--spot-y）跟随光标，无 canvas、无逐帧 JS。
旧点阵类 hero-dot-grid/hero-dot-spot 已被工程网格取代，2026-09-01 清理。 */
:root {
--hero-dot-color: rgba(var(--color-brand-rgb), 0.12);
--hero-dot-size: 24px;
--spot-x: 50%;
--spot-y: 50%;
}
html[data-theme='dark'] {
--hero-dot-color: rgba(var(--color-text-muted-rgb), 0.08);
/* Hero 科技感工程网格层（浅色/深色 Hero 共用，跟随 HERO_VARIANT 切换） */
.hero-grid-overlay--dark {
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 82%);
mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 82%);
}
.hero-dot-grid {
background-image: radial-gradient(circle at 1px 1px, var(--hero-dot-color) 1px, transparent 1px);
background-size: var(--hero-dot-size) var(--hero-dot-size);
.hero-grid-overlay--light {
background-image:
linear-gradient(rgba(10, 14, 20, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(10, 14, 20, 0.05) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 82%);
mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 82%);
}
.hero-dot-spot {
background-image: radial-gradient(circle at 1px 1px, var(--hero-dot-color) 1px, transparent 1px);
background-size: var(--hero-dot-size) var(--hero-dot-size);
-webkit-mask-image: radial-gradient(280px circle at var(--spot-x) var(--spot-y), #000 0%, transparent 72%);
mask-image: radial-gradient(280px circle at var(--spot-x) var(--spot-y), #000 0%, transparent 72%);
/* 品牌红光标聚光（spotlight 变体）：跟随 --spot-x/--spot-y，无 canvas、无逐帧 JS */
.hero-spot-glow {
background: radial-gradient(440px circle at var(--spot-x) var(--spot-y),
rgba(var(--color-brand-rgb), 0.16), transparent 60%);
}
.bg-grain {