@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.
package/dist/index.css ADDED
@@ -0,0 +1,1587 @@
1
+ /* src/components/PicturesPage.module.css */
2
+ .pageWrapper {
3
+ padding-top: var(--header-height, 80px);
4
+ min-height: 100vh;
5
+ }
6
+ .pageContainer {
7
+ max-width: 1400px;
8
+ margin: 0 auto;
9
+ padding: 0 var(--space-xl, 3rem);
10
+ }
11
+ .pageHeader {
12
+ text-align: center;
13
+ padding: var(--space-3xl, 6rem) 0;
14
+ margin-bottom: var(--space-2xl, 4rem);
15
+ }
16
+ .title {
17
+ font-size: clamp(2rem, 4vw, 3rem);
18
+ font-weight: 500;
19
+ line-height: 1.2;
20
+ letter-spacing: -0.01em;
21
+ margin: 0 0 var(--space-md, 1.5rem) 0;
22
+ }
23
+ .subtitle {
24
+ font-size: 1.125rem;
25
+ line-height: 1.7;
26
+ max-width: 800px;
27
+ margin: 0 auto;
28
+ }
29
+ :global(body:not(.dark-mode)) .subtitle,
30
+ :global(.light-mode) .subtitle {
31
+ color: var(--light-text-muted, #7F878B);
32
+ }
33
+ :global(.dark-mode) .subtitle,
34
+ :global(.dark) .subtitle {
35
+ color: var(--dark-text-muted, #5C6366);
36
+ }
37
+ .main {
38
+ padding-bottom: var(--space-3xl, 6rem);
39
+ }
40
+ .categoriesList {
41
+ max-width: 1400px;
42
+ margin: 0 auto;
43
+ display: flex;
44
+ flex-direction: column;
45
+ gap: var(--space-3xl, 6rem);
46
+ }
47
+ .categorySection {
48
+ width: 100%;
49
+ }
50
+ .categoryHeader {
51
+ font-size: 0.875rem;
52
+ font-weight: 600;
53
+ letter-spacing: 0.12em;
54
+ text-transform: uppercase;
55
+ margin-bottom: var(--space-lg, 2rem);
56
+ padding-left: var(--space-md, 1.5rem);
57
+ position: relative;
58
+ }
59
+ :global(body:not(.dark-mode)) .categoryHeader,
60
+ :global(.light-mode) .categoryHeader {
61
+ color: var(--accent-secondary, #3A8F62);
62
+ }
63
+ :global(.dark-mode) .categoryHeader,
64
+ :global(.dark) .categoryHeader {
65
+ color: var(--dark-text-secondary, #8BDAA3);
66
+ }
67
+ .categoryHeader::before {
68
+ content: "";
69
+ position: absolute;
70
+ left: 0;
71
+ top: 0;
72
+ width: 4px;
73
+ height: 100%;
74
+ background:
75
+ linear-gradient(
76
+ 180deg,
77
+ var(--accent-tertiary, #5CB87A),
78
+ var(--accent-gold, #D4A574));
79
+ border-radius: 2px;
80
+ }
81
+ .photosGrid {
82
+ display: grid;
83
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
84
+ gap: var(--space-md, 1.5rem);
85
+ }
86
+ .photoCard {
87
+ border-radius: var(--radius-lg, 16px);
88
+ overflow: hidden;
89
+ cursor: pointer;
90
+ }
91
+ .photoImageWrapper {
92
+ width: 100%;
93
+ aspect-ratio: 4 / 3;
94
+ overflow: hidden;
95
+ }
96
+ .photoImage {
97
+ width: 100%;
98
+ height: 100%;
99
+ object-fit: cover;
100
+ display: block;
101
+ }
102
+ .photoCaption {
103
+ padding: var(--space-md, 1.5rem);
104
+ font-size: 0.9375rem;
105
+ line-height: 1.6;
106
+ text-align: center;
107
+ backdrop-filter: blur(20px) saturate(180%);
108
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
109
+ }
110
+ :global(body:not(.dark-mode)) .photoCaption,
111
+ :global(.light-mode) .photoCaption {
112
+ background: rgba(255, 255, 255, 0.9);
113
+ color: var(--light-text-muted, #7F878B);
114
+ }
115
+ :global(.dark-mode) .photoCaption,
116
+ :global(.dark) .photoCaption {
117
+ background: color-mix(in srgb, var(--dark-bg-tertiary) 90%, transparent);
118
+ color: var(--dark-text-muted, #5C6366);
119
+ }
120
+ .lightboxOverlay {
121
+ position: fixed;
122
+ top: 0;
123
+ left: 0;
124
+ right: 0;
125
+ bottom: 0;
126
+ background-color: color-mix(in srgb, var(--dark-bg-primary, #0A1810) 95%, transparent);
127
+ display: flex;
128
+ align-items: center;
129
+ justify-content: center;
130
+ z-index: 9999;
131
+ padding: var(--space-xl, 3rem);
132
+ backdrop-filter: blur(10px);
133
+ }
134
+ .lightboxContent {
135
+ position: relative;
136
+ max-width: 90vw;
137
+ max-height: 90vh;
138
+ }
139
+ .lightboxImage {
140
+ max-width: 100%;
141
+ max-height: 90vh;
142
+ border-radius: var(--radius-xl, 20px);
143
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
144
+ }
145
+ .lightboxClose {
146
+ position: absolute;
147
+ top: -50px;
148
+ right: -50px;
149
+ background:
150
+ linear-gradient(
151
+ 135deg,
152
+ var(--accent-primary, #2A6847),
153
+ var(--accent-secondary, #3A8F62));
154
+ border: none;
155
+ width: 50px;
156
+ height: 50px;
157
+ border-radius: 50%;
158
+ color: white;
159
+ font-size: 1.5rem;
160
+ cursor: pointer;
161
+ transition: all var(--transition-base);
162
+ box-shadow: 0 4px 16px rgba(42, 104, 71, 0.3);
163
+ }
164
+ .lightboxClose:hover {
165
+ transform: scale(1.1);
166
+ box-shadow: 0 6px 24px rgba(42, 104, 71, 0.4);
167
+ }
168
+ @media (max-width: 768px) {
169
+ .lightboxClose {
170
+ top: -60px;
171
+ right: 0;
172
+ }
173
+ }
174
+
175
+ /* src/components/HomePage.module.css */
176
+ .pageWrapper {
177
+ padding-top: var(--header-height, 80px);
178
+ }
179
+ .heroSection {
180
+ min-height: calc(100vh - var(--header-height, 80px));
181
+ display: flex;
182
+ align-items: center;
183
+ position: relative;
184
+ overflow: hidden;
185
+ padding: var(--space-3xl, 6rem) var(--space-xl, 3rem);
186
+ }
187
+ .heroSection::before {
188
+ content: "";
189
+ position: absolute;
190
+ inset: 0;
191
+ z-index: 0;
192
+ }
193
+ :global(body:not(.dark-mode)) .heroSection::before,
194
+ :global(.light-mode) .heroSection::before {
195
+ background:
196
+ linear-gradient(
197
+ 135deg,
198
+ rgba(250, 251, 251, 0.9) 0%,
199
+ var(--light-bg-tint) 50%,
200
+ rgba(250, 251, 251, 0.9) 100%);
201
+ }
202
+ :global(.dark-mode) .heroSection::before,
203
+ :global(.dark) .heroSection::before {
204
+ background:
205
+ linear-gradient(
206
+ 135deg,
207
+ var(--dark-bg-primary) 0%,
208
+ var(--dark-bg-secondary) 50%,
209
+ var(--dark-bg-primary) 100%);
210
+ }
211
+ .heroContainer {
212
+ max-width: 1400px;
213
+ margin: 0 auto;
214
+ display: grid;
215
+ grid-template-columns: 1fr;
216
+ gap: var(--space-3xl, 6rem);
217
+ align-items: center;
218
+ position: relative;
219
+ z-index: 1;
220
+ width: 100%;
221
+ }
222
+ @media (min-width: 1024px) {
223
+ .heroContainer {
224
+ grid-template-columns: 1fr 1fr;
225
+ }
226
+ }
227
+ .heroContent {
228
+ text-align: center;
229
+ }
230
+ @media (min-width: 1024px) {
231
+ .heroContent {
232
+ text-align: left;
233
+ }
234
+ }
235
+ .heroTagline {
236
+ display: inline-block;
237
+ font-size: 0.75rem;
238
+ font-weight: 600;
239
+ letter-spacing: 0.15em;
240
+ text-transform: uppercase;
241
+ margin-bottom: var(--space-sm, 1rem);
242
+ }
243
+ :global(body:not(.dark-mode)) .heroTagline,
244
+ :global(.light-mode) .heroTagline {
245
+ color: var(--light-text-muted, #7F878B);
246
+ }
247
+ :global(.dark-mode) .heroTagline,
248
+ :global(.dark) .heroTagline {
249
+ color: var(--dark-text-muted, #5C6366);
250
+ }
251
+ .heroHeading {
252
+ font-size: clamp(3rem, 6vw, 5.5rem);
253
+ font-weight: 300;
254
+ line-height: 1.1;
255
+ letter-spacing: -0.02em;
256
+ margin-bottom: var(--space-md, 1.5rem);
257
+ }
258
+ :global(body:not(.dark-mode)) .heroHeading,
259
+ :global(.light-mode) .heroHeading {
260
+ color: var(--light-text-primary, #0A1810);
261
+ }
262
+ :global(.dark-mode) .heroHeading,
263
+ :global(.dark) .heroHeading {
264
+ color: var(--dark-text-primary, #E8F9ED);
265
+ }
266
+ .heroHeadingAccent {
267
+ color: var(--accent-tertiary, #5CB87A);
268
+ }
269
+ .heroHeadingAccent::after {
270
+ display: none;
271
+ }
272
+ .heroDescription {
273
+ font-size: 1.25rem;
274
+ line-height: 1.6;
275
+ margin-bottom: var(--space-xl, 3rem);
276
+ max-width: 90%;
277
+ }
278
+ :global(body:not(.dark-mode)) .heroDescription,
279
+ :global(.light-mode) .heroDescription {
280
+ color: var(--light-text-muted, #7F878B);
281
+ }
282
+ :global(.dark-mode) .heroDescription,
283
+ :global(.dark) .heroDescription {
284
+ color: var(--dark-text-muted, #5C6366);
285
+ }
286
+ @media (min-width: 1024px) {
287
+ .heroDescription {
288
+ margin-left: 0;
289
+ margin-right: 0;
290
+ }
291
+ }
292
+ @media (max-width: 1023px) {
293
+ .heroDescription {
294
+ margin-left: auto;
295
+ margin-right: auto;
296
+ }
297
+ }
298
+ .heroCtas {
299
+ display: flex;
300
+ flex-direction: column;
301
+ gap: var(--space-sm, 1rem);
302
+ }
303
+ @media (min-width: 480px) {
304
+ .heroCtas {
305
+ flex-direction: row;
306
+ justify-content: center;
307
+ }
308
+ }
309
+ @media (min-width: 1024px) {
310
+ .heroCtas {
311
+ justify-content: flex-start;
312
+ }
313
+ }
314
+ .heroPrimaryCta {
315
+ display: inline-flex;
316
+ align-items: center;
317
+ justify-content: center;
318
+ gap: 0.5rem;
319
+ padding: 0.75rem 1.75rem;
320
+ background:
321
+ linear-gradient(
322
+ 135deg,
323
+ var(--accent-primary, #2A6847),
324
+ var(--accent-secondary, #3A8F62));
325
+ color: white;
326
+ border-radius: var(--radius-md, 12px);
327
+ font-weight: 500;
328
+ font-size: 0.9375rem;
329
+ text-decoration: none;
330
+ transition: all var(--transition-base);
331
+ box-shadow: 0 4px 16px rgba(42, 104, 71, 0.3);
332
+ }
333
+ .heroPrimaryCta:hover {
334
+ transform: translateY(-2px);
335
+ box-shadow: 0 6px 24px rgba(42, 104, 71, 0.4);
336
+ }
337
+ .heroSecondaryCta {
338
+ display: inline-flex;
339
+ align-items: center;
340
+ justify-content: center;
341
+ gap: 0.5rem;
342
+ padding: 0.75rem 1.75rem;
343
+ border: 1px solid var(--accent-tertiary, #5CB87A);
344
+ border-radius: var(--radius-md, 12px);
345
+ font-weight: 500;
346
+ font-size: 0.9375rem;
347
+ text-decoration: none;
348
+ transition: all var(--transition-base);
349
+ backdrop-filter: blur(8px);
350
+ }
351
+ :global(body:not(.dark-mode)) .heroSecondaryCta,
352
+ :global(.light-mode) .heroSecondaryCta {
353
+ background: rgba(42, 104, 71, 0.08);
354
+ color: var(--accent-primary, #2A6847);
355
+ }
356
+ :global(.dark-mode) .heroSecondaryCta,
357
+ :global(.dark) .heroSecondaryCta {
358
+ background: rgba(92, 184, 122, 0.1);
359
+ color: var(--accent-tertiary, #5CB87A);
360
+ }
361
+ .heroSecondaryCta:hover {
362
+ transform: translateY(-1px);
363
+ }
364
+ .heroImageWrapper {
365
+ position: relative;
366
+ border-radius: var(--radius-2xl, 24px);
367
+ overflow: hidden;
368
+ box-shadow: 0 20px 60px rgba(10, 24, 16, 0.3);
369
+ }
370
+ .heroImage {
371
+ width: 100%;
372
+ height: auto;
373
+ display: block;
374
+ transition: transform var(--transition-slow);
375
+ }
376
+ .heroImageWrapper:hover .heroImage {
377
+ transform: scale(1.02);
378
+ }
379
+ .heroImageOverlay {
380
+ display: none;
381
+ }
382
+ .statsSection {
383
+ background: var(--color-background-card);
384
+ border-top: 1px solid var(--color-border-light);
385
+ border-bottom: 1px solid var(--color-border-light);
386
+ padding: var(--spacing-3xl) var(--spacing-lg);
387
+ }
388
+ .statsContainer {
389
+ max-width: var(--max-width-content);
390
+ margin: 0 auto;
391
+ display: grid;
392
+ grid-template-columns: repeat(2, 1fr);
393
+ gap: var(--spacing-2xl);
394
+ }
395
+ @media (min-width: 768px) {
396
+ .statsContainer {
397
+ grid-template-columns: repeat(4, 1fr);
398
+ gap: var(--spacing-3xl);
399
+ }
400
+ }
401
+ .statItem {
402
+ text-align: center;
403
+ padding: var(--spacing-lg);
404
+ }
405
+ .statValue {
406
+ display: block;
407
+ font-family: var(--font-heading);
408
+ font-size: var(--font-size-4xl);
409
+ font-weight: var(--font-weight-bold);
410
+ color: var(--color-text-accent);
411
+ line-height: 1;
412
+ margin-bottom: var(--spacing-sm);
413
+ }
414
+ @media (min-width: 768px) {
415
+ .statValue {
416
+ font-size: var(--font-size-5xl);
417
+ }
418
+ }
419
+ .statLabel {
420
+ font-size: var(--font-size-sm);
421
+ color: var(--color-text-tertiary);
422
+ text-transform: uppercase;
423
+ letter-spacing: 0.5px;
424
+ font-weight: var(--font-weight-medium);
425
+ }
426
+ .sectionContainer {
427
+ max-width: var(--max-width-content);
428
+ margin: 0 auto;
429
+ padding: 0 var(--spacing-lg);
430
+ }
431
+ .sectionHeader {
432
+ text-align: center;
433
+ margin-bottom: var(--spacing-4xl);
434
+ }
435
+ .sectionTitle {
436
+ font-family: var(--font-heading);
437
+ font-size: var(--font-size-4xl);
438
+ font-weight: var(--font-weight-bold);
439
+ color: var(--color-text-primary);
440
+ margin-bottom: var(--spacing-lg);
441
+ position: relative;
442
+ display: inline-block;
443
+ }
444
+ .sectionTitle::after {
445
+ content: "";
446
+ position: absolute;
447
+ bottom: -8px;
448
+ left: 50%;
449
+ transform: translateX(-50%);
450
+ width: 60px;
451
+ height: 3px;
452
+ background: var(--gradient-primary);
453
+ border-radius: var(--border-radius-full);
454
+ }
455
+ .sectionSubtitle {
456
+ font-size: var(--font-size-lg);
457
+ color: var(--color-text-secondary);
458
+ line-height: var(--line-height-relaxed);
459
+ max-width: 600px;
460
+ margin: var(--spacing-xl) auto 0;
461
+ }
462
+ .sectionCta {
463
+ text-align: center;
464
+ margin-top: var(--spacing-3xl);
465
+ }
466
+ .secondaryCta {
467
+ display: inline-flex;
468
+ align-items: center;
469
+ gap: var(--spacing-sm);
470
+ color: var(--color-text-accent);
471
+ font-weight: var(--font-weight-semibold);
472
+ font-size: var(--font-size-base);
473
+ text-decoration: none;
474
+ padding: var(--spacing-md) var(--spacing-xl);
475
+ border: 2px solid var(--color-border-accent);
476
+ border-radius: var(--border-radius-lg);
477
+ transition: all var(--transition-base);
478
+ }
479
+ .secondaryCta:hover {
480
+ background: var(--color-brand-primary);
481
+ color: var(--color-text-inverse);
482
+ transform: translateY(-2px);
483
+ box-shadow: var(--shadow-accent);
484
+ }
485
+ .researchSection {
486
+ padding: var(--space-3xl, 6rem) var(--space-xl, 3rem);
487
+ }
488
+ .researchGrid {
489
+ display: grid;
490
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
491
+ gap: var(--space-lg, 2rem);
492
+ }
493
+ .researchCard {
494
+ backdrop-filter: blur(20px) saturate(180%);
495
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
496
+ border-radius: var(--radius-xl, 20px);
497
+ padding: var(--space-xl, 3rem);
498
+ transition: all var(--transition-slow);
499
+ position: relative;
500
+ overflow: hidden;
501
+ cursor: pointer;
502
+ }
503
+ :global(body:not(.dark-mode)) .researchCard,
504
+ :global(.light-mode) .researchCard {
505
+ background: rgba(255, 255, 255, 0.7);
506
+ border: 1px solid rgba(21, 48, 33, 0.08);
507
+ box-shadow: 0 8px 32px rgba(10, 24, 16, 0.08);
508
+ }
509
+ :global(.dark-mode) .researchCard,
510
+ :global(.dark) .researchCard {
511
+ background: var(--dark-bg-tertiary);
512
+ border: 1px solid rgba(var(--accent-primary-rgb, 139, 218, 163), 0.12);
513
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
514
+ }
515
+ .researchCard::before {
516
+ display: none;
517
+ }
518
+ .researchCard::after {
519
+ display: none;
520
+ }
521
+ .researchCard:hover {
522
+ transform: translateY(-8px);
523
+ }
524
+ :global(body:not(.dark-mode)) .researchCard:hover,
525
+ :global(.light-mode) .researchCard:hover {
526
+ box-shadow: 0 20px 60px rgba(10, 24, 16, 0.15);
527
+ border-color: rgba(42, 104, 71, 0.25);
528
+ }
529
+ :global(.dark-mode) .researchCard:hover,
530
+ :global(.dark) .researchCard:hover {
531
+ box-shadow: 0 20px 60px rgba(10, 24, 16, 0.4);
532
+ border-color: rgba(139, 218, 163, 0.25);
533
+ }
534
+ .researchIconWrapper {
535
+ width: 56px;
536
+ height: 56px;
537
+ border-radius: var(--radius-lg, 16px);
538
+ display: flex;
539
+ align-items: center;
540
+ justify-content: center;
541
+ margin-bottom: var(--space-md, 1.5rem);
542
+ transition: all var(--transition-base);
543
+ }
544
+ :global(body:not(.dark-mode)) .researchIconWrapper,
545
+ :global(.light-mode) .researchIconWrapper {
546
+ background: rgba(42, 104, 71, 0.1);
547
+ color: var(--accent-primary, #2A6847);
548
+ }
549
+ :global(.dark-mode) .researchIconWrapper,
550
+ :global(.dark) .researchIconWrapper {
551
+ background: rgba(92, 184, 122, 0.15);
552
+ color: var(--accent-tertiary, #5CB87A);
553
+ }
554
+ .researchCard:hover .researchIconWrapper {
555
+ background:
556
+ linear-gradient(
557
+ 135deg,
558
+ var(--accent-primary, #2A6847),
559
+ var(--accent-secondary, #3A8F62));
560
+ color: white;
561
+ transform: scale(1.05);
562
+ }
563
+ .researchCardTitle {
564
+ font-size: 1.25rem;
565
+ font-weight: 600;
566
+ margin-bottom: var(--space-sm, 1rem);
567
+ transition: color var(--transition-base);
568
+ }
569
+ .researchCard:hover .researchCardTitle {
570
+ color: var(--accent-tertiary, #5CB87A);
571
+ }
572
+ .researchCardDescription {
573
+ font-size: 0.9375rem;
574
+ line-height: 1.6;
575
+ }
576
+ :global(body:not(.dark-mode)) .researchCardDescription,
577
+ :global(.light-mode) .researchCardDescription {
578
+ color: var(--light-text-muted, #7F878B);
579
+ }
580
+ :global(.dark-mode) .researchCardDescription,
581
+ :global(.dark) .researchCardDescription {
582
+ color: var(--dark-text-muted, #5C6366);
583
+ }
584
+ .publicationsSection {
585
+ padding: var(--spacing-5xl) var(--spacing-lg);
586
+ background: var(--color-background-secondary);
587
+ }
588
+ .publicationsList {
589
+ display: flex;
590
+ flex-direction: column;
591
+ gap: var(--spacing-md);
592
+ max-width: 900px;
593
+ margin: 0 auto;
594
+ }
595
+ .publicationItem {
596
+ display: flex;
597
+ align-items: center;
598
+ justify-content: space-between;
599
+ gap: var(--spacing-xl);
600
+ padding: var(--spacing-xl);
601
+ background: var(--color-background-card);
602
+ border: 1px solid var(--color-border-light);
603
+ border-radius: var(--border-radius-lg);
604
+ text-decoration: none;
605
+ transition: all var(--transition-slow);
606
+ border-left: 3px solid transparent;
607
+ position: relative;
608
+ overflow: hidden;
609
+ }
610
+ .publicationItem::after {
611
+ content: "";
612
+ position: absolute;
613
+ inset: 0;
614
+ background: var(--gradient-card-hover);
615
+ opacity: 0;
616
+ transition: opacity var(--transition-base);
617
+ pointer-events: none;
618
+ }
619
+ .publicationItem:hover {
620
+ border-left-color: var(--color-border-accent);
621
+ box-shadow: var(--shadow-lg);
622
+ transform: translateX(8px);
623
+ }
624
+ .publicationItem:hover::after {
625
+ opacity: 1;
626
+ }
627
+ .publicationContent {
628
+ flex: 1;
629
+ min-width: 0;
630
+ }
631
+ .publicationTitle {
632
+ font-family: var(--font-heading);
633
+ font-size: var(--font-size-lg);
634
+ font-weight: var(--font-weight-semibold);
635
+ color: var(--color-text-primary);
636
+ margin-bottom: var(--spacing-sm);
637
+ line-height: var(--line-height-snug);
638
+ transition: color var(--transition-fast);
639
+ }
640
+ .publicationItem:hover .publicationTitle {
641
+ color: var(--color-text-accent);
642
+ }
643
+ .publicationAuthors {
644
+ font-size: var(--font-size-sm);
645
+ color: var(--color-text-secondary);
646
+ margin-bottom: var(--spacing-xs);
647
+ }
648
+ .publicationMeta {
649
+ display: flex;
650
+ align-items: center;
651
+ gap: var(--spacing-lg);
652
+ font-size: var(--font-size-sm);
653
+ color: var(--color-text-tertiary);
654
+ }
655
+ .publicationJournal {
656
+ font-style: italic;
657
+ }
658
+ .publicationDate {
659
+ display: flex;
660
+ align-items: center;
661
+ gap: var(--spacing-xs);
662
+ }
663
+ .publicationArrow {
664
+ flex-shrink: 0;
665
+ color: var(--color-text-tertiary);
666
+ transition: all var(--transition-base);
667
+ }
668
+ .publicationItem:hover .publicationArrow {
669
+ color: var(--color-text-accent);
670
+ transform: translateX(4px);
671
+ }
672
+ .newsSection {
673
+ padding: var(--space-3xl, 6rem) var(--space-xl, 3rem);
674
+ }
675
+ .newsGrid {
676
+ display: grid;
677
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
678
+ gap: var(--space-lg, 2rem);
679
+ }
680
+ .newsCard {
681
+ backdrop-filter: blur(20px) saturate(180%);
682
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
683
+ border-radius: var(--radius-xl, 20px);
684
+ overflow: hidden;
685
+ text-decoration: none;
686
+ transition: all var(--transition-slow);
687
+ display: flex;
688
+ flex-direction: column;
689
+ position: relative;
690
+ }
691
+ :global(body:not(.dark-mode)) .newsCard,
692
+ :global(.light-mode) .newsCard {
693
+ background: rgba(255, 255, 255, 0.7);
694
+ border: 1px solid rgba(21, 48, 33, 0.08);
695
+ box-shadow: 0 8px 32px rgba(10, 24, 16, 0.08);
696
+ }
697
+ :global(.dark-mode) .newsCard,
698
+ :global(.dark) .newsCard {
699
+ background: var(--dark-bg-tertiary);
700
+ border: 1px solid rgba(var(--accent-primary-rgb, 139, 218, 163), 0.12);
701
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
702
+ }
703
+ .newsCard::after {
704
+ display: none;
705
+ }
706
+ .newsCard:hover {
707
+ transform: translateY(-8px);
708
+ }
709
+ :global(body:not(.dark-mode)) .newsCard:hover,
710
+ :global(.light-mode) .newsCard:hover {
711
+ box-shadow: 0 20px 60px rgba(10, 24, 16, 0.15);
712
+ border-color: rgba(42, 104, 71, 0.25);
713
+ }
714
+ :global(.dark-mode) .newsCard:hover,
715
+ :global(.dark) .newsCard:hover {
716
+ box-shadow: 0 20px 60px rgba(10, 24, 16, 0.4);
717
+ border-color: rgba(139, 218, 163, 0.25);
718
+ }
719
+ .newsImageWrapper {
720
+ position: relative;
721
+ aspect-ratio: 16 / 9;
722
+ overflow: hidden;
723
+ }
724
+ .newsImage {
725
+ width: 100%;
726
+ height: 100%;
727
+ object-fit: cover;
728
+ transition: transform var(--transition-slow);
729
+ }
730
+ .newsCard:hover .newsImage {
731
+ transform: scale(1.08);
732
+ }
733
+ .newsContent {
734
+ padding: var(--space-lg, 2rem);
735
+ display: flex;
736
+ flex-direction: column;
737
+ flex: 1;
738
+ }
739
+ .newsDate {
740
+ display: inline-flex;
741
+ align-items: center;
742
+ gap: 0.25rem;
743
+ font-size: 0.75rem;
744
+ font-weight: 600;
745
+ letter-spacing: 0.1em;
746
+ text-transform: uppercase;
747
+ margin-bottom: var(--space-xs, 0.5rem);
748
+ color: var(--accent-tertiary, #5CB87A);
749
+ }
750
+ .newsTitle {
751
+ font-size: 1.25rem;
752
+ font-weight: 600;
753
+ line-height: 1.4;
754
+ margin-bottom: var(--space-sm, 1rem);
755
+ transition: color var(--transition-base);
756
+ }
757
+ .newsCard:hover .newsTitle {
758
+ color: var(--accent-tertiary, #5CB87A);
759
+ }
760
+ .newsSummary {
761
+ font-size: 0.9375rem;
762
+ line-height: 1.6;
763
+ flex: 1;
764
+ margin-bottom: var(--space-md, 1.5rem);
765
+ display: -webkit-box;
766
+ -webkit-line-clamp: 3;
767
+ -webkit-box-orient: vertical;
768
+ overflow: hidden;
769
+ }
770
+ :global(body:not(.dark-mode)) .newsSummary,
771
+ :global(.light-mode) .newsSummary {
772
+ color: var(--light-text-muted, #7F878B);
773
+ }
774
+ :global(.dark-mode) .newsSummary,
775
+ :global(.dark) .newsSummary {
776
+ color: var(--dark-text-muted, #5C6366);
777
+ }
778
+ .newsReadMore {
779
+ display: inline-flex;
780
+ align-items: center;
781
+ gap: 0.5rem;
782
+ font-size: 0.9375rem;
783
+ font-weight: 500;
784
+ color: var(--accent-tertiary, #5CB87A);
785
+ margin-top: auto;
786
+ transition: gap var(--transition-base);
787
+ }
788
+ .newsCard:hover .newsReadMore {
789
+ gap: 0.75rem;
790
+ }
791
+ .ctaSection {
792
+ padding: var(--space-3xl, 6rem) var(--space-xl, 3rem);
793
+ }
794
+ .ctaContainer {
795
+ max-width: 700px;
796
+ margin: 0 auto;
797
+ text-align: center;
798
+ padding: var(--space-2xl, 4rem);
799
+ backdrop-filter: blur(20px) saturate(180%);
800
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
801
+ border-radius: var(--radius-2xl, 24px);
802
+ position: relative;
803
+ overflow: hidden;
804
+ }
805
+ :global(body:not(.dark-mode)) .ctaContainer,
806
+ :global(.light-mode) .ctaContainer {
807
+ background: rgba(255, 255, 255, 0.7);
808
+ border: 1px solid rgba(21, 48, 33, 0.08);
809
+ box-shadow: 0 8px 32px rgba(10, 24, 16, 0.08);
810
+ }
811
+ :global(.dark-mode) .ctaContainer,
812
+ :global(.dark) .ctaContainer {
813
+ background: var(--dark-bg-tertiary);
814
+ border: 1px solid rgba(var(--accent-primary-rgb, 139, 218, 163), 0.12);
815
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
816
+ }
817
+ .ctaContainer::before {
818
+ display: none;
819
+ }
820
+ .ctaTitle {
821
+ font-size: clamp(2rem, 4vw, 3rem);
822
+ font-weight: 500;
823
+ line-height: 1.2;
824
+ margin-bottom: var(--space-md, 1.5rem);
825
+ }
826
+ .ctaDescription {
827
+ font-size: 1.125rem;
828
+ line-height: 1.7;
829
+ margin-bottom: var(--space-xl, 3rem);
830
+ max-width: 500px;
831
+ margin-left: auto;
832
+ margin-right: auto;
833
+ }
834
+ :global(body:not(.dark-mode)) .ctaDescription,
835
+ :global(.light-mode) .ctaDescription {
836
+ color: var(--light-text-muted, #7F878B);
837
+ }
838
+ :global(.dark-mode) .ctaDescription,
839
+ :global(.dark) .ctaDescription {
840
+ color: var(--dark-text-muted, #5C6366);
841
+ }
842
+ .ctaButtons {
843
+ display: flex;
844
+ flex-direction: column;
845
+ gap: var(--space-sm, 1rem);
846
+ justify-content: center;
847
+ }
848
+ @media (min-width: 480px) {
849
+ .ctaButtons {
850
+ flex-direction: row;
851
+ }
852
+ }
853
+ .ctaPrimaryButton {
854
+ display: inline-flex;
855
+ align-items: center;
856
+ justify-content: center;
857
+ gap: 0.5rem;
858
+ padding: 0.75rem 1.75rem;
859
+ background:
860
+ linear-gradient(
861
+ 135deg,
862
+ var(--accent-primary, #2A6847),
863
+ var(--accent-secondary, #3A8F62));
864
+ color: white;
865
+ border-radius: var(--radius-md, 12px);
866
+ font-weight: 500;
867
+ font-size: 0.9375rem;
868
+ text-decoration: none;
869
+ transition: all var(--transition-base);
870
+ box-shadow: 0 4px 16px rgba(42, 104, 71, 0.3);
871
+ }
872
+ .ctaPrimaryButton:hover {
873
+ transform: translateY(-2px);
874
+ box-shadow: 0 6px 24px rgba(42, 104, 71, 0.4);
875
+ }
876
+ .ctaSecondaryButton {
877
+ display: inline-flex;
878
+ align-items: center;
879
+ justify-content: center;
880
+ gap: 0.5rem;
881
+ padding: 0.75rem 1.75rem;
882
+ border: 1px solid var(--accent-tertiary, #5CB87A);
883
+ border-radius: var(--radius-md, 12px);
884
+ font-weight: 500;
885
+ font-size: 0.9375rem;
886
+ text-decoration: none;
887
+ transition: all var(--transition-base);
888
+ backdrop-filter: blur(8px);
889
+ }
890
+ :global(body:not(.dark-mode)) .ctaSecondaryButton,
891
+ :global(.light-mode) .ctaSecondaryButton {
892
+ background: rgba(42, 104, 71, 0.08);
893
+ color: var(--accent-primary, #2A6847);
894
+ }
895
+ :global(.dark-mode) .ctaSecondaryButton,
896
+ :global(.dark) .ctaSecondaryButton {
897
+ background: rgba(92, 184, 122, 0.1);
898
+ color: var(--accent-tertiary, #5CB87A);
899
+ }
900
+ .ctaSecondaryButton:hover {
901
+ transform: translateY(-1px);
902
+ }
903
+
904
+ /* src/components/Layout.module.css */
905
+ .header {
906
+ position: fixed;
907
+ top: 0;
908
+ left: 0;
909
+ right: 0;
910
+ z-index: var(--z-sticky);
911
+ padding: var(--space-md, 1.5rem) var(--space-xl, 3rem);
912
+ backdrop-filter: blur(24px) saturate(200%);
913
+ -webkit-backdrop-filter: blur(24px) saturate(200%);
914
+ transition: all var(--transition-base);
915
+ }
916
+ :global(:not(.dark)) .header {
917
+ background: rgba(250, 251, 251, 0.9);
918
+ border-bottom: 1px solid rgba(21, 48, 33, 0.1);
919
+ }
920
+ :global(.dark) .header {
921
+ background: color-mix(in srgb, var(--dark-bg-primary) 80%, transparent);
922
+ border-bottom: 1px solid rgba(var(--accent-primary-rgb, 139, 218, 163), 0.1);
923
+ }
924
+ .headerScrolled {
925
+ box-shadow: var(--shadow-md);
926
+ }
927
+ :global(:not(.dark)) .headerScrolled {
928
+ background: rgba(250, 251, 251, 0.95);
929
+ border-bottom-color: rgba(21, 48, 33, 0.15);
930
+ }
931
+ :global(.dark) .headerScrolled {
932
+ background: color-mix(in srgb, var(--dark-bg-primary) 95%, transparent);
933
+ border-bottom-color: rgba(var(--accent-primary-rgb, 139, 218, 163), 0.15);
934
+ }
935
+ .navContainer {
936
+ max-width: 1400px;
937
+ margin: 0 auto;
938
+ display: flex;
939
+ justify-content: space-between;
940
+ align-items: center;
941
+ gap: var(--space-xl, 3rem);
942
+ }
943
+ .navLogo {
944
+ display: flex;
945
+ align-items: center;
946
+ gap: 0.5rem;
947
+ font-size: 1.25rem;
948
+ font-weight: 600;
949
+ color: var(--accent-tertiary, #5CB87A);
950
+ text-decoration: none;
951
+ transition: all var(--transition-base);
952
+ flex-shrink: 0;
953
+ }
954
+ .navLogo:hover {
955
+ opacity: 0.9;
956
+ }
957
+ .navLogo svg {
958
+ width: 24px;
959
+ height: 24px;
960
+ color: var(--accent-tertiary, #5CB87A);
961
+ transition: transform var(--transition-base);
962
+ }
963
+ .navLogo:hover svg {
964
+ transform: scale(1.05);
965
+ }
966
+ .navLogoAccent {
967
+ color: var(--accent-tertiary, #5CB87A);
968
+ }
969
+ .desktopNav {
970
+ display: none;
971
+ gap: var(--space-xl, 3rem);
972
+ list-style: none;
973
+ align-items: center;
974
+ }
975
+ @media (min-width: 1024px) {
976
+ .desktopNav {
977
+ display: flex;
978
+ }
979
+ }
980
+ .navLink {
981
+ position: relative;
982
+ text-decoration: none;
983
+ font-weight: 400;
984
+ font-size: 0.9375rem;
985
+ padding: var(--spacing-sm) var(--spacing-md);
986
+ transition: all var(--transition-base);
987
+ }
988
+ :global(:not(.dark)) .navLink {
989
+ color: var(--light-text-secondary, #153021);
990
+ }
991
+ :global(.dark) .navLink {
992
+ color: var(--dark-text-secondary, #8BDAA3);
993
+ }
994
+ .navLink::after {
995
+ content: "";
996
+ position: absolute;
997
+ bottom: -4px;
998
+ left: 0;
999
+ width: 0;
1000
+ height: 2px;
1001
+ background: var(--accent-tertiary, #5CB87A);
1002
+ transition: width var(--transition-base);
1003
+ }
1004
+ .navLink:hover {
1005
+ color: var(--accent-tertiary, #5CB87A);
1006
+ }
1007
+ .navLink:hover::after {
1008
+ width: 100%;
1009
+ }
1010
+ .navLinkActive {
1011
+ color: var(--accent-tertiary, #5CB87A);
1012
+ }
1013
+ .navLinkActive::after {
1014
+ width: 100%;
1015
+ }
1016
+ .navActions {
1017
+ display: none;
1018
+ }
1019
+ @media (min-width: 1024px) {
1020
+ .navActions {
1021
+ display: flex;
1022
+ align-items: center;
1023
+ gap: var(--spacing-md);
1024
+ }
1025
+ }
1026
+ .navCta {
1027
+ display: inline-flex;
1028
+ align-items: center;
1029
+ justify-content: center;
1030
+ padding: 0.75rem 1.75rem;
1031
+ background:
1032
+ linear-gradient(
1033
+ 135deg,
1034
+ var(--accent-primary, #2A6847),
1035
+ var(--accent-secondary, #3A8F62));
1036
+ color: white;
1037
+ border-radius: var(--radius-md, 12px);
1038
+ font-weight: 500;
1039
+ font-size: 0.9375rem;
1040
+ text-decoration: none;
1041
+ transition: all var(--transition-base);
1042
+ box-shadow: 0 4px 16px rgba(42, 104, 71, 0.3);
1043
+ }
1044
+ .navCta:hover {
1045
+ transform: translateY(-2px);
1046
+ box-shadow: 0 6px 24px rgba(42, 104, 71, 0.4);
1047
+ }
1048
+ .menuButton {
1049
+ display: flex;
1050
+ align-items: center;
1051
+ justify-content: center;
1052
+ width: 44px;
1053
+ height: 44px;
1054
+ background: transparent;
1055
+ border: none;
1056
+ cursor: pointer;
1057
+ padding: var(--spacing-sm);
1058
+ border-radius: var(--border-radius-md);
1059
+ transition: background var(--transition-fast);
1060
+ z-index: calc(var(--z-modal) + 1);
1061
+ }
1062
+ .menuButton:hover {
1063
+ background: var(--color-background-secondary);
1064
+ }
1065
+ @media (min-width: 1024px) {
1066
+ .menuButton {
1067
+ display: none;
1068
+ }
1069
+ }
1070
+ .menuButtonLines {
1071
+ display: flex;
1072
+ flex-direction: column;
1073
+ gap: 5px;
1074
+ width: 24px;
1075
+ }
1076
+ .menuLine {
1077
+ display: block;
1078
+ height: 2px;
1079
+ width: 100%;
1080
+ background: var(--color-text-primary);
1081
+ border-radius: var(--border-radius-full);
1082
+ transition: all var(--transition-base);
1083
+ transform-origin: center;
1084
+ }
1085
+ .menuLineOpen1 {
1086
+ transform: translateY(7px) rotate(45deg);
1087
+ }
1088
+ .menuLineOpen2 {
1089
+ opacity: 0;
1090
+ transform: scaleX(0);
1091
+ }
1092
+ .menuLineOpen3 {
1093
+ transform: translateY(-7px) rotate(-45deg);
1094
+ }
1095
+ .mobileMenu {
1096
+ position: fixed;
1097
+ inset: 0;
1098
+ z-index: var(--z-modal);
1099
+ pointer-events: none;
1100
+ visibility: hidden;
1101
+ }
1102
+ .mobileMenuOpen {
1103
+ pointer-events: auto;
1104
+ visibility: visible;
1105
+ }
1106
+ .mobileMenuOverlay {
1107
+ position: absolute;
1108
+ inset: 0;
1109
+ background: rgba(0, 0, 0, 0.5);
1110
+ backdrop-filter: blur(4px);
1111
+ opacity: 0;
1112
+ transition: opacity var(--transition-base);
1113
+ }
1114
+ .mobileMenuOpen .mobileMenuOverlay {
1115
+ opacity: 1;
1116
+ }
1117
+ .mobileMenuContent {
1118
+ position: absolute;
1119
+ top: 0;
1120
+ right: 0;
1121
+ width: min(320px, 85vw);
1122
+ height: 100%;
1123
+ box-shadow: var(--shadow-2xl);
1124
+ padding: calc(var(--header-height) + var(--spacing-2xl)) var(--spacing-xl) var(--spacing-xl);
1125
+ display: flex;
1126
+ flex-direction: column;
1127
+ gap: var(--spacing-sm);
1128
+ transform: translateX(100%);
1129
+ transition: transform var(--transition-slow);
1130
+ backdrop-filter: blur(20px) saturate(180%);
1131
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
1132
+ }
1133
+ :global(:not(.dark)) .mobileMenuContent {
1134
+ background: rgba(255, 255, 255, 0.95);
1135
+ border-left: 1px solid rgba(21, 48, 33, 0.1);
1136
+ }
1137
+ :global(.dark) .mobileMenuContent {
1138
+ background: color-mix(in srgb, var(--dark-bg-secondary) 95%, transparent);
1139
+ border-left: 1px solid rgba(var(--accent-primary-rgb, 139, 218, 163), 0.1);
1140
+ }
1141
+ .mobileMenuOpen .mobileMenuContent {
1142
+ transform: translateX(0);
1143
+ }
1144
+ .mobileNavLink {
1145
+ display: block;
1146
+ padding: var(--spacing-md) var(--spacing-lg);
1147
+ color: var(--color-text-primary);
1148
+ text-decoration: none;
1149
+ font-family: var(--font-heading);
1150
+ font-size: var(--font-size-lg);
1151
+ font-weight: var(--font-weight-semibold);
1152
+ border-radius: var(--border-radius-md);
1153
+ transition: all var(--transition-base);
1154
+ opacity: 0;
1155
+ transform: translateX(20px);
1156
+ }
1157
+ .mobileMenuOpen .mobileNavLink {
1158
+ opacity: 1;
1159
+ transform: translateX(0);
1160
+ animation: slideIn var(--transition-base) ease-out forwards;
1161
+ }
1162
+ @keyframes slideIn {
1163
+ from {
1164
+ opacity: 0;
1165
+ transform: translateX(20px);
1166
+ }
1167
+ to {
1168
+ opacity: 1;
1169
+ transform: translateX(0);
1170
+ }
1171
+ }
1172
+ .mobileNavLink:hover,
1173
+ .mobileNavLinkActive {
1174
+ background: var(--color-background-secondary);
1175
+ color: var(--color-text-accent);
1176
+ padding-left: var(--spacing-xl);
1177
+ }
1178
+ .mobileNavLinkActive {
1179
+ border-left: 3px solid var(--color-border-accent);
1180
+ }
1181
+ .mobileNavCta {
1182
+ display: flex;
1183
+ align-items: center;
1184
+ justify-content: center;
1185
+ margin-top: var(--spacing-lg);
1186
+ padding: var(--spacing-md) var(--spacing-xl);
1187
+ background: var(--gradient-primary);
1188
+ color: var(--color-text-inverse);
1189
+ border-radius: var(--border-radius-md);
1190
+ font-weight: var(--font-weight-semibold);
1191
+ text-decoration: none;
1192
+ transition: all var(--transition-base);
1193
+ opacity: 0;
1194
+ transform: translateX(20px);
1195
+ }
1196
+ .mobileMenuOpen .mobileNavCta {
1197
+ opacity: 1;
1198
+ transform: translateX(0);
1199
+ animation: slideIn var(--transition-base) ease-out forwards;
1200
+ }
1201
+ .mobileNavCta:hover {
1202
+ box-shadow: var(--shadow-accent);
1203
+ }
1204
+
1205
+ /* src/components/ThemeToggle.module.css */
1206
+ .toggle {
1207
+ position: relative;
1208
+ display: flex;
1209
+ align-items: center;
1210
+ justify-content: center;
1211
+ padding: 4px;
1212
+ background: transparent;
1213
+ border: none;
1214
+ cursor: pointer;
1215
+ border-radius: var(--radius-full, 9999px);
1216
+ transition: transform var(--transition-base, 0.3s ease);
1217
+ }
1218
+ .toggle:hover {
1219
+ transform: scale(1.05);
1220
+ }
1221
+ .toggle:focus-visible {
1222
+ outline: 2px solid var(--accent-tertiary);
1223
+ outline-offset: 2px;
1224
+ }
1225
+ .togglePlaceholder {
1226
+ width: 60px;
1227
+ height: 32px;
1228
+ }
1229
+ .track {
1230
+ position: relative;
1231
+ display: flex;
1232
+ align-items: center;
1233
+ justify-content: space-between;
1234
+ width: 60px;
1235
+ height: 32px;
1236
+ padding: 0 6px;
1237
+ border-radius: var(--radius-full, 9999px);
1238
+ transition: all var(--transition-base, 0.3s ease);
1239
+ }
1240
+ :global(body:not(.dark-mode)) .track,
1241
+ :global(.light-mode) .track {
1242
+ background: rgba(42, 104, 71, 0.12);
1243
+ border: 1px solid rgba(21, 48, 33, 0.15);
1244
+ }
1245
+ :global(.dark-mode) .track,
1246
+ :global(.dark) .track {
1247
+ background: rgba(139, 218, 163, 0.15);
1248
+ border: 1px solid rgba(139, 218, 163, 0.2);
1249
+ }
1250
+ .thumb {
1251
+ position: absolute;
1252
+ top: 3px;
1253
+ left: 3px;
1254
+ width: 24px;
1255
+ height: 24px;
1256
+ border-radius: 50%;
1257
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
1258
+ z-index: 2;
1259
+ }
1260
+ :global(body:not(.dark-mode)) .thumb,
1261
+ :global(.light-mode) .thumb {
1262
+ background:
1263
+ linear-gradient(
1264
+ 135deg,
1265
+ var(--accent-primary, #2A6847),
1266
+ var(--accent-secondary, #3A8F62));
1267
+ }
1268
+ :global(.dark-mode) .thumb,
1269
+ :global(.dark) .thumb {
1270
+ background:
1271
+ linear-gradient(
1272
+ 135deg,
1273
+ var(--accent-secondary, #3A8F62),
1274
+ var(--accent-tertiary, #5CB87A));
1275
+ }
1276
+ .icon {
1277
+ display: flex;
1278
+ align-items: center;
1279
+ justify-content: center;
1280
+ width: 20px;
1281
+ height: 20px;
1282
+ z-index: 1;
1283
+ transition: all var(--transition-base, 0.3s ease);
1284
+ opacity: 0.4;
1285
+ }
1286
+ .iconActive {
1287
+ opacity: 1;
1288
+ }
1289
+ :global(body:not(.dark-mode)) .sunIcon,
1290
+ :global(.light-mode) .sunIcon {
1291
+ color: var(--accent-primary, #2A6847);
1292
+ }
1293
+ :global(body:not(.dark-mode)) .moonIcon,
1294
+ :global(.light-mode) .moonIcon {
1295
+ color: var(--light-text-muted, #7F878B);
1296
+ }
1297
+ :global(.dark-mode) .sunIcon,
1298
+ :global(.dark) .sunIcon {
1299
+ color: var(--dark-text-muted, #5C6366);
1300
+ }
1301
+ :global(.dark-mode) .moonIcon,
1302
+ :global(.dark) .moonIcon {
1303
+ color: var(--accent-tertiary, #5CB87A);
1304
+ }
1305
+
1306
+ /* src/components/Footer.module.css */
1307
+ .footerWrapper {
1308
+ padding: var(--space-3xl, 6rem) var(--space-xl, 3rem) var(--space-xl, 3rem);
1309
+ margin-top: var(--space-3xl, 6rem);
1310
+ border-top: 1px solid;
1311
+ }
1312
+ :global(body:not(.dark-mode)) .footerWrapper,
1313
+ :global(.light-mode) .footerWrapper {
1314
+ background: var(--light-bg-secondary, #F2F4F5);
1315
+ border-top-color: rgba(21, 48, 33, 0.1);
1316
+ }
1317
+ :global(.dark-mode) .footerWrapper,
1318
+ :global(.dark) .footerWrapper {
1319
+ background: var(--dark-bg-secondary, #0F2419);
1320
+ border-top-color: rgba(139, 218, 163, 0.1);
1321
+ }
1322
+ .footerContainer {
1323
+ max-width: 1400px;
1324
+ margin: 0 auto;
1325
+ position: relative;
1326
+ z-index: 1;
1327
+ }
1328
+ .mainFooter {
1329
+ display: grid;
1330
+ grid-template-columns: 1fr;
1331
+ gap: var(--space-3xl, 6rem);
1332
+ margin-bottom: var(--space-3xl, 6rem);
1333
+ }
1334
+ @media (min-width: 768px) {
1335
+ .mainFooter {
1336
+ grid-template-columns: 1fr 1fr;
1337
+ }
1338
+ }
1339
+ @media (min-width: 1024px) {
1340
+ .mainFooter {
1341
+ grid-template-columns: 2fr 1fr 1fr 1fr;
1342
+ }
1343
+ }
1344
+ .footerAbout {
1345
+ max-width: 400px;
1346
+ }
1347
+ .footerLogo {
1348
+ font-size: 1.5rem;
1349
+ font-weight: 600;
1350
+ color: var(--accent-tertiary, #5CB87A);
1351
+ text-decoration: none;
1352
+ display: inline-block;
1353
+ margin-bottom: var(--space-md, 1.5rem);
1354
+ transition: opacity var(--transition-base);
1355
+ }
1356
+ .footerLogo:hover {
1357
+ opacity: 0.9;
1358
+ }
1359
+ .logoAccent {
1360
+ color: var(--accent-tertiary, #5CB87A);
1361
+ }
1362
+ .footerDescription {
1363
+ font-size: 0.9375rem;
1364
+ line-height: 1.7;
1365
+ max-width: 400px;
1366
+ }
1367
+ :global(body:not(.dark-mode)) .footerDescription,
1368
+ :global(.light-mode) .footerDescription {
1369
+ color: var(--light-text-muted, #7F878B);
1370
+ }
1371
+ :global(.dark-mode) .footerDescription,
1372
+ :global(.dark) .footerDescription {
1373
+ color: var(--dark-text-muted, #5C6366);
1374
+ }
1375
+ .socials {
1376
+ display: flex;
1377
+ gap: var(--space-md, 1.5rem);
1378
+ margin-top: var(--space-lg, 2rem);
1379
+ }
1380
+ .socialIcon {
1381
+ width: 36px;
1382
+ height: 36px;
1383
+ border-radius: 50%;
1384
+ display: flex;
1385
+ align-items: center;
1386
+ justify-content: center;
1387
+ transition: all var(--transition-base);
1388
+ }
1389
+ :global(body:not(.dark-mode)) .socialIcon,
1390
+ :global(.light-mode) .socialIcon {
1391
+ background: rgba(42, 104, 71, 0.1);
1392
+ color: var(--accent-primary, #2A6847);
1393
+ }
1394
+ :global(.dark-mode) .socialIcon,
1395
+ :global(.dark) .socialIcon {
1396
+ background: rgba(92, 184, 122, 0.1);
1397
+ color: var(--accent-tertiary, #5CB87A);
1398
+ }
1399
+ .socialIcon:hover {
1400
+ transform: translateY(-3px);
1401
+ background: var(--accent-tertiary, #5CB87A);
1402
+ color: white;
1403
+ }
1404
+ .footerLinksGrid {
1405
+ display: contents;
1406
+ }
1407
+ .footerColumn h4 {
1408
+ font-size: 0.875rem;
1409
+ font-weight: 600;
1410
+ letter-spacing: 0.05em;
1411
+ text-transform: uppercase;
1412
+ margin-bottom: var(--space-md, 1.5rem);
1413
+ }
1414
+ :global(body:not(.dark-mode)) .footerColumn h4,
1415
+ :global(.light-mode) .footerColumn h4 {
1416
+ color: var(--light-text-primary, #0A1810);
1417
+ }
1418
+ :global(.dark-mode) .footerColumn h4,
1419
+ :global(.dark) .footerColumn h4 {
1420
+ color: var(--dark-text-primary, #E8F9ED);
1421
+ }
1422
+ .footerColumn a {
1423
+ display: block;
1424
+ text-decoration: none;
1425
+ font-size: 0.9375rem;
1426
+ margin-bottom: var(--space-sm, 1rem);
1427
+ transition: color var(--transition-base);
1428
+ }
1429
+ :global(body:not(.dark-mode)) .footerColumn a,
1430
+ :global(.light-mode) .footerColumn a {
1431
+ color: var(--light-text-muted, #7F878B);
1432
+ }
1433
+ :global(.dark-mode) .footerColumn a,
1434
+ :global(.dark) .footerColumn a {
1435
+ color: var(--dark-text-muted, #5C6366);
1436
+ }
1437
+ .footerColumn a::before {
1438
+ display: none;
1439
+ }
1440
+ .footerColumn a:hover {
1441
+ color: var(--accent-tertiary, #5CB87A);
1442
+ padding-left: 0;
1443
+ }
1444
+ .footerBottomBar {
1445
+ padding-top: var(--space-lg, 2rem);
1446
+ border-top: 1px solid;
1447
+ display: flex;
1448
+ justify-content: space-between;
1449
+ align-items: center;
1450
+ flex-wrap: wrap;
1451
+ gap: var(--space-md, 1.5rem);
1452
+ }
1453
+ :global(body:not(.dark-mode)) .footerBottomBar,
1454
+ :global(.light-mode) .footerBottomBar {
1455
+ border-top-color: rgba(21, 48, 33, 0.08);
1456
+ }
1457
+ :global(.dark-mode) .footerBottomBar,
1458
+ :global(.dark) .footerBottomBar {
1459
+ border-top-color: rgba(139, 218, 163, 0.08);
1460
+ }
1461
+ .footerBottomBar p {
1462
+ font-size: 0.875rem;
1463
+ }
1464
+ :global(body:not(.dark-mode)) .footerBottomBar p,
1465
+ :global(.light-mode) .footerBottomBar p {
1466
+ color: var(--light-text-muted, #7F878B);
1467
+ }
1468
+ :global(.dark-mode) .footerBottomBar p,
1469
+ :global(.dark) .footerBottomBar p {
1470
+ color: var(--dark-text-muted, #5C6366);
1471
+ }
1472
+ .legalLinks {
1473
+ display: flex;
1474
+ gap: var(--space-lg, 2rem);
1475
+ }
1476
+ .legalLinks a {
1477
+ font-size: 0.875rem;
1478
+ text-decoration: none;
1479
+ transition: color var(--transition-base);
1480
+ }
1481
+ :global(body:not(.dark-mode)) .legalLinks a,
1482
+ :global(.light-mode) .legalLinks a {
1483
+ color: var(--light-text-muted, #7F878B);
1484
+ }
1485
+ :global(.dark-mode) .legalLinks a,
1486
+ :global(.dark) .legalLinks a {
1487
+ color: var(--dark-text-muted, #5C6366);
1488
+ }
1489
+ .legalLinks a:hover {
1490
+ color: var(--accent-tertiary, #5CB87A);
1491
+ }
1492
+ @media (max-width: 767px) {
1493
+ .footerBottomBar {
1494
+ flex-direction: column;
1495
+ text-align: center;
1496
+ }
1497
+ }
1498
+
1499
+ /* src/components/ContactCTA.module.css */
1500
+ .ctaContainer {
1501
+ padding: var(--space-2xl, 4rem) var(--space-xl, 3rem);
1502
+ margin-top: var(--space-3xl, 6rem);
1503
+ text-align: center;
1504
+ border-radius: var(--radius-2xl, 24px);
1505
+ backdrop-filter: blur(20px) saturate(180%);
1506
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
1507
+ position: relative;
1508
+ overflow: hidden;
1509
+ }
1510
+ .ctaContainer::before {
1511
+ content: "";
1512
+ position: absolute;
1513
+ top: 0;
1514
+ left: 0;
1515
+ right: 0;
1516
+ bottom: 0;
1517
+ background:
1518
+ linear-gradient(
1519
+ 135deg,
1520
+ rgba(42, 104, 71, 0.1) 0%,
1521
+ rgba(92, 184, 122, 0.05) 50%,
1522
+ rgba(212, 165, 116, 0.1) 100%);
1523
+ z-index: -1;
1524
+ }
1525
+ :global(body:not(.dark-mode)) .ctaContainer,
1526
+ :global(.light-mode) .ctaContainer {
1527
+ background: rgba(255, 255, 255, 0.7);
1528
+ border: 1px solid rgba(21, 48, 33, 0.1);
1529
+ box-shadow: 0 8px 32px rgba(10, 24, 16, 0.08);
1530
+ }
1531
+ :global(.dark-mode) .ctaContainer,
1532
+ :global(.dark) .ctaContainer {
1533
+ background: var(--dark-bg-tertiary);
1534
+ border: 1px solid rgba(var(--accent-primary-rgb, 139, 218, 163), 0.15);
1535
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
1536
+ }
1537
+ .ctaContent {
1538
+ max-width: 700px;
1539
+ margin: 0 auto;
1540
+ position: relative;
1541
+ z-index: 1;
1542
+ }
1543
+ .ctaHeading {
1544
+ font-size: clamp(1.5rem, 3vw, 2.25rem);
1545
+ font-weight: 600;
1546
+ line-height: 1.2;
1547
+ letter-spacing: -0.01em;
1548
+ margin-bottom: var(--space-md, 1.5rem);
1549
+ }
1550
+ .ctaText {
1551
+ font-size: 1.0625rem;
1552
+ line-height: 1.7;
1553
+ margin-bottom: var(--space-xl, 3rem);
1554
+ }
1555
+ :global(body:not(.dark-mode)) .ctaText,
1556
+ :global(.light-mode) .ctaText {
1557
+ color: var(--light-text-muted, #7F878B);
1558
+ }
1559
+ :global(.dark-mode) .ctaText,
1560
+ :global(.dark) .ctaText {
1561
+ color: var(--dark-text-muted, #5C6366);
1562
+ }
1563
+ .ctaButton {
1564
+ display: inline-flex;
1565
+ align-items: center;
1566
+ gap: 0.5rem;
1567
+ padding: 1rem 2rem;
1568
+ background:
1569
+ linear-gradient(
1570
+ 135deg,
1571
+ var(--accent-primary, #2A6847),
1572
+ var(--accent-secondary, #3A8F62));
1573
+ color: white;
1574
+ border-radius: var(--radius-md, 12px);
1575
+ font-weight: 600;
1576
+ font-size: 1rem;
1577
+ text-decoration: none;
1578
+ transition: all var(--transition-base);
1579
+ box-shadow: 0 4px 20px rgba(42, 104, 71, 0.3);
1580
+ }
1581
+ .ctaButton:hover {
1582
+ transform: translateY(-3px);
1583
+ box-shadow: 0 8px 30px rgba(42, 104, 71, 0.4);
1584
+ }
1585
+ .ctaButton:active {
1586
+ transform: translateY(-1px);
1587
+ }