diff --git a/blocks/eligibilitycalculator/eligibilitycalculator.js b/blocks/eligibilitycalculator/eligibilitycalculator.js index 8874e272d0..2a22a0cde4 100644 --- a/blocks/eligibilitycalculator/eligibilitycalculator.js +++ b/blocks/eligibilitycalculator/eligibilitycalculator.js @@ -204,7 +204,8 @@ export function eligibilityCalculatorCallXf() { findSectionXFShow.querySelector(".eligibilitycalculator-wrapper").querySelector(".overlayDiv").classList.add("show"); if (xfGetAttr == "homepage-eligibility-calculator-call-xf") { findSectionXFShow.classList.remove("dp-none"); - document.querySelector("body").classList.add("overlay-active"); + document.querySelector(".modal-overlay").classList.add("overlay"); + document.querySelector(".modal-overlay").classList.remove("dp-none"); calculatorType = "eligibility"; elgOverlay.classList.add("show"); // overlay.classList.add("show"); diff --git a/blocks/header/header.css b/blocks/header/header.css index e2de659fce..e9282ff6b4 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -896,33 +896,46 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul::before { width: 100%; } - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(1), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(2), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(3), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(4), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(4) li:nth-child(1), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(4) li:nth-child(2), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(4) li:nth-child(3), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(4) li:nth-child(4), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(1), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(2), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(3), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(4), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(1), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(2), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(3), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(4), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(1), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(2), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(3), - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(4){ - border-bottom: 1px solid #e6e6e6; - margin: unset; - display: flex; - flex-direction: column; + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(4) > span, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(3) > span, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(2) > span, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(1) > span, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(4) > span, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(3) > span, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(2) > span, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(1) > span, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(4) > span, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(3) > span, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(2) > span, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(1) > span{ position: relative; + border-bottom: 1px solid #e6e6e6; + } + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(4) > span::after, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(3) > span::after, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(2) > span::after, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(1) > span::after, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(4) > span::after, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(3) > span::after, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(2) > span::after, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(1) > span::after, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(4) > span::after, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(3) > span::after, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(2) > span::after, + .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(1) > span::after{ + position: absolute; + content: ''; + border: 1px solid black; + border-width: 0 2px 2px 0; + display: inline-block; + padding: 3.5px; + margin-top: -3px; + transform: rotate(45deg); + right: 3px; + top: 24px; + transition: transform .3s linear; + display: inline; } - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(1).active span, .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(2).active span, .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(3).active span, @@ -944,6 +957,7 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul::before { .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(3).active span, .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(4).active span{ color: #f26841; + border-bottom: unset; } .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(1) span, @@ -977,56 +991,21 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul::before { gap: 8px; } - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(1)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(2)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(3)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(4)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(4) li:nth-child(3)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(1)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(2)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(3)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(4)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(1)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(2)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(3)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(4)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(1)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(2)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(3)::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(4)::after{ - position: absolute; - content: ''; - border: 1px solid black; - border-width: 0 2px 2px 0; - display: inline-block; - padding: 3.5px; - margin-top: -3px; - transform: rotate(45deg); - right: 3px; - top: 24px; - transition: transform .3s linear; - display: inline; -} - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(1).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(2).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(3).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(4).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(4) li:nth-child(3).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(1).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(2).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(3).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(4).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(1).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(2).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(3).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(4).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(1).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(2).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(3).active::after, - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(4).active::after{ - /* transform: rotate(225deg); + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(1).active span::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(2).active span::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(3).active span::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(4).active span::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(4) li:nth-child(1).active span::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(4) li:nth-child(2).active span::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(4) li:nth-child(3).active span::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(4) li:nth-child(4).active span::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(1).active span::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(2).active span::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(3).active span::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(4).active span::after{ + transform: rotate(225deg); border: 1px solid #f26841; - border-width: 0 2px 2px 0; */ + border-width: 0 2px 2px 0; } .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) > li:nth-child(1) > ul, .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) > li:nth-child(2) > ul, @@ -1060,13 +1039,26 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul::before { .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(3) > ul li, .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(4) > ul li{ border-bottom: unset; - padding: 0 0 16px; position: unset; - color: #212529; + padding-left: 5px; + margin-bottom: 16px; +} +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(4) > ul li, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(3) > ul li, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(2) > ul li, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(1) > ul li, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(4) > ul li, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(3) > ul li, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(2) > ul li, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(1) > ul li, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(4) > ul li, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(3) > ul li, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(2) > ul li, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(1) > ul li{ font-family: Nunito-Regular, sans-serif; font-size: 14px; line-height: 20px; - padding-left: 5px; + color: #212529; } .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(1) > span{ position: relative; @@ -1091,6 +1083,50 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul::before { left: 8%; bottom: 32%; } + +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(4) > span > img, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(3) > span > img, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(2) > span > img, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(1) > span > img, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(4) > span > img, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(3) > span > img, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(2) > span > img, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(4) > li:nth-child(1) > span > img, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(4) > span > img, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(3) > span > img, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(2) > span > img, +.section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(2) > li:nth-child(1) > span > img{ + width: 18px; + height: 18px; +} +/* playstore img banner */ +.section.mobile-view-header .header-mobile-app-store{ + background: linear-gradient(333.16deg, #fef0ec -4.71%, #ebeef0 116.99%); + border-radius: 15.7755px; + margin: 16px auto 144px; + max-width: 328px; + padding: 24px 36px; +} +.section.mobile-view-header .header-mobile-app-store p{ + color: #212529; + font-family: Nunito-Bold, sans-serif; + font-size: 14px; + line-height: 20px; + margin: unset; + margin-bottom: 12px; + text-align: center; +} +.section.mobile-view-header .header-mobile-img-wrapper{ + display: flex; + flex-direction: row; + gap: 16px; + justify-content: center; +} +.section.mobile-view-header .header-mobile-img-wrapper img{ + border-radius: 5px; + height: 36px; + width: 122px; +} } diff --git a/blocks/header/header.js b/blocks/header/header.js index afa52456b8..b3ace7ddec 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -143,7 +143,7 @@ export default async function decorate(block) { `; hamburger.addEventListener('click', (e) => { toggleMenu(nav, navSections) - hamburgerHandler(e); + hamburgerHandler(); }); nav.prepend(hamburger); nav.setAttribute('aria-expanded', 'false'); @@ -210,10 +210,10 @@ function clickToShowMobileNavDropDown(){ }) } -function hamburgerHandler(e){ - if(e.target.parentNode.getAttribute('aria-label') == "Close navigation"){ +function hamburgerHandler(){ + if(document.querySelector('.nav-hamburger').querySelector('[aria-label]').ariaLabel.toLowerCase() == "close navigation"){ document.querySelector('.section.mobile-view-header').style.display = 'block'; - }else if(e.target.parentNode.getAttribute('aria-label') == "Open navigation"){ + }else if(document.querySelector('.nav-hamburger').querySelector('[aria-label]').ariaLabel.toLowerCase() == "open navigation"){ document.querySelector('.section.mobile-view-header').style.display = 'none'; } } \ No newline at end of file diff --git a/blocks/homeloancalculator/homeloancalculator.js b/blocks/homeloancalculator/homeloancalculator.js index 471a8ecd11..ba46ab9ba7 100644 --- a/blocks/homeloancalculator/homeloancalculator.js +++ b/blocks/homeloancalculator/homeloancalculator.js @@ -181,7 +181,8 @@ export function homeLoancalculatorCallXf() { findSectionXFShow.classList.remove("dp-none"); // look calculatorType = "emi"; emiOverlay.classList.add("show"); - document.querySelector("body").classList.add("overlay-active"); + document.querySelector(".modal-overlay").classList.add("overlay"); + document.querySelector(".modal-overlay").classList.remove("dp-none"); // overlay.classList.add("show"); document.body.style.overflow = "hidden"; homeLoanCalcFunc(currentSection); diff --git a/blocks/teaserv2/teaserv2.js b/blocks/teaserv2/teaserv2.js index 4da4695a46..4bfba86ef3 100644 --- a/blocks/teaserv2/teaserv2.js +++ b/blocks/teaserv2/teaserv2.js @@ -6,7 +6,7 @@ export default function decorate(block) { } function renderTeaserHTMLFactory(props) { - const [mainHref, bgImage, frontImage, title, description, mobileDescription, button, buttonHref, bgColor, teaserv2Attr] = props; + const [mainHref, bgImage, frontImage, title, description, mobileDescription, button, buttonHref, bgColor, teaserv2Attr, textwithinnerhtml] = props; const createElement = (tag, className, content) => { const element = document.createElement(tag); @@ -41,7 +41,10 @@ function renderTeaserHTMLFactory(props) { newButtonTag = createElement("div", "button-container-text", button?.textContent.trim() || ""); } - bgImageDiv.append(frontImageDiv, titleDiv, descriptionDiv, newButtonTag); + const textwithDiv = document.createElement("div"); + textwithDiv.innerHTML = textwithinnerhtml?.innerHTML || ""; + + bgImageDiv.append(frontImageDiv, titleDiv, descriptionDiv, newButtonTag, textwithDiv); const teaserv2AttrGet = teaserv2Attr?.textContent?.trim() || ""; teaserv2Attr.closest(".teaserv2-wrapper").setAttribute("data-teaserv2-xf", teaserv2AttrGet); diff --git a/component-models.json b/component-models.json index 9efe481dc2..8e26f7c9a8 100644 --- a/component-models.json +++ b/component-models.json @@ -1148,6 +1148,39 @@ "value": "card-full-width" } ] + }, + { + "name": "liner-gradient", + "children": [ + { + "name": "gradient-blue-gray", + "value": "gradient-blue-gray" + }, + { + "name": "gradient-blue", + "value": "gradient-blue" + }, + { + "name": "gradient-brown", + "value": "gradient-brown" + }, + { + "name": "gradient-dark-blue", + "value": "gradient-dark-blue" + }, + { + "name": "gradient-gray", + "value": "gradient-gray" + }, + { + "name": "gradient-teal", + "value": "gradient-teal" + }, + { + "name": "gradient-blue-green", + "value": "gradient-blue-green" + } + ] } ] }, @@ -1734,6 +1767,39 @@ "value": "", "label": "teaserv2 Attribute", "description": "Set TeaserV2 Attribute" + }, + { + "component": "multiselect", + "name": "classes", + "label": "Style", + "valueType": "string", + "required": true, + "options": [ + { + "name": "Theme", + "children": [ + { + "name": "Light", + "value": "light" + }, + { + "name": "Light", + "value": "light" + }, + { + "name": "Dark", + "value": "dark" + } + ] + } + ] + }, + { + "component": "richtext", + "valueType": "string", + "name": "textwithinnerhtml", + "value": "", + "label": "Text With RTE" } ] }, diff --git a/scripts/scripts.js b/scripts/scripts.js index 79941203d7..544d5f0d64 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -422,19 +422,18 @@ body?.addEventListener("click", function (e) { if (!e.target.closest(".show") && targetObject.model) { targetObject.model?.querySelector(".overlayDiv").classList.remove("show"); document.body.style.overflow = "scroll"; - body.classList.remove("overlay-active"); + document.querySelector(".modal-overlay").classList.remove("overlay"); + document.querySelector(".modal-overlay").classList.add("dp-none"); + } else if (!e.target.closest(".stake-pop-up")) { + document.querySelectorAll(".stake-pop-up").forEach((ele) => { + ele.classList.remove("dp-block"); + ele.classList.add("dp-none"); + document.body.style.overflow = "auto"; + }); + /* var overlay = document.querySelector('.overlay'); + if (overlay) { + document.body.removeChild(overlay); + } */ + e.currentTarget.querySelector(".stake-pop-up.dp-block")?.classList.remove("dp-block"); } - else if (!e.target.closest('.stake-pop-up')) { - document.querySelectorAll(".stake-pop-up").forEach((ele) => { - ele.classList.remove('dp-block'); - ele.classList.add('dp-none'); - document.body.style.overflow = "auto"; - - }); - var overlay = document.querySelector('.overlay'); - if (overlay) { - document.body.removeChild(overlay); - } - } - e.currentTarget.querySelector(".stake-pop-up.dp-block")?.classList.remove("dp-block"); }); diff --git a/styles/interest-rates-disclosure/interest-rates-disclosure.css b/styles/interest-rates-disclosure/interest-rates-disclosure.css index b124f7f4b3..ee269d3751 100644 --- a/styles/interest-rates-disclosure/interest-rates-disclosure.css +++ b/styles/interest-rates-disclosure/interest-rates-disclosure.css @@ -1,3 +1,4 @@ +/* interest rate accordian start */ .section.interest-rates-accordian-wrapper .default-content-wrapper h2 { font-family: Nunito-Extrabold, sans-serif; font-size: 20px; @@ -8,12 +9,15 @@ margin-bottom: 40px; } -.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group { +.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group { padding: 0; } +.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group.shade-box { + margin: 0; +} -.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion > details { +.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details { padding: 0; } @@ -21,8 +25,8 @@ margin-bottom: 16px; } -.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion > details > summary { - background: #f8f8f8; +.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details>summary { + background: var(--whitesmoke); border-radius: 4px; color: #333; display: block; @@ -33,8 +37,8 @@ position: relative; } -.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion > details > summary::after{ - color: #000; +.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details>summary::after { + color: var(--text-color); content: "+"; font-family: Nunito-Extrabold, sans-serif; font-size: 28px; @@ -42,49 +46,162 @@ height: 2px; position: absolute; right: 24px; - width: 9pt; + width: 12px; } -.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion > details > summary.active { - background: #f26841; - color: #fff; +.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details>summary.active { + background: var(--orange); + color: var(--background-color); } -.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion > details > summary.active::after { - color: #fff; +.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details>summary.active::after { + color: var(--background-color); content: "-"; } -.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion > details > div { +.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details>div { margin: 0; } -.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion > details > div > ul { - border: solid #ccc; +.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details>div>ul { + border: solid var(--dark-color); border-width: 1px 1px 0; list-style: none; margin: 0; } -.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion > details > div > ul > li{ - background: #fff; - border-bottom: 1px solid #ccc; +.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details>div>ul>li { + background: var(--background-color); + border-bottom: 1px solid var(--dark-color); position: relative; margin: 0; + padding: 12px 40px; + cursor: pointer; } -.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion > details > div > ul > li > a{ - cursor: pointer; +.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details>div>ul>li>a { + color: var(--text-color); + position: relative; + text-decoration: none; display: block; font-family: Nunito-Regular, sans-serif; - color: #000; - font-size: 1pc; + font-size: 12px; line-height: 24px; - padding: 9pt 40px; - position: relative; + margin-bottom: 4px; +} + +.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details>div>ul>li:hover a { + color: var(--orange); +} + +.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details>div>ul>li>ul { + margin: 0; +} + +.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details>div>ul>li>ul>li>a { + font-family: Nunito-Regular, sans-serif; + font-size: 16px; + line-height: 24px; + margin: 0; text-decoration: none; + color: var(--text-color); } -.section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion > details > div > ul > li > a:hover{ - color: #f26841; + +@media screen and (max-width: 767px) { + .section.interest-rates-accordian-wrapper .default-content-wrapper h2 { + font-size: 16px; + line-height: 24px; + } + + .section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details>div>ul>li { + padding: 12px 50px 12px 18px; + } + + .section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details>div>ul>li> a{ + font-size: 12px; + line-height: 18px; + } + + .section.interest-rates-accordian-wrapper .accordion-group-wrapper .accordion-group .accordion>details>div>ul>li>ul>li>a { + font-size: 12px; + line-height: 18px; + } } + +/* interest rate accordian end */ + +/* media accordian start */ + +.section.media-acc-wrapper .accordion-group-wrapper .accordion-group .accordion>details>summary { + border-radius: 0; + padding: 16px 5pc 16px 40px; + color: #20374e; +} + +/* .section.media-acc-wrapper .accordion-group-wrapper .accordion-group .accordion>details>summary h3{ + width: 83%; +} */ + +.section.media-acc-wrapper .accordion-group-wrapper .accordion-group .accordion>details >div { + padding: 16px; + border: 1px solid #ccc; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} + +.section.media-acc-wrapper .accordion-group-wrapper .accordion-group .accordion>details >div>p { + margin: 0; + color: #333; + font-family: Nunito-Regular, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; +} + +.section.media-acc-wrapper .accordion-group-wrapper .accordion-group .accordion>details >div>ul { + list-style: disc; + border: none; +} + +.section.media-acc-wrapper .accordion-group-wrapper .accordion-group .accordion>details >div>ul >li{ + font-family: Nunito-Regular, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + align-items: center; + color: var(--text-color); + cursor: pointer; + display: flex; + min-height: 40px; + padding: 8px 0 0 22px; + position: relative; + border: none; + } + + .section.media-acc-wrapper .accordion-group-wrapper .accordion-group .accordion>details >div>ul >li::before{ + background: var(--text-color); + border-radius: 50%; + content: ""; + display: block; + height: 9px; + left: 0; + position: absolute; + width: 9px; + } + + .section.media-acc-wrapper .accordion-group-wrapper .accordion-group .accordion>details >div>ul >li>a{ + color: var(--text-color); + font-family: Nunito-Regular, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + margin: 0; + } + + .section.media-acc-wrapper .accordion-group-wrapper .accordion-group .accordion>details >div>ul >li:hover a{ + color: #356ca3; + text-decoration-line: underline; + } + +/* media accordian end */ \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 3f23073ea0..dab02a05c8 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -440,6 +440,27 @@ main img { .teaser.block.--skyblue>.background { background-color: var(--skyblue); } +.gradient-blue-gray { + background-image: linear-gradient(to right, #2B4054, #2B405400); +} +.gradient-blue { + background-image: linear-gradient(to right, #587990, #58799000); +} +.gradient-brown { + background-image: linear-gradient(to right, #755930, #75593000); +} +.gradient-dark-blue { + background-image: linear-gradient(to right, #2C3C4D, #2C3C4D00); +} +.gradient-gray { + background-image: linear-gradient(to right, #8F8F8F, #8F8F8F00); +} +.gradient-teal { + background-image: linear-gradient(to right, #69888D, #69888D00); +} +.gradient-blue-green { + background-image: linear-gradient(to right, #016084, #01608400); +} /* common classes for banner background end */