@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
package/dist/atomix.css CHANGED
@@ -11,6 +11,23 @@
11
11
  background-position: 0 50%;
12
12
  }
13
13
  }
14
+ @keyframes backgroundMoving {
15
+ 0% {
16
+ background-position: 0 0%;
17
+ }
18
+ 250% {
19
+ background-position: 100% 100%;
20
+ }
21
+ 50% {
22
+ background-position: 100% 0%;
23
+ }
24
+ 75% {
25
+ background-position: 0% 100%;
26
+ }
27
+ 100% {
28
+ background-position: 100% 100%;
29
+ }
30
+ }
14
31
  @keyframes component-spin {
15
32
  0% {
16
33
  transform: rotate(0deg);
@@ -589,25 +606,10 @@ body {
589
606
  font-weight: 400;
590
607
  font-size: 1rem;
591
608
  line-height: 1.2;
592
- 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");
593
- background-size: cover;
594
- background-repeat: no-repeat;
595
- background-attachment: fixed;
596
609
  }
597
610
  body.is-blocked, body.is-modal-open {
598
611
  overflow: hidden;
599
612
  }
600
- body::after {
601
- content: "";
602
- position: fixed;
603
- top: 0;
604
- left: 0;
605
- width: 100%;
606
- height: 100%;
607
- opacity: 0.7;
608
- z-index: -1;
609
- background: var(--atomix-gradient);
610
- }
611
613
  h1,
612
614
  .h1 {
613
615
  font-size: 2.5rem;
@@ -1486,10 +1488,7 @@ a, a:hover {
1486
1488
  transition-duration: 0.2s;
1487
1489
  transition-timing-function: ease-in-out;
1488
1490
  transition-delay: 0s;
1489
- 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%);
1490
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
1491
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
1492
- 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);
1491
+ background-color: var(--atomix-accordion-header-bg);
1493
1492
  }
1494
1493
  .c-accordion__header--icon-left {
1495
1494
  flex-direction: row-reverse;
@@ -1524,10 +1523,7 @@ a, a:hover {
1524
1523
  color: var(--atomix-accordion-body-color);
1525
1524
  padding: var(--atomix-accordion-body-padding-y) var(--atomix-accordion-body-padding-x);
1526
1525
  border-radius: 0 0 var(--atomix-accordion-border-radius) var(--atomix-accordion-border-radius);
1527
- 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%);
1528
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
1529
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
1530
- 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);
1526
+ background-color: var(--atomix-accordion-body-bg);
1531
1527
  }
1532
1528
  .c-accordion:focus, .c-accordion.is-focused {
1533
1529
  --atomix-accordion-border-color: var(--atomix-focus-border-color);
@@ -1544,6 +1540,15 @@ a, a:hover {
1544
1540
  --atomix-accordion-body-color: var(--atomix-accordion-disable-color);
1545
1541
  --atomix-accordion-icon-color: var(--atomix-accordion-disable-color);
1546
1542
  }
1543
+ .c-accordion--glass {
1544
+ border-color: transparent;
1545
+ }
1546
+ .c-accordion--glass .c-accordion__header {
1547
+ background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
1548
+ }
1549
+ .c-accordion--glass .c-accordion__body {
1550
+ background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
1551
+ }
1547
1552
  .c-avatar {
1548
1553
  --atomix-avatar-fit: cover;
1549
1554
  --atomix-avatar-size: 2.5rem;
@@ -1565,10 +1570,7 @@ a, a:hover {
1565
1570
  width: var(--atomix-avatar-size);
1566
1571
  height: var(--atomix-avatar-size);
1567
1572
  border-radius: var(--atomix-avatar-border-radius);
1568
- 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%);
1569
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
1570
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
1571
- 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);
1573
+ background-color: var(--atomix-avatar-bg);
1572
1574
  color: var(--atomix-avatar-color);
1573
1575
  border: var(--atomix-avatar-border-width) solid var(--atomix-avatar-border-color);
1574
1576
  overflow: hidden;
@@ -1670,10 +1672,7 @@ a, a:hover {
1670
1672
  color: var(--atomix-avatar-group-more-color);
1671
1673
  font-size: var(--atomix-avatar-group-more-font-size);
1672
1674
  font-weight: var(--atomix-avatar-group-more-font-weight);
1673
- 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%);
1674
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
1675
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
1676
- 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);
1675
+ background-color: var(--atomix-avatar-group-more-bg);
1677
1676
  border: var(--atomix-avatar-group-more-border-width) solid var(--atomix-avatar-group-more-border-color);
1678
1677
  width: var(--atomix-avatar-size);
1679
1678
  height: var(--atomix-avatar-size);
@@ -1727,6 +1726,61 @@ a, a:hover {
1727
1726
  margin-left: calc(var(--atomix-avatar-size) * -1 * var(--atomix-avatar-group-stacked-overlap) / 100);
1728
1727
  z-index: 1;
1729
1728
  }
1729
+ .atomix-glass__layer, .atomix-glass__overlay, .atomix-glass__base, .atomix-glass__border-1, .atomix-glass__border-2 {
1730
+ pointer-events: none;
1731
+ position: absolute;
1732
+ inset: 0;
1733
+ border-radius: inherit;
1734
+ transform: inherit;
1735
+ transition: inherit;
1736
+ }
1737
+ .atomix-glass__border-1, .atomix-glass__border-2 {
1738
+ box-sizing: border-box;
1739
+ padding: 1.5px;
1740
+ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
1741
+ -webkit-mask-composite: xor;
1742
+ mask-composite: exclude;
1743
+ 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);
1744
+ transition-property: transform;
1745
+ }
1746
+ .atomix-glass__border-1 {
1747
+ z-index: 5;
1748
+ opacity: 0.3;
1749
+ mix-blend-mode: screen;
1750
+ }
1751
+ .atomix-glass__border-2 {
1752
+ z-index: 6;
1753
+ }
1754
+ .atomix-glass__hover-1, .atomix-glass__hover-2, .atomix-glass__hover-3 {
1755
+ position: absolute;
1756
+ inset: 0;
1757
+ pointer-events: none;
1758
+ border-radius: inherit;
1759
+ transform: inherit;
1760
+ transition: inherit;
1761
+ transition-property: transform, opacity;
1762
+ }
1763
+ .atomix-glass__hover-1 {
1764
+ opacity: 0;
1765
+ }
1766
+ .atomix-glass__hover-2 {
1767
+ overflow: hidden;
1768
+ opacity: 0;
1769
+ }
1770
+ .atomix-glass__hover-3 {
1771
+ opacity: 0;
1772
+ }
1773
+ .atomix-glass__base {
1774
+ will-change: transform;
1775
+ transition-property: transform, opacity;
1776
+ opacity: 0;
1777
+ }
1778
+ .atomix-glass__overlay {
1779
+ mix-blend-mode: overlay;
1780
+ will-change: transform;
1781
+ transition-property: transform, opacity;
1782
+ opacity: 0;
1783
+ }
1730
1784
  .c-badge {
1731
1785
  --atomix-tag-font-size: 0.75rem;
1732
1786
  --atomix-tag-font-weight: 400;
@@ -1746,10 +1800,7 @@ a, a:hover {
1746
1800
  line-height: 1;
1747
1801
  padding: var(--atomix-tag-padding-y) var(--atomix-tag-padding-x);
1748
1802
  border-radius: var(--atomix-tag-border-radius);
1749
- 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%);
1750
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
1751
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
1752
- 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);
1803
+ background-color: var(--atomix-tag-bg-color);
1753
1804
  -webkit-user-select: none;
1754
1805
  -moz-user-select: none;
1755
1806
  user-select: none;
@@ -1765,6 +1816,10 @@ a, a:hover {
1765
1816
  .c-badge--lg {
1766
1817
  --atomix-tag-padding-y: 0.5rem;
1767
1818
  }
1819
+ .c-badge--glass {
1820
+ background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent);
1821
+ border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 90%, transparent);
1822
+ }
1768
1823
  .c-badge--primary {
1769
1824
  --atomix-tag-bg-color: var(--atomix-brand-bg-subtle);
1770
1825
  --atomix-tag-color: var(--atomix-brand-text-emphasis);
@@ -1792,10 +1847,12 @@ a, a:hover {
1792
1847
  .c-badge--light {
1793
1848
  --atomix-tag-bg-color: var(--atomix-light);
1794
1849
  --atomix-tag-color: var(--atomix-dark);
1850
+ border: 1px solid var(--atomix-light);
1795
1851
  }
1796
1852
  .c-badge--dark {
1797
1853
  --atomix-tag-bg-color: var(--atomix-dark);
1798
1854
  --atomix-tag-color: var(--atomix-light);
1855
+ border: 1px solid var(--atomix-dark);
1799
1856
  }
1800
1857
  .c-breadcrumb {
1801
1858
  --atomix-breadcrumb-font-size: 0.875rem;
@@ -1817,10 +1874,7 @@ a, a:hover {
1817
1874
  list-style: none;
1818
1875
  padding-left: 0px;
1819
1876
  margin-bottom: var(--atomix-breadcrumb-margin-bottom);
1820
- 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%);
1821
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
1822
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
1823
- 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);
1877
+ background-color: var(--atomix-breadcrumb-bg);
1824
1878
  }
1825
1879
  .c-breadcrumb__item {
1826
1880
  display: flex;
@@ -1915,10 +1969,7 @@ a, a:hover {
1915
1969
  text-align: center;
1916
1970
  white-space: nowrap;
1917
1971
  vertical-align: middle;
1918
- 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%);
1919
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
1920
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
1921
- 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);
1972
+ background-color: var(--atomix-btn-bg);
1922
1973
  cursor: pointer;
1923
1974
  -webkit-user-select: none;
1924
1975
  -moz-user-select: none;
@@ -1932,10 +1983,7 @@ a, a:hover {
1932
1983
  }
1933
1984
  .c-btn:hover {
1934
1985
  color: var(--atomix-btn-hover-color);
1935
- 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%);
1936
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
1937
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
1938
- 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);
1986
+ background-color: var(--atomix-btn-hover-bg);
1939
1987
  border-color: var(--atomix-btn-hover-border-color);
1940
1988
  }
1941
1989
  .c-btn--primary {
@@ -2199,13 +2247,16 @@ a, a:hover {
2199
2247
  .c-btn:disabled, .c-btn--disabled, fieldset:disabled .c-btn {
2200
2248
  color: var(--atomix-btn-disabled-color);
2201
2249
  pointer-events: none;
2202
- 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%);
2203
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
2204
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
2205
- 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);
2250
+ background-color: var(--atomix-btn-disabled-bg);
2206
2251
  border-color: var(--atomix-btn-disabled-border-color);
2207
2252
  opacity: var(--atomix-btn-disabled-opacity);
2208
2253
  }
2254
+ .c-btn--glass {
2255
+ background-color: color-mix(in srgb, var(--atomix-btn-bg) 50%, transparent);
2256
+ }
2257
+ .c-btn--glass:hover {
2258
+ background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 50%, transparent);
2259
+ }
2209
2260
  .c-datepicker {
2210
2261
  --atomix-datepicker-width: 19rem;
2211
2262
  --atomix-datepicker-padding-x: 0.5rem;
@@ -2284,10 +2335,7 @@ a, a:hover {
2284
2335
  z-index: 5;
2285
2336
  width: var(--atomix-datepicker-width);
2286
2337
  padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
2287
- 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%);
2288
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
2289
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
2290
- 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);
2338
+ background-color: var(--atomix-datepicker-bg);
2291
2339
  border-radius: var(--atomix-datepicker-border-radius);
2292
2340
  box-shadow: var(--atomix-datepicker-box-shadow);
2293
2341
  margin-top: 0.25rem;
@@ -2331,6 +2379,24 @@ a, a:hover {
2331
2379
  .c-datepicker__calendar--right-end {
2332
2380
  bottom: 0;
2333
2381
  }
2382
+ .c-datepicker__calendar--glass {
2383
+ z-index: auto;
2384
+ z-index: initial;
2385
+ box-shadow: none;
2386
+ border: none;
2387
+ border-radius: 0;
2388
+ padding: 0;
2389
+ background: transparent;
2390
+ }
2391
+ .c-datepicker__glass-content {
2392
+ z-index: auto;
2393
+ z-index: initial;
2394
+ box-shadow: none;
2395
+ border: none;
2396
+ border-radius: var(--atomix-datepicker-border-radius);
2397
+ padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
2398
+ background: color-mix(in srgb, var(--atomix-datepicker-bg) 50%, transparent 0%);
2399
+ }
2334
2400
  .c-datepicker--inline {
2335
2401
  --atomix-datepicker-width: calc(
2336
2402
  var(--atomix-datepicker-width) + var(--atomix-datepicker-week-width)
@@ -2652,10 +2718,7 @@ a, a:hover {
2652
2718
  transition-duration: 0.2s;
2653
2719
  transition-timing-function: ease-in-out;
2654
2720
  transition-delay: 0s;
2655
- 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%);
2656
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
2657
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
2658
- 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);
2721
+ background-color: var(--atomix-card-bg);
2659
2722
  }
2660
2723
  .c-card__header {
2661
2724
  margin-bottom: var(--atomix-card-header-spacer-y);
@@ -2733,6 +2796,21 @@ a, a:hover {
2733
2796
  padding: var(--atomix-card-row-spacer-y) var(--atomix-card-row-spacer-x);
2734
2797
  padding-top: 0;
2735
2798
  }
2799
+ .c-card--glass {
2800
+ background-color: transparent;
2801
+ padding: 0;
2802
+ border: none;
2803
+ display: block;
2804
+ border-radius: 0;
2805
+ }
2806
+ .c-card--glass .c-card__glass-content {
2807
+ padding: var(--atomix-card-spacer-y) var(--atomix-card-spacer-x);
2808
+ max-width: var(--atomix-card-width);
2809
+ border-radius: var(--atomix-card-border-radius);
2810
+ width: 100%;
2811
+ background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
2812
+ background-blend-mode: overlay;
2813
+ }
2736
2814
  .is-elevated .c-card {
2737
2815
  box-shadow: var(--atomix-box-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.175));
2738
2816
  z-index: 1;
@@ -2758,19 +2836,12 @@ a, a:hover {
2758
2836
  min-height: var(--atomix-chart-min-height);
2759
2837
  width: 100%;
2760
2838
  max-width: 100%;
2761
- 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%);
2762
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
2763
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
2839
+ background-color: var(--atomix-chart-bg);
2764
2840
  transition-property: all;
2765
2841
  transition-duration: 0.2s;
2766
2842
  transition-timing-function: ease-in-out;
2767
2843
  transition-delay: 0s;
2768
2844
  }
2769
- @supports (color: color-mix(in lch, red, blue)){
2770
- .c-chart {
2771
- 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);
2772
- }
2773
- }
2774
2845
  .c-chart::after {
2775
2846
  content: "";
2776
2847
  position: absolute;
@@ -4474,7 +4545,7 @@ a, a:hover {
4474
4545
  animation: none;
4475
4546
  }
4476
4547
  }
4477
- .c-chart:focus-within__data-point:focus {
4548
+ .c-chart:focus-within .c-chart__data-point:focus {
4478
4549
  outline: 2px solid var(--atomix-primary-6);
4479
4550
  outline-offset: 2px;
4480
4551
  z-index: 10;
@@ -4576,10 +4647,7 @@ a, a:hover {
4576
4647
  -webkit-appearance: none;
4577
4648
  -moz-appearance: none;
4578
4649
  appearance: none;
4579
- 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%);
4580
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
4581
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
4582
- 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);
4650
+ background-color: var(--atomix-checkbox-bg);
4583
4651
  width: var(--atomix-checkbox-width);
4584
4652
  height: var(--atomix-checkbox-height);
4585
4653
  color: currentColor;
@@ -4668,10 +4736,7 @@ a, a:hover {
4668
4736
  color: var(--atomix-body-color);
4669
4737
  }
4670
4738
  .c-color-mode-toggle:hover {
4671
- 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%);
4672
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
4673
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
4674
- 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);
4739
+ background-color: rgba(0, 0, 0, 0.05);
4675
4740
  }
