@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.
@@ -296,558 +296,3 @@ const brands = brandsData.brands;
296
296
  })();
297
297
  </script>
298
298
 
299
- <style>
300
- :global(.bsc-card) {
301
- max-width: 900px;
302
- margin: 0 auto;
303
- background: #fff;
304
- border: 1px solid #e2e8f0;
305
- border-radius: 24px;
306
- overflow: hidden;
307
- box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
308
- }
309
-
310
- :global(.theme-dark .bsc-card) {
311
- background: #0f172a;
312
- border-color: #1e293b;
313
- box-shadow: none;
314
- }
315
-
316
- .bsc-main {
317
- display: grid;
318
- grid-template-columns: 1.15fr 1fr;
319
- }
320
-
321
- .bsc-left {
322
- padding: 2.5rem;
323
- border-right: 1px solid #f1f5f9;
324
- display: flex;
325
- flex-direction: column;
326
- gap: 2rem;
327
- }
328
-
329
- .bsc-right {
330
- padding: 2.5rem;
331
- background: #fbfbfc;
332
- display: flex;
333
- flex-direction: column;
334
- position: relative;
335
- }
336
-
337
- :global(.theme-dark .bsc-left) {
338
- border-right-color: #1e293b;
339
- }
340
-
341
- :global(.theme-dark .bsc-right) {
342
- background: rgba(30, 41, 59, 0.15);
343
- }
344
-
345
- .bsc-section-marker {
346
- display: flex;
347
- align-items: center;
348
- gap: 12px;
349
- font-size: 0.65rem;
350
- font-weight: 950;
351
- text-transform: uppercase;
352
- color: #6366f1;
353
- letter-spacing: 0.15em;
354
- margin-bottom: 0.5rem;
355
- }
356
-
357
- :global(.bsc-section-marker::before) {
358
- content: "";
359
- width: 16px;
360
- height: 2px;
361
- background: currentcolor;
362
- border-radius: 2px;
363
- }
364
-
365
- .bsc-brand-picker {
366
- display: flex;
367
- flex-direction: column;
368
- gap: 1.25rem;
369
- }
370
-
371
- .bsc-select-box {
372
- position: relative;
373
- width: 100%;
374
- }
375
-
376
- :global(.bsc-select-box select) {
377
- width: 100%;
378
- appearance: none;
379
- -webkit-appearance: none;
380
- background: #fff;
381
- border: 2px solid #f1f5f9;
382
- padding: 1rem 3rem 1rem 1.25rem;
383
- border-radius: 16px;
384
- font-size: 1rem;
385
- font-weight: 800;
386
- color: #1e293b;
387
- cursor: pointer;
388
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
389
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
390
- }
391
-
392
- :global(.theme-dark .bsc-select-box select) {
393
- background: #1e293b;
394
- border-color: #334155;
395
- color: #f1f5f9;
396
- }
397
-
398
- :global(.bsc-select-box::after) {
399
- content: "";
400
- position: absolute;
401
- right: 1.25rem;
402
- top: 50%;
403
- transform: translateY(-50%);
404
- width: 1.2rem;
405
- height: 1.2rem;
406
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
407
- background-repeat: no-repeat;
408
- background-size: contain;
409
- pointer-events: none;
410
- }
411
-
412
- .bsc-unit-nav {
413
- display: flex;
414
- background: #f1f5f9;
415
- padding: 4px;
416
- border-radius: 100px;
417
- width: fit-content;
418
- }
419
-
420
- :global(.theme-dark .bsc-unit-nav) {
421
- background: #0f172a;
422
- }
423
-
424
- :global(.bsc-unit-tab) {
425
- padding: 0.4rem 1.1rem;
426
- border-radius: 100px;
427
- border: none;
428
- background: transparent;
429
- font-size: 0.65rem;
430
- font-weight: 900;
431
- color: #94a3b8;
432
- cursor: pointer;
433
- }
434
-
435
- :global(.bsc-unit-active) {
436
- background: #fff;
437
- color: #6366f1;
438
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
439
- }
440
-
441
- :global(.theme-dark .bsc-unit-active) {
442
- background: #1e293b;
443
- color: #818cf8;
444
- }
445
-
446
- .bsc-num-ctrl {
447
- display: flex;
448
- flex-direction: column;
449
- gap: 0.75rem;
450
- }
451
-
452
- .bsc-num-label {
453
- font-size: 0.825rem;
454
- font-weight: 850;
455
- color: #64748b;
456
- margin-bottom: 0;
457
- }
458
-
459
- .bsc-stepper-box {
460
- display: flex;
461
- align-items: center;
462
- background: #f8fafc;
463
- border: 1.5px solid #f1f5f9;
464
- padding: 0.4rem;
465
- border-radius: 18px;
466
- gap: 1rem;
467
- }
468
-
469
- :global(.theme-dark .bsc-stepper-box) {
470
- background: #0f172a;
471
- border-color: #1e293b;
472
- }
473
-
474
- :global(.bsc-btn-step) {
475
- width: 44px;
476
- height: 44px;
477
- border: none;
478
- background: #fff;
479
- border-radius: 12px;
480
- color: #1e293b;
481
- font-size: 1.5rem;
482
- font-weight: 300;
483
- cursor: pointer;
484
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
485
- display: flex;
486
- align-items: center;
487
- justify-content: center;
488
- }
489
-
490
- :global(.theme-dark .bsc-btn-step) {
491
- background: #1e293b;
492
- color: #fff;
493
- border: 1px solid #334155;
494
- }
495
-
496
- .bsc-val-view {
497
- flex: 1;
498
- text-align: center;
499
- display: flex;
500
- flex-direction: column;
501
- }
502
-
503
- .bsc-val-big {
504
- font-size: 1.6rem;
505
- font-weight: 950;
506
- color: #0f172a;
507
- line-height: 1;
508
- }
509
-
510
- :global(.theme-dark .bsc-val-big) {
511
- color: #f1f5f9;
512
- }
513
-
514
- .bsc-val-sub {
515
- font-size: 0.6rem;
516
- font-weight: 900;
517
- color: #cbd5e1;
518
- text-transform: uppercase;
519
- margin-top: 2px;
520
- }
521
-
522
- :global(.bsc-slider) {
523
- width: 100%;
524
- appearance: none;
525
- -webkit-appearance: none;
526
- height: 4px;
527
- background: #f1f5f9;
528
- border-radius: 100px;
529
- margin-top: 4px;
530
- }
531
-
532
- :global(.bsc-slider::-webkit-slider-thumb) {
533
- -webkit-appearance: none;
534
- width: 18px;
535
- height: 18px;
536
- background: #6366f1;
537
- border: 3px solid #fff;
538
- border-radius: 50%;
539
- cursor: pointer;
540
- }
541
-
542
- .bsc-age-rack {
543
- display: grid;
544
- grid-template-columns: repeat(4, 1fr);
545
- gap: 6px;
546
- background: #f1f5f9;
547
- padding: 6px;
548
- border-radius: 16px;
549
- }
550
-
551
- :global(.theme-dark .bsc-age-rack) {
552
- background: #0f172a;
553
- }
554
-
555
- :global(.bsc-age-tile) {
556
- padding: 1rem 0.25rem;
557
- border: none;
558
- background: transparent;
559
- border-radius: 12px;
560
- font-size: 0.75rem;
561
- font-weight: 950;
562
- color: #94a3b8;
563
- cursor: pointer;
564
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
565
- }
566
-
567
- :global(.bsc-age-active) {
568
- background: #fff;
569
- color: #4f46e5;
570
- box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
571
- transform: translateY(-1px);
572
- }
573
-
574
- :global(.theme-dark .bsc-age-active) {
575
- background: #1e293b;
576
- color: #818cf8;
577
- }
578
-
579
- .bsc-res-header {
580
- text-align: center;
581
- margin-bottom: 2.25rem;
582
- display: flex;
583
- flex-direction: column;
584
- align-items: center;
585
- }
586
-
587
- .bsc-res-size-main {
588
- display: block;
589
- font-size: 4.5rem;
590
- font-weight: 950;
591
- color: #0f172a;
592
- line-height: 1;
593
- letter-spacing: -0.05em;
594
- margin: 0.25rem 0 0.75rem;
595
- }
596
-
597
- :global(.theme-dark .bsc-res-size-main) {
598
- color: #f1f5f9;
599
- }
600
-
601
- .bsc-res-brand-hint {
602
- font-size: 0.75rem;
603
- font-weight: 950;
604
- color: #cbd5e1;
605
- text-transform: uppercase;
606
- letter-spacing: 0.1em;
607
- display: block;
608
- }
609
-
610
- .bsc-share-btn {
611
- position: absolute;
612
- right: 1.5rem;
613
- top: 1.5rem;
614
- background: transparent;
615
- border: none;
616
- padding: 0.6rem;
617
- color: #cbd5e1;
618
- cursor: pointer;
619
- transition: all 0.2s;
620
- border-radius: 50%;
621
- display: flex;
622
- align-items: center;
623
- justify-content: center;
624
- z-index: 10;
625
- }
626
-
627
- .bsc-share-btn:hover {
628
- color: #6366f1;
629
- background: rgba(99, 102, 241, 0.05);
630
- }
631
-
632
- .bsc-fit-label {
633
- display: inline-flex;
634
- padding: 0.4rem 1.25rem;
635
- background: #fff;
636
- border: 1.5px solid #f1f5f9;
637
- border-radius: 100px;
638
- font-size: 0.75rem;
639
- font-weight: 950;
640
- color: #64748b;
641
- }
642
-
643
- .bsc-fit-large {
644
- border-color: #10b981;
645
- color: #059669;
646
- }
647
-
648
- .bsc-fit-small {
649
- border-color: #f43f5e;
650
- color: #dc2626;
651
- }
652
-
653
- .bsc-equivalents-box {
654
- border-radius: 16px;
655
- width: 100%;
656
- border: 1px solid transparent;
657
- }
658
-
659
- .bsc-eq-head-row {
660
- display: grid;
661
- grid-template-columns: 1fr auto;
662
- padding: 0.5rem 0.5rem 0.85rem;
663
- border-bottom: 2px solid #f8fafc;
664
- }
665
-
666
- :global(.theme-dark .bsc-eq-head-row) {
667
- border-bottom-color: #1e293b;
668
- }
669
-
670
- .bsc-eq-col-name {
671
- font-size: 0.6rem;
672
- font-weight: 950;
673
- color: #cbd5e1;
674
- text-transform: uppercase;
675
- letter-spacing: 0.05em;
676
- }
677
-
678
- .bsc-eq-data-list {
679
- display: flex;
680
- flex-direction: column;
681
- width: 100%;
682
- }
683
-
684
- :global(.bsc-eq-data-row) {
685
- display: flex;
686
- justify-content: space-between;
687
- align-items: center;
688
- padding: 0.9rem 0.5rem;
689
- border-bottom: 1px solid rgba(241, 245, 249, 0.4);
690
- }
691
-
692
- :global(.theme-dark .bsc-eq-data-row) {
693
- border-bottom-color: rgba(30, 41, 59, 0.5);
694
- }
695
-
696
- :global(.bsc-eq-data-row:last-child) {
697
- border-bottom: none;
698
- }
699
-
700
- :global(.bsc-eq-brand-v) {
701
- display: flex;
702
- flex-direction: column;
703
- gap: 0;
704
- }
705
-
706
- :global(.bsc-eq-brand-name) {
707
- font-size: 0.95rem;
708
- font-weight: 900;
709
- color: #1e293b;
710
- }
711
-
712
- :global(.theme-dark .bsc-eq-brand-name) {
713
- color: #f1f5f9;
714
- }
715
-
716
- :global(.bsc-eq-fit-v) {
717
- font-size: 0.525rem;
718
- font-weight: 900;
719
- text-transform: uppercase;
720
- color: #cbd5e1;
721
- letter-spacing: 0.02em;
722
- }
723
-
724
- :global(.bsc-eq-fit-large) {
725
- color: #10b981;
726
- }
727
-
728
- :global(.bsc-eq-fit-small) {
729
- color: #f43f5e;
730
- }
731
-
732
- :global(.bsc-eq-size-v) {
733
- font-size: 1.25rem;
734
- font-weight: 950;
735
- color: #4f46e5;
736
- }
737
-
738
- :global(.theme-dark .bsc-eq-size-v) {
739
- color: #818cf8;
740
- }
741
-
742
- .bsc-clothes-meta {
743
- margin-top: auto;
744
- padding-top: 2rem;
745
- border-top: 1px dashed #e2e8f0;
746
- }
747
-
748
- :global(.theme-dark .bsc-clothes-meta) {
749
- border-top-color: #334155;
750
- }
751
-
752
- .bsc-meta-title {
753
- font-size: 0.6rem;
754
- font-weight: 950;
755
- color: #cbd5e1;
756
- text-transform: uppercase;
757
- text-align: center;
758
- margin-bottom: 1rem;
759
- display: block;
760
- }
761
-
762
- .bsc-meta-vals {
763
- display: grid;
764
- grid-template-columns: 1fr 1fr;
765
- gap: 1rem;
766
- }
767
-
768
- .bsc-meta-cell {
769
- text-align: center;
770
- }
771
-
772
- :global(.bsc-meta-cell label) {
773
- font-size: 0.55rem;
774
- font-weight: 950;
775
- color: #94a3b8;
776
- display: block;
777
- margin-bottom: 2px;
778
- }
779
-
780
- :global(.bsc-meta-cell span) {
781
- font-size: 1.1rem;
782
- font-weight: 950;
783
- color: #1e293b;
784
- }
785
-
786
- :global(.theme-dark .bsc-meta-cell span) {
787
- color: #f1f5f9;
788
- }
789
-
790
- .bsc-pro-tip-footer {
791
- background: #0f172a;
792
- padding: 2.25rem 2.5rem;
793
- color: #fff;
794
- display: flex;
795
- gap: 1.5rem;
796
- align-items: flex-start;
797
- }
798
-
799
- .bsc-footer-icon {
800
- font-size: 2.5rem;
801
- flex-shrink: 0;
802
- line-height: 1;
803
- color: #6366f1;
804
- }
805
-
806
- .bsc-footer-text {
807
- display: flex;
808
- flex-direction: column;
809
- gap: 0.4rem;
810
- }
811
-
812
- :global(.bsc-footer-text h5) {
813
- font-size: 1rem;
814
- font-weight: 950;
815
- color: #fff;
816
- margin: 0;
817
- }
818
-
819
- :global(.bsc-footer-text p) {
820
- font-size: 0.85rem;
821
- color: #94a3b8;
822
- line-height: 1.6;
823
- margin: 0;
824
- }
825
-
826
- :global(.bsc-footer-text strong) {
827
- color: #6366f1;
828
- }
829
-
830
- @media (max-width: 850px) {
831
- .bsc-main {
832
- grid-template-columns: 1fr;
833
- }
834
-
835
- .bsc-left {
836
- border-right: none;
837
- border-bottom: 1px solid #f1f5f9;
838
- padding: 1.75rem;
839
- }
840
-
841
- .bsc-right {
842
- padding: 1.75rem;
843
- }
844
-
845
- .bsc-res-size-main {
846
- font-size: 3.5rem;
847
- }
848
-
849
- .bsc-age-rack {
850
- grid-template-columns: repeat(3, 1fr);
851
- }
852
- }
853
- </style>