@snyk-mktg/brand-ui 2.5.10-canary.1 → 2.5.10-canary.12

package/dist/css/index.css

@@ -665,7 +665,7 @@
   .taper-fade-v.dark-mode .taper-fade-h:before,
   .taper-fade-h.dark-mode .taper-fade-v:before,
   .taper-fade-h.dark-mode .taper-fade-h:before {
-    background: linear-gradient(180deg, RGBA(3, 3, 40, 1), RGBA(3, 3, 40, 0));
+    background: linear-gradient(180deg, RGBA(0, 0, 0, 1), RGBA(0, 0, 0, 0));
   }
   .taper-fade-v:after, .brandui-flip .brandui-flip-back-content:after,
   .taper-fade-h:after {
@@ -676,7 +676,7 @@
   .taper-fade-v.dark-mode .taper-fade-h:after,
   .taper-fade-h.dark-mode .taper-fade-v:after,
   .taper-fade-h.dark-mode .taper-fade-h:after {
-    background: linear-gradient(0deg, RGBA(3, 3, 40, 1), RGBA(3, 3, 40, 0));
+    background: linear-gradient(0deg, RGBA(0, 0, 0, 1), RGBA(0, 0, 0, 0));
   }
   .taper-fade-v.base-purple:before, .brandui-flip .base-purple.brandui-flip-back-content:before,
   .taper-fade-h.base-purple:before {
@@ -826,13 +826,13 @@
     background: linear-gradient(90deg, RGBA(255, 255, 255, 1), RGBA(255, 255, 255, 0));
   }
   .dark-mode .taper-fade-h:before, .taper-fade-h.dark-mode .taper-fade-h:before {
-    background: linear-gradient(90deg, RGBA(3, 3, 40, 1), RGBA(3, 3, 40, 0));
+    background: linear-gradient(90deg, RGBA(0, 0, 0, 1), RGBA(0, 0, 0, 0));
   }
   .taper-fade-h:after {
     background: linear-gradient(270deg, RGBA(255, 255, 255, 1), RGBA(255, 255, 255, 0));
   }
   .dark-mode .taper-fade-h:after, .taper-fade-h.dark-mode .taper-fade-h:after {
-    background: linear-gradient(270deg, RGBA(3, 3, 40, 1), RGBA(3, 3, 40, 0));
+    background: linear-gradient(270deg, RGBA(0, 0, 0, 1), RGBA(0, 0, 0, 0));
   }
   .taper-fade-h.base-purple:before {
     background: linear-gradient(90deg, RGBA(249, 246, 252, 1), RGBA(249, 246, 252, 0.9), RGBA(249, 246, 252, 0));
@@ -1165,7 +1165,7 @@
   .tablet\:taper-fade-v.dark-mode .tablet\:taper-fade-h:before,
   .tablet\:taper-fade-h.dark-mode .tablet\:taper-fade-v:before,
   .tablet\:taper-fade-h.dark-mode .tablet\:taper-fade-h:before {
-    background: linear-gradient(180deg, RGBA(3, 3, 40, 1), RGBA(3, 3, 40, 0));
+    background: linear-gradient(180deg, RGBA(0, 0, 0, 1), RGBA(0, 0, 0, 0));
   }
   .tablet\:taper-fade-v:after,
   .tablet\:taper-fade-h:after {
@@ -1176,7 +1176,7 @@
   .tablet\:taper-fade-v.dark-mode .tablet\:taper-fade-h:after,
   .tablet\:taper-fade-h.dark-mode .tablet\:taper-fade-v:after,
   .tablet\:taper-fade-h.dark-mode .tablet\:taper-fade-h:after {
-    background: linear-gradient(0deg, RGBA(3, 3, 40, 1), RGBA(3, 3, 40, 0));
+    background: linear-gradient(0deg, RGBA(0, 0, 0, 1), RGBA(0, 0, 0, 0));
   }
   .tablet\:taper-fade-v.tablet\:base-purple:before,
   .tablet\:taper-fade-h.tablet\:base-purple:before {
@@ -1326,13 +1326,13 @@
     background: linear-gradient(90deg, RGBA(255, 255, 255, 1), RGBA(255, 255, 255, 0));
   }
   .dark-mode .tablet\:taper-fade-h:before, .tablet\:taper-fade-h.dark-mode .tablet\:taper-fade-h:before {
-    background: linear-gradient(90deg, RGBA(3, 3, 40, 1), RGBA(3, 3, 40, 0));
+    background: linear-gradient(90deg, RGBA(0, 0, 0, 1), RGBA(0, 0, 0, 0));
   }
   .tablet\:taper-fade-h:after {
     background: linear-gradient(270deg, RGBA(255, 255, 255, 1), RGBA(255, 255, 255, 0));
   }
   .dark-mode .tablet\:taper-fade-h:after, .tablet\:taper-fade-h.dark-mode .tablet\:taper-fade-h:after {
-    background: linear-gradient(270deg, RGBA(3, 3, 40, 1), RGBA(3, 3, 40, 0));
+    background: linear-gradient(270deg, RGBA(0, 0, 0, 1), RGBA(0, 0, 0, 0));
   }
   .tablet\:taper-fade-h.tablet\:base-purple:before {
     background: linear-gradient(90deg, RGBA(249, 246, 252, 1), RGBA(249, 246, 252, 0.9), RGBA(249, 246, 252, 0));
@@ -1665,7 +1665,7 @@
   .mobile\:taper-fade-v.dark-mode .mobile\:taper-fade-h:before,
   .mobile\:taper-fade-h.dark-mode .mobile\:taper-fade-v:before,
   .mobile\:taper-fade-h.dark-mode .mobile\:taper-fade-h:before {
-    background: linear-gradient(180deg, RGBA(3, 3, 40, 1), RGBA(3, 3, 40, 0));
+    background: linear-gradient(180deg, RGBA(0, 0, 0, 1), RGBA(0, 0, 0, 0));
   }
   .mobile\:taper-fade-v:after,
   .mobile\:taper-fade-h:after {
@@ -1676,7 +1676,7 @@
   .mobile\:taper-fade-v.dark-mode .mobile\:taper-fade-h:after,
   .mobile\:taper-fade-h.dark-mode .mobile\:taper-fade-v:after,
   .mobile\:taper-fade-h.dark-mode .mobile\:taper-fade-h:after {
-    background: linear-gradient(0deg, RGBA(3, 3, 40, 1), RGBA(3, 3, 40, 0));
+    background: linear-gradient(0deg, RGBA(0, 0, 0, 1), RGBA(0, 0, 0, 0));
   }
   .mobile\:taper-fade-v.mobile\:base-purple:before,
   .mobile\:taper-fade-h.mobile\:base-purple:before {
@@ -1826,13 +1826,13 @@
     background: linear-gradient(90deg, RGBA(255, 255, 255, 1), RGBA(255, 255, 255, 0));
   }
   .dark-mode .mobile\:taper-fade-h:before, .mobile\:taper-fade-h.dark-mode .mobile\:taper-fade-h:before {
-    background: linear-gradient(90deg, RGBA(3, 3, 40, 1), RGBA(3, 3, 40, 0));
+    background: linear-gradient(90deg, RGBA(0, 0, 0, 1), RGBA(0, 0, 0, 0));
   }
   .mobile\:taper-fade-h:after {
     background: linear-gradient(270deg, RGBA(255, 255, 255, 1), RGBA(255, 255, 255, 0));
   }
   .dark-mode .mobile\:taper-fade-h:after, .mobile\:taper-fade-h.dark-mode .mobile\:taper-fade-h:after {
-    background: linear-gradient(270deg, RGBA(3, 3, 40, 1), RGBA(3, 3, 40, 0));
+    background: linear-gradient(270deg, RGBA(0, 0, 0, 1), RGBA(0, 0, 0, 0));
   }
   .mobile\:taper-fade-h.mobile\:base-purple:before {
     background: linear-gradient(90deg, RGBA(249, 246, 252, 1), RGBA(249, 246, 252, 0.9), RGBA(249, 246, 252, 0));
@@ -1946,70 +1946,70 @@
   .focus\:shadow-outline:focus,
   .group:hover .group-hover\:shadow-outline,
   .group:focus-within .group-focus-within\:shadow-outline {
-    box-shadow: 0 1px 3px 1px RGBA(109, 109, 156, 0.3);
+    box-shadow: 0 1px 3px 1px RGBA(68, 28, 153, 0.3);
   }
   .shadow-outline-inset,
   .hover\:shadow-outline-inset:hover,
   .focus\:shadow-outline-inset:focus,
   .group:hover .group-hover\:shadow-outline-inset,
   .group:focus-within .group-focus-within\:shadow-outline-inset {
-    box-shadow: inset 0 1px 3px 1px RGBA(109, 109, 156, 0.3);
+    box-shadow: inset 0 1px 3px 1px RGBA(68, 28, 153, 0.3);
   }
   .shadow-faint,
   .hover\:shadow-faint:hover,
   .focus\:shadow-faint:focus,
   .group:hover .group-hover\:shadow-faint,
   .group:focus-within .group-focus-within\:shadow-faint {
-    box-shadow: 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.05);
+    box-shadow: 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.05);
   }
   .shadow-faint-inset,
   .hover\:shadow-faint-inset:hover,
   .focus\:shadow-faint-inset:focus,
   .group:hover .group-hover\:shadow-faint-inset,
   .group:focus-within .group-focus-within\:shadow-faint-inset {
-    box-shadow: inset 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.05);
+    box-shadow: inset 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.05);
   }
   .shadow-near,
   .hover\:shadow-near:hover,
   .focus\:shadow-near:focus,
   .group:hover .group-hover\:shadow-near,
   .group:focus-within .group-focus-within\:shadow-near {
-    box-shadow: 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.15);
+    box-shadow: 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.15);
   }
   .shadow-near-inset,
   .hover\:shadow-near-inset:hover,
   .focus\:shadow-near-inset:focus,
   .group:hover .group-hover\:shadow-near-inset,
   .group:focus-within .group-focus-within\:shadow-near-inset {
-    box-shadow: inset 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.15);
+    box-shadow: inset 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.15);
   }
   .shadow-mid,
   .hover\:shadow-mid:hover,
   .focus\:shadow-mid:focus,
   .group:hover .group-hover\:shadow-mid,
   .group:focus-within .group-focus-within\:shadow-mid {
-    box-shadow: 0 0.625rem 0.938rem RGBA(109, 109, 156, 0.25);
+    box-shadow: 0 0.625rem 0.938rem RGBA(68, 28, 153, 0.25);
   }
   .shadow-mid-inset,
   .hover\:shadow-mid-inset:hover,
   .focus\:shadow-mid-inset:focus,
   .group:hover .group-hover\:shadow-mid-inset,
   .group:focus-within .group-focus-within\:shadow-mid-inset {
-    box-shadow: inset 0 0.625rem 0.938rem RGBA(109, 109, 156, 0.25);
+    box-shadow: inset 0 0.625rem 0.938rem RGBA(68, 28, 153, 0.25);
   }
   .shadow-far,
   .hover\:shadow-far:hover,
   .focus\:shadow-far:focus,
   .group:hover .group-hover\:shadow-far,
   .group:focus-within .group-focus-within\:shadow-far {
-    box-shadow: 0 1.875rem 3.125rem RGBA(109, 109, 156, 0.3);
+    box-shadow: 0 0 3.75rem RGBA(68, 28, 153, 0.4);
   }
   .shadow-far-inset,
   .hover\:shadow-far-inset:hover,
   .focus\:shadow-far-inset:focus,
   .group:hover .group-hover\:shadow-far-inset,
   .group:focus-within .group-focus-within\:shadow-far-inset {
-    box-shadow: inset 0 1.875rem 3.125rem RGBA(109, 109, 156, 0.3);
+    box-shadow: inset 0 0 3.75rem RGBA(68, 28, 153, 0.4);
   }
   .shadow-none,
   .hover\:shadow-none:hover,
