@prosophia/lab-minimal 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.
package/dist/index.css DELETED
@@ -1,1060 +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(--spacing-md) var(--spacing-lg);
9
- background: var(--color-background-primary);
10
- border-bottom: 1px solid var(--color-border);
11
- transition: box-shadow var(--transition-base);
12
- }
13
- .headerScrolled {
14
- box-shadow: var(--shadow-sm);
15
- }
16
- .navContainer {
17
- max-width: var(--max-width-content);
18
- margin: 0 auto;
19
- display: flex;
20
- justify-content: space-between;
21
- align-items: center;
22
- gap: var(--spacing-xl);
23
- }
24
- .navLogo {
25
- display: flex;
26
- align-items: center;
27
- gap: 0.5rem;
28
- font-size: var(--font-size-lg);
29
- font-weight: var(--font-weight-semibold);
30
- color: var(--color-text-primary);
31
- text-decoration: none;
32
- flex-shrink: 0;
33
- }
34
- .navLogo:hover {
35
- color: var(--accent-primary);
36
- }
37
- .navLogo svg {
38
- width: 20px;
39
- height: 20px;
40
- color: var(--accent-primary);
41
- }
42
- .navLogoAccent {
43
- color: var(--accent-primary);
44
- }
45
- .desktopNav {
46
- display: none;
47
- gap: var(--spacing-xl);
48
- list-style: none;
49
- align-items: center;
50
- }
51
- @media (min-width: 1024px) {
52
- .desktopNav {
53
- display: flex;
54
- }
55
- }
56
- .navLink {
57
- text-decoration: none;
58
- font-weight: var(--font-weight-normal);
59
- font-size: var(--font-size-sm);
60
- color: var(--color-text-secondary);
61
- padding: var(--spacing-xs) 0;
62
- transition: color var(--transition-base);
63
- }
64
- .navLink:hover {
65
- color: var(--accent-primary);
66
- }
67
- .navLinkActive {
68
- color: var(--accent-primary);
69
- font-weight: var(--font-weight-medium);
70
- }
71
- .navActions {
72
- display: none;
73
- }
74
- @media (min-width: 1024px) {
75
- .navActions {
76
- display: flex;
77
- align-items: center;
78
- gap: var(--spacing-md);
79
- }
80
- }
81
- .navCta {
82
- display: inline-flex;
83
- align-items: center;
84
- justify-content: center;
85
- padding: var(--spacing-sm) var(--spacing-lg);
86
- background: var(--accent-primary);
87
- color: white;
88
- border-radius: var(--border-radius-md);
89
- font-weight: var(--font-weight-medium);
90
- font-size: var(--font-size-sm);
91
- text-decoration: none;
92
- transition: background var(--transition-base);
93
- }
94
- .navCta:hover {
95
- background: var(--accent-hover);
96
- color: white;
97
- }
98
- .menuButton {
99
- display: flex;
100
- align-items: center;
101
- justify-content: center;
102
- width: 40px;
103
- height: 40px;
104
- background: transparent;
105
- border: none;
106
- cursor: pointer;
107
- padding: var(--spacing-sm);
108
- border-radius: var(--border-radius-sm);
109
- transition: background var(--transition-fast);
110
- z-index: calc(var(--z-modal) + 1);
111
- }
112
- .menuButton:hover {
113
- background: var(--color-background-secondary);
114
- }
115
- @media (min-width: 1024px) {
116
- .menuButton {
117
- display: none;
118
- }
119
- }
120
- .menuButtonLines {
121
- display: flex;
122
- flex-direction: column;
123
- gap: 4px;
124
- width: 20px;
125
- }
126
- .menuLine {
127
- display: block;
128
- height: 2px;
129
- width: 100%;
130
- background: var(--color-text-primary);
131
- border-radius: var(--border-radius-full);
132
- transition: all var(--transition-base);
133
- transform-origin: center;
134
- }
135
- .menuLineOpen1 {
136
- transform: translateY(6px) rotate(45deg);
137
- }
138
- .menuLineOpen2 {
139
- opacity: 0;
140
- transform: scaleX(0);
141
- }
142
- .menuLineOpen3 {
143
- transform: translateY(-6px) rotate(-45deg);
144
- }
145
- .mobileMenu {
146
- position: fixed;
147
- inset: 0;
148
- z-index: var(--z-modal);
149
- pointer-events: none;
150
- visibility: hidden;
151
- }
152
- .mobileMenuOpen {
153
- pointer-events: auto;
154
- visibility: visible;
155
- }
156
- .mobileMenuOverlay {
157
- position: absolute;
158
- inset: 0;
159
- background: rgba(0, 0, 0, 0.3);
160
- opacity: 0;
161
- transition: opacity var(--transition-base);
162
- }
163
- .mobileMenuOpen .mobileMenuOverlay {
164
- opacity: 1;
165
- }
166
- .mobileMenuContent {
167
- position: absolute;
168
- top: 0;
169
- right: 0;
170
- width: min(280px, 80vw);
171
- height: 100%;
172
- background: var(--color-background-primary);
173
- border-left: 1px solid var(--color-border);
174
- padding: calc(var(--header-height) + var(--spacing-xl)) var(--spacing-lg) var(--spacing-lg);
175
- display: flex;
176
- flex-direction: column;
177
- gap: var(--spacing-xs);
178
- transform: translateX(100%);
179
- transition: transform var(--transition-base);
180
- }
181
- .mobileMenuOpen .mobileMenuContent {
182
- transform: translateX(0);
183
- }
184
- .mobileNavLink {
185
- display: block;
186
- padding: var(--spacing-md);
187
- color: var(--color-text-primary);
188
- text-decoration: none;
189
- font-size: var(--font-size-base);
190
- font-weight: var(--font-weight-medium);
191
- border-radius: var(--border-radius-sm);
192
- transition: all var(--transition-base);
193
- }
194
- .mobileNavLink:hover,
195
- .mobileNavLinkActive {
196
- background: var(--color-background-secondary);
197
- color: var(--accent-primary);
198
- }
199
- .mobileNavCta {
200
- display: flex;
201
- align-items: center;
202
- justify-content: center;
203
- margin-top: var(--spacing-md);
204
- padding: var(--spacing-md);
205
- background: var(--accent-primary);
206
- color: white;
207
- border-radius: var(--border-radius-md);
208
- font-weight: var(--font-weight-medium);
209
- text-decoration: none;
210
- }
211
- .mobileNavCta:hover {
212
- background: var(--accent-hover);
213
- }
214
-
215
- /* src/components/ThemeToggle.module.css */
216
- .toggle {
217
- position: relative;
218
- display: flex;
219
- align-items: center;
220
- justify-content: center;
221
- padding: 4px;
222
- background: transparent;
223
- border: none;
224
- cursor: pointer;
225
- border-radius: var(--radius-full, 9999px);
226
- transition: transform var(--transition-base, 0.3s ease);
227
- }
228
- .toggle:hover {
229
- transform: scale(1.05);
230
- }
231
- .toggle:focus-visible {
232
- outline: 2px solid var(--accent-tertiary);
233
- outline-offset: 2px;
234
- }
235
- .togglePlaceholder {
236
- width: 60px;
237
- height: 32px;
238
- }
239
- .track {
240
- position: relative;
241
- display: flex;
242
- align-items: center;
243
- justify-content: space-between;
244
- width: 60px;
245
- height: 32px;
246
- padding: 0 6px;
247
- border-radius: var(--radius-full, 9999px);
248
- transition: all var(--transition-base, 0.3s ease);
249
- }
250
- :global(body:not(.dark-mode)) .track,
251
- :global(.light-mode) .track {
252
- background: rgba(42, 104, 71, 0.12);
253
- border: 1px solid rgba(21, 48, 33, 0.15);
254
- }
255
- :global(.dark-mode) .track,
256
- :global(.dark) .track {
257
- background: rgba(139, 218, 163, 0.15);
258
- border: 1px solid rgba(139, 218, 163, 0.2);
259
- }
260
- .thumb {
261
- position: absolute;
262
- top: 3px;
263
- left: 3px;
264
- width: 24px;
265
- height: 24px;
266
- border-radius: 50%;
267
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
268
- z-index: 2;
269
- }
270
- :global(body:not(.dark-mode)) .thumb,
271
- :global(.light-mode) .thumb {
272
- background:
273
- linear-gradient(
274
- 135deg,
275
- var(--accent-primary, #2A6847),
276
- var(--accent-secondary, #3A8F62));
277
- }
278
- :global(.dark-mode) .thumb,
279
- :global(.dark) .thumb {
280
- background:
281
- linear-gradient(
282
- 135deg,
283
- var(--accent-secondary, #3A8F62),
284
- var(--accent-tertiary, #5CB87A));
285
- }
286
- .icon {
287
- display: flex;
288
- align-items: center;
289
- justify-content: center;
290
- width: 20px;
291
- height: 20px;
292
- z-index: 1;
293
- transition: all var(--transition-base, 0.3s ease);
294
- opacity: 0.4;
295
- }
296
- .iconActive {
297
- opacity: 1;
298
- }
299
- :global(body:not(.dark-mode)) .sunIcon,
300
- :global(.light-mode) .sunIcon {
301
- color: var(--accent-primary, #2A6847);
302
- }
303
- :global(body:not(.dark-mode)) .moonIcon,
304
- :global(.light-mode) .moonIcon {
305
- color: var(--light-text-muted, #7F878B);
306
- }
307
- :global(.dark-mode) .sunIcon,
308
- :global(.dark) .sunIcon {
309
- color: var(--dark-text-muted, #5C6366);
310
- }
311
- :global(.dark-mode) .moonIcon,
312
- :global(.dark) .moonIcon {
313
- color: var(--accent-tertiary, #5CB87A);
314
- }
315
-
316
- /* src/components/Footer.module.css */
317
- .footerWrapper {
318
- padding: var(--spacing-3xl) var(--spacing-lg);
319
- margin-top: var(--spacing-4xl);
320
- border-top: 1px solid var(--color-border);
321
- background: var(--color-background-secondary);
322
- }
323
- .footerContainer {
324
- max-width: var(--max-width-content);
325
- margin: 0 auto;
326
- }
327
- .mainFooter {
328
- display: flex;
329
- flex-direction: column;
330
- gap: var(--spacing-2xl);
331
- margin-bottom: var(--spacing-2xl);
332
- }
333
- @media (min-width: 768px) {
334
- .mainFooter {
335
- flex-direction: row;
336
- justify-content: space-between;
337
- align-items: flex-start;
338
- }
339
- }
340
- .footerAbout {
341
- max-width: 400px;
342
- }
343
- .footerLogo {
344
- font-size: var(--font-size-lg);
345
- font-weight: var(--font-weight-semibold);
346
- color: var(--color-text-primary);
347
- text-decoration: none;
348
- display: inline-block;
349
- margin-bottom: var(--spacing-sm);
350
- }
351
- .footerLogo:hover {
352
- color: var(--accent-primary);
353
- }
354
- .logoAccent {
355
- color: var(--accent-primary);
356
- }
357
- .footerDescription {
358
- font-size: var(--font-size-sm);
359
- line-height: 1.6;
360
- color: var(--color-text-secondary);
361
- max-width: 300px;
362
- }
363
- .socials {
364
- display: flex;
365
- gap: var(--spacing-md);
366
- margin-top: var(--spacing-lg);
367
- }
368
- .socialIcon {
369
- width: 32px;
370
- height: 32px;
371
- border-radius: var(--border-radius-full);
372
- display: flex;
373
- align-items: center;
374
- justify-content: center;
375
- background: var(--color-background-card);
376
- border: 1px solid var(--color-border);
377
- color: var(--color-text-muted);
378
- transition: all var(--transition-base);
379
- }
380
- .socialIcon:hover {
381
- border-color: var(--accent-primary);
382
- color: var(--accent-primary);
383
- }
384
- .footerLinksGrid {
385
- display: flex;
386
- gap: var(--spacing-3xl);
387
- }
388
- @media (max-width: 767px) {
389
- .footerLinksGrid {
390
- flex-wrap: wrap;
391
- gap: var(--spacing-xl);
392
- }
393
- }
394
- .footerColumn h4 {
395
- font-size: var(--font-size-xs);
396
- font-weight: var(--font-weight-semibold);
397
- letter-spacing: 0.05em;
398
- text-transform: uppercase;
399
- color: var(--color-text-muted);
400
- margin-bottom: var(--spacing-md);
401
- }
402
- .footerColumn a {
403
- display: block;
404
- text-decoration: none;
405
- font-size: var(--font-size-sm);
406
- color: var(--color-text-secondary);
407
- margin-bottom: var(--spacing-sm);
408
- transition: color var(--transition-base);
409
- }
410
- .footerColumn a:hover {
411
- color: var(--accent-primary);
412
- }
413
- .footerBottomBar {
414
- padding-top: var(--spacing-lg);
415
- border-top: 1px solid var(--color-border);
416
- display: flex;
417
- justify-content: space-between;
418
- align-items: center;
419
- flex-wrap: wrap;
420
- gap: var(--spacing-md);
421
- }
422
- .footerBottomBar p {
423
- font-size: var(--font-size-xs);
424
- color: var(--color-text-muted);
425
- }
426
- .legalLinks {
427
- display: flex;
428
- gap: var(--spacing-lg);
429
- }
430
- .legalLinks a {
431
- font-size: var(--font-size-xs);
432
- color: var(--color-text-muted);
433
- text-decoration: none;
434
- transition: color var(--transition-base);
435
- }
436
- .legalLinks a:hover {
437
- color: var(--accent-primary);
438
- }
439
- @media (max-width: 767px) {
440
- .footerBottomBar {
441
- flex-direction: column;
442
- text-align: center;
443
- }
444
- }
445
-
446
- /* src/components/ContactCTA.module.css */
447
- .ctaContainer {
448
- padding: var(--space-2xl, 4rem) var(--space-xl, 3rem);
449
- margin-top: var(--space-3xl, 6rem);
450
- text-align: center;
451
- border-radius: var(--radius-2xl, 24px);
452
- backdrop-filter: blur(20px) saturate(180%);
453
- -webkit-backdrop-filter: blur(20px) saturate(180%);
454
- position: relative;
455
- overflow: hidden;
456
- }
457
- .ctaContainer::before {
458
- content: "";
459
- position: absolute;
460
- top: 0;
461
- left: 0;
462
- right: 0;
463
- bottom: 0;
464
- background:
465
- linear-gradient(
466
- 135deg,
467
- rgba(42, 104, 71, 0.1) 0%,
468
- rgba(92, 184, 122, 0.05) 50%,
469
- rgba(212, 165, 116, 0.1) 100%);
470
- z-index: -1;
471
- }
472
- :global(body:not(.dark-mode)) .ctaContainer,
473
- :global(.light-mode) .ctaContainer {
474
- background: rgba(255, 255, 255, 0.7);
475
- border: 1px solid rgba(21, 48, 33, 0.1);
476
- box-shadow: 0 8px 32px rgba(10, 24, 16, 0.08);
477
- }
478
- :global(.dark-mode) .ctaContainer,
479
- :global(.dark) .ctaContainer {
480
- background: var(--dark-bg-tertiary);
481
- border: 1px solid rgba(var(--accent-primary-rgb, 139, 218, 163), 0.15);
482
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
483
- }
484
- .ctaContent {
485
- max-width: 700px;
486
- margin: 0 auto;
487
- position: relative;
488
- z-index: 1;
489
- }
490
- .ctaHeading {
491
- font-size: clamp(1.5rem, 3vw, 2.25rem);
492
- font-weight: 600;
493
- line-height: 1.2;
494
- letter-spacing: -0.01em;
495
- margin-bottom: var(--space-md, 1.5rem);
496
- }
497
- .ctaText {
498
- font-size: 1.0625rem;
499
- line-height: 1.7;
500
- margin-bottom: var(--space-xl, 3rem);
501
- }
502
- :global(body:not(.dark-mode)) .ctaText,
503
- :global(.light-mode) .ctaText {
504
- color: var(--light-text-muted, #7F878B);
505
- }
506
- :global(.dark-mode) .ctaText,
507
- :global(.dark) .ctaText {
508
- color: var(--dark-text-muted, #5C6366);
509
- }
510
- .ctaButton {
511
- display: inline-flex;
512
- align-items: center;
513
- gap: 0.5rem;
514
- padding: 1rem 2rem;
515
- background:
516
- linear-gradient(
517
- 135deg,
518
- var(--accent-primary, #2A6847),
519
- var(--accent-secondary, #3A8F62));
520
- color: white;
521
- border-radius: var(--radius-md, 12px);
522
- font-weight: 600;
523
- font-size: 1rem;
524
- text-decoration: none;
525
- transition: all var(--transition-base);
526
- box-shadow: 0 4px 20px rgba(42, 104, 71, 0.3);
527
- }
528
- .ctaButton:hover {
529
- transform: translateY(-3px);
530
- box-shadow: 0 8px 30px rgba(42, 104, 71, 0.4);
531
- }
532
- .ctaButton:active {
533
- transform: translateY(-1px);
534
- }
535
-
536
- /* src/components/HomePage.module.css */
537
- .pageWrapper {
538
- padding-top: var(--header-height, 64px);
539
- }
540
- .headerSection {
541
- padding: var(--spacing-5xl) var(--spacing-lg) var(--spacing-4xl);
542
- text-align: center;
543
- border-bottom: 1px solid var(--color-border);
544
- }
545
- .headerContainer {
546
- max-width: 700px;
547
- margin: 0 auto;
548
- }
549
- .headerContent {
550
- display: flex;
551
- flex-direction: column;
552
- align-items: center;
553
- gap: var(--spacing-lg);
554
- }
555
- .headerTitle {
556
- font-size: var(--font-size-5xl);
557
- font-weight: var(--font-weight-semibold);
558
- line-height: 1.1;
559
- letter-spacing: -0.02em;
560
- color: var(--color-text-primary);
561
- }
562
- @media (min-width: 768px) {
563
- .headerTitle {
564
- font-size: var(--font-size-6xl);
565
- }
566
- }
567
- .headerAccent {
568
- color: var(--accent-primary);
569
- }
570
- .headerDescription {
571
- font-size: var(--font-size-lg);
572
- line-height: 1.6;
573
- color: var(--color-text-secondary);
574
- max-width: 550px;
575
- }
576
- .headerCtas {
577
- display: flex;
578
- flex-direction: column;
579
- gap: var(--spacing-sm);
580
- margin-top: var(--spacing-md);
581
- }
582
- @media (min-width: 480px) {
583
- .headerCtas {
584
- flex-direction: row;
585
- gap: var(--spacing-md);
586
- }
587
- }
588
- .primaryCta {
589
- display: inline-flex;
590
- align-items: center;
591
- justify-content: center;
592
- gap: 0.5rem;
593
- padding: 0.625rem 1.25rem;
594
- background: var(--accent-primary);
595
- color: white;
596
- border-radius: var(--border-radius-md);
597
- font-weight: var(--font-weight-medium);
598
- font-size: var(--font-size-sm);
599
- text-decoration: none;
600
- transition: background var(--transition-base);
601
- }
602
- .primaryCta:hover {
603
- background: var(--accent-hover);
604
- color: white;
605
- }
606
- .secondaryCta {
607
- display: inline-flex;
608
- align-items: center;
609
- justify-content: center;
610
- gap: 0.5rem;
611
- padding: 0.625rem 1.25rem;
612
- background: transparent;
613
- color: var(--color-text-primary);
614
- border: 1px solid var(--color-border);
615
- border-radius: var(--border-radius-md);
616
- font-weight: var(--font-weight-medium);
617
- font-size: var(--font-size-sm);
618
- text-decoration: none;
619
- transition: all var(--transition-base);
620
- }
621
- .secondaryCta:hover {
622
- border-color: var(--accent-primary);
623
- color: var(--accent-primary);
624
- }
625
- .statsSection {
626
- padding: var(--spacing-3xl) var(--spacing-lg);
627
- background: var(--color-background-secondary);
628
- }
629
- .statsContainer {
630
- max-width: var(--max-width-content);
631
- margin: 0 auto;
632
- display: grid;
633
- grid-template-columns: repeat(2, 1fr);
634
- gap: var(--spacing-lg);
635
- }
636
- @media (min-width: 768px) {
637
- .statsContainer {
638
- grid-template-columns: repeat(4, 1fr);
639
- }
640
- }
641
- .statItem {
642
- text-align: center;
643
- }
644
- .statValue {
645
- display: block;
646
- font-size: var(--font-size-3xl);
647
- font-weight: var(--font-weight-semibold);
648
- color: var(--accent-primary);
649
- line-height: 1;
650
- margin-bottom: var(--spacing-xs);
651
- }
652
- @media (min-width: 768px) {
653
- .statValue {
654
- font-size: var(--font-size-4xl);
655
- }
656
- }
657
- .statLabel {
658
- font-size: var(--font-size-xs);
659
- color: var(--color-text-muted);
660
- text-transform: uppercase;
661
- letter-spacing: 0.05em;
662
- font-weight: var(--font-weight-medium);
663
- }
664
- .sectionContainer {
665
- max-width: var(--max-width-content);
666
- margin: 0 auto;
667
- padding: 0 var(--spacing-lg);
668
- }
669
- .sectionHeader {
670
- margin-bottom: var(--spacing-2xl);
671
- }
672
- .sectionTitle {
673
- font-size: var(--font-size-2xl);
674
- font-weight: var(--font-weight-semibold);
675
- color: var(--color-text-primary);
676
- }
677
- .sectionCta {
678
- text-align: center;
679
- margin-top: var(--spacing-2xl);
680
- }
681
- .linkCta {
682
- display: inline-flex;
683
- align-items: center;
684
- gap: 0.25rem;
685
- color: var(--accent-primary);
686
- font-weight: var(--font-weight-medium);
687
- font-size: var(--font-size-sm);
688
- text-decoration: none;
689
- transition: gap var(--transition-base);
690
- }
691
- .linkCta:hover {
692
- gap: 0.5rem;
693
- color: var(--accent-hover);
694
- }
695
- .researchSection {
696
- padding: var(--spacing-4xl) var(--spacing-lg);
697
- }
698
- .researchGrid {
699
- display: grid;
700
- grid-template-columns: 1fr;
701
- gap: var(--spacing-md);
702
- }
703
- @media (min-width: 768px) {
704
- .researchGrid {
705
- grid-template-columns: repeat(3, 1fr);
706
- }
707
- }
708
- .researchCard {
709
- display: flex;
710
- align-items: flex-start;
711
- gap: var(--spacing-md);
712
- padding: var(--spacing-lg);
713
- background: var(--color-background-card);
714
- border: 1px solid var(--color-border);
715
- border-radius: var(--border-radius-lg);
716
- transition: border-color var(--transition-base);
717
- }
718
- .researchCard:hover {
719
- border-color: var(--accent-primary);
720
- }
721
- .researchIcon {
722
- flex-shrink: 0;
723
- width: 40px;
724
- height: 40px;
725
- display: flex;
726
- align-items: center;
727
- justify-content: center;
728
- background: var(--accent-muted, rgba(37, 99, 235, 0.1));
729
- color: var(--accent-primary);
730
- border-radius: var(--border-radius-md);
731
- }
732
- .researchContent {
733
- flex: 1;
734
- min-width: 0;
735
- }
736
- .researchTitle {
737
- font-size: var(--font-size-base);
738
- font-weight: var(--font-weight-semibold);
739
- color: var(--color-text-primary);
740
- margin-bottom: var(--spacing-xs);
741
- }
742
- .researchDescription {
743
- font-size: var(--font-size-sm);
744
- color: var(--color-text-secondary);
745
- line-height: 1.5;
746
- }
747
- .publicationsSection {
748
- padding: var(--spacing-4xl) var(--spacing-lg);
749
- background: var(--color-background-secondary);
750
- }
751
- .publicationsList {
752
- display: flex;
753
- flex-direction: column;
754
- gap: var(--spacing-sm);
755
- }
756
- .publicationItem {
757
- display: flex;
758
- align-items: flex-start;
759
- justify-content: space-between;
760
- gap: var(--spacing-lg);
761
- padding: var(--spacing-lg);
762
- background: var(--color-background-card);
763
- border: 1px solid var(--color-border);
764
- border-radius: var(--border-radius-md);
765
- text-decoration: none;
766
- transition: border-color var(--transition-base);
767
- }
768
- .publicationItem:hover {
769
- border-color: var(--accent-primary);
770
- }
771
- .publicationContent {
772
- flex: 1;
773
- min-width: 0;
774
- }
775
- .publicationDate {
776
- display: inline-block;
777
- font-size: var(--font-size-xs);
778
- font-weight: var(--font-weight-medium);
779
- color: var(--accent-primary);
780
- margin-bottom: var(--spacing-xs);
781
- }
782
- .publicationTitle {
783
- font-size: var(--font-size-base);
784
- font-weight: var(--font-weight-semibold);
785
- color: var(--color-text-primary);
786
- margin-bottom: var(--spacing-xs);
787
- line-height: 1.4;
788
- }
789
- .publicationItem:hover .publicationTitle {
790
- color: var(--accent-primary);
791
- }
792
- .publicationAuthors {
793
- font-size: var(--font-size-sm);
794
- color: var(--color-text-secondary);
795
- margin-bottom: var(--spacing-xs);
796
- }
797
- .publicationJournal {
798
- font-size: var(--font-size-xs);
799
- color: var(--color-text-muted);
800
- font-style: italic;
801
- }
802
- .publicationLink {
803
- flex-shrink: 0;
804
- color: var(--color-text-muted);
805
- transition: color var(--transition-base);
806
- }
807
- .publicationItem:hover .publicationLink {
808
- color: var(--accent-primary);
809
- }
810
- .newsSection {
811
- padding: var(--spacing-4xl) var(--spacing-lg);
812
- }
813
- .newsGrid {
814
- display: grid;
815
- grid-template-columns: 1fr;
816
- gap: var(--spacing-md);
817
- }
818
- @media (min-width: 768px) {
819
- .newsGrid {
820
- grid-template-columns: repeat(3, 1fr);
821
- }
822
- }
823
- .newsCard {
824
- display: flex;
825
- gap: var(--spacing-md);
826
- padding: var(--spacing-md);
827
- background: var(--color-background-card);
828
- border: 1px solid var(--color-border);
829
- border-radius: var(--border-radius-md);
830
- text-decoration: none;
831
- transition: border-color var(--transition-base);
832
- }
833
- .newsCard:hover {
834
- border-color: var(--accent-primary);
835
- }
836
- .newsImageWrapper {
837
- flex-shrink: 0;
838
- width: 80px;
839
- height: 80px;
840
- border-radius: var(--border-radius-sm);
841
- overflow: hidden;
842
- }
843
- .newsImage {
844
- width: 100%;
845
- height: 100%;
846
- object-fit: cover;
847
- transition: transform var(--transition-base);
848
- }
849
- .newsCard:hover .newsImage {
850
- transform: scale(1.05);
851
- }
852
- .newsContent {
853
- flex: 1;
854
- min-width: 0;
855
- display: flex;
856
- flex-direction: column;
857
- }
858
- .newsDate {
859
- font-size: var(--font-size-xs);
860
- color: var(--color-text-muted);
861
- margin-bottom: var(--spacing-xs);
862
- }
863
- .newsTitle {
864
- font-size: var(--font-size-sm);
865
- font-weight: var(--font-weight-semibold);
866
- color: var(--color-text-primary);
867
- line-height: 1.4;
868
- margin-bottom: var(--spacing-xs);
869
- display: -webkit-box;
870
- -webkit-line-clamp: 2;
871
- -webkit-box-orient: vertical;
872
- overflow: hidden;
873
- }
874
- .newsCard:hover .newsTitle {
875
- color: var(--accent-primary);
876
- }
877
- .newsSummary {
878
- font-size: var(--font-size-xs);
879
- color: var(--color-text-secondary);
880
- line-height: 1.4;
881
- display: -webkit-box;
882
- -webkit-line-clamp: 2;
883
- -webkit-box-orient: vertical;
884
- overflow: hidden;
885
- }
886
- .ctaSection {
887
- padding: var(--spacing-4xl) var(--spacing-lg);
888
- background: var(--color-background-secondary);
889
- }
890
- .ctaContainer {
891
- max-width: 500px;
892
- margin: 0 auto;
893
- text-align: center;
894
- }
895
- .ctaTitle {
896
- font-size: var(--font-size-2xl);
897
- font-weight: var(--font-weight-semibold);
898
- color: var(--color-text-primary);
899
- margin-bottom: var(--spacing-sm);
900
- }
901
- .ctaDescription {
902
- font-size: var(--font-size-base);
903
- color: var(--color-text-secondary);
904
- margin-bottom: var(--spacing-xl);
905
- }
906
- .ctaButtons {
907
- display: flex;
908
- flex-direction: column;
909
- gap: var(--spacing-sm);
910
- justify-content: center;
911
- }
912
- @media (min-width: 480px) {
913
- .ctaButtons {
914
- flex-direction: row;
915
- gap: var(--spacing-md);
916
- }
917
- }
918
-
919
- /* src/components/PicturesPage.module.css */
920
- .pageWrapper {
921
- padding-top: var(--header-height, 64px);
922
- min-height: 100vh;
923
- }
924
- .pageContainer {
925
- max-width: var(--max-width-content);
926
- margin: 0 auto;
927
- padding: 0 var(--spacing-lg);
928
- }
929
- .pageHeader {
930
- text-align: center;
931
- padding: var(--spacing-4xl) 0 var(--spacing-3xl);
932
- border-bottom: 1px solid var(--color-border);
933
- margin-bottom: var(--spacing-3xl);
934
- }
935
- .title {
936
- font-size: var(--font-size-4xl);
937
- font-weight: var(--font-weight-semibold);
938
- color: var(--color-text-primary);
939
- margin: 0 0 var(--spacing-sm) 0;
940
- }
941
- .subtitle {
942
- font-size: var(--font-size-lg);
943
- color: var(--color-text-secondary);
944
- max-width: 500px;
945
- margin: 0 auto;
946
- }
947
- .main {
948
- padding-bottom: var(--spacing-4xl);
949
- }
950
- .categoriesList {
951
- display: flex;
952
- flex-direction: column;
953
- gap: var(--spacing-3xl);
954
- }
955
- .categorySection {
956
- width: 100%;
957
- }
958
- .categoryHeader {
959
- font-size: var(--font-size-sm);
960
- font-weight: var(--font-weight-semibold);
961
- color: var(--accent-primary);
962
- margin-bottom: var(--spacing-lg);
963
- padding-bottom: var(--spacing-sm);
964
- border-bottom: 1px solid var(--color-border);
965
- }
966
- .photosGrid {
967
- display: grid;
968
- grid-template-columns: repeat(2, 1fr);
969
- gap: var(--spacing-sm);
970
- }
971
- @media (min-width: 640px) {
972
- .photosGrid {
973
- grid-template-columns: repeat(3, 1fr);
974
- }
975
- }
976
- @media (min-width: 1024px) {
977
- .photosGrid {
978
- grid-template-columns: repeat(4, 1fr);
979
- }
980
- }
981
- .photoCard {
982
- position: relative;
983
- overflow: hidden;
984
- cursor: pointer;
985
- aspect-ratio: 1;
986
- }
987
- .photoImageWrapper {
988
- width: 100%;
989
- height: 100%;
990
- overflow: hidden;
991
- }
992
- .photoImage {
993
- width: 100%;
994
- height: 100%;
995
- object-fit: cover;
996
- display: block;
997
- transition: transform var(--transition-base);
998
- }
999
- .photoCard:hover .photoImage {
1000
- transform: scale(1.05);
1001
- }
1002
- .photoCaption {
1003
- position: absolute;
1004
- bottom: 0;
1005
- left: 0;
1006
- right: 0;
1007
- padding: var(--spacing-md);
1008
- font-size: var(--font-size-xs);
1009
- line-height: 1.4;
1010
- text-align: center;
1011
- color: white;
1012
- background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
1013
- opacity: 0;
1014
- transform: translateY(100%);
1015
- transition: all var(--transition-base);
1016
- }
1017
- .photoCard:hover .photoCaption {
1018
- opacity: 1;
1019
- transform: translateY(0);
1020
- }
1021
- .lightboxOverlay {
1022
- position: fixed;
1023
- top: 0;
1024
- left: 0;
1025
- right: 0;
1026
- bottom: 0;
1027
- background-color: rgba(0, 0, 0, 0.9);
1028
- display: flex;
1029
- align-items: center;
1030
- justify-content: center;
1031
- z-index: 9999;
1032
- padding: var(--spacing-2xl);
1033
- }
1034
- .lightboxContent {
1035
- position: relative;
1036
- max-width: 90vw;
1037
- max-height: 90vh;
1038
- }
1039
- .lightboxImage {
1040
- max-width: 100%;
1041
- max-height: 90vh;
1042
- border-radius: var(--border-radius-md);
1043
- }
1044
- .lightboxClose {
1045
- position: absolute;
1046
- top: -40px;
1047
- right: 0;
1048
- background: var(--accent-primary);
1049
- border: none;
1050
- width: 36px;
1051
- height: 36px;
1052
- border-radius: var(--border-radius-full);
1053
- color: white;
1054
- font-size: 1.25rem;
1055
- cursor: pointer;
1056
- transition: background var(--transition-base);
1057
- }
1058
- .lightboxClose:hover {
1059
- background: var(--accent-hover);
1060
- }