@godxjp/ui 33.24.0 → 33.25.1

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.
Files changed (88) hide show
  1. package/README.md +14 -3
  2. package/agent/START-HERE.md +5 -5
  3. package/agent/components/CatalogDetail.json +7 -3
  4. package/agent/components/DatePicker.json +1 -1
  5. package/agent/components/DropdownMenu.json +1 -0
  6. package/agent/components/EditorialCard.json +2 -1
  7. package/agent/components/Image.json +6 -1
  8. package/agent/components/Pagination.json +5 -0
  9. package/agent/components/Popover.json +1 -0
  10. package/agent/components/Select.json +2 -1
  11. package/agent/components/Toaster.json +1 -1
  12. package/agent/components.json +26 -8
  13. package/agent/index.json +5 -5
  14. package/agent/llms.txt +6 -6
  15. package/agent/patterns/notice-bar.json +16 -0
  16. package/agent/patterns-index.json +15 -0
  17. package/agent/patterns.json +16 -0
  18. package/agent/rules.json +2 -2
  19. package/agent/tokens.json +37 -7
  20. package/dist/components/charts/chart-cartesian.js +5 -1
  21. package/dist/components/charts/chart-summary.d.ts +1 -1
  22. package/dist/components/charts/chart-summary.js +17 -6
  23. package/dist/components/charts/compact-bar-trend.js +4 -3
  24. package/dist/components/charts/pie-chart.js +2 -1
  25. package/dist/components/data-display/image.d.ts +1 -0
  26. package/dist/components/data-display/image.js +9 -1
  27. package/dist/components/data-display/popover.js +11 -0
  28. package/dist/components/data-entry/calendar.js +1 -1
  29. package/dist/components/data-entry/date-picker.js +22 -5
  30. package/dist/components/general/button.js +2 -2
  31. package/dist/components/layout/affix.js +20 -4
  32. package/dist/components/layout/editorial-catalog.d.ts +1 -1
  33. package/dist/components/layout/editorial-catalog.js +53 -15
  34. package/dist/components/navigation/dropdown-menu.d.ts +13 -3
  35. package/dist/components/navigation/dropdown-menu.js +36 -6
  36. package/dist/components/navigation/pagination.d.ts +1 -1
  37. package/dist/components/navigation/pagination.js +13 -1
  38. package/dist/contracts/measurement.json +1 -1
  39. package/dist/i18n/messages/en.json +1 -0
  40. package/dist/i18n/messages/ja.json +1 -0
  41. package/dist/i18n/messages/vi.json +1 -0
  42. package/dist/props/components/data-display.prop.d.ts +2 -0
  43. package/dist/props/components/layout.prop.d.ts +7 -2
  44. package/dist/props/components/navigation.prop.d.ts +3 -0
  45. package/dist/props/registry.d.ts +15 -3
  46. package/dist/props/registry.js +18 -1
  47. package/dist/styles/application.css +24 -0
  48. package/dist/styles/base.css +11 -0
  49. package/dist/styles/control.css +32 -19
  50. package/dist/styles/core.css +1 -0
  51. package/dist/styles/data-display-layout.css +7 -0
  52. package/dist/styles/dialog-layout.css +9 -0
  53. package/dist/styles/editorial-layout.css +2076 -0
  54. package/dist/styles/editorial.css +3 -0
  55. package/dist/styles/index.css +1 -0
  56. package/dist/styles/layers.json +39 -8
  57. package/dist/styles/layout.css +6 -1987
  58. package/dist/styles/precompiled/alert-layout.css +2 -0
  59. package/dist/styles/precompiled/badge-layout.css +2 -0
  60. package/dist/styles/precompiled/base.css +2 -0
  61. package/dist/styles/precompiled/card-layout.css +2 -0
  62. package/dist/styles/precompiled/chart-layout.css +2 -0
  63. package/dist/styles/precompiled/control.css +2 -0
  64. package/dist/styles/precompiled/data-display-layout.css +2 -0
  65. package/dist/styles/precompiled/data-entry-layout.css +2 -0
  66. package/dist/styles/precompiled/dialog-layout.css +2 -0
  67. package/dist/styles/precompiled/editorial-account-layout.css +2 -0
  68. package/dist/styles/precompiled/editorial-layout.css +2 -0
  69. package/dist/styles/precompiled/float-button-layout.css +2 -0
  70. package/dist/styles/precompiled/form-layout.css +2 -0
  71. package/dist/styles/precompiled/icon-layout.css +2 -0
  72. package/dist/styles/precompiled/layout.css +2 -0
  73. package/dist/styles/precompiled/logo-layout.css +2 -0
  74. package/dist/styles/precompiled/motion.css +2 -0
  75. package/dist/styles/precompiled/navigation-layout.css +2 -0
  76. package/dist/styles/precompiled/shell-layout.css +2 -0
  77. package/dist/styles/precompiled/table-layout.css +2 -0
  78. package/dist/styles/precompiled/text-layout.css +2 -0
  79. package/dist/styles/precompiled/toggle.css +2 -0
  80. package/dist/styles/precompiled/vendor-day-picker.css +2 -0
  81. package/dist/styles/precompiled/vendor-sonner.css +2 -0
  82. package/dist/styles.css +1 -1
  83. package/dist/tokens/components/control.css +3 -0
  84. package/dist/tokens/components/editorial.css +9 -6
  85. package/docs/CONSUMER-RULES.md +35 -0
  86. package/package.json +4 -2
  87. package/scripts/prune-css.mjs +56 -8
  88. package/scripts/ui-audit.mjs +36 -0
@@ -2515,6 +2515,12 @@
2515
2515
  inline-size: var(--affix-content-inline-size, auto);
2516
2516
  }
2517
2517
 
2518
+ .ui-affix-content[data-affixed][data-clamped] {
2519
+ max-block-size: var(--affix-content-max-block-size, none);
2520
+ overflow-y: auto;
2521
+ overscroll-behavior: contain;
2522
+ }
2523
+
2518
2524
  .ui-affix-content[data-affixed][data-edge="block-start"] {
2519
2525
  inset-block-start: calc(var(--affix-target-inset, 0px) + var(--affix-inset-block-start));
2520
2526
  }
@@ -2555,1991 +2561,4 @@
2555
2561
  gap: var(--responsive-grid-panels-gap);
2556
2562
  }
2557
2563
 
