theme and plugin sync

src/scss/abstracts/_colors.scss

@@ -0,0 +1,137 @@
+:root {
+  /* Black and White */
+  --black: black;
+  --white: white;
+
+  /* Gray */
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+
+  /* Red */
+  --primary-50: #faf0f5;
+  --primary-100: #f5e1ea;
+  --primary-200: #e6b8ca;
+  --primary-300: #d490a5;
+  --primary-400: #b54e61;
+  --primary-500: #951d20;
+  --primary-600: #85171a;
+  --primary-700: #6e0f12;
+  --primary-800: #590a0c;
+  --primary-900: #420607;
+
+  /* Orange */
+  --orange-50: #fcf8f2;
+  --orange-100: #faf2e6;
+  --orange-200: #f5dec4;
+  --orange-300: #f0c8a3;
+  --orange-400: #e39162;
+  --orange-500: #d75428;
+  --orange-600: #c24621;
+  --orange-700: #a13416;
+  --orange-800: #80250e;
+  --orange-900: #611909;
+
+  /* Copper */
+  --copper-50: #fcfaf5;
+  --copper-100: #fcf8f0;
+  --copper-200: #f5e7d5;
+  --copper-300: #f0d7bd;
+  --copper-400: #e6b391;
+  --copper-500: #da8a67;
+  --copper-600: #c47352;
+  --copper-700: #a35539;
+  --copper-800: #823a24;
+  --copper-900: #612514;
+
+  /* Yellow */
+  --yellow-50: #fffdf5;
+  --yellow-100: #fcf8e8;
+  --yellow-200: #faeec5;
+  --yellow-300: #f5e0a2;
+  --yellow-400: #f0c362;
+  --yellow-500: #e7a026;
+  --yellow-600: #d1891d;
+  --yellow-700: #ad6915;
+  --yellow-800: #8c4d0e;
+  --yellow-900: #693507;
+
+  /* Green */
+  --green-50: #f2faeb;
+  --green-100: #e3f3d4;
+  --green-200: #c9e8ae;
+  --green-300: #a5d87e;
+  --green-400: #85c655;
+  --green-500: #66ab37;
+  --green-600: #4d8828;
+  --green-700: #3d6923;
+  --green-800: #335420;
+  --green-900: #2d481f;
+
+  /* Blue */
+  --blue-50: #ebf2f5;
+  --blue-100: #d8e5eb;
+  --blue-200: #a3becc;
+  --blue-300: #7698ad;
+  --blue-400: #315370;
+  --blue-500: #0a1c32;
+  --blue-600: #08192e;
+  --blue-700: #061326;
+  --blue-800: #040e1f;
+  --blue-900: #020917;
+
+  /* Cadet */
+  --cadet-50: #f7fafa;
+  --cadet-100: #f5f7f7;
+  --cadet-200: #e1ebea;
+  --cadet-300: #cedbda;
+  --cadet-400: #aec2bf;
+  --cadet-500: #8ea8a4;
+  --cadet-600: #749690;
+  --cadet-700: #507d72;
+  --cadet-800: #346656;
+  --cadet-900: #1d4d3a;
+
+  /* Indigo */
+  --indigo-50: #eef2ff;
+  --indigo-100: #e0e7ff;
+  --indigo-200: #c7d2fe;
+  --indigo-300: #a5b4fc;
+  --indigo-400: #818cf8;
+  --indigo-500: #6366f1;
+  --indigo-600: #4f46e5;
+  --indigo-700: #4338ca;
+  --indigo-800: #3730a3;
+  --indigo-900: #312e81;
+
+  /* Purple */
+  --purple-50: #f5f3ff;
+  --purple-100: #ede9fe;
+  --purple-200: #ddd6fe;
+  --purple-300: #c4b5fd;
+  --purple-400: #a78bfa;
+  --purple-500: #8b5cf6;
+  --purple-600: #7c3aed;
+  --purple-700: #6d28d9;
+  --purple-800: #5b21b6;
+  --purple-900: #4c1d95;
+
+  /* Pink */
+  --pink-50: #fdf2f8;
+  --pink-100: #fce7f3;
+  --pink-200: #fbcfe8;
+  --pink-300: #f9a8d4;
+  --pink-400: #f472b6;
+  --pink-500: #ec4899;
+  --pink-600: #db2777;
+  --pink-700: #be185d;
+  --pink-800: #9d174d;
+  --pink-900: #831843;
+}

src/scss/abstracts/_index.scss

