diff --git a/services/web/app/views/layout-website-redesign.pug b/services/web/app/views/layout-website-redesign.pug index 5d7bce6c4d..a6d621d8b2 100644 --- a/services/web/app/views/layout-website-redesign.pug +++ b/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 diff --git a/services/web/app/views/subscriptions/plans/_faq_new.pug b/services/web/app/views/subscriptions/plans/_faq_new.pug index 760f27b1a4..5939ed3545 100644 --- a/services/web/app/views/subscriptions/plans/_faq_new.pug +++ b/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') diff --git a/services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug b/services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug index 59eac8efac..c20ad3ace9 100644 --- a/services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug +++ b/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' diff --git a/services/web/frontend/stylesheets/app/plans.less b/services/web/frontend/stylesheets/app/plans.less deleted file mode 100644 index 47bd2603c3..0000000000 --- a/services/web/frontend/stylesheets/app/plans.less +++ /dev/null @@ -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; - } - } -} diff --git a/services/web/frontend/stylesheets/core/grid.less b/services/web/frontend/stylesheets/core/grid.less index 7f4d3264c9..a45ef73f4f 100755 --- a/services/web/frontend/stylesheets/core/grid.less +++ b/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); - } -} diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less index 9911686ad5..d3a7d272d1 100644 --- a/services/web/frontend/stylesheets/main-style.less +++ b/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';