@@ -2025,70 +2025,70 @@
   .tablet\:focus\:shadow-outline:focus,
   .tablet\:group:hover .group-hover\:shadow-outline,
   .tablet\:group:focus-within .group-focus-within\:shadow-outline {
-    box-shadow: 0 1px 3px 1px RGBA(109, 109, 156, 0.3);
+    box-shadow: 0 1px 3px 1px RGBA(68, 28, 153, 0.3);
   }
   .tablet\:shadow-outline-inset,
   .tablet\:hover\:shadow-outline-inset:hover,
   .tablet\:focus\:shadow-outline-inset:focus,
   .tablet\:group:hover .group-hover\:shadow-outline-inset,
   .tablet\:group:focus-within .group-focus-within\:shadow-outline-inset {
-    box-shadow: inset 0 1px 3px 1px RGBA(109, 109, 156, 0.3);
+    box-shadow: inset 0 1px 3px 1px RGBA(68, 28, 153, 0.3);
   }
   .tablet\:shadow-faint,
   .tablet\:hover\:shadow-faint:hover,
   .tablet\:focus\:shadow-faint:focus,
   .tablet\:group:hover .group-hover\:shadow-faint,
   .tablet\:group:focus-within .group-focus-within\:shadow-faint {
-    box-shadow: 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.05);
+    box-shadow: 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.05);
   }
   .tablet\:shadow-faint-inset,
   .tablet\:hover\:shadow-faint-inset:hover,
   .tablet\:focus\:shadow-faint-inset:focus,
   .tablet\:group:hover .group-hover\:shadow-faint-inset,
   .tablet\:group:focus-within .group-focus-within\:shadow-faint-inset {
-    box-shadow: inset 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.05);
+    box-shadow: inset 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.05);
   }
   .tablet\:shadow-near,
   .tablet\:hover\:shadow-near:hover,
   .tablet\:focus\:shadow-near:focus,
   .tablet\:group:hover .group-hover\:shadow-near,
   .tablet\:group:focus-within .group-focus-within\:shadow-near {
-    box-shadow: 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.15);
+    box-shadow: 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.15);
   }
   .tablet\:shadow-near-inset,
   .tablet\:hover\:shadow-near-inset:hover,
   .tablet\:focus\:shadow-near-inset:focus,
   .tablet\:group:hover .group-hover\:shadow-near-inset,
   .tablet\:group:focus-within .group-focus-within\:shadow-near-inset {
-    box-shadow: inset 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.15);
+    box-shadow: inset 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.15);
   }
   .tablet\:shadow-mid,
   .tablet\:hover\:shadow-mid:hover,
   .tablet\:focus\:shadow-mid:focus,
   .tablet\:group:hover .group-hover\:shadow-mid,
   .tablet\:group:focus-within .group-focus-within\:shadow-mid {
-    box-shadow: 0 0.625rem 0.938rem RGBA(109, 109, 156, 0.25);
+    box-shadow: 0 0.625rem 0.938rem RGBA(68, 28, 153, 0.25);
   }
   .tablet\:shadow-mid-inset,
   .tablet\:hover\:shadow-mid-inset:hover,
   .tablet\:focus\:shadow-mid-inset:focus,
   .tablet\:group:hover .group-hover\:shadow-mid-inset,
   .tablet\:group:focus-within .group-focus-within\:shadow-mid-inset {
-    box-shadow: inset 0 0.625rem 0.938rem RGBA(109, 109, 156, 0.25);
+    box-shadow: inset 0 0.625rem 0.938rem RGBA(68, 28, 153, 0.25);
   }
   .tablet\:shadow-far,
   .tablet\:hover\:shadow-far:hover,
   .tablet\:focus\:shadow-far:focus,
   .tablet\:group:hover .group-hover\:shadow-far,
   .tablet\:group:focus-within .group-focus-within\:shadow-far {
-    box-shadow: 0 1.875rem 3.125rem RGBA(109, 109, 156, 0.3);
+    box-shadow: 0 0 3.75rem RGBA(68, 28, 153, 0.4);
   }
   .tablet\:shadow-far-inset,
   .tablet\:hover\:shadow-far-inset:hover,
   .tablet\:focus\:shadow-far-inset:focus,
   .tablet\:group:hover .group-hover\:shadow-far-inset,
   .tablet\:group:focus-within .group-focus-within\:shadow-far-inset {
-    box-shadow: inset 0 1.875rem 3.125rem RGBA(109, 109, 156, 0.3);
+    box-shadow: inset 0 0 3.75rem RGBA(68, 28, 153, 0.4);
   }
   .tablet\:shadow-none,
   .tablet\:hover\:shadow-none:hover,
