Improvement: Rework Hn Structure

modules/blockreassurance/views/templates/hook/blockreassurance.tpl

@@ -9,7 +9,7 @@
         <li>
           <div class="block-reassurance-item">
             <img src="{$element.image}" alt="{$element.text}" loading="lazy">
-            <span class="h6">{$element.text}</span>
+            <span class="sixth-title">{$element.text}</span>
           </div>
         </li>
       {/foreach}

modules/blockwishlist/views/templates/components/modals/add-to-wishlist.tpl

@@ -19,7 +19,7 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header px-3">
-          <h5 class="modal-title">{l s='Add to wishlist' d='Modules.Blockwishlist.Shop'}</h5>
+          <p class="fifth-title modal-title">{l s='Add to wishlist' d='Modules.Blockwishlist.Shop'}</p>
           <button
             type="button"
             class="btn-close"

modules/blockwishlist/views/templates/components/modals/create.tpl

@@ -25,7 +25,7 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header px-3">
-          <h5 class="modal-title">((title))</h5>
+          <p class="fifth-title modal-title">((title))</p>
           <button
             type="button"
             class="btn-close"

modules/blockwishlist/views/templates/components/modals/delete.tpl

@@ -30,7 +30,7 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header px-3">
-          <h5 class="modal-title">((modalTitle))</h5>
+          <p class="fifth-title modal-title">((modalTitle))</p>
           <button
             type="button"
             class="btn-close"

modules/blockwishlist/views/templates/components/modals/login.tpl

@@ -20,7 +20,7 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header px-3">
-          <h5 class="modal-title">{l s='Sign in' d='Modules.Blockwishlist.Shop'}</h5>
+          <p class="fifth-title modal-title">{l s='Sign in' d='Modules.Blockwishlist.Shop'}</p>
           <button
             type="button"
             class="btn-close"

modules/blockwishlist/views/templates/components/modals/rename.tpl

@@ -24,7 +24,7 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header px-3">
-          <h5 class="modal-title">((title))</h5>
+          <p class="fifth-title modal-title">((title))</p>
           <button
             type="button"
             class="btn-close"

modules/blockwishlist/views/templates/components/modals/share.tpl

@@ -24,7 +24,7 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header px-3">
-          <h5 class="modal-title">((title))</h5>
+          <p class="fifth-title modal-title">((title))</p>
           <button
             type="button"
             class="btn-close"

modules/contactform/views/templates/widget/contactform.tpl

@@ -17,7 +17,7 @@
     {if !$notifications || $notifications.nw_error}
       <section class="form-fields">
 
-        <h1 class="h2 mb-4">{l s='Contact us' d='Shop.Theme.Global'}</h1>
+        <h1 class="second-title mb-4">{l s='Contact us' d='Shop.Theme.Global'}</h1>
 
         <div class="mb-3">
           <label class="form-label">{l s='Subject' d='Shop.Forms.Labels'}</label>

modules/productcomments/views/templates/hook/alert-modal.tpl

@@ -19,10 +19,10 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2>
+        <p class="second-title">
           <i class="material-icons {$icon}" data-icon="{$icon}"></i>
           {$modal_title}
-        </h2>
+        </p>
       </div>
       <div class="modal-body">
         <div class="row">

modules/productcomments/views/templates/hook/confirm-modal.tpl

@@ -27,10 +27,10 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2>
+        <p class="second-title">
           <i class="material-icons {$icon}" data-icon="{$icon}"></i>
           {$modal_title}
-        </h2>
+        </p>
       </div>
       <div class="modal-body">
         <div id="{$modal_id}-message">

modules/productcomments/views/templates/hook/post-comment-modal.tpl

@@ -11,7 +11,7 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <p class="h4 mb-0">{l s='Write your review' d='Modules.Productcomments.Shop'}</p>
+        <p class="fourth-title mb-0">{l s='Write your review' d='Modules.Productcomments.Shop'}</p>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -97,7 +97,7 @@
               {/if}
             </div>
             <div class="col-sm-4">
-              <h3>{$product.name}</h3>
+              <p class="third-title">{$product.name}</p>
               {block name='product_description_short'}
                 <div itemprop="description">{$product.description_short nofilter}</div>
               {/block}

modules/ps_checkpayment/views/templates/hook/payment_return.tpl

@@ -5,8 +5,8 @@
 
 <div class="card border-1 mb-3">
   <div class="card-body">
