@shohojdhara/atomix 0.2.2 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/dist/atomix.css +714 -646
  2. package/dist/atomix.min.css +5 -5
  3. package/dist/index.d.ts +794 -146
  4. package/dist/index.esm.js +12052 -6091
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/index.js +5133 -2674
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.min.js +1 -1
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/themes/boomdevs.css +662 -594
  11. package/dist/themes/boomdevs.min.css +7 -7
  12. package/dist/themes/esrar.css +714 -646
  13. package/dist/themes/esrar.min.css +6 -6
  14. package/dist/themes/mashroom.css +707 -642
  15. package/dist/themes/mashroom.min.css +7 -7
  16. package/dist/themes/shaj-default.css +707 -642
  17. package/dist/themes/shaj-default.min.css +6 -6
  18. package/package.json +66 -15
  19. package/src/components/Accordion/Accordion.stories.tsx +800 -0
  20. package/src/components/Accordion/Accordion.tsx +33 -5
  21. package/src/components/AtomixGlass/AtomixGlass.stories.tsx +1230 -0
  22. package/src/components/AtomixGlass/AtomixGlass.test.tsx +199 -0
  23. package/src/components/AtomixGlass/AtomixGlass.tsx +1343 -0
  24. package/src/components/AtomixGlass/README.md +134 -0
  25. package/src/components/AtomixGlass/index.ts +10 -0
  26. package/src/components/AtomixGlass/shader-utils.ts +696 -0
  27. package/src/components/AtomixGlass/stories/Examples.stories.tsx +5800 -0
  28. package/src/components/AtomixGlass/stories/Modes.stories.tsx +1065 -0
  29. package/src/components/AtomixGlass/stories/Playground.stories.tsx +1066 -0
  30. package/src/components/AtomixGlass/stories/ShaderVariants.stories.tsx +397 -0
  31. package/src/components/AtomixGlass/stories/shared-components.tsx +310 -0
  32. package/src/components/AtomixGlass/utils.ts +8 -0
  33. package/src/components/Badge/Badge.stories.tsx +170 -0
  34. package/src/components/Badge/Badge.tsx +31 -4
  35. package/src/components/Button/Button.stories.tsx +826 -0
  36. package/src/components/Button/Button.tsx +34 -3
  37. package/src/components/Button/README.md +216 -0
  38. package/src/components/Callout/Callout.stories.tsx +813 -78
  39. package/src/components/Callout/Callout.test.tsx +368 -0
  40. package/src/components/Callout/Callout.tsx +43 -6
  41. package/src/components/Callout/README.md +409 -0
  42. package/src/components/Card/Card.stories.tsx +699 -0
  43. package/src/components/Card/Card.tsx +19 -3
  44. package/src/components/DatePicker/DatePicker copy.tsx +551 -0
  45. package/src/components/DatePicker/DatePicker.stories.tsx +877 -1
  46. package/src/components/DatePicker/DatePicker.tsx +379 -332
  47. package/src/components/DatePicker/readme.md +110 -1
  48. package/src/components/DatePicker/types.ts +8 -0
  49. package/src/components/Dropdown/Dropdown.stories.tsx +145 -0
  50. package/src/components/Dropdown/Dropdown.tsx +34 -5
  51. package/src/components/EdgePanel/EdgePanel.stories.tsx +476 -3
  52. package/src/components/EdgePanel/EdgePanel.tsx +86 -13
  53. package/src/components/Form/Checkbox.stories.tsx +101 -0
  54. package/src/components/Form/Checkbox.tsx +26 -2
  55. package/src/components/Form/Input.stories.tsx +124 -0
  56. package/src/components/Form/Input.tsx +36 -7
  57. package/src/components/Form/Radio.stories.tsx +139 -0
  58. package/src/components/Form/Radio.tsx +26 -2
  59. package/src/components/Form/Select.stories.tsx +110 -0
  60. package/src/components/Form/Select.tsx +26 -2
  61. package/src/components/Form/Textarea.stories.tsx +104 -0
  62. package/src/components/Form/Textarea.tsx +36 -7
  63. package/src/components/Hero/Hero.stories.tsx +54 -1
  64. package/src/components/Hero/Hero.tsx +70 -11
  65. package/src/components/Messages/Messages.stories.tsx +113 -0
  66. package/src/components/Messages/Messages.tsx +51 -9
  67. package/src/components/Modal/Modal.stories.tsx +237 -0
  68. package/src/components/Modal/Modal.tsx +63 -35
  69. package/src/components/Navigation/Nav/Nav.stories.tsx +469 -0
  70. package/src/components/Navigation/Nav/Nav.tsx +17 -4
  71. package/src/components/Navigation/Navbar/Navbar.stories.tsx +413 -0
  72. package/src/components/Navigation/Navbar/Navbar.tsx +66 -28
  73. package/src/components/Navigation/SideMenu/SideMenu.stories.tsx +340 -0
  74. package/src/components/Navigation/SideMenu/SideMenu.tsx +28 -2
  75. package/src/components/Pagination/Pagination.stories.tsx +101 -0
  76. package/src/components/Pagination/Pagination.tsx +25 -1
  77. package/src/components/Popover/Popover.stories.tsx +94 -0
  78. package/src/components/Popover/Popover.tsx +30 -4
  79. package/src/components/Progress/Progress.tsx +17 -2
  80. package/src/components/Rating/Rating.stories.tsx +112 -0
  81. package/src/components/Rating/Rating.tsx +25 -1
  82. package/src/components/Spinner/Spinner.tsx +17 -2
  83. package/src/components/Steps/Steps.stories.tsx +119 -0
  84. package/src/components/Steps/Steps.tsx +32 -1
  85. package/src/components/Tab/Tab.stories.tsx +88 -0
  86. package/src/components/Tab/Tab.tsx +32 -1
  87. package/src/components/Toggle/Toggle.stories.tsx +92 -0
  88. package/src/components/Toggle/Toggle.tsx +32 -1
  89. package/src/components/Tooltip/Tooltip.stories.tsx +131 -0
  90. package/src/components/Tooltip/Tooltip.tsx +43 -7
  91. package/src/components/VideoPlayer/VideoPlayer.stories.tsx +1002 -196
  92. package/src/components/VideoPlayer/VideoPlayer.tsx +161 -4
  93. package/src/components/index.ts +1 -0
  94. package/src/lib/composables/index.ts +4 -0
  95. package/src/lib/composables/useAtomixGlass.ts +71 -0
  96. package/src/lib/composables/useBarChart.ts +14 -4
  97. package/src/lib/composables/useButton.ts +3 -1
  98. package/src/lib/composables/useCallout.ts +4 -1
  99. package/src/lib/composables/useChart.ts +223 -370
  100. package/src/lib/composables/useChartToolbar.ts +11 -20
  101. package/src/lib/composables/useEdgePanel.ts +81 -35
  102. package/src/lib/composables/useGlassContainer.ts +168 -0
  103. package/src/lib/composables/useLineChart.ts +4 -2
  104. package/src/lib/composables/usePieChart.ts +4 -14
  105. package/src/lib/constants/components.ts +89 -0
  106. package/src/lib/types/components.ts +448 -14
  107. package/src/lib/utils/displacement-generator.ts +86 -0
  108. package/src/styles/01-settings/_settings.background.scss +8 -7
  109. package/src/styles/01-settings/_settings.callout.scss +7 -7
  110. package/src/styles/01-settings/_settings.edge-panel.scss +1 -1
  111. package/src/styles/02-tools/_tools.animations.scss +19 -0
  112. package/src/styles/02-tools/_tools.background.scss +19 -17
  113. package/src/styles/02-tools/_tools.glass.scss +1 -0
  114. package/src/styles/02-tools/_tools.utility-api.scss +62 -27
  115. package/src/styles/03-generic/_generic.root.scss +3 -2
  116. package/src/styles/04-elements/_elements.body.scss +0 -18
  117. package/src/styles/06-components/_components.accordion.scss +16 -0
  118. package/src/styles/06-components/_components.atomix-glass.scss +72 -0
  119. package/src/styles/06-components/_components.badge.scss +21 -0
  120. package/src/styles/06-components/_components.button.scss +10 -0
  121. package/src/styles/06-components/_components.callout.scss +46 -2
  122. package/src/styles/06-components/_components.card.scss +17 -0
  123. package/src/styles/06-components/_components.chart.scss +1 -1
  124. package/src/styles/06-components/_components.datepicker.scss +18 -0
  125. package/src/styles/06-components/_components.dropdown.scss +7 -1
  126. package/src/styles/06-components/_components.edge-panel.scss +101 -0
  127. package/src/styles/06-components/_components.hero.scss +1 -2
  128. package/src/styles/06-components/_components.input.scss +31 -1
  129. package/src/styles/06-components/_components.messages.scss +176 -0
  130. package/src/styles/06-components/_components.modal.scss +13 -3
  131. package/src/styles/06-components/_components.navbar.scss +12 -1
  132. package/src/styles/06-components/_components.side-menu.scss +5 -0
  133. package/src/styles/06-components/_components.video-player.scss +48 -26
  134. package/src/styles/06-components/_index.scss +1 -0
  135. package/src/styles/99-utilities/_index.scss +1 -0
  136. package/src/styles/99-utilities/_utilities.glass-fixes.scss +49 -0
  137. package/src/styles/99-utilities/_utilities.opacity.scss +1 -1
  138. package/dist/themes/yabai.css +0 -15207
  139. package/dist/themes/yabai.min.css +0 -189
@@ -39,6 +39,23 @@
39
39
  background-position: 0 50%;
40
40
  }
41
41
  }
42
+ @keyframes backgroundMoving {
43
+ 0% {
44
+ background-position: 0 0%;
45
+ }
46
+ 250% {
47
+ background-position: 100% 100%;
48
+ }
49
+ 50% {
50
+ background-position: 100% 0%;
51
+ }
52
+ 75% {
53
+ background-position: 0% 100%;
54
+ }
55
+ 100% {
56
+ background-position: 100% 100%;
57
+ }
58
+ }
42
59
  @keyframes component-spin {
43
60
  0% {
44
61
  transform: rotate(0deg);
@@ -622,25 +639,10 @@ body {
622
639
  font-weight: 400;
623
640
  font-size: 1rem;
624
641
  line-height: 1.6;
625
- background: url("https://plus.unsplash.com/premium_photo-1685082778205-8665f65e8c2c?q=80&w=3864&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
626
- background-size: cover;
627
- background-repeat: no-repeat;
628
- background-attachment: fixed;
629
642
  }
630
643
  body.is-blocked, body.is-modal-open {
631
644
  overflow: hidden;
632
645
  }
633
- body::after {
634
- content: "";
635
- position: fixed;
636
- top: 0;
637
- left: 0;
638
- width: 100%;
639
- height: 100%;
640
- opacity: 0.7;
641
- z-index: -1;
642
- background: var(--atomix-gradient);
643
- }
644
646
  h1,
645
647
  .h1 {
646
648
  font-size: 2.75rem;
@@ -16029,10 +16031,7 @@ a, a:hover {
16029
16031
  transition-duration: 0.2s;
16030
16032
  transition-timing-function: ease-in-out;
16031
16033
  transition-delay: 0s;
16032
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-accordion-header-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-accordion-header-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-accordion-header-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-accordion-header-bg) 15%, transparent) 0%, transparent 70%);
16033
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
16034
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
16035
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-accordion-header-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-accordion-header-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
16034
+ background-color: var(--atomix-accordion-header-bg);
16036
16035
  }
16037
16036
  .c-accordion__header--icon-left {
16038
16037
  flex-direction: row-reverse;
@@ -16067,10 +16066,7 @@ a, a:hover {
16067
16066
  color: var(--atomix-accordion-body-color);
16068
16067
  padding: var(--atomix-accordion-body-padding-y) var(--atomix-accordion-body-padding-x);
16069
16068
  border-radius: 0 0 var(--atomix-accordion-border-radius) var(--atomix-accordion-border-radius);
16070
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-accordion-body-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-body-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-accordion-body-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-accordion-body-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-accordion-body-bg) 15%, transparent) 0%, transparent 70%);
16071
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
16072
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
16073
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-accordion-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-accordion-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-accordion-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
16069
+ background-color: var(--atomix-accordion-body-bg);
16074
16070
  }
16075
16071
  .c-accordion:focus, .c-accordion.is-focused {
16076
16072
  --atomix-accordion-border-color: var(--atomix-focus-border-color);
@@ -16087,6 +16083,15 @@ a, a:hover {
16087
16083
  --atomix-accordion-body-color: var(--atomix-accordion-disable-color);
16088
16084
  --atomix-accordion-icon-color: var(--atomix-accordion-disable-color);
16089
16085
  }
16086
+ .c-accordion--glass {
16087
+ border-color: transparent;
16088
+ }
16089
+ .c-accordion--glass .c-accordion__header {
16090
+ background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
16091
+ }
16092
+ .c-accordion--glass .c-accordion__body {
16093
+ background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
16094
+ }
16090
16095
  .c-avatar {
16091
16096
  --atomix-avatar-fit: cover;
16092
16097
  --atomix-avatar-size: 2.75rem;
@@ -16108,10 +16113,7 @@ a, a:hover {
16108
16113
  width: var(--atomix-avatar-size);
16109
16114
  height: var(--atomix-avatar-size);
16110
16115
  border-radius: var(--atomix-avatar-border-radius);
16111
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-avatar-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-avatar-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-avatar-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-avatar-bg) 15%, transparent) 0%, transparent 70%);
16112
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
16113
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
16114
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-avatar-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-avatar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-avatar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
16116
+ background-color: var(--atomix-avatar-bg);
16115
16117
  color: var(--atomix-avatar-color);
16116
16118
  border: var(--atomix-avatar-border-width) solid var(--atomix-avatar-border-color);
16117
16119
  overflow: hidden;
@@ -16213,10 +16215,7 @@ a, a:hover {
16213
16215
  color: var(--atomix-avatar-group-more-color);
16214
16216
  font-size: var(--atomix-avatar-group-more-font-size);
16215
16217
  font-weight: var(--atomix-avatar-group-more-font-weight);
16216
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 15%, transparent) 0%, transparent 70%);
16217
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
16218
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
16219
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-avatar-group-more-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-avatar-group-more-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-avatar-group-more-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
16218
+ background-color: var(--atomix-avatar-group-more-bg);
16220
16219
  border: var(--atomix-avatar-group-more-border-width) solid var(--atomix-avatar-group-more-border-color);
16221
16220
  width: var(--atomix-avatar-size);
16222
16221
  height: var(--atomix-avatar-size);
@@ -16270,6 +16269,61 @@ a, a:hover {
16270
16269
  margin-left: calc(var(--atomix-avatar-size) * -1 * var(--atomix-avatar-group-stacked-overlap) / 100);
16271
16270
  z-index: 1;
16272
16271
  }
16272
+ .atomix-glass__layer, .atomix-glass__overlay, .atomix-glass__base, .atomix-glass__border-1, .atomix-glass__border-2 {
16273
+ pointer-events: none;
16274
+ position: absolute;
16275
+ inset: 0;
16276
+ border-radius: inherit;
16277
+ transform: inherit;
16278
+ transition: inherit;
16279
+ }
16280
+ .atomix-glass__border-1, .atomix-glass__border-2 {
16281
+ box-sizing: border-box;
16282
+ padding: 1.5px;
16283
+ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
16284
+ -webkit-mask-composite: xor;
16285
+ mask-composite: exclude;
16286
+ box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35);
16287
+ transition-property: transform;
16288
+ }
16289
+ .atomix-glass__border-1 {
16290
+ z-index: 5;
16291
+ opacity: 0.3;
16292
+ mix-blend-mode: screen;
16293
+ }
16294
+ .atomix-glass__border-2 {
16295
+ z-index: 6;
16296
+ }
16297
+ .atomix-glass__hover-1, .atomix-glass__hover-2, .atomix-glass__hover-3 {
16298
+ position: absolute;
16299
+ inset: 0;
16300
+ pointer-events: none;
16301
+ border-radius: inherit;
16302
+ transform: inherit;
16303
+ transition: inherit;
16304
+ transition-property: transform, opacity;
16305
+ }
16306
+ .atomix-glass__hover-1 {
16307
+ opacity: 0;
16308
+ }
16309
+ .atomix-glass__hover-2 {
16310
+ overflow: hidden;
16311
+ opacity: 0;
16312
+ }
16313
+ .atomix-glass__hover-3 {
16314
+ opacity: 0;
16315
+ }
16316
+ .atomix-glass__base {
16317
+ will-change: transform;
16318
+ transition-property: transform, opacity;
16319
+ opacity: 0;
16320
+ }
16321
+ .atomix-glass__overlay {
16322
+ mix-blend-mode: overlay;
16323
+ will-change: transform;
16324
+ transition-property: transform, opacity;
16325
+ opacity: 0;
16326
+ }
16273
16327
  .c-badge {
16274
16328
  --atomix-tag-font-size: 12px;
16275
16329
  --atomix-tag-font-weight: 500;
@@ -16289,10 +16343,7 @@ a, a:hover {
16289
16343
  line-height: 1;
16290
16344
  padding: var(--atomix-tag-padding-y) var(--atomix-tag-padding-x);
16291
16345
  border-radius: var(--atomix-tag-border-radius);
16292
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-tag-bg-color) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-tag-bg-color) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-tag-bg-color) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-tag-bg-color) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-tag-bg-color) 15%, transparent) 0%, transparent 70%);
16293
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
16294
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
16295
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
16346
+ background-color: var(--atomix-tag-bg-color);
16296
16347
  -webkit-user-select: none;
16297
16348
  -moz-user-select: none;
16298
16349
  user-select: none;
@@ -16308,6 +16359,10 @@ a, a:hover {
16308
16359
  .c-badge--lg {
16309
16360
  --atomix-tag-padding-y: 8px;
16310
16361
  }
16362
+ .c-badge--glass {
16363
+ background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent);
16364
+ border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 90%, transparent);
16365
+ }
16311
16366
  .c-badge--primary {
16312
16367
  --atomix-tag-bg-color: var(--atomix-brand-bg-subtle);
16313
16368
  --atomix-tag-color: var(--atomix-brand-text-emphasis);
@@ -16335,10 +16390,12 @@ a, a:hover {
16335
16390
  .c-badge--light {
16336
16391
  --atomix-tag-bg-color: var(--atomix-light);
16337
16392
  --atomix-tag-color: var(--atomix-dark);
16393
+ border: 1px solid var(--atomix-light);
16338
16394
  }
16339
16395
  .c-badge--dark {
16340
16396
  --atomix-tag-bg-color: var(--atomix-dark);
16341
16397
  --atomix-tag-color: var(--atomix-light);
16398
+ border: 1px solid var(--atomix-dark);
16342
16399
  }
16343
16400
  .c-breadcrumb {
16344
16401
  --atomix-breadcrumb-font-size: 0.875rem;
@@ -16360,10 +16417,7 @@ a, a:hover {
16360
16417
  list-style: none;
16361
16418
  padding-left: 0px;
16362
16419
  margin-bottom: var(--atomix-breadcrumb-margin-bottom);
16363
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-breadcrumb-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-breadcrumb-bg) 15%, transparent) 0%, transparent 70%);
16364
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
16365
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
16366
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-breadcrumb-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-breadcrumb-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-breadcrumb-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
16420
+ background-color: var(--atomix-breadcrumb-bg);
16367
16421
  }
