@salesmind-ai/design-system 0.2.1 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (142) hide show
  1. package/README.md +32 -2
  2. package/dist/AppearancePanel-UT57J69V.d.cts +51 -0
  3. package/dist/AppearancePanel-UT57J69V.d.ts +51 -0
  4. package/dist/AppearanceProvider-C36a8-eb.d.cts +45 -0
  5. package/dist/AppearanceProvider-C36a8-eb.d.ts +45 -0
  6. package/dist/Breadcrumb-RX-B_gDV.d.cts +44 -0
  7. package/dist/Breadcrumb-RX-B_gDV.d.ts +44 -0
  8. package/dist/ExportMenu-A2TLFiVv.d.cts +311 -0
  9. package/dist/ExportMenu-C8qck5AT.d.ts +311 -0
  10. package/dist/SectionShell-BfBw5q0Y.d.cts +18 -0
  11. package/dist/SectionShell-BfBw5q0Y.d.ts +18 -0
  12. package/dist/Select-BdZmK0Lt.d.cts +66 -0
  13. package/dist/Select-BdZmK0Lt.d.ts +66 -0
  14. package/dist/admin/index.cjs +2941 -0
  15. package/dist/admin/index.cjs.map +1 -0
  16. package/dist/admin/index.css +4145 -0
  17. package/dist/admin/index.css.map +1 -0
  18. package/dist/admin/index.d.cts +491 -0
  19. package/dist/admin/index.d.ts +491 -0
  20. package/dist/admin/index.js +2918 -0
  21. package/dist/admin/index.js.map +1 -0
  22. package/dist/{audit-CiyPkxk1.d.cts → audit-BS2fn7M4.d.ts} +2 -51
  23. package/dist/{audit-CiyPkxk1.d.ts → audit-DwCmg32J.d.cts} +2 -51
  24. package/dist/blog/index.cjs +1074 -0
  25. package/dist/blog/index.cjs.map +1 -0
  26. package/dist/blog/index.css +1422 -0
  27. package/dist/blog/index.css.map +1 -0
  28. package/dist/blog/index.d.cts +233 -0
  29. package/dist/blog/index.d.ts +233 -0
  30. package/dist/blog/index.js +1056 -0
  31. package/dist/blog/index.js.map +1 -0
  32. package/dist/chart-types-BGVVO-zl.d.cts +208 -0
  33. package/dist/chart-types-BGVVO-zl.d.ts +208 -0
  34. package/dist/charts/index.cjs +2698 -0
  35. package/dist/charts/index.cjs.map +1 -0
  36. package/dist/charts/index.css +1167 -0
  37. package/dist/charts/index.css.map +1 -0
  38. package/dist/charts/index.d.cts +453 -0
  39. package/dist/charts/index.d.ts +453 -0
  40. package/dist/charts/index.js +2682 -0
  41. package/dist/charts/index.js.map +1 -0
  42. package/dist/core/index.cjs +526 -395
  43. package/dist/core/index.cjs.map +1 -1
  44. package/dist/core/index.css +294 -0
  45. package/dist/core/index.css.map +1 -1
  46. package/dist/core/index.d.cts +7 -982
  47. package/dist/core/index.d.ts +7 -982
  48. package/dist/core/index.js +476 -351
  49. package/dist/core/index.js.map +1 -1
  50. package/dist/i18n/index.cjs +585 -0
  51. package/dist/i18n/index.cjs.map +1 -0
  52. package/dist/i18n/index.d.cts +855 -0
  53. package/dist/i18n/index.d.ts +855 -0
  54. package/dist/i18n/index.js +547 -0
  55. package/dist/i18n/index.js.map +1 -0
  56. package/dist/index.cjs +3 -2
  57. package/dist/index.cjs.map +1 -1
  58. package/dist/index.css +11 -7
  59. package/dist/index.css.map +1 -1
  60. package/dist/index.d.cts +22 -1290
  61. package/dist/index.d.ts +22 -1290
  62. package/dist/index.js +3 -2
  63. package/dist/index.js.map +1 -1
  64. package/dist/marketing/index.cjs +2144 -3023
  65. package/dist/marketing/index.cjs.map +1 -1
  66. package/dist/marketing/index.css +3729 -4824
  67. package/dist/marketing/index.css.map +1 -1
  68. package/dist/marketing/index.d.cts +1351 -4
  69. package/dist/marketing/index.d.ts +1351 -4
  70. package/dist/marketing/index.js +2190 -3054
  71. package/dist/marketing/index.js.map +1 -1
  72. package/dist/motion/index.cjs +1230 -0
  73. package/dist/motion/index.cjs.map +1 -0
  74. package/dist/motion/index.css +699 -0
  75. package/dist/motion/index.css.map +1 -0
  76. package/dist/motion/index.d.cts +68 -0
  77. package/dist/motion/index.d.ts +68 -0
  78. package/dist/motion/index.js +1218 -0
  79. package/dist/motion/index.js.map +1 -0
  80. package/dist/nav/index.cjs +1533 -0
  81. package/dist/nav/index.cjs.map +1 -0
  82. package/dist/nav/index.css +1984 -0
  83. package/dist/nav/index.css.map +1 -0
  84. package/dist/nav/index.d.cts +279 -0
  85. package/dist/nav/index.d.ts +279 -0
  86. package/dist/nav/index.js +1501 -0
  87. package/dist/nav/index.js.map +1 -0
  88. package/dist/report/index.cjs +26 -1649
  89. package/dist/report/index.cjs.map +1 -1
  90. package/dist/report/index.css +0 -963
  91. package/dist/report/index.css.map +1 -1
  92. package/dist/report/index.d.cts +4 -2
  93. package/dist/report/index.d.ts +4 -2
  94. package/dist/report/index.js +27 -1640
  95. package/dist/report/index.js.map +1 -1
  96. package/dist/sections/index.cjs +385 -0
  97. package/dist/sections/index.cjs.map +1 -0
  98. package/dist/sections/index.css +815 -0
  99. package/dist/sections/index.css.map +1 -0
  100. package/dist/sections/index.d.cts +69 -0
  101. package/dist/sections/index.d.ts +69 -0
  102. package/dist/sections/index.js +374 -0
  103. package/dist/sections/index.js.map +1 -0
  104. package/dist/social-proof/index.cjs +1255 -0
  105. package/dist/social-proof/index.cjs.map +1 -0
  106. package/dist/social-proof/index.css +1423 -0
  107. package/dist/social-proof/index.css.map +1 -0
  108. package/dist/social-proof/index.d.cts +258 -0
  109. package/dist/social-proof/index.d.ts +258 -0
  110. package/dist/social-proof/index.js +1238 -0
  111. package/dist/social-proof/index.js.map +1 -0
  112. package/dist/theme/index.cjs +573 -0
  113. package/dist/theme/index.cjs.map +1 -0
  114. package/dist/theme/index.css +464 -0
  115. package/dist/theme/index.css.map +1 -0
  116. package/dist/theme/index.d.cts +48 -0
  117. package/dist/theme/index.d.ts +48 -0
  118. package/dist/theme/index.js +558 -0
  119. package/dist/theme/index.js.map +1 -0
  120. package/dist/types-DAlgDGzw.d.cts +52 -0
  121. package/dist/types-DAlgDGzw.d.ts +52 -0
  122. package/dist/web/client/index.cjs +501 -0
  123. package/dist/web/client/index.cjs.map +1 -0
  124. package/dist/web/client/index.css +456 -0
  125. package/dist/web/client/index.css.map +1 -0
  126. package/dist/web/client/index.d.cts +172 -0
  127. package/dist/web/client/index.d.ts +172 -0
  128. package/dist/web/client/index.js +486 -0
  129. package/dist/web/client/index.js.map +1 -0
  130. package/dist/web/index.d.cts +6 -893
  131. package/dist/web/index.d.ts +6 -893
  132. package/dist/web/server/index.cjs +569 -0
  133. package/dist/web/server/index.cjs.map +1 -0
  134. package/dist/web/server/index.d.cts +725 -0
  135. package/dist/web/server/index.d.ts +725 -0
  136. package/dist/web/server/index.js +562 -0
  137. package/dist/web/server/index.js.map +1 -0
  138. package/package.json +81 -9
  139. package/dist/ExportMenu-hEe5MhLq.d.cts +0 -1027
  140. package/dist/ExportMenu-hEe5MhLq.d.ts +0 -1027
  141. package/dist/index-B64suAAc.d.cts +0 -1498
  142. package/dist/index-B64suAAc.d.ts +0 -1498
