fixed header colors

src/common-components/site-sub-header/site-sub-header.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
       <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
-        <h5 class="text-center fw-normal mb-0" >
+        <h5 class="text-center fw-normal mb-0" :class="headerColor">
           <span>
             {{ content }}
           </span>
@@ -44,7 +44,10 @@ import buttonBack from "@/common-components/site-sub-header/button-back/button-b
             backButtonAccessibleText()
             {
               return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
-            }
+            },
+            headerColor() {
+                return this.subText ? "dark-header" : "light-header";
+            },
         },
         methods: {
           clickEvent() {
@@ -57,6 +60,14 @@ import buttonBack from "@/common-components/site-sub-header/button-back/button-b
 
   
 <style lang="scss" scoped>
+.dark-header {
+    color: $black;
+}
+
+.light-header {
+    color: $gray-550;
+}
+
 h5 {
   line-height: 32px;
   max-width: 300px;
@@ -65,4 +76,7 @@ h5 {
     color: inherit;
   }
 }
+p.small {
+    color: $gray-550;
+}
 </style>