Change: add dist files to main repo with the styles from the lyquix website

Author: maustin92

css/lib/abstracts/_mixins.dist.scss

@@ -21,3 +21,69 @@
   DO NOT MODIFY THIS FILE!
 	Instead copy it to css/custom/abstracts/_mixins.scss and make your changes there.
 */
+@mixin readmore {
+  align-items: center;
+  display: flex;
+  line-height: 1.667;
+  gap: 20px;
+  padding: 10px 0;
+  font-family: "Inter";
+  font-weight: 600;
+  @apply text-color-base no-underline;
+  &:after {
+    background-image: url(../images/green-arrow.svg);
+    background-size: 47px 15px;
+    background-position: right center;
+    content: " ";
+    display: block;
+    height: 15px;
+    transition: width 0.5s;
+    width: 47px;
+  }
+  //note: some readmore links were added as a block, and the class applies to the parent, not the link. It mostly has the same styles but not the color and underline
+  a.wp-block-button__link {
+    color: #595B60 !important;
+  }
+  transition: color 0.5s, gap 0.5s;
+  &:hover {
+    @apply gap-x-[39px] text-midnight-black;
+    text-decoration: none;
+    a.wp-block-button__link {
+      color: #35393E !important;
+      text-decoration: none !important;
+    }
+    &:after {
+      @apply w-[28px];
+    }
+  }
+}
+
+@mixin common-button {
+  @apply bg-lyquix-green-accessible text-white;
+  align-items: center;
+  display: flex;
+  line-height: 1.667;
+  justify-content: space-between;
+  padding: 10px 15px;
+  width: 152px;
+  border-radius: 3px;
+  transition: background-color 0.5s;
+  &:after {
+    background-image: url(../images/white-arrow.svg);
+    background-size: 47px 15px;
+    background-position: right center;
+    content: " ";
+    display: block;
+    height: 15px;
+    transition: width 0.5s;
+    width: 47px;
+  }
+  transition: color 0.5s;
+  &:hover {
+    @apply text-white bg-midnight-black;
+    text-decoration: none;
+    &:after {
+      width: 28px;
+    }
+  }
+}

css/lib/abstracts/_variables.dist.scss

@@ -35,4 +35,4 @@ $headings: h1 h2 h3 h4 h5 h6;
 $grid-columns: 14 14 14 14 14;
 
 // List of grid gaps (in pixels) per screen size
-$grid-gaps: 8px 8px 8px 8px 8px;
+$grid-gaps: 8px 20px 20px 20px 20px;

css/lib/base/_forms.dist.scss

@@ -28,7 +28,7 @@
 input,
 textarea,
 select {
-	@apply mx-input border-input-border bg-input-bg p-input font-input text-input;
+	@apply mx-input border-input-border bg-input-bg p-input font-input text-input rounded-[4px];
 	outline: none;
 	border-width: 1px;
 	border-style: solid;
@@ -51,7 +51,7 @@ select:disabled {
 input[type="submit"],
 input[type="button"],
 input[type="reset"],
-button {
+button:not(.cta-btn, .pill) {
 	@apply mx-input border-input-border bg-button-bg px-button-x py-button-y font-button font-bold text-button;
 	border: none;
 

css/lib/base/_reset.dist.scss

@@ -51,7 +51,7 @@ html:focus-within {
 }
 
 body {
-	min-height: 100vh;
+	min-height: 100dvh;
 }
 
 img {
@@ -86,3 +86,8 @@ hr {
 		scroll-behavior: auto !important;
 	}
 }
+
+.size-full {
+	width: 100%;
+	height: auto;
+}

css/lib/base/_typography.dist.scss

@@ -24,6 +24,9 @@
 @use "../abstracts/variables" as *;
 @use "../abstracts/mixins" as *;
 
+@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap");
+
 html {
 	// Set default font-size to 10px, then use rem units for the rest of the stylesheet
 	font-size: 10px;
@@ -46,7 +49,7 @@ p {
 
 ul,
 ol {
-	@apply list-inside pl-list;
+	@apply pl-list;
 }
 
 ul {
@@ -69,17 +72,21 @@ samp {
 }
 
 a {
-	@apply text-link;
-	text-decoration: none;
+	@apply text-lyquix-green-accessible underline;
 	outline: none;
 
 	&:hover {
 		@apply text-link-hover;
-		text-decoration: underline;
+		text-decoration: none;
 	}
 
-	&:visited {
+	/*&:visited {
 		@apply text-link-visited;
+	}*/
+}
+nav ul li a:not(.button) {
+	&:hover {
+		text-decoration: none;
 	}
 }
 
@@ -98,3 +105,11 @@ a {
 		}
 	}
 }
+
+.readmore {
+	@include readmore;
+}
+
+h1, h2, h3, h4, h5, h6, p, li, blockquote {
+	@apply text-pretty;
+}

css/lib/components/_accordion.dist.scss

@@ -26,27 +26,64 @@
 @use "../abstracts/mixins" as *;
 
 .lqx-block-accordion {
-	.accordion-header {
-		display: block;
-		background: none;
-		outline: none;
-		border: none;
-		padding: 0;
-		width: 100%;
-		text-align: left;
-	}
-
-	.accordion-panel {
-		display: grid;
-		grid-template-rows: 1fr;
-		transition: grid-template-rows 0.5s ease-out;
-
-		&.closed {
-			grid-template-rows: 0fr;
-		}
-
-		& > div {
-			overflow: hidden;
-		}
-	}
-}
+  @apply grid grid-cols-12 gap-x-[20px];
+
+  .accordion {
+    @apply col-span-full;
+
+    .accordion-item {
+      @apply py-[25px] border-b-[1px] border-[#FFFFFF];
+
+      &:first-of-type {
+        @apply md:pt-[10px];
+      }
+
+      h3 {
+        @apply m-0;
+
+        .accordion-header {
+          @apply flex ml-0 font-semibold leading-[30px];
+          background: none;
+          outline: none;
+          border: none;
+          padding: 0;
+          width: 100%;
+          text-align: left;
+
+          &:after {
+            transition: transform 0.3s ease;
+            @apply w-[24px] h-[24px] bg-center bg-no-repeat bg-[url('../images/icons/green-plus.svg')];
+          }
+
+          &[aria-expanded="true"] {
+            &:after {
+              @apply rotate-45;
+            }
+          }
+        }
+      }
+
+      .accordion-panel {
+        display: grid;
+        grid-template-rows: 1fr;
+        transition: grid-template-rows 0.5s ease-out;
+
+        &.closed {
+          grid-template-rows: 0fr;
+        }
+
+        & > div {
+          overflow: hidden;
+
+          p {
+            @apply my-[10px];
+          }
+
+          img {
+            @apply object-cover w-full rounded-[5px] mt-[5px];
+          }
+        }
+      }
+    }
+  }
+}