Merge pull request #17994 from overleaf/mf-create-config-contact-form-website-redesign

[web][website-redesign] Migrate "for government" and "back to school 2023" CMS page to website redesign style by repurposing the "new page style" option on CMS

GitOrigin-RevId: 5f5b3bde7be21746c48718253252c8634a20bb19

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

@@ -4,17 +4,16 @@
   including About and Blog
 */
 .cms-page {
-  &.page-style {
-    /*
-    Links and Buttons
-  */
+  &.website-redesign {
+    h1 {
+      font-size: 2rem; // 32px
+    }
 
-    a {
-      color: @link-color;
-      &:hover {
-        color: @link-hover-color;
-      }
+    h2 {
+      font-size: 1.5rem; // 24px
     }
+
+    /* Buttons */
     // correct color property set on <a> above:
     .reset-btns;
     .alert {
@@ -25,6 +24,31 @@
         .btn-alert-info;
       }
     }
+
+    blockquote.quote-picture-bottom {
+      padding: (@line-height-computed / 2) @line-height-computed;
+
+      .quote-picture-and-person {
+        font-size: 18px;
+      }
+
+      .quote-by-position {
+        font-weight: 400;
+      }
+    }
+  }
+
+  .section-row {
+    margin: 0 auto;
+    /* match .col-sm-12 */
+    /* @grid-gutter-width  is used for margins */
+    max-width: (@screen-sm) - @grid-gutter-width!important;
+    @media (min-width: @screen-md-min) {
+      max-width: (@screen-md) - @grid-gutter-width!important;
+    }
+    @media (min-width: @screen-lg-min) {
+      max-width: (@screen-lg) - @grid-gutter-width!important;
+    }
   }
 
   padding-bottom: 0;

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

@@ -87,3 +87,10 @@
   background-color: @ol-blue-gray-1;
   border-radius: @card-border-radius;
 }
+
+.website-redesign {
+  .card {
+    background-color: @card-gray-bg-color;
+    border-radius: 24px;
+  }
+}

services/web/frontend/stylesheets/core/page.less

@@ -1,37 +1,5 @@
-.page-style {
-  background-color: @white;
-
-  a:not(.btn) {
-    text-decoration: underline;
-  }
-
-  .page-header {
-    border-bottom: none;
-    margin: 0;
-    margin-top: 60px !important;
-    padding: 0;
-    text-align: center;
-  }
-
-  .card {
-    background-color: @card-gray-bg-color;
-    border-radius: 24px;
-  }
-
+.website-redesign {
   video {
     clip-path: inset(0 0); // fix Safari bug that will sometimes add border
   }
-
-  .section-row {
-    margin: 0 auto;
-    /* match .col-sm-12 */
-    /* @grid-gutter-width  is used for margins */
-    max-width: (@screen-sm) - @grid-gutter-width!important;
-    @media (min-width: @screen-md-min) {
-      max-width: (@screen-md) - @grid-gutter-width!important;
-    }
-    @media (min-width: @screen-lg-min) {
-      max-width: (@screen-lg) - @grid-gutter-width!important;
-    }
-  }
 }