16368
16422
  .c-breadcrumb__item {
16369
16423
  display: flex;
@@ -16458,10 +16512,7 @@ a, a:hover {
16458
16512
  text-align: center;
16459
16513
  white-space: nowrap;
16460
16514
  vertical-align: middle;
16461
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-btn-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-btn-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-btn-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-btn-bg) 15%, transparent) 0%, transparent 70%);
16462
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
16463
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
16464
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-btn-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-btn-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-btn-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
16515
+ background-color: var(--atomix-btn-bg);
16465
16516
  cursor: pointer;
16466
16517
  -webkit-user-select: none;
16467
16518
  -moz-user-select: none;
@@ -16475,10 +16526,7 @@ a, a:hover {
16475
16526
  }
16476
16527
  .c-btn:hover {
16477
16528
  color: var(--atomix-btn-hover-color);
16478
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-btn-hover-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-hover-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-btn-hover-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-btn-hover-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-btn-hover-bg) 15%, transparent) 0%, transparent 70%);
16479
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
16480
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
16481
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-btn-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-btn-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
16529
+ background-color: var(--atomix-btn-hover-bg);
16482
16530
  border-color: var(--atomix-btn-hover-border-color);
16483
16531
  }
16484
16532
  .c-btn--primary {
@@ -16742,13 +16790,16 @@ a, a:hover {
16742
16790
  .c-btn:disabled, .c-btn--disabled, fieldset:disabled .c-btn {
16743
16791
  color: var(--atomix-btn-disabled-color);
16744
16792
  pointer-events: none;
16745
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-btn-disabled-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-btn-disabled-bg) 15%, transparent) 0%, transparent 70%);
16746
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
16747
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
16748
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-btn-disabled-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-btn-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-btn-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
16793
+ background-color: var(--atomix-btn-disabled-bg);
16749
16794
  border-color: var(--atomix-btn-disabled-border-color);
16750
16795
  opacity: var(--atomix-btn-disabled-opacity);
16751
16796
  }
16797
+ .c-btn--glass {
16798
+ background-color: color-mix(in srgb, var(--atomix-btn-bg) 50%, transparent);
16799
+ }
16800
+ .c-btn--glass:hover {
16801
+ background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 50%, transparent);
16802
+ }
16752
16803
  .c-datepicker {
16753
16804
  --atomix-datepicker-width: 22rem;
16754
16805
  --atomix-datepicker-padding-x: 0.75rem;
@@ -16827,10 +16878,7 @@ a, a:hover {
16827
16878
  z-index: 5;
16828
16879
  width: var(--atomix-datepicker-width);
16829
16880
  padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
16830
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-datepicker-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-datepicker-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-datepicker-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-datepicker-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-datepicker-bg) 15%, transparent) 0%, transparent 70%);
16831
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
16832
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
16833
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-datepicker-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-datepicker-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-datepicker-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
16881
+ background-color: var(--atomix-datepicker-bg);
16834
16882
  border-radius: var(--atomix-datepicker-border-radius);
16835
16883
  box-shadow: var(--atomix-datepicker-box-shadow);
16836
16884
  margin-top: 0.25rem;
@@ -16874,6 +16922,24 @@ a, a:hover {
16874
16922
  .c-datepicker__calendar--right-end {
16875
16923
  bottom: 0;
16876
16924
  }
16925
+ .c-datepicker__calendar--glass {
16926
+ z-index: auto;
16927
+ z-index: initial;
16928
+ box-shadow: none;
16929
+ border: none;
16930
+ border-radius: 0;
16931
+ padding: 0;
16932
+ background: transparent;
16933
+ }
16934
+ .c-datepicker__glass-content {
16935
+ z-index: auto;
16936
+ z-index: initial;
16937
+ box-shadow: none;
16938
+ border: none;
16939
+ border-radius: var(--atomix-datepicker-border-radius);
16940
+ padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
16941
+ background: color-mix(in srgb, var(--atomix-datepicker-bg) 50%, transparent 0%);
16942
+ }
16877
16943
  .c-datepicker--inline {
16878
16944
  --atomix-datepicker-width: calc(
16879
16945
  var(--atomix-datepicker-width) + var(--atomix-datepicker-week-width)
@@ -17195,10 +17261,7 @@ a, a:hover {
17195
17261
  transition-duration: 0.2s;
17196
17262
  transition-timing-function: ease-in-out;
17197
17263
  transition-delay: 0s;
17198
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-card-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-card-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-card-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-card-bg) 15%, transparent) 0%, transparent 70%);
17199
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
17200
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
17201
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-card-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-card-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-card-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
17264
+ background-color: var(--atomix-card-bg);
17202
17265
  }
17203
17266
  .c-card__header {
17204
17267
  margin-bottom: var(--atomix-card-header-spacer-y);
@@ -17239,10 +17302,7 @@ a, a:hover {
17239
17302
  border-radius: 50rem;
17240
17303
  }
17241
17304
  .c-card:hover {
17242
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-card-bg-hover) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg-hover) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-card-bg-hover) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-card-bg-hover) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-card-bg-hover) 15%, transparent) 0%, transparent 70%);
17243
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
17244
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
17245
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-card-bg-hover) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-card-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-card-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
17305
+ background-color: var(--atomix-card-bg-hover);
17246
17306
  }
17247
17307
  .c-card:focus, .c-card.is-active {
17248
17308
  --atomix-card-border-color: var(--atomix-brand-border-subtle);
@@ -17282,6 +17342,21 @@ a, a:hover {
17282
17342
  padding: var(--atomix-card-row-spacer-y) var(--atomix-card-row-spacer-x);
17283
17343
  padding-top: 0;
17284
17344
  }
17345
+ .c-card--glass {
17346
+ background-color: transparent;
17347
+ padding: 0;
17348
+ border: none;
17349
+ display: block;
17350
+ border-radius: 0;
17351
+ }
17352
+ .c-card--glass .c-card__glass-content {
17353
+ padding: var(--atomix-card-spacer-y) var(--atomix-card-spacer-x);
17354
+ max-width: var(--atomix-card-width);
17355
+ border-radius: var(--atomix-card-border-radius);
17356
+ width: 100%;
17357
+ background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
17358
+ background-blend-mode: overlay;
17359
+ }
17285
17360
  .is-elevated .c-card {
17286
17361
  box-shadow: var(--atomix-box-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.175));
17287
17362
  z-index: 1;
@@ -17307,19 +17382,12 @@ a, a:hover {
17307
17382
  min-height: var(--atomix-chart-min-height);
17308
17383
  width: 100%;
17309
17384
  max-width: 100%;
17310
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-chart-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-chart-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-chart-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-chart-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-chart-bg) 15%, transparent) 0%, transparent 70%);
17311
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
17312
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
17385
+ background-color: var(--atomix-chart-bg);
17313
17386
  transition-property: all;
17314
17387
  transition-duration: 0.2s;
17315
17388
  transition-timing-function: ease-in-out;
17316
17389
  transition-delay: 0s;
17317
17390
  }
17318
- @supports (color: color-mix(in lch, red, blue)){
17319
- .c-chart {
17320
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-chart-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-chart-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-chart-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
17321
- }
17322
- }
17323
17391
  .c-chart::after {
17324
17392
  content: "";
17325
17393
  position: absolute;
@@ -19023,7 +19091,7 @@ a, a:hover {
19023
19091
  animation: none;
19024
19092
  }
19025
19093
  }
19026
- .c-chart:focus-within__data-point:focus {
19094
+ .c-chart:focus-within .c-chart__data-point:focus {
19027
19095
  outline: 2px solid var(--atomix-primary-6);
19028
19096
  outline-offset: 2px;
19029
19097
  z-index: 10;
@@ -19125,10 +19193,7 @@ a, a:hover {
19125
19193
  -webkit-appearance: none;
19126
19194
  -moz-appearance: none;
19127
19195
  appearance: none;
19128
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-checkbox-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-checkbox-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-checkbox-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-checkbox-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-checkbox-bg) 15%, transparent) 0%, transparent 70%);
19129
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19130
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19131
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-checkbox-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-checkbox-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-checkbox-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19196
+ background-color: var(--atomix-checkbox-bg);
19132
19197
  width: var(--atomix-checkbox-width);
19133
19198
  height: var(--atomix-checkbox-height);
19134
19199
  color: currentColor;
@@ -19217,10 +19282,7 @@ a, a:hover {
19217
19282
  color: var(--atomix-body-color);
19218
19283
  }
19219
19284
  .c-color-mode-toggle:hover {
19220
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, rgba(0, 0, 0, 0.05) 60%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 50%, transparent) 35%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 40%, transparent) 65%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, rgba(0, 0, 0, 0.05) 15%, transparent) 0%, transparent 70%);
19221
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19222
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19223
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19285
+ background-color: rgba(0, 0, 0, 0.05);
19224
19286
  }
19225
19287
  .c-color-mode-toggle:focus {
19226
19288
  outline: none;
@@ -19231,10 +19293,7 @@ a, a:hover {
19231
19293
  height: 1.5rem;
19232
19294
  }
19233
19295
  [data-atomix-theme=dark] .c-color-mode-toggle:hover {
19234
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, rgba(255, 255, 255, 0.1) 60%, transparent) 0%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 50%, transparent) 35%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 40%, transparent) 65%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, rgba(255, 255, 255, 0.1) 15%, transparent) 0%, transparent 70%);
19235
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19236
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19237
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(255, 255, 255, 0.1) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(255, 255, 255, 0.1) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(255, 255, 255, 0.1) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19296
+ background-color: rgba(255, 255, 255, 0.1);
19238
19297
  }
19239
19298
  .c-countdown {
19240
19299
  --atomix-countdown-color: var(--atomix-body-color);
@@ -19272,10 +19331,7 @@ a, a:hover {
19272
19331
  align-items: center;
19273
19332
  padding: var(--atomix-countdown-item-padding-y) var(--atomix-countdown-item-padding-x);
19274
19333
  border-radius: var(--atomix-countdown-focused-border-radius);
19275
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-countdown-focused-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-countdown-focused-bg) 15%, transparent) 0%, transparent 70%);
19276
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19277
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19278
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-countdown-focused-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-countdown-focused-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-countdown-focused-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19334
+ background-color: var(--atomix-countdown-focused-bg);
19279
19335
  }
19280
19336
  .c-countdown--focused .c-countdown__time-label {
19281
19337
  font-size: var(--atomix-countdown-focused-label-font-size);
@@ -19302,17 +19358,11 @@ a, a:hover {
19302
19358
  width: 100%;
19303
19359
  margin-bottom: 0;
19304
19360
  color: var(--atomix-data-table-color);
19305
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-data-table-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-data-table-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-data-table-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-data-table-bg) 15%, transparent) 0%, transparent 70%);
19306
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19307
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19308
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19361
+ background-color: var(--atomix-data-table-bg);
19309
19362
  border-collapse: collapse;
19310
19363
  }
19311
19364
  .c-data-table__header {
19312
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-data-table-header-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-header-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-data-table-header-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-data-table-header-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-data-table-header-bg) 15%, transparent) 0%, transparent 70%);
19313
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19314
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19315
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-header-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-header-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19365
+ background-color: var(--atomix-data-table-header-bg);
19316
19366
  }
19317
19367
  .c-data-table__header-cell {
19318
19368
  padding: 1rem 1.25rem;
@@ -19329,10 +19379,7 @@ a, a:hover {
19329
19379
  user-select: none;
19330
19380
  }
19331
19381
  .c-data-table__header-cell--sortable:hover {
19332
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, rgba(0, 0, 0, 0.05) 60%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 50%, transparent) 35%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 40%, transparent) 65%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, rgba(0, 0, 0, 0.05) 15%, transparent) 0%, transparent 70%);
19333
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19334
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19335
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19382
+ background-color: rgba(0, 0, 0, 0.05);
19336
19383
  }
19337
19384
  .c-data-table__header-content {
19338
19385
  display: flex;
@@ -19353,16 +19400,10 @@ a, a:hover {
19353
19400
  vertical-align: middle;
19354
19401
  }
19355
19402
  .c-data-table__row {
19356
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-data-table-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-data-table-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-data-table-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-data-table-bg) 15%, transparent) 0%, transparent 70%);
19357
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19358
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19359
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19403
+ background-color: var(--atomix-data-table-bg);
19360
19404
  }
19361
19405
  .c-data-table__row:hover {
19362
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-data-table-hover-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-data-table-hover-bg) 15%, transparent) 0%, transparent 70%);
19363
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19364
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19365
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19406
+ background-color: var(--atomix-data-table-hover-bg);
19366
19407
  }
19367
19408
  .c-data-table__row[role=button] {
19368
19409
  cursor: pointer;
@@ -19380,10 +19421,7 @@ a, a:hover {
19380
19421
  color: var(--atomix-gray-500);
19381
19422
  }
19382
19423
  .c-data-table--striped tbody tr:nth-of-type(odd) {
19383
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-data-table-striped-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-data-table-striped-bg) 15%, transparent) 0%, transparent 70%);
19384
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19385
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19386
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-data-table-striped-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-data-table-striped-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-data-table-striped-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19424
+ background-color: var(--atomix-data-table-striped-bg);
19387
19425
  }
19388
19426
  .c-data-table--bordered {
19389
19427
  border: var(--atomix-border-width) var(--atomix-border-style) var(--atomix-data-table-border-color);
@@ -19493,7 +19531,6 @@ a, a:hover {
19493
19531
  .c-dropdown__menu-wrapper {
19494
19532
  position: absolute;
19495
19533
  left: 0;
19496
- z-index: 99;
19497
19534
  display: flex;
19498
19535
  opacity: 0;
19499
19536
  visibility: hidden;
@@ -19575,14 +19612,16 @@ a, a:hover {
19575
19612
  padding: var(--atomix-dropdown-padding-y) var(--atomix-dropdown-padding-x);
19576
19613
  list-style: none;
19577
19614
  margin-bottom: 0rem;
19578
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-dropdown-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-dropdown-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-dropdown-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-dropdown-bg) 15%, transparent) 0%, transparent 70%);
19579
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19580
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19581
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-dropdown-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-dropdown-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19615
+ border: 1px solid rgba(255, 255, 255, 0.08);
19616
+ background-color: var(--atomix-dropdown-bg);
19582
19617
  border-radius: var(--atomix-dropdown-border-radius);
19583
19618
  box-shadow: var(--atomix-dropdown-box-shadow);
19584
19619
  overflow: hidden;
19585
19620
  }
19621
+ .c-dropdown__menu--glass {
19622
+ background-color: color-mix(in srgb, var(--atomix-dropdown-bg) 50%, transparent);
19623
+ box-shadow: var(--atomix-dropdown-box-shadow);
19624
+ }
19586
19625
  .c-dropdown__menu-item {
19587
19626
  display: block;
19588
19627
  width: 100%;
@@ -19599,19 +19638,13 @@ a, a:hover {
19599
19638
  }
19600
19639
  .c-dropdown__menu-item:hover, .c-dropdown__menu-item:focus {
19601
19640
  color: var(--atomix-dropdown-link-hover-color);
19602
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 15%, transparent) 0%, transparent 70%);
19603
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19604
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19605
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19641
+ background-color: var(--atomix-dropdown-link-hover-bg);
19606
19642
  outline: none;
19607
19643
  padding-left: calc(var(--atomix-dropdown-item-padding-x) + 3px);
19608
19644
  }
19609
19645
  .c-dropdown__menu-item.is-active {
19610
19646
  color: var(--atomix-dropdown-active-color);
19611
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-dropdown-active-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-dropdown-active-bg) 15%, transparent) 0%, transparent 70%);
19612
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19613
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19614
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-dropdown-active-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-dropdown-active-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-dropdown-active-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19647
+ background-color: var(--atomix-dropdown-active-bg);
19615
19648
  }
19616
19649
  .c-dropdown__menu-item.is-disabled {
19617
19650
  color: var(--atomix-dropdown-color);
@@ -19708,10 +19741,7 @@ a, a:hover {
19708
19741
  .c-edge-panel__backdrop {
19709
19742
  position: absolute;
19710
19743
  inset: 0;
19711
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 15%, transparent) 0%, transparent 70%);
19712
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19713
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19714
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19744
+ background-color: var(--atomix-edge-panel-backdrop-bg);
19715
19745
  -webkit-backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
19716
19746
  backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
19717
19747
  opacity: 0;
@@ -19730,10 +19760,7 @@ a, a:hover {
19730
19760
  color: var(--atomix-edge-panel-color);
19731
19761
  width: var(--atomix-edge-panel-width);
19732
19762
  height: 100%;
19733
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-edge-panel-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-edge-panel-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-edge-panel-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-edge-panel-bg) 15%, transparent) 0%, transparent 70%);
19734
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19735
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19736
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-edge-panel-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-edge-panel-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19763
+ background-color: var(--atomix-edge-panel-bg);
19737
19764
  box-shadow: var(--atomix-edge-panel-shadow);
19738
19765
  z-index: 2;
19739
19766
  overflow: hidden;
@@ -19768,10 +19795,7 @@ a, a:hover {
19768
19795
  transition: background-color 0.2s ease;
19769
19796
  }
19770
19797
  .c-edge-panel__close:hover {
19771
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, rgba(0, 0, 0, 0.05) 60%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 50%, transparent) 35%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 40%, transparent) 65%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, rgba(0, 0, 0, 0.05) 15%, transparent) 0%, transparent 70%);
19772
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19773
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19774
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
19798
+ background-color: rgba(0, 0, 0, 0.05);
19775
19799
  }
19776
19800
  .c-edge-panel__close:focus-visible {
19777
19801
  outline: 2px solid var(--atomix-primary);
@@ -19957,6 +19981,89 @@ a, a:hover {
19957
19981
  transform: translateY(100%);
19958
19982
  }
19959
19983
  }
