Merge pull request #10497 from overleaf/jel-cms-new-style

[web] Add new CMS page style

GitOrigin-RevId: 320e02dc2ccfd211396548d7b813bd4c675e6f84

services/web/frontend/stylesheets/app/content_page.less

@@ -8,10 +8,22 @@
   /*
     Links and Buttons
   */
-  a {
-    color: @link-color-alt;
-    &:hover {
-      color: @link-hover-color-alt;
+  &:not(.page-style) {
+    a {
+      color: @link-color-alt;
+      &:hover {
+        color: @link-hover-color-alt;
+      }
+    }
+    // correct color property set on <a> above:
+    .reset-btns;
+    .alert {
+      .alert;
+    }
+    .alert-info {
+      .btn-info {
+        .btn-alert-info;
+      }
     }
   }
 

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

@@ -0,0 +1,19 @@
+.page-style {
+  background-color: @white;
+
+  a {
+    text-decoration: underline;
+  }
+
+  .page-header {
+    border-bottom: none;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
+
+  .card {
+    background-color: @blue-10;
+    border-radius: 24px;
+  }
+}

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

@@ -29,6 +29,7 @@
 @ol-dark-red: #a6312b;
 
 @blue: #405ebf;
+@blue-10: #f1f4f9;
 @blueDark: #040d2d;
 @green: #46a546;
 @red: #a93529;

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

@@ -29,6 +29,7 @@
 @import (less) 'vendor/codemirror-show-hint.css';
 
 // Core CSS
+@import 'core/page-style.less';
 @import 'core/scaffolding.less';
 @import 'core/type.less';
 @import 'core/grid.less';

services/web/frontend/stylesheets/style.less

@@ -10,6 +10,7 @@
 // Core variables and mixins
 @import 'core/variables.less';
 @import 'core/css-variables.less';
+@import 'core/page-style.less';
 @import 'app/ol-style-guide.less';
 @import '_style_includes.less';
 @import '_ol_style_includes.less';