From 6d3088ca2aee3fe462676edd9437b37a5f011db6 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Wed, 15 Jan 2025 09:53:50 -0600
Subject: [PATCH] Merge pull request #22740 from overleaf/jel-mono-text

[web] Eyebrow text margin

GitOrigin-RevId: cdf1eadf8ad1da4d81724e8aeb9994cc931388ce
---
 services/web/app/views/_mixins/eyebrow.pug    |  2 +-
 .../stylesheets/app/website-redesign.less     |  6 ++++-
 .../bootstrap-5/components/styled-text.scss   | 27 ++++++++++++-------
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/services/web/app/views/_mixins/eyebrow.pug b/services/web/app/views/_mixins/eyebrow.pug
index 7d403b1f51..c5f01a10db 100644
--- a/services/web/app/views/_mixins/eyebrow.pug
+++ b/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") }
\ No newline at end of file
diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less
index 21b4cf5995..f66bd83d13 100644
--- a/services/web/frontend/stylesheets/app/website-redesign.less
+++ b/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;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss b/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss
index 151c03f360..e872c3c252 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss
+++ b/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;
 }