2558
- .ui-editorial-section {
2559
- display: block;
2560
- position: relative;
2561
- }
2562
-
2563
- .ui-editorial-section-content {
2564
- width: calc(100% - 2 * var(--editorial-section-inset-inline));
2565
- max-width: var(--editorial-section-max-width);
2566
- margin-inline: auto;
2567
- }
2568
-
2569
- .ui-editorial-section[data-spacing="section"] > .ui-editorial-section-content {
2570
- padding-block: var(--editorial-section-padding-block);
2571
- }
2572
-
2573
- .ui-editorial-section[data-tone="surface"] {
2574
- background: var(--editorial-section-surface-background, hsl(var(--card)));
2575
- }
2576
-
2577
- .ui-editorial-section[data-tone="subtle"] {
2578
- background: var(--editorial-section-subtle-background, hsl(var(--muted)));
2579
- }
2580
-
2581
- .ui-editorial-section[data-tone="hero"] {
2582
- overflow: hidden;
2583
- background: var(
2584
- --editorial-section-hero-background,
2585
- linear-gradient(110deg, hsl(var(--background)) 35%, hsl(var(--muted)))
2586
- );
2587
- }
2588
-
2589
- .ui-editorial-section[data-divider="end"] {
2590
- border-block-end: var(--editorial-section-border-width) solid
2591
- var(--editorial-section-border-color, hsl(var(--border)));
2592
- }
2593
-
2594
- .ui-editorial-section[data-divider="both"] {
2595
- border-block: var(--editorial-section-border-width) solid
2596
- var(--editorial-section-border-color, hsl(var(--border)));
2597
- }
2598
-
2599
- .ui-editorial-hero {
2600
- display: grid;
2601
- grid-template-columns: var(--editorial-hero-track-size);
2602
- align-items: center;
2603
- gap: var(--editorial-hero-gap);
2604
- min-height: var(--editorial-hero-min-height);
2605
- padding-block: var(--editorial-hero-padding-block-start) var(--editorial-hero-padding-block-end);
2606
- }
2607
-
2608
- .ui-editorial-hero-copy {
2609
- --editorial-eyebrow-align: var(--editorial-hero-copy-align);
2610
- --editorial-eyebrow-letter-spacing: var(--editorial-hero-kicker-letter-spacing);
2611
- position: relative;
2612
- z-index: 2;
2613
- min-width: 0;
2614
- padding-block: var(--editorial-hero-copy-padding-block);
2615
- text-align: var(--editorial-hero-copy-align);
2616
- }
2617
-
2618
- .ui-editorial-hero-title {
2619
- margin: var(--editorial-hero-title-space-block-start) 0
2620
- var(--editorial-hero-title-space-block-end);
2621
- font-family: var(--font-family-editorial, var(--font-family-display));
2622
- font-size: var(--editorial-hero-title-font-size);
2623
- font-weight: var(--editorial-hero-title-font-weight);
2624
- line-height: var(--editorial-hero-title-line-height);
2625
- letter-spacing: var(--editorial-hero-title-letter-spacing);
2626
- }
2627
-
2628
- .ui-editorial-hero-description {
2629
- max-width: var(--editorial-hero-description-max-width);
2630
- margin: 0;
2631
- margin-inline: var(--editorial-hero-copy-space-inline);
2632
- color: hsl(var(--muted-foreground));
2633
- font-size: var(--editorial-hero-description-font-size);
2634
- line-height: var(--editorial-hero-description-line-height);
2635
- }
2636
-
2637
- .ui-editorial-hero-search {
2638
- max-width: var(--editorial-hero-search-max-width);
2639
- margin-block-start: var(--editorial-hero-search-space-block-start);
2640
- margin-inline: var(--editorial-hero-copy-space-inline);
2641
- text-align: start;
2642
- }
2643
-
2644
- .ui-editorial-hero-footer {
2645
- display: flex;
2646
- flex-wrap: wrap;
2647
- align-items: center;
2648
- justify-content: var(--editorial-hero-copy-align);
2649
- gap: var(--editorial-hero-footer-gap);
2650
- margin-block-start: var(--editorial-hero-footer-space-block-start);
2651
- color: hsl(var(--muted-foreground));
2652
- font-size: var(--editorial-hero-footer-font-size);
2653
- }
2654
-
2655
- .ui-editorial-hero-footer a {
2656
- display: inline-flex;
2657
- align-items: center;
2658
- min-height: var(--editorial-hero-footer-link-min-height);
2659
- color: inherit;
2660
- text-decoration-line: underline;
2661
- text-decoration-color: hsl(var(--input));
2662
- text-underline-offset: var(--editorial-hero-footer-link-offset);
2663
- }
2664
-
2665
- .ui-editorial-hero-media {
2666
- position: relative;
2667
- width: 100%;
2668
- min-width: 0;
2669
- max-width: var(--editorial-hero-media-max-width);
2670
- margin-block-start: var(--editorial-hero-media-space-block-start);
2671
- margin-inline: var(--editorial-hero-copy-space-inline);
2672
- }
2673
-
2674
- .ui-editorial-eyebrow {
2675
- display: flex;
2676
- align-items: center;
2677
- justify-content: var(--editorial-eyebrow-align);
2678
- gap: var(--editorial-eyebrow-gap);
2679
- margin: 0;
2680
- color: var(--editorial-kicker-color, hsl(var(--muted-foreground)));
2681
- font-family: var(--editorial-kicker-font-family, var(--font-family-tabular, inherit));
2682
- font-size: var(--editorial-eyebrow-font-size);
2683
- font-weight: var(--editorial-eyebrow-font-weight);
2684
- line-height: var(--editorial-eyebrow-line-height);
2685
- letter-spacing: var(--editorial-eyebrow-letter-spacing);
2686
- }
2687
-
2688
- .ui-editorial-eyebrow[data-variant="ruled"]::before {
2689
- content: "";
2690
- width: var(--editorial-eyebrow-rule-width);
2691
- height: var(--editorial-eyebrow-rule-height);
2692
- background: var(--editorial-ornament-color, hsl(var(--border)));
2693
- }
2694
-
2695
- .ui-editorial-section-head {
2696
- display: flex;
2697
- align-items: var(--editorial-section-head-align);
2698
- justify-content: space-between;
2699
- gap: var(--editorial-section-head-gap);
2700
- margin-block-end: var(--editorial-section-head-space-block-end);
2701
- }
2702
-
2703
- .ui-editorial-section-head[data-scale="module"] {
2704
- --editorial-section-head-align: var(--editorial-section-head-module-align);
2705
- --editorial-section-head-space-block-end: var(--editorial-section-head-module-space-block-end);
2706
- --editorial-eyebrow-line-height: var(--editorial-section-head-module-kicker-line-height);
2707
- --editorial-eyebrow-letter-spacing: var(--editorial-section-head-module-kicker-letter-spacing);
2708
- --editorial-section-head-title-font-size: var(--editorial-section-head-module-title-font-size);
2709
- --editorial-section-head-title-line-height: var(
2710
- --editorial-section-head-module-title-line-height
2711
- );
2712
- --editorial-section-head-title-space-block-start: var(
2713
- --editorial-section-head-module-title-space-block-start
2714
- );
2715
-
2716
- --editorial-section-head-description-font-size: var(--editorial-section-head-module-description-font-size);
2717
- --editorial-section-head-description-space-block-start: var(
2718
- --editorial-section-head-module-description-space-block-start
2719
- );
2720
- }
2721
-
2722
- .ui-editorial-section-head-copy {
2723
- min-width: 0;
2724
- }
2725
-
2726
- .ui-editorial-section-head-title {
2727
- margin: var(--editorial-section-head-title-space-block-start) 0 0;
2728
- font-family: var(--font-family-editorial, var(--font-family-display));
2729
- font-size: var(--editorial-section-head-title-font-size);
2730
- font-weight: var(--font-weight-semibold);
2731
- line-height: var(--editorial-section-head-title-line-height);
2732
- letter-spacing: var(--editorial-section-head-title-letter-spacing);
2733
- }
2734
-
2735
- .ui-editorial-section-head-description {
2736
- margin: var(--editorial-section-head-description-space-block-start) 0 0;
2737
- color: hsl(var(--muted-foreground));
2738
- font-size: var(--editorial-section-head-description-font-size);
2739
- }
2740
-
2741
- .ui-editorial-section-head-action {
2742
- flex: none;
2743
- max-width: var(--editorial-section-head-action-max-width);
2744
- margin-block-start: var(--editorial-section-head-action-space-block-start);
2745
- }
2746
-
2747
- .ui-editorial-breadcrumb {
2748
- padding-block-start: var(--editorial-breadcrumb-padding-block-start);
2749
- line-height: var(--editorial-breadcrumb-line-height);
2750
- }
2751
-
2752
- .ui-editorial-breadcrumb .ui-breadcrumb-list {
2753
- column-gap: var(--editorial-breadcrumb-gap);
2754
- }
2755
-
2756
- .ui-editorial-breadcrumb .ui-breadcrumb-item {
2757
- gap: var(--editorial-breadcrumb-gap);
2758
- }
2759
-
2760
- .ui-editorial-page-header-row {
2761
- display: var(--editorial-page-header-row-display);
2762
- align-items: flex-end;
2763
- justify-content: space-between;
2764
- gap: var(--editorial-page-header-row-gap);
2765
- padding-block: var(--editorial-page-header-padding-block-start)
2766
- var(--editorial-page-header-padding-block-end);
2767
- }
2768
-
2769
- .ui-editorial-page-header-copy {
2770
- min-width: 0;
2771
- }
2772
-
2773
- .ui-editorial-page-header-copy:has(> .ui-editorial-page-header-search) {
2774
- flex: 1 1 auto;
2775
- }
2776
-
2777
- .ui-editorial-page-header-search {
2778
- --editorial-search-button-icon-display: var(--editorial-page-header-search-button-icon-display);
2779
- max-width: var(--editorial-page-header-search-max-width);
2780
- margin-block-start: var(--editorial-page-header-search-space-block-start);
2781
- }
2782
-
2783
- .ui-editorial-page-header-copy > .ui-editorial-eyebrow {
2784
- color: var(
2785
- --editorial-page-header-kicker-color,
2786
- var(--editorial-kicker-color, hsl(var(--muted-foreground)))
2787
- );
2788
- font-size: var(--editorial-page-header-kicker-font-size);
2789
- }
2790
-
2791
- .ui-editorial-page-header-title {
2792
- overflow-wrap: anywhere;
2793
- margin: var(--editorial-page-header-title-space-block-start) 0
2794
- var(--editorial-page-header-title-space-block-end);
2795
- font-family: var(--font-family-editorial, var(--font-family-display));
2796
- font-size: var(--editorial-page-header-title-font-size);
2797
- font-weight: var(--font-weight-semibold);
2798
- line-height: var(--editorial-page-header-title-line-height);
2799
- letter-spacing: var(--editorial-page-header-title-letter-spacing);
2800
- text-wrap: balance;
2801
- }
2802
-
2803
- .ui-editorial-page-header .ui-editorial-page-header-title:lang(ja) {
2804
- word-break: var(--editorial-page-header-title-line-breaking);
2805
- }
2806
-
2807
- .ui-editorial-page-header-description {
2808
- max-width: var(--editorial-page-header-description-max-width);
2809
- margin: 0;
2810
- color: hsl(var(--muted-foreground));
2811
- font-size: var(--editorial-page-header-description-font-size);
2812
- line-height: var(--editorial-page-header-description-line-height);
2813
- }
2814
-
2815
- .ui-editorial-page-header-actions {
2816
- flex: none;
2817
- margin-block-start: var(--editorial-page-header-actions-space-block-start);
2818
- }
2819
-
2820
- .ui-editorial-article {
2821
-
2822
- --editorial-text-link-font-size: var(--editorial-article-link-font-size);
2823
- --editorial-text-link-gap: var(--editorial-article-link-gap);
2824
- --editorial-text-link-line-height: var(--editorial-article-link-line-height);
2825
- --editorial-text-link-icon-size: var(--editorial-article-link-icon-size);
2826
- --editorial-text-link-align: start;
2827
- display: block;
2828
- max-width: var(--editorial-article-max-width);
2829
- margin-inline: auto;
2830
- padding-block: var(--editorial-article-padding-block-start)
2831
- var(--editorial-article-padding-block-end);
2832
- }
2833
-
2834
- .ui-editorial-article > .ui-editorial-eyebrow {
2835
- font-size: var(--editorial-article-kicker-font-size);
2836
- margin-block-end: var(--editorial-article-kicker-space-block-end);
2837
- line-height: var(--editorial-article-kicker-line-height);
2838
- }
2839
-
2840
- .ui-editorial-article-title {
2841
- overflow-wrap: anywhere;
2842
- margin: var(--editorial-article-title-space-block) 0;
2843
- font-family: var(--font-family-editorial, var(--font-family-display));
2844
- font-size: var(--editorial-article-title-font-size);
2845
- font-weight: var(--font-weight-semibold);
2846
- line-height: var(--editorial-article-title-line-height);
2847
- letter-spacing: var(--editorial-article-title-letter-spacing);
2848
- }
2849
-
2850
- .ui-editorial-article .ui-editorial-article-title:lang(ja) {
2851
- word-break: var(--editorial-article-title-line-breaking);
2852
- }
2853
-
2854
- .ui-editorial-article-intro {
2855
- margin: 0 0 var(--editorial-article-intro-space-block-end);
2856
- padding-block-end: var(--editorial-article-intro-padding-block-end);
2857
- border-block-end: var(--stroke-hairline) solid hsl(var(--border));
2858
- color: hsl(var(--muted-foreground));
2859
- font-size: var(--editorial-article-intro-font-size);
2860
- line-height: var(--editorial-article-intro-line-height);
2861
- }
2862
-
2863
- .ui-editorial-article-section {
2864
- display: block;
2865
- }
2866
-
2867
- .ui-editorial-article-heading {
2868
- margin: var(--editorial-article-heading-space-block-start) 0
2869
- var(--editorial-article-heading-space-block-end);
2870
- font-family: var(--font-family-editorial, var(--font-family-display));
2871
- font-size: var(--editorial-article-heading-font-size);
2872
- font-weight: var(--font-weight-semibold);
2873
- line-height: var(--editorial-article-heading-line-height);
2874
- letter-spacing: var(--editorial-article-heading-letter-spacing);
2875
- }
2876
-
2877
- .ui-editorial-article-paragraph {
2878
- margin: 0 0 var(--editorial-article-paragraph-space-block-end);
2879
- font-size: var(--editorial-article-paragraph-font-size);
2880
- line-height: var(--editorial-article-paragraph-line-height);
2881
- }
2882
-
2883
- .ui-editorial-note {
2884
- margin-block: var(--editorial-note-space-block);
2885
- padding: var(--editorial-note-padding-block) var(--editorial-note-padding-inline);
2886
- border-inline-start: var(--editorial-note-rule-width) solid
2887
- var(--editorial-ornament-color, hsl(var(--border)));
2888
- background: var(--editorial-note-background, hsl(var(--muted)));
2889
- font-size: var(--editorial-note-font-size);
2890
- }
2891
-
2892
- .ui-editorial-panel {
2893
- display: block;
2894
- min-width: 0;
2895
- padding: var(--editorial-panel-padding);
2896
- border: var(--editorial-panel-border-width) solid hsl(var(--border));
2897
- border-radius: var(--editorial-panel-radius);
2898
- background: var(--editorial-panel-background, hsl(var(--card)));
2899
- }
2900
-
2901
- .ui-editorial-panel-tag {
2902
- display: inline-flex;
2903
- align-items: center;
2904
- min-height: var(--editorial-panel-tag-min-height);
2905
- padding: var(--editorial-panel-tag-padding-block) var(--editorial-panel-tag-padding-inline);
2906
- border: var(--stroke-hairline) solid hsl(var(--border));
2907
- border-radius: var(--editorial-panel-tag-radius);
2908
- color: var(--editorial-kicker-color, hsl(var(--muted-foreground)));
2909
- font-size: var(--editorial-panel-tag-font-size);
2910
- font-weight: var(--editorial-panel-tag-font-weight);
2911
- line-height: var(--editorial-panel-tag-line-height);
2912
- }
2913
-
2914
- .ui-editorial-panel-title {
2915
- margin-block: var(--editorial-panel-title-space-block);
2916
- font-family: var(--font-family-editorial, var(--font-family-display));
2917
- font-size: var(--editorial-panel-title-font-size);
2918
- font-weight: var(--font-weight-semibold);
2919
- line-height: var(--editorial-panel-title-line-height);
2920
- letter-spacing: var(--editorial-article-heading-letter-spacing);
2921
- }
2922
-
2923
- .ui-editorial-panel-list {
2924
- margin-block: var(--editorial-panel-list-space-block);
2925
- margin-inline: 0;
2926
- padding-inline-start: var(--editorial-panel-list-padding-inline-start);
2927
- color: hsl(var(--muted-foreground));
2928
- font-size: var(--editorial-panel-item-font-size);
2929
- list-style: disc;
2930
- }
2931
-
2932
- .ui-editorial-text-link {
2933
- display: inline-flex;
2934
- align-items: center;
2935
- gap: var(--editorial-text-link-gap);
2936
- min-height: var(--editorial-text-link-min-height);
2937
- color: hsl(var(--text-brand, var(--primary)));
2938
- font-size: var(--editorial-text-link-font-size);
2939
- font-weight: var(--editorial-text-link-font-weight);
2940
- line-height: var(--editorial-text-link-line-height);
2941
- text-align: var(--editorial-text-link-align);
2942
- text-decoration: none;
2943
- }
2944
-
2945
- .ui-editorial-text-link:hover {
2946
- text-decoration-line: underline;
2947
- text-underline-offset: var(--editorial-text-link-underline-offset);
2948
- }
2949
-
2950
- .ui-editorial-text-link-icon {
2951
- flex: none;
2952
- width: var(--editorial-text-link-icon-size);
2953
- height: var(--editorial-text-link-icon-size);
2954
- }
2955
-
2956
- .ui-editorial-search {
2957
- display: flex;
2958
- align-items: center;
2959
- gap: var(--editorial-search-gap);
2960
- min-height: var(--editorial-search-min-height);
2961
- padding: var(--editorial-search-padding-block) var(--editorial-search-padding-inline-end)
2962
- var(--editorial-search-padding-block) var(--editorial-search-padding-inline-start);
2963
- border: var(--editorial-search-border-width) solid
2964
- var(--editorial-search-border-color, hsl(var(--input)));
2965
- border-radius: var(--editorial-search-radius);
2966
- background: var(--editorial-search-background, hsl(var(--card)));
2967
- box-shadow: var(--editorial-search-shadow);
2968
- }
2969
-
2970
- .ui-editorial-search-scope {
2971
-
2972
- --control-radius: 0px;
2973
- --control-trigger-radius-start: 0px;
2974
- --control-trigger-radius-end: 0px;
2975
- display: flex;
2976
- flex: none;
2977
- align-self: stretch;
2978
- align-items: stretch;
2979
- max-width: var(--editorial-search-scope-max-width);
2980
- margin-block: calc(-1 * var(--editorial-search-padding-block));
2981
- margin-inline-start: calc(-1 * var(--editorial-search-padding-inline-start));
2982
- border-inline-end: var(--stroke-hairline) solid hsl(var(--border));
2983
- }
2984
-
2985
- .ui-editorial-search-scope .ui-control-trigger {
2986
- --control-height: auto;
2987
- height: auto;
2988
- min-height: 100%;
2989
- max-width: 100%;
2990
- padding-inline: var(--editorial-search-padding-inline-start);
2991
- border: 0;
2992
- border-radius: 0;
2993
- background: transparent;
2994
- box-shadow: none;
2995
- font-size: var(--editorial-search-input-font-size);
2996
- font-weight: var(--editorial-search-scope-font-weight);
2997
- }
2998
-
2999
- .ui-editorial-search-icon {
3000
- flex: none;
3001
- width: var(--editorial-search-icon-size);
3002
- height: var(--editorial-search-icon-size);
3003
- color: hsl(var(--muted-foreground));
3004
- }
3005
-
3006
- .ui-editorial-search-input {
3007
- width: 100%;
3008
- min-width: 0;
3009
- min-height: var(--editorial-search-input-height);
3010
- padding-inline: var(--editorial-search-input-padding-inline);
3011
- border: 0;
3012
- background: transparent;
3013
- color: inherit;
3014
- font: inherit;
3015
- font-size: var(--editorial-search-input-font-size);
3016
- outline-offset: 0;
3017
- }
3018
-
3019
- .ui-editorial-search-input::placeholder {
3020
- color: var(--editorial-search-placeholder-color, hsl(var(--muted-foreground)));
3021
- opacity: 1;
3022
- }
3023
-
3024
- .ui-editorial-search-button {
3025
- display: inline-flex;
3026
- flex: none;
3027
- align-items: center;
3028
- justify-content: center;
3029
- gap: var(--editorial-search-button-gap);
3030
- min-width: var(--editorial-search-button-min-width);
3031
- min-height: var(--editorial-search-button-height);
3032
- padding-inline: var(--editorial-search-button-padding-inline);
3033
- border: var(--stroke-hairline) solid transparent;
3034
- border-radius: var(--editorial-search-button-radius);
3035
- background: hsl(var(--primary));
3036
- color: hsl(var(--primary-foreground));
3037
- font-size: var(--editorial-search-button-font-size);
3038
- font-weight: var(--font-weight-semibold);
3039
- line-height: var(--editorial-search-button-line-height);
3040
- white-space: nowrap;
3041
- cursor: pointer;
3042
- transition: background var(--duration-fast) var(--ease-standard);
3043
- }
3044
-
3045
- .ui-editorial-search-button:hover {
3046
- background: hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)));
3047
- }
3048
-
3049
- .ui-editorial-search-button-icon {
3050
- display: var(--editorial-search-button-icon-display);
3051
- flex: none;
3052
- width: var(--editorial-search-icon-size);
3053
- height: var(--editorial-search-icon-size);
3054
- }
3055
-
3056
- .ui-editorial-search-popup {
3057
- position: fixed;
3058
-
3059
- z-index: var(--overlay-z-index);
3060
- box-sizing: border-box;
3061
- margin-block-start: var(--editorial-search-popup-offset);
3062
- max-height: min(
3063
- var(--editorial-search-popup-max-height),
3064
- calc(var(--editorial-search-popup-room, 100vh) - 2 * var(--editorial-search-popup-offset))
3065
- );
3066
- overflow-y: auto;
3067
- padding-block: var(--editorial-search-popup-padding-block);
3068
- border: var(--stroke-hairline) solid
3069
- var(--editorial-search-popup-border-color, hsl(var(--border)));
3070
- border-radius: var(--editorial-search-popup-radius);
3071
- background: var(--editorial-search-popup-background, hsl(var(--popover)));
3072
- color: hsl(var(--popover-foreground));
3073
- box-shadow: var(--editorial-search-popup-shadow);
3074
- text-align: start;
3075
- }
3076
-
3077
- .ui-editorial-search-popup[hidden] {
3078
- display: none;
3079
- }
3080
-
3081
- .ui-editorial-search-group + .ui-editorial-search-group,
3082
- .ui-editorial-search-group + .ui-editorial-search-suggestions-footer {
3083
- margin-block-start: var(--editorial-search-popup-padding-block);
3084
- border-block-start: var(--stroke-hairline) solid hsl(var(--border));
3085
- padding-block-start: var(--editorial-search-popup-padding-block);
3086
- }
3087
-
3088
- .ui-editorial-search-group-label {
3089
- padding: var(--editorial-search-group-label-padding-block)
3090
- var(--editorial-search-suggestion-padding-inline);
3091
- color: hsl(var(--muted-foreground));
3092
- font-size: var(--editorial-search-group-label-font-size);
3093
- font-weight: var(--editorial-search-group-label-font-weight);
3094
- letter-spacing: var(--editorial-search-group-label-letter-spacing);
3095
- }
3096
-
3097
- .ui-editorial-search-suggestion,
3098
- .ui-editorial-search-suggestions-footer {
3099
- display: flex;
3100
- align-items: center;
3101
- gap: var(--editorial-search-suggestion-gap);
3102
- min-height: var(--editorial-search-suggestion-min-height);
3103
- padding: var(--editorial-search-suggestion-padding-block)
3104
- var(--editorial-search-suggestion-padding-inline);
3105
- color: inherit;
3106
- font-size: var(--editorial-search-suggestion-font-size);
3107
- text-decoration: none;
3108
- cursor: pointer;
3109
- }
3110
-
3111
- .ui-editorial-search-suggestion:hover,
3112
- .ui-editorial-search-suggestion[aria-selected="true"],
3113
- .ui-editorial-search-suggestions-footer:hover,
3114
- .ui-editorial-search-suggestions-footer[aria-selected="true"] {
3115
- background: var(--editorial-search-suggestion-active-background, hsl(var(--accent)));
3116
- }
3117
-
3118
- .ui-editorial-search-suggestion-media {
3119
- display: inline-flex;
3120
- flex: none;
3121
- align-items: center;
3122
- justify-content: center;
3123
- width: var(--editorial-search-suggestion-media-width);
3124
- height: var(--editorial-search-suggestion-media-height);
3125
- overflow: hidden;
3126
- border-radius: var(--editorial-search-suggestion-media-radius);
3127
- background: var(--editorial-search-suggestion-media-background, hsl(var(--muted)));
3128
- color: hsl(var(--muted-foreground));
3129
- font-size: var(--editorial-search-group-label-font-size);
3130
- font-weight: var(--font-weight-semibold);
3131
- }
3132
-
3133
- .ui-editorial-search-suggestion-media > img {
3134
- width: 100%;
3135
- height: 100%;
3136
- object-fit: contain;
3137
- }
3138
-
3139
- .ui-editorial-search-suggestion-text {
3140
- display: flex;
3141
- flex: 1;
3142
- flex-direction: column;
3143
- min-width: 0;
3144
- }
3145
-
3146
- .ui-editorial-search-suggestion-label,
3147
- .ui-editorial-search-suggestion-description {
3148
- overflow: hidden;
3149
- text-overflow: ellipsis;
3150
- white-space: nowrap;
3151
- }
3152
-
3153
- .ui-editorial-search-suggestion-description {
3154
- color: hsl(var(--muted-foreground));
3155
- font-size: var(--editorial-search-suggestion-description-font-size);
3156
- }
3157
-
3158
- .ui-editorial-search-suggestion-meta {
3159
- flex: none;
3160
- font-variant-numeric: tabular-nums;
3161
- font-weight: var(--font-weight-semibold);
3162
- }
3163
-
3164
- .ui-editorial-search-suggestions-footer {
3165
- font-weight: var(--font-weight-semibold);
3166
- }
3167
-
3168
- .ui-editorial-search-suggestions-footer-icon {
3169
- flex: none;
3170
- width: var(--editorial-search-icon-size);
3171
- height: var(--editorial-search-icon-size);
3172
- }
3173
-
3174
- .ui-editorial-pill-nav {
3175
- display: flex;
3176
- align-items: center;
3177
- gap: var(--editorial-pill-nav-gap);
3178
- min-height: var(--editorial-pill-nav-min-height);
3179
- overflow-x: auto;
3180
- scrollbar-width: none;
3181
- }
3182
-
3183
- .ui-editorial-pill-nav-label {
3184
- display: var(--editorial-pill-nav-label-display);
3185
- flex: none;
3186
- margin-inline-end: var(--editorial-pill-nav-label-space-inline-end);
3187
- color: hsl(var(--muted-foreground));
3188
- font-size: var(--editorial-pill-nav-label-font-size);
3189
- white-space: nowrap;
3190
- }
3191
-
3192
- .ui-editorial-pill {
3193
- display: inline-flex;
3194
- flex: none;
3195
- align-items: center;
3196
- gap: var(--editorial-pill-gap);
3197
- min-height: var(--editorial-pill-min-height);
3198
- padding: var(--editorial-pill-padding-block) var(--editorial-pill-padding-inline);
3199
- border: var(--stroke-hairline) solid transparent;
3200
- border-radius: var(--editorial-pill-radius);
3201
- color: inherit;
3202
- font-size: var(--editorial-pill-font-size);
3203
- text-decoration: none;
3204
- white-space: nowrap;
3205
- }
3206
-
3207
- .ui-editorial-pill:hover {
3208
- background: hsl(var(--muted));
3209
- }
3210
-
3211
- .ui-editorial-pill[aria-current]:not([aria-current="false"]) {
3212
- border-color: hsl(var(--primary) / 0.25);
3213
- background: hsl(var(--accent));
3214
- color: hsl(var(--text-brand, var(--primary)));
3215
- }
3216
-
3217
- .ui-editorial-pill-dot {
3218
- flex: none;
3219
- width: var(--editorial-pill-dot-size);
3220
- height: var(--editorial-pill-dot-size);
3221
- border-radius: var(--editorial-pill-dot-radius);
3222
- background: var(
3223
- --editorial-pill-dot-color,
3224
- var(--editorial-ornament-color, hsl(var(--border)))
3225
- );
3226
- }
3227
-
3228
- .ui-editorial-pill-icon {
3229
- display: inline-flex;
3230
- flex: none;
3231
- }
3232
-
3233
- .ui-editorial-pill-icon > svg {
3234
- width: var(--editorial-pill-icon-size);
3235
- height: var(--editorial-pill-icon-size);
3236
- }
3237
-
3238
- .ui-card-showcase[data-preset="fan"] {
3239
- position: relative;
3240
- isolation: isolate;
3241
- min-width: 0;
3242
- height: var(--editorial-showcase-height);
3243
- }
3244
-
3245
- .ui-card-showcase-orbit {
3246
- position: absolute;
3247
- top: var(--editorial-showcase-orbit-inset-block-start);
3248
- inset-inline-start: 50%;
3249
- width: var(--editorial-showcase-orbit-size-1);
3250
- height: var(--editorial-showcase-orbit-size-1);
3251
- border: var(--stroke-hairline) solid
3252
- color-mix(
3253
- in srgb,
3254
- var(--editorial-ornament-color, hsl(var(--border)))
3255
- calc(var(--editorial-showcase-orbit-alpha) * 100%),
3256
- transparent
3257
- );
3258
- border-radius: 50%;
3259
- transform: translate(-50%, -50%);
3260
- }
3261
-
3262
- .ui-card-showcase-orbit:dir(rtl) {
3263
- transform: translate(50%, -50%);
3264
- }
3265
-
3266
- .ui-card-showcase-orbit[data-orbit="2"] {
3267
- width: var(--editorial-showcase-orbit-size-2);
3268
- height: var(--editorial-showcase-orbit-size-2);
3269
- }
3270
-
3271
- .ui-card-showcase-orbit[data-orbit="3"] {
3272
- width: var(--editorial-showcase-orbit-size-3);
3273
- height: var(--editorial-showcase-orbit-size-3);
3274
- }
3275
-
3276
- .ui-card-showcase-glow {
3277
- position: absolute;
3278
- z-index: -1;
3279
- inset-inline-end: 5%;
3280
- bottom: var(--editorial-showcase-glow-inset-block-end);
3281
- inset-inline-start: 10%;
3282
- height: var(--editorial-showcase-glow-height);
3283
- border-radius: 50%;
3284
- background: var(--editorial-ornament-color, hsl(var(--border)));
3285
- opacity: var(--editorial-showcase-glow-alpha);
3286
- filter: blur(18px);
3287
- }
3288
-
3289
- .ui-card-showcase-label {
3290
- display: var(--editorial-showcase-label-display);
3291
- position: absolute;
3292
- top: var(--editorial-showcase-label-inset-block-start);
3293
- inset-inline-end: var(--editorial-showcase-label-inset-inline-end);
3294
- color: var(--editorial-kicker-color, hsl(var(--muted-foreground)));
3295
- font-family: var(--editorial-kicker-font-family, var(--font-family-tabular, inherit));
3296
- font-size: var(--editorial-showcase-label-font-size);
3297
- letter-spacing: var(--editorial-showcase-label-letter-spacing);
3298
- }
3299
-
3300
- .ui-card-showcase-star {
3301
- position: absolute;
3302
- top: var(--editorial-showcase-star-inset-block-start);
3303
- inset-inline-start: var(--editorial-showcase-star-inset-inline-start);
3304
- color: var(--editorial-ornament-color, hsl(var(--border)));
3305
- font-family: serif;
3306
- font-size: var(--editorial-showcase-star-font-size);
3307
- }
3308
-
3309
- .ui-card-showcase-star[data-size="small"] {
3310
- top: auto;
3311
- inset-inline-end: var(--editorial-showcase-star-small-inset-inline-end);
3312
- bottom: var(--editorial-showcase-star-small-inset-block-end);
3313
- inset-inline-start: auto;
3314
- font-size: var(--editorial-showcase-star-small-font-size);
3315
- }
3316
-
3317
- .ui-card-showcase-card {
3318
- display: block;
3319
- position: absolute;
3320
- top: var(--editorial-showcase-start-inset-block-start);
3321
- width: var(--editorial-showcase-card-width);
3322
- filter: drop-shadow(var(--editorial-showcase-card-shadow));
3323
- transition: transform var(--duration-slow) var(--ease-standard);
3324
- }
3325
-
3326
- .ui-card-showcase-card > * {
3327
- display: block;
3328
- }
3329
-
3330
- .ui-card-showcase-card img {
3331
- display: block;
3332
- width: 100%;
3333
- height: auto;
3334
- border-radius: var(--editorial-showcase-card-radius);
3335
- }
3336
-
3337
- .ui-card-showcase-card[data-position="start"] {
3338
- inset-inline-start: var(--editorial-showcase-start-inset-inline-start);
3339
- transform: rotate(var(--editorial-showcase-start-offset-angle));
3340
- }
3341
-
3342
- .ui-card-showcase-card[data-position="end"] {
3343
- top: var(--editorial-showcase-end-inset-block-start);
3344
- inset-inline-end: var(--editorial-showcase-end-inset-inline-end);
3345
- transform: rotate(var(--editorial-showcase-end-offset-angle));
3346
- }
3347
-
3348
- .ui-card-showcase-card[data-position="center"] {
3349
- z-index: 2;
3350
- top: var(--editorial-showcase-center-inset-block-start);
3351
- inset-inline-start: calc(50% + var(--editorial-showcase-center-offset-inline));
3352
- width: var(--editorial-showcase-center-width);
3353
- transform: rotate(var(--editorial-showcase-center-offset-angle));
3354
- }
3355
-
3356
- .ui-card-showcase-card:hover {
3357
- transform: translateY(var(--editorial-showcase-card-hover-translate)) rotate(0);
3358
- }
3359
-
3360
- .ui-card-showcase-caption {
3361
- display: flex;
3362
- position: absolute;
3363
- z-index: 4;
3364
- inset-inline-end: var(--editorial-showcase-caption-inset-inline-end);
3365
- bottom: var(--editorial-showcase-caption-inset-block-end);
3366
- align-items: center;
3367
- justify-content: var(--editorial-showcase-caption-align);
3368
- gap: var(--editorial-showcase-caption-gap);
3369
- min-width: var(--editorial-showcase-caption-min-width);
3370
- padding: var(--editorial-showcase-caption-padding-block)
3371
- var(--editorial-showcase-caption-padding-inline);
3372
- border: var(--stroke-hairline) solid hsl(var(--border));
3373
- border-radius: var(--editorial-showcase-caption-radius);
3374
- background: hsl(var(--card));
3375
- box-shadow: var(--editorial-showcase-caption-shadow);
3376
- }
3377
-
3378
- .ui-card-showcase-caption-icon {
3379
- display: var(--editorial-showcase-caption-icon-display);
3380
- flex: none;
3381
- width: var(--editorial-showcase-caption-icon-size);
3382
- height: var(--editorial-showcase-caption-icon-size);
3383
- color: var(--editorial-kicker-color, hsl(var(--muted-foreground)));
3384
- }
3385
-
3386
- .ui-card-showcase-caption-icon > svg {
3387
- width: 100%;
3388
- height: 100%;
3389
- }
3390
-
3391
- .ui-card-showcase-caption-overline {
3392
- display: block;
3393
- color: hsl(var(--muted-foreground));
3394
- font-size: var(--editorial-showcase-caption-overline-font-size);
3395
- }
3396
-
3397
- .ui-card-showcase-caption-title {
3398
- font-size: var(--editorial-showcase-caption-title-font-size);
3399
- font-weight: var(--font-weight-semibold);
3400
- }
3401
-
3402
- .ui-card-showcase[data-preset="binder"] {
3403
- display: grid;
3404
- position: relative;
3405
- grid-template-columns: repeat(3, minmax(0, 1fr));
3406
- gap: var(--editorial-binder-gap);
3407
- width: 100%;
3408
- max-width: var(--editorial-binder-max-width);
3409
- padding: var(--editorial-binder-padding);
3410
- border: var(--stroke-hairline) solid
3411
- var(--editorial-binder-border-color, hsl(var(--background) / 0.4));
3412
- border-radius: var(--editorial-binder-radius);
3413
- background: var(--editorial-binder-background, hsl(var(--background) / 0.1));
3414
- box-shadow: var(--editorial-binder-shadow);
3415
- transform: rotate(var(--editorial-binder-offset-angle));
3416
- }
3417
-
3418
- .ui-card-showcase-pocket {
3419
- display: block;
3420
- min-width: 0;
3421
- }
3422
-
3423
- .ui-card-showcase-pocket img {
3424
- display: block;
3425
- width: 100%;
3426
- height: var(--editorial-binder-pocket-height);
3427
- padding: var(--editorial-binder-pocket-padding);
3428
- border: var(--stroke-hairline) solid rgb(255 255 255 / 0.15);
3429
- border-radius: var(--editorial-binder-pocket-radius);
3430
- background: rgb(255 255 255 / 0.05);
3431
- object-fit: contain;
3432
- }
3433
-
3434
- .ui-editorial-banner {
3435
-
3436
- --editorial-kicker-color: var(--editorial-banner-kicker-color, currentColor);
3437
- display: grid;
3438
- position: relative;
3439
- grid-template-columns: var(--editorial-banner-track-size);
3440
- align-items: center;
3441
- gap: var(--editorial-banner-gap);
3442
- padding: var(--editorial-banner-padding-block) var(--editorial-banner-padding-inline);
3443
- overflow: hidden;
3444
- border-radius: var(--editorial-banner-radius);
3445
- background: var(--editorial-banner-background, hsl(var(--foreground)));
3446
- color: var(--editorial-banner-foreground, hsl(var(--background)));
3447
- }
3448
-
3449
- .ui-editorial-banner-copy {
3450
- min-width: 0;
3451
- }
3452
-
3453
- .ui-editorial-banner-title {
3454
- margin: var(--editorial-banner-title-space-block) 0;
3455
- font-family: var(--font-family-editorial, var(--font-family-display));
3456
- font-size: var(--editorial-banner-title-font-size);
3457
- font-weight: var(--font-weight-semibold);
3458
- line-height: var(--editorial-section-head-title-line-height);
3459
- letter-spacing: var(--editorial-section-head-title-letter-spacing);
3460
- }
3461
-
3462
- .ui-editorial-banner-description {
3463
- max-width: var(--editorial-banner-description-max-width);
3464
- margin: 0;
3465
- color: var(--editorial-banner-muted-foreground, currentColor);
3466
- font-size: var(--editorial-banner-description-font-size);
3467
- line-height: var(--editorial-banner-description-line-height);
3468
- }
3469
-
3470
- .ui-editorial-banner-action {
3471
- --primary: var(--editorial-banner-action-background, var(--background));
3472
- --primary-hover: var(--editorial-banner-action-hover-background, var(--background));
3473
- --primary-foreground: var(--editorial-banner-action-foreground, var(--foreground));
3474
- --ring: var(--editorial-banner-action-background, var(--background));
3475
- --focus-ring-color: var(--ring);
3476
- margin-block-start: var(--editorial-banner-action-space-block-start);
3477
- }
3478
-
3479
- .ui-editorial-banner-action > * {
3480
- width: var(--editorial-banner-action-width);
3481
- }
3482
-
3483
- .ui-editorial-banner-media {
3484
- display: flex;
3485
- min-width: 0;
3486
- justify-content: var(--editorial-banner-media-align);
3487
- }
3488
-
3489
- .ui-catalog-card {
3490
- position: relative;
3491
- min-width: 0;
3492
- overflow: hidden;
3493
- border: var(--stroke-hairline) solid hsl(var(--border));
3494
- border-radius: var(--editorial-catalog-card-radius);
3495
- background: hsl(var(--card));
3496
- transition:
3497
- box-shadow var(--duration-base) var(--ease-standard),
3498
- transform var(--duration-base) var(--ease-standard);
3499
- }
3500
-
3501
- .ui-catalog-card:hover {
3502
- box-shadow: var(--editorial-catalog-card-hover-shadow);
3503
- transform: translateY(var(--editorial-catalog-card-hover-translate));
3504
- }
3505
-
3506
- .ui-catalog-card-favorite {
3507
- display: inline-flex;
3508
- position: absolute;
3509
- z-index: 2;
3510
- top: var(--editorial-catalog-card-favorite-inset);
3511
- inset-inline-end: var(--editorial-catalog-card-favorite-inset);
3512
- align-items: center;
3513
- justify-content: center;
3514
- width: var(--editorial-catalog-card-favorite-size);
3515
- height: var(--editorial-catalog-card-favorite-size);
3516
- border: var(--editorial-catalog-card-favorite-border-width) solid hsl(var(--border));
3517
- border-radius: 50%;
3518
- background: var(--editorial-catalog-card-favorite-background, hsl(var(--card)));
3519
- color: inherit;
3520
- cursor: pointer;
3521
- }
3522
-
3523
- .ui-catalog-card-favorite:disabled {
3524
- cursor: default;
3525
- opacity: 0.5;
3526
- }
3527
-
3528
- .ui-catalog-card-favorite[aria-pressed="true"] {
3529
- background: hsl(var(--accent));
3530
- color: hsl(var(--text-brand, var(--primary)));
3531
- }
3532
-
3533
- .ui-catalog-card-favorite-icon {
3534
- width: var(--editorial-catalog-card-favorite-icon-size);
3535
- height: var(--editorial-catalog-card-favorite-icon-size);
3536
- }
3537
-
3538
- .ui-catalog-card-favorite[aria-pressed="true"] .ui-catalog-card-favorite-icon {
3539
- fill: currentColor;
3540
- }
3541
-
3542
- .ui-catalog-card-media {
3543
- display: flex;
3544
- position: relative;
3545
- align-items: center;
3546
- justify-content: center;
3547
- aspect-ratio: var(--editorial-catalog-card-media-aspect-size);
3548
- padding: var(--editorial-catalog-card-media-padding-block-start)
3549
- var(--editorial-catalog-card-media-padding-inline)
3550
- var(--editorial-catalog-card-media-padding-block-end);
3551
- background: hsl(var(--muted));
3552
- }
3553
-
3554
- .ui-catalog-card-media > * {
3555
- display: flex;
3556
- width: 100%;
3557
- height: 100%;
3558
- min-height: 0;
3559
- align-items: center;
3560
- justify-content: center;
3561
- }
3562
-
3563
- .ui-catalog-card-media img {
3564
- width: 100%;
3565
- height: 100%;
3566
- border-radius: var(--editorial-catalog-card-media-radius);
3567
- object-fit: contain;
3568
- filter: drop-shadow(var(--editorial-catalog-card-media-shadow));
3569
- }
3570
-
3571
- .ui-catalog-card[data-variant="sealed"] .ui-catalog-card-media {
3572
- aspect-ratio: var(--editorial-catalog-card-sealed-aspect-size);
3573
- padding: var(--editorial-catalog-card-sealed-padding);
3574
- }
3575
-
3576
- .ui-catalog-card[data-variant="sealed"] .ui-catalog-card-media img {
3577
- filter: none;
3578
- }
3579
-
3580
- .ui-catalog-card-body {
3581
- padding: var(--editorial-catalog-card-body-padding-block-start)
3582
- var(--editorial-catalog-card-body-padding-inline) 0;
3583
- }
3584
-
3585
- .ui-catalog-card-overline {
3586
- display: flex;
3587
- align-items: center;
3588
- min-height: var(--editorial-catalog-card-overline-min-height);
3589
- margin: 0;
3590
- color: var(--editorial-kicker-color, hsl(var(--muted-foreground)));
3591
- font-size: var(--editorial-catalog-card-overline-font-size);
3592
- line-height: var(--editorial-catalog-card-overline-line-height);
3593
- }
3594
-
3595
- .ui-catalog-card-title {
3596
- display: -webkit-box;
3597
- min-height: var(--editorial-catalog-card-title-min-height);
3598
- margin: var(--editorial-catalog-card-title-space-block-start) 0
3599
- var(--editorial-catalog-card-title-space-block-end);
3600
- overflow: hidden;
3601
- font-size: var(--editorial-catalog-card-title-font-size);
3602
- font-weight: var(--font-weight-semibold);
3603
- line-height: var(--editorial-catalog-card-title-line-height);
3604
- -webkit-box-orient: vertical;
3605
- -webkit-line-clamp: 2;
3606
- }
3607
-
3608
- .ui-catalog-card-title a {
3609
- color: inherit;
3610
- text-decoration: none;
3611
- }
3612
-
3613
- .ui-catalog-card-title a:hover {
3614
- color: hsl(var(--text-brand, var(--primary)));
3615
- }
3616
-
3617
- .ui-catalog-card-meta {
3618
- display: flex;
3619
- flex-wrap: wrap;
3620
- align-content: flex-start;
3621
- align-items: center;
3622
- gap: var(--editorial-catalog-card-meta-gap);
3623
- min-height: var(--editorial-catalog-card-meta-min-height);
3624
- color: hsl(var(--muted-foreground));
3625
- font-size: var(--editorial-catalog-card-meta-font-size);
3626
- line-height: var(--editorial-catalog-card-meta-line-height);
3627
- }
3628
-
3629
- .ui-catalog-card-tag {
3630
- padding: var(--stroke-hairline) var(--editorial-catalog-card-tag-padding-inline);
3631
- border: var(--stroke-hairline) solid hsl(var(--border));
3632
- border-radius: var(--editorial-catalog-card-tag-radius);
3633
- color: hsl(var(--foreground));
3634
- font-family: var(--editorial-kicker-font-family, var(--font-family-tabular, inherit));
3635
- font-size: var(--editorial-catalog-card-tag-font-size);
3636
- font-weight: var(--font-weight-semibold);
3637
- line-height: var(--editorial-catalog-card-tag-line-height);
3638
- }
3639
-
3640
- .ui-catalog-card-price-label {
3641
- display: -webkit-box;
3642
- overflow: hidden;
3643
- -webkit-box-orient: vertical;
3644
-
3645
- -webkit-line-clamp: var(--editorial-catalog-card-price-label-line-clamp);
3646
- min-height: var(--editorial-catalog-card-price-label-min-height);
3647
- margin: var(--editorial-catalog-card-price-label-space-block-start) 0 0;
3648
- color: hsl(var(--muted-foreground));
3649
- font-size: var(--editorial-catalog-card-price-label-font-size);
3650
- }
3651
-
3652
- .ui-catalog-card-price-line {
3653
- display: var(--editorial-catalog-card-price-line-display);
3654
- flex-wrap: wrap;
3655
- align-items: baseline;
3656
- justify-content: space-between;
3657
- gap: var(--editorial-catalog-card-price-line-gap);
3658
- }
3659
-
3660
- .ui-catalog-card-price {
3661
- color: hsl(var(--text-brand, var(--primary)));
3662
- font-family: var(--editorial-kicker-font-family, var(--font-family-tabular, inherit));
3663
- font-size: var(--editorial-catalog-card-price-font-size);
3664
- font-variant-numeric: tabular-nums;
3665
- font-weight: var(--font-weight-semibold);
3666
- line-height: var(--editorial-catalog-card-price-line-height);
3667
- white-space: nowrap;
3668
- }
3669
-
3670
- .ui-catalog-card-price small {
3671
- margin-inline-start: var(--editorial-catalog-card-price-suffix-space-inline-start);
3672
- font-size: var(--editorial-catalog-card-price-suffix-font-size);
3673
- }
3674
-
3675
- .ui-catalog-card-change {
3676
- display: var(--editorial-catalog-card-change-display);
3677
- margin-block-start: var(--editorial-catalog-card-change-space-block-start);
3678
- font-size: var(--editorial-catalog-card-change-font-size);
3679
- font-weight: var(--font-weight-medium);
3680
- line-height: var(--editorial-catalog-card-change-line-height);
3681
- white-space: nowrap;
3682
- }
3683
-
3684
- .ui-catalog-card-footer {
3685
- display: flex;
3686
- flex-wrap: wrap;
3687
- align-items: center;
3688
- justify-content: space-between;
3689
- gap: var(--editorial-catalog-card-footer-gap);
3690
- margin-block-start: var(--editorial-catalog-card-footer-space-block-start);
3691
- padding-block: var(--editorial-catalog-card-footer-padding-block);
3692
- border-block-start: var(--stroke-hairline) solid hsl(var(--border));
3693
- font-size: var(--editorial-catalog-card-footer-font-size);
3694
- }
3695
-
3696
- .ui-catalog-card-footer a {
3697
- display: inline-flex;
3698
- align-items: center;
3699
- gap: var(--editorial-catalog-card-footer-link-gap);
3700
- min-height: var(--editorial-catalog-card-footer-link-min-height);
3701
- color: hsl(var(--text-brand, var(--primary)));
3702
- text-decoration: none;
3703
- }
3704
-
3705
- .ui-catalog-card-footer svg {
3706
- width: var(--editorial-catalog-card-footer-icon-size);
3707
- height: var(--editorial-catalog-card-footer-icon-size);
3708
- }
3709
-
3710
- .ui-editorial-card[data-variant="spotlight"] {
3711
- display: grid;
3712
- grid-template-columns: var(--editorial-spotlight-track-size);
3713
- align-items: center;
3714
- min-height: var(--editorial-spotlight-min-height);
3715
- overflow: hidden;
3716
- border: var(--stroke-hairline) solid hsl(var(--border));
3717
- border-radius: var(--editorial-catalog-card-radius);
3718
- background: hsl(var(--card));
3719
- color: inherit;
3720
- text-decoration: none;
3721
- transition: box-shadow var(--duration-base) var(--ease-standard);
3722
- }
3723
-
3724
- .ui-editorial-card[data-variant="spotlight"]:hover {
3725
- box-shadow: var(--editorial-spotlight-hover-shadow);
3726
- }
3727
-
3728
- .ui-editorial-card[data-variant="spotlight"] .ui-editorial-card-copy {
3729
- min-width: 0;
3730
- padding: var(--editorial-spotlight-padding-block) var(--editorial-spotlight-padding-inline);
3731
- }
3732
-
3733
- .ui-editorial-card[data-variant="spotlight"] .ui-editorial-card-overline {
3734
- display: block;
3735
- color: var(--editorial-kicker-color, hsl(var(--muted-foreground)));
3736
- font-family: var(--editorial-kicker-font-family, var(--font-family-tabular, inherit));
3737
- font-size: var(--editorial-spotlight-overline-font-size);
3738
- font-weight: var(--font-weight-semibold);
3739
- line-height: var(--editorial-eyebrow-line-height);
3740
- letter-spacing: var(--editorial-spotlight-overline-letter-spacing);
3741
- }
3742
-
3743
- .ui-editorial-card[data-variant="spotlight"] .ui-editorial-card-title {
3744
- margin-block: var(--editorial-spotlight-title-space-block);
3745
- font-family: var(--font-family-editorial, var(--font-family-display));
3746
- font-size: var(--editorial-spotlight-title-font-size);
3747
- font-weight: var(--font-weight-semibold);
3748
- line-height: var(--editorial-spotlight-title-line-height);
3749
- }
3750
-
3751
- .ui-editorial-card[data-variant="spotlight"] .ui-editorial-card-description {
3752
- margin: 0;
3753
- color: hsl(var(--muted-foreground));
3754
- font-size: var(--editorial-spotlight-description-font-size);
3755
- }
3756
-
3757
- .ui-editorial-card-description-icon {
3758
- display: inline;
3759
- width: var(--editorial-spotlight-description-icon-size);
3760
- height: var(--editorial-spotlight-description-icon-size);
3761
- vertical-align: middle;
3762
- }
3763
-
3764
- .ui-editorial-card[data-variant="spotlight"] .ui-editorial-card-media {
3765
- position: relative;
3766
- height: 100%;
3767
- overflow: hidden;
3768
- background: linear-gradient(135deg, hsl(var(--muted)), hsl(var(--background)));
3769
- }
3770
-
3771
- .ui-editorial-card[data-variant="spotlight"] .ui-editorial-card-media img {
3772
- position: absolute;
3773
- top: var(--editorial-spotlight-media-inset-block-start);
3774
- inset-inline-start: var(--editorial-spotlight-media-inset-inline-start);
3775
- width: var(--editorial-spotlight-media-width);
3776
- height: var(--editorial-spotlight-media-height);
3777
- object-fit: contain;
3778
- filter: drop-shadow(var(--editorial-spotlight-media-shadow));
3779
- transform: rotate(var(--editorial-spotlight-media-offset-angle));
3780
- }
3781
-
3782
- .ui-editorial-card[data-variant="journal"] {
3783
- min-width: 0;
3784
- overflow: hidden;
3785
- border: var(--stroke-hairline) solid hsl(var(--border));
3786
- border-radius: var(--editorial-catalog-card-radius);
3787
- background: hsl(var(--card));
3788
- transition:
3789
- border-color var(--duration-base) var(--ease-standard),
3790
- box-shadow var(--duration-base) var(--ease-standard),
3791
- transform var(--duration-base) var(--ease-standard);
3792
- }
3793
-
3794
- .ui-editorial-card[data-variant="journal"]:hover {
3795
- border-color: color-mix(
3796
- in srgb,
3797
- var(--editorial-ornament-color, hsl(var(--border))),
3798
- hsl(var(--border)) 45%
3799
- );
3800
- box-shadow: var(--editorial-journal-hover-shadow);
3801
- transform: translateY(var(--editorial-catalog-card-hover-translate));
3802
- }
3803
-
3804
- .ui-editorial-card-link {
3805
- display: flex;
3806
- flex-direction: column;
3807
- height: 100%;
3808
- color: hsl(var(--foreground));
3809
- text-decoration: none;
3810
- }
3811
-
3812
- .ui-editorial-card[data-variant="journal"] .ui-editorial-card-media {
3813
- display: block;
3814
- position: relative;
3815
- isolation: isolate;
3816
- width: 100%;
3817
- height: var(--editorial-journal-cover-height);
3818
- overflow: hidden;
3819
- border-block-end: var(--stroke-hairline) solid hsl(var(--border));
3820
- background: var(--editorial-journal-cover-background, hsl(var(--muted)));
3821
- }
3822
-
3823
- .ui-editorial-card[data-variant="journal"] .ui-editorial-card-media img {
3824
- display: block;
3825
- width: 100%;
3826
- height: 100%;
3827
- object-fit: var(--editorial-journal-cover-image-size);
3828
- object-position: var(--editorial-journal-cover-image-align);
3829
- }
3830
-
3831
- .ui-editorial-card[data-variant="journal"] .ui-editorial-card-copy {
3832
- display: flex;
3833
- flex: 1;
3834
- flex-direction: column;
3835
- padding: var(--editorial-journal-padding-block-start) var(--editorial-journal-padding-inline)
3836
- var(--editorial-journal-padding-block-end);
3837
- }
3838
-
3839
- .ui-editorial-card[data-variant="journal"] .ui-editorial-card-overline {
3840
- align-self: flex-start;
3841
- color: var(--editorial-kicker-color, hsl(var(--muted-foreground)));
3842
- font-size: var(--editorial-journal-category-font-size);
3843
- font-weight: var(--font-weight-semibold);
3844
- line-height: var(--editorial-journal-category-line-height);
3845
- letter-spacing: var(--editorial-journal-category-letter-spacing);
3846
- }
3847
-
3848
- .ui-editorial-card[data-variant="journal"] .ui-editorial-card-title {
3849
- min-height: var(--editorial-journal-title-min-height);
3850
- margin: var(--editorial-journal-title-space-block-start) 0
3851
- var(--editorial-journal-title-space-block-end);
3852
- font-family: var(--font-family-editorial, var(--font-family-display));
3853
- font-size: var(--editorial-journal-title-font-size);
3854
- font-weight: var(--font-weight-semibold);
3855
- line-height: var(--editorial-journal-title-line-height);
3856
- letter-spacing: var(--editorial-journal-title-letter-spacing);
3857
- line-break: strict;
3858
- overflow-wrap: break-word;
3859
- text-wrap: balance;
3860
- }
3861
-
3862
- .ui-editorial-card[data-variant="journal"] .ui-editorial-card-description {
3863
- display: -webkit-box;
3864
- margin: 0 0 var(--editorial-journal-description-space-block-end);
3865
- overflow: hidden;
3866
- color: hsl(var(--muted-foreground));
3867
- font-size: var(--editorial-journal-description-font-size);
3868
- line-height: var(--editorial-journal-description-line-height);
3869
- -webkit-box-orient: vertical;
3870
- -webkit-line-clamp: 2;
3871
- }
3872
-
3873
- .ui-editorial-card-footer {
3874
- display: flex;
3875
- align-items: center;
3876
- justify-content: space-between;
3877
- gap: var(--editorial-journal-footer-gap);
3878
- min-height: var(--editorial-journal-footer-min-height);
3879
- margin-block-start: auto;
3880
- padding-block-start: var(--editorial-journal-footer-padding-block-start);
3881
- border-block-start: var(--stroke-hairline) solid hsl(var(--border));
3882
- color: hsl(var(--text-brand, var(--primary)));
3883
- font-size: var(--editorial-journal-footer-font-size);
3884
- font-weight: var(--font-weight-semibold);
3885
- }
3886
-
3887
- .ui-editorial-card-arrow {
3888
- display: grid;
3889
- place-items: center;
3890
- width: var(--editorial-journal-arrow-size);
3891
- height: var(--editorial-journal-arrow-size);
3892
- border-radius: 50%;
3893
- background: hsl(var(--muted));
3894
- transition:
3895
- background var(--duration-base) var(--ease-standard),
3896
- color var(--duration-base) var(--ease-standard);
3897
- }
3898
-
3899
- .ui-editorial-card-arrow-icon {
3900
- width: var(--editorial-journal-arrow-icon-size);
3901
- height: var(--editorial-journal-arrow-icon-size);
3902
- }
3903
-
3904
- .ui-editorial-card[data-variant="journal"]:hover .ui-editorial-card-arrow {
3905
- background: hsl(var(--primary));
3906
- color: hsl(var(--primary-foreground));
3907
- }
3908
-
3909
- .ui-centered-shell-bar:has(> .ui-editorial-masthead) {
3910
- position: sticky;
3911
- z-index: 30;
3912
- top: 0;
3913
- min-height: 0;
3914
- background: var(--editorial-masthead-background, hsl(var(--background) / 0.97));
3915
- background-image: none;
3916
- backdrop-filter: blur(var(--editorial-masthead-backdrop-blur-size));
3917
- }
3918
-
3919
- .ui-editorial-masthead {
3920
- display: flex;
3921
- align-items: center;
3922
- gap: var(--editorial-masthead-gap);
3923
- width: 100%;
3924
- height: var(--editorial-masthead-height);
3925
- }
3926
-
3927
- .ui-editorial-masthead-brand {
3928
- flex: none;
3929
- }
3930
-
3931
- .ui-editorial-masthead-brand > * {
3932
- display: block;
3933
- padding-block: var(--editorial-masthead-brand-padding-block);
3934
- }
3935
-
3936
- .ui-editorial-masthead-brand img {
3937
- display: block;
3938
- width: var(--editorial-masthead-logo-width);
3939
- height: auto;
3940
- }
3941
-
3942
- .ui-editorial-masthead-nav {
3943
- display: var(--editorial-masthead-nav-display);
3944
- align-items: center;
3945
- align-self: stretch;
3946
- gap: var(--editorial-masthead-nav-gap);
3947
- margin-inline-start: var(--editorial-masthead-nav-space-inline-start);
3948
- }
3949
-
3950
- .ui-editorial-masthead-link {
3951
- display: flex;
3952
- position: relative;
3953
- align-items: center;
3954
- color: inherit;
3955
- font-size: var(--editorial-masthead-link-font-size);
3956
- font-weight: var(--font-weight-medium);
3957
- text-decoration: none;
3958
- white-space: nowrap;
3959
- }
3960
-
3961
- .ui-editorial-masthead-link:hover,
3962
- .ui-editorial-masthead-link[aria-current="page"] {
3963
- color: hsl(var(--text-brand, var(--primary)));
3964
- }
3965
-
3966
- .ui-editorial-masthead-link[aria-current="page"]::after {
3967
- content: "";
3968
- position: absolute;
3969
- inset-inline: 0;
3970
- bottom: 0;
3971
- height: var(--editorial-masthead-indicator-size);
3972
- background: hsl(var(--primary));
3973
- }
3974
-
3975
- .ui-editorial-masthead-actions {
3976
- display: flex;
3977
- align-items: center;
3978
- gap: var(--editorial-masthead-actions-gap);
3979
- margin-inline-start: auto;
3980
- }
3981
-
3982
- .ui-editorial-masthead-menu {
3983
- display: var(--editorial-masthead-menu-display);
3984
- }
3985
-
3986
- .ui-editorial-masthead-action {
3987
- display: inline-flex;
3988
- flex: none;
3989
- align-items: center;
3990
- justify-content: center;
3991
- width: var(--editorial-masthead-action-size);
3992
- height: var(--editorial-masthead-action-size);
3993
- padding: 0;
3994
- border: 0;
3995
- border-radius: var(--editorial-masthead-action-radius);
3996
- background: transparent;
3997
- color: inherit;
3998
- cursor: pointer;
3999
- }
4000
-
4001
- .ui-editorial-masthead-action:hover {
4002
- background: hsl(var(--muted));
4003
- }
4004
-
4005
- .ui-editorial-masthead-action[data-variant="outline"] {
4006
- border: var(--editorial-masthead-outline-border-width) solid hsl(var(--border));
4007
- background: var(--editorial-masthead-outline-background, hsl(var(--card)));
4008
- }
4009
-
4010
- .ui-editorial-masthead-action[data-collapse] {
4011
- display: var(--editorial-masthead-collapsible-display);
4012
- }
4013
-
4014
- .ui-editorial-masthead-action svg {
4015
- width: var(--editorial-masthead-icon-size);
4016
- height: var(--editorial-masthead-icon-size);
4017
- }
4018
-
4019
- .ui-editorial-masthead-actions [data-slot="select-trigger"] {
4020
-
4021
- --control-height: var(--editorial-masthead-action-size);
4022
- height: var(--editorial-masthead-action-size);
4023
- max-width: var(--editorial-masthead-picker-max-width);
4024
- min-height: var(--editorial-masthead-action-size);
4025
- padding-inline: var(--editorial-masthead-picker-padding-inline);
4026
- font-size: var(--editorial-masthead-picker-font-size);
4027
- gap: var(--editorial-masthead-picker-gap);
4028
- }
4029
-
4030
- .ui-centered-shell .ui-centered-shell-footer:has(> .ui-editorial-footer) {
4031
- margin-block-start: var(--editorial-footer-space-block-start);
4032
- border-block-start: 0;
4033
- padding-block: var(--editorial-footer-padding-block-start)
4034
- var(--editorial-footer-padding-block-end);
4035
- }
4036
-
4037
- .ui-editorial-footer-top {
4038
- display: grid;
4039
- grid-template-columns: var(--editorial-footer-track-size);
4040
- gap: var(--editorial-footer-gap);
4041
- padding-block-end: var(--editorial-footer-top-padding-block-end);
4042
- }
4043
-
4044
- .ui-editorial-footer-brand {
4045
- grid-column: var(--editorial-footer-brand-span-width);
4046
- }
4047
-
4048
- .ui-editorial-footer-brand img {
4049
- display: block;
4050
- width: var(--editorial-footer-logo-width);
4051
- height: auto;
4052
- }
4053
-
4054
- .ui-editorial-footer-tagline {
4055
- max-width: var(--editorial-footer-tagline-max-width);
4056
- margin: var(--editorial-footer-tagline-space-block-start) 0 0;
4057
- color: hsl(var(--muted-foreground));
4058
- font-size: var(--editorial-footer-font-size);
4059
- line-height: var(--editorial-footer-tagline-line-height);
4060
- }
4061
-
4062
- .ui-editorial-footer-group:last-child {
4063
- display: var(--editorial-footer-last-group-display);
4064
- }
4065
-
4066
- .ui-editorial-footer-heading {
4067
- margin: 0 0 var(--editorial-footer-heading-space-block-end);
4068
- color: var(--editorial-footer-heading-color, currentColor);
4069
- font-size: var(--editorial-footer-font-size);
4070
- font-weight: var(--font-weight-semibold);
4071
- line-height: var(--editorial-footer-heading-line-height);
4072
- letter-spacing: var(--editorial-footer-heading-letter-spacing);
4073
- }
4074
-
4075
- .ui-editorial-footer-group > a {
4076
- display: block;
4077
- min-height: var(--editorial-footer-link-min-height);
4078
- color: hsl(var(--text-link, var(--foreground)));
4079
- font-size: var(--editorial-footer-font-size);
4080
- text-decoration: none;
4081
- }
4082
-
4083
- .ui-editorial-footer-group > a:hover {
4084
- text-decoration-line: underline;
4085
- text-underline-offset: var(--editorial-hero-footer-link-offset);
4086
- }
4087
-
4088
- .ui-editorial-footer-bottom {
4089
- display: var(--editorial-footer-bottom-display);
4090
- justify-content: space-between;
4091
- gap: var(--editorial-footer-bottom-gap);
4092
- padding-block-start: var(--editorial-footer-bottom-padding-block-start);
4093
- border-block-start: var(--stroke-hairline) solid hsl(var(--border));
4094
- color: var(--editorial-footer-legal-color, hsl(var(--muted-foreground)));
4095
- font-size: var(--editorial-footer-legal-font-size);
4096
- line-height: var(--editorial-footer-legal-line-height);
4097
- }
4098
-
4099
- .ui-editorial-footer-note {
4100
- max-width: var(--editorial-footer-note-max-width);
4101
- margin: var(--editorial-footer-note-space-block-start) 0 0;
4102
- }
4103
-
4104
- .ui-editorial-filter-bar {
4105
- display: flex;
4106
- align-items: center;
4107
- justify-content: space-between;
4108
- gap: var(--editorial-filter-bar-gap);
4109
- margin-block-end: var(--editorial-filter-bar-space-block-end);
4110
- padding-block-end: var(--editorial-filter-bar-padding-block-end);
4111
- border-block-end: var(--stroke-hairline) solid hsl(var(--border));
4112
- }
4113
-
4114
- .ui-editorial-filter-bar-group {
4115
- display: flex;
4116
- align-items: center;
4117
- gap: var(--editorial-filter-bar-option-gap);
4118
- overflow-x: auto;
4119
- }
4120
-
4121
- .ui-editorial-filter-bar-option {
4122
- min-height: var(--editorial-filter-bar-option-min-height);
4123
- padding: var(--editorial-filter-bar-option-padding-block)
4124
- var(--editorial-filter-bar-option-padding-inline);
4125
- border: 0;
4126
- border-block-end: var(--editorial-filter-bar-indicator-size) solid transparent;
4127
- background: transparent;
4128
- color: hsl(var(--muted-foreground));
4129
- font: inherit;
4130
- font-size: var(--editorial-filter-bar-option-font-size);
4131
- white-space: nowrap;
4132
- cursor: pointer;
4133
- }
4134
-
4135
- .ui-editorial-filter-bar-option[aria-pressed="true"] {
4136
- border-block-end-color: hsl(var(--primary));
4137
- color: hsl(var(--text-brand, var(--primary)));
4138
- }
4139
-
4140
- .ui-editorial-filter-bar-extra {
4141
- color: hsl(var(--muted-foreground));
4142
- font-size: var(--editorial-filter-bar-extra-font-size);
4143
- white-space: nowrap;
4144
- }
4145
-
4146
- .ui-editorial-filter-panel {
4147
- --control-font-size: var(--editorial-filter-panel-control-font-size);
4148
- --control-padding-x: var(--editorial-filter-panel-control-padding-x);
4149
- --control-surface-background: var(
4150
- --editorial-filter-panel-control-background,
4151
- hsl(var(--card))
4152
- );
4153
- display: flex;
4154
- flex-wrap: wrap;
4155
- align-items: flex-end;
4156
- gap: var(--editorial-filter-panel-gap);
4157
- margin-block-end: var(--editorial-filter-panel-space-block-end);
4158
- padding: var(--editorial-filter-panel-padding);
4159
- border: var(--stroke-hairline) solid hsl(var(--border));
4160
- border-radius: var(--editorial-filter-panel-radius);
4161
- background: hsl(var(--card));
4162
- }
4163
-
4164
- .ui-editorial-filter-field {
4165
- display: flex;
4166
- flex: 1 1 var(--editorial-filter-field-width-basis);
4167
- flex-direction: column;
4168
- gap: var(--editorial-filter-field-gap);
4169
- min-width: var(--editorial-filter-field-min-width);
4170
- }
4171
-
4172
- .ui-editorial-filter-field-label {
4173
- color: var(--editorial-filter-field-label-color, hsl(var(--muted-foreground)));
4174
- font-size: var(--editorial-filter-field-label-font-size);
4175
- font-weight: var(--editorial-filter-field-label-font-weight);
4176
- line-height: var(--editorial-filter-field-label-line-height);
4177
- }
4178
-
4179
- .ui-editorial-filter-panel[data-variant="bare"] {
4180
- --editorial-filter-field-label-color: var(
4181
- --editorial-filter-panel-bare-label-color,
4182
- hsl(var(--foreground))
4183
- );
4184
- --editorial-filter-field-label-font-size: var(--editorial-filter-panel-bare-label-font-size);
4185
- --editorial-filter-field-label-font-weight: var(
4186
- --editorial-filter-panel-bare-label-font-weight
4187
- );
4188
- margin-block-end: 0;
4189
- padding: 0;
4190
- border: 0;
4191
- border-radius: 0;
4192
- background: transparent;
4193
- }
4194
-
4195
- .ui-editorial-filter-panel-action {
4196
- --button-padding-inline: var(--editorial-filter-panel-action-padding-inline);
4197
- --button-outline-foreground: var(--editorial-catalog-outline-color, hsl(var(--primary)));
4198
- --button-outline-background: var(--editorial-catalog-outline-background, transparent);
4199
- display: flex;
4200
- flex-grow: var(--editorial-filter-panel-action-size-grow);
4201
- }
4202
-
4203
- .ui-editorial-filter-panel-action > * {
4204
- flex: 1;
4205
- }
4206
-
4207
- .ui-catalog-detail {
4208
- display: grid;
4209
- grid-template-columns: var(--editorial-catalog-detail-track-size);
4210
- align-items: start;
4211
- gap: var(--editorial-catalog-detail-gap);
4212
- padding-block: var(--editorial-catalog-detail-padding-block-start)
4213
- var(--editorial-catalog-detail-padding-block-end);
4214
- }
4215
-
4216
- .ui-catalog-detail-visual,
4217
- .ui-catalog-detail-main {
4218
- min-width: 0;
4219
- }
4220
-
4221
- .ui-catalog-detail-art {
4222
- display: flex;
4223
- position: relative;
4224
- align-items: center;
4225
- justify-content: center;
4226
- max-width: var(--editorial-catalog-detail-art-max-width);
4227
- height: var(--editorial-catalog-detail-art-height);
4228
- min-height: var(--editorial-catalog-detail-art-min-height);
4229
- margin-inline: auto;
4230
- padding: var(--editorial-catalog-detail-art-padding);
4231
- border: var(--stroke-hairline) solid hsl(var(--border));
4232
- border-radius: var(--editorial-catalog-detail-art-radius);
4233
- background: hsl(var(--muted));
4234
- }
4235
-
4236
- .ui-catalog-detail-art img {
4237
- display: block;
4238
- width: var(--editorial-catalog-detail-media-width);
4239
- max-width: 100%;
4240
- height: var(--editorial-catalog-detail-media-height);
4241
- max-height: var(--editorial-catalog-detail-media-max-height);
4242
- object-fit: contain;
4243
- filter: drop-shadow(var(--editorial-catalog-detail-media-shadow));
4244
- }
4245
-
4246
- .ui-catalog-detail[data-variant="sealed"] .ui-catalog-detail-art img {
4247
- filter: none;
4248
- }
4249
-
4250
- .ui-catalog-detail-caption {
4251
- margin: var(--editorial-catalog-detail-caption-space-block-start) 0 0;
4252
- color: hsl(var(--muted-foreground));
4253
- font-size: var(--editorial-catalog-detail-caption-font-size);
4254
- line-height: var(--editorial-catalog-detail-caption-line-height);
4255
- text-align: center;
4256
- }
4257
-
4258
- .ui-catalog-detail-caption a {
4259
- color: inherit;
4260
- text-decoration: underline;
4261
- text-underline-offset: 3px;
4262
- }
4263
-
4264
- .ui-catalog-detail-title {
4265
- margin: var(--editorial-catalog-detail-title-space-block-start) 0
4266
- var(--editorial-catalog-detail-title-space-block-end);
4267
- font-family: var(--font-family-editorial, var(--font-family-display));
4268
- font-size: var(--editorial-catalog-detail-title-font-size);
4269
- font-weight: var(--font-weight-semibold);
4270
- line-height: var(--editorial-catalog-detail-title-line-height);
4271
- letter-spacing: var(--editorial-catalog-detail-title-letter-spacing);
4272
- }
4273
-
4274
- .ui-catalog-detail-meta {
4275
- display: flex;
4276
- flex-wrap: wrap;
4277
- align-items: center;
4278
- gap: var(--editorial-catalog-detail-meta-gap);
4279
- margin-block-end: var(--editorial-catalog-detail-meta-space-block-end);
4280
- }
4281
-
4282
- .ui-catalog-detail-tag {
4283
- display: inline-flex;
4284
- align-items: center;
4285
- min-height: var(--editorial-catalog-detail-tag-min-height);
4286
- padding: var(--editorial-catalog-detail-tag-padding-block)
4287
- var(--editorial-catalog-detail-tag-padding-inline);
4288
- border: var(--stroke-hairline) solid hsl(var(--border));
4289
- border-radius: var(--editorial-catalog-detail-tag-radius);
4290
- color: hsl(var(--muted-foreground));
4291
- font-family: var(--editorial-kicker-font-family, var(--font-family-tabular, inherit));
4292
- font-size: var(--editorial-catalog-detail-tag-font-size);
4293
- font-weight: var(--font-weight-medium);
4294
- line-height: var(--editorial-catalog-detail-tag-line-height);
4295
- }
4296
-
4297
- .ui-catalog-detail-summary {
4298
- padding-block: var(--editorial-catalog-detail-summary-padding-block);
4299
- border-block: var(--stroke-hairline) solid hsl(var(--border));
4300
- }
4301
-
4302
- .ui-catalog-detail-summary-label,
4303
- .ui-catalog-detail-summary-note {
4304
- margin: 0;
4305
- color: hsl(var(--muted-foreground));
4306
- font-size: var(--editorial-catalog-detail-summary-label-font-size);
4307
- line-height: var(--editorial-catalog-detail-summary-label-line-height);
4308
- }
4309
-
4310
- .ui-catalog-detail-summary-price {
4311
- margin: var(--editorial-catalog-detail-summary-price-space-block) 0;
4312
- color: hsl(var(--text-brand, var(--primary)));
4313
- font-family: var(--editorial-kicker-font-family, var(--font-family-tabular, inherit));
4314
- font-size: var(--editorial-catalog-detail-summary-price-font-size);
4315
- font-variant-numeric: tabular-nums;
4316
- font-weight: var(--font-weight-semibold);
4317
- line-height: var(--editorial-catalog-detail-summary-price-line-height);
4318
- }
4319
-
4320
- .ui-catalog-detail-summary-price small {
4321
- font-size: var(--editorial-catalog-detail-summary-price-suffix-font-size);
4322
- }
4323
-
4324
- .ui-catalog-detail-actions {
4325
- --button-outline-foreground: var(--editorial-catalog-outline-color, hsl(var(--primary)));
4326
- --button-outline-background: var(--editorial-catalog-outline-background, transparent);
4327
- display: flex;
4328
- flex-wrap: wrap;
4329
- gap: var(--editorial-catalog-detail-actions-gap);
4330
- margin-block-start: var(--editorial-catalog-detail-actions-space-block-start);
4331
- }
4332
-
4333
- .ui-catalog-detail-actions > :first-child {
4334
- flex-basis: var(--editorial-catalog-detail-actions-lead-width-basis);
4335
- }
4336
-
4337
- .ui-catalog-detail-facts {
4338
- display: grid;
4339
- grid-template-columns: var(--editorial-catalog-detail-facts-track-size);
4340
- column-gap: var(--editorial-catalog-detail-facts-gap);
4341
- margin: var(--editorial-catalog-detail-facts-space-block-start) 0 0;
4342
- font-size: var(--editorial-catalog-detail-facts-font-size);
4343
- line-height: var(--editorial-catalog-detail-facts-line-height);
4344
- }
4345
-
4346
- .ui-catalog-detail-fact {
4347
- min-width: 0;
4348
- padding-block: var(--editorial-catalog-detail-fact-padding-block);
4349
- border-block-end: var(--stroke-hairline) solid hsl(var(--border));
4350
- }
4351
-
4352
- .ui-catalog-detail-fact dt {
4353
- margin-block-end: var(--editorial-catalog-detail-fact-label-space-block-end);
4354
- color: hsl(var(--muted-foreground));
4355
- font-size: var(--editorial-catalog-detail-fact-label-font-size);
4356
- line-height: var(--editorial-catalog-detail-fact-label-line-height);
4357
- }
4358
-
4359
- .ui-catalog-detail-fact dd {
4360
- margin: 0;
4361
- }
4362
-
4363
- .ui-catalog-detail-fact dd a {
4364
- color: hsl(var(--text-brand, var(--primary)));
4365
- text-decoration: underline;
4366
- text-underline-offset: 4px;
4367
- }
4368
-
4369
- .ui-catalog-detail-section {
4370
- padding-block: var(--editorial-catalog-detail-section-padding-block);
4371
- border-block-start: var(--stroke-hairline) solid hsl(var(--border));
4372
- }
4373
-
4374
- .ui-catalog-detail-section[data-variant="module"] {
4375
-
4376
- --button-gap: var(--editorial-catalog-detail-module-button-gap);
4377
- --button-icon-size: var(--editorial-catalog-detail-module-button-icon-size);
4378
- padding-block: var(--editorial-catalog-detail-module-padding-block);
4379
- border-block-start: 0;
4380
- }
4381
-
4382
- .ui-catalog-detail-section-title {
4383
- margin: 0 0 var(--editorial-catalog-detail-section-title-space-block-end);
4384
- font-family: var(--font-family-editorial, var(--font-family-display));
4385
- font-size: var(--editorial-catalog-detail-section-title-font-size);
4386
- font-weight: var(--font-weight-semibold);
4387
- line-height: var(--editorial-catalog-detail-section-title-line-height);
4388
- letter-spacing: var(--editorial-catalog-detail-section-title-letter-spacing);
4389
- }
4390
-
4391
- .ui-catalog-detail-section-description {
4392
- max-width: var(--editorial-catalog-detail-section-description-max-width);
4393
- margin: 0;
4394
- color: hsl(var(--muted-foreground));
4395
- font-size: var(--editorial-catalog-detail-section-description-font-size);
4396
- line-height: var(--editorial-catalog-detail-section-description-line-height);
4397
- }
4398
-
4399
- .ui-price-summary {
4400
- display: flex;
4401
- flex-wrap: wrap;
4402
- gap: var(--stroke-hairline);
4403
- margin-block-end: var(--editorial-price-summary-space-block-end);
4404
- overflow: hidden;
4405
- border: var(--stroke-hairline) solid hsl(var(--border));
4406
- border-radius: var(--editorial-price-summary-radius);
4407
- background: hsl(var(--border));
4408
- }
4409
-
4410
- .ui-price-summary-cell {
4411
- display: flex;
4412
- flex: 1 1 var(--editorial-price-summary-cell-width-basis);
4413
- flex-direction: column;
4414
- gap: var(--editorial-price-summary-cell-gap);
4415
- min-width: 0;
4416
- padding: var(--editorial-price-summary-cell-padding-block)
4417
- var(--editorial-price-summary-cell-padding-inline);
4418
- background: hsl(var(--card));
4419
- }
4420
-
4421
- .ui-price-summary-cell[data-context] {
4422
- flex: var(--editorial-price-summary-context-size-grow) 1
4423
- var(--editorial-price-summary-context-width-basis);
4424
- background: hsl(var(--muted));
4425
- }
4426
-
4427
- .ui-price-summary-label {
4428
- color: hsl(var(--muted-foreground));
4429
- font-size: var(--editorial-price-summary-label-font-size);
4430
- line-height: var(--editorial-price-summary-label-line-height);
4431
- }
4432
-
4433
- .ui-price-summary-value {
4434
- color: hsl(var(--text-brand, var(--primary)));
4435
- font-family: var(--editorial-kicker-font-family, var(--font-family-tabular, inherit));
4436
- font-size: var(--editorial-price-summary-value-font-size);
4437
- font-variant-numeric: tabular-nums;
4438
- font-weight: var(--font-weight-semibold);
4439
- line-height: var(--editorial-price-summary-value-line-height);
4440
- letter-spacing: var(--editorial-price-summary-value-letter-spacing);
4441
- }
4442
-
4443
- .ui-price-summary-caption {
4444
- color: hsl(var(--muted-foreground));
4445
- font-size: var(--editorial-price-summary-caption-font-size);
4446
- line-height: var(--editorial-price-summary-caption-line-height);
4447
- }
4448
-
4449
- .ui-price-summary-context {
4450
- display: flex;
4451
- align-items: center;
4452
- min-height: var(--editorial-price-summary-context-min-height);
4453
- font-size: var(--editorial-price-summary-context-font-size);
4454
- font-weight: var(--font-weight-semibold);
4455
- line-height: var(--editorial-price-summary-context-line-height);
4456
- }
4457
-
4458
- .ui-editorial-prompt {
4459
- display: flex;
4460
- flex-wrap: var(--editorial-prompt-align-wrap);
4461
- align-items: center;
4462
- gap: var(--editorial-prompt-gap);
4463
- padding: var(--editorial-prompt-padding);
4464
- border: var(--stroke-hairline) solid hsl(var(--border));
4465
- border-radius: var(--editorial-prompt-radius);
4466
- background: hsl(var(--muted));
4467
- }
4468
-
4469
- .ui-editorial-prompt-icon {
4470
- display: var(--editorial-prompt-icon-display);
4471
- flex: none;
4472
- place-items: center;
4473
- width: var(--editorial-prompt-icon-size);
4474
- height: var(--editorial-prompt-icon-size);
4475
- border-radius: 50%;
4476
- background: hsl(var(--card));
4477
- color: hsl(var(--text-brand, var(--primary)));
4478
- }
4479
-
4480
- .ui-editorial-prompt-icon svg {
4481
- width: var(--editorial-prompt-icon-glyph-size);
4482
- height: var(--editorial-prompt-icon-glyph-size);
4483
- }
4484
-
4485
- .ui-editorial-prompt-copy {
4486
- flex: var(--editorial-prompt-copy-size-grow) 1 var(--editorial-prompt-copy-width-basis);
4487
- min-width: var(--editorial-prompt-copy-min-width);
4488
- }
4489
-
4490
- .ui-editorial-prompt-title {
4491
- margin: 0 0 var(--editorial-prompt-title-space-block-end);
4492
- font-family: var(--font-family-editorial, var(--font-family-display));
4493
- font-size: var(--editorial-prompt-title-font-size);
4494
- font-weight: var(--font-weight-semibold);
4495
- line-height: var(--editorial-prompt-title-line-height);
4496
- }
4497
-
4498
- .ui-editorial-prompt-description,
4499
- .ui-editorial-prompt-note {
4500
- max-width: var(--editorial-prompt-description-max-width);
4501
- margin: 0;
4502
- color: hsl(var(--muted-foreground));
4503
- font-size: var(--editorial-prompt-description-font-size);
4504
- line-height: var(--editorial-prompt-description-line-height);
4505
- }
4506
-
4507
- .ui-editorial-prompt-note {
4508
- margin-block-start: var(--editorial-prompt-note-space-block-start);
4509
- font-size: var(--editorial-prompt-note-font-size);
4510
- }
4511
-
4512
- .ui-editorial-prompt-action {
4513
- --button-radius: var(--editorial-prompt-action-radius);
4514
- --button-padding-inline: var(--editorial-prompt-action-padding-inline);
4515
- --button-font-weight: var(--editorial-prompt-action-font-weight);
4516
- display: flex;
4517
- flex: 0 1 var(--editorial-prompt-action-width-basis);
4518
- margin-inline-start: var(--editorial-prompt-action-inset-inline-start);
4519
- }
4520
-
4521
- .ui-editorial-prompt-action > * {
4522
- flex: 1;
4523
- }
4524
-
4525
- .ui-editorial-banner-copy {
4526
- --editorial-eyebrow-font-size: var(--editorial-banner-kicker-font-size);
4527
- --editorial-eyebrow-line-height: var(--editorial-banner-kicker-line-height);
4528
- }
4529
-
4530
- @media (prefers-reduced-motion: reduce) {
4531
- .ui-catalog-card,
4532
- .ui-catalog-card:hover,
4533
- .ui-editorial-card,
4534
- .ui-editorial-card:hover,
4535
- .ui-card-showcase-card,
4536
- .ui-card-showcase-card:hover {
4537
- transition: none;
4538
- }
4539
-
4540
- .ui-catalog-card:hover,
4541
- .ui-editorial-card[data-variant="journal"]:hover {
4542
- transform: none;
4543
- }
4544
- }
4545
2564
  }