@prosophia/lab-classic 0.0.4 → 0.0.5

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.
@@ -1,594 +0,0 @@
1
- /* src/components/Layout.module.css */
2
- .header {
3
- position: fixed;
4
- top: 0;
5
- left: 0;
6
- right: 0;
7
- z-index: var(--z-sticky);
8
- padding: var(--space-md, 1.5rem) var(--space-xl, 3rem);
9
- backdrop-filter: blur(24px) saturate(200%);
10
- -webkit-backdrop-filter: blur(24px) saturate(200%);
11
- transition: all var(--transition-base);
12
- }
13
- :global(:not(.dark)) .header {
14
- background: rgba(250, 251, 251, 0.9);
15
- border-bottom: 1px solid rgba(21, 48, 33, 0.1);
16
- }
17
- :global(.dark) .header {
18
- background: color-mix(in srgb, var(--dark-bg-primary) 80%, transparent);
19
- border-bottom: 1px solid rgba(var(--accent-primary-rgb, 139, 218, 163), 0.1);
20
- }
21
- .headerScrolled {
22
- box-shadow: var(--shadow-md);
23
- }
24
- :global(:not(.dark)) .headerScrolled {
25
- background: rgba(250, 251, 251, 0.95);
26
- border-bottom-color: rgba(21, 48, 33, 0.15);
27
- }
28
- :global(.dark) .headerScrolled {
29
- background: color-mix(in srgb, var(--dark-bg-primary) 95%, transparent);
30
- border-bottom-color: rgba(var(--accent-primary-rgb, 139, 218, 163), 0.15);
31
- }
32
- .navContainer {
33
- max-width: 1400px;
34
- margin: 0 auto;
35
- display: flex;
36
- justify-content: space-between;
37
- align-items: center;
38
- gap: var(--space-xl, 3rem);
39
- }
40
- .navLogo {
41
- display: flex;
42
- align-items: center;
43
- gap: 0.5rem;
44
- font-size: 1.25rem;
45
- font-weight: 600;
46
- color: var(--accent-tertiary, #5CB87A);
47
- text-decoration: none;
48
- transition: all var(--transition-base);
49
- flex-shrink: 0;
50
- }
51
- .navLogo:hover {
52
- opacity: 0.9;
53
- }
54
- .navLogo svg {
55
- width: 24px;
56
- height: 24px;
57
- color: var(--accent-tertiary, #5CB87A);
58
- transition: transform var(--transition-base);
59
- }
60
- .navLogo:hover svg {
61
- transform: scale(1.05);
62
- }
63
- .navLogoAccent {
64
- color: var(--accent-tertiary, #5CB87A);
65
- }
66
- .desktopNav {
67
- display: none;
68
- gap: var(--space-xl, 3rem);
69
- list-style: none;
70
- align-items: center;
71
- }
72
- @media (min-width: 1024px) {
73
- .desktopNav {
74
- display: flex;
75
- }
76
- }
77
- .navLink {
78
- position: relative;
79
- text-decoration: none;
80
- font-weight: 400;
81
- font-size: 0.9375rem;
82
- padding: var(--spacing-sm) var(--spacing-md);
83
- transition: all var(--transition-base);
84
- }
85
- :global(:not(.dark)) .navLink {
86
- color: var(--light-text-secondary, #153021);
87
- }
88
- :global(.dark) .navLink {
89
- color: var(--dark-text-secondary, #8BDAA3);
90
- }
91
- .navLink::after {
92
- content: "";
93
- position: absolute;
94
- bottom: -4px;
95
- left: 0;
96
- width: 0;
97
- height: 2px;
98
- background: var(--accent-tertiary, #5CB87A);
99
- transition: width var(--transition-base);
100
- }
101
- .navLink:hover {
102
- color: var(--accent-tertiary, #5CB87A);
103
- }
104
- .navLink:hover::after {
105
- width: 100%;
106
- }
107
- .navLinkActive {
108
- color: var(--accent-tertiary, #5CB87A);
109
- }
110
- .navLinkActive::after {
111
- width: 100%;
112
- }
113
- .navActions {
114
- display: none;
115
- }
116
- @media (min-width: 1024px) {
117
- .navActions {
118
- display: flex;
119
- align-items: center;
120
- gap: var(--spacing-md);
121
- }
122
- }
123
- .navCta {
124
- display: inline-flex;
125
- align-items: center;
126
- justify-content: center;
127
- padding: 0.75rem 1.75rem;
128
- background:
129
- linear-gradient(
130
- 135deg,
131
- var(--accent-primary, #2A6847),
132
- var(--accent-secondary, #3A8F62));
133
- color: white;
134
- border-radius: var(--radius-md, 12px);
135
- font-weight: 500;
136
- font-size: 0.9375rem;
137
- text-decoration: none;
138
- transition: all var(--transition-base);
139
- box-shadow: 0 4px 16px rgba(42, 104, 71, 0.3);
140
- }
141
- .navCta:hover {
142
- transform: translateY(-2px);
143
- box-shadow: 0 6px 24px rgba(42, 104, 71, 0.4);
144
- }
145
- .menuButton {
146
- display: flex;
147
- align-items: center;
148
- justify-content: center;
149
- width: 44px;
150
- height: 44px;
151
- background: transparent;
152
- border: none;
153
- cursor: pointer;
154
- padding: var(--spacing-sm);
155
- border-radius: var(--border-radius-md);
156
- transition: background var(--transition-fast);
157
- z-index: calc(var(--z-modal) + 1);
158
- }
159
- .menuButton:hover {
160
- background: var(--color-background-secondary);
161
- }
162
- @media (min-width: 1024px) {
163
- .menuButton {
164
- display: none;
165
- }
166
- }
167
- .menuButtonLines {
168
- display: flex;
169
- flex-direction: column;
170
- gap: 5px;
171
- width: 24px;
172
- }
173
- .menuLine {
174
- display: block;
175
- height: 2px;
176
- width: 100%;
177
- background: var(--color-text-primary);
178
- border-radius: var(--border-radius-full);
179
- transition: all var(--transition-base);
180
- transform-origin: center;
181
- }
182
- .menuLineOpen1 {
183
- transform: translateY(7px) rotate(45deg);
184
- }
185
- .menuLineOpen2 {
186
- opacity: 0;
187
- transform: scaleX(0);
188
- }
189
- .menuLineOpen3 {
190
- transform: translateY(-7px) rotate(-45deg);
191
- }
192
- .mobileMenu {
193
- position: fixed;
194
- inset: 0;
195
- z-index: var(--z-modal);
196
- pointer-events: none;
197
- visibility: hidden;
198
- }
199
- .mobileMenuOpen {
200
- pointer-events: auto;
201
- visibility: visible;
202
- }
203
- .mobileMenuOverlay {
204
- position: absolute;
205
- inset: 0;
206
- background: rgba(0, 0, 0, 0.5);
207
- backdrop-filter: blur(4px);
208
- opacity: 0;
209
- transition: opacity var(--transition-base);
210
- }
211
- .mobileMenuOpen .mobileMenuOverlay {
212
- opacity: 1;
213
- }
214
- .mobileMenuContent {
215
- position: absolute;
216
- top: 0;
217
- right: 0;
218
- width: min(320px, 85vw);
219
- height: 100%;
220
- box-shadow: var(--shadow-2xl);
221
- padding: calc(var(--header-height) + var(--spacing-2xl)) var(--spacing-xl) var(--spacing-xl);
222
- display: flex;
223
- flex-direction: column;
224
- gap: var(--spacing-sm);
225
- transform: translateX(100%);
226
- transition: transform var(--transition-slow);
227
- backdrop-filter: blur(20px) saturate(180%);
228
- -webkit-backdrop-filter: blur(20px) saturate(180%);
229
- }
230
- :global(:not(.dark)) .mobileMenuContent {
231
- background: rgba(255, 255, 255, 0.95);
232
- border-left: 1px solid rgba(21, 48, 33, 0.1);
233
- }
234
- :global(.dark) .mobileMenuContent {
235
- background: color-mix(in srgb, var(--dark-bg-secondary) 95%, transparent);
236
- border-left: 1px solid rgba(var(--accent-primary-rgb, 139, 218, 163), 0.1);
237
- }
238
- .mobileMenuOpen .mobileMenuContent {
239
- transform: translateX(0);
240
- }
241
- .mobileNavLink {
242
- display: block;
243
- padding: var(--spacing-md) var(--spacing-lg);
244
- color: var(--color-text-primary);
245
- text-decoration: none;
246
- font-family: var(--font-heading);
247
- font-size: var(--font-size-lg);
248
- font-weight: var(--font-weight-semibold);
249
- border-radius: var(--border-radius-md);
250
- transition: all var(--transition-base);
251
- opacity: 0;
252
- transform: translateX(20px);
253
- }
254
- .mobileMenuOpen .mobileNavLink {
255
- opacity: 1;
256
- transform: translateX(0);
257
- animation: slideIn var(--transition-base) ease-out forwards;
258
- }
259
- @keyframes slideIn {
260
- from {
261
- opacity: 0;
262
- transform: translateX(20px);
263
- }
264
- to {
265
- opacity: 1;
266
- transform: translateX(0);
267
- }
268
- }
269
- .mobileNavLink:hover,
270
- .mobileNavLinkActive {
271
- background: var(--color-background-secondary);
272
- color: var(--color-text-accent);
273
- padding-left: var(--spacing-xl);
274
- }
275
- .mobileNavLinkActive {
276
- border-left: 3px solid var(--color-border-accent);
277
- }
278
- .mobileNavCta {
279
- display: flex;
280
- align-items: center;
281
- justify-content: center;
282
- margin-top: var(--spacing-lg);
283
- padding: var(--spacing-md) var(--spacing-xl);
284
- background: var(--gradient-primary);
285
- color: var(--color-text-inverse);
286
- border-radius: var(--border-radius-md);
287
- font-weight: var(--font-weight-semibold);
288
- text-decoration: none;
289
- transition: all var(--transition-base);
290
- opacity: 0;
291
- transform: translateX(20px);
292
- }
293
- .mobileMenuOpen .mobileNavCta {
294
- opacity: 1;
295
- transform: translateX(0);
296
- animation: slideIn var(--transition-base) ease-out forwards;
297
- }
298
- .mobileNavCta:hover {
299
- box-shadow: var(--shadow-accent);
300
- }
301
-
302
- /* src/components/ThemeToggle.module.css */
303
- .toggle {
304
- position: relative;
305
- display: flex;
306
- align-items: center;
307
- justify-content: center;
308
- padding: 4px;
309
- background: transparent;
310
- border: none;
311
- cursor: pointer;
312
- border-radius: var(--radius-full, 9999px);
313
- transition: transform var(--transition-base, 0.3s ease);
314
- }
315
- .toggle:hover {
316
- transform: scale(1.05);
317
- }
318
- .toggle:focus-visible {
319
- outline: 2px solid var(--accent-tertiary);
320
- outline-offset: 2px;
321
- }
322
- .togglePlaceholder {
323
- width: 60px;
324
- height: 32px;
325
- }
326
- .track {
327
- position: relative;
328
- display: flex;
329
- align-items: center;
330
- justify-content: space-between;
331
- width: 60px;
332
- height: 32px;
333
- padding: 0 6px;
334
- border-radius: var(--radius-full, 9999px);
335
- transition: all var(--transition-base, 0.3s ease);
336
- }
337
- :global(body:not(.dark-mode)) .track,
338
- :global(.light-mode) .track {
339
- background: rgba(42, 104, 71, 0.12);
340
- border: 1px solid rgba(21, 48, 33, 0.15);
341
- }
342
- :global(.dark-mode) .track,
343
- :global(.dark) .track {
344
- background: rgba(139, 218, 163, 0.15);
345
- border: 1px solid rgba(139, 218, 163, 0.2);
346
- }
347
- .thumb {
348
- position: absolute;
349
- top: 3px;
350
- left: 3px;
351
- width: 24px;
352
- height: 24px;
353
- border-radius: 50%;
354
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
355
- z-index: 2;
356
- }
357
- :global(body:not(.dark-mode)) .thumb,
358
- :global(.light-mode) .thumb {
359
- background:
360
- linear-gradient(
361
- 135deg,
362
- var(--accent-primary, #2A6847),
363
- var(--accent-secondary, #3A8F62));
364
- }
365
- :global(.dark-mode) .thumb,
366
- :global(.dark) .thumb {
367
- background:
368
- linear-gradient(
369
- 135deg,
370
- var(--accent-secondary, #3A8F62),
371
- var(--accent-tertiary, #5CB87A));
372
- }
373
- .icon {
374
- display: flex;
375
- align-items: center;
376
- justify-content: center;
377
- width: 20px;
378
- height: 20px;
379
- z-index: 1;
380
- transition: all var(--transition-base, 0.3s ease);
381
- opacity: 0.4;
382
- }
383
- .iconActive {
384
- opacity: 1;
385
- }
386
- :global(body:not(.dark-mode)) .sunIcon,
387
- :global(.light-mode) .sunIcon {
388
- color: var(--accent-primary, #2A6847);
389
- }
390
- :global(body:not(.dark-mode)) .moonIcon,
391
- :global(.light-mode) .moonIcon {
392
- color: var(--light-text-muted, #7F878B);
393
- }
394
- :global(.dark-mode) .sunIcon,
395
- :global(.dark) .sunIcon {
396
- color: var(--dark-text-muted, #5C6366);
397
- }
398
- :global(.dark-mode) .moonIcon,
399
- :global(.dark) .moonIcon {
400
- color: var(--accent-tertiary, #5CB87A);
401
- }
402
-
403
- /* src/components/Footer.module.css */
404
- .footerWrapper {
405
- padding: var(--space-3xl, 6rem) var(--space-xl, 3rem) var(--space-xl, 3rem);
406
- margin-top: var(--space-3xl, 6rem);
407
- border-top: 1px solid;
408
- }
409
- :global(body:not(.dark-mode)) .footerWrapper,
410
- :global(.light-mode) .footerWrapper {
411
- background: var(--light-bg-secondary, #F2F4F5);
412
- border-top-color: rgba(21, 48, 33, 0.1);
413
- }
414
- :global(.dark-mode) .footerWrapper,
415
- :global(.dark) .footerWrapper {
416
- background: var(--dark-bg-secondary, #0F2419);
417
- border-top-color: rgba(139, 218, 163, 0.1);
418
- }
419
- .footerContainer {
420
- max-width: 1400px;
421
- margin: 0 auto;
422
- position: relative;
423
- z-index: 1;
424
- }
425
- .mainFooter {
426
- display: grid;
427
- grid-template-columns: 1fr;
428
- gap: var(--space-3xl, 6rem);
429
- margin-bottom: var(--space-3xl, 6rem);
430
- }
431
- @media (min-width: 768px) {
432
- .mainFooter {
433
- grid-template-columns: 1fr 1fr;
434
- }
435
- }
436
- @media (min-width: 1024px) {
437
- .mainFooter {
438
- grid-template-columns: 2fr 1fr 1fr 1fr;
439
- }
440
- }
441
- .footerAbout {
442
- max-width: 400px;
443
- }
444
- .footerLogo {
445
- font-size: 1.5rem;
446
- font-weight: 600;
447
- color: var(--accent-tertiary, #5CB87A);
448
- text-decoration: none;
449
- display: inline-block;
450
- margin-bottom: var(--space-md, 1.5rem);
451
- transition: opacity var(--transition-base);
452
- }
453
- .footerLogo:hover {
454
- opacity: 0.9;
455
- }
456
- .logoAccent {
457
- color: var(--accent-tertiary, #5CB87A);
458
- }
459
- .footerDescription {
460
- font-size: 0.9375rem;
461
- line-height: 1.7;
462
- max-width: 400px;
463
- }
464
- :global(body:not(.dark-mode)) .footerDescription,
465
- :global(.light-mode) .footerDescription {
466
- color: var(--light-text-muted, #7F878B);
467
- }
468
- :global(.dark-mode) .footerDescription,
469
- :global(.dark) .footerDescription {
470
- color: var(--dark-text-muted, #5C6366);
471
- }
472
- .socials {
473
- display: flex;
474
- gap: var(--space-md, 1.5rem);
475
- margin-top: var(--space-lg, 2rem);
476
- }
477
- .socialIcon {
478
- width: 36px;
479
- height: 36px;
480
- border-radius: 50%;
481
- display: flex;
482
- align-items: center;
483
- justify-content: center;
484
- transition: all var(--transition-base);
485
- }
486
- :global(body:not(.dark-mode)) .socialIcon,
487
- :global(.light-mode) .socialIcon {
488
- background: rgba(42, 104, 71, 0.1);
489
- color: var(--accent-primary, #2A6847);
490
- }
491
- :global(.dark-mode) .socialIcon,
492
- :global(.dark) .socialIcon {
493
- background: rgba(92, 184, 122, 0.1);
494
- color: var(--accent-tertiary, #5CB87A);
495
- }
496
- .socialIcon:hover {
497
- transform: translateY(-3px);
498
- background: var(--accent-tertiary, #5CB87A);
499
- color: white;
500
- }
501
- .footerLinksGrid {
502
- display: contents;
503
- }
504
- .footerColumn h4 {
505
- font-size: 0.875rem;
506
- font-weight: 600;
507
- letter-spacing: 0.05em;
508
- text-transform: uppercase;
509
- margin-bottom: var(--space-md, 1.5rem);
510
- }
511
- :global(body:not(.dark-mode)) .footerColumn h4,
512
- :global(.light-mode) .footerColumn h4 {
513
- color: var(--light-text-primary, #0A1810);
514
- }
515
- :global(.dark-mode) .footerColumn h4,
516
- :global(.dark) .footerColumn h4 {
517
- color: var(--dark-text-primary, #E8F9ED);
518
- }
519
- .footerColumn a {
520
- display: block;
521
- text-decoration: none;
522
- font-size: 0.9375rem;
523
- margin-bottom: var(--space-sm, 1rem);
524
- transition: color var(--transition-base);
525
- }
526
- :global(body:not(.dark-mode)) .footerColumn a,
527
- :global(.light-mode) .footerColumn a {
528
- color: var(--light-text-muted, #7F878B);
529
- }
530
- :global(.dark-mode) .footerColumn a,
531
- :global(.dark) .footerColumn a {
532
- color: var(--dark-text-muted, #5C6366);
533
- }
534
- .footerColumn a::before {
535
- display: none;
536
- }
537
- .footerColumn a:hover {
538
- color: var(--accent-tertiary, #5CB87A);
539
- padding-left: 0;
540
- }
541
- .footerBottomBar {
542
- padding-top: var(--space-lg, 2rem);
543
- border-top: 1px solid;
544
- display: flex;
545
- justify-content: space-between;
546
- align-items: center;
547
- flex-wrap: wrap;
548
- gap: var(--space-md, 1.5rem);
549
- }
550
- :global(body:not(.dark-mode)) .footerBottomBar,
551
- :global(.light-mode) .footerBottomBar {
552
- border-top-color: rgba(21, 48, 33, 0.08);
553
- }
554
- :global(.dark-mode) .footerBottomBar,
555
- :global(.dark) .footerBottomBar {
556
- border-top-color: rgba(139, 218, 163, 0.08);
557
- }
558
- .footerBottomBar p {
559
- font-size: 0.875rem;
560
- }
561
- :global(body:not(.dark-mode)) .footerBottomBar p,
562
- :global(.light-mode) .footerBottomBar p {
563
- color: var(--light-text-muted, #7F878B);
564
- }
565
- :global(.dark-mode) .footerBottomBar p,
566
- :global(.dark) .footerBottomBar p {
567
- color: var(--dark-text-muted, #5C6366);
568
- }
569
- .legalLinks {
570
- display: flex;
571
- gap: var(--space-lg, 2rem);
572
- }
573
- .legalLinks a {
574
- font-size: 0.875rem;
575
- text-decoration: none;
576
- transition: color var(--transition-base);
577
- }
578
- :global(body:not(.dark-mode)) .legalLinks a,
579
- :global(.light-mode) .legalLinks a {
580
- color: var(--light-text-muted, #7F878B);
581
- }
582
- :global(.dark-mode) .legalLinks a,
583
- :global(.dark) .legalLinks a {
584
- color: var(--dark-text-muted, #5C6366);
585
- }
586
- .legalLinks a:hover {
587
- color: var(--accent-tertiary, #5CB87A);
588
- }
589
- @media (max-width: 767px) {
590
- .footerBottomBar {
591
- flex-direction: column;
592
- text-align: center;
593
- }
594
- }