-    <h4 class="h4">{l s='Payment information' d='Shop.Theme.Checkout'}</h4>
-    <h6 class="card-subtitle mb-3 text-muted">{l s='Pay by Check' d='Modules.Checkpayment.Shop'}</h6>
+    <p class="fourth-title">{l s='Payment information' d='Shop.Theme.Checkout'}</p>
+    <p class="fw-bold card-subtitle mb-3 text-muted">{l s='Pay by Check' d='Modules.Checkpayment.Shop'}</p>
     {if $status === 'ok'}
       <p>
           {l s='You have chosen payment by check.' d='Modules.Checkpayment.Shop'}<br/>

modules/ps_contactinfo/ps_contactinfo-rich.tpl

@@ -3,7 +3,7 @@
  * file that was distributed with this source code.
  *}
 <div class="contact__details">
-  <h2 class="contact__title">{l s='Store information' d='Shop.Theme.Global'}</h4>
+  <p class="second-title contact__title">{l s='Store information' d='Shop.Theme.Global'}</p>
   <div class="contact__item">
     <i class="material-icons" aria-hidden="true">&#xE55F;</i>
     <div class="contact__info">{$contact_infos.address.formatted nofilter}</div>

modules/ps_facetedsearch/ps_facetedsearch.tpl

@@ -12,7 +12,7 @@
 
   <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas-faceted" aria-labelledby="faceted-offcanvas-label">
     <div class="offcanvas-header">
-      <h5 class="offcanvas-title" id="faceted-offcanvas-label">{l s='Filter By' d='Shop.Theme.Actions'}</h5>
+      <p class="fifth-title offcanvas-title" id="faceted-offcanvas-label">{l s='Filter By' d='Shop.Theme.Actions'}</p>
       <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body">

modules/ps_legalcompliance/views/templates/hook/hookDisplayFooter.tpl

@@ -5,7 +5,7 @@
 
 <div class="footer__block col-md-6 col-lg-3">
 
-  <h3 class="footer__block__title d-none d-md-flex">{l s='Information' d='Modules.Legalcompliance.Shop'}</h3>
+  <p class="footer__block__title d-none d-md-flex">{l s='Information' d='Modules.Legalcompliance.Shop'}</p>
 
   <div class="footer__block__toggle d-md-none collapsed" data-target="#footer_eu_about_us_list" data-bs-toggle="collapse">
     <span class="footer__block__title">{l s='Information' d='Modules.Legalcompliance.Shop'}</span>

modules/ps_linklist/views/templates/hook/linkblock-column.tpl

@@ -4,20 +4,16 @@
  *}
 
 {foreach $linkBlocks as $linkBlock}
-  <div class="footer__block col-md-6 col-lg-3">
+  <div class="left-block">
 
-    <p class="footer__block__title d-none d-md-flex">{$linkBlock.title}</p>
+    <p class="left-block__title">{$linkBlock.title}</p>
 
-    <div class="footer__block__toggle d-md-none collapsed" data-target="#footer_sub_menu_{$linkBlock.id}" data-bs-toggle="collapse">
-      <span class="footer__block__title">{$linkBlock.title}</span>
-      <i class="material-icons" aria-hidden="true">arrow_drop_down</i>
-    </div>
-    <ul id="footer_sub_menu_{$linkBlock.id}" class="footer__block__content footer__block__content-list collapse">
+    <ul id="left-block__{$linkBlock.id}" class="left-block__content left-block__content--list">
       {foreach $linkBlock.links as $link}
         <li>
           <a
               id="{$link.id}-{$linkBlock.id}"
-              class="{$link.class}"
+              class="left-block__link {$link.class}"
               href="{$link.url}"
               title="{$link.description}"
               {if !empty($link.target)} target="{$link.target}" {/if}

modules/ps_mainmenu/ps_mainmenu.tpl

@@ -60,7 +60,7 @@
     >
       <ul class="menu__list">
         {if $depth >= 1}
-          <li class="main-menu__title h5">{$parent.label}</li>
+          <li class="main-menu__title fifth-title">{$parent.label}</li>
         {/if}
         {foreach from=$nodes item=node}
           <li

modules/ps_shoppingcart/modal.tpl

@@ -7,10 +7,10 @@
   <div class="modal-dialog modal-lg modal-fullscreen-sm-down" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h4 class="modal-title" id="myModalLabel">
+        <p class="fourth-title modal-title mb-0" id="myModalLabel">
           <i class="material-icons me-1" aria-hidden="true">&#xE5CA;</i>
           {l s='Product successfully added to your shopping cart' d='Shop.Theme.Checkout'}
-        </h4>
+        </p>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}"></button>
       </div>
       <div class="modal-body">
