sempli-website-lib 5.2.1 → 5.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sempli-website-lib",
-  "version": "5.2.1",
+  "version": "5.2.4",
   "peerDependencies": {
     "@angular/common": "~13.3.4",
     "@angular/core": "~13.3.4",

package/styles/master-app.scss

@@ -12003,7 +12003,7 @@ $breakPoints: (
 .container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 10px;
+  padding: 20px 10px;
 
   @include responsive($breakpoint-medium) {
     padding: 0 20px;
@@ -12033,6 +12033,7 @@ $breakPoints: (
     justify-items: center;
     justify-content: center;
     align-items: center;
+    padding: 20px;
 
     &.reverse {
       .content-box-col {

package/styles/master-landing.scss

@@ -12003,7 +12003,7 @@ $breakPoints: (
 .container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 10px;
+  padding: 20px 10px;
 
   @include responsive($breakpoint-medium) {
     padding: 0 20px;
@@ -12033,6 +12033,7 @@ $breakPoints: (
     justify-items: center;
     justify-content: center;
     align-items: center;
+    padding: 20px;
 
     &.reverse {
       .content-box-col {
@@ -15838,6 +15839,14 @@ span.results-table-item-value {
   box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
   opacity: 0.9;
 
+  @include responsive-max($breakpoint-xlarge) {
+    margin-right: 40px;
+  }
+
+  @include responsive-max($breakpoint-xmedium) {
+    display: none;
+  }
+
   header {
     margin: 0 0 20px;
 
@@ -15900,9 +15909,9 @@ section.hero-wrapper {
     padding: 100px 0;
   }
 
-  @include responsive($breakpoint-xmedium) {
-    padding: 200px 0;
-  }
+  // @include responsive($breakpoint-xmedium) {
+  //   padding: 200px 0;
+  // }
 
   // Compact Layout Option
   &.compact {
@@ -16030,6 +16039,9 @@ section.hero-wrapper {
 // SECTION SPECIFIC HERO WRAPPERS
 .webp body#landing section.hero-wrapper {
   &.home.index {
+    background: url("/assets/swl/interface/sempli-home-new.webp") no-repeat 100% 0%;
+    background-size: cover;
+
     @include responsive($breakpoint-xmedium) {
       background: url("/assets/swl/interface/sempli-home-new.webp") no-repeat 50%;
       background-size: cover;
@@ -16166,6 +16178,21 @@ section.hero-wrapper {
     }
   }
 
+  &.sempli-how,
+  &.sempli-comfama {
+    @include responsive($breakpoint-large) {
+      background: url("/assets/swl/interface/illustration-10.webp") no-repeat 110% 50%;
+      @include background-retina("/assets/swl/interface/illustration-10.webp", 400px, 370px);
+      background-size: auto 450px;
+      margin-bottom: 40px;
+    }
+
+    @include responsive($breakpoint-xlarge) {
+      background-position: 90% 60%;
+      background-size: auto 500px;
+    }
+  }
+
   // Confirmación de Email
   &.email-confirmation.index,
   &.legal-authorization.index,
@@ -16225,6 +16252,9 @@ section.hero-wrapper {
 
 .no-webp body#landing section.hero-wrapper {
   &.home.index {
+    background: url("/assets/swl/interface/sempli-home-new.jpg") no-repeat 100% 0%;
+    background-size: cover;
+
     @include responsive($breakpoint-xmedium) {
       background: url("/assets/swl/interface/sempli-home-new.jpg") no-repeat 50%;
       background-size: cover;
@@ -16362,6 +16392,21 @@ section.hero-wrapper {
     }
   }
 
+  &.sempli-how,
+  &.sempli-comfama {
+    @include responsive($breakpoint-large) {
+      background: url("/assets/swl/interface/illustration-10.png") no-repeat 110% 50%;
+      @include background-retina("/assets/swl/interface/illustration-10.webp", 400px, 370px);
+      background-size: auto 450px;
+      margin-bottom: 40px;
+    }
+
+    @include responsive($breakpoint-xlarge) {
+      background-position: 90% 60%;
+      background-size: auto 500px;
+    }
+  }
+
   // Confirmación de Email
   &.email-confirmation.index,
   &.legal-authorization.index,

package/styles/partials/_layout.scss

@@ -91,7 +91,7 @@ $breakPoints: (
 .container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 10px;
+  padding: 20px 10px;
 
   @include responsive($breakpoint-medium) {
     padding: 0 20px;
@@ -121,6 +121,7 @@ $breakPoints: (
     justify-items: center;
     justify-content: center;
     align-items: center;
+    padding: 20px;
 
     &.reverse {
       .content-box-col {

package/styles/partials/landing/_general.scss

@@ -1328,6 +1328,14 @@ span.results-table-item-value {
   box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
   opacity: 0.9;
 
+  @include responsive-max($breakpoint-xlarge) {
+    margin-right: 40px;
+  }
+
+  @include responsive-max($breakpoint-xmedium) {
+    display: none;
+  }
+
   header {
     margin: 0 0 20px;
 

package/styles/partials/landing/_hero-wrappers.scss

@@ -12,9 +12,9 @@ section.hero-wrapper {
     padding: 100px 0;
   }
 
-  @include responsive($breakpoint-xmedium) {
-    padding: 200px 0;
-  }
+  // @include responsive($breakpoint-xmedium) {
+  //   padding: 200px 0;
+  // }
 
   // Compact Layout Option
   &.compact {
@@ -142,6 +142,9 @@ section.hero-wrapper {
 // SECTION SPECIFIC HERO WRAPPERS
 .webp body#landing section.hero-wrapper {
   &.home.index {
+    background: url("/assets/swl/interface/sempli-home-new.webp") no-repeat 100% 0%;
+    background-size: cover;
+
     @include responsive($breakpoint-xmedium) {
       background: url("/assets/swl/interface/sempli-home-new.webp") no-repeat 50%;
       background-size: cover;
@@ -278,6 +281,21 @@ section.hero-wrapper {
     }
   }
 
+  &.sempli-how,
+  &.sempli-comfama {
+    @include responsive($breakpoint-large) {
+      background: url("/assets/swl/interface/illustration-10.webp") no-repeat 110% 50%;
+      @include background-retina("/assets/swl/interface/illustration-10.webp", 400px, 370px);
+      background-size: auto 450px;
+      margin-bottom: 40px;
+    }
+
+    @include responsive($breakpoint-xlarge) {
+      background-position: 90% 60%;
+      background-size: auto 500px;
+    }
+  }
+
   // Confirmación de Email
   &.email-confirmation.index,
   &.legal-authorization.index,
@@ -337,6 +355,9 @@ section.hero-wrapper {
 
 .no-webp body#landing section.hero-wrapper {
   &.home.index {
+    background: url("/assets/swl/interface/sempli-home-new.jpg") no-repeat 100% 0%;
+    background-size: cover;
+
     @include responsive($breakpoint-xmedium) {
       background: url("/assets/swl/interface/sempli-home-new.jpg") no-repeat 50%;
       background-size: cover;
@@ -474,6 +495,21 @@ section.hero-wrapper {
     }
   }
 
+  &.sempli-how,
+  &.sempli-comfama {
+    @include responsive($breakpoint-large) {
+      background: url("/assets/swl/interface/illustration-10.png") no-repeat 110% 50%;
+      @include background-retina("/assets/swl/interface/illustration-10.webp", 400px, 370px);
+      background-size: auto 450px;
+      margin-bottom: 40px;
+    }
+
+    @include responsive($breakpoint-xlarge) {
+      background-position: 90% 60%;
+      background-size: auto 500px;
+    }
+  }
+
   // Confirmación de Email
   &.email-confirmation.index,
   &.legal-authorization.index,