Merge pull request #18683 from overleaf/jel-new-styles-quote

[web] New quote style for plans page and CMS pages using `Element | Quote`

GitOrigin-RevId: c4a089727f023d5d28a036c6babbdc773d7fc06a

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

@@ -0,0 +1,15 @@
+mixin quoteLargeTextCentered(quote, person, position, affiliation, link, pictureUrl, pictureAltAttr)
+	blockquote.quote-large-text-centered
+		.quote !{quote}
+		if pictureUrl
+			.quote-img
+				img(src=pictureUrl alt=pictureAltAttr)
+		footer
+			div.quote-person
+				strong #{person}
+			if person && position
+				div #{position}
+				if affiliation
+					div #{affiliation}
+			if link
+				.quote-link !{link}

services/web/frontend/stylesheets/app/cms-page.less

@@ -131,7 +131,7 @@
   /*
     quotes
   */
-  blockquote {
+  blockquote:not(.quote-large-text-centered) {
     margin: 0;
     position: relative;
     /*

services/web/frontend/stylesheets/components/card.less

@@ -99,7 +99,8 @@
   &.card-dark-green-bg {
     background: var(--dark-jungle-green);
     border-radius: 16px;
-    color: white;
+    color: var(--green-10);
+    padding: var(--spacing-09);
 
     a:not(.btn) {
       color: var(--mint-green);

services/web/frontend/stylesheets/components/quote.less

@@ -0,0 +1,60 @@
+blockquote.quote-large-text-centered {
+  text-align: center;
+  font-size: var(
+    --font-size-07
+  ) !important; //override .website-redesign blockquote
+  font-weight: 600 !important; //override .website-redesign blockquote
+  line-height: var(
+    --line-height-06
+  ) !important; //override .website-redesign blockquote
+
+  // customize open/close quote placement.
+  // Otherwise, close is after footer and before is above quote
+  &:before,
+  &:after {
+    content: none;
+  }
+  .quote {
+    margin-bottom: var(--spacing-08);
+    &:before {
+      content: open-quote;
+    }
+    &:after {
+      content: close-quote;
+    }
+  }
+
+  .quote-img {
+    img {
+      height: 64px;
+      max-width: 64px;
+    }
+  }
+
+  footer {
+    color: inherit;
+    font-size: var(--font-size-body-base);
+    font-weight: 400;
+    line-height: var(--line-height-03);
+    padding: var(--spacing-04) 0 0 0;
+
+    &:before {
+      content: none; //override type.less
+    }
+
+    .quote-link {
+      text-align: center;
+      margin-top: var(--spacing-05);
+    }
+  }
+
+  @media (max-width: @screen-sm-max) {
+    font-size: var(--font-size-04) !important;
+    line-height: var(--line-height-04) !important;
+
+    footer {
+      font-size: var(--font-size-02) !important;
+      line-height: var(--line-height-02) !important;
+    }
+  }
+}

services/web/frontend/stylesheets/main-style.less

@@ -48,6 +48,7 @@
 @import 'components/input-groups.less';
 @import 'components/navs.less';
 @import 'components/navbar.less';
+@import 'components/quote.less';
 @import 'components/footer.less';
 @import 'components/notifications.less';
 @import 'components/labels.less';

services/web/frontend/stylesheets/variables/all.less

@@ -148,6 +148,7 @@
 @font-size-11: 3.75rem; // 60px
 @font-size-12: 4.5rem; // 72px
 @font-size-13: 6rem; // 96px
+@font-size-body-base: @font-size-03;
 
 @line-height-01: 1rem; // 16px
 @line-height-02: 1.25rem; // 20px

services/web/frontend/stylesheets/variables/css-variables.less

@@ -128,6 +128,7 @@
   --font-size-11: @font-size-11;
   --font-size-12: @font-size-12;
   --font-size-13: @font-size-13;
+  --font-size-body-base: @font-size-body-base;
 
   // line-height
   --line-height-01: @line-height-01;