@@ -2104,70 +2104,70 @@
   .mobile\:focus\:shadow-outline:focus,
   .mobile\:group:hover .group-hover\:shadow-outline,
   .mobile\:group:focus-within .group-focus-within\:shadow-outline {
-    box-shadow: 0 1px 3px 1px RGBA(109, 109, 156, 0.3);
+    box-shadow: 0 1px 3px 1px RGBA(68, 28, 153, 0.3);
   }
   .mobile\:shadow-outline-inset,
   .mobile\:hover\:shadow-outline-inset:hover,
   .mobile\:focus\:shadow-outline-inset:focus,
   .mobile\:group:hover .group-hover\:shadow-outline-inset,
   .mobile\:group:focus-within .group-focus-within\:shadow-outline-inset {
-    box-shadow: inset 0 1px 3px 1px RGBA(109, 109, 156, 0.3);
+    box-shadow: inset 0 1px 3px 1px RGBA(68, 28, 153, 0.3);
   }
   .mobile\:shadow-faint,
   .mobile\:hover\:shadow-faint:hover,
   .mobile\:focus\:shadow-faint:focus,
   .mobile\:group:hover .group-hover\:shadow-faint,
   .mobile\:group:focus-within .group-focus-within\:shadow-faint {
-    box-shadow: 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.05);
+    box-shadow: 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.05);
   }
   .mobile\:shadow-faint-inset,
   .mobile\:hover\:shadow-faint-inset:hover,
   .mobile\:focus\:shadow-faint-inset:focus,
   .mobile\:group:hover .group-hover\:shadow-faint-inset,
   .mobile\:group:focus-within .group-focus-within\:shadow-faint-inset {
-    box-shadow: inset 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.05);
+    box-shadow: inset 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.05);
   }
   .mobile\:shadow-near,
   .mobile\:hover\:shadow-near:hover,
   .mobile\:focus\:shadow-near:focus,
   .mobile\:group:hover .group-hover\:shadow-near,
   .mobile\:group:focus-within .group-focus-within\:shadow-near {
-    box-shadow: 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.15);
+    box-shadow: 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.15);
   }
   .mobile\:shadow-near-inset,
   .mobile\:hover\:shadow-near-inset:hover,
   .mobile\:focus\:shadow-near-inset:focus,
   .mobile\:group:hover .group-hover\:shadow-near-inset,
   .mobile\:group:focus-within .group-focus-within\:shadow-near-inset {
-    box-shadow: inset 0 0.1875rem 0.313rem RGBA(109, 109, 156, 0.15);
+    box-shadow: inset 0 0.1875rem 0.313rem RGBA(68, 28, 153, 0.15);
   }
   .mobile\:shadow-mid,
   .mobile\:hover\:shadow-mid:hover,
   .mobile\:focus\:shadow-mid:focus,
   .mobile\:group:hover .group-hover\:shadow-mid,
   .mobile\:group:focus-within .group-focus-within\:shadow-mid {
-    box-shadow: 0 0.625rem 0.938rem RGBA(109, 109, 156, 0.25);
+    box-shadow: 0 0.625rem 0.938rem RGBA(68, 28, 153, 0.25);
   }
   .mobile\:shadow-mid-inset,
   .mobile\:hover\:shadow-mid-inset:hover,
   .mobile\:focus\:shadow-mid-inset:focus,
   .mobile\:group:hover .group-hover\:shadow-mid-inset,
   .mobile\:group:focus-within .group-focus-within\:shadow-mid-inset {
-    box-shadow: inset 0 0.625rem 0.938rem RGBA(109, 109, 156, 0.25);
+    box-shadow: inset 0 0.625rem 0.938rem RGBA(68, 28, 153, 0.25);
   }
   .mobile\:shadow-far,
   .mobile\:hover\:shadow-far:hover,
   .mobile\:focus\:shadow-far:focus,
   .mobile\:group:hover .group-hover\:shadow-far,
   .mobile\:group:focus-within .group-focus-within\:shadow-far {
-    box-shadow: 0 1.875rem 3.125rem RGBA(109, 109, 156, 0.3);
+    box-shadow: 0 0 3.75rem RGBA(68, 28, 153, 0.4);
   }
   .mobile\:shadow-far-inset,
   .mobile\:hover\:shadow-far-inset:hover,
   .mobile\:focus\:shadow-far-inset:focus,
   .mobile\:group:hover .group-hover\:shadow-far-inset,
   .mobile\:group:focus-within .group-focus-within\:shadow-far-inset {
-    box-shadow: inset 0 1.875rem 3.125rem RGBA(109, 109, 156, 0.3);
+    box-shadow: inset 0 0 3.75rem RGBA(68, 28, 153, 0.4);
   }
   .mobile\:shadow-none,
   .mobile\:hover\:shadow-none:hover,
