Merge branch 'main' of https://github.com/WWWPiramalFinanceCOM/pirama…

…lfinance into feature/homepage-bugfixes
WWWPiramalFinanceCOM · Jul 5, 2024 · 4d6eca4 · 4d6eca4
2 parents e2ba4c7 + e8a557d
commit 4d6eca4
Show file tree

Hide file tree

Showing 4 changed files with 214 additions and 1 deletion.
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -560,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{

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;
+    }
+}