19984
+ .c-edge-panel--glass {
19985
+ position: absolute;
19986
+ z-index: auto;
19987
+ z-index: initial;
19988
+ }
19989
+ .c-edge-panel--glass .c-edge-panel__container {
19990
+ background: transparent;
19991
+ box-shadow: none;
19992
+ overflow: hidden;
19993
+ border: none;
19994
+ padding: 0;
19995
+ z-index: auto;
19996
+ z-index: initial;
19997
+ will-change: initial;
19998
+ transform: none !important;
19999
+ border-radius: inherit;
20000
+ opacity: 0;
20001
+ transition: opacity 0.3s ease;
20002
+ }
20003
+ .c-edge-panel--glass .c-edge-panel__glass-content {
20004
+ display: flex;
20005
+ flex-direction: column;
20006
+ overflow: hidden;
20007
+ width: 100%;
20008
+ height: 100vh;
20009
+ padding: 0;
20010
+ border-radius: inherit;
20011
+ transition: opacity 0.3s ease;
20012
+ }
20013
+ .c-edge-panel--glass .c-edge-panel__header {
20014
+ background: transparent;
20015
+ border-bottom: 1px solid rgba(255, 255, 255, 0.15);
20016
+ flex-shrink: 0;
20017
+ padding: var(--atomix-edge-panel-padding-y) var(--atomix-edge-panel-padding-x);
20018
+ }
20019
+ .c-edge-panel--glass .c-edge-panel__body {
20020
+ background: transparent;
20021
+ flex: 1 1;
20022
+ overflow-y: auto;
20023
+ padding: var(--atomix-edge-panel-padding-y) var(--atomix-edge-panel-padding-x);
20024
+ }
20025
+ .c-edge-panel--glass .c-edge-panel__close {
20026
+ background: rgba(255, 255, 255, 0.05);
20027
+ }
20028
+ .c-edge-panel--glass .c-edge-panel__close:hover {
20029
+ background: rgba(255, 255, 255, 0.15);
20030
+ }
20031
+ .c-edge-panel--glass .c-edge-panel__close:focus-visible {
20032
+ outline-color: rgba(255, 255, 255, 0.5);
20033
+ }
20034
+ .c-edge-panel--glass .c-edge-panel__backdrop {
20035
+ animation: fadeIn 0.3s ease forwards;
20036
+ z-index: 0;
20037
+ }
20038
+ .c-edge-panel--glass .c-edge-panel__backdrop.is-animating-out {
20039
+ animation: fadeOut 0.3s ease forwards;
20040
+ }
20041
+ .c-edge-panel--glass.c-edge-panel--start .c-edge-panel__glass-wrapper {
20042
+ animation: slideInStart 0.3s ease forwards;
20043
+ }
20044
+ .c-edge-panel--glass.c-edge-panel--start .c-edge-panel__glass-wrapper.is-animating-out {
20045
+ animation: slideOutStart 0.3s ease forwards;
20046
+ }
20047
+ .c-edge-panel--glass.c-edge-panel--end .c-edge-panel__glass-wrapper {
20048
+ animation: slideInEnd 0.3s ease forwards;
20049
+ }
20050
+ .c-edge-panel--glass.c-edge-panel--end .c-edge-panel__glass-wrapper.is-animating-out {
20051
+ animation: slideOutEnd 0.3s ease forwards;
20052
+ }
20053
+ .c-edge-panel--glass.c-edge-panel--top .c-edge-panel__glass-wrapper {
20054
+ animation: slideInTop 0.3s ease forwards;
20055
+ }
20056
+ .c-edge-panel--glass.c-edge-panel--bottom .c-edge-panel__glass-wrapper {
20057
+ animation: slideInBottom 0.3s ease forwards;
20058
+ }
20059
+ .c-edge-panel--glass.c-edge-panel--bottom .c-edge-panel__container, .c-edge-panel--glass.c-edge-panel--top .c-edge-panel__container {
20060
+ width: 100vw;
20061
+ height: auto;
20062
+ }
20063
+ .c-edge-panel--glass.c-edge-panel--bottom .c-edge-panel__glass-content, .c-edge-panel--glass.c-edge-panel--top .c-edge-panel__glass-content {
20064
+ width: 100vw;
20065
+ height: auto;
20066
+ }
19960
20067
  .c-footer {
19961
20068
  --atomix-footer-padding-x: 1rem;
19962
20069
  --atomix-footer-padding-y: 3rem;
@@ -19971,10 +20078,7 @@ a, a:hover {
19971
20078
  --atomix-footer-newsletter-padding: 1.5rem;
19972
20079
  --atomix-footer-bottom-padding-top: 1.5rem;
19973
20080
  --atomix-footer-bottom-margin-top: 2rem;
19974
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-footer-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-footer-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-footer-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-footer-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-footer-bg) 15%, transparent) 0%, transparent 70%);
19975
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
19976
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
19977
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-footer-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-footer-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-footer-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
20081
+ background-color: var(--atomix-footer-bg);
19978
20082
  color: var(--atomix-footer-color);
19979
20083
  border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
19980
20084
  padding: var(--atomix-footer-padding-y) 0;
@@ -20186,10 +20290,7 @@ a, a:hover {
20186
20290
  justify-content: center;
20187
20291
  width: 2.5rem;
20188
20292
  height: 2.5rem;
20189
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-surface-variant) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-surface-variant) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-surface-variant) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-surface-variant) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-surface-variant) 15%, transparent) 0%, transparent 70%);
20190
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
20191
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
20192
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-surface-variant) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-surface-variant) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-surface-variant) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
20293
+ background-color: var(--atomix-surface-variant);
20193
20294
  color: var(--atomix-text);
20194
20295
  border-radius: 50%;
20195
20296
  text-decoration: none;
@@ -20206,10 +20307,7 @@ a, a:hover {
20206
20307
  transition: transform 0.6s ease;
20207
20308
  }
20208
20309
  .c-footer__social-link:hover, .c-footer__social-link:focus {
20209
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-primary) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-primary) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-primary) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-primary) 15%, transparent) 0%, transparent 70%);
20210
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
20211
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
20212
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
20310
+ background-color: var(--atomix-primary);
20213
20311
  color: var(--atomix-primary-contrast);
20214
20312
  transform: translateY(-3px) scale(1.05);
20215
20313
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
@@ -20277,10 +20375,7 @@ a, a:hover {
20277
20375
  background: linear-gradient(135deg, #25d366, #66bb6a);
20278
20376
  }
20279
20377
  .c-footer__newsletter {
20280
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8)) 60%, transparent) 0%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8)) 50%, transparent) 35%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8)) 40%, transparent) 65%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8)) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8)) 15%, transparent) 0%, transparent 70%);
20281
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
20282
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
20283
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8)) 10%, transparent), 4px 8px 32px color-mix(in srgb, linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8)) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8)) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
20378
+ background-color: linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8));
20284
20379
  padding: 1.5rem;
20285
20380
  border-radius: 0.5rem;
20286
20381
  border: 1px solid var(--atomix-border-subtle);
@@ -20336,10 +20431,7 @@ a, a:hover {
20336
20431
  flex: 1 1;
20337
20432
  padding: 0.75rem 1rem;
20338
20433
  font-size: 0.875rem;
20339
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-surface) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-surface) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-surface) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-surface) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-surface) 15%, transparent) 0%, transparent 70%);
20340
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
20341
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
20342
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-surface) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-surface) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-surface) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
20434
+ background-color: var(--atomix-surface);
20343
20435
  color: var(--atomix-text);
20344
20436
  border: 1px solid var(--atomix-border);
20345
20437
  border-radius: 0.375rem;
@@ -20368,10 +20460,7 @@ a, a:hover {
20368
20460
  }
20369
20461
  .c-footer__newsletter-button {
20370
20462
  padding: 0.75rem 1.5rem;
20371
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-primary) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-primary) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-primary) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-primary) 15%, transparent) 0%, transparent 70%);
20372
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
20373
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
20374
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
20463
+ background-color: var(--atomix-primary);
20375
20464
  color: var(--atomix-primary-contrast);
20376
20465
  border: none;
20377
20466
  border-radius: 0.375rem;
@@ -20391,10 +20480,7 @@ a, a:hover {
20391
20480
  transition: transform 0.6s ease;
20392
20481
  }
20393
20482
  .c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
20394
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-primary-hover) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-hover) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-primary-hover) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-primary-hover) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-primary-hover) 15%, transparent) 0%, transparent 70%);
20395
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
20396
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
20397
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary-hover) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
20483
+ background-color: var(--atomix-primary-hover);
20398
20484
  transform: translateY(-2px);
20399
20485
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
20400
20486
  }
@@ -20439,10 +20525,7 @@ a, a:hover {
20439
20525
  align-items: center;
20440
20526
  gap: 0.5rem;
20441
20527
  padding: 0.75rem 1.25rem;
20442
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-surface-variant) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-surface-variant) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-surface-variant) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-surface-variant) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-surface-variant) 15%, transparent) 0%, transparent 70%);
20443
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
20444
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
20445
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-surface-variant) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-surface-variant) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-surface-variant) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
20528
+ background-color: var(--atomix-surface-variant);
20446
20529
  border: 1px solid var(--atomix-border-subtle);
20447
20530
  color: var(--atomix-text);
20448
20531
  font-size: 0.875rem;
@@ -20463,10 +20546,7 @@ a, a:hover {
20463
20546
  }
20464
20547
  .c-footer__back-to-top:hover, .c-footer__back-to-top:focus {
20465
20548
  color: var(--atomix-primary);
20466
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-primary) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-primary) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-primary) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-primary) 15%, transparent) 0%, transparent 70%);
20467
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
20468
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
20469
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
20549
+ background-color: var(--atomix-primary);
20470
20550
  border-color: var(--atomix-primary);
20471
20551
  transform: translateY(-2px);
20472
20552
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
@@ -21011,10 +21091,7 @@ a, a:hover {
21011
21091
  display: grid;
21012
21092
  place-items: center;
21013
21093
  padding: var(--atomix-hero-padding-y) var(--atomix-hero-padding-x);
21014
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-hero-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-hero-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-hero-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-hero-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-hero-bg) 15%, transparent) 0%, transparent 70%);
21015
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21016
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21017
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-hero-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-hero-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-hero-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21094
+ background-color: var(--atomix-hero-bg);
21018
21095
  overflow: hidden;
21019
21096
  }
21020
21097
  .c-hero__bg {
@@ -21037,16 +21114,12 @@ a, a:hover {
21037
21114
  .c-hero__overlay {
21038
21115
  position: absolute;
21039
21116
  inset: 0;
21040
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-hero-overlay) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-hero-overlay) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-hero-overlay) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-hero-overlay) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-hero-overlay) 15%, transparent) 0%, transparent 70%);
21041
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21042
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21043
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-hero-overlay) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-hero-overlay) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-hero-overlay) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21117
+ background-color: var(--atomix-hero-overlay);
21044
21118
  opacity: var(--atomix-hero-overlay-opacity);
21045
- z-index: 1;
21119
+ z-index: 0;
21046
21120
  }
21047
21121
  .c-hero__container {
21048
21122
  position: relative;
21049
- z-index: 2;
21050
21123
  }
21051
21124
  .c-hero__grid {
21052
21125
  --atomix-gutter-x: var(--atomix-hero-grid-gutter);
@@ -21174,10 +21247,7 @@ a, a:hover {
21174
21247
  border: var(--atomix-input-border-width) solid var(--atomix-input-border-color);
21175
21248
  border-radius: var(--atomix-input-border-radius);
21176
21249
  outline: none;
21177
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-input-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-input-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-input-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-input-bg) 15%, transparent) 0%, transparent 70%);
21178
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21179
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21180
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-input-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-input-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21250
+ background-color: var(--atomix-input-bg);
21181
21251
  transition-property: all;
21182
21252
  transition-duration: 0.2s;
21183
21253
  transition-timing-function: ease-in-out;
@@ -21249,6 +21319,21 @@ a, a:hover {
21249
21319
  --atomix-input-bg: var(--atomix-secondary-bg-subtle);
21250
21320
  pointer-events: none;
21251
21321
  }
21322
+ .c-input--glass {
21323
+ background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
21324
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
21325
+ }
21326
+ .c-input--glass:focus, .c-input--glass:hover {
21327
+ background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
21328
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 0 0 2px rgba(var(--atomix-primary-rgb, 122, 255, 215), 0.3);
21329
+ }
21330
+ .c-input--glass.c-input--textarea {
21331
+ resize: vertical;
21332
+ }
21333
+ .c-input--glass:disabled, .c-input--glass.is-disabled {
21334
+ background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
21335
+ opacity: 0.6;
21336
+ }
21252
21337
  .c-list-group {
21253
21338
  --atomix-list-group-width: 100%;
21254
21339
  --atomix-list-group-bg: ;
@@ -21267,20 +21352,14 @@ a, a:hover {
21267
21352
  list-style: none;
21268
21353
  width: 100%;
21269
21354
  max-width: var(--atomix-list-group-width);
21270
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-list-group-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-list-group-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-list-group-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-list-group-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-list-group-bg) 15%, transparent) 0%, transparent 70%);
21271
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21272
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21273
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-list-group-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-list-group-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-list-group-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21355
+ background-color: var(--atomix-list-group-bg);
21274
21356
  }
21275
21357
  .c-list-group__item {
21276
21358
  padding: var(--atomix-list-group-item-padding-y) var(--atomix-list-group-item-padding-x);
21277
21359
  font-size: var(--atomix-list-group-item-font-size);
21278
21360
  color: var(--atomix-list-group-item-color);
21279
21361
  border-bottom: var(--atomix-list-group-item-border-width) solid var(--atomix-list-group-item-border-color);
21280
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-list-group-item-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-list-group-item-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-list-group-item-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-list-group-item-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-list-group-item-bg) 15%, transparent) 0%, transparent 70%);
21281
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21282
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21283
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-list-group-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-list-group-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-list-group-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21362
+ background-color: var(--atomix-list-group-item-bg);
21284
21363
  }
21285
21364
  .c-list-group__item--primary {
21286
21365
  --atomix-list-group-item-bg: var(--atomix-brand-bg-subtle);
@@ -21345,10 +21424,7 @@ a, a:hover {
21345
21424
  left: 0;
21346
21425
  width: var(--atomix-list-item-dash-width);
21347
21426
  height: var(--atomix-list-item-dash-height);
21348
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-list-color) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-list-color) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-list-color) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-list-color) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-list-color) 15%, transparent) 0%, transparent 70%);
21349
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21350
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21351
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-list-color) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-list-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-list-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21427
+ background-color: var(--atomix-list-color);
21352
21428
  transform: translateY(-50%);
21353
21429
  }
21354
21430
  .c-list--number {
@@ -21388,10 +21464,7 @@ a, a:hover {
21388
21464
  display: inline-block;
21389
21465
  min-width: var(--atomix-menu-min-width);
21390
21466
  padding: var(--atomix-menu-item-padding-y) var(--atomix-menu-item-padding-x);
21391
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-menu-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-menu-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-menu-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-menu-bg) 15%, transparent) 0%, transparent 70%);
21392
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21393
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21394
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-menu-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-menu-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-menu-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21467
+ background-color: var(--atomix-menu-bg);
21395
21468
  border-radius: var(--atomix-menu-border-radius);
21396
21469
  box-shadow: var(--atomix-menu-box-shadow);
21397
21470
  z-index: 5;
@@ -21437,10 +21510,7 @@ a, a:hover {
21437
21510
  color: var(--atomix-menu-item-color);
21438
21511
  font-size: var(--atomix-menu-item-font-size);
21439
21512
  font-weight: var(--atomix-menu-item-font-weight);
21440
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-menu-item-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-menu-item-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-menu-item-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-menu-item-bg) 15%, transparent) 0%, transparent 70%);
21441
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21442
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21443
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-menu-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-menu-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-menu-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21513
+ background-color: var(--atomix-menu-item-bg);
21444
21514
  border-radius: var(--atomix-menu-border-radius);
21445
21515
  cursor: pointer;
21446
21516
  transition-property: all;
@@ -21450,16 +21520,10 @@ a, a:hover {
21450
21520
  }
21451
21521
  .c-menu__link:hover {
21452
21522
  color: var(--atomix-menu-item-color);
21453
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 15%, transparent) 0%, transparent 70%);
21454
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21455
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21456
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-menu-item-bg-hover) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-menu-item-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-menu-item-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21523
+ background-color: var(--atomix-menu-item-bg-hover);
21457
21524
  }
21458
21525
  .c-menu__link:focus, .c-menu__link:active, .c-menu__link.is-active {
21459
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-menu-item-bg-active) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-menu-item-bg-active) 15%, transparent) 0%, transparent 70%);
21460
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21461
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21462
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-menu-item-bg-active) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-menu-item-bg-active) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-menu-item-bg-active) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21526
+ background-color: var(--atomix-menu-item-bg-active);
21463
21527
  }
21464
21528
  .c-menu__icon {
21465
21529
  font-size: var(--atomix-menu-item-icon-size);
@@ -21629,10 +21693,7 @@ a, a:hover {
21629
21693
  padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
21630
21694
  border-radius: var(--atomix-messages-border-radius);
21631
21695
  border: var(--atomix-messages-border-width) solid var(--atomix-messages-border-color);
21632
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-messages-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-messages-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-messages-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-messages-bg) 15%, transparent) 0%, transparent 70%);
21633
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21634
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21635
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21696
+ background-color: var(--atomix-messages-bg);
21636
21697
  }
21637
21698
  .c-messages__body {
21638
21699
  max-height: var(--atomix-messages-body-height);
@@ -21682,10 +21743,7 @@ a, a:hover {
21682
21743
  color: var(--atomix-messages-text-color);
21683
21744
  font-size: var(--atomix-messages-text-font-size);
21684
21745
  padding: var(--atomix-messages-text-padding-y) var(--atomix-messages-text-padding-x);
21685
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-messages-text-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-text-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-messages-text-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-messages-text-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-messages-text-bg) 15%, transparent) 0%, transparent 70%);
21686
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21687
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21688
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-text-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-text-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-text-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21746
+ background-color: var(--atomix-messages-text-bg);
21689
21747
  border-radius: 0.25rem var(--atomix-messages-text-border-radius) var(--atomix-messages-text-border-radius) 0.25rem;
21690
21748
  }
21691
21749
  .c-messages__file {
@@ -21693,10 +21751,7 @@ a, a:hover {
21693
21751
  flex-wrap: wrap;
21694
21752
  padding: var(--atomix-messages-file-padding-y) var(--atomix-messages-file-padding-x);
21695
21753
  border-radius: 0.25rem var(--atomix-messages-file-border-radius) var(--atomix-messages-file-border-radius) 0.25rem;
21696
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-messages-file-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-file-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-messages-file-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-messages-file-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-messages-file-bg) 15%, transparent) 0%, transparent 70%);
21697
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21698
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21699
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-file-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-file-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-file-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21754
+ background-color: var(--atomix-messages-file-bg);
21700
21755
  }
