@jjlmoya/utils-babies 1.12.0 → 1.13.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.
@@ -0,0 +1,1053 @@
1
+ .pregnancy-calculator {
2
+ --pc-tri-primary: #86efac;
3
+ --pc-tri-accent: #22c55e;
4
+ --pc-tri-glow: rgba(134, 239, 172, 0.18);
5
+ --pc-tri-text: #14532d;
6
+ --pc-tri-bg: #f0fdf4;
7
+ --pc-tri-badge: #dcfce7;
8
+ --pc-bg: #fff;
9
+ --pc-bg-muted: #f8fafc;
10
+ --pc-bg-dark: #1a2332;
11
+ --pc-text: #1e293b;
12
+ --pc-text-muted: #475569;
13
+ --pc-text-dim: #94a3b8;
14
+ --pc-border: #edf2f7;
15
+ --pc-border-inner: rgba(0, 0, 0, 0.04);
16
+ --pc-shadow: rgba(0, 0, 0, 0.07);
17
+ --pc-safe-bg: #f0fdf4;
18
+ --pc-safe-title: #16a34a;
19
+ --pc-alert-bg: #fff7ed;
20
+ --pc-alert-title: #ea580c;
21
+
22
+ position: relative;
23
+ width: 100%;
24
+ color: var(--pc-text);
25
+ background: var(--pc-bg);
26
+ border-radius: 32px;
27
+ overflow: hidden;
28
+ box-shadow:
29
+ 0 0 0 1px rgba(0, 0, 0, 0.05),
30
+ 0 8px 32px rgba(0, 0, 0, 0.07),
31
+ 0 32px 64px rgba(0, 0, 0, 0.04);
32
+ transition: box-shadow 0.5s;
33
+ }
34
+
35
+ .pregnancy-calculator::before {
36
+ content: "";
37
+ position: absolute;
38
+ inset: 0 0 auto;
39
+ height: 3px;
40
+ background: linear-gradient(
41
+ 90deg,
42
+ var(--pc-tri-primary),
43
+ var(--pc-tri-accent)
44
+ );
45
+ transition: background 0.6s ease;
46
+ z-index: 1;
47
+ }
48
+
49
+ .pregnancy-calculator.pregnancy-calculator-t1 {
50
+ --pc-tri-primary: #86efac;
51
+ --pc-tri-accent: #22c55e;
52
+ --pc-tri-glow: rgba(134, 239, 172, 0.18);
53
+ --pc-tri-text: #14532d;
54
+ --pc-tri-bg: #f0fdf4;
55
+ --pc-tri-badge: #dcfce7;
56
+ }
57
+
58
+ .pregnancy-calculator.pregnancy-calculator-t2 {
59
+ --pc-tri-primary: #fcd34d;
60
+ --pc-tri-accent: #f59e0b;
61
+ --pc-tri-glow: rgba(252, 211, 77, 0.2);
62
+ --pc-tri-text: #78350f;
63
+ --pc-tri-bg: #fffbeb;
64
+ --pc-tri-badge: #fef3c7;
65
+ }
66
+
67
+ .pregnancy-calculator.pregnancy-calculator-t3 {
68
+ --pc-tri-primary: #d8b4fe;
69
+ --pc-tri-accent: #a855f7;
70
+ --pc-tri-glow: rgba(216, 180, 254, 0.2);
71
+ --pc-tri-text: #4c1d95;
72
+ --pc-tri-bg: #faf5ff;
73
+ --pc-tri-badge: #ede9fe;
74
+ }
75
+
76
+ :global(.theme-dark) .pregnancy-calculator {
77
+ --pc-bg: #111827;
78
+ --pc-bg-muted: #0f1923;
79
+ --pc-bg-dark: #0f1923;
80
+ --pc-text: #f1f5f9;
81
+ --pc-text-muted: #94a3b8;
82
+ --pc-text-dim: #cbd5e1;
83
+ --pc-border: rgba(255, 255, 255, 0.04);
84
+ --pc-border-inner: rgba(255, 255, 255, 0.04);
85
+ --pc-shadow: rgba(0, 0, 0, 0.4);
86
+ --pc-safe-bg: rgba(16, 185, 129, 0.08);
87
+ --pc-safe-title: #16a34a;
88
+ --pc-alert-bg: rgba(249, 115, 22, 0.08);
89
+ --pc-alert-title: #ea580c;
90
+
91
+ background: #111827;
92
+ box-shadow:
93
+ 0 0 0 1px rgba(255, 255, 255, 0.06),
94
+ 0 8px 32px rgba(0, 0, 0, 0.4);
95
+ }
96
+
97
+ .pregnancy-calculator-header {
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: space-between;
101
+ padding: 24px 32px 20px;
102
+ border-bottom: 1px solid var(--pc-border);
103
+ gap: 16px;
104
+ flex-wrap: wrap;
105
+ }
106
+
107
+ .pregnancy-calculator-method-group {
108
+ display: flex;
109
+ gap: 0;
110
+ background: #f1f5f9;
111
+ padding: 4px;
112
+ border-radius: 16px;
113
+ }
114
+
115
+ :global(.theme-dark) .pregnancy-calculator-method-group {
116
+ background: rgba(255, 255, 255, 0.06);
117
+ }
118
+
119
+ .pregnancy-calculator-method-btn {
120
+ padding: 9px 20px;
121
+ border-radius: 12px;
122
+ border: none;
123
+ background: transparent;
124
+ color: var(--pc-text-muted);
125
+ font-size: 0.78rem;
126
+ font-weight: 800;
127
+ cursor: pointer;
128
+ transition:
129
+ background 0.2s,
130
+ color 0.2s,
131
+ box-shadow 0.2s;
132
+ text-transform: uppercase;
133
+ letter-spacing: 0.04em;
134
+ white-space: nowrap;
135
+ }
136
+
137
+ .pregnancy-calculator-method-btn-active {
138
+ background: var(--pc-bg);
139
+ color: var(--pc-tri-accent);
140
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
141
+ }
142
+
143
+ .pregnancy-calculator-partner-wrap {
144
+ display: flex;
145
+ align-items: center;
146
+ gap: 0.5rem;
147
+ cursor: pointer;
148
+ user-select: none;
149
+ }
150
+
151
+ .pregnancy-calculator-partner-label {
152
+ font-size: 0.8125rem;
153
+ color: var(--pc-text-muted);
154
+ }
155
+
156
+ .pregnancy-calculator-toggle-track {
157
+ width: 2.5rem;
158
+ height: 1.375rem;
159
+ border-radius: 0.6875rem;
160
+ background: var(--pc-border);
161
+ position: relative;
162
+ transition: background 0.2s;
163
+ border: 1px solid var(--pc-border-inner);
164
+ }
165
+
166
+ .pregnancy-calculator-toggle-track-on {
167
+ background: var(--pc-tri-accent);
168
+ }
169
+
170
+ .pregnancy-calculator-toggle-thumb {
171
+ position: absolute;
172
+ top: 2px;
173
+ left: 2px;
174
+ width: 1rem;
175
+ height: 1rem;
176
+ border-radius: 50%;
177
+ background: var(--pc-bg);
178
+ box-shadow: 0 1px 3px var(--pc-shadow);
179
+ transition: transform 0.2s;
180
+ }
181
+
182
+ .pregnancy-calculator-toggle-track-on .pregnancy-calculator-toggle-thumb {
183
+ transform: translateX(1.125rem);
184
+ }
185
+
186
+ .pregnancy-calculator-main {
187
+ display: grid;
188
+ grid-template-columns: 300px 1fr 220px;
189
+ min-height: 32rem;
190
+ }
191
+
192
+ .pregnancy-calculator-left {
193
+ padding: 28px 24px 36px;
194
+ border-right: 1px solid var(--pc-border);
195
+ display: flex;
196
+ flex-direction: column;
197
+ gap: 20px;
198
+ background: #f8fafc;
199
+ }
200
+
201
+ :global(.theme-dark) .pregnancy-calculator-left {
202
+ background: #0f1923;
203
+ border-right-color: rgba(255, 255, 255, 0.04);
204
+ }
205
+
206
+ .pregnancy-calculator-center {
207
+ padding: 28px 28px 36px;
208
+ border-right: 1px solid var(--pc-border);
209
+ overflow-y: auto;
210
+ background: #fff;
211
+ }
212
+
213
+ :global(.theme-dark) .pregnancy-calculator-center {
214
+ background: #111827;
215
+ }
216
+
217
+ .pregnancy-calculator-right {
218
+ position: relative;
219
+ overflow: hidden;
220
+ }
221
+
222
+ .pregnancy-calculator-tl-inner {
223
+ position: absolute;
224
+ inset: 0;
225
+ display: flex;
226
+ flex-direction: column;
227
+ background: var(--pc-bg-muted);
228
+ overflow: hidden;
229
+ }
230
+
231
+ :global(.theme-dark) .pregnancy-calculator-tl-inner {
232
+ background: #0f1923;
233
+ }
234
+
235
+ .pregnancy-calculator-dp-wrap {
236
+ display: flex;
237
+ flex-direction: column;
238
+ gap: 0.5rem;
239
+ }
240
+
241
+ .pregnancy-calculator-dp-label {
242
+ font-size: 0.8125rem;
243
+ font-weight: 600;
244
+ color: var(--pc-text-muted);
245
+ text-transform: uppercase;
246
+ letter-spacing: 0.04em;
247
+ }
248
+
249
+ .pregnancy-calculator-dp-selects {
250
+ display: flex;
251
+ align-items: center;
252
+ background: #fff;
253
+ border-radius: 18px;
254
+ padding: 6px 10px;
255
+ gap: 4px;
256
+ box-shadow:
257
+ 0 2px 12px rgba(0, 0, 0, 0.06),
258
+ 0 0 0 1px rgba(0, 0, 0, 0.04);
259
+ transition: box-shadow 0.2s;
260
+ }
261
+
262
+ .pregnancy-calculator-dp-selects:focus-within {
263
+ box-shadow:
264
+ 0 4px 20px var(--pc-tri-glow),
265
+ 0 0 0 2px var(--pc-tri-primary);
266
+ }
267
+
268
+ :global(.theme-dark) .pregnancy-calculator-dp-selects {
269
+ background: #1a2332;
270
+ box-shadow:
271
+ 0 2px 12px rgba(0, 0, 0, 0.2),
272
+ 0 0 0 1px rgba(255, 255, 255, 0.06);
273
+ }
274
+
275
+ .pregnancy-calculator-dp-select {
276
+ flex: 1;
277
+ padding: 8px 4px;
278
+ border: none;
279
+ background: transparent;
280
+ color: var(--pc-text);
281
+ font-size: 0.95rem;
282
+ font-weight: 700;
283
+ cursor: pointer;
284
+ appearance: none;
285
+ outline: none;
286
+ text-align: center;
287
+ min-width: 0;
288
+ }
289
+
290
+ :global(.theme-dark) .pregnancy-calculator-dp-select {
291
+ background-color: #0f1923;
292
+ color: #f1f5f9;
293
+ }
294
+
295
+ .pregnancy-calculator-dp-sep {
296
+ color: #cbd5e1;
297
+ font-size: 1rem;
298
+ font-weight: 300;
299
+ flex-shrink: 0;
300
+ padding: 0 2px;
301
+ }
302
+
303
+ :global(.theme-dark) .pregnancy-calculator-dp-sep {
304
+ color: #64748b;
305
+ }
306
+
307
+ .pregnancy-calculator-cs-wrap {
308
+ background: #fff;
309
+ border-radius: 18px;
310
+ padding: 20px;
311
+ box-shadow:
312
+ 0 2px 12px rgba(0, 0, 0, 0.06),
313
+ 0 0 0 1px rgba(0, 0, 0, 0.04);
314
+ display: flex;
315
+ flex-direction: column;
316
+ gap: 0;
317
+ transition: opacity 0.3s;
318
+ }
319
+
320
+ :global(.theme-dark) .pregnancy-calculator-cs-wrap {
321
+ background: #1a2332;
322
+ box-shadow:
323
+ 0 2px 12px rgba(0, 0, 0, 0.2),
324
+ 0 0 0 1px rgba(255, 255, 255, 0.06);
325
+ }
326
+
327
+ .pregnancy-calculator-cs-header {
328
+ display: flex;
329
+ align-items: baseline;
330
+ justify-content: space-between;
331
+ margin-bottom: 16px;
332
+ }
333
+
334
+ .pregnancy-calculator-cs-label {
335
+ font-size: 0.7rem;
336
+ font-weight: 800;
337
+ color: var(--pc-text-muted);
338
+ text-transform: uppercase;
339
+ letter-spacing: 0.14em;
340
+ }
341
+
342
+ .pregnancy-calculator-cs-value-wrap {
343
+ display: flex;
344
+ align-items: baseline;
345
+ gap: 3px;
346
+ }
347
+
348
+ #pc-cs-value {
349
+ font-size: 2rem;
350
+ font-weight: 900;
351
+ letter-spacing: -0.04em;
352
+ color: var(--pc-tri-accent);
353
+ transition: color 0.5s;
354
+ }
355
+
356
+ .pregnancy-calculator-cs-unit {
357
+ font-size: 0.8rem;
358
+ font-weight: 600;
359
+ color: var(--pc-text-dim);
360
+ }
361
+
362
+ .pregnancy-calculator-cs-slider {
363
+ width: 100%;
364
+ height: 4px;
365
+ border-radius: 2px;
366
+ background: linear-gradient(90deg, var(--pc-tri-primary) 0%, #e2e8f0 0%);
367
+ appearance: none;
368
+ cursor: pointer;
369
+ outline: none;
370
+ transition: background 0.4s;
371
+ }
372
+
373
+ .pregnancy-calculator-cs-slider::-webkit-slider-thumb {
374
+ appearance: none;
375
+ width: 20px;
376
+ height: 20px;
377
+ border-radius: 50%;
378
+ background: #fff;
379
+ border: 3px solid var(--pc-tri-accent);
380
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
381
+ cursor: pointer;
382
+ transition:
383
+ transform 0.2s,
384
+ border-color 0.5s;
385
+ }
386
+
387
+ .pregnancy-calculator-cs-slider::-webkit-slider-thumb:hover {
388
+ transform: scale(1.2);
389
+ }
390
+
391
+ .pregnancy-calculator-cs-extremes {
392
+ display: flex;
393
+ justify-content: space-between;
394
+ margin-top: 8px;
395
+ font-size: 0.65rem;
396
+ font-weight: 700;
397
+ color: #cbd5e1;
398
+ }
399
+
400
+ .pregnancy-calculator-sd-wrap {
401
+ display: flex;
402
+ flex-direction: column;
403
+ gap: 0.875rem;
404
+ }
405
+
406
+ .pregnancy-calculator-stats-row {
407
+ display: flex;
408
+ gap: 0.625rem;
409
+ }
410
+
411
+ .pregnancy-calculator-stat-chip {
412
+ flex: 1;
413
+ background: #f8fafc;
414
+ border-radius: 16px;
415
+ padding: 16px 18px;
416
+ display: flex;
417
+ flex-direction: column;
418
+ gap: 4px;
419
+ }
420
+
421
+ :global(.theme-dark) .pregnancy-calculator-stat-chip {
422
+ background: #1e2936;
423
+ }
424
+
425
+ .pregnancy-calculator-stat-key {
426
+ font-size: 0.65rem;
427
+ font-weight: 800;
428
+ text-transform: uppercase;
429
+ letter-spacing: 0.12em;
430
+ color: #94a3b8;
431
+ }
432
+
433
+ .pregnancy-calculator-stat-value {
434
+ font-size: 1.5rem;
435
+ font-weight: 900;
436
+ color: var(--pc-text);
437
+ line-height: 1;
438
+ letter-spacing: -0.02em;
439
+ transition: color 0.5s;
440
+ }
441
+
442
+ .pregnancy-calculator-accent {
443
+ color: var(--pc-tri-accent);
444
+ }
445
+
446
+ .pregnancy-calculator-edd-box {
447
+ border-radius: 18px;
448
+ padding: 20px;
449
+ background: var(--pc-tri-bg);
450
+ text-align: center;
451
+ display: flex;
452
+ flex-direction: column;
453
+ gap: 0;
454
+ transition: background 0.5s;
455
+ }
456
+
457
+ :global(.theme-dark) .pregnancy-calculator-edd-box {
458
+ background: rgba(255, 255, 255, 0.04);
459
+ }
460
+
461
+ .pregnancy-calculator-edd-label {
462
+ font-size: 0.65rem;
463
+ font-weight: 800;
464
+ text-transform: uppercase;
465
+ letter-spacing: 0.14em;
466
+ color: #94a3b8;
467
+ margin-bottom: 6px;
468
+ }
469
+
470
+ .pregnancy-calculator-edd-date {
471
+ font-size: 1.15rem;
472
+ font-weight: 900;
473
+ color: var(--pc-tri-text);
474
+ letter-spacing: -0.02em;
475
+ transition: color 0.5s;
476
+ }
477
+
478
+ :global(.theme-dark) .pregnancy-calculator-edd-date {
479
+ color: var(--pc-tri-primary);
480
+ }
481
+
482
+ .pregnancy-calculator-edd-note {
483
+ font-size: 0.72rem;
484
+ color: #94a3b8;
485
+ margin-top: 5px;
486
+ font-style: italic;
487
+ }
488
+
489
+ .pregnancy-calculator-btn-cal {
490
+ width: 100%;
491
+ padding: 15px;
492
+ border-radius: 16px;
493
+ border: none;
494
+ background: var(--pc-tri-accent);
495
+ color: #fff;
496
+ font-size: 0.82rem;
497
+ font-weight: 800;
498
+ cursor: pointer;
499
+ letter-spacing: 0.06em;
500
+ text-transform: uppercase;
501
+ transition: all 0.25s;
502
+ box-shadow: 0 4px 16px var(--pc-tri-glow);
503
+ }
504
+
505
+ .pregnancy-calculator-btn-cal:hover:not(:disabled) {
506
+ transform: translateY(-2px);
507
+ box-shadow: 0 8px 24px var(--pc-tri-glow);
508
+ }
509
+
510
+ .pregnancy-calculator-btn-cal:disabled {
511
+ background: #e2e8f0;
512
+ color: #94a3b8;
513
+ box-shadow: none;
514
+ cursor: default;
515
+ }
516
+
517
+ :global(.theme-dark) .pregnancy-calculator-btn-cal:disabled {
518
+ background: #1e2936;
519
+ }
520
+
521
+ .pregnancy-calculator-mp-empty {
522
+ display: flex;
523
+ flex-direction: column;
524
+ align-items: center;
525
+ justify-content: center;
526
+ height: 100%;
527
+ min-height: 18rem;
528
+ gap: 0.75rem;
529
+ text-align: center;
530
+ }
531
+
532
+ .pregnancy-calculator-mp-empty-dot {
533
+ width: 3rem;
534
+ height: 3rem;
535
+ border-radius: 50%;
536
+ background: var(--pc-tri-bg);
537
+ border: 2px solid var(--pc-tri-primary);
538
+ box-shadow: 0 0 0 6px var(--pc-tri-glow);
539
+ }
540
+
541
+ .pregnancy-calculator-mp-empty-title {
542
+ font-size: 1.125rem;
543
+ font-weight: 700;
544
+ color: var(--pc-text);
545
+ }
546
+
547
+ .pregnancy-calculator-mp-empty-body {
548
+ font-size: 0.875rem;
549
+ color: var(--pc-text-muted);
550
+ max-width: 22ch;
551
+ line-height: 1.5;
552
+ margin: 0;
553
+ }
554
+
555
+ @keyframes pc-fade-in {
556
+ from {
557
+ opacity: 0;
558
+ transform: translateY(6px);
559
+ }
560
+ to {
561
+ opacity: 1;
562
+ transform: translateY(0);
563
+ }
564
+ }
565
+
566
+ .pregnancy-calculator-mp-results {
567
+ display: flex;
568
+ flex-direction: column;
569
+ gap: 1rem;
570
+ }
571
+
572
+ .pregnancy-calculator-mp-enter {
573
+ animation: pc-fade-in 0.25s ease-out;
574
+ }
575
+
576
+ .pregnancy-calculator-mp-top-row {
577
+ display: flex;
578
+ align-items: center;
579
+ justify-content: space-between;
580
+ gap: 0.75rem;
581
+ flex-wrap: wrap;
582
+ }
583
+
584
+ .pregnancy-calculator-mp-badge {
585
+ display: inline-flex;
586
+ align-items: center;
587
+ padding: 0.375rem 0.875rem;
588
+ border-radius: 2rem;
589
+ background: var(--pc-tri-badge);
590
+ color: var(--pc-tri-text);
591
+ font-size: 0.875rem;
592
+ font-weight: 700;
593
+ border: 1px solid var(--pc-tri-primary);
594
+ }
595
+
596
+ .pregnancy-calculator-analogy-tabs {
597
+ display: flex;
598
+ gap: 0.25rem;
599
+ background: var(--pc-bg-muted);
600
+ padding: 0.25rem;
601
+ border-radius: 0.5rem;
602
+ border: 1px solid var(--pc-border);
603
+ }
604
+
605
+ .pregnancy-calculator-at-btn {
606
+ padding: 0.25rem 0.625rem;
607
+ border-radius: 0.375rem;
608
+ border: none;
609
+ background: transparent;
610
+ color: var(--pc-text-muted);
611
+ font-size: 0.75rem;
612
+ font-weight: 500;
613
+ cursor: pointer;
614
+ transition:
615
+ background 0.15s,
616
+ color 0.15s;
617
+ }
618
+
619
+ .pregnancy-calculator-at-btn-active {
620
+ background: var(--pc-bg);
621
+ color: var(--pc-tri-accent);
622
+ box-shadow: 0 1px 3px var(--pc-shadow);
623
+ }
624
+
625
+ .pregnancy-calculator-size-card {
626
+ display: flex;
627
+ align-items: baseline;
628
+ justify-content: space-between;
629
+ background: #f8fafc;
630
+ border-radius: 20px;
631
+ padding: 24px 28px;
632
+ gap: 12px;
633
+ }
634
+
635
+ :global(.theme-dark) .pregnancy-calculator-size-card {
636
+ background: #1a2332;
637
+ }
638
+
639
+ .pregnancy-calculator-size-name {
640
+ font-size: 1.6rem;
641
+ font-weight: 300;
642
+ font-style: italic;
643
+ color: var(--pc-text);
644
+ letter-spacing: -0.01em;
645
+ }
646
+
647
+ :global(.theme-dark) .pregnancy-calculator-size-name {
648
+ color: #f1f5f9;
649
+ }
650
+
651
+ .pregnancy-calculator-size-measure {
652
+ font-size: 0.8rem;
653
+ font-weight: 700;
654
+ color: #94a3b8;
655
+ text-transform: uppercase;
656
+ letter-spacing: 0.08em;
657
+ white-space: nowrap;
658
+ }
659
+
660
+ .pregnancy-calculator-info-stack {
661
+ display: flex;
662
+ flex-direction: column;
663
+ gap: 0.75rem;
664
+ }
665
+
666
+ .pregnancy-calculator-info-block {
667
+ background: #fff;
668
+ border-radius: 16px;
669
+ padding: 18px 20px;
670
+ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
671
+ display: flex;
672
+ flex-direction: column;
673
+ }
674
+
675
+ :global(.theme-dark) .pregnancy-calculator-info-block {
676
+ background: #1a2332;
677
+ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
678
+ }
679
+
680
+ .pregnancy-calculator-info-key {
681
+ font-size: 0.65rem;
682
+ font-weight: 900;
683
+ text-transform: uppercase;
684
+ letter-spacing: 0.14em;
685
+ color: var(--pc-tri-accent);
686
+ margin-bottom: 7px;
687
+ transition: color 0.5s;
688
+ }
689
+
690
+ .pregnancy-calculator-info-text {
691
+ font-size: 0.92rem;
692
+ color: var(--pc-text-muted);
693
+ line-height: 1.75;
694
+ margin: 0;
695
+ font-weight: 500;
696
+ }
697
+
698
+ .pregnancy-calculator-wonder-line {
699
+ font-size: 0.85rem;
700
+ font-style: italic;
701
+ font-weight: 600;
702
+ color: var(--pc-tri-text);
703
+ padding: 12px 16px;
704
+ border-left: 3px solid var(--pc-tri-primary);
705
+ background: var(--pc-tri-bg);
706
+ border-radius: 0 12px 12px 0;
707
+ line-height: 1.6;
708
+ transition:
709
+ background 0.5s,
710
+ color 0.5s,
711
+ border-color 0.5s;
712
+ }
713
+
714
+ .pregnancy-calculator-semaphore {
715
+ display: grid;
716
+ grid-template-columns: 1fr 1fr;
717
+ gap: 0.75rem;
718
+ }
719
+
720
+ .pregnancy-calculator-sema {
721
+ border-radius: 0.625rem;
722
+ padding: 0.75rem;
723
+ display: flex;
724
+ flex-direction: column;
725
+ gap: 0.5rem;
726
+ }
727
+
728
+ .pregnancy-calculator-sema-safe {
729
+ background: var(--pc-safe-bg);
730
+ border: 1px solid rgba(22, 163, 74, 0.2);
731
+ }
732
+
733
+ .pregnancy-calculator-sema-alert {
734
+ background: var(--pc-alert-bg);
735
+ border: 1px solid rgba(234, 88, 12, 0.2);
736
+ }
737
+
738
+ .pregnancy-calculator-sema-title {
739
+ font-size: 0.6875rem;
740
+ font-weight: 700;
741
+ text-transform: uppercase;
742
+ letter-spacing: 0.04em;
743
+ }
744
+
745
+ .pregnancy-calculator-sema-safe .pregnancy-calculator-sema-title {
746
+ color: var(--pc-safe-title);
747
+ }
748
+
749
+ .pregnancy-calculator-sema-alert .pregnancy-calculator-sema-title {
750
+ color: var(--pc-alert-title);
751
+ }
752
+
753
+ .pregnancy-calculator-sema-list {
754
+ list-style: none;
755
+ margin: 0;
756
+ padding: 0;
757
+ display: flex;
758
+ flex-direction: column;
759
+ gap: 0.25rem;
760
+ }
761
+
762
+ .pregnancy-calculator-sema-list li {
763
+ font-size: 0.75rem;
764
+ color: var(--pc-text-muted);
765
+ padding-left: 1rem;
766
+ position: relative;
767
+ line-height: 1.4;
768
+ }
769
+
770
+ .pregnancy-calculator-sema-safe .pregnancy-calculator-sema-list li::before {
771
+ content: "v";
772
+ position: absolute;
773
+ left: 0;
774
+ color: #22c55e;
775
+ font-weight: 900;
776
+ font-size: 0.7rem;
777
+ }
778
+
779
+ .pregnancy-calculator-sema-alert .pregnancy-calculator-sema-list li::before {
780
+ content: "!";
781
+ position: absolute;
782
+ left: 0;
783
+ color: #f97316;
784
+ font-weight: 900;
785
+ font-size: 0.7rem;
786
+ }
787
+
788
+ .pregnancy-calculator-mp-egg {
789
+ display: flex;
790
+ flex-direction: column;
791
+ align-items: center;
792
+ justify-content: center;
793
+ height: 100%;
794
+ min-height: 18rem;
795
+ gap: 14px;
796
+ padding: 48px 32px;
797
+ text-align: center;
798
+ animation: pc-fade-in 0.4s ease-out;
799
+ }
800
+
801
+ .pregnancy-calculator-egg-dot {
802
+ width: 48px;
803
+ height: 48px;
804
+ border-radius: 50%;
805
+ border: 2px dashed #f87171;
806
+ background: #fef2f2;
807
+ animation: pc-egg-spin 6s linear infinite;
808
+ }
809
+
810
+ .pregnancy-calculator-egg-dot[data-reason="too-old"] {
811
+ border-color: #fb923c;
812
+ background: #fff7ed;
813
+ }
814
+
815
+ @keyframes pc-egg-spin {
816
+ from {
817
+ transform: rotate(0deg);
818
+ }
819
+ to {
820
+ transform: rotate(360deg);
821
+ }
822
+ }
823
+
824
+ .pregnancy-calculator-egg-title {
825
+ font-size: 1.2rem;
826
+ font-weight: 800;
827
+ color: var(--pc-text);
828
+ letter-spacing: -0.02em;
829
+ }
830
+
831
+ .pregnancy-calculator-egg-body {
832
+ font-size: 0.92rem;
833
+ color: var(--pc-text-muted);
834
+ max-width: 300px;
835
+ line-height: 1.7;
836
+ font-style: italic;
837
+ margin: 0;
838
+ }
839
+
840
+ .pregnancy-calculator-tl-header {
841
+ padding: 18px 18px 12px;
842
+ font-size: 0.65rem;
843
+ font-weight: 900;
844
+ text-transform: uppercase;
845
+ letter-spacing: 0.15em;
846
+ color: #94a3b8;
847
+ border-bottom: 1px solid var(--pc-border);
848
+ flex-shrink: 0;
849
+ }
850
+
851
+ .pregnancy-calculator-tl-scroll {
852
+ flex: 1;
853
+ min-height: 0;
854
+ overflow-y: auto;
855
+ padding: 12px 14px 20px;
856
+ scrollbar-width: thin;
857
+ scrollbar-color: #e2e8f0 transparent;
858
+ }
859
+
860
+ .pregnancy-calculator-tl-scroll::-webkit-scrollbar {
861
+ width: 3px;
862
+ }
863
+
864
+ .pregnancy-calculator-tl-scroll::-webkit-scrollbar-thumb {
865
+ background: #e2e8f0;
866
+ border-radius: 2px;
867
+ }
868
+
869
+ :global(.theme-dark) .pregnancy-calculator-tl-scroll {
870
+ scrollbar-color: #334155 transparent;
871
+ }
872
+
873
+ :global(.theme-dark) .pregnancy-calculator-tl-scroll::-webkit-scrollbar-thumb {
874
+ background: #334155;
875
+ }
876
+
877
+ :global(.pregnancy-calculator-tl-row) {
878
+ display: flex;
879
+ align-items: flex-start;
880
+ gap: 0.5rem;
881
+ padding: 0.25rem 0.75rem;
882
+ cursor: default;
883
+ transition: background 0.1s;
884
+ }
885
+
886
+ :global(.pregnancy-calculator-tl-row-current) {
887
+ background: var(--pc-tri-bg);
888
+ }
889
+
890
+ :global(.pregnancy-calculator-tl-line-col) {
891
+ display: flex;
892
+ flex-direction: column;
893
+ align-items: center;
894
+ flex-shrink: 0;
895
+ width: 1rem;
896
+ padding-top: 0.2rem;
897
+ }
898
+
899
+ :global(.pregnancy-calculator-tl-dot) {
900
+ width: 0.5rem;
901
+ height: 0.5rem;
902
+ border-radius: 50%;
903
+ background: var(--pc-border);
904
+ flex-shrink: 0;
905
+ transition: background 0.15s;
906
+ }
907
+
908
+ :global(.pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-dot) {
909
+ background: var(--pc-tri-accent);
910
+ }
911
+
912
+ :global(.pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-dot) {
913
+ background: var(--pc-tri-accent);
914
+ box-shadow: 0 0 0 3px var(--pc-tri-glow);
915
+ width: 0.625rem;
916
+ height: 0.625rem;
917
+ }
918
+
919
+ :global(.pregnancy-calculator-tl-line) {
920
+ width: 2px;
921
+ flex: 1;
922
+ min-height: 1.25rem;
923
+ background: var(--pc-border);
924
+ margin-top: 2px;
925
+ }
926
+
927
+ :global(.pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-line) {
928
+ background: var(--pc-tri-primary);
929
+ }
930
+
931
+ :global(.pregnancy-calculator-tl-info) {
932
+ display: flex;
933
+ align-items: baseline;
934
+ gap: 0.375rem;
935
+ min-width: 0;
936
+ }
937
+
938
+ :global(.pregnancy-calculator-tl-num) {
939
+ font-size: 0.75rem;
940
+ font-weight: 700;
941
+ color: var(--pc-text-dim);
942
+ flex-shrink: 0;
943
+ }
944
+
945
+ :global(.pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-num) {
946
+ color: var(--pc-tri-accent);
947
+ }
948
+
949
+ :global(.pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-num) {
950
+ color: var(--pc-tri-accent);
951
+ font-size: 0.875rem;
952
+ }
953
+
954
+ :global(.pregnancy-calculator-tl-label) {
955
+ font-size: 0.6875rem;
956
+ color: var(--pc-text-dim);
957
+ white-space: nowrap;
958
+ overflow: hidden;
959
+ text-overflow: ellipsis;
960
+ }
961
+
962
+ :global(.pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-label) {
963
+ color: var(--pc-tri-text);
964
+ font-weight: 600;
965
+ font-size: 0.75rem;
966
+ }
967
+
968
+ @media (max-width: 900px) {
969
+ .pregnancy-calculator-main {
970
+ grid-template-columns: 1fr;
971
+ }
972
+
973
+ .pregnancy-calculator-center {
974
+ border-right: none;
975
+ border-top: 1px solid var(--pc-border);
976
+ }
977
+
978
+ .pregnancy-calculator-right {
979
+ border-top: 1px solid var(--pc-border);
980
+ height: 16rem;
981
+ }
982
+
983
+ .pregnancy-calculator-tl-inner {
984
+ position: static;
985
+ height: 100%;
986
+ }
987
+
988
+ .pregnancy-calculator-tl-scroll {
989
+ display: flex;
990
+ flex-direction: row;
991
+ overflow-x: auto;
992
+ overflow-y: hidden;
993
+ padding: 0.5rem;
994
+ gap: 0.25rem;
995
+ }
996
+
997
+ :global(.pregnancy-calculator-tl-row) {
998
+ flex-direction: column;
999
+ align-items: center;
1000
+ padding: 0.5rem 0.375rem;
1001
+ min-width: 3rem;
1002
+ }
1003
+
1004
+ :global(.pregnancy-calculator-tl-line-col) {
1005
+ flex-direction: row;
1006
+ width: auto;
1007
+ padding-top: 0;
1008
+ }
1009
+
1010
+ :global(.pregnancy-calculator-tl-line) {
1011
+ width: 1.25rem;
1012
+ height: 2px;
1013
+ min-height: 0;
1014
+ margin-top: 0;
1015
+ margin-left: 2px;
1016
+ }
1017
+
1018
+ :global(.pregnancy-calculator-tl-info) {
1019
+ flex-direction: column;
1020
+ align-items: center;
1021
+ gap: 0.125rem;
1022
+ }
1023
+
1024
+ :global(.pregnancy-calculator-tl-label) {
1025
+ display: none;
1026
+ }
1027
+
1028
+ .pregnancy-calculator-semaphore {
1029
+ grid-template-columns: 1fr;
1030
+ }
1031
+
1032
+ .pregnancy-calculator-left {
1033
+ border-right: none;
1034
+ border-bottom: 1px solid var(--pc-border);
1035
+ }
1036
+ }
1037
+
1038
+ @media (max-width: 600px) {
1039
+ .pregnancy-calculator-header {
1040
+ flex-direction: column;
1041
+ align-items: flex-start;
1042
+ }
1043
+
1044
+ .pregnancy-calculator-method-group {
1045
+ width: 100%;
1046
+ justify-content: stretch;
1047
+ }
1048
+
1049
+ .pregnancy-calculator-method-btn {
1050
+ flex: 1;
1051
+ text-align: center;
1052
+ }
1053
+ }