@@ -32,7 +32,7 @@
                 />
               </div>
               <div class="col-sm-8 col-md-7">
-                <h6 class="h6 product-name">{$product.name}</h6>
+                <p class="sixth-title product-name">{$product.name}</p>
                 <p class="product-price">{$product.price}</p>
                 {hook h='displayProductPriceBlock' product=$product type="unit_price"}
                 {foreach from=$product.attributes item="property_value" key="property"}

modules/ps_wirepayment/views/templates/hook/payment_return.tpl

@@ -5,8 +5,8 @@
 
 <div class="card border-1 mb-3">
   <div class="card-body">
-    <h4 class="h4">{l s='Payment information' d='Shop.Theme.Checkout'}</h4>
-    <h6 class="card-subtitle mb-3 text-muted">{l s='Pay by Bank Wire' d='Modules.Wirepayment.Shop'}</h6>
+    <p class="fourth-title">{l s='Payment information' d='Shop.Theme.Checkout'}</p>
+    <p class="sixth-title card-subtitle mb-3 text-muted">{l s='Pay by Bank Wire' d='Modules.Wirepayment.Shop'}</p>
     {if $status === 'ok'}
       <p>
         {l s='You have chosen payment by bank transfer.' d='Modules.Wirepayment.Shop'}<br/>

modules/psgdpr/views/templates/front/customerPersonalData.tpl

@@ -24,13 +24,13 @@
 
  {block name='page_content'}
   <div class="mb-4">
-    <h2 class="fs-5">{l s='Access to my data' mod='psgdpr'}</h2>
+    <h2 class="fifth-title">{l s='Access to my data' mod='psgdpr'}</h2>
     <p>{l s='At any time, you have the right to retrieve the data you have provided to our site. Click on "Get my data" to automatically download a copy of your personal data on a pdf or csv file.' mod='psgdpr'}</p>
     <a id="exportDataToCsv" class="btn btn-outline-primary d-block d-sm-inline-block mx-0 mb-2 mb-sm-0" target="_blank" href="{$psgdpr_csv_controller|escape:'htmlall':'UTF-8'}"><i class="material-icons" aria-hidden="true">download</i> {l s='Get my data to CSV' mod='psgdpr'}</a>
     <a id="exportDataToPdf" class="btn btn-outline-primary d-block d-sm-inline-block mx-0 mx-sm-2" target="_blank" href="{$psgdpr_pdf_controller|escape:'htmlall':'UTF-8'}"><i class="material-icons" aria-hidden="true">download</i> {l s='Get my data to PDF' mod='psgdpr'}</a>
   </div>
 
-  <h2 class="fs-5">{l s='Rectification & Erasure requests' mod='psgdpr'}</h2>
+  <h2 class="fifth-title">{l s='Rectification & Erasure requests' mod='psgdpr'}</h2>
   <p>{l s='You have the right to modify all the personal information found in the "My Account" page. For any other request you might have regarding the rectification and/or erasure of your personal data, please contact us through our' mod='psgdpr'} <a href="{$psgdpr_contactUrl|escape:'htmlall':'UTF-8'}">{l s='contact page' mod='psgdpr'}</a>. {l s='We will review your request and reply as soon as possible.' mod='psgdpr'}</p>
 
  {literal}

src/scss/core/components/_index.scss

@@ -15,3 +15,4 @@
 @import "progress-ring";
 @import "customization-modal";
 @import "quickview-modal";
+@import "typography";

src/scss/core/components/_typography.scss

