mp-design-system 1.0.3 → 1.2.1

package/src/assets/js/imports/off-canvas.js

@@ -1,97 +1,224 @@
-// Add click event listeners to each toggle button
+// Function to initialize off-canvas behavior
 function OffCanvas() {
-  const toggleButtons = Array.from(document.querySelectorAll('.c-button--off-canvas-toggle'));
-  toggleButtons.forEach((button) => {
-    button.addEventListener('click', handleToggleClick);
-  });
+  // Select all elements that trigger off-canvas behavior
+  const toggles = document.querySelectorAll(".c-off-canvas__toggle");
+
+  // Iterate through each toggle element
+  if (toggles.length) {
+    toggles.forEach(toggle => {
+      // Determine initial visibility state and handle click event
+      handleOffCanvas(toggle, isVisible(toggle));
+      toggle.addEventListener('click', () => toggleOffCanvas(toggle));
+    });
+
+    // Add event listener for scroll events to check visibility
+    // window.addEventListener('scroll', () => {
+    //   toggles.forEach(toggle => {
+    //     handleOffCanvas(toggle, isVisible(toggle));
+    //   });
+    // });
+
+    // Add event listener for resize events to check visibility
+    window.addEventListener('resize', () => {
+      toggles.forEach(toggle => {
+        handleOffCanvas(toggle, isVisible(toggle));
+      });
+    });
+  }
 }
 
-// Function to handle the toggle button click
-function handleToggleClick() {
-  const target = this.getAttribute('data-target');
-  const offCanvas = document.getElementById(target);
-  openOffCanvas(offCanvas);
+// Function to check if an element is currently visible on the page
+function isVisible(element) {
+  // Check element's position and styles for visibility
+  const rect = element.getBoundingClientRect();
+  const style = window.getComputedStyle(element);
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
+    style.display !== 'none' &&
+    style.visibility !== 'hidden'
+  );
 }
 