@@ -0,0 +1,8 @@
+// ABSTRACTS FORWARD
+
+@forward '../abstracts/breakpoints';
+@forward '../abstracts/colors';
+@forward '../abstracts/functions';
+@forward '../abstracts/mixins';
+@forward '../abstracts/utility';
+@forward '../abstracts/variables';

src/scss/abstracts/_utility.scss

@@ -0,0 +1,4 @@
+
+.horizontal-rule {
+  height: 1px;
+}

src/scss/base/_base.scss

@@ -0,0 +1,126 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+html,
+body {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture,
+svg {
+  max-width: 100%;
+  display: block;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+p font {
+  display: none;
+}
+
+label {
+  font-weight: normal;
+}
+
+/* FORMS */
+input[type='checkbox']:focus,
+input[type='checkbox']:checked {
+  background-color: var(--primary-500) !important;
+}
+
+input[type='color']:focus,
+input[type='date']:focus,
+input[type='datetime-local']:focus,
+input[type='datetime']:focus,
+input[type='email']:focus,
+input[type='month']:focus,
+input[type='number']:focus,
+input[type='password']:focus,
+input[type='radio']:focus,
+input[type='search']:focus,
+input[type='tel']:focus,
+input[type='text']:focus,
+input[type='textarea']:focus,
+input[type='time']:focus,
+input[type='url']:focus,
+input[type='week']:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--primary-500) !important;
+  box-shadow: 0 0 0 1px var(--gray-500) !important;
+  outline: 2px solid transparent !important;
+}
+
+/* FORMS */
+input[type='checkbox'] {
+  background-color: var(--primary-100) !important;
+}
+
+input[type='color'],
+input[type='date'],
+input[type='datetime-local'],
+input[type='datetime'],
+input[type='email'],
+input[type='month'],
+input[type='number'],
+input[type='password'],
+input[type='radio'],
+input[type='search'],
+input[type='tel'],
+input[type='text'],
+input[type='textarea'],
+input[type='time'],
+input[type='url'],
+input[type='week'],
+select,
+textarea {
+  background-color: var(--gray-100) !important;
+}

src/scss/base/_fonts.scss

@@ -0,0 +1 @@
+

src/scss/base/_index.scss

@@ -0,0 +1,6 @@
+// BASE FORWARD
+
+@forward '../base/base';
+@forward '../base/fonts';
+@forward '../base/helpers';
+@forward '../base/typography';

src/scss/components/_accordion_collapse.scss

@@ -0,0 +1,52 @@
+.accordion {
+    position: relative;
+    overflow: hidden;
+    transition: 0.6s ease-in-out;
+    padding: 0 0.5rem;
+  }
+  .accordion-title {
+    margin: 0 35px 0 0;
+    font-weight: medium;
+  }
+  .accordion-content {
+    position: absolute;
+    opacity: 0;
+    transition: all 600ms ease-in-out;
+    padding: 1rem;
+  }
+  @media (min-width: 1024px) {
+    .accordion-content {
+      padding: 1rem 1rem 1rem 2.5rem;
+    }
+    .accordion.active .accordion-content > li:hover {
+      background-color: var(--primary-500);
+      color: white;
+    }
+  }
+  .accordion.active .accordion-content {
+    position: static;
+    opacity: 1;
+    border-radius: 0.5rem;
+  }
+  .accordion-toggle {
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    padding: 0;
+  }
+  .accordion-toggle:focus {
+    outline: 0;
+  }
+  .accordion-toggle .fa-times {
+    display: none;
+  }
+  .accordion.active .accordion-toggle .fa-times {
+    display: block;
+  }
+  .accordion.active .accordion-toggle .fa-chevron-down {
+    display: none;
+  }

src/scss/components/_floating_search.scss

@@ -0,0 +1,35 @@
+.search {
+    position: relative;
+    height: 50px;
+  }
+  .search .input {
+    background-color: #fff;
+    border: 0;
+    font-size: 18px;
+    padding: 15px;
+    height: 50px;
+    width: 50px;
+    transition: width 0.3s ease;
+  }
+  .search .btn {
+    background-color: #fff;
+    border: 0;
+    cursor: pointer;
+    font-size: 24px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 50px;
+    width: 50px;
+    transition: transform 0.3s ease;
+  }
+  .search .btn:focus,
+  .search .input:focus {
+    outline: none;
+  }
+  .search.active .input {
+    width: 200px;
+  }
+  .search.active .btn {
+    transform: translateX(198px);
+  }

src/scss/components/_index.scss

@@ -0,0 +1 @@
+@forward '../components/project-calculator';

src/scss/components/_project-calculator.scss

