From df2898a911eabe3b45d0d280d6f0085d6171e91c Mon Sep 17 00:00:00 2001
From: Davinder Singh <davibaweja@gmail.com>
Date: Thu, 13 Jun 2024 16:32:00 +0100
Subject: [PATCH] Merge pull request #18868 from
 overleaf/ds-plans-page-new-design-mobile-plans-1

Website redesign - Plans page `new-design` mobile screen plans card (1)

GitOrigin-RevId: 5a3be0f0a5f0a41b934e0c3489883c65450a0076
---
 .../app/plans/plans-new-design.less           | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)

diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-design.less b/services/web/frontend/stylesheets/app/plans/plans-new-design.less
index d2787e5f7a..0fad2ee7fd 100644
--- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less
+++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less
@@ -501,4 +501,88 @@
       }
     }
   }
+  // ------------------------------------------------------------------
+  // ------------------------------------------------------------------
+  // These comments will be deleted before merging this PR
+  // Below is the styling for plans cards on mobile screen
+
+  .mobile-plans-card-container {
+    width: 100%;
+
+    .mt-spacing-06 {
+      margin-top: @spacing-06;
+    }
+
+    .highlighted-plans-card {
+      border: 2px solid @green-50 !important;
+    }
+
+    .mobile-plans-card {
+      padding: @spacing-09;
+      border: 2px solid @neutral-20;
+      width: 100%; // might need max-width
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+
+      .plans-name {
+        color: @neutral-90;
+        font-size: @font-size-05; // 20px
+        font-weight: 600;
+        line-height: @line-height-04;
+      }
+
+      .old-price {
+        padding: @spacing-04 0 0 0;
+        color: @neutral-40;
+        font-size: @font-size-04; // 18px
+        font-weight: 600;
+        line-height: @line-height-05;
+        margin-bottom: -@spacing-04;
+      }
+
+      .price-container {
+        display: flex;
+        align-items: baseline;
+        .price {
+          color: @neutral-90;
+          font-size: @font-size-08; // 36px
+          font-weight: 600;
+          line-height: @line-height-07;
+          margin-right: @spacing-03;
+        }
+      }
+
+      .light-gray-text {
+        color: @neutral-70;
+        font-size: @font-size-02; // 14px
+        line-height: @line-height-02;
+      }
+
+      .description {
+        .green-round-background {
+          width: 20px;
+          height: 20px;
+        }
+
+        .bullets {
+          list-style-type: none;
+          padding-left: 0;
+          margin-bottom: unset;
+          li {
+            display: flex;
+            margin-top: @spacing-05;
+          }
+        }
+
+        .cta-buy-now {
+          width: 100%;
+          margin-top: @spacing-08;
+          line-height: @line-height-03;
+        }
+      }
+    }
+  }
+  // ------------------------------------------------------------------
+  // ------------------------------------------------------------------
 }