@prosophia/lab-classic 0.0.4 → 0.1.0

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,1587 +0,0 @@
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
- }