@shohojdhara/atomix 0.5.7 → 0.5.9
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.
- package/dist/atomix.css +152 -2508
- package/dist/atomix.css.map +1 -1
- package/dist/atomix.min.css +5 -5
- package/dist/atomix.min.css.map +1 -1
- package/dist/atomix.umd.js +2 -0
- package/dist/atomix.umd.js.map +1 -0
- package/dist/atomix.umd.min.js +1 -0
- package/dist/index.esm.js +20 -7
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +20 -7
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/theme.js +7 -3
- package/dist/theme.js.map +1 -1
- package/package.json +3 -3
- package/src/lib/config/loader.ts +27 -6
- package/src/lib/theme/config/configLoader.ts +7 -2
- package/src/lib/theme/config/loader.ts +7 -6
- package/src/styles/02-tools/_tools.background.scss +38 -136
- package/src/styles/05-objects/_objects.masonry-grid.scss +0 -5
package/dist/atomix.css
CHANGED
|
@@ -737,19 +737,6 @@ img {
|
|
|
737
737
|
.docs-story {
|
|
738
738
|
background: var(--atomix-body-bg) !important;
|
|
739
739
|
}
|
|
740
|
-
/* Background utility simplification
|
|
741
|
-
* - Consolidates duplicated glass, mesh, shadow, border, and noise patterns into private helpers.
|
|
742
|
-
* - Replaces magic values with local token aliases backed by existing background settings.
|
|
743
|
-
* - Flattens variant and interaction branching, keeps public mixin signatures intact, and removes old backdrop prefixes.
|
|
744
|
-
*/
|
|
745
|
-
@keyframes shimmer {
|
|
746
|
-
from {
|
|
747
|
-
transform: translateX(-100%);
|
|
748
|
-
}
|
|
749
|
-
to {
|
|
750
|
-
transform: translateX(200%);
|
|
751
|
-
}
|
|
752
|
-
}
|
|
753
740
|
body {
|
|
754
741
|
-webkit-font-smoothing: antialiased;
|
|
755
742
|
-moz-osx-font-smoothing: grayscale;
|
|
@@ -1536,13 +1523,6 @@ a, a:hover {
|
|
|
1536
1523
|
opacity: var(--masonry-img-opacity);
|
|
1537
1524
|
animation: masonry-item-fade-in-advanced var(--atomix-transition-duration-base) var(--atomix-transition-timing-base) forwards;
|
|
1538
1525
|
}
|
|
1539
|
-
@property --masonry-img-opacity {
|
|
1540
|
-
.o-masonry-grid__item-loaded img {
|
|
1541
|
-
syntax: "<number>";
|
|
1542
|
-
inherits: false;
|
|
1543
|
-
initial-value: 0;
|
|
1544
|
-
}
|
|
1545
|
-
}
|
|
1546
1526
|
}
|
|
1547
1527
|
.o-masonry-grid--loading-images {
|
|
1548
1528
|
position: relative;
|
|
@@ -1771,22 +1751,7 @@ a, a:hover {
|
|
|
1771
1751
|
transition-duration: 0.2s;
|
|
1772
1752
|
transition-timing-function: ease-in-out;
|
|
1773
1753
|
transition-delay: 0s;
|
|
1774
|
-
|
|
1775
|
-
isolation: isolate;
|
|
1776
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-accordion-header-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-header-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-header-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-header-bg) 26%, transparent) 0%, transparent 60%);
|
|
1777
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
1778
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
1779
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-accordion-header-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
1780
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1781
|
-
}
|
|
1782
|
-
@media (hover: hover) {
|
|
1783
|
-
.c-accordion__header:hover {
|
|
1784
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-accordion-header-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-header-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-header-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-header-bg) 40%, transparent) 0%, transparent 60%);
|
|
1785
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-accordion-header-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
1786
|
-
}
|
|
1787
|
-
}
|
|
1788
|
-
.c-accordion__header:active {
|
|
1789
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-accordion-header-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-accordion-header-bg) 81%, transparent) 100%);
|
|
1754
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 65%, transparent);
|
|
1790
1755
|
}
|
|
1791
1756
|
.c-accordion__header--icon-left {
|
|
1792
1757
|
flex-direction: row-reverse;
|
|
@@ -1827,22 +1792,7 @@ a, a:hover {
|
|
|
1827
1792
|
color: var(--atomix-accordion-body-color);
|
|
1828
1793
|
padding: var(--atomix-accordion-body-padding-y) var(--atomix-accordion-body-padding-x);
|
|
1829
1794
|
border-radius: 0 0 var(--atomix-accordion-border-radius) var(--atomix-accordion-border-radius);
|
|
1830
|
-
|
|
1831
|
-
isolation: isolate;
|
|
1832
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-accordion-body-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-body-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-body-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-body-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-body-bg) 26%, transparent) 0%, transparent 60%);
|
|
1833
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
1834
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
1835
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-accordion-body-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-accordion-body-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-body-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
1836
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1837
|
-
}
|
|
1838
|
-
@media (hover: hover) {
|
|
1839
|
-
.c-accordion__body:hover {
|
|
1840
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-accordion-body-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-body-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-body-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-body-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-body-bg) 40%, transparent) 0%, transparent 60%);
|
|
1841
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-accordion-body-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-body-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-accordion-body-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
1842
|
-
}
|
|
1843
|
-
}
|
|
1844
|
-
.c-accordion__body:active {
|
|
1845
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-accordion-body-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-body-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-accordion-body-bg) 81%, transparent) 100%);
|
|
1795
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-body-bg) 65%, transparent);
|
|
1846
1796
|
}
|
|
1847
1797
|
.c-accordion:focus, .c-accordion.is-focused {
|
|
1848
1798
|
--atomix-accordion-border-color: var(--atomix-focus-border-color);
|
|
@@ -1867,40 +1817,10 @@ a, a:hover {
|
|
|
1867
1817
|
border-color: transparent;
|
|
1868
1818
|
}
|
|
1869
1819
|
.c-accordion--glass .c-accordion__header {
|
|
1870
|
-
|
|
1871
|
-
isolation: isolate;
|
|
1872
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-accordion-header-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-header-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-header-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-header-bg) 26%, transparent) 0%, transparent 60%);
|
|
1873
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
1874
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
1875
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-accordion-header-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
1876
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1877
|
-
}
|
|
1878
|
-
@media (hover: hover) {
|
|
1879
|
-
.c-accordion--glass .c-accordion__header:hover {
|
|
1880
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-accordion-header-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-header-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-header-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-header-bg) 40%, transparent) 0%, transparent 60%);
|
|
1881
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-accordion-header-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
1882
|
-
}
|
|
1883
|
-
}
|
|
1884
|
-
.c-accordion--glass .c-accordion__header:active {
|
|
1885
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-accordion-header-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-accordion-header-bg) 81%, transparent) 100%);
|
|
1820
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 65%, transparent);
|
|
1886
1821
|
}
|
|
1887
1822
|
.c-accordion--glass .c-accordion__body {
|
|
1888
|
-
|
|
1889
|
-
isolation: isolate;
|
|
1890
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-accordion-header-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-header-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-header-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-header-bg) 26%, transparent) 0%, transparent 60%);
|
|
1891
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
1892
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
1893
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-accordion-header-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
1894
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1895
|
-
}
|
|
1896
|
-
@media (hover: hover) {
|
|
1897
|
-
.c-accordion--glass .c-accordion__body:hover {
|
|
1898
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-accordion-header-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-accordion-header-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-accordion-header-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-accordion-header-bg) 40%, transparent) 0%, transparent 60%);
|
|
1899
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-accordion-header-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-accordion-header-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
1900
|
-
}
|
|
1901
|
-
}
|
|
1902
|
-
.c-accordion--glass .c-accordion__body:active {
|
|
1903
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-accordion-header-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-accordion-header-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-accordion-header-bg) 81%, transparent) 100%);
|
|
1823
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 65%, transparent);
|
|
1904
1824
|
}
|
|
1905
1825
|
@media (prefers-reduced-motion: reduce) {
|
|
1906
1826
|
.c-accordion {
|
|
@@ -1943,22 +1863,7 @@ a, a:hover {
|
|
|
1943
1863
|
transition-duration: 0.2s;
|
|
1944
1864
|
transition-timing-function: ease-in-out;
|
|
1945
1865
|
transition-delay: 0s;
|
|
1946
|
-
|
|
1947
|
-
isolation: isolate;
|
|
1948
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-avatar-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-avatar-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-avatar-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-avatar-bg) 26%, transparent) 0%, transparent 60%);
|
|
1949
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
1950
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
1951
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-avatar-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-avatar-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-avatar-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
1952
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1953
|
-
}
|
|
1954
|
-
@media (hover: hover) {
|
|
1955
|
-
.c-avatar:hover {
|
|
1956
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-avatar-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-avatar-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-avatar-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-avatar-bg) 40%, transparent) 0%, transparent 60%);
|
|
1957
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-avatar-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-avatar-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-avatar-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
1958
|
-
}
|
|
1959
|
-
}
|
|
1960
|
-
.c-avatar:active {
|
|
1961
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-avatar-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-avatar-bg) 81%, transparent) 100%);
|
|
1866
|
+
background-color: color-mix(in srgb, var(--atomix-avatar-bg) 65%, transparent);
|
|
1962
1867
|
}
|
|
1963
1868
|
.c-avatar--xs {
|
|
1964
1869
|
--atomix-avatar-size: 1.5rem;
|
|
@@ -2054,22 +1959,7 @@ a, a:hover {
|
|
|
2054
1959
|
width: var(--atomix-avatar-size);
|
|
2055
1960
|
height: var(--atomix-avatar-size);
|
|
2056
1961
|
border-radius: var(--atomix-avatar-border-radius);
|
|
2057
|
-
|
|
2058
|
-
isolation: isolate;
|
|
2059
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 26%, transparent) 0%, transparent 60%);
|
|
2060
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
2061
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
2062
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-avatar-group-more-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-avatar-group-more-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-avatar-group-more-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
2063
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2064
|
-
}
|
|
2065
|
-
@media (hover: hover) {
|
|
2066
|
-
.c-avatar-group__more:hover {
|
|
2067
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 40%, transparent) 0%, transparent 60%);
|
|
2068
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-avatar-group-more-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-avatar-group-more-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-avatar-group-more-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
2069
|
-
}
|
|
2070
|
-
}
|
|
2071
|
-
.c-avatar-group__more:active {
|
|
2072
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-avatar-group-more-bg) 81%, transparent) 100%);
|
|
1962
|
+
background-color: color-mix(in srgb, var(--atomix-avatar-group-more-bg) 65%, transparent);
|
|
2073
1963
|
}
|
|
2074
1964
|
.c-avatar-group--stacked {
|
|
2075
1965
|
gap: 0;
|
|
@@ -2392,22 +2282,7 @@ a, a:hover {
|
|
|
2392
2282
|
-webkit-user-select: none;
|
|
2393
2283
|
-moz-user-select: none;
|
|
2394
2284
|
user-select: none;
|
|
2395
|
-
|
|
2396
|
-
isolation: isolate;
|
|
2397
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tag-bg-color) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tag-bg-color) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tag-bg-color) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tag-bg-color) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tag-bg-color) 26%, transparent) 0%, transparent 60%);
|
|
2398
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
2399
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
2400
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
2401
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2402
|
-
}
|
|
2403
|
-
@media (hover: hover) {
|
|
2404
|
-
.c-badge:hover {
|
|
2405
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tag-bg-color) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tag-bg-color) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tag-bg-color) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tag-bg-color) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tag-bg-color) 40%, transparent) 0%, transparent 60%);
|
|
2406
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tag-bg-color) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
2407
|
-
}
|
|
2408
|
-
}
|
|
2409
|
-
.c-badge:active {
|
|
2410
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tag-bg-color) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tag-bg-color) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tag-bg-color) 81%, transparent) 100%);
|
|
2285
|
+
background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 65%, transparent);
|
|
2411
2286
|
}
|
|
2412
2287
|
.c-badge__icon {
|
|
2413
2288
|
font-size: var(--atomix-tag-icon-size);
|
|
@@ -2422,22 +2297,7 @@ a, a:hover {
|
|
|
2422
2297
|
}
|
|
2423
2298
|
.c-badge--glass {
|
|
2424
2299
|
border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 50%, transparent);
|
|
2425
|
-
|
|
2426
|
-
isolation: isolate;
|
|
2427
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tag-bg-color) 33%, transparent) 0%, color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent) 40%, color-mix(in srgb, var(--atomix-tag-bg-color) 10%, transparent) 70%, color-mix(in srgb, var(--atomix-tag-bg-color) 23%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tag-bg-color) 8%, transparent) 0%, transparent 60%);
|
|
2428
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
2429
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
2430
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
2431
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2432
|
-
}
|
|
2433
|
-
@media (hover: hover) {
|
|
2434
|
-
.c-badge--glass:hover {
|
|
2435
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tag-bg-color) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tag-bg-color) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tag-bg-color) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tag-bg-color) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tag-bg-color) 40%, transparent) 0%, transparent 60%);
|
|
2436
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tag-bg-color) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tag-bg-color) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
2437
|
-
}
|
|
2438
|
-
}
|
|
2439
|
-
.c-badge--glass:active {
|
|
2440
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tag-bg-color) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tag-bg-color) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tag-bg-color) 81%, transparent) 100%);
|
|
2300
|
+
background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent);
|
|
2441
2301
|
}
|
|
2442
2302
|
.c-badge--primary {
|
|
2443
2303
|
--atomix-tag-bg-color: var(--atomix-brand-bg-subtle);
|
|
@@ -2493,22 +2353,7 @@ a, a:hover {
|
|
|
2493
2353
|
list-style: none;
|
|
2494
2354
|
padding-left: 0px;
|
|
2495
2355
|
margin-bottom: var(--atomix-breadcrumb-margin-bottom);
|
|
2496
|
-
|
|
2497
|
-
isolation: isolate;
|
|
2498
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-breadcrumb-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 26%, transparent) 0%, transparent 60%);
|
|
2499
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
2500
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
2501
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-breadcrumb-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-breadcrumb-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-breadcrumb-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
2502
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2503
|
-
}
|
|
2504
|
-
@media (hover: hover) {
|
|
2505
|
-
.c-breadcrumb:hover {
|
|
2506
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-breadcrumb-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 40%, transparent) 0%, transparent 60%);
|
|
2507
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-breadcrumb-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-breadcrumb-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-breadcrumb-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
2508
|
-
}
|
|
2509
|
-
}
|
|
2510
|
-
.c-breadcrumb:active {
|
|
2511
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-breadcrumb-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-breadcrumb-bg) 81%, transparent) 100%);
|
|
2356
|
+
background-color: color-mix(in srgb, var(--atomix-breadcrumb-bg) 65%, transparent);
|
|
2512
2357
|
}
|
|
2513
2358
|
.c-breadcrumb__item {
|
|
2514
2359
|
display: flex;
|
|
@@ -2610,22 +2455,7 @@ a, a:hover {
|
|
|
2610
2455
|
border: var(--atomix-btn-border-width) solid var(--atomix-btn-border-color);
|
|
2611
2456
|
border-radius: var(--atomix-btn-border-radius);
|
|
2612
2457
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease-in-out;
|
|
2613
|
-
|
|
2614
|
-
isolation: isolate;
|
|
2615
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-bg) 26%, transparent) 0%, transparent 60%);
|
|
2616
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
2617
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
2618
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-btn-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-btn-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
2619
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2620
|
-
}
|
|
2621
|
-
@media (hover: hover) {
|
|
2622
|
-
.c-btn:hover {
|
|
2623
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-bg) 40%, transparent) 0%, transparent 60%);
|
|
2624
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-btn-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-btn-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
2625
|
-
}
|
|
2626
|
-
}
|
|
2627
|
-
.c-btn:active {
|
|
2628
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-btn-bg) 81%, transparent) 100%);
|
|
2458
|
+
background-color: color-mix(in srgb, var(--atomix-btn-bg) 65%, transparent);
|
|
2629
2459
|
}
|
|
2630
2460
|
.c-btn__icon {
|
|
2631
2461
|
font-size: var(--atomix-btn-icon-size);
|
|
@@ -2633,22 +2463,7 @@ a, a:hover {
|
|
|
2633
2463
|
.c-btn:hover {
|
|
2634
2464
|
color: var(--atomix-btn-hover-color);
|
|
2635
2465
|
border-color: var(--atomix-btn-hover-border-color);
|
|
2636
|
-
|
|
2637
|
-
isolation: isolate;
|
|
2638
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
2639
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
2640
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
2641
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-btn-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
2642
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2643
|
-
}
|
|
2644
|
-
@media (hover: hover) {
|
|
2645
|
-
.c-btn:hover:hover {
|
|
2646
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
2647
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-btn-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
2648
|
-
}
|
|
2649
|
-
}
|
|
2650
|
-
.c-btn:hover:active {
|
|
2651
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-btn-hover-bg) 81%, transparent) 100%);
|
|
2466
|
+
background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 65%, transparent);
|
|
2652
2467
|
}
|
|
2653
2468
|
.c-btn--primary {
|
|
2654
2469
|
--atomix-btn-color: var(--atomix-white, #ffffff);
|
|
@@ -3082,61 +2897,16 @@ a, a:hover {
|
|
|
3082
2897
|
border-color: var(--atomix-btn-disabled-border-color);
|
|
3083
2898
|
opacity: var(--atomix-btn-disabled-opacity);
|
|
3084
2899
|
cursor: not-allowed;
|
|
3085
|
-
|
|
3086
|
-
isolation: isolate;
|
|
3087
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-disabled-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 26%, transparent) 0%, transparent 60%);
|
|
3088
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3089
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
3090
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-btn-disabled-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-btn-disabled-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-disabled-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
3091
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3092
|
-
}
|
|
3093
|
-
@media (hover: hover) {
|
|
3094
|
-
.c-btn:disabled:hover, .c-btn--disabled:hover, fieldset:disabled .c-btn:hover {
|
|
3095
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-disabled-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 40%, transparent) 0%, transparent 60%);
|
|
3096
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-btn-disabled-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-disabled-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-btn-disabled-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
3097
|
-
}
|
|
3098
|
-
}
|
|
3099
|
-
.c-btn:disabled:active, .c-btn--disabled:active, fieldset:disabled .c-btn:active {
|
|
3100
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-disabled-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-btn-disabled-bg) 81%, transparent) 100%);
|
|
2900
|
+
background-color: color-mix(in srgb, var(--atomix-btn-disabled-bg) 65%, transparent);
|
|
3101
2901
|
}
|
|
3102
2902
|
.c-btn:disabled:focus-visible, .c-btn--disabled:focus-visible, fieldset:disabled .c-btn:focus-visible {
|
|
3103
2903
|
outline: none;
|
|
3104
2904
|
}
|
|
3105
2905
|
.c-btn--glass {
|
|
3106
|
-
|
|
3107
|
-
isolation: isolate;
|
|
3108
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-bg) 26%, transparent) 0%, transparent 60%);
|
|
3109
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3110
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
3111
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-btn-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-btn-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
3112
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3113
|
-
}
|
|
3114
|
-
@media (hover: hover) {
|
|
3115
|
-
.c-btn--glass:hover {
|
|
3116
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-bg) 40%, transparent) 0%, transparent 60%);
|
|
3117
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-btn-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-btn-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
3118
|
-
}
|
|
3119
|
-
}
|
|
3120
|
-
.c-btn--glass:active {
|
|
3121
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-btn-bg) 81%, transparent) 100%);
|
|
2906
|
+
background-color: color-mix(in srgb, var(--atomix-btn-bg) 65%, transparent);
|
|
3122
2907
|
}
|
|
3123
2908
|
.c-btn--glass:hover {
|
|
3124
|
-
|
|
3125
|
-
isolation: isolate;
|
|
3126
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
3127
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3128
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
3129
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-btn-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
3130
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3131
|
-
}
|
|
3132
|
-
@media (hover: hover) {
|
|
3133
|
-
.c-btn--glass:hover:hover {
|
|
3134
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-btn-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-btn-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-btn-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
3135
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-btn-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-btn-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
3136
|
-
}
|
|
3137
|
-
}
|
|
3138
|
-
.c-btn--glass:hover:active {
|
|
3139
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-btn-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-btn-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-btn-hover-bg) 81%, transparent) 100%);
|
|
2909
|
+
background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 65%, transparent);
|
|
3140
2910
|
}
|
|
3141
2911
|
@media (prefers-reduced-motion: reduce) {
|
|
3142
2912
|
.c-btn {
|
|
@@ -3235,26 +3005,7 @@ a, a:hover {
|
|
|
3235
3005
|
border-radius: var(--atomix-datepicker-border-radius);
|
|
3236
3006
|
box-shadow: var(--atomix-datepicker-box-shadow);
|
|
3237
3007
|
margin-top: 0.25rem;
|
|
3238
|
-
|
|
3239
|
-
isolation: isolate;
|
|
3240
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-datepicker-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-datepicker-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-datepicker-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-datepicker-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-datepicker-bg) 26%, transparent) 0%, transparent 60%);
|
|
3241
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3242
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
3243
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3244
|
-
}
|
|
3245
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
3246
|
-
.c-datepicker__calendar {
|
|
3247
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-datepicker-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-datepicker-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-datepicker-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
3248
|
-
}
|
|
3249
|
-
}
|
|
3250
|
-
@media (hover: hover) {
|
|
3251
|
-
.c-datepicker__calendar:hover {
|
|
3252
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-datepicker-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-datepicker-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-datepicker-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-datepicker-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-datepicker-bg) 40%, transparent) 0%, transparent 60%);
|
|
3253
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-datepicker-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-datepicker-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-datepicker-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
3254
|
-
}
|
|
3255
|
-
}
|
|
3256
|
-
.c-datepicker__calendar:active {
|
|
3257
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-datepicker-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-datepicker-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-datepicker-bg) 81%, transparent) 100%);
|
|
3008
|
+
background-color: color-mix(in srgb, var(--atomix-datepicker-bg) 65%, transparent);
|
|
3258
3009
|
}
|
|
3259
3010
|
.c-datepicker__calendar--top-start, .c-datepicker__calendar--top-end {
|
|
3260
3011
|
bottom: 100%;
|
|
@@ -3637,22 +3388,7 @@ a, a:hover {
|
|
|
3637
3388
|
transition-duration: 0.2s;
|
|
3638
3389
|
transition-timing-function: ease-in-out;
|
|
3639
3390
|
transition-delay: 0s;
|
|
3640
|
-
|
|
3641
|
-
isolation: isolate;
|
|
3642
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-card-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-card-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-card-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-card-bg) 26%, transparent) 0%, transparent 60%);
|
|
3643
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3644
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
3645
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-card-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-card-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-card-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
3646
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3647
|
-
}
|
|
3648
|
-
@media (hover: hover) {
|
|
3649
|
-
.c-card:hover {
|
|
3650
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-card-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-card-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-card-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-card-bg) 40%, transparent) 0%, transparent 60%);
|
|
3651
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-card-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-card-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-card-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
3652
|
-
}
|
|
3653
|
-
}
|
|
3654
|
-
.c-card:active {
|
|
3655
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-card-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-card-bg) 81%, transparent) 100%);
|
|
3391
|
+
background-color: color-mix(in srgb, var(--atomix-card-bg) 65%, transparent);
|
|
3656
3392
|
}
|
|
3657
3393
|
.c-card[href] {
|
|
3658
3394
|
display: block;
|
|
@@ -3782,41 +3518,11 @@ a, a:hover {
|
|
|
3782
3518
|
--atomix-card-text-font-size: var(--atomix-font-size-base);
|
|
3783
3519
|
}
|
|
3784
3520
|
.c-card--filled {
|
|
3785
|
-
|
|
3786
|
-
isolation: isolate;
|
|
3787
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-card-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-card-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-card-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-card-bg) 26%, transparent) 0%, transparent 60%);
|
|
3788
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3789
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
3790
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-card-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-card-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-card-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
3791
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3792
|
-
}
|
|
3793
|
-
@media (hover: hover) {
|
|
3794
|
-
.c-card--filled:hover {
|
|
3795
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-card-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-card-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-card-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-card-bg) 40%, transparent) 0%, transparent 60%);
|
|
3796
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-card-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-card-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-card-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
3797
|
-
}
|
|
3798
|
-
}
|
|
3799
|
-
.c-card--filled:active {
|
|
3800
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-card-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-card-bg) 81%, transparent) 100%);
|
|
3521
|
+
background-color: color-mix(in srgb, var(--atomix-card-bg) 65%, transparent);
|
|
3801
3522
|
}
|
|
3802
3523
|
.c-card--glass {
|
|
3803
3524
|
max-width: none;
|
|
3804
|
-
|
|
3805
|
-
isolation: isolate;
|
|
3806
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-card-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-card-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-card-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-card-bg) 26%, transparent) 0%, transparent 60%);
|
|
3807
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
3808
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
3809
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-card-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-card-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-card-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
3810
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3811
|
-
}
|
|
3812
|
-
@media (hover: hover) {
|
|
3813
|
-
.c-card--glass:hover {
|
|
3814
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-card-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-card-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-card-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-card-bg) 40%, transparent) 0%, transparent 60%);
|
|
3815
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-card-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-card-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-card-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
3816
|
-
}
|
|
3817
|
-
}
|
|
3818
|
-
.c-card--glass:active {
|
|
3819
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-card-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-card-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-card-bg) 81%, transparent) 100%);
|
|
3525
|
+
background-color: color-mix(in srgb, var(--atomix-card-bg) 65%, transparent);
|
|
3820
3526
|
}
|
|
3821
3527
|
.c-card--outlined {
|
|
3822
3528
|
background-color: transparent;
|
|
@@ -5455,22 +5161,7 @@ a, a:hover {
|
|
|
5455
5161
|
transition-duration: 0.2s;
|
|
5456
5162
|
transition-timing-function: ease-in-out;
|
|
5457
5163
|
transition-delay: 0s;
|
|
5458
|
-
|
|
5459
|
-
isolation: isolate;
|
|
5460
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-checkbox-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-checkbox-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-checkbox-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-checkbox-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-checkbox-bg) 26%, transparent) 0%, transparent 60%);
|
|
5461
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5462
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
5463
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-checkbox-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-checkbox-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-checkbox-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5464
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5465
|
-
}
|
|
5466
|
-
@media (hover: hover) {
|
|
5467
|
-
.c-checkbox__input:hover {
|
|
5468
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-checkbox-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-checkbox-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-checkbox-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-checkbox-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-checkbox-bg) 40%, transparent) 0%, transparent 60%);
|
|
5469
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-checkbox-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-checkbox-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-checkbox-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5470
|
-
}
|
|
5471
|
-
}
|
|
5472
|
-
.c-checkbox__input:active {
|
|
5473
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-checkbox-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-checkbox-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-checkbox-bg) 81%, transparent) 100%);
|
|
5164
|
+
background-color: color-mix(in srgb, var(--atomix-checkbox-bg) 65%, transparent);
|
|
5474
5165
|
}
|
|
5475
5166
|
.c-checkbox__input[type=radio] {
|
|
5476
5167
|
border-radius: 50rem;
|
|
@@ -5555,22 +5246,7 @@ a, a:hover {
|
|
|
5555
5246
|
color: var(--atomix-body-color);
|
|
5556
5247
|
}
|
|
5557
5248
|
.c-color-mode-toggle:hover:not(:disabled) {
|
|
5558
|
-
|
|
5559
|
-
isolation: isolate;
|
|
5560
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(0, 0, 0, 0.05) 78%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent) 40%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 55%, transparent) 70%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 26%, transparent) 0%, transparent 60%);
|
|
5561
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5562
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
5563
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5564
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5565
|
-
}
|
|
5566
|
-
@media (hover: hover) {
|
|
5567
|
-
.c-color-mode-toggle:hover:not(:disabled):hover {
|
|
5568
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(0, 0, 0, 0.05) 96%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 80%, transparent) 40%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 68%, transparent) 70%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 40%, transparent) 0%, transparent 60%);
|
|
5569
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(0, 0, 0, 0.05) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5570
|
-
}
|
|
5571
|
-
}
|
|
5572
|
-
.c-color-mode-toggle:hover:not(:disabled):active {
|
|
5573
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, rgba(0, 0, 0, 0.05) 108%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 90%, transparent) 50%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 81%, transparent) 100%);
|
|
5249
|
+
background-color: color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent);
|
|
5574
5250
|
}
|
|
5575
5251
|
.c-color-mode-toggle:focus-visible {
|
|
5576
5252
|
outline: none;
|
|
@@ -5597,22 +5273,7 @@ a, a:hover {
|
|
|
5597
5273
|
opacity: 0.5;
|
|
5598
5274
|
}
|
|
5599
5275
|
[data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled) {
|
|
5600
|
-
|
|
5601
|
-
isolation: isolate;
|
|
5602
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(255, 255, 255, 0.1) 78%, transparent) 0%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 65%, transparent) 40%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 55%, transparent) 70%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 26%, transparent) 0%, transparent 60%);
|
|
5603
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5604
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
5605
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(255, 255, 255, 0.1) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(255, 255, 255, 0.1) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(255, 255, 255, 0.1) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5606
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5607
|
-
}
|
|
5608
|
-
@media (hover: hover) {
|
|
5609
|
-
[data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled):hover {
|
|
5610
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(255, 255, 255, 0.1) 96%, transparent) 0%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 80%, transparent) 40%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 68%, transparent) 70%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 40%, transparent) 0%, transparent 60%);
|
|
5611
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(255, 255, 255, 0.1) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(255, 255, 255, 0.1) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(255, 255, 255, 0.1) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5612
|
-
}
|
|
5613
|
-
}
|
|
5614
|
-
[data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled):active {
|
|
5615
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, rgba(255, 255, 255, 0.1) 108%, transparent) 0%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 90%, transparent) 50%, color-mix(in srgb, rgba(255, 255, 255, 0.1) 81%, transparent) 100%);
|
|
5276
|
+
background-color: color-mix(in srgb, rgba(255, 255, 255, 0.1) 65%, transparent);
|
|
5616
5277
|
}
|
|
5617
5278
|
@media (prefers-reduced-motion: reduce) {
|
|
5618
5279
|
.c-color-mode-toggle {
|
|
@@ -5661,22 +5322,7 @@ a, a:hover {
|
|
|
5661
5322
|
align-items: center;
|
|
5662
5323
|
padding: var(--atomix-countdown-item-padding-y) var(--atomix-countdown-item-padding-x);
|
|
5663
5324
|
border-radius: var(--atomix-countdown-focused-border-radius);
|
|
5664
|
-
|
|
5665
|
-
isolation: isolate;
|
|
5666
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-countdown-focused-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 26%, transparent) 0%, transparent 60%);
|
|
5667
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5668
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
5669
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-countdown-focused-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-countdown-focused-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-countdown-focused-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5670
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5671
|
-
}
|
|
5672
|
-
@media (hover: hover) {
|
|
5673
|
-
.c-countdown--focused .c-countdown__time:hover {
|
|
5674
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-countdown-focused-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 40%, transparent) 0%, transparent 60%);
|
|
5675
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-countdown-focused-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-countdown-focused-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-countdown-focused-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5676
|
-
}
|
|
5677
|
-
}
|
|
5678
|
-
.c-countdown--focused .c-countdown__time:active {
|
|
5679
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-countdown-focused-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-countdown-focused-bg) 81%, transparent) 100%);
|
|
5325
|
+
background-color: color-mix(in srgb, var(--atomix-countdown-focused-bg) 65%, transparent);
|
|
5680
5326
|
}
|
|
5681
5327
|
.c-countdown--focused .c-countdown__time-label {
|
|
5682
5328
|
font-size: var(--atomix-countdown-focused-label-font-size);
|
|
@@ -5704,40 +5350,10 @@ a, a:hover {
|
|
|
5704
5350
|
margin-bottom: 0;
|
|
5705
5351
|
color: var(--atomix-data-table-color);
|
|
5706
5352
|
border-collapse: collapse;
|
|
5707
|
-
|
|
5708
|
-
isolation: isolate;
|
|
5709
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-bg) 26%, transparent) 0%, transparent 60%);
|
|
5710
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5711
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
5712
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-data-table-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5713
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5714
|
-
}
|
|
5715
|
-
@media (hover: hover) {
|
|
5716
|
-
.c-data-table:hover {
|
|
5717
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-bg) 40%, transparent) 0%, transparent 60%);
|
|
5718
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-data-table-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-data-table-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5719
|
-
}
|
|
5720
|
-
}
|
|
5721
|
-
.c-data-table:active {
|
|
5722
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-data-table-bg) 81%, transparent) 100%);
|
|
5353
|
+
background-color: color-mix(in srgb, var(--atomix-data-table-bg) 65%, transparent);
|
|
5723
5354
|
}
|
|
5724
5355
|
.c-data-table__header {
|
|
5725
|
-
|
|
5726
|
-
isolation: isolate;
|
|
5727
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-header-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-header-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-header-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-header-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-header-bg) 26%, transparent) 0%, transparent 60%);
|
|
5728
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5729
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
5730
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-data-table-header-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5731
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5732
|
-
}
|
|
5733
|
-
@media (hover: hover) {
|
|
5734
|
-
.c-data-table__header:hover {
|
|
5735
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-header-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-header-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-header-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-header-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-header-bg) 40%, transparent) 0%, transparent 60%);
|
|
5736
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-data-table-header-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5737
|
-
}
|
|
5738
|
-
}
|
|
5739
|
-
.c-data-table__header:active {
|
|
5740
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-header-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-header-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-data-table-header-bg) 81%, transparent) 100%);
|
|
5356
|
+
background-color: color-mix(in srgb, var(--atomix-data-table-header-bg) 65%, transparent);
|
|
5741
5357
|
}
|
|
5742
5358
|
.c-data-table__header-cell {
|
|
5743
5359
|
padding: 0.75rem 1rem;
|
|
@@ -5754,22 +5370,7 @@ a, a:hover {
|
|
|
5754
5370
|
user-select: none;
|
|
5755
5371
|
}
|
|
5756
5372
|
.c-data-table__header-cell--sortable:hover {
|
|
5757
|
-
|
|
5758
|
-
isolation: isolate;
|
|
5759
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(0, 0, 0, 0.05) 78%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent) 40%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 55%, transparent) 70%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 26%, transparent) 0%, transparent 60%);
|
|
5760
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5761
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
5762
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5763
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5764
|
-
}
|
|
5765
|
-
@media (hover: hover) {
|
|
5766
|
-
.c-data-table__header-cell--sortable:hover:hover {
|
|
5767
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(0, 0, 0, 0.05) 96%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 80%, transparent) 40%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 68%, transparent) 70%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 40%, transparent) 0%, transparent 60%);
|
|
5768
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(0, 0, 0, 0.05) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5769
|
-
}
|
|
5770
|
-
}
|
|
5771
|
-
.c-data-table__header-cell--sortable:hover:active {
|
|
5772
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, rgba(0, 0, 0, 0.05) 108%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 90%, transparent) 50%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 81%, transparent) 100%);
|
|
5373
|
+
background-color: color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent);
|
|
5773
5374
|
}
|
|
5774
5375
|
.c-data-table__header-content {
|
|
5775
5376
|
display: flex;
|
|
@@ -5837,61 +5438,16 @@ a, a:hover {
|
|
|
5837
5438
|
vertical-align: middle;
|
|
5838
5439
|
}
|
|
5839
5440
|
.c-data-table__row {
|
|
5840
|
-
|
|
5841
|
-
isolation: isolate;
|
|
5842
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-bg) 26%, transparent) 0%, transparent 60%);
|
|
5843
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5844
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
5845
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-data-table-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-data-table-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5846
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5847
|
-
}
|
|
5848
|
-
@media (hover: hover) {
|
|
5849
|
-
.c-data-table__row:hover {
|
|
5850
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-bg) 40%, transparent) 0%, transparent 60%);
|
|
5851
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-data-table-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-data-table-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5852
|
-
}
|
|
5853
|
-
}
|
|
5854
|
-
.c-data-table__row:active {
|
|
5855
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-data-table-bg) 81%, transparent) 100%);
|
|
5441
|
+
background-color: color-mix(in srgb, var(--atomix-data-table-bg) 65%, transparent);
|
|
5856
5442
|
}
|
|
5857
5443
|
.c-data-table__row:hover {
|
|
5858
|
-
|
|
5859
|
-
isolation: isolate;
|
|
5860
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
5861
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5862
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
5863
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-data-table-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-data-table-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5864
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5865
|
-
}
|
|
5866
|
-
@media (hover: hover) {
|
|
5867
|
-
.c-data-table__row:hover:hover {
|
|
5868
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
5869
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-data-table-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-data-table-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5870
|
-
}
|
|
5871
|
-
}
|
|
5872
|
-
.c-data-table__row:hover:active {
|
|
5873
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-data-table-hover-bg) 81%, transparent) 100%);
|
|
5444
|
+
background-color: color-mix(in srgb, var(--atomix-data-table-hover-bg) 65%, transparent);
|
|
5874
5445
|
}
|
|
5875
5446
|
.c-data-table__row[role=button] {
|
|
5876
5447
|
cursor: pointer;
|
|
5877
5448
|
}
|
|
5878
5449
|
.c-data-table__row--selected {
|
|
5879
|
-
|
|
5880
|
-
isolation: isolate;
|
|
5881
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 78%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 65%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 55%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 26%, transparent) 0%, transparent 60%);
|
|
5882
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5883
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
5884
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5885
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5886
|
-
}
|
|
5887
|
-
@media (hover: hover) {
|
|
5888
|
-
.c-data-table__row--selected:hover {
|
|
5889
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 96%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 80%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 68%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 40%, transparent) 0%, transparent 60%);
|
|
5890
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5891
|
-
}
|
|
5892
|
-
}
|
|
5893
|
-
.c-data-table__row--selected:active {
|
|
5894
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 108%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 90%, transparent) 50%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 81%, transparent) 100%);
|
|
5450
|
+
background-color: color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 65%, transparent);
|
|
5895
5451
|
}
|
|
5896
5452
|
.c-data-table__cell--selection {
|
|
5897
5453
|
width: 48px;
|
|
@@ -5914,22 +5470,7 @@ a, a:hover {
|
|
|
5914
5470
|
color: var(--atomix-gray-500);
|
|
5915
5471
|
}
|
|
5916
5472
|
.c-data-table--striped tbody tr:nth-of-type(odd) {
|
|
5917
|
-
|
|
5918
|
-
isolation: isolate;
|
|
5919
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-striped-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 26%, transparent) 0%, transparent 60%);
|
|
5920
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5921
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
5922
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-data-table-striped-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-data-table-striped-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-striped-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5923
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5924
|
-
}
|
|
5925
|
-
@media (hover: hover) {
|
|
5926
|
-
.c-data-table--striped tbody tr:nth-of-type(odd):hover {
|
|
5927
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-striped-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 40%, transparent) 0%, transparent 60%);
|
|
5928
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-data-table-striped-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-striped-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-data-table-striped-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5929
|
-
}
|
|
5930
|
-
}
|
|
5931
|
-
.c-data-table--striped tbody tr:nth-of-type(odd):active {
|
|
5932
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-striped-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-data-table-striped-bg) 81%, transparent) 100%);
|
|
5473
|
+
background-color: color-mix(in srgb, var(--atomix-data-table-striped-bg) 65%, transparent);
|
|
5933
5474
|
}
|
|
5934
5475
|
.c-data-table--bordered {
|
|
5935
5476
|
border: var(--atomix-border-width) var(--atomix-border-style) var(--atomix-data-table-border-color);
|
|
@@ -5950,22 +5491,7 @@ a, a:hover {
|
|
|
5950
5491
|
position: sticky;
|
|
5951
5492
|
top: var(--sticky-header-offset, 0);
|
|
5952
5493
|
z-index: 10;
|
|
5953
|
-
|
|
5954
|
-
isolation: isolate;
|
|
5955
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-header-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-header-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-header-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-header-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-header-bg) 26%, transparent) 0%, transparent 60%);
|
|
5956
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
5957
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
5958
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-data-table-header-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
5959
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5960
|
-
}
|
|
5961
|
-
@media (hover: hover) {
|
|
5962
|
-
.c-data-table--sticky-header thead:hover {
|
|
5963
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-header-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-header-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-data-table-header-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-data-table-header-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-data-table-header-bg) 40%, transparent) 0%, transparent 60%);
|
|
5964
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-data-table-header-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-data-table-header-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
5965
|
-
}
|
|
5966
|
-
}
|
|
5967
|
-
.c-data-table--sticky-header thead:active {
|
|
5968
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-data-table-header-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-data-table-header-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-data-table-header-bg) 81%, transparent) 100%);
|
|
5494
|
+
background-color: color-mix(in srgb, var(--atomix-data-table-header-bg) 65%, transparent);
|
|
5969
5495
|
}
|
|
5970
5496
|
.c-data-table-toolbar {
|
|
5971
5497
|
display: flex;
|
|
@@ -6164,49 +5690,11 @@ a, a:hover {
|
|
|
6164
5690
|
border-radius: var(--atomix-dropdown-border-radius);
|
|
6165
5691
|
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
6166
5692
|
overflow: hidden;
|
|
6167
|
-
|
|
6168
|
-
isolation: isolate;
|
|
6169
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-bg) 26%, transparent) 0%, transparent 60%);
|
|
6170
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6171
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
6172
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6173
|
-
}
|
|
6174
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
6175
|
-
.c-dropdown__menu {
|
|
6176
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-dropdown-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6177
|
-
}
|
|
6178
|
-
}
|
|
6179
|
-
@media (hover: hover) {
|
|
6180
|
-
.c-dropdown__menu:hover {
|
|
6181
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-bg) 40%, transparent) 0%, transparent 60%);
|
|
6182
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-dropdown-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6183
|
-
}
|
|
6184
|
-
}
|
|
6185
|
-
.c-dropdown__menu:active {
|
|
6186
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-dropdown-bg) 81%, transparent) 100%);
|
|
5693
|
+
background-color: color-mix(in srgb, var(--atomix-dropdown-bg) 65%, transparent);
|
|
6187
5694
|
}
|
|
6188
5695
|
.c-dropdown__menu--glass {
|
|
6189
5696
|
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
6190
|
-
|
|
6191
|
-
isolation: isolate;
|
|
6192
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-bg) 26%, transparent) 0%, transparent 60%);
|
|
6193
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6194
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
6195
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6196
|
-
}
|
|
6197
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
6198
|
-
.c-dropdown__menu--glass {
|
|
6199
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-dropdown-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6200
|
-
}
|
|
6201
|
-
}
|
|
6202
|
-
@media (hover: hover) {
|
|
6203
|
-
.c-dropdown__menu--glass:hover {
|
|
6204
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-bg) 40%, transparent) 0%, transparent 60%);
|
|
6205
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-dropdown-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-dropdown-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6206
|
-
}
|
|
6207
|
-
}
|
|
6208
|
-
.c-dropdown__menu--glass:active {
|
|
6209
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-dropdown-bg) 81%, transparent) 100%);
|
|
5697
|
+
background-color: color-mix(in srgb, var(--atomix-dropdown-bg) 65%, transparent);
|
|
6210
5698
|
}
|
|
6211
5699
|
.c-dropdown__menu-item {
|
|
6212
5700
|
display: block;
|
|
@@ -6226,41 +5714,11 @@ a, a:hover {
|
|
|
6226
5714
|
color: var(--atomix-dropdown-link-hover-color);
|
|
6227
5715
|
outline: none;
|
|
6228
5716
|
padding-left: calc(var(--atomix-dropdown-item-padding-x) + 3px);
|
|
6229
|
-
|
|
6230
|
-
isolation: isolate;
|
|
6231
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
6232
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6233
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
6234
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6235
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6236
|
-
}
|
|
6237
|
-
@media (hover: hover) {
|
|
6238
|
-
.c-dropdown__menu-item:hover:hover, .c-dropdown__menu-item:focus:hover {
|
|
6239
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
6240
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6241
|
-
}
|
|
6242
|
-
}
|
|
6243
|
-
.c-dropdown__menu-item:hover:active, .c-dropdown__menu-item:focus:active {
|
|
6244
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 81%, transparent) 100%);
|
|
5717
|
+
background-color: color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 65%, transparent);
|
|
6245
5718
|
}
|
|
6246
5719
|
.c-dropdown__menu-item.is-active {
|
|
6247
5720
|
color: var(--atomix-dropdown-active-color);
|
|
6248
|
-
|
|
6249
|
-
isolation: isolate;
|
|
6250
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-active-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 26%, transparent) 0%, transparent 60%);
|
|
6251
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6252
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
6253
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-dropdown-active-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-dropdown-active-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-active-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6254
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6255
|
-
}
|
|
6256
|
-
@media (hover: hover) {
|
|
6257
|
-
.c-dropdown__menu-item.is-active:hover {
|
|
6258
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-active-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 40%, transparent) 0%, transparent 60%);
|
|
6259
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-dropdown-active-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-dropdown-active-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-dropdown-active-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6260
|
-
}
|
|
6261
|
-
}
|
|
6262
|
-
.c-dropdown__menu-item.is-active:active {
|
|
6263
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-dropdown-active-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-dropdown-active-bg) 81%, transparent) 100%);
|
|
5721
|
+
background-color: color-mix(in srgb, var(--atomix-dropdown-active-bg) 65%, transparent);
|
|
6264
5722
|
}
|
|
6265
5723
|
.c-dropdown__menu-item.is-disabled {
|
|
6266
5724
|
color: var(--atomix-dropdown-color);
|
|
@@ -6342,60 +5800,16 @@ a, a:hover {
|
|
|
6342
5800
|
border-radius: 16px;
|
|
6343
5801
|
}
|
|
6344
5802
|
.c-dynamic-background--glass {
|
|
6345
|
-
|
|
6346
|
-
isolation: isolate;
|
|
6347
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, #8b5cf6 78%, transparent) 0%, color-mix(in srgb, #8b5cf6 65%, transparent) 40%, color-mix(in srgb, #8b5cf6 55%, transparent) 70%, color-mix(in srgb, #8b5cf6 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, #8b5cf6 26%, transparent) 0%, transparent 60%);
|
|
6348
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6349
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
6350
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, #8b5cf6 20%, transparent), 0 16px 32px 0 color-mix(in srgb, #8b5cf6 10%, transparent), 0 24px 48px 0 color-mix(in srgb, #8b5cf6 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6351
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6352
|
-
}
|
|
6353
|
-
@media (hover: hover) {
|
|
6354
|
-
.c-dynamic-background--glass:hover {
|
|
6355
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, #8b5cf6 96%, transparent) 0%, color-mix(in srgb, #8b5cf6 80%, transparent) 40%, color-mix(in srgb, #8b5cf6 68%, transparent) 70%, color-mix(in srgb, #8b5cf6 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, #8b5cf6 40%, transparent) 0%, transparent 60%);
|
|
6356
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, #8b5cf6 30%, transparent), 0 24px 48px 0 color-mix(in srgb, #8b5cf6 15%, transparent), 0 36px 72px 0 color-mix(in srgb, #8b5cf6 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6357
|
-
}
|
|
6358
|
-
}
|
|
6359
|
-
.c-dynamic-background--glass:active {
|
|
6360
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, #8b5cf6 108%, transparent) 0%, color-mix(in srgb, #8b5cf6 90%, transparent) 50%, color-mix(in srgb, #8b5cf6 81%, transparent) 100%);
|
|
5803
|
+
background-color: color-mix(in srgb, #8b5cf6 65%, transparent);
|
|
6361
5804
|
}
|
|
6362
5805
|
.c-dynamic-background--solid {
|
|
6363
|
-
|
|
6364
|
-
isolation: isolate;
|
|
6365
|
-
background: linear-gradient(135deg, rgb(156.1976744186, 116.1656976744, 247.3343023256) 0%, #8b5cf6 50%, rgb(121.8023255814, 67.8343023256, 244.6656976744) 100%);
|
|
6366
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
5806
|
+
background-color: #8b5cf6;
|
|
6367
5807
|
}
|
|
6368
5808
|
.c-dynamic-background--mesh {
|
|
6369
|
-
|
|
6370
|
-
isolation: isolate;
|
|
6371
|
-
background: radial-gradient(circle at 20% 30%, color-mix(in srgb, #8b5cf6 40%, transparent) 0%, transparent 50%), radial-gradient(circle at 80% 70%, color-mix(in srgb, #8b5cf6 35%, transparent) 0%, transparent 50%), radial-gradient(circle at 50% 50%, color-mix(in srgb, #8b5cf6 65%, transparent) 0%, color-mix(in srgb, #8b5cf6 39%, transparent) 100%);
|
|
6372
|
-
-webkit-backdrop-filter: blur(16px);
|
|
6373
|
-
backdrop-filter: blur(16px);
|
|
6374
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, #8b5cf6 20%, transparent), 0 16px 32px 0 color-mix(in srgb, #8b5cf6 10%, transparent), 0 24px 48px 0 color-mix(in srgb, #8b5cf6 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6375
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6376
|
-
}
|
|
6377
|
-
@media (hover: hover) {
|
|
6378
|
-
.c-dynamic-background--mesh:hover {
|
|
6379
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, #8b5cf6 30%, transparent), 0 24px 48px 0 color-mix(in srgb, #8b5cf6 15%, transparent), 0 36px 72px 0 color-mix(in srgb, #8b5cf6 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6380
|
-
}
|
|
5809
|
+
background-color: color-mix(in srgb, #8b5cf6 65%, transparent);
|
|
6381
5810
|
}
|
|
6382
5811
|
.c-dynamic-background--shimmer {
|
|
6383
|
-
|
|
6384
|
-
isolation: isolate;
|
|
6385
|
-
background: color-mix(in srgb, #8b5cf6 75%, transparent);
|
|
6386
|
-
overflow: hidden;
|
|
6387
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6388
|
-
}
|
|
6389
|
-
.c-dynamic-background--shimmer::before {
|
|
6390
|
-
content: "";
|
|
6391
|
-
position: absolute;
|
|
6392
|
-
inset: 0;
|
|
6393
|
-
border-radius: inherit;
|
|
6394
|
-
pointer-events: none;
|
|
6395
|
-
z-index: 1;
|
|
6396
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
|
|
6397
|
-
transform: translateX(-100%);
|
|
6398
|
-
animation: shimmer 3s infinite;
|
|
5812
|
+
background-color: color-mix(in srgb, #8b5cf6 65%, transparent);
|
|
6399
5813
|
}
|
|
6400
5814
|
.c-dynamic-background--with-border::before {
|
|
6401
5815
|
content: "";
|
|
@@ -6448,22 +5862,7 @@ a, a:hover {
|
|
|
6448
5862
|
opacity: 0;
|
|
6449
5863
|
z-index: 1;
|
|
6450
5864
|
transition: opacity var(--atomix-edge-panel-animation-duration) ease;
|
|
6451
|
-
|
|
6452
|
-
isolation: isolate;
|
|
6453
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 26%, transparent) 0%, transparent 60%);
|
|
6454
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6455
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
6456
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6457
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6458
|
-
}
|
|
6459
|
-
@media (hover: hover) {
|
|
6460
|
-
.c-edge-panel__backdrop:hover {
|
|
6461
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 40%, transparent) 0%, transparent 60%);
|
|
6462
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6463
|
-
}
|
|
6464
|
-
}
|
|
6465
|
-
.c-edge-panel__backdrop:active {
|
|
6466
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 81%, transparent) 100%);
|
|
5865
|
+
background-color: color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 65%, transparent);
|
|
6467
5866
|
}
|
|
6468
5867
|
.c-edge-panel__backdrop.is-animating {
|
|
6469
5868
|
animation: fadeIn 0.3s ease forwards;
|
|
@@ -6481,26 +5880,7 @@ a, a:hover {
|
|
|
6481
5880
|
overflow: hidden;
|
|
6482
5881
|
display: flex;
|
|
6483
5882
|
flex-direction: column;
|
|
6484
|
-
|
|
6485
|
-
isolation: isolate;
|
|
6486
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-bg) 26%, transparent) 0%, transparent 60%);
|
|
6487
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6488
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
6489
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6490
|
-
}
|
|
6491
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
6492
|
-
.c-edge-panel__container {
|
|
6493
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-edge-panel-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6494
|
-
}
|
|
6495
|
-
}
|
|
6496
|
-
@media (hover: hover) {
|
|
6497
|
-
.c-edge-panel__container:hover {
|
|
6498
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-bg) 40%, transparent) 0%, transparent 60%);
|
|
6499
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-edge-panel-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6500
|
-
}
|
|
6501
|
-
}
|
|
6502
|
-
.c-edge-panel__container:active {
|
|
6503
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-edge-panel-bg) 81%, transparent) 100%);
|
|
5883
|
+
background-color: color-mix(in srgb, var(--atomix-edge-panel-bg) 65%, transparent);
|
|
6504
5884
|
}
|
|
6505
5885
|
.c-edge-panel__container.is-animating {
|
|
6506
5886
|
animation: slideIn var(--atomix-edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
@@ -6529,22 +5909,7 @@ a, a:hover {
|
|
|
6529
5909
|
transition: background-color 0.2s ease;
|
|
6530
5910
|
}
|
|
6531
5911
|
.c-edge-panel__close:hover {
|
|
6532
|
-
|
|
6533
|
-
isolation: isolate;
|
|
6534
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(0, 0, 0, 0.05) 78%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent) 40%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 55%, transparent) 70%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 26%, transparent) 0%, transparent 60%);
|
|
6535
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6536
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
6537
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6538
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6539
|
-
}
|
|
6540
|
-
@media (hover: hover) {
|
|
6541
|
-
.c-edge-panel__close:hover:hover {
|
|
6542
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(0, 0, 0, 0.05) 96%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 80%, transparent) 40%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 68%, transparent) 70%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 40%, transparent) 0%, transparent 60%);
|
|
6543
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(0, 0, 0, 0.05) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(0, 0, 0, 0.05) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6544
|
-
}
|
|
6545
|
-
}
|
|
6546
|
-
.c-edge-panel__close:hover:active {
|
|
6547
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, rgba(0, 0, 0, 0.05) 108%, transparent) 0%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 90%, transparent) 50%, color-mix(in srgb, rgba(0, 0, 0, 0.05) 81%, transparent) 100%);
|
|
5912
|
+
background-color: color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent);
|
|
6548
5913
|
}
|
|
6549
5914
|
.c-edge-panel__close:focus-visible {
|
|
6550
5915
|
outline: 2px solid var(--atomix-primary);
|
|
@@ -6751,22 +6116,7 @@ a, a:hover {
|
|
|
6751
6116
|
padding: 0;
|
|
6752
6117
|
border-radius: inherit;
|
|
6753
6118
|
transition: opacity 0.3s ease;
|
|
6754
|
-
|
|
6755
|
-
isolation: isolate;
|
|
6756
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-bg) 26%, transparent) 0%, transparent 60%);
|
|
6757
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6758
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
6759
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-edge-panel-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6760
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6761
|
-
}
|
|
6762
|
-
@media (hover: hover) {
|
|
6763
|
-
.c-edge-panel--glass .c-edge-panel__glass-content:hover {
|
|
6764
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-bg) 40%, transparent) 0%, transparent 60%);
|
|
6765
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-edge-panel-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-edge-panel-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6766
|
-
}
|
|
6767
|
-
}
|
|
6768
|
-
.c-edge-panel--glass .c-edge-panel__glass-content:active {
|
|
6769
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-edge-panel-bg) 81%, transparent) 100%);
|
|
6119
|
+
background-color: color-mix(in srgb, var(--atomix-edge-panel-bg) 65%, transparent);
|
|
6770
6120
|
}
|
|
6771
6121
|
.c-edge-panel--glass .c-edge-panel__header {
|
|
6772
6122
|
background: transparent;
|
|
@@ -6792,22 +6142,7 @@ a, a:hover {
|
|
|
6792
6142
|
.c-edge-panel--glass .c-edge-panel__backdrop {
|
|
6793
6143
|
animation: fadeIn 0.3s ease forwards;
|
|
6794
6144
|
z-index: 1;
|
|
6795
|
-
|
|
6796
|
-
isolation: isolate;
|
|
6797
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 26%, transparent) 0%, transparent 60%);
|
|
6798
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6799
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
6800
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6801
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6802
|
-
}
|
|
6803
|
-
@media (hover: hover) {
|
|
6804
|
-
.c-edge-panel--glass .c-edge-panel__backdrop:hover {
|
|
6805
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 40%, transparent) 0%, transparent 60%);
|
|
6806
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6807
|
-
}
|
|
6808
|
-
}
|
|
6809
|
-
.c-edge-panel--glass .c-edge-panel__backdrop:active {
|
|
6810
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 81%, transparent) 100%);
|
|
6145
|
+
background-color: color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 65%, transparent);
|
|
6811
6146
|
}
|
|
6812
6147
|
.c-edge-panel--glass .c-edge-panel__backdrop.is-animating-out {
|
|
6813
6148
|
animation: fadeOut 0.3s ease forwards;
|
|
@@ -6862,22 +6197,7 @@ a, a:hover {
|
|
|
6862
6197
|
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
6863
6198
|
padding: var(--atomix-footer-padding-y) 0;
|
|
6864
6199
|
position: relative;
|
|
6865
|
-
|
|
6866
|
-
isolation: isolate;
|
|
6867
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-footer-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-footer-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-footer-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-footer-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-footer-bg) 26%, transparent) 0%, transparent 60%);
|
|
6868
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6869
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
6870
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-footer-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-footer-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-footer-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6871
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6872
|
-
}
|
|
6873
|
-
@media (hover: hover) {
|
|
6874
|
-
.c-footer:hover {
|
|
6875
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-footer-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-footer-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-footer-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-footer-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-footer-bg) 40%, transparent) 0%, transparent 60%);
|
|
6876
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-footer-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-footer-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-footer-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6877
|
-
}
|
|
6878
|
-
}
|
|
6879
|
-
.c-footer:active {
|
|
6880
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-footer-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-footer-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-footer-bg) 81%, transparent) 100%);
|
|
6200
|
+
background-color: color-mix(in srgb, var(--atomix-footer-bg) 65%, transparent);
|
|
6881
6201
|
}
|
|
6882
6202
|
.c-footer--glass {
|
|
6883
6203
|
padding: 0;
|
|
@@ -6890,22 +6210,7 @@ a, a:hover {
|
|
|
6890
6210
|
color: var(--atomix-footer-color);
|
|
6891
6211
|
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
6892
6212
|
padding: var(--atomix-footer-padding-y) 0;
|
|
6893
|
-
|
|
6894
|
-
isolation: isolate;
|
|
6895
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 78%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 65%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 55%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 26%, transparent) 0%, transparent 60%);
|
|
6896
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
6897
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
6898
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
6899
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
6900
|
-
}
|
|
6901
|
-
@media (hover: hover) {
|
|
6902
|
-
.c-footer--glass .c-footer__glass:hover {
|
|
6903
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 96%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 80%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 68%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 40%, transparent) 0%, transparent 60%);
|
|
6904
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
6905
|
-
}
|
|
6906
|
-
}
|
|
6907
|
-
.c-footer--glass .c-footer__glass:active {
|
|
6908
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 108%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 90%, transparent) 50%, color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 81%, transparent) 100%);
|
|
6213
|
+
background-color: color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 65%, transparent);
|
|
6909
6214
|
}
|
|
6910
6215
|
.c-footer__container {
|
|
6911
6216
|
display: flex;
|
|
@@ -7139,22 +6444,7 @@ a, a:hover {
|
|
|
7139
6444
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7140
6445
|
position: relative;
|
|
7141
6446
|
overflow: hidden;
|
|
7142
|
-
|
|
7143
|
-
isolation: isolate;
|
|
7144
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
7145
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7146
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
7147
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7148
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7149
|
-
}
|
|
7150
|
-
@media (hover: hover) {
|
|
7151
|
-
.c-footer__social-link:hover {
|
|
7152
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
7153
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7154
|
-
}
|
|
7155
|
-
}
|
|
7156
|
-
.c-footer__social-link:active {
|
|
7157
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 81%, transparent) 100%);
|
|
6447
|
+
background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
|
|
7158
6448
|
}
|
|
7159
6449
|
.c-footer__social-link::before {
|
|
7160
6450
|
content: "";
|
|
@@ -7168,26 +6458,7 @@ a, a:hover {
|
|
|
7168
6458
|
color: var(--atomix-component-active-color);
|
|
7169
6459
|
transform: translateY(-3px) scale(1.05);
|
|
7170
6460
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
7171
|
-
|
|
7172
|
-
isolation: isolate;
|
|
7173
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-primary) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-primary) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary) 26%, transparent) 0%, transparent 60%);
|
|
7174
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7175
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
7176
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7177
|
-
}
|
|
7178
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
7179
|
-
.c-footer__social-link:hover, .c-footer__social-link:focus {
|
|
7180
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7181
|
-
}
|
|
7182
|
-
}
|
|
7183
|
-
@media (hover: hover) {
|
|
7184
|
-
.c-footer__social-link:hover:hover, .c-footer__social-link:focus:hover {
|
|
7185
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-primary) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-primary) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary) 40%, transparent) 0%, transparent 60%);
|
|
7186
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-primary) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7187
|
-
}
|
|
7188
|
-
}
|
|
7189
|
-
.c-footer__social-link:hover:active, .c-footer__social-link:focus:active {
|
|
7190
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-primary) 81%, transparent) 100%);
|
|
6461
|
+
background-color: color-mix(in srgb, var(--atomix-primary) 65%, transparent);
|
|
7191
6462
|
}
|
|
7192
6463
|
.c-footer__social-link:hover::before, .c-footer__social-link:focus::before {
|
|
7193
6464
|
transform: translateX(100%);
|
|
@@ -7257,22 +6528,7 @@ a, a:hover {
|
|
|
7257
6528
|
border: 1px solid var(--atomix-border-subtle);
|
|
7258
6529
|
position: relative;
|
|
7259
6530
|
overflow: hidden;
|
|
7260
|
-
|
|
7261
|
-
isolation: isolate;
|
|
7262
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 78%, transparent) 0%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 65%, transparent) 40%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 55%, transparent) 70%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 26%, transparent) 0%, transparent 60%);
|
|
7263
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7264
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
7265
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7266
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7267
|
-
}
|
|
7268
|
-
@media (hover: hover) {
|
|
7269
|
-
.c-footer__newsletter:hover {
|
|
7270
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 96%, transparent) 0%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 80%, transparent) 40%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 68%, transparent) 70%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 40%, transparent) 0%, transparent 60%);
|
|
7271
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7272
|
-
}
|
|
7273
|
-
}
|
|
7274
|
-
.c-footer__newsletter:active {
|
|
7275
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 108%, transparent) 0%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 90%, transparent) 50%, color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 81%, transparent) 100%);
|
|
6531
|
+
background-color: color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 65%, transparent);
|
|
7276
6532
|
}
|
|
7277
6533
|
.c-footer__newsletter::before {
|
|
7278
6534
|
content: "";
|
|
@@ -7333,22 +6589,7 @@ a, a:hover {
|
|
|
7333
6589
|
outline: none;
|
|
7334
6590
|
transition: all 0.3s ease;
|
|
7335
6591
|
box-sizing: border-box;
|
|
7336
|
-
|
|
7337
|
-
isolation: isolate;
|
|
7338
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
7339
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7340
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
7341
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-primary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7342
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7343
|
-
}
|
|
7344
|
-
@media (hover: hover) {
|
|
7345
|
-
.c-footer__newsletter-input:hover {
|
|
7346
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
7347
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-primary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7348
|
-
}
|
|
7349
|
-
}
|
|
7350
|
-
.c-footer__newsletter-input:active {
|
|
7351
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 81%, transparent) 100%);
|
|
6592
|
+
background-color: color-mix(in srgb, var(--atomix-primary-bg-subtle) 65%, transparent);
|
|
7352
6593
|
}
|
|
7353
6594
|
.c-footer__newsletter-input:focus {
|
|
7354
6595
|
border-color: var(--atomix-primary);
|
|
@@ -7381,22 +6622,7 @@ a, a:hover {
|
|
|
7381
6622
|
white-space: nowrap;
|
|
7382
6623
|
position: relative;
|
|
7383
6624
|
overflow: hidden;
|
|
7384
|
-
|
|
7385
|
-
isolation: isolate;
|
|
7386
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
7387
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7388
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
7389
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7390
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7391
|
-
}
|
|
7392
|
-
@media (hover: hover) {
|
|
7393
|
-
.c-footer__newsletter-button:hover {
|
|
7394
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
7395
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7396
|
-
}
|
|
7397
|
-
}
|
|
7398
|
-
.c-footer__newsletter-button:active {
|
|
7399
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 81%, transparent) 100%);
|
|
6625
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
7400
6626
|
}
|
|
7401
6627
|
.c-footer__newsletter-button::before {
|
|
7402
6628
|
content: "";
|
|
@@ -7409,26 +6635,7 @@ a, a:hover {
|
|
|
7409
6635
|
.c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
|
|
7410
6636
|
transform: translateY(-2px);
|
|
7411
6637
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
7412
|
-
|
|
7413
|
-
isolation: isolate;
|
|
7414
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
7415
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7416
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
7417
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7418
|
-
}
|
|
7419
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
7420
|
-
.c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
|
|
7421
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7422
|
-
}
|
|
7423
|
-
}
|
|
7424
|
-
@media (hover: hover) {
|
|
7425
|
-
.c-footer__newsletter-button:hover:hover, .c-footer__newsletter-button:focus:hover {
|
|
7426
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
7427
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7428
|
-
}
|
|
7429
|
-
}
|
|
7430
|
-
.c-footer__newsletter-button:hover:active, .c-footer__newsletter-button:focus:active {
|
|
7431
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 81%, transparent) 100%);
|
|
6638
|
+
background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
|
|
7432
6639
|
}
|
|
7433
6640
|
.c-footer__newsletter-button:hover::before, .c-footer__newsletter-button:focus::before {
|
|
7434
6641
|
transform: translateX(100%);
|
|
@@ -7482,22 +6689,7 @@ a, a:hover {
|
|
|
7482
6689
|
overflow: hidden;
|
|
7483
6690
|
text-decoration: none;
|
|
7484
6691
|
outline: none;
|
|
7485
|
-
|
|
7486
|
-
isolation: isolate;
|
|
7487
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg) 26%, transparent) 0%, transparent 60%);
|
|
7488
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7489
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
7490
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7491
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7492
|
-
}
|
|
7493
|
-
@media (hover: hover) {
|
|
7494
|
-
.c-footer__back-to-top:hover {
|
|
7495
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg) 40%, transparent) 0%, transparent 60%);
|
|
7496
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-secondary-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-secondary-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7497
|
-
}
|
|
7498
|
-
}
|
|
7499
|
-
.c-footer__back-to-top:active {
|
|
7500
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-secondary-bg) 81%, transparent) 100%);
|
|
6692
|
+
background-color: color-mix(in srgb, var(--atomix-secondary-bg) 65%, transparent);
|
|
7501
6693
|
}
|
|
7502
6694
|
.c-footer__back-to-top::before {
|
|
7503
6695
|
content: "";
|
|
@@ -7512,26 +6704,7 @@ a, a:hover {
|
|
|
7512
6704
|
border-color: var(--atomix-primary);
|
|
7513
6705
|
transform: translateY(-3px);
|
|
7514
6706
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
|
7515
|
-
|
|
7516
|
-
isolation: isolate;
|
|
7517
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-primary) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-primary) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary) 26%, transparent) 0%, transparent 60%);
|
|
7518
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
7519
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
7520
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7521
|
-
}
|
|
7522
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
7523
|
-
.c-footer__back-to-top:hover, .c-footer__back-to-top:focus {
|
|
7524
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
7525
|
-
}
|
|
7526
|
-
}
|
|
7527
|
-
@media (hover: hover) {
|
|
7528
|
-
.c-footer__back-to-top:hover:hover, .c-footer__back-to-top:focus:hover {
|
|
7529
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-primary) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-primary) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary) 40%, transparent) 0%, transparent 60%);
|
|
7530
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-primary) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
7531
|
-
}
|
|
7532
|
-
}
|
|
7533
|
-
.c-footer__back-to-top:hover:active, .c-footer__back-to-top:focus:active {
|
|
7534
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-primary) 81%, transparent) 100%);
|
|
6707
|
+
background-color: color-mix(in srgb, var(--atomix-primary) 65%, transparent);
|
|
7535
6708
|
}
|
|
7536
6709
|
.c-footer__back-to-top:hover::before, .c-footer__back-to-top:focus::before {
|
|
7537
6710
|
transform: translateX(100%);
|
|
@@ -8050,22 +7223,7 @@ a, a:hover {
|
|
|
8050
7223
|
place-items: center;
|
|
8051
7224
|
padding: var(--atomix-hero-padding-y) var(--atomix-hero-padding-x);
|
|
8052
7225
|
overflow: hidden;
|
|
8053
|
-
|
|
8054
|
-
isolation: isolate;
|
|
8055
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-hero-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-hero-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-hero-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-hero-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-hero-bg) 26%, transparent) 0%, transparent 60%);
|
|
8056
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8057
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8058
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-hero-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-hero-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-hero-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8059
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8060
|
-
}
|
|
8061
|
-
@media (hover: hover) {
|
|
8062
|
-
.c-hero:hover {
|
|
8063
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-hero-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-hero-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-hero-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-hero-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-hero-bg) 40%, transparent) 0%, transparent 60%);
|
|
8064
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-hero-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-hero-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-hero-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8065
|
-
}
|
|
8066
|
-
}
|
|
8067
|
-
.c-hero:active {
|
|
8068
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-hero-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-hero-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-hero-bg) 81%, transparent) 100%);
|
|
7226
|
+
background-color: color-mix(in srgb, var(--atomix-hero-bg) 65%, transparent);
|
|
8069
7227
|
}
|
|
8070
7228
|
.c-hero__bg {
|
|
8071
7229
|
position: absolute;
|
|
@@ -8089,22 +7247,7 @@ a, a:hover {
|
|
|
8089
7247
|
inset: 0;
|
|
8090
7248
|
opacity: var(--atomix-hero-overlay-opacity);
|
|
8091
7249
|
z-index: 1;
|
|
8092
|
-
|
|
8093
|
-
isolation: isolate;
|
|
8094
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-hero-overlay) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-hero-overlay) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-hero-overlay) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-hero-overlay) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-hero-overlay) 26%, transparent) 0%, transparent 60%);
|
|
8095
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8096
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8097
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-hero-overlay) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-hero-overlay) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-hero-overlay) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8098
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8099
|
-
}
|
|
8100
|
-
@media (hover: hover) {
|
|
8101
|
-
.c-hero__overlay:hover {
|
|
8102
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-hero-overlay) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-hero-overlay) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-hero-overlay) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-hero-overlay) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-hero-overlay) 40%, transparent) 0%, transparent 60%);
|
|
8103
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-hero-overlay) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-hero-overlay) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-hero-overlay) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8104
|
-
}
|
|
8105
|
-
}
|
|
8106
|
-
.c-hero__overlay:active {
|
|
8107
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-hero-overlay) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-hero-overlay) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-hero-overlay) 81%, transparent) 100%);
|
|
7250
|
+
background-color: color-mix(in srgb, var(--atomix-hero-overlay) 65%, transparent);
|
|
8108
7251
|
}
|
|
8109
7252
|
.c-hero__container {
|
|
8110
7253
|
position: relative;
|
|
@@ -8279,22 +7422,7 @@ a, a:hover {
|
|
|
8279
7422
|
transition-duration: 0.2s;
|
|
8280
7423
|
transition-timing-function: ease-in-out;
|
|
8281
7424
|
transition-delay: 0s;
|
|
8282
|
-
|
|
8283
|
-
isolation: isolate;
|
|
8284
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 26%, transparent) 0%, transparent 60%);
|
|
8285
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8286
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8287
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-input-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8288
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8289
|
-
}
|
|
8290
|
-
@media (hover: hover) {
|
|
8291
|
-
.c-input:hover {
|
|
8292
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 40%, transparent) 0%, transparent 60%);
|
|
8293
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-input-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8294
|
-
}
|
|
8295
|
-
}
|
|
8296
|
-
.c-input:active {
|
|
8297
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-input-bg) 81%, transparent) 100%);
|
|
7425
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 65%, transparent);
|
|
8298
7426
|
}
|
|
8299
7427
|
.c-input:focus, .c-input:hover {
|
|
8300
7428
|
--atomix-input-border-color: var(--atomix-primary-border-subtle);
|
|
@@ -8365,66 +7493,17 @@ a, a:hover {
|
|
|
8365
7493
|
.c-input--glass {
|
|
8366
7494
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
8367
7495
|
border-color: color-mix(in srgb, var(--atomix-input-border-color) 50%, transparent);
|
|
8368
|
-
|
|
8369
|
-
isolation: isolate;
|
|
8370
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 26%, transparent) 0%, transparent 60%);
|
|
8371
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8372
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8373
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8374
|
-
}
|
|
8375
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
8376
|
-
.c-input--glass {
|
|
8377
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-input-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8378
|
-
}
|
|
8379
|
-
}
|
|
8380
|
-
@media (hover: hover) {
|
|
8381
|
-
.c-input--glass:hover {
|
|
8382
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 40%, transparent) 0%, transparent 60%);
|
|
8383
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-input-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8384
|
-
}
|
|
8385
|
-
}
|
|
8386
|
-
.c-input--glass:active {
|
|
8387
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-input-bg) 81%, transparent) 100%);
|
|
7496
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 65%, transparent);
|
|
8388
7497
|
}
|
|
8389
7498
|
.c-input--glass:focus, .c-input--glass:hover {
|
|
8390
|
-
|
|
8391
|
-
isolation: isolate;
|
|
8392
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 103%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 90%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 80%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 93%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 36%, transparent) 0%, transparent 60%);
|
|
8393
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8394
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8395
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-input-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8396
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8397
|
-
}
|
|
8398
|
-
@media (hover: hover) {
|
|
8399
|
-
.c-input--glass:focus:hover, .c-input--glass:hover:hover {
|
|
8400
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 40%, transparent) 0%, transparent 60%);
|
|
8401
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-input-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8402
|
-
}
|
|
8403
|
-
}
|
|
8404
|
-
.c-input--glass:focus:active, .c-input--glass:hover:active {
|
|
8405
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-input-bg) 81%, transparent) 100%);
|
|
7499
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 90%, transparent);
|
|
8406
7500
|
}
|
|
8407
7501
|
.c-input--glass.c-input--textarea {
|
|
8408
7502
|
resize: vertical;
|
|
8409
7503
|
}
|
|
8410
7504
|
.c-input--glass:disabled, .c-input--glass.is-disabled {
|
|
8411
7505
|
opacity: 0.6;
|
|
8412
|
-
|
|
8413
|
-
isolation: isolate;
|
|
8414
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 26%, transparent) 0%, transparent 60%);
|
|
8415
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8416
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8417
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-input-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8418
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8419
|
-
}
|
|
8420
|
-
@media (hover: hover) {
|
|
8421
|
-
.c-input--glass:disabled:hover, .c-input--glass.is-disabled:hover {
|
|
8422
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-input-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-input-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-input-bg) 40%, transparent) 0%, transparent 60%);
|
|
8423
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-input-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-input-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-input-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8424
|
-
}
|
|
8425
|
-
}
|
|
8426
|
-
.c-input--glass:disabled:active, .c-input--glass.is-disabled:active {
|
|
8427
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-input-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-input-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-input-bg) 81%, transparent) 100%);
|
|
7506
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 65%, transparent);
|
|
8428
7507
|
}
|
|
8429
7508
|
.c-list-group {
|
|
8430
7509
|
--atomix-list-group-width: 100%;
|
|
@@ -8444,44 +7523,14 @@ a, a:hover {
|
|
|
8444
7523
|
list-style: none;
|
|
8445
7524
|
width: 100%;
|
|
8446
7525
|
max-width: var(--atomix-list-group-width);
|
|
8447
|
-
|
|
8448
|
-
isolation: isolate;
|
|
8449
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-list-group-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-list-group-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-list-group-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-list-group-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-list-group-bg) 26%, transparent) 0%, transparent 60%);
|
|
8450
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8451
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8452
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-list-group-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-list-group-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-list-group-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8453
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8454
|
-
}
|
|
8455
|
-
@media (hover: hover) {
|
|
8456
|
-
.c-list-group:hover {
|
|
8457
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-list-group-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-list-group-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-list-group-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-list-group-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-list-group-bg) 40%, transparent) 0%, transparent 60%);
|
|
8458
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-list-group-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-list-group-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-list-group-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8459
|
-
}
|
|
8460
|
-
}
|
|
8461
|
-
.c-list-group:active {
|
|
8462
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-list-group-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-list-group-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-list-group-bg) 81%, transparent) 100%);
|
|
7526
|
+
background-color: color-mix(in srgb, var(--atomix-list-group-bg) 65%, transparent);
|
|
8463
7527
|
}
|
|
8464
7528
|
.c-list-group__item {
|
|
8465
7529
|
padding: var(--atomix-list-group-item-padding-y) var(--atomix-list-group-item-padding-x);
|
|
8466
7530
|
font-size: var(--atomix-list-group-item-font-size);
|
|
8467
7531
|
color: var(--atomix-list-group-item-color);
|
|
8468
7532
|
border-bottom: var(--atomix-list-group-item-border-width) solid var(--atomix-list-group-item-border-color);
|
|
8469
|
-
|
|
8470
|
-
isolation: isolate;
|
|
8471
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-list-group-item-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-list-group-item-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-list-group-item-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-list-group-item-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-list-group-item-bg) 26%, transparent) 0%, transparent 60%);
|
|
8472
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8473
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8474
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-list-group-item-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-list-group-item-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-list-group-item-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8475
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8476
|
-
}
|
|
8477
|
-
@media (hover: hover) {
|
|
8478
|
-
.c-list-group__item:hover {
|
|
8479
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-list-group-item-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-list-group-item-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-list-group-item-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-list-group-item-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-list-group-item-bg) 40%, transparent) 0%, transparent 60%);
|
|
8480
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-list-group-item-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-list-group-item-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-list-group-item-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8481
|
-
}
|
|
8482
|
-
}
|
|
8483
|
-
.c-list-group__item:active {
|
|
8484
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-list-group-item-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-list-group-item-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-list-group-item-bg) 81%, transparent) 100%);
|
|
7533
|
+
background-color: color-mix(in srgb, var(--atomix-list-group-item-bg) 65%, transparent);
|
|
8485
7534
|
}
|
|
8486
7535
|
.c-list-group__item--primary {
|
|
8487
7536
|
--atomix-list-group-item-bg: var(--atomix-brand-bg-subtle);
|
|
@@ -8548,22 +7597,7 @@ a, a:hover {
|
|
|
8548
7597
|
width: var(--atomix-list-item-dash-width);
|
|
8549
7598
|
height: var(--atomix-list-item-dash-height);
|
|
8550
7599
|
transform: translateY(-50%);
|
|
8551
|
-
|
|
8552
|
-
isolation: isolate;
|
|
8553
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-list-color) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-list-color) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-list-color) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-list-color) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-list-color) 26%, transparent) 0%, transparent 60%);
|
|
8554
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8555
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8556
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-list-color) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-list-color) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-list-color) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8557
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8558
|
-
}
|
|
8559
|
-
@media (hover: hover) {
|
|
8560
|
-
.c-list--dash .c-list__item::before:hover {
|
|
8561
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-list-color) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-list-color) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-list-color) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-list-color) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-list-color) 40%, transparent) 0%, transparent 60%);
|
|
8562
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-list-color) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-list-color) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-list-color) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8563
|
-
}
|
|
8564
|
-
}
|
|
8565
|
-
.c-list--dash .c-list__item::before:active {
|
|
8566
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-list-color) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-list-color) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-list-color) 81%, transparent) 100%);
|
|
7600
|
+
background-color: color-mix(in srgb, var(--atomix-list-color) 65%, transparent);
|
|
8567
7601
|
}
|
|
8568
7602
|
.c-list--number {
|
|
8569
7603
|
list-style-type: decimal;
|
|
@@ -8605,26 +7639,7 @@ a, a:hover {
|
|
|
8605
7639
|
border-radius: var(--atomix-menu-border-radius);
|
|
8606
7640
|
box-shadow: var(--atomix-menu-box-shadow);
|
|
8607
7641
|
z-index: 5;
|
|
8608
|
-
|
|
8609
|
-
isolation: isolate;
|
|
8610
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-menu-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-bg) 26%, transparent) 0%, transparent 60%);
|
|
8611
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8612
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8613
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8614
|
-
}
|
|
8615
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
8616
|
-
.c-menu {
|
|
8617
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-menu-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-menu-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8618
|
-
}
|
|
8619
|
-
}
|
|
8620
|
-
@media (hover: hover) {
|
|
8621
|
-
.c-menu:hover {
|
|
8622
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-menu-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-bg) 40%, transparent) 0%, transparent 60%);
|
|
8623
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-menu-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-menu-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8624
|
-
}
|
|
8625
|
-
}
|
|
8626
|
-
.c-menu:active {
|
|
8627
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-menu-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-menu-bg) 81%, transparent) 100%);
|
|
7642
|
+
background-color: color-mix(in srgb, var(--atomix-menu-bg) 65%, transparent);
|
|
8628
7643
|
}
|
|
8629
7644
|
.c-menu__container {
|
|
8630
7645
|
width: 100%;
|
|
@@ -8673,59 +7688,14 @@ a, a:hover {
|
|
|
8673
7688
|
transition-duration: 0.2s;
|
|
8674
7689
|
transition-timing-function: ease-in-out;
|
|
8675
7690
|
transition-delay: 0s;
|
|
8676
|
-
|
|
8677
|
-
isolation: isolate;
|
|
8678
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-menu-item-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-item-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-item-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-item-bg) 26%, transparent) 0%, transparent 60%);
|
|
8679
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8680
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8681
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-menu-item-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-menu-item-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-item-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8682
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8683
|
-
}
|
|
8684
|
-
@media (hover: hover) {
|
|
8685
|
-
.c-menu__link:hover {
|
|
8686
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-menu-item-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-item-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-item-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-item-bg) 40%, transparent) 0%, transparent 60%);
|
|
8687
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-menu-item-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-item-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-menu-item-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8688
|
-
}
|
|
8689
|
-
}
|
|
8690
|
-
.c-menu__link:active {
|
|
8691
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-menu-item-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-menu-item-bg) 81%, transparent) 100%);
|
|
7691
|
+
background-color: color-mix(in srgb, var(--atomix-menu-item-bg) 65%, transparent);
|
|
8692
7692
|
}
|
|
8693
7693
|
.c-menu__link:hover {
|
|
8694
7694
|
color: var(--atomix-menu-item-color);
|
|
8695
|
-
|
|
8696
|
-
isolation: isolate;
|
|
8697
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 26%, transparent) 0%, transparent 60%);
|
|
8698
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8699
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8700
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-menu-item-bg-hover) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-menu-item-bg-hover) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-item-bg-hover) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8701
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8702
|
-
}
|
|
8703
|
-
@media (hover: hover) {
|
|
8704
|
-
.c-menu__link:hover:hover {
|
|
8705
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 40%, transparent) 0%, transparent 60%);
|
|
8706
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-menu-item-bg-hover) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-item-bg-hover) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-menu-item-bg-hover) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8707
|
-
}
|
|
8708
|
-
}
|
|
8709
|
-
.c-menu__link:hover:active {
|
|
8710
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-menu-item-bg-hover) 81%, transparent) 100%);
|
|
7695
|
+
background-color: color-mix(in srgb, var(--atomix-menu-item-bg-hover) 65%, transparent);
|
|
8711
7696
|
}
|
|
8712
7697
|
.c-menu__link:focus, .c-menu__link:active, .c-menu__link.is-active {
|
|
8713
|
-
|
|
8714
|
-
isolation: isolate;
|
|
8715
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-menu-item-bg-active) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 26%, transparent) 0%, transparent 60%);
|
|
8716
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8717
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8718
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-menu-item-bg-active) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-menu-item-bg-active) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-item-bg-active) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8719
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8720
|
-
}
|
|
8721
|
-
@media (hover: hover) {
|
|
8722
|
-
.c-menu__link:focus:hover, .c-menu__link:active:hover, .c-menu__link.is-active:hover {
|
|
8723
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-menu-item-bg-active) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 40%, transparent) 0%, transparent 60%);
|
|
8724
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-menu-item-bg-active) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-menu-item-bg-active) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-menu-item-bg-active) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8725
|
-
}
|
|
8726
|
-
}
|
|
8727
|
-
.c-menu__link:focus:active, .c-menu__link:active:active, .c-menu__link.is-active:active {
|
|
8728
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-menu-item-bg-active) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-menu-item-bg-active) 81%, transparent) 100%);
|
|
7698
|
+
background-color: color-mix(in srgb, var(--atomix-menu-item-bg-active) 65%, transparent);
|
|
8729
7699
|
}
|
|
8730
7700
|
.c-menu__icon {
|
|
8731
7701
|
font-size: var(--atomix-menu-item-icon-size);
|
|
@@ -8895,22 +7865,7 @@ a, a:hover {
|
|
|
8895
7865
|
padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
|
|
8896
7866
|
border-radius: var(--atomix-messages-border-radius);
|
|
8897
7867
|
border: var(--atomix-messages-border-width) solid var(--atomix-messages-border-color);
|
|
8898
|
-
|
|
8899
|
-
isolation: isolate;
|
|
8900
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-bg) 26%, transparent) 0%, transparent 60%);
|
|
8901
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8902
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8903
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-messages-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8904
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8905
|
-
}
|
|
8906
|
-
@media (hover: hover) {
|
|
8907
|
-
.c-messages:hover {
|
|
8908
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-bg) 40%, transparent) 0%, transparent 60%);
|
|
8909
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-messages-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-messages-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8910
|
-
}
|
|
8911
|
-
}
|
|
8912
|
-
.c-messages:active {
|
|
8913
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-messages-bg) 81%, transparent) 100%);
|
|
7868
|
+
background-color: color-mix(in srgb, var(--atomix-messages-bg) 65%, transparent);
|
|
8914
7869
|
}
|
|
8915
7870
|
.c-messages__body {
|
|
8916
7871
|
max-height: var(--atomix-messages-body-height);
|
|
@@ -8961,44 +7916,14 @@ a, a:hover {
|
|
|
8961
7916
|
font-size: var(--atomix-messages-text-font-size);
|
|
8962
7917
|
padding: var(--atomix-messages-text-padding-y) var(--atomix-messages-text-padding-x);
|
|
8963
7918
|
border-radius: 0.25rem var(--atomix-messages-text-border-radius) var(--atomix-messages-text-border-radius) 0.25rem;
|
|
8964
|
-
|
|
8965
|
-
isolation: isolate;
|
|
8966
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-text-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-text-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-text-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-text-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-text-bg) 26%, transparent) 0%, transparent 60%);
|
|
8967
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8968
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8969
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-messages-text-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-messages-text-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-text-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8970
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8971
|
-
}
|
|
8972
|
-
@media (hover: hover) {
|
|
8973
|
-
.c-messages__text:hover {
|
|
8974
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-text-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-text-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-text-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-text-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-text-bg) 40%, transparent) 0%, transparent 60%);
|
|
8975
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-messages-text-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-text-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-messages-text-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8976
|
-
}
|
|
8977
|
-
}
|
|
8978
|
-
.c-messages__text:active {
|
|
8979
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-text-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-text-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-messages-text-bg) 81%, transparent) 100%);
|
|
7919
|
+
background-color: color-mix(in srgb, var(--atomix-messages-text-bg) 65%, transparent);
|
|
8980
7920
|
}
|
|
8981
7921
|
.c-messages__file {
|
|
8982
7922
|
display: flex;
|
|
8983
7923
|
flex-wrap: wrap;
|
|
8984
7924
|
padding: var(--atomix-messages-file-padding-y) var(--atomix-messages-file-padding-x);
|
|
8985
7925
|
border-radius: 0.25rem var(--atomix-messages-file-border-radius) var(--atomix-messages-file-border-radius) 0.25rem;
|
|
8986
|
-
|
|
8987
|
-
isolation: isolate;
|
|
8988
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-file-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-file-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-file-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-file-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-file-bg) 26%, transparent) 0%, transparent 60%);
|
|
8989
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
8990
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
8991
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-messages-file-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-messages-file-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-file-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
8992
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
8993
|
-
}
|
|
8994
|
-
@media (hover: hover) {
|
|
8995
|
-
.c-messages__file:hover {
|
|
8996
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-file-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-file-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-file-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-file-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-file-bg) 40%, transparent) 0%, transparent 60%);
|
|
8997
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-messages-file-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-file-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-messages-file-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
8998
|
-
}
|
|
8999
|
-
}
|
|
9000
|
-
.c-messages__file:active {
|
|
9001
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-file-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-file-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-messages-file-bg) 81%, transparent) 100%);
|
|
7926
|
+
background-color: color-mix(in srgb, var(--atomix-messages-file-bg) 65%, transparent);
|
|
9002
7927
|
}
|
|
9003
7928
|
.c-messages__file-icon {
|
|
9004
7929
|
display: grid !important;
|
|
@@ -9009,22 +7934,7 @@ a, a:hover {
|
|
|
9009
7934
|
color: var(--atomix-tertiary-text-emphasis);
|
|
9010
7935
|
margin-right: var(--atomix-messages-file-icon-margin-right);
|
|
9011
7936
|
border-radius: 50rem;
|
|
9012
|
-
|
|
9013
|
-
isolation: isolate;
|
|
9014
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 26%, transparent) 0%, transparent 60%);
|
|
9015
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9016
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9017
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9018
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9019
|
-
}
|
|
9020
|
-
@media (hover: hover) {
|
|
9021
|
-
.c-messages__file-icon:hover {
|
|
9022
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 40%, transparent) 0%, transparent 60%);
|
|
9023
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-body-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9024
|
-
}
|
|
9025
|
-
}
|
|
9026
|
-
.c-messages__file-icon:active {
|
|
9027
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-body-bg) 81%, transparent) 100%);
|
|
7937
|
+
background-color: color-mix(in srgb, var(--atomix-body-bg) 65%, transparent);
|
|
9028
7938
|
}
|
|
9029
7939
|
.c-messages__file-name {
|
|
9030
7940
|
color: var(--atomix-messages-file-text-color);
|
|
@@ -9079,22 +7989,7 @@ a, a:hover {
|
|
|
9079
7989
|
}
|
|
9080
7990
|
.c-messages__content--self .c-messages__file-icon {
|
|
9081
7991
|
color: var(--atomix-invert-text-emphasis);
|
|
9082
|
-
|
|
9083
|
-
isolation: isolate;
|
|
9084
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 26%, transparent) 0%, transparent 60%);
|
|
9085
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9086
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9087
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-messages-file-icon-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-messages-file-icon-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-file-icon-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9088
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9089
|
-
}
|
|
9090
|
-
@media (hover: hover) {
|
|
9091
|
-
.c-messages__content--self .c-messages__file-icon:hover {
|
|
9092
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 40%, transparent) 0%, transparent 60%);
|
|
9093
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-messages-file-icon-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-file-icon-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-messages-file-icon-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9094
|
-
}
|
|
9095
|
-
}
|
|
9096
|
-
.c-messages__content--self .c-messages__file-icon:active {
|
|
9097
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-messages-file-icon-bg) 81%, transparent) 100%);
|
|
7992
|
+
background-color: color-mix(in srgb, var(--atomix-messages-file-icon-bg) 65%, transparent);
|
|
9098
7993
|
}
|
|
9099
7994
|
.c-messages__content--self .c-messages__file-icon [data-atomix-color-mode=dark] {
|
|
9100
7995
|
--atomix-messages-file-icon-bg: #7c3aed;
|
|
@@ -9139,22 +8034,7 @@ a, a:hover {
|
|
|
9139
8034
|
border: var(--atomix-messages-input-border-width) solid var(--atomix-messages-input-border-color);
|
|
9140
8035
|
border-radius: var(--atomix-messages-input-border-radius);
|
|
9141
8036
|
resize: none;
|
|
9142
|
-
|
|
9143
|
-
isolation: isolate;
|
|
9144
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-bg) 26%, transparent) 0%, transparent 60%);
|
|
9145
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9146
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9147
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-messages-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-messages-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9148
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9149
|
-
}
|
|
9150
|
-
@media (hover: hover) {
|
|
9151
|
-
.c-messages__input:hover {
|
|
9152
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-messages-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-messages-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-messages-bg) 40%, transparent) 0%, transparent 60%);
|
|
9153
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-messages-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-messages-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-messages-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9154
|
-
}
|
|
9155
|
-
}
|
|
9156
|
-
.c-messages__input:active {
|
|
9157
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-messages-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-messages-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-messages-bg) 81%, transparent) 100%);
|
|
8037
|
+
background-color: color-mix(in srgb, var(--atomix-messages-bg) 65%, transparent);
|
|
9158
8038
|
}
|
|
9159
8039
|
.c-messages__input::-moz-placeholder {
|
|
9160
8040
|
color: var(--atomix-messages-input-placeholder-color);
|
|
@@ -9180,22 +8060,7 @@ a, a:hover {
|
|
|
9180
8060
|
-moz-appearance: none;
|
|
9181
8061
|
appearance: none;
|
|
9182
8062
|
border: 0;
|
|
9183
|
-
|
|
9184
|
-
isolation: isolate;
|
|
9185
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
9186
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9187
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9188
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9189
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9190
|
-
}
|
|
9191
|
-
@media (hover: hover) {
|
|
9192
|
-
.c-messages__submit:hover {
|
|
9193
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
9194
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9195
|
-
}
|
|
9196
|
-
}
|
|
9197
|
-
.c-messages__submit:active {
|
|
9198
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 81%, transparent) 100%);
|
|
8063
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
9199
8064
|
}
|
|
9200
8065
|
.c-messages__submit .c-icon {
|
|
9201
8066
|
width: var(--atomix-messages-form-submit-icon-size);
|
|
@@ -9217,90 +8082,26 @@ a, a:hover {
|
|
|
9217
8082
|
.c-messages--glass .c-messages__body {
|
|
9218
8083
|
border-radius: 0.25rem;
|
|
9219
8084
|
padding: 0.5rem;
|
|
9220
|
-
|
|
9221
|
-
isolation: isolate;
|
|
9222
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 28%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 15%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 5%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 18%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 6%, transparent) 0%, transparent 60%);
|
|
9223
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9224
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9225
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9226
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9227
|
-
}
|
|
9228
|
-
@media (hover: hover) {
|
|
9229
|
-
.c-messages--glass .c-messages__body:hover {
|
|
9230
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 40%, transparent) 0%, transparent 60%);
|
|
9231
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-body-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9232
|
-
}
|
|
9233
|
-
}
|
|
9234
|
-
.c-messages--glass .c-messages__body:active {
|
|
9235
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-body-bg) 81%, transparent) 100%);
|
|
8085
|
+
background-color: color-mix(in srgb, var(--atomix-body-bg) 15%, transparent);
|
|
9236
8086
|
}
|
|
9237
8087
|
.c-messages--glass .c-messages__text {
|
|
9238
8088
|
-webkit-backdrop-filter: blur(8px);
|
|
9239
8089
|
backdrop-filter: blur(8px);
|
|
9240
8090
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
9241
8091
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
9242
|
-
|
|
9243
|
-
isolation: isolate;
|
|
9244
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 26%, transparent) 0%, transparent 60%);
|
|
9245
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9246
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9247
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9248
|
-
}
|
|
9249
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
9250
|
-
.c-messages--glass .c-messages__text {
|
|
9251
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9252
|
-
}
|
|
9253
|
-
}
|
|
9254
|
-
@media (hover: hover) {
|
|
9255
|
-
.c-messages--glass .c-messages__text:hover {
|
|
9256
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 40%, transparent) 0%, transparent 60%);
|
|
9257
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-body-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9258
|
-
}
|
|
9259
|
-
}
|
|
9260
|
-
.c-messages--glass .c-messages__text:active {
|
|
9261
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-body-bg) 81%, transparent) 100%);
|
|
8092
|
+
background-color: color-mix(in srgb, var(--atomix-body-bg) 65%, transparent);
|
|
9262
8093
|
}
|
|
9263
8094
|
.c-messages--glass .c-messages__content--self .c-messages__text {
|
|
9264
8095
|
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
9265
8096
|
-webkit-backdrop-filter: blur(8px);
|
|
9266
8097
|
backdrop-filter: blur(8px);
|
|
9267
|
-
|
|
9268
|
-
isolation: isolate;
|
|
9269
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
9270
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9271
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9272
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9273
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9274
|
-
}
|
|
9275
|
-
@media (hover: hover) {
|
|
9276
|
-
.c-messages--glass .c-messages__content--self .c-messages__text:hover {
|
|
9277
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
9278
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9279
|
-
}
|
|
9280
|
-
}
|
|
9281
|
-
.c-messages--glass .c-messages__content--self .c-messages__text:active {
|
|
9282
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 81%, transparent) 100%);
|
|
8098
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
9283
8099
|
}
|
|
9284
8100
|
.c-messages--glass .c-messages__content--self .c-messages__file {
|
|
9285
8101
|
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
9286
8102
|
-webkit-backdrop-filter: blur(8px);
|
|
9287
8103
|
backdrop-filter: blur(8px);
|
|
9288
|
-
|
|
9289
|
-
isolation: isolate;
|
|
9290
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
9291
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9292
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9293
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9294
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9295
|
-
}
|
|
9296
|
-
@media (hover: hover) {
|
|
9297
|
-
.c-messages--glass .c-messages__content--self .c-messages__file:hover {
|
|
9298
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
9299
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9300
|
-
}
|
|
9301
|
-
}
|
|
9302
|
-
.c-messages--glass .c-messages__content--self .c-messages__file:active {
|
|
9303
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 81%, transparent) 100%);
|
|
8104
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
9304
8105
|
}
|
|
9305
8106
|
.c-messages--glass .c-messages__file {
|
|
9306
8107
|
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
@@ -9308,47 +8109,13 @@ a, a:hover {
|
|
|
9308
8109
|
backdrop-filter: blur(8px);
|
|
9309
8110
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
9310
8111
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
9311
|
-
|
|
9312
|
-
isolation: isolate;
|
|
9313
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
9314
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9315
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9316
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9317
|
-
}
|
|
9318
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
9319
|
-
.c-messages--glass .c-messages__file {
|
|
9320
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9321
|
-
}
|
|
9322
|
-
}
|
|
9323
|
-
@media (hover: hover) {
|
|
9324
|
-
.c-messages--glass .c-messages__file:hover {
|
|
9325
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
9326
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9327
|
-
}
|
|
9328
|
-
}
|
|
9329
|
-
.c-messages--glass .c-messages__file:active {
|
|
9330
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 81%, transparent) 100%);
|
|
8112
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
9331
8113
|
}
|
|
9332
8114
|
.c-messages--glass .c-messages__file-icon {
|
|
9333
8115
|
-webkit-backdrop-filter: blur(8px);
|
|
9334
8116
|
backdrop-filter: blur(8px);
|
|
9335
8117
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
9336
|
-
|
|
9337
|
-
isolation: isolate;
|
|
9338
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
9339
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9340
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9341
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9342
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9343
|
-
}
|
|
9344
|
-
@media (hover: hover) {
|
|
9345
|
-
.c-messages--glass .c-messages__file-icon:hover {
|
|
9346
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
9347
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9348
|
-
}
|
|
9349
|
-
}
|
|
9350
|
-
.c-messages--glass .c-messages__file-icon:active {
|
|
9351
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 81%, transparent) 100%);
|
|
8118
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
9352
8119
|
}
|
|
9353
8120
|
.c-messages--glass .c-messages__image {
|
|
9354
8121
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
@@ -9465,22 +8232,7 @@ a, a:hover {
|
|
|
9465
8232
|
inset: 0;
|
|
9466
8233
|
opacity: 0;
|
|
9467
8234
|
transition: 0.3s;
|
|
9468
|
-
|
|
9469
|
-
isolation: isolate;
|
|
9470
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 26%, transparent) 0%, transparent 60%);
|
|
9471
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9472
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9473
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-modal-backdrop-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-modal-backdrop-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-modal-backdrop-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9474
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9475
|
-
}
|
|
9476
|
-
@media (hover: hover) {
|
|
9477
|
-
.c-modal__backdrop:hover {
|
|
9478
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 40%, transparent) 0%, transparent 60%);
|
|
9479
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-modal-backdrop-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-modal-backdrop-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-modal-backdrop-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9480
|
-
}
|
|
9481
|
-
}
|
|
9482
|
-
.c-modal__backdrop:active {
|
|
9483
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-modal-backdrop-bg) 81%, transparent) 100%);
|
|
8235
|
+
background-color: color-mix(in srgb, var(--atomix-modal-backdrop-bg) 65%, transparent);
|
|
9484
8236
|
}
|
|
9485
8237
|
.c-modal__dialog {
|
|
9486
8238
|
position: relative;
|
|
@@ -9505,26 +8257,7 @@ a, a:hover {
|
|
|
9505
8257
|
border-radius: var(--atomix-modal-content-border-radius);
|
|
9506
8258
|
overflow: hidden;
|
|
9507
8259
|
pointer-events: auto;
|
|
9508
|
-
|
|
9509
|
-
isolation: isolate;
|
|
9510
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-modal-content-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-content-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-modal-content-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-modal-content-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-modal-content-bg) 26%, transparent) 0%, transparent 60%);
|
|
9511
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9512
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9513
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9514
|
-
}
|
|
9515
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
9516
|
-
.c-modal__content {
|
|
9517
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-modal-content-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9518
|
-
}
|
|
9519
|
-
}
|
|
9520
|
-
@media (hover: hover) {
|
|
9521
|
-
.c-modal__content:hover {
|
|
9522
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-modal-content-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-content-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-modal-content-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-modal-content-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-modal-content-bg) 40%, transparent) 0%, transparent 60%);
|
|
9523
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-modal-content-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9524
|
-
}
|
|
9525
|
-
}
|
|
9526
|
-
.c-modal__content:active {
|
|
9527
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-modal-content-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-content-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-modal-content-bg) 81%, transparent) 100%);
|
|
8260
|
+
background-color: color-mix(in srgb, var(--atomix-modal-content-bg) 65%, transparent);
|
|
9528
8261
|
}
|
|
9529
8262
|
.c-modal__header {
|
|
9530
8263
|
display: flex;
|
|
@@ -9581,26 +8314,7 @@ a, a:hover {
|
|
|
9581
8314
|
border-radius: inherit;
|
|
9582
8315
|
width: var(--atomix-modal-width);
|
|
9583
8316
|
height: 100%;
|
|
9584
|
-
|
|
9585
|
-
isolation: isolate;
|
|
9586
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-modal-content-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-content-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-modal-content-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-modal-content-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-modal-content-bg) 26%, transparent) 0%, transparent 60%);
|
|
9587
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9588
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9589
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9590
|
-
}
|
|
9591
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
9592
|
-
.c-modal--glass .c-modal__content {
|
|
9593
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-modal-content-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9594
|
-
}
|
|
9595
|
-
}
|
|
9596
|
-
@media (hover: hover) {
|
|
9597
|
-
.c-modal--glass .c-modal__content:hover {
|
|
9598
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-modal-content-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-content-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-modal-content-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-modal-content-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-modal-content-bg) 40%, transparent) 0%, transparent 60%);
|
|
9599
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-modal-content-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-modal-content-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9600
|
-
}
|
|
9601
|
-
}
|
|
9602
|
-
.c-modal--glass .c-modal__content:active {
|
|
9603
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-modal-content-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-modal-content-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-modal-content-bg) 81%, transparent) 100%);
|
|
8317
|
+
background-color: color-mix(in srgb, var(--atomix-modal-content-bg) 65%, transparent);
|
|
9604
8318
|
}
|
|
9605
8319
|
.c-modal.is-open .c-modal__backdrop {
|
|
9606
8320
|
opacity: var(--atomix-modal-backdrop-opacity);
|
|
@@ -9657,44 +8371,14 @@ a, a:hover {
|
|
|
9657
8371
|
color: var(--atomix-nav-link-color);
|
|
9658
8372
|
}
|
|
9659
8373
|
.c-nav__link:hover, .c-nav__link:active, .c-nav__link:focus, .c-nav__link:focus-visible {
|
|
9660
|
-
|
|
9661
|
-
isolation: isolate;
|
|
9662
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
9663
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9664
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9665
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-nav-link-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-nav-link-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-nav-link-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9666
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9667
|
-
}
|
|
9668
|
-
@media (hover: hover) {
|
|
9669
|
-
.c-nav__link:hover:hover, .c-nav__link:active:hover, .c-nav__link:focus:hover, .c-nav__link:focus-visible:hover {
|
|
9670
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
9671
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-nav-link-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-nav-link-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-nav-link-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9672
|
-
}
|
|
9673
|
-
}
|
|
9674
|
-
.c-nav__link:hover:active, .c-nav__link:active:active, .c-nav__link:focus:active, .c-nav__link:focus-visible:active {
|
|
9675
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-nav-link-hover-bg) 81%, transparent) 100%);
|
|
8374
|
+
background-color: color-mix(in srgb, var(--atomix-nav-link-hover-bg) 65%, transparent);
|
|
9676
8375
|
}
|
|
9677
8376
|
.c-nav__link--disabled {
|
|
9678
8377
|
color: var(--atomix-disabled-text-emphasis);
|
|
9679
8378
|
pointer-events: none;
|
|
9680
8379
|
}
|
|
9681
8380
|
.c-nav__link:focus, .c-nav__link:active, .c-nav__link.is-active {
|
|
9682
|
-
|
|
9683
|
-
isolation: isolate;
|
|
9684
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
9685
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9686
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9687
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9688
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9689
|
-
}
|
|
9690
|
-
@media (hover: hover) {
|
|
9691
|
-
.c-nav__link:focus:hover, .c-nav__link:active:hover, .c-nav__link.is-active:hover {
|
|
9692
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
9693
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9694
|
-
}
|
|
9695
|
-
}
|
|
9696
|
-
.c-nav__link:focus:active, .c-nav__link:active:active, .c-nav__link.is-active:active {
|
|
9697
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 81%, transparent) 100%);
|
|
8381
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
9698
8382
|
}
|
|
9699
8383
|
.c-nav__icon {
|
|
9700
8384
|
font-size: var(--atomix-nav-icon-size);
|
|
@@ -9757,26 +8441,7 @@ a, a:hover {
|
|
|
9757
8441
|
padding: 0.5rem 1rem;
|
|
9758
8442
|
-webkit-backdrop-filter: blur(10px);
|
|
9759
8443
|
backdrop-filter: blur(10px);
|
|
9760
|
-
|
|
9761
|
-
isolation: isolate;
|
|
9762
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 78%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 65%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 55%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 26%, transparent) 0%, transparent 60%);
|
|
9763
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9764
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9765
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9766
|
-
}
|
|
9767
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
9768
|
-
.c-nav--float-top-center, .c-nav--float-bottom-center {
|
|
9769
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9770
|
-
}
|
|
9771
|
-
}
|
|
9772
|
-
@media (hover: hover) {
|
|
9773
|
-
.c-nav--float-top-center:hover, .c-nav--float-bottom-center:hover {
|
|
9774
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 96%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 80%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 68%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 40%, transparent) 0%, transparent 60%);
|
|
9775
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9776
|
-
}
|
|
9777
|
-
}
|
|
9778
|
-
.c-nav--float-top-center:active, .c-nav--float-bottom-center:active {
|
|
9779
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 108%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 90%, transparent) 50%, color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 81%, transparent) 100%);
|
|
8444
|
+
background-color: color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 65%, transparent);
|
|
9780
8445
|
}
|
|
9781
8446
|
.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 {
|
|
9782
8447
|
margin-left: 0.25rem;
|
|
@@ -9786,22 +8451,7 @@ a, a:hover {
|
|
|
9786
8451
|
border-radius: 0.625rem;
|
|
9787
8452
|
}
|
|
9788
8453
|
.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 {
|
|
9789
|
-
|
|
9790
|
-
isolation: isolate;
|
|
9791
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
9792
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9793
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9794
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9795
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9796
|
-
}
|
|
9797
|
-
@media (hover: hover) {
|
|
9798
|
-
.c-nav--float-top-center .c-nav__link:hover:hover, .c-nav--float-top-center .c-nav__link:focus:hover, .c-nav--float-top-center .c-nav__link:active:hover, .c-nav--float-top-center .c-nav__link.is-active:hover, .c-nav--float-bottom-center .c-nav__link:hover:hover, .c-nav--float-bottom-center .c-nav__link:focus:hover, .c-nav--float-bottom-center .c-nav__link:active:hover, .c-nav--float-bottom-center .c-nav__link.is-active:hover {
|
|
9799
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
9800
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-brand-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-brand-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9801
|
-
}
|
|
9802
|
-
}
|
|
9803
|
-
.c-nav--float-top-center .c-nav__link:hover:active, .c-nav--float-top-center .c-nav__link:focus:active, .c-nav--float-top-center .c-nav__link:active:active, .c-nav--float-top-center .c-nav__link.is-active:active, .c-nav--float-bottom-center .c-nav__link:hover:active, .c-nav--float-bottom-center .c-nav__link:focus:active, .c-nav--float-bottom-center .c-nav__link:active:active, .c-nav--float-bottom-center .c-nav__link.is-active:active {
|
|
9804
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-brand-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-brand-bg-subtle) 81%, transparent) 100%);
|
|
8454
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
9805
8455
|
}
|
|
9806
8456
|
.c-nav--float-top-center {
|
|
9807
8457
|
top: 1.25rem;
|
|
@@ -9836,22 +8486,7 @@ a, a:hover {
|
|
|
9836
8486
|
padding: var(--atomix-navbar-padding-y) 0;
|
|
9837
8487
|
border-bottom: var(--atomix-navbar-border-width) solid var(--atomix-navbar-border-color);
|
|
9838
8488
|
z-index: var(--atomix-navbar-z-index);
|
|
9839
|
-
|
|
9840
|
-
isolation: isolate;
|
|
9841
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-navbar-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-navbar-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-navbar-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-navbar-bg) 26%, transparent) 0%, transparent 60%);
|
|
9842
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9843
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9844
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-navbar-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-navbar-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9845
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9846
|
-
}
|
|
9847
|
-
@media (hover: hover) {
|
|
9848
|
-
.c-navbar:hover {
|
|
9849
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-navbar-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-navbar-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-navbar-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-navbar-bg) 40%, transparent) 0%, transparent 60%);
|
|
9850
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-navbar-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-navbar-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9851
|
-
}
|
|
9852
|
-
}
|
|
9853
|
-
.c-navbar:active {
|
|
9854
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-navbar-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-navbar-bg) 81%, transparent) 100%);
|
|
8489
|
+
background-color: color-mix(in srgb, var(--atomix-navbar-bg) 65%, transparent);
|
|
9855
8490
|
}
|
|
9856
8491
|
.c-navbar__container {
|
|
9857
8492
|
display: flex;
|
|
@@ -9890,22 +8525,7 @@ a, a:hover {
|
|
|
9890
8525
|
border-radius: var(--atomix-navbar-toggler-border-radius);
|
|
9891
8526
|
cursor: pointer;
|
|
9892
8527
|
transition: all 0.15s ease-in-out;
|
|
9893
|
-
|
|
9894
|
-
isolation: isolate;
|
|
9895
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 26%, transparent) 0%, transparent 60%);
|
|
9896
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9897
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9898
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-navbar-toggler-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-navbar-toggler-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-toggler-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9899
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9900
|
-
}
|
|
9901
|
-
@media (hover: hover) {
|
|
9902
|
-
.c-navbar__toggler:hover {
|
|
9903
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 40%, transparent) 0%, transparent 60%);
|
|
9904
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-navbar-toggler-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-toggler-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-navbar-toggler-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9905
|
-
}
|
|
9906
|
-
}
|
|
9907
|
-
.c-navbar__toggler:active {
|
|
9908
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-navbar-toggler-bg) 81%, transparent) 100%);
|
|
8528
|
+
background-color: color-mix(in srgb, var(--atomix-navbar-toggler-bg) 65%, transparent);
|
|
9909
8529
|
}
|
|
9910
8530
|
.c-navbar__toggler:hover {
|
|
9911
8531
|
opacity: 0.8;
|
|
@@ -9954,22 +8574,7 @@ a, a:hover {
|
|
|
9954
8574
|
opacity: 0;
|
|
9955
8575
|
visibility: hidden;
|
|
9956
8576
|
transition: all 0.3s ease-in-out;
|
|
9957
|
-
|
|
9958
|
-
isolation: isolate;
|
|
9959
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 26%, transparent) 0%, transparent 60%);
|
|
9960
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
9961
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
9962
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
9963
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
9964
|
-
}
|
|
9965
|
-
@media (hover: hover) {
|
|
9966
|
-
.c-navbar__backdrop:hover {
|
|
9967
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 40%, transparent) 0%, transparent 60%);
|
|
9968
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
9969
|
-
}
|
|
9970
|
-
}
|
|
9971
|
-
.c-navbar__backdrop:active {
|
|
9972
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 81%, transparent) 100%);
|
|
8577
|
+
background-color: color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 65%, transparent);
|
|
9973
8578
|
}
|
|
9974
8579
|
.c-navbar__backdrop.is-open {
|
|
9975
8580
|
opacity: 1;
|
|
@@ -10050,22 +8655,11 @@ a, a:hover {
|
|
|
10050
8655
|
.c-navbar--glass {
|
|
10051
8656
|
position: relative;
|
|
10052
8657
|
background-color: transparent;
|
|
10053
|
-
position: relative;
|
|
10054
|
-
isolation: isolate;
|
|
10055
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-navbar-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-navbar-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-navbar-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-navbar-bg) 26%, transparent) 0%, transparent 60%);
|
|
10056
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10057
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
10058
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-navbar-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-navbar-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10059
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10060
8658
|
}
|
|
10061
|
-
@
|
|
10062
|
-
|
|
10063
|
-
|
|
10064
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-navbar-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-navbar-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-navbar-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10065
|
-
}
|
|
8659
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
8660
|
+
.c-navbar--glass {
|
|
8661
|
+
background-color: color-mix(in srgb, var(--atomix-navbar-bg) 65%, transparent);
|
|
10066
8662
|
}
|
|
10067
|
-
.c-navbar--glass:active {
|
|
10068
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-navbar-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-navbar-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-navbar-bg) 81%, transparent) 100%);
|
|
10069
8663
|
}
|
|
10070
8664
|
.c-navbar--fixed-bottom {
|
|
10071
8665
|
bottom: 0;
|
|
@@ -10270,22 +8864,7 @@ a, a:hover {
|
|
|
10270
8864
|
border-radius: var(--atomix-callout-border-radius);
|
|
10271
8865
|
border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
|
|
10272
8866
|
transition: opacity var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing), transform var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing);
|
|
10273
|
-
|
|
10274
|
-
isolation: isolate;
|
|
10275
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-bg) 26%, transparent) 0%, transparent 60%);
|
|
10276
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10277
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
10278
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-callout-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10279
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10280
|
-
}
|
|
10281
|
-
@media (hover: hover) {
|
|
10282
|
-
.c-callout:hover {
|
|
10283
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-bg) 40%, transparent) 0%, transparent 60%);
|
|
10284
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-callout-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10285
|
-
}
|
|
10286
|
-
}
|
|
10287
|
-
.c-callout:active {
|
|
10288
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-callout-bg) 81%, transparent) 100%);
|
|
8867
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 65%, transparent);
|
|
10289
8868
|
}
|
|
10290
8869
|
.c-callout__content {
|
|
10291
8870
|
width: 100%;
|
|
@@ -10365,26 +8944,7 @@ a, a:hover {
|
|
|
10365
8944
|
border: none;
|
|
10366
8945
|
box-shadow: var(--atomix-callout-box-shadow);
|
|
10367
8946
|
animation: calloutToastIn 0.3s var(--atomix-callout-transition-timing) forwards;
|
|
10368
|
-
|
|
10369
|
-
isolation: isolate;
|
|
10370
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-toast-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-toast-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-toast-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-toast-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-toast-bg) 26%, transparent) 0%, transparent 60%);
|
|
10371
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10372
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
10373
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10374
|
-
}
|
|
10375
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
10376
|
-
.c-callout--toast {
|
|
10377
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-callout-toast-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-callout-toast-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-toast-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10378
|
-
}
|
|
10379
|
-
}
|
|
10380
|
-
@media (hover: hover) {
|
|
10381
|
-
.c-callout--toast:hover {
|
|
10382
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-toast-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-toast-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-toast-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-toast-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-toast-bg) 40%, transparent) 0%, transparent 60%);
|
|
10383
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-callout-toast-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-toast-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-callout-toast-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10384
|
-
}
|
|
10385
|
-
}
|
|
10386
|
-
.c-callout--toast:active {
|
|
10387
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-toast-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-toast-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-callout-toast-bg) 81%, transparent) 100%);
|
|
8947
|
+
background-color: color-mix(in srgb, var(--atomix-callout-toast-bg) 65%, transparent);
|
|
10388
8948
|
}
|
|
10389
8949
|
.c-callout--toast .c-callout__content {
|
|
10390
8950
|
align-items: flex-start;
|
|
@@ -10462,22 +9022,7 @@ a, a:hover {
|
|
|
10462
9022
|
max-width: var(--atomix-callout-width);
|
|
10463
9023
|
border-radius: var(--atomix-callout-border-radius);
|
|
10464
9024
|
width: 100%;
|
|
10465
|
-
|
|
10466
|
-
isolation: isolate;
|
|
10467
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-bg) 26%, transparent) 0%, transparent 60%);
|
|
10468
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10469
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
10470
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-callout-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10471
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10472
|
-
}
|
|
10473
|
-
@media (hover: hover) {
|
|
10474
|
-
.c-callout--glass .c-callout__glass-content:hover {
|
|
10475
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-bg) 40%, transparent) 0%, transparent 60%);
|
|
10476
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-callout-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10477
|
-
}
|
|
10478
|
-
}
|
|
10479
|
-
.c-callout--glass .c-callout__glass-content:active {
|
|
10480
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-callout-bg) 81%, transparent) 100%);
|
|
9025
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 65%, transparent);
|
|
10481
9026
|
}
|
|
10482
9027
|
.c-callout--glass .c-callout__title {
|
|
10483
9028
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
@@ -10487,26 +9032,7 @@ a, a:hover {
|
|
|
10487
9032
|
}
|
|
10488
9033
|
.c-callout--glass.c-callout--toast {
|
|
10489
9034
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
10490
|
-
|
|
10491
|
-
isolation: isolate;
|
|
10492
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-bg) 26%, transparent) 0%, transparent 60%);
|
|
10493
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10494
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
10495
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10496
|
-
}
|
|
10497
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
10498
|
-
.c-callout--glass.c-callout--toast {
|
|
10499
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-callout-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10500
|
-
}
|
|
10501
|
-
}
|
|
10502
|
-
@media (hover: hover) {
|
|
10503
|
-
.c-callout--glass.c-callout--toast:hover {
|
|
10504
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-callout-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-callout-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-callout-bg) 40%, transparent) 0%, transparent 60%);
|
|
10505
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-callout-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-callout-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-callout-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10506
|
-
}
|
|
10507
|
-
}
|
|
10508
|
-
.c-callout--glass.c-callout--toast:active {
|
|
10509
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-callout-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-callout-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-callout-bg) 81%, transparent) 100%);
|
|
9035
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 65%, transparent);
|
|
10510
9036
|
}
|
|
10511
9037
|
.c-callout.is-hide {
|
|
10512
9038
|
opacity: 0;
|
|
@@ -10654,22 +9180,7 @@ a, a:hover {
|
|
|
10654
9180
|
-webkit-user-select: none;
|
|
10655
9181
|
-moz-user-select: none;
|
|
10656
9182
|
user-select: none;
|
|
10657
|
-
|
|
10658
|
-
isolation: isolate;
|
|
10659
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-pagination-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-pagination-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-pagination-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-pagination-bg) 26%, transparent) 0%, transparent 60%);
|
|
10660
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10661
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
10662
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-pagination-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-pagination-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10663
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10664
|
-
}
|
|
10665
|
-
@media (hover: hover) {
|
|
10666
|
-
.c-pagination__link:hover {
|
|
10667
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-pagination-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-pagination-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-pagination-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-pagination-bg) 40%, transparent) 0%, transparent 60%);
|
|
10668
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-pagination-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-pagination-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10669
|
-
}
|
|
10670
|
-
}
|
|
10671
|
-
.c-pagination__link:active {
|
|
10672
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-pagination-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-pagination-bg) 81%, transparent) 100%);
|
|
9183
|
+
background-color: color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent);
|
|
10673
9184
|
}
|
|
10674
9185
|
.c-pagination__link:hover {
|
|
10675
9186
|
--atomix-pagination-color: var(--atomix-pagination-hover-color);
|
|
@@ -10749,22 +9260,7 @@ a, a:hover {
|
|
|
10749
9260
|
border-radius: var(--atomix-pagination-border-radius);
|
|
10750
9261
|
color: var(--atomix-pagination-color);
|
|
10751
9262
|
transition: all 0.2s ease-in-out;
|
|
10752
|
-
|
|
10753
|
-
isolation: isolate;
|
|
10754
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-pagination-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-pagination-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-pagination-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-pagination-bg) 26%, transparent) 0%, transparent 60%);
|
|
10755
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10756
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
10757
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-pagination-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-pagination-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10758
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10759
|
-
}
|
|
10760
|
-
@media (hover: hover) {
|
|
10761
|
-
.c-pagination__search-input:hover {
|
|
10762
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-pagination-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-pagination-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-pagination-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-pagination-bg) 40%, transparent) 0%, transparent 60%);
|
|
10763
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-pagination-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-pagination-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10764
|
-
}
|
|
10765
|
-
}
|
|
10766
|
-
.c-pagination__search-input:active {
|
|
10767
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-pagination-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-pagination-bg) 81%, transparent) 100%);
|
|
9263
|
+
background-color: color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent);
|
|
10768
9264
|
}
|
|
10769
9265
|
.c-pagination__search-input:focus {
|
|
10770
9266
|
outline: none;
|
|
@@ -10787,22 +9283,7 @@ a, a:hover {
|
|
|
10787
9283
|
color: var(--atomix-pagination-color);
|
|
10788
9284
|
cursor: pointer;
|
|
10789
9285
|
transition: all 0.2s ease-in-out;
|
|
10790
|
-
|
|
10791
|
-
isolation: isolate;
|
|
10792
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-pagination-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-pagination-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-pagination-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-pagination-bg) 26%, transparent) 0%, transparent 60%);
|
|
10793
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10794
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
10795
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-pagination-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-pagination-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10796
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10797
|
-
}
|
|
10798
|
-
@media (hover: hover) {
|
|
10799
|
-
.c-pagination__search-button:hover {
|
|
10800
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-pagination-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-pagination-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-pagination-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-pagination-bg) 40%, transparent) 0%, transparent 60%);
|
|
10801
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-pagination-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-pagination-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-pagination-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10802
|
-
}
|
|
10803
|
-
}
|
|
10804
|
-
.c-pagination__search-button:active {
|
|
10805
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-pagination-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-pagination-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-pagination-bg) 81%, transparent) 100%);
|
|
9286
|
+
background-color: color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent);
|
|
10806
9287
|
}
|
|
10807
9288
|
.c-pagination__search-button:hover {
|
|
10808
9289
|
--atomix-pagination-color: var(--atomix-pagination-hover-color);
|
|
@@ -10853,26 +9334,7 @@ a, a:hover {
|
|
|
10853
9334
|
padding: var(--atomix-popover-padding-y) var(--atomix-popover-padding-x);
|
|
10854
9335
|
border-radius: var(--atomix-popover-border-radius);
|
|
10855
9336
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
10856
|
-
|
|
10857
|
-
isolation: isolate;
|
|
10858
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-popover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-popover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-popover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-popover-bg) 26%, transparent) 0%, transparent 60%);
|
|
10859
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10860
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
10861
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10862
|
-
}
|
|
10863
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
10864
|
-
.c-popover__content-inner {
|
|
10865
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10866
|
-
}
|
|
10867
|
-
}
|
|
10868
|
-
@media (hover: hover) {
|
|
10869
|
-
.c-popover__content-inner:hover {
|
|
10870
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-popover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-popover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-popover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-popover-bg) 40%, transparent) 0%, transparent 60%);
|
|
10871
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-popover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10872
|
-
}
|
|
10873
|
-
}
|
|
10874
|
-
.c-popover__content-inner:active {
|
|
10875
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-popover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-popover-bg) 81%, transparent) 100%);
|
|
9337
|
+
background-color: color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent);
|
|
10876
9338
|
}
|
|
10877
9339
|
.c-popover__arrow {
|
|
10878
9340
|
position: absolute;
|
|
@@ -10881,26 +9343,7 @@ a, a:hover {
|
|
|
10881
9343
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
10882
9344
|
z-index: 1;
|
|
10883
9345
|
transform-origin: center;
|
|
10884
|
-
|
|
10885
|
-
isolation: isolate;
|
|
10886
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-popover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-popover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-popover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-popover-bg) 26%, transparent) 0%, transparent 60%);
|
|
10887
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10888
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
10889
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10890
|
-
}
|
|
10891
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
10892
|
-
.c-popover__arrow {
|
|
10893
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10894
|
-
}
|
|
10895
|
-
}
|
|
10896
|
-
@media (hover: hover) {
|
|
10897
|
-
.c-popover__arrow:hover {
|
|
10898
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-popover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-popover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-popover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-popover-bg) 40%, transparent) 0%, transparent 60%);
|
|
10899
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-popover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10900
|
-
}
|
|
10901
|
-
}
|
|
10902
|
-
.c-popover__arrow:active {
|
|
10903
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-popover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-popover-bg) 81%, transparent) 100%);
|
|
9346
|
+
background-color: color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent);
|
|
10904
9347
|
}
|
|
10905
9348
|
.c-popover.is-open {
|
|
10906
9349
|
opacity: 1;
|
|
@@ -10929,26 +9372,7 @@ a, a:hover {
|
|
|
10929
9372
|
}
|
|
10930
9373
|
.c-popover--glass .c-popover__content-inner {
|
|
10931
9374
|
box-shadow: none;
|
|
10932
|
-
|
|
10933
|
-
isolation: isolate;
|
|
10934
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-popover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-popover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-popover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-popover-bg) 26%, transparent) 0%, transparent 60%);
|
|
10935
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10936
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
10937
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10938
|
-
}
|
|
10939
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
10940
|
-
.c-popover--glass .c-popover__content-inner {
|
|
10941
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-popover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10942
|
-
}
|
|
10943
|
-
}
|
|
10944
|
-
@media (hover: hover) {
|
|
10945
|
-
.c-popover--glass .c-popover__content-inner:hover {
|
|
10946
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-popover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-popover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-popover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-popover-bg) 40%, transparent) 0%, transparent 60%);
|
|
10947
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-popover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-popover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-popover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10948
|
-
}
|
|
10949
|
-
}
|
|
10950
|
-
.c-popover--glass .c-popover__content-inner:active {
|
|
10951
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-popover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-popover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-popover-bg) 81%, transparent) 100%);
|
|
9375
|
+
background-color: color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent);
|
|
10952
9376
|
}
|
|
10953
9377
|
.c-product-review {
|
|
10954
9378
|
--atomix-product-review-padding: 1.5rem;
|
|
@@ -10966,22 +9390,7 @@ a, a:hover {
|
|
|
10966
9390
|
width: 100%;
|
|
10967
9391
|
max-width: 37.5rem;
|
|
10968
9392
|
margin: 0 auto;
|
|
10969
|
-
|
|
10970
|
-
isolation: isolate;
|
|
10971
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-product-review-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-product-review-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-product-review-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-product-review-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-product-review-bg) 26%, transparent) 0%, transparent 60%);
|
|
10972
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
10973
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
10974
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-product-review-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-product-review-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-product-review-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
10975
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
10976
|
-
}
|
|
10977
|
-
@media (hover: hover) {
|
|
10978
|
-
.c-product-review:hover {
|
|
10979
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-product-review-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-product-review-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-product-review-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-product-review-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-product-review-bg) 40%, transparent) 0%, transparent 60%);
|
|
10980
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-product-review-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-product-review-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-product-review-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
10981
|
-
}
|
|
10982
|
-
}
|
|
10983
|
-
.c-product-review:active {
|
|
10984
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-product-review-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-product-review-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-product-review-bg) 81%, transparent) 100%);
|
|
9393
|
+
background-color: color-mix(in srgb, var(--atomix-product-review-bg) 65%, transparent);
|
|
10985
9394
|
}
|
|
10986
9395
|
.c-product-review__header {
|
|
10987
9396
|
display: flex;
|
|
@@ -11040,22 +9449,7 @@ a, a:hover {
|
|
|
11040
9449
|
color: var(--atomix-body-color);
|
|
11041
9450
|
font-family: inherit;
|
|
11042
9451
|
resize: vertical;
|
|
11043
|
-
|
|
11044
|
-
isolation: isolate;
|
|
11045
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 26%, transparent) 0%, transparent 60%);
|
|
11046
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11047
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11048
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11049
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11050
|
-
}
|
|
11051
|
-
@media (hover: hover) {
|
|
11052
|
-
.c-product-review__textarea:hover {
|
|
11053
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 40%, transparent) 0%, transparent 60%);
|
|
11054
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-body-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11055
|
-
}
|
|
11056
|
-
}
|
|
11057
|
-
.c-product-review__textarea:active {
|
|
11058
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-body-bg) 81%, transparent) 100%);
|
|
9452
|
+
background-color: color-mix(in srgb, var(--atomix-body-bg) 65%, transparent);
|
|
11059
9453
|
}
|
|
11060
9454
|
.c-product-review__textarea:focus {
|
|
11061
9455
|
outline: none;
|
|
@@ -11102,22 +9496,7 @@ a, a:hover {
|
|
|
11102
9496
|
height: var(--atomix-progress-bar-height);
|
|
11103
9497
|
border-radius: var(--atomix-progress-border-radius);
|
|
11104
9498
|
overflow: hidden;
|
|
11105
|
-
|
|
11106
|
-
isolation: isolate;
|
|
11107
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-progress-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-progress-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-progress-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-progress-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-progress-bg) 26%, transparent) 0%, transparent 60%);
|
|
11108
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11109
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11110
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-progress-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-progress-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-progress-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11111
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11112
|
-
}
|
|
11113
|
-
@media (hover: hover) {
|
|
11114
|
-
.c-progress:hover {
|
|
11115
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-progress-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-progress-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-progress-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-progress-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-progress-bg) 40%, transparent) 0%, transparent 60%);
|
|
11116
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-progress-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-progress-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-progress-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11117
|
-
}
|
|
11118
|
-
}
|
|
11119
|
-
.c-progress:active {
|
|
11120
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-progress-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-progress-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-progress-bg) 81%, transparent) 100%);
|
|
9499
|
+
background-color: color-mix(in srgb, var(--atomix-progress-bg) 65%, transparent);
|
|
11121
9500
|
}
|
|
11122
9501
|
.c-progress__bar {
|
|
11123
9502
|
width: var(--atomix-progress-bar-width);
|
|
@@ -11125,22 +9504,7 @@ a, a:hover {
|
|
|
11125
9504
|
color: var(--atomix-progress-bar-color);
|
|
11126
9505
|
border-radius: var(--atomix-progress-border-radius);
|
|
11127
9506
|
transition: var(--atomix-progress-bar-transition) var(--atomix-progress-bar-easing);
|
|
11128
|
-
|
|
11129
|
-
isolation: isolate;
|
|
11130
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-progress-bar-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-progress-bar-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-progress-bar-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-progress-bar-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-progress-bar-bg) 26%, transparent) 0%, transparent 60%);
|
|
11131
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11132
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11133
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-progress-bar-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-progress-bar-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-progress-bar-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11134
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11135
|
-
}
|
|
11136
|
-
@media (hover: hover) {
|
|
11137
|
-
.c-progress__bar:hover {
|
|
11138
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-progress-bar-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-progress-bar-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-progress-bar-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-progress-bar-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-progress-bar-bg) 40%, transparent) 0%, transparent 60%);
|
|
11139
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-progress-bar-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-progress-bar-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-progress-bar-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11140
|
-
}
|
|
11141
|
-
}
|
|
11142
|
-
.c-progress__bar:active {
|
|
11143
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-progress-bar-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-progress-bar-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-progress-bar-bg) 81%, transparent) 100%);
|
|
9507
|
+
background-color: color-mix(in srgb, var(--atomix-progress-bar-bg) 65%, transparent);
|
|
11144
9508
|
}
|
|
11145
9509
|
.c-progress--primary {
|
|
11146
9510
|
--atomix-progress-bar-bg: var(--atomix-primary);
|
|
@@ -11345,22 +9709,7 @@ a, a:hover {
|
|
|
11345
9709
|
max-width: var(--atomix-river-width);
|
|
11346
9710
|
padding: var(--atomix-river-padding-y) var(--atomix-river-padding-x);
|
|
11347
9711
|
border-radius: var(--atomix-river-border-radius);
|
|
11348
|
-
|
|
11349
|
-
isolation: isolate;
|
|
11350
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-river-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-river-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-river-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-river-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-river-bg) 26%, transparent) 0%, transparent 60%);
|
|
11351
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11352
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11353
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-river-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-river-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-river-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11354
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11355
|
-
}
|
|
11356
|
-
@media (hover: hover) {
|
|
11357
|
-
.c-river:hover {
|
|
11358
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-river-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-river-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-river-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-river-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-river-bg) 40%, transparent) 0%, transparent 60%);
|
|
11359
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-river-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-river-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-river-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11360
|
-
}
|
|
11361
|
-
}
|
|
11362
|
-
.c-river:active {
|
|
11363
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-river-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-river-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-river-bg) 81%, transparent) 100%);
|
|
9712
|
+
background-color: color-mix(in srgb, var(--atomix-river-bg) 65%, transparent);
|
|
11364
9713
|
}
|
|
11365
9714
|
.c-river__bg {
|
|
11366
9715
|
position: absolute;
|
|
@@ -11382,22 +9731,7 @@ a, a:hover {
|
|
|
11382
9731
|
inset: 0;
|
|
11383
9732
|
opacity: var(--atomix-river-overlay-opacity);
|
|
11384
9733
|
border-radius: var(--atomix-river-border-radius);
|
|
11385
|
-
|
|
11386
|
-
isolation: isolate;
|
|
11387
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-river-overlay) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-river-overlay) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-river-overlay) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-river-overlay) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-river-overlay) 26%, transparent) 0%, transparent 60%);
|
|
11388
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11389
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11390
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-river-overlay) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-river-overlay) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-river-overlay) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11391
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11392
|
-
}
|
|
11393
|
-
@media (hover: hover) {
|
|
11394
|
-
.c-river__overlay:hover {
|
|
11395
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-river-overlay) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-river-overlay) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-river-overlay) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-river-overlay) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-river-overlay) 40%, transparent) 0%, transparent 60%);
|
|
11396
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-river-overlay) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-river-overlay) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-river-overlay) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11397
|
-
}
|
|
11398
|
-
}
|
|
11399
|
-
.c-river__overlay:active {
|
|
11400
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-river-overlay) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-river-overlay) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-river-overlay) 81%, transparent) 100%);
|
|
9734
|
+
background-color: color-mix(in srgb, var(--atomix-river-overlay) 65%, transparent);
|
|
11401
9735
|
}
|
|
11402
9736
|
.c-river__container {
|
|
11403
9737
|
position: relative;
|
|
@@ -11619,22 +9953,7 @@ a, a:hover {
|
|
|
11619
9953
|
width: 100%;
|
|
11620
9954
|
height: 100%;
|
|
11621
9955
|
opacity: var(--atomix-sectionintro-overlay-opacity);
|
|
11622
|
-
|
|
11623
|
-
isolation: isolate;
|
|
11624
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 26%, transparent) 0%, transparent 60%);
|
|
11625
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11626
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11627
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11628
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11629
|
-
}
|
|
11630
|
-
@media (hover: hover) {
|
|
11631
|
-
.c-sectionintro__overlay:hover {
|
|
11632
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 40%, transparent) 0%, transparent 60%);
|
|
11633
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11634
|
-
}
|
|
11635
|
-
}
|
|
11636
|
-
.c-sectionintro__overlay:active {
|
|
11637
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 81%, transparent) 100%);
|
|
9956
|
+
background-color: color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 65%, transparent);
|
|
11638
9957
|
}
|
|
11639
9958
|
.c-sectionintro--has-bg {
|
|
11640
9959
|
color: var(--atomix-color-white);
|
|
@@ -11720,22 +10039,7 @@ a, a:hover {
|
|
|
11720
10039
|
transition-duration: 0.2s;
|
|
11721
10040
|
transition-timing-function: ease-in-out;
|
|
11722
10041
|
transition-delay: 0s;
|
|
11723
|
-
|
|
11724
|
-
isolation: isolate;
|
|
11725
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-select-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-select-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-select-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-bg) 26%, transparent) 0%, transparent 60%);
|
|
11726
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11727
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11728
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-select-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-select-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11729
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11730
|
-
}
|
|
11731
|
-
@media (hover: hover) {
|
|
11732
|
-
.c-select__selected:hover {
|
|
11733
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-select-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-select-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-select-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-bg) 40%, transparent) 0%, transparent 60%);
|
|
11734
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-select-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-select-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11735
|
-
}
|
|
11736
|
-
}
|
|
11737
|
-
.c-select__selected:active {
|
|
11738
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-select-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-select-bg) 81%, transparent) 100%);
|
|
10042
|
+
background-color: color-mix(in srgb, var(--atomix-select-bg) 65%, transparent);
|
|
11739
10043
|
}
|
|
11740
10044
|
.c-select__selected:hover {
|
|
11741
10045
|
border-color: var(--atomix-select-border-color-hover);
|
|
@@ -11766,26 +10070,7 @@ a, a:hover {
|
|
|
11766
10070
|
transition-duration: 0.2s;
|
|
11767
10071
|
transition-timing-function: ease-in-out;
|
|
11768
10072
|
transition-delay: 0s;
|
|
11769
|
-
|
|
11770
|
-
isolation: isolate;
|
|
11771
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-panel-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-select-panel-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-select-panel-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-select-panel-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-panel-bg) 26%, transparent) 0%, transparent 60%);
|
|
11772
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11773
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11774
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11775
|
-
}
|
|
11776
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
11777
|
-
.c-select__dropdown {
|
|
11778
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-select-panel-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-select-panel-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-panel-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11779
|
-
}
|
|
11780
|
-
}
|
|
11781
|
-
@media (hover: hover) {
|
|
11782
|
-
.c-select__dropdown:hover {
|
|
11783
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-panel-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-select-panel-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-select-panel-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-select-panel-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-panel-bg) 40%, transparent) 0%, transparent 60%);
|
|
11784
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-select-panel-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-panel-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-select-panel-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11785
|
-
}
|
|
11786
|
-
}
|
|
11787
|
-
.c-select__dropdown:active {
|
|
11788
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-panel-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-select-panel-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-select-panel-bg) 81%, transparent) 100%);
|
|
10073
|
+
background-color: color-mix(in srgb, var(--atomix-select-panel-bg) 65%, transparent);
|
|
11789
10074
|
}
|
|
11790
10075
|
.c-select__panel {
|
|
11791
10076
|
padding: var(--atomix-select-panel-padding-x) var(--atomix-select-panel-padding-y);
|
|
@@ -11803,43 +10088,13 @@ a, a:hover {
|
|
|
11803
10088
|
transition-duration: 0.2s;
|
|
11804
10089
|
transition-timing-function: ease-in-out;
|
|
11805
10090
|
transition-delay: 0s;
|
|
11806
|
-
|
|
11807
|
-
isolation: isolate;
|
|
11808
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-item-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-select-item-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-select-item-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-select-item-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-item-bg) 26%, transparent) 0%, transparent 60%);
|
|
11809
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11810
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11811
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-select-item-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-select-item-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-item-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11812
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11813
|
-
}
|
|
11814
|
-
@media (hover: hover) {
|
|
11815
|
-
.c-select__item:hover {
|
|
11816
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-item-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-select-item-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-select-item-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-select-item-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-item-bg) 40%, transparent) 0%, transparent 60%);
|
|
11817
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-select-item-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-item-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-select-item-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11818
|
-
}
|
|
11819
|
-
}
|
|
11820
|
-
.c-select__item:active {
|
|
11821
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-item-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-select-item-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-select-item-bg) 81%, transparent) 100%);
|
|
10091
|
+
background-color: color-mix(in srgb, var(--atomix-select-item-bg) 65%, transparent);
|
|
11822
10092
|
}
|
|
11823
10093
|
.c-select__item, .c-select__item > * {
|
|
11824
10094
|
cursor: pointer;
|
|
11825
10095
|
}
|
|
11826
10096
|
.c-select__item:hover {
|
|
11827
|
-
|
|
11828
|
-
isolation: isolate;
|
|
11829
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-item-bg-hover) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 26%, transparent) 0%, transparent 60%);
|
|
11830
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11831
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11832
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-select-item-bg-hover) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-select-item-bg-hover) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-item-bg-hover) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11833
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11834
|
-
}
|
|
11835
|
-
@media (hover: hover) {
|
|
11836
|
-
.c-select__item:hover:hover {
|
|
11837
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-item-bg-hover) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 40%, transparent) 0%, transparent 60%);
|
|
11838
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-select-item-bg-hover) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-select-item-bg-hover) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-select-item-bg-hover) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11839
|
-
}
|
|
11840
|
-
}
|
|
11841
|
-
.c-select__item:hover:active {
|
|
11842
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-select-item-bg-hover) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-select-item-bg-hover) 81%, transparent) 100%);
|
|
10097
|
+
background-color: color-mix(in srgb, var(--atomix-select-item-bg-hover) 65%, transparent);
|
|
11843
10098
|
}
|
|
11844
10099
|
.c-select--lg {
|
|
11845
10100
|
--atomix-select-font-size: var(--atomix-select-font-size-lg);
|
|
@@ -11892,26 +10147,7 @@ a, a:hover {
|
|
|
11892
10147
|
border-radius: var(--atomix-side-menu-border-radius);
|
|
11893
10148
|
border: var(--atomix-side-menu-border-width) solid var(--atomix-side-menu-border-color);
|
|
11894
10149
|
box-shadow: var(--atomix-side-menu-box-shadow);
|
|
11895
|
-
|
|
11896
|
-
isolation: isolate;
|
|
11897
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-bg) 26%, transparent) 0%, transparent 60%);
|
|
11898
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11899
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11900
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11901
|
-
}
|
|
11902
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
11903
|
-
.c-side-menu {
|
|
11904
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11905
|
-
}
|
|
11906
|
-
}
|
|
11907
|
-
@media (hover: hover) {
|
|
11908
|
-
.c-side-menu:hover {
|
|
11909
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-bg) 40%, transparent) 0%, transparent 60%);
|
|
11910
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-side-menu-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-side-menu-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11911
|
-
}
|
|
11912
|
-
}
|
|
11913
|
-
.c-side-menu:active {
|
|
11914
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-side-menu-bg) 81%, transparent) 100%);
|
|
10150
|
+
background-color: color-mix(in srgb, var(--atomix-side-menu-bg) 65%, transparent);
|
|
11915
10151
|
}
|
|
11916
10152
|
@media (max-width: 991.98px) {
|
|
11917
10153
|
.c-side-menu {
|
|
@@ -11955,40 +10191,10 @@ a, a:hover {
|
|
|
11955
10191
|
transition: var(--atomix-side-menu-toggler-transition);
|
|
11956
10192
|
text-align: left;
|
|
11957
10193
|
margin: 0;
|
|
11958
|
-
|
|
11959
|
-
isolation: isolate;
|
|
11960
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 26%, transparent) 0%, transparent 60%);
|
|
11961
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11962
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11963
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11964
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11965
|
-
}
|
|
11966
|
-
@media (hover: hover) {
|
|
11967
|
-
.c-side-menu__toggler:hover {
|
|
11968
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 40%, transparent) 0%, transparent 60%);
|
|
11969
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11970
|
-
}
|
|
11971
|
-
}
|
|
11972
|
-
.c-side-menu__toggler:active {
|
|
11973
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 81%, transparent) 100%);
|
|
10194
|
+
background-color: color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 65%, transparent);
|
|
11974
10195
|
}
|
|
11975
10196
|
.c-side-menu__toggler:hover {
|
|
11976
|
-
|
|
11977
|
-
isolation: isolate;
|
|
11978
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
11979
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
11980
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
11981
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
11982
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11983
|
-
}
|
|
11984
|
-
@media (hover: hover) {
|
|
11985
|
-
.c-side-menu__toggler:hover:hover {
|
|
11986
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
11987
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
11988
|
-
}
|
|
11989
|
-
}
|
|
11990
|
-
.c-side-menu__toggler:hover:active {
|
|
11991
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 81%, transparent) 100%);
|
|
10197
|
+
background-color: color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 65%, transparent);
|
|
11992
10198
|
}
|
|
11993
10199
|
.c-side-menu__toggler:focus-visible {
|
|
11994
10200
|
outline: 2px solid var(--atomix-focus-ring-color);
|
|
@@ -12055,42 +10261,12 @@ a, a:hover {
|
|
|
12055
10261
|
cursor: pointer;
|
|
12056
10262
|
transition: var(--atomix-side-menu-item-transition);
|
|
12057
10263
|
position: relative;
|
|
12058
|
-
|
|
12059
|
-
isolation: isolate;
|
|
12060
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 26%, transparent) 0%, transparent 60%);
|
|
12061
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12062
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12063
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-item-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-item-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12064
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12065
|
-
}
|
|
12066
|
-
@media (hover: hover) {
|
|
12067
|
-
.c-side-menu__link:hover {
|
|
12068
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 40%, transparent) 0%, transparent 60%);
|
|
12069
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-side-menu-item-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-side-menu-item-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12070
|
-
}
|
|
12071
|
-
}
|
|
12072
|
-
.c-side-menu__link:active {
|
|
12073
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-side-menu-item-bg) 81%, transparent) 100%);
|
|
10264
|
+
background-color: color-mix(in srgb, var(--atomix-side-menu-item-bg) 65%, transparent);
|
|
12074
10265
|
}
|
|
12075
10266
|
.c-side-menu__link:hover {
|
|
12076
10267
|
color: var(--atomix-side-menu-item-hover-color);
|
|
12077
10268
|
text-decoration: none;
|
|
12078
|
-
|
|
12079
|
-
isolation: isolate;
|
|
12080
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
12081
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12082
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12083
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12084
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12085
|
-
}
|
|
12086
|
-
@media (hover: hover) {
|
|
12087
|
-
.c-side-menu__link:hover:hover {
|
|
12088
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
12089
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12090
|
-
}
|
|
12091
|
-
}
|
|
12092
|
-
.c-side-menu__link:hover:active {
|
|
12093
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 81%, transparent) 100%);
|
|
10269
|
+
background-color: color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 65%, transparent);
|
|
12094
10270
|
}
|
|
12095
10271
|
.c-side-menu__link:focus-visible {
|
|
12096
10272
|
outline: 2px solid var(--atomix-focus-ring-color);
|
|
@@ -12105,44 +10281,14 @@ a, a:hover {
|
|
|
12105
10281
|
.c-side-menu__link.is-active {
|
|
12106
10282
|
color: var(--atomix-side-menu-item-active-color);
|
|
12107
10283
|
font-weight: 500;
|
|
12108
|
-
|
|
12109
|
-
isolation: isolate;
|
|
12110
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 26%, transparent) 0%, transparent 60%);
|
|
12111
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12112
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12113
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12114
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12115
|
-
}
|
|
12116
|
-
@media (hover: hover) {
|
|
12117
|
-
.c-side-menu__link.is-active:hover {
|
|
12118
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 40%, transparent) 0%, transparent 60%);
|
|
12119
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12120
|
-
}
|
|
12121
|
-
}
|
|
12122
|
-
.c-side-menu__link.is-active:active {
|
|
12123
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 81%, transparent) 100%);
|
|
10284
|
+
background-color: color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 65%, transparent);
|
|
12124
10285
|
}
|
|
12125
10286
|
.c-side-menu__link.is-disabled, .c-side-menu__link[aria-disabled=true] {
|
|
12126
10287
|
color: var(--atomix-side-menu-item-disabled-color);
|
|
12127
10288
|
cursor: not-allowed;
|
|
12128
10289
|
pointer-events: none;
|
|
12129
10290
|
opacity: 0.6;
|
|
12130
|
-
|
|
12131
|
-
isolation: isolate;
|
|
12132
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 26%, transparent) 0%, transparent 60%);
|
|
12133
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12134
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12135
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12136
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12137
|
-
}
|
|
12138
|
-
@media (hover: hover) {
|
|
12139
|
-
.c-side-menu__link.is-disabled:hover, .c-side-menu__link[aria-disabled=true]:hover {
|
|
12140
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 40%, transparent) 0%, transparent 60%);
|
|
12141
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12142
|
-
}
|
|
12143
|
-
}
|
|
12144
|
-
.c-side-menu__link.is-disabled:active, .c-side-menu__link[aria-disabled=true]:active {
|
|
12145
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 81%, transparent) 100%);
|
|
10291
|
+
background-color: color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 65%, transparent);
|
|
12146
10292
|
}
|
|
12147
10293
|
.c-side-menu__link-icon {
|
|
12148
10294
|
flex-shrink: 0;
|
|
@@ -12214,22 +10360,7 @@ a, a:hover {
|
|
|
12214
10360
|
pointer-events: none;
|
|
12215
10361
|
vertical-align: middle;
|
|
12216
10362
|
cursor: wait;
|
|
12217
|
-
|
|
12218
|
-
isolation: isolate;
|
|
12219
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, 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%) 78%, 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%) 65%, transparent) 40%, 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) 70%, 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%) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, 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%) 26%, transparent) 0%, transparent 60%);
|
|
12220
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12221
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12222
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px 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 16px 32px 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), 0 24px 48px 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%) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12223
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12224
|
-
}
|
|
12225
|
-
@media (hover: hover) {
|
|
12226
|
-
.c-skeleton:hover {
|
|
12227
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, 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%) 96%, 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%) 80%, transparent) 40%, 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%) 68%, transparent) 70%, 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%) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, 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) 0%, transparent 60%);
|
|
12228
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px 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%) 30%, transparent), 0 24px 48px 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%) 15%, transparent), 0 36px 72px 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), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12229
|
-
}
|
|
12230
|
-
}
|
|
12231
|
-
.c-skeleton:active {
|
|
12232
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, 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%) 108%, 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%) 90%, transparent) 50%, 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%) 81%, transparent) 100%);
|
|
10363
|
+
background-color: 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%) 65%, transparent);
|
|
12233
10364
|
}
|
|
12234
10365
|
.c-skeleton--rect {
|
|
12235
10366
|
width: calc(var(--atomix-skeleton-height) * 5.15);
|
|
@@ -12315,22 +10446,7 @@ a, a:hover {
|
|
|
12315
10446
|
justify-content: center;
|
|
12316
10447
|
border: 2px dashed var(--atomix-primary-border-subtle);
|
|
12317
10448
|
border-radius: 0.25rem;
|
|
12318
|
-
|
|
12319
|
-
isolation: isolate;
|
|
12320
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
12321
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12322
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12323
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12324
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12325
|
-
}
|
|
12326
|
-
@media (hover: hover) {
|
|
12327
|
-
.c-slider--empty:hover {
|
|
12328
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
12329
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12330
|
-
}
|
|
12331
|
-
}
|
|
12332
|
-
.c-slider--empty:active {
|
|
12333
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 81%, transparent) 100%);
|
|
10449
|
+
background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
|
|
12334
10450
|
}
|
|
12335
10451
|
.c-slider__wrapper {
|
|
12336
10452
|
position: relative;
|
|
@@ -12376,57 +10492,13 @@ a, a:hover {
|
|
|
12376
10492
|
justify-content: center;
|
|
12377
10493
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12378
10494
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
12379
|
-
|
|
12380
|
-
isolation: isolate;
|
|
12381
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
12382
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12383
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12384
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12385
|
-
}
|
|
12386
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
12387
|
-
.c-slider__navigation-prev,
|
|
12388
|
-
.c-slider__navigation-next {
|
|
12389
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-primary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12390
|
-
}
|
|
12391
|
-
}
|
|
12392
|
-
@media (hover: hover) {
|
|
12393
|
-
.c-slider__navigation-prev:hover,
|
|
12394
|
-
.c-slider__navigation-next:hover {
|
|
12395
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
12396
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-primary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-primary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12397
|
-
}
|
|
12398
|
-
}
|
|
12399
|
-
.c-slider__navigation-prev:active,
|
|
12400
|
-
.c-slider__navigation-next:active {
|
|
12401
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-primary-bg-subtle) 81%, transparent) 100%);
|
|
10495
|
+
background-color: color-mix(in srgb, var(--atomix-primary-bg-subtle) 65%, transparent);
|
|
12402
10496
|
}
|
|
12403
10497
|
.c-slider__navigation-prev:hover,
|
|
12404
10498
|
.c-slider__navigation-next:hover {
|
|
12405
10499
|
transform: translateY(-50%) scale(1.05);
|
|
12406
10500
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
12407
|
-
|
|
12408
|
-
isolation: isolate;
|
|
12409
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
12410
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12411
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12412
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12413
|
-
}
|
|
12414
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
12415
|
-
.c-slider__navigation-prev:hover,
|
|
12416
|
-
.c-slider__navigation-next:hover {
|
|
12417
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12418
|
-
}
|
|
12419
|
-
}
|
|
12420
|
-
@media (hover: hover) {
|
|
12421
|
-
.c-slider__navigation-prev:hover:hover,
|
|
12422
|
-
.c-slider__navigation-next:hover:hover {
|
|
12423
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
12424
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12425
|
-
}
|
|
12426
|
-
}
|
|
12427
|
-
.c-slider__navigation-prev:hover:active,
|
|
12428
|
-
.c-slider__navigation-next:hover:active {
|
|
12429
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 81%, transparent) 100%);
|
|
10501
|
+
background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
|
|
12430
10502
|
}
|
|
12431
10503
|
.c-slider__navigation-prev:active,
|
|
12432
10504
|
.c-slider__navigation-next:active {
|
|
@@ -12479,63 +10551,18 @@ a, a:hover {
|
|
|
12479
10551
|
cursor: pointer;
|
|
12480
10552
|
pointer-events: auto;
|
|
12481
10553
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12482
|
-
|
|
12483
|
-
isolation: isolate;
|
|
12484
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
12485
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12486
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12487
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12488
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12489
|
-
}
|
|
12490
|
-
@media (hover: hover) {
|
|
12491
|
-
.c-slider__pagination-bullet:hover {
|
|
12492
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
12493
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12494
|
-
}
|
|
12495
|
-
}
|
|
12496
|
-
.c-slider__pagination-bullet:active {
|
|
12497
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 81%, transparent) 100%);
|
|
10554
|
+
background-color: color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 65%, transparent);
|
|
12498
10555
|
}
|
|
12499
10556
|
.c-slider__pagination-bullet:hover {
|
|
12500
10557
|
transform: scale(1.2);
|
|
12501
|
-
|
|
12502
|
-
isolation: isolate;
|
|
12503
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 26%, transparent) 0%, transparent 60%);
|
|
12504
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12505
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12506
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12507
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12508
|
-
}
|
|
12509
|
-
@media (hover: hover) {
|
|
12510
|
-
.c-slider__pagination-bullet:hover:hover {
|
|
12511
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 40%, transparent) 0%, transparent 60%);
|
|
12512
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-secondary-bg-subtle) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-secondary-bg-subtle) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12513
|
-
}
|
|
12514
|
-
}
|
|
12515
|
-
.c-slider__pagination-bullet:hover:active {
|
|
12516
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-secondary-bg-subtle) 81%, transparent) 100%);
|
|
10558
|
+
background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
|
|
12517
10559
|
}
|
|
12518
10560
|
.c-slider__pagination-bullet:active {
|
|
12519
10561
|
transform: scale(1.1);
|
|
12520
10562
|
}
|
|
12521
10563
|
.c-slider__pagination-bullet--active {
|
|
12522
10564
|
transform: scale(1.2);
|
|
12523
|
-
|
|
12524
|
-
isolation: isolate;
|
|
12525
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-primary) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-primary) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary) 26%, transparent) 0%, transparent 60%);
|
|
12526
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12527
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12528
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-primary) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12529
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12530
|
-
}
|
|
12531
|
-
@media (hover: hover) {
|
|
12532
|
-
.c-slider__pagination-bullet--active:hover {
|
|
12533
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-primary) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-primary) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-primary) 40%, transparent) 0%, transparent 60%);
|
|
12534
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-primary) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-primary) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-primary) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12535
|
-
}
|
|
12536
|
-
}
|
|
12537
|
-
.c-slider__pagination-bullet--active:active {
|
|
12538
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-primary) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-primary) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-primary) 81%, transparent) 100%);
|
|
10565
|
+
background-color: color-mix(in srgb, var(--atomix-primary) 65%, transparent);
|
|
12539
10566
|
}
|
|
12540
10567
|
.c-slider__empty-message {
|
|
12541
10568
|
color: var(--atomix-tertiary-text);
|
|
@@ -12692,22 +10719,7 @@ a, a:hover {
|
|
|
12692
10719
|
width: var(--atomix-steps-line-width);
|
|
12693
10720
|
height: var(--atomix-steps-line-height);
|
|
12694
10721
|
transition: 1s;
|
|
12695
|
-
|
|
12696
|
-
isolation: isolate;
|
|
12697
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-steps-item-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-steps-item-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-steps-item-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-steps-item-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-steps-item-bg) 26%, transparent) 0%, transparent 60%);
|
|
12698
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12699
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12700
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-steps-item-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-steps-item-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-steps-item-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12701
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12702
|
-
}
|
|
12703
|
-
@media (hover: hover) {
|
|
12704
|
-
.c-steps__line:hover {
|
|
12705
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-steps-item-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-steps-item-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-steps-item-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-steps-item-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-steps-item-bg) 40%, transparent) 0%, transparent 60%);
|
|
12706
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-steps-item-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-steps-item-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-steps-item-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12707
|
-
}
|
|
12708
|
-
}
|
|
12709
|
-
.c-steps__line:active {
|
|
12710
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-steps-item-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-steps-item-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-steps-item-bg) 81%, transparent) 100%);
|
|
10722
|
+
background-color: color-mix(in srgb, var(--atomix-steps-item-bg) 65%, transparent);
|
|
12711
10723
|
}
|
|
12712
10724
|
.c-steps__content {
|
|
12713
10725
|
display: flex;
|
|
@@ -12723,22 +10735,7 @@ a, a:hover {
|
|
|
12723
10735
|
color: var(--atomix-steps-item-number-color);
|
|
12724
10736
|
font-size: var(--atomix-steps-item-number-font-size);
|
|
12725
10737
|
border-radius: var(--atomix-steps-item-number-border-radius);
|
|
12726
|
-
|
|
12727
|
-
isolation: isolate;
|
|
12728
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-steps-item-number-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 26%, transparent) 0%, transparent 60%);
|
|
12729
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12730
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12731
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-steps-item-number-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-steps-item-number-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-steps-item-number-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12732
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12733
|
-
}
|
|
12734
|
-
@media (hover: hover) {
|
|
12735
|
-
.c-steps__number:hover {
|
|
12736
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-steps-item-number-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 40%, transparent) 0%, transparent 60%);
|
|
12737
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-steps-item-number-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-steps-item-number-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-steps-item-number-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12738
|
-
}
|
|
12739
|
-
}
|
|
12740
|
-
.c-steps__number:active {
|
|
12741
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-steps-item-number-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-steps-item-number-bg) 81%, transparent) 100%);
|
|
10738
|
+
background-color: color-mix(in srgb, var(--atomix-steps-item-number-bg) 65%, transparent);
|
|
12742
10739
|
}
|
|
12743
10740
|
.c-steps__text {
|
|
12744
10741
|
color: var(--atomix-steps-item-color);
|
|
@@ -12818,44 +10815,14 @@ a, a:hover {
|
|
|
12818
10815
|
transition-duration: 0.2s;
|
|
12819
10816
|
transition-timing-function: ease-in-out;
|
|
12820
10817
|
transition-delay: 0s;
|
|
12821
|
-
|
|
12822
|
-
isolation: isolate;
|
|
12823
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 26%, transparent) 0%, transparent 60%);
|
|
12824
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12825
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12826
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12827
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12828
|
-
}
|
|
12829
|
-
@media (hover: hover) {
|
|
12830
|
-
.c-tabs__nav-btn:hover {
|
|
12831
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 40%, transparent) 0%, transparent 60%);
|
|
12832
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12833
|
-
}
|
|
12834
|
-
}
|
|
12835
|
-
.c-tabs__nav-btn:active {
|
|
12836
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 81%, transparent) 100%);
|
|
10818
|
+
background-color: color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 65%, transparent);
|
|
12837
10819
|
}
|
|
12838
10820
|
.c-tabs__nav-btn:active, .c-tabs__nav-btn.is-active {
|
|
12839
10821
|
color: var(--atomix-tabs-nav-btn-active-color);
|
|
12840
10822
|
border-color: transparent transparent var(--atomix-tabs-nav-btn-border-active-color) transparent;
|
|
12841
10823
|
}
|
|
12842
10824
|
.c-tabs__nav-btn:hover {
|
|
12843
|
-
|
|
12844
|
-
isolation: isolate;
|
|
12845
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 26%, transparent) 0%, transparent 60%);
|
|
12846
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12847
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12848
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12849
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12850
|
-
}
|
|
12851
|
-
@media (hover: hover) {
|
|
12852
|
-
.c-tabs__nav-btn:hover:hover {
|
|
12853
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 40%, transparent) 0%, transparent 60%);
|
|
12854
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12855
|
-
}
|
|
12856
|
-
}
|
|
12857
|
-
.c-tabs__nav-btn:hover:active {
|
|
12858
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 81%, transparent) 100%);
|
|
10825
|
+
background-color: color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 65%, transparent);
|
|
12859
10826
|
}
|
|
12860
10827
|
.c-tabs__nav-btn:disabled, .c-tabs__nav-btn.is-disabled {
|
|
12861
10828
|
--atomix-tabs-nav-btn-border-active-color: var(
|
|
@@ -12863,22 +10830,7 @@ a, a:hover {
|
|
|
12863
10830
|
);
|
|
12864
10831
|
color: var(--atomix-tabs-nav-btn-border-disabled-color);
|
|
12865
10832
|
pointer-events: none;
|
|
12866
|
-
|
|
12867
|
-
isolation: isolate;
|
|
12868
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 26%, transparent) 0%, transparent 60%);
|
|
12869
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12870
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12871
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12872
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12873
|
-
}
|
|
12874
|
-
@media (hover: hover) {
|
|
12875
|
-
.c-tabs__nav-btn:disabled:hover, .c-tabs__nav-btn.is-disabled:hover {
|
|
12876
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 40%, transparent) 0%, transparent 60%);
|
|
12877
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12878
|
-
}
|
|
12879
|
-
}
|
|
12880
|
-
.c-tabs__nav-btn:disabled:active, .c-tabs__nav-btn.is-disabled:active {
|
|
12881
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 81%, transparent) 100%);
|
|
10833
|
+
background-color: color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 65%, transparent);
|
|
12882
10834
|
}
|
|
12883
10835
|
.c-tabs__nav-btn:focus-visible {
|
|
12884
10836
|
outline: none;
|
|
@@ -12922,22 +10874,7 @@ a, a:hover {
|
|
|
12922
10874
|
width: 100%;
|
|
12923
10875
|
max-width: var(--atomix-testimonial-width);
|
|
12924
10876
|
padding: var(--atomix-testimonial-padding-y) var(--atomix-testimonial-padding-x);
|
|
12925
|
-
|
|
12926
|
-
isolation: isolate;
|
|
12927
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-testimonial-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-testimonial-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-testimonial-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-testimonial-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-testimonial-bg) 26%, transparent) 0%, transparent 60%);
|
|
12928
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12929
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12930
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-testimonial-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-testimonial-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-testimonial-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12931
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12932
|
-
}
|
|
12933
|
-
@media (hover: hover) {
|
|
12934
|
-
.c-testimonial:hover {
|
|
12935
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-testimonial-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-testimonial-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-testimonial-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-testimonial-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-testimonial-bg) 40%, transparent) 0%, transparent 60%);
|
|
12936
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-testimonial-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-testimonial-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-testimonial-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12937
|
-
}
|
|
12938
|
-
}
|
|
12939
|
-
.c-testimonial:active {
|
|
12940
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-testimonial-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-testimonial-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-testimonial-bg) 81%, transparent) 100%);
|
|
10877
|
+
background-color: color-mix(in srgb, var(--atomix-testimonial-bg) 65%, transparent);
|
|
12941
10878
|
}
|
|
12942
10879
|
.c-testimonial__quote {
|
|
12943
10880
|
color: var(--atomix-testimonial-quote-color);
|
|
@@ -12983,22 +10920,7 @@ a, a:hover {
|
|
|
12983
10920
|
border-radius: var(--atomix-todo-border-radius);
|
|
12984
10921
|
color: var(--atomix-todo-color);
|
|
12985
10922
|
padding: 1.25rem;
|
|
12986
|
-
|
|
12987
|
-
isolation: isolate;
|
|
12988
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-todo-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-todo-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-todo-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-todo-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-todo-bg) 26%, transparent) 0%, transparent 60%);
|
|
12989
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
12990
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
12991
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-todo-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-todo-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-todo-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
12992
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12993
|
-
}
|
|
12994
|
-
@media (hover: hover) {
|
|
12995
|
-
.c-todo:hover {
|
|
12996
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-todo-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-todo-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-todo-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-todo-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-todo-bg) 40%, transparent) 0%, transparent 60%);
|
|
12997
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-todo-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-todo-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-todo-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
12998
|
-
}
|
|
12999
|
-
}
|
|
13000
|
-
.c-todo:active {
|
|
13001
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-todo-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-todo-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-todo-bg) 81%, transparent) 100%);
|
|
10923
|
+
background-color: color-mix(in srgb, var(--atomix-todo-bg) 65%, transparent);
|
|
13002
10924
|
}
|
|
13003
10925
|
.c-todo__title {
|
|
13004
10926
|
font-size: 1.25rem;
|
|
@@ -13038,22 +10960,7 @@ a, a:hover {
|
|
|
13038
10960
|
transition: background-color 0.2s ease;
|
|
13039
10961
|
}
|
|
13040
10962
|
.c-todo__item:hover {
|
|
13041
|
-
|
|
13042
|
-
isolation: isolate;
|
|
13043
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
13044
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13045
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13046
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-todo-item-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-todo-item-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-todo-item-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13047
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13048
|
-
}
|
|
13049
|
-
@media (hover: hover) {
|
|
13050
|
-
.c-todo__item:hover:hover {
|
|
13051
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
13052
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-todo-item-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-todo-item-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-todo-item-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13053
|
-
}
|
|
13054
|
-
}
|
|
13055
|
-
.c-todo__item:hover:active {
|
|
13056
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-todo-item-hover-bg) 81%, transparent) 100%);
|
|
10963
|
+
background-color: color-mix(in srgb, var(--atomix-todo-item-hover-bg) 65%, transparent);
|
|
13057
10964
|
}
|
|
13058
10965
|
.c-todo__item--completed .c-todo__item-text {
|
|
13059
10966
|
color: var(--atomix-todo-completed-color);
|
|
@@ -13150,22 +11057,7 @@ a, a:hover {
|
|
|
13150
11057
|
transition-duration: 0.2s;
|
|
13151
11058
|
transition-timing-function: ease-in-out;
|
|
13152
11059
|
transition-delay: 0s;
|
|
13153
|
-
|
|
13154
|
-
isolation: isolate;
|
|
13155
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 26%, transparent) 0%, transparent 60%);
|
|
13156
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13157
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13158
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-toggle-switch-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13159
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13160
|
-
}
|
|
13161
|
-
@media (hover: hover) {
|
|
13162
|
-
.c-toggle__switch:hover {
|
|
13163
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 40%, transparent) 0%, transparent 60%);
|
|
13164
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-toggle-switch-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13165
|
-
}
|
|
13166
|
-
}
|
|
13167
|
-
.c-toggle__switch:active {
|
|
13168
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 81%, transparent) 100%);
|
|
11060
|
+
background-color: color-mix(in srgb, var(--atomix-toggle-switch-bg) 65%, transparent);
|
|
13169
11061
|
}
|
|
13170
11062
|
.c-toggle__switch::before {
|
|
13171
11063
|
content: "";
|
|
@@ -13178,22 +11070,7 @@ a, a:hover {
|
|
|
13178
11070
|
transition-duration: 0.2s;
|
|
13179
11071
|
transition-timing-function: ease-in-out;
|
|
13180
11072
|
transition-delay: 0s;
|
|
13181
|
-
|
|
13182
|
-
isolation: isolate;
|
|
13183
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 26%, transparent) 0%, transparent 60%);
|
|
13184
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13185
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13186
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13187
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13188
|
-
}
|
|
13189
|
-
@media (hover: hover) {
|
|
13190
|
-
.c-toggle__switch::before:hover {
|
|
13191
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 40%, transparent) 0%, transparent 60%);
|
|
13192
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13193
|
-
}
|
|
13194
|
-
}
|
|
13195
|
-
.c-toggle__switch::before:active {
|
|
13196
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 81%, transparent) 100%);
|
|
11073
|
+
background-color: color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 65%, transparent);
|
|
13197
11074
|
}
|
|
13198
11075
|
.c-toggle__label {
|
|
13199
11076
|
font-size: var(--atomix-toggle-label-font-size);
|
|
@@ -13209,22 +11086,7 @@ a, a:hover {
|
|
|
13209
11086
|
pointer-events: none;
|
|
13210
11087
|
}
|
|
13211
11088
|
.c-toggle.is-disabled:not(.is-on) .c-toggle__switch {
|
|
13212
|
-
|
|
13213
|
-
isolation: isolate;
|
|
13214
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 26%, transparent) 0%, transparent 60%);
|
|
13215
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13216
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13217
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13218
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13219
|
-
}
|
|
13220
|
-
@media (hover: hover) {
|
|
13221
|
-
.c-toggle.is-disabled:not(.is-on) .c-toggle__switch:hover {
|
|
13222
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 40%, transparent) 0%, transparent 60%);
|
|
13223
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13224
|
-
}
|
|
13225
|
-
}
|
|
13226
|
-
.c-toggle.is-disabled:not(.is-on) .c-toggle__switch:active {
|
|
13227
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 81%, transparent) 100%);
|
|
11089
|
+
background-color: color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 65%, transparent);
|
|
13228
11090
|
}
|
|
13229
11091
|
.c-toggle.is-disabled.is-on {
|
|
13230
11092
|
pointer-events: none;
|
|
@@ -13234,43 +11096,13 @@ a, a:hover {
|
|
|
13234
11096
|
position: absolute;
|
|
13235
11097
|
inset: 0;
|
|
13236
11098
|
border-radius: var(--atomix-toggle-switch-handle-border-radius);
|
|
13237
|
-
|
|
13238
|
-
isolation: isolate;
|
|
13239
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(107, 114, 128, 0.6) 78%, transparent) 0%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 65%, transparent) 40%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 55%, transparent) 70%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 26%, transparent) 0%, transparent 60%);
|
|
13240
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13241
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13242
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(107, 114, 128, 0.6) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(107, 114, 128, 0.6) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(107, 114, 128, 0.6) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13243
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13244
|
-
}
|
|
13245
|
-
@media (hover: hover) {
|
|
13246
|
-
.c-toggle.is-disabled.is-on .c-toggle__switch::after:hover {
|
|
13247
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(107, 114, 128, 0.6) 96%, transparent) 0%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 80%, transparent) 40%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 68%, transparent) 70%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 40%, transparent) 0%, transparent 60%);
|
|
13248
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(107, 114, 128, 0.6) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(107, 114, 128, 0.6) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(107, 114, 128, 0.6) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13249
|
-
}
|
|
13250
|
-
}
|
|
13251
|
-
.c-toggle.is-disabled.is-on .c-toggle__switch::after:active {
|
|
13252
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, rgba(107, 114, 128, 0.6) 108%, transparent) 0%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 90%, transparent) 50%, color-mix(in srgb, rgba(107, 114, 128, 0.6) 81%, transparent) 100%);
|
|
11099
|
+
background-color: color-mix(in srgb, rgba(107, 114, 128, 0.6) 65%, transparent);
|
|
13253
11100
|
}
|
|
13254
11101
|
.c-toggle--glass {
|
|
13255
11102
|
--atomix-toggle-switch-bg: transparent;
|
|
13256
11103
|
}
|
|
13257
11104
|
.c-toggle--glass .c-toggle__switch {
|
|
13258
|
-
|
|
13259
|
-
isolation: isolate;
|
|
13260
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 26%, transparent) 0%, transparent 60%);
|
|
13261
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13262
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13263
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-toggle-switch-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13264
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13265
|
-
}
|
|
13266
|
-
@media (hover: hover) {
|
|
13267
|
-
.c-toggle--glass .c-toggle__switch:hover {
|
|
13268
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 40%, transparent) 0%, transparent 60%);
|
|
13269
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-toggle-switch-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-toggle-switch-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13270
|
-
}
|
|
13271
|
-
}
|
|
13272
|
-
.c-toggle--glass .c-toggle__switch:active {
|
|
13273
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-toggle-switch-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-toggle-switch-bg) 81%, transparent) 100%);
|
|
11105
|
+
background-color: color-mix(in srgb, var(--atomix-toggle-switch-bg) 65%, transparent);
|
|
13274
11106
|
}
|
|
13275
11107
|
.c-toggle--glass .c-toggle__switch::before {
|
|
13276
11108
|
opacity: 0.5;
|
|
@@ -13314,26 +11146,7 @@ a, a:hover {
|
|
|
13314
11146
|
pointer-events: auto;
|
|
13315
11147
|
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13316
11148
|
transform: scale(0.95);
|
|
13317
|
-
|
|
13318
|
-
isolation: isolate;
|
|
13319
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 26%, transparent) 0%, transparent 60%);
|
|
13320
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13321
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13322
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13323
|
-
}
|
|
13324
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
13325
|
-
.c-tooltip__content {
|
|
13326
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13327
|
-
}
|
|
13328
|
-
}
|
|
13329
|
-
@media (hover: hover) {
|
|
13330
|
-
.c-tooltip__content:hover {
|
|
13331
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent) 0%, transparent 60%);
|
|
13332
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13333
|
-
}
|
|
13334
|
-
}
|
|
13335
|
-
.c-tooltip__content:active {
|
|
13336
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tooltip-bg) 81%, transparent) 100%);
|
|
11149
|
+
background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 65%, transparent);
|
|
13337
11150
|
}
|
|
13338
11151
|
.c-tooltip__content.is-active {
|
|
13339
11152
|
opacity: 1;
|
|
@@ -13346,22 +11159,7 @@ a, a:hover {
|
|
|
13346
11159
|
border-radius: calc((var(--atomix-tooltip-arrow-size) - var(--atomix-tooltip-border-radius)) / 2);
|
|
13347
11160
|
z-index: 1;
|
|
13348
11161
|
transform: rotate(45deg);
|
|
13349
|
-
|
|
13350
|
-
isolation: isolate;
|
|
13351
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 26%, transparent) 0%, transparent 60%);
|
|
13352
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13353
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13354
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13355
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13356
|
-
}
|
|
13357
|
-
@media (hover: hover) {
|
|
13358
|
-
.c-tooltip__arrow:hover {
|
|
13359
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent) 0%, transparent 60%);
|
|
13360
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13361
|
-
}
|
|
13362
|
-
}
|
|
13363
|
-
.c-tooltip__arrow:active {
|
|
13364
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tooltip-bg) 81%, transparent) 100%);
|
|
11162
|
+
background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 65%, transparent);
|
|
13365
11163
|
}
|
|
13366
11164
|
.c-tooltip--left .c-tooltip__arrow, .c-tooltip--right .c-tooltip__arrow {
|
|
13367
11165
|
transform: rotate(45deg);
|
|
@@ -13373,58 +11171,13 @@ a, a:hover {
|
|
|
13373
11171
|
transform: rotate(225deg);
|
|
13374
11172
|
}
|
|
13375
11173
|
.c-tooltip--glass .c-tooltip__content {
|
|
13376
|
-
|
|
13377
|
-
isolation: isolate;
|
|
13378
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 43%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 33%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 12%, transparent) 0%, transparent 60%);
|
|
13379
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13380
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13381
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13382
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13383
|
-
}
|
|
13384
|
-
@media (hover: hover) {
|
|
13385
|
-
.c-tooltip--glass .c-tooltip__content:hover {
|
|
13386
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent) 0%, transparent 60%);
|
|
13387
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13388
|
-
}
|
|
13389
|
-
}
|
|
13390
|
-
.c-tooltip--glass .c-tooltip__content:active {
|
|
13391
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tooltip-bg) 81%, transparent) 100%);
|
|
11174
|
+
background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent);
|
|
13392
11175
|
}
|
|
13393
11176
|
.c-tooltip--glass .c-tooltip__arrow {
|
|
13394
|
-
|
|
13395
|
-
isolation: isolate;
|
|
13396
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 43%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 33%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 12%, transparent) 0%, transparent 60%);
|
|
13397
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13398
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13399
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13400
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13401
|
-
}
|
|
13402
|
-
@media (hover: hover) {
|
|
13403
|
-
.c-tooltip--glass .c-tooltip__arrow:hover {
|
|
13404
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent) 0%, transparent 60%);
|
|
13405
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13406
|
-
}
|
|
13407
|
-
}
|
|
13408
|
-
.c-tooltip--glass .c-tooltip__arrow:active {
|
|
13409
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tooltip-bg) 81%, transparent) 100%);
|
|
11177
|
+
background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent);
|
|
13410
11178
|
}
|
|
13411
11179
|
.c-tooltip--glass .c-tooltip__arrow {
|
|
13412
|
-
|
|
13413
|
-
isolation: isolate;
|
|
13414
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 43%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 33%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 12%, transparent) 0%, transparent 60%);
|
|
13415
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13416
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13417
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13418
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13419
|
-
}
|
|
13420
|
-
@media (hover: hover) {
|
|
13421
|
-
.c-tooltip--glass .c-tooltip__arrow:hover {
|
|
13422
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-tooltip-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-tooltip-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent) 0%, transparent 60%);
|
|
13423
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-tooltip-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13424
|
-
}
|
|
13425
|
-
}
|
|
13426
|
-
.c-tooltip--glass .c-tooltip__arrow:active {
|
|
13427
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-tooltip-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-tooltip-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-tooltip-bg) 81%, transparent) 100%);
|
|
11180
|
+
background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent);
|
|
13428
11181
|
}
|
|
13429
11182
|
.c-upload {
|
|
13430
11183
|
--atomix-upload-width: 31.25rem;
|
|
@@ -13486,40 +11239,10 @@ a, a:hover {
|
|
|
13486
11239
|
transition-duration: 0.2s;
|
|
13487
11240
|
transition-timing-function: ease-in-out;
|
|
13488
11241
|
transition-delay: 0s;
|
|
13489
|
-
|
|
13490
|
-
isolation: isolate;
|
|
13491
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-upload-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-upload-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-upload-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-upload-bg) 26%, transparent) 0%, transparent 60%);
|
|
13492
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13493
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13494
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-upload-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-upload-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-upload-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13495
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13496
|
-
}
|
|
13497
|
-
@media (hover: hover) {
|
|
13498
|
-
.c-upload:hover {
|
|
13499
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-upload-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-upload-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-upload-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-upload-bg) 40%, transparent) 0%, transparent 60%);
|
|
13500
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-upload-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-upload-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-upload-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13501
|
-
}
|
|
13502
|
-
}
|
|
13503
|
-
.c-upload:active {
|
|
13504
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-upload-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-upload-bg) 81%, transparent) 100%);
|
|
11242
|
+
background-color: color-mix(in srgb, var(--atomix-upload-bg) 65%, transparent);
|
|
13505
11243
|
}
|
|
13506
11244
|
.c-upload:hover {
|
|
13507
|
-
|
|
13508
|
-
isolation: isolate;
|
|
13509
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-upload-hover-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-hover-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-upload-hover-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-upload-hover-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-upload-hover-bg) 26%, transparent) 0%, transparent 60%);
|
|
13510
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13511
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13512
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-upload-hover-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-upload-hover-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-upload-hover-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13513
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13514
|
-
}
|
|
13515
|
-
@media (hover: hover) {
|
|
13516
|
-
.c-upload:hover:hover {
|
|
13517
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-upload-hover-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-hover-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-upload-hover-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-upload-hover-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-upload-hover-bg) 40%, transparent) 0%, transparent 60%);
|
|
13518
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-upload-hover-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-upload-hover-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-upload-hover-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13519
|
-
}
|
|
13520
|
-
}
|
|
13521
|
-
.c-upload:hover:active {
|
|
13522
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-upload-hover-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-upload-hover-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-upload-hover-bg) 81%, transparent) 100%);
|
|
11245
|
+
background-color: color-mix(in srgb, var(--atomix-upload-hover-bg) 65%, transparent);
|
|
13523
11246
|
}
|
|
13524
11247
|
.c-upload__inner {
|
|
13525
11248
|
display: flex;
|
|
@@ -13849,22 +11572,7 @@ a, a:hover {
|
|
|
13849
11572
|
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
13850
11573
|
overflow: hidden;
|
|
13851
11574
|
font-family: var(--atomix--font-family-base);
|
|
13852
|
-
|
|
13853
|
-
isolation: isolate;
|
|
13854
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix--video-player-bg, #000) 78%, transparent) 0%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 65%, transparent) 40%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 55%, transparent) 70%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 26%, transparent) 0%, transparent 60%);
|
|
13855
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
13856
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
13857
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix--video-player-bg, #000) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix--video-player-bg, #000) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix--video-player-bg, #000) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
13858
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13859
|
-
}
|
|
13860
|
-
@media (hover: hover) {
|
|
13861
|
-
.c-video-player:hover {
|
|
13862
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix--video-player-bg, #000) 96%, transparent) 0%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 80%, transparent) 40%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 68%, transparent) 70%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 40%, transparent) 0%, transparent 60%);
|
|
13863
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix--video-player-bg, #000) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix--video-player-bg, #000) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix--video-player-bg, #000) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
13864
|
-
}
|
|
13865
|
-
}
|
|
13866
|
-
.c-video-player:active {
|
|
13867
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix--video-player-bg, #000) 108%, transparent) 0%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 90%, transparent) 50%, color-mix(in srgb, var(--atomix--video-player-bg, #000) 81%, transparent) 100%);
|
|
11575
|
+
background-color: color-mix(in srgb, var(--atomix--video-player-bg, #000) 65%, transparent);
|
|
13868
11576
|
}
|
|
13869
11577
|
.c-video-player__video {
|
|
13870
11578
|
width: 100%;
|
|
@@ -14120,22 +11828,7 @@ a, a:hover {
|
|
|
14120
11828
|
-webkit-backdrop-filter: blur(10px);
|
|
14121
11829
|
backdrop-filter: blur(10px);
|
|
14122
11830
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
14123
|
-
|
|
14124
|
-
isolation: isolate;
|
|
14125
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 78%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 65%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 55%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 26%, transparent) 0%, transparent 60%);
|
|
14126
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
14127
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
14128
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
14129
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
14130
|
-
}
|
|
14131
|
-
@media (hover: hover) {
|
|
14132
|
-
.c-video-player__settings-menu:hover {
|
|
14133
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 96%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 80%, transparent) 40%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 68%, transparent) 70%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 40%, transparent) 0%, transparent 60%);
|
|
14134
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
14135
|
-
}
|
|
14136
|
-
}
|
|
14137
|
-
.c-video-player__settings-menu:active {
|
|
14138
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 108%, transparent) 0%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 90%, transparent) 50%, color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 81%, transparent) 100%);
|
|
11831
|
+
background-color: color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 65%, transparent);
|
|
14139
11832
|
}
|
|
14140
11833
|
.c-video-player__settings-tabs {
|
|
14141
11834
|
display: flex;
|
|
@@ -14403,26 +12096,7 @@ a, a:hover {
|
|
|
14403
12096
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
|
|
14404
12097
|
-webkit-backdrop-filter: blur(8px);
|
|
14405
12098
|
backdrop-filter: blur(8px);
|
|
14406
|
-
|
|
14407
|
-
isolation: isolate;
|
|
14408
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 78%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 65%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 55%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 26%, transparent) 0%, transparent 60%);
|
|
14409
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
14410
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
14411
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
14412
|
-
}
|
|
14413
|
-
@supports (color: color-mix(in lch, red, blue)){
|
|
14414
|
-
.c-photo-viewer__container {
|
|
14415
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, var(--atomix-body-bg) 20%, transparent), 0 16px 32px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
14416
|
-
}
|
|
14417
|
-
}
|
|
14418
|
-
@media (hover: hover) {
|
|
14419
|
-
.c-photo-viewer__container:hover {
|
|
14420
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 96%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 80%, transparent) 40%, color-mix(in srgb, var(--atomix-body-bg) 68%, transparent) 70%, color-mix(in srgb, var(--atomix-body-bg) 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--atomix-body-bg) 40%, transparent) 0%, transparent 60%);
|
|
14421
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, var(--atomix-body-bg) 30%, transparent), 0 24px 48px 0 color-mix(in srgb, var(--atomix-body-bg) 15%, transparent), 0 36px 72px 0 color-mix(in srgb, var(--atomix-body-bg) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
14422
|
-
}
|
|
14423
|
-
}
|
|
14424
|
-
.c-photo-viewer__container:active {
|
|
14425
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--atomix-body-bg) 108%, transparent) 0%, color-mix(in srgb, var(--atomix-body-bg) 90%, transparent) 50%, color-mix(in srgb, var(--atomix-body-bg) 81%, transparent) 100%);
|
|
12099
|
+
background-color: color-mix(in srgb, var(--atomix-body-bg) 65%, transparent);
|
|
14426
12100
|
}
|
|
14427
12101
|
.c-photo-viewer__info-panel, .c-photo-viewer__thumbnails {
|
|
14428
12102
|
scrollbar-width: thin;
|
|
@@ -14474,22 +12148,7 @@ a, a:hover {
|
|
|
14474
12148
|
overflow: hidden;
|
|
14475
12149
|
position: relative;
|
|
14476
12150
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
|
|
14477
|
-
|
|
14478
|
-
isolation: isolate;
|
|
14479
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, transparent 78%, transparent) 0%, color-mix(in srgb, transparent 65%, transparent) 40%, color-mix(in srgb, transparent 55%, transparent) 70%, color-mix(in srgb, transparent 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, transparent 26%, transparent) 0%, transparent 60%);
|
|
14480
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
14481
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
14482
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, transparent 20%, transparent), 0 16px 32px 0 color-mix(in srgb, transparent 10%, transparent), 0 24px 48px 0 color-mix(in srgb, transparent 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
14483
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
14484
|
-
}
|
|
14485
|
-
@media (hover: hover) {
|
|
14486
|
-
.c-photo-viewer__thumbnail:hover {
|
|
14487
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, transparent 96%, transparent) 0%, color-mix(in srgb, transparent 80%, transparent) 40%, color-mix(in srgb, transparent 68%, transparent) 70%, color-mix(in srgb, transparent 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, transparent 40%, transparent) 0%, transparent 60%);
|
|
14488
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, transparent 30%, transparent), 0 24px 48px 0 color-mix(in srgb, transparent 15%, transparent), 0 36px 72px 0 color-mix(in srgb, transparent 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
14489
|
-
}
|
|
14490
|
-
}
|
|
14491
|
-
.c-photo-viewer__thumbnail:active {
|
|
14492
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, transparent 108%, transparent) 0%, color-mix(in srgb, transparent 90%, transparent) 50%, color-mix(in srgb, transparent 81%, transparent) 100%);
|
|
12151
|
+
background-color: color-mix(in srgb, transparent 65%, transparent);
|
|
14493
12152
|
}
|
|
14494
12153
|
.c-photo-viewer__thumbnail:hover {
|
|
14495
12154
|
transform: translateY(-2px);
|
|
@@ -14545,22 +12204,7 @@ body.is-open-photoviewer {
|
|
|
14545
12204
|
z-index: 1000;
|
|
14546
12205
|
opacity: 1;
|
|
14547
12206
|
transition-property: opacity;
|
|
14548
|
-
|
|
14549
|
-
isolation: isolate;
|
|
14550
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, transparent 78%, transparent) 0%, color-mix(in srgb, transparent 65%, transparent) 40%, color-mix(in srgb, transparent 55%, transparent) 70%, color-mix(in srgb, transparent 68%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, transparent 26%, transparent) 0%, transparent 60%);
|
|
14551
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
|
14552
|
-
backdrop-filter: blur(12px) saturate(1.4);
|
|
14553
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.1), 0 8px 16px 2px color-mix(in srgb, transparent 20%, transparent), 0 16px 32px 0 color-mix(in srgb, transparent 10%, transparent), 0 24px 48px 0 color-mix(in srgb, transparent 6.6666666667%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
14554
|
-
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
14555
|
-
}
|
|
14556
|
-
@media (hover: hover) {
|
|
14557
|
-
.c-photo-viewer:hover {
|
|
14558
|
-
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 15%, transparent 30%), linear-gradient(135deg, color-mix(in srgb, transparent 96%, transparent) 0%, color-mix(in srgb, transparent 80%, transparent) 40%, color-mix(in srgb, transparent 68%, transparent) 70%, color-mix(in srgb, transparent 84%, transparent) 100%), radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, transparent 40%, transparent) 0%, transparent 60%);
|
|
14559
|
-
box-shadow: inset, 0, 1px, 0, rgba(255, 255, 255, 0.15), 0 12px 24px 2px color-mix(in srgb, transparent 30%, transparent), 0 24px 48px 0 color-mix(in srgb, transparent 15%, transparent), 0 36px 72px 0 color-mix(in srgb, transparent 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
14560
|
-
}
|
|
14561
|
-
}
|
|
14562
|
-
.c-photo-viewer:active {
|
|
14563
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(135deg, color-mix(in srgb, transparent 108%, transparent) 0%, color-mix(in srgb, transparent 90%, transparent) 50%, color-mix(in srgb, transparent 81%, transparent) 100%);
|
|
12207
|
+
background-color: color-mix(in srgb, transparent 65%, transparent);
|
|
14564
12208
|
}
|
|
14565
12209
|
.c-photo-viewer__backdrop {
|
|
14566
12210
|
position: absolute;
|