From 76b9058acbdb6667ac6911d1a4d75192635b90d0 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Wed, 2 Oct 2024 09:35:48 -0500
Subject: [PATCH] Merge pull request #20535 from
 overleaf/as-cms-large-black-link

[web] CMS - Add styles for large black link with angled arrow

GitOrigin-RevId: d33f6b121d51619cd373c4ede2266f7ef4da2754
---
 .../stylesheets/bootstrap-5/base/links.scss    | 18 ++++++++++++++++++
 .../bootstrap-5/pages/website-redesign.scss    | 11 +++++++++++
 2 files changed, 29 insertions(+)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/links.scss b/services/web/frontend/stylesheets/bootstrap-5/base/links.scss
index a44df31efb..c24d974366 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/base/links.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/base/links.scss
@@ -29,3 +29,21 @@ a {
     color: var(--green-60);
   }
 }
+
+.link-black-full-width {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  color: var(--neutral-90);
+  font-weight: 600;
+  text-decoration: none;
+
+  &:visited {
+    color: var(--neutral-90);
+  }
+
+  &:hover {
+    color: var(--neutral-90);
+    text-decoration: underline;
+  }
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
index 5c1cf63045..615cf845d0 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
@@ -56,6 +56,7 @@
     i {
       vertical-align: middle;
       margin-left: var(--spacing-02);
+      padding-bottom: 3px;
     }
 
     &.link-lg {
@@ -68,6 +69,16 @@
       }
     }
 
+    &.link-xl {
+      font-size: var(--font-size-06);
+      line-height: var(--line-height-05);
+
+      i {
+        font-size: var(--font-size-06);
+        line-height: var(--font-size-06);
+      }
+    }
+
     // Specific overrides for link styles
     &.link-monospace {
       text-decoration: none;