@shohojdhara/atomix 0.6.0 → 0.6.2

package/dist/atomix.css

@@ -1693,7 +1693,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 65%, transparent);
+  background-color: var(--atomix-accordion-header-bg);
 }
 .c-accordion__header--icon-left {
   flex-direction: row-reverse;
@@ -1734,7 +1734,7 @@ a, a:hover {
   color: var(--atomix-accordion-body-color);
   padding: var(--atomix-accordion-body-padding-y) var(--atomix-accordion-body-padding-x);
   border-radius: 0 0 var(--atomix-accordion-border-radius) var(--atomix-accordion-border-radius);
-  background-color: color-mix(in srgb, var(--atomix-accordion-body-bg) 65%, transparent);
+  background-color: var(--atomix-accordion-body-bg);
 }
 .c-accordion:focus, .c-accordion.is-focused {
   --atomix-accordion-border-color: var(--atomix-focus-border-color);
@@ -1805,7 +1805,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-avatar-bg) 65%, transparent);
+  background-color: var(--atomix-avatar-bg);
 }
 .c-avatar--xs {
   --atomix-avatar-size: 1.5rem;
@@ -1901,7 +1901,7 @@ a, a:hover {
   width: var(--atomix-avatar-size);
   height: var(--atomix-avatar-size);
   border-radius: var(--atomix-avatar-border-radius);
-  background-color: color-mix(in srgb, var(--atomix-avatar-group-more-bg) 65%, transparent);
+  background-color: var(--atomix-avatar-group-more-bg);
 }
 .c-avatar-group--stacked {
   gap: 0;
@@ -2224,7 +2224,7 @@ a, a:hover {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 65%, transparent);
+  background-color: var(--atomix-tag-bg-color);
 }
 .c-badge__icon {
   font-size: var(--atomix-tag-icon-size);
@@ -2295,7 +2295,7 @@ a, a:hover {
   list-style: none;
   padding-left: 0px;
   margin-bottom: var(--atomix-breadcrumb-margin-bottom);
-  background-color: color-mix(in srgb, var(--atomix-breadcrumb-bg) 65%, transparent);
+  background-color: var(--atomix-breadcrumb-bg);
 }
 .c-breadcrumb__item {
   display: flex;
@@ -2397,7 +2397,7 @@ a, a:hover {
   border: var(--atomix-btn-border-width) solid var(--atomix-btn-border-color);
   border-radius: var(--atomix-btn-border-radius);
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease-in-out;
-  background-color: color-mix(in srgb, var(--atomix-btn-bg) 65%, transparent);
+  background-color: var(--atomix-btn-bg);
 }
 .c-btn__icon {
   font-size: var(--atomix-btn-icon-size);
@@ -2405,7 +2405,7 @@ a, a:hover {
 .c-btn:hover {
   color: var(--atomix-btn-hover-color);
   border-color: var(--atomix-btn-hover-border-color);
-  background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 65%, transparent);
+  background-color: var(--atomix-btn-hover-bg);
 }
 .c-btn--primary {
   --atomix-btn-color: var(--atomix-white, #ffffff);
@@ -2839,7 +2839,7 @@ a, a:hover {
   border-color: var(--atomix-btn-disabled-border-color);
   opacity: var(--atomix-btn-disabled-opacity);
   cursor: not-allowed;
-  background-color: color-mix(in srgb, var(--atomix-btn-disabled-bg) 65%, transparent);
+  background-color: var(--atomix-btn-disabled-bg);
 }
 .c-btn:disabled:focus-visible, .c-btn--disabled:focus-visible, fieldset:disabled .c-btn:focus-visible {
   outline: none;
@@ -2947,7 +2947,7 @@ a, a:hover {
   border-radius: var(--atomix-datepicker-border-radius);
   box-shadow: var(--atomix-datepicker-box-shadow);
   margin-top: 0.25rem;
-  background-color: color-mix(in srgb, var(--atomix-datepicker-bg) 65%, transparent);
+  background-color: var(--atomix-datepicker-bg);
 }
 .c-datepicker__calendar--top-start, .c-datepicker__calendar--top-end {
   bottom: 100%;
@@ -3330,7 +3330,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-card-bg) 65%, transparent);
+  background-color: var(--atomix-card-bg);
 }
 .c-card[href] {
   display: block;
@@ -3460,7 +3460,7 @@ a, a:hover {
   --atomix-card-text-font-size: var(--atomix-font-size-base);
 }
 .c-card--filled {
-  background-color: color-mix(in srgb, var(--atomix-card-bg) 65%, transparent);
+  background-color: var(--atomix-card-bg);
 }
 .c-card--glass {
   max-width: none;
@@ -5103,7 +5103,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-checkbox-bg) 65%, transparent);
+  background-color: var(--atomix-checkbox-bg);
 }
 .c-checkbox__input[type=radio] {
   border-radius: 50rem;
@@ -5188,7 +5188,7 @@ a, a:hover {
   color: var(--atomix-body-color);
 }
 .c-color-mode-toggle:hover:not(:disabled) {
-  background-color: color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 .c-color-mode-toggle:focus-visible {
   outline: none;
@@ -5215,7 +5215,7 @@ a, a:hover {
   opacity: 0.5;
 }
 [data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled) {
-  background-color: color-mix(in srgb, rgba(255, 255, 255, 0.1) 65%, transparent);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 @media (prefers-reduced-motion: reduce) {
   .c-color-mode-toggle {
@@ -5264,7 +5264,7 @@ a, a:hover {
   align-items: center;
   padding: var(--atomix-countdown-item-padding-y) var(--atomix-countdown-item-padding-x);
   border-radius: var(--atomix-countdown-focused-border-radius);
-  background-color: color-mix(in srgb, var(--atomix-countdown-focused-bg) 65%, transparent);
+  background-color: var(--atomix-countdown-focused-bg);
 }
 .c-countdown--focused .c-countdown__time-label {
   font-size: var(--atomix-countdown-focused-label-font-size);
@@ -5292,10 +5292,10 @@ a, a:hover {
   margin-bottom: 0;
   color: var(--atomix-data-table-color);
   border-collapse: collapse;
-  background-color: color-mix(in srgb, var(--atomix-data-table-bg) 65%, transparent);
+  background-color: var(--atomix-data-table-bg);
 }
 .c-data-table__header {
-  background-color: color-mix(in srgb, var(--atomix-data-table-header-bg) 65%, transparent);
+  background-color: var(--atomix-data-table-header-bg);
 }
 .c-data-table__header-cell {
   padding: 0.75rem 1rem;
@@ -5312,7 +5312,7 @@ a, a:hover {
           user-select: none;
 }
 .c-data-table__header-cell--sortable:hover {
-  background-color: color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 .c-data-table__header-content {
   display: flex;
@@ -5380,16 +5380,16 @@ a, a:hover {
   vertical-align: middle;
 }
 .c-data-table__row {
-  background-color: color-mix(in srgb, var(--atomix-data-table-bg) 65%, transparent);
+  background-color: var(--atomix-data-table-bg);
 }
 .c-data-table__row:hover {
-  background-color: color-mix(in srgb, var(--atomix-data-table-hover-bg) 65%, transparent);
+  background-color: var(--atomix-data-table-hover-bg);
 }
 .c-data-table__row[role=button] {
   cursor: pointer;
 }
 .c-data-table__row--selected {
-  background-color: color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 65%, transparent);
+  background-color: rgba(var(--atomix-primary-rgb), 0.1);
 }
 .c-data-table__cell--selection {
   width: 48px;
@@ -5412,7 +5412,7 @@ a, a:hover {
   color: var(--atomix-gray-500);
 }
 .c-data-table--striped tbody tr:nth-of-type(odd) {
-  background-color: color-mix(in srgb, var(--atomix-data-table-striped-bg) 65%, transparent);
+  background-color: var(--atomix-data-table-striped-bg);
 }
 .c-data-table--bordered {
   border: var(--atomix-border-width) var(--atomix-border-style) var(--atomix-data-table-border-color);
@@ -5433,7 +5433,7 @@ a, a:hover {
   position: sticky;
   top: var(--sticky-header-offset, 0);
   z-index: 10;
-  background-color: color-mix(in srgb, var(--atomix-data-table-header-bg) 65%, transparent);
+  background-color: var(--atomix-data-table-header-bg);
 }
 .c-data-table-toolbar {
   display: flex;
@@ -5632,7 +5632,7 @@ a, a:hover {
   border-radius: var(--atomix-dropdown-border-radius);
   box-shadow: var(--atomix-dropdown-box-shadow);
   overflow: hidden;
-  background-color: color-mix(in srgb, var(--atomix-dropdown-bg) 65%, transparent);
+  background-color: var(--atomix-dropdown-bg);
 }
 .c-dropdown__menu--glass {
   box-shadow: var(--atomix-dropdown-box-shadow);
@@ -5656,11 +5656,11 @@ a, a:hover {
   color: var(--atomix-dropdown-link-hover-color);
   outline: none;
   padding-left: calc(var(--atomix-dropdown-item-padding-x) + 3px);
-  background-color: color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 65%, transparent);
+  background-color: var(--atomix-dropdown-link-hover-bg);
 }
 .c-dropdown__menu-item.is-active {
   color: var(--atomix-dropdown-active-color);
-  background-color: color-mix(in srgb, var(--atomix-dropdown-active-bg) 65%, transparent);
+  background-color: var(--atomix-dropdown-active-bg);
 }
 .c-dropdown__menu-item.is-disabled {
   color: var(--atomix-dropdown-color);
@@ -5804,7 +5804,7 @@ a, a:hover {
   opacity: 0;
   z-index: 1;
   transition: opacity var(--atomix-edge-panel-animation-duration) ease;
-  background-color: color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 65%, transparent);
+  background-color: var(--atomix-edge-panel-backdrop-bg);
 }
 .c-edge-panel__backdrop.is-animating {
   animation: fadeIn 0.3s ease forwards;
@@ -5822,7 +5822,7 @@ a, a:hover {
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  background-color: color-mix(in srgb, var(--atomix-edge-panel-bg) 65%, transparent);
+  background-color: var(--atomix-edge-panel-bg);
 }
 .c-edge-panel__container.is-animating {
   animation: slideIn var(--atomix-edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
@@ -5851,7 +5851,7 @@ a, a:hover {
   transition: background-color 0.2s ease;
 }
 .c-edge-panel__close:hover {
-  background-color: color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 .c-edge-panel__close:focus-visible {
   outline: 2px solid var(--atomix-primary);
@@ -6139,7 +6139,7 @@ a, a:hover {
   border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
   padding: var(--atomix-footer-padding-y) 0;
   position: relative;
-  background-color: color-mix(in srgb, var(--atomix-footer-bg) 65%, transparent);
+  background-color: var(--atomix-footer-bg);
 }
 .c-footer--glass {
   padding: 0;
@@ -6152,7 +6152,7 @@ a, a:hover {
   color: var(--atomix-footer-color);
   border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
   padding: var(--atomix-footer-padding-y) 0;
-  background-color: color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 65%, transparent);
+  background-color: rgba(var(--atomix-footer-bg-rgb), 0.5, true);
 }
 .c-footer__container {
   display: flex;
@@ -6386,7 +6386,7 @@ a, a:hover {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
-  background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-secondary-bg-subtle);
 }
 .c-footer__social-link::before {
   content: "";
@@ -6400,7 +6400,7 @@ a, a:hover {
   color: var(--atomix-component-active-color);
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  background-color: color-mix(in srgb, var(--atomix-primary) 65%, transparent);
+  background-color: var(--atomix-primary);
 }
 .c-footer__social-link:hover::before, .c-footer__social-link:focus::before {
   transform: translateX(100%);
@@ -6470,7 +6470,7 @@ a, a:hover {
   border: 1px solid var(--atomix-border-subtle);
   position: relative;
   overflow: hidden;
-  background-color: color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 65%, transparent);
+  background-color: linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8));
 }
 .c-footer__newsletter::before {
   content: "";
@@ -6531,7 +6531,7 @@ a, a:hover {
   outline: none;
   transition: all 0.3s ease;
   box-sizing: border-box;
-  background-color: color-mix(in srgb, var(--atomix-primary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-primary-bg-subtle);
 }
 .c-footer__newsletter-input:focus {
   border-color: var(--atomix-primary);
@@ -6564,7 +6564,7 @@ a, a:hover {
   white-space: nowrap;
   position: relative;
   overflow: hidden;
-  background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-brand-bg-subtle);
 }
 .c-footer__newsletter-button::before {
   content: "";
@@ -6577,7 +6577,7 @@ a, a:hover {
 .c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-secondary-bg-subtle);
 }
 .c-footer__newsletter-button:hover::before, .c-footer__newsletter-button:focus::before {
   transform: translateX(100%);
@@ -6631,7 +6631,7 @@ a, a:hover {
   overflow: hidden;
   text-decoration: none;
   outline: none;
-  background-color: color-mix(in srgb, var(--atomix-secondary-bg) 65%, transparent);
+  background-color: var(--atomix-secondary-bg);
 }
 .c-footer__back-to-top::before {
   content: "";
@@ -6646,7 +6646,7 @@ a, a:hover {
   border-color: var(--atomix-primary);
   transform: translateY(-3px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
-  background-color: color-mix(in srgb, var(--atomix-primary) 65%, transparent);
+  background-color: var(--atomix-primary);
 }
 .c-footer__back-to-top:hover::before, .c-footer__back-to-top:focus::before {
   transform: translateX(100%);
@@ -7165,7 +7165,7 @@ a, a:hover {
   place-items: center;
   padding: var(--atomix-hero-padding-y) var(--atomix-hero-padding-x);
   overflow: hidden;
-  background-color: color-mix(in srgb, var(--atomix-hero-bg) 65%, transparent);
+  background-color: var(--atomix-hero-bg);
 }
 .c-hero__bg {
   position: absolute;
@@ -7189,7 +7189,7 @@ a, a:hover {
   inset: 0;
   opacity: var(--atomix-hero-overlay-opacity);
   z-index: 1;
-  background-color: color-mix(in srgb, var(--atomix-hero-overlay) 65%, transparent);
+  background-color: var(--atomix-hero-overlay);
 }
 .c-hero__container {
   position: relative;
@@ -7364,7 +7364,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-input-bg) 65%, transparent);
+  background-color: var(--atomix-input-bg);
 }
 .c-input:focus, .c-input:hover {
   --atomix-input-border-color: var(--atomix-primary-border-subtle);
@@ -7465,14 +7465,14 @@ a, a:hover {
   list-style: none;
   width: 100%;
   max-width: var(--atomix-list-group-width);
-  background-color: color-mix(in srgb, var(--atomix-list-group-bg) 65%, transparent);
+  background-color: var(--atomix-list-group-bg);
 }
 .c-list-group__item {
   padding: var(--atomix-list-group-item-padding-y) var(--atomix-list-group-item-padding-x);
   font-size: var(--atomix-list-group-item-font-size);
   color: var(--atomix-list-group-item-color);
   border-bottom: var(--atomix-list-group-item-border-width) solid var(--atomix-list-group-item-border-color);
-  background-color: color-mix(in srgb, var(--atomix-list-group-item-bg) 65%, transparent);
+  background-color: var(--atomix-list-group-item-bg);
 }
 .c-list-group__item--primary {
   --atomix-list-group-item-bg: var(--atomix-brand-bg-subtle);
@@ -7539,7 +7539,7 @@ a, a:hover {
   width: var(--atomix-list-item-dash-width);
   height: var(--atomix-list-item-dash-height);
   transform: translateY(-50%);
-  background-color: color-mix(in srgb, var(--atomix-list-color) 65%, transparent);
+  background-color: var(--atomix-list-color);
 }
 .c-list--number {
   list-style-type: decimal;
@@ -7581,7 +7581,7 @@ a, a:hover {
   border-radius: var(--atomix-menu-border-radius);
   box-shadow: var(--atomix-menu-box-shadow);
   z-index: 5;
-  background-color: color-mix(in srgb, var(--atomix-menu-bg) 65%, transparent);
+  background-color: var(--atomix-menu-bg);
 }
 .c-menu__container {
   width: 100%;
@@ -7630,14 +7630,14 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-menu-item-bg) 65%, transparent);
+  background-color: var(--atomix-menu-item-bg);
 }
 .c-menu__link:hover {
   color: var(--atomix-menu-item-color);
-  background-color: color-mix(in srgb, var(--atomix-menu-item-bg-hover) 65%, transparent);
+  background-color: var(--atomix-menu-item-bg-hover);
 }
 .c-menu__link:focus, .c-menu__link:active, .c-menu__link.is-active {
-  background-color: color-mix(in srgb, var(--atomix-menu-item-bg-active) 65%, transparent);
+  background-color: var(--atomix-menu-item-bg-active);
 }
 .c-menu__icon {
   font-size: var(--atomix-menu-item-icon-size);
@@ -7807,7 +7807,7 @@ a, a:hover {
   padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
   border-radius: var(--atomix-messages-border-radius);
   border: var(--atomix-messages-border-width) solid var(--atomix-messages-border-color);
-  background-color: color-mix(in srgb, var(--atomix-messages-bg) 65%, transparent);
+  background-color: var(--atomix-messages-bg);
 }
 .c-messages__body {
   max-height: var(--atomix-messages-body-height);
@@ -7858,14 +7858,14 @@ a, a:hover {
   font-size: var(--atomix-messages-text-font-size);
   padding: var(--atomix-messages-text-padding-y) var(--atomix-messages-text-padding-x);
   border-radius: 0.25rem var(--atomix-messages-text-border-radius) var(--atomix-messages-text-border-radius) 0.25rem;
-  background-color: color-mix(in srgb, var(--atomix-messages-text-bg) 65%, transparent);
+  background-color: var(--atomix-messages-text-bg);
 }
 .c-messages__file {
   display: flex;
   flex-wrap: wrap;
   padding: var(--atomix-messages-file-padding-y) var(--atomix-messages-file-padding-x);
   border-radius: 0.25rem var(--atomix-messages-file-border-radius) var(--atomix-messages-file-border-radius) 0.25rem;
-  background-color: color-mix(in srgb, var(--atomix-messages-file-bg) 65%, transparent);
+  background-color: var(--atomix-messages-file-bg);
 }
 .c-messages__file-icon {
   display: grid !important;
@@ -7876,7 +7876,7 @@ a, a:hover {
   color: var(--atomix-tertiary-text-emphasis);
   margin-right: var(--atomix-messages-file-icon-margin-right);
   border-radius: 50rem;
-  background-color: color-mix(in srgb, var(--atomix-body-bg) 65%, transparent);
+  background-color: var(--atomix-body-bg);
 }
 .c-messages__file-name {
   color: var(--atomix-messages-file-text-color);
@@ -7931,7 +7931,7 @@ a, a:hover {
 }
 .c-messages__content--self .c-messages__file-icon {
   color: var(--atomix-invert-text-emphasis);
-  background-color: color-mix(in srgb, var(--atomix-messages-file-icon-bg) 65%, transparent);
+  background-color: var(--atomix-messages-file-icon-bg);
 }
 .c-messages__content--self .c-messages__file-icon [data-atomix-color-mode=dark] {
   --atomix-messages-file-icon-bg: #7c3aed;
@@ -7976,7 +7976,7 @@ a, a:hover {
   border: var(--atomix-messages-input-border-width) solid var(--atomix-messages-input-border-color);
   border-radius: var(--atomix-messages-input-border-radius);
   resize: none;
-  background-color: color-mix(in srgb, var(--atomix-messages-bg) 65%, transparent);
+  background-color: var(--atomix-messages-bg);
 }
 .c-messages__input::-moz-placeholder {
   color: var(--atomix-messages-input-placeholder-color);
@@ -8002,7 +8002,7 @@ a, a:hover {
      -moz-appearance: none;
           appearance: none;
   border: 0;
-  background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-brand-bg-subtle);
 }
 .c-messages__submit .c-icon {
   width: var(--atomix-messages-form-submit-icon-size);
@@ -8174,7 +8174,7 @@ a, a:hover {
   inset: 0;
   opacity: 0;
   transition: 0.3s;
-  background-color: color-mix(in srgb, var(--atomix-modal-backdrop-bg) 65%, transparent);
+  background-color: var(--atomix-modal-backdrop-bg);
 }
 .c-modal__dialog {
   position: relative;
@@ -8199,7 +8199,7 @@ a, a:hover {
   border-radius: var(--atomix-modal-content-border-radius);
   overflow: hidden;
   pointer-events: auto;
-  background-color: color-mix(in srgb, var(--atomix-modal-content-bg) 65%, transparent);
+  background-color: var(--atomix-modal-content-bg);
 }
 .c-modal__header {
   display: flex;
@@ -8313,14 +8313,14 @@ a, a:hover {
   color: var(--atomix-nav-link-color);
 }
 .c-nav__link:hover, .c-nav__link:active, .c-nav__link:focus, .c-nav__link:focus-visible {
-  background-color: color-mix(in srgb, var(--atomix-nav-link-hover-bg) 65%, transparent);
+  background-color: var(--atomix-nav-link-hover-bg);
 }
 .c-nav__link--disabled {
   color: var(--atomix-disabled-text-emphasis);
   pointer-events: none;
 }
 .c-nav__link:focus, .c-nav__link:active, .c-nav__link.is-active {
-  background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-brand-bg-subtle);
 }
 .c-nav__icon {
   font-size: var(--atomix-nav-icon-size);
@@ -8383,7 +8383,7 @@ a, a:hover {
   padding: 0.5rem 1rem;
   -webkit-backdrop-filter: blur(10px);
           backdrop-filter: blur(10px);
-  background-color: color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 65%, transparent);
+  background-color: rgba(var(--atomix-body-bg-rgb), 0.95);
 }
 .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 {
   margin-left: 0.25rem;
@@ -8393,7 +8393,7 @@ a, a:hover {
   border-radius: 0.625rem;
 }
 .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 {
-  background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-brand-bg-subtle);
 }
 .c-nav--float-top-center {
   top: 1.25rem;
@@ -8428,7 +8428,7 @@ a, a:hover {
   padding: var(--atomix-navbar-padding-y) 0;
   border-bottom: var(--atomix-navbar-border-width) solid var(--atomix-navbar-border-color);
   z-index: var(--atomix-navbar-z-index);
-  background-color: color-mix(in srgb, var(--atomix-navbar-bg) 65%, transparent);
+  background-color: var(--atomix-navbar-bg);
 }
 .c-navbar__container {
   display: flex;
@@ -8467,7 +8467,7 @@ a, a:hover {
   border-radius: var(--atomix-navbar-toggler-border-radius);
   cursor: pointer;
   transition: all 0.15s ease-in-out;
-  background-color: color-mix(in srgb, var(--atomix-navbar-toggler-bg) 65%, transparent);
+  background-color: var(--atomix-navbar-toggler-bg);
 }
 .c-navbar__toggler:hover {
   opacity: 0.8;
@@ -8516,7 +8516,7 @@ a, a:hover {
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease-in-out;
-  background-color: color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 65%, transparent);
+  background-color: var(--atomix-navbar-backdrop-bg);
 }
 .c-navbar__backdrop.is-open {
   opacity: 1;
@@ -8597,6 +8597,8 @@ a, a:hover {
 .c-navbar--glass {
   position: relative;
   background-color: transparent;
+  display: flex;
+  height: 100%;
 }
 @supports (color: color-mix(in lch, red, blue)){
 .c-navbar--glass {
@@ -8806,7 +8808,7 @@ a, a:hover {
   border-radius: var(--atomix-callout-border-radius);
   border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
   transition: opacity var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing), transform var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing);
-  background-color: color-mix(in srgb, var(--atomix-callout-bg) 65%, transparent);
+  background-color: var(--atomix-callout-bg);
 }
 .c-callout__content {
   width: 100%;
@@ -8886,7 +8888,7 @@ a, a:hover {
   border: none;
   box-shadow: var(--atomix-callout-box-shadow);
   animation: calloutToastIn 0.3s var(--atomix-callout-transition-timing) forwards;
-  background-color: color-mix(in srgb, var(--atomix-callout-toast-bg) 65%, transparent);
+  background-color: var(--atomix-callout-toast-bg);
 }
 .c-callout--toast .c-callout__content {
   align-items: flex-start;
@@ -9122,7 +9124,7 @@ a, a:hover {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  background-color: color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent);
+  background-color: var(--atomix-pagination-bg);
 }
 .c-pagination__link:hover {
   --atomix-pagination-color: var(--atomix-pagination-hover-color);
@@ -9202,7 +9204,7 @@ a, a:hover {
   border-radius: var(--atomix-pagination-border-radius);
   color: var(--atomix-pagination-color);
   transition: all 0.2s ease-in-out;
-  background-color: color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent);
+  background-color: var(--atomix-pagination-bg);
 }
 .c-pagination__search-input:focus {
   outline: none;
@@ -9225,7 +9227,7 @@ a, a:hover {
   color: var(--atomix-pagination-color);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
-  background-color: color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent);
+  background-color: var(--atomix-pagination-bg);
 }
 .c-pagination__search-button:hover {
   --atomix-pagination-color: var(--atomix-pagination-hover-color);
@@ -9276,7 +9278,7 @@ a, a:hover {
   padding: var(--atomix-popover-padding-y) var(--atomix-popover-padding-x);
   border-radius: var(--atomix-popover-border-radius);
   box-shadow: var(--atomix-popover-box-shadow);
-  background-color: color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent);
+  background-color: var(--atomix-popover-bg);
 }
 .c-popover__arrow {
   position: absolute;
@@ -9285,7 +9287,7 @@ a, a:hover {
   box-shadow: var(--atomix-popover-box-shadow);
   z-index: 1;
   transform-origin: center;
-  background-color: color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent);
+  background-color: var(--atomix-popover-bg);
 }
 .c-popover.is-open {
   opacity: 1;
@@ -9332,7 +9334,7 @@ a, a:hover {
   width: 100%;
   max-width: 37.5rem;
   margin: 0 auto;
-  background-color: color-mix(in srgb, var(--atomix-product-review-bg) 65%, transparent);
+  background-color: var(--atomix-product-review-bg);
 }
 .c-product-review__header {
   display: flex;
@@ -9391,7 +9393,7 @@ a, a:hover {
   color: var(--atomix-body-color);
   font-family: inherit;
   resize: vertical;
-  background-color: color-mix(in srgb, var(--atomix-body-bg) 65%, transparent);
+  background-color: var(--atomix-body-bg);
 }
 .c-product-review__textarea:focus {
   outline: none;
@@ -9438,7 +9440,7 @@ a, a:hover {
   height: var(--atomix-progress-bar-height);
   border-radius: var(--atomix-progress-border-radius);
   overflow: hidden;
-  background-color: color-mix(in srgb, var(--atomix-progress-bg) 65%, transparent);
+  background-color: var(--atomix-progress-bg);
 }
 .c-progress__bar {
   width: var(--atomix-progress-bar-width);
@@ -9446,7 +9448,7 @@ a, a:hover {
   color: var(--atomix-progress-bar-color);
   border-radius: var(--atomix-progress-border-radius);
   transition: var(--atomix-progress-bar-transition) var(--atomix-progress-bar-easing);
-  background-color: color-mix(in srgb, var(--atomix-progress-bar-bg) 65%, transparent);
+  background-color: var(--atomix-progress-bar-bg);
 }
 .c-progress--primary {
   --atomix-progress-bar-bg: var(--atomix-primary);
@@ -9651,7 +9653,7 @@ a, a:hover {
   max-width: var(--atomix-river-width);
   padding: var(--atomix-river-padding-y) var(--atomix-river-padding-x);
   border-radius: var(--atomix-river-border-radius);
-  background-color: color-mix(in srgb, var(--atomix-river-bg) 65%, transparent);
+  background-color: var(--atomix-river-bg);
 }
 .c-river__bg {
   position: absolute;
@@ -9673,7 +9675,7 @@ a, a:hover {
   inset: 0;
   opacity: var(--atomix-river-overlay-opacity);
   border-radius: var(--atomix-river-border-radius);
-  background-color: color-mix(in srgb, var(--atomix-river-overlay) 65%, transparent);
+  background-color: var(--atomix-river-overlay);
 }
 .c-river__container {
   position: relative;
@@ -9895,7 +9897,7 @@ a, a:hover {
   width: 100%;
   height: 100%;
   opacity: var(--atomix-sectionintro-overlay-opacity);
-  background-color: color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 65%, transparent);
+  background-color: var(--atomix-sectionintro-overlay-bg-color);
 }
 .c-sectionintro--has-bg {
   color: var(--atomix-color-white);
@@ -9981,7 +9983,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-select-bg) 65%, transparent);
+  background-color: var(--atomix-select-bg);
 }
 .c-select__selected:hover {
   border-color: var(--atomix-select-border-color-hover);
@@ -10012,7 +10014,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-select-panel-bg) 65%, transparent);
+  background-color: var(--atomix-select-panel-bg);
 }
 .c-select__panel {
   padding: var(--atomix-select-panel-padding-x) var(--atomix-select-panel-padding-y);
@@ -10030,13 +10032,13 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-select-item-bg) 65%, transparent);
+  background-color: var(--atomix-select-item-bg);
 }
 .c-select__item, .c-select__item > * {
   cursor: pointer;
 }
 .c-select__item:hover {
-  background-color: color-mix(in srgb, var(--atomix-select-item-bg-hover) 65%, transparent);
+  background-color: var(--atomix-select-item-bg-hover);
 }
 .c-select--lg {
   --atomix-select-font-size: var(--atomix-select-font-size-lg);
@@ -10089,7 +10091,7 @@ a, a:hover {
   border-radius: var(--atomix-side-menu-border-radius);
   border: var(--atomix-side-menu-border-width) solid var(--atomix-side-menu-border-color);
   box-shadow: var(--atomix-side-menu-box-shadow);
-  background-color: color-mix(in srgb, var(--atomix-side-menu-bg) 65%, transparent);
+  background-color: var(--atomix-side-menu-bg);
 }
 @media (max-width: 991.98px) {
   .c-side-menu {
@@ -10133,10 +10135,10 @@ a, a:hover {
   transition: var(--atomix-side-menu-toggler-transition);
   text-align: left;
   margin: 0;
-  background-color: color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 65%, transparent);
+  background-color: var(--atomix-side-menu-toggler-bg);
 }
 .c-side-menu__toggler:hover {
-  background-color: color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 65%, transparent);
+  background-color: var(--atomix-side-menu-toggler-hover-bg);
 }
 .c-side-menu__toggler:focus-visible {
   outline: 2px solid var(--atomix-focus-ring-color);
@@ -10203,12 +10205,12 @@ a, a:hover {
   cursor: pointer;
   transition: var(--atomix-side-menu-item-transition);
   position: relative;
-  background-color: color-mix(in srgb, var(--atomix-side-menu-item-bg) 65%, transparent);
+  background-color: var(--atomix-side-menu-item-bg);
 }
 .c-side-menu__link:hover {
   color: var(--atomix-side-menu-item-hover-color);
   text-decoration: none;
-  background-color: color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 65%, transparent);
+  background-color: var(--atomix-side-menu-item-hover-bg);
 }
 .c-side-menu__link:focus-visible {
   outline: 2px solid var(--atomix-focus-ring-color);
@@ -10223,14 +10225,14 @@ a, a:hover {
 .c-side-menu__link.is-active {
   color: var(--atomix-side-menu-item-active-color);
   font-weight: 500;
-  background-color: color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 65%, transparent);
+  background-color: var(--atomix-side-menu-item-active-bg);
 }
 .c-side-menu__link.is-disabled, .c-side-menu__link[aria-disabled=true] {
   color: var(--atomix-side-menu-item-disabled-color);
   cursor: not-allowed;
   pointer-events: none;
   opacity: 0.6;
-  background-color: color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 65%, transparent);
+  background-color: var(--atomix-side-menu-item-disabled-bg);
 }
 .c-side-menu__link-icon {
   flex-shrink: 0;
@@ -10302,7 +10304,7 @@ a, a:hover {
   pointer-events: none;
   vertical-align: middle;
   cursor: wait;
-  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);
+  background-color: linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%);
 }
 .c-skeleton--rect {
   width: calc(var(--atomix-skeleton-height) * 5.15);
@@ -10388,7 +10390,7 @@ a, a:hover {
   justify-content: center;
   border: 2px dashed var(--atomix-primary-border-subtle);
   border-radius: 0.25rem;
-  background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-secondary-bg-subtle);
 }
 .c-slider__wrapper {
   position: relative;
@@ -10434,13 +10436,13 @@ a, a:hover {
   justify-content: center;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  background-color: color-mix(in srgb, var(--atomix-primary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-primary-bg-subtle);
 }
 .c-slider__navigation-prev:hover,
 .c-slider__navigation-next:hover {
   transform: translateY(-50%) scale(1.05);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-secondary-bg-subtle);
 }
 .c-slider__navigation-prev:active,
 .c-slider__navigation-next:active {
@@ -10493,18 +10495,18 @@ a, a:hover {
   cursor: pointer;
   pointer-events: auto;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-tertiary-bg-subtle);
 }
 .c-slider__pagination-bullet:hover {
   transform: scale(1.2);
-  background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-secondary-bg-subtle);
 }
 .c-slider__pagination-bullet:active {
   transform: scale(1.1);
 }
 .c-slider__pagination-bullet--active {
   transform: scale(1.2);
-  background-color: color-mix(in srgb, var(--atomix-primary) 65%, transparent);
+  background-color: var(--atomix-primary);
 }
 .c-slider__empty-message {
   color: var(--atomix-tertiary-text);
@@ -10661,7 +10663,7 @@ a, a:hover {
   width: var(--atomix-steps-line-width);
   height: var(--atomix-steps-line-height);
   transition: 1s;
-  background-color: color-mix(in srgb, var(--atomix-steps-item-bg) 65%, transparent);
+  background-color: var(--atomix-steps-item-bg);
 }
 .c-steps__content {
   display: flex;
@@ -10677,7 +10679,7 @@ a, a:hover {
   color: var(--atomix-steps-item-number-color);
   font-size: var(--atomix-steps-item-number-font-size);
   border-radius: var(--atomix-steps-item-number-border-radius);
-  background-color: color-mix(in srgb, var(--atomix-steps-item-number-bg) 65%, transparent);
+  background-color: var(--atomix-steps-item-number-bg);
 }
 .c-steps__text {
   color: var(--atomix-steps-item-color);
@@ -10757,14 +10759,14 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 65%, transparent);
+  background-color: var(--atomix-tabs-nav-btn-bg);
 }
 .c-tabs__nav-btn:active, .c-tabs__nav-btn.is-active {
   color: var(--atomix-tabs-nav-btn-active-color);
   border-color: transparent transparent var(--atomix-tabs-nav-btn-border-active-color) transparent;
 }
 .c-tabs__nav-btn:hover {
-  background-color: color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 65%, transparent);
+  background-color: var(--atomix-tabs-nav-btn-bg-hover);
 }
 .c-tabs__nav-btn:disabled, .c-tabs__nav-btn.is-disabled {
   --atomix-tabs-nav-btn-border-active-color: var(
@@ -10772,7 +10774,7 @@ a, a:hover {
   );
   color: var(--atomix-tabs-nav-btn-border-disabled-color);
   pointer-events: none;
-  background-color: color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 65%, transparent);
+  background-color: var(--atomix-tabs-nav-btn-bg-disabled);
 }
 .c-tabs__nav-btn:focus-visible {
   outline: none;
@@ -10816,7 +10818,7 @@ a, a:hover {
   width: 100%;
   max-width: var(--atomix-testimonial-width);
   padding: var(--atomix-testimonial-padding-y) var(--atomix-testimonial-padding-x);
-  background-color: color-mix(in srgb, var(--atomix-testimonial-bg) 65%, transparent);
+  background-color: var(--atomix-testimonial-bg);
 }
 .c-testimonial__quote {
   color: var(--atomix-testimonial-quote-color);
@@ -10862,7 +10864,7 @@ a, a:hover {
   border-radius: var(--atomix-todo-border-radius);
   color: var(--atomix-todo-color);
   padding: 1.25rem;
-  background-color: color-mix(in srgb, var(--atomix-todo-bg) 65%, transparent);
+  background-color: var(--atomix-todo-bg);
 }
 .c-todo__title {
   font-size: 1.25rem;
@@ -10902,7 +10904,7 @@ a, a:hover {
   transition: background-color 0.2s ease;
 }
 .c-todo__item:hover {
-  background-color: color-mix(in srgb, var(--atomix-todo-item-hover-bg) 65%, transparent);
+  background-color: var(--atomix-todo-item-hover-bg);
 }
 .c-todo__item--completed .c-todo__item-text {
   color: var(--atomix-todo-completed-color);
@@ -10999,7 +11001,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-toggle-switch-bg) 65%, transparent);
+  background-color: var(--atomix-toggle-switch-bg);
 }
 .c-toggle__switch::before {
   content: "";
@@ -11012,7 +11014,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 65%, transparent);
+  background-color: var(--atomix-toggle-switch-handle-bg);
 }
 .c-toggle__label {
   font-size: var(--atomix-toggle-label-font-size);
@@ -11028,7 +11030,7 @@ a, a:hover {
   pointer-events: none;
 }
 .c-toggle.is-disabled:not(.is-on) .c-toggle__switch {
-  background-color: color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 65%, transparent);
+  background-color: var(--atomix-toggle-switch-disabled-bg);
 }
 .c-toggle.is-disabled.is-on {
   pointer-events: none;
@@ -11038,7 +11040,7 @@ a, a:hover {
   position: absolute;
   inset: 0;
   border-radius: var(--atomix-toggle-switch-handle-border-radius);
-  background-color: color-mix(in srgb, rgba(107, 114, 128, 0.6) 65%, transparent);
+  background-color: rgba(107, 114, 128, 0.6);
 }
 .c-toggle--glass {
   --atomix-toggle-switch-bg: transparent;
@@ -11088,7 +11090,7 @@ a, a:hover {
   pointer-events: auto;
   transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transform: scale(0.95);
-  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 65%, transparent);
+  background-color: var(--atomix-tooltip-bg);
 }
 .c-tooltip__content.is-active {
   opacity: 1;
@@ -11101,7 +11103,7 @@ a, a:hover {
   border-radius: calc((var(--atomix-tooltip-arrow-size) - var(--atomix-tooltip-border-radius)) / 2);
   z-index: 1;
   transform: rotate(45deg);
-  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 65%, transparent);
+  background-color: var(--atomix-tooltip-bg);
 }
 .c-tooltip--left .c-tooltip__arrow, .c-tooltip--right .c-tooltip__arrow {
   transform: rotate(45deg);
@@ -11181,10 +11183,10 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-upload-bg) 65%, transparent);
+  background-color: var(--atomix-upload-bg);
 }
 .c-upload:hover {
-  background-color: color-mix(in srgb, var(--atomix-upload-hover-bg) 65%, transparent);
+  background-color: var(--atomix-upload-hover-bg);
 }
 .c-upload__inner {
   display: flex;
@@ -11514,7 +11516,7 @@ a, a:hover {
   border-radius: var(--atomix--video-player-border-radius, 0.5rem);
   overflow: hidden;
   font-family: var(--atomix--font-family-base);
-  background-color: color-mix(in srgb, var(--atomix--video-player-bg, #000) 65%, transparent);
+  background-color: var(--atomix--video-player-bg, #000);
 }
 .c-video-player__video {
   width: 100%;
@@ -11770,7 +11772,7 @@ a, a:hover {
   -webkit-backdrop-filter: blur(10px);
           backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  background-color: color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 65%, transparent);
+  background-color: rgba(var(--atomix-primary-rgb), 0.7);
 }
 .c-video-player__settings-tabs {
   display: flex;
@@ -12038,7 +12040,7 @@ a, a:hover {
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
   -webkit-backdrop-filter: blur(8px);
           backdrop-filter: blur(8px);
-  background-color: color-mix(in srgb, var(--atomix-body-bg) 65%, transparent);
+  background-color: var(--atomix-body-bg);
 }
 .c-photo-viewer__info-panel, .c-photo-viewer__thumbnails {
   scrollbar-width: thin;
@@ -12090,7 +12092,7 @@ a, a:hover {
   overflow: hidden;
   position: relative;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
-  background-color: color-mix(in srgb, transparent 65%, transparent);
+  background-color: transparent;
 }
 .c-photo-viewer__thumbnail:hover {
   transform: translateY(-2px);
@@ -12146,7 +12148,7 @@ body.is-open-photoviewer {
   z-index: 1000;
   opacity: 1;
   transition-property: opacity;
-  background-color: color-mix(in srgb, transparent 65%, transparent);
+  background-color: transparent;
 }
 .c-photo-viewer__backdrop {
   position: absolute;