4676
4741
  .c-color-mode-toggle:focus {
4677
4742
  outline: none;
@@ -4682,10 +4747,7 @@ a, a:hover {
4682
4747
  height: 1.5rem;
4683
4748
  }
4684
4749
  [data-atomix-theme=dark] .c-color-mode-toggle:hover {
4685
- 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%);
4686
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
4687
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
4688
- 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);
4750
+ background-color: rgba(255, 255, 255, 0.1);
4689
4751
  }
4690
4752
  .c-countdown {
4691
4753
  --atomix-countdown-color: var(--atomix-body-color);
@@ -4723,10 +4785,7 @@ a, a:hover {
4723
4785
  align-items: center;
4724
4786
  padding: var(--atomix-countdown-item-padding-y) var(--atomix-countdown-item-padding-x);
4725
4787
  border-radius: var(--atomix-countdown-focused-border-radius);
4726
- 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%);
4727
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
4728
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
4729
- 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);
4788
+ background-color: var(--atomix-countdown-focused-bg);
4730
4789
  }
4731
4790
  .c-countdown--focused .c-countdown__time-label {
4732
4791
  font-size: var(--atomix-countdown-focused-label-font-size);
@@ -4753,17 +4812,11 @@ a, a:hover {
4753
4812
  width: 100%;
4754
4813
  margin-bottom: 0;
4755
4814
  color: var(--atomix-data-table-color);
4756
- 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%);
4757
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
4758
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
4759
- 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);
4815
+ background-color: var(--atomix-data-table-bg);
4760
4816
  border-collapse: collapse;
4761
4817
  }
4762
4818
  .c-data-table__header {
4763
- 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%);
4764
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
4765
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
4766
- 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);
4819
+ background-color: var(--atomix-data-table-header-bg);
4767
4820
  }
4768
4821
  .c-data-table__header-cell {
4769
4822
  padding: 0.75rem 1rem;
@@ -4780,10 +4833,7 @@ a, a:hover {
4780
4833
  user-select: none;
4781
4834
  }
4782
4835
  .c-data-table__header-cell--sortable:hover {
4783
- 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%);
4784
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
4785
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
4786
- 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);
4836
+ background-color: rgba(0, 0, 0, 0.05);
4787
4837
  }
4788
4838
  .c-data-table__header-content {
4789
4839
  display: flex;
@@ -4804,16 +4854,10 @@ a, a:hover {
4804
4854
  vertical-align: middle;
4805
4855
  }
4806
4856
  .c-data-table__row {
4807
- 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%);
4808
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
4809
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
4810
- 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);
4857
+ background-color: var(--atomix-data-table-bg);
4811
4858
  }
4812
4859
  .c-data-table__row:hover {
4813
- 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%);
4814
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
4815
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
4816
- 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);
4860
+ background-color: var(--atomix-data-table-hover-bg);
4817
4861
  }
4818
4862
  .c-data-table__row[role=button] {
4819
4863
  cursor: pointer;
@@ -4831,10 +4875,7 @@ a, a:hover {
4831
4875
  color: var(--atomix-gray-500);
4832
4876
  }
4833
4877
  .c-data-table--striped tbody tr:nth-of-type(odd) {
4834
- 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%);
4835
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
4836
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
4837
- 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);
4878
+ background-color: var(--atomix-data-table-striped-bg);
4838
4879
  }
4839
4880
  .c-data-table--bordered {
4840
4881
  border: var(--atomix-border-width) var(--atomix-border-style) var(--atomix-data-table-border-color);
@@ -4944,7 +4985,6 @@ a, a:hover {
4944
4985
  .c-dropdown__menu-wrapper {
4945
4986
  position: absolute;
4946
4987
  left: 0;
4947
- z-index: 99;
4948
4988
  display: flex;
4949
4989
  opacity: 0;
4950
4990
  visibility: hidden;
@@ -5026,14 +5066,16 @@ a, a:hover {
5026
5066
  padding: var(--atomix-dropdown-padding-y) var(--atomix-dropdown-padding-x);
5027
5067
  list-style: none;
5028
5068
  margin-bottom: 0rem;
5029
- 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%);
5030
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5031
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5032
- 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);
5069
+ border: 1px solid rgba(255, 255, 255, 0.08);
5070
+ background-color: var(--atomix-dropdown-bg);
5033
5071
  border-radius: var(--atomix-dropdown-border-radius);
5034
5072
  box-shadow: var(--atomix-dropdown-box-shadow);
5035
5073
  overflow: hidden;
5036
5074
  }
5075
+ .c-dropdown__menu--glass {
5076
+ background-color: color-mix(in srgb, var(--atomix-dropdown-bg) 50%, transparent);
5077
+ box-shadow: var(--atomix-dropdown-box-shadow);
5078
+ }
5037
5079
  .c-dropdown__menu-item {
5038
5080
  display: block;
5039
5081
  width: 100%;
@@ -5050,19 +5092,13 @@ a, a:hover {
5050
5092
  }
5051
5093
  .c-dropdown__menu-item:hover, .c-dropdown__menu-item:focus {
5052
5094
  color: var(--atomix-dropdown-link-hover-color);
5053
- 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%);
5054
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5055
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5056
- 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);
5095
+ background-color: var(--atomix-dropdown-link-hover-bg);
5057
5096
  outline: none;
5058
5097
  padding-left: calc(var(--atomix-dropdown-item-padding-x) + 3px);
5059
5098
  }
5060
5099
  .c-dropdown__menu-item.is-active {
5061
5100
  color: var(--atomix-dropdown-active-color);
5062
- 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%);
5063
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5064
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5065
- 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);
5101
+ background-color: var(--atomix-dropdown-active-bg);
5066
5102
  }
5067
5103
  .c-dropdown__menu-item.is-disabled {
5068
5104
  color: var(--atomix-dropdown-color);
@@ -5145,7 +5181,7 @@ a, a:hover {
5145
5181
  --atomix-edge-panel-bg: var(--atomix-body-bg);
5146
5182
  --atomix-edge-panel-color: var(--atomix-body-color);
5147
5183
  --atomix-edge-panel-shadow: var(--atomix-box-shadow);
5148
- --atomix-edge-panel-backdrop-bg: var(--atomix-invert-bg-subtle);
5184
+ --atomix-edge-panel-backdrop-bg: var(--atomix-dark-bg-subtle);
5149
5185
  --atomix-edge-panel-backdrop-opacity: 0.5;
5150
5186
  --atomix-edge-panel-backdrop-blur: 10px;
5151
5187
  --atomix-edge-panel-animation-duration: 300ms;
@@ -5159,10 +5195,7 @@ a, a:hover {
5159
5195
  .c-edge-panel__backdrop {
5160
5196
  position: absolute;
5161
5197
  inset: 0;
5162
- 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%);
5163
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5164
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5165
- 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);
5198
+ background-color: var(--atomix-edge-panel-backdrop-bg);
5166
5199
  -webkit-backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
5167
5200
  backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
5168
5201
  opacity: 0;
@@ -5181,10 +5214,7 @@ a, a:hover {
5181
5214
  color: var(--atomix-edge-panel-color);
5182
5215
  width: var(--atomix-edge-panel-width);
5183
5216
  height: 100%;
5184
- 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%);
5185
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5186
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5187
- 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);
5217
+ background-color: var(--atomix-edge-panel-bg);
5188
5218
  box-shadow: var(--atomix-edge-panel-shadow);
5189
5219
  z-index: 2;
5190
5220
  overflow: hidden;
@@ -5219,10 +5249,7 @@ a, a:hover {
5219
5249
  transition: background-color 0.2s ease;
5220
5250
  }
5221
5251
  .c-edge-panel__close:hover {
5222
- 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%);
5223
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5224
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5225
- 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);
5252
+ background-color: rgba(0, 0, 0, 0.05);
5226
5253
  }
5227
5254
  .c-edge-panel__close:focus-visible {
5228
5255
  outline: 2px solid var(--atomix-primary);
@@ -5408,6 +5435,89 @@ a, a:hover {
5408
5435
  transform: translateY(100%);
5409
5436
  }
5410
5437
  }
5438
+ .c-edge-panel--glass {
5439
+ position: absolute;
5440
+ z-index: auto;
5441
+ z-index: initial;
5442
+ }
5443
+ .c-edge-panel--glass .c-edge-panel__container {
5444
+ background: transparent;
5445
+ box-shadow: none;
5446
+ overflow: hidden;
5447
+ border: none;
5448
+ padding: 0;
5449
+ z-index: auto;
5450
+ z-index: initial;
5451
+ will-change: initial;
5452
+ transform: none !important;
5453
+ border-radius: inherit;
5454
+ opacity: 0;
5455
+ transition: opacity 0.3s ease;
5456
+ }
5457
+ .c-edge-panel--glass .c-edge-panel__glass-content {
5458
+ display: flex;
5459
+ flex-direction: column;
5460
+ overflow: hidden;
5461
+ width: 100%;
5462
+ height: 100vh;
5463
+ padding: 0;
5464
+ border-radius: inherit;
5465
+ transition: opacity 0.3s ease;
5466
+ }
5467
+ .c-edge-panel--glass .c-edge-panel__header {
5468
+ background: transparent;
5469
+ border-bottom: 1px solid rgba(255, 255, 255, 0.15);
5470
+ flex-shrink: 0;
5471
+ padding: var(--atomix-edge-panel-padding-y) var(--atomix-edge-panel-padding-x);
5472
+ }
5473
+ .c-edge-panel--glass .c-edge-panel__body {
5474
+ background: transparent;
5475
+ flex: 1 1;
5476
+ overflow-y: auto;
5477
+ padding: var(--atomix-edge-panel-padding-y) var(--atomix-edge-panel-padding-x);
5478
+ }
5479
+ .c-edge-panel--glass .c-edge-panel__close {
5480
+ background: rgba(255, 255, 255, 0.05);
5481
+ }
5482
+ .c-edge-panel--glass .c-edge-panel__close:hover {
5483
+ background: rgba(255, 255, 255, 0.15);
5484
+ }
5485
+ .c-edge-panel--glass .c-edge-panel__close:focus-visible {
5486
+ outline-color: rgba(255, 255, 255, 0.5);
5487
+ }
5488
+ .c-edge-panel--glass .c-edge-panel__backdrop {
5489
+ animation: fadeIn 0.3s ease forwards;
5490
+ z-index: 0;
5491
+ }
5492
+ .c-edge-panel--glass .c-edge-panel__backdrop.is-animating-out {
5493
+ animation: fadeOut 0.3s ease forwards;
5494
+ }
5495
+ .c-edge-panel--glass.c-edge-panel--start .c-edge-panel__glass-wrapper {
5496
+ animation: slideInStart 0.3s ease forwards;
5497
+ }
5498
+ .c-edge-panel--glass.c-edge-panel--start .c-edge-panel__glass-wrapper.is-animating-out {
5499
+ animation: slideOutStart 0.3s ease forwards;
5500
+ }
5501
+ .c-edge-panel--glass.c-edge-panel--end .c-edge-panel__glass-wrapper {
5502
+ animation: slideInEnd 0.3s ease forwards;
5503
+ }
5504
+ .c-edge-panel--glass.c-edge-panel--end .c-edge-panel__glass-wrapper.is-animating-out {
5505
+ animation: slideOutEnd 0.3s ease forwards;
5506
+ }
5507
+ .c-edge-panel--glass.c-edge-panel--top .c-edge-panel__glass-wrapper {
5508
+ animation: slideInTop 0.3s ease forwards;
5509
+ }
5510
+ .c-edge-panel--glass.c-edge-panel--bottom .c-edge-panel__glass-wrapper {
5511
+ animation: slideInBottom 0.3s ease forwards;
5512
+ }
5513
+ .c-edge-panel--glass.c-edge-panel--bottom .c-edge-panel__container, .c-edge-panel--glass.c-edge-panel--top .c-edge-panel__container {
5514
+ width: 100vw;
5515
+ height: auto;
5516
+ }
5517
+ .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 {
5518
+ width: 100vw;
5519
+ height: auto;
5520
+ }
5411
5521
  .c-footer {
5412
5522
  --atomix-footer-padding-x: 1rem;
5413
5523
  --atomix-footer-padding-y: 3rem;
@@ -5422,10 +5532,7 @@ a, a:hover {
5422
5532
  --atomix-footer-newsletter-padding: 1.5rem;
5423
5533
  --atomix-footer-bottom-padding-top: 1.5rem;
5424
5534
  --atomix-footer-bottom-margin-top: 2rem;
5425
- 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%);
5426
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5427
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5428
- 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);
5535
+ background-color: var(--atomix-footer-bg);
5429
5536
  color: var(--atomix-footer-color);
5430
5537
  border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
5431
5538
  padding: var(--atomix-footer-padding-y) 0;
@@ -5637,10 +5744,7 @@ a, a:hover {
5637
5744
  justify-content: center;
5638
5745
  width: 2.5rem;
5639
5746
  height: 2.5rem;
5640
- 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%);
5641
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5642
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5643
- 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);
5747
+ background-color: var(--atomix-surface-variant);
5644
5748
  color: var(--atomix-text);
5645
5749
  border-radius: 50%;
5646
5750
  text-decoration: none;
@@ -5657,10 +5761,7 @@ a, a:hover {
5657
5761
  transition: transform 0.6s ease;
5658
5762
  }
5659
5763
  .c-footer__social-link:hover, .c-footer__social-link:focus {
5660
- 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%);
5661
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5662
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5663
- 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);
5764
+ background-color: var(--atomix-primary);
5664
5765
  color: var(--atomix-primary-contrast);
5665
5766
  transform: translateY(-3px) scale(1.05);
5666
5767
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
@@ -5728,10 +5829,7 @@ a, a:hover {
5728
5829
  background: linear-gradient(135deg, #25d366, #66bb6a);
5729
5830
  }
5730
5831
  .c-footer__newsletter {
5731
- 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%);
5732
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5733
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5734
- 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);
5832
+ background-color: linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8));
5735
5833
  padding: 1.5rem;
5736
5834
  border-radius: 0.5rem;
5737
5835
  border: 1px solid var(--atomix-border-subtle);
@@ -5787,10 +5885,7 @@ a, a:hover {
5787
5885
  flex: 1 1;
5788
5886
  padding: 0.75rem 1rem;
5789
5887
  font-size: 0.875rem;
5790
- 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%);
5791
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5792
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5793
- 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);
5888
+ background-color: var(--atomix-surface);
5794
5889
  color: var(--atomix-text);
5795
5890
  border: 1px solid var(--atomix-border);
5796
5891
  border-radius: 0.375rem;
@@ -5819,10 +5914,7 @@ a, a:hover {
5819
5914
  }
5820
5915
  .c-footer__newsletter-button {
5821
5916
  padding: 0.75rem 1.5rem;
5822
- 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%);
5823
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5824
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5825
- 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);
5917
+ background-color: var(--atomix-primary);
5826
5918
  color: var(--atomix-primary-contrast);
5827
5919
  border: none;
5828
5920
  border-radius: 0.375rem;
@@ -5842,10 +5934,7 @@ a, a:hover {
5842
5934
  transition: transform 0.6s ease;
5843
5935
  }
5844
5936
  .c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
5845
- 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%);
5846
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5847
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5848
- 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);
5937
+ background-color: var(--atomix-primary-hover);
5849
5938
  transform: translateY(-2px);
5850
5939
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
5851
5940
  }
@@ -5890,10 +5979,7 @@ a, a:hover {
5890
5979
  align-items: center;
5891
5980
  gap: 0.5rem;
5892
5981
  padding: 0.75rem 1.25rem;
5893
- 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%);
5894
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5895
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5896
- 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);
5982
+ background-color: var(--atomix-surface-variant);
5897
5983
  border: 1px solid var(--atomix-border-subtle);
