Empathy Thematic - Remove purple color from H1 underline

Author: Ricokola

méli-mélo/th-empathy/checklist.html

@@ -1,6 +1,6 @@
 ---
 title: Life Journey Death checklist page layout
-dateModified: 2025-02-13
+dateModified: 2025-10-22
 description: Checklist CSS styles
 lang: en
 pageclass: cnt-wdth-lmtd
@@ -13,7 +13,7 @@
 - empathy.js
 layout: without-h1
 ---
-<h1 property="name" id="wb-cont" class="empathy">{{ page.title }}</h1>
+<h1 property="name" id="wb-cont">{{ page.title }}</h1>
 
 
   <div class="container">

méli-mélo/th-empathy/death.html

@@ -1,6 +1,6 @@
 ---
 title: Life Journey Death home page layout
-dateModified: 2025-02-06
+dateModified: 2025-10-22
 description: Homepage CSS styles
 lang: en
 pageclass: cnt-wdth-lmtd
@@ -13,7 +13,7 @@
 - empathy.js
 layout: without-h1
 ---
-<h1 property="name" id="wb-cont" class="empathy">{{ page.title }}</h1>
+<h1 property="name" id="wb-cont">{{ page.title }}</h1>
 <div class="mrgn-tp-lg">
 	<div class="row wb-eqht-grd gc-empathy provisional wb-init">
 		<div class="col-xs-12 col-md-8 empathy services-and-information small">

méli-mélo/th-empathy/empathy.html

@@ -1,6 +1,6 @@
 ---
 title: Empathy theme
-dateModified: 2024-12-09
+dateModified: 2025-10-22
 description: Empathy CSS styles
 lang: en
 pageclass: cnt-wdth-lmtd
@@ -13,7 +13,7 @@
 - empathy.js
 layout: without-h1
 ---
-<h1 property="name" id="wb-cont" class="empathy">{{ page.title }}</h1>
+<h1 property="name" id="wb-cont">{{ page.title }}</h1>
 <p>The colours offered by this theme aim to evoke a sense of empathy for the user during certain life events, such as grieving the loss of a loved one.</p>
 {% assign metadata = site.pages | where: "output", "false" | where: "componentName", "th-empathy" | first %}
 <p>Sponsor: {{ metadata.sponsor }}</p>
@@ -28,7 +28,6 @@ <h1 property="name" id="wb-cont" class="empathy">{{ page.title }}</h1>
 <h2>CSS classes</h2>
 <dl>
     <dt><code>.empathy</code></dt>
-    <dd>When applied to the <code>&lt;h1&gt;</code> element it set a purple underline to the title element of the page.</dd>
     <dd>When applied to the Steps Quiz along with the <code>wb-steps</code> and <code>quiz</code> it set the thematic colours to the navigation buttons, the progress bar and to the <code>&lt;legend&gt;</code> text.</dd>
     <dt><code>.btn-empathy</code></dt>
     <dd>Along with <code>.btn-primary</code> or <code>.btn-default</code>, set a purple colour thematic to buttons.</dd>
@@ -37,10 +36,6 @@ <h2>CSS classes</h2>
 </dl>
 
 <h2>Examples</h2>
-<h3>Purple Underline to the <code>&lt;h1&gt;</code> </h3>
-<p>The example has been applied to the <code>&lt;h1&gt;</code> element of this page.</p>
-<h4>Code</h4>
-<pre><code>&lt;h1 property="name" id="wb-cont" class="empathy"&gt;&lt;-- Page title --&gt;&lt;/h1&gt;</code></pre>
 
 <h3>Purple Button</h3>
 <button class="btn btn-primary btn-empathy" type="button">Button</button>

méli-mélo/th-empathy/meta.md

@@ -31,6 +31,9 @@ pages:
 sponsor: Francis Snoddy on behalf of ESDC - Portfolio Web
 
 changes:
+  - date: 2025-10-22
+    description: Removal of the custom purple color for the bar underneath the main title H1 of the thematic. The coporate red color will now be applied on page load. This is to aligned with TBS/DTO recommendations and directives.   
+    publicImpact: No impact since that the only site "What to do when someone dies" make use of this thematic is already using the red underline. 
   - date: 2024-12-02
     description: Life Journey home page layout, includes the code and an example to enable the home page layout to be used by current and future Life Journey projects
     departmentImpact: Having this layout integrated will allow Canada.ca to have a more streamlined and consistent theme throughout the Journey Labs projects. Currently the pages that make use of this layout have it hardcoded into the page

méli-mélo/th-empathy/style.css

@@ -34,15 +34,6 @@
     color: #471F70;
 }
 
-/* Thematic Heading 1 */
-h1#wb-cont.empathy {
-    border-bottom: 0.18em solid #5C2790;
-    border-image: linear-gradient(to right, #5C2790 71px, transparent 71px);
-    border-image-slice: 1;
-	border-left-width: 0;
-	border-right-width: 0;
-	border-top-width: 0;
-}
 /* Thematic text color */
 .text-empathy {
 	color: #5C2790;