@@ -3075,7 +3075,7 @@
   background-color: #fff;
 }
 .brandui-flip .brandui-flip-back-content.dark-mode, .dark-mode .brandui-flip .brandui-flip-back-content {
-  background-color: #030328;
+  background-color: #000;
 }
 .brandui-flip.flipped .brandui-flip-inner {
   transform: rotateY(180deg);
@@ -3084,6 +3084,93 @@
   transform: rotateY(-180deg);
 }
 
+/* Mixins for light/dark modes */
+/* The markers use a custom transformation to colorize the image.
+ * This implementation also requires the images to be PNGs so that they can
+ * be converted to SVGs by Cloudinary. This is because Cloudinary has trouble
+ * colorizing SVGs.
+*/
+.decoration-bg {
+  pointer-events: none;
+}
+.decoration-bg.dot-wave {
+  position: absolute;
+  inset: 0;
+  background-size: contain;
+  mix-blend-mode: screen;
+  z-index: -1;
+  padding-bottom: 28rem;
+}
+.decoration-bg.dot-wave-1 {
+  background: transparent url("https://res.cloudinary.com/snyk/image/upload/snyk-mktg-brandui/decorations/decoration-bg-dot-wave.svg") center no-repeat;
+}
+.decoration-bg.dot-wave-1.dot-wave-center-right {
+  top: 20rem;
+  right: -50rem;
+  scale: 1;
+  transform: rotateY(180deg);
+}
+.decoration-bg.dot-wave-1.dot-wave-center-middle {
+  top: 33rem;
+  right: -2rem;
+  scale: 1.25;
+  transform: rotateY(180deg);
+}
+.decoration-bg.dot-wave-2 {
+  background: transparent url("https://res.cloudinary.com/snyk/image/upload/snyk-mktg-brandui/decorations/decoration-bg-dot-wave-2.svg") center no-repeat;
+}
+.decoration-bg.dot-wave-3 {
+  background: transparent url("https://res.cloudinary.com/snyk/image/upload/snyk-mktg-brandui/decorations/decoration-bg-dot-wave-3.svg") center no-repeat;
+}
+.decoration-bg.dot-wave-3.dot-wave-bottom-right {
+  bottom: -10rem;
+  right: -40rem;
+  transform: rotate(180deg);
+}
+.decoration-bg.dot-wave-top-right {
+  top: 0;
+  right: -40rem;
+}
+.decoration-bg.dot-wave-bottom-right {
+  bottom: -10rem;
+  right: -40rem;
+}
+.decoration-bg.dot-wave-top-left {
+  top: -20rem;
+  left: -50rem;
+  transform: rotate(180deg);
+}
+@media (max-width: 768px) {
+  .decoration-bg.dot-wave-top-left {
+    top: -30rem;
+  }
+}
+.decoration-bg.dot-wave-top-left-high {
+  top: -75rem;
+  left: -60rem;
+  transform: rotate(180deg);
+}
+@media (max-width: 1024px) {
+  .decoration-bg.dot-wave-top-left-high {
+    top: -60rem;
+    left: -13rem;
+  }
+}
+@media (max-width: 768px) {
+  .decoration-bg.dot-wave-top-left-high {
+    top: -40rem;
+    left: -10rem;
+  }
+}
+.decoration-bg.dot-wave-bottom-left {
+  bottom: -5rem;
+  left: -40rem;
+}
+.decoration-bg.dot-wave-center-right {
+  top: 30rem;
+  right: -26rem;
+}
+
 .wide-wrapper,
 .wide-container,
 .content-block,