5898
5984
  color: var(--atomix-text);
5899
5985
  font-size: 0.875rem;
@@ -5914,10 +6000,7 @@ a, a:hover {
5914
6000
  }
5915
6001
  .c-footer__back-to-top:hover, .c-footer__back-to-top:focus {
5916
6002
  color: var(--atomix-primary);
5917
- 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%);
5918
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
5919
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
5920
- 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);
6003
+ background-color: var(--atomix-primary);
5921
6004
  border-color: var(--atomix-primary);
5922
6005
  transform: translateY(-2px);
5923
6006
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
@@ -6462,10 +6545,7 @@ a, a:hover {
6462
6545
  display: grid;
6463
6546
  place-items: center;
6464
6547
  padding: var(--atomix-hero-padding-y) var(--atomix-hero-padding-x);
6465
- 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%);
6466
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
6467
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
6468
- 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);
6548
+ background-color: var(--atomix-hero-bg);
6469
6549
  overflow: hidden;
6470
6550
  }
6471
6551
  .c-hero__bg {
@@ -6488,16 +6568,12 @@ a, a:hover {
6488
6568
  .c-hero__overlay {
6489
6569
  position: absolute;
6490
6570
  inset: 0;
6491
- 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%);
6492
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
6493
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
6494
- 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);
6571
+ background-color: var(--atomix-hero-overlay);
6495
6572
  opacity: var(--atomix-hero-overlay-opacity);
6496
- z-index: 1;
6573
+ z-index: 0;
6497
6574
  }
6498
6575
  .c-hero__container {
6499
6576
  position: relative;
6500
- z-index: 2;
6501
6577
  }
6502
6578
  .c-hero__grid {
6503
6579
  --atomix-gutter-x: var(--atomix-hero-grid-gutter);
@@ -6625,10 +6701,7 @@ a, a:hover {
6625
6701
  border: var(--atomix-input-border-width) solid var(--atomix-input-border-color);
6626
6702
  border-radius: var(--atomix-input-border-radius);
6627
6703
  outline: none;
6628
- 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%);
6629
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
6630
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
6631
- 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);
6704
+ background-color: var(--atomix-input-bg);
6632
6705
  transition-property: all;
6633
6706
  transition-duration: 0.2s;
6634
6707
  transition-timing-function: ease-in-out;
@@ -6700,6 +6773,21 @@ a, a:hover {
6700
6773
  --atomix-input-bg: var(--atomix-secondary-bg-subtle);
6701
6774
  pointer-events: none;
6702
6775
  }
6776
+ .c-input--glass {
6777
+ background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
6778
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
6779
+ }
6780
+ .c-input--glass:focus, .c-input--glass:hover {
6781
+ background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
6782
+ 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);
6783
+ }
6784
+ .c-input--glass.c-input--textarea {
6785
+ resize: vertical;
6786
+ }
6787
+ .c-input--glass:disabled, .c-input--glass.is-disabled {
6788
+ background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
6789
+ opacity: 0.6;
6790
+ }
6703
6791
  .c-list-group {
6704
6792
  --atomix-list-group-width: 100%;
6705
6793
  --atomix-list-group-bg: ;
@@ -6718,20 +6806,14 @@ a, a:hover {
6718
6806
  list-style: none;
6719
6807
  width: 100%;
6720
6808
  max-width: var(--atomix-list-group-width);
6721
- 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%);
6722
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
6723
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
6724
- 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);
6809
+ background-color: var(--atomix-list-group-bg);
6725
6810
  }
6726
6811
  .c-list-group__item {
6727
6812
  padding: var(--atomix-list-group-item-padding-y) var(--atomix-list-group-item-padding-x);
6728
6813
  font-size: var(--atomix-list-group-item-font-size);
6729
6814
  color: var(--atomix-list-group-item-color);
6730
6815
  border-bottom: var(--atomix-list-group-item-border-width) solid var(--atomix-list-group-item-border-color);
6731
- 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%);
6732
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
6733
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
6734
- 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);
6816
+ background-color: var(--atomix-list-group-item-bg);
6735
6817
  }
6736
6818
  .c-list-group__item--primary {
6737
6819
  --atomix-list-group-item-bg: var(--atomix-brand-bg-subtle);
@@ -6796,10 +6878,7 @@ a, a:hover {
6796
6878
  left: 0;
6797
6879
  width: var(--atomix-list-item-dash-width);
6798
6880
  height: var(--atomix-list-item-dash-height);
6799
- 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%);
6800
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
6801
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
6802
- 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);
6881
+ background-color: var(--atomix-list-color);
6803
6882
  transform: translateY(-50%);
6804
6883
  }
6805
6884
  .c-list--number {
@@ -6839,10 +6918,7 @@ a, a:hover {
6839
6918
  display: inline-block;
6840
6919
  min-width: var(--atomix-menu-min-width);
6841
6920
  padding: var(--atomix-menu-item-padding-y) var(--atomix-menu-item-padding-x);
6842
- 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%);
6843
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
6844
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
6845
- 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);
6921
+ background-color: var(--atomix-menu-bg);
6846
6922
  border-radius: var(--atomix-menu-border-radius);
6847
6923
  box-shadow: var(--atomix-menu-box-shadow);
6848
6924
  z-index: 5;
@@ -6888,10 +6964,7 @@ a, a:hover {
6888
6964
  color: var(--atomix-menu-item-color);
6889
6965
  font-size: var(--atomix-menu-item-font-size);
6890
6966
  font-weight: var(--atomix-menu-item-font-weight);
6891
- 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%);
6892
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
6893
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
6894
- 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);
6967
+ background-color: var(--atomix-menu-item-bg);
6895
6968
  border-radius: var(--atomix-menu-border-radius);
6896
6969
  cursor: pointer;
6897
6970
  transition-property: all;
@@ -6901,16 +6974,10 @@ a, a:hover {
6901
6974
  }
6902
6975
  .c-menu__link:hover {
6903
6976
  color: var(--atomix-menu-item-color);
6904
- 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%);
6905
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
6906
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
6907
- 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);
6977
+ background-color: var(--atomix-menu-item-bg-hover);
6908
6978
  }
6909
6979
  .c-menu__link:focus, .c-menu__link:active, .c-menu__link.is-active {
6910
- 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%);
6911
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
6912
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
6913
- 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);
6980
+ background-color: var(--atomix-menu-item-bg-active);
6914
6981
  }
6915
6982
  .c-menu__icon {
6916
6983
  font-size: var(--atomix-menu-item-icon-size);
@@ -7080,10 +7147,7 @@ a, a:hover {
7080
7147
  padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
7081
7148
  border-radius: var(--atomix-messages-border-radius);
7082
7149
  border: var(--atomix-messages-border-width) solid var(--atomix-messages-border-color);
7083
- 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%);
7084
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7085
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7086
- 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);
7150
+ background-color: var(--atomix-messages-bg);
7087
7151
  }
7088
7152
  .c-messages__body {
7089
7153
  max-height: var(--atomix-messages-body-height);
@@ -7133,10 +7197,7 @@ a, a:hover {
7133
7197
  color: var(--atomix-messages-text-color);
7134
7198
  font-size: var(--atomix-messages-text-font-size);
7135
7199
  padding: var(--atomix-messages-text-padding-y) var(--atomix-messages-text-padding-x);
7136
- 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%);
7137
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7138
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7139
- 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);
7200
+ background-color: var(--atomix-messages-text-bg);
7140
7201
  border-radius: 0.25rem var(--atomix-messages-text-border-radius) var(--atomix-messages-text-border-radius) 0.25rem;
7141
7202
  }
7142
7203
  .c-messages__file {
@@ -7144,10 +7205,7 @@ a, a:hover {
7144
7205
  flex-wrap: wrap;
7145
7206
  padding: var(--atomix-messages-file-padding-y) var(--atomix-messages-file-padding-x);
7146
7207
  border-radius: 0.25rem var(--atomix-messages-file-border-radius) var(--atomix-messages-file-border-radius) 0.25rem;
7147
- 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%);
7148
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7149
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7150
- 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);
7208
+ background-color: var(--atomix-messages-file-bg);
7151
7209
  }
7152
7210
  .c-messages__file-icon {
7153
7211
  display: grid !important;
@@ -7157,10 +7215,7 @@ a, a:hover {
7157
7215
  height: var(--atomix-messages-file-icon-size);
7158
7216
  color: var(--atomix-tertiary-text-emphasis);
7159
7217
  margin-right: var(--atomix-messages-file-icon-margin-right);
7160
- 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%);
7161
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7162
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7163
- 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);
7218
+ background-color: var(--atomix-body-bg);
7164
7219
  border-radius: 50rem;
7165
7220
  }
7166
7221
  .c-messages__file-name {
@@ -7216,10 +7271,7 @@ a, a:hover {
7216
7271
  }
7217
7272
  .c-messages__content--self .c-messages__file-icon {
7218
7273
  color: var(--atomix-invert-text-emphasis);
7219
- 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%);
7220
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7221
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7222
- 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);
7274
+ background-color: var(--atomix-messages-file-icon-bg);
7223
7275
  }
7224
7276
  .c-messages__content--self .c-messages__file-icon [data-atomix-color-mode=dark] {
7225
7277
  --atomix-messages-file-icon-bg: #6425ca;
@@ -7263,10 +7315,7 @@ a, a:hover {
7263
7315
  font-size: var(--atomix-messages-input-font-size);
7264
7316
  border: var(--atomix-messages-input-border-width) solid var(--atomix-messages-input-border-color);
7265
7317
  border-radius: var(--atomix-messages-input-border-radius);
7266
- 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%);
7267
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7268
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7269
- 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);
7318
+ background-color: var(--atomix-messages-bg);
7270
7319
  resize: none;
7271
7320
  }
7272
7321
  .c-messages__input::-moz-placeholder {
@@ -7286,10 +7335,7 @@ a, a:hover {
7286
7335
  place-items: center;
7287
7336
  align-self: flex-end;
7288
7337
  padding: 0.625rem;
7289
- 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%);
7290
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7291
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7292
- 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);
7338
+ background-color: var(--atomix-brand-bg-subtle);
7293
7339
  color: var(--atomix-invert-text-emphasis);
7294
7340
  border-radius: 50rem;
7295
7341
  cursor: pointer;
@@ -7306,6 +7352,134 @@ a, a:hover {
7306
7352
  opacity: 0.5;
7307
7353
  cursor: not-allowed;
7308
7354
  }
7355
+ .c-messages--glass {
7356
+ background: transparent;
7357
+ border: none;
7358
+ padding: 0;
7359
+ }
7360
+ .c-messages--glass .c-messages__glass-content {
7361
+ padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
7362
+ border-radius: var(--atomix-messages-border-radius);
7363
+ }
7364
+ .c-messages--glass .c-messages__body {
7365
+ border-radius: 0.25rem;
7366
+ padding: 0.5rem;
7367
+ background-color: color-mix(in srgb, var(--atomix-body-bg) 15%, transparent);
7368
+ }
7369
+ .c-messages--glass .c-messages__text {
7370
+ background-color: color-mix(in srgb, var(--atomix-body-bg) 50%, transparent);
7371
+ -webkit-backdrop-filter: blur(8px);
7372
+ backdrop-filter: blur(8px);
7373
+ border: 1px solid rgba(255, 255, 255, 0.2);
7374
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
7375
+ }
7376
+ .c-messages--glass .c-messages__content--self .c-messages__text {
7377
+ background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
7378
+ border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
7379
+ -webkit-backdrop-filter: blur(8px);
7380
+ backdrop-filter: blur(8px);
7381
+ }
7382
+ .c-messages--glass .c-messages__content--self .c-messages__file {
7383
+ background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
7384
+ border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
7385
+ -webkit-backdrop-filter: blur(8px);
7386
+ backdrop-filter: blur(8px);
7387
+ }
7388
+ .c-messages--glass .c-messages__file {
7389
+ background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
7390
+ border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
7391
+ -webkit-backdrop-filter: blur(8px);
7392
+ backdrop-filter: blur(8px);
7393
+ border: 1px solid rgba(255, 255, 255, 0.2);
7394
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
7395
+ }
7396
+ .c-messages--glass .c-messages__file-icon {
7397
+ background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
7398
+ -webkit-backdrop-filter: blur(8px);
7399
+ backdrop-filter: blur(8px);
7400
+ border: 1px solid rgba(255, 255, 255, 0.15);
7401
+ }
7402
+ .c-messages--glass .c-messages__image {
7403
+ border: 1px solid rgba(255, 255, 255, 0.3);
7404
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
7405
+ }
7406
+ .c-messages--glass .c-messages__avatar {
7407
+ border: 2px solid rgba(255, 255, 255, 0.4);
7408
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
7409
+ }
7410
+ .c-messages--glass .c-messages__name {
7411
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
7412
+ font-weight: 600;
7413
+ }
7414
+ .c-messages--glass .c-messages__time {
7415
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
7416
+ }
7417
+ .c-messages--glass .c-messages__form {
7418
+ padding-top: 0.75rem;
7419
+ border-top: 1px solid rgba(255, 255, 255, 0.2);
7420
+ margin-top: 1rem;
7421
+ }
7422
+ .c-messages--glass .c-messages__input {
7423
+ background: rgba(255, 255, 255, 0.3);
7424
+ -webkit-backdrop-filter: blur(8px);
7425
+ backdrop-filter: blur(8px);
7426
+ border: 1px solid rgba(255, 255, 255, 0.3);
7427
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
7428
+ color: var(--atomix-primary-text-emphasis);
7429
+ }
7430
+ .c-messages--glass .c-messages__input:focus {
7431
+ background: rgba(255, 255, 255, 0.45);
7432
+ border-color: var(--atomix-primary);
7433
+ box-shadow: 0 0 0 3px rgba(var(--atomix-primary-rgb), 0.15);
7434
+ }
7435
+ .c-messages--glass .c-messages__input::-moz-placeholder {
7436
+ opacity: 0.8;
7437
+ color: var(--atomix-primary-text-emphasis);
7438
+ }
7439
+ .c-messages--glass .c-messages__input::placeholder {
7440
+ opacity: 0.8;
7441
+ color: var(--atomix-primary-text-emphasis);
7442
+ }
7443
+ .c-messages--glass .c-messages__option {
7444
+ padding: 0.375rem;
7445
+ border-radius: 0.25rem;
7446
+ transition: background-color 0.2s ease;
7447
+ }
7448
+ .c-messages--glass .c-messages__option:hover:not(:disabled) {
7449
+ background: rgba(var(--atomix-secondary-bg-rgb), 0.4);
7450
+ }
7451
+ .c-messages--glass .c-messages__option:focus-visible {
7452
+ outline: 2px solid var(--atomix-primary);
7453
+ outline-offset: 2px;
7454
+ }
7455
+ .c-messages--glass .c-messages__option-icon {
7456
+ opacity: 0.8;
7457
+ transition: opacity 0.2s ease;
7458
+ }
7459
+ .c-messages__option:hover .c-messages--glass .c-messages__option-icon {
7460
+ opacity: 1;
7461
+ }
7462
+ .c-messages--glass .c-messages__submit {
7463
+ background: rgba(var(--atomix-primary-rgb), 0.9);
7464
+ -webkit-backdrop-filter: blur(8px);
7465
+ backdrop-filter: blur(8px);
7466
+ border: 1px solid rgba(var(--atomix-primary-rgb), 0.4);
7467
+ box-shadow: 0 2px 8px rgba(var(--atomix-primary-rgb), 0.3);
7468
+ transition: all 0.2s ease;
7469
+ }
7470
+ .c-messages--glass .c-messages__submit:hover:not(:disabled) {
7471
+ background: rgba(var(--atomix-primary-rgb), 1);
7472
+ box-shadow: 0 4px 12px rgba(var(--atomix-primary-rgb), 0.4);
7473
+ transform: translateY(-1px);
7474
+ }
7475
+ .c-messages--glass .c-messages__submit:active:not(:disabled) {
7476
+ transform: translateY(0);
7477
+ box-shadow: 0 1px 4px rgba(var(--atomix-primary-rgb), 0.3);
7478
+ }
7479
+ .c-messages--glass .c-messages__submit:disabled {
7480
+ opacity: 0.5;
7481
+ background: rgba(var(--atomix-primary-rgb), 0.5);
7482
+ }
7309
7483
  .c-modal {
7310
7484
  --atomix-modal-inner-padding: 1rem;
7311
7485
  --atomix-modal-content-color: ;
@@ -7328,7 +7502,7 @@ a, a:hover {
7328
7502
  --atomix-modal-lg: 62.5rem;
7329
7503
  --atomix-modal-xl: 71.25rem;
7330
7504
  --atomix-modal-width: var(--atomix-modal-md);
7331
- position: fixed;
7505
+ position: absolute;
7332
7506
  inset: 0;
7333
7507
  width: 100%;
7334
7508
  height: 100%;
@@ -7338,10 +7512,7 @@ a, a:hover {
7338
7512
  .c-modal__backdrop {
7339
7513
  position: absolute;
7340
7514
  inset: 0;
7341
- 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%);
7342
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7343
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7344
- 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);
7515
+ background-color: var(--atomix-modal-backdrop-bg);
7345
7516
  opacity: 0;
7346
7517
  transition: 0.3s;
7347
7518
  }
@@ -7355,10 +7526,8 @@ a, a:hover {
7355
7526
  margin-left: auto;
7356
7527
  margin-right: auto;
7357
7528
  opacity: 0;
7358
- z-index: 2;
7359
7529
  pointer-events: none;
7360
7530
  transition: 0.3s ease;
7361
- will-change: transform;
7362
7531
  }
7363
7532
  .c-modal__content {
7364
7533
  display: flex;
@@ -7366,10 +7535,7 @@ a, a:hover {
7366
7535
  width: 100%;
7367
7536
  max-height: 100%;
7368
7537
  padding: var(--atomix-modal-inner-padding);
7369
- 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%);
7370
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7371
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7372
- 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);
7538
+ background-color: var(--atomix-modal-content-bg);
7373
7539
  box-shadow: var(--atomix-modal-content-box-shadow);
7374
7540
  border-radius: var(--atomix-modal-content-border-radius);
7375
7541
  overflow: hidden;
@@ -7425,6 +7591,9 @@ a, a:hover {
7425
7591
  .c-modal--xl {
7426
7592
  --atomix-modal-width: var(--atomix-modal-xl);
7427
7593
  }
7594
+ .c-modal--glass .c-modal .c-modal--glass .c-modal__content {
7595
+ background-color: color-mix(in srgb, var(--atomix-modal-content-bg) 50%, transparent);
7596
+ }
7428
7597
  .c-modal.is-open .c-modal__backdrop {
7429
7598
  opacity: var(--atomix-modal-backdrop-opacity);
7430
7599
  }
@@ -7480,20 +7649,14 @@ a, a:hover {
7480
7649
  color: var(--atomix-nav-link-color);
7481
7650
  }
7482
7651
  .c-nav__link:hover, .c-nav__link:active, .c-nav__link:focus, .c-nav__link:focus-visible {
7483
- 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%);
7484
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7485
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7486
- 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);
7652
+ background-color: var(--atomix-nav-link-hover-bg);
7487
7653
  }