21701
21756
  .c-messages__file-icon {
21702
21757
  display: grid !important;
@@ -21706,10 +21761,7 @@ a, a:hover {
21706
21761
  height: var(--atomix-messages-file-icon-size);
21707
21762
  color: var(--atomix-tertiary-text-emphasis);
21708
21763
  margin-right: var(--atomix-messages-file-icon-margin-right);
21709
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-body-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-body-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-body-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-body-bg) 15%, transparent) 0%, transparent 70%);
21710
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21711
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21712
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21764
+ background-color: var(--atomix-body-bg);
21713
21765
  border-radius: 50rem;
21714
21766
  }
21715
21767
  .c-messages__file-name {
@@ -21765,10 +21817,7 @@ a, a:hover {
21765
21817
  }
21766
21818
  .c-messages__content--self .c-messages__file-icon {
21767
21819
  color: var(--atomix-invert-text-emphasis);
21768
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 15%, transparent) 0%, transparent 70%);
21769
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21770
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21771
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-file-icon-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-file-icon-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-file-icon-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21820
+ background-color: var(--atomix-messages-file-icon-bg);
21772
21821
  }
21773
21822
  .c-messages__content--self .c-messages__file-icon [data-atomix-color-mode=dark] {
21774
21823
  --atomix-messages-file-icon-bg: var(--atomix-primary-7);
@@ -21812,10 +21861,7 @@ a, a:hover {
21812
21861
  font-size: var(--atomix-messages-input-font-size);
21813
21862
  border: var(--atomix-messages-input-border-width) solid var(--atomix-messages-input-border-color);
21814
21863
  border-radius: var(--atomix-messages-input-border-radius);
21815
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-messages-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-messages-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-messages-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-messages-bg) 15%, transparent) 0%, transparent 70%);
21816
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21817
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21818
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-messages-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21864
+ background-color: var(--atomix-messages-bg);
21819
21865
  resize: none;
21820
21866
  }
21821
21867
  .c-messages__input::-moz-placeholder {
@@ -21835,10 +21881,7 @@ a, a:hover {
21835
21881
  place-items: center;
21836
21882
  align-self: flex-end;
21837
21883
  padding: 0.625rem;
21838
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-brand-bg-subtle) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent) 0%, transparent 70%);
21839
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21840
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21841
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
21884
+ background-color: var(--atomix-brand-bg-subtle);
21842
21885
  color: var(--atomix-invert-text-emphasis);
21843
21886
  border-radius: 50rem;
21844
21887
  cursor: pointer;
@@ -21855,6 +21898,134 @@ a, a:hover {
21855
21898
  opacity: 0.5;
21856
21899
  cursor: not-allowed;
21857
21900
  }
21901
+ .c-messages--glass {
21902
+ background: transparent;
21903
+ border: none;
21904
+ padding: 0;
21905
+ }
21906
+ .c-messages--glass .c-messages__glass-content {
21907
+ padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
21908
+ border-radius: var(--atomix-messages-border-radius);
21909
+ }
21910
+ .c-messages--glass .c-messages__body {
21911
+ border-radius: 0.25rem;
21912
+ padding: 0.5rem;
21913
+ background-color: color-mix(in srgb, var(--atomix-body-bg) 15%, transparent);
21914
+ }
21915
+ .c-messages--glass .c-messages__text {
21916
+ background-color: color-mix(in srgb, var(--atomix-body-bg) 50%, transparent);
21917
+ -webkit-backdrop-filter: blur(8px);
21918
+ backdrop-filter: blur(8px);
21919
+ border: 1px solid rgba(255, 255, 255, 0.2);
21920
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
21921
+ }
21922
+ .c-messages--glass .c-messages__content--self .c-messages__text {
21923
+ background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
21924
+ border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
21925
+ -webkit-backdrop-filter: blur(8px);
21926
+ backdrop-filter: blur(8px);
21927
+ }
21928
+ .c-messages--glass .c-messages__content--self .c-messages__file {
21929
+ background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
21930
+ border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
21931
+ -webkit-backdrop-filter: blur(8px);
21932
+ backdrop-filter: blur(8px);
21933
+ }
21934
+ .c-messages--glass .c-messages__file {
21935
+ background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
21936
+ border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
21937
+ -webkit-backdrop-filter: blur(8px);
21938
+ backdrop-filter: blur(8px);
21939
+ border: 1px solid rgba(255, 255, 255, 0.2);
21940
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
21941
+ }
21942
+ .c-messages--glass .c-messages__file-icon {
21943
+ background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
21944
+ -webkit-backdrop-filter: blur(8px);
21945
+ backdrop-filter: blur(8px);
21946
+ border: 1px solid rgba(255, 255, 255, 0.15);
21947
+ }
21948
+ .c-messages--glass .c-messages__image {
21949
+ border: 1px solid rgba(255, 255, 255, 0.3);
21950
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
21951
+ }
21952
+ .c-messages--glass .c-messages__avatar {
21953
+ border: 2px solid rgba(255, 255, 255, 0.4);
21954
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
21955
+ }
21956
+ .c-messages--glass .c-messages__name {
21957
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
21958
+ font-weight: 600;
21959
+ }
21960
+ .c-messages--glass .c-messages__time {
21961
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
21962
+ }
21963
+ .c-messages--glass .c-messages__form {
21964
+ padding-top: 0.75rem;
21965
+ border-top: 1px solid rgba(255, 255, 255, 0.2);
21966
+ margin-top: 1rem;
21967
+ }
21968
+ .c-messages--glass .c-messages__input {
21969
+ background: rgba(255, 255, 255, 0.3);
21970
+ -webkit-backdrop-filter: blur(8px);
21971
+ backdrop-filter: blur(8px);
21972
+ border: 1px solid rgba(255, 255, 255, 0.3);
21973
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
21974
+ color: var(--atomix-primary-text-emphasis);
21975
+ }
21976
+ .c-messages--glass .c-messages__input:focus {
21977
+ background: rgba(255, 255, 255, 0.45);
21978
+ border-color: var(--atomix-primary);
21979
+ box-shadow: 0 0 0 3px rgba(var(--atomix-primary-rgb), 0.15);
21980
+ }
21981
+ .c-messages--glass .c-messages__input::-moz-placeholder {
21982
+ opacity: 0.8;
21983
+ color: var(--atomix-primary-text-emphasis);
21984
+ }
21985
+ .c-messages--glass .c-messages__input::placeholder {
21986
+ opacity: 0.8;
21987
+ color: var(--atomix-primary-text-emphasis);
21988
+ }
21989
+ .c-messages--glass .c-messages__option {
21990
+ padding: 0.375rem;
21991
+ border-radius: 0.25rem;
21992
+ transition: background-color 0.2s ease;
21993
+ }
21994
+ .c-messages--glass .c-messages__option:hover:not(:disabled) {
21995
+ background: rgba(var(--atomix-secondary-bg-rgb), 0.4);
21996
+ }
21997
+ .c-messages--glass .c-messages__option:focus-visible {
21998
+ outline: 2px solid var(--atomix-primary);
21999
+ outline-offset: 2px;
22000
+ }
22001
+ .c-messages--glass .c-messages__option-icon {
22002
+ opacity: 0.8;
22003
+ transition: opacity 0.2s ease;
22004
+ }
22005
+ .c-messages__option:hover .c-messages--glass .c-messages__option-icon {
22006
+ opacity: 1;
22007
+ }
22008
+ .c-messages--glass .c-messages__submit {
22009
+ background: rgba(var(--atomix-primary-rgb), 0.9);
22010
+ -webkit-backdrop-filter: blur(8px);
22011
+ backdrop-filter: blur(8px);
22012
+ border: 1px solid rgba(var(--atomix-primary-rgb), 0.4);
22013
+ box-shadow: 0 2px 8px rgba(var(--atomix-primary-rgb), 0.3);
22014
+ transition: all 0.2s ease;
22015
+ }
22016
+ .c-messages--glass .c-messages__submit:hover:not(:disabled) {
22017
+ background: rgba(var(--atomix-primary-rgb), 1);
22018
+ box-shadow: 0 4px 12px rgba(var(--atomix-primary-rgb), 0.4);
22019
+ transform: translateY(-1px);
22020
+ }
22021
+ .c-messages--glass .c-messages__submit:active:not(:disabled) {
22022
+ transform: translateY(0);
22023
+ box-shadow: 0 1px 4px rgba(var(--atomix-primary-rgb), 0.3);
22024
+ }
22025
+ .c-messages--glass .c-messages__submit:disabled {
22026
+ opacity: 0.5;
22027
+ background: rgba(var(--atomix-primary-rgb), 0.5);
22028
+ }
21858
22029
  .c-modal {
21859
22030
  --atomix-modal-inner-padding: 1.5rem;
21860
22031
  --atomix-modal-content-color: ;
@@ -21877,7 +22048,7 @@ a, a:hover {
21877
22048
  --atomix-modal-lg: 60rem;
21878
22049
  --atomix-modal-xl: 75rem;
21879
22050
  --atomix-modal-width: var(--atomix-modal-md);
21880
- position: fixed;
22051
+ position: absolute;
21881
22052
  inset: 0;
21882
22053
  width: 100%;
21883
22054
  height: 100%;
@@ -21887,10 +22058,7 @@ a, a:hover {
21887
22058
  .c-modal__backdrop {
21888
22059
  position: absolute;
21889
22060
  inset: 0;
21890
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 15%, transparent) 0%, transparent 70%);
21891
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21892
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21893
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-modal-backdrop-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-modal-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-modal-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
22061
+ background-color: var(--atomix-modal-backdrop-bg);
21894
22062
  opacity: 0;
21895
22063
  transition: 0.3s;
21896
22064
  }
@@ -21904,10 +22072,8 @@ a, a:hover {
21904
22072
  margin-left: auto;
21905
22073
  margin-right: auto;
21906
22074
  opacity: 0;
21907
- z-index: 2;
21908
22075
  pointer-events: none;
21909
22076
  transition: 0.3s ease;
21910
- will-change: transform;
21911
22077
  }
21912
22078
  .c-modal__content {
21913
22079
  display: flex;
@@ -21915,10 +22081,7 @@ a, a:hover {
21915
22081
  width: 100%;
21916
22082
  max-height: 100%;
21917
22083
  padding: var(--atomix-modal-inner-padding);
21918
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-modal-content-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-content-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-modal-content-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-modal-content-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-modal-content-bg) 15%, transparent) 0%, transparent 70%);
21919
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
21920
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
21921
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-modal-content-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-modal-content-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
22084
+ background-color: var(--atomix-modal-content-bg);
21922
22085
  box-shadow: var(--atomix-modal-content-box-shadow);
21923
22086
  border-radius: var(--atomix-modal-content-border-radius);
21924
22087
  overflow: hidden;
@@ -21974,6 +22137,9 @@ a, a:hover {
21974
22137
  .c-modal--xl {
21975
22138
  --atomix-modal-width: var(--atomix-modal-xl);
21976
22139
  }
22140
+ .c-modal--glass .c-modal .c-modal--glass .c-modal__content {
22141
+ background-color: color-mix(in srgb, var(--atomix-modal-content-bg) 50%, transparent);
22142
+ }
21977
22143
  .c-modal.is-open .c-modal__backdrop {
21978
22144
  opacity: var(--atomix-modal-backdrop-opacity);
21979
22145
  }
@@ -22029,20 +22195,14 @@ a, a:hover {
22029
22195
  color: var(--atomix-nav-link-color);
22030
22196
  }
22031
22197
  .c-nav__link:hover, .c-nav__link:active, .c-nav__link:focus, .c-nav__link:focus-visible {
22032
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 15%, transparent) 0%, transparent 70%);
22033
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
22034
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
22035
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-nav-link-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-nav-link-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-nav-link-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
22198
+ background-color: var(--atomix-nav-link-hover-bg);
22036
22199
  }
22037
22200
  .c-nav__link--disabled {
22038
22201
  color: var(--atomix-disabled-text-emphasis);
22039
22202
  pointer-events: none;
22040
22203
  }
22041
22204
  .c-nav__link:focus, .c-nav__link:active, .c-nav__link.is-active {
22042
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-brand-bg-subtle) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent) 0%, transparent 70%);
22043
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
22044
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
22045
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
22205
+ background-color: var(--atomix-brand-bg-subtle);
22046
22206
  }
22047
22207
  .c-nav__icon {
22048
22208
  font-size: var(--atomix-nav-icon-size);
@@ -22096,24 +22256,14 @@ a, a:hover {
22096
22256
  left: 50%;
22097
22257
  transform: translateX(-50%);
22098
22258
  z-index: 1000;
22099
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-body-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-body-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-body-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-body-bg) 15%, transparent) 0%, transparent 70%);
22100
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
22101
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
22102
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
22259
+ background-color: var(--atomix-body-bg);
22103
22260
  border: 1px solid var(--atomix-border-color);
22104
22261
  border-radius: 50rem;
22105
22262
  box-shadow: var(--atomix-box-shadow-lg);
22106
22263
  padding: 0.5rem 1rem;
22107
22264
  -webkit-backdrop-filter: blur(10px);
22108
22265
  backdrop-filter: blur(10px);
22109
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
22110
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
22111
- }
22112
- @supports (color: color-mix(in lch, red, blue)){
22113
- .c-nav--float-top-center, .c-nav--float-bottom-center {
22114
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 60%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 50%, transparent) 35%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 40%, transparent) 65%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 15%, transparent) 0%, transparent 70%);
22115
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
22116
- }
22266
+ background-color: rgba(var(--atomix-body-bg-rgb), 0.95);
22117
22267
  }
22118
22268
  .c-nav--float-top-center .c-nav__item + .c-nav--float-top-center .c-nav__item, .c-nav--float-top-center .c-nav__item + .c-nav--float-bottom-center .c-nav__item, .c-nav--float-bottom-center .c-nav__item + .c-nav--float-top-center .c-nav__item, .c-nav--float-bottom-center .c-nav__item + .c-nav--float-bottom-center .c-nav__item {
22119
22269
  margin-left: 0.25rem;
@@ -22123,10 +22273,7 @@ a, a:hover {
22123
22273
  border-radius: 0.625rem;
22124
22274
  }
22125
22275
  .c-nav--float-top-center .c-nav__link:hover, .c-nav--float-top-center .c-nav__link:focus, .c-nav--float-top-center .c-nav__link:active, .c-nav--float-top-center .c-nav__link.is-active, .c-nav--float-bottom-center .c-nav__link:hover, .c-nav--float-bottom-center .c-nav__link:focus, .c-nav--float-bottom-center .c-nav__link:active, .c-nav--float-bottom-center .c-nav__link.is-active {
22126
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-brand-bg-subtle) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent) 0%, transparent 70%);
22127
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
22128
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
22129
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
22276
+ background-color: var(--atomix-brand-bg-subtle);
22130
22277
  }
22131
22278
  .c-nav--float-top-center {
22132
22279
  top: 1.25rem;
@@ -22160,10 +22307,7 @@ a, a:hover {
22160
22307
  position: relative;
22161
22308
  padding: var(--atomix-navbar-padding-y) 0;
22162
22309
  border-bottom: var(--atomix-navbar-border-width) solid var(--atomix-navbar-border-color);
22163
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-navbar-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-navbar-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-navbar-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-navbar-bg) 15%, transparent) 0%, transparent 70%);
22164
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
22165
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
22166
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-navbar-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-navbar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-navbar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
22310
+ background-color: var(--atomix-navbar-bg);
22167
22311
  z-index: var(--atomix-navbar-z-index);
22168
22312
  }
22169
22313
  .c-navbar__container {
@@ -22198,10 +22342,7 @@ a, a:hover {
22198
22342
  width: var(--atomix-navbar-toggler-size);
22199
22343
  height: var(--atomix-navbar-toggler-size);
22200
22344
  padding: 0;
22201
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 15%, transparent) 0%, transparent 70%);
22202
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
22203
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
22204
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-navbar-toggler-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-navbar-toggler-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-navbar-toggler-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
22345
+ background-color: var(--atomix-navbar-toggler-bg);
22205
22346
  border: var(--atomix-navbar-toggler-border);
22206
22347
  border-radius: var(--atomix-navbar-toggler-border-radius);
22207
22348
  cursor: pointer;
@@ -22254,10 +22395,7 @@ a, a:hover {
22254
22395
  left: 0;
22255
22396
  width: 100%;
22256
22397
  height: 100%;
22257
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 15%, transparent) 0%, transparent 70%);
22258
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
22259
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
22260
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
22398
+ background-color: var(--atomix-navbar-backdrop-bg);
22261
22399
  z-index: var(--atomix-navbar-backdrop-z-index);
22262
22400
  opacity: 0;
22263
22401
  visibility: hidden;
@@ -22324,8 +22462,10 @@ a, a:hover {
22324
22462
  display: flex !important;
22325
22463
  }
22326
22464
  }
22327
- .c-navbar--fixed, .c-navbar--fixed-bottom {
22465
+ .c-navbar--fixed:not(.c-navbar--glass), .c-navbar--fixed-bottom:not(.c-navbar--glass) {
22328
22466
  position: fixed;
22467
+ }
22468
+ .c-navbar--fixed, .c-navbar--fixed-bottom {
22329
22469
  left: 0;
22330
22470
  right: 0;
22331
22471
  width: 100%;
@@ -22334,12 +22474,18 @@ a, a:hover {
22334
22474
  .c-navbar--fixed {
22335
22475
  top: 0;
22336
22476
  }
22477
+ .c-navbar--glass {
22478
+ position: relative;
22479
+ background-color: transparent;
22480
+ border-bottom: none;
22481
+ }
22337
22482
  .c-navbar--fixed-bottom {
22338
22483
  bottom: 0;
22339
22484
  }
22340
22485
  .c-navbar--fixed-bottom .c-nav__dropdown-menu {
22341
22486
  top: auto;
22342
22487
  bottom: 100%;
22488
+ z-index: 999;
22343
22489
  }
22344
22490
  .c-navbar--fixed-bottom .c-nav--end .c-nav__dropdown-menu {
22345
22491
  left: 50%;
@@ -22533,10 +22679,7 @@ a, a:hover {
22533
22679
  max-width: var(--atomix-callout-width);
22534
22680
  gap: var(--atomix-callout-actions-spacer);
22535
22681
  padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
22536
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-callout-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-callout-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-callout-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-callout-bg) 15%, transparent) 0%, transparent 70%);
22537
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
22538
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
22539
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-callout-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-callout-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
22682
+ background-color: var(--atomix-callout-bg);
22540
22683
  border-radius: var(--atomix-callout-border-radius);
22541
22684
  border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
22542
22685
  transition: opacity var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing), transform var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing);
