@prosophia/lab-classic 0.0.3 → 0.0.4

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.
@@ -0,0 +1,594 @@
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
+ }
@@ -0,0 +1,13 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { S as SiteSettings } from '../index-CSdV51Jq.mjs';
3
+
4
+ interface RootLayoutProps {
5
+ children: React.ReactNode;
6
+ settings?: SiteSettings | null;
7
+ }
8
+ /**
9
+ * Root layout component that wraps the application
10
+ */
11
+ declare function RootLayout({ children, settings, }: RootLayoutProps): react_jsx_runtime.JSX.Element;
12
+
13
+ export { RootLayout, type RootLayoutProps };
@@ -0,0 +1,13 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { S as SiteSettings } from '../index-CSdV51Jq.js';
3
+
4
+ interface RootLayoutProps {
5
+ children: React.ReactNode;
6
+ settings?: SiteSettings | null;
7
+ }
8
+ /**
9
+ * Root layout component that wraps the application
10
+ */
11
+ declare function RootLayout({ children, settings, }: RootLayoutProps): react_jsx_runtime.JSX.Element;
12
+
13
+ export { RootLayout, type RootLayoutProps };