glasscn-core 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +79 -0
  3. package/package.json +53 -0
  4. package/src/bridge/auto.css +589 -0
  5. package/src/headless.css +17 -0
  6. package/src/index.css +28 -0
  7. package/src/palettes/ember-slate.css +35 -0
  8. package/src/palettes/emerald-mist.css +35 -0
  9. package/src/palettes/liquid-light.css +99 -0
  10. package/src/palettes/ocean-frost.css +35 -0
  11. package/src/palettes/soft-bloom.css +35 -0
  12. package/src/palettes/switchable.css +129 -0
  13. package/src/palettes/warm-sunset.css +35 -0
  14. package/src/primitives/backdrop.css +128 -0
  15. package/src/primitives/fallback.css +220 -0
  16. package/src/primitives/interaction.css +159 -0
  17. package/src/primitives/reveal.css +168 -0
  18. package/src/primitives/surface.css +212 -0
  19. package/src/tokens/bridge.css +108 -0
  20. package/src/tokens/elevation.css +52 -0
  21. package/src/tokens/palette.css +47 -0
  22. package/src/tokens/primitives.css +103 -0
  23. package/src/tokens/typography.css +46 -0
package/src/palettes/emerald-mist.css ADDED
@@ -0,0 +1,35 @@
1
+ /* ============================================================================
2
+ * glasscn-core/palettes/emerald-mist — Emerald Mist —— 墨绿底 + 翠绿金光斑。沉稳，适合金融与仪表盘
3
+ * ----------------------------------------------------------------------------
4
+ * 两种用法：
5
+ * 1. 静态套用 —— @import 本文件，全站生效
6
+ * 2. 运行时切换 —— <html data-glass-palette="emerald-mist">
7
+ *
8
+ * 玻璃填充在所有调色里都是白色中性，这里只换背景光斑、强调色和文字色调。
9
+ * ==========================================================================*/
10
+
11
+ :root {
12
+ --glass-bg-base: #051a0a;
13
+ --glass-bg-mid: #0a2a14;
14
+ --glass-blob-1: #10b981;
15
+ --glass-blob-2: #d4af37;
16
+ --glass-blob-3: #065f46;
17
+ --glass-accent: #34d399;
18
+ --glass-accent-hover: #6ee7b7;
19
+ --glass-accent-fg: #04170a;
20
+ --glass-text-rgb: 240 253 244;
21
+ color-scheme: dark;
22
+ }
23
+
24
+ :root[data-glass-palette="emerald-mist"] {
25
+ --glass-bg-base: #051a0a;
26
+ --glass-bg-mid: #0a2a14;
27
+ --glass-blob-1: #10b981;
28
+ --glass-blob-2: #d4af37;
29
+ --glass-blob-3: #065f46;
30
+ --glass-accent: #34d399;
31
+ --glass-accent-hover: #6ee7b7;
32
+ --glass-accent-fg: #04170a;
33
+ --glass-text-rgb: 240 253 244;
34
+ color-scheme: dark;
35
+ }
package/src/palettes/liquid-light.css ADDED
@@ -0,0 +1,99 @@
1
+ /* ============================================================================
2
+ * glasscn-core/palettes/liquid-light — Liquid Glass / Light —— 暖米白底 + 紫青橙光斑。唯一的浅色调色，玻璃更实、高光更厚
3
+ * ----------------------------------------------------------------------------
4
+ * 两种用法：
5
+ * 1. 静态套用 —— @import 本文件，全站生效
6
+ * 2. 运行时切换 —— <html data-glass-palette="liquid-light">
7
+ *
8
+ * 玻璃填充在所有调色里都是白色中性，这里只换背景光斑、强调色和文字色调。
9
+ * ==========================================================================*/
10
+
11
+ :root {
12
+ --glass-bg-base: #f0ebe3;
13
+ --glass-bg-mid: #e6dfd4;
14
+ --glass-blob-1: #a78bfa;
15
+ --glass-blob-2: #5eead4;
16
+ --glass-blob-3: #fb923c;
17
+ --glass-accent: #7c3aed;
18
+ --glass-accent-hover: #8b5cf6;
19
+ --glass-accent-fg: #faf7ff;
20
+ color-scheme: light;
21
+
22
+ /* 浅底上的玻璃：白色填充在白底上几乎看不见，所以要拉高不透明度，
23
+ 并把描边换成暗色 —— 否则面板边界会整个消失。 */
24
+ --glass-fill: 0.45;
25
+ --glass-fill-hover: 0.58;
26
+ --glass-border-alpha: 0.6;
27
+ --glass-border-alpha-hover: 0.8;
28
+
29
+ /* 浅色下玻璃更厚：blur 24 / saturate 200%，高光更亮更粗，
30
+ 并且底边多一道极淡的暗线 —— 浅底上只有顶高光会让面板"飘"，
31
+ 底边那道暗线把它按回平面里。 */
32
+ --glass-blur-base: 24px;
33
+ --glass-saturate: 200%;
34
+ --glass-specular: 0.8;
35
+ --glass-specular-size: 0 2px 0 0;
36
+ --glass-underline: 0 -1px 0 0 rgb(0 0 0 / 0.06) inset;
37
+
38
+ --glass-shadow-base: 0 8px 32px rgb(0 0 0 / 0.12);
39
+ --glass-shadow-hover: 0 16px 48px rgb(0 0 0 / 0.18);
40
+
41
+ /* 浅色下文字是近黑，不是深灰 —— 深灰压在接近透明的玻璃上会糊 */
42
+ --glass-text-rgb: 20 16 12;
43
+ --glass-text-primary: rgb(var(--glass-text-rgb) / 0.9);
44
+ --glass-text-secondary: rgb(var(--glass-text-rgb) / 0.62);
45
+ --glass-text-muted: rgb(var(--glass-text-rgb) / 0.45);
46
+
47
+ --glass-danger: #b91c1c;
48
+ --glass-danger-fg: #fff5f5;
49
+ }
50
+
51
+ :root[data-glass-palette="liquid-light"] {
52
+ --glass-bg-base: #f0ebe3;
53
+ --glass-bg-mid: #e6dfd4;
54
+ --glass-blob-1: #a78bfa;
55
+ --glass-blob-2: #5eead4;
56
+ --glass-blob-3: #fb923c;
57
+ --glass-accent: #7c3aed;
58
+ --glass-accent-hover: #8b5cf6;
59
+ --glass-accent-fg: #faf7ff;
60
+ color-scheme: light;
61
+
62
+ /* 浅底上的玻璃：白色填充在白底上几乎看不见，所以要拉高不透明度，
63
+ 并把描边换成暗色 —— 否则面板边界会整个消失。 */
64
+ --glass-fill: 0.45;
65
+ --glass-fill-hover: 0.58;
66
+ --glass-border-alpha: 0.6;
67
+ --glass-border-alpha-hover: 0.8;
68
+
69
+ /* 浅色下玻璃更厚：blur 24 / saturate 200%，高光更亮更粗，
70
+ 并且底边多一道极淡的暗线 —— 浅底上只有顶高光会让面板"飘"，
71
+ 底边那道暗线把它按回平面里。 */
72
+ --glass-blur-base: 24px;
73
+ --glass-saturate: 200%;
74
+ --glass-specular: 0.8;
75
+ --glass-specular-size: 0 2px 0 0;
76
+ --glass-underline: 0 -1px 0 0 rgb(0 0 0 / 0.06) inset;
77
+
78
+ --glass-shadow-base: 0 8px 32px rgb(0 0 0 / 0.12);
79
+ --glass-shadow-hover: 0 16px 48px rgb(0 0 0 / 0.18);
80
+
81
+ /* 浅色下文字是近黑，不是深灰 —— 深灰压在接近透明的玻璃上会糊 */
82
+ --glass-text-rgb: 20 16 12;
83
+ --glass-text-primary: rgb(var(--glass-text-rgb) / 0.9);
84
+ --glass-text-secondary: rgb(var(--glass-text-rgb) / 0.62);
85
+ --glass-text-muted: rgb(var(--glass-text-rgb) / 0.45);
86
+
87
+ --glass-danger: #b91c1c;
88
+ --glass-danger-fg: #fff5f5;
89
+ }
90
+
91
+ /* 浅色下四档填充一起抬，否则 flat 档（输入框、徽章）会彻底消失 */
92
+ :root, :root[data-glass-palette="liquid-light"] {
93
+ --glass-fill-flat: 0.36;
94
+ --glass-fill-raised: 0.45;
95
+ --glass-fill-overlay: 0.58;
96
+ --glass-fill-modal: 0.7;
97
+ --glass-fill-nav: 0.42;
98
+ --glass-scrim: rgb(60 45 30 / 0.35);
99
+ }
package/src/palettes/ocean-frost.css ADDED
@@ -0,0 +1,35 @@
1
+ /* ============================================================================
2
+ * glasscn-core/palettes/ocean-frost — Ocean Frost —— 深海蓝底 + 青蓝靛光斑。冷静、克制，适合数据密集界面
3
+ * ----------------------------------------------------------------------------
4
+ * 两种用法：
5
+ * 1. 静态套用 —— @import 本文件，全站生效
6
+ * 2. 运行时切换 —— <html data-glass-palette="ocean-frost">
7
+ *
8
+ * 玻璃填充在所有调色里都是白色中性，这里只换背景光斑、强调色和文字色调。
9
+ * ==========================================================================*/
10
+
11
+ :root {
12
+ --glass-bg-base: #030d1a;
13
+ --glass-bg-mid: #07182b;
14
+ --glass-blob-1: #06b6d4;
15
+ --glass-blob-2: #0ea5e9;
16
+ --glass-blob-3: #6366f1;
17
+ --glass-accent: #22d3ee;
18
+ --glass-accent-hover: #67e8f9;
19
+ --glass-accent-fg: #031018;
20
+ --glass-text-rgb: 240 249 255;
21
+ color-scheme: dark;
22
+ }
23
+
24
+ :root[data-glass-palette="ocean-frost"] {
25
+ --glass-bg-base: #030d1a;
26
+ --glass-bg-mid: #07182b;
27
+ --glass-blob-1: #06b6d4;
28
+ --glass-blob-2: #0ea5e9;
29
+ --glass-blob-3: #6366f1;
30
+ --glass-accent: #22d3ee;
31
+ --glass-accent-hover: #67e8f9;
32
+ --glass-accent-fg: #031018;
33
+ --glass-text-rgb: 240 249 255;
34
+ color-scheme: dark;
35
+ }
package/src/palettes/soft-bloom.css ADDED
@@ -0,0 +1,35 @@
1
+ /* ============================================================================
2
+ * glasscn-core/palettes/soft-bloom — Soft Bloom —— 紫调暗底 + 紫粉靛光斑。柔和、有情绪，适合内容型与创意类界面
3
+ * ----------------------------------------------------------------------------
4
+ * 两种用法：
5
+ * 1. 静态套用 —— @import 本文件，全站生效
6
+ * 2. 运行时切换 —— <html data-glass-palette="soft-bloom">
7
+ *
8
+ * 玻璃填充在所有调色里都是白色中性，这里只换背景光斑、强调色和文字色调。
9
+ * ==========================================================================*/
10
+
11
+ :root {
12
+ --glass-bg-base: #1a0e1c;
13
+ --glass-bg-mid: #2a1830;
14
+ --glass-blob-1: #c084fc;
15
+ --glass-blob-2: #f472b6;
16
+ --glass-blob-3: #818cf8;
17
+ --glass-accent: #e879f9;
18
+ --glass-accent-hover: #f0abfc;
19
+ --glass-accent-fg: #1a0a1c;
20
+ --glass-text-rgb: 253 244 255;
21
+ color-scheme: dark;
22
+ }
23
+
24
+ :root[data-glass-palette="soft-bloom"] {
25
+ --glass-bg-base: #1a0e1c;
26
+ --glass-bg-mid: #2a1830;
27
+ --glass-blob-1: #c084fc;
28
+ --glass-blob-2: #f472b6;
29
+ --glass-blob-3: #818cf8;
30
+ --glass-accent: #e879f9;
31
+ --glass-accent-hover: #f0abfc;
32
+ --glass-accent-fg: #1a0a1c;
33
+ --glass-text-rgb: 253 244 255;
34
+ color-scheme: dark;
35
+ }
package/src/palettes/switchable.css ADDED
@@ -0,0 +1,129 @@
1
+ /* ============================================================================
2
+ * glasscn-core/palettes/switchable — 运行时切换调色
3
+ * ----------------------------------------------------------------------------
4
+ * document.documentElement.dataset.glassPalette = "ocean-frost"
5
+ *
6
+ * 特异性 :root[data-glass-palette] = (0,2,0)，稳压 tokens/palette.css 的
7
+ * :root = (0,1,0)，所以 @import 顺序不影响结果。
8
+ * 不写属性时回落到 Ember & Slate。
9
+ * ==========================================================================*/
10
+
11
+ /* --- Ember & Slate —— 暖调近黑 + 琥珀赭石。默认，适合产品后台与工具型界面 --- */
12
+ :root[data-glass-palette="ember-slate"] {
13
+ --glass-bg-base: #100d0a;
14
+ --glass-bg-mid: #1c1510;
15
+ --glass-blob-1: #c2410c;
16
+ --glass-blob-2: #78350f;
17
+ --glass-blob-3: #f59e0b;
18
+ --glass-accent: #f59e0b;
19
+ --glass-accent-hover: #fbbf24;
20
+ --glass-accent-fg: #1a1206;
21
+ --glass-text-rgb: 255 248 240;
22
+ color-scheme: dark;
23
+ }
24
+
25
+ /* --- Ocean Frost —— 深海蓝底 + 青蓝靛光斑。冷静、克制，适合数据密集界面 --- */
26
+ :root[data-glass-palette="ocean-frost"] {
27
+ --glass-bg-base: #030d1a;
28
+ --glass-bg-mid: #07182b;
29
+ --glass-blob-1: #06b6d4;
30
+ --glass-blob-2: #0ea5e9;
31
+ --glass-blob-3: #6366f1;
32
+ --glass-accent: #22d3ee;
33
+ --glass-accent-hover: #67e8f9;
34
+ --glass-accent-fg: #031018;
35
+ --glass-text-rgb: 240 249 255;
36
+ color-scheme: dark;
37
+ }
38
+
39
+ /* --- Soft Bloom —— 紫调暗底 + 紫粉靛光斑。柔和、有情绪，适合内容型与创意类界面 --- */
40
+ :root[data-glass-palette="soft-bloom"] {
41
+ --glass-bg-base: #1a0e1c;
42
+ --glass-bg-mid: #2a1830;
43
+ --glass-blob-1: #c084fc;
44
+ --glass-blob-2: #f472b6;
45
+ --glass-blob-3: #818cf8;
46
+ --glass-accent: #e879f9;
47
+ --glass-accent-hover: #f0abfc;
48
+ --glass-accent-fg: #1a0a1c;
49
+ --glass-text-rgb: 253 244 255;
50
+ color-scheme: dark;
51
+ }
52
+
53
+ /* --- Warm Sunset —— 红褐底 + 橙粉琥珀光斑。热烈，适合营销页与落地页 --- */
54
+ :root[data-glass-palette="warm-sunset"] {
55
+ --glass-bg-base: #1a0a0a;
56
+ --glass-bg-mid: #2b1210;
57
+ --glass-blob-1: #f97316;
58
+ --glass-blob-2: #ec4899;
59
+ --glass-blob-3: #f59e0b;
60
+ --glass-accent: #fb923c;
61
+ --glass-accent-hover: #fdba74;
62
+ --glass-accent-fg: #1a0a06;
63
+ --glass-text-rgb: 255 245 237;
64
+ color-scheme: dark;
65
+ }
66
+
67
+ /* --- Emerald Mist —— 墨绿底 + 翠绿金光斑。沉稳，适合金融与仪表盘 --- */
68
+ :root[data-glass-palette="emerald-mist"] {
69
+ --glass-bg-base: #051a0a;
70
+ --glass-bg-mid: #0a2a14;
71
+ --glass-blob-1: #10b981;
72
+ --glass-blob-2: #d4af37;
73
+ --glass-blob-3: #065f46;
74
+ --glass-accent: #34d399;
75
+ --glass-accent-hover: #6ee7b7;
76
+ --glass-accent-fg: #04170a;
77
+ --glass-text-rgb: 240 253 244;
78
+ color-scheme: dark;
79
+ }
80
+
81
+ /* --- Liquid Glass / Light —— 暖米白底 + 紫青橙光斑。唯一的浅色调色，玻璃更实、高光更厚 --- */
82
+ :root[data-glass-palette="liquid-light"] {
83
+ --glass-bg-base: #f0ebe3;
84
+ --glass-bg-mid: #e6dfd4;
85
+ --glass-blob-1: #a78bfa;
86
+ --glass-blob-2: #5eead4;
87
+ --glass-blob-3: #fb923c;
88
+ --glass-accent: #7c3aed;
89
+ --glass-accent-hover: #8b5cf6;
90
+ --glass-accent-fg: #faf7ff;
91
+ color-scheme: light;
92
+
93
+ /* 浅底上的玻璃：白色填充在白底上几乎看不见，所以要拉高不透明度，
94
+ 并把描边换成暗色 —— 否则面板边界会整个消失。 */
95
+ --glass-fill: 0.45;
96
+ --glass-fill-hover: 0.58;
97
+ --glass-border-alpha: 0.6;
98
+ --glass-border-alpha-hover: 0.8;
99
+
100
+ /* 浅色下玻璃更厚：blur 24 / saturate 200%，高光更亮更粗，
101
+ 并且底边多一道极淡的暗线 —— 浅底上只有顶高光会让面板"飘"，
102
+ 底边那道暗线把它按回平面里。 */
103
+ --glass-blur-base: 24px;
104
+ --glass-saturate: 200%;
105
+ --glass-specular: 0.8;
106
+ --glass-specular-size: 0 2px 0 0;
107
+ --glass-underline: 0 -1px 0 0 rgb(0 0 0 / 0.06) inset;
108
+
109
+ --glass-shadow-base: 0 8px 32px rgb(0 0 0 / 0.12);
110
+ --glass-shadow-hover: 0 16px 48px rgb(0 0 0 / 0.18);
111
+
112
+ /* 浅色下文字是近黑，不是深灰 —— 深灰压在接近透明的玻璃上会糊 */
113
+ --glass-text-rgb: 20 16 12;
114
+ --glass-text-primary: rgb(var(--glass-text-rgb) / 0.9);
115
+ --glass-text-secondary: rgb(var(--glass-text-rgb) / 0.62);
116
+ --glass-text-muted: rgb(var(--glass-text-rgb) / 0.45);
117
+
118
+ --glass-danger: #b91c1c;
119
+ --glass-danger-fg: #fff5f5;
120
+ }
121
+
122
+ :root[data-glass-palette="liquid-light"] {
123
+ --glass-fill-flat: 0.36;
124
+ --glass-fill-raised: 0.45;
125
+ --glass-fill-overlay: 0.58;
126
+ --glass-fill-modal: 0.7;
127
+ --glass-fill-nav: 0.42;
128
+ --glass-scrim: rgb(60 45 30 / 0.35);
129
+ }
package/src/palettes/warm-sunset.css ADDED
@@ -0,0 +1,35 @@
1
+ /* ============================================================================
2
+ * glasscn-core/palettes/warm-sunset — Warm Sunset —— 红褐底 + 橙粉琥珀光斑。热烈，适合营销页与落地页
3
+ * ----------------------------------------------------------------------------
4
+ * 两种用法：
5
+ * 1. 静态套用 —— @import 本文件，全站生效
6
+ * 2. 运行时切换 —— <html data-glass-palette="warm-sunset">
7
+ *
8
+ * 玻璃填充在所有调色里都是白色中性，这里只换背景光斑、强调色和文字色调。
9
+ * ==========================================================================*/
10
+
11
+ :root {
12
+ --glass-bg-base: #1a0a0a;
13
+ --glass-bg-mid: #2b1210;
14
+ --glass-blob-1: #f97316;
15
+ --glass-blob-2: #ec4899;
16
+ --glass-blob-3: #f59e0b;
17
+ --glass-accent: #fb923c;
18
+ --glass-accent-hover: #fdba74;
19
+ --glass-accent-fg: #1a0a06;
20
+ --glass-text-rgb: 255 245 237;
21
+ color-scheme: dark;
22
+ }
23
+
24
+ :root[data-glass-palette="warm-sunset"] {
25
+ --glass-bg-base: #1a0a0a;
26
+ --glass-bg-mid: #2b1210;
27
+ --glass-blob-1: #f97316;
28
+ --glass-blob-2: #ec4899;
29
+ --glass-blob-3: #f59e0b;
30
+ --glass-accent: #fb923c;
31
+ --glass-accent-hover: #fdba74;
32
+ --glass-accent-fg: #1a0a06;
33
+ --glass-text-rgb: 255 245 237;
34
+ color-scheme: dark;
35
+ }
package/src/primitives/backdrop.css ADDED
@@ -0,0 +1,128 @@
1
+ /* ============================================================================
2
+ * glasscn-core — 背景系统 (Backdrop)
3
+ * ----------------------------------------------------------------------------
4
+ * 这一层不是装饰，是整套设计的颜色来源。
5
+ *
6
+ * 玻璃只在丰富、有颜色的背景上才对。平底或灰底会产出"脏玻璃"——
7
+ * 模糊拾取不到任何颜色，面板看起来就是一块灰板。
8
+ *
9
+ * 三团光斑，各自缓慢漂移：
10
+ * blob 1 650px 左上 opacity .55
11
+ * blob 2 450px 右下 delay -4s
12
+ * blob 3 350px 居中 delay -7s
13
+ *
14
+ * 只动 transform（translate + scale）。绝不动 color 或 filter ——
15
+ * 那些属性每帧都要重新光栅化整块模糊，一动就掉帧。
16
+ * ==========================================================================*/
17
+
18
+ @keyframes glass-blob-float {
19
+ 0%,
20
+ 100% {
21
+ transform: translate3d(0, 0, 0) scale(1);
22
+ }
23
+ 33% {
24
+ transform: translate3d(6%, -8%, 0) scale(1.12);
25
+ }
26
+ 66% {
27
+ transform: translate3d(-5%, 6%, 0) scale(0.92);
28
+ }
29
+ }
30
+
31
+ @utility glass-backdrop {
32
+ position: relative;
33
+ isolation: isolate;
34
+ min-height: 100vh;
35
+ background-color: var(--glass-bg-base);
36
+ background-image: linear-gradient(
37
+ 160deg,
38
+ var(--glass-bg-base) 0%,
39
+ var(--glass-bg-mid) 55%,
40
+ var(--glass-bg-base) 100%
41
+ );
42
+ color: var(--glass-text-primary);
43
+ font-family: var(--glass-font-body);
44
+
45
+ /* 光斑容器固定在视口上：内容滚动时背景不动，玻璃面板扫过不同的颜色区域，
46
+ 这正是"手里握着一块玻璃"的感觉来源。
47
+ 用 position: fixed 的伪元素而不是 background-attachment: fixed ——
48
+ 后者在 iOS Safari 上完全不生效。 */
49
+ &::before,
50
+ &::after {
51
+ content: "";
52
+ position: fixed;
53
+ z-index: -1;
54
+ border-radius: 50%;
55
+ pointer-events: none;
56
+ will-change: transform;
57
+ animation: glass-blob-float 10s var(--glass-ease-in-out) infinite;
58
+ }
59
+
60
+ /* blob 1 —— 左上，最大最亮 */
61
+ &::before {
62
+ width: 650px;
63
+ height: 650px;
64
+ top: -12%;
65
+ left: -8%;
66
+ opacity: 0.55;
67
+ background: radial-gradient(
68
+ circle at 50% 50%,
69
+ var(--glass-blob-1) 0%,
70
+ transparent 68%
71
+ );
72
+ filter: blur(90px);
73
+ }
74
+
75
+ /* blob 2 —— 右下 */
76
+ &::after {
77
+ width: 450px;
78
+ height: 450px;
79
+ right: -6%;
80
+ bottom: -10%;
81
+ opacity: 0.5;
82
+ background: radial-gradient(
83
+ circle at 50% 50%,
84
+ var(--glass-blob-2) 0%,
85
+ transparent 68%
86
+ );
87
+ filter: blur(90px);
88
+ animation-delay: -4s;
89
+ }
90
+ }
91
+
92
+ /* blob 3 —— 居中偏右，要单独一个元素承载。
93
+ 放在 <div class="glass-blob-accent"> 里，或者挂在内容容器上。 */
94
+ @utility glass-blob-accent {
95
+ position: relative;
96
+
97
+ &::before {
98
+ content: "";
99
+ position: fixed;
100
+ z-index: -1;
101
+ top: 38%;
102
+ left: 46%;
103
+ width: 350px;
104
+ height: 350px;
105
+ border-radius: 50%;
106
+ pointer-events: none;
107
+ opacity: 0.42;
108
+ background: radial-gradient(
109
+ circle at 50% 50%,
110
+ var(--glass-blob-3) 0%,
111
+ transparent 68%
112
+ );
113
+ filter: blur(90px);
114
+ will-change: transform;
115
+ animation: glass-blob-float 10s var(--glass-ease-in-out) -7s infinite;
116
+ }
117
+ }
118
+
119
+ /* --- 减少动效：光斑停在原位，但保留颜色 --------------------------------- */
120
+ /* 关键是不要把光斑一起删掉 —— 删了玻璃就没有颜色可折射，
121
+ 整个界面会退化成灰板。用户要的是"别动"，不是"别有颜色"。 */
122
+ @media (prefers-reduced-motion: reduce) {
123
+ .glass-backdrop::before,
124
+ .glass-backdrop::after,
125
+ .glass-blob-accent::before {
126
+ animation: none;
127
+ }
128
+ }