7488
7654
  .c-nav__link--disabled {
7489
7655
  color: var(--atomix-disabled-text-emphasis);
7490
7656
  pointer-events: none;
7491
7657
  }
7492
7658
  .c-nav__link:focus, .c-nav__link:active, .c-nav__link.is-active {
7493
- 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%);
7494
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7495
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7496
- 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);
7659
+ background-color: var(--atomix-brand-bg-subtle);
7497
7660
  }
7498
7661
  .c-nav__icon {
7499
7662
  font-size: var(--atomix-nav-icon-size);
@@ -7547,24 +7710,14 @@ a, a:hover {
7547
7710
  left: 50%;
7548
7711
  transform: translateX(-50%);
7549
7712
  z-index: 1000;
7550
- 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%);
7551
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7552
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7553
- 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);
7713
+ background-color: var(--atomix-body-bg);
7554
7714
  border: 1px solid var(--atomix-border-color);
7555
7715
  border-radius: 50rem;
7556
7716
  box-shadow: var(--atomix-box-shadow-lg);
7557
7717
  padding: 0.5rem 1rem;
7558
7718
  -webkit-backdrop-filter: blur(10px);
7559
7719
  backdrop-filter: blur(10px);
7560
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7561
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7562
- }
7563
- @supports (color: color-mix(in lch, red, blue)){
7564
- .c-nav--float-top-center, .c-nav--float-bottom-center {
7565
- 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%);
7566
- 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);
7567
- }
7720
+ background-color: rgba(var(--atomix-body-bg-rgb), 0.95);
7568
7721
  }
7569
7722
  .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 {
7570
7723
  margin-left: 0.25rem;
@@ -7574,10 +7727,7 @@ a, a:hover {
7574
7727
  border-radius: 0.625rem;
7575
7728
  }
7576
7729
  .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 {
7577
- 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%);
7578
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7579
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7580
- 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);
7730
+ background-color: var(--atomix-brand-bg-subtle);
7581
7731
  }
7582
7732
  .c-nav--float-top-center {
7583
7733
  top: 1.25rem;
@@ -7611,10 +7761,7 @@ a, a:hover {
7611
7761
  position: relative;
7612
7762
  padding: var(--atomix-navbar-padding-y) 0;
7613
7763
  border-bottom: var(--atomix-navbar-border-width) solid var(--atomix-navbar-border-color);
7614
- 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%);
7615
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7616
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7617
- 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);
7764
+ background-color: var(--atomix-navbar-bg);
7618
7765
  z-index: var(--atomix-navbar-z-index);
7619
7766
  }
7620
7767
  .c-navbar__container {
@@ -7649,10 +7796,7 @@ a, a:hover {
7649
7796
  width: var(--atomix-navbar-toggler-size);
7650
7797
  height: var(--atomix-navbar-toggler-size);
7651
7798
  padding: 0;
7652
- 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%);
7653
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7654
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7655
- 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);
7799
+ background-color: var(--atomix-navbar-toggler-bg);
7656
7800
  border: var(--atomix-navbar-toggler-border);
7657
7801
  border-radius: var(--atomix-navbar-toggler-border-radius);
7658
7802
  cursor: pointer;
@@ -7705,10 +7849,7 @@ a, a:hover {
7705
7849
  left: 0;
7706
7850
  width: 100%;
7707
7851
  height: 100%;
7708
- 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%);
7709
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7710
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7711
- 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);
7852
+ background-color: var(--atomix-navbar-backdrop-bg);
7712
7853
  z-index: var(--atomix-navbar-backdrop-z-index);
7713
7854
  opacity: 0;
7714
7855
  visibility: hidden;
@@ -7775,8 +7916,10 @@ a, a:hover {
7775
7916
  display: flex !important;
7776
7917
  }
7777
7918
  }
7778
- .c-navbar--fixed, .c-navbar--fixed-bottom {
7919
+ .c-navbar--fixed:not(.c-navbar--glass), .c-navbar--fixed-bottom:not(.c-navbar--glass) {
7779
7920
  position: fixed;
7921
+ }
7922
+ .c-navbar--fixed, .c-navbar--fixed-bottom {
7780
7923
  left: 0;
7781
7924
  right: 0;
7782
7925
  width: 100%;
@@ -7785,12 +7928,18 @@ a, a:hover {
7785
7928
  .c-navbar--fixed {
7786
7929
  top: 0;
7787
7930
  }
7931
+ .c-navbar--glass {
7932
+ position: relative;
7933
+ background-color: transparent;
7934
+ border-bottom: none;
7935
+ }
7788
7936
  .c-navbar--fixed-bottom {
7789
7937
  bottom: 0;
7790
7938
  }
7791
7939
  .c-navbar--fixed-bottom .c-nav__dropdown-menu {
7792
7940
  top: auto;
7793
7941
  bottom: 100%;
7942
+ z-index: 999;
7794
7943
  }
7795
7944
  .c-navbar--fixed-bottom .c-nav--end .c-nav__dropdown-menu {
7796
7945
  left: 50%;
@@ -7957,24 +8106,24 @@ a, a:hover {
7957
8106
  --atomix-callout-padding-y: 1rem;
7958
8107
  --atomix-callout-tost-padding-x: 1rem;
7959
8108
  --atomix-callout-tost-padding-y: 1rem;
7960
- --atomix-callout-bg: #ffffff;
8109
+ --atomix-callout-bg: var(--atomix-body-bg);
7961
8110
  --atomix-callout-border-radius: 0.5rem;
7962
- --atomix-callout-border-color: #e5e7eb;
8111
+ --atomix-callout-border-color: var(--atomix-border-color);
7963
8112
  --atomix-callout-border-witdh: var(--atomix-border-width);
7964
8113
  --atomix-callout-title-font-size: 1rem;
7965
8114
  --atomix-callout-title-font-weight: 600;
7966
- --atomix-callout-title-color: #1f2937;
8115
+ --atomix-callout-title-color: var(--atomix-body-color);
7967
8116
  --atomix-callout-text-font-size: 0.875rem;
7968
8117
  --atomix-callout-text-font-weight: 400;
7969
- --atomix-callout-text-color: #4b5563;
8118
+ --atomix-callout-text-color: var(--atomix-body-color);
7970
8119
  --atomix-callout-message-spacer: 0.75rem;
7971
8120
  --atomix-callout-icon-size: 1.25rem;
7972
- --atomix-callout-icon-color: #7c3aed;
8121
+ --atomix-callout-icon-color: var(--atomix-primary);
7973
8122
  --atomix-callout-close-btn-size: 1.25rem;
7974
8123
  --atomix-callout-actions-spacer: 0.5rem;
7975
8124
  --atomix-callout-actions-spacer-y: 0.75rem;
7976
- --atomix-callout-toast-bg: #ffffff;
7977
- --atomix-callout-box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
8125
+ --atomix-callout-toast-bg: var(--atomix-body-bg);
8126
+ --atomix-callout-box-shadow: var(--atomix-box-shadow);
7978
8127
  --atomix-callout-transition-duration: 0.3s;
7979
8128
  --atomix-callout-transition-timing: cubic-bezier(0.16, 1, 0.3, 1);
7980
8129
  display: inline-flex;
@@ -7984,10 +8133,7 @@ a, a:hover {
7984
8133
  max-width: var(--atomix-callout-width);
7985
8134
  gap: var(--atomix-callout-actions-spacer);
7986
8135
  padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
7987
- 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%);
7988
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
7989
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
7990
- 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);
8136
+ background-color: var(--atomix-callout-bg);
7991
8137
  border-radius: var(--atomix-callout-border-radius);
7992
8138
  border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
7993
8139
  transition: opacity var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing), transform var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing);
@@ -8026,9 +8172,9 @@ a, a:hover {
8026
8172
  .c-callout__actions {
8027
8173
  display: flex;
8028
8174
  align-items: center;
8029
- flex-wrap: wrap;
8030
8175
  gap: var(--atomix-callout-actions-spacer);
8031
8176
  margin-left: auto;
8177
+ margin-right: 10px;
8032
8178
  }
8033
8179
  .c-callout__close-btn {
8034
8180
  display: inline-flex;
@@ -8068,10 +8214,7 @@ a, a:hover {
8068
8214
  align-items: flex-start;
8069
8215
  justify-content: flex-start;
8070
8216
  border: none;
8071
- 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%);
8072
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
8073
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
8074
- 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);
8217
+ background-color: var(--atomix-callout-toast-bg);
8075
8218
  box-shadow: var(--atomix-callout-box-shadow);
8076
8219
  animation: calloutToastIn 0.3s var(--atomix-callout-transition-timing) forwards;
8077
8220
  }
@@ -8133,9 +8276,36 @@ a, a:hover {
8133
8276
  --atomix-callout-title-color: var(--atomix-light);
8134
8277
  --atomix-callout-text-color: #d1d5db;
8135
8278
  --atomix-callout-bg: var(--atomix-dark);
8136
- --atomix-callout-border-color: var(--atomix-primary-border-subtle);
8279
+ --atomix-callout-border-color: var(--atomix-dark-border-subtle);
8137
8280
  --atomix-callout-icon-color: var(--atomix-light);
8138
8281
  }
8282
+ .c-callout--glass {
8283
+ background: none;
8284
+ padding: 0;
8285
+ border: none;
8286
+ display: block;
8287
+ }
8288
+ .c-callout--glass .c-callout__glass-content {
8289
+ display: flex;
8290
+ justify-content: center;
8291
+ align-items: center;
8292
+ padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
8293
+ border: var(--atomix-callout-border-witdh) solid color-mix(in srgb, var(--atomix-callout-border-color) 20%, transparent);
8294
+ max-width: var(--atomix-callout-width);
8295
+ border-radius: var(--atomix-callout-border-radius);
8296
+ width: 100%;
8297
+ background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
8298
+ }
8299
+ .c-callout--glass .c-callout__title {
8300
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
8301
+ }
8302
+ .c-callout--glass .c-callout__text {
8303
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
8304
+ }
8305
+ .c-callout--glass.c-callout--toast {
8306
+ background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
8307
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
8308
+ }
8139
8309
  .c-callout.is-hide {
8140
8310
  opacity: 0;
8141
8311
  transform: translateY(-10px);
@@ -8276,10 +8446,7 @@ a, a:hover {
8276
8446
  color: var(--atomix-pagination-color);
8277
8447
  font-size: var(--atomix-pagination-font-size);
8278
8448
  padding: var(--atomix-pagination-padding-y) var(--atomix-pagination-padding-x);
8279
- 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%);
8280
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
8281
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
8282
- 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);
8449
+ background-color: var(--atomix-pagination-bg);
8283
8450
  border-radius: var(--atomix-pagination-border-radius);
8284
8451
  border: none;
8285
8452
  cursor: pointer;
@@ -8363,10 +8530,7 @@ a, a:hover {
8363
8530
  flex-direction: column;
8364
8531
  gap: var(--atomix-popover-inner-gap-y) var(--atomix-popover-inner-gap-x);
8365
8532
  padding: var(--atomix-popover-padding-y) var(--atomix-popover-padding-x);
8366
- 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%);
8367
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
8368
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
8369
- 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);
8533
+ background-color: var(--atomix-popover-bg);
8370
8534
  border-radius: var(--atomix-popover-border-radius);
8371
8535
  box-shadow: var(--atomix-popover-box-shadow);
8372
8536
  }
@@ -8374,10 +8538,7 @@ a, a:hover {
8374
8538
  position: absolute;
8375
8539
  width: var(--atomix-popover-arrow-size);
8376
8540
  height: var(--atomix-popover-arrow-size);
8377
- 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%);
8378
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
8379
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
8380
- 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);
8541
+ background-color: var(--atomix-popover-bg);
8381
8542
  box-shadow: var(--atomix-popover-box-shadow);
8382
8543
  z-index: 1;
8383
8544
  transform-origin: center;
@@ -8419,10 +8580,7 @@ a, a:hover {
8419
8580
  --atomix-product-review-label-color: var(--atomix-text-muted);
8420
8581
  padding: var(--atomix-product-review-padding);
8421
8582
  border-radius: var(--atomix-product-review-border-radius);
8422
- 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%);
8423
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
8424
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
8425
- 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);
8583
+ background-color: var(--atomix-product-review-bg);
8426
8584
  border: 1px solid var(--atomix-product-review-border-color);
8427
8585
  width: 100%;
8428
8586
  max-width: 37.5rem;
@@ -8482,10 +8640,7 @@ a, a:hover {
8482
8640
  padding: 0.75rem;
8483
8641
  border: 1px solid var(--atomix-product-review-border-color);
8484
8642
  border-radius: var(--atomix-border-radius);
8485
- 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%);
8486
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
8487
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
8488
- 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);
8643
+ background-color: var(--atomix-body-bg);
8489
8644
  color: var(--atomix-body-color);