@@ -0,0 +1,56 @@
+.project-calculator {
+  padding: 20px;
+  border: 1px solid #ced4da;
+  border-radius: 5px;
+  background-color: #f8f9fa;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+  h2 {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-top: 0;
+    margin-bottom: 20px;
+    color: #343a40;
+    text-align: center;
+  }
+
+  div {
+    margin-bottom: 15px;
+  }
+
+  label {
+    margin-bottom: 5px;
+    color: #495057;
+  }
+
+  select,
+  input[type='number'] {
+    box-sizing: border-box; /* Include padding and border in element's total width */
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+  }
+
+  button {
+    padding: 10px 20px;
+    margin-bottom: 10px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  button:hover {
+    background-color: #0056b3;
+  }
+
+  .total-price {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #007bff;
+    text-align: center;
+  }
+}

src/scss/components/_range_slider.scss

@@ -0,0 +1,72 @@
+.range-container {
+    position: relative;
+    /* Chrome & Safari */
+    /* Firefox */
+    /* IE */
+  }
+  .range-container input[type=range] {
+    width: 100%;
+    margin: 18px 0;
+  }
+  .range-container input[type=range]:focus {
+    outline: none;
+  }
+  .range-container input[type=range] + label {
+    background-color: var(--gray-800);
+    padding: 0.5rem 2rem !important;
+    color: white;
+    position: absolute;
+    top: -32px;
+    left: 110px;
+    text-align: center;
+    border-radius: 4px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  }
+  .range-container input[type=range]::-webkit-slider-runnable-track {
+    background: var(--primary-500);
+    border-radius: 4px;
+    width: 100%;
+    height: 10px;
+    cursor: pointer;
+  }
+  .range-container input[type=range]::-webkit-slider-thumb {
+    height: 24px;
+    width: 24px;
+    background: #fff;
+    border-radius: 50%;
+    border: 1px solid purple;
+    margin-top: -7px;
+    cursor: pointer;
+  }
+  .range-container input[type=range]::-moz-range-track {
+    background: purple;
+    border-radius: 4px;
+    width: 100%;
+    height: 13px;
+    cursor: pointer;
+  }
+  .range-container input[type=range]::-moz-range-thumb {
+    height: 24px;
+    width: 24px;
+    background: #fff;
+    border-radius: 50%;
+    border: 1px solid purple;
+    margin-top: -7px;
+    cursor: pointer;
+  }
+  .range-container input[type=range]::-ms-track {
+    background: purple;
+    border-radius: 4px;
+    width: 100%;
+    height: 13px;
+    cursor: pointer;
+  }
+  .range-container input[type=range]::-ms-thumb {
+    height: 24px;
+    width: 24px;
+    background: #fff;
+    border-radius: 50%;
+    border: 1px solid purple;
+    margin-top: -7px;
+    cursor: pointer;
+  }

src/scss/layout/_header.scss

@@ -0,0 +1,111 @@
+.toggle-menu {
+    height: 40px;
+    display: flex;
+    width: 15px;
+    position: relative;
+    z-index: 1000;
+  }
+  
+  @media (min-width: 1024px) {
+    .toggle-menu {
+      display: none;
+    }
+  }
+  .toggle-menu i {
+    position: absolute;
+    height: 2px;
+    background: black;
+    width: 15px;
+    transition: all 0.3s;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  
+  .toggle-menu i:nth-child(1) {
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  
+  .toggle-menu i:nth-child(2) {
+    top: 60%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  
+  .toggle-menu.active i:nth-child(1) {
+    top: 50%;
+    left: 0;
+    transform: rotateZ(45deg);
+  }
+  
+  .toggle-menu.active i:nth-child(2) {
+    top: 50%;
+    left: 0;
+    transform: rotateZ(-45deg);
+  }
+  
+  #slide-out-menu {
+    translate: -100%;
+    transition: 300ms ease-in-out;
+    /* Hide scrollbar for WebKit (Chrome, Safari) */
+    /* Hide scrollbar for Firefox */
+    /* Hide scrollbar for Internet Explorer and Edge */
+  }
+  #slide-out-menu::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
+  #slide-out-menu::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    display: none;
+  }
+  #slide-out-menu::-moz-scrollbar {
+    width: 0;
+    display: none;
+  }
+  #slide-out-menu::-moz-scrollbar-thumb {
+    background-color: transparent;
+    display: none;
+  }
+  #slide-out-menu::-ms-scrollbar {
+    width: 0;
+    display: none;
+  }
+  #slide-out-menu::-ms-scrollbar-thumb {
+    background-color: transparent;
+  }
+  
+  #slide-out-menu.open {
+    translate: 0;
+  }
+  
+  #header-nav.out-of-view {
+    opacity: 0;
+    translate: 0 -100%;
+    transition: opacity 2000ms ease-in-out;
+    transition: translate 1000ms ease-in-out;
+  }
+  
+  #header-nav.in-view {
+    opacity: 1;
+    translate: 0 0;
+  }
+  
+  #toggle-search {
+    cursor: pointer;
+  }
+  
+  #header-search {
+    opacity: 0;
+    top: 0;
+    left: 0;
+    transition: opacity 0.4s, transform 0.6s;
+    transform: translateY(0); /* Adjust the initial translateY value as needed */
+  }
+  
+  #header-search.active {
+    opacity: 1;
+    transform: translateY(4.5rem);
+  }

