@shohojdhara/atomix 0.5.8 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/atomix.css +154 -2568
- 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 +1 -1
- package/dist/atomix.umd.js.map +1 -1
- package/dist/atomix.umd.min.js +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.esm.js +42 -42
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +63 -64
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
- package/src/lib/index.ts +49 -3
- package/src/styles/02-tools/_tools.background.scss +38 -136
- package/src/styles/05-objects/_objects.masonry-grid.scss +26 -85
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;
|
|
@@ -1467,11 +1454,6 @@ a, a:hover {
|
|
|
1467
1454
|
.o-masonry-grid--animate .o-masonry-grid__item {
|
|
1468
1455
|
transition: opacity var(--atomix-transition-duration-base) var(--atomix-transition-timing-base), top var(--atomix-transition-duration-base) var(--atomix-transition-timing-base), left var(--atomix-transition-duration-base) var(--atomix-transition-timing-base);
|
|
1469
1456
|
}
|
|
1470
|
-
@supports (transition-behavior: allow-discrete) {
|
|
1471
|
-
.o-masonry-grid--animate .o-masonry-grid__item {
|
|
1472
|
-
transition-behavior: allow-discrete;
|
|
1473
|
-
}
|
|
1474
|
-
}
|
|
1475
1457
|
.o-masonry-grid__item {
|
|
1476
1458
|
box-sizing: border-box;
|
|
1477
1459
|
width: 100%;
|
|
@@ -1493,11 +1475,6 @@ a, a:hover {
|
|
|
1493
1475
|
opacity: 0;
|
|
1494
1476
|
visibility: hidden;
|
|
1495
1477
|
}
|
|
1496
|
-
@supports (view-transition-name: masonry-item) {
|
|
1497
|
-
.o-masonry-grid__item:not([style*="position: absolute"]) {
|
|
1498
|
-
view-transition-name: masonry-item;
|
|
1499
|
-
}
|
|
1500
|
-
}
|
|
1501
1478
|
.o-masonry-grid__item-loading {
|
|
1502
1479
|
position: relative;
|
|
1503
1480
|
}
|
|
@@ -1511,38 +1488,13 @@ a, a:hover {
|
|
|
1511
1488
|
background: var(--atomix-gray-10);
|
|
1512
1489
|
z-index: var(--atomix-z-index-10);
|
|
1513
1490
|
border-radius: var(--atomix-border-radius-sm);
|
|
1514
|
-
|
|
1491
|
+
opacity: 0;
|
|
1515
1492
|
}
|
|
1516
1493
|
.o-masonry-grid__item-loading img {
|
|
1517
1494
|
opacity: 0;
|
|
1518
1495
|
}
|
|
1519
|
-
@supports (property: opacity) and (animation-timeline: view()) {
|
|
1520
|
-
.o-masonry-grid__item-loading img {
|
|
1521
|
-
opacity: var(--masonry-img-opacity);
|
|
1522
|
-
}
|
|
1523
|
-
@property --masonry-img-opacity {
|
|
1524
|
-
.o-masonry-grid__item-loading img {
|
|
1525
|
-
syntax: "<number>";
|
|
1526
|
-
inherits: false;
|
|
1527
|
-
initial-value: 0;
|
|
1528
|
-
}
|
|
1529
|
-
}
|
|
1530
|
-
}
|
|
1531
1496
|
.o-masonry-grid__item-loaded img {
|
|
1532
|
-
|
|
1533
|
-
}
|
|
1534
|
-
@supports (property: opacity) and (animation-timeline: view()) {
|
|
1535
|
-
.o-masonry-grid__item-loaded img {
|
|
1536
|
-
opacity: var(--masonry-img-opacity);
|
|
1537
|
-
animation: masonry-item-fade-in-advanced var(--atomix-transition-duration-base) var(--atomix-transition-timing-base) forwards;
|
|
1538
|
-
}
|
|
1539
|
-
@property --masonry-img-opacity {
|
|
1540
|
-
.o-masonry-grid__item-loaded img {
|
|
1541
|
-
syntax: "<number>";
|
|
1542
|
-
inherits: false;
|
|
1543
|
-
initial-value: 0;
|
|
1544
|
-
}
|
|
1545
|
-
}
|
|
1497
|
+
opacity: 1;
|
|
1546
1498
|
}
|
|
1547
1499
|
.o-masonry-grid--loading-images {
|
|
1548
1500
|
position: relative;
|
|
@@ -1577,36 +1529,6 @@ a, a:hover {
|
|
|
1577
1529
|
transform: rotate(360deg);
|
|
1578
1530
|
}
|
|
1579
1531
|
}
|
|
1580
|
-
@keyframes masonry-loading-fade-in {
|
|
1581
|
-
from {
|
|
1582
|
-
opacity: 0;
|
|
1583
|
-
transform: scale(0.95);
|
|
1584
|
-
}
|
|
1585
|
-
to {
|
|
1586
|
-
opacity: 1;
|
|
1587
|
-
transform: scale(1);
|
|
1588
|
-
}
|
|
1589
|
-
}
|
|
1590
|
-
@keyframes masonry-item-fade-in {
|
|
1591
|
-
from {
|
|
1592
|
-
opacity: 0;
|
|
1593
|
-
transform: translateY(20px);
|
|
1594
|
-
}
|
|
1595
|
-
to {
|
|
1596
|
-
opacity: 1;
|
|
1597
|
-
transform: translateY(0);
|
|
1598
|
-
}
|
|
1599
|
-
}
|
|
1600
|
-
@keyframes masonry-item-fade-in-advanced {
|
|
1601
|
-
from {
|
|
1602
|
-
--masonry-img-opacity: 0;
|
|
1603
|
-
transform: translateY(20px) scale(0.95);
|
|
1604
|
-
}
|
|
1605
|
-
to {
|
|
1606
|
-
--masonry-img-opacity: 1;
|
|
1607
|
-
transform: translateY(0) scale(1);
|
|
1608
|
-
}
|
|
1609
|
-
}
|
|
1610
1532
|
.o-block {
|
|
1611
1533
|
--atomix-block-spacing-xs: 1rem;
|
|
1612
1534
|
--atomix-block-spacing-sm: 2rem;
|
|
@@ -1771,22 +1693,7 @@ a, a:hover {
|
|
|
1771
1693
|
transition-duration: 0.2s;
|
|
1772
1694
|
transition-timing-function: ease-in-out;
|
|
1773
1695
|
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%);
|
|
1696
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 65%, transparent);
|
|
1790
1697
|
}
|
|
1791
1698
|
.c-accordion__header--icon-left {
|
|
1792
1699
|
flex-direction: row-reverse;
|
|
@@ -1827,22 +1734,7 @@ a, a:hover {
|
|
|
1827
1734
|
color: var(--atomix-accordion-body-color);
|
|
1828
1735
|
padding: var(--atomix-accordion-body-padding-y) var(--atomix-accordion-body-padding-x);
|
|
1829
1736
|
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%);
|
|
1737
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-body-bg) 65%, transparent);
|
|
1846
1738
|
}
|
|
1847
1739
|
.c-accordion:focus, .c-accordion.is-focused {
|
|
1848
1740
|
--atomix-accordion-border-color: var(--atomix-focus-border-color);
|
|
@@ -1867,40 +1759,10 @@ a, a:hover {
|
|
|
1867
1759
|
border-color: transparent;
|
|
1868
1760
|
}
|
|
1869
1761
|
.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%);
|
|
1762
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 65%, transparent);
|
|
1886
1763
|
}
|
|
1887
1764
|
.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%);
|
|
1765
|
+
background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 65%, transparent);
|
|
1904
1766
|
}
|
|
1905
1767
|
@media (prefers-reduced-motion: reduce) {
|
|
1906
1768
|
.c-accordion {
|
|
@@ -1943,22 +1805,7 @@ a, a:hover {
|
|
|
1943
1805
|
transition-duration: 0.2s;
|
|
1944
1806
|
transition-timing-function: ease-in-out;
|
|
1945
1807
|
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%);
|
|
1808
|
+
background-color: color-mix(in srgb, var(--atomix-avatar-bg) 65%, transparent);
|
|
1962
1809
|
}
|
|
1963
1810
|
.c-avatar--xs {
|
|
1964
1811
|
--atomix-avatar-size: 1.5rem;
|
|
@@ -2054,22 +1901,7 @@ a, a:hover {
|
|
|
2054
1901
|
width: var(--atomix-avatar-size);
|
|
2055
1902
|
height: var(--atomix-avatar-size);
|
|
2056
1903
|
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%);
|
|
1904
|
+
background-color: color-mix(in srgb, var(--atomix-avatar-group-more-bg) 65%, transparent);
|
|
2073
1905
|
}
|
|
2074
1906
|
.c-avatar-group--stacked {
|
|
2075
1907
|
gap: 0;
|
|
@@ -2392,22 +2224,7 @@ a, a:hover {
|
|
|
2392
2224
|
-webkit-user-select: none;
|
|
2393
2225
|
-moz-user-select: none;
|
|
2394
2226
|
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%);
|
|
2227
|
+
background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 65%, transparent);
|
|
2411
2228
|
}
|
|
2412
2229
|
.c-badge__icon {
|
|
2413
2230
|
font-size: var(--atomix-tag-icon-size);
|
|
@@ -2422,22 +2239,7 @@ a, a:hover {
|
|
|
2422
2239
|
}
|
|
2423
2240
|
.c-badge--glass {
|
|
2424
2241
|
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%);
|
|
2242
|
+
background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent);
|
|
2441
2243
|
}
|
|
2442
2244
|
.c-badge--primary {
|
|
2443
2245
|
--atomix-tag-bg-color: var(--atomix-brand-bg-subtle);
|
|
@@ -2493,22 +2295,7 @@ a, a:hover {
|
|
|
2493
2295
|
list-style: none;
|
|
2494
2296
|
padding-left: 0px;
|
|
2495
2297
|
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%);
|
|
2298
|
+
background-color: color-mix(in srgb, var(--atomix-breadcrumb-bg) 65%, transparent);
|
|
2512
2299
|
}
|
|
2513
2300
|
.c-breadcrumb__item {
|
|
2514
2301
|
display: flex;
|
|
@@ -2610,22 +2397,7 @@ a, a:hover {
|
|
|
2610
2397
|
border: var(--atomix-btn-border-width) solid var(--atomix-btn-border-color);
|
|
2611
2398
|
border-radius: var(--atomix-btn-border-radius);
|
|
2612
2399
|
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%);
|
|
2400
|
+
background-color: color-mix(in srgb, var(--atomix-btn-bg) 65%, transparent);
|
|
2629
2401
|
}
|
|
2630
2402
|
.c-btn__icon {
|
|
2631
2403
|
font-size: var(--atomix-btn-icon-size);
|
|
@@ -2633,22 +2405,7 @@ a, a:hover {
|
|
|
2633
2405
|
.c-btn:hover {
|
|
2634
2406
|
color: var(--atomix-btn-hover-color);
|
|
2635
2407
|
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%);
|
|
2408
|
+
background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 65%, transparent);
|
|
2652
2409
|
}
|
|
2653
2410
|
.c-btn--primary {
|
|
2654
2411
|
--atomix-btn-color: var(--atomix-white, #ffffff);
|
|
@@ -3082,61 +2839,16 @@ a, a:hover {
|
|
|
3082
2839
|
border-color: var(--atomix-btn-disabled-border-color);
|
|
3083
2840
|
opacity: var(--atomix-btn-disabled-opacity);
|
|
3084
2841
|
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%);
|
|
2842
|
+
background-color: color-mix(in srgb, var(--atomix-btn-disabled-bg) 65%, transparent);
|
|
3101
2843
|
}
|
|
3102
2844
|
.c-btn:disabled:focus-visible, .c-btn--disabled:focus-visible, fieldset:disabled .c-btn:focus-visible {
|
|
3103
2845
|
outline: none;
|
|
3104
2846
|
}
|
|
3105
2847
|
.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%);
|
|
2848
|
+
background-color: color-mix(in srgb, var(--atomix-btn-bg) 65%, transparent);
|
|
3122
2849
|
}
|
|
3123
2850
|
.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%);
|
|
2851
|
+
background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 65%, transparent);
|
|
3140
2852
|
}
|
|
3141
2853
|
@media (prefers-reduced-motion: reduce) {
|
|
3142
2854
|
.c-btn {
|
|
@@ -3235,26 +2947,7 @@ a, a:hover {
|
|
|
3235
2947
|
border-radius: var(--atomix-datepicker-border-radius);
|
|
3236
2948
|
box-shadow: var(--atomix-datepicker-box-shadow);
|
|
3237
2949
|
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%);
|
|
2950
|
+
background-color: color-mix(in srgb, var(--atomix-datepicker-bg) 65%, transparent);
|
|
3258
2951
|
}
|
|
3259
2952
|
.c-datepicker__calendar--top-start, .c-datepicker__calendar--top-end {
|
|
3260
2953
|
bottom: 100%;
|
|
@@ -3637,22 +3330,7 @@ a, a:hover {
|
|
|
3637
3330
|
transition-duration: 0.2s;
|
|
3638
3331
|
transition-timing-function: ease-in-out;
|
|
3639
3332
|
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%);
|
|
3333
|
+
background-color: color-mix(in srgb, var(--atomix-card-bg) 65%, transparent);
|
|
3656
3334
|
}
|
|
3657
3335
|
.c-card[href] {
|
|
3658
3336
|
display: block;
|
|
@@ -3782,41 +3460,11 @@ a, a:hover {
|
|
|
3782
3460
|
--atomix-card-text-font-size: var(--atomix-font-size-base);
|
|
3783
3461
|
}
|
|
3784
3462
|
.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%);
|
|
3463
|
+
background-color: color-mix(in srgb, var(--atomix-card-bg) 65%, transparent);
|
|
3801
3464
|
}
|
|
3802
3465
|
.c-card--glass {
|
|
3803
3466
|
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%);
|
|
3467
|
+
background-color: color-mix(in srgb, var(--atomix-card-bg) 65%, transparent);
|
|
3820
3468
|
}
|
|
3821
3469
|
.c-card--outlined {
|
|
3822
3470
|
background-color: transparent;
|
|
@@ -5455,22 +5103,7 @@ a, a:hover {
|
|
|
5455
5103
|
transition-duration: 0.2s;
|
|
5456
5104
|
transition-timing-function: ease-in-out;
|
|
5457
5105
|
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%);
|
|
5106
|
+
background-color: color-mix(in srgb, var(--atomix-checkbox-bg) 65%, transparent);
|
|
5474
5107
|
}
|
|
5475
5108
|
.c-checkbox__input[type=radio] {
|
|
5476
5109
|
border-radius: 50rem;
|
|
@@ -5555,22 +5188,7 @@ a, a:hover {
|
|
|
5555
5188
|
color: var(--atomix-body-color);
|
|
5556
5189
|
}
|
|
5557
5190
|
.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%);
|
|
5191
|
+
background-color: color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent);
|
|
5574
5192
|
}
|
|
5575
5193
|
.c-color-mode-toggle:focus-visible {
|
|
5576
5194
|
outline: none;
|
|
@@ -5597,22 +5215,7 @@ a, a:hover {
|
|
|
5597
5215
|
opacity: 0.5;
|
|
5598
5216
|
}
|
|
5599
5217
|
[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%);
|
|
5218
|
+
background-color: color-mix(in srgb, rgba(255, 255, 255, 0.1) 65%, transparent);
|
|
5616
5219
|
}
|
|
5617
5220
|
@media (prefers-reduced-motion: reduce) {
|
|
5618
5221
|
.c-color-mode-toggle {
|
|
@@ -5661,22 +5264,7 @@ a, a:hover {
|
|
|
5661
5264
|
align-items: center;
|
|
5662
5265
|
padding: var(--atomix-countdown-item-padding-y) var(--atomix-countdown-item-padding-x);
|
|
5663
5266
|
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%);
|
|
5267
|
+
background-color: color-mix(in srgb, var(--atomix-countdown-focused-bg) 65%, transparent);
|
|
5680
5268
|
}
|
|
5681
5269
|
.c-countdown--focused .c-countdown__time-label {
|
|
5682
5270
|
font-size: var(--atomix-countdown-focused-label-font-size);
|
|
@@ -5704,40 +5292,10 @@ a, a:hover {
|
|
|
5704
5292
|
margin-bottom: 0;
|
|
5705
5293
|
color: var(--atomix-data-table-color);
|
|
5706
5294
|
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%);
|
|
5295
|
+
background-color: color-mix(in srgb, var(--atomix-data-table-bg) 65%, transparent);
|
|
5723
5296
|
}
|
|
5724
5297
|
.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%);
|
|
5298
|
+
background-color: color-mix(in srgb, var(--atomix-data-table-header-bg) 65%, transparent);
|
|
5741
5299
|
}
|
|
5742
5300
|
.c-data-table__header-cell {
|
|
5743
5301
|
padding: 0.75rem 1rem;
|
|
@@ -5754,22 +5312,7 @@ a, a:hover {
|
|
|
5754
5312
|
user-select: none;
|
|
5755
5313
|
}
|
|
5756
5314
|
.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%);
|
|
5315
|
+
background-color: color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent);
|
|
5773
5316
|
}
|
|
5774
5317
|
.c-data-table__header-content {
|
|
5775
5318
|
display: flex;
|
|
@@ -5837,61 +5380,16 @@ a, a:hover {
|
|
|
5837
5380
|
vertical-align: middle;
|
|
5838
5381
|
}
|
|
5839
5382
|
.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%);
|
|
5383
|
+
background-color: color-mix(in srgb, var(--atomix-data-table-bg) 65%, transparent);
|
|
5856
5384
|
}
|
|
5857
5385
|
.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%);
|
|
5386
|
+
background-color: color-mix(in srgb, var(--atomix-data-table-hover-bg) 65%, transparent);
|
|
5874
5387
|
}
|
|
5875
5388
|
.c-data-table__row[role=button] {
|
|
5876
5389
|
cursor: pointer;
|
|
5877
5390
|
}
|
|
5878
5391
|
.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%);
|
|
5392
|
+
background-color: color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 65%, transparent);
|
|
5895
5393
|
}
|
|
5896
5394
|
.c-data-table__cell--selection {
|
|
5897
5395
|
width: 48px;
|
|
@@ -5914,22 +5412,7 @@ a, a:hover {
|
|
|
5914
5412
|
color: var(--atomix-gray-500);
|
|
5915
5413
|
}
|
|
5916
5414
|
.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%);
|
|
5415
|
+
background-color: color-mix(in srgb, var(--atomix-data-table-striped-bg) 65%, transparent);
|
|
5933
5416
|
}
|
|
5934
5417
|
.c-data-table--bordered {
|
|
5935
5418
|
border: var(--atomix-border-width) var(--atomix-border-style) var(--atomix-data-table-border-color);
|
|
@@ -5950,22 +5433,7 @@ a, a:hover {
|
|
|
5950
5433
|
position: sticky;
|
|
5951
5434
|
top: var(--sticky-header-offset, 0);
|
|
5952
5435
|
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%);
|
|
5436
|
+
background-color: color-mix(in srgb, var(--atomix-data-table-header-bg) 65%, transparent);
|
|
5969
5437
|
}
|
|
5970
5438
|
.c-data-table-toolbar {
|
|
5971
5439
|
display: flex;
|
|
@@ -6164,49 +5632,11 @@ a, a:hover {
|
|
|
6164
5632
|
border-radius: var(--atomix-dropdown-border-radius);
|
|
6165
5633
|
box-shadow: var(--atomix-dropdown-box-shadow);
|
|
6166
5634
|
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%);
|
|
5635
|
+
background-color: color-mix(in srgb, var(--atomix-dropdown-bg) 65%, transparent);
|
|
6187
5636
|
}
|
|
6188
5637
|
.c-dropdown__menu--glass {
|
|
6189
5638
|
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%);
|
|
5639
|
+
background-color: color-mix(in srgb, var(--atomix-dropdown-bg) 65%, transparent);
|
|
6210
5640
|
}
|
|
6211
5641
|
.c-dropdown__menu-item {
|
|
6212
5642
|
display: block;
|
|
@@ -6226,41 +5656,11 @@ a, a:hover {
|
|
|
6226
5656
|
color: var(--atomix-dropdown-link-hover-color);
|
|
6227
5657
|
outline: none;
|
|
6228
5658
|
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%);
|
|
5659
|
+
background-color: color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 65%, transparent);
|
|
6245
5660
|
}
|
|
6246
5661
|
.c-dropdown__menu-item.is-active {
|
|
6247
5662
|
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%);
|
|
5663
|
+
background-color: color-mix(in srgb, var(--atomix-dropdown-active-bg) 65%, transparent);
|
|
6264
5664
|
}
|
|
6265
5665
|
.c-dropdown__menu-item.is-disabled {
|
|
6266
5666
|
color: var(--atomix-dropdown-color);
|
|
@@ -6342,60 +5742,16 @@ a, a:hover {
|
|
|
6342
5742
|
border-radius: 16px;
|
|
6343
5743
|
}
|
|
6344
5744
|
.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%);
|
|
5745
|
+
background-color: color-mix(in srgb, #8b5cf6 65%, transparent);
|
|
6361
5746
|
}
|
|
6362
5747
|
.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);
|
|
5748
|
+
background-color: #8b5cf6;
|
|
6367
5749
|
}
|
|
6368
5750
|
.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
|
-
}
|
|
5751
|
+
background-color: color-mix(in srgb, #8b5cf6 65%, transparent);
|
|
6381
5752
|
}
|
|
6382
5753
|
.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;
|
|
5754
|
+
background-color: color-mix(in srgb, #8b5cf6 65%, transparent);
|
|
6399
5755
|
}
|
|
6400
5756
|
.c-dynamic-background--with-border::before {
|
|
6401
5757
|
content: "";
|
|
@@ -6448,22 +5804,7 @@ a, a:hover {
|
|
|
6448
5804
|
opacity: 0;
|
|
6449
5805
|
z-index: 1;
|
|
6450
5806
|
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%);
|
|
5807
|
+
background-color: color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 65%, transparent);
|
|
6467
5808
|
}
|
|
6468
5809
|
.c-edge-panel__backdrop.is-animating {
|
|
6469
5810
|
animation: fadeIn 0.3s ease forwards;
|
|
@@ -6481,26 +5822,7 @@ a, a:hover {
|
|
|
6481
5822
|
overflow: hidden;
|
|
6482
5823
|
display: flex;
|
|
6483
5824
|
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%);
|
|
5825
|
+
background-color: color-mix(in srgb, var(--atomix-edge-panel-bg) 65%, transparent);
|
|
6504
5826
|
}
|
|
6505
5827
|
.c-edge-panel__container.is-animating {
|
|
6506
5828
|
animation: slideIn var(--atomix-edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
@@ -6529,22 +5851,7 @@ a, a:hover {
|
|
|
6529
5851
|
transition: background-color 0.2s ease;
|
|
6530
5852
|
}
|
|
6531
5853
|
.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%);
|
|
5854
|
+
background-color: color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent);
|
|
6548
5855
|
}
|
|
6549
5856
|
.c-edge-panel__close:focus-visible {
|
|
6550
5857
|
outline: 2px solid var(--atomix-primary);
|
|
@@ -6751,22 +6058,7 @@ a, a:hover {
|
|
|
6751
6058
|
padding: 0;
|
|
6752
6059
|
border-radius: inherit;
|
|
6753
6060
|
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%);
|
|
6061
|
+
background-color: color-mix(in srgb, var(--atomix-edge-panel-bg) 65%, transparent);
|
|
6770
6062
|
}
|
|
6771
6063
|
.c-edge-panel--glass .c-edge-panel__header {
|
|
6772
6064
|
background: transparent;
|
|
@@ -6792,22 +6084,7 @@ a, a:hover {
|
|
|
6792
6084
|
.c-edge-panel--glass .c-edge-panel__backdrop {
|
|
6793
6085
|
animation: fadeIn 0.3s ease forwards;
|
|
6794
6086
|
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%);
|
|
6087
|
+
background-color: color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 65%, transparent);
|
|
6811
6088
|
}
|
|
6812
6089
|
.c-edge-panel--glass .c-edge-panel__backdrop.is-animating-out {
|
|
6813
6090
|
animation: fadeOut 0.3s ease forwards;
|
|
@@ -6862,22 +6139,7 @@ a, a:hover {
|
|
|
6862
6139
|
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
6863
6140
|
padding: var(--atomix-footer-padding-y) 0;
|
|
6864
6141
|
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%);
|
|
6142
|
+
background-color: color-mix(in srgb, var(--atomix-footer-bg) 65%, transparent);
|
|
6881
6143
|
}
|
|
6882
6144
|
.c-footer--glass {
|
|
6883
6145
|
padding: 0;
|
|
@@ -6890,22 +6152,7 @@ a, a:hover {
|
|
|
6890
6152
|
color: var(--atomix-footer-color);
|
|
6891
6153
|
border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
|
|
6892
6154
|
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%);
|
|
6155
|
+
background-color: color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 65%, transparent);
|
|
6909
6156
|
}
|
|
6910
6157
|
.c-footer__container {
|
|
6911
6158
|
display: flex;
|
|
@@ -7139,22 +6386,7 @@ a, a:hover {
|
|
|
7139
6386
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7140
6387
|
position: relative;
|
|
7141
6388
|
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%);
|
|
6389
|
+
background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
|
|
7158
6390
|
}
|
|
7159
6391
|
.c-footer__social-link::before {
|
|
7160
6392
|
content: "";
|
|
@@ -7168,26 +6400,7 @@ a, a:hover {
|
|
|
7168
6400
|
color: var(--atomix-component-active-color);
|
|
7169
6401
|
transform: translateY(-3px) scale(1.05);
|
|
7170
6402
|
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%);
|
|
6403
|
+
background-color: color-mix(in srgb, var(--atomix-primary) 65%, transparent);
|
|
7191
6404
|
}
|
|
7192
6405
|
.c-footer__social-link:hover::before, .c-footer__social-link:focus::before {
|
|
7193
6406
|
transform: translateX(100%);
|
|
@@ -7257,22 +6470,7 @@ a, a:hover {
|
|
|
7257
6470
|
border: 1px solid var(--atomix-border-subtle);
|
|
7258
6471
|
position: relative;
|
|
7259
6472
|
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%);
|
|
6473
|
+
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
6474
|
}
|
|
7277
6475
|
.c-footer__newsletter::before {
|
|
7278
6476
|
content: "";
|
|
@@ -7333,22 +6531,7 @@ a, a:hover {
|
|
|
7333
6531
|
outline: none;
|
|
7334
6532
|
transition: all 0.3s ease;
|
|
7335
6533
|
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%);
|
|
6534
|
+
background-color: color-mix(in srgb, var(--atomix-primary-bg-subtle) 65%, transparent);
|
|
7352
6535
|
}
|
|
7353
6536
|
.c-footer__newsletter-input:focus {
|
|
7354
6537
|
border-color: var(--atomix-primary);
|
|
@@ -7381,22 +6564,7 @@ a, a:hover {
|
|
|
7381
6564
|
white-space: nowrap;
|
|
7382
6565
|
position: relative;
|
|
7383
6566
|
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%);
|
|
6567
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
7400
6568
|
}
|
|
7401
6569
|
.c-footer__newsletter-button::before {
|
|
7402
6570
|
content: "";
|
|
@@ -7409,26 +6577,7 @@ a, a:hover {
|
|
|
7409
6577
|
.c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
|
|
7410
6578
|
transform: translateY(-2px);
|
|
7411
6579
|
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%);
|
|
6580
|
+
background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
|
|
7432
6581
|
}
|
|
7433
6582
|
.c-footer__newsletter-button:hover::before, .c-footer__newsletter-button:focus::before {
|
|
7434
6583
|
transform: translateX(100%);
|
|
@@ -7482,22 +6631,7 @@ a, a:hover {
|
|
|
7482
6631
|
overflow: hidden;
|
|
7483
6632
|
text-decoration: none;
|
|
7484
6633
|
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%);
|
|
6634
|
+
background-color: color-mix(in srgb, var(--atomix-secondary-bg) 65%, transparent);
|
|
7501
6635
|
}
|
|
7502
6636
|
.c-footer__back-to-top::before {
|
|
7503
6637
|
content: "";
|
|
@@ -7512,26 +6646,7 @@ a, a:hover {
|
|
|
7512
6646
|
border-color: var(--atomix-primary);
|
|
7513
6647
|
transform: translateY(-3px);
|
|
7514
6648
|
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%);
|
|
6649
|
+
background-color: color-mix(in srgb, var(--atomix-primary) 65%, transparent);
|
|
7535
6650
|
}
|
|
7536
6651
|
.c-footer__back-to-top:hover::before, .c-footer__back-to-top:focus::before {
|
|
7537
6652
|
transform: translateX(100%);
|
|
@@ -8050,22 +7165,7 @@ a, a:hover {
|
|
|
8050
7165
|
place-items: center;
|
|
8051
7166
|
padding: var(--atomix-hero-padding-y) var(--atomix-hero-padding-x);
|
|
8052
7167
|
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%);
|
|
7168
|
+
background-color: color-mix(in srgb, var(--atomix-hero-bg) 65%, transparent);
|
|
8069
7169
|
}
|
|
8070
7170
|
.c-hero__bg {
|
|
8071
7171
|
position: absolute;
|
|
@@ -8089,22 +7189,7 @@ a, a:hover {
|
|
|
8089
7189
|
inset: 0;
|
|
8090
7190
|
opacity: var(--atomix-hero-overlay-opacity);
|
|
8091
7191
|
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%);
|
|
7192
|
+
background-color: color-mix(in srgb, var(--atomix-hero-overlay) 65%, transparent);
|
|
8108
7193
|
}
|
|
8109
7194
|
.c-hero__container {
|
|
8110
7195
|
position: relative;
|
|
@@ -8279,22 +7364,7 @@ a, a:hover {
|
|
|
8279
7364
|
transition-duration: 0.2s;
|
|
8280
7365
|
transition-timing-function: ease-in-out;
|
|
8281
7366
|
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%);
|
|
7367
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 65%, transparent);
|
|
8298
7368
|
}
|
|
8299
7369
|
.c-input:focus, .c-input:hover {
|
|
8300
7370
|
--atomix-input-border-color: var(--atomix-primary-border-subtle);
|
|
@@ -8365,66 +7435,17 @@ a, a:hover {
|
|
|
8365
7435
|
.c-input--glass {
|
|
8366
7436
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
8367
7437
|
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%);
|
|
7438
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 65%, transparent);
|
|
8388
7439
|
}
|
|
8389
7440
|
.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%);
|
|
7441
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 90%, transparent);
|
|
8406
7442
|
}
|
|
8407
7443
|
.c-input--glass.c-input--textarea {
|
|
8408
7444
|
resize: vertical;
|
|
8409
7445
|
}
|
|
8410
7446
|
.c-input--glass:disabled, .c-input--glass.is-disabled {
|
|
8411
7447
|
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%);
|
|
7448
|
+
background-color: color-mix(in srgb, var(--atomix-input-bg) 65%, transparent);
|
|
8428
7449
|
}
|
|
8429
7450
|
.c-list-group {
|
|
8430
7451
|
--atomix-list-group-width: 100%;
|
|
@@ -8444,44 +7465,14 @@ a, a:hover {
|
|
|
8444
7465
|
list-style: none;
|
|
8445
7466
|
width: 100%;
|
|
8446
7467
|
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%);
|
|
7468
|
+
background-color: color-mix(in srgb, var(--atomix-list-group-bg) 65%, transparent);
|
|
8463
7469
|
}
|
|
8464
7470
|
.c-list-group__item {
|
|
8465
7471
|
padding: var(--atomix-list-group-item-padding-y) var(--atomix-list-group-item-padding-x);
|
|
8466
7472
|
font-size: var(--atomix-list-group-item-font-size);
|
|
8467
7473
|
color: var(--atomix-list-group-item-color);
|
|
8468
7474
|
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%);
|
|
7475
|
+
background-color: color-mix(in srgb, var(--atomix-list-group-item-bg) 65%, transparent);
|
|
8485
7476
|
}
|
|
8486
7477
|
.c-list-group__item--primary {
|
|
8487
7478
|
--atomix-list-group-item-bg: var(--atomix-brand-bg-subtle);
|
|
@@ -8548,22 +7539,7 @@ a, a:hover {
|
|
|
8548
7539
|
width: var(--atomix-list-item-dash-width);
|
|
8549
7540
|
height: var(--atomix-list-item-dash-height);
|
|
8550
7541
|
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%);
|
|
7542
|
+
background-color: color-mix(in srgb, var(--atomix-list-color) 65%, transparent);
|
|
8567
7543
|
}
|
|
8568
7544
|
.c-list--number {
|
|
8569
7545
|
list-style-type: decimal;
|
|
@@ -8605,26 +7581,7 @@ a, a:hover {
|
|
|
8605
7581
|
border-radius: var(--atomix-menu-border-radius);
|
|
8606
7582
|
box-shadow: var(--atomix-menu-box-shadow);
|
|
8607
7583
|
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%);
|
|
7584
|
+
background-color: color-mix(in srgb, var(--atomix-menu-bg) 65%, transparent);
|
|
8628
7585
|
}
|
|
8629
7586
|
.c-menu__container {
|
|
8630
7587
|
width: 100%;
|
|
@@ -8673,59 +7630,14 @@ a, a:hover {
|
|
|
8673
7630
|
transition-duration: 0.2s;
|
|
8674
7631
|
transition-timing-function: ease-in-out;
|
|
8675
7632
|
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%);
|
|
7633
|
+
background-color: color-mix(in srgb, var(--atomix-menu-item-bg) 65%, transparent);
|
|
8692
7634
|
}
|
|
8693
7635
|
.c-menu__link:hover {
|
|
8694
7636
|
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%);
|
|
7637
|
+
background-color: color-mix(in srgb, var(--atomix-menu-item-bg-hover) 65%, transparent);
|
|
8711
7638
|
}
|
|
8712
7639
|
.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%);
|
|
7640
|
+
background-color: color-mix(in srgb, var(--atomix-menu-item-bg-active) 65%, transparent);
|
|
8729
7641
|
}
|
|
8730
7642
|
.c-menu__icon {
|
|
8731
7643
|
font-size: var(--atomix-menu-item-icon-size);
|
|
@@ -8895,22 +7807,7 @@ a, a:hover {
|
|
|
8895
7807
|
padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
|
|
8896
7808
|
border-radius: var(--atomix-messages-border-radius);
|
|
8897
7809
|
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%);
|
|
7810
|
+
background-color: color-mix(in srgb, var(--atomix-messages-bg) 65%, transparent);
|
|
8914
7811
|
}
|
|
8915
7812
|
.c-messages__body {
|
|
8916
7813
|
max-height: var(--atomix-messages-body-height);
|
|
@@ -8961,44 +7858,14 @@ a, a:hover {
|
|
|
8961
7858
|
font-size: var(--atomix-messages-text-font-size);
|
|
8962
7859
|
padding: var(--atomix-messages-text-padding-y) var(--atomix-messages-text-padding-x);
|
|
8963
7860
|
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%);
|
|
7861
|
+
background-color: color-mix(in srgb, var(--atomix-messages-text-bg) 65%, transparent);
|
|
8980
7862
|
}
|
|
8981
7863
|
.c-messages__file {
|
|
8982
7864
|
display: flex;
|
|
8983
7865
|
flex-wrap: wrap;
|
|
8984
7866
|
padding: var(--atomix-messages-file-padding-y) var(--atomix-messages-file-padding-x);
|
|
8985
7867
|
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%);
|
|
7868
|
+
background-color: color-mix(in srgb, var(--atomix-messages-file-bg) 65%, transparent);
|
|
9002
7869
|
}
|
|
9003
7870
|
.c-messages__file-icon {
|
|
9004
7871
|
display: grid !important;
|
|
@@ -9009,22 +7876,7 @@ a, a:hover {
|
|
|
9009
7876
|
color: var(--atomix-tertiary-text-emphasis);
|
|
9010
7877
|
margin-right: var(--atomix-messages-file-icon-margin-right);
|
|
9011
7878
|
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%);
|
|
7879
|
+
background-color: color-mix(in srgb, var(--atomix-body-bg) 65%, transparent);
|
|
9028
7880
|
}
|
|
9029
7881
|
.c-messages__file-name {
|
|
9030
7882
|
color: var(--atomix-messages-file-text-color);
|
|
@@ -9079,22 +7931,7 @@ a, a:hover {
|
|
|
9079
7931
|
}
|
|
9080
7932
|
.c-messages__content--self .c-messages__file-icon {
|
|
9081
7933
|
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%);
|
|
7934
|
+
background-color: color-mix(in srgb, var(--atomix-messages-file-icon-bg) 65%, transparent);
|
|
9098
7935
|
}
|
|
9099
7936
|
.c-messages__content--self .c-messages__file-icon [data-atomix-color-mode=dark] {
|
|
9100
7937
|
--atomix-messages-file-icon-bg: #7c3aed;
|
|
@@ -9139,22 +7976,7 @@ a, a:hover {
|
|
|
9139
7976
|
border: var(--atomix-messages-input-border-width) solid var(--atomix-messages-input-border-color);
|
|
9140
7977
|
border-radius: var(--atomix-messages-input-border-radius);
|
|
9141
7978
|
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%);
|
|
7979
|
+
background-color: color-mix(in srgb, var(--atomix-messages-bg) 65%, transparent);
|
|
9158
7980
|
}
|
|
9159
7981
|
.c-messages__input::-moz-placeholder {
|
|
9160
7982
|
color: var(--atomix-messages-input-placeholder-color);
|
|
@@ -9180,22 +8002,7 @@ a, a:hover {
|
|
|
9180
8002
|
-moz-appearance: none;
|
|
9181
8003
|
appearance: none;
|
|
9182
8004
|
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%);
|
|
8005
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
9199
8006
|
}
|
|
9200
8007
|
.c-messages__submit .c-icon {
|
|
9201
8008
|
width: var(--atomix-messages-form-submit-icon-size);
|
|
@@ -9217,90 +8024,26 @@ a, a:hover {
|
|
|
9217
8024
|
.c-messages--glass .c-messages__body {
|
|
9218
8025
|
border-radius: 0.25rem;
|
|
9219
8026
|
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%);
|
|
8027
|
+
background-color: color-mix(in srgb, var(--atomix-body-bg) 15%, transparent);
|
|
9236
8028
|
}
|
|
9237
8029
|
.c-messages--glass .c-messages__text {
|
|
9238
8030
|
-webkit-backdrop-filter: blur(8px);
|
|
9239
8031
|
backdrop-filter: blur(8px);
|
|
9240
8032
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
9241
8033
|
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%);
|
|
8034
|
+
background-color: color-mix(in srgb, var(--atomix-body-bg) 65%, transparent);
|
|
9262
8035
|
}
|
|
9263
8036
|
.c-messages--glass .c-messages__content--self .c-messages__text {
|
|
9264
8037
|
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
9265
8038
|
-webkit-backdrop-filter: blur(8px);
|
|
9266
8039
|
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%);
|
|
8040
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
9283
8041
|
}
|
|
9284
8042
|
.c-messages--glass .c-messages__content--self .c-messages__file {
|
|
9285
8043
|
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
9286
8044
|
-webkit-backdrop-filter: blur(8px);
|
|
9287
8045
|
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%);
|
|
8046
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
9304
8047
|
}
|
|
9305
8048
|
.c-messages--glass .c-messages__file {
|
|
9306
8049
|
border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
|
|
@@ -9308,47 +8051,13 @@ a, a:hover {
|
|
|
9308
8051
|
backdrop-filter: blur(8px);
|
|
9309
8052
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
9310
8053
|
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%);
|
|
8054
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
9331
8055
|
}
|
|
9332
8056
|
.c-messages--glass .c-messages__file-icon {
|
|
9333
8057
|
-webkit-backdrop-filter: blur(8px);
|
|
9334
8058
|
backdrop-filter: blur(8px);
|
|
9335
8059
|
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%);
|
|
8060
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
9352
8061
|
}
|
|
9353
8062
|
.c-messages--glass .c-messages__image {
|
|
9354
8063
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
@@ -9465,22 +8174,7 @@ a, a:hover {
|
|
|
9465
8174
|
inset: 0;
|
|
9466
8175
|
opacity: 0;
|
|
9467
8176
|
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%);
|
|
8177
|
+
background-color: color-mix(in srgb, var(--atomix-modal-backdrop-bg) 65%, transparent);
|
|
9484
8178
|
}
|
|
9485
8179
|
.c-modal__dialog {
|
|
9486
8180
|
position: relative;
|
|
@@ -9505,26 +8199,7 @@ a, a:hover {
|
|
|
9505
8199
|
border-radius: var(--atomix-modal-content-border-radius);
|
|
9506
8200
|
overflow: hidden;
|
|
9507
8201
|
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%);
|
|
8202
|
+
background-color: color-mix(in srgb, var(--atomix-modal-content-bg) 65%, transparent);
|
|
9528
8203
|
}
|
|
9529
8204
|
.c-modal__header {
|
|
9530
8205
|
display: flex;
|
|
@@ -9581,26 +8256,7 @@ a, a:hover {
|
|
|
9581
8256
|
border-radius: inherit;
|
|
9582
8257
|
width: var(--atomix-modal-width);
|
|
9583
8258
|
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%);
|
|
8259
|
+
background-color: color-mix(in srgb, var(--atomix-modal-content-bg) 65%, transparent);
|
|
9604
8260
|
}
|
|
9605
8261
|
.c-modal.is-open .c-modal__backdrop {
|
|
9606
8262
|
opacity: var(--atomix-modal-backdrop-opacity);
|
|
@@ -9657,44 +8313,14 @@ a, a:hover {
|
|
|
9657
8313
|
color: var(--atomix-nav-link-color);
|
|
9658
8314
|
}
|
|
9659
8315
|
.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%);
|
|
8316
|
+
background-color: color-mix(in srgb, var(--atomix-nav-link-hover-bg) 65%, transparent);
|
|
9676
8317
|
}
|
|
9677
8318
|
.c-nav__link--disabled {
|
|
9678
8319
|
color: var(--atomix-disabled-text-emphasis);
|
|
9679
8320
|
pointer-events: none;
|
|
9680
8321
|
}
|
|
9681
8322
|
.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%);
|
|
8323
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
9698
8324
|
}
|
|
9699
8325
|
.c-nav__icon {
|
|
9700
8326
|
font-size: var(--atomix-nav-icon-size);
|
|
@@ -9757,26 +8383,7 @@ a, a:hover {
|
|
|
9757
8383
|
padding: 0.5rem 1rem;
|
|
9758
8384
|
-webkit-backdrop-filter: blur(10px);
|
|
9759
8385
|
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%);
|
|
8386
|
+
background-color: color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 65%, transparent);
|
|
9780
8387
|
}
|
|
9781
8388
|
.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
8389
|
margin-left: 0.25rem;
|
|
@@ -9786,22 +8393,7 @@ a, a:hover {
|
|
|
9786
8393
|
border-radius: 0.625rem;
|
|
9787
8394
|
}
|
|
9788
8395
|
.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%);
|
|
8396
|
+
background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
|
|
9805
8397
|
}
|
|
9806
8398
|
.c-nav--float-top-center {
|
|
9807
8399
|
top: 1.25rem;
|
|
@@ -9836,22 +8428,7 @@ a, a:hover {
|
|
|
9836
8428
|
padding: var(--atomix-navbar-padding-y) 0;
|
|
9837
8429
|
border-bottom: var(--atomix-navbar-border-width) solid var(--atomix-navbar-border-color);
|
|
9838
8430
|
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%);
|
|
8431
|
+
background-color: color-mix(in srgb, var(--atomix-navbar-bg) 65%, transparent);
|
|
9855
8432
|
}
|
|
9856
8433
|
.c-navbar__container {
|
|
9857
8434
|
display: flex;
|
|
@@ -9890,22 +8467,7 @@ a, a:hover {
|
|
|
9890
8467
|
border-radius: var(--atomix-navbar-toggler-border-radius);
|
|
9891
8468
|
cursor: pointer;
|
|
9892
8469
|
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%);
|
|
8470
|
+
background-color: color-mix(in srgb, var(--atomix-navbar-toggler-bg) 65%, transparent);
|
|
9909
8471
|
}
|
|
9910
8472
|
.c-navbar__toggler:hover {
|
|
9911
8473
|
opacity: 0.8;
|
|
@@ -9954,22 +8516,7 @@ a, a:hover {
|
|
|
9954
8516
|
opacity: 0;
|
|
9955
8517
|
visibility: hidden;
|
|
9956
8518
|
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%);
|
|
8519
|
+
background-color: color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 65%, transparent);
|
|
9973
8520
|
}
|
|
9974
8521
|
.c-navbar__backdrop.is-open {
|
|
9975
8522
|
opacity: 1;
|
|
@@ -10050,22 +8597,11 @@ a, a:hover {
|
|
|
10050
8597
|
.c-navbar--glass {
|
|
10051
8598
|
position: relative;
|
|
10052
8599
|
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
8600
|
}
|
|
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
|
-
}
|
|
8601
|
+
@supports (color: color-mix(in lch, red, blue)){
|
|
8602
|
+
.c-navbar--glass {
|
|
8603
|
+
background-color: color-mix(in srgb, var(--atomix-navbar-bg) 65%, transparent);
|
|
10066
8604
|
}
|
|
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
8605
|
}
|
|
10070
8606
|
.c-navbar--fixed-bottom {
|
|
10071
8607
|
bottom: 0;
|
|
@@ -10270,22 +8806,7 @@ a, a:hover {
|
|
|
10270
8806
|
border-radius: var(--atomix-callout-border-radius);
|
|
10271
8807
|
border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
|
|
10272
8808
|
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%);
|
|
8809
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 65%, transparent);
|
|
10289
8810
|
}
|
|
10290
8811
|
.c-callout__content {
|
|
10291
8812
|
width: 100%;
|
|
@@ -10365,26 +8886,7 @@ a, a:hover {
|
|
|
10365
8886
|
border: none;
|
|
10366
8887
|
box-shadow: var(--atomix-callout-box-shadow);
|
|
10367
8888
|
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%);
|
|
8889
|
+
background-color: color-mix(in srgb, var(--atomix-callout-toast-bg) 65%, transparent);
|
|
10388
8890
|
}
|
|
10389
8891
|
.c-callout--toast .c-callout__content {
|
|
10390
8892
|
align-items: flex-start;
|
|
@@ -10462,22 +8964,7 @@ a, a:hover {
|
|
|
10462
8964
|
max-width: var(--atomix-callout-width);
|
|
10463
8965
|
border-radius: var(--atomix-callout-border-radius);
|
|
10464
8966
|
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%);
|
|
8967
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 65%, transparent);
|
|
10481
8968
|
}
|
|
10482
8969
|
.c-callout--glass .c-callout__title {
|
|
10483
8970
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
@@ -10487,26 +8974,7 @@ a, a:hover {
|
|
|
10487
8974
|
}
|
|
10488
8975
|
.c-callout--glass.c-callout--toast {
|
|
10489
8976
|
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%);
|
|
8977
|
+
background-color: color-mix(in srgb, var(--atomix-callout-bg) 65%, transparent);
|
|
10510
8978
|
}
|
|
10511
8979
|
.c-callout.is-hide {
|
|
10512
8980
|
opacity: 0;
|
|
@@ -10654,22 +9122,7 @@ a, a:hover {
|
|
|
10654
9122
|
-webkit-user-select: none;
|
|
10655
9123
|
-moz-user-select: none;
|
|
10656
9124
|
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%);
|
|
9125
|
+
background-color: color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent);
|
|
10673
9126
|
}
|
|
10674
9127
|
.c-pagination__link:hover {
|
|
10675
9128
|
--atomix-pagination-color: var(--atomix-pagination-hover-color);
|
|
@@ -10749,22 +9202,7 @@ a, a:hover {
|
|
|
10749
9202
|
border-radius: var(--atomix-pagination-border-radius);
|
|
10750
9203
|
color: var(--atomix-pagination-color);
|
|
10751
9204
|
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%);
|
|
9205
|
+
background-color: color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent);
|
|
10768
9206
|
}
|
|
10769
9207
|
.c-pagination__search-input:focus {
|
|
10770
9208
|
outline: none;
|
|
@@ -10787,22 +9225,7 @@ a, a:hover {
|
|
|
10787
9225
|
color: var(--atomix-pagination-color);
|
|
10788
9226
|
cursor: pointer;
|
|
10789
9227
|
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%);
|
|
9228
|
+
background-color: color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent);
|
|
10806
9229
|
}
|
|
10807
9230
|
.c-pagination__search-button:hover {
|
|
10808
9231
|
--atomix-pagination-color: var(--atomix-pagination-hover-color);
|
|
@@ -10853,26 +9276,7 @@ a, a:hover {
|
|
|
10853
9276
|
padding: var(--atomix-popover-padding-y) var(--atomix-popover-padding-x);
|
|
10854
9277
|
border-radius: var(--atomix-popover-border-radius);
|
|
10855
9278
|
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%);
|
|
9279
|
+
background-color: color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent);
|
|
10876
9280
|
}
|
|
10877
9281
|
.c-popover__arrow {
|
|
10878
9282
|
position: absolute;
|
|
@@ -10881,26 +9285,7 @@ a, a:hover {
|
|
|
10881
9285
|
box-shadow: var(--atomix-popover-box-shadow);
|
|
10882
9286
|
z-index: 1;
|
|
10883
9287
|
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%);
|
|
9288
|
+
background-color: color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent);
|
|
10904
9289
|
}
|
|
10905
9290
|
.c-popover.is-open {
|
|
10906
9291
|
opacity: 1;
|
|
@@ -10929,26 +9314,7 @@ a, a:hover {
|
|
|
10929
9314
|
}
|
|
10930
9315
|
.c-popover--glass .c-popover__content-inner {
|
|
10931
9316
|
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%);
|
|
9317
|
+
background-color: color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent);
|
|
10952
9318
|
}
|
|
10953
9319
|
.c-product-review {
|
|
10954
9320
|
--atomix-product-review-padding: 1.5rem;
|
|
@@ -10966,22 +9332,7 @@ a, a:hover {
|
|
|
10966
9332
|
width: 100%;
|
|
10967
9333
|
max-width: 37.5rem;
|
|
10968
9334
|
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%);
|
|
9335
|
+
background-color: color-mix(in srgb, var(--atomix-product-review-bg) 65%, transparent);
|
|
10985
9336
|
}
|
|
10986
9337
|
.c-product-review__header {
|
|
10987
9338
|
display: flex;
|
|
@@ -11040,22 +9391,7 @@ a, a:hover {
|
|
|
11040
9391
|
color: var(--atomix-body-color);
|
|
11041
9392
|
font-family: inherit;
|
|
11042
9393
|
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%);
|
|
9394
|
+
background-color: color-mix(in srgb, var(--atomix-body-bg) 65%, transparent);
|
|
11059
9395
|
}
|
|
11060
9396
|
.c-product-review__textarea:focus {
|
|
11061
9397
|
outline: none;
|
|
@@ -11102,22 +9438,7 @@ a, a:hover {
|
|
|
11102
9438
|
height: var(--atomix-progress-bar-height);
|
|
11103
9439
|
border-radius: var(--atomix-progress-border-radius);
|
|
11104
9440
|
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%);
|
|
9441
|
+
background-color: color-mix(in srgb, var(--atomix-progress-bg) 65%, transparent);
|
|
11121
9442
|
}
|
|
11122
9443
|
.c-progress__bar {
|
|
11123
9444
|
width: var(--atomix-progress-bar-width);
|
|
@@ -11125,22 +9446,7 @@ a, a:hover {
|
|
|
11125
9446
|
color: var(--atomix-progress-bar-color);
|
|
11126
9447
|
border-radius: var(--atomix-progress-border-radius);
|
|
11127
9448
|
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%);
|
|
9449
|
+
background-color: color-mix(in srgb, var(--atomix-progress-bar-bg) 65%, transparent);
|
|
11144
9450
|
}
|
|
11145
9451
|
.c-progress--primary {
|
|
11146
9452
|
--atomix-progress-bar-bg: var(--atomix-primary);
|
|
@@ -11345,22 +9651,7 @@ a, a:hover {
|
|
|
11345
9651
|
max-width: var(--atomix-river-width);
|
|
11346
9652
|
padding: var(--atomix-river-padding-y) var(--atomix-river-padding-x);
|
|
11347
9653
|
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%);
|
|
9654
|
+
background-color: color-mix(in srgb, var(--atomix-river-bg) 65%, transparent);
|
|
11364
9655
|
}
|
|
11365
9656
|
.c-river__bg {
|
|
11366
9657
|
position: absolute;
|
|
@@ -11382,22 +9673,7 @@ a, a:hover {
|
|
|
11382
9673
|
inset: 0;
|
|
11383
9674
|
opacity: var(--atomix-river-overlay-opacity);
|
|
11384
9675
|
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%);
|
|
9676
|
+
background-color: color-mix(in srgb, var(--atomix-river-overlay) 65%, transparent);
|
|
11401
9677
|
}
|
|
11402
9678
|
.c-river__container {
|
|
11403
9679
|
position: relative;
|
|
@@ -11619,22 +9895,7 @@ a, a:hover {
|
|
|
11619
9895
|
width: 100%;
|
|
11620
9896
|
height: 100%;
|
|
11621
9897
|
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%);
|
|
9898
|
+
background-color: color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 65%, transparent);
|
|
11638
9899
|
}
|
|
11639
9900
|
.c-sectionintro--has-bg {
|
|
11640
9901
|
color: var(--atomix-color-white);
|
|
@@ -11720,22 +9981,7 @@ a, a:hover {
|
|
|
11720
9981
|
transition-duration: 0.2s;
|
|
11721
9982
|
transition-timing-function: ease-in-out;
|
|
11722
9983
|
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%);
|
|
9984
|
+
background-color: color-mix(in srgb, var(--atomix-select-bg) 65%, transparent);
|
|
11739
9985
|
}
|
|
11740
9986
|
.c-select__selected:hover {
|
|
11741
9987
|
border-color: var(--atomix-select-border-color-hover);
|
|
@@ -11766,26 +10012,7 @@ a, a:hover {
|
|
|
11766
10012
|
transition-duration: 0.2s;
|
|
11767
10013
|
transition-timing-function: ease-in-out;
|
|
11768
10014
|
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%);
|
|
10015
|
+
background-color: color-mix(in srgb, var(--atomix-select-panel-bg) 65%, transparent);
|
|
11789
10016
|
}
|
|
11790
10017
|
.c-select__panel {
|
|
11791
10018
|
padding: var(--atomix-select-panel-padding-x) var(--atomix-select-panel-padding-y);
|
|
@@ -11803,43 +10030,13 @@ a, a:hover {
|
|
|
11803
10030
|
transition-duration: 0.2s;
|
|
11804
10031
|
transition-timing-function: ease-in-out;
|
|
11805
10032
|
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%);
|
|
10033
|
+
background-color: color-mix(in srgb, var(--atomix-select-item-bg) 65%, transparent);
|
|
11822
10034
|
}
|
|
11823
10035
|
.c-select__item, .c-select__item > * {
|
|
11824
10036
|
cursor: pointer;
|
|
11825
10037
|
}
|
|
11826
10038
|
.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%);
|
|
10039
|
+
background-color: color-mix(in srgb, var(--atomix-select-item-bg-hover) 65%, transparent);
|
|
11843
10040
|
}
|
|
11844
10041
|
.c-select--lg {
|
|
11845
10042
|
--atomix-select-font-size: var(--atomix-select-font-size-lg);
|
|
@@ -11892,26 +10089,7 @@ a, a:hover {
|
|
|
11892
10089
|
border-radius: var(--atomix-side-menu-border-radius);
|
|
11893
10090
|
border: var(--atomix-side-menu-border-width) solid var(--atomix-side-menu-border-color);
|
|
11894
10091
|
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%);
|
|
10092
|
+
background-color: color-mix(in srgb, var(--atomix-side-menu-bg) 65%, transparent);
|
|
11915
10093
|
}
|
|
11916
10094
|
@media (max-width: 991.98px) {
|
|
11917
10095
|
.c-side-menu {
|
|
@@ -11955,40 +10133,10 @@ a, a:hover {
|
|
|
11955
10133
|
transition: var(--atomix-side-menu-toggler-transition);
|
|
11956
10134
|
text-align: left;
|
|
11957
10135
|
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%);
|
|
10136
|
+
background-color: color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 65%, transparent);
|
|
11974
10137
|
}
|
|
11975
10138
|
.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%);
|
|
10139
|
+
background-color: color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 65%, transparent);
|
|
11992
10140
|
}
|
|
11993
10141
|
.c-side-menu__toggler:focus-visible {
|
|
11994
10142
|
outline: 2px solid var(--atomix-focus-ring-color);
|
|
@@ -12055,42 +10203,12 @@ a, a:hover {
|
|
|
12055
10203
|
cursor: pointer;
|
|
12056
10204
|
transition: var(--atomix-side-menu-item-transition);
|
|
12057
10205
|
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%);
|
|
10206
|
+
background-color: color-mix(in srgb, var(--atomix-side-menu-item-bg) 65%, transparent);
|
|
12074
10207
|
}
|
|
12075
10208
|
.c-side-menu__link:hover {
|
|
12076
10209
|
color: var(--atomix-side-menu-item-hover-color);
|
|
12077
10210
|
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%);
|
|
10211
|
+
background-color: color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 65%, transparent);
|
|
12094
10212
|
}
|
|
12095
10213
|
.c-side-menu__link:focus-visible {
|
|
12096
10214
|
outline: 2px solid var(--atomix-focus-ring-color);
|
|
@@ -12105,44 +10223,14 @@ a, a:hover {
|
|
|
12105
10223
|
.c-side-menu__link.is-active {
|
|
12106
10224
|
color: var(--atomix-side-menu-item-active-color);
|
|
12107
10225
|
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%);
|
|
10226
|
+
background-color: color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 65%, transparent);
|
|
12124
10227
|
}
|
|
12125
10228
|
.c-side-menu__link.is-disabled, .c-side-menu__link[aria-disabled=true] {
|
|
12126
10229
|
color: var(--atomix-side-menu-item-disabled-color);
|
|
12127
10230
|
cursor: not-allowed;
|
|
12128
10231
|
pointer-events: none;
|
|
12129
10232
|
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%);
|
|
10233
|
+
background-color: color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 65%, transparent);
|
|
12146
10234
|
}
|
|
12147
10235
|
.c-side-menu__link-icon {
|
|
12148
10236
|
flex-shrink: 0;
|
|
@@ -12214,22 +10302,7 @@ a, a:hover {
|
|
|
12214
10302
|
pointer-events: none;
|
|
12215
10303
|
vertical-align: middle;
|
|
12216
10304
|
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%);
|
|
10305
|
+
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
10306
|
}
|
|
12234
10307
|
.c-skeleton--rect {
|
|
12235
10308
|
width: calc(var(--atomix-skeleton-height) * 5.15);
|
|
@@ -12315,22 +10388,7 @@ a, a:hover {
|
|
|
12315
10388
|
justify-content: center;
|
|
12316
10389
|
border: 2px dashed var(--atomix-primary-border-subtle);
|
|
12317
10390
|
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%);
|
|
10391
|
+
background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
|
|
12334
10392
|
}
|
|
12335
10393
|
.c-slider__wrapper {
|
|
12336
10394
|
position: relative;
|
|
@@ -12376,57 +10434,13 @@ a, a:hover {
|
|
|
12376
10434
|
justify-content: center;
|
|
12377
10435
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
12378
10436
|
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%);
|
|
10437
|
+
background-color: color-mix(in srgb, var(--atomix-primary-bg-subtle) 65%, transparent);
|
|
12402
10438
|
}
|
|
12403
10439
|
.c-slider__navigation-prev:hover,
|
|
12404
10440
|
.c-slider__navigation-next:hover {
|
|
12405
10441
|
transform: translateY(-50%) scale(1.05);
|
|
12406
10442
|
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%);
|
|
10443
|
+
background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
|
|
12430
10444
|
}
|
|
12431
10445
|
.c-slider__navigation-prev:active,
|
|
12432
10446
|
.c-slider__navigation-next:active {
|
|
@@ -12479,63 +10493,18 @@ a, a:hover {
|
|
|
12479
10493
|
cursor: pointer;
|
|
12480
10494
|
pointer-events: auto;
|
|
12481
10495
|
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%);
|
|
10496
|
+
background-color: color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 65%, transparent);
|
|
12498
10497
|
}
|
|
12499
10498
|
.c-slider__pagination-bullet:hover {
|
|
12500
10499
|
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%);
|
|
10500
|
+
background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
|
|
12517
10501
|
}
|
|
12518
10502
|
.c-slider__pagination-bullet:active {
|
|
12519
10503
|
transform: scale(1.1);
|
|
12520
10504
|
}
|
|
12521
10505
|
.c-slider__pagination-bullet--active {
|
|
12522
10506
|
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%);
|
|
10507
|
+
background-color: color-mix(in srgb, var(--atomix-primary) 65%, transparent);
|
|
12539
10508
|
}
|
|
12540
10509
|
.c-slider__empty-message {
|
|
12541
10510
|
color: var(--atomix-tertiary-text);
|
|
@@ -12692,22 +10661,7 @@ a, a:hover {
|
|
|
12692
10661
|
width: var(--atomix-steps-line-width);
|
|
12693
10662
|
height: var(--atomix-steps-line-height);
|
|
12694
10663
|
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%);
|
|
10664
|
+
background-color: color-mix(in srgb, var(--atomix-steps-item-bg) 65%, transparent);
|
|
12711
10665
|
}
|
|
12712
10666
|
.c-steps__content {
|
|
12713
10667
|
display: flex;
|
|
@@ -12723,22 +10677,7 @@ a, a:hover {
|
|
|
12723
10677
|
color: var(--atomix-steps-item-number-color);
|
|
12724
10678
|
font-size: var(--atomix-steps-item-number-font-size);
|
|
12725
10679
|
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%);
|
|
10680
|
+
background-color: color-mix(in srgb, var(--atomix-steps-item-number-bg) 65%, transparent);
|
|
12742
10681
|
}
|
|
12743
10682
|
.c-steps__text {
|
|
12744
10683
|
color: var(--atomix-steps-item-color);
|
|
@@ -12818,44 +10757,14 @@ a, a:hover {
|
|
|
12818
10757
|
transition-duration: 0.2s;
|
|
12819
10758
|
transition-timing-function: ease-in-out;
|
|
12820
10759
|
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%);
|
|
10760
|
+
background-color: color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 65%, transparent);
|
|
12837
10761
|
}
|
|
12838
10762
|
.c-tabs__nav-btn:active, .c-tabs__nav-btn.is-active {
|
|
12839
10763
|
color: var(--atomix-tabs-nav-btn-active-color);
|
|
12840
10764
|
border-color: transparent transparent var(--atomix-tabs-nav-btn-border-active-color) transparent;
|
|
12841
10765
|
}
|
|
12842
10766
|
.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%);
|
|
10767
|
+
background-color: color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 65%, transparent);
|
|
12859
10768
|
}
|
|
12860
10769
|
.c-tabs__nav-btn:disabled, .c-tabs__nav-btn.is-disabled {
|
|
12861
10770
|
--atomix-tabs-nav-btn-border-active-color: var(
|
|
@@ -12863,22 +10772,7 @@ a, a:hover {
|
|
|
12863
10772
|
);
|
|
12864
10773
|
color: var(--atomix-tabs-nav-btn-border-disabled-color);
|
|
12865
10774
|
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%);
|
|
10775
|
+
background-color: color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 65%, transparent);
|
|
12882
10776
|
}
|
|
12883
10777
|
.c-tabs__nav-btn:focus-visible {
|
|
12884
10778
|
outline: none;
|
|
@@ -12922,22 +10816,7 @@ a, a:hover {
|
|
|
12922
10816
|
width: 100%;
|
|
12923
10817
|
max-width: var(--atomix-testimonial-width);
|
|
12924
10818
|
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%);
|
|
10819
|
+
background-color: color-mix(in srgb, var(--atomix-testimonial-bg) 65%, transparent);
|
|
12941
10820
|
}
|
|
12942
10821
|
.c-testimonial__quote {
|
|
12943
10822
|
color: var(--atomix-testimonial-quote-color);
|
|
@@ -12983,22 +10862,7 @@ a, a:hover {
|
|
|
12983
10862
|
border-radius: var(--atomix-todo-border-radius);
|
|
12984
10863
|
color: var(--atomix-todo-color);
|
|
12985
10864
|
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%);
|
|
10865
|
+
background-color: color-mix(in srgb, var(--atomix-todo-bg) 65%, transparent);
|
|
13002
10866
|
}
|
|
13003
10867
|
.c-todo__title {
|
|
13004
10868
|
font-size: 1.25rem;
|
|
@@ -13038,22 +10902,7 @@ a, a:hover {
|
|
|
13038
10902
|
transition: background-color 0.2s ease;
|
|
13039
10903
|
}
|
|
13040
10904
|
.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%);
|
|
10905
|
+
background-color: color-mix(in srgb, var(--atomix-todo-item-hover-bg) 65%, transparent);
|
|
13057
10906
|
}
|
|
13058
10907
|
.c-todo__item--completed .c-todo__item-text {
|
|
13059
10908
|
color: var(--atomix-todo-completed-color);
|
|
@@ -13150,22 +10999,7 @@ a, a:hover {
|
|
|
13150
10999
|
transition-duration: 0.2s;
|
|
13151
11000
|
transition-timing-function: ease-in-out;
|
|
13152
11001
|
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%);
|
|
11002
|
+
background-color: color-mix(in srgb, var(--atomix-toggle-switch-bg) 65%, transparent);
|
|
13169
11003
|
}
|
|
13170
11004
|
.c-toggle__switch::before {
|
|
13171
11005
|
content: "";
|
|
@@ -13178,22 +11012,7 @@ a, a:hover {
|
|
|
13178
11012
|
transition-duration: 0.2s;
|
|
13179
11013
|
transition-timing-function: ease-in-out;
|
|
13180
11014
|
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%);
|
|
11015
|
+
background-color: color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 65%, transparent);
|
|
13197
11016
|
}
|
|
13198
11017
|
.c-toggle__label {
|
|
13199
11018
|
font-size: var(--atomix-toggle-label-font-size);
|
|
@@ -13209,22 +11028,7 @@ a, a:hover {
|
|
|
13209
11028
|
pointer-events: none;
|
|
13210
11029
|
}
|
|
13211
11030
|
.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%);
|
|
11031
|
+
background-color: color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 65%, transparent);
|
|
13228
11032
|
}
|
|
13229
11033
|
.c-toggle.is-disabled.is-on {
|
|
13230
11034
|
pointer-events: none;
|
|
@@ -13234,43 +11038,13 @@ a, a:hover {
|
|
|
13234
11038
|
position: absolute;
|
|
13235
11039
|
inset: 0;
|
|
13236
11040
|
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%);
|
|
11041
|
+
background-color: color-mix(in srgb, rgba(107, 114, 128, 0.6) 65%, transparent);
|
|
13253
11042
|
}
|
|
13254
11043
|
.c-toggle--glass {
|
|
13255
11044
|
--atomix-toggle-switch-bg: transparent;
|
|
13256
11045
|
}
|
|
13257
11046
|
.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%);
|
|
11047
|
+
background-color: color-mix(in srgb, var(--atomix-toggle-switch-bg) 65%, transparent);
|
|
13274
11048
|
}
|
|
13275
11049
|
.c-toggle--glass .c-toggle__switch::before {
|
|
13276
11050
|
opacity: 0.5;
|
|
@@ -13314,26 +11088,7 @@ a, a:hover {
|
|
|
13314
11088
|
pointer-events: auto;
|
|
13315
11089
|
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
13316
11090
|
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%);
|
|
11091
|
+
background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 65%, transparent);
|
|
13337
11092
|
}
|
|
13338
11093
|
.c-tooltip__content.is-active {
|
|
13339
11094
|
opacity: 1;
|
|
@@ -13346,22 +11101,7 @@ a, a:hover {
|
|
|
13346
11101
|
border-radius: calc((var(--atomix-tooltip-arrow-size) - var(--atomix-tooltip-border-radius)) / 2);
|
|
13347
11102
|
z-index: 1;
|
|
13348
11103
|
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%);
|
|
11104
|
+
background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 65%, transparent);
|
|
13365
11105
|
}
|
|
13366
11106
|
.c-tooltip--left .c-tooltip__arrow, .c-tooltip--right .c-tooltip__arrow {
|
|
13367
11107
|
transform: rotate(45deg);
|
|
@@ -13373,58 +11113,13 @@ a, a:hover {
|
|
|
13373
11113
|
transform: rotate(225deg);
|
|
13374
11114
|
}
|
|
13375
11115
|
.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%);
|
|
11116
|
+
background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent);
|
|
13392
11117
|
}
|
|
13393
11118
|
.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%);
|
|
11119
|
+
background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent);
|
|
13410
11120
|
}
|
|
13411
11121
|
.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%);
|
|
11122
|
+
background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent);
|
|
13428
11123
|
}
|
|
13429
11124
|
.c-upload {
|
|
13430
11125
|
--atomix-upload-width: 31.25rem;
|
|
@@ -13486,40 +11181,10 @@ a, a:hover {
|
|
|
13486
11181
|
transition-duration: 0.2s;
|
|
13487
11182
|
transition-timing-function: ease-in-out;
|
|
13488
11183
|
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%);
|
|
11184
|
+
background-color: color-mix(in srgb, var(--atomix-upload-bg) 65%, transparent);
|
|
13505
11185
|
}
|
|
13506
11186
|
.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%);
|
|
11187
|
+
background-color: color-mix(in srgb, var(--atomix-upload-hover-bg) 65%, transparent);
|
|
13523
11188
|
}
|
|
13524
11189
|
.c-upload__inner {
|
|
13525
11190
|
display: flex;
|
|
@@ -13849,22 +11514,7 @@ a, a:hover {
|
|
|
13849
11514
|
border-radius: var(--atomix--video-player-border-radius, 0.5rem);
|
|
13850
11515
|
overflow: hidden;
|
|
13851
11516
|
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%);
|
|
11517
|
+
background-color: color-mix(in srgb, var(--atomix--video-player-bg, #000) 65%, transparent);
|
|
13868
11518
|
}
|
|
13869
11519
|
.c-video-player__video {
|
|
13870
11520
|
width: 100%;
|
|
@@ -14120,22 +11770,7 @@ a, a:hover {
|
|
|
14120
11770
|
-webkit-backdrop-filter: blur(10px);
|
|
14121
11771
|
backdrop-filter: blur(10px);
|
|
14122
11772
|
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%);
|
|
11773
|
+
background-color: color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 65%, transparent);
|
|
14139
11774
|
}
|
|
14140
11775
|
.c-video-player__settings-tabs {
|
|
14141
11776
|
display: flex;
|
|
@@ -14403,26 +12038,7 @@ a, a:hover {
|
|
|
14403
12038
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
|
|
14404
12039
|
-webkit-backdrop-filter: blur(8px);
|
|
14405
12040
|
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%);
|
|
12041
|
+
background-color: color-mix(in srgb, var(--atomix-body-bg) 65%, transparent);
|
|
14426
12042
|
}
|
|
14427
12043
|
.c-photo-viewer__info-panel, .c-photo-viewer__thumbnails {
|
|
14428
12044
|
scrollbar-width: thin;
|
|
@@ -14474,22 +12090,7 @@ a, a:hover {
|
|
|
14474
12090
|
overflow: hidden;
|
|
14475
12091
|
position: relative;
|
|
14476
12092
|
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%);
|
|
12093
|
+
background-color: color-mix(in srgb, transparent 65%, transparent);
|
|
14493
12094
|
}
|
|
14494
12095
|
.c-photo-viewer__thumbnail:hover {
|
|
14495
12096
|
transform: translateY(-2px);
|
|
@@ -14545,22 +12146,7 @@ body.is-open-photoviewer {
|
|
|
14545
12146
|
z-index: 1000;
|
|
14546
12147
|
opacity: 1;
|
|
14547
12148
|
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%);
|
|
12149
|
+
background-color: color-mix(in srgb, transparent 65%, transparent);
|
|
14564
12150
|
}
|
|
14565
12151
|
.c-photo-viewer__backdrop {
|
|
14566
12152
|
position: absolute;
|