@prosophia/lab-minimal 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,444 +0,0 @@
1
- /* src/components/Layout.module.css */
2
- .header {
3
- position: fixed;
4
- top: 0;
5
- left: 0;
6
- right: 0;
7
- z-index: var(--z-sticky);
8
- padding: var(--spacing-md) var(--spacing-lg);
9
- background: var(--color-background-primary);
10
- border-bottom: 1px solid var(--color-border);
11
- transition: box-shadow var(--transition-base);
12
- }
13
- .headerScrolled {
14
- box-shadow: var(--shadow-sm);
15
- }
16
- .navContainer {
17
- max-width: var(--max-width-content);
18
- margin: 0 auto;
19
- display: flex;
20
- justify-content: space-between;
21
- align-items: center;
22
- gap: var(--spacing-xl);
23
- }
24
- .navLogo {
25
- display: flex;
26
- align-items: center;
27
- gap: 0.5rem;
28
- font-size: var(--font-size-lg);
29
- font-weight: var(--font-weight-semibold);
30
- color: var(--color-text-primary);
31
- text-decoration: none;
32
- flex-shrink: 0;
33
- }
34
- .navLogo:hover {
35
- color: var(--accent-primary);
36
- }
37
- .navLogo svg {
38
- width: 20px;
39
- height: 20px;
40
- color: var(--accent-primary);
41
- }
42
- .navLogoAccent {
43
- color: var(--accent-primary);
44
- }
45
- .desktopNav {
46
- display: none;
47
- gap: var(--spacing-xl);
48
- list-style: none;
49
- align-items: center;
50
- }
51
- @media (min-width: 1024px) {
52
- .desktopNav {
53
- display: flex;
54
- }
55
- }
56
- .navLink {
57
- text-decoration: none;
58
- font-weight: var(--font-weight-normal);
59
- font-size: var(--font-size-sm);
60
- color: var(--color-text-secondary);
61
- padding: var(--spacing-xs) 0;
62
- transition: color var(--transition-base);
63
- }
64
- .navLink:hover {
65
- color: var(--accent-primary);
66
- }
67
- .navLinkActive {
68
- color: var(--accent-primary);
69
- font-weight: var(--font-weight-medium);
70
- }
71
- .navActions {
72
- display: none;
73
- }
74
- @media (min-width: 1024px) {
75
- .navActions {
76
- display: flex;
77
- align-items: center;
78
- gap: var(--spacing-md);
79
- }
80
- }
81
- .navCta {
82
- display: inline-flex;
83
- align-items: center;
84
- justify-content: center;
85
- padding: var(--spacing-sm) var(--spacing-lg);
86
- background: var(--accent-primary);
87
- color: white;
88
- border-radius: var(--border-radius-md);
89
- font-weight: var(--font-weight-medium);
90
- font-size: var(--font-size-sm);
91
- text-decoration: none;
92
- transition: background var(--transition-base);
93
- }
94
- .navCta:hover {
95
- background: var(--accent-hover);
96
- color: white;
97
- }
98
- .menuButton {
99
- display: flex;
100
- align-items: center;
101
- justify-content: center;
102
- width: 40px;
103
- height: 40px;
104
- background: transparent;
105
- border: none;
106
- cursor: pointer;
107
- padding: var(--spacing-sm);
108
- border-radius: var(--border-radius-sm);
109
- transition: background var(--transition-fast);
110
- z-index: calc(var(--z-modal) + 1);
111
- }
112
- .menuButton:hover {
113
- background: var(--color-background-secondary);
114
- }
115
- @media (min-width: 1024px) {
116
- .menuButton {
117
- display: none;
118
- }
119
- }
120
- .menuButtonLines {
121
- display: flex;
122
- flex-direction: column;
123
- gap: 4px;
124
- width: 20px;
125
- }
126
- .menuLine {
127
- display: block;
128
- height: 2px;
129
- width: 100%;
130
- background: var(--color-text-primary);
131
- border-radius: var(--border-radius-full);
132
- transition: all var(--transition-base);
133
- transform-origin: center;
134
- }
135
- .menuLineOpen1 {
136
- transform: translateY(6px) rotate(45deg);
137
- }
138
- .menuLineOpen2 {
139
- opacity: 0;
140
- transform: scaleX(0);
141
- }
142
- .menuLineOpen3 {
143
- transform: translateY(-6px) rotate(-45deg);
144
- }
145
- .mobileMenu {
146
- position: fixed;
147
- inset: 0;
148
- z-index: var(--z-modal);
149
- pointer-events: none;
150
- visibility: hidden;
151
- }
152
- .mobileMenuOpen {
153
- pointer-events: auto;
154
- visibility: visible;
155
- }
156
- .mobileMenuOverlay {
157
- position: absolute;
158
- inset: 0;
159
- background: rgba(0, 0, 0, 0.3);
160
- opacity: 0;
161
- transition: opacity var(--transition-base);
162
- }
163
- .mobileMenuOpen .mobileMenuOverlay {
164
- opacity: 1;
165
- }
166
- .mobileMenuContent {
167
- position: absolute;
168
- top: 0;
169
- right: 0;
170
- width: min(280px, 80vw);
171
- height: 100%;
172
- background: var(--color-background-primary);
173
- border-left: 1px solid var(--color-border);
174
- padding: calc(var(--header-height) + var(--spacing-xl)) var(--spacing-lg) var(--spacing-lg);
175
- display: flex;
176
- flex-direction: column;
177
- gap: var(--spacing-xs);
178
- transform: translateX(100%);
179
- transition: transform var(--transition-base);
180
- }
181
- .mobileMenuOpen .mobileMenuContent {
182
- transform: translateX(0);
183
- }
184
- .mobileNavLink {
185
- display: block;
186
- padding: var(--spacing-md);
187
- color: var(--color-text-primary);
188
- text-decoration: none;
189
- font-size: var(--font-size-base);
190
- font-weight: var(--font-weight-medium);
191
- border-radius: var(--border-radius-sm);
192
- transition: all var(--transition-base);
193
- }
194
- .mobileNavLink:hover,
195
- .mobileNavLinkActive {
196
- background: var(--color-background-secondary);
197
- color: var(--accent-primary);
198
- }
199
- .mobileNavCta {
200
- display: flex;
201
- align-items: center;
202
- justify-content: center;
203
- margin-top: var(--spacing-md);
204
- padding: var(--spacing-md);
205
- background: var(--accent-primary);
206
- color: white;
207
- border-radius: var(--border-radius-md);
208
- font-weight: var(--font-weight-medium);
209
- text-decoration: none;
210
- }
211
- .mobileNavCta:hover {
212
- background: var(--accent-hover);
213
- }
214
-
215
- /* src/components/ThemeToggle.module.css */
216
- .toggle {
217
- position: relative;
218
- display: flex;
219
- align-items: center;
220
- justify-content: center;
221
- padding: 4px;
222
- background: transparent;
223
- border: none;
224
- cursor: pointer;
225
- border-radius: var(--radius-full, 9999px);
226
- transition: transform var(--transition-base, 0.3s ease);
227
- }
228
- .toggle:hover {
229
- transform: scale(1.05);
230
- }
231
- .toggle:focus-visible {
232
- outline: 2px solid var(--accent-tertiary);
233
- outline-offset: 2px;
234
- }
235
- .togglePlaceholder {
236
- width: 60px;
237
- height: 32px;
238
- }
239
- .track {
240
- position: relative;
241
- display: flex;
242
- align-items: center;
243
- justify-content: space-between;
244
- width: 60px;
245
- height: 32px;
246
- padding: 0 6px;
247
- border-radius: var(--radius-full, 9999px);
248
- transition: all var(--transition-base, 0.3s ease);
249
- }
250
- :global(body:not(.dark-mode)) .track,
251
- :global(.light-mode) .track {
252
- background: rgba(42, 104, 71, 0.12);
253
- border: 1px solid rgba(21, 48, 33, 0.15);
254
- }
255
- :global(.dark-mode) .track,
256
- :global(.dark) .track {
257
- background: rgba(139, 218, 163, 0.15);
258
- border: 1px solid rgba(139, 218, 163, 0.2);
259
- }
260
- .thumb {
261
- position: absolute;
262
- top: 3px;
263
- left: 3px;
264
- width: 24px;
265
- height: 24px;
266
- border-radius: 50%;
267
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
268
- z-index: 2;
269
- }
270
- :global(body:not(.dark-mode)) .thumb,
271
- :global(.light-mode) .thumb {
272
- background:
273
- linear-gradient(
274
- 135deg,
275
- var(--accent-primary, #2A6847),
276
- var(--accent-secondary, #3A8F62));
277
- }
278
- :global(.dark-mode) .thumb,
279
- :global(.dark) .thumb {
280
- background:
281
- linear-gradient(
282
- 135deg,
283
- var(--accent-secondary, #3A8F62),
284
- var(--accent-tertiary, #5CB87A));
285
- }
286
- .icon {
287
- display: flex;
288
- align-items: center;
289
- justify-content: center;
290
- width: 20px;
291
- height: 20px;
292
- z-index: 1;
293
- transition: all var(--transition-base, 0.3s ease);
294
- opacity: 0.4;
295
- }
296
- .iconActive {
297
- opacity: 1;
298
- }
299
- :global(body:not(.dark-mode)) .sunIcon,
300
- :global(.light-mode) .sunIcon {
301
- color: var(--accent-primary, #2A6847);
302
- }
303
- :global(body:not(.dark-mode)) .moonIcon,
304
- :global(.light-mode) .moonIcon {
305
- color: var(--light-text-muted, #7F878B);
306
- }
307
- :global(.dark-mode) .sunIcon,
308
- :global(.dark) .sunIcon {
309
- color: var(--dark-text-muted, #5C6366);
310
- }
311
- :global(.dark-mode) .moonIcon,
312
- :global(.dark) .moonIcon {
313
- color: var(--accent-tertiary, #5CB87A);
314
- }
315
-
316
- /* src/components/Footer.module.css */
317
- .footerWrapper {
318
- padding: var(--spacing-3xl) var(--spacing-lg);
319
- margin-top: var(--spacing-4xl);
320
- border-top: 1px solid var(--color-border);
321
- background: var(--color-background-secondary);
322
- }
323
- .footerContainer {
324
- max-width: var(--max-width-content);
325
- margin: 0 auto;
326
- }
327
- .mainFooter {
328
- display: flex;
329
- flex-direction: column;
330
- gap: var(--spacing-2xl);
331
- margin-bottom: var(--spacing-2xl);
332
- }
333
- @media (min-width: 768px) {
334
- .mainFooter {
335
- flex-direction: row;
336
- justify-content: space-between;
337
- align-items: flex-start;
338
- }
339
- }
340
- .footerAbout {
341
- max-width: 400px;
342
- }
343
- .footerLogo {
344
- font-size: var(--font-size-lg);
345
- font-weight: var(--font-weight-semibold);
346
- color: var(--color-text-primary);
347
- text-decoration: none;
348
- display: inline-block;
349
- margin-bottom: var(--spacing-sm);
350
- }
351
- .footerLogo:hover {
352
- color: var(--accent-primary);
353
- }
354
- .logoAccent {
355
- color: var(--accent-primary);
356
- }
357
- .footerDescription {
358
- font-size: var(--font-size-sm);
359
- line-height: 1.6;
360
- color: var(--color-text-secondary);
361
- max-width: 300px;
362
- }
363
- .socials {
364
- display: flex;
365
- gap: var(--spacing-md);
366
- margin-top: var(--spacing-lg);
367
- }
368
- .socialIcon {
369
- width: 32px;
370
- height: 32px;
371
- border-radius: var(--border-radius-full);
372
- display: flex;
373
- align-items: center;
374
- justify-content: center;
375
- background: var(--color-background-card);
376
- border: 1px solid var(--color-border);
377
- color: var(--color-text-muted);
378
- transition: all var(--transition-base);
379
- }
380
- .socialIcon:hover {
381
- border-color: var(--accent-primary);
382
- color: var(--accent-primary);
383
- }
384
- .footerLinksGrid {
385
- display: flex;
386
- gap: var(--spacing-3xl);
387
- }
388
- @media (max-width: 767px) {
389
- .footerLinksGrid {
390
- flex-wrap: wrap;
391
- gap: var(--spacing-xl);
392
- }
393
- }
394
- .footerColumn h4 {
395
- font-size: var(--font-size-xs);
396
- font-weight: var(--font-weight-semibold);
397
- letter-spacing: 0.05em;
398
- text-transform: uppercase;
399
- color: var(--color-text-muted);
400
- margin-bottom: var(--spacing-md);
401
- }
402
- .footerColumn a {
403
- display: block;
404
- text-decoration: none;
405
- font-size: var(--font-size-sm);
406
- color: var(--color-text-secondary);
407
- margin-bottom: var(--spacing-sm);
408
- transition: color var(--transition-base);
409
- }
410
- .footerColumn a:hover {
411
- color: var(--accent-primary);
412
- }
413
- .footerBottomBar {
414
- padding-top: var(--spacing-lg);
415
- border-top: 1px solid var(--color-border);
416
- display: flex;
417
- justify-content: space-between;
418
- align-items: center;
419
- flex-wrap: wrap;
420
- gap: var(--spacing-md);
421
- }
422
- .footerBottomBar p {
423
- font-size: var(--font-size-xs);
424
- color: var(--color-text-muted);
425
- }
426
- .legalLinks {
427
- display: flex;
428
- gap: var(--spacing-lg);
429
- }
430
- .legalLinks a {
431
- font-size: var(--font-size-xs);
432
- color: var(--color-text-muted);
433
- text-decoration: none;
434
- transition: color var(--transition-base);
435
- }
436
- .legalLinks a:hover {
437
- color: var(--accent-primary);
438
- }
439
- @media (max-width: 767px) {
440
- .footerBottomBar {
441
- flex-direction: column;
442
- text-align: center;
443
- }
444
- }