src/scss/layout/_index.scss

@@ -0,0 +1,3 @@
+@forward '../layout/header';
+@forward '../layout/body';
+@forward '../layout/footer';

src/scss/pages/_front-page.scss

@@ -0,0 +1,8 @@
+#hero {
+    background-image: url("../images/bgs/hero-bg.jpeg");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: var(--gray-500);
+    background-blend-mode: multiply;
+  }

src/scss/pages/_index.scss

@@ -0,0 +1,2 @@
+@forward '../pages/front-page';
+@forward '../pages/template-pages';

src/scss/pages/_template-pages.scss

@@ -0,0 +1,7 @@
+.page-header {
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: var(--gray-500);
+    background-blend-mode: multiply;
+  }

src/scss/styles.scss

@@ -0,0 +1,6 @@
+@use 'abstracts';
+@use 'base';
+@use 'layout';
+@use 'pages';
+@use 'components';
+@use 'vendors';

src/scss/vendors/_index.scss

@@ -0,0 +1,4 @@
+// VENDORS FORWARD
+
+@forward '../vendors/wordpress';
+@forward '../vendors/tailwind/tailwind';

src/scss/vendors/_woocommerce.scss

@@ -0,0 +1,669 @@
+@use '../abstracts';a
+
+/* Woo Commerce */
+/* BLOCK UI/OVERLAY */
+.blockUI,
+.blockOverlay {
+  z-index: 45;
+}
+
+/* BUTTON */
+.woocommerce .add_to_cart_button.loading {
+  position: relative;
+}
+
+.woocommerce .add_to_cart_button.loading::after {
+  font-family: WooCommerce;
+  content: '\e01c';
+  vertical-align: top;
+  font-weight: 400;
+  position: absolute;
+  right: 1em;
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+}
+
+.woocommerce .add_to_cart_button.added::after {
+  font-family: WooCommerce;
+  content: '\e017';
+  margin-left: 0.53em;
+  vertical-align: bottom;
+}
+
+.woocommerce a.added_to_cart {
+  display: block;
+}
+
+/* GALLERY */
+.woocommerce .product .woocommerce-product-gallery {
+  position: relative;
+}
+
+.woocommerce .product .woocommerce-product-gallery__trigger {
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  font-size: 2em;
+  z-index: 9;
+  width: 36px;
+  height: 36px;
+  background: var(--white);
+  text-indent: -9999px;
+  border-radius: 100%;
+  box-sizing: content-box;
+}
+
+.woocommerce .product .woocommerce-product-gallery__trigger::before {
+  content: '';
+  display: block;
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--gray-900);
+  border-radius: 100%;
+  position: absolute;
+  top: 9px;
+  left: 9px;
+  box-sizing: content-box;
+}
+
+.woocommerce .product .woocommerce-product-gallery__trigger::after {
+  content: '';
+  display: block;
+  width: 2px;
+  height: 8px;
+  background: var(--gray-900);
+  border-radius: 6px;
+  position: absolute;
+  top: 19px;
+  left: 22px;
+  transform: rotate(-45deg);
+  box-sizing: content-box;
+}
+
+.woocommerce .product .flex-viewport {
+  margin-bottom: 10px;
+  border-radius: 0;
+  background-color: var(--gray-200);
+}
+
+.woocommerce .product .woocommerce-product-gallery__wrapper {
+  transition: all cubic-bezier(0.795, -0.035, 0, 1) 0.5s;
+  margin: 0;
+  padding: 0;
+}
+
+.woocommerce .product .woocommerce-product-gallery__wrapper .zoomImg {
+  background-color: var(--white);
+  opacity: 0;
+}
+
+.woocommerce div.product .woocommerce-product-gallery img {
+  display: block;
+  width: 100%;
+  height: auto;
+  box-shadow: none;
+  aspect-ratio: 4/3;
+  object-fit: contain;
+}
+
+.woocommerce .product .woocommerce-product-gallery__image:nth-child(1) {
+  background-color: var(--gray-200);
+}
+
+.woocommerce .product .woocommerce-product-gallery__image:nth-child(n + 2) {
+  width: 25%;
+  display: inline-block;
+}
+
+.woocommerce .product .woocommerce-product-gallery .flex-control-thumbs {
+  overflow: hidden;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  grid-auto-rows: auto;
+  grid-gap: 10px;
+}
+
+.woocommerce .product .woocommerce-product-gallery .flex-control-thumbs li {
+  list-style: none;
+}
+
+.woocommerce .product .woocommerce-product-gallery .flex-control-thumbs li img {
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity 0.2s;
+  border-radius: 0;
+}
+
+.woocommerce .product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
+.woocommerce .product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
+  opacity: 1;
+}
+
+@supports (object-fit: cover) {
+  .woocommerce .product .woocommerce-product-gallery .flex-control-thumbs li img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+/* NOTICE */
+
+.notice-success-content .button {
+  float: right;
+}
+
+.notice-success-content::after {
+  content: ' ';
+  clear: both;
+  display: block;
+}
+
+.woocommerce-notices-wrapper + p {
+  font-size: 20px;
+  font-weight: 500;
+  margin-bottom: 1rem;
+}
+
+/* PRODUCT STOCK COLOR */
+.woocommerce div.product .stock {
+  color: var(--green-800);
+}
+
+.woocommerce div.product .out-of-stock {
+  color: var(--red-500);
+}
+
+/* VARIATIONS TABLE ROW */
+.woocommerce div.product form.cart .variations tr {
+  display: flex;
+  align-items: center;
+}
+
+/* QUANTITY SELECT */
+.woocommerce .quantity .qty {
+  width: auto;
+  text-align: center;
+  margin-left: 0.5rem;
+}
+
+/* PRODUCT SECOND PARAGRAPH */
+.product p + p {
+  padding-bottom: 0.5rem;
+}
+
+/* WOOCOMMERCE MESSAGE */
+.woocommerce-message {
+  border-top-color: var(--primary-600);
+}
+
+.woocommerce-message::before {
+  content: '\e015';
+  color: var(--primary-600);
+}
+
+/* WOOCOMMERCE MAIN AND ALTERNATE INPUT BUTTON*/
+
+.woocommerce #respond input#submit,
+.woocommerce a.button,
+.woocommerce button.button,
+.woocommerce input.button {
+  text-align: center;
+  font-size: 100%;
+  margin: 0.5rem 0;
+  line-height: 1;
+  cursor: pointer;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  overflow: visible;
+  padding: 0.75rem 1.25rem;
+  font-weight: 400;
+  left: auto;
+  color: var(--white);
+  background-color: var(--primary-500);
+  border: 0;
+  display: inline-block;
+  background-image: none;
+  box-shadow: none;
+  text-shadow: none;
+  transition: all 600ms ease-in-out;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  border-radius: 0;
+}
+
+.woocommerce #respond input#submit.alt,
+.woocommerce a.button.alt,
+.woocommerce button.button.alt,
+.woocommerce input.button.alt {
+  text-align: center;
+  width: 100%;
+  font-size: 100%;
+  margin: 0.5rem 0;
+  line-height: 1;
+  cursor: pointer;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  overflow: visible;
+  padding: 0.75rem 1.25rem;
+  font-weight: 400;
+  left: auto;
+  color: var(--white);
+  background-color: var(--primary-500);
+  border: 0;
+  display: inline-block;
+  background-image: none;
+  box-shadow: none;
+  text-shadow: none;
+  transition: all 600ms ease-in-out;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  border-radius: 0;
+}
+
+.woocommerce #respond input#submit:hover,
+.woocommerce a.button:hover,
+.woocommerce button.button:hover,
+.woocommerce input.button:hover,
+.woocommerce #respond input#submit.alt:hover,
+.woocommerce a.button.alt:hover,
+.woocommerce button.button.alt:hover,
+.woocommerce input.button.alt:hover {
+  background-color: var(--gray-200);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-image: none;
+  color: var(--black);
+}
+
+/* WOOCOMMERCE INFO AND ERROR */
+.woocommerce-info {
+  border-top-color: var(--primary-600);
+}
+
+.woocommerce-info::before {
+  color: var(--primary-600);
+}
+
+.woocommerce-error,
+.woocommerce-info,
+.woocommerce-message {
+  background-color: var(--white);
+  color: var(--gray-900);
+  border-top: 3px solid var(--primary-600);
+  padding: 1em 2em 0 3.5em;
+  margin: 0 0 1.5em;
+}
+
+/* WOOCOMMERCE TERMS AND BILLING STYLES */
+.woocommerce-billing-fields__field-wrapper p label,
+.woocommerce-additional-fields__field-wrapper p label,
+.woocommerce-address-fields p label,
+.woocommerce-EditAccountForm p label,
+.woocommerce-MyAccount-content header {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.woocommerce-terms-and-conditions-wrapper {
+  padding-bottom: 16px;
+}
+
+.woocommerce-billing-fields__field-wrapper input,
+.edit-account input,
+.checkout_coupon input,
+.woocommerce-EditAccountForm input,
+.woocommerce-order,
+.woocommerce-account .woocommerce-MyAccount-content input,
+.learn-press-form .form-fields input {
+  background-color: var(--gray-100);
+}
+
+.woocommerce .col2-set .col-1,
+.woocommerce-page .col2-set .col-1,
+.u-column2 .col-2 .woocommerce-Address,
+.woocommerce .col2-set .col-2,
+.woocommerce-page .col2-set .col-2 {
+  padding: 1rem;
+  border: 1px solid var(--gray-300);
+}
+
+.woocommerce-Addresses {
+  margin-top: 1.5rem;
+}
+
+/* COUPON FIELD */
+.coupon {
+  display: flex;
+  align-items: baseline;
+}
+
+/* COUPON CODE */
+.coupon_code {
+  padding: 0.5rem;
+}
+
+/* SHOW COUPON SHOW LOGIN */
+.showcoupon,
+.showlogin {
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+/* SELECT CONTAINER */
+
+.select2-container--default .select2-results__option--highlighted[aria-selected],
+.select2-container--default .select2-results__option--highlighted[data-selected] {
+  background-color: var(--primary-600);
+  color: var(--white);
+}
+
+/* REMOVE LINK */
+
+.woocommerce a.remove {
+  color: var(--red-500) !important;
+  transition: color 300ms ease-in-out;
+}
+
+.woocommerce a.remove:hover {
+  color: var(--white) !important;
+  background-color: var(--red-500);
+}
+
+/* SHOP PAGE */
+
+/* ORDER BY */
+.woocommerce .woocommerce-ordering,
+.woocommerce-page .woocommerce-ordering {
+  float: initial !important;
+}
+
+.orderby {
+  min-width: 220px;
+}
+
+/* PRODUCT PAGE */
+/* Variation Select */
+.variations select {
+  min-width: 170px;
+}
+
+/* WooCommerce Quantity */
+.woocommerce .quantity .qty {
+  margin-left: 0px;
+}
+
+/* Review Starts */
+.woocommerce .star-rating,
+.stars {
+  color: #facc15;
+}
+
+.woocommerce p.stars a::before {
+  color: #facc15;
+}
+
+/* Review Title */
+.woocommerce-Reviews-title {
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  font-weight: 800;
+}
+
+/* Review Inputs */
+#commentform input[type='text'],
+#commentform input[type='email'] {
+  width: 100%;
+}
+
+/* CART STYLES */
+
+/* Quantity Field */
+.woocommerce td.product-quantity {
+  min-height: 2.5rem;
+}
+
+.woocommerce #content table.cart td.actions .input-text,
+.woocommerce table.cart td.actions .input-text,
+.woocommerce-page #content table.cart td.actions .input-text,
+.woocommerce-page table.cart td.actions .input-text {
+  width: 280px;
+}
+
+.cart_totals h2 {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+/* Calculate Shipping Fix */
+.woocommerce-shipping-calculator {
+  margin-right: 1.75rem;
+}
+
+/* CHECKOUT PAGE */
+
+#order_review_heading,
+.woocommerce-billing-fields h3,
+.woocommerce-additional-fields h3,
+.woocommerce-order-details__title {
+  font-size: 28px;
+  font-weight: 600;
+  margin: 2rem 0 1rem 0;
+  text-decoration: underline;
+}
+
+@media only screen and (max-width: 1023px) {
+  #order_review_heading {
+    padding-left: 1rem;
+  }
+}
+
+.checkout_coupon .form-row-last button {
+  margin: 0;
+}
+
+.checkout_coupon > p {
+  margin-bottom: 0.5rem;
+}
+
+/* Hide Product Price and Subtotal */
+
+th.product-price,
+td.product-price,
+th.product-subtotal,
+td.product-subtotal,
+th.product-total,
+td.product-total .woocommerce-Price-amount bdi,
+.woocommerce-checkout-review-order-table tfoot,
+tr.cart-subtotal bdi,
+tr.order-total bdi {
+  display: none;
+}
+
+/* ORDER COMMENTS */
+#order_comments_field #order_comments {
+  padding: 1rem;
+  height: 280px;
+  background-color: var(--gray-100);
+}
+
+/* Order Comments Sticky */
+
+#customer_details .col-2 {
+  position: sticky;
+  top: 2rem;
+}
+
+mark.order-number,
+mark.order-date,
+mark.order-status {
+  background-color: var(--white);
+  font-weight: 800;
+  text-decoration: underline;
+}
+
+.woocommerce-thankyou-order-received {
+  font-size: 24px;
+  font-weight: 900;
+  margin-bottom: 3rem;
+}
+
+#formInput4 {
+  padding: 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 5px;
+  border-color: var(--gray-900);
+}
+
+/* PAYMENT SECTION */
+.wc_payment_methods > .woocommerce-info {
+  padding-left: 1.5rem;
+}
+
+.wc_payment_methods > .woocommerce-info::before {
+  position: static;
+  margin-right: 1rem;
+}
+
+/* MY ACCOUNT NAVIGATION */
+.woocommerce-MyAccount-navigation li {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  display: flex;
+}
+
+.woocommerce-MyAccount-navigation li:hover {
+  text-decoration: underline;
+}
+
+.woocommerce-MyAccount-navigation ul li a {
+  padding: 1rem;
+  background-color: var(--gray-50);
+  color: var(--gray-900);
+  width: 100%;
+  box-shadow: 1px 1px 4px var(--gray-300);
+  text-decoration: none;
+}
+
+/* MY ACCOUNT FORMS */
+.woocommerce-order,
+.woocommerce-MyAccount-content,
+.learn-press-form .form-fields {
+  padding: 1.5rem 1.5rem 3rem !important;
+  border-style: solid;
+  border-color: var(--gray-300);
+  border-width: 1px;
+  border-radius: 0.5rem;
+}
+
+// Billing Address
+.woocommerce-MyAccount-content form h3 {
+  text-decoration: underline;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+/*
+.woocommerce-MyAccount-content div + p + p {
+  max-width: 620px;
+}
+
+.woocommerce-MyAccount-content p a {
+  text-decoration: underline;
+}
+
+.woocommerce-MyAccount-content div + p a {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.woocommerce-column__title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.woocommerce table.my_account_orders .button {
+  margin-left: 0.25rem;
+  border-radius: 0.375rem;
+} */
+
+/* WOOCOMMERCE H2 */
+.woocommerce div + h2 {
+  font-size: 2rem;
+  font-weight: 700;
+  text-align: center;
+  margin: 1rem 0;
+}
+
+/* REGISTER AND LOGIN */
+.woocommerce form.login,
+.woocommerce form.register {
+  border: 1px solid var(--gray-300);
+  padding: 3rem 2.5rem;
+  margin: auto;
+  text-align: left;
+  border-radius: 0.25rem;
+  max-width: 500px;
+  font-weight: 600;
+  margin-bottom: 2rem;
+}
+
+.login .form-row {
+  display: flex;
+  flex-direction: column;
+}
+
+.woocommerce-form-login__submit {
+  width: 100%;
+  margin-top: 1rem;
+  border-radius: 0.25rem;
+}
+
+/* Logout Confirm */
+.woocommerce-MyAccount-content .woocommerce-notices-wrapper .woocommerce-message a {
+  font-weight: 600;
+  text-decoration: underline;
+  font-size: 1rem;
+}
+
+.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
+  display: flex;
+  align-items: center;
+}
+
+.woocommerce-form__input-checkbox {
+  margin-right: 0.5rem;
+}
+
+.woocommerce-form-login-toggle + form .form-row-first,
+.woocommerce-form-login-toggle + form .form-row-last {
+  display: contents;
+}
+
+.woocommerce-form-login-toggle + form p:first-child {
+  font-weight: 200;
+}
+
+.lost_password {
+  margin-top: 0.75rem;
+}
+
+.woocommerce-form-register__submit {
+  width: 100%;
+}
+
+/* WOOCOMMERCE CHECKBOX */
+.woocommerce form .form-row .input-checkbox {
+  appearance: auto;
+}
+/* MEDIA QUERIES */
+
+/* End WooCommerce */