@@ -3142,6 +3229,9 @@
   align-items: center;
   text-align: center;
 }
+.brandui-section .section-intro.solo-title, .brandui-section .solo-title.section-intro-left-aligned {
+  margin-bottom: 2rem;
+}
 .brandui-section .section-intro-left-aligned {
   align-items: start;
   text-align: left;
@@ -3166,61 +3256,8 @@
   margin-right: auto;
 }
 
-.brandui-container.bg-boxed,
-.content-block.bg-boxed {
-  padding: 2.5rem;
-  border-width: 0.1875rem;
-  border-style: solid;
-  border-radius: 0.75rem;
-  box-shadow: 0 1px 3px 1px RGBA(109, 109, 156, 0.3);
-  backdrop-filter: blur(1rem);
-  -webkit-backdrop-filter: blur(1rem);
-}
-.brandui-container.bg-boxed,
-.content-block.bg-boxed {
-  background-color: RGBA(255, 255, 255, 0.5);
-}
-.brandui-container.bg-boxed.dark-mode, .dark-mode .brandui-container.bg-boxed,
-.content-block.bg-boxed.dark-mode,
-.dark-mode .content-block.bg-boxed {
-  background-color: RGBA(3, 3, 40, 0.5);
-}
-.brandui-container.bg-boxed.group:hover, .brandui-container.bg-boxed.group:focus,
-.content-block.bg-boxed.group:hover,
-.content-block.bg-boxed.group:focus {
-  background-color: RGBA(255, 255, 255, 0.3);
-}
-.brandui-container.bg-boxed.group:hover.dark-mode, .dark-mode .brandui-container.bg-boxed.group:hover, .brandui-container.bg-boxed.group:focus.dark-mode, .dark-mode .brandui-container.bg-boxed.group:focus,
-.content-block.bg-boxed.group:hover.dark-mode,
-.dark-mode .content-block.bg-boxed.group:hover,
-.content-block.bg-boxed.group:focus.dark-mode,
-.dark-mode .content-block.bg-boxed.group:focus {
-  background-color: RGBA(3, 3, 40, 0.3);
-}
-.brandui-container.bg-boxed,
-.content-block.bg-boxed {
-  border-color: RGBA(255, 255, 255, 0.7);
-}
-.brandui-container.bg-boxed.dark-mode, .dark-mode .brandui-container.bg-boxed,
-.content-block.bg-boxed.dark-mode,
-.dark-mode .content-block.bg-boxed {
-  border-color: RGBA(3, 3, 40, 0.7);
-}
-.brandui-container.bg-boxed.group:hover, .brandui-container.bg-boxed.group:focus,
-.content-block.bg-boxed.group:hover,
-.content-block.bg-boxed.group:focus {
-  border-color: RGBA(255, 255, 255, 0.3);
-}
-.brandui-container.bg-boxed.group:hover.dark-mode, .dark-mode .brandui-container.bg-boxed.group:hover, .brandui-container.bg-boxed.group:focus.dark-mode, .dark-mode .brandui-container.bg-boxed.group:focus,
-.content-block.bg-boxed.group:hover.dark-mode,
-.dark-mode .content-block.bg-boxed.group:hover,
-.content-block.bg-boxed.group:focus.dark-mode,
-.dark-mode .content-block.bg-boxed.group:focus {
-  border-color: RGBA(3, 3, 40, 0.3);
-}
-
 .brandui-backdrop {
-  background: RGBA(56, 63, 118, 0.9);
+  background: RGBA(255, 120, 225, 0.9);
   position: fixed;
   display: flex;
   justify-content: center;
@@ -9153,7 +9190,6 @@
     height: 100%;
   }
 }
