Merge branch 'main' of github.com:WWWPiramalFinanceCOM/piramalfinance

WWWPiramalFinanceCOM · Jul 5, 2024 · 4ad7d5c · 4ad7d5c
2 parents 7d5746a + 737a078
commit 4ad7d5c
Show file tree

Hide file tree

Showing 4 changed files with 240 additions and 5 deletions.
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -321,8 +321,8 @@ header nav .nav-sections .nav-drop::after{
   max-width: 108px;
   display: inline-block;
   margin-right: 16px;
-  padding-top: 5px;
-  padding-bottom: 5px;
+  padding-top: 0;
+  padding-bottom: 20px;
 }
 
 .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper {
@@ -349,7 +349,22 @@ header nav .nav-sections .nav-drop::after{
   line-height: 24px;
   text-decoration: none;
 }
-.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>p sup{
+.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>p a {
+  margin-right: 1rem;
+  padding: 8px 8px 8px 8px;
+  position: relative;
+  color: var(--darkcharcoal);
+  cursor: pointer;
+  font-family: 'Nunito-Bold',sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  text-decoration: none;
+  background: transparent;
+  margin: unset;
+  display: block;
+  padding: unset;
+}
+.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>p>a>sup{
   background-color: #41c672;
   color: #fff;
   font-size: 10px;
@@ -362,12 +377,16 @@ header nav .nav-sections .nav-drop::after{
   align-items: center;
   border-radius: 4px;
   position: absolute;
-  bottom: 32px;
+  bottom: 0;
 }
 .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li.nav-drop {
   position: unset;
 }
 
+.header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul li:first-child {
+  position: relative;
+}
+
 .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li.nav-drop {
   padding-right: 20px;
 }
@@ -541,11 +560,17 @@ header nav .nav-sections .nav-drop::after{
 .default-content-wrapper ul li:last-child.navigation-level-active img{
   opacity: 1;
 }
-.default-content-wrapper.active > ul li p {
+/* .default-content-wrapper.active > ul li p {
   color: #ccc !important;
 }
 .default-content-wrapper.active > ul li.navigation-level-active p {
   color: #333 !important;
+} */
+.default-content-wrapper.active > ul li p, .default-content-wrapper.active > ul li p a {
+  color: #ccc !important;
+}
+.default-content-wrapper.active > ul li.navigation-level-active p,.default-content-wrapper.active > ul li.navigation-level-active a {
+  color: #333 !important;
 }
 
 .navigation-level-active p{
@@ -1002,6 +1027,9 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul::before {
   header nav[aria-expanded='false'] .nav-hamburger-icon::after {
     top: 5px;
   }
+  .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper {
+    margin-left: 28px;
+  }
 }
 
 /* header custom css */

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -452,6 +452,8 @@ async function loadingCustomCss() {
     `${window.hlx.codeBasePath}/styles/awards-recognition/awards-recognition.css`,
     `${window.hlx.codeBasePath}/styles/career-social-cards/career-social-cards.css`,
     `${window.hlx.codeBasePath}/styles/available-facilities/available-facilities.css`,
+    `${window.hlx.codeBasePath}/styles/nearest-branches/nearest-branches.css`,
+    `${window.hlx.codeBasePath}/styles/steps-for-apply/steps-for-apply.css`,
   ]
 
   loadCssArray.forEach(async (eachCss) => {

diff --git a/styles/nearest-branches/nearest-branches.css b/styles/nearest-branches/nearest-branches.css
@@ -0,0 +1,170 @@
+.section.nearest-branches .default-content-wrapper>h2 {
+    margin-bottom: 24px;
+    color: #000;
+    display: block;
+    font-family: Nunito-Extrabold, sans-serif;
+    font-size: 2pc;
+    font-weight: 800;
+    line-height: 40px;
+    padding-bottom: 8px;
+}
+
+.section.nearest-branches .columns-wrapper .columns {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.section.nearest-branches .columns-wrapper .columns>div {
+    border: 2px solid #e5e7eb;
+    border-radius: 1pc;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
+    transition-duration: .2s;
+    translate: 0;
+    padding: 2pc;
+    position: relative;
+}
+
+.section.nearest-branches .columns-wrapper .columns>div:hover {
+    translate: 0 -4px;
+}
+
+.section.nearest-branches .columns-wrapper .columns>div>div>h2 {
+    align-items: center;
+    color: #365069;
+    display: grid;
+    font-family: Nunito-Bold, sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    gap: 8px;
+    grid-template-columns: 3% auto;
+    line-height: 28px;
+    position: relative;
+    margin: 6px 0;
+}
+
+.section.nearest-branches .columns-wrapper .columns>div>div {
+    position: relative;
+}
+
+.section.nearest-branches .columns-wrapper .columns>div:hover>div>h4 {
+    display: block;
+}
+
+.section.nearest-branches .columns-wrapper .columns>div>div>h4 {
+    display: grid;
+    grid-template-columns: auto auto;
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: #f26841;
+    display: grid;
+    font-family: Nunito-Bold, sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 21px;
+    margin-right: 20px;
+    display: none;
+    margin-top: 8px;
+}
+
+.section.nearest-branches .columns-wrapper .columns>div>div>h4:hover {
+    display: block;
+}
+
+.section.nearest-branches .columns-wrapper .columns>div>div>h4::after {
+    background-image: url("https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/product-page/cities/ahmedabad/arrow-right-orange.svg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    content: "";
+    display: inline-block;
+    height: 21px;
+    width: 20px;
+    position: absolute;
+}
+
+.section.nearest-branches .columns-wrapper .columns>div>div>h2::before {
+    background-image: url("https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/product-page/cities/ahmedabad/location.svg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    content: "";
+    display: inline-block;
+    height: 28px;
+    width: 24px;
+}
+
+.section.nearest-branches .columns-wrapper .columns>div:hover>div>h2 {
+    color: #f26841;
+}
+
+.section.nearest-branches .columns-wrapper .columns>div:hover>div>h2::before {
+    background-image: url("https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/product-page/cities/ahmedabad/location-orange.svg");
+}
+
+.section.nearest-branches .columns-wrapper .columns>div>div>p {
+    color: #000;
+    font-family: Nunito-Regular, sans-serif;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 24px;
+}
+
+
+@media screen and (max-width: 1024px) {
+
+    .section.nearest-branches .columns-wrapper .columns>div:hover {
+        translate: 0;
+    }
+
+    .section.nearest-branches .columns-wrapper .columns>div>div>h2::before {
+        background-image: url("https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/product-page/cities/ahmedabad/location-orange.svg");
+    }
+
+    .section.nearest-branches .columns-wrapper .columns>div>div>h2 {
+        color: #f26841;
+    }
+
+    .section.nearest-branches .columns-wrapper .columns>div>div>h4{
+        display: block;
+    }
+
+    .section.nearest-branches .columns-wrapper .columns>div>div>h4::after {
+        top: 0;
+        right: -20px;
+        display: block;
+    }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+    .section.nearest-branches .columns-wrapper .columns>div>div>h2{
+        grid-template-columns: 4% auto;
+    }
+}
+@media screen and (max-width: 767px) {
+
+    .section.nearest-branches .columns-wrapper .columns>div{
+        padding: 16px;
+    }
+    .section.nearest-branches .columns-wrapper .columns>div>div>h2{
+        margin: 8px 0;
+        font-size: 16px;
+        gap: 4px;
+        grid-template-columns: 10% 90%;
+        line-height: 24px;
+        width: unset;
+    }
+    .section.nearest-branches .columns-wrapper .columns>div>div>h2::before{
+        width: 18px;
+        height: 19px;
+        margin-top: 2px;
+    }
+    .section.nearest-branches .columns-wrapper .columns>div>div>h4{
+        font-size: 16px;
+        line-height: 24px;
+        margin-top: 8px;
+    }
+    .section.nearest-branches .columns-wrapper .columns>div>div>p{
+        font-size: 16px;
+        line-height: 24px;
+    }
+}
diff --git a/styles/steps-for-apply/steps-for-apply.css b/styles/steps-for-apply/steps-for-apply.css
@@ -0,0 +1,35 @@
+.section.steps-for-apply .default-content-wrapper >h2{
+    color: #000;
+    display: block;
+    font-family: Nunito-Extrabold, sans-serif;
+    font-size: 32px;
+    font-weight: 800;
+    line-height: 48px;
+    margin-bottom: 16px;
+}
+.section.steps-for-apply .default-content-wrapper >p{
+    color: #000;
+    display: block;
+    font-family: Nunito-Regular, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    margin-bottom: 16px;
+}
+.section.steps-for-apply .default-content-wrapper >p >strong{
+    margin-bottom: 8px;
+    display: inline-block;
+    color: #f26841;
+    font-family: Nunito-Bold, sans-serif;
+    font-size: 1pc;
+    font-weight: 700;
+    line-height: 24px;
+    min-width: 53px;
+}
+
+@media screen and (max-width: 767px) {
+    .section.steps-for-apply .default-content-wrapper >h2{
+        font-size: 18px;
+        line-height: 27px;
+    }
+}