From 457ba8b1dd780e461e23c4318ca639ade80c07a0 Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Mon, 9 Feb 2026 18:05:08 +0100
Subject: [PATCH] Separate heading and body font overrides in CMS (#28101)

* Separate heading and body font override mixins

* Separately target headings and other fonts overrides

* Separately target headings and other fonts overrides

* fix: allow independent heading font overrides without breaking existing entries

GitOrigin-RevId: b9b08316c1793fb305a8412986b78bfe5de43738
---
 .../stylesheets/pages/website-redesign.scss   | 99 +++++++++++++++----
 1 file changed, 80 insertions(+), 19 deletions(-)

diff --git a/services/web/frontend/stylesheets/pages/website-redesign.scss b/services/web/frontend/stylesheets/pages/website-redesign.scss
index ae203fed65..aa8d3763b5 100644
--- a/services/web/frontend/stylesheets/pages/website-redesign.scss
+++ b/services/web/frontend/stylesheets/pages/website-redesign.scss
@@ -1,30 +1,39 @@
 // TODO: .website-redesign to be removed once fully rolled out
 
+@mixin apply-font-size($size) {
+  @if $size == 'heading-2xl' {
+    @include heading-2xl;
+  } @else if $size == 'heading-xl' {
+    @include heading-xl;
+  } @else if $size == 'heading-lg' {
+    @include heading-lg;
+  } @else if $size == 'heading-md' {
+    @include heading-md;
+  } @else if $size == 'heading-sm' {
+    @include heading-sm;
+  } @else if $size == 'heading-xs' {
+    @include heading-xs;
+  } @else if $size == 'base' {
+    @include body-base;
+  }
+}
+
 @mixin reset-font-size($size) {
+  p,
+  ul,
+  ol {
+    @include apply-font-size($size);
+  }
+}
+
+@mixin reset-heading-font-size($size) {
   h1,
   h2,
   h3,
   h4,
   h5,
-  h6,
-  p,
-  ul,
-  ol {
-    @if $size == 'heading-2xl' {
-      @include heading-2xl;
-    } @else if $size == 'heading-xl' {
-      @include heading-xl;
-    } @else if $size == 'heading-lg' {
-      @include heading-lg;
-    } @else if $size == 'heading-md' {
-      @include heading-md;
-    } @else if $size == 'heading-sm' {
-      @include heading-sm;
-    } @else if $size == 'heading-xs' {
-      @include heading-xs;
-    } @else if $size == 'base' {
-      @include body-base;
-    }
+  h6 {
+    @include apply-font-size($size);
   }
 }
 
@@ -116,6 +125,10 @@
     @include reset-font-size('heading-2xl');
   }
 
+  .heading-font-size-h1 {
+    @include reset-heading-font-size('heading-2xl');
+  }
+
   h2,
   .h2 {
     @include heading-xl;
@@ -125,6 +138,10 @@
     @include reset-font-size('heading-xl');
   }
 
+  .heading-font-size-h2 {
+    @include reset-heading-font-size('heading-xl');
+  }
+
   h3,
   .h3 {
     @include heading-lg;
@@ -134,6 +151,10 @@
     @include reset-font-size('heading-lg');
   }
 
+  .heading-font-size-h3 {
+    @include reset-heading-font-size('heading-lg');
+  }
+
   h4,
   .h4 {
     @include heading-md;
@@ -143,6 +164,10 @@
     @include reset-font-size('heading-md');
   }
 
+  .heading-font-size-h4 {
+    @include reset-heading-font-size('heading-md');
+  }
+
   h5,
   .h5 {
     @include heading-sm;
@@ -152,6 +177,10 @@
     @include reset-font-size('heading-sm');
   }
 
+  .heading-font-size-h5 {
+    @include reset-heading-font-size('heading-sm');
+  }
+
   h6,
   .h6 {
     @include heading-xs;
@@ -161,10 +190,18 @@
     @include reset-font-size('heading-xs');
   }
 
+  .heading-font-size-h6 {
+    @include reset-heading-font-size('heading-xs');
+  }
+
   .font-size-base {
     @include reset-font-size('base');
   }
 
+  .heading-font-size-base {
+    @include reset-heading-font-size('base');
+  }
+
   // smaller fonts for mobile
   @include media-breakpoint-down(lg) {
     h1,
@@ -176,6 +213,10 @@
       @include reset-font-size('heading-xl');
     }
 
+    .heading-font-size-h1 {
+      @include reset-heading-font-size('heading-xl');
+    }
+
     h2,
     .h2 {
       @include heading-lg;
@@ -185,6 +226,10 @@
       @include reset-font-size('heading-lg');
     }
 
+    .heading-font-size-h2 {
+      @include reset-heading-font-size('heading-lg');
+    }
+
     h3,
     .h3 {
       @include heading-md;
@@ -194,6 +239,10 @@
       @include reset-font-size('heading-md');
     }
 
+    .heading-font-size-h3 {
+      @include reset-heading-font-size('heading-md');
+    }
+
     h4,
     .h4 {
       @include heading-sm;
@@ -203,6 +252,10 @@
       @include reset-font-size('heading-sm');
     }
 
+    .heading-font-size-h4 {
+      @include reset-heading-font-size('heading-sm');
+    }
+
     h5,
     .h5 {
       @include heading-xs;
@@ -212,6 +265,10 @@
       @include reset-font-size('heading-xs');
     }
 
+    .heading-font-size-h5 {
+      @include reset-heading-font-size('heading-xs');
+    }
+
     h6,
     .h6 {
       @include body-base;
@@ -220,6 +277,10 @@
     .font-size-h6 {
       @include reset-font-size('base');
     }
+
+    .heading-font-size-h6 {
+      @include reset-heading-font-size('base');
+    }
   }
 
   .font-size-display-xs {