Merge pull request #16609 from overleaf/ds-enterprise-page-3

Website Redesign - Enterprise Page Final changes

GitOrigin-RevId: df5484f69b2d61334a2be727ab3eb5e04d009897

services/web/frontend/stylesheets/app/website-redesign.less

@@ -293,6 +293,32 @@
     }
   }
 
+  .collaboration-logos-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+
+    @media (max-width: @screen-sm-max) {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 10px;
+      justify-items: center;
+    }
+
+    .enterprise-logo {
+      display: inline-block;
+      padding: 0 @padding-md;
+      height: 35px;
+      @media (max-width: @screen-sm-max) {
+        margin-top: @margin-md;
+      }
+    }
+
+    .logo-height-45 {
+      height: 45px;
+    }
+  }
+
   .top-image-cards {
     .top-image-card {
       > img.img-responsive {
@@ -337,7 +363,7 @@
     flex-direction: column;
     align-items: center;
     padding: 64px;
-    background: #2f4858;
+    background: var(--dark-jungle-green);
     color: var(--white);
     border-radius: 8px;
 
@@ -364,7 +390,7 @@
 
       span.lime-color {
         font-weight: 500;
-        color: #7ee787;
+        color: var(--malachite);
       }
 
       @media (max-width: @screen-sm-max) {
@@ -442,6 +468,22 @@
     }
   }
 
+  .text-with-bg {
+    display: inline-block;
+    padding: 0 @padding-sm;
+    margin: 0 6px;
+    border-radius: 10px;
+    margin-top: 5px;
+  }
+
+  .purple-bg {
+    background-color: var(--ceil);
+  }
+
+  .yellow-bg {
+    background-color: var(--caramel);
+  }
+
   .security-info {
     .security-info-first-row {
       margin-bottom: 32px;

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

@@ -95,6 +95,10 @@
 // == Website Redesign ==
 @emerald-green: #098842;
 @vivid-tangerine: #f1a695;
+@ceil: #9597c9;
+@caramel: #f9d38f;
+@dark-jungle-green: #0f271a;
+@malachite: #13c965;
 @light-pastel-purple: #b199c8;
 @mint-green: #80cb9c;
 @deep-green: #0f2715;

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

@@ -84,6 +84,10 @@
   --emerald-green: @emerald-green;
   --mint-green: @mint-green;
   --vivid-tangerine: @vivid-tangerine;
+  --ceil: @ceil;
+  --caramel: @caramel;
+  --dark-jungle-green: @dark-jungle-green;
+  --malachite: @malachite;
   --light-pastel-purple: @light-pastel-purple;
   --deep-green: @deep-green;
   --sapphire-blue: @sapphire-blue;