-/* Mixins for light/dark modes */
 /*
 The rich text class applies default styling to HTML when you cannot apply class names directly to the children of a parent
 */
@@ -9165,26 +9201,24 @@ The rich text class applies default styling to HTML when you cannot apply class
 }
 .txt-rich h1:not([class]),
 .txt-rich-long h1:not([class]) {
-  font-family: "Big Shoulders";
-  font-size: 3rem;
-  font-weight: 900;
+  font-family: "Geist";
+  font-size: 2.375rem;
+  font-weight: 700;
   letter-spacing: -0.01em;
-  line-height: 4rem;
-  text-transform: uppercase;
+  line-height: 2.5rem;
 }
 @media (max-width: 768px) {
   .txt-rich h1:not([class]),
   .txt-rich-long h1:not([class]) {
-    font-size: 3.125rem;
-    font-weight: 900;
+    font-size: 2.5rem;
+    font-weight: 700;
     letter-spacing: -0.01em;
-    line-height: 3.75rem;
-    text-transform: uppercase;
+    line-height: 2.75rem;
   }
 }
 .txt-rich h2:not([class]),
 .txt-rich-long h2:not([class]) {
-  font-family: "Space Grotesk";
+  font-family: "Geist";
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.01em;
@@ -9203,7 +9237,7 @@ The rich text class applies default styling to HTML when you cannot apply class
 }
 .txt-rich h3:not([class]),
 .txt-rich-long h3:not([class]) {
-  font-family: "Space Grotesk";
+  font-family: "Geist";
   font-size: 1.5rem;
   font-weight: 700;
   letter-spacing: -0.01em;
@@ -9222,7 +9256,7 @@ The rich text class applies default styling to HTML when you cannot apply class
 }
 .txt-rich h4:not([class]),
 .txt-rich-long h4:not([class]) {
-  font-family: "Space Grotesk";
+  font-family: "Geist";
   font-size: 1.125rem;
   font-weight: 700;
   letter-spacing: -0.01em;
@@ -9231,7 +9265,7 @@ The rich text class applies default styling to HTML when you cannot apply class
 }
 .txt-rich h5:not([class]),
 .txt-rich-long h5:not([class]) {
-  font-family: "Roboto";
+  font-family: "Geist";
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: 0.005em;
@@ -9256,7 +9290,7 @@ The rich text class applies default styling to HTML when you cannot apply class
 }
 .txt-rich h6:not([class]),
 .txt-rich-long h6:not([class]) {
-  font-family: "Roboto";
+  font-family: "Geist";
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: 0.005em;
@@ -9285,7 +9319,7 @@ The rich text class applies default styling to HTML when you cannot apply class
 }
 .txt-rich a.jumplink,
 .txt-rich-long a.jumplink {
-  color: #030328;
+  color: #000;
 }
 .txt-rich a.jumplink.dark-mode, .dark-mode .txt-rich a.jumplink,
 .txt-rich-long a.jumplink.dark-mode,