@@ -0,0 +1,111 @@
+// SCSS rules for typography
+
+:root {
+  // Global
+  --title-margin-bottom: 0.5rem;
+  --title-line-height: 1.2;
+
+  // First title
+  --first-title-font-family: $font-family-base;
+  --first-title-font-size: calc(1.375rem + 1.5vw);
+  --first-title-font-style: normal;
+  --first-title-font-weight: 600;
+  // Second title
+  --second-title-font-family: $font-family-base;
+  --second-title-font-size: calc(1.325rem + 0.9vw);
+  --second-title-font-style: normal;
+  --second-title-font-weight: 600;
+  // Third title
+  --third-title-font-family: $font-family-base;
+  --third-title-font-size: calc(1.3rem + 0.6vw);
+  --third-title-font-style: normal;
+  --third-title-font-weight: 600;
+  // Fourth title
+  --fourth-title-font-family: $font-family-base;
+  --fourth-title-font-size: calc(1.275rem + 0.3vw);
+  --fourth-title-font-style: normal;
+  --fourth-title-font-weight: 600;
+  // Fifth title
+  --fifth-title-font-family: $font-family-base;
+  --fifth-title-font-size: 1.25rem;
+  --fifth-title-font-style: normal;
+  --fifth-title-font-weight: 600;
+  // Sixth title
+  --sixth-title-font-family: $font-family-base;
+  --sixth-title-font-size: 1rem;
+  --sixth-title-font-style: normal;
+  --sixth-title-font-weight: 600;
+
+  @include media-breakpoint-up(xl) {
+    --first-title-font-size: calc(#{$font-size-base} * 2.5);
+    --second-title-font-size: calc(#{$font-size-base} * 2);
+    --third-title-font-size: calc(#{$font-size-base} * 1.75);
+    --fourth-title-font-size: calc(#{$font-size-base} * 1.5);
+  }
+}
+
+// Titles
+.first-title,
+.second-title,
+.third-title,
+.fourth-title,
+.fifth-title,
+.sixth-title{
+  &.modal-title{
+    margin-bottom: 0;
+  }
+}
+
+.first-title{
+  margin-bottom: var(--title-margin-bottom);
+  font-family: var(--first-title-font-family);
+  font-size: var(--first-title-font-size);
+  font-style: var(--first-title-font-style);
+  font-weight: var(--first-title-font-weight);
+  line-height: var(--title-line-height);
+}
+
+.second-title{
+  margin-bottom: var(--title-margin-bottom);
+  font-family: var(--second-title-font-family);
+  font-size: var(--second-title-font-size);
+  font-style: var(--second-title-font-style);
+  font-weight: var(--second-title-font-weight);
+  line-height: var(--title-line-height);
+}
+
+.third-title{
+  margin-bottom: var(--title-margin-bottom);
+  font-family: var(--third-title-font-family);
+  font-size: var(--third-title-font-size);
+  font-style: var(--third-title-font-style);
+  font-weight: var(--third-title-font-weight);
+  line-height: var(--title-line-height);
+}
+
+.fourth-title{
+  margin-bottom: var(--title-margin-bottom);
+  font-family: var(--fourth-title-font-family);
+  font-size: var(--fourth-title-font-size);
+  font-style: var(--fourth-title-font-style);
+  font-weight: var(--fourth-title-font-weight);
+  line-height: var(--title-line-height);
+}
+
+.fifth-title{
+  margin-bottom: var(--title-margin-bottom);
+  font-family: var(--fifth-title-font-family);
+  font-size: var(--fifth-title-font-size);
+  font-style: var(--fifth-title-font-style);
+  font-weight: var(--fifth-title-font-weight);
+  line-height: var(--title-line-height);
+}
+
+.sixth-title{
+  margin-bottom: var(--title-margin-bottom);
+  font-family: var(--sixth-title-font-family);
+  font-size: var(--sixth-title-font-size);
+  font-style: var(--sixth-title-font-style);
+  font-weight: var(--sixth-title-font-weight);
+  line-height: var(--title-line-height);
+}

src/scss/core/layout/_index.scss

@@ -2,3 +2,4 @@
 @import "header-top";
 @import "header-bottom";
 @import "footer";
+@import "left-column";

src/scss/core/layout/_left-column.scss

@@ -0,0 +1,39 @@
+$component-name: left-block;
+
+#left-column {
+  --#{$component-name}-title-color: #{$gray-800};
+  --#{$component-name}-title-size: 1.5rem;
+  --#{$component-name}-title-spacing: 1rem;
+  --#{$component-name}-subtitle-color: #{$gray-800};
+  --#{$component-name}-subtitle-size: 1rem;
+  --#{$component-name}-subtitle-spacing: 0.25rem;
+  --#{$component-name}-border-bottom: 1px solid #{$gray-200};
+}
+
+.#{$component-name} {
+  padding-bottom: 1rem;
+  margin-bottom: 2rem;
+  border-bottom: var(--#{$component-name}-border-bottom);
+
+  &__title {
+    padding: 0;
+    margin-bottom: var(--#{$component-name}-title-spacing);
+    font-size: var(--#{$component-name}-title-size);
+    font-weight: 600;
+    border: none;
+  }
+
+  &__content {
+    &--list {
+      margin-bottom: 0;
+    }
+  }
+
+  &__link {
+    display: block;
+    padding: var(--#{$component-name}-subtitle-spacing) 0;
+    font-size: var(--#{$component-name}-subtitle-size);
+    font-weight: 600;
+    color: var(--#{$component-name}-subtitle-color);
+  }
+}