@digital-b2c/coreui-kit 0.2.1 → 0.3.0

package/dist/index.css

@@ -1,3 +1,183 @@
+/* src/styles/index.scss */
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html {
+  font-size: 16px;
+  color-scheme: light dark;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+:root {
+  --color-white: #ffffff;
+  --color-black: #080808;
+  --color-gray: #4d4d4d;
+  --color-light-gray: #cec3c3;
+  --color-link: #0035ba;
+  --color-darkerbg: #f1f1f1;
+  --color-gradient-black:
+    radial-gradient(
+      98.36% 208.67% at 2.71% 100%,
+      #000000 0%,
+      #171717 57.8%,
+      #1a1a1a 99.99%);
+  --color-gradient-graytowhite:
+    linear-gradient(
+      360deg,
+      #ffffff 0%,
+      #f3f3f3 100%);
+  --color-gradient-white:
+    linear-gradient(
+      89.48deg,
+      rgba(255, 255, 255, 0.25) -2.75%,
+      rgba(153, 153, 153, 0) 187.82%),
+    linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 0));
+  --color-lenscrafter-blue: #192c50;
+  --color-lenscrafter-desctext: #475673;
+  --color-foreyes-brown: #ad634a;
+  --color-foreyes-icontext: #a52e0d;
+  --color-foreyes-desctext: #884634;
+  --color-targetoptical-red: #d71b32;
+  --color-targetoptical-icontext: #65131d;
+  --color-targetoptical-desctext: #84424a;
+  --color-pearlevision-green: #5c9541;
+  --color-pearlevision-icontext: #19300e;
+  --color-pearlevision-desctext: #47593e;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 2.5rem;
+  --spacing-3xl: 3rem;
+  --spacing-4xl: 3.5rem;
+  --spacing-5xl: 4rem;
+  --spacing-6xl: 4.5rem;
+  --spacing-7xl: 5rem;
+  --font-family-primary: Instrument Sans, sans-serif;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 600;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 2rem;
+  --font-size-3xl: 2.25rem;
+  --font-size-4xl: 2.5rem;
+  --line-height-normal: 1.5;
+  --line-height-tight-1: 1.4;
+  --line-height-tight-2: 1.33;
+  --line-height-tight-3: 1.25;
+  --line-height-tight-4: 1.2;
+  --line-height-tight-5: 1.17;
+}
+@font-face {
+  font-family: "Instrument Sans";
+  font-weight: 400 700;
+  font-style: normal;
+  font-display: swap;
+  src: url("./instrument-sans-VYC4K7BH.woff2") format("woff2");
+}
+html,
+body {
+  font-family: "Instrument Sans", sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5;
+  color: #4d4d4d;
+}
+h1,
+.h1 {
+  font-size: 2.5rem;
+  font-weight: 600;
+  line-height: 1.17;
+}
+@media (max-width: 768px) {
+  h1,
+  .h1 {
+    font-size: 2rem;
+  }
+}
+h2,
+.h2 {
+  font-size: 2.25rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+@media (max-width: 768px) {
+  h2,
+  .h2 {
+    font-size: 1.5rem;
+  }
+}
+h3,
+.h3 {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+@media (max-width: 768px) {
+  h3,
+  .h3 {
+    font-size: 1.25rem;
+  }
+}
+h4,
+.h4 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.33;
+}
+@media (max-width: 768px) {
+  h4,
+  .h4 {
+    font-size: 18px;
+  }
+}
+.subheading {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+@media (max-width: 768px) {
+  .subheading {
+    font-size: 18px;
+  }
+}
+p,
+.body {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5;
+}
+small,
+.small {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.5;
+}
+.smallest {
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.5;
+}
+a {
+  color: var(--color-link);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
 /* src/components/Picture/Picture.module.scss */
 .Picture_module_image-desktop {
   display: block;
@@ -364,6 +544,7 @@
 .InfoCard_module_info-card .InfoCard_module_header {
   display: flex;
   flex-direction: row;
+  align-items: center;
   gap: var(--spacing-md);
   color: var(--color-black);
 }
@@ -434,10 +615,16 @@
 /* src/components/primitives/Container/Container.module.scss */
 .Container_module_container {
   width: 100%;
-  max-width: 1280px;
+  max-width: 1312px;
   overflow: visible;
   margin: 0 auto;
   position: relative;
+  padding: var(--spacing-3xl) var(--spacing-md);
+}
+@media (max-width: 768px) {
+  .Container_module_container {
+    padding: var(--spacing-lg) var(--spacing-md);
+  }
 }
 
 /* src/components/PracticeCard/PracticeCard.module.scss */
@@ -527,7 +714,7 @@
 .CardCollection_module_card-collection {
   display: block;
   width: 100%;
-  padding: var(--spacing-3xl) var(--spacing-7xl);
+  background-color: var(--color-white);
 }
 .CardCollection_module_card-collection h2 {
   color: var(--color-black);
@@ -561,9 +748,50 @@
 
 /* src/widgets/ContactModule/ContactModule.module.scss */
 .ContactModule_module_contact-module {
-  width: 100%;
   display: block;
+  width: 100%;
+  background-color: var(--color-white);
   padding-top: 96px;
+  position: relative;
+}
+.ContactModule_module_contact-module .ContactModule_module_blur {
+  z-index: 2;
+  opacity: 1;
+  transition: opacity 0.2s ease;
+  position: absolute;
+  inset: 0;
+  backdrop-filter: blur(4px);
+  mask-image:
+    radial-gradient(
+      ellipse at 50% 90%,
+      rgb(0, 0, 0) 50%,
+      rgba(0, 0, 0, 0) 100%);
+  -webkit-mask-image:
+    radial-gradient(
+      ellipse at 50% 90%,
+      rgb(0, 0, 0) 50%,
+      rgba(0, 0, 0, 0) 100%);
+}
+.ContactModule_module_contact-module .ContactModule_module_blur--hidden {
+  opacity: 0;
+}
+@media (max-width: 768px) {
+  .ContactModule_module_contact-module .ContactModule_module_blur {
+    mask-image:
+      radial-gradient(
+        circle at 50% 12%,
+        rgba(0, 0, 0, 0) 0%,
+        rgb(0, 0, 0) 25%);
+    -webkit-mask-image:
+      radial-gradient(
+        circle at 50% 12%,
+        rgba(0, 0, 0, 0) 0%,
+        rgb(0, 0, 0) 25%);
+  }
+}
+.ContactModule_module_contact-module .ContactModule_module_container {
+  padding: 0;
+  z-index: 1;
 }
 .ContactModule_module_contact-module .ContactModule_module_container,
 .ContactModule_module_contact-module .ContactModule_module_wrapper,
@@ -608,6 +836,9 @@
     max-width: 75%;
   }
 }
+.ContactModule_module_contact-module .ContactModule_module_subtitle {
+  max-width: 500px;
+}
 @media (max-width: 768px) {
   .ContactModule_module_contact-module .ContactModule_module_image {
     max-width: 80%;
@@ -755,6 +986,7 @@
 
 /* src/widgets/MiniBanner/MiniBanner.module.scss */
 .MiniBanner_module_minibanner {
+  display: block;
   width: 100%;
   background-color: #f3f3f3;
   min-height: 192px;
@@ -780,13 +1012,10 @@
   align-items: center;
   justify-content: center;
   gap: var(--spacing-lg);
-  padding: var(--spacing-3xl) 0;
   z-index: 2;
 }
-@media (max-width: 768px) {
-  .MiniBanner_module_minibanner .MiniBanner_module_container {
-    padding: var(--spacing-3xl) var(--spacing-md);
-  }
+.MiniBanner_module_minibanner .MiniBanner_module_container * {
+  max-width: 100%;
 }
 .MiniBanner_module_minibanner.MiniBanner_module_miniBannerNoBG {
   color: var(--color-black);
@@ -803,14 +1032,22 @@
 
 /* src/widgets/MiniSectionCta/MiniSectionCta.module.scss */
 .MiniSectionCta_module_miniSectionCta {
+  display: block;
   width: 100%;
+  background-color: var(--color-white);
 }
-.MiniSectionCta_module_miniSectionCta .MiniSectionCta_module_container {
+.MiniSectionCta_module_miniSectionCta .MiniSectionCta_module_wrapper {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   gap: var(--spacing-md);
-  padding: var(--spacing-3xl) var(--spacing-7xl);
+  padding: 0;
+}
+@media (max-width: 768px) {
+  .MiniSectionCta_module_miniSectionCta .MiniSectionCta_module_wrapper {
+    flex-direction: column;
+    padding: var(--spacing-lg) var(--spacing-md);
+  }
 }
 .MiniSectionCta_module_miniSectionCta .MiniSectionCta_module_col {
   display: flex;
@@ -821,7 +1058,7 @@
   color: var(--color-black);
 }
 .MiniSectionCta_module_miniSectionCta.MiniSectionCta_module_BgColorBlack {
-  background: var(--color-black);
+  background-color: var(--color-black);
   color: var(--color-white);
 }
 .MiniSectionCta_module_miniSectionCta.MiniSectionCta_module_BgColorBlack h2 {
@@ -830,6 +1067,11 @@
 .MiniSectionCta_module_miniSectionCta.MiniSectionCta_module_BgColorBlack .subheading {
   color: #cecece;
 }
+@media (max-width: 768px) {
+  .MiniSectionCta_module_miniSectionCta.MiniSectionCta_module_BgColorBlack {
+    text-align: center;
+  }
+}
 .MiniSectionCta_module_miniSectionCta.MiniSectionCta_module_infoCallout .MiniSectionCta_module_col {
   flex-direction: row;
   gap: 112px;
@@ -838,24 +1080,7 @@
 .MiniSectionCta_module_miniSectionCta.MiniSectionCta_module_infoCallout h2 {
   min-width: fit-content;
 }
-.MiniSectionCta_module_miniSectionCta.MiniSectionCta_module_miniTextCenterCta .MiniSectionCta_module_container {
-  flex-direction: column;
-  align-items: center;
-}
 @media (max-width: 768px) {
-  .MiniSectionCta_module_miniSectionCta .MiniSectionCta_module_container {
-    flex-direction: column;
-    padding: var(--spacing-lg) var(--spacing-md);
-  }
-  .MiniSectionCta_module_miniSectionCta .MiniSectionCta_module_cta {
-    width: 100%;
-  }
-  .MiniSectionCta_module_miniSectionCta.MiniSectionCta_module_BgColorBlack {
-    text-align: center;
-  }
-  .MiniSectionCta_module_miniSectionCta.MiniSectionCta_module_BgColorGrey {
-    text-align: center;
-  }
   .MiniSectionCta_module_miniSectionCta.MiniSectionCta_module_infoCallout .MiniSectionCta_module_col {
     flex-direction: column;
     gap: var(--spacing-md);
@@ -866,6 +1091,18 @@
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-tight-1);
   }
+}
+.MiniSectionCta_module_miniSectionCta.MiniSectionCta_module_miniTextCenterCta .MiniSectionCta_module_wrapper {
+  flex-direction: column;
+  align-items: center;
+}
+@media (max-width: 768px) {
+  .MiniSectionCta_module_miniSectionCta .MiniSectionCta_module_cta {
+    width: 100%;
+  }
+  .MiniSectionCta_module_miniSectionCta.MiniSectionCta_module_BgColorGrey {
+    text-align: center;
+  }
   .MiniSectionCta_module_miniSectionCta.MiniSectionCta_module_miniTextCenterCta .MiniSectionCta_module_col {
     width: 100%;
   }
@@ -875,12 +1112,7 @@
 .PracticePathCards_module_practice-path-cards {
   display: block;
   width: 100%;
-  padding: var(--spacing-3xl) 0;
-}
-@media (max-width: 768px) {
-  .PracticePathCards_module_practice-path-cards {
-    padding: var(--spacing-lg) var(--spacing-md);
-  }
+  background-color: var(--color-white);
 }
 .PracticePathCards_module_practice-path-cards h2 {
   color: var(--color-black);
@@ -936,7 +1168,9 @@
 
 /* src/widgets/Teaser5050With3Text/Teaser5050With3Text.module.scss */
 .Teaser5050With3Text_module_teaser5050-3text {
+  display: block;
   width: 100%;
+  background-color: var(--color-white);
 }
 .Teaser5050With3Text_module_teaser5050-3text .Teaser5050With3Text_module_container {
   display: flex;
@@ -983,7 +1217,9 @@
 
 /* src/widgets/Teaser5050WithCta/Teaser5050WithCta.module.scss */
 .Teaser5050WithCta_module_teaser5050 {
+  display: block;
   width: 100%;
+  background-color: var(--color-white);
 }
 .Teaser5050WithCta_module_teaser5050 .Teaser5050WithCta_module_container {
   display: flex;