@@ -22575,9 +22718,9 @@ a, a:hover {
22575
22718
  .c-callout__actions {
22576
22719
  display: flex;
22577
22720
  align-items: center;
22578
- flex-wrap: wrap;
22579
22721
  gap: var(--atomix-callout-actions-spacer);
22580
22722
  margin-left: auto;
22723
+ margin-right: 10px;
22581
22724
  }
22582
22725
  .c-callout__close-btn {
22583
22726
  display: inline-flex;
@@ -22617,10 +22760,7 @@ a, a:hover {
22617
22760
  align-items: flex-start;
22618
22761
  justify-content: flex-start;
22619
22762
  border: none;
22620
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-callout-toast-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-toast-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-callout-toast-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-callout-toast-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-callout-toast-bg) 15%, transparent) 0%, transparent 70%);
22621
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
22622
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
22623
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-callout-toast-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-callout-toast-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-callout-toast-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
22763
+ background-color: var(--atomix-callout-toast-bg);
22624
22764
  box-shadow: var(--atomix-callout-box-shadow);
22625
22765
  animation: calloutToastIn 0.3s var(--atomix-callout-transition-timing) forwards;
22626
22766
  }
@@ -22682,9 +22822,36 @@ a, a:hover {
22682
22822
  --atomix-callout-title-color: var(--atomix-light);
22683
22823
  --atomix-callout-text-color: #d1d5db;
22684
22824
  --atomix-callout-bg: var(--atomix-dark);
22685
- --atomix-callout-border-color: var(--atomix-primary-border-subtle);
22825
+ --atomix-callout-border-color: var(--atomix-dark-border-subtle);
22686
22826
  --atomix-callout-icon-color: var(--atomix-light);
22687
22827
  }
22828
+ .c-callout--glass {
22829
+ background: none;
22830
+ padding: 0;
22831
+ border: none;
22832
+ display: block;
22833
+ }
22834
+ .c-callout--glass .c-callout__glass-content {
22835
+ display: flex;
22836
+ justify-content: center;
22837
+ align-items: center;
22838
+ padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
22839
+ border: var(--atomix-callout-border-witdh) solid color-mix(in srgb, var(--atomix-callout-border-color) 20%, transparent);
22840
+ max-width: var(--atomix-callout-width);
22841
+ border-radius: var(--atomix-callout-border-radius);
22842
+ width: 100%;
22843
+ background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
22844
+ }
22845
+ .c-callout--glass .c-callout__title {
22846
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
22847
+ }
22848
+ .c-callout--glass .c-callout__text {
22849
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
22850
+ }
22851
+ .c-callout--glass.c-callout--toast {
22852
+ background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
22853
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
22854
+ }
22688
22855
  .c-callout.is-hide {
22689
22856
  opacity: 0;
22690
22857
  transform: translateY(-10px);
@@ -22825,10 +22992,7 @@ a, a:hover {
22825
22992
  color: var(--atomix-pagination-color);
22826
22993
  font-size: var(--atomix-pagination-font-size);
22827
22994
  padding: var(--atomix-pagination-padding-y) var(--atomix-pagination-padding-x);
22828
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-pagination-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-pagination-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-pagination-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-pagination-bg) 15%, transparent) 0%, transparent 70%);
22829
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
22830
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
22831
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-pagination-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-pagination-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
22995
+ background-color: var(--atomix-pagination-bg);
22832
22996
  border-radius: var(--atomix-pagination-border-radius);
22833
22997
  border: none;
22834
22998
  cursor: pointer;
@@ -22912,10 +23076,7 @@ a, a:hover {
22912
23076
  flex-direction: column;
22913
23077
  gap: var(--atomix-popover-inner-gap-y) var(--atomix-popover-inner-gap-x);
22914
23078
  padding: var(--atomix-popover-padding-y) var(--atomix-popover-padding-x);
22915
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-popover-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-popover-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-popover-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-popover-bg) 15%, transparent) 0%, transparent 70%);
22916
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
22917
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
22918
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23079
+ background-color: var(--atomix-popover-bg);
22919
23080
  border-radius: var(--atomix-popover-border-radius);
22920
23081
  box-shadow: var(--atomix-popover-box-shadow);
22921
23082
  }
@@ -22923,10 +23084,7 @@ a, a:hover {
22923
23084
  position: absolute;
22924
23085
  width: var(--atomix-popover-arrow-size);
22925
23086
  height: var(--atomix-popover-arrow-size);
22926
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-popover-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-popover-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-popover-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-popover-bg) 15%, transparent) 0%, transparent 70%);
22927
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
22928
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
22929
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23087
+ background-color: var(--atomix-popover-bg);
22930
23088
  box-shadow: var(--atomix-popover-box-shadow);
22931
23089
  z-index: 1;
22932
23090
  transform-origin: center;
@@ -22968,10 +23126,7 @@ a, a:hover {
22968
23126
  --atomix-product-review-label-color: var(--atomix-text-muted);
22969
23127
  padding: var(--atomix-product-review-padding);
22970
23128
  border-radius: var(--atomix-product-review-border-radius);
22971
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-product-review-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-product-review-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-product-review-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-product-review-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-product-review-bg) 15%, transparent) 0%, transparent 70%);
22972
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
22973
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
22974
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-product-review-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-product-review-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-product-review-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23129
+ background-color: var(--atomix-product-review-bg);
22975
23130
  border: 1px solid var(--atomix-product-review-border-color);
22976
23131
  width: 100%;
22977
23132
  max-width: 37.5rem;
@@ -23031,10 +23186,7 @@ a, a:hover {
23031
23186
  padding: 0.75rem;
23032
23187
  border: 1px solid var(--atomix-product-review-border-color);
23033
23188
  border-radius: var(--atomix-border-radius);
23034
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-body-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-body-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-body-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-body-bg) 15%, transparent) 0%, transparent 70%);
23035
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23036
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23037
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23189
+ background-color: var(--atomix-body-bg);
23038
23190
  color: var(--atomix-body-color);
23039
23191
  font-family: inherit;
23040
23192
  resize: vertical;
@@ -23082,10 +23234,7 @@ a, a:hover {
23082
23234
  width: 100%;
23083
23235
  max-width: var(--atomix-progress-width);
23084
23236
  height: var(--atomix-progress-bar-height);
23085
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-progress-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-progress-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-progress-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-progress-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-progress-bg) 15%, transparent) 0%, transparent 70%);
23086
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23087
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23088
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-progress-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-progress-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-progress-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23237
+ background-color: var(--atomix-progress-bg);
23089
23238
  border-radius: var(--atomix-progress-border-radius);
23090
23239
  overflow: hidden;
23091
23240
  }
@@ -23093,10 +23242,7 @@ a, a:hover {
23093
23242
  width: var(--atomix-progress-bar-width);
23094
23243
  height: var(--atomix-progress-bar-height);
23095
23244
  color: var(--atomix-progress-bar-color);
23096
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-progress-bar-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-progress-bar-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-progress-bar-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-progress-bar-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-progress-bar-bg) 15%, transparent) 0%, transparent 70%);
23097
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23098
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23099
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-progress-bar-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-progress-bar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-progress-bar-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23245
+ background-color: var(--atomix-progress-bar-bg);
23100
23246
  border-radius: var(--atomix-progress-border-radius);
23101
23247
  transition: var(--atomix-progress-bar-transition) var(--atomix-progress-bar-easing);
23102
23248
  }
@@ -23303,10 +23449,7 @@ a, a:hover {
23303
23449
  max-width: var(--atomix-river-width);
23304
23450
  padding: var(--atomix-river-padding-y) var(--atomix-river-padding-x);
23305
23451
  border-radius: var(--atomix-river-border-radius);
23306
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-river-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-river-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-river-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-river-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-river-bg) 15%, transparent) 0%, transparent 70%);
23307
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23308
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23309
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-river-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-river-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-river-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23452
+ background-color: var(--atomix-river-bg);
23310
23453
  }
23311
23454
  .c-river__bg {
23312
23455
  position: absolute;
@@ -23326,10 +23469,7 @@ a, a:hover {
23326
23469
  .c-river__overlay {
23327
23470
  position: absolute;
23328
23471
  inset: 0;
23329
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-river-overlay) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-river-overlay) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-river-overlay) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-river-overlay) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-river-overlay) 15%, transparent) 0%, transparent 70%);
23330
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23331
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23332
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-river-overlay) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-river-overlay) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-river-overlay) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23472
+ background-color: var(--atomix-river-overlay);
23333
23473
  opacity: var(--atomix-river-overlay-opacity);
23334
23474
  border-radius: var(--atomix-river-border-radius);
23335
23475
  }
@@ -23553,10 +23693,7 @@ a, a:hover {
23553
23693
  left: 0;
23554
23694
  width: 100%;
23555
23695
  height: 100%;
23556
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 15%, transparent) 0%, transparent 70%);
23557
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23558
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23559
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23696
+ background-color: var(--atomix-sectionintro-overlay-bg-color);
23560
23697
  opacity: var(--atomix-sectionintro-overlay-opacity);
23561
23698
  }
23562
23699
  .c-sectionintro--has-bg {
@@ -23636,10 +23773,7 @@ a, a:hover {
23636
23773
  padding: var(--atomix-select-padding-x) var(--atomix-select-padding-y);
23637
23774
  color: var(--atomix-select-placeholder-color);
23638
23775
  font-size: var(--atomix-select-font-size);
23639
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-select-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-select-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-select-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-select-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-select-bg) 15%, transparent) 0%, transparent 70%);
23640
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23641
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23642
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-select-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-select-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-select-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23776
+ background-color: var(--atomix-select-bg);
23643
23777
  border: 1px solid var(--atomix-select-border-color);
23644
23778
  border-radius: var(--atomix-select-border-radius);
23645
23779
  cursor: pointer;
@@ -23669,10 +23803,7 @@ a, a:hover {
23669
23803
  height: 0px;
23670
23804
  top: calc(100% + var(--atomix-select-panel-spacer-y));
23671
23805
  left: 0;
23672
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-select-panel-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-select-panel-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-select-panel-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-select-panel-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-select-panel-bg) 15%, transparent) 0%, transparent 70%);
23673
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23674
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23675
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-select-panel-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-select-panel-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-select-panel-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23806
+ background-color: var(--atomix-select-panel-bg);
23676
23807
  border-radius: var(--atomix-select-panel-border-radius);
23677
23808
  box-shadow: var(--atomix-select-panel-box-shadow);
23678
23809
  overflow: hidden;
@@ -23693,10 +23824,7 @@ a, a:hover {
23693
23824
  .c-select__item {
23694
23825
  padding: var(--atomix-select-item-padding-x) var(--atomix-select-item-padding-y);
23695
23826
  color: var(--atomix-select-item-color);
23696
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-select-item-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-select-item-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-select-item-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-select-item-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-select-item-bg) 15%, transparent) 0%, transparent 70%);
23697
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23698
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23699
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-select-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-select-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-select-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23827
+ background-color: var(--atomix-select-item-bg);
23700
23828
  border-radius: var(--atomix-select-item-border-radius);
23701
23829
  transition-property: all;
23702
23830
  transition-duration: 0.2s;
@@ -23707,10 +23835,7 @@ a, a:hover {
23707
23835
  cursor: pointer;
23708
23836
  }
23709
23837
  .c-select__item:hover {
23710
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-select-item-bg-hover) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-select-item-bg-hover) 15%, transparent) 0%, transparent 70%);
23711
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23712
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23713
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-select-item-bg-hover) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-select-item-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-select-item-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23838
+ background-color: var(--atomix-select-item-bg-hover);
23714
23839
  }
23715
23840
  .c-select--lg {
23716
23841
  --atomix-select-font-size: var(--atomix-select-font-size-lg);
@@ -23760,10 +23885,7 @@ a, a:hover {
23760
23885
  --atomix-side-menu-inner-padding-top: 1.5rem;
23761
23886
  width: 100%;
23762
23887
  padding: var(--atomix-side-menu-padding-y) var(--atomix-side-menu-padding-x);
23763
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-side-menu-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-side-menu-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-side-menu-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-side-menu-bg) 15%, transparent) 0%, transparent 70%);
23764
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23765
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23766
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23888
+ background-color: var(--atomix-side-menu-bg);
23767
23889
  border-radius: var(--atomix-side-menu-border-radius);
23768
23890
  border: var(--atomix-side-menu-border-width) solid var(--atomix-side-menu-border-color);
23769
23891
  box-shadow: var(--atomix-side-menu-box-shadow);
@@ -23801,10 +23923,7 @@ a, a:hover {
23801
23923
  justify-content: space-between;
23802
23924
  width: 100%;
23803
23925
  padding: var(--atomix-side-menu-toggler-padding-y) var(--atomix-side-menu-toggler-padding-x);
23804
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 15%, transparent) 0%, transparent 70%);
23805
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23806
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23807
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23926
+ background-color: var(--atomix-side-menu-toggler-bg);
23808
23927
  border: none;
23809
23928
  border-radius: var(--atomix-side-menu-toggler-border-radius);
23810
23929
  cursor: pointer;
@@ -23820,10 +23939,7 @@ a, a:hover {
23820
23939
  }
23821
23940
  }
23822
23941
  .c-side-menu__toggler:hover {
23823
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 15%, transparent) 0%, transparent 70%);
23824
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23825
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23826
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23942
+ background-color: var(--atomix-side-menu-toggler-hover-bg);
23827
23943
  }
23828
23944
  .c-side-menu__toggler:focus {
23829
23945
  outline: 2px solid var(--atomix-focus-ring-color);
@@ -23861,10 +23977,7 @@ a, a:hover {
23861
23977
  color: var(--atomix-side-menu-item-color);
23862
23978
  font-size: var(--atomix-side-menu-item-font-size);
23863
23979
  font-weight: var(--atomix-side-menu-item-font-weight);
23864
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-side-menu-item-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-side-menu-item-bg) 15%, transparent) 0%, transparent 70%);
23865
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23866
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23867
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23980
+ background-color: var(--atomix-side-menu-item-bg);
23868
23981
  border: none;
23869
23982
  border-radius: var(--atomix-side-menu-item-border-radius);
23870
23983
  text-decoration: none;
@@ -23873,10 +23986,7 @@ a, a:hover {
23873
23986
  }
23874
23987
  .c-side-menu__link:hover {
23875
23988
  color: var(--atomix-side-menu-item-hover-color);
23876
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 15%, transparent) 0%, transparent 70%);
23877
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23878
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23879
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
23989
+ background-color: var(--atomix-side-menu-item-hover-bg);
23880
23990
  text-decoration: none;
23881
23991
  }
23882
23992
  .c-side-menu__link:focus {
@@ -23888,18 +23998,12 @@ a, a:hover {
23888
23998
  }
23889
23999
  .c-side-menu__link.is-active {
23890
24000
  color: var(--atomix-side-menu-item-active-color);
23891
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 15%, transparent) 0%, transparent 70%);
23892
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23893
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23894
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24001
+ background-color: var(--atomix-side-menu-item-active-bg);
23895
24002
  font-weight: 500;
23896
24003
  }
23897
24004
  .c-side-menu__link.is-disabled, .c-side-menu__link[aria-disabled=true] {
23898
24005
  color: var(--atomix-side-menu-item-disabled-color);
23899
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 15%, transparent) 0%, transparent 70%);
23900
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23901
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23902
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24006
+ background-color: var(--atomix-side-menu-item-disabled-bg);
23903
24007
  cursor: not-allowed;
23904
24008
  pointer-events: none;
23905
24009
  opacity: 0.6;
@@ -23911,6 +24015,10 @@ a, a:hover {
23911
24015
  .c-side-menu__link-text {
23912
24016
  flex: 1 1;
23913
24017
  }
24018
+ .c-side-menu--glass {
24019
+ background-color: transparent;
24020
+ border-bottom: none;
24021
+ }
23914
24022
  .c-side-menu.is-open .c-side-menu__toggler-icon {
23915
24023
  transform: rotate(90deg);
23916
24024
  }
@@ -23943,10 +24051,7 @@ a, a:hover {
23943
24051
  display: inline-block;
23944
24052
  width: var(--atomix-skeleton-width);
23945
24053
  min-height: var(--atomix-skeleton-height);
23946
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 60%, transparent) 0%, color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 50%, transparent) 35%, color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 40%, transparent) 65%, color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 15%, transparent) 0%, transparent 70%);
23947
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
23948
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
23949
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 10%, transparent), 4px 8px 32px color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24054
+ background-color: linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%);
23950
24055
  background-size: 400% 100%;
23951
24056
  border-radius: var(--atomix-skeleton-border-radius);
23952
24057
  animation-name: atomix--skeleton-loading;
@@ -24042,10 +24147,7 @@ a, a:hover {
24042
24147
  display: flex;
24043
24148
  align-items: center;
24044
24149
  justify-content: center;
24045
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 15%, transparent) 0%, transparent 70%);
24046
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24047
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24048
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24150
+ background-color: var(--atomix-secondary-bg-subtle);
24049
24151
  border: 2px dashed var(--atomix-primary-border-subtle);
24050
24152
  border-radius: 0.25rem;
24051
24153
  }
@@ -24085,10 +24187,7 @@ a, a:hover {
24085
24187
  height: var(--atomix-slider-nav-size);
24086
24188
  border: none;
24087
24189
  border-radius: 50rem;
24088
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-primary-bg-subtle) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-primary-bg-subtle) 15%, transparent) 0%, transparent 70%);
24089
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24090
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24091
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24190
+ background-color: var(--atomix-primary-bg-subtle);
24092
24191
  color: var(--atomix-primary-text);
24093
24192
  cursor: pointer;
24094
24193
  pointer-events: auto;
@@ -24101,10 +24200,7 @@ a, a:hover {
24101
24200
  }
24102
24201
  .c-slider__navigation-prev:hover,
24103
24202
  .c-slider__navigation-next:hover {
24104
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 15%, transparent) 0%, transparent 70%);
24105
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24106
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24107
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24203
+ background-color: var(--atomix-secondary-bg-subtle);
24108
24204
  transform: translateY(-50%) scale(1.05);
24109
24205
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
24110
24206
  }
@@ -24156,29 +24252,20 @@ a, a:hover {
24156
24252
  height: 0.5rem;
24157
24253
  border-radius: 50rem;
24158
24254
  border: none;
24159
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 15%, transparent) 0%, transparent 70%);
24160
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24161
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24162
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24255
+ background-color: var(--atomix-tertiary-bg-subtle);
24163
24256
  cursor: pointer;
24164
24257
  pointer-events: auto;
24165
24258
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
24166
24259
  }
24167
24260
  .c-slider__pagination-bullet:hover {
24168
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 15%, transparent) 0%, transparent 70%);
24169
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24170
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24171
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24261
+ background-color: var(--atomix-secondary-bg-subtle);
24172
24262
  transform: scale(1.2);
24173
24263
  }
24174
24264
  .c-slider__pagination-bullet:active {
24175
24265
  transform: scale(1.1);
24176
24266
  }