@@ -9300,24 +9334,24 @@ The rich text class applies default styling to HTML when you cannot apply class
 }
 .txt-rich a:not([class]),
 .txt-rich-long a:not([class]) {
-  color: #145deb;
+  color: #000;
 }
 .txt-rich a:not([class]).dark-mode, .dark-mode .txt-rich a:not([class]),
 .txt-rich-long a:not([class]).dark-mode,
 .dark-mode .txt-rich-long a:not([class]) {
-  color: #9bcfff;
+  color: #fff;
 }
 .txt-rich a:not([class]):hover, .txt-rich a:not([class]):focus,
 .txt-rich-long a:not([class]):hover,
 .txt-rich-long a:not([class]):focus {
-  color: #0a26b8;
+  color: #441c99;
 }
 .txt-rich a:not([class]):hover.dark-mode, .dark-mode .txt-rich a:not([class]):hover, .txt-rich a:not([class]):focus.dark-mode, .dark-mode .txt-rich a:not([class]):focus,
 .txt-rich-long a:not([class]):hover.dark-mode,
 .dark-mode .txt-rich-long a:not([class]):hover,
 .txt-rich-long a:not([class]):focus.dark-mode,
 .dark-mode .txt-rich-long a:not([class]):focus {
-  color: #3ea2ff;
+  color: #c481f3;
 }
 .txt-rich blockquote:not([class]),
 .txt-rich-long blockquote:not([class]) {
@@ -9328,7 +9362,7 @@ The rich text class applies default styling to HTML when you cannot apply class
   border-left: 0.1875rem solid;
   padding-left: 2.5rem;
   margin-left: 0;
-  font-family: "Space Grotesk";
+  font-family: "Geist";
   font-size: 1rem;
   font-weight: 500;
   letter-spacing: 0.01em;
@@ -9337,22 +9371,22 @@ The rich text class applies default styling to HTML when you cannot apply class
 }
 .txt-rich blockquote:not([class]),
 .txt-rich-long blockquote:not([class]) {
-  color: #441c99;
+  color: #000;
 }
 .dark-mode .txt-rich blockquote:not([class]), .txt-rich blockquote:not([class]).dark-mode,
 .dark-mode .txt-rich-long blockquote:not([class]),
 .txt-rich-long blockquote:not([class]).dark-mode {
-  color: #9bcfff;
+  color: #c0c0c0;
 }
 [data-page-theme=default] .txt-rich blockquote:not([class]),
 [data-page-theme=default] .txt-rich-long blockquote:not([class]) {
-  color: #441c99;
+  color: #000;
 }
 .dark-mode[data-page-theme=default] .txt-rich blockquote:not([class]), [data-page-theme=default] .dark-mode .txt-rich blockquote:not([class]), [data-page-theme=default] .txt-rich blockquote:not([class]).dark-mode,
 .dark-mode[data-page-theme=default] .txt-rich-long blockquote:not([class]),
 [data-page-theme=default] .dark-mode .txt-rich-long blockquote:not([class]),
 [data-page-theme=default] .txt-rich-long blockquote:not([class]).dark-mode {
-  color: #9bcfff;
+  color: #c0c0c0;
 }
 [data-page-theme=evo] .txt-rich blockquote:not([class]),
 [data-page-theme=evo] .txt-rich-long blockquote:not([class]) {
@@ -9366,22 +9400,22 @@ The rich text class applies default styling to HTML when you cannot apply class
 }
 .txt-rich blockquote:not([class]),
 .txt-rich-long blockquote:not([class]) {
-  border-color: #441c99;
+  border-color: #000;
 }
 .dark-mode .txt-rich blockquote:not([class]), .txt-rich blockquote:not([class]).dark-mode,
 .dark-mode .txt-rich-long blockquote:not([class]),
 .txt-rich-long blockquote:not([class]).dark-mode {
-  border-color: #9bcfff;
+  border-color: #c0c0c0;
 }
 [data-page-theme=default] .txt-rich blockquote:not([class]),
 [data-page-theme=default] .txt-rich-long blockquote:not([class]) {
-  border-color: #441c99;
+  border-color: #000;
 }
 .dark-mode[data-page-theme=default] .txt-rich blockquote:not([class]), [data-page-theme=default] .dark-mode .txt-rich blockquote:not([class]), [data-page-theme=default] .txt-rich blockquote:not([class]).dark-mode,
 .dark-mode[data-page-theme=default] .txt-rich-long blockquote:not([class]),
 [data-page-theme=default] .dark-mode .txt-rich-long blockquote:not([class]),
 [data-page-theme=default] .txt-rich-long blockquote:not([class]).dark-mode {
-  border-color: #9bcfff;
+  border-color: #c0c0c0;
 }
 [data-page-theme=evo] .txt-rich blockquote:not([class]),
 [data-page-theme=evo] .txt-rich-long blockquote:not([class]) {
@@ -9481,16 +9515,16 @@ The rich text class applies default styling to HTML when you cannot apply class
   border: transparent;
 }
 .brandui-scrollbar ::-webkit-scrollbar-thumb {
-  background-color: RGBA(109, 109, 156, 0.25);
+  background-color: RGBA(192, 192, 192, 0.25);
 }
 .brandui-scrollbar ::-webkit-scrollbar-thumb.dark-mode, .dark-mode .brandui-scrollbar ::-webkit-scrollbar-thumb {
-  background-color: RGBA(3, 3, 40, 0.25);
+  background-color: RGBA(0, 0, 0, 0.25);
 }
 .brandui-scrollbar ::-webkit-scrollbar-thumb:hover {
-  background-color: RGBA(109, 109, 156, 0.5);
+  background-color: RGBA(192, 192, 192, 0.5);
 }
 .brandui-scrollbar ::-webkit-scrollbar-thumb:hover.dark-mode, .dark-mode .brandui-scrollbar ::-webkit-scrollbar-thumb:hover {
-  background-color: RGBA(3, 3, 40, 0.5);
+  background-color: RGBA(0, 0, 0, 0.5);
 }
 
 @media (max-width: 8640px) {