Merge pull request #22740 from overleaf/jel-mono-text

[web] Eyebrow text margin

GitOrigin-RevId: cdf1eadf8ad1da4d81724e8aeb9994cc931388ce

services/web/app/views/_mixins/eyebrow.pug

@@ -1,5 +1,5 @@
 mixin eyebrow(text)
-    span.mono-text
+    span.eyebrow-text
         span(aria-hidden="true") {
         span #{text}
         span(aria-hidden="true") }

services/web/frontend/stylesheets/app/website-redesign.less

@@ -45,12 +45,16 @@
   h1,
   h2,
   h3 {
-    > span.mono-text {
+    > span.eyebrow-text {
       display: block;
       margin-bottom: @margin-xs;
     }
   }
 
+  .eyebrow-text {
+    .mono-text;
+  }
+
   // override .btn default style
   .btn {
     font-weight: 600;

services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss

@@ -36,13 +36,22 @@
   margin: 0;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5 {
-  > span.mono-text {
-    display: block;
-    margin-bottom: var(--spacing-04);
-  }
+.eyebrow-text {
+  @extend .mono-text;
+
+  display: block;
+  margin-bottom: var(--spacing-04);
+}
+
+p:has(.eyebrow-text) {
+  margin-bottom: 0;
+}
+
+p:has(.eyebrow-text) + h1,
+p:has(.eyebrow-text) + h2,
+p:has(.eyebrow-text) + h3,
+p:has(.eyebrow-text) + h4,
+p:has(.eyebrow-text) + h5,
+p:has(.eyebrow-text) + h6 {
+  margin-top: 0;
 }