24177
24267
  .c-slider__pagination-bullet--active {
24178
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-primary) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-primary) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-primary) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-primary) 15%, transparent) 0%, transparent 70%);
24179
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24180
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24181
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24268
+ background-color: var(--atomix-primary);
24182
24269
  transform: scale(1.2);
24183
24270
  }
24184
24271
  .c-slider__empty-message {
@@ -24335,10 +24422,7 @@ a, a:hover {
24335
24422
  .c-steps__line {
24336
24423
  width: var(--atomix-steps-line-width);
24337
24424
  height: var(--atomix-steps-line-height);
24338
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-steps-item-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-steps-item-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-steps-item-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-steps-item-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-steps-item-bg) 15%, transparent) 0%, transparent 70%);
24339
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24340
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24341
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-steps-item-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-steps-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-steps-item-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24425
+ background-color: var(--atomix-steps-item-bg);
24342
24426
  transition: 1s;
24343
24427
  }
24344
24428
  .c-steps__content {
@@ -24354,10 +24438,7 @@ a, a:hover {
24354
24438
  height: var(--atomix-steps-item-number-size);
24355
24439
  color: var(--atomix-steps-item-number-color);
24356
24440
  font-size: var(--atomix-steps-item-number-font-size);
24357
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-steps-item-number-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-steps-item-number-bg) 15%, transparent) 0%, transparent 70%);
24358
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24359
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24360
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-steps-item-number-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-steps-item-number-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-steps-item-number-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24441
+ background-color: var(--atomix-steps-item-number-bg);
24361
24442
  border-radius: var(--atomix-steps-item-number-border-radius);
24362
24443
  }
24363
24444
  .c-steps__text {
@@ -24434,10 +24515,7 @@ a, a:hover {
24434
24515
  border-radius: var(--atomix-tabs-nav-btn-border-radius);
24435
24516
  border: var(--atomix-tabs-nav-btn-border-width) solid transparent;
24436
24517
  border-bottom: var(--atomix-tabs-nav-btn-border-width) solid var(--atomix-tabs-nav-btn-border-color);
24437
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 15%, transparent) 0%, transparent 70%);
24438
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24439
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24440
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24518
+ background-color: var(--atomix-tabs-nav-btn-bg);
24441
24519
  transition-property: all;
24442
24520
  transition-duration: 0.2s;
24443
24521
  transition-timing-function: ease-in-out;
@@ -24448,20 +24526,14 @@ a, a:hover {
24448
24526
  border-color: transparent transparent var(--atomix-tabs-nav-btn-border-active-color) transparent;
24449
24527
  }
24450
24528
  .c-tabs__nav-btn:hover {
24451
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 15%, transparent) 0%, transparent 70%);
24452
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24453
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24454
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24529
+ background-color: var(--atomix-tabs-nav-btn-bg-hover);
24455
24530
  }
24456
24531
  .c-tabs__nav-btn:disabled, .c-tabs__nav-btn.is-disabled {
24457
24532
  --atomix-tabs-nav-btn-border-active-color: var(
24458
24533
  --atomix-tabs-nav-btn-border-disabled-color
24459
24534
  );
24460
24535
  color: var(--atomix-tabs-nav-btn-border-disabled-color);
24461
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 15%, transparent) 0%, transparent 70%);
24462
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24463
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24464
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24536
+ background-color: var(--atomix-tabs-nav-btn-bg-disabled);
24465
24537
  pointer-events: none;
24466
24538
  }
24467
24539
  .c-tabs__nav-btn:focus-visible {
@@ -24506,10 +24578,7 @@ a, a:hover {
24506
24578
  width: 100%;
24507
24579
  max-width: var(--atomix-testimonial-width);
24508
24580
  padding: var(--atomix-testimonial-padding-y) var(--atomix-testimonial-padding-x);
24509
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-testimonial-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-testimonial-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-testimonial-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-testimonial-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-testimonial-bg) 15%, transparent) 0%, transparent 70%);
24510
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24511
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24512
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-testimonial-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-testimonial-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-testimonial-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24581
+ background-color: var(--atomix-testimonial-bg);
24513
24582
  }
24514
24583
  .c-testimonial__quote {
24515
24584
  color: var(--atomix-testimonial-quote-color);
@@ -24553,10 +24622,7 @@ a, a:hover {
24553
24622
  margin-bottom: 1.5rem;
24554
24623
  border: 1px solid var(--atomix-todo-border-color);
24555
24624
  border-radius: var(--atomix-todo-border-radius);
24556
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-todo-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-todo-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-todo-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-todo-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-todo-bg) 15%, transparent) 0%, transparent 70%);
24557
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24558
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24559
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-todo-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-todo-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-todo-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24625
+ background-color: var(--atomix-todo-bg);
24560
24626
  color: var(--atomix-todo-color);
24561
24627
  padding: 1.25rem;
24562
24628
  }
@@ -24598,10 +24664,7 @@ a, a:hover {
24598
24664
  transition: background-color 0.2s ease;
24599
24665
  }
24600
24666
  .c-todo__item:hover {
24601
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 15%, transparent) 0%, transparent 70%);
24602
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24603
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24604
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-todo-item-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-todo-item-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-todo-item-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24667
+ background-color: var(--atomix-todo-item-hover-bg);
24605
24668
  }
24606
24669
  .c-todo__item--completed .c-todo__item-text {
24607
24670
  color: var(--atomix-todo-completed-color);
@@ -24689,10 +24752,7 @@ a, a:hover {
24689
24752
  flex: 0 0 var(--atomix-toggle-switch-width);
24690
24753
  width: var(--atomix-toggle-switch-width);
24691
24754
  height: var(--atomix-toggle-switch-height);
24692
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-toggle-switch-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-toggle-switch-bg) 15%, transparent) 0%, transparent 70%);
24693
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24694
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24695
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-toggle-switch-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-toggle-switch-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24755
+ background-color: var(--atomix-toggle-switch-bg);
24696
24756
  border-radius: var(--atomix-toggle-switch-border-radius);
24697
24757
  -webkit-user-select: none;
24698
24758
  -moz-user-select: none;
@@ -24709,10 +24769,7 @@ a, a:hover {
24709
24769
  width: var(--atomix-toggle-switch-handle-width);
24710
24770
  height: var(--atomix-toggle-switch-handle-height);
24711
24771
  margin: var(--atomix-toggle-switch-handle-margin);
24712
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 15%, transparent) 0%, transparent 70%);
24713
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24714
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24715
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24772
+ background-color: var(--atomix-toggle-switch-handle-bg);
24716
24773
  border-radius: var(--atomix-toggle-switch-handle-border-radius);
24717
24774
  transition-property: all;
24718
24775
  transition-duration: 0.2s;
@@ -24733,10 +24790,7 @@ a, a:hover {
24733
24790
  pointer-events: none;
24734
24791
  }
24735
24792
  .c-toggle.is-disabled:not(.is-on) .c-toggle__switch {
24736
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 15%, transparent) 0%, transparent 70%);
24737
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24738
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24739
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24793
+ background-color: var(--atomix-toggle-switch-disabled-bg);
24740
24794
  }
24741
24795
  .c-toggle.is-disabled.is-on {
24742
24796
  pointer-events: none;
@@ -24745,10 +24799,7 @@ a, a:hover {
24745
24799
  content: "";
24746
24800
  position: absolute;
24747
24801
  inset: 0;
24748
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, rgba(107, 114, 128, 0.6) 60%, transparent) 0%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 50%, transparent) 35%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 40%, transparent) 65%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, rgba(107, 114, 128, 0.6) 15%, transparent) 0%, transparent 70%);
24749
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24750
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24751
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(107, 114, 128, 0.6) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(107, 114, 128, 0.6) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(107, 114, 128, 0.6) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24802
+ background-color: rgba(107, 114, 128, 0.6);
24752
24803
  border-radius: var(--atomix-toggle-switch-handle-border-radius);
24753
24804
  }
24754
24805
  .c-tooltip {
@@ -24782,10 +24833,7 @@ a, a:hover {
24782
24833
  font-size: var(--atomix-tooltip-font-size);
24783
24834
  font-weight: var(--atomix-tooltip-font-weight);
24784
24835
  padding: var(--atomix-tooltip-padding-y) var(--atomix-tooltip-padding-x);
24785
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-tooltip-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-tooltip-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-tooltip-bg) 15%, transparent) 0%, transparent 70%);
24786
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24787
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24788
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24836
+ background-color: var(--atomix-tooltip-bg);
24789
24837
  border-radius: var(--atomix-tooltip-border-radius);
24790
24838
  z-index: 2;
24791
24839
  opacity: 0;
@@ -24803,10 +24851,7 @@ a, a:hover {
24803
24851
  transform: translateX(-50%) rotate(45deg);
24804
24852
  width: var(--atomix-tooltip-arrow-size);
24805
24853
  height: var(--atomix-tooltip-arrow-size);
24806
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-tooltip-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-tooltip-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-tooltip-bg) 15%, transparent) 0%, transparent 70%);
24807
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24808
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24809
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24854
+ background-color: var(--atomix-tooltip-bg);
24810
24855
  z-index: 1;
24811
24856
  }
24812
24857
  .c-tooltip--top-left {
@@ -24919,10 +24964,7 @@ a, a:hover {
24919
24964
  width: 100%;
24920
24965
  max-width: var(--atomix-upload-width);
24921
24966
  padding: var(--atomix-upload-padding-y) var(--atomix-upload-padding-x);
24922
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-upload-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-upload-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-upload-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-upload-bg) 15%, transparent) 0%, transparent 70%);
24923
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24924
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24925
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-upload-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-upload-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-upload-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24967
+ background-color: var(--atomix-upload-bg);
24926
24968
  border-radius: var(--atomix-upload-border-radius);
24927
24969
  transition-property: all;
24928
24970
  transition-duration: 0.2s;
@@ -24930,10 +24972,7 @@ a, a:hover {
24930
24972
  transition-delay: 0s;
24931
24973
  }
24932
24974
  .c-upload:hover {
24933
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-upload-hover-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-hover-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-upload-hover-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-upload-hover-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-upload-hover-bg) 15%, transparent) 0%, transparent 70%);
24934
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24935
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24936
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-upload-hover-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-upload-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-upload-hover-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24975
+ background-color: var(--atomix-upload-hover-bg);
24937
24976
  }
24938
24977
  .c-upload__inner {
24939
24978
  display: flex;
@@ -24946,10 +24985,7 @@ a, a:hover {
24946
24985
  .c-upload__icon {
24947
24986
  font-size: var(--atomix-upload-icon-size);
24948
24987
  padding: var(--atomix-upload-icon-padding);
24949
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-upload-icon-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-icon-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-upload-icon-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-upload-icon-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-upload-icon-bg) 15%, transparent) 0%, transparent 70%);
24950
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
24951
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
24952
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-upload-icon-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-upload-icon-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-upload-icon-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
24988
+ background-color: var(--atomix-upload-icon-bg);
24953
24989
  border-radius: 50rem;
24954
24990
  }
24955
24991
  .c-upload__title {
@@ -25087,37 +25123,34 @@ a, a:hover {
25087
25123
  pointer-events: none;
25088
25124
  }
25089
25125
  .c-video-player {
25090
- --atomix-video-player-bg: #000;
25091
- --atomix-video-player-border-radius: 8px;
25092
- --atomix-video-player-controls-padding: 20px 16px 16px;
25093
- --atomix-video-player-progress-height: 4px;
25094
- --atomix-video-player-button-size: 40px;
25095
- --atomix-video-player-font-size: 14px;
25096
- --atomix-video-player-transition: all 0.3s ease;
25097
- --atomix-video-player-volume-width: 80px;
25098
- --atomix-video-player-volume-width-mobile: 60px;
25099
- --atomix-video-player-volume-height: 4px;
25100
- --atomix-video-player-volume-height-hover: 6px;
25101
- --atomix-video-player-volume-thumb-size: 12px;
25102
- --atomix-video-player-volume-bg: rgba(255, 255, 255, 0.3);
25103
- --atomix-video-player-volume-bg-hover: rgba(255, 255, 255, 0.5);
25104
- --atomix-video-player-volume-fill: var(--atomix-color-primary);
25105
- --atomix-video-player-volume-fill-hover: var(--atomix-color-primary-light);
25106
- --atomix-video-player-volume-fill-active: var(--atomix-color-primary-dark);
25107
- --atomix-video-player-subtitle-bg: rgba(0, 0, 0, 0.85);
25108
- --atomix-video-player-subtitle-color: #ffffff;
25109
- --atomix-video-player-subtitle-font-size: 18px;
25110
- --atomix-video-player-subtitle-font-weight: 500;
25111
- --atomix-video-player-subtitle-line-height: 1.5;
25112
- --atomix-video-player-subtitle-border-radius: 6px;
25113
- --atomix-video-player-subtitle-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
25114
- --atomix-video-player-subtitle-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
25126
+ --atomix--video-player-bg: #000;
25127
+ --atomix--video-player-border-radius: 8px;
25128
+ --atomix--video-player-controls-padding: 20px 16px 16px;
25129
+ --atomix--video-player-progress-height: 4px;
25130
+ --atomix--video-player-button-size: 40px;
25131
+ --atomix--video-player-font-size: 14px;
25132
+ --atomix--video-player-transition: all 0.3s ease;
25133
+ --atomix--video-player-volume-width: 80px;
25134
+ --atomix--video-player-volume-width-mobile: 60px;
25135
+ --atomix--video-player-volume-height: 4px;
25136
+ --atomix--video-player-volume-height-hover: 6px;
25137
+ --atomix--video-player-volume-thumb-size: 12px;
25138
+ --atomix--video-player-volume-bg: rgba(255, 255, 255, 0.3);
25139
+ --atomix--video-player-volume-bg-hover: rgba(255, 255, 255, 0.5);
25140
+ --atomix--video-player-volume-fill: var(--atomix-color-primary);
25141
+ --atomix--video-player-volume-fill-hover: var(--atomix-color-primary-light);
25142
+ --atomix--video-player-volume-fill-active: var(--atomix-color-primary-dark);
25143
+ --atomix--video-player-subtitle-bg: rgba(0, 0, 0, 0.85);
25144
+ --atomix--video-player-subtitle-color: #ffffff;
25145
+ --atomix--video-player-subtitle-font-size: 18px;
25146
+ --atomix--video-player-subtitle-font-weight: 500;
25147
+ --atomix--video-player-subtitle-line-height: 1.5;
25148
+ --atomix--video-player-subtitle-border-radius: 6px;
25149
+ --atomix--video-player-subtitle-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
25150
+ --atomix--video-player-subtitle-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
25115
25151
  position: relative;
25116
25152
  width: 100%;
25117
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix--video-player-bg, #000) 60%, transparent) 0%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 50%, transparent) 35%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 40%, transparent) 65%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix--video-player-bg, #000) 15%, transparent) 0%, transparent 70%);
25118
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
25119
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
25120
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix--video-player-bg, #000) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix--video-player-bg, #000) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix--video-player-bg, #000) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
25153
+ background-color: var(--atomix--video-player-bg, #000);
25121
25154
  border-radius: var(--atomix--video-player-border-radius, 0.5rem);
25122
25155
  overflow: hidden;
25123
25156
  font-family: var(--atomix--font-family-base);
@@ -25187,10 +25220,7 @@ a, a:hover {
25187
25220
  bottom: 0;
25188
25221
  left: 0;
25189
25222
  right: 0;
25190
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, linear-gradient(transparent, rgba(0, 0, 0, 0.8)) 60%, transparent) 0%, color-mix(in srgb, linear-gradient(transparent, rgba(0, 0, 0, 0.8)) 50%, transparent) 35%, color-mix(in srgb, linear-gradient(transparent, rgba(0, 0, 0, 0.8)) 40%, transparent) 65%, color-mix(in srgb, linear-gradient(transparent, rgba(0, 0, 0, 0.8)) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, linear-gradient(transparent, rgba(0, 0, 0, 0.8)) 15%, transparent) 0%, transparent 70%);
25191
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
25192
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
25193
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, linear-gradient(transparent, rgba(0, 0, 0, 0.8)) 10%, transparent), 4px 8px 32px color-mix(in srgb, linear-gradient(transparent, rgba(0, 0, 0, 0.8)) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, linear-gradient(transparent, rgba(0, 0, 0, 0.8)) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
25223
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
25194
25224
  padding: 1.25rem 1rem 1rem;
25195
25225
  opacity: 0;
25196
25226
  visibility: hidden;
@@ -25374,10 +25404,7 @@ a, a:hover {
25374
25404
  bottom: 3.125rem;
25375
25405
  right: 0;
25376
25406
  min-width: 12.5rem;
25377
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 60%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 50%, transparent) 35%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 40%, transparent) 65%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 15%, transparent) 0%, transparent 70%);
25378
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
25379
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
25380
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 10%, transparent), 4px 8px 32px color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
25407
+ background-color: rgba(var(--atomix-primary-rgb), 0.7);
25381
25408
  border-radius: 0.5rem;
25382
25409
  padding: 0.5rem;
25383
25410
  -webkit-backdrop-filter: blur(10px);
@@ -25573,6 +25600,24 @@ a, a:hover {
25573
25600
  .c-video-player--ambient .c-video-player__ambient-canvas {
25574
25601
  display: block;
25575
25602
  }
25603
+ .c-video-player--glass {
25604
+ position: relative;
25605
+ }
25606
+ .c-video-player__glass-overlay {
25607
+ overflow: hidden;
25608
+ position: absolute;
25609
+ top: 0;
25610
+ left: 0;
25611
+ border-radius: var(--atomix--video-player-border-radius, 0.5rem);
25612
+ }
25613
+ .c-video-player__glass-content {
25614
+ position: absolute;
25615
+ top: 0;
25616
+ left: 0;
25617
+ right: 0;
25618
+ bottom: 0;
25619
+ pointer-events: auto;
25620
+ }
25576
25621
  .c-video-player__subtitles {
25577
25622
  position: absolute;
25578
25623
  bottom: 5rem;
@@ -25627,10 +25672,7 @@ a, a:hover {
25627
25672
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
25628
25673
  }
25629
25674
  .c-photo-viewer__container {
25630
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--atomix-body-bg) 60%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 50%, transparent) 35%, color-mix(in srgb, var(--atomix-body-bg) 40%, transparent) 65%, color-mix(in srgb, var(--atomix-body-bg) 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, var(--atomix-body-bg) 15%, transparent) 0%, transparent 70%);
25631
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
25632
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
25633
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 4px 8px 32px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
25675
+ background-color: var(--atomix-body-bg);
25634
25676
  border: 1px solid var(--atomix-primary-border-subtle);
25635
25677
  border-radius: 0.625rem;
