Feature/accordion

blocks/accordion/accordion.css

@@ -0,0 +1,127 @@
+main .accordion {
+    max-width: 980px;
+    margin: 0 auto;
+    padding: 10px 0;
+}
+
+main .accordion.faq-accordion>div {
+    border: 1px solid #dbdbdb;
+    border-radius: 5px;
+}
+
+main .accordion.spacer.faq-accordion>div {
+    margin-top: 7px;
+}
+
+
+main .accordion.faq-accordion .faq-question {
+    cursor: pointer;
+    padding: 12px 20px;
+    font-size: 16px;
+    color: #0d233e;
+    font-weight: 700;
+    line-height: 1.1;
+    text-align: left;
+}
+
+main .accordion.faq-accordion .faq-question:hover {
+    color: #ec8f2d;
+}
+
+main .accordion.faq-accordion .faq-question.active {
+    color: #ec8f2d;
+}
+
+main .accordion.faq-accordion .faq-question::before {
+    content: "\e905";
+    float: right;
+    font-family: ald-icons !important;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: 400;
+    line-height: 1;
+    text-transform: none;
+}
+
+main .accordion.faq-accordion .faq-question.active::before {
+    content: "\e904";
+    float: right;
+    font-family: ald-icons !important;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: 400;
+    line-height: 1;
+    text-transform: none;
+}
+
+
+main .section.orange .accordion.faq-accordion .faq-question::before,
+main .section.orange .accordion.faq-accordion .faq-question.active::before,
+main .section.orange .accordion.faq-accordion a {
+    color: #f77f00;
+}
+
+
+main .section.green .accordion.faq-accordion .faq-question::before,
+main .section.green .accordion.faq-accordion .faq-question.active::before,
+main .section.green .accordion.faq-accordion a {
+    color: #78be20;
+}
+
+main .accordion.faq-accordion .faq-answer {
+    padding: 0 20px;
+    display: none;
+    overflow: hidden;
+    font-size: 16px;
+    max-height: 0;
+    transition: all 0.2s ease-in-out;
+    text-align: left;
+}
+
+main .accordion.faq-accordion .faq-answer p {
+    font-size: 16px;
+}
+
+main .accordion.faq-accordion .faq-answer ul {
+    list-style-type: none;
+}
+
+main .accordion.faq-accordion .faq-answer ul li::before {
+    color: #ec8f2d;
+    content: "\25A0";
+    font-family: Arial;
+    font-size: 1em;
+    left: 0;
+    line-height: 100%;
+    position: absolute;
+    top: 0.45em;
+}
+
+main .accordion.faq-accordion .faq-answer.active {
+    display: block;
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) {
+    main .accordion {
+        padding: 20px 0;
+    }
+
+    main .accordion.faq-accordion .faq-question {
+        cursor: pointer;
+        padding: 12px 20px;
+        font-size: 16px;
+    }
+
+}
+
+/* Desktop */
+@media only screen and (min-width: 1030) {
+    main .accordion {
+        padding: 50px 0;
+    }
+
+    main .accordion.faq-accordion .faq-question {
+        font-size: 16px;
+    }
+}

blocks/accordion/accordion.js

@@ -0,0 +1,33 @@
+export default function decorate(block) {
+  const faqRows = [...block.children];
+  block.classList.add('faq-accordion');
+
+  faqRows.forEach((row) => {
+    const faqQuestion = [...row.children][0];
+    const faqAnswer = [...row.children][1];
+
+    faqQuestion.classList.add('faq-question');
+    faqAnswer.classList.add('faq-answer');
+
+    faqQuestion.addEventListener('click', () => {
+      const isActive = faqQuestion.classList.contains('active');
+
+      if (isActive) {
+        faqQuestion.classList.remove('active');
+        faqAnswer.classList.remove('active');
+        // Set max-height to 0 for smooth closing
+        faqAnswer.style.maxHeight = '0';
+      } else {
+        faqQuestion.classList.add('active');
+        faqAnswer.classList.add('active');
+        // Set max-height to scrollHeight for smooth opening
+        faqAnswer.style.maxHeight = `${faqAnswer.scrollHeight}px`;
+      }
+    });
+
+    // Close all accordions initially
+    faqQuestion.classList.remove('active');
+    faqAnswer.classList.remove('active');
+    faqAnswer.style.maxHeight = '0';
+  });
+}

styles/Typo.css

@@ -50,9 +50,9 @@
     font-weight: 400;
     src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/italic/926e8ba2-1161-42b7-a850-c56765e872fd.eot#iefix");
     src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/italic/926e8ba2-1161-42b7-a850-c56765e872fd.eot#iefix") format("eot"),
-        url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/italic/09a1d106-4ddc-4781-bbaa-ca99d410f96c.woff2") format("woff2"),
-        url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/italic/cf7ea09d-4129-4178-be10-46690a910bc6.woff") format("woff"),
-        url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/italic/155079dd-36cb-4995-8ced-3fc104e75028.ttf") format("truetype")
+        url("../fonts/proxima/italic/09a1d106-4ddc-4781-bbaa-ca99d410f96c.woff2") format("woff2"),
+        url("../fonts/proxima/italic/cf7ea09d-4129-4178-be10-46690a910bc6.woff") format("woff"),
+        url("../fonts/proxima/italic/155079dd-36cb-4995-8ced-3fc104e75028.ttf") format("truetype")
 }
 
 @font-face {