gatsby-matrix-theme 7.1.26 → 7.1.29

package/CHANGELOG.md

@@ -1,3 +1,61 @@
+## [7.1.29](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.28...v7.1.29) (2022-06-28)
+
+
+### Bug Fixes
+
+* cookie-consent ([9b3f6ed](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9b3f6edf772528d3dc97fcfbd4f29ce7a09f89d9))
+
+
+* Merge branch 'tm-2622' into 'master' ([f4d11fd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f4d11fd63c4731132ceae5d6498da0fc4fd7d307))
+
+## [7.1.28](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.27...v7.1.28) (2022-06-24)
+
+
+### Config
+
+* update gatsby theme ([a9d044d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a9d044d2e959e09a2987f63ed6146402975b6184))
+
+## [7.1.27](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.26...v7.1.27) (2022-06-23)
+
+
+### Bug Fixes
+
+* add and YEAR ([4bd0df6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4bd0df6376e7f856198d7085d47ce9c341114273))
+* add class for module_intro ([1113419](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/11134193de0fb336a18f386f21b874c8f5b2ff4f))
+* add placeholders for meta_title ([b3f2bb9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b3f2bb92e71e1d8c8fc310e30a24e8de133323e2))
+* cleanup code ([076c24d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/076c24d29ec484b780efcdfe8c660adf8ca0844d))
+* cleanup code ([2872800](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/287280085f7e4872963b6485e0755ba1ab603a8b))
+* cookie consent ([344d84c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/344d84ceed9247a082f20cfe3ef83bf4c9b7eac2))
+* fix conflicts ([44dd1f0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/44dd1f0e38013ab9daacc847da27111e8cc816ef))
+* fix conflicts ([a0ca5b5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a0ca5b5e060d0240829e5efb81e5ab34001e3ab3))
+* fix error ([2ef5d6e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2ef5d6ee7bb8bb0f2da3e512d3fbbe0e075eeda6))
+* fix name ([10027de](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/10027de2e45f92874e705c8f1c249b9783d8abb1))
+* fix the logic when page is not operator ([3d14661](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3d14661154f12dfaabf8e2283a086d332a4b34d2))
+* remove the anchor from  matrix ([62913ee](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/62913ee850ae71b0cbcd2e8786e42aa6df2d742f))
+* translatable ([8df7f41](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8df7f41d1db40a368262bb3eafcf091151a31b9d))
+* updated to latest core version ([e017a8a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e017a8ad027551c128d36016ccc73ae0b883c69b))
+
+
+### Code Refactoring
+
+* add page template type for newsletter pages ([c6f28f1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c6f28f19cbf9b5cc1e29a83bdaf2ebf2fae338bd))
+
+
+### Config
+
+* update theme ([347f7a2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/347f7a28485c63407cb32c75824e36658bdfa8f1))
+
+
+* Merge branch 'tm-2913-anchor' into 'master' ([2e18828](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2e18828367d8654758278a499b77c043090342d9))
+* Merge branch 'tm-2871-cards-v22' into 'master' ([693f157](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/693f15726ee23e4af37a1c9dd04d7f07733e6cfa))
+* Update package.json ([7241fc8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7241fc8b691aee0d0d86bee275a859a7d0819278))
+* Update package.json ([cc168f7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cc168f7fc86f3dd98db21a2f66c766cf30aeec82))
+* Merge branch 'revert-347f7a28' into 'master' ([cd35c25](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cd35c25c39e2da2d3dc0c1e6fae6cc90e8d8ddd1))
+* Revert "config: update theme" ([4d052a6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4d052a6907b3c642b12dfcca7d2ac4ee4c37d0c7))
+* Merge branch 'tm-2622-cookie' into 'master' ([b174aae](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b174aae77f4cc5ba0e537caf40ee42f35ce2606c))
+* Merge branch 'tm-2926-meta-title' into 'master' ([188786f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/188786f0ddfcec571e840a9db00a5fd543386cbb))
+* Merge branch 'tm-2918-align-sign-up-form' into 'master' ([bdbb723](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bdbb7239c04f314a65c87fadff2a7057cfca186a))
+
 ## [7.1.26](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.25...v7.1.26) (2022-06-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "7.1.26",