25636
25678
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
@@ -25684,10 +25726,7 @@ a, a:hover {
25684
25726
  border: 2px solid transparent;
25685
25727
  border-radius: 8px;
25686
25728
  padding: 0;
25687
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, transparent 60%, transparent) 0%, color-mix(in srgb, transparent 50%, transparent) 35%, color-mix(in srgb, transparent 40%, transparent) 65%, color-mix(in srgb, transparent 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, transparent 15%, transparent) 0%, transparent 70%);
25688
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
25689
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
25690
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, transparent 10%, transparent), 4px 8px 32px color-mix(in srgb, transparent 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, transparent 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
25729
+ background-color: transparent;
25691
25730
  cursor: pointer;
25692
25731
  overflow: hidden;
25693
25732
  position: relative;
@@ -25745,10 +25784,7 @@ body.is-open-photoviewer {
25745
25784
  width: 100vw;
25746
25785
  height: 100vh;
25747
25786
  z-index: 1000;
25748
- background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 25%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, transparent 60%, transparent) 0%, color-mix(in srgb, transparent 50%, transparent) 35%, color-mix(in srgb, transparent 40%, transparent) 65%, color-mix(in srgb, transparent 55%, transparent) 100%), radial-gradient(ellipse at bottom, color-mix(in srgb, transparent 15%, transparent) 0%, transparent 70%);
25749
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
25750
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
25751
- box-shadow: var(--atomix-box-shadow-inset), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 color-mix(in srgb, transparent 10%, transparent), 4px 8px 32px color-mix(in srgb, transparent 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, transparent 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
25787
+ background-color: transparent;
25752
25788
  opacity: 1;
25753
25789
  transition-property: opacity;
25754
25790
  }
@@ -26403,6 +26439,35 @@ body.is-open-photoviewer {
26403
26439
  display: block !important;
26404
26440
  clear: both !important;
26405
26441
  }
