@prosophia/lab-minimal 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,157 @@
1
+ /* Footer.module.css - Minimal Template */
2
+
3
+ .footerWrapper {
4
+ padding: var(--spacing-3xl) var(--spacing-lg);
5
+ margin-top: var(--spacing-4xl);
6
+ border-top: 1px solid var(--color-border);
7
+ background: var(--color-background-secondary);
8
+ }
9
+
10
+ .footerContainer {
11
+ max-width: var(--max-width-content);
12
+ margin: 0 auto;
13
+ }
14
+
15
+ /* Simple Single-Column Footer */
16
+ .mainFooter {
17
+ display: flex;
18
+ flex-direction: column;
19
+ gap: var(--spacing-2xl);
20
+ margin-bottom: var(--spacing-2xl);
21
+ }
22
+
23
+ @media (min-width: 768px) {
24
+ .mainFooter {
25
+ flex-direction: row;
26
+ justify-content: space-between;
27
+ align-items: flex-start;
28
+ }
29
+ }
30
+
31
+ .footerAbout {
32
+ max-width: 400px;
33
+ }
34
+
35
+ /* Logo - Simple */
36
+ .footerLogo {
37
+ font-size: var(--font-size-lg);
38
+ font-weight: var(--font-weight-semibold);
39
+ color: var(--color-text-primary);
40
+ text-decoration: none;
41
+ display: inline-block;
42
+ margin-bottom: var(--spacing-sm);
43
+ }
44
+
45
+ .footerLogo:hover {
46
+ color: var(--accent-primary);
47
+ }
48
+
49
+ .logoAccent {
50
+ color: var(--accent-primary);
51
+ }
52
+
53
+ .footerDescription {
54
+ font-size: var(--font-size-sm);
55
+ line-height: 1.6;
56
+ color: var(--color-text-secondary);
57
+ max-width: 300px;
58
+ }
59
+
60
+ /* Social Icons - Minimal */
61
+ .socials {
62
+ display: flex;
63
+ gap: var(--spacing-md);
64
+ margin-top: var(--spacing-lg);
65
+ }
66
+
67
+ .socialIcon {
68
+ width: 32px;
69
+ height: 32px;
70
+ border-radius: var(--border-radius-full);
71
+ display: flex;
72
+ align-items: center;
73
+ justify-content: center;
74
+ background: var(--color-background-card);
75
+ border: 1px solid var(--color-border);
76
+ color: var(--color-text-muted);
77
+ transition: all var(--transition-base);
78
+ }
79
+
80
+ .socialIcon:hover {
81
+ border-color: var(--accent-primary);
82
+ color: var(--accent-primary);
83
+ }
84
+
85
+ /* Footer Links - Inline */
86
+ .footerLinksGrid {
87
+ display: flex;
88
+ gap: var(--spacing-3xl);
89
+ }
90
+
91
+ @media (max-width: 767px) {
92
+ .footerLinksGrid {
93
+ flex-wrap: wrap;
94
+ gap: var(--spacing-xl);
95
+ }
96
+ }
97
+
98
+ .footerColumn h4 {
99
+ font-size: var(--font-size-xs);
100
+ font-weight: var(--font-weight-semibold);
101
+ letter-spacing: 0.05em;
102
+ text-transform: uppercase;
103
+ color: var(--color-text-muted);
104
+ margin-bottom: var(--spacing-md);
105
+ }
106
+
107
+ .footerColumn a {
108
+ display: block;
109
+ text-decoration: none;
110
+ font-size: var(--font-size-sm);
111
+ color: var(--color-text-secondary);
112
+ margin-bottom: var(--spacing-sm);
113
+ transition: color var(--transition-base);
114
+ }
115
+
116
+ .footerColumn a:hover {
117
+ color: var(--accent-primary);
118
+ }
119
+
120
+ /* Footer Bottom Bar */
121
+ .footerBottomBar {
122
+ padding-top: var(--spacing-lg);
123
+ border-top: 1px solid var(--color-border);
124
+ display: flex;
125
+ justify-content: space-between;
126
+ align-items: center;
127
+ flex-wrap: wrap;
128
+ gap: var(--spacing-md);
129
+ }
130
+
131
+ .footerBottomBar p {
132
+ font-size: var(--font-size-xs);
133
+ color: var(--color-text-muted);
134
+ }
135
+
136
+ .legalLinks {
137
+ display: flex;
138
+ gap: var(--spacing-lg);
139
+ }
140
+
141
+ .legalLinks a {
142
+ font-size: var(--font-size-xs);
143
+ color: var(--color-text-muted);
144
+ text-decoration: none;
145
+ transition: color var(--transition-base);
146
+ }
147
+
148
+ .legalLinks a:hover {
149
+ color: var(--accent-primary);
150
+ }
151
+
152
+ @media (max-width: 767px) {
153
+ .footerBottomBar {
154
+ flex-direction: column;
155
+ text-align: center;
156
+ }
157
+ }
@@ -0,0 +1,479 @@
1
+ /* HomePage.module.css - Minimal Template */
2
+
3
+ .pageWrapper {
4
+ padding-top: var(--header-height, 64px);
5
+ }
6
+
7
+ /* ===================================
8
+ HEADER SECTION - Text Only (No Hero)
9
+ =================================== */
10
+
11
+ .headerSection {
12
+ padding: var(--spacing-5xl) var(--spacing-lg) var(--spacing-4xl);
13
+ text-align: center;
14
+ border-bottom: 1px solid var(--color-border);
15
+ }
16
+
17
+ .headerContainer {
18
+ max-width: 700px;
19
+ margin: 0 auto;
20
+ }
21
+
22
+ .headerContent {
23
+ display: flex;
24
+ flex-direction: column;
25
+ align-items: center;
26
+ gap: var(--spacing-lg);
27
+ }
28
+
29
+ .headerTitle {
30
+ font-size: var(--font-size-5xl);
31
+ font-weight: var(--font-weight-semibold);
32
+ line-height: 1.1;
33
+ letter-spacing: -0.02em;
34
+ color: var(--color-text-primary);
35
+ }
36
+
37
+ @media (min-width: 768px) {
38
+ .headerTitle {
39
+ font-size: var(--font-size-6xl);
40
+ }
41
+ }
42
+
43
+ .headerAccent {
44
+ color: var(--accent-primary);
45
+ }
46
+
47
+ .headerDescription {
48
+ font-size: var(--font-size-lg);
49
+ line-height: 1.6;
50
+ color: var(--color-text-secondary);
51
+ max-width: 550px;
52
+ }
53
+
54
+ .headerCtas {
55
+ display: flex;
56
+ flex-direction: column;
57
+ gap: var(--spacing-sm);
58
+ margin-top: var(--spacing-md);
59
+ }
60
+
61
+ @media (min-width: 480px) {
62
+ .headerCtas {
63
+ flex-direction: row;
64
+ gap: var(--spacing-md);
65
+ }
66
+ }
67
+
68
+ /* Primary CTA Button */
69
+ .primaryCta {
70
+ display: inline-flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ gap: 0.5rem;
74
+ padding: 0.625rem 1.25rem;
75
+ background: var(--accent-primary);
76
+ color: white;
77
+ border-radius: var(--border-radius-md);
78
+ font-weight: var(--font-weight-medium);
79
+ font-size: var(--font-size-sm);
80
+ text-decoration: none;
81
+ transition: background var(--transition-base);
82
+ }
83
+
84
+ .primaryCta:hover {
85
+ background: var(--accent-hover);
86
+ color: white;
87
+ }
88
+
89
+ /* Secondary CTA Button */
90
+ .secondaryCta {
91
+ display: inline-flex;
92
+ align-items: center;
93
+ justify-content: center;
94
+ gap: 0.5rem;
95
+ padding: 0.625rem 1.25rem;
96
+ background: transparent;
97
+ color: var(--color-text-primary);
98
+ border: 1px solid var(--color-border);
99
+ border-radius: var(--border-radius-md);
100
+ font-weight: var(--font-weight-medium);
101
+ font-size: var(--font-size-sm);
102
+ text-decoration: none;
103
+ transition: all var(--transition-base);
104
+ }
105
+
106
+ .secondaryCta:hover {
107
+ border-color: var(--accent-primary);
108
+ color: var(--accent-primary);
109
+ }
110
+
111
+ /* ===================================
112
+ STATS SECTION - Inline
113
+ =================================== */
114
+
115
+ .statsSection {
116
+ padding: var(--spacing-3xl) var(--spacing-lg);
117
+ background: var(--color-background-secondary);
118
+ }
119
+
120
+ .statsContainer {
121
+ max-width: var(--max-width-content);
122
+ margin: 0 auto;
123
+ display: grid;
124
+ grid-template-columns: repeat(2, 1fr);
125
+ gap: var(--spacing-lg);
126
+ }
127
+
128
+ @media (min-width: 768px) {
129
+ .statsContainer {
130
+ grid-template-columns: repeat(4, 1fr);
131
+ }
132
+ }
133
+
134
+ .statItem {
135
+ text-align: center;
136
+ }
137
+
138
+ .statValue {
139
+ display: block;
140
+ font-size: var(--font-size-3xl);
141
+ font-weight: var(--font-weight-semibold);
142
+ color: var(--accent-primary);
143
+ line-height: 1;
144
+ margin-bottom: var(--spacing-xs);
145
+ }
146
+
147
+ @media (min-width: 768px) {
148
+ .statValue {
149
+ font-size: var(--font-size-4xl);
150
+ }
151
+ }
152
+
153
+ .statLabel {
154
+ font-size: var(--font-size-xs);
155
+ color: var(--color-text-muted);
156
+ text-transform: uppercase;
157
+ letter-spacing: 0.05em;
158
+ font-weight: var(--font-weight-medium);
159
+ }
160
+
161
+ /* ===================================
162
+ SECTION SHARED STYLES
163
+ =================================== */
164
+
165
+ .sectionContainer {
166
+ max-width: var(--max-width-content);
167
+ margin: 0 auto;
168
+ padding: 0 var(--spacing-lg);
169
+ }
170
+
171
+ .sectionHeader {
172
+ margin-bottom: var(--spacing-2xl);
173
+ }
174
+
175
+ .sectionTitle {
176
+ font-size: var(--font-size-2xl);
177
+ font-weight: var(--font-weight-semibold);
178
+ color: var(--color-text-primary);
179
+ }
180
+
181
+ .sectionCta {
182
+ text-align: center;
183
+ margin-top: var(--spacing-2xl);
184
+ }
185
+
186
+ .linkCta {
187
+ display: inline-flex;
188
+ align-items: center;
189
+ gap: 0.25rem;
190
+ color: var(--accent-primary);
191
+ font-weight: var(--font-weight-medium);
192
+ font-size: var(--font-size-sm);
193
+ text-decoration: none;
194
+ transition: gap var(--transition-base);
195
+ }
196
+
197
+ .linkCta:hover {
198
+ gap: 0.5rem;
199
+ color: var(--accent-hover);
200
+ }
201
+
202
+ /* ===================================
203
+ RESEARCH SECTION - Compact Cards
204
+ =================================== */
205
+
206
+ .researchSection {
207
+ padding: var(--spacing-4xl) var(--spacing-lg);
208
+ }
209
+
210
+ .researchGrid {
211
+ display: grid;
212
+ grid-template-columns: 1fr;
213
+ gap: var(--spacing-md);
214
+ }
215
+
216
+ @media (min-width: 768px) {
217
+ .researchGrid {
218
+ grid-template-columns: repeat(3, 1fr);
219
+ }
220
+ }
221
+
222
+ .researchCard {
223
+ display: flex;
224
+ align-items: flex-start;
225
+ gap: var(--spacing-md);
226
+ padding: var(--spacing-lg);
227
+ background: var(--color-background-card);
228
+ border: 1px solid var(--color-border);
229
+ border-radius: var(--border-radius-lg);
230
+ transition: border-color var(--transition-base);
231
+ }
232
+
233
+ .researchCard:hover {
234
+ border-color: var(--accent-primary);
235
+ }
236
+
237
+ .researchIcon {
238
+ flex-shrink: 0;
239
+ width: 40px;
240
+ height: 40px;
241
+ display: flex;
242
+ align-items: center;
243
+ justify-content: center;
244
+ background: var(--accent-muted, rgba(37, 99, 235, 0.1));
245
+ color: var(--accent-primary);
246
+ border-radius: var(--border-radius-md);
247
+ }
248
+
249
+ .researchContent {
250
+ flex: 1;
251
+ min-width: 0;
252
+ }
253
+
254
+ .researchTitle {
255
+ font-size: var(--font-size-base);
256
+ font-weight: var(--font-weight-semibold);
257
+ color: var(--color-text-primary);
258
+ margin-bottom: var(--spacing-xs);
259
+ }
260
+
261
+ .researchDescription {
262
+ font-size: var(--font-size-sm);
263
+ color: var(--color-text-secondary);
264
+ line-height: 1.5;
265
+ }
266
+
267
+ /* ===================================
268
+ PUBLICATIONS SECTION
269
+ =================================== */
270
+
271
+ .publicationsSection {
272
+ padding: var(--spacing-4xl) var(--spacing-lg);
273
+ background: var(--color-background-secondary);
274
+ }
275
+
276
+ .publicationsList {
277
+ display: flex;
278
+ flex-direction: column;
279
+ gap: var(--spacing-sm);
280
+ }
281
+
282
+ .publicationItem {
283
+ display: flex;
284
+ align-items: flex-start;
285
+ justify-content: space-between;
286
+ gap: var(--spacing-lg);
287
+ padding: var(--spacing-lg);
288
+ background: var(--color-background-card);
289
+ border: 1px solid var(--color-border);
290
+ border-radius: var(--border-radius-md);
291
+ text-decoration: none;
292
+ transition: border-color var(--transition-base);
293
+ }
294
+
295
+ .publicationItem:hover {
296
+ border-color: var(--accent-primary);
297
+ }
298
+
299
+ .publicationContent {
300
+ flex: 1;
301
+ min-width: 0;
302
+ }
303
+
304
+ .publicationDate {
305
+ display: inline-block;
306
+ font-size: var(--font-size-xs);
307
+ font-weight: var(--font-weight-medium);
308
+ color: var(--accent-primary);
309
+ margin-bottom: var(--spacing-xs);
310
+ }
311
+
312
+ .publicationTitle {
313
+ font-size: var(--font-size-base);
314
+ font-weight: var(--font-weight-semibold);
315
+ color: var(--color-text-primary);
316
+ margin-bottom: var(--spacing-xs);
317
+ line-height: 1.4;
318
+ }
319
+
320
+ .publicationItem:hover .publicationTitle {
321
+ color: var(--accent-primary);
322
+ }
323
+
324
+ .publicationAuthors {
325
+ font-size: var(--font-size-sm);
326
+ color: var(--color-text-secondary);
327
+ margin-bottom: var(--spacing-xs);
328
+ }
329
+
330
+ .publicationJournal {
331
+ font-size: var(--font-size-xs);
332
+ color: var(--color-text-muted);
333
+ font-style: italic;
334
+ }
335
+
336
+ .publicationLink {
337
+ flex-shrink: 0;
338
+ color: var(--color-text-muted);
339
+ transition: color var(--transition-base);
340
+ }
341
+
342
+ .publicationItem:hover .publicationLink {
343
+ color: var(--accent-primary);
344
+ }
345
+
346
+ /* ===================================
347
+ NEWS SECTION - Compact Horizontal Cards
348
+ =================================== */
349
+
350
+ .newsSection {
351
+ padding: var(--spacing-4xl) var(--spacing-lg);
352
+ }
353
+
354
+ .newsGrid {
355
+ display: grid;
356
+ grid-template-columns: 1fr;
357
+ gap: var(--spacing-md);
358
+ }
359
+
360
+ @media (min-width: 768px) {
361
+ .newsGrid {
362
+ grid-template-columns: repeat(3, 1fr);
363
+ }
364
+ }
365
+
366
+ .newsCard {
367
+ display: flex;
368
+ gap: var(--spacing-md);
369
+ padding: var(--spacing-md);
370
+ background: var(--color-background-card);
371
+ border: 1px solid var(--color-border);
372
+ border-radius: var(--border-radius-md);
373
+ text-decoration: none;
374
+ transition: border-color var(--transition-base);
375
+ }
376
+
377
+ .newsCard:hover {
378
+ border-color: var(--accent-primary);
379
+ }
380
+
381
+ .newsImageWrapper {
382
+ flex-shrink: 0;
383
+ width: 80px;
384
+ height: 80px;
385
+ border-radius: var(--border-radius-sm);
386
+ overflow: hidden;
387
+ }
388
+
389
+ .newsImage {
390
+ width: 100%;
391
+ height: 100%;
392
+ object-fit: cover;
393
+ transition: transform var(--transition-base);
394
+ }
395
+
396
+ .newsCard:hover .newsImage {
397
+ transform: scale(1.05);
398
+ }
399
+
400
+ .newsContent {
401
+ flex: 1;
402
+ min-width: 0;
403
+ display: flex;
404
+ flex-direction: column;
405
+ }
406
+
407
+ .newsDate {
408
+ font-size: var(--font-size-xs);
409
+ color: var(--color-text-muted);
410
+ margin-bottom: var(--spacing-xs);
411
+ }
412
+
413
+ .newsTitle {
414
+ font-size: var(--font-size-sm);
415
+ font-weight: var(--font-weight-semibold);
416
+ color: var(--color-text-primary);
417
+ line-height: 1.4;
418
+ margin-bottom: var(--spacing-xs);
419
+ display: -webkit-box;
420
+ -webkit-line-clamp: 2;
421
+ -webkit-box-orient: vertical;
422
+ overflow: hidden;
423
+ }
424
+
425
+ .newsCard:hover .newsTitle {
426
+ color: var(--accent-primary);
427
+ }
428
+
429
+ .newsSummary {
430
+ font-size: var(--font-size-xs);
431
+ color: var(--color-text-secondary);
432
+ line-height: 1.4;
433
+ display: -webkit-box;
434
+ -webkit-line-clamp: 2;
435
+ -webkit-box-orient: vertical;
436
+ overflow: hidden;
437
+ }
438
+
439
+ /* ===================================
440
+ CTA SECTION - Simple
441
+ =================================== */
442
+
443
+ .ctaSection {
444
+ padding: var(--spacing-4xl) var(--spacing-lg);
445
+ background: var(--color-background-secondary);
446
+ }
447
+
448
+ .ctaContainer {
449
+ max-width: 500px;
450
+ margin: 0 auto;
451
+ text-align: center;
452
+ }
453
+
454
+ .ctaTitle {
455
+ font-size: var(--font-size-2xl);
456
+ font-weight: var(--font-weight-semibold);
457
+ color: var(--color-text-primary);
458
+ margin-bottom: var(--spacing-sm);
459
+ }
460
+
461
+ .ctaDescription {
462
+ font-size: var(--font-size-base);
463
+ color: var(--color-text-secondary);
464
+ margin-bottom: var(--spacing-xl);
465
+ }
466
+
467
+ .ctaButtons {
468
+ display: flex;
469
+ flex-direction: column;
470
+ gap: var(--spacing-sm);
471
+ justify-content: center;
472
+ }
473
+
474
+ @media (min-width: 480px) {
475
+ .ctaButtons {
476
+ flex-direction: row;
477
+ gap: var(--spacing-md);
478
+ }
479
+ }