Merge pull request #20544 from overleaf/jel-cms-bs5-fonts

[web] Font size overrides for CMS BS5 pages

GitOrigin-RevId: 0803b3b76b3a1c60a26bf56d94a27d67270b7313

services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss

@@ -3,15 +3,6 @@
   /about/*, /contact, /legal, /blog/*, /for/*, /events/*
 */
 .cms-page {
-  h1 {
-    font-size: 2rem; // 32px
-    line-height: 1.333;
-  }
-
-  h2 {
-    font-size: 1.5rem; // 24px
-  }
-
   .sales-contact-form-left-column {
     .sales-contact-form-heading-title {
       font-size: 2.25rem;
@@ -308,6 +299,25 @@
     height: auto;
     max-width: 100%;
   }
+
+  /*
+    cards
+  */
+  .card-body {
+    // card-body all have div before the actual content
+    // due to option to override font size
+    > :first-child {
+      > :first-child {
+        margin-top: 0;
+      }
+    }
+
+    > :last-child {
+      > :last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 }
 
 .icon-with-content {

services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss

@@ -1,7 +1,36 @@
 // TODO: .website-redesign to be removed once fully rolled out
 
+@mixin reset-font-size($size) {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    @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;
+    }
+  }
+}
+
 .website-redesign {
   // hero section of features, enterprises, and universities will have an image that will overflow the page
+
+  --bs-body-color: var(--neutral-70);
+
   overflow-x: hidden;
 
   a {
@@ -34,6 +63,130 @@
     }
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+  }
+
+  h1,
+  .h1 {
+    @include heading-2xl;
+  }
+
+  .font-size-h1 {
+    @include reset-font-size('heading-2xl');
+  }
+
+  h2,
+  .h2 {
+    @include heading-xl;
+  }
+
+  .font-size-h2 {
+    @include reset-font-size('heading-xl');
+  }
+
+  h3,
+  .h3 {
+    @include heading-lg;
+  }
+
+  .font-size-h3 {
+    @include reset-font-size('heading-lg');
+  }
+
+  h4,
+  .h4 {
+    @include heading-md;
+  }
+
+  .font-size-h4 {
+    @include reset-font-size('heading-md');
+  }
+
+  h5,
+  .h5 {
+    @include heading-sm;
+  }
+
+  .font-size-h5 {
+    @include reset-font-size('heading-sm');
+  }
+
+  h6,
+  .h6 {
+    @include heading-xs;
+  }
+
+  .font-size-h6 {
+    @include reset-font-size('heading-xs');
+  }
+
+  .font-size-base {
+    @include reset-font-size('base');
+  }
+
+  // smaller fonts for mobile
+  @include media-breakpoint-down(lg) {
+    h1,
+    .h1 {
+      @include heading-xl;
+    }
+
+    .font-size-h1 {
+      @include reset-font-size('heading-xl');
+    }
+
+    h2,
+    .h2 {
+      @include heading-lg;
+    }
+
+    .font-size-h2 {
+      @include reset-font-size('heading-lg');
+    }
+
+    h3,
+    .h3 {
+      @include heading-md;
+    }
+
+    .font-size-h3 {
+      @include reset-font-size('heading-md');
+    }
+
+    h4,
+    .h4 {
+      @include heading-sm;
+    }
+
+    .font-size-h4 {
+      @include reset-font-size('heading-sm');
+    }
+
+    h5,
+    .h5 {
+      @include heading-xs;
+    }
+
+    .font-size-h5 {
+      @include reset-font-size('heading-xs');
+    }
+
+    h6,
+    .h6 {
+      @include body-base;
+    }
+
+    .font-size-h6 {
+      @include reset-font-size('base');
+    }
+  }
+
   .card {
     --bs-card-bg: var(--neutral-10);
     --bs-card-border-radius: var(--border-radius-large);