@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/src/assets/css/base.css

@@ -1,242 +1,242 @@
-/* Outfit Thin (Weight 100) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-Thin.ttf') format('truetype');
-  font-weight: 100;
-  font-style: normal;
-}
-
-/* Outfit ExtraLight (Weight 200) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-ExtraLight.ttf') format('truetype');
-  font-weight: 200;
-  font-style: normal;
-}
-
-/* Outfit Light (Weight 300) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
-}
-
-/* Outfit Regular (Weight 400) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-
-/* Outfit Medium (Weight 500) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
-}
-
-/* Outfit SemiBold (Weight 600) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
-}
-
-/* Outfit Bold (Weight 700) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-style: normal;
-}
-
-/* Outfit ExtraBold (Weight 800) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-ExtraBold.ttf') format('truetype');
-  font-weight: 800;
-  font-style: normal;
-}
-
-/* Outfit Black (Weight 900) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-Black.ttf') format('truetype');
-  font-weight: 900;
-  font-style: normal;
-}
-
-body {
-  background: var(--Dental-Light-Blue--3);
-  font-family: Outfit;
-}
-
-/* Base Heading Styles */
-h1 {
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-  color: var(--h1-color, var(--primary-color));
-  font-size: 65px;
-  line-height: normal;
-}
-
-h2 {
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-  color: var(--h2-color, var(--primary-color));
-  font-size: 32px;
-}
-
-h3 {
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-  color: var(--h3-color, var(--primary-color));
-  font-size: 16px;
-}
-
-h4 {
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-  color: var(--h4-color, var(--primary-color));
-  font-size: 16px;
-}
-
-h5 {
-  font-style: normal;
-  font-weight: 600;
-  line-height: 105%;
-  color: var(--h5-color, var(--primary-color));
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.24px;
-}
-
-h6 {
-  font-style: normal;
-  font-weight: 600;
-  line-height: 105%;
-  color: var(--h6-color, var(--primary-color));
-  font-size: 11px;
-  letter-spacing: 0.22px;
-}
-
-/* Base Paragraph Styles */
-p,
-.p-medium,
-.p-small,
-.p-large,
-.p-regular {
-  font-style: normal;
-  font-weight: 300;
-  line-height: 120%;
-  color: var(--p-color, var(--primary-color));
-}
-
-.p-medium {
-  font-size: 14px;
-  letter-spacing: 0.42px;
-}
-
-.p-small {
-  font-size: 11px;
-  letter-spacing: 0.22px;
-}
-
-.p-large {
-  font-size: 18px;
-  letter-spacing: 0.9px;
-}
-
-.p-regular {
-  font-size: 12px;
-  letter-spacing: 0.24px;
-}
-
-/* Responsive Media Queries */
-
-/* Tablet Styles (768px to 1200px) */
-@media (min-width: 768px) {
-  /* Headings */
-  h1 {
-    font-size: 45px;
-    line-height: 120%; /* 54px */
-    letter-spacing: -0.9px;
-  }
-
-  h2 {
-    font-size: 32px;
-    letter-spacing: -0.64px;
-  }
-
-  h3 {
-    font-size: 18px;
-    line-height: 120%; /* 21.6px */
-  }
-
-  /* Paragraphs */
-  .p-large {
-    font-size: 18px;
-    letter-spacing: 0.9px;
-  }
-}
-
-/* Mobile Styles (up to 767px) */
-@media (max-width: 767px) {
-  /* Headings */
-  h1 {
-    font-size: 45px;
-    line-height: 120%; /* 54px */
-    letter-spacing: -0.9px;
-  }
-
-  h2 {
-    font-size: 25px;
-    line-height: 120%; /* 30px */
-    letter-spacing: -0.5px;
-  }
-
-  h3 {
-    font-size: 16px;
-    line-height: 120%; /* 19.2px */
-  }
-
-  /* Paragraphs */
-  .p-large {
-    font-size: 16px;
-    line-height: 120%; /* 19.2px */
-  }
-}
-
-/* Large Screens (1200px and above) */
-@media (min-width: 1200px) {
-  /* Headings */
-  h1 {
-    font-size: 65px;
-    line-height: 120%; /* 78px */
-    letter-spacing: -1.3px;
-  }
-
-  h2 {
-    font-size: 32px;
-    line-height: 120%; /* 38.4px */
-  }
-
-  h3 {
-    font-size: 20px;
-    line-height: 120%; /* 24px */
-  }
-
-  /* Paragraphs */
-  .p-large {
-    font-size: 20px;
-    letter-spacing: 1px;
-  }
-}
+/* Outfit Thin (Weight 100) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+/* Outfit ExtraLight (Weight 200) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+/* Outfit Light (Weight 300) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+/* Outfit Regular (Weight 400) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+/* Outfit Medium (Weight 500) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+/* Outfit SemiBold (Weight 600) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+/* Outfit Bold (Weight 700) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+/* Outfit ExtraBold (Weight 800) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+}
+
+/* Outfit Black (Weight 900) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}
+
+body {
+  background: var(--Dental-Light-Blue--3);
+  font-family: Outfit;
+}
+
+/* Base Heading Styles */
+h1 {
+  font-style: normal;
+  font-weight: 600;
+  line-height: 120%;
+  color: var(--h1-color, var(--primary-color));
+  font-size: 65px;
+  line-height: normal;
+}
+
+h2 {
+  font-style: normal;
+  font-weight: 600;
+  line-height: 120%;
+  color: var(--h2-color, var(--primary-color));
+  font-size: 32px;
+}
+
+h3 {
+  font-style: normal;
+  font-weight: 600;
+  line-height: 120%;
+  color: var(--h3-color, var(--primary-color));
+  font-size: 16px;
+}
+
+h4 {
+  font-style: normal;
+  font-weight: 600;
+  line-height: 120%;
+  color: var(--h4-color, var(--primary-color));
+  font-size: 16px;
+}
+
+h5 {
+  font-style: normal;
+  font-weight: 600;
+  line-height: 105%;
+  color: var(--h5-color, var(--primary-color));
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.24px;
+}
+
+h6 {
+  font-style: normal;
+  font-weight: 600;
+  line-height: 105%;
+  color: var(--h6-color, var(--primary-color));
+  font-size: 11px;
+  letter-spacing: 0.22px;
+}
+
+/* Base Paragraph Styles */
+p,
+.p-medium,
+.p-small,
+.p-large,
+.p-regular {
+  font-style: normal;
+  font-weight: 300;
+  line-height: 120%;
+  color: var(--p-color, var(--primary-color));
+}
+
+.p-medium {
+  font-size: 14px;
+  letter-spacing: 0.42px;
+}
+
+.p-small {
+  font-size: 11px;
+  letter-spacing: 0.22px;
+}
+
+.p-large {
+  font-size: 18px;
+  letter-spacing: 0.9px;
+}
+
+.p-regular {
+  font-size: 12px;
+  letter-spacing: 0.24px;
+}
+
+/* Responsive Media Queries */
+
+/* Tablet Styles (768px to 1200px) */
+@media (min-width: 768px) {
+  /* Headings */
+  h1 {
+    font-size: 45px;
+    line-height: 120%; /* 54px */
+    letter-spacing: -0.9px;
+  }
+
+  h2 {
+    font-size: 32px;
+    letter-spacing: -0.64px;
+  }
+
+  h3 {
+    font-size: 18px;
+    line-height: 120%; /* 21.6px */
+  }
+
+  /* Paragraphs */
+  .p-large {
+    font-size: 18px;
+    letter-spacing: 0.9px;
+  }
+}
+
+/* Mobile Styles (up to 767px) */
+@media (max-width: 767px) {
+  /* Headings */
+  h1 {
+    font-size: 45px;
+    line-height: 120%; /* 54px */
+    letter-spacing: -0.9px;
+  }
+
+  h2 {
+    font-size: 25px;
+    line-height: 120%; /* 30px */
+    letter-spacing: -0.5px;
+  }
+
+  h3 {
+    font-size: 16px;
+    line-height: 120%; /* 19.2px */
+  }
+
+  /* Paragraphs */
+  .p-large {
+    font-size: 16px;
+    line-height: 120%; /* 19.2px */
+  }
+}
+
+/* Large Screens (1200px and above) */
+@media (min-width: 1200px) {
+  /* Headings */
+  h1 {
+    font-size: 65px;
+    line-height: 120%; /* 78px */
+    letter-spacing: -1.3px;
+  }
+
+  h2 {
+    font-size: 32px;
+    line-height: 120%; /* 38.4px */
+  }
+
+  h3 {
+    font-size: 20px;
+    line-height: 120%; /* 24px */
+  }
+
+  /* Paragraphs */
+  .p-large {
+    font-size: 20px;
+    letter-spacing: 1px;
+  }
+}