-// Function to open the off-canvas drawer
-function openOffCanvas(offCanvas) {
-  const offCanvasList = document.querySelectorAll('.o-off-canvas');
-  const isOpen = offCanvas.classList.contains('o-off-canvas--open');
-
-  // Close other off-canvas drawers only if the target is not already open
-  if (!isOpen) {
-    offCanvasList.forEach((drawer) => {
-      if (drawer !== offCanvas) {
-        closeOffCanvas(drawer);
-      }
-    });
+// Function to handle off-canvas behavior based on visibility
+function handleOffCanvas(toggle, isVisible) {
+  const target = document.getElementById(toggle.getAttribute('data-target'));
+  if (isVisible === true) {
+    createOffCanvas(target);
+  } else {
+    removeOffCanvas(target);
   }
+}
 
-  // Open the target off-canvas drawer
-  offCanvas.classList.add('o-off-canvas--open');
-  offCanvas.setAttribute('aria-hidden', 'false');
+// Function to create off canvas
+function createOffCanvas(target) {
+  // Add necessary classes and attributes for off-canvas display
+  target.classList.add('c-off-canvas');
+  target.setAttribute('tabindex', '-1');
+  target.setAttribute('aria-hidden', 'true');
+  
+  // Extract specific sections of the off-canvas content
+  const targetHeader = target.querySelector('[data-off-canvas="header"]');
+  const targetMain = target.querySelector('[data-off-canvas="main"]');
+  const targetFooter = target.querySelector('[data-off-canvas="footer"]');
+
+  // Extract content from the sections
+  const targetHeaderContent = targetHeader !== null ? targetHeader.outerHTML : '';
+  const targetMainContent = targetMain !== null ? targetMain.outerHTML : '';
+  const targetFooterContent = targetFooter !== null ? targetFooter.outerHTML : '';
+
+  // Replace the target's content with off-canvas structure
+  target.innerHTML = `
+    <div class="c-off-canvas__backdrop" role="presentation"></div>
+    <div class="c-off-canvas__content" role="dialog" aria-modal="true" aria-labelledby="offCanvasHeader">
+      <header id="offCanvasHeader" class="c-off-canvas__header">${targetHeaderContent}</header>
+      <main class="c-off-canvas__main">${targetMainContent}</main>
+      <footer class="c-off-canvas__footer">
+        ${targetFooterContent}
+        <button class="mp c-twi c-twi--left c-off-canvas__close" data-off-canvas-close="true">
+          <span>Cancel</span>
+          <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--cross">
+            <use xlink:href="/static/svg/sprite.svg#cross"></use>
+          </svg>
+        </button>
+      </footer>
+    </div>
+  `;
+}
 
-  // Add click event listener to the backdrop to close the off-canvas drawer
-  const backdrop = offCanvas.querySelector('.o-off-canvas__backdrop');
-  backdrop.addEventListener('click', handleBackdropClick);
+// Function to remove off-canvas layout
+function removeOffCanvas(target) {
+  // Remove classes and attributes for off-canvas display
+  target.classList.remove('c-off-canvas', 'c-off-canvas--active');
+  target.removeAttribute('tabindex');
+  target.removeAttribute('aria-hidden');
+
+  // Remove backdrop element if present
+  const targetBackdrop = target.querySelector('.c-off-canvas__backdrop');
+  if (targetBackdrop) {
+    targetBackdrop.remove();
+  }
 
-  // Add keydown event listener to close the off-canvas drawer with the Esc key
-  document.addEventListener('keydown', handleKeyDown);
-}
+  // Restore original content by removing off-canvas structure
+  const targetContent = target.querySelector('.c-off-canvas__content');
+  if (targetContent) {
+    while (targetContent.firstChild) {
+      target.insertBefore(targetContent.firstChild, targetContent);
+    }
+    target.removeChild(targetContent);
+  }
 
-// Function to handle the backdrop click
-function handleBackdropClick() {
-  const offCanvas = this.closest('.o-off-canvas');
-  closeOffCanvas(offCanvas);
-}
+  const targetHeader = target.querySelector('.c-off-canvas__header');
+  if (targetHeader) {
+    while (targetHeader.firstChild) {
+      target.insertBefore(targetHeader.firstChild, targetHeader);
+    }
+    target.removeChild(targetHeader);
+  }
 
-// Function to handle the keydown event
-function handleKeyDown(event) {
-  if (event.key === 'Escape') {
-    const openDrawer = document.querySelector('.o-off-canvas--open');
-    if (openDrawer) {
-      closeOffCanvas(openDrawer);
+  const targetMain = target.querySelector('.c-off-canvas__main');
+  if (targetMain) {
+    while (targetMain.firstChild) {
+      target.insertBefore(targetMain.firstChild, targetMain);
     }
+    target.removeChild(targetMain);
+  }
+
+  const targetFooter = target.querySelector('.c-off-canvas__footer');
+  if (targetFooter) {
+    while (targetFooter.firstChild) {
+      target.insertBefore(targetFooter.firstChild, targetFooter);
+    }
+    target.removeChild(targetFooter);
+  }
+  
+  // Remove close button element if present
+  const targetClose = target.querySelector('.c-off-canvas__close');
+  if (targetClose) {
+    targetClose.remove();
   }
 }
 
-// Function to close the off-canvas drawer
-function closeOffCanvas(offCanvas) {
-  offCanvas.classList.remove('o-off-canvas--open');
-  offCanvas.setAttribute('aria-hidden', 'true');
+// Function to toggle off-canvas visibility
+function toggleOffCanvas(toggle) {
+  const target = document.getElementById(toggle.getAttribute('data-target'));
 
-  // Remove backdrop click event listener when closing the off-canvas drawer
-  const backdrop = offCanvas.querySelector('.o-off-canvas__backdrop');
-  backdrop.removeEventListener('click', handleBackdropClick);
+  // Check if the target is already open or closed
+  if (!target.classList.contains('c-off-canvas--active')) {
+    openOffCanvas(toggle, target);
+  } else if (target.classList.contains('c-off-canvas--active')) {
+    closeOffCanvas(target);
+  }
+}
+
+function openOffCanvas(toggle, target) {
+  // Add classes and attributes for open off-canvas
+  toggle.setAttribute('aria-expanded', 'true');
+  target.classList.add('c-off-canvas--active');
+  target.setAttribute('aria-hidden', 'false');
 
-  // Remove keydown event listener when closing the off-canvas drawer
-  document.removeEventListener('keydown', handleKeyDown);
+  // Add event listener for backdrop clicks
+  const offCanvasBackdrop = target.querySelector('.c-off-canvas__backdrop');
+  if(offCanvasBackdrop) {
+    offCanvasBackdrop.addEventListener('click', handleBackdropClick);
+  }
+
+  // Add event listener forclose button clicks
+  const offCanvasCloseElements = target.querySelectorAll('[data-off-canvas-close="true"]');
+  if (offCanvasCloseElements.length > 0) {
+    offCanvasCloseElements.forEach((offCanvasClose) => {
+      offCanvasClose.addEventListener('click', handleCloseClick);
+    });
+  }
+
+   // Add event listener for Escape key press
+  document.addEventListener('keydown', handleKeyDown, { once: true });
+
+  // Adjust body overflow to prevent scrolling
+  document.body.style.overflowY = 'hidden';
+
+  // Close other open off-canvas elements
+  const allOffCanvasElementsExceptCurrent = Array.from(document.querySelectorAll('.c-off-canvas')).filter(offCanvas => offCanvas !== target);
+  if (allOffCanvasElementsExceptCurrent.length > 0) {
+    allOffCanvasElementsExceptCurrent.forEach((offCanvas) => {
+      closeOffCanvas(offCanvas);
+    });
+  }
 }
 
-// Update button functionality
-const updateButton = document.querySelectorAll('.o-off-canvas__update');
-updateButton.forEach((button) => {
-  button.addEventListener('click', handleUpdateButtonClick);
-});
+// Function to close an off-canvas
+function closeOffCanvas(target) {
+  // Remove classes and attributes for open off-canvas
+  document.querySelector('[data-target="' + target.id + '"').setAttribute('aria-expanded', 'false');
+  target.classList.remove('c-off-canvas--active');
+  target.setAttribute('aria-hidden', 'true');
+
+  // Restore body overflow
+  document.body.style.overflowY = '';
+}
 
-// Handle the update button click
-function handleUpdateButtonClick() {
-  // Save the options somewhere
-  const offCanvas = this.closest('.o-off-canvas');
+// Function to handle backdrop click
+function handleBackdropClick() {
+  const offCanvas = this.closest('.c-off-canvas');
   closeOffCanvas(offCanvas);
 }
 
-// Close button functionality
-const closeButton = document.querySelectorAll('.o-off-canvas__close');
-closeButton.forEach((button) => {
-  button.addEventListener('click', handleCloseButtonClick);
-});
+// Function to handle Escape key press
+function handleKeyDown(event) {
+  if (event.key === 'Escape') {
+    const activeOffCanvas = document.querySelector('.c-off-canvas--active');
+    if (activeOffCanvas) {
+      closeOffCanvas(activeOffCanvas);
+    }
+  }
+}
 
-// Handle the close button click
-function handleCloseButtonClick() {
-  const offCanvas = this.closest('.o-off-canvas');
+// Function to handle close button click
+function handleCloseClick() {
+  const offCanvas = this.closest('.c-off-canvas');
   closeOffCanvas(offCanvas);
-};
-
+}
 
 export default OffCanvas;

package/src/assets/scss/components/index.scss

@@ -20,6 +20,7 @@
 @import '~comp/input/toggle.scss';
 @import '~comp/internal-nav/internal-nav.scss';
 @import '~comp/meta-box/meta-box.scss';
+@import '~comp/off-canvas/off-canvas.scss';
 @import '~comp/option-list/option-list.scss';
 @import '~comp/post-meta/post-meta.scss';
 @import '~comp/product-signpost/product-signpost.scss';

package/src/assets/scss/library.scss

@@ -249,10 +249,12 @@
     }
 
     iframe {
+      --negative-padding: calc( var(--space-m) * -1 );
       height: 100%;
       width: 100%;
-      left: -4px;
-      top: -4px;
+      width: calc( 100% - var(--negative-padding) *2 );
+      left: var(--negative-padding);
+      top: var(--negative-padding);
       transition: 
         padding .3s cubic-bezier(0.22, 0.61, 0.36, 1),
         background-color .3s cubic-bezier(0.22, 0.61, 0.36, 1);

package/src/assets/scss/objects/index.scss

@@ -1,3 +1,2 @@
-@import './off-canvas.scss';
 @import './prose.scss';
 @import './grid.scss';

package/src/assets/svg/arc.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 693 671" opacity="0.075"><g clip-path="url(#a)"><path stroke="#3D7B87" d="M388.57 203.44c40.74 9.94 66.77 48.93 58.38 88.2-8.38 39.27-48.05 64.23-89.3 56.67"/><path stroke="#3D7B87" d="M402.01 140.47c2.72.35 5.43.82 8.15 1.4 56.13 11.98 91.68 68.3 79.4 125.79-12.27 57.5-67.72 94.39-123.84 82.4a98.78 98.78 0 0 1-8.01-2.04"/><path stroke="#3D7B87" d="M432.3-1.42c3.09.5 6.18 1.08 9.27 1.74 97.39 20.78 159.62 115.91 139.01 212.47-20.6 96.55-116.27 157.98-213.65 137.19a183 183 0 0 1-9.17-2.2"/><path stroke="#3D7B87" d="M359.04 347.92c50.87 14.25 81.93 69.05 69.9 125.41-9.2 43.08-41 75.04-78.8 84.26"/><path stroke="#3D7B87" d="M358.75 349.03a75.38 75.38 0 0 1-15.33 143.5m472.91-210.11c-136.88 72.26-297.27 99.23-458.69 65.9"/><path stroke="#3D7B87" d="M710.4 603.24c-92.04-125.65-211.68-216.14-352.29-256"/><path stroke="#3D7B87" d="M730.15 434.78c20.26-94.9-46.81-189.74-149.9-211.75-103.1-22-203.05 37.17-223.31 132.09-20.26 94.9 46.8 189.74 149.9 211.75 103.1 22 203.05-37.17 223.3-132.09Z"/><path stroke="#3D7B87" d="M565.63 393.51c11.4-53.42-25.74-106.7-83.05-118.93-57.32-12.24-112.98 21.23-124.38 74.65-11.41 53.43 25.74 106.7 83.05 118.94 57.31 12.23 112.98-21.23 124.38-74.66Z"/><path stroke="#3D7B87" d="M507.87 381.04c8.07-37.81-18.83-75.68-60.2-84.5-41.36-8.84-81.37 14.74-89.44 52.55-8.08 37.81 18.82 75.68 60.19 84.51 41.36 8.83 81.38-14.75 89.45-52.56Z"/><path stroke="#3D7B87" d="M668.34-16.28c-164.89 90.43-279.7 223.03-314.5 386.05-34.6 162.08 15.29 329 127.5 478.23"/><path stroke="#3D7B87" d="M482.38 560.08c20.96-98.17-37.75-193.87-131.07-213.79-93.33-19.92-186 43.46-206.95 141.63-20.96 98.18 37.75 193.87 131.07 213.8 93.33 19.92 186-43.47 206.95-141.64Z"/><circle cx="545.73" cy="65.7" r="6.7" fill="#3D7B87" transform="rotate(12.05 545.73 65.7)"/><circle cx="6.7" cy="6.7" r="6.7" fill="#3D7B87" transform="scale(1 -1) rotate(-12.05 -2911.17 -1076.64)"/><ellipse cx="4.94" cy="7.18" fill="#3D7B87" rx="4.94" ry="7.18" transform="scale(1 -1) rotate(-20.98 183.75 -1296.01)"/><ellipse cx="4.74" cy="6.4" fill="#3D7B87" rx="4.74" ry="6.4" transform="scale(1 -1) rotate(-12.05 187.9 -2125.37)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(31.69 1029.73 -24.26)"/><ellipse cx="2.8" cy="5.82" fill="#3D7B87" rx="2.8" ry="5.82" transform="scale(1 -1) rotate(31.69 867.17 203.72)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(16.08 1654.79 57.2)"/><ellipse cx="163.88" cy="128.11" fill="#3D7B87" rx="4.48" ry="9.03" transform="rotate(-120.9 163.88 128.11)"/><ellipse cx="274.03" cy="67.48" fill="#3D7B87" rx="4.48" ry="9.03" transform="rotate(-113.38 274.03 67.48)"/><ellipse cx="367.21" cy="92.23" fill="#3D7B87" rx="3.39" ry="7.31" transform="rotate(-99.19 367.2 92.23)"/><ellipse cx="3.98" cy="6.65" fill="#3D7B87" rx="3.98" ry="6.65" transform="scale(1 -1) rotate(3.39 8253.05 -219.92)"/><ellipse cx="3.48" cy="6.68" fill="#3D7B87" rx="3.48" ry="6.68" transform="scale(1 -1) rotate(24.86 1254.69 -215.22)"/><ellipse cx="3.76" cy="7.12" fill="#3D7B87" rx="3.76" ry="7.12" transform="scale(1 -1) rotate(49.8 674.95 -223)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-24.75 -733 -411.39)"/><ellipse cx="4.06" cy="7.93" fill="#3D7B87" rx="4.06" ry="7.93" transform="scale(1 -1) rotate(-38.06 -261.45 -309.48)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(2.61 7685.98 3177.5)"/><ellipse cx="3.46" cy="6.72" fill="#3D7B87" rx="3.46" ry="6.72" transform="scale(1 -1) rotate(-.91 -18651.2 -141.87)"/><ellipse cx="19.17" cy="224.95" fill="#3D7B87" rx="3.55" ry="6.9" transform="rotate(23.2 19.17 224.95)"/><ellipse cx="9.33" cy="256.03" fill="#3D7B87" rx="3.65" ry="7.09" transform="rotate(12.05 9.33 256.03)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(36.8 698.44 97.73)"/><ellipse cx="4.91" cy="9.03" fill="#3D7B87" rx="4.91" ry="9.03" transform="scale(1 -1) rotate(35.4 868.22 142.26)"/><ellipse cx="4.91" cy="7.64" fill="#3D7B87" rx="4.91" ry="7.64" transform="scale(1 -1) rotate(44.07 803.06 63.23)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-38.32 -292.24 -370.78)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-51.58 -121.02 -356.51)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-62.45 6.86 -343.71)"/><ellipse cx="5.46" cy="9.03" fill="#3D7B87" rx="5.46" ry="9.03" transform="scale(1 -1) rotate(-77.71 94.75 -297.43)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2589.61 -1403.38)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2137.24 -1615.32)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2683.45 -1973.08)"/><ellipse cx="482.54" cy="126.94" fill="#3D7B87" rx="4.79" ry="4.88" transform="rotate(12.05 482.54 126.94)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="matrix(.978 .2088 .2088 -.978 446 631.9)"/><ellipse cx="584.07" cy="149.46" fill="#3D7B87" rx="4.79" ry="4.88" transform="rotate(12.05 584.07 149.46)"/><ellipse cx="6.52" cy="6.65" fill="#3D7B87" rx="6.52" ry="6.65" transform="scale(1 -1) rotate(-12.05 -2495.49 -1899.88)"/><ellipse cx="452.09" cy="161.39" fill="#3D7B87" rx="4.78" ry="5.77" transform="rotate(-44.35 452.09 161.39)"/><ellipse cx="6.52" cy="6.65" fill="#3D7B87" rx="6.52" ry="6.65" transform="matrix(.978 .2088 .2088 -.978 335.3 496.36)"/><ellipse cx="416.1" cy="214.01" fill="#3D7B87" rx="6.52" ry="6.65" transform="rotate(12.05 416.1 214.01)"/><ellipse cx="5.02" cy="6.18" fill="#3D7B87" rx="5.02" ry="6.18" transform="scale(1 -1) rotate(-26.41 -907.55 -1119.88)"/><ellipse cx="489.75" cy="225.01" fill="#3D7B87" rx="5.02" ry="6.18" transform="rotate(-2.31 489.75 225.01)"/><ellipse cx="5.32" cy="5.42" fill="#3D7B87" rx="5.32" ry="5.42" transform="scale(1 -1) rotate(-12.05 -2090.56 -1998.83)"/><ellipse cx="439.92" cy="243.88" fill="#3D7B87" rx="5.32" ry="5.42" transform="rotate(12.05 439.92 243.88)"/><ellipse cx="2.84" cy="5.27" fill="#3D7B87" rx="2.84" ry="5.27" transform="scale(1 -1) rotate(-8.31 -2220.86 -1682.37)"/><ellipse cx="232.75" cy="289.48" fill="#3D7B87" rx="2.84" ry="5.27" transform="rotate(15.8 232.75 289.48)"/><ellipse cx="7.5" cy="11.35" fill="#3D7B87" rx="7.5" ry="11.35" transform="scale(1 -1) rotate(-12.05 -2451.83 -2523.91)"/><ellipse cx="578.22" cy="223.89" fill="#3D7B87" rx="5.02" ry="4.58" transform="rotate(12.05 578.22 223.89)"/><ellipse cx="3.54" cy="6.98" fill="#3D7B87" rx="3.54" ry="6.98" transform="scale(1 -1) rotate(-31.41 -745.42 -1273.8)"/><ellipse cx="650.64" cy="251.96" fill="#3D7B87" rx="3.54" ry="6.98" transform="rotate(-7.3 650.64 251.96)"/><ellipse cx="5.42" cy="4.43" fill="#3D7B87" rx="5.42" ry="4.43" transform="matrix(.978 .2088 .2088 -.978 473.24 473)"/><ellipse cx="532.6" cy="301.26" fill="#3D7B87" rx="5.42" ry="4.31" transform="rotate(12.05 532.6 301.26)"/><ellipse cx="6.7" cy="5.11" fill="#3D7B87" rx="6.7" ry="5.11" transform="scale(1 -1) rotate(-30.78 -529.84 -1189.83)"/><ellipse cx="565.93" cy="358.88" fill="#3D7B87" rx="6.7" ry="5.11" transform="rotate(-6.68 565.93 358.88)"/><ellipse cx="5.16" cy="4.6" fill="#3D7B87" rx="5.16" ry="4.6" transform="scale(1 -1) rotate(-47.05 -293.12 -1016.12)"/><ellipse cx="5.44" cy="3.86" fill="#3D7B87" rx="5.44" ry="3.86" transform="scale(1 -1) rotate(-43.96 -292.56 -955.94)"/><ellipse cx="622.7" cy="350.92" fill="#3D7B87" rx="5.95" ry="4.22" transform="rotate(-15.38 622.7 350.92)"/><ellipse cx="4.89" cy="4.1" fill="#3D7B87" rx="4.89" ry="4.1" transform="scale(1 -1) rotate(-88.1 -9.93 -434.95)"/><ellipse cx="445.81" cy="297.26" fill="#3D7B87" rx="4.89" ry="4.1" transform="rotate(-64 445.8 297.26)"/><ellipse cx="8.53" cy="6.01" fill="#3D7B87" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(78.34 -489.68 -34.66)"/><ellipse cx="487.64" cy="276.67" fill="#3D7B87" rx="8.53" ry="6.01" transform="rotate(-77.57 487.64 276.67)"/><ellipse cx="8.53" cy="6.01" fill="#3D7B87" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(59.21 -595.82 -237.03)"/><ellipse cx="504.69" cy="362.53" fill="#3D7B87" rx="8.53" ry="6.01" transform="rotate(-96.69 504.69 362.53)"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h693v671H0z"/></clipPath></defs></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 693 671" opacity="0.075"><defs><clipPath id="a"><path fill="#fff" d="M0 0h693v671H0z"/></clipPath></defs><g clip-path="url(#a)"><g stroke="#3D7B87"><path d="M388.57 203.44c40.74 9.94 66.77 48.93 58.38 88.2-8.38 39.27-48.05 64.23-89.3 56.67"/><path d="M402.01 140.47c2.72.35 5.43.82 8.15 1.4 56.13 11.98 91.68 68.3 79.4 125.79-12.27 57.5-67.72 94.39-123.84 82.4a98.78 98.78 0 0 1-8.01-2.04"/><path d="M432.3-1.42c3.09.5 6.18 1.08 9.27 1.74 97.39 20.78 159.62 115.91 139.01 212.47-20.6 96.55-116.27 157.98-213.65 137.19a183 183 0 0 1-9.17-2.2"/><path d="M359.04 347.92c50.87 14.25 81.93 69.05 69.9 125.41-9.2 43.08-41 75.04-78.8 84.26"/><path d="M358.75 349.03a75.38 75.38 0 0 1-15.33 143.5m472.91-210.11c-136.88 72.26-297.27 99.23-458.69 65.9"/><path d="M710.4 603.24c-92.04-125.65-211.68-216.14-352.29-256"/><path d="M730.15 434.78c20.26-94.9-46.81-189.74-149.9-211.75-103.1-22-203.05 37.17-223.31 132.09-20.26 94.9 46.8 189.74 149.9 211.75 103.1 22 203.05-37.17 223.3-132.09Z"/><path d="M565.63 393.51c11.4-53.42-25.74-106.7-83.05-118.93-57.32-12.24-112.98 21.23-124.38 74.65-11.41 53.43 25.74 106.7 83.05 118.94 57.31 12.23 112.98-21.23 124.38-74.66Z"/><path d="M507.87 381.04c8.07-37.81-18.83-75.68-60.2-84.5-41.36-8.84-81.37 14.74-89.44 52.55-8.08 37.81 18.82 75.68 60.19 84.51 41.36 8.83 81.38-14.75 89.45-52.56Z"/><path d="M668.34-16.28c-164.89 90.43-279.7 223.03-314.5 386.05-34.6 162.08 15.29 329 127.5 478.23"/><path d="M482.38 560.08c20.96-98.17-37.75-193.87-131.07-213.79-93.33-19.92-186 43.46-206.95 141.63-20.96 98.18 37.75 193.87 131.07 213.8 93.33 19.92 186-43.47 206.95-141.64Z"/></g><g fill="#3D7B87"><circle cx="545.73" cy="65.7" r="6.7" transform="rotate(12.05 545.73 65.7)"/><circle cx="6.7" cy="6.7" r="6.7" transform="scale(1 -1) rotate(-12.05 -2911.17 -1076.64)"/><ellipse cx="4.94" cy="7.18" rx="4.94" ry="7.18" transform="scale(1 -1) rotate(-20.98 183.75 -1296.01)"/><ellipse cx="4.74" cy="6.4" rx="4.74" ry="6.4" transform="scale(1 -1) rotate(-12.05 187.9 -2125.37)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(31.69 1029.73 -24.26)"/><ellipse cx="2.8" cy="5.82" rx="2.8" ry="5.82" transform="scale(1 -1) rotate(31.69 867.17 203.72)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(16.08 1654.79 57.2)"/><ellipse cx="163.88" cy="128.11" rx="4.48" ry="9.03" transform="rotate(-120.9 163.88 128.11)"/><ellipse cx="274.03" cy="67.48" rx="4.48" ry="9.03" transform="rotate(-113.38 274.03 67.48)"/><ellipse cx="367.21" cy="92.23" rx="3.39" ry="7.31" transform="rotate(-99.19 367.2 92.23)"/><ellipse cx="3.98" cy="6.65" rx="3.98" ry="6.65" transform="scale(1 -1) rotate(3.39 8253.05 -219.92)"/><ellipse cx="3.48" cy="6.68" rx="3.48" ry="6.68" transform="scale(1 -1) rotate(24.86 1254.69 -215.22)"/><ellipse cx="3.76" cy="7.12" rx="3.76" ry="7.12" transform="scale(1 -1) rotate(49.8 674.95 -223)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-24.75 -733 -411.39)"/><ellipse cx="4.06" cy="7.93" rx="4.06" ry="7.93" transform="scale(1 -1) rotate(-38.06 -261.45 -309.48)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(2.61 7685.98 3177.5)"/><ellipse cx="3.46" cy="6.72" rx="3.46" ry="6.72" transform="scale(1 -1) rotate(-.91 -18651.2 -141.87)"/><ellipse cx="19.17" cy="224.95" rx="3.55" ry="6.9" transform="rotate(23.2 19.17 224.95)"/><ellipse cx="9.33" cy="256.03" rx="3.65" ry="7.09" transform="rotate(12.05 9.33 256.03)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(36.8 698.44 97.73)"/><ellipse cx="4.91" cy="9.03" rx="4.91" ry="9.03" transform="scale(1 -1) rotate(35.4 868.22 142.26)"/><ellipse cx="4.91" cy="7.64" rx="4.91" ry="7.64" transform="scale(1 -1) rotate(44.07 803.06 63.23)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-38.32 -292.24 -370.78)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-51.58 -121.02 -356.51)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-62.45 6.86 -343.71)"/><ellipse cx="5.46" cy="9.03" rx="5.46" ry="9.03" transform="scale(1 -1) rotate(-77.71 94.75 -297.43)"/><ellipse cx="4.79" cy="4.88" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2589.61 -1403.38)"/><ellipse cx="4.79" cy="4.88" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2137.24 -1615.32)"/><ellipse cx="4.79" cy="4.88" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2683.45 -1973.08)"/><ellipse cx="482.54" cy="126.94" rx="4.79" ry="4.88" transform="rotate(12.05 482.54 126.94)"/><ellipse cx="4.79" cy="4.88" rx="4.79" ry="4.88" transform="matrix(.978 .2088 .2088 -.978 446 631.9)"/><ellipse cx="584.07" cy="149.46" rx="4.79" ry="4.88" transform="rotate(12.05 584.07 149.46)"/><ellipse cx="6.52" cy="6.65" rx="6.52" ry="6.65" transform="scale(1 -1) rotate(-12.05 -2495.49 -1899.88)"/><ellipse cx="452.09" cy="161.39" rx="4.78" ry="5.77" transform="rotate(-44.35 452.09 161.39)"/><ellipse cx="6.52" cy="6.65" rx="6.52" ry="6.65" transform="matrix(.978 .2088 .2088 -.978 335.3 496.36)"/><ellipse cx="416.1" cy="214.01" rx="6.52" ry="6.65" transform="rotate(12.05 416.1 214.01)"/><ellipse cx="5" cy="6.18" rx="5" ry="6.18" transform="scale(1 -1) rotate(-26.41 -907.55 -1119.88)"/><ellipse cx="489.75" cy="225.01" rx="5" ry="6.18" transform="rotate(-2.31 489.75 225.01)"/><ellipse cx="5.32" cy="5.42" rx="5.32" ry="5.42" transform="scale(1 -1) rotate(-12.05 -2090.56 -1998.83)"/><ellipse cx="439.92" cy="243.88" rx="5.32" ry="5.42" transform="rotate(12.05 439.92 243.88)"/><ellipse cx="2.84" cy="5.27" rx="2.84" ry="5.27" transform="scale(1 -1) rotate(-8.31 -2220.86 -1682.37)"/><ellipse cx="232.75" cy="289.48" rx="2.84" ry="5.27" transform="rotate(15.8 232.75 289.48)"/><ellipse cx="7.5" cy="11.35" rx="7.5" ry="11.35" transform="scale(1 -1) rotate(-12.05 -2451.83 -2523.91)"/><ellipse cx="578.22" cy="223.89" rx="5" ry="4.58" transform="rotate(12.05 578.22 223.89)"/><ellipse cx="3.54" cy="6.98" rx="3.54" ry="6.98" transform="scale(1 -1) rotate(-31.41 -745.42 -1273.8)"/><ellipse cx="650.64" cy="251.96" rx="3.54" ry="6.98" transform="rotate(-7.3 650.64 251.96)"/><ellipse cx="5.42" cy="4.43" rx="5.42" ry="4.43" transform="matrix(.978 .2088 .2088 -.978 473.24 473)"/><ellipse cx="532.6" cy="301.26" rx="5.42" ry="4.31" transform="rotate(12.05 532.6 301.26)"/><ellipse cx="6.7" cy="5.11" rx="6.7" ry="5.11" transform="scale(1 -1) rotate(-30.78 -529.84 -1189.83)"/><ellipse cx="565.93" cy="358.88" rx="6.7" ry="5.11" transform="rotate(-6.68 565.93 358.88)"/><ellipse cx="5.16" cy="4.6" rx="5.16" ry="4.6" transform="scale(1 -1) rotate(-47.05 -293.12 -1016.12)"/><ellipse cx="5.44" cy="3.86" rx="5.44" ry="3.86" transform="scale(1 -1) rotate(-43.96 -292.56 -955.94)"/><ellipse cx="622.7" cy="350.92" rx="5.95" ry="4.22" transform="rotate(-15.38 622.7 350.92)"/><ellipse cx="4.89" cy="4.1" rx="4.89" ry="4.1" transform="scale(1 -1) rotate(-88.1 -9.93 -434.95)"/><ellipse cx="445.81" cy="297.26" rx="4.89" ry="4.1" transform="rotate(-64 445.8 297.26)"/><ellipse cx="8.53" cy="6.01" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(78.34 -489.68 -34.66)"/><ellipse cx="487.64" cy="276.67" rx="8.53" ry="6.01" transform="rotate(-77.57 487.64 276.67)"/><ellipse cx="8.53" cy="6.01" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(59.21 -595.82 -237.03)"/><ellipse cx="504.69" cy="362.53" rx="8.53" ry="6.01" transform="rotate(-96.69 504.69 362.53)"/></g></g></svg>

package/src/assets/svg/concentric.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="641" height="1012" opacity="0.075" fill="none" viewBox="0 0 641 1012"><circle cx="641" cy="506" r="80" stroke="#004157"/><circle cx="641" cy="506" r="20" stroke="#004157"/><circle cx="641" cy="506" r="160" stroke="#004157"/><circle cx="641" cy="506" r="240" stroke="#004157"/><circle cx="641" cy="506" r="320" stroke="#004157"/><circle cx="641" cy="506" r="400" stroke="#004157"/><circle cx="641" cy="506" r="480" stroke="#004157"/><circle cx="641" cy="506" r="560" stroke="#004157"/><circle cx="641" cy="506" r="640" stroke="#004157"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="641" height="1012" fill="none" viewBox="0 0 641 1012"><g stroke="#3D7B87" opacity=".1"><circle cx="641" cy="506" r="80"/><circle cx="641" cy="506" r="20"/><circle cx="641" cy="506" r="160"/><circle cx="641" cy="506" r="240"/><circle cx="641" cy="506" r="320"/><circle cx="641" cy="506" r="400"/><circle cx="641" cy="506" r="480"/><circle cx="641" cy="506" r="560"/><circle cx="641" cy="506" r="640"/></g></svg>

package/src/assets/svg/crystal.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 523 666" opacity="0.075" ><g clip-path="url(#a)"><path stroke="#3D7B87" d="m74 183 62-61 81 14 20 76-62 62-81-15-20-76Zm78 304-20-77"/><path stroke="#3D7B87" d="m93 259-62 61 20 77 82 14 62-62-19-76M91 548l62-62 81 15 20 75-62 62-82-15-19-75Zm146-335 82 14 62-62-20-76-82-15-62 62m59 228 62-62 82 14 20 76-62 62-82-15-20-75Zm0 0-82-14"/><path stroke="#3D7B87" d="m296 439-63 62m145-48 20 77-62 61-83-14m127-411 82 14 62-62-19-76-83-15-62 62m79 304 82 14 63-62-20-76-82-14-63 61m43-137 20 76m-144 48-20-77"/><path stroke="#3D7B87" d="m521 406 20 77-62 61-82-14"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 205 131)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 263 359)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 268 68)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 327 295)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 306 221)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 364 449)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 324 585)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 181 631)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 60 179)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 121 405)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 125 115)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 183 343)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 39 390)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 161 269)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 19 315)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 223 494)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 80 541)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 347 84)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 407 311)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 410 22)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 470 249)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 449 175)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 508 401)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 465 539)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 493 36)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 225 205)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 284 433)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 241 571)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 98 618)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 81 253)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 141 481)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 369 158)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 428 385)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 385 523)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 511 113)"/><path stroke="#3D7B87" d="m41 177 23 4m69-66-6-21m73 572-6-22m82-576-5-21m72 572-5-22m82-576-6-21m73 572-6-22M0 314l23 4m37 222 23 4M510 36l39-37M85 649l18-17M27 420l17-17"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h523v666H0z"/></clipPath></defs></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 523 666" opacity="0.075"><defs><style>.a{fill:#3d7b87}</style><clipPath id="a"><path fill="#fff" d="M0 0h523v666H0z"/></clipPath></defs><g clip-path="url(#a)"><g stroke="#3D7B87"><path d="m74 183 62-61 81 14 20 76-62 62-81-15-20-76Zm78 304-20-77"/><path d="m93 259-62 61 20 77 82 14 62-62-19-76M91 548l62-62 81 15 20 75-62 62-82-15-19-75Zm146-335 82 14 62-62-20-76-82-15-62 62m59 228 62-62 82 14 20 76-62 62-82-15-20-75Zm0 0-82-14"/><path d="m296 439-63 62m145-48 20 77-62 61-83-14m127-411 82 14 62-62-19-76-83-15-62 62m79 304 82 14 63-62-20-76-82-14-63 61m43-137 20 76m-144 48-20-77"/><path d="m521 406 20 77-62 61-82-14"/><path d="m41 177 23 4m69-66-6-21m73 572-6-22m82-576-5-21m72 572-5-22m82-576-6-21m73 572-6-22M0 314l23 4m37 222 23 4M510 36l39-37M85 649l18-17M27 420l17-17"/></g><g fill="#3d7b87"><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 205 131)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 263 359)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 268 68)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 327 295)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 306 221)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 364 449)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 324 585)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 181 631)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 60 179)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 121 405)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 125 115)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 183 343)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 39 390)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 161 269)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 19 315)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 223 494)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 80 541)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 347 84)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 407 311)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 410 22)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 470 249)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 449 175)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 508 401)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 465 539)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 493 36)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 225 205)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 284 433)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 241 571)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 98 618)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 81 253)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 141 481)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 369 158)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 428 385)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 385 523)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 511 113)"/></g></g></svg>

package/src/assets/svg/dots-pattern.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="421" height="724" fill="none" viewBox="0 0 421 724"><g stroke="#004157" opacity=".1"><circle cx="36.965" cy="27.974" r="17.5" transform="rotate(-15 36.965 27.974)"/><circle cx="141.285" cy=".021" r="17.5" transform="rotate(-15 141.285 .021)"/><circle cx="3.44" cy="111.496" r="17.5" transform="rotate(-15 3.44 111.496)"/><circle cx="107.76" cy="83.544" r="17.5" transform="rotate(-15 107.76 83.544)"/><circle cx="212.08" cy="55.591" r="17.5" transform="rotate(-15 212.08 55.591)"/><circle cx="74.235" cy="167.067" r="17.5" transform="rotate(-15 74.235 167.067)"/><circle cx="178.555" cy="139.114" r="17.5" transform="rotate(-15 178.555 139.114)"/><circle cx="40.71" cy="250.59" r="17.5" transform="rotate(-15 40.71 250.59)"/><circle cx="145.03" cy="222.637" r="17.5" transform="rotate(-15 145.03 222.637)"/><circle cx="249.35" cy="194.685" r="17.5" transform="rotate(-15 249.35 194.685)"/><circle cx="7.185" cy="334.113" r="17.5" transform="rotate(-15 7.185 334.113)"/><circle cx="111.505" cy="306.16" r="17.5" transform="rotate(-15 111.505 306.16)"/><circle cx="215.825" cy="278.208" r="17.5" transform="rotate(-15 215.825 278.208)"/><circle cx="77.98" cy="389.683" r="17.5" transform="rotate(-15 77.98 389.683)"/><circle cx="182.3" cy="361.73" r="17.5" transform="rotate(-15 182.3 361.73)"/><circle cx="286.62" cy="333.778" r="17.5" transform="rotate(-15 286.62 333.778)"/><circle cx="44.455" cy="473.206" r="17.5" transform="rotate(-15 44.455 473.206)"/><circle cx="148.775" cy="445.254" r="17.5" transform="rotate(-15 148.775 445.254)"/><circle cx="253.095" cy="417.301" r="17.5" transform="rotate(-15 253.095 417.301)"/><circle cx="10.93" cy="556.729" r="17.5" transform="rotate(-15 10.93 556.729)"/><circle cx="115.25" cy="528.776" r="17.5" transform="rotate(-15 115.25 528.776)"/><circle cx="219.57" cy="500.824" r="17.5" transform="rotate(-15 219.57 500.824)"/><circle cx="323.89" cy="472.871" r="17.5" transform="rotate(-15 323.89 472.871)"/><circle cx="81.725" cy="612.299" r="17.5" transform="rotate(-15 81.725 612.299)"/><circle cx="186.045" cy="584.347" r="17.5" transform="rotate(-15 186.045 584.347)"/><circle cx="290.365" cy="556.394" r="17.5" transform="rotate(-15 290.365 556.394)"/><circle cx="48.2" cy="695.822" r="17.5" transform="rotate(-15 48.2 695.822)"/><circle cx="152.52" cy="667.87" r="17.5" transform="rotate(-15 152.52 667.87)"/><circle cx="256.84" cy="639.917" r="17.5" transform="rotate(-15 256.84 639.917)"/><circle cx="361.16" cy="611.965" r="17.5" transform="rotate(-15 361.16 611.965)"/><circle cx="223.315" cy="723.44" r="17.5" transform="rotate(-15 223.315 723.44)"/><circle cx="327.635" cy="695.488" r="17.5" transform="rotate(-15 327.635 695.488)"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="421" height="724" fill="none" viewBox="0 0 421 724"><g stroke="#3D7B87" opacity=".1"><circle cx="36.965" cy="27.974" r="17.5" transform="rotate(-15 36.965 27.974)"/><circle cx="141.285" cy=".021" r="17.5" transform="rotate(-15 141.285 .021)"/><circle cx="3.44" cy="111.496" r="17.5" transform="rotate(-15 3.44 111.496)"/><circle cx="107.76" cy="83.544" r="17.5" transform="rotate(-15 107.76 83.544)"/><circle cx="212.08" cy="55.591" r="17.5" transform="rotate(-15 212.08 55.591)"/><circle cx="74.235" cy="167.067" r="17.5" transform="rotate(-15 74.235 167.067)"/><circle cx="178.555" cy="139.114" r="17.5" transform="rotate(-15 178.555 139.114)"/><circle cx="40.71" cy="250.59" r="17.5" transform="rotate(-15 40.71 250.59)"/><circle cx="145.03" cy="222.637" r="17.5" transform="rotate(-15 145.03 222.637)"/><circle cx="249.35" cy="194.685" r="17.5" transform="rotate(-15 249.35 194.685)"/><circle cx="7.185" cy="334.113" r="17.5" transform="rotate(-15 7.185 334.113)"/><circle cx="111.505" cy="306.16" r="17.5" transform="rotate(-15 111.505 306.16)"/><circle cx="215.825" cy="278.208" r="17.5" transform="rotate(-15 215.825 278.208)"/><circle cx="77.98" cy="389.683" r="17.5" transform="rotate(-15 77.98 389.683)"/><circle cx="182.3" cy="361.73" r="17.5" transform="rotate(-15 182.3 361.73)"/><circle cx="286.62" cy="333.778" r="17.5" transform="rotate(-15 286.62 333.778)"/><circle cx="44.455" cy="473.206" r="17.5" transform="rotate(-15 44.455 473.206)"/><circle cx="148.775" cy="445.254" r="17.5" transform="rotate(-15 148.775 445.254)"/><circle cx="253.095" cy="417.301" r="17.5" transform="rotate(-15 253.095 417.301)"/><circle cx="10.93" cy="556.729" r="17.5" transform="rotate(-15 10.93 556.729)"/><circle cx="115.25" cy="528.776" r="17.5" transform="rotate(-15 115.25 528.776)"/><circle cx="219.57" cy="500.824" r="17.5" transform="rotate(-15 219.57 500.824)"/><circle cx="323.89" cy="472.871" r="17.5" transform="rotate(-15 323.89 472.871)"/><circle cx="81.725" cy="612.299" r="17.5" transform="rotate(-15 81.725 612.299)"/><circle cx="186.045" cy="584.347" r="17.5" transform="rotate(-15 186.045 584.347)"/><circle cx="290.365" cy="556.394" r="17.5" transform="rotate(-15 290.365 556.394)"/><circle cx="48.2" cy="695.822" r="17.5" transform="rotate(-15 48.2 695.822)"/><circle cx="152.52" cy="667.87" r="17.5" transform="rotate(-15 152.52 667.87)"/><circle cx="256.84" cy="639.917" r="17.5" transform="rotate(-15 256.84 639.917)"/><circle cx="361.16" cy="611.965" r="17.5" transform="rotate(-15 361.16 611.965)"/><circle cx="223.315" cy="723.44" r="17.5" transform="rotate(-15 223.315 723.44)"/><circle cx="327.635" cy="695.488" r="17.5" transform="rotate(-15 327.635 695.488)"/></g></svg>