Merge pull request #26749 from overleaf/mf-tear-down-plans-page-bs5

[web] Tear down plans-page-bs5 and make the bs5 version the default version

GitOrigin-RevId: 6a4d8c8a75597bbda23057f8ca404cf6c5e1f428

services/web/app/views/layout-website-redesign.pug

@@ -15,8 +15,6 @@ block body
 
 	block content
 
-	//- bootstrapVersion needed here, because plans.pug uses both BS version
-	//- If the `plans-page-bs5` split test has been completed, remove bootstrapVersion logic
 	if typeof suppressFooter == 'undefined'
 		if showThinFooter
 			if bootstrapVersion === 5

services/web/app/views/subscriptions/plans/_faq_new.pug

@@ -14,30 +14,15 @@ include ../../_mixins/material_symbol
 
 	.row
 		.col-xs-12
-			div(
-				class={
-					'plans-faq-tabs': bootstrapVersion === 5,
-					'ol-tabs': bootstrapVersion === 5,
-					'ol-tabs-scrollable': bootstrapVersion === 3,
-				}
-			)
+			.ol-tabs.plans-faq-tabs
 				.nav-tabs-container
 					ul.nav.nav-tabs(role='tablist')
-						//- In the bs5 version of plans page, the `active` class need to be added to the `a` tag instead of the parent `li` tag
-						//- If the `plans-page-bs5` split test has been completed, remove the `active` class from the `li` tag since we're not using it anymore
-						//- If the `plans-page-bs5` split test has been completed, remove the `data-toggle` because it is not needed anymore (bs5 uses `data-bs-toggle`)
-						li(role='presentation' class={
-							active: bootstrapVersion === 3,
-						})
-							a(
+						li(role='presentation')
+							a.active(
 								role='tab'
-								data-toggle='tab'
 								data-bs-toggle='tab'
 								href='#' + managingYourSubscription
 								aria-controls=managingYourSubscription
-								class={
-									active: bootstrapVersion === 5,
-								}
 							)
 								| #{translate('managing_your_subscription')}
 						li(role='presentation')
@@ -72,8 +57,8 @@ include ../../_mixins/material_symbol
 			span #{translate('still_have_questions')}
 			button(
 				data-ol-open-contact-form-modal='general'
-				data-bs-toggle=bootstrapVersion === 5 ? 'modal' : undefined
-				data-bs-target=bootstrapVersion === 5 ? '#contactUsModal' : undefined
+				data-bs-toggle='modal'
+				data-bs-target='#contactUsModal'
 			)
 				span(style='margin-right: 4px') #{translate('contact_support')}
 				+material-symbol-rounded('arrow_right_alt', 'icon-md')

services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug

@@ -1,4 +1,3 @@
-//- If the `plans-page-bs5` split test has been completed, remove the `data-toggle` and `data-target` because it is not needed anymore (bs5 uses `data-bs-toggle` and `data-bs-target`)
 include ../../_mixins/material_symbol
 
 mixin managingYourSubscription
@@ -6,8 +5,6 @@ mixin managingYourSubscription
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#managingYourSubscriptionQ1'
 				data-bs-toggle='collapse'
 				data-bs-target='#managingYourSubscriptionQ1'
 				aria-expanded='false'
@@ -24,8 +21,6 @@ mixin managingYourSubscription
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#managingYourSubscriptionQ2'
 				data-bs-toggle='collapse'
 				data-bs-target='#managingYourSubscriptionQ2'
 				aria-expanded='false'
@@ -40,8 +35,6 @@ mixin managingYourSubscription
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#managingYourSubscriptionQ3'
 				data-bs-toggle='collapse'
 				data-bs-target='#managingYourSubscriptionQ3'
 				aria-expanded='false'
@@ -56,8 +49,6 @@ mixin managingYourSubscription
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#managingYourSubscriptionQ4'
 				data-bs-toggle='collapse'
 				data-bs-target='#managingYourSubscriptionQ4'
 				aria-expanded='false'
@@ -85,8 +76,6 @@ mixin overleafIndividualPlans
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#overleafIndividualPlansQ1'
 				data-bs-toggle='collapse'
 				data-bs-target='#overleafIndividualPlansQ1'
 				aria-expanded='false'
@@ -114,8 +103,6 @@ mixin overleafIndividualPlans
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#overleafIndividualPlansQ2'
 				data-bs-toggle='collapse'
 				data-bs-target='#overleafIndividualPlansQ2'
 				aria-expanded='false'
@@ -131,8 +118,6 @@ mixin overleafIndividualPlans
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#overleafIndividualPlansQ3'
 				data-bs-toggle='collapse'
 				data-bs-target='#overleafIndividualPlansQ3'
 				aria-expanded='false'
@@ -149,8 +134,6 @@ mixin overleafIndividualPlans
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#overleafIndividualPlansQ4'
 				data-bs-toggle='collapse'
 				data-bs-target='#overleafIndividualPlansQ4'
 				aria-expanded='false'
@@ -167,8 +150,6 @@ mixin overleafIndividualPlans
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#overleafIndividualPlansQ5'
 				data-bs-toggle='collapse'
 				data-bs-target='#overleafIndividualPlansQ5'
 				aria-expanded='false'
@@ -183,8 +164,6 @@ mixin overleafIndividualPlans
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#overleafIndividualPlansQ6'
 				data-bs-toggle='collapse'
 				data-bs-target='#overleafIndividualPlansQ6'
 				aria-expanded='false'
@@ -199,8 +178,6 @@ mixin overleafIndividualPlans
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#overleafIndividualPlansQ7'
 				data-bs-toggle='collapse'
 				data-bs-target='#overleafIndividualPlansQ7'
 				aria-expanded='false'
@@ -218,8 +195,6 @@ mixin overleafGroupPlans
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#overleafGroupPlansQ1'
 				data-bs-toggle='collapse'
 				data-bs-target='#overleafGroupPlansQ1'
 				aria-expanded='false'
@@ -235,8 +210,6 @@ mixin overleafGroupPlans
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#overleafGroupPlansQ2'
 				data-bs-toggle='collapse'
 				data-bs-target='#overleafGroupPlansQ2'
 				aria-expanded='false'
@@ -261,8 +234,6 @@ mixin overleafGroupPlans
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#overleafGroupPlansQ3'
 				data-bs-toggle='collapse'
 				data-bs-target='#overleafGroupPlansQ3'
 				aria-expanded='false'
@@ -277,8 +248,6 @@ mixin overleafGroupPlans
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#overleafGroupPlansQ4'
 				data-bs-toggle='collapse'
 				data-bs-target='#overleafGroupPlansQ4'
 				aria-expanded='false'
@@ -328,8 +297,6 @@ mixin overleafGroupPlans
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(
 				type='button'
-				data-toggle='collapse'
-				data-target='#overleafGroupPlansQ5'
 				data-bs-toggle='collapse'
 				data-bs-target='#overleafGroupPlansQ5'
 				aria-expanded='false'

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

@@ -1,1425 +0,0 @@
-@z-index-plans-new-tabs: 1;
-@z-index-group-member-picker-list: 1;
-@z-index-plans-new-tabs-content: 0;
-
-@highlighted-heading-line-height: (@line-height-03 / 1rem) * 16px; // convert to px
-@highlighted-heading-padding-vertical: @spacing-02;
-@highlighted-heading-height: (
-  @highlighted-heading-line-height + (2 * @highlighted-heading-padding-vertical)
-);
-
-@switcher-container-margin-bottom: @highlighted-heading-height + @spacing-10;
-
-@nondiscounted-price-element-height: var(--line-height-02);
-
-@group-member-picker-height: 24px;
-@group-member-picker-top-height: 36px;
-@group-member-picker-sm-width: 50%;
-@group-member-picker-md-width: 25%;
-@group-member-picker-min-width: 234px;
-
-@container-plans-responsive-width: 95%;
-@table-4-column-width: 25%;
-@table-5-column-width: 20%;
-
-.plans-new-design {
-  padding-top: var(--header-height);
-
-  .container {
-    padding: 0 var(--spacing-06);
-
-    @media (min-width: @screen-sm-min) {
-      width: @container-plans-responsive-width;
-    }
-    @media (min-width: @screen-xl-min) {
-      width: @container-xl;
-    }
-
-    .geo-banner-container {
-      margin-top: var(--spacing-08);
-    }
-
-    .plans-new-design-content-spacing {
-      margin-top: var(--spacing-16);
-    }
-
-    .interstitial-new-design-content-spacing {
-      margin-top: var(--spacing-13);
-    }
-  }
-  .main-heading-section {
-    text-align: center;
-    max-width: 885px;
-    margin-left: auto;
-    margin-right: auto;
-
-    @media (max-width: @screen-xs-max) {
-      text-align: left;
-      padding: 0 16px;
-    }
-
-    .plans-page-heading {
-      margin-top: 8px;
-      margin-bottom: unset;
-      font-size: 3rem;
-      font-weight: 600;
-      line-height: 64px;
-      @media (max-width: @screen-xs-max) {
-        font-size: 2.25rem;
-        line-height: 48px;
-        padding-right: 5rem;
-      }
-    }
-
-    .plans-page-sub-heading {
-      font-size: 1.125rem;
-      line-height: 24px;
-      margin-top: 16px;
-      margin-bottom: unset;
-    }
-  }
-
-  .plans-new-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    @media (min-width: @screen-sm-min) {
-      border-left: 1px solid var(--neutral-20);
-      border-right: 1px solid var(--neutral-20);
-      border-bottom: 1px solid var(--neutral-20);
-      border-radius: 8px;
-    }
-
-    // this is the border between the tabs and the content, specifically on the left and right side
-    // this is necessary to enable top border radius on the plans-new-content
-    &::before {
-      content: '';
-      display: block;
-      z-index: @z-index-plans-new-tabs-content;
-      position: absolute;
-      top: -1px; // make border overlap with the border on .plans-new-tabs
-      width: 100%;
-      height: 20px; // arbitrary height since it's transparent, make sure that it's bigger than border radius
-      background: transparent;
-      border-top: 1px solid var(--neutral-20);
-
-      @media (min-width: @screen-sm-min) {
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
-      }
-    }
-  }
-
-  .plans-new-tabs-container {
-    z-index: @z-index-plans-new-tabs;
-    margin-top: var(--spacing-16);
-
-    // explicit padding to tell that the bottom left and bottom right
-    // does not have bottom border defined in .plans-new-tabs
-    // technically unnecessary because padding is already defined in bootstrap column
-    padding: 0 16px;
-  }
-
-  .plans-new-tabs {
-    display: flex;
-    justify-content: center;
-    gap: 8px;
-    border-bottom: 1px solid var(--neutral-20);
-
-    .plans-new-tab {
-      cursor: pointer;
-      font-size: 16px;
-      font-weight: 600;
-      border-top-right-radius: 8px;
-      border-top-left-radius: 8px;
-
-      .plans-new-tab-link {
-        border: unset;
-        display: flex;
-        align-items: center;
-        color: var(--neutral-70);
-        margin: 0;
-        border-top-right-radius: 8px;
-        border-top-left-radius: 8px;
-        border: 1px solid var(--neutral-20);
-        padding: var(--spacing-05) var(--spacing-08);
-        gap: var(--spacing-04);
-
-        &:focus {
-          background-color: unset;
-          outline: 0;
-        }
-
-        &:hover {
-          background-color: var(--neutral-20);
-        }
-
-        // tab navigation focus style
-        &:focus-visible {
-          .box-shadow-button-input();
-          outline: 0;
-        }
-
-        .group-discount-bubble {
-          padding: var(--spacing-01) var(--spacing-04);
-          background-color: var(--green-10);
-          color: var(--green-50);
-          border-radius: var(--border-radius-full-new);
-          font-family: 'DM Mono', monospace;
-          font-feature-settings: 'ss05';
-          font-size: var(--font-size-01);
-          line-height: var(--line-height-01);
-          font-weight: 500;
-
-          @media (max-width: @screen-xs-max) {
-            display: none;
-          }
-        }
-
-        @media (max-width: @screen-xs-max) {
-          font-size: var(--font-size-02);
-          line-height: var(--line-height-02);
-          padding: var(--spacing-05);
-          gap: var(--spacing-02);
-        }
-      }
-
-      &.active {
-        .plans-new-tab-link {
-          border: 1px solid white;
-          position: relative;
-          color: var(--green-50);
-
-          // remove the border on tab focus
-          &:focus-visible {
-            &::before {
-              content: unset;
-            }
-          }
-
-          &::before {
-            content: '';
-            position: absolute;
-            background: border-box
-              linear-gradient(
-                to bottom,
-                @green-50 0%,
-                @neutral-20 85%,
-                @neutral-20 100%
-              );
-            -webkit-mask:
-              linear-gradient(white 0 0) padding-box,
-              linear-gradient(white 0 0);
-            mask:
-              linear-gradient(white 0 0) padding-box,
-              linear-gradient(white 0 0);
-            -webkit-mask-composite: xor;
-            mask-composite: exclude;
-            border-top-right-radius: 8px;
-            border-top-left-radius: 8px;
-            border: 1px solid transparent;
-            border-bottom: 1px solid white;
-
-            // make the border overlap with the .plans-new-tab-link border
-            top: 0;
-            bottom: -2px;
-            left: -1px;
-            right: -1px;
-          }
-
-          &:hover {
-            background-color: unset;
-          }
-        }
-
-        .plans-new-discount-badge {
-          background-color: var(--green-10);
-          color: var(--green-60);
-        }
-      }
-    }
-  }
-
-  .plans-new-period-switcher-container {
-    position: relative;
-    display: inline-flex;
-    background-color: var(--neutral-10);
-    border-radius: var(--border-radius-full-new);
-    padding: var(--spacing-03);
-    margin-top: var(--spacing-09);
-    margin-bottom: @switcher-container-margin-bottom;
-    gap: var(--spacing-04);
-
-    @media (max-width: @screen-xs-max) {
-      margin-bottom: var(--spacing-09);
-    }
-
-    label {
-      display: inline-flex;
-      align-items: center;
-      margin: 0;
-      font-size: var(--font-size-05);
-      font-weight: 600;
-      line-height: var(--line-height-04);
-      text-align: center;
-      padding: var(--spacing-01) var(--spacing-04);
-      border-radius: var(--border-radius-full-new);
-
-      &:hover {
-        background-color: var(--neutral-20);
-        cursor: pointer;
-      }
-    }
-
-    input[type='radio'] {
-      position: absolute;
-      left: -9999px;
-      &:focus,
-      &:focus-visible {
-        outline: 0;
-      }
-    }
-
-    input[type='radio']:focus-visible + label,
-    input[type='radio']:checked:focus-visible + label {
-      .box-shadow-button-input();
-    }
-
-    input[type='radio']:checked + label {
-      background-color: var(--green-50);
-      color: white;
-      box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
-      .plans-new-discount-badge {
-        background-color: var(--green-10);
-        color: var(--green-60);
-      }
-    }
-
-    .plans-new-discount-badge {
-      margin-left: var(--spacing-03);
-    }
-  }
-
-  .plans-new-discount-badge {
-    font-size: var(--font-size-01);
-    font-family: 'DM Mono', monospace;
-    padding: 2px 8px;
-    height: 20px;
-    border-radius: 10px;
-    background-color: var(--neutral-70);
-    color: white;
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-    line-height: var(--line-height-01);
-  }
-
-  .plans-new-tab-content {
-    width: 100%;
-    border: none;
-    padding-top: 0;
-
-    @media (max-width: @screen-xs-min) {
-      padding: 0;
-    }
-  }
-
-  .plans-new-mobile {
-    display: none;
-
-    @media (max-width: @screen-xs-max) {
-      display: block;
-    }
-  }
-
-  .plans-new-desktop {
-    display: block;
-
-    @media (max-width: @screen-xs-max) {
-      display: none;
-    }
-  }
-
-  .plans-new-table {
-    width: 100%;
-
-    // keep the borders separate to help with spacing and alignment in the CTAs
-    border-collapse: separate;
-    border-spacing: 0;
-
-    th,
-    td {
-      width: @table-4-column-width;
-    }
-  }
-
-  .plans-new-table-student {
-    margin-left: @table-4-column-width / 2;
-  }
-
-  .plans-new-table-student-verification {
-    font-weight: 600;
-    font-size: var(--font-size-01);
-    text-align: center;
-  }
-
-  .plans-new-table-group {
-    margin-top: @spacing-11 + @highlighted-heading-height;
-  }
-
-  thead th {
-    position: relative;
-    padding: var(--spacing-06) var(--spacing-08) var(--spacing-04)
-      var(--spacing-08);
-    font-size: var(--font-size-05);
-    font-weight: 600;
-    line-height: var(--line-height-04);
-    color: var(--neutral-90);
-    text-align: center;
-
-    @media (max-width: @screen-md-max) {
-      padding: var(--spacing-05) var(--spacing-05) 0 var(--spacing-05);
-    }
-  }
-
-  .plans-new-table-subheader {
-    vertical-align: top;
-    padding: 0 var(--spacing-08);
-    @media (max-width: @screen-md-max) {
-      padding: 0 var(--spacing-05);
-    }
-
-    &.plans-new-table-icon-cta-cell,
-    &.plans-subheader-monthly-cta {
-      vertical-align: bottom;
-    }
-  }
-
-  .plans-new-table-cta-row {
-    td {
-      padding-bottom: var(--spacing-06);
-      @media (max-width: @screen-md-max) {
-        padding-bottom: var(--spacing-05);
-      }
-
-      // use transparent borders to use the same spacing as highlighted cells
-      &:not(.plans-new-table-highlighted-cell) {
-        border-right: var(--border-width-base) solid transparent;
-        border-left: var(--border-width-base) solid transparent;
-      }
-    }
-
-    .btn-block + .btn-block {
-      margin-top: var(--spacing-04);
-    }
-  }
-
-  .plans-new-table-header-grid-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    s,
-    .match-original-price-height {
-      font-size: var(--font-size-02);
-      line-height: @nondiscounted-price-element-height;
-      color: var(--neutral-60);
-      font-weight: 600;
-    }
-
-    .plans-new-table-header-price {
-      font-size: var(--font-size-08);
-      font-weight: 600;
-      line-height: var(--line-height-07);
-      color: var(--neutral-90);
-    }
-
-    .plans-new-table-header-price-unit {
-      font-size: var(--font-size-02);
-      line-height: var(--line-height-02);
-      text-align: center;
-    }
-
-    .plans-new-table-cta {
-      margin-top: auto;
-      a:nth-child(2) {
-        margin-top: var(--spacing-04);
-      }
-    }
-
-    .plans-new-table-header-icon {
-      font-size: 56px;
-      color: var(--neutral-90);
-    }
-  }
-
-  .plans-new-table-header-price-unit-total {
-    font-size: var(--font-size-01);
-    line-height: var(--line-height-01);
-  }
-
-  .plans-new-table-header-desc {
-    margin-top: var(--spacing-05);
-    margin-bottom: var(--spacing-08);
-    font-size: var(--font-size-02);
-    line-height: var(--line-height-02);
-  }
-
-  .plans-new-group-member-picker {
-    .plans-new-group-member-picker-text {
-      font-size: var(--font-size-02);
-      line-height: var(--line-height-02);
-      font-weight: 600;
-      margin-bottom: var(--spacing-02);
-    }
-
-    .plans-new-group-member-picker-form {
-      position: relative;
-
-      .plans-new-group-member-picker-button {
-        width: 100%;
-        background-color: white;
-        border-radius: var(--border-radius-base-new);
-        border: 1px solid var(--neutral-60);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: var(--spacing-01) var(--spacing-03);
-        margin-bottom: var(--spacing-04);
-        height: @group-member-picker-height;
-        font-size: var(--font-size-02);
-        line-height: var(--line-height-02);
-
-        &[aria-expanded='true'] {
-          i {
-            transform: rotate(180deg);
-            transition: transform 0.35s ease;
-          }
-        }
-
-        &[aria-expanded='false'] {
-          i {
-            transition: transform 0.35s ease;
-          }
-        }
-
-        &[data-ol-plans-new-group-member-picker-button='group-all'] {
-          height: @group-member-picker-top-height;
-        }
-      }
-
-      ul.plans-new-group-member-picker-list {
-        list-style-type: none;
-        margin-bottom: 0;
-        overflow: auto; // to enable box-shadow
-        box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
-        padding: var(--spacing-02);
-        position: absolute;
-        top: @group-member-picker-height;
-        background-color: white;
-        width: 100%;
-        margin-top: var(--spacing-01);
-        z-index: @z-index-group-member-picker-list;
-
-        &[data-ol-plans-new-group-member-picker-dropdown='group-all'] {
-          top: @group-member-picker-top-height;
-        }
-      }
-
-      li.plans-new-group-member-picker-footer {
-        font-size: var(--font-size-02);
-        line-height: var(--line-height-02);
-        padding: var(--spacing-05) var(--spacing-04);
-
-        span {
-          display: block;
-        }
-
-        button {
-          font-weight: 400;
-          padding: 0;
-          font-size: var(--font-size-02);
-          line-height: var(--line-height-02);
-        }
-      }
-
-      li {
-        position: relative;
-
-        &:not(:last-child) {
-          margin-bottom: var(--spacing-02);
-        }
-
-        &:not(.plans-new-group-member-picker-footer):hover {
-          input[type='radio']:not(:checked) + p {
-            background-color: var(--neutral-10);
-          }
-        }
-
-        input[type='radio'] {
-          position: absolute;
-          opacity: 0;
-          cursor: pointer;
-
-          &:focus + p {
-            &:extend(.input-focus-style);
-          }
-
-          + p {
-            padding: var(--spacing-05) var(--spacing-08) var(--spacing-05)
-              var(--spacing-04);
-            margin-bottom: 0;
-            border-radius: var(--border-radius-base-new);
-          }
-        }
-
-        input[type='radio']:checked + p {
-          background-color: var(--green-10);
-          color: var(--green-70);
-          position: relative;
-          word-wrap: break-word;
-
-          &::after {
-            content: url(../../../public/img/material-icons/check-green-20.svg);
-            position: absolute;
-            right: 12px;
-            top: 50%;
-            transform: translateY(-50%);
-
-            @media (max-width: @screen-sm-max) {
-              right: var(--spacing-04);
-            }
-          }
-        }
-
-        label {
-          width: 100%;
-          font-size: var(--font-size-02);
-          line-height: var(--line-height-02);
-          margin-bottom: var(--spacing-00);
-          font-weight: 400;
-          cursor: pointer;
-          border-radius: var(--border-radius-base-new);
-
-          .list-item-footer {
-            font-size: var(--font-size-01);
-            line-height: var(--line-height-01);
-          }
-        }
-      }
-
-      .plans-new-edu-discount {
-        display: flex;
-        align-items: flex-start;
-        gap: var(--spacing-04);
-        margin-bottom: var(--spacing-06);
-        font-weight: 400;
-
-        input[type='checkbox'] {
-          margin: var(--spacing-02);
-          accent-color: var(--green-50);
-
-          &:focus-visible {
-            .box-shadow-button-input();
-          }
-        }
-
-        .plans-new-edu-discount-content {
-          display: flex;
-          flex-direction: column;
-
-          span {
-            line-height: var(--line-height-03);
-            color: var(--neutral-90);
-          }
-
-          small {
-            color: var(--neutral-70);
-            font-size: var(--font-size-01);
-            line-height: var(--line-height-01);
-          }
-        }
-      }
-    }
-  }
-
-  .plans-new-table-body:last-of-type {
-    .plans-new-table-feature-row:last-of-type {
-      .plans-new-table-feature-td.plans-new-table-highlighted-cell {
-        border-bottom: var(--border-width-base) solid var(--green-50);
-      }
-    }
-  }
-
-  .plans-new-table-heading-row {
-    // this means min-height, min-height does not work in table layout
-    // https://stackoverflow.com/questions/7790222
-    height: 64px;
-  }
-
-  .plans-new-table-heading-text {
-    padding: var(--spacing-05) var(--spacing-08) var(--spacing-05)
-      var(--spacing-05);
-    font-weight: 600;
-    font-size: var(--font-size-04);
-    line-height: var(--line-height-03);
-    vertical-align: bottom;
-  }
-
-  .plans-new-table-feature-row {
-    &:nth-child(even) {
-      background-color: var(--neutral-10);
-    }
-  }
-
-  .plans-new-table-section-without-header-row {
-    &:nth-child(odd):not(.plans-new-table-heading-row) {
-      background-color: var(--neutral-10);
-    }
-    &:nth-child(even):not(.plans-new-table-heading-row) {
-      background-color: var(--white);
-    }
-  }
-
-  .plans-new-table-feature-th {
-    font-weight: normal;
-    padding: var(--spacing-05) var(--spacing-08) var(--spacing-05)
-      var(--spacing-05);
-
-    .plans-new-table-feature-th-content {
-      line-height: var(--line-height-03);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .plans-new-table-feature-tooltip-icon {
-        cursor: help;
-        margin-left: var(--spacing-05);
-      }
-
-      .tooltip.in {
-        opacity: 1;
-      }
-
-      .tooltip-inner {
-        padding: var(--spacing-04) var(--spacing-06);
-        max-width: 258px;
-        width: 258px;
-        font-family: Lato, sans-serif;
-        font-size: var(--font-size-02);
-        text-align: left;
-        background-color: var(--neutral-90);
-        border-radius: var(--border-radius-base-new);
-      }
-    }
-  }
-
-  .plans-new-table-feature-td {
-    padding: var(--spacing-05) var(--spacing-08);
-    text-align: center;
-    line-height: var(--line-height-03);
-
-    .green-round-background {
-      margin-right: 0;
-    }
-  }
-
-  .plans-new-table-highlighted-heading {
-    position: absolute;
-    left: calc(-1 * var(--border-width-base));
-    top: -1 * @highlighted-heading-height;
-    height: @highlighted-heading-height;
-    width: calc(100% + (2 * var(--border-width-base)));
-    border-top-left-radius: var(--border-radius-large-new);
-    border-top-right-radius: var(--border-radius-large-new);
-    padding: @highlighted-heading-padding-vertical var(--spacing-04);
-    font-weight: 600;
-    text-align: center;
-    line-height: @highlighted-heading-line-height;
-    background-color: var(--green-50);
-    color: var(--white);
-    font-size: var(--font-size-03);
-  }
-
-  .plans-new-table-highlighted-cell {
-    border-right: var(--border-width-base) solid var(--green-50);
-    border-left: var(--border-width-base) solid var(--green-50);
-  }
-
-  .ai-assist {
-    color: var(--neutral-90);
-
-    @media (min-width: @screen-sm-min) {
-      padding-left: 0 !important;
-      padding-right: 0 !important;
-    }
-
-    .ai-assist-heading {
-      margin-top: var(--spacing-12);
-      margin-bottom: var(--spacing-12);
-      text-align: center;
-    }
-
-    .ai-assist-container {
-      padding: var(--spacing-10);
-      border: 4px solid var(--neutral-10);
-      border-radius: var(--border-radius-large-new);
-      background:
-        linear-gradient(270deg, var(--blue-10), #fff) 0.13%,
-        #fff 63.21%;
-
-      @media (max-width: @screen-sm-max) {
-        background: #fff;
-        border-width: 2px;
-        border-radius: var(--border-radius-medium-new);
-        border-color: var(--premium-gradient);
-        padding: var(--spacing-09);
-      }
-
-      .ai-assist-content {
-        display: flex;
-        justify-content: space-between;
-        gap: var(--spacing-07);
-
-        @media (max-width: @screen-sm-max) {
-          flex-direction: column;
-        }
-        .ai-assist-left {
-          display: flex;
-          gap: var(--spacing-07);
-          flex-direction: column;
-          max-width: @screen-xs;
-
-          @media (max-width: @screen-sm-max) {
-            max-width: 100%;
-          }
-
-          .ai-assist-price {
-            font-weight: 600;
-            font-size: var(--font-size-03);
-
-            @media (max-width: @screen-sm-max) {
-              font-weight: normal;
-              font-size: var(--font-size-02);
-              .price {
-                font-size: var(--font-size-08);
-                font-weight: 600;
-              }
-            }
-          }
-          .ai-assist-annually-price {
-            display: block;
-          }
-          .ai-assist-monthly-price {
-            display: none;
-          }
-          .ai-assist-header-switch {
-            display: none;
-          }
-
-          .ai-assist-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            .ai-assist-header-content {
-              display: flex;
-              gap: var(--spacing-06);
-              align-items: center;
-
-              h3 {
-                font-size: var(--font-size-07);
-                margin: 0;
-                padding: 0;
-
-                @media (max-width: @screen-sm-max) {
-                  font-size: var(--font-size-05);
-                }
-              }
-
-              img {
-                @media (max-width: @screen-sm-max) {
-                  width: 24px;
-                }
-              }
-            }
-
-            .ai-assist-header-switch {
-              align-items: center;
-              gap: var(--spacing-03);
-              user-select: none;
-
-              input {
-                margin: 0;
-              }
-
-              label {
-                margin: 0;
-                font-weight: normal;
-              }
-            }
-          }
-        }
-        .ai-assist-right {
-          display: flex;
-          align-items: center;
-          gap: var(--spacing-06);
-
-          .ai-assist-features {
-            list-style: none;
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-04);
-            min-width: 210px;
-            margin-bottom: 0;
-
-            .feature-item {
-              display: flex;
-              align-items: center;
-              font-size: var(--font-size-03);
-              cursor: default;
-
-              .feature-icon {
-                margin-right: var(--spacing-05);
-                color: var(--neutral-70);
-                width: 16px;
-                height: 16px;
-              }
-
-              .feature-text {
-                color: var(--neutral-90);
-              }
-            }
-
-            @media (min-width: @screen-sm-min) {
-              .feature-item-selected {
-                .feature-text {
-                  color: var(--blue-50);
-                  font-weight: 600;
-                }
-
-                .feature-icon {
-                  content: url(../../../public/img/check-circle-blue-filled.svg);
-                }
-              }
-            }
-          }
-
-          .ai-assist-images {
-            display: flex;
-            align-items: flex-start;
-            width: 280px;
-            justify-content: center;
-
-            @media (max-width: @screen-sm-max) {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-
-    .ai-assist-header-switch {
-      display: flex !important;
-    }
-
-    .ai-assist-button-container {
-      display: flex;
-      gap: var(--spacing-05);
-
-      &.mobile {
-        display: none;
-        margin-top: var(--spacing-06);
-        flex-direction: column;
-      }
-
-      @media (max-width: @screen-sm-max) {
-        &.mobile {
-          display: flex;
-        }
-        &.desktop {
-          display: none;
-        }
-      }
-
-      .btn.monthly {
-        display: none;
-      }
-    }
-
-    .overleaf-assist-screenshot {
-      height: auto;
-      max-width: 280px;
-      max-height: 200px;
-      border-radius: var(--border-radius-base-new);
-      display: none;
-
-      &.selected {
-        display: block;
-        -webkit-animation: fade-in 1s;
-        animation: fade-in 1s;
-      }
-    }
-  }
-  .ai-assist.monthly-period {
-    .ai-assist-annually-price {
-      display: none !important;
-    }
-    .ai-assist-monthly-price {
-      display: block !important;
-    }
-    .ai-assist-button-container .btn.annual {
-      display: none !important;
-    }
-    .ai-assist-button-container .btn.monthly {
-      display: block !important;
-    }
-  }
-
-  .plans-new-organizations {
-    padding: var(--spacing-13) var(--spacing-08);
-
-    .plans-new-organizations-text {
-      text-align: center;
-      font-size: var(--font-size-05);
-      line-height: var(--line-height-04);
-      margin-bottom: var(--spacing-00);
-    }
-
-    .plans-new-organizations-logo {
-      margin-top: var(--spacing-09);
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-
-      @media (max-width: @screen-md-max) {
-        flex-wrap: wrap;
-        gap: 30px;
-      }
-    }
-  }
-
-  .plans-card-container-mobile {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-06);
-
-    .mt-spacing-06 {
-      margin-top: var(--spacing-06);
-    }
-
-    .highlighted-plans-card {
-      border: 2px solid var(--green-50) !important;
-    }
-
-    .plans-card-mobile {
-      padding: var(--spacing-09);
-      border: 2px solid var(--neutral-20);
-      width: 100%; // might need max-width
-      border-radius: 8px;
-      display: flex;
-      flex-direction: column;
-
-      .plans-card-title-mobile {
-        color: var(--neutral-90);
-        font-size: var(--font-size-05); // 20px
-        font-weight: 600;
-        line-height: var(--line-height-04);
-      }
-
-      .plans-card-icon-container-mobile {
-        margin-top: var(--spacing-04);
-        .plans-card-icon {
-          font-size: var(--font-size-09);
-          color: var(--neutral-90);
-        }
-      }
-
-      s {
-        padding: var(--spacing-04) 0 0 0;
-        color: var(--neutral-60);
-        font-size: var(--font-size-04); // 18px
-        font-weight: 600;
-        line-height: var(--line-height-05);
-        margin-bottom: var(--spacing-04);
-      }
-
-      .plans-card-price-container-mobile {
-        display: flex;
-        align-items: baseline;
-      }
-
-      .group-plans-card-price-container-mobile {
-        display: flex;
-        align-items: center;
-      }
-
-      .plans-card-price-mobile {
-        color: var(--neutral-90);
-        font-size: var(--font-size-08); // 36px
-        font-weight: 600;
-        line-height: var(--line-height-07);
-        margin-right: var(--spacing-03);
-      }
-
-      .light-gray-text {
-        color: var(--neutral-70);
-        font-size: var(--font-size-02); // 14px
-        line-height: var(--line-height-02);
-      }
-
-      .plans-card-description-mobile {
-        .green-round-background {
-          width: 20px;
-          height: 20px;
-        }
-
-        .plans-card-description-list-mobile {
-          list-style-type: none;
-          padding-left: 0;
-          margin-bottom: unset;
-          li {
-            display: flex;
-            margin-top: var(--spacing-05);
-          }
-        }
-
-        .plans-card-cta-container {
-          margin-top: var(--spacing-08);
-          width: 100%;
-
-          .btn-block + .btn-block {
-            margin-top: var(--spacing-04);
-          }
-        }
-      }
-    }
-  }
-
-  .plans-new-group-tab-card-container {
-    margin-top: var(--spacing-09);
-  }
-
-  .plans-features-table-section-container-mobile {
-    margin-top: var(--spacing-13);
-    .plans-features-section-heading-mobile {
-      font-size: var(--font-size-06);
-      font-weight: 600;
-      line-height: var(--line-height-05);
-      color: var(--neutral-90);
-      text-align: center;
-      margin-bottom: var(--spacing-08);
-    }
-
-    .plans-features-table-mobile {
-      width: 100%;
-
-      .plans-features-table-sticky-header {
-        position: sticky;
-        top: 0;
-      }
-
-      .plans-features-table-header {
-        margin-bottom: var(--space-08);
-      }
-
-      .plans-features-table-header-container-mobile {
-        margin: var(--spacing-08) auto;
-        border-bottom: unset;
-        width: 100%;
-        max-width: 544px;
-
-        .plans-features-table-header-item-mobile {
-          width: 33%;
-          min-width: 114px;
-          padding: unset;
-
-          .plans-features-table-header-item-content-mobile {
-            padding: var(--spacing-04);
-            text-align: center;
-            background-color: var(--neutral-10);
-          }
-
-          .plans-group-features-table-header-item-content-mobile {
-            padding: var(--spacing-04);
-            text-align: center;
-            background-color: var(--neutral-10);
-            height: 64px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-
-          .plans-features-table-header-item-title-mobile {
-            color: var(--neutral-90);
-            line-height: var(--line-height-03);
-            font-weight: 600;
-            font-size: var(--font-size-03);
-          }
-
-          .plans-features-table-header-item-price-mobile {
-            font-weight: 400;
-            color: var(--neutral-70);
-            line-height: var(--line-height-01);
-            font-size: var(--spacing-05);
-          }
-        }
-
-        .highlighted-styles {
-          background-color: var(--neutral-80);
-
-          .plans-features-table-header-item-title-mobile,
-          .plans-features-table-header-item-price-mobile {
-            color: var(--white);
-          }
-        }
-
-        .plans-features-table-header-item-content-mobile.highlighted,
-        .plans-group-features-table-header-item-content-mobile.highlighted {
-          .highlighted-styles;
-        }
-      }
-
-      tr.plans-features-table-row-for-margin {
-        height: var(--spacing-08);
-      }
-
-      .plans-features-table-body-container-mobile {
-        .plans-features-table-row-heading-mobile {
-          font-weight: 600;
-          text-align: center;
-          line-height: var(--line-height-03);
-          .plans-features-table-row-section-heading-content-mobile {
-            padding-top: var(--spacing-08);
-            padding-bottom: var(--spacing-05);
-            font-size: var(--font-size-04);
-            color: var(--neutral-90);
-          }
-        }
-
-        // .plans-features-table-row-title-mobile and .plans-features-table-row-mobile are combined together to make one row visually, so we are using factors of 4 to alternatively color their backgrounds.
-        .plans-features-table-row-title-mobile {
-          &.plans-features-table-row-title-mobile-without-heading {
-            &:nth-child(4n - 3) {
-              background-color: var(--neutral-10);
-            }
-
-            &:nth-child(4n - 1) {
-              background-color: var(--white);
-            }
-          }
-
-          &:nth-child(4n - 2) {
-            background-color: var(--neutral-10);
-          }
-
-          &:nth-child(4n) {
-            background-color: var(--white);
-          }
-
-          .plans-features-table-row-title-content-mobile {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding-top: var(--spacing-06);
-            font-weight: 600;
-            line-height: var(--line-height-03);
-            .plans-features-table-row-title-accordion {
-              display: flex;
-              justify-content: center;
-              flex-direction: column;
-              align-items: center;
-              text-align: center;
-              padding: 0 var(--spacing-04);
-              .plans-features-table-row-title-accordion-header {
-                font-size: var(--font-size-03);
-                font-weight: 600;
-                line-height: var(--line-height-03);
-                display: flex;
-                justify-content: center;
-                background-color: unset;
-                border: unset;
-                .plans-features-table-row-title-accordion-icon {
-                  display: flex;
-                  align-items: center;
-                  transition: transform 0.35s ease;
-                  margin-left: var(--spacing-02);
-                }
-
-                &:not(.collapsed) {
-                  .plans-features-table-row-title-accordion-icon {
-                    transform: rotate(180deg);
-                    transition: transform 0.35s ease;
-                  }
-                }
-              }
-              .plans-features-table-row-title-accordion-body {
-                font-size: var(--font-size-01);
-                line-height: var(--line-height-01);
-                font-weight: 400;
-              }
-            }
-          }
-        }
-
-        .plans-features-table-row-mobile {
-          &.plans-features-table-row-mobile-without-heading {
-            &:nth-child(4n - 2) {
-              background-color: var(--neutral-10);
-            }
-
-            &:nth-child(4n) {
-              background-color: var(--white);
-            }
-          }
-
-          &:nth-child(4n - 3) {
-            background-color: var(--white);
-          }
-
-          &:nth-child(4n - 1) {
-            background-color: var(--neutral-10);
-          }
-
-          .plans-features-table-cell-content-mobile {
-            text-align: center;
-            padding-top: var(--spacing-05);
-            padding-bottom: var(--spacing-06);
-          }
-        }
-      }
-    }
-  }
-
-  .plans-price-disclaimer {
-    font-size: var(--font-size-01);
-    line-height: var(--line-height-01);
-    margin-top: var(--spacing-08);
-    text-align: center;
-
-    &:last-child {
-      margin-bottom: var(--spacing-11);
-    }
-
-    &:not(:last-child) {
-      margin-bottom: var(--spacing-08);
-    }
-
-    .plans-price-disclaimer-icons {
-      display: flex;
-      justify-content: center;
-      gap: var(--spacing-04);
-    }
-  }
-
-  .only-show-for-specific-plan-type {
-    display: none;
-  }
-  &[data-ol-current-plan-type='group'] {
-    .show-for-plan-type-group {
-      display: block;
-    }
-  }
-  &[data-ol-current-plan-type='individual'] {
-    .show-for-plan-type-individual {
-      display: block;
-    }
-  }
-  &[data-ol-current-plan-type='student'] {
-    .show-for-plan-type-student {
-      display: block;
-    }
-  }
-
-  .only-show-for-specific-plan-period {
-    display: none;
-  }
-  &[data-ol-current-plan-period='annual'] {
-    .show-for-plan-period-annual {
-      display: block;
-    }
-  }
-  &[data-ol-current-plan-period='monthly'] {
-    .show-for-plan-period-monthly {
-      display: block;
-    }
-  }
-}
-
-.plans-overleaf-common-request {
-  color: var(--neutral-90);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: var(--spacing-04) var(--spacing-08);
-  text-align: center;
-  gap: var(--spacing-06);
-
-  @media (max-width: @screen-xs-max) {
-    flex-direction: column;
-    margin: 0;
-  }
-
-  a {
-    font-size: var(--font-size-02);
-    line-height: var(--line-height-02);
-  }
-}
-
-.plans-faq {
-  .faq-heading-container {
-    text-align: center;
-    margin-bottom: var(--spacing-10);
-
-    @media (max-width: @screen-xs-max) {
-      text-align: unset;
-    }
-  }
-
-  .plans-faq-support {
-    margin-top: var(--spacing-06);
-    margin-bottom: var(--spacing-06);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-04);
-
-    span {
-      line-height: var(--line-height-03);
-      font-size: var(--font-size-04);
-    }
-
-    button {
-      font-family: 'DM Mono', monospace;
-      font-weight: 500;
-      text-decoration: none;
-      color: var(--green-50);
-      line-height: var(--line-height-03);
-      font-size: var(--font-size-04);
-      background-color: var(--white);
-      border: unset;
-      display: flex;
-      align-items: center;
-    }
-  }
-}
-
-.plans-new-design.plans-interstitial-new-design {
-  padding-top: var(--header-height);
-  padding-bottom: var(--spacing-09);
-
-  .plans-interstitial-new-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .plans-new-table {
-    th,
-    td {
-      width: @table-5-column-width;
-    }
-  }
-}

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

@@ -74,45 +74,3 @@
 @media (min-width: @screen-lg-min) {
   .make-grid(lg);
 }
-
-.website-redesign {
-  // whitelist for the pages to use the new grid
-  // TODO: remove this whitelist once all pages are using the new grid
-  .plans-new-design,
-  .plans-page {
-    // Container widths
-    //
-    // Set the container width, and override it for fixed navbars in media queries.
-
-    .container {
-      .container-fixed(@grid-gutter-width-new);
-
-      @media (min-width: @screen-sm-min) {
-        width: @container-sm;
-      }
-      @media (min-width: @screen-md-min) {
-        width: @container-md;
-      }
-      @media (min-width: @screen-lg-min) {
-        width: @container-lg;
-      }
-      @media (min-width: @screen-xl-min) {
-        width: @container-xl;
-      }
-    }
-
-    // Row
-    //
-    // Rows contain and clear the floats of your columns.
-
-    .row {
-      .make-row(@grid-gutter-width-new);
-    }
-
-    // Columns
-    //
-    // Common styles for small and large grid columns
-
-    .make-grid-columns(@grid-gutter-width-new);
-  }
-}

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

@@ -101,7 +101,6 @@
 @import 'app/project-list.less';
 @import 'app/project-list-react.less';
 @import 'app/editor.less';
-@import 'app/plans.less';
 @import 'app/recurly.less';
 @import 'app/bonus.less';
 @import 'app/blog.less';