8490
8645
  font-family: inherit;
8491
8646
  resize: vertical;
@@ -8533,10 +8688,7 @@ a, a:hover {
8533
8688
  width: 100%;
8534
8689
  max-width: var(--atomix-progress-width);
8535
8690
  height: var(--atomix-progress-bar-height);
8536
- 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%);
8537
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
8538
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
8539
- 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);
8691
+ background-color: var(--atomix-progress-bg);
8540
8692
  border-radius: var(--atomix-progress-border-radius);
8541
8693
  overflow: hidden;
8542
8694
  }
@@ -8544,10 +8696,7 @@ a, a:hover {
8544
8696
  width: var(--atomix-progress-bar-width);
8545
8697
  height: var(--atomix-progress-bar-height);
8546
8698
  color: var(--atomix-progress-bar-color);
8547
- 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%);
8548
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
8549
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
8550
- 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);
8699
+ background-color: var(--atomix-progress-bar-bg);
8551
8700
  border-radius: var(--atomix-progress-border-radius);
8552
8701
  transition: var(--atomix-progress-bar-transition) var(--atomix-progress-bar-easing);
8553
8702
  }
@@ -8754,10 +8903,7 @@ a, a:hover {
8754
8903
  max-width: var(--atomix-river-width);
8755
8904
  padding: var(--atomix-river-padding-y) var(--atomix-river-padding-x);
8756
8905
  border-radius: var(--atomix-river-border-radius);
8757
- 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%);
8758
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
8759
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
8760
- 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);
8906
+ background-color: var(--atomix-river-bg);
8761
8907
  }
8762
8908
  .c-river__bg {
8763
8909
  position: absolute;
@@ -8777,10 +8923,7 @@ a, a:hover {
8777
8923
  .c-river__overlay {
8778
8924
  position: absolute;
8779
8925
  inset: 0;
8780
- 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%);
8781
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
8782
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
8783
- 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);
8926
+ background-color: var(--atomix-river-overlay);
8784
8927
  opacity: var(--atomix-river-overlay-opacity);
8785
8928
  border-radius: var(--atomix-river-border-radius);
8786
8929
  }
@@ -9004,10 +9147,7 @@ a, a:hover {
9004
9147
  left: 0;
9005
9148
  width: 100%;
9006
9149
  height: 100%;
9007
- 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%);
9008
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9009
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9010
- 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);
9150
+ background-color: var(--atomix-sectionintro-overlay-bg-color);
9011
9151
  opacity: var(--atomix-sectionintro-overlay-opacity);
9012
9152
  }
9013
9153
  .c-sectionintro--has-bg {
@@ -9087,10 +9227,7 @@ a, a:hover {
9087
9227
  padding: var(--atomix-select-padding-x) var(--atomix-select-padding-y);
9088
9228
  color: var(--atomix-select-placeholder-color);
9089
9229
  font-size: var(--atomix-select-font-size);
9090
- 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%);
9091
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9092
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9093
- 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);
9230
+ background-color: var(--atomix-select-bg);
9094
9231
  border: 1px solid var(--atomix-select-border-color);
9095
9232
  border-radius: var(--atomix-select-border-radius);
9096
9233
  cursor: pointer;
@@ -9120,10 +9257,7 @@ a, a:hover {
9120
9257
  height: 0px;
9121
9258
  top: calc(100% + var(--atomix-select-panel-spacer-y));
9122
9259
  left: 0;
9123
- 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%);
9124
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9125
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9126
- 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);
9260
+ background-color: var(--atomix-select-panel-bg);
9127
9261
  border-radius: var(--atomix-select-panel-border-radius);
9128
9262
  box-shadow: var(--atomix-select-panel-box-shadow);
9129
9263
  overflow: hidden;
@@ -9144,10 +9278,7 @@ a, a:hover {
9144
9278
  .c-select__item {
9145
9279
  padding: var(--atomix-select-item-padding-x) var(--atomix-select-item-padding-y);
9146
9280
  color: var(--atomix-select-item-color);
9147
- 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%);
9148
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9149
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9150
- 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);
9281
+ background-color: var(--atomix-select-item-bg);
9151
9282
  border-radius: var(--atomix-select-item-border-radius);
9152
9283
  transition-property: all;
9153
9284
  transition-duration: 0.2s;
@@ -9158,10 +9289,7 @@ a, a:hover {
9158
9289
  cursor: pointer;
9159
9290
  }
9160
9291
  .c-select__item:hover {
9161
- 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%);
9162
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9163
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9164
- 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);
9292
+ background-color: var(--atomix-select-item-bg-hover);
9165
9293
  }
9166
9294
  .c-select--lg {
9167
9295
  --atomix-select-font-size: var(--atomix-select-font-size-lg);
@@ -9211,10 +9339,7 @@ a, a:hover {
9211
9339
  --atomix-side-menu-inner-padding-top: 1.25rem;
9212
9340
  width: 100%;
9213
9341
  padding: var(--atomix-side-menu-padding-y) var(--atomix-side-menu-padding-x);
9214
- 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%);
9215
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9216
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9217
- 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);
9342
+ background-color: var(--atomix-side-menu-bg);
9218
9343
  border-radius: var(--atomix-side-menu-border-radius);
9219
9344
  border: var(--atomix-side-menu-border-width) solid var(--atomix-side-menu-border-color);
9220
9345
  box-shadow: var(--atomix-side-menu-box-shadow);
@@ -9252,10 +9377,7 @@ a, a:hover {
9252
9377
  justify-content: space-between;
9253
9378
  width: 100%;
9254
9379
  padding: var(--atomix-side-menu-toggler-padding-y) var(--atomix-side-menu-toggler-padding-x);
9255
- 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%);
9256
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9257
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9258
- 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);
9380
+ background-color: var(--atomix-side-menu-toggler-bg);
9259
9381
  border: none;
9260
9382
  border-radius: var(--atomix-side-menu-toggler-border-radius);
9261
9383
  cursor: pointer;
@@ -9271,10 +9393,7 @@ a, a:hover {
9271
9393
  }
9272
9394
  }
9273
9395
  .c-side-menu__toggler:hover {
9274
- 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%);
9275
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9276
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9277
- 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);
9396
+ background-color: var(--atomix-side-menu-toggler-hover-bg);
9278
9397
  }
9279
9398
  .c-side-menu__toggler:focus {
9280
9399
  outline: 2px solid var(--atomix-focus-ring-color);
@@ -9312,10 +9431,7 @@ a, a:hover {
9312
9431
  color: var(--atomix-side-menu-item-color);
9313
9432
  font-size: var(--atomix-side-menu-item-font-size);
9314
9433
  font-weight: var(--atomix-side-menu-item-font-weight);
9315
- 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%);
9316
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9317
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9318
- 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);
9434
+ background-color: var(--atomix-side-menu-item-bg);
9319
9435
  border: none;
9320
9436
  border-radius: var(--atomix-side-menu-item-border-radius);
9321
9437
  text-decoration: none;
@@ -9324,10 +9440,7 @@ a, a:hover {
9324
9440
  }
9325
9441
  .c-side-menu__link:hover {
9326
9442
  color: var(--atomix-side-menu-item-hover-color);
9327
- 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%);
9328
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9329
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9330
- 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);
9443
+ background-color: var(--atomix-side-menu-item-hover-bg);
9331
9444
  text-decoration: none;
9332
9445
  }
9333
9446
  .c-side-menu__link:focus {
@@ -9339,18 +9452,12 @@ a, a:hover {
9339
9452
  }
9340
9453
  .c-side-menu__link.is-active {
9341
9454
  color: var(--atomix-side-menu-item-active-color);
9342
- 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%);
9343
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9344
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9345
- 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);
9455
+ background-color: var(--atomix-side-menu-item-active-bg);
9346
9456
  font-weight: 500;
9347
9457
  }
9348
9458
  .c-side-menu__link.is-disabled, .c-side-menu__link[aria-disabled=true] {
9349
9459
  color: var(--atomix-side-menu-item-disabled-color);
9350
- 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%);
9351
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9352
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9353
- 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);
9460
+ background-color: var(--atomix-side-menu-item-disabled-bg);
9354
9461
  cursor: not-allowed;
9355
9462
  pointer-events: none;
9356
9463
  opacity: 0.6;
@@ -9362,6 +9469,10 @@ a, a:hover {
9362
9469
  .c-side-menu__link-text {
9363
9470
  flex: 1 1;
9364
9471
  }
9472
+ .c-side-menu--glass {
9473
+ background-color: transparent;
9474
+ border-bottom: none;
9475
+ }
9365
9476
  .c-side-menu.is-open .c-side-menu__toggler-icon {
9366
9477
  transform: rotate(90deg);
9367
9478
  }
@@ -9394,10 +9505,7 @@ a, a:hover {
9394
9505
  display: inline-block;
9395
9506
  width: var(--atomix-skeleton-width);
9396
9507
  min-height: var(--atomix-skeleton-height);
9397
- 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%);
9398
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9399
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9400
- 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);
9508
+ 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%);
9401
9509
  background-size: 400% 100%;
9402
9510
  border-radius: var(--atomix-skeleton-border-radius);
9403
9511
  animation-name: atomix--skeleton-loading;
@@ -9493,10 +9601,7 @@ a, a:hover {
9493
9601
  display: flex;
9494
9602
  align-items: center;
9495
9603
  justify-content: center;
9496
- 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%);
9497
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9498
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9499
- 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);
9604
+ background-color: var(--atomix-secondary-bg-subtle);
9500
9605
  border: 2px dashed var(--atomix-primary-border-subtle);
9501
9606
  border-radius: 0.25rem;
9502
9607
  }
@@ -9536,10 +9641,7 @@ a, a:hover {
9536
9641
  height: var(--atomix-slider-nav-size);
9537
9642
  border: none;
9538
9643
  border-radius: 50rem;
9539
- 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%);
9540
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9541
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9542
- 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);
9644
+ background-color: var(--atomix-primary-bg-subtle);
9543
9645
  color: var(--atomix-primary-text);
9544
9646
  cursor: pointer;
9545
9647
  pointer-events: auto;
@@ -9552,10 +9654,7 @@ a, a:hover {
9552
9654
  }
9553
9655
  .c-slider__navigation-prev:hover,
9554
9656
  .c-slider__navigation-next:hover {
9555
- 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%);
9556
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9557
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9558
- 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);
9657
+ background-color: var(--atomix-secondary-bg-subtle);
9559
9658
  transform: translateY(-50%) scale(1.05);
9560
9659
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
9561
9660
  }
@@ -9607,29 +9706,20 @@ a, a:hover {
9607
9706
  height: 0.5rem;
9608
9707
  border-radius: 50rem;
9609
9708
  border: none;
9610
- 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%);
9611
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9612
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9613
- 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);
9709
+ background-color: var(--atomix-tertiary-bg-subtle);
9614
9710
  cursor: pointer;
9615
9711
  pointer-events: auto;
9616
9712
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
9617
9713
  }
9618
9714
  .c-slider__pagination-bullet:hover {
9619
- 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%);
9620
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9621
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9622
- 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);
9715
+ background-color: var(--atomix-secondary-bg-subtle);
9623
9716
  transform: scale(1.2);
9624
9717
  }
9625
9718
  .c-slider__pagination-bullet:active {
9626
9719
  transform: scale(1.1);
9627
9720
  }
9628
9721
  .c-slider__pagination-bullet--active {
9629
- 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%);
9630
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9631
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9632
- 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);
9722
+ background-color: var(--atomix-primary);
9633
9723
  transform: scale(1.2);
9634
9724
  }
9635
9725
  .c-slider__empty-message {
@@ -9786,10 +9876,7 @@ a, a:hover {
9786
9876
  .c-steps__line {
9787
9877
  width: var(--atomix-steps-line-width);
9788
9878
  height: var(--atomix-steps-line-height);
9789
- 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%);
9790
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9791
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9792
- 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);
9879
+ background-color: var(--atomix-steps-item-bg);
9793
9880
  transition: 1s;
9794
9881
  }
9795
9882
  .c-steps__content {
@@ -9805,10 +9892,7 @@ a, a:hover {
9805
9892
  height: var(--atomix-steps-item-number-size);
9806
9893
  color: var(--atomix-steps-item-number-color);
9807
9894
  font-size: var(--atomix-steps-item-number-font-size);
9808
- 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%);
9809
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9810
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9811
- 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);
9895
+ background-color: var(--atomix-steps-item-number-bg);
9812
9896
  border-radius: var(--atomix-steps-item-number-border-radius);
9813
9897
  }
9814
9898
  .c-steps__text {
@@ -9885,10 +9969,7 @@ a, a:hover {
9885
9969
  border-radius: var(--atomix-tabs-nav-btn-border-radius);
9886
9970
  border: var(--atomix-tabs-nav-btn-border-width) solid transparent;
9887
9971
  border-bottom: var(--atomix-tabs-nav-btn-border-width) solid var(--atomix-tabs-nav-btn-border-color);
9888
- 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%);
9889
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9890
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9891
- 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);
9972
+ background-color: var(--atomix-tabs-nav-btn-bg);
9892
9973
  transition-property: all;
9893
9974
  transition-duration: 0.2s;
9894
9975
  transition-timing-function: ease-in-out;
@@ -9899,20 +9980,14 @@ a, a:hover {
9899
9980
  border-color: transparent transparent var(--atomix-tabs-nav-btn-border-active-color) transparent;
9900
9981
  }
9901
9982
  .c-tabs__nav-btn:hover {
9902
- 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%);
9903
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9904
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9905
- 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);
9983
+ background-color: var(--atomix-tabs-nav-btn-bg-hover);
9906
9984
  }
9907
9985
  .c-tabs__nav-btn:disabled, .c-tabs__nav-btn.is-disabled {
9908
9986
  --atomix-tabs-nav-btn-border-active-color: var(
9909
9987
  --atomix-tabs-nav-btn-border-disabled-color
9910
9988
  );
9911
9989
  color: var(--atomix-tabs-nav-btn-border-disabled-color);
9912
- 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%);
9913
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9914
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9915
- 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);
9990
+ background-color: var(--atomix-tabs-nav-btn-bg-disabled);
9916
9991
  pointer-events: none;
9917
9992
  }
9918
9993
  .c-tabs__nav-btn:focus-visible {
@@ -9957,10 +10032,7 @@ a, a:hover {
9957
10032
  width: 100%;
9958
10033
  max-width: var(--atomix-testimonial-width);
9959
10034
  padding: var(--atomix-testimonial-padding-y) var(--atomix-testimonial-padding-x);
9960
- 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%);
9961
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
9962
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
9963
- 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);
10035
+ background-color: var(--atomix-testimonial-bg);
9964
10036
  }
9965
10037
  .c-testimonial__quote {
9966
10038
  color: var(--atomix-testimonial-quote-color);
@@ -10004,10 +10076,7 @@ a, a:hover {
10004
10076
  margin-bottom: 1.5rem;
10005
10077
  border: 1px solid var(--atomix-todo-border-color);
10006
10078
  border-radius: var(--atomix-todo-border-radius);
10007
- 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%);
10008
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
10009
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
10010
- 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);
10079
+ background-color: var(--atomix-todo-bg);
10011
10080
  color: var(--atomix-todo-color);
10012
10081
  padding: 1.25rem;
10013
10082
  }
@@ -10049,10 +10118,7 @@ a, a:hover {
10049
10118
  transition: background-color 0.2s ease;
10050
10119
  }
10051
10120
  .c-todo__item:hover {
10052
- 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%);
10053
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
10054
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
10055
- 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);
10121
+ background-color: var(--atomix-todo-item-hover-bg);
10056
10122
  }
