@nibin-org/tokens 1.0.0 → 1.0.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/README.md +472 -85
- package/dist/styles.css +766 -230
- package/package.json +2 -2
package/dist/styles.css
CHANGED
|
@@ -1,358 +1,665 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
3
|
-
*
|
|
2
|
+
* @nibin-org/tokens - Enhanced Production Styles
|
|
3
|
+
* Sophisticated, production-grade design token documentation
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
/* ========================================
|
|
7
|
-
|
|
7
|
+
Typography Setup
|
|
8
|
+
======================================== */
|
|
9
|
+
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Fraunces:wght@300;400;600;700&display=swap');
|
|
10
|
+
|
|
11
|
+
/* ========================================
|
|
12
|
+
CSS Custom Properties
|
|
8
13
|
======================================== */
|
|
9
14
|
:root {
|
|
10
|
-
/*
|
|
15
|
+
/* Typography */
|
|
16
|
+
--ftd-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
17
|
+
--ftd-font-display: 'Fraunces', Georgia, serif;
|
|
18
|
+
--ftd-font-mono: 'JetBrains Mono', 'Monaco', 'Courier New', monospace;
|
|
19
|
+
|
|
20
|
+
/* Light theme - Sophisticated palette */
|
|
21
|
+
--ftd-bg-canvas: #fafbfc;
|
|
11
22
|
--ftd-bg-primary: #ffffff;
|
|
12
|
-
--ftd-bg-secondary: #
|
|
13
|
-
--ftd-bg-tertiary: #
|
|
14
|
-
--ftd-bg-glass: rgba(255, 255, 255, 0.
|
|
15
|
-
--ftd-
|
|
16
|
-
|
|
17
|
-
--ftd-text-
|
|
18
|
-
--ftd-
|
|
19
|
-
--ftd-
|
|
20
|
-
--ftd-
|
|
21
|
-
|
|
22
|
-
--ftd-
|
|
23
|
-
--ftd-
|
|
24
|
-
--ftd-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
--ftd-
|
|
28
|
-
--ftd-
|
|
23
|
+
--ftd-bg-secondary: #f6f8fa;
|
|
24
|
+
--ftd-bg-tertiary: #eef2f6;
|
|
25
|
+
--ftd-bg-glass: rgba(255, 255, 255, 0.85);
|
|
26
|
+
--ftd-bg-overlay: rgba(0, 0, 0, 0.02);
|
|
27
|
+
|
|
28
|
+
--ftd-text-primary: #0d1117;
|
|
29
|
+
--ftd-text-secondary: #57606a;
|
|
30
|
+
--ftd-text-tertiary: #818a95;
|
|
31
|
+
--ftd-text-muted: #9ca3af;
|
|
32
|
+
|
|
33
|
+
--ftd-border-subtle: #d8dee4;
|
|
34
|
+
--ftd-border-default: #cbd2d9;
|
|
35
|
+
--ftd-border-strong: #adb5bd;
|
|
36
|
+
|
|
37
|
+
/* Accent colors - Refined jewel tones */
|
|
38
|
+
--ftd-accent-primary: #5b47fb;
|
|
39
|
+
--ftd-accent-primary-hover: #4835d4;
|
|
40
|
+
--ftd-accent-secondary: #0ea5e9;
|
|
41
|
+
--ftd-accent-tertiary: #8b5cf6;
|
|
42
|
+
--ftd-accent-success: #059669;
|
|
43
|
+
--ftd-accent-warning: #f59e0b;
|
|
44
|
+
--ftd-accent-error: #dc2626;
|
|
45
|
+
|
|
46
|
+
/* Gradients */
|
|
47
|
+
--ftd-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
48
|
+
--ftd-gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
49
|
+
--ftd-gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
50
|
+
--ftd-gradient-warm: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
|
51
|
+
--ftd-gradient-cool: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
|
|
52
|
+
--ftd-gradient-mesh:
|
|
53
|
+
radial-gradient(at 40% 20%, hsla(270, 70%, 65%, 0.15) 0px, transparent 50%),
|
|
54
|
+
radial-gradient(at 80% 0%, hsla(220, 70%, 65%, 0.15) 0px, transparent 50%),
|
|
55
|
+
radial-gradient(at 0% 50%, hsla(195, 70%, 65%, 0.15) 0px, transparent 50%);
|
|
56
|
+
|
|
57
|
+
/* Shadows - Refined elevation system */
|
|
58
|
+
--ftd-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
59
|
+
--ftd-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
60
|
+
--ftd-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
|
|
61
|
+
--ftd-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06);
|
|
62
|
+
--ftd-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
|
|
63
|
+
--ftd-shadow-glow: 0 0 24px rgba(91, 71, 251, 0.2);
|
|
64
|
+
--ftd-shadow-glow-lg: 0 0 48px rgba(91, 71, 251, 0.25), 0 0 96px rgba(91, 71, 251, 0.1);
|
|
65
|
+
|
|
66
|
+
/* Border radius - Organic system */
|
|
67
|
+
--ftd-radius-xs: 4px;
|
|
68
|
+
--ftd-radius-sm: 8px;
|
|
69
|
+
--ftd-radius-md: 12px;
|
|
29
70
|
--ftd-radius-lg: 16px;
|
|
30
71
|
--ftd-radius-xl: 24px;
|
|
31
|
-
--ftd-
|
|
72
|
+
--ftd-radius-2xl: 32px;
|
|
73
|
+
--ftd-radius-full: 9999px;
|
|
74
|
+
|
|
75
|
+
/* Transitions - Polished motion */
|
|
76
|
+
--ftd-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
77
|
+
--ftd-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
78
|
+
--ftd-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
79
|
+
--ftd-transition-bounce: 450ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
32
80
|
}
|
|
33
81
|
|
|
34
|
-
/* Dark theme */
|
|
82
|
+
/* Dark theme - Premium dark palette */
|
|
35
83
|
[data-theme="dark"] {
|
|
36
|
-
--ftd-bg-
|
|
37
|
-
--ftd-bg-
|
|
38
|
-
--ftd-bg-
|
|
39
|
-
--ftd-bg-
|
|
40
|
-
--ftd-
|
|
41
|
-
--ftd-
|
|
42
|
-
|
|
43
|
-
--ftd-
|
|
44
|
-
--ftd-
|
|
45
|
-
--ftd-
|
|
46
|
-
--ftd-
|
|
47
|
-
|
|
48
|
-
--ftd-
|
|
84
|
+
--ftd-bg-canvas: #0d1117;
|
|
85
|
+
--ftd-bg-primary: #161b22;
|
|
86
|
+
--ftd-bg-secondary: #1c2128;
|
|
87
|
+
--ftd-bg-tertiary: #2d333b;
|
|
88
|
+
--ftd-bg-glass: rgba(22, 27, 34, 0.85);
|
|
89
|
+
--ftd-bg-overlay: rgba(255, 255, 255, 0.02);
|
|
90
|
+
|
|
91
|
+
--ftd-text-primary: #e6edf3;
|
|
92
|
+
--ftd-text-secondary: #adbac7;
|
|
93
|
+
--ftd-text-tertiary: #768390;
|
|
94
|
+
--ftd-text-muted: #636e7b;
|
|
95
|
+
|
|
96
|
+
--ftd-border-subtle: #2d333b;
|
|
97
|
+
--ftd-border-default: #373e47;
|
|
98
|
+
--ftd-border-strong: #444c56;
|
|
99
|
+
|
|
100
|
+
--ftd-accent-primary: #6b63ff;
|
|
101
|
+
--ftd-accent-primary-hover: #7c75ff;
|
|
102
|
+
--ftd-accent-secondary: #38bdf8;
|
|
103
|
+
--ftd-accent-tertiary: #a78bfa;
|
|
104
|
+
|
|
105
|
+
--ftd-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
106
|
+
--ftd-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
107
|
+
--ftd-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.6);
|
|
108
|
+
--ftd-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.7);
|
|
109
|
+
--ftd-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.9), 0 8px 16px rgba(0, 0, 0, 0.8);
|
|
110
|
+
--ftd-shadow-glow: 0 0 32px rgba(107, 99, 255, 0.3);
|
|
111
|
+
--ftd-shadow-glow-lg: 0 0 56px rgba(107, 99, 255, 0.35), 0 0 112px rgba(107, 99, 255, 0.15);
|
|
49
112
|
}
|
|
50
113
|
|
|
51
114
|
/* ========================================
|
|
52
|
-
Base
|
|
115
|
+
Base Styles & Reset
|
|
53
116
|
======================================== */
|
|
54
117
|
.ftd-container {
|
|
55
|
-
font-family:
|
|
56
|
-
background: var(--ftd-bg-
|
|
118
|
+
font-family: var(--ftd-font-sans);
|
|
119
|
+
background: var(--ftd-bg-canvas);
|
|
57
120
|
color: var(--ftd-text-primary);
|
|
58
|
-
padding:
|
|
59
|
-
border-radius: var(--ftd-radius-xl);
|
|
121
|
+
padding: clamp(24px, 5vw, 64px);
|
|
60
122
|
min-height: 100vh;
|
|
123
|
+
position: relative;
|
|
124
|
+
isolation: isolate;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.ftd-container::before {
|
|
128
|
+
content: '';
|
|
129
|
+
position: fixed;
|
|
130
|
+
inset: 0;
|
|
131
|
+
background: var(--ftd-gradient-mesh);
|
|
132
|
+
opacity: 0.4;
|
|
133
|
+
z-index: -1;
|
|
134
|
+
pointer-events: none;
|
|
61
135
|
}
|
|
62
136
|
|
|
63
137
|
/* ========================================
|
|
64
|
-
Header
|
|
138
|
+
Header - Editorial Style
|
|
65
139
|
======================================== */
|
|
66
140
|
.ftd-header {
|
|
67
141
|
display: flex;
|
|
68
142
|
justify-content: space-between;
|
|
69
|
-
align-items:
|
|
70
|
-
margin-bottom: 40px;
|
|
71
|
-
padding-bottom: 24px;
|
|
72
|
-
border-bottom:
|
|
143
|
+
align-items: flex-start;
|
|
144
|
+
margin-bottom: clamp(40px, 6vw, 64px);
|
|
145
|
+
padding-bottom: clamp(24px, 4vw, 40px);
|
|
146
|
+
border-bottom: 2px solid var(--ftd-border-subtle);
|
|
147
|
+
position: relative;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.ftd-header::after {
|
|
151
|
+
content: '';
|
|
152
|
+
position: absolute;
|
|
153
|
+
bottom: -2px;
|
|
154
|
+
left: 0;
|
|
155
|
+
width: 120px;
|
|
156
|
+
height: 2px;
|
|
157
|
+
background: var(--ftd-gradient-primary);
|
|
158
|
+
border-radius: 999px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.ftd-title-wrapper {
|
|
162
|
+
flex: 1;
|
|
73
163
|
}
|
|
74
164
|
|
|
75
165
|
.ftd-title {
|
|
76
|
-
font-
|
|
166
|
+
font-family: var(--ftd-font-display);
|
|
167
|
+
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
77
168
|
font-weight: 700;
|
|
78
|
-
|
|
169
|
+
line-height: 1.1;
|
|
170
|
+
letter-spacing: -0.02em;
|
|
171
|
+
background: var(--ftd-gradient-primary);
|
|
79
172
|
-webkit-background-clip: text;
|
|
80
173
|
-webkit-text-fill-color: transparent;
|
|
81
174
|
background-clip: text;
|
|
82
|
-
margin: 0;
|
|
175
|
+
margin: 0 0 12px;
|
|
176
|
+
animation: ftd-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
83
177
|
}
|
|
84
178
|
|
|
85
179
|
.ftd-subtitle {
|
|
86
|
-
font-size:
|
|
180
|
+
font-size: clamp(0.95rem, 2vw, 1.125rem);
|
|
87
181
|
color: var(--ftd-text-secondary);
|
|
88
|
-
|
|
182
|
+
font-weight: 500;
|
|
183
|
+
margin: 0;
|
|
184
|
+
max-width: 600px;
|
|
185
|
+
line-height: 1.6;
|
|
186
|
+
animation: ftd-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
|
|
89
187
|
}
|
|
90
188
|
|
|
91
189
|
.ftd-theme-toggle {
|
|
92
190
|
display: flex;
|
|
93
191
|
align-items: center;
|
|
94
|
-
gap:
|
|
95
|
-
padding:
|
|
96
|
-
background: var(--ftd-bg-
|
|
97
|
-
border: 1px solid var(--ftd-border-
|
|
98
|
-
border-radius: var(--ftd-radius-
|
|
192
|
+
gap: 10px;
|
|
193
|
+
padding: 12px 20px;
|
|
194
|
+
background: var(--ftd-bg-primary);
|
|
195
|
+
border: 1px solid var(--ftd-border-default);
|
|
196
|
+
border-radius: var(--ftd-radius-full);
|
|
99
197
|
cursor: pointer;
|
|
100
|
-
transition: var(--ftd-transition);
|
|
198
|
+
transition: all var(--ftd-transition-base);
|
|
101
199
|
color: var(--ftd-text-primary);
|
|
102
|
-
font-size: 0.
|
|
103
|
-
font-weight:
|
|
200
|
+
font-size: 0.9rem;
|
|
201
|
+
font-weight: 600;
|
|
202
|
+
box-shadow: var(--ftd-shadow-sm);
|
|
203
|
+
position: relative;
|
|
204
|
+
overflow: hidden;
|
|
205
|
+
animation: ftd-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.ftd-theme-toggle::before {
|
|
209
|
+
content: '';
|
|
210
|
+
position: absolute;
|
|
211
|
+
inset: 0;
|
|
212
|
+
background: var(--ftd-gradient-primary);
|
|
213
|
+
opacity: 0;
|
|
214
|
+
transition: opacity var(--ftd-transition-base);
|
|
104
215
|
}
|
|
105
216
|
|
|
106
217
|
.ftd-theme-toggle:hover {
|
|
107
|
-
|
|
108
|
-
border-color: var(--ftd-
|
|
218
|
+
transform: translateY(-2px);
|
|
219
|
+
border-color: var(--ftd-accent-primary);
|
|
220
|
+
box-shadow: var(--ftd-shadow-md), var(--ftd-shadow-glow);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.ftd-theme-toggle:hover::before {
|
|
224
|
+
opacity: 0.08;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.ftd-theme-toggle:active {
|
|
228
|
+
transform: translateY(0);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.ftd-theme-toggle-icon {
|
|
232
|
+
font-size: 1.125rem;
|
|
233
|
+
position: relative;
|
|
234
|
+
z-index: 1;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.ftd-theme-toggle-text {
|
|
238
|
+
position: relative;
|
|
239
|
+
z-index: 1;
|
|
109
240
|
}
|
|
110
241
|
|
|
111
242
|
/* ========================================
|
|
112
|
-
Tabs Navigation
|
|
243
|
+
Tabs Navigation - Pills Style
|
|
113
244
|
======================================== */
|
|
114
245
|
.ftd-tabs {
|
|
115
246
|
display: flex;
|
|
116
|
-
gap:
|
|
117
|
-
padding:
|
|
118
|
-
background: var(--ftd-bg-
|
|
119
|
-
border
|
|
120
|
-
|
|
247
|
+
gap: 8px;
|
|
248
|
+
padding: 6px;
|
|
249
|
+
background: var(--ftd-bg-primary);
|
|
250
|
+
border: 1px solid var(--ftd-border-subtle);
|
|
251
|
+
border-radius: var(--ftd-radius-xl);
|
|
252
|
+
margin-bottom: clamp(32px, 5vw, 48px);
|
|
121
253
|
overflow-x: auto;
|
|
254
|
+
scrollbar-width: none;
|
|
255
|
+
box-shadow: var(--ftd-shadow-sm);
|
|
256
|
+
animation: ftd-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.ftd-tabs::-webkit-scrollbar {
|
|
260
|
+
display: none;
|
|
122
261
|
}
|
|
123
262
|
|
|
124
263
|
.ftd-tab {
|
|
125
|
-
padding:
|
|
264
|
+
padding: 14px 28px;
|
|
126
265
|
border: none;
|
|
127
266
|
background: transparent;
|
|
128
267
|
color: var(--ftd-text-secondary);
|
|
129
|
-
font-size: 0.
|
|
130
|
-
font-weight:
|
|
268
|
+
font-size: 0.95rem;
|
|
269
|
+
font-weight: 600;
|
|
131
270
|
cursor: pointer;
|
|
132
|
-
border-radius: var(--ftd-radius-
|
|
133
|
-
transition: var(--ftd-transition);
|
|
271
|
+
border-radius: var(--ftd-radius-lg);
|
|
272
|
+
transition: all var(--ftd-transition-base);
|
|
134
273
|
white-space: nowrap;
|
|
274
|
+
position: relative;
|
|
275
|
+
overflow: hidden;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.ftd-tab::before {
|
|
279
|
+
content: '';
|
|
280
|
+
position: absolute;
|
|
281
|
+
inset: 0;
|
|
282
|
+
background: var(--ftd-bg-overlay);
|
|
283
|
+
opacity: 0;
|
|
284
|
+
transition: opacity var(--ftd-transition-fast);
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.ftd-tab:hover::before {
|
|
288
|
+
opacity: 1;
|
|
135
289
|
}
|
|
136
290
|
|
|
137
291
|
.ftd-tab:hover {
|
|
138
292
|
color: var(--ftd-text-primary);
|
|
139
|
-
background: var(--ftd-bg-glass);
|
|
140
293
|
}
|
|
141
294
|
|
|
142
295
|
.ftd-tab.active {
|
|
143
|
-
background: var(--ftd-
|
|
144
|
-
color:
|
|
145
|
-
box-shadow: var(--ftd-shadow-sm);
|
|
296
|
+
background: var(--ftd-gradient-primary);
|
|
297
|
+
color: white;
|
|
298
|
+
box-shadow: var(--ftd-shadow-sm), 0 0 0 1px rgba(91, 71, 251, 0.2);
|
|
299
|
+
transform: scale(1.02);
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.ftd-tab.active::before {
|
|
303
|
+
display: none;
|
|
146
304
|
}
|
|
147
305
|
|
|
148
306
|
/* ========================================
|
|
149
|
-
Section Headers
|
|
307
|
+
Section Headers - Magazine Style
|
|
150
308
|
======================================== */
|
|
151
309
|
.ftd-section {
|
|
152
|
-
margin-bottom: 48px;
|
|
310
|
+
margin-bottom: clamp(48px, 8vw, 72px);
|
|
311
|
+
animation: ftd-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
153
312
|
}
|
|
154
313
|
|
|
155
314
|
.ftd-section-header {
|
|
156
315
|
display: flex;
|
|
157
316
|
align-items: center;
|
|
158
|
-
gap:
|
|
159
|
-
margin-bottom: 24px;
|
|
317
|
+
gap: 16px;
|
|
318
|
+
margin-bottom: clamp(24px, 4vw, 32px);
|
|
319
|
+
position: relative;
|
|
320
|
+
padding-bottom: 16px;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.ftd-section-header::after {
|
|
324
|
+
content: '';
|
|
325
|
+
position: absolute;
|
|
326
|
+
bottom: 0;
|
|
327
|
+
left: 56px;
|
|
328
|
+
right: 0;
|
|
329
|
+
height: 1px;
|
|
330
|
+
background: linear-gradient(90deg, var(--ftd-border-default), transparent);
|
|
160
331
|
}
|
|
161
332
|
|
|
162
333
|
.ftd-section-icon {
|
|
163
|
-
width:
|
|
164
|
-
height:
|
|
334
|
+
width: 48px;
|
|
335
|
+
height: 48px;
|
|
165
336
|
display: flex;
|
|
166
337
|
align-items: center;
|
|
167
338
|
justify-content: center;
|
|
168
|
-
background:
|
|
169
|
-
border-radius: var(--ftd-radius-
|
|
170
|
-
font-size: 1.
|
|
339
|
+
background: var(--ftd-gradient-primary);
|
|
340
|
+
border-radius: var(--ftd-radius-lg);
|
|
341
|
+
font-size: 1.5rem;
|
|
342
|
+
box-shadow: var(--ftd-shadow-md), var(--ftd-shadow-glow);
|
|
343
|
+
position: relative;
|
|
344
|
+
overflow: hidden;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.ftd-section-icon::before {
|
|
348
|
+
content: '';
|
|
349
|
+
position: absolute;
|
|
350
|
+
inset: -2px;
|
|
351
|
+
background: var(--ftd-gradient-primary);
|
|
352
|
+
border-radius: var(--ftd-radius-lg);
|
|
353
|
+
filter: blur(8px);
|
|
354
|
+
opacity: 0.5;
|
|
355
|
+
z-index: -1;
|
|
171
356
|
}
|
|
172
357
|
|
|
173
358
|
.ftd-section-title {
|
|
174
|
-
font-
|
|
175
|
-
font-
|
|
359
|
+
font-family: var(--ftd-font-display);
|
|
360
|
+
font-size: clamp(1.5rem, 3vw, 2rem);
|
|
361
|
+
font-weight: 700;
|
|
176
362
|
margin: 0;
|
|
363
|
+
letter-spacing: -0.01em;
|
|
177
364
|
}
|
|
178
365
|
|
|
179
366
|
.ftd-section-count {
|
|
180
367
|
font-size: 0.875rem;
|
|
368
|
+
font-weight: 600;
|
|
181
369
|
color: var(--ftd-text-tertiary);
|
|
182
|
-
background: var(--ftd-bg-
|
|
183
|
-
padding:
|
|
184
|
-
border-radius:
|
|
370
|
+
background: var(--ftd-bg-tertiary);
|
|
371
|
+
padding: 6px 14px;
|
|
372
|
+
border-radius: var(--ftd-radius-full);
|
|
373
|
+
margin-left: auto;
|
|
374
|
+
border: 1px solid var(--ftd-border-subtle);
|
|
185
375
|
}
|
|
186
376
|
|
|
187
377
|
/* ========================================
|
|
188
|
-
Token Cards
|
|
378
|
+
Token Cards - Refined Design
|
|
189
379
|
======================================== */
|
|
190
380
|
.ftd-token-grid {
|
|
191
381
|
display: grid;
|
|
192
|
-
grid-template-columns: repeat(auto-fill, minmax(
|
|
193
|
-
gap:
|
|
382
|
+
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
383
|
+
gap: 20px;
|
|
194
384
|
}
|
|
195
385
|
|
|
196
386
|
.ftd-token-card {
|
|
197
|
-
background: var(--ftd-bg-
|
|
198
|
-
border: 1px solid var(--ftd-border-
|
|
387
|
+
background: var(--ftd-bg-primary);
|
|
388
|
+
border: 1px solid var(--ftd-border-subtle);
|
|
199
389
|
border-radius: var(--ftd-radius-lg);
|
|
200
390
|
overflow: hidden;
|
|
201
|
-
transition: var(--ftd-transition);
|
|
391
|
+
transition: all var(--ftd-transition-base);
|
|
202
392
|
cursor: pointer;
|
|
393
|
+
position: relative;
|
|
394
|
+
box-shadow: var(--ftd-shadow-xs);
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.ftd-token-card::before {
|
|
398
|
+
content: '';
|
|
399
|
+
position: absolute;
|
|
400
|
+
inset: 0;
|
|
401
|
+
border-radius: var(--ftd-radius-lg);
|
|
402
|
+
padding: 1px;
|
|
403
|
+
background: var(--ftd-gradient-primary);
|
|
404
|
+
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
405
|
+
-webkit-mask-composite: xor;
|
|
406
|
+
mask-composite: exclude;
|
|
407
|
+
opacity: 0;
|
|
408
|
+
transition: opacity var(--ftd-transition-base);
|
|
203
409
|
}
|
|
204
410
|
|
|
205
411
|
.ftd-token-card:hover {
|
|
206
412
|
transform: translateY(-4px);
|
|
207
413
|
box-shadow: var(--ftd-shadow-lg);
|
|
208
|
-
border-color:
|
|
414
|
+
border-color: transparent;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.ftd-token-card:hover::before {
|
|
418
|
+
opacity: 1;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.ftd-token-card:active {
|
|
422
|
+
transform: translateY(-2px);
|
|
209
423
|
}
|
|
210
424
|
|
|
211
425
|
.ftd-token-swatch {
|
|
212
|
-
height:
|
|
426
|
+
height: 100px;
|
|
213
427
|
display: flex;
|
|
214
428
|
align-items: flex-end;
|
|
215
|
-
padding:
|
|
429
|
+
padding: 12px;
|
|
216
430
|
position: relative;
|
|
431
|
+
background: var(--ftd-bg-overlay);
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
.ftd-token-swatch-inner {
|
|
435
|
+
width: 100%;
|
|
436
|
+
height: 100%;
|
|
437
|
+
position: absolute;
|
|
438
|
+
inset: 0;
|
|
439
|
+
transition: transform var(--ftd-transition-base);
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.ftd-token-card:hover .ftd-token-swatch-inner {
|
|
443
|
+
transform: scale(1.05);
|
|
217
444
|
}
|
|
218
445
|
|
|
219
446
|
.ftd-token-contrast {
|
|
220
447
|
position: absolute;
|
|
221
|
-
top:
|
|
222
|
-
right:
|
|
448
|
+
top: 12px;
|
|
449
|
+
right: 12px;
|
|
223
450
|
font-size: 0.625rem;
|
|
224
|
-
font-weight:
|
|
225
|
-
padding:
|
|
226
|
-
border-radius:
|
|
227
|
-
background: rgba(0, 0, 0, 0.
|
|
451
|
+
font-weight: 700;
|
|
452
|
+
padding: 4px 8px;
|
|
453
|
+
border-radius: var(--ftd-radius-sm);
|
|
454
|
+
background: rgba(0, 0, 0, 0.5);
|
|
455
|
+
backdrop-filter: blur(8px);
|
|
228
456
|
color: white;
|
|
457
|
+
z-index: 1;
|
|
458
|
+
letter-spacing: 0.5px;
|
|
459
|
+
text-transform: uppercase;
|
|
229
460
|
}
|
|
230
461
|
|
|
231
462
|
.ftd-token-info {
|
|
232
|
-
padding:
|
|
463
|
+
padding: 16px;
|
|
464
|
+
background: var(--ftd-bg-primary);
|
|
465
|
+
position: relative;
|
|
466
|
+
z-index: 1;
|
|
233
467
|
}
|
|
234
468
|
|
|
235
469
|
.ftd-token-name {
|
|
236
|
-
font-size: 0.
|
|
237
|
-
font-weight:
|
|
238
|
-
margin: 0 0
|
|
470
|
+
font-size: 0.9rem;
|
|
471
|
+
font-weight: 700;
|
|
472
|
+
margin: 0 0 6px;
|
|
239
473
|
color: var(--ftd-text-primary);
|
|
474
|
+
letter-spacing: -0.01em;
|
|
240
475
|
}
|
|
241
476
|
|
|
242
477
|
.ftd-token-value {
|
|
243
|
-
font-size: 0.
|
|
244
|
-
font-family:
|
|
478
|
+
font-size: 0.8rem;
|
|
479
|
+
font-family: var(--ftd-font-mono);
|
|
245
480
|
color: var(--ftd-text-secondary);
|
|
246
481
|
margin: 0;
|
|
247
482
|
display: flex;
|
|
248
483
|
align-items: center;
|
|
249
|
-
gap:
|
|
484
|
+
gap: 8px;
|
|
485
|
+
font-weight: 500;
|
|
250
486
|
}
|
|
251
487
|
|
|
252
488
|
.ftd-copy-icon {
|
|
253
489
|
opacity: 0;
|
|
254
|
-
transition: var(--ftd-transition);
|
|
490
|
+
transition: all var(--ftd-transition-fast);
|
|
491
|
+
color: var(--ftd-accent-primary);
|
|
492
|
+
font-size: 0.875rem;
|
|
255
493
|
}
|
|
256
494
|
|
|
257
495
|
.ftd-token-card:hover .ftd-copy-icon {
|
|
258
496
|
opacity: 1;
|
|
497
|
+
transform: scale(1.1);
|
|
259
498
|
}
|
|
260
499
|
|
|
500
|
+
/* ========================================
|
|
501
|
+
Toast Notification - Delightful
|
|
502
|
+
======================================== */
|
|
261
503
|
.ftd-copied-toast {
|
|
262
504
|
position: fixed;
|
|
263
|
-
bottom:
|
|
505
|
+
bottom: 32px;
|
|
264
506
|
left: 50%;
|
|
265
507
|
transform: translateX(-50%);
|
|
266
|
-
background: var(--ftd-success);
|
|
508
|
+
background: var(--ftd-accent-success);
|
|
267
509
|
color: white;
|
|
268
|
-
padding:
|
|
269
|
-
border-radius: var(--ftd-radius-
|
|
270
|
-
font-size: 0.
|
|
271
|
-
font-weight:
|
|
272
|
-
box-shadow: var(--ftd-shadow-
|
|
510
|
+
padding: 16px 28px;
|
|
511
|
+
border-radius: var(--ftd-radius-full);
|
|
512
|
+
font-size: 0.9rem;
|
|
513
|
+
font-weight: 600;
|
|
514
|
+
box-shadow: var(--ftd-shadow-xl);
|
|
273
515
|
z-index: 1000;
|
|
274
|
-
animation: ftd-toast-
|
|
516
|
+
animation: ftd-toast-bounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
517
|
+
display: flex;
|
|
518
|
+
align-items: center;
|
|
519
|
+
gap: 10px;
|
|
520
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
275
521
|
}
|
|
276
522
|
|
|
277
|
-
|
|
278
|
-
|
|
523
|
+
.ftd-copied-toast::before {
|
|
524
|
+
content: '✓';
|
|
525
|
+
font-size: 1.125rem;
|
|
526
|
+
font-weight: 700;
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
@keyframes ftd-toast-bounce {
|
|
530
|
+
0% {
|
|
279
531
|
opacity: 0;
|
|
280
|
-
transform: translateX(-50%) translateY(
|
|
532
|
+
transform: translateX(-50%) translateY(20px) scale(0.9);
|
|
281
533
|
}
|
|
282
|
-
|
|
534
|
+
50% {
|
|
535
|
+
transform: translateX(-50%) translateY(-5px) scale(1.02);
|
|
536
|
+
}
|
|
537
|
+
100% {
|
|
283
538
|
opacity: 1;
|
|
284
|
-
transform: translateX(-50%) translateY(0);
|
|
539
|
+
transform: translateX(-50%) translateY(0) scale(1);
|
|
285
540
|
}
|
|
286
541
|
}
|
|
287
542
|
|
|
288
543
|
/* ========================================
|
|
289
|
-
Color
|
|
544
|
+
Color Family - Artistic Layout
|
|
290
545
|
======================================== */
|
|
291
546
|
.ftd-color-family {
|
|
292
|
-
margin-bottom: 32px;
|
|
547
|
+
margin-bottom: clamp(32px, 5vw, 48px);
|
|
548
|
+
animation: ftd-fade-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
293
549
|
}
|
|
294
550
|
|
|
295
551
|
.ftd-color-family-header {
|
|
296
552
|
display: flex;
|
|
297
553
|
align-items: center;
|
|
298
|
-
gap:
|
|
299
|
-
margin-bottom:
|
|
554
|
+
gap: 14px;
|
|
555
|
+
margin-bottom: 20px;
|
|
300
556
|
}
|
|
301
557
|
|
|
302
558
|
.ftd-color-family-swatch {
|
|
303
|
-
width:
|
|
304
|
-
height:
|
|
305
|
-
border-radius: var(--ftd-radius-
|
|
306
|
-
box-shadow: var(--ftd-shadow-
|
|
559
|
+
width: 32px;
|
|
560
|
+
height: 32px;
|
|
561
|
+
border-radius: var(--ftd-radius-md);
|
|
562
|
+
box-shadow: var(--ftd-shadow-md), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
|
563
|
+
position: relative;
|
|
564
|
+
overflow: hidden;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.ftd-color-family-swatch::before {
|
|
568
|
+
content: '';
|
|
569
|
+
position: absolute;
|
|
570
|
+
inset: -50%;
|
|
571
|
+
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
572
|
+
animation: ftd-shimmer 2s infinite;
|
|
307
573
|
}
|
|
308
574
|
|
|
309
575
|
.ftd-color-family-name {
|
|
310
|
-
font-
|
|
311
|
-
font-
|
|
576
|
+
font-family: var(--ftd-font-display);
|
|
577
|
+
font-size: 1.25rem;
|
|
578
|
+
font-weight: 700;
|
|
312
579
|
margin: 0;
|
|
313
580
|
text-transform: capitalize;
|
|
581
|
+
letter-spacing: -0.01em;
|
|
314
582
|
}
|
|
315
583
|
|
|
316
584
|
.ftd-color-scale {
|
|
317
585
|
display: flex;
|
|
318
|
-
border-radius: var(--ftd-radius-
|
|
586
|
+
border-radius: var(--ftd-radius-xl);
|
|
319
587
|
overflow: hidden;
|
|
320
|
-
box-shadow: var(--ftd-shadow-
|
|
588
|
+
box-shadow: var(--ftd-shadow-lg);
|
|
589
|
+
border: 1px solid var(--ftd-border-subtle);
|
|
590
|
+
position: relative;
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
.ftd-color-scale::before {
|
|
594
|
+
content: '';
|
|
595
|
+
position: absolute;
|
|
596
|
+
inset: 0;
|
|
597
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
598
|
+
pointer-events: none;
|
|
599
|
+
opacity: 0;
|
|
600
|
+
transition: opacity var(--ftd-transition-base);
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
.ftd-color-scale:hover::before {
|
|
604
|
+
opacity: 1;
|
|
321
605
|
}
|
|
322
606
|
|
|
323
607
|
.ftd-color-shade {
|
|
324
608
|
flex: 1;
|
|
325
|
-
min-width:
|
|
326
|
-
height:
|
|
609
|
+
min-width: 70px;
|
|
610
|
+
height: 120px;
|
|
327
611
|
display: flex;
|
|
328
612
|
flex-direction: column;
|
|
329
613
|
justify-content: flex-end;
|
|
330
|
-
padding:
|
|
614
|
+
padding: 12px;
|
|
331
615
|
cursor: pointer;
|
|
332
|
-
transition: var(--ftd-transition);
|
|
616
|
+
transition: all var(--ftd-transition-base);
|
|
333
617
|
position: relative;
|
|
334
618
|
}
|
|
335
619
|
|
|
620
|
+
.ftd-color-shade::before {
|
|
621
|
+
content: '';
|
|
622
|
+
position: absolute;
|
|
623
|
+
inset: 0;
|
|
624
|
+
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
|
|
625
|
+
opacity: 0;
|
|
626
|
+
transition: opacity var(--ftd-transition-fast);
|
|
627
|
+
}
|
|
628
|
+
|
|
336
629
|
.ftd-color-shade:hover {
|
|
337
|
-
transform: scale(1.
|
|
630
|
+
transform: scale(1.08);
|
|
338
631
|
z-index: 10;
|
|
339
|
-
box-shadow: var(--ftd-shadow-
|
|
632
|
+
box-shadow: var(--ftd-shadow-xl);
|
|
633
|
+
border-radius: var(--ftd-radius-md);
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
.ftd-color-shade:hover::before {
|
|
637
|
+
opacity: 1;
|
|
340
638
|
}
|
|
341
639
|
|
|
342
640
|
.ftd-color-shade-label {
|
|
343
|
-
font-size: 0.
|
|
344
|
-
font-weight:
|
|
345
|
-
opacity: 0.
|
|
641
|
+
font-size: 0.7rem;
|
|
642
|
+
font-weight: 700;
|
|
643
|
+
opacity: 0.95;
|
|
644
|
+
letter-spacing: 0.5px;
|
|
645
|
+
text-transform: uppercase;
|
|
646
|
+
position: relative;
|
|
647
|
+
z-index: 1;
|
|
648
|
+
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
346
649
|
}
|
|
347
650
|
|
|
348
651
|
.ftd-color-shade-value {
|
|
349
|
-
font-size: 0.
|
|
350
|
-
font-family:
|
|
351
|
-
opacity: 0.
|
|
652
|
+
font-size: 0.625rem;
|
|
653
|
+
font-family: var(--ftd-font-mono);
|
|
654
|
+
opacity: 0.8;
|
|
655
|
+
font-weight: 600;
|
|
656
|
+
position: relative;
|
|
657
|
+
z-index: 1;
|
|
658
|
+
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
352
659
|
}
|
|
353
660
|
|
|
354
661
|
/* ========================================
|
|
355
|
-
Spacing Scale
|
|
662
|
+
Spacing Scale - Visual Hierarchy
|
|
356
663
|
======================================== */
|
|
357
664
|
.ftd-spacing-list {
|
|
358
665
|
display: flex;
|
|
@@ -363,198 +670,348 @@
|
|
|
363
670
|
.ftd-spacing-item {
|
|
364
671
|
display: flex;
|
|
365
672
|
align-items: center;
|
|
366
|
-
gap:
|
|
367
|
-
padding:
|
|
368
|
-
background: var(--ftd-bg-
|
|
369
|
-
border
|
|
370
|
-
|
|
673
|
+
gap: 28px;
|
|
674
|
+
padding: 20px;
|
|
675
|
+
background: var(--ftd-bg-primary);
|
|
676
|
+
border: 1px solid var(--ftd-border-subtle);
|
|
677
|
+
border-radius: var(--ftd-radius-lg);
|
|
678
|
+
transition: all var(--ftd-transition-base);
|
|
679
|
+
position: relative;
|
|
680
|
+
overflow: hidden;
|
|
681
|
+
box-shadow: var(--ftd-shadow-xs);
|
|
682
|
+
}
|
|
683
|
+
|
|
684
|
+
.ftd-spacing-item::before {
|
|
685
|
+
content: '';
|
|
686
|
+
position: absolute;
|
|
687
|
+
left: 0;
|
|
688
|
+
top: 0;
|
|
689
|
+
bottom: 0;
|
|
690
|
+
width: 4px;
|
|
691
|
+
background: var(--ftd-gradient-primary);
|
|
692
|
+
opacity: 0;
|
|
693
|
+
transition: opacity var(--ftd-transition-base);
|
|
371
694
|
}
|
|
372
695
|
|
|
373
696
|
.ftd-spacing-item:hover {
|
|
374
|
-
background: var(--ftd-bg-
|
|
697
|
+
background: var(--ftd-bg-secondary);
|
|
698
|
+
box-shadow: var(--ftd-shadow-md);
|
|
699
|
+
transform: translateX(4px);
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
.ftd-spacing-item:hover::before {
|
|
703
|
+
opacity: 1;
|
|
375
704
|
}
|
|
376
705
|
|
|
377
706
|
.ftd-spacing-label {
|
|
378
|
-
min-width:
|
|
379
|
-
font-weight:
|
|
380
|
-
font-size: 0.
|
|
707
|
+
min-width: 120px;
|
|
708
|
+
font-weight: 700;
|
|
709
|
+
font-size: 0.9rem;
|
|
710
|
+
color: var(--ftd-text-primary);
|
|
711
|
+
font-family: var(--ftd-font-mono);
|
|
381
712
|
}
|
|
382
713
|
|
|
383
714
|
.ftd-spacing-bar-container {
|
|
384
715
|
flex: 1;
|
|
385
|
-
height:
|
|
716
|
+
height: 32px;
|
|
386
717
|
background: var(--ftd-bg-tertiary);
|
|
387
|
-
border-radius: var(--ftd-radius-
|
|
718
|
+
border-radius: var(--ftd-radius-md);
|
|
388
719
|
overflow: hidden;
|
|
720
|
+
position: relative;
|
|
721
|
+
border: 1px solid var(--ftd-border-subtle);
|
|
389
722
|
}
|
|
390
723
|
|
|
391
724
|
.ftd-spacing-bar {
|
|
392
725
|
height: 100%;
|
|
393
|
-
background:
|
|
726
|
+
background: var(--ftd-gradient-primary);
|
|
394
727
|
border-radius: var(--ftd-radius-sm);
|
|
395
728
|
display: flex;
|
|
396
729
|
align-items: center;
|
|
397
730
|
justify-content: flex-end;
|
|
398
|
-
padding-right:
|
|
399
|
-
min-width:
|
|
731
|
+
padding-right: 12px;
|
|
732
|
+
min-width: 48px;
|
|
733
|
+
position: relative;
|
|
734
|
+
overflow: hidden;
|
|
735
|
+
transition: all var(--ftd-transition-base);
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
.ftd-spacing-bar::before {
|
|
739
|
+
content: '';
|
|
740
|
+
position: absolute;
|
|
741
|
+
inset: 0;
|
|
742
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
743
|
+
animation: ftd-shimmer 3s infinite;
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
.ftd-spacing-item:hover .ftd-spacing-bar {
|
|
747
|
+
box-shadow: var(--ftd-shadow-glow);
|
|
400
748
|
}
|
|
401
749
|
|
|
402
750
|
.ftd-spacing-value {
|
|
403
|
-
font-size: 0.
|
|
404
|
-
font-family:
|
|
751
|
+
font-size: 0.8rem;
|
|
752
|
+
font-family: var(--ftd-font-mono);
|
|
405
753
|
color: var(--ftd-text-secondary);
|
|
406
|
-
min-width:
|
|
754
|
+
min-width: 80px;
|
|
407
755
|
text-align: right;
|
|
756
|
+
font-weight: 600;
|
|
408
757
|
}
|
|
409
758
|
|
|
410
759
|
/* ========================================
|
|
411
|
-
Radius Showcase
|
|
760
|
+
Radius Showcase - Playful Display
|
|
412
761
|
======================================== */
|
|
413
762
|
.ftd-radius-grid {
|
|
414
763
|
display: grid;
|
|
415
|
-
grid-template-columns: repeat(auto-fill, minmax(
|
|
416
|
-
gap:
|
|
764
|
+
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
765
|
+
gap: 28px;
|
|
417
766
|
}
|
|
418
767
|
|
|
419
768
|
.ftd-radius-item {
|
|
420
769
|
text-align: center;
|
|
770
|
+
transition: transform var(--ftd-transition-base);
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
.ftd-radius-item:hover {
|
|
774
|
+
transform: scale(1.05);
|
|
421
775
|
}
|
|
422
776
|
|
|
423
777
|
.ftd-radius-preview {
|
|
424
778
|
width: 100%;
|
|
425
779
|
aspect-ratio: 1;
|
|
426
|
-
background:
|
|
427
|
-
margin-bottom:
|
|
428
|
-
transition: var(--ftd-transition);
|
|
429
|
-
box-shadow: var(--ftd-shadow-
|
|
780
|
+
background: var(--ftd-gradient-primary);
|
|
781
|
+
margin-bottom: 16px;
|
|
782
|
+
transition: all var(--ftd-transition-slow);
|
|
783
|
+
box-shadow: var(--ftd-shadow-lg);
|
|
784
|
+
position: relative;
|
|
785
|
+
overflow: hidden;
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
.ftd-radius-preview::before {
|
|
789
|
+
content: '';
|
|
790
|
+
position: absolute;
|
|
791
|
+
inset: 0;
|
|
792
|
+
background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
793
|
+
animation: ftd-shimmer 3s infinite;
|
|
430
794
|
}
|
|
431
795
|
|
|
432
796
|
.ftd-radius-item:hover .ftd-radius-preview {
|
|
433
|
-
|
|
434
|
-
|
|
797
|
+
box-shadow: var(--ftd-shadow-glow-lg);
|
|
798
|
+
transform: rotate(5deg);
|
|
435
799
|
}
|
|
436
800
|
|
|
437
801
|
.ftd-radius-label {
|
|
438
|
-
font-size: 0.
|
|
439
|
-
font-weight:
|
|
440
|
-
margin: 0 0
|
|
802
|
+
font-size: 0.95rem;
|
|
803
|
+
font-weight: 700;
|
|
804
|
+
margin: 0 0 6px;
|
|
805
|
+
color: var(--ftd-text-primary);
|
|
441
806
|
}
|
|
442
807
|
|
|
443
808
|
.ftd-radius-value {
|
|
444
|
-
font-size: 0.
|
|
445
|
-
font-family:
|
|
809
|
+
font-size: 0.8rem;
|
|
810
|
+
font-family: var(--ftd-font-mono);
|
|
446
811
|
color: var(--ftd-text-secondary);
|
|
447
812
|
margin: 0;
|
|
813
|
+
font-weight: 600;
|
|
448
814
|
}
|
|
449
815
|
|
|
450
816
|
/* ========================================
|
|
451
|
-
Size Scale
|
|
817
|
+
Size Scale - Dynamic Visualization
|
|
452
818
|
======================================== */
|
|
453
819
|
.ftd-size-grid {
|
|
454
820
|
display: flex;
|
|
455
821
|
align-items: flex-end;
|
|
456
|
-
gap:
|
|
457
|
-
padding:
|
|
458
|
-
background: var(--ftd-bg-
|
|
459
|
-
border
|
|
822
|
+
gap: 12px;
|
|
823
|
+
padding: 32px;
|
|
824
|
+
background: var(--ftd-bg-primary);
|
|
825
|
+
border: 1px solid var(--ftd-border-subtle);
|
|
826
|
+
border-radius: var(--ftd-radius-xl);
|
|
460
827
|
overflow-x: auto;
|
|
828
|
+
scrollbar-width: thin;
|
|
829
|
+
box-shadow: var(--ftd-shadow-md);
|
|
830
|
+
position: relative;
|
|
831
|
+
}
|
|
832
|
+
|
|
833
|
+
.ftd-size-grid::before {
|
|
834
|
+
content: '';
|
|
835
|
+
position: absolute;
|
|
836
|
+
bottom: 0;
|
|
837
|
+
left: 0;
|
|
838
|
+
right: 0;
|
|
839
|
+
height: 1px;
|
|
840
|
+
background: var(--ftd-border-default);
|
|
461
841
|
}
|
|
462
842
|
|
|
463
843
|
.ftd-size-item {
|
|
464
844
|
display: flex;
|
|
465
845
|
flex-direction: column;
|
|
466
846
|
align-items: center;
|
|
467
|
-
gap:
|
|
468
|
-
min-width:
|
|
847
|
+
gap: 10px;
|
|
848
|
+
min-width: 48px;
|
|
849
|
+
transition: transform var(--ftd-transition-base);
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
.ftd-size-item:hover {
|
|
853
|
+
transform: translateY(-4px);
|
|
469
854
|
}
|
|
470
855
|
|
|
471
856
|
.ftd-size-bar {
|
|
472
|
-
background:
|
|
857
|
+
background: var(--ftd-gradient-primary);
|
|
858
|
+
border-radius: var(--ftd-radius-sm) var(--ftd-radius-sm) 0 0;
|
|
859
|
+
transition: all var(--ftd-transition-base);
|
|
860
|
+
min-height: 6px;
|
|
861
|
+
position: relative;
|
|
862
|
+
box-shadow: var(--ftd-shadow-sm);
|
|
863
|
+
}
|
|
864
|
+
|
|
865
|
+
.ftd-size-bar::before {
|
|
866
|
+
content: '';
|
|
867
|
+
position: absolute;
|
|
868
|
+
inset: 0;
|
|
869
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
|
|
473
870
|
border-radius: var(--ftd-radius-sm) var(--ftd-radius-sm) 0 0;
|
|
474
|
-
transition: var(--ftd-transition);
|
|
475
|
-
min-height: 4px;
|
|
476
871
|
}
|
|
477
872
|
|
|
478
873
|
.ftd-size-item:hover .ftd-size-bar {
|
|
479
|
-
filter: brightness(1.1);
|
|
480
874
|
box-shadow: var(--ftd-shadow-glow);
|
|
875
|
+
filter: brightness(1.1);
|
|
481
876
|
}
|
|
482
877
|
|
|
483
878
|
.ftd-size-label {
|
|
484
|
-
font-size: 0.
|
|
485
|
-
font-weight:
|
|
879
|
+
font-size: 0.7rem;
|
|
880
|
+
font-weight: 700;
|
|
486
881
|
color: var(--ftd-text-secondary);
|
|
487
882
|
writing-mode: vertical-rl;
|
|
488
883
|
text-orientation: mixed;
|
|
489
884
|
transform: rotate(180deg);
|
|
885
|
+
letter-spacing: 0.5px;
|
|
886
|
+
text-transform: uppercase;
|
|
490
887
|
}
|
|
491
888
|
|
|
492
889
|
/* ========================================
|
|
493
|
-
Search & Filter
|
|
890
|
+
Search & Filter - Modern Input
|
|
494
891
|
======================================== */
|
|
495
892
|
.ftd-search-container {
|
|
496
|
-
margin-bottom:
|
|
893
|
+
margin-bottom: 28px;
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
.ftd-search-wrapper {
|
|
897
|
+
position: relative;
|
|
898
|
+
display: inline-block;
|
|
899
|
+
width: 100%;
|
|
900
|
+
max-width: 450px;
|
|
497
901
|
}
|
|
498
902
|
|
|
499
903
|
.ftd-search-input {
|
|
500
904
|
width: 100%;
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
border:
|
|
505
|
-
|
|
506
|
-
font-size: 0.875rem;
|
|
905
|
+
padding: 16px 20px 16px 52px;
|
|
906
|
+
background: var(--ftd-bg-primary);
|
|
907
|
+
border: 2px solid var(--ftd-border-subtle);
|
|
908
|
+
border-radius: var(--ftd-radius-full);
|
|
909
|
+
font-size: 0.95rem;
|
|
507
910
|
color: var(--ftd-text-primary);
|
|
508
|
-
|
|
911
|
+
font-weight: 500;
|
|
912
|
+
transition: all var(--ftd-transition-base);
|
|
913
|
+
box-shadow: var(--ftd-shadow-xs);
|
|
509
914
|
}
|
|
510
915
|
|
|
511
916
|
.ftd-search-input::placeholder {
|
|
512
917
|
color: var(--ftd-text-tertiary);
|
|
918
|
+
font-weight: 500;
|
|
513
919
|
}
|
|
514
920
|
|
|
515
921
|
.ftd-search-input:focus {
|
|
516
922
|
outline: none;
|
|
517
|
-
border-color: var(--ftd-accent);
|
|
518
|
-
box-shadow: 0 0 0
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
.ftd-search-wrapper {
|
|
522
|
-
position: relative;
|
|
523
|
-
display: inline-block;
|
|
923
|
+
border-color: var(--ftd-accent-primary);
|
|
924
|
+
box-shadow: 0 0 0 4px rgba(91, 71, 251, 0.1), var(--ftd-shadow-md);
|
|
925
|
+
transform: translateY(-1px);
|
|
524
926
|
}
|
|
525
927
|
|
|
526
928
|
.ftd-search-icon {
|
|
527
929
|
position: absolute;
|
|
528
|
-
left:
|
|
930
|
+
left: 20px;
|
|
529
931
|
top: 50%;
|
|
530
932
|
transform: translateY(-50%);
|
|
531
933
|
color: var(--ftd-text-tertiary);
|
|
934
|
+
font-size: 1.125rem;
|
|
935
|
+
pointer-events: none;
|
|
936
|
+
transition: color var(--ftd-transition-fast);
|
|
937
|
+
}
|
|
938
|
+
|
|
939
|
+
.ftd-search-wrapper:focus-within .ftd-search-icon {
|
|
940
|
+
color: var(--ftd-accent-primary);
|
|
532
941
|
}
|
|
533
942
|
|
|
534
943
|
/* ========================================
|
|
535
|
-
Empty State
|
|
944
|
+
Empty State - Friendly Design
|
|
536
945
|
======================================== */
|
|
537
946
|
.ftd-empty {
|
|
538
947
|
text-align: center;
|
|
539
|
-
padding: 64px 24px;
|
|
948
|
+
padding: clamp(64px, 10vw, 96px) 24px;
|
|
540
949
|
color: var(--ftd-text-secondary);
|
|
541
950
|
}
|
|
542
951
|
|
|
543
952
|
.ftd-empty-icon {
|
|
544
|
-
font-size:
|
|
545
|
-
margin-bottom:
|
|
546
|
-
opacity: 0.
|
|
953
|
+
font-size: 4rem;
|
|
954
|
+
margin-bottom: 20px;
|
|
955
|
+
opacity: 0.3;
|
|
956
|
+
animation: ftd-float 3s ease-in-out infinite;
|
|
547
957
|
}
|
|
548
958
|
|
|
549
959
|
.ftd-empty-title {
|
|
550
|
-
font-
|
|
551
|
-
font-
|
|
552
|
-
|
|
960
|
+
font-family: var(--ftd-font-display);
|
|
961
|
+
font-size: 1.5rem;
|
|
962
|
+
font-weight: 700;
|
|
963
|
+
margin: 0 0 12px;
|
|
964
|
+
color: var(--ftd-text-primary);
|
|
553
965
|
}
|
|
554
966
|
|
|
555
967
|
.ftd-empty-text {
|
|
556
|
-
font-size:
|
|
968
|
+
font-size: 1rem;
|
|
557
969
|
margin: 0;
|
|
970
|
+
max-width: 400px;
|
|
971
|
+
margin-left: auto;
|
|
972
|
+
margin-right: auto;
|
|
973
|
+
line-height: 1.6;
|
|
974
|
+
}
|
|
975
|
+
|
|
976
|
+
/* ========================================
|
|
977
|
+
Animations
|
|
978
|
+
======================================== */
|
|
979
|
+
@keyframes ftd-fade-in {
|
|
980
|
+
from {
|
|
981
|
+
opacity: 0;
|
|
982
|
+
}
|
|
983
|
+
to {
|
|
984
|
+
opacity: 1;
|
|
985
|
+
}
|
|
986
|
+
}
|
|
987
|
+
|
|
988
|
+
@keyframes ftd-fade-in-up {
|
|
989
|
+
from {
|
|
990
|
+
opacity: 0;
|
|
991
|
+
transform: translateY(20px);
|
|
992
|
+
}
|
|
993
|
+
to {
|
|
994
|
+
opacity: 1;
|
|
995
|
+
transform: translateY(0);
|
|
996
|
+
}
|
|
997
|
+
}
|
|
998
|
+
|
|
999
|
+
@keyframes ftd-shimmer {
|
|
1000
|
+
0% {
|
|
1001
|
+
transform: translateX(-100%);
|
|
1002
|
+
}
|
|
1003
|
+
100% {
|
|
1004
|
+
transform: translateX(100%);
|
|
1005
|
+
}
|
|
1006
|
+
}
|
|
1007
|
+
|
|
1008
|
+
@keyframes ftd-float {
|
|
1009
|
+
0%, 100% {
|
|
1010
|
+
transform: translateY(0);
|
|
1011
|
+
}
|
|
1012
|
+
50% {
|
|
1013
|
+
transform: translateY(-10px);
|
|
1014
|
+
}
|
|
558
1015
|
}
|
|
559
1016
|
|
|
560
1017
|
/* ========================================
|
|
@@ -562,27 +1019,42 @@
|
|
|
562
1019
|
======================================== */
|
|
563
1020
|
@media (max-width: 768px) {
|
|
564
1021
|
.ftd-container {
|
|
565
|
-
padding:
|
|
1022
|
+
padding: 20px;
|
|
566
1023
|
}
|
|
567
1024
|
|
|
568
1025
|
.ftd-header {
|
|
569
1026
|
flex-direction: column;
|
|
570
1027
|
align-items: flex-start;
|
|
571
|
-
gap:
|
|
1028
|
+
gap: 20px;
|
|
572
1029
|
}
|
|
573
1030
|
|
|
574
1031
|
.ftd-title {
|
|
575
|
-
font-size:
|
|
1032
|
+
font-size: 2rem;
|
|
1033
|
+
}
|
|
1034
|
+
|
|
1035
|
+
.ftd-theme-toggle {
|
|
1036
|
+
align-self: flex-start;
|
|
576
1037
|
}
|
|
577
1038
|
|
|
578
1039
|
.ftd-tabs {
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
-
|
|
1040
|
+
margin-left: -6px;
|
|
1041
|
+
margin-right: -6px;
|
|
1042
|
+
padding-left: 6px;
|
|
1043
|
+
padding-right: 6px;
|
|
582
1044
|
}
|
|
583
1045
|
|
|
584
1046
|
.ftd-tab {
|
|
585
|
-
padding:
|
|
1047
|
+
padding: 12px 20px;
|
|
1048
|
+
font-size: 0.875rem;
|
|
1049
|
+
}
|
|
1050
|
+
|
|
1051
|
+
.ftd-section-header::after {
|
|
1052
|
+
left: 0;
|
|
1053
|
+
}
|
|
1054
|
+
|
|
1055
|
+
.ftd-token-grid {
|
|
1056
|
+
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
1057
|
+
gap: 16px;
|
|
586
1058
|
}
|
|
587
1059
|
|
|
588
1060
|
.ftd-color-scale {
|
|
@@ -590,16 +1062,80 @@
|
|
|
590
1062
|
}
|
|
591
1063
|
|
|
592
1064
|
.ftd-color-shade {
|
|
593
|
-
min-width:
|
|
594
|
-
height:
|
|
1065
|
+
min-width: 60px;
|
|
1066
|
+
height: 80px;
|
|
595
1067
|
}
|
|
596
1068
|
|
|
597
1069
|
.ftd-spacing-item {
|
|
598
1070
|
flex-direction: column;
|
|
599
1071
|
align-items: flex-start;
|
|
1072
|
+
gap: 12px;
|
|
600
1073
|
}
|
|
601
1074
|
|
|
602
1075
|
.ftd-spacing-bar-container {
|
|
603
1076
|
width: 100%;
|
|
604
1077
|
}
|
|
1078
|
+
|
|
1079
|
+
.ftd-radius-grid {
|
|
1080
|
+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
1081
|
+
gap: 20px;
|
|
1082
|
+
}
|
|
1083
|
+
|
|
1084
|
+
.ftd-search-wrapper {
|
|
1085
|
+
max-width: 100%;
|
|
1086
|
+
}
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
/* ========================================
|
|
1090
|
+
Print Styles
|
|
1091
|
+
======================================== */
|
|
1092
|
+
@media print {
|
|
1093
|
+
.ftd-theme-toggle,
|
|
1094
|
+
.ftd-search-container {
|
|
1095
|
+
display: none;
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
.ftd-container {
|
|
1099
|
+
padding: 0;
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1102
|
+
.ftd-token-card,
|
|
1103
|
+
.ftd-spacing-item,
|
|
1104
|
+
.ftd-radius-item {
|
|
1105
|
+
break-inside: avoid;
|
|
1106
|
+
}
|
|
605
1107
|
}
|
|
1108
|
+
|
|
1109
|
+
/* ========================================
|
|
1110
|
+
Accessibility
|
|
1111
|
+
======================================== */
|
|
1112
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1113
|
+
*,
|
|
1114
|
+
*::before,
|
|
1115
|
+
*::after {
|
|
1116
|
+
animation-duration: 0.01ms !important;
|
|
1117
|
+
animation-iteration-count: 1 !important;
|
|
1118
|
+
transition-duration: 0.01ms !important;
|
|
1119
|
+
}
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
.ftd-visually-hidden {
|
|
1123
|
+
position: absolute;
|
|
1124
|
+
width: 1px;
|
|
1125
|
+
height: 1px;
|
|
1126
|
+
padding: 0;
|
|
1127
|
+
margin: -1px;
|
|
1128
|
+
overflow: hidden;
|
|
1129
|
+
clip: rect(0, 0, 0, 0);
|
|
1130
|
+
white-space: nowrap;
|
|
1131
|
+
border: 0;
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1134
|
+
/* Focus styles for keyboard navigation */
|
|
1135
|
+
.ftd-tab:focus-visible,
|
|
1136
|
+
.ftd-token-card:focus-visible,
|
|
1137
|
+
.ftd-search-input:focus-visible,
|
|
1138
|
+
.ftd-theme-toggle:focus-visible {
|
|
1139
|
+
outline: 3px solid var(--ftd-accent-primary);
|
|
1140
|
+
outline-offset: 2px;
|
|
1141
|
+
}
|