src/scss/vendors/_wordpress.scss

@@ -0,0 +1,174 @@
+@use '../abstracts';
+
+/* Login Page */
+#login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+}
+
+.login #nav {
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.login #nav a,
+.login #backtoblog a {
+  color: white;
+}
+
+.login #backtoblog a:hover,
+.login #nav a:hover,
+.login h1 a:hover {
+  color: var(--primary-200);
+}
+
+.login .button.wp-hide-pw {
+  color: var(--black);
+}
+
+.login .button.wp-hide-pw:hover {
+  color: var(--primary-500);
+}
+
+.login .button.wp-hide-pw:focus {
+  background: 0 0;
+  border-color: var(--primary-900);
+  box-shadow: 0 0 0 1px;
+  outline: 2px solid transparent;
+}
+
+#login h1 a,
+.login h1 a {
+  // background-image: url('');
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 300px;
+  width: 300px;
+  height: 84px;
+  margin: 0px 0px 0.5rem;
+}
+
+.login form {
+  border-radius: 8px;
+}
+
+.login .message {
+  border-left: 8px solid var(--primary-500);
+}
+
+/* Customize Login Screen */
+body.login .button-primary {
+  font-size: 100%;
+  width: 100%;
+  margin: 0.5rem 0 0;
+  line-height: 1;
+  cursor: pointer;
+  position: relative;
+  text-decoration: none;
+  overflow: visible;
+  padding: 0.75rem 1.25rem;
+  font-weight: 400;
+  left: auto;
+  color: white;
+  background-color: var(--primary-500);
+  border: 0;
+  display: inline-block;
+  background-image: none;
+  box-shadow: none;
+  text-shadow: none;
+  border-radius: 0.375rem;
+  transition: all 600ms ease-in-out;
+}
+
+body.login .button-primary:active,
+body.login .button-primary:focus,
+body.login .button-primary:hover {
+  background-color: var(--primary-800);
+}
+
+body.login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+  background-position: center center;
+  // background-image: url('');
+  background-color: var(--gray-500);
+  background-blend-mode: multiply;
+}
+
+.login-action-confirm_admin_email #login {
+  margin-top: auto;
+}
+
+// Language switcher
+.login .language-switcher .button {
+  margin-top: 1rem;
+}
+
+/* Apply bold font weight and underline text decoration to active page link */
+.current-menu-item > a,
+.current-menu-ancestor > a {
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+/* Add caret icon after menu items with submenus */
+.menu-item-has-children > a:after {
+  content: '\f229'; /* Unicode for the caret down icon in Bootstrap */
+  font-family: 'bootstrap-icons'; /* Font family for Bootstrap icons */
+  font-weight: 400; /* Adjust the weight as necessary */
+  margin-left: 5px; /* Adjust the spacing between text and icon */
+  color: #000; /* Change the color as needed */
+  font-size: 12px; /* Adjust the size as needed */
+}
+
+/* Hide sub-menu items by default */
+.sub-menu {
+  width: max-content;
+  display: none;
+  position: absolute;
+  background-color: #fff; /* Background color for the dropdown */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for the dropdown */
+  z-index: 1000; /* Ensure dropdown appears above other elements */
+  color: #000;
+}
+
+.sub-menu .sub-menu {
+  position: absolute;
+  left: 100%;
+  top: 0;
+}
+
+/* Make sub-menu items focusable */
+.sub-menu a {
+  display: block;
+}
+
+/* Show sub-menu items on focus */
+.menu-item-has-children:focus-within > .sub-menu {
+  display: block;
+}
+
+/* Show sub-menu items on hover */
+.menu-item-has-children:hover > .sub-menu {
+  display: block;
+}
+
+/* Style dropdown items */
+.sub-menu li {
+  display: block;
+  padding: 0.5rem 1.5rem; /* Adjust padding as needed */
+}
+
+/* Add hover and focus-within effect on dropdown items */
+.sub-menu li:hover,
+.sub-menu li:focus-within {
+  background-color: var(--primary-500); /* Background color on hover */
+  color: white;
+}
+
+// Sub Menu Childrem

src/scss/vendors/tailwind/_source.scss

@@ -0,0 +1,50 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Arvo Bold */
+@font-face {
+  font-family: 'arvo-bold';
+  src: url('../assets/fonts/Arvo/Arvo-Bold.ttf');
+}
+
+/* Libre Baskerville Regular */
+@font-face {
+  font-family: 'libre-baskerville';
+  src: url('../assets/fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf');
+}
+
+/* Open Sans Medium */
+@font-face {
+  font-family: 'open-sans';
+  src: url('../assets/fonts/Open_Sans/OpenSans-Medium.ttf');
+}
+
+/* Roboto Light */
+@font-face {
+  font-family: 'roboto-light';
+  src: url('../assets/fonts/Roboto/Roboto-Light.ttf');
+}
+
+/* Roboto Medium */
+@font-face {
+  font-family: 'roboto-medium';
+  src: url('../assets/fonts/Roboto/Roboto-Medium.ttf');
+}
+
+body,
+html {
+  min-height: 100vh;
+}
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}