organify-ui 0.3.1 → 0.3.2
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.
- package/dist/{chunk-3UW42YIP.js → chunk-A2H2TBSV.js} +6 -24
- package/dist/chunk-A2H2TBSV.js.map +1 -0
- package/dist/{chunk-TJWTQNS3.js → chunk-GQZMW7XN.js} +11 -11
- package/dist/chunk-GQZMW7XN.js.map +1 -0
- package/dist/{chunk-HY7M3VZM.js → chunk-MZKEDV5W.js} +9 -9
- package/dist/{chunk-HY7M3VZM.js.map → chunk-MZKEDV5W.js.map} +1 -1
- package/dist/chunk-UGX6D3AO.js +327 -0
- package/dist/chunk-UGX6D3AO.js.map +1 -0
- package/dist/components/chat/index.js +2 -2
- package/dist/components/notifications/index.js +2 -2
- package/dist/icons/index.js +1 -1
- package/dist/index.js +11 -11
- package/dist/index.js.map +1 -1
- package/dist/tailwind-preset.js +33 -27
- package/dist/tailwind-preset.js.map +1 -1
- package/dist/tokens/index.d.ts +135 -132
- package/dist/tokens/index.js +1 -1
- package/package.json +1 -1
- package/src/globals.css +394 -392
- package/dist/chunk-3UW42YIP.js.map +0 -1
- package/dist/chunk-TJWTQNS3.js.map +0 -1
- package/dist/chunk-XPB2HZCF.js +0 -326
- package/dist/chunk-XPB2HZCF.js.map +0 -1
package/src/globals.css
CHANGED
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
@source "../dist";
|
|
15
15
|
|
|
16
16
|
/* ═══════════════════════════════════════════════════════
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
Space Grotesk — Primary font
|
|
18
|
+
Inter kept as secondary/fallback.
|
|
19
19
|
═══════════════════════════════════════════════════════ */
|
|
20
|
-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
20
|
+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
|
|
21
21
|
|
|
22
22
|
@font-face {
|
|
23
23
|
font-family: 'Space Grotesk';
|
|
@@ -31,22 +31,22 @@
|
|
|
31
31
|
Tailwind v4 — @theme (CSS-first token registration)
|
|
32
32
|
═══════════════════════════════════════════════════════ */
|
|
33
33
|
@theme {
|
|
34
|
-
/* Brand */
|
|
35
|
-
--color-primary: #
|
|
36
|
-
--color-primary-light: #
|
|
37
|
-
--color-primary-soft: #
|
|
38
|
-
--color-primary-glow: #
|
|
39
|
-
--color-primary-electric: #
|
|
40
|
-
--color-primary-electric-light: #
|
|
41
|
-
--color-primary-dark: #
|
|
42
|
-
|
|
43
|
-
/* Neutrals —
|
|
44
|
-
--color-void: #
|
|
45
|
-
--color-surface: #
|
|
46
|
-
--color-elevated: #
|
|
47
|
-
--color-cream-base: #
|
|
34
|
+
/* Brand — Vibrant Violet */
|
|
35
|
+
--color-primary: #7C3AED;
|
|
36
|
+
--color-primary-light: #A78BFA;
|
|
37
|
+
--color-primary-soft: #6D28D9;
|
|
38
|
+
--color-primary-glow: #8B5CF6;
|
|
39
|
+
--color-primary-electric: #8B5CF6;
|
|
40
|
+
--color-primary-electric-light: #C4B5FD;
|
|
41
|
+
--color-primary-dark: #4C1D95;
|
|
42
|
+
|
|
43
|
+
/* Neutrals — purple-tinted dark base */
|
|
44
|
+
--color-void: #0D0A1A;
|
|
45
|
+
--color-surface: #110E22;
|
|
46
|
+
--color-elevated: #1A1530;
|
|
47
|
+
--color-cream-base: #F8F6FC;
|
|
48
48
|
--color-cream-surface: #FFFFFF;
|
|
49
|
-
--color-cream-border: #
|
|
49
|
+
--color-cream-border: #DDD8EB;
|
|
50
50
|
|
|
51
51
|
/* Semantic */
|
|
52
52
|
--color-success: #10B981;
|
|
@@ -55,21 +55,21 @@
|
|
|
55
55
|
--color-warning: #F59E0B;
|
|
56
56
|
--color-warning-light: #FBBF24;
|
|
57
57
|
--color-warning-surface: rgba(245, 158, 11, 0.10);
|
|
58
|
-
--color-error: #
|
|
59
|
-
--color-error-light: #
|
|
60
|
-
--color-error-surface: rgba(
|
|
58
|
+
--color-error: #EF4444;
|
|
59
|
+
--color-error-light: #F87171;
|
|
60
|
+
--color-error-surface: rgba(239, 68, 68, 0.12);
|
|
61
61
|
--color-info: #3B82F6;
|
|
62
62
|
--color-info-light: #60A5FA;
|
|
63
63
|
--color-info-surface: rgba(59, 130, 246, 0.10);
|
|
64
64
|
|
|
65
|
-
/* Glass —
|
|
66
|
-
--color-glass-bg: rgba(
|
|
67
|
-
--color-glass-bg-heavy: rgba(
|
|
68
|
-
--color-glass-surface: rgba(255, 255, 255, 0.
|
|
69
|
-
--color-glass-border: rgba(
|
|
70
|
-
--color-glass-border-medium: rgba(
|
|
71
|
-
--color-glass-border-strong: rgba(
|
|
72
|
-
--color-glass-highlight: rgba(255, 255, 255, 0.
|
|
65
|
+
/* Glass — purple-tinted transparency */
|
|
66
|
+
--color-glass-bg: rgba(124, 58, 237, 0.06);
|
|
67
|
+
--color-glass-bg-heavy: rgba(124, 58, 237, 0.12);
|
|
68
|
+
--color-glass-surface: rgba(255, 255, 255, 0.05);
|
|
69
|
+
--color-glass-border: rgba(167, 139, 250, 0.15);
|
|
70
|
+
--color-glass-border-medium: rgba(167, 139, 250, 0.25);
|
|
71
|
+
--color-glass-border-strong: rgba(167, 139, 250, 0.40);
|
|
72
|
+
--color-glass-highlight: rgba(255, 255, 255, 0.06);
|
|
73
73
|
|
|
74
74
|
/* White transparency scale */
|
|
75
75
|
--color-white-3: rgba(255, 255, 255, 0.03);
|
|
@@ -82,44 +82,44 @@
|
|
|
82
82
|
--color-white-80: rgba(255, 255, 255, 0.80);
|
|
83
83
|
|
|
84
84
|
/* Card aliases */
|
|
85
|
-
--color-card-surface: #
|
|
86
|
-
--color-card-bg: #
|
|
85
|
+
--color-card-surface: #110E22;
|
|
86
|
+
--color-card-bg: #13102A;
|
|
87
87
|
|
|
88
88
|
/* Semantic aliases */
|
|
89
89
|
--color-semantic-success: #10B981;
|
|
90
90
|
--color-semantic-warning: #F59E0B;
|
|
91
|
-
--color-semantic-error: #
|
|
91
|
+
--color-semantic-error: #EF4444;
|
|
92
92
|
--color-semantic-info: #3B82F6;
|
|
93
93
|
|
|
94
94
|
/* Cream theme tokens */
|
|
95
95
|
--color-cream-card: #FFFFFF;
|
|
96
|
-
--color-cream-primary: #
|
|
97
|
-
--color-cream-secondary: #
|
|
98
|
-
--color-cream-muted: #
|
|
99
|
-
--color-cream-text: #
|
|
96
|
+
--color-cream-primary: #6D28D9;
|
|
97
|
+
--color-cream-secondary: #7B7394;
|
|
98
|
+
--color-cream-muted: #A49BBF;
|
|
99
|
+
--color-cream-text: #1A1530;
|
|
100
100
|
|
|
101
101
|
/* Status tokens */
|
|
102
|
-
--color-in-flow-bg: rgba(
|
|
103
|
-
--color-in-flow-text: #
|
|
104
|
-
--color-in-flow-border: rgba(
|
|
105
|
-
--color-deep-work-bg: rgba(217, 70, 239, 0.
|
|
102
|
+
--color-in-flow-bg: rgba(124, 58, 237, 0.20);
|
|
103
|
+
--color-in-flow-text: #C4B5FD;
|
|
104
|
+
--color-in-flow-border: rgba(124, 58, 237, 0.30);
|
|
105
|
+
--color-deep-work-bg: rgba(217, 70, 239, 0.12);
|
|
106
106
|
--color-deep-work-text: #f0abfc;
|
|
107
|
-
--color-deep-work-border: rgba(217, 70, 239, 0.
|
|
107
|
+
--color-deep-work-border: rgba(217, 70, 239, 0.22);
|
|
108
108
|
--color-resting-bg: rgba(245, 158, 11, 0.15);
|
|
109
109
|
--color-resting-text: #fde68a;
|
|
110
110
|
--color-resting-border: rgba(245, 158, 11, 0.30);
|
|
111
|
-
--color-disconnected-bg: rgba(
|
|
111
|
+
--color-disconnected-bg: rgba(239, 68, 68, 0.15);
|
|
112
112
|
--color-disconnected-text: #fecdd3;
|
|
113
|
-
--color-disconnected-border: rgba(
|
|
113
|
+
--color-disconnected-border: rgba(239, 68, 68, 0.30);
|
|
114
114
|
|
|
115
115
|
/* Fluid theme tokens */
|
|
116
|
-
--color-fluid-bg: rgba(
|
|
117
|
-
--color-fluid-surface: #
|
|
118
|
-
--color-fluid-border: rgba(
|
|
119
|
-
--color-fluid-primary-soft: rgba(124,
|
|
116
|
+
--color-fluid-bg: rgba(124, 58, 237, 0.05);
|
|
117
|
+
--color-fluid-surface: #1A1530;
|
|
118
|
+
--color-fluid-border: rgba(167, 139, 250, 0.08);
|
|
119
|
+
--color-fluid-primary-soft: rgba(124, 58, 237, 0.20);
|
|
120
120
|
|
|
121
121
|
/* Typography */
|
|
122
|
-
--font-sans: '
|
|
122
|
+
--font-sans: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
|
|
123
123
|
--font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
|
|
124
124
|
|
|
125
125
|
--font-size-display-xl: 5rem;
|
|
@@ -152,36 +152,36 @@
|
|
|
152
152
|
--radius-geo-inv: 2rem 0.5rem 2rem 0.5rem;
|
|
153
153
|
--radius-pill-asym: 4px 16px 16px 4px;
|
|
154
154
|
|
|
155
|
-
/* Shadows —
|
|
156
|
-
--shadow-glass: 0 24px 80px -15px rgba(
|
|
157
|
-
--shadow-glass-sm: 0 8px 32px -8px rgba(
|
|
158
|
-
--shadow-glass-lg: 0 32px 100px -20px rgba(
|
|
159
|
-
--shadow-glass-xl: 0 40px 120px -20px rgba(
|
|
160
|
-
--shadow-glow: 0 0 20px rgba(
|
|
161
|
-
--shadow-glow-sm: 0 0 10px rgba(
|
|
162
|
-
--shadow-glow-lg: 0 0 40px rgba(
|
|
163
|
-
--shadow-glow-soft: 0 4px 30px rgba(
|
|
164
|
-
--shadow-glow-primary: 0 0 20px rgba(
|
|
165
|
-
--shadow-glow-error: 0 0 20px rgba(
|
|
155
|
+
/* Shadows — violet-tinted depth */
|
|
156
|
+
--shadow-glass: 0 24px 80px -15px rgba(13, 10, 26, 0.60);
|
|
157
|
+
--shadow-glass-sm: 0 8px 32px -8px rgba(13, 10, 26, 0.50);
|
|
158
|
+
--shadow-glass-lg: 0 32px 100px -20px rgba(13, 10, 26, 0.70);
|
|
159
|
+
--shadow-glass-xl: 0 40px 120px -20px rgba(13, 10, 26, 0.80);
|
|
160
|
+
--shadow-glow: 0 0 20px rgba(124, 58, 237, 0.40);
|
|
161
|
+
--shadow-glow-sm: 0 0 10px rgba(124, 58, 237, 0.30);
|
|
162
|
+
--shadow-glow-lg: 0 0 40px rgba(124, 58, 237, 0.50);
|
|
163
|
+
--shadow-glow-soft: 0 4px 30px rgba(124, 58, 237, 0.18);
|
|
164
|
+
--shadow-glow-primary: 0 0 20px rgba(124, 58, 237, 0.35), 0 4px 12px rgba(124, 58, 237, 0.20);
|
|
165
|
+
--shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.30), 0 4px 12px rgba(239, 68, 68, 0.20);
|
|
166
166
|
--shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.20);
|
|
167
167
|
--shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.20);
|
|
168
168
|
--shadow-glow-info: 0 0 20px rgba(59, 130, 246, 0.20);
|
|
169
|
-
--shadow-neon: 0 0 10px rgba(
|
|
170
|
-
--shadow-neon-lg: 0 0 30px rgba(
|
|
171
|
-
--shadow-neon-glow: 0 0 30px rgba(
|
|
172
|
-
--shadow-inner-light: inset 0 1px 0 0 rgba(
|
|
173
|
-
--shadow-cream-sm: 0 2px 8px rgba(
|
|
174
|
-
--shadow-cream-md: 0 4px 16px rgba(
|
|
175
|
-
--shadow-cream-lg: 0 8px 32px rgba(
|
|
176
|
-
--shadow-cream-glow: 0 0 15px rgba(
|
|
177
|
-
--shadow-cream-btn: 0 2px 8px rgba(
|
|
178
|
-
--shadow-cream-btn-primary: 0 4px 16px rgba(
|
|
179
|
-
--shadow-soft-glow: 0 4px 30px rgba(
|
|
169
|
+
--shadow-neon: 0 0 10px rgba(124, 58, 237, 0.40), 0 0 20px rgba(124, 58, 237, 0.20);
|
|
170
|
+
--shadow-neon-lg: 0 0 30px rgba(124, 58, 237, 0.45), 0 0 60px rgba(124, 58, 237, 0.20);
|
|
171
|
+
--shadow-neon-glow: 0 0 30px rgba(124, 58, 237, 0.45), 0 0 60px rgba(124, 58, 237, 0.20);
|
|
172
|
+
--shadow-inner-light: inset 0 1px 0 0 rgba(167, 139, 250, 0.08);
|
|
173
|
+
--shadow-cream-sm: 0 2px 8px rgba(124, 58, 237, 0.03);
|
|
174
|
+
--shadow-cream-md: 0 4px 16px rgba(124, 58, 237, 0.05);
|
|
175
|
+
--shadow-cream-lg: 0 8px 32px rgba(124, 58, 237, 0.08);
|
|
176
|
+
--shadow-cream-glow: 0 0 15px rgba(124, 58, 237, 0.12);
|
|
177
|
+
--shadow-cream-btn: 0 2px 8px rgba(124, 58, 237, 0.10);
|
|
178
|
+
--shadow-cream-btn-primary: 0 4px 16px rgba(124, 58, 237, 0.22);
|
|
179
|
+
--shadow-soft-glow: 0 4px 30px rgba(13, 10, 26, 0.15);
|
|
180
180
|
|
|
181
181
|
/* Liquid Glass shadows */
|
|
182
|
-
--shadow-liquid-glass: 0 8px 32px rgba(13, 10, 26, 0.60), inset 0 1px 0 0 rgba(167, 139, 250, 0.
|
|
182
|
+
--shadow-liquid-glass: 0 8px 32px rgba(13, 10, 26, 0.60), inset 0 1px 0 0 rgba(167, 139, 250, 0.08);
|
|
183
183
|
--shadow-liquid-glass-sm: 0 4px 16px rgba(13, 10, 26, 0.40);
|
|
184
|
-
--shadow-liquid-glass-lg: 0 16px 48px rgba(13, 10, 26, 0.70), inset 0 1px 0 0 rgba(167, 139, 250, 0.
|
|
184
|
+
--shadow-liquid-glass-lg: 0 16px 48px rgba(13, 10, 26, 0.70), inset 0 1px 0 0 rgba(167, 139, 250, 0.10);
|
|
185
185
|
--shadow-liquid-glow: 0 0 20px rgba(124, 58, 237, 0.30), 0 0 40px rgba(168, 85, 247, 0.15);
|
|
186
186
|
--shadow-liquid-glow-primary: 0 0 24px rgba(124, 58, 237, 0.35), 0 4px 16px rgba(124, 58, 237, 0.20);
|
|
187
187
|
--shadow-liquid-neon: 0 0 15px rgba(124, 58, 237, 0.50), 0 0 30px rgba(168, 85, 247, 0.25);
|
|
@@ -226,46 +226,46 @@
|
|
|
226
226
|
Organic-Dark: deep void, glassmorphism, glow accents
|
|
227
227
|
═══════════════════════════════════════════════════════ */
|
|
228
228
|
:root {
|
|
229
|
-
--org-primary: #
|
|
230
|
-
--org-primary-light: #
|
|
231
|
-
--org-primary-soft: #
|
|
232
|
-
--org-primary-glow: #
|
|
233
|
-
--org-bg-void: #
|
|
234
|
-
--org-bg-surface: #
|
|
235
|
-
--org-bg-elevated: #
|
|
236
|
-
--org-cream-base: #
|
|
229
|
+
--org-primary: #7C3AED;
|
|
230
|
+
--org-primary-light: #A78BFA;
|
|
231
|
+
--org-primary-soft: #6D28D9;
|
|
232
|
+
--org-primary-glow: #8B5CF6;
|
|
233
|
+
--org-bg-void: #0D0A1A;
|
|
234
|
+
--org-bg-surface: #110E22;
|
|
235
|
+
--org-bg-elevated: #1A1530;
|
|
236
|
+
--org-cream-base: #F8F6FC;
|
|
237
237
|
|
|
238
238
|
--org-success: #10B981;
|
|
239
239
|
--org-warning: #F59E0B;
|
|
240
|
-
--org-error: #
|
|
240
|
+
--org-error: #EF4444;
|
|
241
241
|
--org-info: #3B82F6;
|
|
242
242
|
|
|
243
|
-
--org-glass-bg: rgba(
|
|
244
|
-
--org-glass-bg-heavy: rgba(
|
|
245
|
-
--org-glass-surface: rgba(255, 255, 255, 0.
|
|
246
|
-
--org-glass-border: rgba(
|
|
247
|
-
--org-glass-border-medium: rgba(
|
|
248
|
-
--org-glass-border-strong: rgba(
|
|
249
|
-
--org-glass-highlight: rgba(255, 255, 255, 0.
|
|
243
|
+
--org-glass-bg: rgba(124, 58, 237, 0.06);
|
|
244
|
+
--org-glass-bg-heavy: rgba(124, 58, 237, 0.12);
|
|
245
|
+
--org-glass-surface: rgba(255, 255, 255, 0.05);
|
|
246
|
+
--org-glass-border: rgba(167, 139, 250, 0.15);
|
|
247
|
+
--org-glass-border-medium: rgba(167, 139, 250, 0.25);
|
|
248
|
+
--org-glass-border-strong: rgba(167, 139, 250, 0.40);
|
|
249
|
+
--org-glass-highlight: rgba(255, 255, 255, 0.06);
|
|
250
250
|
|
|
251
|
-
--org-text: #
|
|
252
|
-
--org-text-secondary:
|
|
253
|
-
--org-text-muted:
|
|
254
|
-
--org-border: rgba(
|
|
251
|
+
--org-text: #F0ECF9;
|
|
252
|
+
--org-text-secondary: #C4BDD9;
|
|
253
|
+
--org-text-muted: #7B7394;
|
|
254
|
+
--org-border: rgba(167, 139, 250, 0.15);
|
|
255
255
|
|
|
256
|
-
--org-card-bg: #
|
|
257
|
-
--org-card-surface: #
|
|
256
|
+
--org-card-bg: #13102A;
|
|
257
|
+
--org-card-surface: #1A1530;
|
|
258
258
|
|
|
259
|
-
--org-subtle-5: rgba(
|
|
260
|
-
--org-subtle-10: rgba(
|
|
261
|
-
--org-subtle-20: rgba(
|
|
259
|
+
--org-subtle-5: rgba(124, 58, 237, 0.04);
|
|
260
|
+
--org-subtle-10: rgba(124, 58, 237, 0.08);
|
|
261
|
+
--org-subtle-20: rgba(124, 58, 237, 0.14);
|
|
262
262
|
|
|
263
|
-
--org-shadow-glass: 0 24px 80px -15px rgba(
|
|
264
|
-
--org-shadow-glass-sm: 0 8px 32px -8px rgba(
|
|
265
|
-
--org-shadow-glass-lg: 0 32px 100px -20px rgba(
|
|
263
|
+
--org-shadow-glass: 0 24px 80px -15px rgba(13, 10, 26, 0.60);
|
|
264
|
+
--org-shadow-glass-sm: 0 8px 32px -8px rgba(13, 10, 26, 0.50);
|
|
265
|
+
--org-shadow-glass-lg: 0 32px 100px -20px rgba(13, 10, 26, 0.70);
|
|
266
266
|
|
|
267
267
|
color-scheme: dark;
|
|
268
|
-
font-family: '
|
|
268
|
+
font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
|
|
269
269
|
-webkit-font-smoothing: antialiased;
|
|
270
270
|
-moz-osx-font-smoothing: grayscale;
|
|
271
271
|
}
|
|
@@ -276,111 +276,111 @@
|
|
|
276
276
|
═══════════════════════════════════════════════════════ */
|
|
277
277
|
.theme-cream,
|
|
278
278
|
[data-theme='light'] {
|
|
279
|
-
--org-bg-void: #
|
|
279
|
+
--org-bg-void: #F8F6FC;
|
|
280
280
|
--org-bg-surface: #FFFFFF;
|
|
281
|
-
--org-bg-elevated: #
|
|
281
|
+
--org-bg-elevated: #F0ECF9;
|
|
282
282
|
|
|
283
|
-
--org-text: #
|
|
284
|
-
--org-text-secondary: #
|
|
285
|
-
--org-text-muted: #
|
|
283
|
+
--org-text: #1A1530;
|
|
284
|
+
--org-text-secondary: #352D52;
|
|
285
|
+
--org-text-muted: #7B7394;
|
|
286
286
|
|
|
287
|
-
--org-glass-bg: rgba(255, 255, 255, 0.
|
|
288
|
-
--org-glass-bg-heavy: rgba(255, 255, 255, 0.
|
|
289
|
-
--org-glass-surface: rgba(255, 255, 255, 0.
|
|
290
|
-
--org-glass-border: rgba(
|
|
291
|
-
--org-glass-border-medium: rgba(
|
|
292
|
-
--org-glass-border-strong: rgba(
|
|
293
|
-
--org-glass-highlight: rgba(
|
|
294
|
-
--org-border: rgba(
|
|
287
|
+
--org-glass-bg: rgba(255, 255, 255, 0.75);
|
|
288
|
+
--org-glass-bg-heavy: rgba(255, 255, 255, 0.92);
|
|
289
|
+
--org-glass-surface: rgba(255, 255, 255, 0.85);
|
|
290
|
+
--org-glass-border: rgba(124, 58, 237, 0.04);
|
|
291
|
+
--org-glass-border-medium: rgba(124, 58, 237, 0.08);
|
|
292
|
+
--org-glass-border-strong: rgba(124, 58, 237, 0.18);
|
|
293
|
+
--org-glass-highlight: rgba(124, 58, 237, 0.03);
|
|
294
|
+
--org-border: rgba(124, 58, 237, 0.08);
|
|
295
295
|
|
|
296
296
|
--org-card-bg: #FFFFFF;
|
|
297
|
-
--org-card-surface: #
|
|
297
|
+
--org-card-surface: #F8F6FC;
|
|
298
298
|
|
|
299
|
-
--org-subtle-5: rgba(
|
|
300
|
-
--org-subtle-10: rgba(
|
|
301
|
-
--org-subtle-20: rgba(
|
|
299
|
+
--org-subtle-5: rgba(124, 58, 237, 0.03);
|
|
300
|
+
--org-subtle-10: rgba(124, 58, 237, 0.05);
|
|
301
|
+
--org-subtle-20: rgba(124, 58, 237, 0.08);
|
|
302
302
|
|
|
303
|
-
--org-shadow-glass: 0 4px 24px rgba(
|
|
304
|
-
--org-shadow-glass-sm: 0 2px 12px rgba(
|
|
305
|
-
--org-shadow-glass-lg: 0 8px 40px rgba(
|
|
303
|
+
--org-shadow-glass: 0 4px 24px rgba(124, 58, 237, 0.06);
|
|
304
|
+
--org-shadow-glass-sm: 0 2px 12px rgba(124, 58, 237, 0.04);
|
|
305
|
+
--org-shadow-glass-lg: 0 8px 40px rgba(124, 58, 237, 0.08);
|
|
306
306
|
|
|
307
307
|
color-scheme: light;
|
|
308
|
-
color: #
|
|
309
|
-
background-color: #
|
|
308
|
+
color: #1A1530;
|
|
309
|
+
background-color: #F8F6FC;
|
|
310
310
|
}
|
|
311
311
|
|
|
312
312
|
/* ═══════════════════════════════════════════════════════
|
|
313
313
|
Dark Theme (explicit)
|
|
314
314
|
═══════════════════════════════════════════════════════ */
|
|
315
315
|
[data-theme='dark'] {
|
|
316
|
-
--org-bg-void: #
|
|
317
|
-
--org-bg-surface: #
|
|
318
|
-
--org-bg-elevated: #
|
|
319
|
-
|
|
320
|
-
--org-text: #
|
|
321
|
-
--org-text-secondary:
|
|
322
|
-
--org-text-muted:
|
|
323
|
-
|
|
324
|
-
--org-glass-bg: rgba(
|
|
325
|
-
--org-glass-bg-heavy: rgba(
|
|
326
|
-
--org-glass-surface: rgba(255, 255, 255, 0.
|
|
327
|
-
--org-glass-border: rgba(
|
|
328
|
-
--org-glass-border-medium: rgba(
|
|
329
|
-
--org-glass-border-strong: rgba(
|
|
330
|
-
--org-glass-highlight: rgba(255, 255, 255, 0.
|
|
331
|
-
--org-border: rgba(
|
|
332
|
-
|
|
333
|
-
--org-card-bg: #
|
|
334
|
-
--org-card-surface: #
|
|
335
|
-
|
|
336
|
-
--org-subtle-5: rgba(
|
|
337
|
-
--org-subtle-10: rgba(
|
|
338
|
-
--org-subtle-20: rgba(
|
|
339
|
-
|
|
340
|
-
--org-shadow-glass: 0 24px 80px -15px rgba(
|
|
341
|
-
--org-shadow-glass-sm: 0 8px 32px -8px rgba(
|
|
342
|
-
--org-shadow-glass-lg: 0 32px 100px -20px rgba(
|
|
316
|
+
--org-bg-void: #0D0A1A;
|
|
317
|
+
--org-bg-surface: #110E22;
|
|
318
|
+
--org-bg-elevated: #1A1530;
|
|
319
|
+
|
|
320
|
+
--org-text: #F0ECF9;
|
|
321
|
+
--org-text-secondary: #C4BDD9;
|
|
322
|
+
--org-text-muted: #7B7394;
|
|
323
|
+
|
|
324
|
+
--org-glass-bg: rgba(124, 58, 237, 0.06);
|
|
325
|
+
--org-glass-bg-heavy: rgba(124, 58, 237, 0.12);
|
|
326
|
+
--org-glass-surface: rgba(255, 255, 255, 0.05);
|
|
327
|
+
--org-glass-border: rgba(167, 139, 250, 0.15);
|
|
328
|
+
--org-glass-border-medium: rgba(167, 139, 250, 0.25);
|
|
329
|
+
--org-glass-border-strong: rgba(167, 139, 250, 0.40);
|
|
330
|
+
--org-glass-highlight: rgba(255, 255, 255, 0.06);
|
|
331
|
+
--org-border: rgba(167, 139, 250, 0.15);
|
|
332
|
+
|
|
333
|
+
--org-card-bg: #13102A;
|
|
334
|
+
--org-card-surface: #1A1530;
|
|
335
|
+
|
|
336
|
+
--org-subtle-5: rgba(124, 58, 237, 0.04);
|
|
337
|
+
--org-subtle-10: rgba(124, 58, 237, 0.08);
|
|
338
|
+
--org-subtle-20: rgba(124, 58, 237, 0.14);
|
|
339
|
+
|
|
340
|
+
--org-shadow-glass: 0 24px 80px -15px rgba(13, 10, 26, 0.60);
|
|
341
|
+
--org-shadow-glass-sm: 0 8px 32px -8px rgba(13, 10, 26, 0.50);
|
|
342
|
+
--org-shadow-glass-lg: 0 32px 100px -20px rgba(13, 10, 26, 0.70);
|
|
343
343
|
|
|
344
344
|
color-scheme: dark;
|
|
345
|
-
color: #
|
|
346
|
-
background-color: #
|
|
345
|
+
color: #F0ECF9;
|
|
346
|
+
background-color: #0D0A1A;
|
|
347
347
|
}
|
|
348
348
|
|
|
349
349
|
/* ═══════════════════════════════════════════════════════
|
|
350
350
|
Fluid Theme — vibrant mesh, neon glows, deep blacks
|
|
351
351
|
═══════════════════════════════════════════════════════ */
|
|
352
352
|
[data-theme='fluid'] {
|
|
353
|
-
--org-bg-void: #
|
|
354
|
-
--org-bg-surface: #
|
|
355
|
-
--org-bg-elevated: #
|
|
356
|
-
|
|
357
|
-
--org-text: #
|
|
358
|
-
--org-text-secondary: #
|
|
359
|
-
--org-text-muted: #
|
|
360
|
-
|
|
361
|
-
--org-glass-bg: rgba(
|
|
362
|
-
--org-glass-bg-heavy: rgba(
|
|
363
|
-
--org-glass-surface: rgba(
|
|
364
|
-
--org-glass-border: rgba(
|
|
365
|
-
--org-glass-border-medium: rgba(
|
|
366
|
-
--org-glass-border-strong: rgba(
|
|
367
|
-
--org-glass-highlight: rgba(
|
|
368
|
-
--org-border: rgba(
|
|
369
|
-
|
|
370
|
-
--org-card-bg: #
|
|
371
|
-
--org-card-surface: #
|
|
372
|
-
|
|
373
|
-
--org-subtle-5: rgba(
|
|
374
|
-
--org-subtle-10: rgba(
|
|
375
|
-
--org-subtle-20: rgba(
|
|
376
|
-
|
|
377
|
-
--org-shadow-glass: 0 8px 32px rgba(
|
|
378
|
-
--org-shadow-glass-sm: 0 4px 24px rgba(
|
|
379
|
-
--org-shadow-glass-lg: 0 12px 48px rgba(
|
|
353
|
+
--org-bg-void: #0D0A1A;
|
|
354
|
+
--org-bg-surface: #1A1530;
|
|
355
|
+
--org-bg-elevated: #211B3A;
|
|
356
|
+
|
|
357
|
+
--org-text: #F0ECF9;
|
|
358
|
+
--org-text-secondary: #C4BDD9;
|
|
359
|
+
--org-text-muted: #7B7394;
|
|
360
|
+
|
|
361
|
+
--org-glass-bg: rgba(124, 58, 237, 0.05);
|
|
362
|
+
--org-glass-bg-heavy: rgba(17, 14, 34, 0.90);
|
|
363
|
+
--org-glass-surface: rgba(17, 14, 34, 0.80);
|
|
364
|
+
--org-glass-border: rgba(167, 139, 250, 0.08);
|
|
365
|
+
--org-glass-border-medium: rgba(167, 139, 250, 0.12);
|
|
366
|
+
--org-glass-border-strong: rgba(167, 139, 250, 0.18);
|
|
367
|
+
--org-glass-highlight: rgba(167, 139, 250, 0.06);
|
|
368
|
+
--org-border: rgba(167, 139, 250, 0.08);
|
|
369
|
+
|
|
370
|
+
--org-card-bg: #1A1530;
|
|
371
|
+
--org-card-surface: #211B3A;
|
|
372
|
+
|
|
373
|
+
--org-subtle-5: rgba(124, 58, 237, 0.04);
|
|
374
|
+
--org-subtle-10: rgba(124, 58, 237, 0.08);
|
|
375
|
+
--org-subtle-20: rgba(124, 58, 237, 0.14);
|
|
376
|
+
|
|
377
|
+
--org-shadow-glass: 0 8px 32px rgba(13, 10, 26, 0.60);
|
|
378
|
+
--org-shadow-glass-sm: 0 4px 24px rgba(13, 10, 26, 0.40);
|
|
379
|
+
--org-shadow-glass-lg: 0 12px 48px rgba(13, 10, 26, 0.70);
|
|
380
380
|
|
|
381
381
|
color-scheme: dark;
|
|
382
|
-
color: #
|
|
383
|
-
background-color: #
|
|
382
|
+
color: #F0ECF9;
|
|
383
|
+
background-color: #0D0A1A;
|
|
384
384
|
}
|
|
385
385
|
|
|
386
386
|
/* ═══════════════════════════════════════════════════════
|
|
@@ -388,42 +388,42 @@
|
|
|
388
388
|
refraction effects, grain texture, purple glow
|
|
389
389
|
═══════════════════════════════════════════════════════ */
|
|
390
390
|
[data-theme='liquid'] {
|
|
391
|
-
--org-primary: #
|
|
392
|
-
--org-primary-light: #
|
|
393
|
-
--org-primary-soft: rgba(
|
|
394
|
-
--org-primary-glow: #
|
|
395
|
-
|
|
396
|
-
--org-bg-void: #
|
|
397
|
-
--org-bg-surface: #
|
|
398
|
-
--org-bg-elevated: #
|
|
399
|
-
|
|
400
|
-
--org-text: #
|
|
401
|
-
--org-text-secondary:
|
|
402
|
-
--org-text-muted:
|
|
403
|
-
|
|
404
|
-
--org-glass-bg: rgba(
|
|
405
|
-
--org-glass-bg-heavy: rgba(
|
|
406
|
-
--org-glass-surface: rgba(255, 255, 255, 0.
|
|
407
|
-
--org-glass-border: rgba(
|
|
408
|
-
--org-glass-border-medium: rgba(
|
|
409
|
-
--org-glass-border-strong: rgba(
|
|
410
|
-
--org-glass-highlight: rgba(255, 255, 255, 0.
|
|
411
|
-
--org-border: rgba(
|
|
412
|
-
|
|
413
|
-
--org-card-bg: #
|
|
414
|
-
--org-card-surface: #
|
|
415
|
-
|
|
416
|
-
--org-subtle-5: rgba(
|
|
417
|
-
--org-subtle-10: rgba(
|
|
418
|
-
--org-subtle-20: rgba(
|
|
419
|
-
|
|
420
|
-
--org-shadow-glass: 0 24px 80px -15px rgba(
|
|
421
|
-
--org-shadow-glass-sm: 0 8px 32px -8px rgba(
|
|
422
|
-
--org-shadow-glass-lg: 0 32px 100px -20px rgba(
|
|
391
|
+
--org-primary: #7C3AED;
|
|
392
|
+
--org-primary-light: #A78BFA;
|
|
393
|
+
--org-primary-soft: rgba(124, 58, 237, 0.20);
|
|
394
|
+
--org-primary-glow: #8B5CF6;
|
|
395
|
+
|
|
396
|
+
--org-bg-void: #0D0A1A;
|
|
397
|
+
--org-bg-surface: #110E22;
|
|
398
|
+
--org-bg-elevated: #1A1530;
|
|
399
|
+
|
|
400
|
+
--org-text: #F0ECF9;
|
|
401
|
+
--org-text-secondary: #C4BDD9;
|
|
402
|
+
--org-text-muted: #7B7394;
|
|
403
|
+
|
|
404
|
+
--org-glass-bg: rgba(124, 58, 237, 0.06);
|
|
405
|
+
--org-glass-bg-heavy: rgba(124, 58, 237, 0.12);
|
|
406
|
+
--org-glass-surface: rgba(255, 255, 255, 0.05);
|
|
407
|
+
--org-glass-border: rgba(167, 139, 250, 0.15);
|
|
408
|
+
--org-glass-border-medium: rgba(167, 139, 250, 0.25);
|
|
409
|
+
--org-glass-border-strong: rgba(167, 139, 250, 0.40);
|
|
410
|
+
--org-glass-highlight: rgba(255, 255, 255, 0.06);
|
|
411
|
+
--org-border: rgba(167, 139, 250, 0.15);
|
|
412
|
+
|
|
413
|
+
--org-card-bg: #13102A;
|
|
414
|
+
--org-card-surface: #1A1530;
|
|
415
|
+
|
|
416
|
+
--org-subtle-5: rgba(124, 58, 237, 0.04);
|
|
417
|
+
--org-subtle-10: rgba(124, 58, 237, 0.08);
|
|
418
|
+
--org-subtle-20: rgba(124, 58, 237, 0.14);
|
|
419
|
+
|
|
420
|
+
--org-shadow-glass: 0 24px 80px -15px rgba(13, 10, 26, 0.60);
|
|
421
|
+
--org-shadow-glass-sm: 0 8px 32px -8px rgba(13, 10, 26, 0.50);
|
|
422
|
+
--org-shadow-glass-lg: 0 32px 100px -20px rgba(13, 10, 26, 0.70);
|
|
423
423
|
|
|
424
424
|
color-scheme: dark;
|
|
425
|
-
color: #
|
|
426
|
-
background-color: #
|
|
425
|
+
color: #F0ECF9;
|
|
426
|
+
background-color: #0D0A1A;
|
|
427
427
|
}
|
|
428
428
|
|
|
429
429
|
/* ═══════════════════════════════════════════════════════
|
|
@@ -465,7 +465,7 @@
|
|
|
465
465
|
|
|
466
466
|
/* Focus */
|
|
467
467
|
.focus\:border-primary:focus { border-color: var(--org-primary-light); }
|
|
468
|
-
.focus\:ring-primary:focus { box-shadow: 0 0 0 3px rgba(
|
|
468
|
+
.focus\:ring-primary:focus { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.20); }
|
|
469
469
|
|
|
470
470
|
/* Divider */
|
|
471
471
|
.divide-theme > * + * { border-color: var(--org-glass-border); }
|
|
@@ -484,7 +484,7 @@ body {
|
|
|
484
484
|
margin: 0;
|
|
485
485
|
background-color: var(--org-bg-void);
|
|
486
486
|
color: var(--org-text);
|
|
487
|
-
font-family: '
|
|
487
|
+
font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
|
|
488
488
|
-webkit-font-smoothing: antialiased;
|
|
489
489
|
-moz-osx-font-smoothing: grayscale;
|
|
490
490
|
}
|
|
@@ -603,26 +603,26 @@ input, textarea, select, button {
|
|
|
603
603
|
Background Patterns
|
|
604
604
|
═══════════════════════════════════════════════════════ */
|
|
605
605
|
.bg-dark-mesh {
|
|
606
|
-
background-color: #
|
|
606
|
+
background-color: #0D0A1A;
|
|
607
607
|
background-image:
|
|
608
|
-
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(
|
|
609
|
-
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(
|
|
608
|
+
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124, 58, 237, 0.20) 0%, transparent 60%),
|
|
609
|
+
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(168, 85, 247, 0.10) 0%, transparent 50%);
|
|
610
610
|
}
|
|
611
611
|
|
|
612
612
|
.bg-cream-mesh {
|
|
613
|
-
background-color: #
|
|
613
|
+
background-color: #F8F6FC;
|
|
614
614
|
background-image:
|
|
615
|
-
radial-gradient(circle at 15% 15%, rgba(
|
|
616
|
-
radial-gradient(circle at 85% 85%, rgba(
|
|
615
|
+
radial-gradient(circle at 15% 15%, rgba(124, 58, 237, 0.06) 0%, transparent 40%),
|
|
616
|
+
radial-gradient(circle at 85% 85%, rgba(168, 85, 247, 0.04) 0%, transparent 40%);
|
|
617
617
|
}
|
|
618
618
|
|
|
619
619
|
.bg-fluid-mesh {
|
|
620
|
-
background-color: #
|
|
620
|
+
background-color: #0D0A1A;
|
|
621
621
|
background-image:
|
|
622
|
-
radial-gradient(at 0% 0%, #
|
|
623
|
-
radial-gradient(at 100% 0%, #
|
|
624
|
-
radial-gradient(at 100% 100%, #
|
|
625
|
-
radial-gradient(at 0% 100%, #
|
|
622
|
+
radial-gradient(at 0% 0%, #4C1D95 0px, transparent 50%),
|
|
623
|
+
radial-gradient(at 100% 0%, #7C3AED 0px, transparent 50%),
|
|
624
|
+
radial-gradient(at 100% 100%, #6D28D9 0px, transparent 50%),
|
|
625
|
+
radial-gradient(at 0% 100%, #3B0764 0px, transparent 50%);
|
|
626
626
|
}
|
|
627
627
|
|
|
628
628
|
.grid-overlay {
|
|
@@ -671,20 +671,20 @@ input, textarea, select, button {
|
|
|
671
671
|
z-index: -1;
|
|
672
672
|
pointer-events: none;
|
|
673
673
|
background:
|
|
674
|
-
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(
|
|
675
|
-
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(
|
|
674
|
+
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124, 58, 237, 0.20), transparent),
|
|
675
|
+
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(168, 85, 247, 0.10), transparent);
|
|
676
676
|
}
|
|
677
677
|
|
|
678
678
|
.vibrant-mesh {
|
|
679
679
|
background-image:
|
|
680
|
-
radial-gradient(at 0% 0%, #
|
|
681
|
-
radial-gradient(at 100% 0%, #
|
|
682
|
-
radial-gradient(at 100% 100%, #
|
|
683
|
-
radial-gradient(at 0% 100%, #
|
|
680
|
+
radial-gradient(at 0% 0%, #4C1D95 0px, transparent 50%),
|
|
681
|
+
radial-gradient(at 100% 0%, #7C3AED 0px, transparent 50%),
|
|
682
|
+
radial-gradient(at 100% 100%, #6D28D9 0px, transparent 50%),
|
|
683
|
+
radial-gradient(at 0% 100%, #3B0764 0px, transparent 50%);
|
|
684
684
|
}
|
|
685
685
|
|
|
686
686
|
.glow-gradient {
|
|
687
|
-
background-image: radial-gradient(circle at 50% -20%, #
|
|
687
|
+
background-image: radial-gradient(circle at 50% -20%, #7C3AED 15%, rgba(124, 58, 237, 0.6) 45%, #0D0A1A 90%);
|
|
688
688
|
}
|
|
689
689
|
|
|
690
690
|
/* ═══════════════════════════════════════════════════════
|
|
@@ -700,13 +700,13 @@ input, textarea, select, button {
|
|
|
700
700
|
}
|
|
701
701
|
|
|
702
702
|
.glow-orb-primary {
|
|
703
|
-
background: #
|
|
703
|
+
background: #7C3AED;
|
|
704
704
|
width: 300px;
|
|
705
705
|
height: 300px;
|
|
706
706
|
}
|
|
707
707
|
|
|
708
708
|
.glow-orb-secondary {
|
|
709
|
-
background: #
|
|
709
|
+
background: #A855F7;
|
|
710
710
|
width: 200px;
|
|
711
711
|
height: 200px;
|
|
712
712
|
}
|
|
@@ -733,45 +733,45 @@ input, textarea, select, button {
|
|
|
733
733
|
backdrop-blur(40px), white/[0.03], border-white/20
|
|
734
734
|
═══════════════════════════════════════════════════════ */
|
|
735
735
|
.glass-panel {
|
|
736
|
-
background: rgba(
|
|
737
|
-
backdrop-filter: blur(40px);
|
|
738
|
-
-webkit-backdrop-filter: blur(40px);
|
|
739
|
-
border: 1px solid rgba(
|
|
736
|
+
background: rgba(124, 58, 237, 0.06);
|
|
737
|
+
backdrop-filter: blur(40px) saturate(180%);
|
|
738
|
+
-webkit-backdrop-filter: blur(40px) saturate(180%);
|
|
739
|
+
border: 1px solid rgba(167, 139, 250, 0.15);
|
|
740
740
|
border-radius: 2rem;
|
|
741
|
-
box-shadow: 0 24px 80px -15px rgba(
|
|
741
|
+
box-shadow: 0 24px 80px -15px rgba(13, 10, 26, 0.60);
|
|
742
742
|
}
|
|
743
743
|
|
|
744
744
|
.glass-panel-alt {
|
|
745
|
-
background: rgba(
|
|
746
|
-
backdrop-filter: blur(32px);
|
|
747
|
-
-webkit-backdrop-filter: blur(32px);
|
|
748
|
-
border: 1px solid rgba(
|
|
745
|
+
background: rgba(124, 58, 237, 0.08);
|
|
746
|
+
backdrop-filter: blur(32px) saturate(160%);
|
|
747
|
+
-webkit-backdrop-filter: blur(32px) saturate(160%);
|
|
748
|
+
border: 1px solid rgba(167, 139, 250, 0.12);
|
|
749
749
|
border-radius: 1.5rem;
|
|
750
|
-
box-shadow: 0 8px 32px -8px rgba(
|
|
750
|
+
box-shadow: 0 8px 32px -8px rgba(13, 10, 26, 0.50);
|
|
751
751
|
}
|
|
752
752
|
|
|
753
753
|
.glass-panel-highlight {
|
|
754
|
-
background: rgba(
|
|
755
|
-
backdrop-filter: blur(40px);
|
|
756
|
-
-webkit-backdrop-filter: blur(40px);
|
|
757
|
-
border: 1px solid rgba(
|
|
754
|
+
background: rgba(124, 58, 237, 0.10);
|
|
755
|
+
backdrop-filter: blur(40px) saturate(180%);
|
|
756
|
+
-webkit-backdrop-filter: blur(40px) saturate(180%);
|
|
757
|
+
border: 1px solid rgba(167, 139, 250, 0.20);
|
|
758
758
|
border-radius: 2rem;
|
|
759
|
-
box-shadow: 0 24px 80px -15px rgba(
|
|
759
|
+
box-shadow: 0 24px 80px -15px rgba(13, 10, 26, 0.60);
|
|
760
760
|
}
|
|
761
761
|
|
|
762
762
|
.glass-card {
|
|
763
|
-
background: rgba(
|
|
764
|
-
backdrop-filter: blur(24px);
|
|
765
|
-
-webkit-backdrop-filter: blur(24px);
|
|
766
|
-
border: 1px solid rgba(
|
|
763
|
+
background: rgba(124, 58, 237, 0.05);
|
|
764
|
+
backdrop-filter: blur(24px) saturate(160%);
|
|
765
|
+
-webkit-backdrop-filter: blur(24px) saturate(160%);
|
|
766
|
+
border: 1px solid rgba(167, 139, 250, 0.12);
|
|
767
767
|
border-radius: 1.5rem;
|
|
768
768
|
transition: all 500ms cubic-bezier(0.25, 1, 0.5, 1);
|
|
769
769
|
}
|
|
770
770
|
|
|
771
771
|
.glass-card:hover {
|
|
772
|
-
background: rgba(
|
|
773
|
-
border-color: rgba(
|
|
774
|
-
box-shadow: 0 24px 80px -15px rgba(
|
|
772
|
+
background: rgba(124, 58, 237, 0.10);
|
|
773
|
+
border-color: rgba(167, 139, 250, 0.25);
|
|
774
|
+
box-shadow: 0 24px 80px -15px rgba(13, 10, 26, 0.60);
|
|
775
775
|
transform: translateY(-2px);
|
|
776
776
|
}
|
|
777
777
|
|
|
@@ -779,13 +779,13 @@ input, textarea, select, button {
|
|
|
779
779
|
Glass Buttons — rounded-2xl, white transparency
|
|
780
780
|
═══════════════════════════════════════════════════════ */
|
|
781
781
|
.glass-button {
|
|
782
|
-
background: rgba(
|
|
782
|
+
background: rgba(124, 58, 237, 0.08);
|
|
783
783
|
backdrop-filter: blur(16px);
|
|
784
784
|
-webkit-backdrop-filter: blur(16px);
|
|
785
|
-
border: 1px solid rgba(
|
|
786
|
-
color:
|
|
785
|
+
border: 1px solid rgba(167, 139, 250, 0.15);
|
|
786
|
+
color: #F0ECF9;
|
|
787
787
|
padding: 0.625rem 1.25rem;
|
|
788
|
-
border-radius:
|
|
788
|
+
border-radius: 9999px;
|
|
789
789
|
font-size: 0.8125rem;
|
|
790
790
|
font-weight: 500;
|
|
791
791
|
cursor: pointer;
|
|
@@ -807,15 +807,15 @@ input, textarea, select, button {
|
|
|
807
807
|
}
|
|
808
808
|
|
|
809
809
|
.glass-btn-primary {
|
|
810
|
-
background: rgba(255, 255, 255, 0.
|
|
810
|
+
background: rgba(255, 255, 255, 0.95);
|
|
811
811
|
backdrop-filter: blur(12px);
|
|
812
812
|
-webkit-backdrop-filter: blur(12px);
|
|
813
|
-
border: 1px solid rgba(255, 255, 255, 0.
|
|
814
|
-
color:
|
|
813
|
+
border: 1px solid rgba(255, 255, 255, 0.80);
|
|
814
|
+
color: #1A1530;
|
|
815
815
|
padding: 0.625rem 1.25rem;
|
|
816
|
-
border-radius:
|
|
816
|
+
border-radius: 9999px;
|
|
817
817
|
font-size: 0.8125rem;
|
|
818
|
-
font-weight:
|
|
818
|
+
font-weight: 600;
|
|
819
819
|
cursor: pointer;
|
|
820
820
|
display: inline-flex;
|
|
821
821
|
align-items: center;
|
|
@@ -825,8 +825,9 @@ input, textarea, select, button {
|
|
|
825
825
|
}
|
|
826
826
|
|
|
827
827
|
.glass-btn-primary:hover {
|
|
828
|
-
background: rgba(255, 255, 255,
|
|
829
|
-
border-color: rgba(255, 255, 255, 0.
|
|
828
|
+
background: rgba(255, 255, 255, 1);
|
|
829
|
+
border-color: rgba(255, 255, 255, 0.90);
|
|
830
|
+
box-shadow: 0 4px 20px rgba(255, 255, 255, 0.25);
|
|
830
831
|
}
|
|
831
832
|
|
|
832
833
|
.glass-btn-primary:active {
|
|
@@ -835,10 +836,10 @@ input, textarea, select, button {
|
|
|
835
836
|
|
|
836
837
|
.glass-btn-secondary {
|
|
837
838
|
background: transparent;
|
|
838
|
-
border: 1px solid rgba(
|
|
839
|
-
color:
|
|
839
|
+
border: 1px solid rgba(167, 139, 250, 0.15);
|
|
840
|
+
color: #C4BDD9;
|
|
840
841
|
padding: 0.625rem 1.25rem;
|
|
841
|
-
border-radius:
|
|
842
|
+
border-radius: 9999px;
|
|
842
843
|
font-size: 0.8125rem;
|
|
843
844
|
font-weight: 500;
|
|
844
845
|
cursor: pointer;
|
|
@@ -850,16 +851,17 @@ input, textarea, select, button {
|
|
|
850
851
|
}
|
|
851
852
|
|
|
852
853
|
.glass-btn-secondary:hover {
|
|
853
|
-
color:
|
|
854
|
-
border-color: rgba(
|
|
854
|
+
color: #F0ECF9;
|
|
855
|
+
border-color: rgba(167, 139, 250, 0.35);
|
|
856
|
+
background: rgba(124, 58, 237, 0.08);
|
|
855
857
|
}
|
|
856
858
|
|
|
857
859
|
.glass-btn-outline {
|
|
858
860
|
background: transparent;
|
|
859
|
-
border: 1px solid rgba(
|
|
860
|
-
color:
|
|
861
|
+
border: 1px solid rgba(167, 139, 250, 0.15);
|
|
862
|
+
color: #C4BDD9;
|
|
861
863
|
padding: 0.625rem 1.25rem;
|
|
862
|
-
border-radius:
|
|
864
|
+
border-radius: 9999px;
|
|
863
865
|
font-size: 0.8125rem;
|
|
864
866
|
font-weight: 500;
|
|
865
867
|
cursor: pointer;
|
|
@@ -871,9 +873,9 @@ input, textarea, select, button {
|
|
|
871
873
|
}
|
|
872
874
|
|
|
873
875
|
.glass-btn-outline:hover {
|
|
874
|
-
border-color: rgba(
|
|
875
|
-
background: rgba(
|
|
876
|
-
color:
|
|
876
|
+
border-color: rgba(167, 139, 250, 0.35);
|
|
877
|
+
background: rgba(124, 58, 237, 0.08);
|
|
878
|
+
color: #F0ECF9;
|
|
877
879
|
}
|
|
878
880
|
|
|
879
881
|
.glass-btn-sm {
|
|
@@ -893,15 +895,15 @@ input, textarea, select, button {
|
|
|
893
895
|
═══════════════════════════════════════════════════════ */
|
|
894
896
|
.glass-input,
|
|
895
897
|
.input-glass {
|
|
896
|
-
background: rgba(
|
|
898
|
+
background: rgba(124, 58, 237, 0.06);
|
|
897
899
|
backdrop-filter: blur(16px);
|
|
898
900
|
-webkit-backdrop-filter: blur(16px);
|
|
899
|
-
border: 1px solid rgba(
|
|
900
|
-
border-radius:
|
|
901
|
+
border: 1px solid rgba(167, 139, 250, 0.12);
|
|
902
|
+
border-radius: 9999px;
|
|
901
903
|
padding: 0.75rem 1rem;
|
|
902
904
|
font-size: 0.875rem;
|
|
903
905
|
font-weight: 400;
|
|
904
|
-
color:
|
|
906
|
+
color: #F0ECF9;
|
|
905
907
|
outline: none;
|
|
906
908
|
width: 100%;
|
|
907
909
|
transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
|
|
@@ -909,27 +911,27 @@ input, textarea, select, button {
|
|
|
909
911
|
|
|
910
912
|
.glass-input::placeholder,
|
|
911
913
|
.input-glass::placeholder {
|
|
912
|
-
color:
|
|
914
|
+
color: #7B7394;
|
|
913
915
|
font-weight: 400;
|
|
914
916
|
}
|
|
915
917
|
|
|
916
918
|
.glass-input:focus,
|
|
917
919
|
.input-glass:focus {
|
|
918
|
-
border-color: rgba(
|
|
919
|
-
background: rgba(
|
|
920
|
-
box-shadow: 0 0 0 3px rgba(
|
|
920
|
+
border-color: rgba(124, 58, 237, 0.50);
|
|
921
|
+
background: rgba(124, 58, 237, 0.10);
|
|
922
|
+
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12), 0 0 20px rgba(124, 58, 237, 0.10);
|
|
921
923
|
}
|
|
922
924
|
|
|
923
925
|
.glass-textarea {
|
|
924
|
-
background: rgba(
|
|
926
|
+
background: rgba(124, 58, 237, 0.06);
|
|
925
927
|
backdrop-filter: blur(16px);
|
|
926
928
|
-webkit-backdrop-filter: blur(16px);
|
|
927
|
-
border: 1px solid rgba(
|
|
929
|
+
border: 1px solid rgba(167, 139, 250, 0.12);
|
|
928
930
|
border-radius: 1rem;
|
|
929
931
|
padding: 0.75rem 1rem;
|
|
930
932
|
font-size: 0.875rem;
|
|
931
933
|
font-weight: 400;
|
|
932
|
-
color:
|
|
934
|
+
color: #F0ECF9;
|
|
933
935
|
outline: none;
|
|
934
936
|
width: 100%;
|
|
935
937
|
min-height: 100px;
|
|
@@ -938,9 +940,9 @@ input, textarea, select, button {
|
|
|
938
940
|
}
|
|
939
941
|
|
|
940
942
|
.glass-textarea:focus {
|
|
941
|
-
border-color: rgba(
|
|
942
|
-
background: rgba(
|
|
943
|
-
box-shadow: 0 0 0 3px rgba(
|
|
943
|
+
border-color: rgba(124, 58, 237, 0.50);
|
|
944
|
+
background: rgba(124, 58, 237, 0.10);
|
|
945
|
+
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
|
|
944
946
|
}
|
|
945
947
|
|
|
946
948
|
/* ═══════════════════════════════════════════════════════
|
|
@@ -973,9 +975,9 @@ input, textarea, select, button {
|
|
|
973
975
|
}
|
|
974
976
|
|
|
975
977
|
.glass-pill-error {
|
|
976
|
-
background: rgba(
|
|
977
|
-
border-color: rgba(
|
|
978
|
-
color: #
|
|
978
|
+
background: rgba(239, 68, 68, 0.12);
|
|
979
|
+
border-color: rgba(239, 68, 68, 0.25);
|
|
980
|
+
color: #F87171;
|
|
979
981
|
}
|
|
980
982
|
|
|
981
983
|
.glass-pill-info {
|
|
@@ -985,8 +987,8 @@ input, textarea, select, button {
|
|
|
985
987
|
}
|
|
986
988
|
|
|
987
989
|
.glass-pill-primary {
|
|
988
|
-
background: rgba(
|
|
989
|
-
border-color: rgba(
|
|
990
|
+
background: rgba(124, 58, 237, 0.15);
|
|
991
|
+
border-color: rgba(124, 58, 237, 0.30);
|
|
990
992
|
color: #A78BFA;
|
|
991
993
|
}
|
|
992
994
|
|
|
@@ -1002,11 +1004,11 @@ input, textarea, select, button {
|
|
|
1002
1004
|
}
|
|
1003
1005
|
|
|
1004
1006
|
.alert-error {
|
|
1005
|
-
background: rgba(
|
|
1006
|
-
border: 1px solid rgba(
|
|
1007
|
+
background: rgba(239, 68, 68, 0.08);
|
|
1008
|
+
border: 1px solid rgba(239, 68, 68, 0.25);
|
|
1007
1009
|
border-radius: 1.25rem;
|
|
1008
1010
|
padding: 1rem 1.25rem;
|
|
1009
|
-
box-shadow: 0 0 20px rgba(
|
|
1011
|
+
box-shadow: 0 0 20px rgba(239, 68, 68, 0.10);
|
|
1010
1012
|
}
|
|
1011
1013
|
|
|
1012
1014
|
.alert-warning {
|
|
@@ -1026,7 +1028,7 @@ input, textarea, select, button {
|
|
|
1026
1028
|
}
|
|
1027
1029
|
|
|
1028
1030
|
.alert-glow-success { box-shadow: 0 0 25px rgba(16, 185, 129, 0.15); }
|
|
1029
|
-
.alert-glow-error { box-shadow: 0 0 25px rgba(
|
|
1031
|
+
.alert-glow-error { box-shadow: 0 0 25px rgba(239, 68, 68, 0.15); }
|
|
1030
1032
|
.alert-glow-warning { box-shadow: 0 0 25px rgba(245, 158, 11, 0.15); }
|
|
1031
1033
|
.alert-glow-info { box-shadow: 0 0 25px rgba(59, 130, 246, 0.15); }
|
|
1032
1034
|
|
|
@@ -1045,7 +1047,7 @@ input, textarea, select, button {
|
|
|
1045
1047
|
}
|
|
1046
1048
|
|
|
1047
1049
|
.toast-success { border-left: none; box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50), inset 0 0 20px rgba(16, 185, 129, 0.05); }
|
|
1048
|
-
.toast-error { border-left: none; box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50), inset 0 0 20px rgba(
|
|
1050
|
+
.toast-error { border-left: none; box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50), inset 0 0 20px rgba(239, 68, 68, 0.05); }
|
|
1049
1051
|
.toast-warning { border-left: none; box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50), inset 0 0 20px rgba(245, 158, 11, 0.05); }
|
|
1050
1052
|
.toast-info { border-left: none; box-shadow: 0 24px 80px -15px rgba(0, 0, 0, 0.50), inset 0 0 20px rgba(59, 130, 246, 0.05); }
|
|
1051
1053
|
|
|
@@ -1097,8 +1099,8 @@ input, textarea, select, button {
|
|
|
1097
1099
|
.progress-fill {
|
|
1098
1100
|
height: 100%;
|
|
1099
1101
|
border-radius: 9999px;
|
|
1100
|
-
background: linear-gradient(90deg, #
|
|
1101
|
-
box-shadow: 0 0 10px rgba(
|
|
1102
|
+
background: linear-gradient(90deg, #7C3AED, #A78BFA);
|
|
1103
|
+
box-shadow: 0 0 10px rgba(124, 58, 237, 0.40);
|
|
1102
1104
|
transition: width 500ms cubic-bezier(0.25, 1, 0.5, 1);
|
|
1103
1105
|
}
|
|
1104
1106
|
|
|
@@ -1113,47 +1115,47 @@ input, textarea, select, button {
|
|
|
1113
1115
|
}
|
|
1114
1116
|
|
|
1115
1117
|
.progress-fill-error {
|
|
1116
|
-
background: linear-gradient(90deg, #
|
|
1117
|
-
box-shadow: 0 0 10px rgba(
|
|
1118
|
+
background: linear-gradient(90deg, #EF4444, #F87171);
|
|
1119
|
+
box-shadow: 0 0 10px rgba(239, 68, 68, 0.30);
|
|
1118
1120
|
}
|
|
1119
1121
|
|
|
1120
1122
|
/* ═══════════════════════════════════════════════════════
|
|
1121
1123
|
Glows & Shadows
|
|
1122
1124
|
═══════════════════════════════════════════════════════ */
|
|
1123
|
-
.shadow-glow { box-shadow: 0 0 20px rgba(
|
|
1124
|
-
.shadow-glow-primary { box-shadow: 0 0 20px rgba(
|
|
1125
|
-
.shadow-glow-error { box-shadow: 0 0 20px rgba(
|
|
1126
|
-
.shadow-glow-soft { box-shadow: 0 4px 30px rgba(
|
|
1127
|
-
.shadow-neon { box-shadow: 0 0 10px rgba(
|
|
1128
|
-
.shadow-neon-glow { box-shadow: 0 0 30px rgba(
|
|
1125
|
+
.shadow-glow { box-shadow: 0 0 20px rgba(124, 58, 237, 0.40); }
|
|
1126
|
+
.shadow-glow-primary { box-shadow: 0 0 20px rgba(124, 58, 237, 0.35), 0 4px 12px rgba(124, 58, 237, 0.20); }
|
|
1127
|
+
.shadow-glow-error { box-shadow: 0 0 20px rgba(239, 68, 68, 0.30), 0 4px 12px rgba(239, 68, 68, 0.20); }
|
|
1128
|
+
.shadow-glow-soft { box-shadow: 0 4px 30px rgba(124, 58, 237, 0.18); }
|
|
1129
|
+
.shadow-neon { box-shadow: 0 0 10px rgba(124, 58, 237, 0.40), 0 0 20px rgba(124, 58, 237, 0.20); }
|
|
1130
|
+
.shadow-neon-glow { box-shadow: 0 0 30px rgba(124, 58, 237, 0.45), 0 0 60px rgba(124, 58, 237, 0.20); }
|
|
1129
1131
|
|
|
1130
1132
|
.shadow-glass-lg {
|
|
1131
|
-
box-shadow: 0 32px 100px -20px rgba(
|
|
1133
|
+
box-shadow: 0 32px 100px -20px rgba(13, 10, 26, 0.70);
|
|
1132
1134
|
}
|
|
1133
1135
|
|
|
1134
1136
|
.shadow-glass-xl {
|
|
1135
|
-
box-shadow: 0 40px 120px -20px rgba(
|
|
1137
|
+
box-shadow: 0 40px 120px -20px rgba(13, 10, 26, 0.80);
|
|
1136
1138
|
}
|
|
1137
1139
|
|
|
1138
1140
|
.shadow-inner-light {
|
|
1139
|
-
box-shadow: inset 0 1px 0 0 rgba(
|
|
1141
|
+
box-shadow: inset 0 1px 0 0 rgba(167, 139, 250, 0.08);
|
|
1140
1142
|
}
|
|
1141
1143
|
|
|
1142
1144
|
/* ═══════════════════════════════════════════════════════
|
|
1143
1145
|
Text Effects
|
|
1144
1146
|
═══════════════════════════════════════════════════════ */
|
|
1145
|
-
.text-glow { text-shadow: 0 0 15px rgba(
|
|
1146
|
-
.text-glow-sm { text-shadow: 0 0 8px rgba(
|
|
1147
|
+
.text-glow { text-shadow: 0 0 15px rgba(124, 58, 237, 0.60); }
|
|
1148
|
+
.text-glow-sm { text-shadow: 0 0 8px rgba(124, 58, 237, 0.40); }
|
|
1147
1149
|
|
|
1148
1150
|
.text-gradient {
|
|
1149
|
-
background: linear-gradient(to right, #
|
|
1151
|
+
background: linear-gradient(to right, #7C3AED, #A78BFA);
|
|
1150
1152
|
-webkit-background-clip: text;
|
|
1151
1153
|
-webkit-text-fill-color: transparent;
|
|
1152
1154
|
background-clip: text;
|
|
1153
1155
|
}
|
|
1154
1156
|
|
|
1155
1157
|
.text-gradient-brand {
|
|
1156
|
-
background: linear-gradient(135deg, #
|
|
1158
|
+
background: linear-gradient(135deg, #7C3AED 0%, #C4B5FD 100%);
|
|
1157
1159
|
-webkit-background-clip: text;
|
|
1158
1160
|
-webkit-text-fill-color: transparent;
|
|
1159
1161
|
background-clip: text;
|
|
@@ -1214,9 +1216,9 @@ input, textarea, select, button {
|
|
|
1214
1216
|
}
|
|
1215
1217
|
|
|
1216
1218
|
.dock-btn.active {
|
|
1217
|
-
background: rgba(
|
|
1218
|
-
color: #
|
|
1219
|
-
box-shadow: 0 0 12px rgba(
|
|
1219
|
+
background: rgba(124, 58, 237, 0.20);
|
|
1220
|
+
color: #A78BFA;
|
|
1221
|
+
box-shadow: 0 0 12px rgba(124, 58, 237, 0.25);
|
|
1220
1222
|
}
|
|
1221
1223
|
|
|
1222
1224
|
/* ═══════════════════════════════════════════════════════
|
|
@@ -1228,8 +1230,8 @@ input, textarea, select, button {
|
|
|
1228
1230
|
justify-content: center;
|
|
1229
1231
|
border-radius: 9999px;
|
|
1230
1232
|
overflow: hidden;
|
|
1231
|
-
background: linear-gradient(135deg, rgba(
|
|
1232
|
-
border: 2px solid rgba(
|
|
1233
|
+
background: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(124, 58, 237, 0.10));
|
|
1234
|
+
border: 2px solid rgba(167, 139, 250, 0.10);
|
|
1233
1235
|
flex-shrink: 0;
|
|
1234
1236
|
}
|
|
1235
1237
|
|
|
@@ -1272,13 +1274,13 @@ input, textarea, select, button {
|
|
|
1272
1274
|
.mini-chart-bar {
|
|
1273
1275
|
flex: 1;
|
|
1274
1276
|
border-radius: 2px 2px 0 0;
|
|
1275
|
-
background: rgba(
|
|
1277
|
+
background: rgba(124, 58, 237, 0.40);
|
|
1276
1278
|
transition: height 500ms cubic-bezier(0.25, 1, 0.5, 1);
|
|
1277
1279
|
min-width: 4px;
|
|
1278
1280
|
}
|
|
1279
1281
|
|
|
1280
1282
|
.mini-chart-bar:hover {
|
|
1281
|
-
background: rgba(
|
|
1283
|
+
background: rgba(124, 58, 237, 0.70);
|
|
1282
1284
|
}
|
|
1283
1285
|
|
|
1284
1286
|
/* ═══════════════════════════════════════════════════════
|
|
@@ -1325,29 +1327,29 @@ input, textarea, select, button {
|
|
|
1325
1327
|
[data-theme='light'] .glass-panel,
|
|
1326
1328
|
.theme-cream .glass-panel {
|
|
1327
1329
|
background: rgba(255, 255, 255, 0.70);
|
|
1328
|
-
border-color: rgba(
|
|
1329
|
-
box-shadow: 0 4px 24px rgba(
|
|
1330
|
+
border-color: rgba(124, 58, 237, 0.06);
|
|
1331
|
+
box-shadow: 0 4px 24px rgba(124, 58, 237, 0.06);
|
|
1330
1332
|
backdrop-filter: blur(40px) saturate(180%);
|
|
1331
1333
|
}
|
|
1332
1334
|
|
|
1333
1335
|
[data-theme='light'] .glass-panel-alt,
|
|
1334
1336
|
.theme-cream .glass-panel-alt {
|
|
1335
1337
|
background: rgba(255, 255, 255, 0.80);
|
|
1336
|
-
border-color: rgba(
|
|
1337
|
-
box-shadow: 0 2px 12px rgba(
|
|
1338
|
+
border-color: rgba(124, 58, 237, 0.08);
|
|
1339
|
+
box-shadow: 0 2px 12px rgba(124, 58, 237, 0.04);
|
|
1338
1340
|
}
|
|
1339
1341
|
|
|
1340
1342
|
[data-theme='light'] .glass-panel-highlight,
|
|
1341
1343
|
.theme-cream .glass-panel-highlight {
|
|
1342
1344
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.60));
|
|
1343
|
-
border-color: rgba(
|
|
1344
|
-
box-shadow: 0 4px 16px rgba(
|
|
1345
|
+
border-color: rgba(124, 58, 237, 0.08);
|
|
1346
|
+
box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
|
|
1345
1347
|
}
|
|
1346
1348
|
|
|
1347
1349
|
[data-theme='light'] .glass-card,
|
|
1348
1350
|
.theme-cream .glass-card {
|
|
1349
1351
|
background: rgba(255, 255, 255, 0.70);
|
|
1350
|
-
border-color: rgba(
|
|
1352
|
+
border-color: rgba(124, 58, 237, 0.06);
|
|
1351
1353
|
}
|
|
1352
1354
|
|
|
1353
1355
|
[data-theme='light'] .glass-input,
|
|
@@ -1355,7 +1357,7 @@ input, textarea, select, button {
|
|
|
1355
1357
|
.theme-cream .glass-input,
|
|
1356
1358
|
.theme-cream .input-glass {
|
|
1357
1359
|
background: rgba(255, 255, 255, 0.60);
|
|
1358
|
-
border-color: rgba(
|
|
1360
|
+
border-color: rgba(124, 58, 237, 0.08);
|
|
1359
1361
|
color: #191919;
|
|
1360
1362
|
}
|
|
1361
1363
|
|
|
@@ -1370,41 +1372,41 @@ input, textarea, select, button {
|
|
|
1370
1372
|
[data-theme='light'] .input-glass:focus,
|
|
1371
1373
|
.theme-cream .glass-input:focus,
|
|
1372
1374
|
.theme-cream .input-glass:focus {
|
|
1373
|
-
border-color: rgba(
|
|
1375
|
+
border-color: rgba(124, 58, 237, 0.40);
|
|
1374
1376
|
background: rgba(255, 255, 255, 0.80);
|
|
1375
|
-
box-shadow: 0 0 0 3px rgba(
|
|
1377
|
+
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
|
|
1376
1378
|
}
|
|
1377
1379
|
|
|
1378
1380
|
[data-theme='light'] .glass-button,
|
|
1379
1381
|
.theme-cream .glass-button {
|
|
1380
1382
|
background: rgba(255, 255, 255, 0.60);
|
|
1381
|
-
border-color: rgba(
|
|
1383
|
+
border-color: rgba(124, 58, 237, 0.08);
|
|
1382
1384
|
color: #191919;
|
|
1383
|
-
box-shadow: 0 2px 8px rgba(
|
|
1385
|
+
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
|
|
1384
1386
|
}
|
|
1385
1387
|
|
|
1386
1388
|
[data-theme='light'] .glass-button:hover,
|
|
1387
1389
|
.theme-cream .glass-button:hover {
|
|
1388
1390
|
background: rgba(255, 255, 255, 0.80);
|
|
1389
|
-
border-color: rgba(
|
|
1390
|
-
box-shadow: 0 4px 16px rgba(
|
|
1391
|
+
border-color: rgba(124, 58, 237, 0.12);
|
|
1392
|
+
box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12);
|
|
1391
1393
|
}
|
|
1392
1394
|
|
|
1393
1395
|
[data-theme='light'] .glass-btn-primary,
|
|
1394
1396
|
.theme-cream .glass-btn-primary {
|
|
1395
|
-
box-shadow: 0 4px 16px rgba(
|
|
1397
|
+
box-shadow: 0 4px 16px rgba(124, 58, 237, 0.20);
|
|
1396
1398
|
}
|
|
1397
1399
|
|
|
1398
1400
|
[data-theme='light'] .glass-btn-outline,
|
|
1399
1401
|
.theme-cream .glass-btn-outline {
|
|
1400
|
-
border-color: rgba(
|
|
1402
|
+
border-color: rgba(124, 58, 237, 0.12);
|
|
1401
1403
|
color: #191919;
|
|
1402
1404
|
}
|
|
1403
1405
|
|
|
1404
1406
|
[data-theme='light'] .glass-pill,
|
|
1405
1407
|
.theme-cream .glass-pill {
|
|
1406
1408
|
background: rgba(255, 255, 255, 0.60);
|
|
1407
|
-
border-color: rgba(
|
|
1409
|
+
border-color: rgba(124, 58, 237, 0.08);
|
|
1408
1410
|
color: #4b5563;
|
|
1409
1411
|
}
|
|
1410
1412
|
|
|
@@ -1412,28 +1414,28 @@ input, textarea, select, button {
|
|
|
1412
1414
|
[data-theme='light'] .skeleton-shimmer,
|
|
1413
1415
|
.theme-cream .skeleton,
|
|
1414
1416
|
.theme-cream .skeleton-shimmer {
|
|
1415
|
-
background: rgba(
|
|
1417
|
+
background: rgba(124, 58, 237, 0.04);
|
|
1416
1418
|
}
|
|
1417
1419
|
|
|
1418
1420
|
[data-theme='light'] .skeleton::after,
|
|
1419
1421
|
[data-theme='light'] .skeleton-shimmer::after,
|
|
1420
1422
|
.theme-cream .skeleton::after,
|
|
1421
1423
|
.theme-cream .skeleton-shimmer::after {
|
|
1422
|
-
background: linear-gradient(90deg, transparent, rgba(
|
|
1424
|
+
background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.05), transparent);
|
|
1423
1425
|
}
|
|
1424
1426
|
|
|
1425
1427
|
[data-theme='light'] .toast,
|
|
1426
1428
|
.theme-cream .toast {
|
|
1427
1429
|
background: rgba(255, 255, 255, 0.90);
|
|
1428
|
-
border-color: rgba(
|
|
1429
|
-
box-shadow: 0 12px 40px rgba(
|
|
1430
|
+
border-color: rgba(124, 58, 237, 0.08);
|
|
1431
|
+
box-shadow: 0 12px 40px rgba(124, 58, 237, 0.10);
|
|
1430
1432
|
}
|
|
1431
1433
|
|
|
1432
1434
|
[data-theme='light'] .dock-glass,
|
|
1433
1435
|
.theme-cream .dock-glass {
|
|
1434
1436
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.80));
|
|
1435
|
-
border-color: rgba(
|
|
1436
|
-
box-shadow: 0 12px 40px rgba(
|
|
1437
|
+
border-color: rgba(124, 58, 237, 0.08);
|
|
1438
|
+
box-shadow: 0 12px 40px rgba(124, 58, 237, 0.10);
|
|
1437
1439
|
}
|
|
1438
1440
|
|
|
1439
1441
|
[data-theme='light'] .dock-btn,
|
|
@@ -1443,56 +1445,56 @@ input, textarea, select, button {
|
|
|
1443
1445
|
|
|
1444
1446
|
[data-theme='light'] .dock-btn:hover,
|
|
1445
1447
|
.theme-cream .dock-btn:hover {
|
|
1446
|
-
background: rgba(
|
|
1448
|
+
background: rgba(124, 58, 237, 0.04);
|
|
1447
1449
|
color: #191919;
|
|
1448
1450
|
}
|
|
1449
1451
|
|
|
1450
1452
|
[data-theme='light'] .text-glow,
|
|
1451
1453
|
.theme-cream .text-glow {
|
|
1452
|
-
text-shadow: 0 0 15px rgba(
|
|
1454
|
+
text-shadow: 0 0 15px rgba(124, 58, 237, 0.20);
|
|
1453
1455
|
}
|
|
1454
1456
|
|
|
1455
1457
|
[data-theme='light'] .text-glow-sm,
|
|
1456
1458
|
.theme-cream .text-glow-sm {
|
|
1457
|
-
text-shadow: 0 0 8px rgba(
|
|
1459
|
+
text-shadow: 0 0 8px rgba(124, 58, 237, 0.12);
|
|
1458
1460
|
}
|
|
1459
1461
|
|
|
1460
1462
|
[data-theme='light'] .metric-card,
|
|
1461
1463
|
.theme-cream .metric-card {
|
|
1462
1464
|
background: rgba(255, 255, 255, 0.70);
|
|
1463
|
-
border-color: rgba(
|
|
1464
|
-
box-shadow: 0 4px 24px rgba(
|
|
1465
|
+
border-color: rgba(124, 58, 237, 0.06);
|
|
1466
|
+
box-shadow: 0 4px 24px rgba(124, 58, 237, 0.06);
|
|
1465
1467
|
}
|
|
1466
1468
|
|
|
1467
1469
|
[data-theme='light'] .mini-chart-bar,
|
|
1468
1470
|
.theme-cream .mini-chart-bar {
|
|
1469
|
-
background: rgba(
|
|
1471
|
+
background: rgba(124, 58, 237, 0.25);
|
|
1470
1472
|
}
|
|
1471
1473
|
|
|
1472
1474
|
[data-theme='light'] .mini-chart-bar:hover,
|
|
1473
1475
|
.theme-cream .mini-chart-bar:hover {
|
|
1474
|
-
background: rgba(
|
|
1476
|
+
background: rgba(124, 58, 237, 0.50);
|
|
1475
1477
|
}
|
|
1476
1478
|
|
|
1477
1479
|
[data-theme='light'] .custom-scrollbar::-webkit-scrollbar-thumb,
|
|
1478
1480
|
.theme-cream .custom-scrollbar::-webkit-scrollbar-thumb {
|
|
1479
|
-
background: rgba(
|
|
1481
|
+
background: rgba(124, 58, 237, 0.06);
|
|
1480
1482
|
}
|
|
1481
1483
|
|
|
1482
1484
|
[data-theme='light'] .custom-scrollbar::-webkit-scrollbar-thumb:hover,
|
|
1483
1485
|
.theme-cream .custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
1484
|
-
background: rgba(
|
|
1486
|
+
background: rgba(124, 58, 237, 0.12);
|
|
1485
1487
|
}
|
|
1486
1488
|
|
|
1487
1489
|
[data-theme='light'] .empty-state-icon,
|
|
1488
1490
|
.theme-cream .empty-state-icon {
|
|
1489
|
-
background: rgba(
|
|
1490
|
-
border-color: rgba(
|
|
1491
|
+
background: rgba(124, 58, 237, 0.04);
|
|
1492
|
+
border-color: rgba(124, 58, 237, 0.08);
|
|
1491
1493
|
}
|
|
1492
1494
|
|
|
1493
1495
|
[data-theme='light'] .shadow-glass-lg,
|
|
1494
1496
|
.theme-cream .shadow-glass-lg {
|
|
1495
|
-
box-shadow: 0 8px 32px rgba(
|
|
1497
|
+
box-shadow: 0 8px 32px rgba(124, 58, 237, 0.08);
|
|
1496
1498
|
}
|
|
1497
1499
|
|
|
1498
1500
|
/* ═══════════════════════════════════════════════════════
|
|
@@ -1512,16 +1514,16 @@ input, textarea, select, button {
|
|
|
1512
1514
|
}
|
|
1513
1515
|
|
|
1514
1516
|
[data-theme='fluid'] .glass-btn-primary {
|
|
1515
|
-
box-shadow: 0 0 20px rgba(
|
|
1517
|
+
box-shadow: 0 0 20px rgba(124, 58, 237, 0.40), 0 0 40px rgba(124, 58, 237, 0.15);
|
|
1516
1518
|
}
|
|
1517
1519
|
|
|
1518
1520
|
[data-theme='fluid'] .glass-btn-primary:hover {
|
|
1519
|
-
box-shadow: 0 0 30px rgba(
|
|
1521
|
+
box-shadow: 0 0 30px rgba(124, 58, 237, 0.50), 0 0 60px rgba(124, 58, 237, 0.25);
|
|
1520
1522
|
}
|
|
1521
1523
|
|
|
1522
1524
|
[data-theme='fluid'] .glass-input:focus,
|
|
1523
1525
|
[data-theme='fluid'] .input-glass:focus {
|
|
1524
|
-
box-shadow: 0 0 0 3px rgba(
|
|
1526
|
+
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15), 0 0 20px rgba(124, 58, 237, 0.10);
|
|
1525
1527
|
}
|
|
1526
1528
|
|
|
1527
1529
|
[data-theme='fluid'] .metric-card {
|
|
@@ -1581,9 +1583,9 @@ input, textarea, select, button {
|
|
|
1581
1583
|
|
|
1582
1584
|
[data-theme='liquid'] .glass-input:focus,
|
|
1583
1585
|
[data-theme='liquid'] .input-glass:focus {
|
|
1584
|
-
border-color: rgba(
|
|
1586
|
+
border-color: rgba(124, 58, 237, 0.50);
|
|
1585
1587
|
background: rgba(255, 255, 255, 0.06);
|
|
1586
|
-
box-shadow: 0 0 0 3px rgba(
|
|
1588
|
+
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10), 0 0 20px rgba(124, 58, 237, 0.08);
|
|
1587
1589
|
}
|
|
1588
1590
|
|
|
1589
1591
|
[data-theme='liquid'] .glass-button {
|
|
@@ -1625,9 +1627,9 @@ input, textarea, select, button {
|
|
|
1625
1627
|
}
|
|
1626
1628
|
|
|
1627
1629
|
[data-theme='liquid'] .glass-pill-primary {
|
|
1628
|
-
background: rgba(
|
|
1629
|
-
border-color: rgba(
|
|
1630
|
-
color: #
|
|
1630
|
+
background: rgba(124, 58, 237, 0.15);
|
|
1631
|
+
border-color: rgba(124, 58, 237, 0.30);
|
|
1632
|
+
color: #A78BFA;
|
|
1631
1633
|
}
|
|
1632
1634
|
|
|
1633
1635
|
[data-theme='liquid'] .toast {
|
|
@@ -1647,33 +1649,33 @@ input, textarea, select, button {
|
|
|
1647
1649
|
}
|
|
1648
1650
|
|
|
1649
1651
|
[data-theme='liquid'] .dock-btn:hover {
|
|
1650
|
-
background: rgba(
|
|
1651
|
-
color: #
|
|
1652
|
+
background: rgba(124, 58, 237, 0.10);
|
|
1653
|
+
color: #A78BFA;
|
|
1652
1654
|
}
|
|
1653
1655
|
|
|
1654
1656
|
[data-theme='liquid'] .dock-btn.active {
|
|
1655
|
-
background: rgba(
|
|
1656
|
-
color: #
|
|
1657
|
-
box-shadow: 0 0 12px rgba(
|
|
1657
|
+
background: rgba(124, 58, 237, 0.20);
|
|
1658
|
+
color: #A78BFA;
|
|
1659
|
+
box-shadow: 0 0 12px rgba(124, 58, 237, 0.30);
|
|
1658
1660
|
}
|
|
1659
1661
|
|
|
1660
1662
|
[data-theme='liquid'] .text-glow {
|
|
1661
|
-
text-shadow: 0 0 15px rgba(
|
|
1663
|
+
text-shadow: 0 0 15px rgba(124, 58, 237, 0.60);
|
|
1662
1664
|
}
|
|
1663
1665
|
|
|
1664
1666
|
[data-theme='liquid'] .text-glow-sm {
|
|
1665
|
-
text-shadow: 0 0 8px rgba(
|
|
1667
|
+
text-shadow: 0 0 8px rgba(124, 58, 237, 0.40);
|
|
1666
1668
|
}
|
|
1667
1669
|
|
|
1668
1670
|
[data-theme='liquid'] .text-gradient {
|
|
1669
|
-
background: linear-gradient(to right, #
|
|
1671
|
+
background: linear-gradient(to right, #7C3AED, #A78BFA);
|
|
1670
1672
|
-webkit-background-clip: text;
|
|
1671
1673
|
-webkit-text-fill-color: transparent;
|
|
1672
1674
|
background-clip: text;
|
|
1673
1675
|
}
|
|
1674
1676
|
|
|
1675
1677
|
[data-theme='liquid'] .text-gradient-brand {
|
|
1676
|
-
background: linear-gradient(135deg, #
|
|
1678
|
+
background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
|
|
1677
1679
|
-webkit-background-clip: text;
|
|
1678
1680
|
-webkit-text-fill-color: transparent;
|
|
1679
1681
|
background-clip: text;
|
|
@@ -1690,32 +1692,32 @@ input, textarea, select, button {
|
|
|
1690
1692
|
}
|
|
1691
1693
|
|
|
1692
1694
|
[data-theme='liquid'] .mini-chart-bar {
|
|
1693
|
-
background: rgba(
|
|
1695
|
+
background: rgba(124, 58, 237, 0.40);
|
|
1694
1696
|
}
|
|
1695
1697
|
|
|
1696
1698
|
[data-theme='liquid'] .mini-chart-bar:hover {
|
|
1697
|
-
background: rgba(
|
|
1699
|
+
background: rgba(124, 58, 237, 0.70);
|
|
1698
1700
|
}
|
|
1699
1701
|
|
|
1700
1702
|
[data-theme='liquid'] .progress-fill {
|
|
1701
|
-
background: linear-gradient(90deg, #
|
|
1702
|
-
box-shadow: 0 0 12px rgba(
|
|
1703
|
+
background: linear-gradient(90deg, #7C3AED, #A78BFA);
|
|
1704
|
+
box-shadow: 0 0 12px rgba(124, 58, 237, 0.50);
|
|
1703
1705
|
}
|
|
1704
1706
|
|
|
1705
1707
|
[data-theme='liquid'] .shadow-glow {
|
|
1706
|
-
box-shadow: 0 0 20px rgba(
|
|
1708
|
+
box-shadow: 0 0 20px rgba(124, 58, 237, 0.40);
|
|
1707
1709
|
}
|
|
1708
1710
|
|
|
1709
1711
|
[data-theme='liquid'] .shadow-glow-primary {
|
|
1710
|
-
box-shadow: 0 0 24px rgba(
|
|
1712
|
+
box-shadow: 0 0 24px rgba(124, 58, 237, 0.35), 0 4px 16px rgba(124, 58, 237, 0.20);
|
|
1711
1713
|
}
|
|
1712
1714
|
|
|
1713
1715
|
[data-theme='liquid'] .shadow-neon {
|
|
1714
|
-
box-shadow: 0 0 15px rgba(
|
|
1716
|
+
box-shadow: 0 0 15px rgba(124, 58, 237, 0.50), 0 0 30px rgba(124, 58, 237, 0.25);
|
|
1715
1717
|
}
|
|
1716
1718
|
|
|
1717
1719
|
[data-theme='liquid'] .shadow-neon-glow {
|
|
1718
|
-
box-shadow: 0 0 30px rgba(
|
|
1720
|
+
box-shadow: 0 0 30px rgba(124, 58, 237, 0.50), 0 0 60px rgba(124, 58, 237, 0.25);
|
|
1719
1721
|
}
|
|
1720
1722
|
|
|
1721
1723
|
[data-theme='liquid'] .skeleton,
|
|
@@ -1737,9 +1739,9 @@ input, textarea, select, button {
|
|
|
1737
1739
|
}
|
|
1738
1740
|
|
|
1739
1741
|
[data-theme='liquid'] .empty-state-icon {
|
|
1740
|
-
background: rgba(
|
|
1741
|
-
border-color: rgba(
|
|
1742
|
-
color: #
|
|
1742
|
+
background: rgba(124, 58, 237, 0.08);
|
|
1743
|
+
border-color: rgba(124, 58, 237, 0.15);
|
|
1744
|
+
color: #7C3AED;
|
|
1743
1745
|
}
|
|
1744
1746
|
|
|
1745
1747
|
[data-theme='liquid'] .shadow-glass-lg {
|