fix: header background color issues fixed on 7.2 - thanks Nick!

Author: elibosley

@tailwind-shared/theme-variants.css

@@ -75,18 +75,19 @@
 /* 
  * Dynamic color variables for user overrides from GraphQL
  * These are set via JavaScript and override the theme defaults
+ * Using :root with class for higher specificity to override theme classes
  */
-.has-custom-header-text {
+:root.has-custom-header-text {
   --header-text-primary: var(--custom-header-text-primary);
   --color-header-text-primary: var(--custom-header-text-primary);
 }
 
-.has-custom-header-meta {
+:root.has-custom-header-meta {
   --header-text-secondary: var(--custom-header-text-secondary);
   --color-header-text-secondary: var(--custom-header-text-secondary);
 }
 
-.has-custom-header-bg {
+:root.has-custom-header-bg {
   --header-background-color: var(--custom-header-background-color);
   --color-header-background: var(--custom-header-background-color);
   --header-gradient-start: var(--custom-header-gradient-start);

web/src/components/UserProfile.ce.vue

@@ -106,14 +106,14 @@ onMounted(() => {
 
     <div class="relative z-10 flex h-full flex-row items-center justify-end gap-x-2">
       <div
-        class="text-header-text-primary relative flex flex-col-reverse items-center border-0 text-base md:flex-row md:items-center"
+        class="text-header-text-primary relative flex flex-col-reverse items-center border-0 text-base md:!flex-row md:!items-center"
       >
         <template v-if="description && theme?.descriptionShow">
           <span
-            class="hidden text-center text-base md:!inline-flex md:items-center md:text-right"
+            class="hidden text-center text-base md:!inline-flex md:!items-center md:!text-right"
             v-html="description"
           />
-          <span class="text-header-text-secondary hidden px-2 md:!inline-flex md:items-center"
+          <span class="text-header-text-secondary hidden px-2 md:!inline-flex md:!items-center"
             >&bull;</span
           >
         </template>