@@ -0,0 +1,1984 @@
1
+ /* src/components/NavbarV2/NavbarV2.css */
2
+ .ds-navbar-v2 {
3
+ position: sticky;
4
+ top: 0;
5
+ z-index: var(--z-modal-backdrop);
6
+ width: 100%;
7
+ display: flex;
8
+ justify-content: center;
9
+ padding: 0 var(--space-3) var(--space-2);
10
+ box-sizing: border-box;
11
+ background: transparent;
12
+ pointer-events: none;
13
+ }
14
+ .ds-navbar-v2__container {
15
+ position: relative;
16
+ display: grid;
17
+ grid-template-columns: 1fr auto 1fr;
18
+ align-items: center;
19
+ width: 100%;
20
+ padding: var(--space-2) var(--space-5);
21
+ box-sizing: border-box;
22
+ border-radius: var(--radius-card);
23
+ pointer-events: auto;
24
+ background: transparent;
25
+ border: 1px solid transparent;
26
+ transition:
27
+ background var(--transition-glass),
28
+ border-color var(--transition-glass),
29
+ box-shadow var(--transition-glass),
30
+ backdrop-filter var(--transition-glass),
31
+ -webkit-backdrop-filter var(--transition-glass);
32
+ }
33
+ .ds-navbar-v2--scrolled {
34
+ padding-bottom: 0;
35
+ }
36
+ .ds-navbar-v2--scrolled .ds-navbar-v2__container {
37
+ background: rgba(var(--void-base-rgb), 0.97);
38
+ backdrop-filter: blur(80px) saturate(180%) brightness(90%);
39
+ -webkit-backdrop-filter: blur(80px) saturate(180%) brightness(90%);
40
+ border-color: var(--rim-light-bottom);
41
+ box-shadow: var(--glass-shadow-elevated-combined), 0 1px 0 0 var(--rim-light-top) inset;
42
+ }
43
+ .ds-navbar-v2--scrolled .ds-navbar-v2__container::before {
44
+ content: "";
45
+ position: absolute;
46
+ inset: 0;
47
+ border-radius: inherit;
48
+ padding: var(--space-px);
49
+ background:
50
+ linear-gradient(
51
+ 180deg,
52
+ var(--rim-light-top) 0%,
53
+ var(--rim-light-bottom) 100%);
54
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
55
+ mask-composite: exclude;
56
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
57
+ -webkit-mask-composite: xor;
58
+ pointer-events: none;
59
+ opacity: 0.6;
60
+ }
61
+ .ds-navbar-v2__brand {
62
+ grid-column: 1;
63
+ justify-self: start;
64
+ display: flex;
65
+ align-items: center;
66
+ gap: var(--space-2);
67
+ font-family: var(--font-family);
68
+ font-weight: var(--font-weight-bold);
69
+ font-size: var(--font-size-lg);
70
+ color: var(--text-primary);
71
+ text-decoration: none;
72
+ flex-shrink: 0;
73
+ white-space: nowrap;
74
+ }
75
+ .ds-navbar-v2__tabs {
76
+ grid-column: 2;
77
+ justify-self: center;
78
+ position: relative;
79
+ display: flex;
80
+ align-items: center;
81
+ gap: var(--space-1);
82
+ padding: var(--space-2);
83
+ flex-shrink: 0;
84
+ background: var(--glass-base, rgba(255, 255, 255, 0.07));
85
+ backdrop-filter: var(--glass-backdrop);
86
+ -webkit-backdrop-filter: var(--glass-backdrop);
87
+ border-radius: var(--radius-card);
88
+ box-shadow: var(--glass-shadow-elevated-combined);
89
+ overflow: visible;
90
+ transition:
91
+ background var(--transition-glass),
92
+ box-shadow var(--transition-glass),
93
+ backdrop-filter var(--transition-glass),
94
+ -webkit-backdrop-filter var(--transition-glass);
95
+ }
96
+ .ds-navbar-v2__tabs::before {
97
+ content: "";
98
+ position: absolute;
99
+ inset: 0;
100
+ border-radius: inherit;
101
+ padding: var(--space-px);
102
+ background:
103
+ linear-gradient(
104
+ 180deg,
105
+ var(--rim-light-hover-top) 0%,
106
+ var(--rim-light-top) 100%);
107
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
108
+ mask-composite: exclude;
109
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
110
+ -webkit-mask-composite: xor;
111
+ pointer-events: none;
112
+ transition: opacity var(--transition-glass);
113
+ }
114
+ .ds-navbar-v2__tabs--demoted {
115
+ background: transparent;
116
+ backdrop-filter: none;
117
+ -webkit-backdrop-filter: none;
118
+ box-shadow: none;
119
+ }
120
+ .ds-navbar-v2__tabs--demoted::before {
121
+ opacity: 0;
122
+ }
123
+ .ds-navbar-v2__tab {
124
+ position: relative;
125
+ display: flex;
126
+ flex-direction: column;
127
+ align-items: center;
128
+ justify-content: center;
129
+ gap: var(--space-1);
130
+ padding: var(--space-2) var(--space-4);
131
+ min-width: 64px;
132
+ flex-shrink: 0;
133
+ border: none;
134
+ border-radius: var(--radius-button);
135
+ background: transparent;
136
+ color: var(--text-tertiary);
137
+ font-family: var(--font-family);
138
+ font-size: var(--font-size-xs);
139
+ font-weight: var(--font-weight-medium);
140
+ line-height: 1;
141
+ cursor: pointer;
142
+ text-decoration: none;
143
+ white-space: nowrap;
144
+ transition:
145
+ background var(--transition-glass),
146
+ color var(--transition-glass),
147
+ box-shadow var(--transition-glass);
148
+ }
149
+ .ds-navbar-v2__tab::before {
150
+ content: "";
151
+ position: absolute;
152
+ inset: 0;
153
+ border-radius: inherit;
154
+ padding: var(--space-px);
155
+ background:
156
+ linear-gradient(
157
+ 180deg,
158
+ var(--rim-light-top) 0%,
159
+ var(--rim-light-bottom) 100%);
160
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
161
+ mask-composite: exclude;
162
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
163
+ -webkit-mask-composite: xor;
164
+ pointer-events: none;
165
+ opacity: 0;
166
+ transition: opacity var(--transition-glass);
167
+ }
168
+ .ds-navbar-v2__tab:hover {
169
+ background: var(--glass-base-hover, rgba(255, 255, 255, 0.06));
170
+ color: var(--text-secondary);
171
+ }
172
+ .ds-navbar-v2__tab:hover::before {
173
+ opacity: 1;
174
+ }
175
+ .ds-navbar-v2__tab:focus-visible {
176
+ outline: none;
177
+ box-shadow: var(--focus-ring);
178
+ }
179
+ .ds-navbar-v2__tab--active {
180
+ background: rgba(var(--brand-pink-rgb), 0.12);
181
+ color: var(--text-primary);
182
+ box-shadow: var(--glass-shadow-inner), inset 0 0 16px rgba(var(--brand-pink-rgb), 0.2);
183
+ }
184
+ .ds-navbar-v2__tab--active::before {
185
+ opacity: 1;
186
+ background:
187
+ linear-gradient(
188
+ 180deg,
189
+ rgba(var(--brand-pink-rgb), 0.35) 0%,
190
+ rgba(var(--brand-pink-rgb), 0.08) 100%);
191
+ }
192
+ .ds-navbar-v2__tab--active:hover {
193
+ background: rgba(var(--brand-pink-rgb), 0.18);
194
+ }
195
+ .ds-navbar-v2__tab-icon {
196
+ display: flex;
197
+ align-items: center;
198
+ justify-content: center;
199
+ width: 1.5rem;
200
+ height: 1.5rem;
201
+ flex-shrink: 0;
202
+ }
203
+ .ds-navbar-v2__tab-icon svg {
204
+ width: 100%;
205
+ height: 100%;
206
+ }
207
+ .ds-navbar-v2__tab-label {
208
+ white-space: nowrap;
209
+ }
210
+ .ds-navbar-v2__tab-label-row {
211
+ display: flex;
212
+ align-items: center;
213
+ gap: 2px;
214
+ }
215
+ .ds-navbar-v2__tab-chevron {
216
+ display: inline-flex;
217
+ align-items: center;
218
+ opacity: 0.3;
219
+ transition: opacity var(--transition-fast), transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
220
+ }
221
+ .ds-navbar-v2__tab-chevron[data-state=open] {
222
+ transform: rotate(180deg);
223
+ }
224
+ .ds-navbar-v2__tab:hover .ds-navbar-v2__tab-chevron,
225
+ .ds-navbar-v2__tab--active .ds-navbar-v2__tab-chevron {
226
+ opacity: 0.7;
227
+ }
228
+ .ds-navbar-v2__tab-menu {
229
+ position: static;
230
+ display: flex;
231
+ flex-shrink: 0;
232
+ }
233
+ .ds-navbar-v2__mega-panel {
234
+ position: absolute;
235
+ top: calc(100% + 4px);
236
+ left: calc(50% + var(--panel-nudge, 0px));
237
+ width: max-content;
238
+ min-width: 280px;
239
+ max-width: min(90vw, calc(100vw - 32px));
240
+ padding: var(--space-6);
241
+ z-index: var(--z-dropdown);
242
+ transform-origin: top center;
243
+ overflow: visible;
244
+ background: var(--void-base);
245
+ backdrop-filter: blur(24px) saturate(180%);
246
+ -webkit-backdrop-filter: blur(24px) saturate(180%);
247
+ border: 1px solid var(--rim-light-bottom);
248
+ border-radius: var(--radius-card);
249
+ box-shadow: var(--shadow-xl), 0 0 0 1px var(--rim-light-bottom);
250
+ opacity: 0;
251
+ transform: translateX(-50%) translateY(-8px) scale(0.98);
252
+ visibility: hidden;
253
+ pointer-events: none;
254
+ transition:
255
+ opacity 150ms cubic-bezier(0.4, 0, 1, 1),
256
+ transform 150ms cubic-bezier(0.4, 0, 1, 1),
257
+ visibility 0s linear 150ms;
258
+ }
259
+ .ds-navbar-v2__mega-panel[data-state=open] {
260
+ opacity: 1;
261
+ transform: translateX(-50%) translateY(0) scale(1);
262
+ visibility: visible;
263
+ pointer-events: auto;
264
+ transition:
265
+ opacity 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
266
+ transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
267
+ visibility 0s linear 0s;
268
+ }
269
+ .ds-navbar-v2__mega-panel::before {
270
+ content: "";
271
+ position: absolute;
272
+ top: 0;
273
+ left: 0;
274
+ right: 0;
275
+ height: 1px;
276
+ border-radius: var(--radius-card) var(--radius-card) 0 0;
277
+ background:
278
+ linear-gradient(
279
+ 90deg,
280
+ transparent 0%,
281
+ var(--rim-light-top) 20%,
282
+ var(--rim-light-hover-top) 50%,
283
+ var(--rim-light-top) 80%,
284
+ transparent 100%);
285
+ opacity: 0.8;
286
+ pointer-events: none;
287
+ }
288
+ .ds-navbar-v2__mega-panel::after {
289
+ content: "";
290
+ position: absolute;
291
+ top: -8px;
292
+ left: 0;
293
+ right: 0;
294
+ height: 8px;
295
+ background: transparent;
296
+ }
297
+ .ds-navbar-v2__actions {
298
+ grid-column: 3;
299
+ justify-self: end;
300
+ display: flex;
301
+ align-items: center;
302
+ gap: var(--space-3);
303
+ flex-shrink: 0;
304
+ white-space: nowrap;
305
+ }
306
+ .ds-navbar-v2__toggle {
307
+ display: none;
308
+ background: none;
309
+ border: none;
310
+ color: var(--text-primary);
311
+ padding: var(--space-2);
312
+ cursor: pointer;
313
+ border-radius: var(--radius-button);
314
+ flex-shrink: 0;
315
+ }
316
+ .ds-navbar-v2__toggle:hover {
317
+ background: var(--glass-base-hover);
318
+ }
319
+ .ds-navbar-v2__toggle:focus-visible {
320
+ outline: none;
321
+ box-shadow: var(--focus-ring);
322
+ }
323
+ @media (max-width: 1279px) {
324
+ .ds-navbar-v2 {
325
+ padding: 0 var(--space-2) var(--space-2);
326
+ }
327
+ .ds-navbar-v2__container {
328
+ padding: var(--space-2) var(--space-3);
329
+ }
330
+ .ds-navbar-v2__tab {
331
+ padding: var(--space-2) var(--space-3);
332
+ min-width: 56px;
333
+ }
334
+ .ds-navbar-v2__actions {
335
+ gap: var(--space-2);
336
+ }
337
+ }
338
+ @media (max-width: 1099px) {
339
+ .ds-navbar-v2 {
340
+ padding: 0 var(--space-2) var(--space-1);
341
+ }
342
+ .ds-navbar-v2__container {
343
+ padding: var(--space-2) var(--space-3);
344
+ }
345
+ .ds-navbar-v2__tabs {
346
+ padding: var(--space-2);
347
+ }
348
+ .ds-navbar-v2__tab {
349
+ flex-direction: row;
350
+ gap: var(--space-1);
351
+ padding: var(--space-2) var(--space-3);
352
+ min-width: auto;
353
+ }
354
+ .ds-navbar-v2__tab-icon {
355
+ display: none;
356
+ }
357
+ .ds-navbar-v2__actions {
358
+ gap: var(--space-2);
359
+ }
360
+ }
361
+ @media (min-width: 1920px) {
362
+ .ds-navbar-v2__container {
363
+ padding: var(--space-3) var(--space-8);
364
+ }
365
+ .ds-navbar-v2__tabs {
366
+ gap: var(--space-2);
367
+ padding: var(--space-3);
368
+ }
369
+ .ds-navbar-v2__tab {
370
+ padding: var(--space-3) var(--space-5);
371
+ min-width: 72px;
372
+ }
373
+ .ds-navbar-v2__actions {
374
+ gap: var(--space-4);
375
+ }
376
+ .ds-navbar-v2__mega-panel {
377
+ padding: var(--space-8);
378
+ min-width: 320px;
379
+ }
380
+ }
381
+ @media (min-width: 2560px) {
382
+ .ds-navbar-v2__container {
383
+ padding: var(--space-4) var(--space-10);
384
+ }
385
+ .ds-navbar-v2__tabs {
386
+ gap: var(--space-3);
387
+ padding: var(--space-4);
388
+ }
389
+ .ds-navbar-v2__tab {
390
+ padding: var(--space-4) var(--space-6);
391
+ min-width: 80px;
392
+ font-size: var(--font-size-sm);
393
+ }
394
+ .ds-navbar-v2__tab-icon {
395
+ width: 1.75rem;
396
+ height: 1.75rem;
397
+ }
398
+ .ds-navbar-v2__actions {
399
+ gap: var(--space-5);
400
+ }
401
+ .ds-navbar-v2__mega-panel {
402
+ padding: var(--space-10);
403
+ min-width: 360px;
404
+ }
405
+ }
406
+ @media (max-width: 767px) {
407
+ .ds-navbar-v2 {
408
+ padding: 0;
409
+ }
410
+ .ds-navbar-v2__container {
411
+ display: flex;
412
+ justify-content: space-between;
413
+ padding: var(--space-2) var(--space-3);
414
+ border-radius: 0;
415
+ }
416
+ .ds-navbar-v2__container {
417
+ background: rgba(var(--void-base-rgb), 0.97);
418
+ backdrop-filter: blur(80px) saturate(180%) brightness(90%);
419
+ -webkit-backdrop-filter: blur(80px) saturate(180%) brightness(90%);
420
+ border-bottom: 1px solid var(--rim-light-bottom);
421
+ }
422
+ .ds-navbar-v2__tabs {
423
+ display: none;
424
+ }
425
+ .ds-navbar-v2__actions {
426
+ display: none;
427
+ }
428
+ .ds-navbar-v2__toggle {
429
+ display: flex;
430
+ }
431
+ }
432
+ .ds-navbar-v2__mobile-overlay {
433
+ position: fixed;
434
+ left: 0;
435
+ right: 0;
436
+ bottom: 0;
437
+ background: var(--void-base);
438
+ border-top: 1px solid var(--rim-light-bottom);
439
+ z-index: var(--z-modal);
440
+ overflow-y: auto;
441
+ overscroll-behavior: contain;
442
+ -webkit-overflow-scrolling: touch;
443
+ opacity: 0;
444
+ transform: translateY(-12px);
445
+ visibility: hidden;
446
+ pointer-events: none;
447
+ transition:
448
+ opacity 200ms cubic-bezier(0.4, 0, 1, 1),
449
+ transform 200ms cubic-bezier(0.4, 0, 1, 1),
450
+ visibility 0s linear 200ms;
451
+ }
452
+ .ds-navbar-v2__mobile-overlay[data-state=open] {
453
+ opacity: 1;
454
+ transform: translateY(0);
455
+ visibility: visible;
456
+ pointer-events: auto;
457
+ transition:
458
+ opacity 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
459
+ transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
460
+ visibility 0s linear 0s;
461
+ }
462
+ .ds-navbar-v2__mobile-content {
463
+ display: flex;
464
+ flex-direction: column;
465
+ gap: var(--space-2);
466
+ padding: var(--space-4);
467
+ min-height: 100%;
468
+ }
469
+ :root[data-theme=light] .ds-navbar-v2__mega-panel,
470
+ :root[data-theme=light-contrast] .ds-navbar-v2__mega-panel {
471
+ box-shadow: var(--shadow-sm), 0 0 0 1px var(--rim-light-bottom);
472
+ }
473
+ :root[data-theme=light] .ds-navbar-v2__tabs,
474
+ :root[data-theme=light-contrast] .ds-navbar-v2__tabs {
475
+ background: var(--glass-base-hover);
476
+ }
477
+ :root[data-theme=light] .ds-navbar-v2__tab:hover,
478
+ :root[data-theme=light-contrast] .ds-navbar-v2__tab:hover {
479
+ background: var(--glass-base);
480
+ }
481
+ @media (prefers-reduced-motion: reduce) {
482
+ .ds-navbar-v2__container {
483
+ transition: none;
484
+ }
485
+ .ds-navbar-v2__tabs {
486
+ transition: none;
487
+ }
488
+ .ds-navbar-v2__tabs::before {
489
+ transition: none;
490
+ }
491
+ .ds-navbar-v2__tab {
492
+ transition: none;
493
+ }
494
+ .ds-navbar-v2__tab::before {
495
+ transition: none;
496
+ }
497
+ .ds-navbar-v2__tab-chevron {
498
+ transition: none;
499
+ }
500
+ .ds-navbar-v2__mobile-overlay {
501
+ transition: none;
502
+ }
503
+ .ds-navbar-v2__mega-panel {
504
+ transition: none;
505
+ }
506
+ }
507
+ @media (prefers-contrast: more) {
508
+ .ds-navbar-v2--scrolled .ds-navbar-v2__container {
509
+ background: var(--hc-surface);
510
+ border: 1px solid var(--hc-border);
511
+ }
512
+ .ds-navbar-v2--scrolled .ds-navbar-v2__container::before {
513
+ display: none;
514
+ }
515
+ .ds-navbar-v2__tabs {
516
+ background: var(--hc-surface);
517
+ border: 1px solid var(--hc-border);
518
+ }
519
+ .ds-navbar-v2__tabs::before {
520
+ display: none;
521
+ }
522
+ .ds-navbar-v2__tab--active {
523
+ background: rgba(var(--brand-pink-rgb), 0.4);
524
+ border: 1px solid rgba(var(--brand-pink-rgb), 0.6);
525
+ }
526
+ }
527
+ @supports not (backdrop-filter: blur(1px)) {
528
+ .ds-navbar-v2--scrolled .ds-navbar-v2__container {
529
+ background: var(--void-base);
530
+ }
531
+ @media (max-width: 767px) {
532
+ .ds-navbar-v2__container {
533
+ background: var(--void-base);
534
+ }
535
+ }
536
+ .ds-navbar-v2__tabs {
537
+ background: var(--fallback-surface);
538
+ }
539
+ .ds-navbar-v2__mega-panel {
540
+ background: var(--fallback-surface);
541
+ }
542
+ }
543
+
544
+ /* src/components/Navbar/Navbar.css */
545
+ .ds-navbar__mobile-overlay {
546
+ position: fixed;
547
+ top: 64px;
548
+ left: 0;
549
+ right: 0;
550
+ bottom: 0;
551
+ background: var(--void-base);
552
+ border-top: 1px solid var(--rim-light-bottom);
553
+ z-index: var(--z-modal);
554
+ overflow-y: auto;
555
+ overscroll-behavior: contain;
556
+ -webkit-overflow-scrolling: touch;
557
+ }
558
+ .ds-navbar__mobile-content {
559
+ display: flex;
560
+ flex-direction: column;
561
+ gap: var(--space-2);
562
+ padding: var(--space-4);
563
+ min-height: 100%;
564
+ }
565
+ .ds-navbar__mobile-nav-item {
566
+ display: flex;
567
+ align-items: center;
568
+ gap: var(--space-3);
569
+ padding: var(--space-3) var(--space-2);
570
+ font-family: var(--font-family);
571
+ font-size: var(--font-size-base);
572
+ font-weight: var(--font-weight-medium);
573
+ color: var(--text-secondary);
574
+ text-decoration: none;
575
+ background: none;
576
+ border: none;
577
+ border-radius: var(--radius-button);
578
+ cursor: pointer;
579
+ white-space: nowrap;
580
+ hyphens: none;
581
+ word-break: normal;
582
+ overflow-wrap: normal;
583
+ width: 100%;
584
+ text-align: left;
585
+ transition: color var(--transition-fast), background var(--transition-fast);
586
+ }
587
+ .ds-navbar__mobile-nav-item:hover,
588
+ .ds-navbar__mobile-nav-item:focus-visible {
589
+ color: var(--text-primary);
590
+ background: var(--glass-base-hover);
591
+ }
592
+ .ds-navbar__mobile-nav-item--active {
593
+ color: var(--text-primary);
594
+ }
595
+ .ds-navbar__mobile-separator {
596
+ height: 1px;
597
+ background: var(--rim-light-bottom);
598
+ margin: var(--space-2) 0;
599
+ }
600
+ .ds-navbar__mobile-actions {
601
+ display: flex;
602
+ flex-direction: column;
603
+ gap: var(--space-3);
604
+ padding: var(--space-4) 0 0;
605
+ margin-top: auto;
606
+ }
607
+ .ds-navbar__mobile-subnav {
608
+ display: flex;
609
+ flex-direction: column;
610
+ gap: var(--space-1);
611
+ }
612
+ @media (prefers-reduced-motion: reduce) {
613
+ .ds-navbar__mobile-overlay {
614
+ transition: none;
615
+ }
616
+ }
617
+
618
+ /* src/components/LayoutPrimitives/LayoutPrimitives.css */
619
+ .ds-box {
620
+ display: block;
621
+ box-sizing: border-box;
622
+ min-width: 0;
623
+ }
624
+ .ds-stack {
625
+ display: flex;
626
+ flex-direction: column;
627
+ }
628
+ .ds-stack--horizontal {
629
+ flex-direction: row;
630
+ }
631
+ .ds-grid {
632
+ display: grid;
633
+ }
634
+ .ds-grid--cols-1 {
635
+ grid-template-columns: repeat(1, 1fr);
636
+ }
637
+ .ds-grid--cols-2 {
638
+ grid-template-columns: repeat(1, 1fr);
639
+ }
640
+ @media (min-width: 640px) {
641
+ .ds-grid--cols-2 {
642
+ grid-template-columns: repeat(2, 1fr);
643
+ }
644
+ }
645
+ .ds-grid--cols-3 {
646
+ grid-template-columns: repeat(1, 1fr);
647
+ }
648
+ @media (min-width: 640px) {
649
+ .ds-grid--cols-3 {
650
+ grid-template-columns: repeat(2, 1fr);
651
+ }
652
+ }
653
+ @media (min-width: 1024px) {
654
+ .ds-grid--cols-3 {
655
+ grid-template-columns: repeat(3, 1fr);
656
+ }
657
+ }
658
+ .ds-grid--cols-4 {
659
+ grid-template-columns: repeat(1, 1fr);
660
+ }
661
+ @media (min-width: 640px) {
662
+ .ds-grid--cols-4 {
663
+ grid-template-columns: repeat(2, 1fr);
664
+ }
665
+ }
666
+ @media (min-width: 1024px) {
667
+ .ds-grid--cols-4 {
668
+ grid-template-columns: repeat(4, 1fr);
669
+ }
670
+ }
671
+ .ds-grid--cols-5 {
672
+ grid-template-columns: repeat(1, 1fr);
673
+ }
674
+ @media (min-width: 640px) {
675
+ .ds-grid--cols-5 {
676
+ grid-template-columns: repeat(2, 1fr);
677
+ }
678
+ }
679
+ @media (min-width: 768px) {
680
+ .ds-grid--cols-5 {
681
+ grid-template-columns: repeat(3, 1fr);
682
+ }
683
+ }
684
+ @media (min-width: 1280px) {
685
+ .ds-grid--cols-5 {
686
+ grid-template-columns: repeat(5, 1fr);
687
+ }
688
+ }
689
+ .ds-grid--cols-6 {
690
+ grid-template-columns: repeat(1, 1fr);
691
+ }
692
+ @media (min-width: 640px) {
693
+ .ds-grid--cols-6 {
694
+ grid-template-columns: repeat(2, 1fr);
695
+ }
696
+ }
697
+ @media (min-width: 768px) {
698
+ .ds-grid--cols-6 {
699
+ grid-template-columns: repeat(3, 1fr);
700
+ }
701
+ }
702
+ @media (min-width: 1280px) {
703
+ .ds-grid--cols-6 {
704
+ grid-template-columns: repeat(6, 1fr);
705
+ }
706
+ }
707
+ @media (min-width: 1920px) {
708
+ .ds-grid--cols-3:not(.ds-grid--fixed) {
709
+ grid-template-columns: repeat(4, 1fr);
710
+ }
711
+ }
712
+ @media (min-width: 2560px) {
713
+ .ds-grid--cols-2:not(.ds-grid--fixed) {
714
+ grid-template-columns: repeat(3, 1fr);
715
+ }
716
+ .ds-grid--cols-3:not(.ds-grid--fixed) {
717
+ grid-template-columns: repeat(4, 1fr);
718
+ }
719
+ .ds-grid--cols-4:not(.ds-grid--fixed) {
720
+ grid-template-columns: repeat(5, 1fr);
721
+ }
722
+ .ds-grid--cols-5:not(.ds-grid--fixed) {
723
+ grid-template-columns: repeat(6, 1fr);
724
+ }
725
+ .ds-grid--cols-6:not(.ds-grid--fixed) {
726
+ grid-template-columns: repeat(8, 1fr);
727
+ }
728
+ }
729
+ @media (min-width: 3840px) {
730
+ .ds-grid--cols-2:not(.ds-grid--fixed) {
731
+ grid-template-columns: repeat(3, 1fr);
732
+ }
733
+ .ds-grid--cols-3:not(.ds-grid--fixed) {
734
+ grid-template-columns: repeat(5, 1fr);
735
+ }
736
+ .ds-grid--cols-4:not(.ds-grid--fixed) {
737
+ grid-template-columns: repeat(6, 1fr);
738
+ }
739
+ .ds-grid--cols-5:not(.ds-grid--fixed) {
740
+ grid-template-columns: repeat(8, 1fr);
741
+ }
742
+ .ds-grid--cols-6:not(.ds-grid--fixed) {
743
+ grid-template-columns: repeat(10, 1fr);
744
+ }
745
+ }
746
+ :root {
747
+ --container-default-max: 1200px;
748
+ }
749
+ @media (min-width: 1537px) {
750
+ :root {
751
+ --container-default-max: 1400px;
752
+ }
753
+ }
754
+ @media (min-width: 1921px) {
755
+ :root {
756
+ --container-default-max: 1600px;
757
+ }
758
+ }
759
+ @media (min-width: 2561px) {
760
+ :root {
761
+ --container-default-max: 1920px;
762
+ }
763
+ }
764
+ .ds-container {
765
+ width: 100%;
766
+ margin-left: auto;
767
+ margin-right: auto;
768
+ padding-left: var(--container-padding-x, var(--space-4));
769
+ padding-right: var(--container-padding-x, var(--space-4));
770
+ }
771
+ @media (min-width: 1537px) {
772
+ .ds-container {
773
+ --container-padding-x: var(--space-6);
774
+ }
775
+ }
776
+ @media (min-width: 2561px) {
777
+ .ds-container {
778
+ --container-padding-x: var(--space-8);
779
+ }
780
+ }
781
+ .ds-section-block {
782
+ position: relative;
783
+ }
784
+ .ds-section-block--none {
785
+ padding-top: 0;
786
+ padding-bottom: 0;
787
+ }
788
+ .ds-section-block--sm {
789
+ padding-top: var(--space-8, 2rem);
790
+ padding-bottom: var(--space-8, 2rem);
791
+ }
792
+ .ds-section-block--md {
793
+ padding-top: var(--space-16, 4rem);
794
+ padding-bottom: var(--space-16, 4rem);
795
+ }
796
+ @media (min-width: 768px) {
797
+ .ds-section-block--md {
798
+ padding-top: var(--space-24, 6rem);
799
+ padding-bottom: var(--space-24, 6rem);
800
+ }
801
+ }
802
+ .ds-section-block--lg {
803
+ padding-top: var(--space-24, 6rem);
804
+ padding-bottom: var(--space-24, 6rem);
805
+ }
806
+ @media (min-width: 768px) {
807
+ .ds-section-block--lg {
808
+ padding-top: var(--space-32, 8rem);
809
+ padding-bottom: var(--space-32, 8rem);
810
+ }
811
+ }
812
+ .ds-visually-hidden {
813
+ position: absolute;
814
+ width: 1px;
815
+ height: 1px;
816
+ padding: 0;
817
+ margin: -1px;
818
+ overflow: hidden;
819
+ clip-path: inset(50%);
820
+ white-space: nowrap;
821
+ border-width: 0;
822
+ }
823
+
824
+ /* src/components/Navbar/NavbarMegaMenu.css */
825
+ .ds-navbar-mega-menu {
826
+ position: static;
827
+ }
828
+ .ds-navbar-mega-menu--floating {
829
+ position: relative;
830
+ }
831
+ .ds-navbar-mega-menu__trigger {
832
+ display: flex;
833
+ align-items: center;
834
+ gap: var(--space-1);
835
+ padding: var(--space-2) 0;
836
+ font-family: var(--font-family);
837
+ font-size: var(--font-size-sm);
838
+ font-weight: var(--font-weight-medium);
839
+ color: var(--text-secondary);
840
+ background: none;
841
+ border: none;
842
+ cursor: pointer;
843
+ white-space: nowrap;
844
+ hyphens: none;
845
+ word-break: normal;
846
+ overflow-wrap: normal;
847
+ transition: color var(--transition-fast);
848
+ }
849
+ .ds-navbar-mega-menu__trigger:hover,
850
+ .ds-navbar-mega-menu__trigger[aria-expanded=true] {
851
+ color: var(--text-primary);
852
+ }
853
+ .ds-navbar-mega-menu__chevron {
854
+ display: inline-flex;
855
+ align-items: center;
856
+ transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
857
+ }
858
+ .ds-navbar-mega-menu__chevron[data-state=open] {
859
+ transform: rotate(180deg);
860
+ }
861
+ .ds-navbar-mega-menu__content {
862
+ position: absolute;
863
+ top: 100%;
864
+ left: 0;
865
+ right: 0;
866
+ width: 100%;
867
+ background: var(--void-base);
868
+ backdrop-filter: blur(24px) saturate(180%);
869
+ -webkit-backdrop-filter: blur(24px) saturate(180%);
870
+ border-bottom: 1px solid var(--rim-light-bottom);
871
+ box-shadow: var(--shadow-xl), 0 0 0 1px var(--rim-light-bottom);
872
+ padding: var(--space-8) 0;
873
+ z-index: var(--z-dropdown);
874
+ transform-origin: top center;
875
+ overflow: hidden;
876
+ opacity: 0;
877
+ transform: translateY(-8px) scale(0.995);
878
+ visibility: hidden;
879
+ pointer-events: none;
880
+ transition:
881
+ opacity 0.15s cubic-bezier(0.4, 0, 1, 1),
882
+ transform 0.15s cubic-bezier(0.4, 0, 1, 1),
883
+ visibility 0s 0.15s;
884
+ }
885
+ .ds-navbar-mega-menu__content[data-state=open] {
886
+ opacity: 1;
887
+ transform: translateY(0) scale(1);
888
+ visibility: visible;
889
+ pointer-events: auto;
890
+ transition:
891
+ opacity 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
892
+ transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
893
+ visibility 0s 0s;
894
+ }
895
+ .ds-navbar-mega-menu__content::before {
896
+ content: "";
897
+ position: absolute;
898
+ top: 0;
899
+ left: 0;
900
+ right: 0;
901
+ height: 1px;
902
+ background:
903
+ linear-gradient(
904
+ 90deg,
905
+ transparent 0%,
906
+ var(--rim-light-top) 20%,
907
+ var(--rim-light-hover-top) 50%,
908
+ var(--rim-light-top) 80%,
909
+ transparent 100%);
910
+ opacity: 0.8;
911
+ pointer-events: none;
912
+ }
913
+ .ds-navbar-mega-menu__content--floating {
914
+ left: 50%;
915
+ right: auto;
916
+ width: max-content;
917
+ min-width: 200px;
918
+ max-width: 90vw;
919
+ padding: var(--space-4);
920
+ border: 1px solid var(--rim-light-bottom);
921
+ border-radius: var(--radius-card);
922
+ transform-origin: top center;
923
+ }
924
+ .ds-navbar-mega-menu__content--floating[data-state=closed] {
925
+ transform: translateX(-50%) translateY(-8px) scale(0.995);
926
+ }
927
+ .ds-navbar-mega-menu__content--floating[data-state=open] {
928
+ transform: translateX(-50%) translateY(0) scale(1);
929
+ }
930
+ .ds-navbar-mega-menu__content--floating::before {
931
+ display: none;
932
+ }
933
+ .ds-navbar-mega-menu__section {
934
+ opacity: 0;
935
+ transform: translateY(8px);
936
+ filter: blur(4px);
937
+ transition:
938
+ opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
939
+ transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
940
+ filter 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
941
+ }
942
+ [data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section,
943
+ [data-state=open] > .ds-navbar-mega-menu__section {
944
+ opacity: 1;
945
+ transform: translateY(0);
946
+ filter: blur(0px);
947
+ }
948
+ [data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(1),
949
+ [data-state=open] > .ds-navbar-mega-menu__section:nth-child(1) {
950
+ transition-delay: 60ms;
951
+ }
952
+ [data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(2),
953
+ [data-state=open] > .ds-navbar-mega-menu__section:nth-child(2) {
954
+ transition-delay: 100ms;
955
+ }
956
+ [data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(3),
957
+ [data-state=open] > .ds-navbar-mega-menu__section:nth-child(3) {
958
+ transition-delay: 140ms;
959
+ }
960
+ [data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(4),
961
+ [data-state=open] > .ds-navbar-mega-menu__section:nth-child(4) {
962
+ transition-delay: 180ms;
963
+ }
964
+ [data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(5),
965
+ [data-state=open] > .ds-navbar-mega-menu__section:nth-child(5) {
966
+ transition-delay: 220ms;
967
+ }
968
+ [data-state=open] > .ds-layout-container > .ds-navbar-mega-menu__section:nth-child(6),
969
+ [data-state=open] > .ds-navbar-mega-menu__section:nth-child(6) {
970
+ transition-delay: 260ms;
971
+ }
972
+ [data-state=closed] .ds-navbar-mega-menu__section {
973
+ opacity: 0;
974
+ transition:
975
+ opacity 0.1s,
976
+ transform 0s 0.1s,
977
+ filter 0s 0.1s;
978
+ }
979
+ .ds-navbar-mega-menu__section-heading {
980
+ margin-bottom: var(--space-3);
981
+ font-family: var(--font-family);
982
+ font-size: var(--font-size-xs);
983
+ font-weight: var(--font-weight-bold);
984
+ color: var(--text-tertiary);
985
+ text-transform: uppercase;
986
+ letter-spacing: var(--letter-spacing-wider);
987
+ }
988
+ .ds-navbar-mega-menu__section-items {
989
+ display: flex;
990
+ flex-direction: column;
991
+ gap: var(--space-1);
992
+ }
993
+ .ds-navbar-mega-menu__item-wrapper {
994
+ opacity: 0;
995
+ transform: translateY(8px);
996
+ filter: blur(4px);
997
+ transition:
998
+ opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
999
+ transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
1000
+ filter 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
1001
+ }
1002
+ [data-state=open] .ds-navbar-mega-menu__item-wrapper {
1003
+ opacity: 1;
1004
+ transform: translateY(0);
1005
+ filter: blur(0px);
1006
+ }
1007
+ [data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(1) {
1008
+ transition-delay: 80ms;
1009
+ }
1010
+ [data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(2) {
1011
+ transition-delay: 120ms;
1012
+ }
1013
+ [data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(3) {
1014
+ transition-delay: 160ms;
1015
+ }
1016
+ [data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(4) {
1017
+ transition-delay: 200ms;
1018
+ }
1019
+ [data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(5) {
1020
+ transition-delay: 240ms;
1021
+ }
1022
+ [data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(6) {
1023
+ transition-delay: 280ms;
1024
+ }
1025
+ [data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(7) {
1026
+ transition-delay: 320ms;
1027
+ }
1028
+ [data-state=open] .ds-navbar-mega-menu__item-wrapper:nth-child(8) {
1029
+ transition-delay: 360ms;
1030
+ }
1031
+ [data-state=closed] .ds-navbar-mega-menu__item-wrapper {
1032
+ opacity: 0;
1033
+ transition:
1034
+ opacity 0.1s,
1035
+ transform 0s 0.1s,
1036
+ filter 0s 0.1s;
1037
+ }
1038
+ .ds-navbar-mega-menu__item {
1039
+ display: flex;
1040
+ align-items: flex-start;
1041
+ gap: var(--space-3);
1042
+ padding: var(--space-3);
1043
+ border-radius: var(--radius-button);
1044
+ text-decoration: none;
1045
+ cursor: pointer;
1046
+ transition: background var(--transition-fast), box-shadow var(--transition-fast);
1047
+ }
1048
+ .ds-navbar-mega-menu__item:hover {
1049
+ background: var(--glass-base-hover);
1050
+ box-shadow: inset 0 0 0 1px var(--rim-light-bottom);
1051
+ }
1052
+ .ds-navbar-mega-menu__item-icon {
1053
+ display: flex;
1054
+ align-items: center;
1055
+ justify-content: center;
1056
+ flex-shrink: 0;
1057
+ width: 36px;
1058
+ height: 36px;
1059
+ border-radius: calc(var(--radius-button) - 2px);
1060
+ background: var(--glass-base-active);
1061
+ color: rgba(var(--accent-rgb), 1);
1062
+ transition:
1063
+ background var(--transition-fast),
1064
+ color var(--transition-fast),
1065
+ box-shadow var(--transition-fast);
1066
+ }
1067
+ .ds-navbar-mega-menu__item:hover .ds-navbar-mega-menu__item-icon {
1068
+ background: rgba(var(--accent-rgb), 0.15);
1069
+ box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.1);
1070
+ }
1071
+ .ds-navbar-mega-menu__item-text {
1072
+ display: flex;
1073
+ flex-direction: column;
1074
+ gap: var(--space-0-5);
1075
+ min-width: 0;
1076
+ }
1077
+ .ds-navbar-mega-menu__item-label {
1078
+ font-family: var(--font-family);
1079
+ font-size: var(--font-size-sm);
1080
+ font-weight: var(--font-weight-medium);
1081
+ color: var(--text-primary);
1082
+ transition: color var(--transition-fast);
1083
+ }
1084
+ .ds-navbar-mega-menu__item:hover .ds-navbar-mega-menu__item-label {
1085
+ color: rgba(var(--accent-rgb), 1);
1086
+ }
1087
+ .ds-navbar-mega-menu__item-description {
1088
+ font-family: var(--font-family);
1089
+ font-size: var(--font-size-xs);
1090
+ color: var(--text-tertiary);
1091
+ line-height: var(--line-height-relaxed);
1092
+ }
1093
+ :root[data-theme=light] .ds-navbar-mega-menu__content,
1094
+ :root[data-theme=light-contrast] .ds-navbar-mega-menu__content {
1095
+ box-shadow: var(--shadow-sm), 0 0 0 1px var(--rim-light-bottom);
1096
+ }
1097
+ @media (prefers-reduced-motion: reduce) {
1098
+ .ds-navbar-mega-menu__content {
1099
+ transition: none;
1100
+ }
1101
+ .ds-navbar-mega-menu__chevron {
1102
+ transition: none;
1103
+ }
1104
+ .ds-navbar-mega-menu__section {
1105
+ transition: none;
1106
+ }
1107
+ .ds-navbar-mega-menu__item-wrapper {
1108
+ transition: none;
1109
+ }
1110
+ }
1111
+
1112
+ /* src/components/Breadcrumb/Breadcrumb.css */
1113
+ .ds-breadcrumb {
1114
+ }
1115
+ .ds-breadcrumb__list {
1116
+ display: flex;
1117
+ flex-wrap: wrap;
1118
+ align-items: center;
1119
+ gap: var(--space-2);
1120
+ list-style: none;
1121
+ margin: 0;
1122
+ padding: 0;
1123
+ }
1124
+ .ds-breadcrumb__item {
1125
+ display: inline-flex;
1126
+ align-items: center;
1127
+ gap: var(--space-2);
1128
+ }
1129
+ .ds-breadcrumb__link {
1130
+ color: var(--text-secondary);
1131
+ font-size: var(--font-size-sm);
1132
+ text-decoration: none;
1133
+ transition: color var(--transition-glass);
1134
+ }
1135
+ .ds-breadcrumb__link:hover {
1136
+ color: var(--text-primary);
1137
+ }
1138
+ .ds-breadcrumb__page {
1139
+ color: var(--text-primary);
1140
+ font-size: var(--font-size-sm);
1141
+ font-weight: var(--font-weight-medium);
1142
+ }
1143
+ .ds-breadcrumb__separator {
1144
+ color: var(--text-secondary);
1145
+ opacity: 0.5;
1146
+ font-size: var(--font-size-sm);
1147
+ }
1148
+ .ds-breadcrumb__ellipsis {
1149
+ color: var(--text-secondary);
1150
+ }
1151
+ @media (prefers-contrast: more) {
1152
+ .ds-breadcrumb__link {
1153
+ text-decoration: underline;
1154
+ }
1155
+ }
1156
+
1157
+ /* src/components/SiteFooter/SiteFooter.css */
1158
+ .ds-footer {
1159
+ width: 100%;
1160
+ box-sizing: border-box;
1161
+ border-top: 1px solid var(--rim-light-bottom);
1162
+ background: var(--void-base);
1163
+ position: relative;
1164
+ overflow: hidden;
1165
+ }
1166
+ .ds-footer::before {
1167
+ content: "";
1168
+ position: absolute;
1169
+ inset: 0;
1170
+ background:
1171
+ radial-gradient(
1172
+ circle at 50% 0%,
1173
+ var(--glass-base-hover),
1174
+ transparent 60%),
1175
+ url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
1176
+ pointer-events: none;
1177
+ }
1178
+ .ds-footer__cta {
1179
+ position: relative;
1180
+ padding: var(--space-10) 0 var(--space-8);
1181
+ text-align: center;
1182
+ }
1183
+ @media (min-width: 768px) {
1184
+ .ds-footer__cta {
1185
+ padding: var(--space-16) 0 var(--space-12);
1186
+ }
1187
+ }
1188
+ .ds-footer__cta::before {
1189
+ content: "";
1190
+ position: absolute;
1191
+ top: 50%;
1192
+ left: 50%;
1193
+ transform: translate(-50%, -50%);
1194
+ width: min(600px, 90vw);
1195
+ height: 300px;
1196
+ background:
1197
+ radial-gradient(
1198
+ ellipse at center,
1199
+ rgba(var(--accent-rgb, 255, 0, 90), 0.05),
1200
+ transparent 70%);
1201
+ pointer-events: none;
1202
+ }
1203
+ .ds-footer__cta::after {
1204
+ content: "";
1205
+ position: absolute;
1206
+ bottom: 0;
1207
+ left: 50%;
1208
+ transform: translateX(-50%);
1209
+ width: 80%;
1210
+ max-width: 600px;
1211
+ height: 1px;
1212
+ background:
1213
+ linear-gradient(
1214
+ 90deg,
1215
+ transparent,
1216
+ var(--rim-light-bottom),
1217
+ transparent);
1218
+ }
1219
+ .ds-footer__cta-content {
1220
+ display: flex;
1221
+ flex-direction: column;
1222
+ align-items: center;
1223
+ gap: var(--space-4);
1224
+ max-width: 640px;
1225
+ margin: 0 auto;
1226
+ position: relative;
1227
+ }
1228
+ .ds-footer__cta-headline {
1229
+ font-family: var(--font-family);
1230
+ font-size: var(--font-size-2xl);
1231
+ font-weight: var(--font-weight-bold);
1232
+ color: var(--text-primary);
1233
+ margin: 0;
1234
+ line-height: var(--line-height-tight);
1235
+ letter-spacing: var(--letter-spacing-tight);
1236
+ text-wrap: balance;
1237
+ }
1238
+ @media (min-width: 768px) {
1239
+ .ds-footer__cta-headline {
1240
+ font-size: var(--font-size-3xl);
1241
+ }
1242
+ }
1243
+ .ds-footer__cta-subtext {
1244
+ font-family: var(--font-family);
1245
+ font-size: var(--font-size-base);
1246
+ color: var(--text-secondary);
1247
+ margin: 0;
1248
+ max-width: 480px;
1249
+ line-height: var(--line-height-relaxed);
1250
+ text-wrap: balance;
1251
+ }
1252
+ .ds-footer__cta-actions {
1253
+ display: flex;
1254
+ gap: var(--space-3);
1255
+ margin-top: var(--space-2);
1256
+ flex-wrap: wrap;
1257
+ justify-content: center;
1258
+ }
1259
+ .ds-footer__cta-trust {
1260
+ font-family: var(--font-family);
1261
+ font-size: var(--font-size-xs);
1262
+ color: var(--text-tertiary);
1263
+ margin: 0;
1264
+ margin-top: var(--space-1);
1265
+ }
1266
+ .ds-footer__nav {
1267
+ padding: var(--space-8) 0;
1268
+ }
1269
+ @media (min-width: 768px) {
1270
+ .ds-footer__nav {
1271
+ padding: var(--space-10) 0;
1272
+ }
1273
+ }
1274
+ @media (min-width: 1024px) {
1275
+ .ds-footer__nav {
1276
+ padding: var(--space-12) 0;
1277
+ }
1278
+ }
1279
+ .ds-footer__orientation {
1280
+ font-family: var(--font-family);
1281
+ font-size: var(--font-size-sm);
1282
+ color: var(--text-tertiary);
1283
+ padding-bottom: var(--space-8);
1284
+ border-bottom: 1px solid var(--rim-light-bottom);
1285
+ margin-bottom: var(--space-10);
1286
+ }
1287
+ .ds-footer__orientation a {
1288
+ color: var(--text-secondary);
1289
+ text-decoration: underline;
1290
+ text-underline-offset: 2px;
1291
+ transition: color var(--transition-fast);
1292
+ }
1293
+ .ds-footer__orientation a:hover {
1294
+ color: var(--text-primary);
1295
+ }
1296
+ .ds-footer__grid {
1297
+ display: none;
1298
+ }
1299
+ @media (min-width: 768px) {
1300
+ .ds-footer__grid {
1301
+ display: grid;
1302
+ grid-template-columns: repeat(2, 1fr);
1303
+ gap: var(--space-6) var(--space-8);
1304
+ }
1305
+ }
1306
+ @media (min-width: 1024px) {
1307
+ .ds-footer__grid {
1308
+ grid-template-columns: repeat(5, 1fr);
1309
+ gap: var(--space-6);
1310
+ }
1311
+ }
1312
+ @media (min-width: 1280px) {
1313
+ .ds-footer__grid {
1314
+ gap: var(--space-10);
1315
+ }
1316
+ }
1317
+ @media (min-width: 1920px) {
1318
+ .ds-footer__grid {
1319
+ gap: var(--space-12);
1320
+ }
1321
+ .ds-footer__cta {
1322
+ padding: var(--space-20) 0 var(--space-16);
1323
+ }
1324
+ .ds-footer__cta-content {
1325
+ max-width: 720px;
1326
+ }
1327
+ .ds-footer__nav {
1328
+ padding: var(--space-16) 0;
1329
+ }
1330
+ }
1331
+ @media (min-width: 2560px) {
1332
+ .ds-footer__grid {
1333
+ gap: var(--space-16);
1334
+ }
1335
+ .ds-footer__cta {
1336
+ padding: var(--space-20) 0 var(--space-20);
1337
+ }
1338
+ .ds-footer__cta-headline {
1339
+ font-size: var(--font-size-4xl);
1340
+ }
1341
+ .ds-footer__cta-content {
1342
+ max-width: 800px;
1343
+ gap: var(--space-6);
1344
+ }
1345
+ .ds-footer__nav {
1346
+ padding: var(--space-20) 0;
1347
+ }
1348
+ .ds-footer__authority {
1349
+ padding: var(--space-10) 0;
1350
+ }
1351
+ }
1352
+ .ds-footer__mobile-nav {
1353
+ display: block;
1354
+ }
1355
+ @media (min-width: 768px) {
1356
+ .ds-footer__mobile-nav {
1357
+ display: none;
1358
+ }
1359
+ }
1360
+ .ds-footer__column {
1361
+ display: flex;
1362
+ flex-direction: column;
1363
+ gap: var(--space-4);
1364
+ min-width: 0;
1365
+ }
1366
+ .ds-footer__heading {
1367
+ font-family: var(--font-family);
1368
+ font-size: var(--font-size-xs);
1369
+ font-weight: var(--font-weight-semibold);
1370
+ color: var(--text-primary);
1371
+ text-transform: uppercase;
1372
+ letter-spacing: var(--letter-spacing-wider);
1373
+ margin: 0;
1374
+ white-space: nowrap;
1375
+ hyphens: none;
1376
+ word-break: normal;
1377
+ overflow-wrap: normal;
1378
+ }
1379
+ .ds-footer__links {
1380
+ list-style: none;
1381
+ padding: 0;
1382
+ margin: 0;
1383
+ display: flex;
1384
+ flex-direction: column;
1385
+ gap: var(--space-3);
1386
+ }
1387
+ .ds-footer__link {
1388
+ font-family: var(--font-family);
1389
+ font-size: var(--font-size-sm);
1390
+ color: var(--text-secondary);
1391
+ text-decoration: none;
1392
+ transition: color var(--transition-fast);
1393
+ display: inline-flex;
1394
+ align-items: center;
1395
+ gap: var(--space-2);
1396
+ opacity: 0.85;
1397
+ white-space: nowrap;
1398
+ hyphens: none;
1399
+ word-break: normal;
1400
+ overflow-wrap: normal;
1401
+ }
1402
+ .ds-footer__link:hover {
1403
+ color: var(--text-primary);
1404
+ opacity: 1;
1405
+ }
1406
+ .ds-footer__link:focus-visible {
1407
+ outline: 2px solid var(--color-accent, currentColor);
1408
+ outline-offset: 2px;
1409
+ border-radius: 2px;
1410
+ }
1411
+ .ds-footer__badge {
1412
+ display: inline-flex;
1413
+ align-items: center;
1414
+ flex-shrink: 0;
1415
+ font-size: var(--font-size-2xs);
1416
+ font-weight: var(--font-weight-bold);
1417
+ text-transform: uppercase;
1418
+ letter-spacing: var(--letter-spacing-wide);
1419
+ color: var(--text-primary);
1420
+ background: var(--glass-base);
1421
+ border: 1px solid var(--rim-light-bottom);
1422
+ padding: var(--space-px) var(--space-2);
1423
+ border-radius: var(--radius-badge, 4px);
1424
+ line-height: 1.4;
1425
+ white-space: nowrap;
1426
+ }
1427
+ .ds-footer__accordion-item {
1428
+ border-bottom: 1px solid var(--rim-light-bottom);
1429
+ }
1430
+ .ds-footer__accordion-trigger {
1431
+ display: flex;
1432
+ width: 100%;
1433
+ justify-content: space-between;
1434
+ align-items: center;
1435
+ padding: var(--space-4) 0;
1436
+ min-height: 44px;
1437
+ background: none;
1438
+ border: none;
1439
+ cursor: pointer;
1440
+ font-family: var(--font-family);
1441
+ font-size: var(--font-size-sm);
1442
+ font-weight: var(--font-weight-semibold);
1443
+ color: var(--text-primary);
1444
+ text-transform: uppercase;
1445
+ letter-spacing: var(--letter-spacing-wider);
1446
+ white-space: nowrap;
1447
+ hyphens: none;
1448
+ word-break: normal;
1449
+ overflow-wrap: normal;
1450
+ }
1451
+ .ds-footer__accordion-trigger:focus-visible {
1452
+ outline: 2px solid var(--color-accent, currentColor);
1453
+ outline-offset: 2px;
1454
+ }
1455
+ .ds-footer__accordion-chevron {
1456
+ color: var(--text-tertiary);
1457
+ transition: transform var(--transition-fast);
1458
+ flex-shrink: 0;
1459
+ }
1460
+ .ds-footer__accordion-item--open .ds-footer__accordion-chevron {
1461
+ transform: rotate(180deg);
1462
+ }
1463
+ .ds-footer__accordion-panel {
1464
+ padding-bottom: var(--space-4);
1465
+ }
1466
+ .ds-footer__authority {
1467
+ border-top: 1px solid var(--rim-light-bottom);
1468
+ padding: var(--space-6) 0;
1469
+ }
1470
+ @media (min-width: 768px) {
1471
+ .ds-footer__authority {
1472
+ padding: var(--space-8) 0;
1473
+ }
1474
+ }
1475
+ .ds-footer__authority-content {
1476
+ display: flex;
1477
+ flex-direction: column;
1478
+ gap: var(--space-6);
1479
+ align-items: flex-start;
1480
+ }
1481
+ @media (min-width: 768px) {
1482
+ .ds-footer__authority-content {
1483
+ flex-direction: row;
1484
+ justify-content: space-between;
1485
+ align-items: center;
1486
+ }
1487
+ }
1488
+ .ds-footer__brand {
1489
+ display: flex;
1490
+ flex-direction: column;
1491
+ gap: var(--space-3);
1492
+ flex-shrink: 0;
1493
+ min-width: 0;
1494
+ }
1495
+ .ds-footer__logo {
1496
+ font-family: var(--font-family);
1497
+ font-weight: var(--font-weight-bold);
1498
+ font-size: var(--font-size-lg);
1499
+ color: var(--text-primary);
1500
+ display: flex;
1501
+ align-items: center;
1502
+ gap: var(--space-2);
1503
+ flex-shrink: 0;
1504
+ }
1505
+ .ds-footer__tagline {
1506
+ font-family: var(--font-family);
1507
+ font-size: var(--font-size-sm);
1508
+ color: var(--text-secondary);
1509
+ margin: 0;
1510
+ line-height: var(--line-height-relaxed);
1511
+ max-width: 360px;
1512
+ }
1513
+ .ds-footer__socials {
1514
+ display: flex;
1515
+ gap: var(--space-4);
1516
+ flex-shrink: 0;
1517
+ }
1518
+ .ds-footer__socials a,
1519
+ .ds-footer__socials button {
1520
+ color: var(--text-tertiary);
1521
+ transition: color var(--transition-fast), opacity var(--transition-fast);
1522
+ opacity: 0.7;
1523
+ display: inline-flex;
1524
+ align-items: center;
1525
+ justify-content: center;
1526
+ }
1527
+ .ds-footer__socials a:hover,
1528
+ .ds-footer__socials button:hover {
1529
+ color: var(--text-primary);
1530
+ opacity: 1;
1531
+ }
1532
+ .ds-footer__socials a:focus-visible,
1533
+ .ds-footer__socials button:focus-visible {
1534
+ outline: 2px solid var(--color-accent, currentColor);
1535
+ outline-offset: 2px;
1536
+ border-radius: 2px;
1537
+ }
1538
+ .ds-footer__trust-badges {
1539
+ display: flex;
1540
+ flex-wrap: wrap;
1541
+ gap: var(--space-3);
1542
+ flex-shrink: 0;
1543
+ }
1544
+ .ds-footer__trust-badge {
1545
+ display: inline-flex;
1546
+ align-items: center;
1547
+ gap: var(--space-1);
1548
+ font-family: var(--font-family);
1549
+ font-size: var(--font-size-xs);
1550
+ color: var(--text-tertiary);
1551
+ background: var(--glass-base);
1552
+ border: 1px solid var(--rim-light-bottom);
1553
+ padding: var(--space-1) var(--space-3);
1554
+ border-radius: var(--radius-badge, 4px);
1555
+ white-space: nowrap;
1556
+ }
1557
+ .ds-footer__bottom {
1558
+ border-top: 1px solid var(--rim-light-bottom);
1559
+ padding: var(--space-6) 0;
1560
+ }
1561
+ .ds-footer__bottom-content {
1562
+ display: flex;
1563
+ flex-direction: column;
1564
+ gap: var(--space-4);
1565
+ align-items: center;
1566
+ text-align: center;
1567
+ }
1568
+ @media (min-width: 768px) {
1569
+ .ds-footer__bottom-content {
1570
+ display: grid;
1571
+ grid-template-columns: 1fr auto 1fr;
1572
+ row-gap: var(--space-4);
1573
+ column-gap: var(--space-6);
1574
+ align-items: center;
1575
+ text-align: left;
1576
+ }
1577
+ .ds-footer__copyright {
1578
+ grid-column: 1;
1579
+ grid-row: 1;
1580
+ justify-self: start;
1581
+ }
1582
+ .ds-footer__controls {
1583
+ grid-column: 1 / -1;
1584
+ grid-row: 2;
1585
+ justify-self: center;
1586
+ }
1587
+ .ds-footer__legal {
1588
+ grid-column: 3;
1589
+ grid-row: 1;
1590
+ justify-self: end;
1591
+ }
1592
+ }
1593
+ .ds-footer__copyright {
1594
+ font-family: var(--font-family);
1595
+ font-size: var(--font-size-xs);
1596
+ color: var(--text-tertiary);
1597
+ white-space: nowrap;
1598
+ }
1599
+ .ds-footer__controls {
1600
+ display: flex;
1601
+ align-items: center;
1602
+ gap: var(--space-3);
1603
+ flex-wrap: wrap;
1604
+ justify-content: center;
1605
+ }
1606
+ .ds-footer__legal {
1607
+ display: flex;
1608
+ flex-wrap: wrap;
1609
+ gap: var(--space-4);
1610
+ justify-content: center;
1611
+ }
1612
+ @media (min-width: 768px) {
1613
+ .ds-footer__legal {
1614
+ justify-content: flex-end;
1615
+ }
1616
+ }
1617
+ .ds-footer__legal-link {
1618
+ font-family: var(--font-family);
1619
+ font-size: var(--font-size-xs);
1620
+ color: var(--text-tertiary);
1621
+ text-decoration: none;
1622
+ transition: color var(--transition-fast);
1623
+ white-space: nowrap;
1624
+ }
1625
+ .ds-footer__legal-link:hover {
1626
+ color: var(--text-secondary);
1627
+ }
1628
+ .ds-footer__legal-link:focus-visible {
1629
+ outline: 2px solid var(--color-accent, currentColor);
1630
+ outline-offset: 2px;
1631
+ border-radius: 2px;
1632
+ }
1633
+ .ds-footer__bottom-extra {
1634
+ display: flex;
1635
+ align-items: center;
1636
+ justify-content: center;
1637
+ gap: var(--space-4);
1638
+ flex-wrap: wrap;
1639
+ margin-top: var(--space-4);
1640
+ padding-top: var(--space-4);
1641
+ border-top: 1px solid var(--rim-light-bottom, rgba(255 255 255 / 0.06));
1642
+ }
1643
+ .ds-footer__bottom-extra-label {
1644
+ font-family: var(--font-family);
1645
+ font-size: var(--font-size-xs);
1646
+ color: var(--text-tertiary);
1647
+ white-space: nowrap;
1648
+ }
1649
+ .ds-footer__bottom-extra-icons {
1650
+ display: flex;
1651
+ align-items: center;
1652
+ gap: var(--space-2);
1653
+ }
1654
+ .ds-footer__ai-icon {
1655
+ display: inline-flex;
1656
+ align-items: center;
1657
+ justify-content: center;
1658
+ width: 28px;
1659
+ height: 28px;
1660
+ border-radius: var(--radius-full, 9999px);
1661
+ background: var(--bg-tertiary, rgba(255 255 255 / 0.06));
1662
+ color: var(--text-tertiary);
1663
+ transition: color var(--transition-fast), background var(--transition-fast);
1664
+ text-decoration: none;
1665
+ }
1666
+ .ds-footer__ai-icon:hover {
1667
+ color: var(--text-primary);
1668
+ background: var(--bg-secondary, rgba(255 255 255 / 0.1));
1669
+ }
1670
+ .ds-footer__ai-icon:focus-visible {
1671
+ outline: 2px solid var(--color-accent, currentColor);
1672
+ outline-offset: 2px;
1673
+ }
1674
+ .ds-footer__ai-icon svg {
1675
+ width: 16px;
1676
+ height: 16px;
1677
+ }
1678
+ .ds-footer__company-info {
1679
+ font-family: var(--font-family);
1680
+ font-size: var(--font-size-xs);
1681
+ color: var(--text-tertiary);
1682
+ text-align: center;
1683
+ margin: var(--space-3) 0 0;
1684
+ opacity: 0.7;
1685
+ }
1686
+ @media (prefers-contrast: more) {
1687
+ .ds-footer {
1688
+ border-top-color: var(--hc-border, var(--rim-light-bottom));
1689
+ }
1690
+ .ds-footer__cta::after {
1691
+ background: var(--hc-border, var(--rim-light-bottom));
1692
+ }
1693
+ .ds-footer__orientation {
1694
+ border-bottom-color: var(--hc-border, var(--rim-light-bottom));
1695
+ }
1696
+ .ds-footer__accordion-item {
1697
+ border-bottom-color: var(--hc-border, var(--rim-light-bottom));
1698
+ }
1699
+ .ds-footer__authority,
1700
+ .ds-footer__bottom {
1701
+ border-top-color: var(--hc-border, var(--rim-light-bottom));
1702
+ }
1703
+ .ds-footer__trust-badge,
1704
+ .ds-footer__badge {
1705
+ border-color: var(--hc-border, var(--rim-light-bottom));
1706
+ color: var(--text-primary);
1707
+ }
1708
+ .ds-footer__link,
1709
+ .ds-footer__legal-link {
1710
+ opacity: 1;
1711
+ }
1712
+ .ds-footer__socials a,
1713
+ .ds-footer__socials button {
1714
+ opacity: 1;
1715
+ }
1716
+ .ds-footer__company-info {
1717
+ opacity: 1;
1718
+ }
1719
+ }
1720
+ @media (prefers-reduced-motion: reduce) {
1721
+ .ds-footer__accordion-chevron,
1722
+ .ds-footer__link,
1723
+ .ds-footer__legal-link,
1724
+ .ds-footer__socials a,
1725
+ .ds-footer__socials button,
1726
+ .ds-footer__orientation a {
1727
+ transition: none;
1728
+ }
1729
+ }
1730
+
1731
+ /* src/components/LocaleDropdown/LocaleDropdown.css */
1732
+ .ds-locale-dropdown {
1733
+ position: relative;
1734
+ display: inline-flex;
1735
+ flex-shrink: 0;
1736
+ }
1737
+ .ds-locale-dropdown__wrapper {
1738
+ position: relative;
1739
+ }
1740
+ .ds-locale-dropdown__trigger {
1741
+ display: inline-flex;
1742
+ align-items: center;
1743
+ gap: var(--space-1-5);
1744
+ padding: var(--space-2) var(--space-2-5);
1745
+ border: none;
1746
+ border-radius: var(--radius-button);
1747
+ background: transparent;
1748
+ color: var(--text-secondary);
1749
+ font-family: var(--font-family);
1750
+ font-size: var(--font-size-xs);
1751
+ font-weight: var(--font-weight-medium);
1752
+ line-height: 1;
1753
+ cursor: pointer;
1754
+ white-space: nowrap;
1755
+ transition: background var(--transition-fast), color var(--transition-fast);
1756
+ }
1757
+ .ds-locale-dropdown__trigger:hover {
1758
+ background: var(--glass-base-hover);
1759
+ color: var(--text-primary);
1760
+ }
1761
+ .ds-locale-dropdown__trigger:focus-visible {
1762
+ outline: none;
1763
+ box-shadow: var(--focus-ring);
1764
+ }
1765
+ .ds-locale-dropdown__trigger-icon {
1766
+ display: flex;
1767
+ align-items: center;
1768
+ color: var(--text-tertiary);
1769
+ flex-shrink: 0;
1770
+ }
1771
+ .ds-locale-dropdown__trigger-flag {
1772
+ font-size: var(--font-size-xs);
1773
+ line-height: 1;
1774
+ display: inline-flex;
1775
+ align-items: center;
1776
+ height: 16px;
1777
+ overflow: hidden;
1778
+ }
1779
+ .ds-locale-dropdown__trigger-chevron {
1780
+ display: inline-flex;
1781
+ align-items: center;
1782
+ color: var(--text-tertiary);
1783
+ flex-shrink: 0;
1784
+ transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), color var(--transition-fast);
1785
+ }
1786
+ .ds-locale-dropdown__trigger-chevron[data-state=open] {
1787
+ transform: rotate(180deg);
1788
+ }
1789
+ .ds-locale-dropdown__trigger:hover .ds-locale-dropdown__trigger-chevron {
1790
+ color: var(--text-secondary);
1791
+ }
1792
+ .ds-locale-dropdown__panel {
1793
+ position: absolute;
1794
+ top: calc(100% + var(--space-2));
1795
+ right: 0;
1796
+ min-width: 180px;
1797
+ padding: var(--space-1-5);
1798
+ z-index: var(--z-dropdown);
1799
+ transform-origin: top right;
1800
+ overflow: hidden;
1801
+ background: var(--void-base);
1802
+ backdrop-filter: blur(24px) saturate(180%);
1803
+ -webkit-backdrop-filter: blur(24px) saturate(180%);
1804
+ border: 1px solid var(--rim-light-bottom);
1805
+ border-radius: var(--radius-card);
1806
+ box-shadow: var(--shadow-xl), 0 0 0 1px var(--rim-light-bottom);
1807
+ opacity: 0;
1808
+ transform: translateY(-8px) scale(0.95);
1809
+ visibility: hidden;
1810
+ pointer-events: none;
1811
+ transition:
1812
+ opacity 0.15s cubic-bezier(0.4, 0, 1, 1),
1813
+ transform 0.15s cubic-bezier(0.4, 0, 1, 1),
1814
+ visibility 0s 0.15s;
1815
+ }
1816
+ .ds-locale-dropdown__panel[data-state=open] {
1817
+ opacity: 1;
1818
+ transform: translateY(0) scale(1);
1819
+ visibility: visible;
1820
+ pointer-events: auto;
1821
+ transition:
1822
+ opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
1823
+ transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
1824
+ visibility 0s 0s;
1825
+ }
1826
+ .ds-locale-dropdown--up .ds-locale-dropdown__panel {
1827
+ top: auto;
1828
+ bottom: calc(100% + var(--space-2));
1829
+ transform-origin: bottom right;
1830
+ }
1831
+ .ds-locale-dropdown--up .ds-locale-dropdown__panel[data-state=closed] {
1832
+ transform: translateY(8px) scale(0.95);
1833
+ }
1834
+ .ds-locale-dropdown--align-left .ds-locale-dropdown__panel {
1835
+ right: auto;
1836
+ left: 0;
1837
+ transform-origin: top left;
1838
+ }
1839
+ .ds-locale-dropdown--align-center .ds-locale-dropdown__panel {
1840
+ right: auto;
1841
+ left: 50%;
1842
+ transform-origin: top center;
1843
+ }
1844
+ .ds-locale-dropdown--align-center .ds-locale-dropdown__panel[data-state=closed] {
1845
+ transform: translateX(-50%) translateY(-8px) scale(0.95);
1846
+ }
1847
+ .ds-locale-dropdown--align-center .ds-locale-dropdown__panel[data-state=open] {
1848
+ transform: translateX(-50%) translateY(0) scale(1);
1849
+ }
1850
+ .ds-locale-dropdown--up.ds-locale-dropdown--align-left .ds-locale-dropdown__panel {
1851
+ transform-origin: bottom left;
1852
+ }
1853
+ .ds-locale-dropdown--up.ds-locale-dropdown--align-center .ds-locale-dropdown__panel {
1854
+ transform-origin: bottom center;
1855
+ }
1856
+ .ds-locale-dropdown--up.ds-locale-dropdown--align-center .ds-locale-dropdown__panel[data-state=closed] {
1857
+ transform: translateX(-50%) translateY(8px) scale(0.95);
1858
+ }
1859
+ .ds-locale-dropdown__panel::before {
1860
+ content: "";
1861
+ position: absolute;
1862
+ top: 0;
1863
+ left: 0;
1864
+ right: 0;
1865
+ height: 1px;
1866
+ border-radius: var(--radius-card) var(--radius-card) 0 0;
1867
+ background:
1868
+ linear-gradient(
1869
+ 90deg,
1870
+ transparent 0%,
1871
+ var(--rim-light-top) 30%,
1872
+ var(--rim-light-hover-top) 50%,
1873
+ var(--rim-light-top) 70%,
1874
+ transparent 100%);
1875
+ opacity: 0.6;
1876
+ pointer-events: none;
1877
+ }
1878
+ .ds-locale-dropdown__option {
1879
+ display: flex;
1880
+ align-items: center;
1881
+ justify-content: space-between;
1882
+ width: 100%;
1883
+ padding: var(--space-2) var(--space-3);
1884
+ border: none;
1885
+ border-radius: var(--radius-button);
1886
+ background: transparent;
1887
+ color: var(--text-secondary);
1888
+ font-family: var(--font-family);
1889
+ font-size: var(--font-size-sm);
1890
+ font-weight: var(--font-weight-regular);
1891
+ cursor: pointer;
1892
+ text-decoration: none;
1893
+ text-align: left;
1894
+ white-space: nowrap;
1895
+ transition: background var(--transition-fast), color var(--transition-fast);
1896
+ }
1897
+ .ds-locale-dropdown__option:hover,
1898
+ .ds-locale-dropdown__option--focused {
1899
+ background: var(--glass-base-hover);
1900
+ color: var(--text-primary);
1901
+ }
1902
+ .ds-locale-dropdown__option:focus-visible {
1903
+ outline: none;
1904
+ box-shadow: var(--focus-ring);
1905
+ }
1906
+ .ds-locale-dropdown__option--active {
1907
+ background: rgba(var(--brand-pink-rgb), 0.08);
1908
+ color: var(--text-primary);
1909
+ font-weight: var(--font-weight-medium);
1910
+ }
1911
+ .ds-locale-dropdown__option--active:hover,
1912
+ .ds-locale-dropdown__option--active.ds-locale-dropdown__option--focused {
1913
+ background: rgba(var(--brand-pink-rgb), 0.14);
1914
+ }
1915
+ .ds-locale-dropdown__option-content {
1916
+ display: flex;
1917
+ align-items: center;
1918
+ gap: var(--space-2);
1919
+ }
1920
+ .ds-locale-dropdown__option-flag {
1921
+ font-size: var(--font-size-sm);
1922
+ line-height: 1;
1923
+ flex-shrink: 0;
1924
+ }
1925
+ .ds-locale-dropdown__option-label {
1926
+ white-space: nowrap;
1927
+ }
1928
+ .ds-locale-dropdown__option-check {
1929
+ display: flex;
1930
+ align-items: center;
1931
+ color: rgba(var(--brand-pink-rgb), 1);
1932
+ flex-shrink: 0;
1933
+ margin-left: var(--space-3);
1934
+ }
1935
+ @media (max-width: 1399px) {
1936
+ .ds-locale-dropdown__trigger {
1937
+ padding: var(--space-1-5) var(--space-2);
1938
+ gap: var(--space-1);
1939
+ }
1940
+ .ds-locale-dropdown__trigger-flag {
1941
+ display: none;
1942
+ }
1943
+ .ds-locale-dropdown__trigger-chevron {
1944
+ display: none;
1945
+ }
1946
+ }
1947
+ :root[data-theme=light] .ds-locale-dropdown__panel,
1948
+ :root[data-theme=light-contrast] .ds-locale-dropdown__panel {
1949
+ box-shadow: var(--shadow-sm), 0 0 0 1px var(--rim-light-bottom);
1950
+ }
1951
+ @media (prefers-reduced-motion: reduce) {
1952
+ .ds-locale-dropdown__trigger {
1953
+ transition: none;
1954
+ }
1955
+ .ds-locale-dropdown__trigger-chevron {
1956
+ transition: none;
1957
+ }
1958
+ .ds-locale-dropdown__panel {
1959
+ transition: none;
1960
+ }
1961
+ .ds-locale-dropdown__option {
1962
+ transition: none;
1963
+ }
1964
+ }
1965
+ @media (prefers-contrast: more) {
1966
+ .ds-locale-dropdown__trigger {
1967
+ outline: 1px solid var(--hc-border);
1968
+ outline-offset: -1px;
1969
+ }
1970
+ .ds-locale-dropdown__panel {
1971
+ border: 1px solid var(--hc-border);
1972
+ background: var(--hc-surface);
1973
+ }
1974
+ .ds-locale-dropdown__option--active {
1975
+ background: rgba(var(--brand-pink-rgb), 0.3);
1976
+ border: 1px solid rgba(var(--brand-pink-rgb), 0.5);
1977
+ }
1978
+ }
1979
+ @supports not (backdrop-filter: blur(1px)) {
1980
+ .ds-locale-dropdown__panel {
1981
+ background: var(--fallback-surface);
1982
+ }
1983
+ }
1984
+ /*# sourceMappingURL=index.css.map */