26442
+ .u-glass-clean-root {
26443
+ isolation: initial !important;
26444
+ contain: none !important;
26445
+ transform-style: flat !important;
26446
+ will-change: auto !important;
26447
+ transform: none !important;
26448
+ z-index: auto;
26449
+ z-index: initial;
26450
+ }
26451
+ .u-glass-debug {
26452
+ outline: 2px dashed red !important;
26453
+ }
26454
+ .u-glass-debug::after {
26455
+ content: "Glass Debug";
26456
+ position: absolute;
26457
+ top: -20px;
26458
+ left: 0;
26459
+ background: red;
26460
+ color: white;
26461
+ font-size: 10px;
26462
+ padding: 2px 4px;
26463
+ z-index: 9999;
26464
+ }
26465
+ @media (prefers-reduced-motion: reduce) {
26466
+ .u-glass-no-motion {
26467
+ transition: none !important;
26468
+ animation: none !important;
26469
+ }
26470
+ }
26406
26471
  .u-link-primary {
26407
26472
  color: RGBA(var(--atomix-primary-rgb), var(--atomix-u-link-opacity, 1)) !important;
26408
26473
  text-decoration-color: RGBA(var(--atomix-primary-rgb), var(--atomix-u-link-underline-opacity, 1)) !important;
@@ -26653,19 +26718,19 @@ body.is-open-photoviewer {
26653
26718
  border-width: 5px;
26654
26719
  }
26655
26720
  .u-border-opacity-10 {
26656
- : 0.1;
26721
+ --atomix-u-u-border-opacity-10: 0.1;
26657
26722
  }
26658
26723
  .u-border-opacity-25 {
26659
- : 0.25;
26724
+ --atomix-u-u-border-opacity-25: 0.25;
26660
26725
  }
26661
26726
  .u-border-opacity-50 {
26662
- : 0.5;
26727
+ --atomix-u-u-border-opacity-50: 0.5;
26663
26728
  }
26664
26729
  .u-border-opacity-75 {
26665
- : 0.75;
26730
+ --atomix-u-u-border-opacity-75: 0.75;
26666
26731
  }
26667
26732
  .u-border-opacity-100 {
26668
- : 1;
26733
+ --atomix-u-u-border-opacity-100: 1;
26669
26734
  }
26670
26735
  .u-rounded {
26671
26736
  border-radius: var(--atomix-border-radius);
@@ -27001,27 +27066,27 @@ body.is-open-photoviewer {
27001
27066
  order: 6;
27002
27067
  }
27003
27068
  .u-link-opacityhover-10 {
27004
- : 0.1;
27069
+ --atomix-u-u-link-opacity-10: 0.1;
27005
27070
  }
27006
- .u-link-opacityhoverhover-25 {
27007
- : 0.25;
27071
+ .u-link-opacityhover-25 {
27072
+ --atomix-u-u-link-opacity-25: 0.25;
27008
27073
  }
27009
- .u-link-opacityhoverhoverhover-50 {
27010
- : 0.5;
27074
+ .u-link-opacityhover-50 {
27075
+ --atomix-u-u-link-opacity-50: 0.5;
27011
27076
  }
27012
- .u-link-opacityhoverhoverhoverhover-75 {
27013
- : 0.75;
27077
+ .u-link-opacityhover-75 {
27078
+ --atomix-u-u-link-opacity-75: 0.75;
27014
27079
  }
27015
- .u-link-opacityhoverhoverhoverhoverhover-100 {
27016
- : 1;
27080
+ .u-link-opacityhover-100 {
27081
+ --atomix-u-u-link-opacity-100: 1;
27017
27082
  }
27018
27083
  .u-link-offsethover-1 {
27019
27084
  text-underline-offset: 0.125em;
27020
27085
  }
27021
- .u-link-offsethoverhover-2 {
27086
+ .u-link-offsethover-2 {
27022
27087
  text-underline-offset: 0.25em;
27023
27088
  }
27024
- .u-link-offsethoverhoverhover-3 {
27089
+ .u-link-offsethover-3 {
27025
27090
  text-underline-offset: 0.375em;
27026
27091
  }
27027
27092
  .u-link-underline-primary {
@@ -27058,22 +27123,22 @@ body.is-open-photoviewer {
27058
27123
  text-decoration-color: rgba(var(--atomix-link-color-rgb), var(--atomix-u-link-underline-opacity, 1));
27059
27124
  }
27060
27125
  .u-link-underline-opacityhover-0 {
27061
- : 0;
27126
+ --atomix-u-u-link-underline-opacity-0: 0;
27062
27127
  }
27063
- .u-link-underline-opacityhoverhover-10 {
27064
- : 0.1;
27128
+ .u-link-underline-opacityhover-10 {
27129
+ --atomix-u-u-link-underline-opacity-10: 0.1;
27065
27130
  }
27066
- .u-link-underline-opacityhoverhoverhover-25 {
27067
- : 0.25;
27131
+ .u-link-underline-opacityhover-25 {
27132
+ --atomix-u-u-link-underline-opacity-25: 0.25;
27068
27133
  }
27069
- .u-link-underline-opacityhoverhoverhoverhover-50 {
27070
- : 0.5;
27134
+ .u-link-underline-opacityhover-50 {
27135
+ --atomix-u-u-link-underline-opacity-50: 0.5;
27071
27136
  }
27072
- .u-link-underline-opacityhoverhoverhoverhoverhover-75 {
27073
- : 0.75;
27137
+ .u-link-underline-opacityhover-75 {
27138
+ --atomix-u-u-link-underline-opacity-75: 0.75;
27074
27139
  }
27075
- .u-link-underline-opacityhoverhoverhoverhoverhoverhover-100 {
27076
- : 1;
27140
+ .u-link-underline-opacityhover-100 {
27141
+ --atomix-u-u-link-underline-opacity-100: 1;
27077
27142
  }
27078
27143
  .u-object-fit-contain {
27079
27144
  -o-object-fit: contain;
@@ -27317,19 +27382,19 @@ body.is-open-photoviewer {
27317
27382
  .u-m-1 {
27318
27383
  margin: 0.25rem;
27319
27384
  }
27320
- .u-m-2 {
27385
+ .u-m-1\.5 {
27321
27386
  margin: 0.375rem;
27322
27387
  }
27323
27388
  .u-m-2 {
27324
27389
  margin: 0.5rem;
27325
27390
  }
27326
- .u-m-3 {
27391
+ .u-m-2\.5 {
27327
27392
  margin: 0.625rem;
27328
27393
  }
27329
27394
  .u-m-3 {
27330
27395
  margin: 0.75rem;
27331
27396
  }
27332
- .u-m-4 {
27397
+ .u-m-3\.5 {
27333
27398
  margin: 0.875rem;
27334
27399
  }
27335
27400
  .u-m-4 {
@@ -27338,7 +27403,7 @@ body.is-open-photoviewer {
27338
27403
  .u-m-5 {
27339
27404
  margin: 1.25rem;
27340
27405
  }
27341
- .u-m-6 {
27406
+ .u-m-5\.5 {
27342
27407
  margin: 1.375rem;
27343
27408
  }
27344
27409
  .u-m-6 {
@@ -27347,7 +27412,7 @@ body.is-open-photoviewer {
27347
27412
  .u-m-7 {
27348
27413
  margin: 1.75rem;
27349
27414
  }
27350
- .u-m-8 {
27415
+ .u-m-7\.5 {
27351
27416
  margin: 1.875rem;
27352
27417
  }
27353
27418
  .u-m-8 {
@@ -27430,7 +27495,7 @@ body.is-open-photoviewer {
27430
27495
  margin-right: 0.25rem;
27431
27496
  margin-left: 0.25rem;
27432
27497
  }
27433
- .u-mx-2 {
27498
+ .u-mx-1\.5 {
27434
27499
  margin-right: 0.375rem;
27435
27500
  margin-left: 0.375rem;
27436
27501
  }
@@ -27438,7 +27503,7 @@ body.is-open-photoviewer {
27438
27503
  margin-right: 0.5rem;
27439
27504
  margin-left: 0.5rem;
27440
27505
  }
27441
- .u-mx-3 {
27506
+ .u-mx-2\.5 {
27442
27507
  margin-right: 0.625rem;
27443
27508
  margin-left: 0.625rem;
27444
27509
  }
@@ -27446,7 +27511,7 @@ body.is-open-photoviewer {
27446
27511
  margin-right: 0.75rem;
27447
27512
  margin-left: 0.75rem;
27448
27513
  }
27449
- .u-mx-4 {
27514
+ .u-mx-3\.5 {
27450
27515
  margin-right: 0.875rem;
27451
27516
  margin-left: 0.875rem;
27452
27517
  }
@@ -27458,7 +27523,7 @@ body.is-open-photoviewer {
27458
27523
  margin-right: 1.25rem;
27459
27524
  margin-left: 1.25rem;
27460
27525
  }
27461
- .u-mx-6 {
27526
+ .u-mx-5\.5 {
27462
27527
  margin-right: 1.375rem;
27463
27528
  margin-left: 1.375rem;
27464
27529
  }
@@ -27470,7 +27535,7 @@ body.is-open-photoviewer {
27470
27535
  margin-right: 1.75rem;
27471
27536
  margin-left: 1.75rem;
27472
27537
  }
27473
- .u-mx-8 {
27538
+ .u-mx-7\.5 {
27474
27539
  margin-right: 1.875rem;
27475
27540
  margin-left: 1.875rem;
27476
27541
  }
@@ -27578,7 +27643,7 @@ body.is-open-photoviewer {
27578
27643
  margin-top: 0.25rem;
27579
27644
  margin-bottom: 0.25rem;
27580
27645
  }
27581
- .u-my-2 {
27646
+ .u-my-1\.5 {
27582
27647
  margin-top: 0.375rem;
27583
27648
  margin-bottom: 0.375rem;
27584
27649
  }
@@ -27586,7 +27651,7 @@ body.is-open-photoviewer {
27586
27651
  margin-top: 0.5rem;
27587
27652
  margin-bottom: 0.5rem;
27588
27653
  }
27589
- .u-my-3 {
27654
+ .u-my-2\.5 {
27590
27655
  margin-top: 0.625rem;
27591
27656
  margin-bottom: 0.625rem;
27592
27657
  }
@@ -27594,7 +27659,7 @@ body.is-open-photoviewer {
27594
27659
  margin-top: 0.75rem;
27595
27660
  margin-bottom: 0.75rem;
27596
27661
  }
27597
- .u-my-4 {
27662
+ .u-my-3\.5 {
27598
27663
  margin-top: 0.875rem;
27599
27664
  margin-bottom: 0.875rem;
27600
27665
  }
@@ -27606,7 +27671,7 @@ body.is-open-photoviewer {
27606
27671
  margin-top: 1.25rem;
27607
27672
  margin-bottom: 1.25rem;
27608
27673
  }
27609
- .u-my-6 {
27674
+ .u-my-5\.5 {
27610
27675
  margin-top: 1.375rem;
27611
27676
  margin-bottom: 1.375rem;
27612
27677
  }
@@ -27618,7 +27683,7 @@ body.is-open-photoviewer {
27618
27683
  margin-top: 1.75rem;
27619
27684
  margin-bottom: 1.75rem;
27620
27685
  }
27621
- .u-my-8 {
27686
+ .u-my-7\.5 {
27622
27687
  margin-top: 1.875rem;
27623
27688
  margin-bottom: 1.875rem;
27624
27689
  }
@@ -27724,19 +27789,19 @@ body.is-open-photoviewer {
27724
27789
  .u-mt-1 {
27725
27790
  margin-top: 0.25rem;
27726
27791
  }
27727
- .u-mt-2 {
27792
+ .u-mt-1\.5 {
27728
27793
  margin-top: 0.375rem;
27729
27794
  }
27730
27795
  .u-mt-2 {
27731
27796
  margin-top: 0.5rem;
27732
27797
  }
27733
- .u-mt-3 {
27798
+ .u-mt-2\.5 {
27734
27799
  margin-top: 0.625rem;
27735
27800
  }
27736
27801
  .u-mt-3 {
27737
27802
  margin-top: 0.75rem;
27738
27803
  }
27739
- .u-mt-4 {
27804
+ .u-mt-3\.5 {
27740
27805
  margin-top: 0.875rem;
27741
27806
  }
27742
27807
  .u-mt-4 {
@@ -27745,7 +27810,7 @@ body.is-open-photoviewer {
27745
27810
  .u-mt-5 {
27746
27811
  margin-top: 1.25rem;
27747
27812
  }
27748
- .u-mt-6 {
27813
+ .u-mt-5\.5 {
27749
27814
  margin-top: 1.375rem;
27750
27815
  }
27751
27816
  .u-mt-6 {
@@ -27754,7 +27819,7 @@ body.is-open-photoviewer {
27754
27819
  .u-mt-7 {
27755
27820
  margin-top: 1.75rem;
27756
27821
  }
27757
- .u-mt-8 {
27822
+ .u-mt-7\.5 {
27758
27823
  margin-top: 1.875rem;
27759
27824
  }
27760
27825
  .u-mt-8 {
@@ -27835,19 +27900,19 @@ body.is-open-photoviewer {
27835
27900
  .u-me-1 {
27836
27901
  margin-right: 0.25rem;
27837
27902
  }
27838
- .u-me-2 {
27903
+ .u-me-1\.5 {
27839
27904
  margin-right: 0.375rem;
27840
27905
  }
27841
27906
  .u-me-2 {
27842
27907
  margin-right: 0.5rem;
27843
27908
  }
27844
- .u-me-3 {
27909
+ .u-me-2\.5 {
27845
27910
  margin-right: 0.625rem;
27846
27911
  }
27847
27912
  .u-me-3 {
27848
27913
  margin-right: 0.75rem;
27849
27914
  }
27850
- .u-me-4 {
27915
+ .u-me-3\.5 {
27851
27916
  margin-right: 0.875rem;
27852
27917
  }
27853
27918
  .u-me-4 {
@@ -27856,7 +27921,7 @@ body.is-open-photoviewer {
27856
27921
  .u-me-5 {
27857
27922
  margin-right: 1.25rem;
27858
27923
  }
27859
- .u-me-6 {
27924
+ .u-me-5\.5 {
27860
27925
  margin-right: 1.375rem;
27861
27926
  }
27862
27927
  .u-me-6 {
@@ -27865,7 +27930,7 @@ body.is-open-photoviewer {
27865
27930
  .u-me-7 {
27866
27931
  margin-right: 1.75rem;
27867
27932
  }
27868
- .u-me-8 {
27933
+ .u-me-7\.5 {
27869
27934
  margin-right: 1.875rem;
27870
27935
  }
27871
27936
  .u-me-8 {
@@ -27946,19 +28011,19 @@ body.is-open-photoviewer {
27946
28011
  .u-mb-1 {
27947
28012
  margin-bottom: 0.25rem;
27948
28013
  }
27949
- .u-mb-2 {
28014
+ .u-mb-1\.5 {
27950
28015
  margin-bottom: 0.375rem;
27951
28016
  }
27952
28017
  .u-mb-2 {
27953
28018
  margin-bottom: 0.5rem;
27954
28019
  }
27955
- .u-mb-3 {
28020
+ .u-mb-2\.5 {
27956
28021
  margin-bottom: 0.625rem;
27957
28022
  }
27958
28023
  .u-mb-3 {
27959
28024
  margin-bottom: 0.75rem;
27960
28025
  }
27961
- .u-mb-4 {
28026
+ .u-mb-3\.5 {
27962
28027
  margin-bottom: 0.875rem;
27963
28028
  }
27964
28029
  .u-mb-4 {
@@ -27967,7 +28032,7 @@ body.is-open-photoviewer {
27967
28032
  .u-mb-5 {
27968
28033
  margin-bottom: 1.25rem;
27969
28034
  }
27970
- .u-mb-6 {
28035
+ .u-mb-5\.5 {
27971
28036
  margin-bottom: 1.375rem;
27972
28037
  }
27973
28038
  .u-mb-6 {
@@ -27976,7 +28041,7 @@ body.is-open-photoviewer {
27976
28041
  .u-mb-7 {
27977
28042
  margin-bottom: 1.75rem;
27978
28043
  }
27979
- .u-mb-8 {
28044
+ .u-mb-7\.5 {
27980
28045
  margin-bottom: 1.875rem;
27981
28046
  }
27982
28047
  .u-mb-8 {
@@ -28057,19 +28122,19 @@ body.is-open-photoviewer {
28057
28122
  .u-ms-1 {
28058
28123
  margin-left: 0.25rem;
28059
28124
  }
28060
- .u-ms-2 {
28125
+ .u-ms-1\.5 {
28061
28126
  margin-left: 0.375rem;
28062
28127
  }
28063
28128
  .u-ms-2 {
28064
28129
  margin-left: 0.5rem;
28065
28130
  }
28066
- .u-ms-3 {
28131
+ .u-ms-2\.5 {
28067
28132
  margin-left: 0.625rem;
28068
28133
  }
28069
28134
  .u-ms-3 {
28070
28135
  margin-left: 0.75rem;
28071
28136
  }
28072
- .u-ms-4 {
28137
+ .u-ms-3\.5 {
28073
28138
  margin-left: 0.875rem;
28074
28139
  }
28075
28140
  .u-ms-4 {
@@ -28078,7 +28143,7 @@ body.is-open-photoviewer {
28078
28143
  .u-ms-5 {
28079
28144
  margin-left: 1.25rem;
28080
28145
  }
28081
- .u-ms-6 {
28146
+ .u-ms-5\.5 {
28082
28147
  margin-left: 1.375rem;
28083
28148
  }
28084
28149
  .u-ms-6 {
@@ -28087,7 +28152,7 @@ body.is-open-photoviewer {
28087
28152
  .u-ms-7 {
28088
28153
  margin-left: 1.75rem;
28089
28154
  }
28090
- .u-ms-8 {
28155
+ .u-ms-7\.5 {
28091
28156
  margin-left: 1.875rem;
28092
28157
  }
28093
28158
  .u-ms-8 {
@@ -28168,19 +28233,19 @@ body.is-open-photoviewer {
28168
28233
  .u-p-1 {
28169
28234
  padding: 0.25rem;
28170
28235
  }
28171
- .u-p-2 {
28236
+ .u-p-1\.5 {
28172
28237
  padding: 0.375rem;
28173
28238
  }
28174
28239
  .u-p-2 {
28175
28240
  padding: 0.5rem;
28176
28241
  }
28177
- .u-p-3 {
28242
+ .u-p-2\.5 {
28178
28243
  padding: 0.625rem;
28179
28244
  }
28180
28245
  .u-p-3 {
28181
28246
  padding: 0.75rem;
28182
28247
  }
28183
- .u-p-4 {
28248
+ .u-p-3\.5 {
28184
28249
  padding: 0.875rem;
28185
28250
  }
28186
28251
  .u-p-4 {
@@ -28189,7 +28254,7 @@ body.is-open-photoviewer {
28189
28254
  .u-p-5 {
28190
28255
  padding: 1.25rem;
28191
28256
  }
28192
- .u-p-6 {
28257
+ .u-p-5\.5 {
28193
28258
  padding: 1.375rem;
28194
28259
  }
28195
28260
  .u-p-6 {
@@ -28198,7 +28263,7 @@ body.is-open-photoviewer {
28198
28263
  .u-p-7 {
28199
28264
  padding: 1.75rem;
28200
28265
  }
28201
- .u-p-8 {
28266
+ .u-p-7\.5 {
28202
28267
  padding: 1.875rem;
28203
28268
  }
28204
28269
  .u-p-8 {
@@ -28278,7 +28343,7 @@ body.is-open-photoviewer {
28278
28343
  padding-right: 0.25rem;
28279
28344
  padding-left: 0.25rem;
28280
28345
  }
28281
- .u-px-2 {
28346
+ .u-px-1\.5 {
28282
28347
  padding-right: 0.375rem;
28283
28348
  padding-left: 0.375rem;
28284
28349
  }
@@ -28286,7 +28351,7 @@ body.is-open-photoviewer {
28286
28351
  padding-right: 0.5rem;
28287
28352
  padding-left: 0.5rem;
28288
28353
  }
28289
- .u-px-3 {
28354
+ .u-px-2\.5 {
28290
28355
  padding-right: 0.625rem;
28291
28356
  padding-left: 0.625rem;
28292
28357
  }
@@ -28294,7 +28359,7 @@ body.is-open-photoviewer {
28294
28359
  padding-right: 0.75rem;
28295
28360
  padding-left: 0.75rem;
28296
28361
  }
28297
- .u-px-4 {
28362
+ .u-px-3\.5 {
28298
28363
  padding-right: 0.875rem;
28299
28364
  padding-left: 0.875rem;
28300
28365
  }
@@ -28306,7 +28371,7 @@ body.is-open-photoviewer {
28306
28371
  padding-right: 1.25rem;
28307
28372
  padding-left: 1.25rem;
28308
28373
  }
28309
- .u-px-6 {
28374
+ .u-px-5\.5 {
28310
28375
  padding-right: 1.375rem;
28311
28376
  padding-left: 1.375rem;
28312
28377
  }
@@ -28318,7 +28383,7 @@ body.is-open-photoviewer {
28318
28383
  padding-right: 1.75rem;
28319
28384
  padding-left: 1.75rem;
28320
28385
  }
28321
- .u-px-8 {
28386
+ .u-px-7\.5 {
28322
28387
  padding-right: 1.875rem;
28323
28388
  padding-left: 1.875rem;
28324
28389
  }
@@ -28422,7 +28487,7 @@ body.is-open-photoviewer {
28422
28487
  padding-top: 0.25rem;
28423
28488
  padding-bottom: 0.25rem;
28424
28489
  }
28425
- .u-py-2 {
28490
+ .u-py-1\.5 {
28426
28491
  padding-top: 0.375rem;
28427
28492
  padding-bottom: 0.375rem;
28428
28493
  }
@@ -28430,7 +28495,7 @@ body.is-open-photoviewer {
28430
28495
  padding-top: 0.5rem;
28431
28496
  padding-bottom: 0.5rem;
28432
28497
  }
28433
- .u-py-3 {
28498
+ .u-py-2\.5 {
28434
28499
  padding-top: 0.625rem;
28435
28500
  padding-bottom: 0.625rem;
28436
28501
  }
@@ -28438,7 +28503,7 @@ body.is-open-photoviewer {
28438
28503
  padding-top: 0.75rem;
28439
28504
  padding-bottom: 0.75rem;
28440
28505
  }
28441
- .u-py-4 {
28506
+ .u-py-3\.5 {
28442
28507
  padding-top: 0.875rem;
28443
28508
  padding-bottom: 0.875rem;
28444
28509
  }
@@ -28450,7 +28515,7 @@ body.is-open-photoviewer {
28450
28515
  padding-top: 1.25rem;
28451
28516
  padding-bottom: 1.25rem;
28452
28517
  }
28453
- .u-py-6 {
28518
+ .u-py-5\.5 {
28454
28519
  padding-top: 1.375rem;
28455
28520
  padding-bottom: 1.375rem;
28456
28521
  }
@@ -28462,7 +28527,7 @@ body.is-open-photoviewer {
28462
28527
  padding-top: 1.75rem;
28463
28528
  padding-bottom: 1.75rem;
28464
28529
  }
28465
- .u-py-8 {
28530
+ .u-py-7\.5 {
28466
28531
  padding-top: 1.875rem;
28467
28532
  padding-bottom: 1.875rem;
28468
28533
  }
@@ -28564,19 +28629,19 @@ body.is-open-photoviewer {
28564
28629
  .u-pt-1 {
28565
28630
  padding-top: 0.25rem;
28566
28631
  }
28567
- .u-pt-2 {
28632
+ .u-pt-1\.5 {
28568
28633
  padding-top: 0.375rem;
28569
28634
  }
28570
28635
  .u-pt-2 {
28571
28636
  padding-top: 0.5rem;
28572
28637
  }
28573
- .u-pt-3 {
28638
+ .u-pt-2\.5 {
28574
28639
  padding-top: 0.625rem;
28575
28640
  }
28576
28641
  .u-pt-3 {
28577
28642
  padding-top: 0.75rem;
28578
28643
  }
28579
- .u-pt-4 {
28644
+ .u-pt-3\.5 {
28580
28645
  padding-top: 0.875rem;
28581
28646
  }
28582
28647
  .u-pt-4 {
@@ -28585,7 +28650,7 @@ body.is-open-photoviewer {
28585
28650
  .u-pt-5 {
28586
28651
  padding-top: 1.25rem;
28587
28652
  }
28588
- .u-pt-6 {
28653
+ .u-pt-5\.5 {
28589
28654
  padding-top: 1.375rem;
28590
28655
  }
28591
28656
  .u-pt-6 {
@@ -28594,7 +28659,7 @@ body.is-open-photoviewer {
28594
28659
  .u-pt-7 {
28595
28660
  padding-top: 1.75rem;
28596
28661
  }
28597
- .u-pt-8 {
28662
+ .u-pt-7\.5 {
28598
28663
  padding-top: 1.875rem;
28599
28664
  }
28600
28665
  .u-pt-8 {
@@ -28672,19 +28737,19 @@ body.is-open-photoviewer {
28672
28737
  .u-pe-1 {
28673
28738
  padding-right: 0.25rem;
28674
28739
  }
28675
- .u-pe-2 {
28740
+ .u-pe-1\.5 {
28676
28741
  padding-right: 0.375rem;
28677
28742
  }
28678
28743
  .u-pe-2 {
28679
28744
  padding-right: 0.5rem;
28680
28745
  }
28681
- .u-pe-3 {
28746
+ .u-pe-2\.5 {
28682
28747
  padding-right: 0.625rem;
28683
28748
  }
28684
28749
  .u-pe-3 {
28685
28750
  padding-right: 0.75rem;
28686
28751
  }
28687
- .u-pe-4 {
28752
+ .u-pe-3\.5 {
28688
28753
  padding-right: 0.875rem;
28689
28754
  }
28690
28755
  .u-pe-4 {
@@ -28693,7 +28758,7 @@ body.is-open-photoviewer {
28693
28758
  .u-pe-5 {
28694
28759
  padding-right: 1.25rem;
28695
28760
  }
28696
- .u-pe-6 {
28761
+ .u-pe-5\.5 {
28697
28762
  padding-right: 1.375rem;
28698
28763
  }
28699
28764
  .u-pe-6 {
@@ -28702,7 +28767,7 @@ body.is-open-photoviewer {
28702
28767
  .u-pe-7 {
28703
28768
  padding-right: 1.75rem;
28704
28769
  }
28705
- .u-pe-8 {
28770
+ .u-pe-7\.5 {
28706
28771
  padding-right: 1.875rem;
28707
28772
  }
28708
28773
  .u-pe-8 {
@@ -28780,19 +28845,19 @@ body.is-open-photoviewer {
28780
28845
  .u-pb-1 {
28781
28846
  padding-bottom: 0.25rem;
28782
28847
  }
28783
- .u-pb-2 {
28848
+ .u-pb-1\.5 {
28784
28849
  padding-bottom: 0.375rem;
28785
28850
  }
28786
28851
  .u-pb-2 {
28787
28852
  padding-bottom: 0.5rem;
28788
28853
  }
28789
- .u-pb-3 {
28854
+ .u-pb-2\.5 {
28790
28855
  padding-bottom: 0.625rem;
28791
28856
  }
28792
28857
  .u-pb-3 {
28793
28858
  padding-bottom: 0.75rem;
28794
28859
  }
28795
- .u-pb-4 {
28860
+ .u-pb-3\.5 {
28796
28861
  padding-bottom: 0.875rem;
28797
28862
  }
28798
28863
  .u-pb-4 {
@@ -28801,7 +28866,7 @@ body.is-open-photoviewer {
28801
28866
  .u-pb-5 {
28802
28867
  padding-bottom: 1.25rem;
28803
28868
  }
28804
- .u-pb-6 {
28869
+ .u-pb-5\.5 {
28805
28870
  padding-bottom: 1.375rem;
28806
28871
  }
28807
28872
  .u-pb-6 {
@@ -28810,7 +28875,7 @@ body.is-open-photoviewer {
28810
28875
  .u-pb-7 {
28811
28876
  padding-bottom: 1.75rem;
28812
28877
  }
28813
- .u-pb-8 {
28878
+ .u-pb-7\.5 {
28814
28879
  padding-bottom: 1.875rem;
28815
28880
  }
28816
28881
  .u-pb-8 {
@@ -28888,19 +28953,19 @@ body.is-open-photoviewer {
28888
28953
  .u-ps-1 {
28889
28954
  padding-left: 0.25rem;
28890
28955
  }
28891
- .u-ps-2 {
28956
+ .u-ps-1\.5 {
28892
28957
  padding-left: 0.375rem;
28893
28958
  }
28894
28959
  .u-ps-2 {
28895
28960
  padding-left: 0.5rem;
28896
28961
  }
28897
- .u-ps-3 {
28962
+ .u-ps-2\.5 {
28898
28963
  padding-left: 0.625rem;
28899
28964
  }
28900
28965
  .u-ps-3 {
28901
28966
  padding-left: 0.75rem;
28902
28967
  }
28903
- .u-ps-4 {
28968
+ .u-ps-3\.5 {
28904
28969
  padding-left: 0.875rem;
28905
28970
  }
28906
28971
  .u-ps-4 {
@@ -28909,7 +28974,7 @@ body.is-open-photoviewer {
28909
28974
  .u-ps-5 {
28910
28975
  padding-left: 1.25rem;
28911
28976
  }
28912
- .u-ps-6 {
28977
+ .u-ps-5\.5 {
28913
28978
  padding-left: 1.375rem;
28914
28979
  }
28915
28980
  .u-ps-6 {
@@ -28918,7 +28983,7 @@ body.is-open-photoviewer {
28918
28983
  .u-ps-7 {
28919
28984
  padding-left: 1.75rem;
28920
28985
  }
28921
- .u-ps-8 {
28986
+ .u-ps-7\.5 {
28922
28987
  padding-left: 1.875rem;
28923
28988
  }
28924
28989
  .u-ps-8 {
@@ -28996,19 +29061,19 @@ body.is-open-photoviewer {
28996
29061
  .u-gap-1 {
28997
29062
  gap: 0.25rem;
28998
29063
  }
28999
- .u-gap-2 {
29064
+ .u-gap-1\.5 {
29000
29065
  gap: 0.375rem;
29001
29066
  }
29002
29067
  .u-gap-2 {
29003
29068
  gap: 0.5rem;
29004
29069
  }
29005
- .u-gap-3 {
29070
+ .u-gap-2\.5 {
29006
29071
  gap: 0.625rem;
29007
29072
  }
29008
29073
  .u-gap-3 {
29009
29074
  gap: 0.75rem;
29010
29075
  }
29011
- .u-gap-4 {
29076
+ .u-gap-3\.5 {
29012
29077
  gap: 0.875rem;
29013
29078
  }
29014
29079
  .u-gap-4 {
@@ -29017,7 +29082,7 @@ body.is-open-photoviewer {
29017
29082
  .u-gap-5 {
29018
29083
  gap: 1.25rem;
29019
29084
  }
29020
- .u-gap-6 {
29085
+ .u-gap-5\.5 {
29021
29086
  gap: 1.375rem;
29022
29087
  }
29023
29088
  .u-gap-6 {
@@ -29026,7 +29091,7 @@ body.is-open-photoviewer {
29026
29091
  .u-gap-7 {
29027
29092
  gap: 1.75rem;
29028
29093
  }
29029
- .u-gap-8 {
29094
+ .u-gap-7\.5 {
29030
29095
  gap: 1.875rem;
29031
29096
  }
29032
29097
  .u-gap-8 {
@@ -29104,19 +29169,19 @@ body.is-open-photoviewer {
29104
29169
  .u-row-gap-1 {
29105
29170
  row-gap: 0.25rem;
29106
29171
  }
29107
- .u-row-gap-2 {
29172
+ .u-row-gap-1\.5 {
29108
29173
  row-gap: 0.375rem;
29109
29174
  }
29110
29175
  .u-row-gap-2 {
29111
29176
  row-gap: 0.5rem;
29112
29177
  }
29113
- .u-row-gap-3 {
29178
+ .u-row-gap-2\.5 {
29114
29179
  row-gap: 0.625rem;
29115
29180
  }
29116
29181
  .u-row-gap-3 {
29117
29182
  row-gap: 0.75rem;
29118
29183
  }
29119
- .u-row-gap-4 {
29184
+ .u-row-gap-3\.5 {
29120
29185
  row-gap: 0.875rem;
29121
29186
  }
29122
29187
  .u-row-gap-4 {
@@ -29125,7 +29190,7 @@ body.is-open-photoviewer {
29125
29190
  .u-row-gap-5 {
29126
29191
  row-gap: 1.25rem;
29127
29192
  }
29128
- .u-row-gap-6 {
29193
+ .u-row-gap-5\.5 {
29129
29194
  row-gap: 1.375rem;
29130
29195
  }
29131
29196
  .u-row-gap-6 {
@@ -29134,7 +29199,7 @@ body.is-open-photoviewer {
29134
29199
  .u-row-gap-7 {
29135
29200
  row-gap: 1.75rem;
29136
29201
  }
29137
- .u-row-gap-8 {
29202
+ .u-row-gap-7\.5 {
29138
29203
  row-gap: 1.875rem;
29139
29204
  }
29140
29205
  .u-row-gap-8 {
@@ -29214,7 +29279,7 @@ body.is-open-photoviewer {
29214
29279
  -moz-column-gap: 0.25rem;
29215
29280
  column-gap: 0.25rem;
29216
29281
  }
29217
- .u-column-gap-2 {
29282
+ .u-column-gap-1\.5 {
29218
29283
  -moz-column-gap: 0.375rem;
29219
29284
  column-gap: 0.375rem;
29220
29285
  }
@@ -29222,7 +29287,7 @@ body.is-open-photoviewer {
29222
29287
  -moz-column-gap: 0.5rem;
29223
29288
  column-gap: 0.5rem;
29224
29289
  }
29225
- .u-column-gap-3 {
29290
+ .u-column-gap-2\.5 {
29226
29291
  -moz-column-gap: 0.625rem;
29227
29292
  column-gap: 0.625rem;
29228
29293
  }
@@ -29230,7 +29295,7 @@ body.is-open-photoviewer {
29230
29295
  -moz-column-gap: 0.75rem;
29231
29296
  column-gap: 0.75rem;
29232
29297
  }
29233
- .u-column-gap-4 {
29298
+ .u-column-gap-3\.5 {
29234
29299
  -moz-column-gap: 0.875rem;
29235
29300
  column-gap: 0.875rem;
29236
29301
  }
@@ -29242,7 +29307,7 @@ body.is-open-photoviewer {
29242
29307
  -moz-column-gap: 1.25rem;
29243
29308
  column-gap: 1.25rem;
29244
29309
  }
29245
- .u-column-gap-6 {
29310
+ .u-column-gap-5\.5 {
29246
29311
  -moz-column-gap: 1.375rem;
29247
29312
  column-gap: 1.375rem;
29248
29313
  }
@@ -29254,7 +29319,7 @@ body.is-open-photoviewer {
29254
29319
  -moz-column-gap: 1.75rem;
29255
29320
  column-gap: 1.75rem;
29256
29321
  }
29257
- .u-column-gap-8 {
29322
+ .u-column-gap-7\.5 {
29258
29323
  -moz-column-gap: 1.875rem;
29259
29324
  column-gap: 1.875rem;
29260
29325
  }