10057
10123
  .c-todo__item--completed .c-todo__item-text {
10058
10124
  color: var(--atomix-todo-completed-color);
@@ -10140,10 +10206,7 @@ a, a:hover {
10140
10206
  flex: 0 0 var(--atomix-toggle-switch-width);
10141
10207
  width: var(--atomix-toggle-switch-width);
10142
10208
  height: var(--atomix-toggle-switch-height);
10143
- 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%);
10144
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
10145
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
10146
- 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);
10209
+ background-color: var(--atomix-toggle-switch-bg);
10147
10210
  border-radius: var(--atomix-toggle-switch-border-radius);
10148
10211
  -webkit-user-select: none;
10149
10212
  -moz-user-select: none;
@@ -10160,10 +10223,7 @@ a, a:hover {
10160
10223
  width: var(--atomix-toggle-switch-handle-width);
10161
10224
  height: var(--atomix-toggle-switch-handle-height);
10162
10225
  margin: var(--atomix-toggle-switch-handle-margin);
10163
- 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%);
10164
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
10165
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
10166
- 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);
10226
+ background-color: var(--atomix-toggle-switch-handle-bg);
10167
10227
  border-radius: var(--atomix-toggle-switch-handle-border-radius);
10168
10228
  transition-property: all;
10169
10229
  transition-duration: 0.2s;
@@ -10184,10 +10244,7 @@ a, a:hover {
10184
10244
  pointer-events: none;
10185
10245
  }
10186
10246
  .c-toggle.is-disabled:not(.is-on) .c-toggle__switch {
10187
- 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%);
10188
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
10189
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
10190
- 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);
10247
+ background-color: var(--atomix-toggle-switch-disabled-bg);
10191
10248
  }
10192
10249
  .c-toggle.is-disabled.is-on {
10193
10250
  pointer-events: none;
@@ -10196,10 +10253,7 @@ a, a:hover {
10196
10253
  content: "";
10197
10254
  position: absolute;
10198
10255
  inset: 0;
10199
- 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%);
10200
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
10201
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
10202
- 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);
10256
+ background-color: rgba(107, 114, 128, 0.6);
10203
10257
  border-radius: var(--atomix-toggle-switch-handle-border-radius);
10204
10258
  }
10205
10259
  .c-tooltip {
@@ -10233,10 +10287,7 @@ a, a:hover {
10233
10287
  font-size: var(--atomix-tooltip-font-size);
10234
10288
  font-weight: var(--atomix-tooltip-font-weight);
10235
10289
  padding: var(--atomix-tooltip-padding-y) var(--atomix-tooltip-padding-x);
10236
- 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%);
10237
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
10238
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
10239
- 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);
10290
+ background-color: var(--atomix-tooltip-bg);
10240
10291
  border-radius: var(--atomix-tooltip-border-radius);
10241
10292
  z-index: 2;
10242
10293
  opacity: 0;
@@ -10254,10 +10305,7 @@ a, a:hover {
10254
10305
  transform: translateX(-50%) rotate(45deg);
10255
10306
  width: var(--atomix-tooltip-arrow-size);
10256
10307
  height: var(--atomix-tooltip-arrow-size);
10257
- 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%);
10258
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
10259
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
10260
- 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);
10308
+ background-color: var(--atomix-tooltip-bg);
10261
10309
  z-index: 1;
10262
10310
  }
10263
10311
  .c-tooltip--top-left {
@@ -10370,10 +10418,7 @@ a, a:hover {
10370
10418
  width: 100%;
10371
10419
  max-width: var(--atomix-upload-width);
10372
10420
  padding: var(--atomix-upload-padding-y) var(--atomix-upload-padding-x);
10373
- 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%);
10374
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
10375
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
10376
- 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);
10421
+ background-color: var(--atomix-upload-bg);
10377
10422
  border-radius: var(--atomix-upload-border-radius);
10378
10423
  transition-property: all;
10379
10424
  transition-duration: 0.2s;
@@ -10381,10 +10426,7 @@ a, a:hover {
10381
10426
  transition-delay: 0s;
10382
10427
  }
10383
10428
  .c-upload:hover {
10384
- 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%);
10385
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
10386
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
10387
- 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);
10429
+ background-color: var(--atomix-upload-hover-bg);
10388
10430
  }
10389
10431
  .c-upload__inner {
10390
10432
  display: flex;
@@ -10397,10 +10439,7 @@ a, a:hover {
10397
10439
  .c-upload__icon {
10398
10440
  font-size: var(--atomix-upload-icon-size);
10399
10441
  padding: var(--atomix-upload-icon-padding);
10400
- 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%);
10401
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
10402
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
10403
- 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);
10442
+ background-color: var(--atomix-upload-icon-bg);
10404
10443
  border-radius: 50rem;
10405
10444
  }
10406
10445
  .c-upload__title {
@@ -10538,37 +10577,34 @@ a, a:hover {
10538
10577
  pointer-events: none;
10539
10578
  }
10540
10579
  .c-video-player {
10541
- --atomix-video-player-bg: #000;
10542
- --atomix-video-player-border-radius: 8px;
10543
- --atomix-video-player-controls-padding: 20px 16px 16px;
10544
- --atomix-video-player-progress-height: 4px;
10545
- --atomix-video-player-button-size: 40px;
10546
- --atomix-video-player-font-size: 14px;
10547
- --atomix-video-player-transition: all 0.3s ease;
10548
- --atomix-video-player-volume-width: 80px;
10549
- --atomix-video-player-volume-width-mobile: 60px;
10550
- --atomix-video-player-volume-height: 4px;
10551
- --atomix-video-player-volume-height-hover: 6px;
10552
- --atomix-video-player-volume-thumb-size: 12px;
10553
- --atomix-video-player-volume-bg: rgba(255, 255, 255, 0.3);
10554
- --atomix-video-player-volume-bg-hover: rgba(255, 255, 255, 0.5);
10555
- --atomix-video-player-volume-fill: var(--atomix-color-primary);
10556
- --atomix-video-player-volume-fill-hover: var(--atomix-color-primary-light);
10557
- --atomix-video-player-volume-fill-active: var(--atomix-color-primary-dark);
10558
- --atomix-video-player-subtitle-bg: rgba(0, 0, 0, 0.85);
10559
- --atomix-video-player-subtitle-color: #ffffff;
10560
- --atomix-video-player-subtitle-font-size: 18px;
10561
- --atomix-video-player-subtitle-font-weight: 500;
10562
- --atomix-video-player-subtitle-line-height: 1.5;
10563
- --atomix-video-player-subtitle-border-radius: 6px;
10564
- --atomix-video-player-subtitle-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
10565
- --atomix-video-player-subtitle-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
10580
+ --atomix--video-player-bg: #000;
10581
+ --atomix--video-player-border-radius: 8px;
10582
+ --atomix--video-player-controls-padding: 20px 16px 16px;
10583
+ --atomix--video-player-progress-height: 4px;
10584
+ --atomix--video-player-button-size: 40px;
10585
+ --atomix--video-player-font-size: 14px;
10586
+ --atomix--video-player-transition: all 0.3s ease;
10587
+ --atomix--video-player-volume-width: 80px;
10588
+ --atomix--video-player-volume-width-mobile: 60px;
10589
+ --atomix--video-player-volume-height: 4px;
10590
+ --atomix--video-player-volume-height-hover: 6px;
10591
+ --atomix--video-player-volume-thumb-size: 12px;
10592
+ --atomix--video-player-volume-bg: rgba(255, 255, 255, 0.3);
10593
+ --atomix--video-player-volume-bg-hover: rgba(255, 255, 255, 0.5);
10594
+ --atomix--video-player-volume-fill: var(--atomix-color-primary);
10595
+ --atomix--video-player-volume-fill-hover: var(--atomix-color-primary-light);
10596
+ --atomix--video-player-volume-fill-active: var(--atomix-color-primary-dark);
10597
+ --atomix--video-player-subtitle-bg: rgba(0, 0, 0, 0.85);
10598
+ --atomix--video-player-subtitle-color: #ffffff;
10599
+ --atomix--video-player-subtitle-font-size: 18px;
10600
+ --atomix--video-player-subtitle-font-weight: 500;
10601
+ --atomix--video-player-subtitle-line-height: 1.5;
10602
+ --atomix--video-player-subtitle-border-radius: 6px;
10603
+ --atomix--video-player-subtitle-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
10604
+ --atomix--video-player-subtitle-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
10566
10605
  position: relative;
10567
10606
  width: 100%;
10568
- 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%);
10569
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
10570
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
10571
- 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);
10607
+ background-color: var(--atomix--video-player-bg, #000);
10572
10608
  border-radius: var(--atomix--video-player-border-radius, 0.5rem);
10573
10609
  overflow: hidden;
10574
10610
  font-family: var(--atomix--font-family-base);
@@ -10638,10 +10674,7 @@ a, a:hover {
10638
10674
  bottom: 0;
10639
10675
  left: 0;
10640
10676
  right: 0;
10641
- 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%);
10642
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
10643
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
10644
- 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);
10677
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
10645
10678
  padding: 1.25rem 1rem 1rem;
10646
10679
  opacity: 0;
10647
10680
  visibility: hidden;
@@ -10825,10 +10858,7 @@ a, a:hover {
10825
10858
  bottom: 3.125rem;
10826
10859
  right: 0;
10827
10860
  min-width: 12.5rem;
10828
- 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%);
10829
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
10830
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
10831
- 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);
10861
+ background-color: rgba(var(--atomix-primary-rgb), 0.7);
10832
10862
  border-radius: 0.5rem;
10833
10863
  padding: 0.5rem;
10834
10864
  -webkit-backdrop-filter: blur(10px);
@@ -11024,6 +11054,24 @@ a, a:hover {
11024
11054
  .c-video-player--ambient .c-video-player__ambient-canvas {
11025
11055
  display: block;
11026
11056
  }
11057
+ .c-video-player--glass {
11058
+ position: relative;
11059
+ }
11060
+ .c-video-player__glass-overlay {
11061
+ overflow: hidden;
11062
+ position: absolute;
11063
+ top: 0;
11064
+ left: 0;
11065
+ border-radius: var(--atomix--video-player-border-radius, 0.5rem);
11066
+ }
11067
+ .c-video-player__glass-content {
11068
+ position: absolute;
11069
+ top: 0;
11070
+ left: 0;
11071
+ right: 0;
11072
+ bottom: 0;
11073
+ pointer-events: auto;
11074
+ }
11027
11075
  .c-video-player__subtitles {
11028
11076
  position: absolute;
11029
11077
  bottom: 5rem;
@@ -11078,10 +11126,7 @@ a, a:hover {
11078
11126
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
11079
11127
  }
11080
11128
  .c-photo-viewer__container {
11081
- 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%);
11082
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
11083
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
11084
- 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);
11129
+ background-color: var(--atomix-body-bg);
11085
11130
  border: 1px solid var(--atomix-primary-border-subtle);
11086
11131
  border-radius: 0.625rem;
11087
11132
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
@@ -11135,10 +11180,7 @@ a, a:hover {
11135
11180
  border: 2px solid transparent;
11136
11181
  border-radius: 0.5rem;
11137
11182
  padding: 0;
11138
- 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%);
11139
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
11140
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
11141
- 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);
11183
+ background-color: transparent;
11142
11184
  cursor: pointer;
11143
11185
  overflow: hidden;
11144
11186
  position: relative;
@@ -11196,10 +11238,7 @@ body.is-open-photoviewer {
11196
11238
  width: 100vw;
11197
11239
  height: 100vh;
11198
11240
  z-index: 1000;
11199
- 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%);
11200
- backdrop-filter: blur(10px) saturate(1.5) contrast(1.2) brightness(1.1);
11201
- -webkit-backdrop-filter: blur(10px) saturate(1.2) contrast(1.2) brightness(1.1);
11202
- 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);
11241
+ background-color: transparent;
11203
11242
  opacity: 1;
11204
11243
  transition-property: opacity;
11205
11244
  }
@@ -11850,6 +11889,35 @@ body.is-open-photoviewer {
11850
11889
  display: block !important;
11851
11890
  clear: both !important;
11852
11891
  }
