Merge pull request #16604 from overleaf/mf-implement-hero-image-website-redesign

[website-redesign] Implement hero section of the new design (affect features overview, enterprises, and universities page)

GitOrigin-RevId: 374e3014bea5a6636adfadcfd1fd8ad4625ea1a6

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

@@ -129,7 +129,7 @@
     background-color: @ol-blue-gray-0;
   }
 
-  @media (max-width: @screen-size-sm-max) {
+  @media (max-width: @screen-xs-max) {
     .content-pull {
       padding: 0;
       width: auto;

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

@@ -1,4 +1,7 @@
 .website-redesign {
+  // hero section of features, enterprises, and universities will have an image that will overflow the page
+  overflow-x: hidden;
+
   p,
   h1,
   h2,
@@ -237,59 +240,134 @@
   .features-card-hero {
     /* borrow from features-card, but rewrite if needed before adding too many overrides */
     .features-card;
-
+    position: relative;
+    height: 655px;
     padding-top: @line-height-computed * 2;
 
-    .features-card-description,
-    .features-card-description-list {
+    @media (max-width: @screen-sm-max) {
+      height: unset;
+      padding-top: 0;
+    }
+
+    .features-card-description {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      h1 {
+        @media (max-width: @screen-sm-max) {
+          font-size: 2.25rem;
+          line-height: 1.333;
+        }
+
+        &.features-card-hero-smaller-title {
+          @media (min-width: @screen-lg-min) {
+            // 3rem is the default, this is a workaround for big screen
+            // since 6-width column on md screen size will wrap the text in three lines
+            font-size: 2.8rem;
+          }
+        }
+      }
+
       p {
         font-size: 1.25rem;
         width: 90%;
+
+        @media (max-width: @screen-sm-max) {
+          font-size: 1.125rem;
+          line-height: 1.33;
+          width: unset;
+        }
       }
     }
-  }
 
-  .bg-vivid-tangerine {
-    background-color: var(--vivid-tangerine);
-  }
-  .bg-mint-green {
-    background-color: var(--mint-green);
-  }
-  .bg-light-pastel-purple {
-    background-color: var(--light-pastel-purple);
-  }
-
-  .sticky-tags-container {
-    margin-top: -20px;
-    .sticky-tag {
-      padding: 6px 10px;
-      width: fit-content;
-      font-size: 1.8rem;
-      font-weight: 400;
-      font-family: 'DM Mono', monospace;
-      font-feature-settings: 'ss05';
-      border-radius: 10px;
-      color: black;
+    .features-card-image {
       position: absolute;
+      // on wide screen, image will be fixed without any variable width translation
+      transform: translateX(600px);
+      top: 100px;
+      width: 720px;
+      height: auto;
+      padding: 0;
+
+      // starting from 1500px, image will have a variable translation that depends on screen width
+      // this will make image "fixed" on a specific point on the screen
+      @media (max-width: 1500px) {
+        transform: translateX(calc(50vw - 121px));
+      }
+
+      @media (max-width: 1400px) {
+        width: 650px;
+        transform: translateX(calc(50vw - 52px));
+      }
+
+      // bootstrap layout changes on 1200px (@screen-lg), add a specific
+      // case for this exact width
+      @media (min-width: 1200px) and (max-width: 1200px) {
+        width: 600px;
+        transform: translateX(calc(50vw));
+      }
+
+      @media (max-width: 1199px) {
+        width: 600px;
+        transform: translateX(calc(50vw - 106px));
+      }
+
+      @media (max-width: 1100px) {
+        width: 550px;
+        transform: translateX(calc(50vw - 55px));
+      }
+
+      // 991px
+      @media (max-width: @screen-sm-max) {
+        position: relative;
+        transform: none;
+        top: 0;
+        width: 100%;
+        margin-bottom: 50px;
+      }
+
+      img.img-responsive {
+        width: 100%;
+      }
     }
 
-    .tag-top {
-      transform: rotate(4.88deg);
-      right: 40px;
-      top: -10px;
-      z-index: 1;
-    }
-    .tag-middle {
-      transform: rotate(0.31deg);
-      right: 60px;
-      top: 45px;
+    .sticky-tags {
+      position: absolute;
       z-index: 2;
-    }
-    .tag-bottom {
-      transform: rotate(-5.84deg);
-      right: 20px;
-      top: 98px;
-      z-index: 1;
+      height: 160px;
+      bottom: -105px;
+      right: 55px;
+
+      @media (max-width: 1400px) {
+        height: 150px;
+        bottom: -103px;
+        right: 47px;
+      }
+
+      @media (max-width: 1200px) {
+        height: 130px;
+        bottom: -87px;
+      }
+
+      @media (max-width: 1100px) {
+        height: 120px;
+        bottom: -81px;
+      }
+
+      // 991px
+      @media (max-width: @screen-sm-max) {
+        height: 130px;
+        bottom: -75px;
+        right: 70px;
+      }
+
+      // 767px
+      @media (max-width: @screen-xs-max) {
+        height: 24%;
+        bottom: -10vw; // scale with width
+        right: 9.5vw; // scale with width
+      }
     }
   }
 

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

@@ -386,8 +386,6 @@
 @screen-sm-max: (@screen-md-min - 1);
 @screen-md-max: (@screen-lg-min - 1);
 
-@screen-size-sm-max: 767px;
-
 //== Grid system
 //
 //## Define your custom responsive grid.

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

@@ -342,8 +342,6 @@
 @screen-sm-max: (@screen-md-min - 1);
 @screen-md-max: (@screen-lg-min - 1);
 
-@screen-size-sm-max: 767px;
-
 //== Grid system
 //
 //## Define your custom responsive grid.

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

@@ -94,12 +94,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;
 @sapphire-blue: #4354a3;

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

@@ -83,12 +83,10 @@
   // website-redesign
   --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;
   --sapphire-blue-dark: @sapphire-blue-dark;