+  "version": "7.1.29",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -29,7 +29,7 @@
     "react": "^17.0.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "react-dom": "^17.0.2",
-    "gatsby-core-theme": "^8.0.2"
+    "gatsby-core-theme": "^8.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

package/src/components/atoms/newsletter/form/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 /* eslint-disable no-unused-expressions */
 /* eslint-disable import/no-extraneous-dependencies */
 import React, { useRef, useState, useEffect, useContext } from 'react';
@@ -25,6 +26,7 @@ const NewsletterForm = ({
     mainText: 'You get more than 405 free spins',
     subscribeText: 'Subscribe to our newsletter and get more than 405 free spins instantly.',
   },
+  ppcPage = false,
 }) => {
   // eslint-disable-next-line react/destructuring-assignment
 
@@ -200,6 +202,7 @@ NewsletterForm.propTypes = {
   redirectUrl: PropTypes.string,
   privacyText: PropTypes.string,
   setLogading: PropTypes.bool,
+  ppcPage: PropTypes.bool,
 };
 
 export default NewsletterForm;

package/src/components/atoms/newsletter/toggle-button/index.js

@@ -1,26 +1,32 @@
+/* eslint-disable react/button-has-type */
+/* eslint-disable arrow-body-style */
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import styles from './newsletter-button.module.scss'
-const  NewsletterButton =(
-    {
-        text="Bonus alert",
-        toggleNewsLetter,
-        active=true
-    }
-    )=>{
-    return(
-        <button onClick={toggleNewsLetter} className={!active ? `${styles.button}` :`${styles.button} ${styles.active}`}>
-            {text}
-        </button>
-    );
-}
+import styles from './newsletter-button.module.scss';
 
-NewsletterButton.propTypes = {
-    text: PropTypes.string,
-    toggleNewsLetter: PropTypes.bool,
-    active:PropTypes.bool
+const NewsletterButton = ({
+  text = 'Bonus alert',
+  toggleNewsLetter,
+  active = true,
+  ppcPage = false,
+}) => {
+  return (
+    <button
+      onClick={toggleNewsLetter}
+      className={`${styles.button} ${active && styles.active} ${ppcPage && styles.ppcButton}`}
+    >
+      {text}
+    </button>
+  );
 };
 
+NewsletterButton.propTypes = {
+  text: PropTypes.string,
+  toggleNewsLetter: PropTypes.bool,
+  active: PropTypes.bool,
+  ppcPage: PropTypes.bool,
+};
 
-export default NewsletterButton;
+export default NewsletterButton;

package/src/components/atoms/toggle-button/index.js

@@ -0,0 +1,29 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './toggle-button.module.scss';
+
+const ToggleButton = ({ icon1, icons2, state, setStateFunc }) => (
+  <div className={styles.wrgtoggle} onClick={() => setStateFunc(!state)}>
+    <div className={`${styles.wrgtogglecontainer} ${state && styles.wrgtogglecontainerOn}`}>
+      <div className={styles.wrgtogglecheck}>
+        <span>{icon1}</span>
+      </div>
+      <div className={styles.wrgtoggleuncheck}>
+        <span>{icons2}</span>
+      </div>
+    </div>
+
+    <div className={`${styles.wrgtogglecircle} ${state && styles.wrgtogglecircleAgreed}`} />
+  </div>
+);
+
+ToggleButton.propTypes = {
+  icon1: PropTypes.elementType,
+  icons2: PropTypes.elementType,
+  state: PropTypes.bool,
+  setStateFunc: PropTypes.func,
+};
+
+export default ToggleButton;

package/src/components/atoms/toggle-button/toggle-button.module.scss

@@ -0,0 +1,56 @@
+.wrgtoggle {
+    touch-action: pan-x;
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .wrgtoggleuncheck span,
+  .wrgtogglecheck span {
+    align-items: center;
+    display: flex;
+    height: 10px;
+    justify-content: center;
+    position: relative;
+    width: 10px;
+  }
+
+  .wrgtogglecontainer {
+    width: 50px;
+    height: 24px;
+    padding: 0;
+    border-radius: 30px;
+    background-color: #ced0dd;
+    transition: all 0.2s ease;
+  }
+
+  .wrgtogglecontainerOn {
+    background-color: #5ce482;
+  }
+
+  .wrgtogglecircle {
+    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background-color: #fafafa;
+    box-sizing: border-box;
+    transition: all 0.25s ease;
+  }
+
+  .wrgtogglecircleAgreed {
+    right: 1px;
+    left: auto;
+  }

package/src/components/molecules/cookie-modal/category/category.module.scss

@@ -0,0 +1,60 @@
+.categoryBox {
+  height: 59px;
+  overflow-y: hidden;
+  background-color: #f3f2f2;
+  border-radius: 8px;
+  margin-bottom: 8px;
+
+  .categoryHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    color: #150e06;
+
+    > p {
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 22px;
+    }
+
+    .boxTitle {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      > h3 {
+        margin: 0px;
+        padding-left: 10px;
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 24px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .categoryText {
+    background-color: white;
+    margin: 2px;
+    padding: 16px;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #39394F;
+
+    @include min(tablet){
+      color:#150E06;
+    }
+  }
+}
+
+.showFullCategory {
+  height: auto;
+}

package/src/components/molecules/cookie-modal/category/index.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AiOutlinePlus, AiOutlineMinus } from 'react-icons/ai';
+import ToggleButton from '../../../atoms/toggle-button/index';
+import { translate } from '~helpers/getters';
+import styles from './category.module.scss';
+
+const CategoryContainer = ({
+  obj,
+  index,
+  currentState,
+  updateState,
+  currentSection,
+  setCurrentSection,
+  translations,
+}) => (
+  <div>
+    <div
+      aria-hidden="true"
+      className={`${styles.categoryBox} ${currentSection === index && styles.showFullCategory}`}
+      onClick={() => setCurrentSection(index)}
+    >
+      <div className={styles.categoryHeader}>
+        <div className={styles.boxTitle}>
+          {currentSection === index ? <AiOutlineMinus /> : <AiOutlinePlus />}
+          <h3>{translate(translations, obj?.translateKey, obj?.altTranslation)}</h3>
+        </div>
+        {obj?.button ? (
+          <ToggleButton state={currentState} setStateFunc={updateState} />
+        ) : (
+          <p>{translate(translations, 'cookie_container_always_text', 'Alwasy Enabled')}</p>
+        )}
+      </div>
+      <div className={styles.categoryText}>{translate(translations, obj?.textKey)}</div>
+    </div>
+  </div>
+);
+
+CategoryContainer.propTypes = {
+  obj: PropTypes.shape({
+    translateKey: PropTypes.string,
+    altTranslation: PropTypes.string,
+    textKey: PropTypes.string,
+    button: PropTypes.bool,
+  }),
+  index: PropTypes.number,
+  currentState: PropTypes.bool,
+  updateState: PropTypes.func,
+  currentSection: PropTypes.number,
+  setCurrentSection: PropTypes.func,
+  translations: PropTypes.shape({}),
+};
+
+export default CategoryContainer;

package/src/components/molecules/cookie-modal/cookie-modal.module.scss

@@ -0,0 +1,140 @@
+.modalContent {
+  background-color: white;
+  padding: 20px 16px;
+  height: 100%;
+  overflow-y: scroll;
+
+  .modalCookieHeader {
+    display: flex;
+    position: relative;
+    padding-bottom: 18px;
+    border-bottom: 1px solid #ced0dd;
+
+    > img {
+      width: 184px;
+      height: 29px;
+    }
+
+    > button {
+      position: absolute;
+      right: 2px;
+      top: 2px;
+    }
+  }
+
+  .modalTextHeader {
+    margin-top: 18px;
+    margin-bottom: 16px;
+
+    h4 {
+      margin: 0px;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 24px;
+      margin-bottom: 8px;
+      color: #150E06;
+    }
+    p {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #150E06;
+    }
+  }
+
+  .modalButtons {
+    display: flex;
+    flex-direction: column;
+
+    button {
+      margin-bottom: 13px;
+      height: 40px;
+
+      &:last-child {
+        background-color: white;
+        border: 1px solid black;
+        color: black;
+
+        &:hover {
+          background: none;
+        }
+      }
+    }
+  }
+
+  .mainBox {
+    padding-top: 3px;
+
+    .mainTitle {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 24px;
+      margin-bottom: 8px;
+      color: #150E06;
+    }
+  }
+  .lastButton {
+    padding-top: 6px;
+    padding-bottom: 3.2rem;
+    > button {
+      height: 40px;
+      width: 100%;
+      margin-bottom: 0px;
+    }
+  }
+
+  @include min(tablet) {
+    border-radius: 16px;
+    padding: 34px 32px;
+    overflow-y: hidden;
+    .modalCookieHeader {
+      justify-content: center;
+      padding-bottom: 27px;
+      border: none;
+      > img {
+        width: 159px;
+        height: 25px;
+      }
+      > button {
+        right: -11px;
+        top: -16px;
+      }
+    }
+    .modalTextHeader {
+      margin-top: 0px;
+      margin-bottom: 0px;
+      color: #150e06;
+      h4 {
+        font-size: 18px;
+        line-height: 26px;
+      }
+    }
+    .modalButtons {
+      flex-direction: row;
+      padding: 16px 0px;
+
+      button {
+        margin-bottom: 0px;
+        &:last-child {
+          margin-left: 10px;
+        }
+      }
+    }
+    .mainBox {
+      padding-top: 8px;
+      color: #150e06;
+      .mainTitle {
+        margin: 0px;
+        font-size: 18px;
+        line-height: 26px;
+        margin-bottom: 8px;
+      }
+    }
+    .lastButton {
+      padding-bottom: 0rem;
+      > button {
+        width: auto;
+      }
+    }
+  }
+}

package/src/components/molecules/cookie-modal/index.js

@@ -0,0 +1,111 @@
+import React, { useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+import { MdClose } from 'react-icons/md';
+import { translate } from '~helpers/getters';
+import CategoryContainer from './category/index';
+import Button from '~atoms/button';
+import LazyImage from '~hooks/lazy-image';
+import styles from './cookie-modal.module.scss';
+
+const CookieModal = ({ acceptCookies, closeModal, logo = '../../../../../images/logo.svg' }) => {
+  const [categorySection, setCategorySection] = useState(0);
+  const [anlyticsButton, setAnlyticsButton] = useState(false);
+  const [marketing, setMarketingButton] = useState(false);
+  const { translations } = useContext(Context) || {};
+
+  const CategoryObj = [
+    {
+      translateKey: 'neccesary_cookie_title',
+      button: false,
+      altTranslation: 'Neccesary',
+      textKey: 'neccesary_cookie_text',
+    },
+    {
+      translateKey: 'analytical_cookie_title',
+      button: true,
+      altTranslation: 'Analytical And Stadistical',
+      textKey: 'analytical_cookie_text',
+    },
+    {
+      translateKey: 'marketing_cookie_title',
+      button: true,
+      altTranslation: 'Marketing',
+      textKey: 'marketing_cookie_text',
+    },
+  ];
+  return (
+    <div className={styles.modalContent}>
+      <div className={styles.modalCookieHeader}>
+        <LazyImage alt="Irishluck logo" width={150} height={21} src={logo} />
+        <button type="button" onClick={() => closeModal()}>
+          <MdClose />
+        </button>
+      </div>
+      <div className={styles.modalTextHeader}>
+        <h4>{translate(translations, 'privacy_preference_title', 'Privacy Preference Center')}</h4>
+        <p>{translate(translations, 'privacy_preference_text')}</p>
+      </div>
+      <div className={styles.modalButtons}>
+        <Button
+          onClick={() => acceptCookies()}
+          btnText={translate(translations, 'cookie_accept_all_button', 'Accept All Cookies')}
+          isInternalLink={false}
+          isButton
+          gtmClass="cookie-consent-gtm btn-cta"
+        />
+        <Button
+          onClick={() => acceptCookies()}
+          btnText={translate(
+            translations,
+            'cookie_reject_nonnecessary_button',
+            'I reject Non-Necessary'
+          )}
+          isInternalLink={false}
+          isButton
+          gtmClass="cookie-consent-gtm btn-cta"
+        />
+      </div>
+      <div className={styles.mainBox}>
+        <h3 className={styles.mainTitle}>
+          {translate(translations, 'menage_consent_preference', 'Manage Consent Preferences')}
+        </h3>
+
+        {CategoryObj.map((elm, index) => {
+          const state = index === 1 ? anlyticsButton : marketing;
+          const updateState = index === 1 ? setAnlyticsButton : setMarketingButton;
+
+          return (
+            <CategoryContainer
+              obj={elm}
+              index={index}
+              currentState={state}
+              updateState={updateState}
+              setCurrentSection={setCategorySection}
+              currentSection={categorySection}
+              translations={translations}
+            />
+          );
+        })}
+      </div>
+      <div className={styles.lastButton}>
+        <Button
+          onClick={() => acceptCookies()}
+          btnText={translate(translations, 'cookie_confirm_button', 'Confirm my choices')}
+          isInternalLink={false}
+          isButton
+          gtmClass="cookie-consent-gtm btn-cta"
+        />
+      </div>
+    </div>
+  );
+};
+
+CookieModal.propTypes = {
+  acceptCookies: PropTypes.func,
+  closeModal: PropTypes.func,
+  logo: PropTypes.string,
+};
+
+export default CookieModal;

package/src/components/molecules/newsletter/index.js

@@ -19,6 +19,7 @@ const Newsletter = ({ page, openBtnText = 'Unlock Exclusive Bonuses', footer = f
       : `${getUrl(page?.path)}/?subscribed=true`;
 
   const newsletterFloatingContainer = useRef(React.createRef());
+  const ppcPage = page.template === 'ppc';
 
   return (
     <div
@@ -31,18 +32,17 @@ const Newsletter = ({ page, openBtnText = 'Unlock Exclusive Bonuses', footer = f
           text={openBtnText}
           toggleNewsLetter={() => setToggleNewsletter(!toggleNewsetter)}
           gtmClass="newsletter-gtm btn-cta"
+          ppcPage={ppcPage}
         />
       )}
       <div
         className={
           !footer
-            ? toggleNewsetter
-              ? `${styles.form} ${styles.active}`
-              : styles.form
+            ? `${styles.form} ${toggleNewsetter && styles.active} ${ppcPage && styles.ppcPageForm}`
             : styles.newsletter
         }
       >
-        <Form redirectUrl={redirectUrl} />
+        <Form redirectUrl={redirectUrl} ppcPage={ppcPage} />
         {!footer ? (
           <MdClose className={styles.closeBtn} onClick={() => setToggleNewsletter(false)} />
         ) : null}

package/src/gatsby-core-theme/components/molecules/module/index.js

@@ -41,7 +41,7 @@ const Modules = ({ module, page, pageContext }) => {
         return loadable(() => import('gatsby-core-theme/src/components/organisms/accordion'));
       case 'anchor':
         if (items && items.length > 0) {
-          return loadable(() => import('../../organisms/anchor'));
+          return loadable(() => import('gatsby-core-theme/src/components/organisms/anchor'));
         }
         return null;
       case 'carousel':
@@ -123,7 +123,10 @@ const Modules = ({ module, page, pageContext }) => {
         {module.name !== 'top_list' && <ModuleTitle module={module} />}
         {module.name !== 'top_list' && module.module_introduction && (
           // eslint-disable-next-line react/no-danger
-          <div dangerouslySetInnerHTML={{ __html: module?.module_introduction }} />
+          <div
+            className={styles.module_introduction}
+            dangerouslySetInnerHTML={{ __html: module?.module_introduction }}
+          />
         )}
         <ModuleComponent module={module} page={page} pageContext={pageContext} {...extraProps} />
       </div>

package/src/gatsby-core-theme/components/molecules/module/module.module.scss

@@ -1,3 +1,7 @@
 .module {
   background-color: var(--module-background-color);
 }
+
+.module_introduction {
+  font-weight: 400;
+}