11892
+ .u-glass-clean-root {
11893
+ isolation: initial !important;
11894
+ contain: none !important;
11895
+ transform-style: flat !important;
11896
+ will-change: auto !important;
11897
+ transform: none !important;
11898
+ z-index: auto;
11899
+ z-index: initial;
11900
+ }
11901
+ .u-glass-debug {
11902
+ outline: 2px dashed red !important;
11903
+ }
11904
+ .u-glass-debug::after {
11905
+ content: "Glass Debug";
11906
+ position: absolute;
11907
+ top: -20px;
11908
+ left: 0;
11909
+ background: red;
11910
+ color: white;
11911
+ font-size: 10px;
11912
+ padding: 2px 4px;
11913
+ z-index: 9999;
11914
+ }
11915
+ @media (prefers-reduced-motion: reduce) {
11916
+ .u-glass-no-motion {
11917
+ transition: none !important;
11918
+ animation: none !important;
11919
+ }
11920
+ }
11853
11921
  .u-link-primary {
11854
11922
  color: RGBA(var(--atomix-primary-rgb), var(--atomix-u-link-opacity, 1)) !important;
11855
11923
  text-decoration-color: RGBA(var(--atomix-primary-rgb), var(--atomix-u-link-underline-opacity, 1)) !important;
@@ -12100,19 +12168,19 @@ body.is-open-photoviewer {
12100
12168
  border-width: 5px;
12101
12169
  }
12102
12170
  .u-border-opacity-10 {
12103
- : 0.1;
12171
+ --atomix-u-u-border-opacity-10: 0.1;
12104
12172
  }
12105
12173
  .u-border-opacity-25 {
12106
- : 0.25;
12174
+ --atomix-u-u-border-opacity-25: 0.25;
12107
12175
  }
12108
12176
  .u-border-opacity-50 {
12109
- : 0.5;
12177
+ --atomix-u-u-border-opacity-50: 0.5;
12110
12178
  }
12111
12179
  .u-border-opacity-75 {
12112
- : 0.75;
12180
+ --atomix-u-u-border-opacity-75: 0.75;
12113
12181
  }
12114
12182
  .u-border-opacity-100 {
12115
- : 1;
12183
+ --atomix-u-u-border-opacity-100: 1;
12116
12184
  }
12117
12185
  .u-rounded {
12118
12186
  border-radius: var(--atomix-border-radius);
@@ -12448,27 +12516,27 @@ body.is-open-photoviewer {
12448
12516
  order: 6;
12449
12517
  }
12450
12518
  .u-link-opacityhover-10 {
12451
- : 0.1;
12519
+ --atomix-u-u-link-opacity-10: 0.1;
12452
12520
  }
12453
- .u-link-opacityhoverhover-25 {
12454
- : 0.25;
12521
+ .u-link-opacityhover-25 {
12522
+ --atomix-u-u-link-opacity-25: 0.25;
12455
12523
  }
12456
- .u-link-opacityhoverhoverhover-50 {
12457
- : 0.5;
12524
+ .u-link-opacityhover-50 {
12525
+ --atomix-u-u-link-opacity-50: 0.5;
12458
12526
  }
12459
- .u-link-opacityhoverhoverhoverhover-75 {
12460
- : 0.75;
12527
+ .u-link-opacityhover-75 {
12528
+ --atomix-u-u-link-opacity-75: 0.75;
12461
12529
  }
12462
- .u-link-opacityhoverhoverhoverhoverhover-100 {
12463
- : 1;
12530
+ .u-link-opacityhover-100 {
12531
+ --atomix-u-u-link-opacity-100: 1;
12464
12532
  }
12465
12533
  .u-link-offsethover-1 {
12466
12534
  text-underline-offset: 0.125em;
12467
12535
  }
12468
- .u-link-offsethoverhover-2 {
12536
+ .u-link-offsethover-2 {
12469
12537
  text-underline-offset: 0.25em;
12470
12538
  }
12471
- .u-link-offsethoverhoverhover-3 {
12539
+ .u-link-offsethover-3 {
12472
12540
  text-underline-offset: 0.375em;
12473
12541
  }
12474
12542
  .u-link-underline-primary {
@@ -12505,22 +12573,22 @@ body.is-open-photoviewer {
12505
12573
  text-decoration-color: rgba(var(--atomix-link-color-rgb), var(--atomix-u-link-underline-opacity, 1));
12506
12574
  }
12507
12575
  .u-link-underline-opacityhover-0 {
12508
- : 0;
12576
+ --atomix-u-u-link-underline-opacity-0: 0;
12509
12577
  }
12510
- .u-link-underline-opacityhoverhover-10 {
12511
- : 0.1;
12578
+ .u-link-underline-opacityhover-10 {
12579
+ --atomix-u-u-link-underline-opacity-10: 0.1;
12512
12580
  }
12513
- .u-link-underline-opacityhoverhoverhover-25 {
12514
- : 0.25;
12581
+ .u-link-underline-opacityhover-25 {
12582
+ --atomix-u-u-link-underline-opacity-25: 0.25;
12515
12583
  }
12516
- .u-link-underline-opacityhoverhoverhoverhover-50 {
12517
- : 0.5;
12584
+ .u-link-underline-opacityhover-50 {
12585
+ --atomix-u-u-link-underline-opacity-50: 0.5;
12518
12586
  }
12519
- .u-link-underline-opacityhoverhoverhoverhoverhover-75 {
12520
- : 0.75;
12587
+ .u-link-underline-opacityhover-75 {
12588
+ --atomix-u-u-link-underline-opacity-75: 0.75;
12521
12589
  }
12522
- .u-link-underline-opacityhoverhoverhoverhoverhoverhover-100 {
12523
- : 1;
12590
+ .u-link-underline-opacityhover-100 {
12591
+ --atomix-u-u-link-underline-opacity-100: 1;
12524
12592
  }
12525
12593
  .u-object-fit-contain {
12526
12594
  -o-object-fit: contain;
@@ -12764,19 +12832,19 @@ body.is-open-photoviewer {
12764
12832
  .u-m-1 {
12765
12833
  margin: 0.25rem;
12766
12834
  }
12767
- .u-m-2 {
12835
+ .u-m-1\.5 {
12768
12836
  margin: 0.375rem;
12769
12837
  }
12770
12838
  .u-m-2 {
12771
12839
  margin: 0.5rem;
12772
12840
  }
12773
- .u-m-3 {
12841
+ .u-m-2\.5 {
12774
12842
  margin: 0.625rem;
12775
12843
  }
12776
12844
  .u-m-3 {
12777
12845
  margin: 0.75rem;
12778
12846
  }
12779
- .u-m-4 {
12847
+ .u-m-3\.5 {
12780
12848
  margin: 0.875rem;
12781
12849
  }
12782
12850
  .u-m-4 {
@@ -12785,7 +12853,7 @@ body.is-open-photoviewer {
12785
12853
  .u-m-5 {
12786
12854
  margin: 1.25rem;
12787
12855
  }
12788
- .u-m-6 {
12856
+ .u-m-5\.5 {
12789
12857
  margin: 1.375rem;
12790
12858
  }
12791
12859
  .u-m-6 {
@@ -12794,7 +12862,7 @@ body.is-open-photoviewer {
12794
12862
  .u-m-7 {
12795
12863
  margin: 1.75rem;
12796
12864
  }
12797
- .u-m-8 {
12865
+ .u-m-7\.5 {
12798
12866
  margin: 1.875rem;
12799
12867
  }
12800
12868
  .u-m-8 {
@@ -12877,7 +12945,7 @@ body.is-open-photoviewer {
12877
12945
  margin-right: 0.25rem;
12878
12946
  margin-left: 0.25rem;
12879
12947
  }
12880
- .u-mx-2 {
12948
+ .u-mx-1\.5 {
12881
12949
  margin-right: 0.375rem;
12882
12950
  margin-left: 0.375rem;
12883
12951
  }
@@ -12885,7 +12953,7 @@ body.is-open-photoviewer {
12885
12953
  margin-right: 0.5rem;
12886
12954
  margin-left: 0.5rem;
12887
12955
  }
12888
- .u-mx-3 {
12956
+ .u-mx-2\.5 {
12889
12957
  margin-right: 0.625rem;
12890
12958
  margin-left: 0.625rem;
12891
12959
  }
@@ -12893,7 +12961,7 @@ body.is-open-photoviewer {
12893
12961
  margin-right: 0.75rem;
12894
12962
  margin-left: 0.75rem;
12895
12963
  }
12896
- .u-mx-4 {
12964
+ .u-mx-3\.5 {
12897
12965
  margin-right: 0.875rem;
12898
12966
  margin-left: 0.875rem;
12899
12967
  }
@@ -12905,7 +12973,7 @@ body.is-open-photoviewer {
12905
12973
  margin-right: 1.25rem;
12906
12974
  margin-left: 1.25rem;
12907
12975
  }
12908
- .u-mx-6 {
12976
+ .u-mx-5\.5 {
12909
12977
  margin-right: 1.375rem;
12910
12978
  margin-left: 1.375rem;
12911
12979
  }
@@ -12917,7 +12985,7 @@ body.is-open-photoviewer {
12917
12985
  margin-right: 1.75rem;
12918
12986
  margin-left: 1.75rem;
12919
12987
  }
12920
- .u-mx-8 {
12988
+ .u-mx-7\.5 {
12921
12989
  margin-right: 1.875rem;
12922
12990
  margin-left: 1.875rem;
12923
12991
  }
@@ -13025,7 +13093,7 @@ body.is-open-photoviewer {
13025
13093
  margin-top: 0.25rem;
13026
13094
  margin-bottom: 0.25rem;
13027
13095
  }
13028
- .u-my-2 {
13096
+ .u-my-1\.5 {
13029
13097
  margin-top: 0.375rem;
13030
13098
  margin-bottom: 0.375rem;
13031
13099
  }
@@ -13033,7 +13101,7 @@ body.is-open-photoviewer {
13033
13101
  margin-top: 0.5rem;
13034
13102
  margin-bottom: 0.5rem;
13035
13103
  }
13036
- .u-my-3 {
13104
+ .u-my-2\.5 {
13037
13105
  margin-top: 0.625rem;
13038
13106
  margin-bottom: 0.625rem;
13039
13107
  }
@@ -13041,7 +13109,7 @@ body.is-open-photoviewer {
13041
13109
  margin-top: 0.75rem;
13042
13110
  margin-bottom: 0.75rem;
13043
13111
  }
13044
- .u-my-4 {
13112
+ .u-my-3\.5 {
13045
13113
  margin-top: 0.875rem;
13046
13114
  margin-bottom: 0.875rem;
13047
13115
  }
@@ -13053,7 +13121,7 @@ body.is-open-photoviewer {
13053
13121
  margin-top: 1.25rem;
13054
13122
  margin-bottom: 1.25rem;
13055
13123
  }
13056
- .u-my-6 {
13124
+ .u-my-5\.5 {
13057
13125
  margin-top: 1.375rem;
13058
13126
  margin-bottom: 1.375rem;
13059
13127
  }
@@ -13065,7 +13133,7 @@ body.is-open-photoviewer {
13065
13133
  margin-top: 1.75rem;
13066
13134
  margin-bottom: 1.75rem;
13067
13135
  }
13068
- .u-my-8 {
13136
+ .u-my-7\.5 {
13069
13137
  margin-top: 1.875rem;
13070
13138
  margin-bottom: 1.875rem;
13071
13139
  }
@@ -13171,19 +13239,19 @@ body.is-open-photoviewer {
13171
13239
  .u-mt-1 {
13172
13240
  margin-top: 0.25rem;
13173
13241
  }
13174
- .u-mt-2 {
13242
+ .u-mt-1\.5 {
13175
13243
  margin-top: 0.375rem;
13176
13244
  }
13177
13245
  .u-mt-2 {
13178
13246
  margin-top: 0.5rem;
13179
13247
  }
13180
- .u-mt-3 {
13248
+ .u-mt-2\.5 {
13181
13249
  margin-top: 0.625rem;
13182
13250
  }
13183
13251
  .u-mt-3 {
13184
13252
  margin-top: 0.75rem;
13185
13253
  }
13186
- .u-mt-4 {
13254
+ .u-mt-3\.5 {
13187
13255
  margin-top: 0.875rem;
13188
13256
  }
13189
13257
  .u-mt-4 {
@@ -13192,7 +13260,7 @@ body.is-open-photoviewer {
13192
13260
  .u-mt-5 {
13193
13261
  margin-top: 1.25rem;
13194
13262
  }
13195
- .u-mt-6 {
13263
+ .u-mt-5\.5 {
13196
13264
  margin-top: 1.375rem;
13197
13265
  }
13198
13266
  .u-mt-6 {
@@ -13201,7 +13269,7 @@ body.is-open-photoviewer {
13201
13269
  .u-mt-7 {
13202
13270
  margin-top: 1.75rem;
13203
13271
  }
13204
- .u-mt-8 {
13272
+ .u-mt-7\.5 {
13205
13273
  margin-top: 1.875rem;
13206
13274
  }
13207
13275
  .u-mt-8 {
@@ -13282,19 +13350,19 @@ body.is-open-photoviewer {
13282
13350
  .u-me-1 {
13283
13351
  margin-right: 0.25rem;
13284
13352
  }
13285
- .u-me-2 {
13353
+ .u-me-1\.5 {
13286
13354
  margin-right: 0.375rem;
13287
13355
  }
13288
13356
  .u-me-2 {
13289
13357
  margin-right: 0.5rem;
13290
13358
  }
13291
- .u-me-3 {
13359
+ .u-me-2\.5 {
13292
13360
  margin-right: 0.625rem;
13293
13361
  }
13294
13362
  .u-me-3 {
13295
13363
  margin-right: 0.75rem;
13296
13364
  }
13297
- .u-me-4 {
13365
+ .u-me-3\.5 {
13298
13366
  margin-right: 0.875rem;
13299
13367
  }
13300
13368
  .u-me-4 {
@@ -13303,7 +13371,7 @@ body.is-open-photoviewer {
13303
13371
  .u-me-5 {
13304
13372
  margin-right: 1.25rem;
13305
13373
  }
13306
- .u-me-6 {
13374
+ .u-me-5\.5 {
13307
13375
  margin-right: 1.375rem;
13308
13376
  }
13309
13377
  .u-me-6 {
@@ -13312,7 +13380,7 @@ body.is-open-photoviewer {
13312
13380
  .u-me-7 {
13313
13381
  margin-right: 1.75rem;
13314
13382
  }
13315
- .u-me-8 {
13383
+ .u-me-7\.5 {
13316
13384
  margin-right: 1.875rem;
13317
13385
  }
13318
13386
  .u-me-8 {
@@ -13393,19 +13461,19 @@ body.is-open-photoviewer {
13393
13461
  .u-mb-1 {
13394
13462
  margin-bottom: 0.25rem;
13395
13463
  }
13396
- .u-mb-2 {
13464
+ .u-mb-1\.5 {
13397
13465
  margin-bottom: 0.375rem;
13398
13466
  }
13399
13467
  .u-mb-2 {
13400
13468
  margin-bottom: 0.5rem;
13401
13469
  }
13402
- .u-mb-3 {
13470
+ .u-mb-2\.5 {
13403
13471
  margin-bottom: 0.625rem;
13404
13472
  }
13405
13473
  .u-mb-3 {
13406
13474
  margin-bottom: 0.75rem;
13407
13475
  }
13408
- .u-mb-4 {
13476
+ .u-mb-3\.5 {
13409
13477
  margin-bottom: 0.875rem;
13410
13478
  }
13411
13479
  .u-mb-4 {
@@ -13414,7 +13482,7 @@ body.is-open-photoviewer {
13414
13482
  .u-mb-5 {
13415
13483
  margin-bottom: 1.25rem;
13416
13484
  }
13417
- .u-mb-6 {
13485
+ .u-mb-5\.5 {
13418
13486
  margin-bottom: 1.375rem;
13419
13487
  }
13420
13488
  .u-mb-6 {
@@ -13423,7 +13491,7 @@ body.is-open-photoviewer {
13423
13491
  .u-mb-7 {
13424
13492
  margin-bottom: 1.75rem;
13425
13493
  }
13426
- .u-mb-8 {
13494
+ .u-mb-7\.5 {
13427
13495
  margin-bottom: 1.875rem;
13428
13496
  }
13429
13497
  .u-mb-8 {
@@ -13504,19 +13572,19 @@ body.is-open-photoviewer {
13504
13572
  .u-ms-1 {
13505
13573
  margin-left: 0.25rem;
13506
13574
  }
13507
- .u-ms-2 {
13575
+ .u-ms-1\.5 {
13508
13576
  margin-left: 0.375rem;
13509
13577
  }
13510
13578
  .u-ms-2 {
13511
13579
  margin-left: 0.5rem;
13512
13580
  }
13513
- .u-ms-3 {
13581
+ .u-ms-2\.5 {
13514
13582
  margin-left: 0.625rem;
13515
13583
  }
13516
13584
  .u-ms-3 {
13517
13585
  margin-left: 0.75rem;
13518
13586
  }
13519
- .u-ms-4 {
13587
+ .u-ms-3\.5 {
13520
13588
  margin-left: 0.875rem;
13521
13589
  }
13522
13590
  .u-ms-4 {
@@ -13525,7 +13593,7 @@ body.is-open-photoviewer {
13525
13593
  .u-ms-5 {
13526
13594
  margin-left: 1.25rem;
13527
13595
  }
13528
- .u-ms-6 {
13596
+ .u-ms-5\.5 {
13529
13597
  margin-left: 1.375rem;
13530
13598
  }
13531
13599
  .u-ms-6 {
@@ -13534,7 +13602,7 @@ body.is-open-photoviewer {
13534
13602
  .u-ms-7 {
13535
13603
  margin-left: 1.75rem;
13536
13604
  }
13537
- .u-ms-8 {
13605
+ .u-ms-7\.5 {
13538
13606
  margin-left: 1.875rem;
13539
13607
  }
13540
13608
  .u-ms-8 {
@@ -13615,19 +13683,19 @@ body.is-open-photoviewer {
13615
13683
  .u-p-1 {
13616
13684
  padding: 0.25rem;
13617
13685
  }
13618
- .u-p-2 {
13686
+ .u-p-1\.5 {
13619
13687
  padding: 0.375rem;
13620
13688
  }
13621
13689
  .u-p-2 {
13622
13690
  padding: 0.5rem;
13623
13691
  }
13624
- .u-p-3 {
13692
+ .u-p-2\.5 {
13625
13693
  padding: 0.625rem;
13626
13694
  }
13627
13695
  .u-p-3 {
13628
13696
  padding: 0.75rem;
13629
13697
  }
13630
- .u-p-4 {
13698
+ .u-p-3\.5 {
13631
13699
  padding: 0.875rem;
13632
13700
  }
13633
13701
  .u-p-4 {
@@ -13636,7 +13704,7 @@ body.is-open-photoviewer {
13636
13704
  .u-p-5 {
13637
13705
  padding: 1.25rem;
13638
13706
  }
13639
- .u-p-6 {
13707
+ .u-p-5\.5 {
13640
13708
  padding: 1.375rem;
13641
13709
  }
13642
13710
  .u-p-6 {
@@ -13645,7 +13713,7 @@ body.is-open-photoviewer {
13645
13713
  .u-p-7 {
13646
13714
  padding: 1.75rem;
13647
13715
  }
13648
- .u-p-8 {
13716
+ .u-p-7\.5 {
13649
13717
  padding: 1.875rem;
13650
13718
  }
13651
13719
  .u-p-8 {
@@ -13725,7 +13793,7 @@ body.is-open-photoviewer {
13725
13793
  padding-right: 0.25rem;
13726
13794
  padding-left: 0.25rem;
13727
13795
  }
13728
- .u-px-2 {
13796
+ .u-px-1\.5 {
13729
13797
  padding-right: 0.375rem;
13730
13798
  padding-left: 0.375rem;
13731
13799
  }
@@ -13733,7 +13801,7 @@ body.is-open-photoviewer {
13733
13801
  padding-right: 0.5rem;
13734
13802
  padding-left: 0.5rem;
13735
13803
  }
13736
- .u-px-3 {
13804
+ .u-px-2\.5 {
13737
13805
  padding-right: 0.625rem;
13738
13806
  padding-left: 0.625rem;
13739
13807
  }
@@ -13741,7 +13809,7 @@ body.is-open-photoviewer {
13741
13809
  padding-right: 0.75rem;
13742
13810
  padding-left: 0.75rem;
13743
13811
  }
13744
- .u-px-4 {
13812
+ .u-px-3\.5 {
13745
13813
  padding-right: 0.875rem;
13746
13814
  padding-left: 0.875rem;
13747
13815
  }
@@ -13753,7 +13821,7 @@ body.is-open-photoviewer {
13753
13821
  padding-right: 1.25rem;
13754
13822
  padding-left: 1.25rem;
13755
13823
  }
13756
- .u-px-6 {
13824
+ .u-px-5\.5 {
13757
13825
  padding-right: 1.375rem;
13758
13826
  padding-left: 1.375rem;
13759
13827
  }
@@ -13765,7 +13833,7 @@ body.is-open-photoviewer {
13765
13833
  padding-right: 1.75rem;
13766
13834
  padding-left: 1.75rem;
13767
13835
  }
13768
- .u-px-8 {
13836
+ .u-px-7\.5 {
13769
13837
  padding-right: 1.875rem;
13770
13838
  padding-left: 1.875rem;
13771
13839
  }
@@ -13869,7 +13937,7 @@ body.is-open-photoviewer {
13869
13937
  padding-top: 0.25rem;
13870
13938
  padding-bottom: 0.25rem;
13871
13939
  }
13872
- .u-py-2 {
13940
+ .u-py-1\.5 {
13873
13941
  padding-top: 0.375rem;
13874
13942
  padding-bottom: 0.375rem;
13875
13943
  }
@@ -13877,7 +13945,7 @@ body.is-open-photoviewer {
13877
13945
  padding-top: 0.5rem;
13878
13946
  padding-bottom: 0.5rem;
13879
13947
  }
13880
- .u-py-3 {
13948
+ .u-py-2\.5 {
13881
13949
  padding-top: 0.625rem;
13882
13950
  padding-bottom: 0.625rem;
13883
13951
  }
@@ -13885,7 +13953,7 @@ body.is-open-photoviewer {
13885
13953
  padding-top: 0.75rem;
13886
13954
  padding-bottom: 0.75rem;
13887
13955
  }
13888
- .u-py-4 {
13956
+ .u-py-3\.5 {
13889
13957
  padding-top: 0.875rem;
13890
13958
  padding-bottom: 0.875rem;
13891
13959
  }
@@ -13897,7 +13965,7 @@ body.is-open-photoviewer {
13897
13965
  padding-top: 1.25rem;
13898
13966
  padding-bottom: 1.25rem;
13899
13967
  }
13900
- .u-py-6 {
13968
+ .u-py-5\.5 {
13901
13969
  padding-top: 1.375rem;
13902
13970
  padding-bottom: 1.375rem;
13903
13971
  }
@@ -13909,7 +13977,7 @@ body.is-open-photoviewer {
13909
13977
  padding-top: 1.75rem;
13910
13978
  padding-bottom: 1.75rem;
13911
13979
  }
13912
- .u-py-8 {
13980
+ .u-py-7\.5 {
13913
13981
  padding-top: 1.875rem;
13914
13982
  padding-bottom: 1.875rem;
13915
13983
  }
@@ -14011,19 +14079,19 @@ body.is-open-photoviewer {
14011
14079
  .u-pt-1 {
14012
14080
  padding-top: 0.25rem;
14013
14081
  }
14014
- .u-pt-2 {
14082
+ .u-pt-1\.5 {
14015
14083
  padding-top: 0.375rem;
14016
14084
  }
14017
14085
  .u-pt-2 {
14018
14086
  padding-top: 0.5rem;
14019
14087
  }
14020
- .u-pt-3 {
14088
+ .u-pt-2\.5 {
14021
14089
  padding-top: 0.625rem;
14022
14090
  }
14023
14091
  .u-pt-3 {
14024
14092
  padding-top: 0.75rem;
14025
14093
  }
14026
- .u-pt-4 {
14094
+ .u-pt-3\.5 {
14027
14095
  padding-top: 0.875rem;
14028
14096
  }
14029
14097
  .u-pt-4 {
@@ -14032,7 +14100,7 @@ body.is-open-photoviewer {
14032
14100
  .u-pt-5 {
14033
14101
  padding-top: 1.25rem;
14034
14102
  }
14035
- .u-pt-6 {
14103
+ .u-pt-5\.5 {
14036
14104
  padding-top: 1.375rem;
14037
14105
  }
14038
14106
  .u-pt-6 {
@@ -14041,7 +14109,7 @@ body.is-open-photoviewer {
14041
14109
  .u-pt-7 {
14042
14110
  padding-top: 1.75rem;
14043
14111
  }
14044
- .u-pt-8 {
14112
+ .u-pt-7\.5 {
14045
14113
  padding-top: 1.875rem;
14046
14114
  }
14047
14115
  .u-pt-8 {
@@ -14119,19 +14187,19 @@ body.is-open-photoviewer {
14119
14187
  .u-pe-1 {
14120
14188
  padding-right: 0.25rem;
14121
14189
  }
14122
- .u-pe-2 {
14190
+ .u-pe-1\.5 {
14123
14191
  padding-right: 0.375rem;
14124
14192
  }
14125
14193
  .u-pe-2 {
14126
14194
  padding-right: 0.5rem;
14127
14195
  }
14128
- .u-pe-3 {
14196
+ .u-pe-2\.5 {
14129
14197
  padding-right: 0.625rem;
14130
14198
  }
14131
14199
  .u-pe-3 {
14132
14200
  padding-right: 0.75rem;
14133
14201
  }
14134
- .u-pe-4 {
14202
+ .u-pe-3\.5 {
14135
14203
  padding-right: 0.875rem;
14136
14204
  }
14137
14205
  .u-pe-4 {
@@ -14140,7 +14208,7 @@ body.is-open-photoviewer {
14140
14208
  .u-pe-5 {
14141
14209
  padding-right: 1.25rem;
14142
14210
  }
14143
- .u-pe-6 {
14211
+ .u-pe-5\.5 {
14144
14212
  padding-right: 1.375rem;
14145
14213
  }
14146
14214
  .u-pe-6 {
@@ -14149,7 +14217,7 @@ body.is-open-photoviewer {
14149
14217
  .u-pe-7 {
14150
14218
  padding-right: 1.75rem;
14151
14219
  }
14152
- .u-pe-8 {
14220
+ .u-pe-7\.5 {
14153
14221
  padding-right: 1.875rem;
14154
14222
  }
14155
14223
  .u-pe-8 {
@@ -14227,19 +14295,19 @@ body.is-open-photoviewer {
14227
14295
  .u-pb-1 {
14228
14296
  padding-bottom: 0.25rem;
14229
14297
  }
14230
- .u-pb-2 {
14298
+ .u-pb-1\.5 {
14231
14299
  padding-bottom: 0.375rem;
14232
14300
  }
14233
14301
  .u-pb-2 {
14234
14302
  padding-bottom: 0.5rem;
14235
14303
  }
14236
- .u-pb-3 {
14304
+ .u-pb-2\.5 {
14237
14305
  padding-bottom: 0.625rem;
14238
14306
  }
14239
14307
  .u-pb-3 {
14240
14308
  padding-bottom: 0.75rem;
14241
14309
  }
14242
- .u-pb-4 {
14310
+ .u-pb-3\.5 {
14243
14311
  padding-bottom: 0.875rem;
14244
14312
  }
14245
14313
  .u-pb-4 {
@@ -14248,7 +14316,7 @@ body.is-open-photoviewer {
14248
14316
  .u-pb-5 {
14249
14317
  padding-bottom: 1.25rem;
14250
14318
  }
14251
- .u-pb-6 {
14319
+ .u-pb-5\.5 {
14252
14320
  padding-bottom: 1.375rem;
14253
14321
  }
14254
14322
  .u-pb-6 {
@@ -14257,7 +14325,7 @@ body.is-open-photoviewer {
14257
14325
  .u-pb-7 {
14258
14326
  padding-bottom: 1.75rem;
14259
14327
  }
14260
- .u-pb-8 {
14328
+ .u-pb-7\.5 {
14261
14329
  padding-bottom: 1.875rem;
14262
14330
  }
14263
14331
  .u-pb-8 {
@@ -14335,19 +14403,19 @@ body.is-open-photoviewer {
14335
14403
  .u-ps-1 {
14336
14404
  padding-left: 0.25rem;
14337
14405
  }
14338
- .u-ps-2 {
14406
+ .u-ps-1\.5 {
14339
14407
  padding-left: 0.375rem;
14340
14408
  }
14341
14409
  .u-ps-2 {
14342
14410
  padding-left: 0.5rem;
14343
14411
  }
14344
- .u-ps-3 {
14412
+ .u-ps-2\.5 {
14345
14413
  padding-left: 0.625rem;
14346
14414
  }
14347
14415
  .u-ps-3 {
14348
14416
  padding-left: 0.75rem;
14349
14417
  }
14350
- .u-ps-4 {
14418
+ .u-ps-3\.5 {
14351
14419
  padding-left: 0.875rem;
14352
14420
  }
14353
14421
  .u-ps-4 {
@@ -14356,7 +14424,7 @@ body.is-open-photoviewer {
14356
14424
  .u-ps-5 {
14357
14425
  padding-left: 1.25rem;
14358
14426
  }
14359
- .u-ps-6 {
14427
+ .u-ps-5\.5 {
14360
14428
  padding-left: 1.375rem;
14361
14429
  }
14362
14430
  .u-ps-6 {
@@ -14365,7 +14433,7 @@ body.is-open-photoviewer {
14365
14433
  .u-ps-7 {
14366
14434
  padding-left: 1.75rem;
14367
14435
  }
14368
- .u-ps-8 {
14436
+ .u-ps-7\.5 {
14369
14437
  padding-left: 1.875rem;
14370
14438
  }
14371
14439
  .u-ps-8 {
@@ -14443,19 +14511,19 @@ body.is-open-photoviewer {
14443
14511
  .u-gap-1 {
14444
14512
  gap: 0.25rem;
14445
14513
  }
14446
- .u-gap-2 {
14514
+ .u-gap-1\.5 {
14447
14515
  gap: 0.375rem;
14448
14516
  }
14449
14517
  .u-gap-2 {
14450
14518
  gap: 0.5rem;
14451
14519
  }
14452
- .u-gap-3 {
14520
+ .u-gap-2\.5 {
14453
14521
  gap: 0.625rem;
14454
14522
  }
14455
14523
  .u-gap-3 {
14456
14524
  gap: 0.75rem;
14457
14525
  }
14458
- .u-gap-4 {
14526
+ .u-gap-3\.5 {
14459
14527
  gap: 0.875rem;
14460
14528
  }
14461
14529
  .u-gap-4 {
@@ -14464,7 +14532,7 @@ body.is-open-photoviewer {
14464
14532
  .u-gap-5 {
14465
14533
  gap: 1.25rem;
14466
14534
  }
14467
- .u-gap-6 {
14535
+ .u-gap-5\.5 {
14468
14536
  gap: 1.375rem;
14469
14537
  }
14470
14538
  .u-gap-6 {
@@ -14473,7 +14541,7 @@ body.is-open-photoviewer {
14473
14541
  .u-gap-7 {
14474
14542
  gap: 1.75rem;
14475
14543
  }
14476
- .u-gap-8 {
14544
+ .u-gap-7\.5 {
14477
14545
  gap: 1.875rem;
14478
14546
  }
14479
14547
  .u-gap-8 {
@@ -14551,19 +14619,19 @@ body.is-open-photoviewer {
14551
14619
  .u-row-gap-1 {
14552
14620
  row-gap: 0.25rem;
14553
14621
  }
14554
- .u-row-gap-2 {
14622
+ .u-row-gap-1\.5 {
14555
14623
  row-gap: 0.375rem;
14556
14624
  }
14557
14625
  .u-row-gap-2 {
14558
14626
  row-gap: 0.5rem;
14559
14627
  }
14560
- .u-row-gap-3 {
14628
+ .u-row-gap-2\.5 {
14561
14629
  row-gap: 0.625rem;
14562
14630
  }
14563
14631
  .u-row-gap-3 {
14564
14632
  row-gap: 0.75rem;
14565
14633
  }
14566
- .u-row-gap-4 {
14634
+ .u-row-gap-3\.5 {
14567
14635
  row-gap: 0.875rem;
14568
14636
  }
14569
14637
  .u-row-gap-4 {
@@ -14572,7 +14640,7 @@ body.is-open-photoviewer {
14572
14640
  .u-row-gap-5 {
14573
14641
  row-gap: 1.25rem;
14574
14642
  }
14575
- .u-row-gap-6 {
14643
+ .u-row-gap-5\.5 {
14576
14644
  row-gap: 1.375rem;
14577
14645
  }
14578
14646
  .u-row-gap-6 {
@@ -14581,7 +14649,7 @@ body.is-open-photoviewer {
14581
14649
  .u-row-gap-7 {
14582
14650
  row-gap: 1.75rem;
14583
14651
  }
14584
- .u-row-gap-8 {
14652
+ .u-row-gap-7\.5 {
14585
14653
  row-gap: 1.875rem;
14586
14654
  }
14587
14655
  .u-row-gap-8 {
@@ -14661,7 +14729,7 @@ body.is-open-photoviewer {
14661
14729
  -moz-column-gap: 0.25rem;
14662
14730
  column-gap: 0.25rem;
14663
14731
  }
14664
- .u-column-gap-2 {
14732
+ .u-column-gap-1\.5 {
14665
14733
  -moz-column-gap: 0.375rem;
14666
14734
  column-gap: 0.375rem;
14667
14735
  }
@@ -14669,7 +14737,7 @@ body.is-open-photoviewer {
14669
14737
  -moz-column-gap: 0.5rem;
14670
14738
  column-gap: 0.5rem;
14671
14739
  }
14672
- .u-column-gap-3 {
14740
+ .u-column-gap-2\.5 {
14673
14741
  -moz-column-gap: 0.625rem;
14674
14742
  column-gap: 0.625rem;
14675
14743
  }
@@ -14677,7 +14745,7 @@ body.is-open-photoviewer {
14677
14745
  -moz-column-gap: 0.75rem;
14678
14746
  column-gap: 0.75rem;
14679
14747
  }
14680
- .u-column-gap-4 {
14748
+ .u-column-gap-3\.5 {
14681
14749
  -moz-column-gap: 0.875rem;
14682
14750
  column-gap: 0.875rem;
14683
14751
  }
@@ -14689,7 +14757,7 @@ body.is-open-photoviewer {
14689
14757
  -moz-column-gap: 1.25rem;
14690
14758
  column-gap: 1.25rem;
14691
14759
  }
14692
- .u-column-gap-6 {
14760
+ .u-column-gap-5\.5 {
14693
14761
  -moz-column-gap: 1.375rem;
14694
14762
  column-gap: 1.375rem;
14695
14763
  }
@@ -14701,7 +14769,7 @@ body.is-open-photoviewer {
14701
14769
  -moz-column-gap: 1.75rem;
14702
14770
  column-gap: 1.75rem;
14703
14771
  }
14704
- .u-column-gap-8 {
14772
+ .u-column-gap-7\.5 {
14705
14773
  -moz-column-gap: 1.875rem;
14706
14774
  column-gap: 1.875rem;
14707
14775
  }