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

.website-redesign {
  // hero section of features, enterprises, and universities will have an image that will overflow the page
  overflow-x: hidden;

  p,
  h1,
  h2,
  h3,
  h4,
  a,
  strong,
  span {
    font-family: 'Noto Sans', sans-serif;
  }

  h1 {
    font-size: 3rem;
    font-weight: 600;
    line-height: 4rem;
  }

  h2 {
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1.333;
    margin-top: 0;

    @media (max-width: @screen-sm-max) {
      font-size: 1.875rem;
    }
  }

  h3 {
    font-weight: 600;
  }

  h1,
  h2,
  h3 {
    > span.mono-text {
      display: block;
      margin-bottom: @margin-xs;
    }
  }

  // override .btn default style
  .btn {
    font-weight: 600;
  }

  .img-rounded {
    // TODO: design specifies 'border-radius-large' which is 5px, but uses 16px
    border-radius: 16px;
  }

  .plans-cards {
    @media (min-width: @screen-md-min) {
      display: flex; /* equal heights */
      flex-wrap: wrap;
    }

    .plans-card-container {
      min-height: 348px;

      @media (max-width: @screen-sm-max) {
        margin-bottom: 16px;
        min-height: unset;
      }
    }

    .plans-card {
      border-radius: 8px;
      padding: 0;
      height: 100%;

      .plans-card-inner {
        padding: 36px;
        height: 100%;
        display: flex;
        flex-direction: column;
        font-size: 16px;

        .plans-card-inner-title {
          font-size: 20px;
          font-weight: 600;
          margin-top: 0;
        }

        ul {
          list-style-type: none;
          padding: 0;
          margin: 0;

          li {
            margin-bottom: 8px;
          }
        }

        .plans-card-inner-footer {
          margin-top: auto;
          display: flex;
          flex-direction: column;
          gap: 12px;

          @media (max-width: @screen-sm-max) {
            margin-top: 16px;
          }
        }
      }

      &.grey-border {
        border: 2px solid var(--neutral-20);
      }

      &.blue-border {
        border: solid 2px var(--sapphire-blue);
        border-radius: 8px;

        .plans-card-inner-title {
          color: var(--sapphire-blue);
        }
      }
    }
  }

  .plans-bottom-text {
    font-size: 1.125rem;
  }

  .info-cards {
    @media (min-width: @screen-md-min) {
      display: flex; /* equal heights */
      flex-wrap: wrap;
    }

    .info-card-container {
      margin-bottom: 16px;

      .info-card {
        border-radius: 8px;
        height: 100%;
        box-shadow: 0px 2px 4px 0px #1e253014, 0px 4px 12px 0px #1e25301f;
        border-top: 8px solid var(--sapphire-blue);
        padding: 32px 40px 32px 40px;

        &.info-card-big-text {
          h3 {
            font-size: 1.5rem;
            line-height: 1.333;
          }

          p {
            font-size: 1.125rem;
            line-height: 1.333;
          }
        }

        i.material-symbols {
          color: var(--sapphire-blue);
        }
      }
    }
  }

  .security-heading-section {
    @media (max-width: @screen-sm-max) {
      p {
        text-align: left;
      }

      h2 {
        width: 100%;
        text-align: left;
      }
    }

    .heading-and-stickers-container {
      display: flex;
      justify-content: center;

      .lock-sticker {
        width: 70px;
        position: absolute;
        top: -95px;
        right: -50px;

        @media (max-width: @screen-lg) {
          right: -105px;
        }

        @media (max-width: @screen-sm-max) {
          display: none;
        }
      }

      .arrow-sticker {
        width: 140px;
        position: absolute;
        top: -50px;
        right: -15px;

        @media (max-width: @screen-lg) {
          right: -70px;
        }
        @media (max-width: @screen-sm-max) {
          display: none;
        }
      }
    }
  }

  .features-card {
    display: flex; /* equal heights */
    flex-wrap: wrap;
    align-items: center;

    .features-card-media,
    .features-card-media-right {
      padding-top: 24px;

      img.img-responsive {
        width: 100%;
      }

      video {
        box-shadow: 0px 4px 6px 0px rgba(30, 37, 48, 0.12),
          0px 8px 16px 0px rgba(30, 37, 48, 0.12);
        max-height: 100%;
        width: auto;
        width: 100%;
      }

      @media (max-width: @screen-sm-max) {
        margin-bottom: 50px;
      }
    }

    @media (min-width: @screen-md-min) {
      .features-card-media-right {
        padding-left: 64px;
      }

      .features-card-media {
        padding-right: 64px;
      }
    }

    .features-card-description,
    .features-card-description-list {
      padding-top: 16px;

      p {
        margin-bottom: 16px;
        font-size: 1.125rem;
        line-height: 1.333;

        @media (max-width: @screen-sm-max) {
          font-size: 1rem;
          line-height: 1.375;
        }
      }

      a.green-link {
        margin-top: 4px;
        display: block;
      }

      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;

        li {
          margin-bottom: 12px;
          font-size: 1.125rem;
          line-height: 1.333;
          // flex is needed in the case of "premium" label being on the same line
          display: flex;

          @media (max-width: @screen-sm-max) {
            font-size: 1rem;
            line-height: 1.375;

            // only for label-premium that appears directly as a child of li
            > .label-premium {
              margin-left: auto;
              align-self: center;
            }
          }

          h4 {
            margin-top: 0;
            margin-bottom: 8px;
            font-size: 20px;
            font-weight: 600;
          }

          p {
            margin-bottom: 0;
          }
        }
      }
    }

    .features-card-description {
      h3 {
        font-size: 1.5rem;
        line-height: 1.4;
        margin-bottom: 8px;
      }
    }

    .features-card-description-list {
      h3 {
        font-size: 1.875rem;
        line-height: 1.5;
      }
    }
  }

  .features-card-hero {
    display: flex; /* equal heights */
    flex-wrap: wrap;
    align-items: center;

    position: relative;
    height: 655px;
    padding-top: @line-height-computed * 2;

    @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;
        }
      }
    }

    .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: 0px 15px;

      // 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%;
      }
    }

    .sticky-tags {
      position: absolute;
      z-index: 2;
      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
      }
    }
  }

  .collaboration-logos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    @media (max-width: @screen-sm-max) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      justify-items: center;
    }

    .enterprise-logo {
      display: inline-block;
      padding: 0 @padding-md;
      height: 35px;
      @media (max-width: @screen-sm-max) {
        margin-top: @margin-md;
      }
    }

    .logo-height-45 {
      height: 45px;
    }
  }

  .template-cards {
    .template-card {
      > img.img-responsive {
        width: 100%;
        border-radius: 8px;
      }

      .template-card-title {
        font-size: 24px;
        margin-top: 16px;
        margin-bottom: 8px;

        a {
          width: 100%;
          font-weight: 600;
          color: var(--neutral-90);
          display: inline-flex;
          justify-content: space-between;
          text-decoration: none;
        }

        i.material-symbols-rounded {
          vertical-align: middle;
          text-decoration: none;
        }
      }

      .template-card-text {
        font-size: 16px;
      }

      &:not(:last-of-type) {
        @media (max-width: @screen-sm-max) {
          margin-bottom: 40px;
        }
      }
    }
  }

  .cta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px;
    background: var(--dark-jungle-green);
    color: var(--white);
    border-radius: 8px;

    @media (max-width: @screen-sm-max) {
      padding: 48px 24px 48px 24px;
    }

    .cta-card-title {
      font-size: 3.25rem; // 52px
      margin-bottom: 8px;
      line-height: 1.3;

      &.title-mono {
        > span {
          // override Noto Sans
          font-family: 'DM Mono', monospace;
        }
      }

      span.purple-color {
        color: #939aff;
        font-weight: 400;
      }

      span.lime-color {
        font-weight: 500;
        color: var(--malachite);
      }

      @media (max-width: @screen-sm-max) {
        font-size: 2.25rem; // 36px
      }
    }

    .cta-card-text {
      font-size: 1.125rem;
      line-height: 1.333;
      margin: 8px 0;
      text-align: center;
    }

    .cta-card-quote {
      font-size: 1.875rem; // 30px
      font-weight: 600;
      line-height: 2.5rem; // 40px
      letter-spacing: 0em;
      text-align: center;
    }
  }

  .quote-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    background: var(--deep-green);
    color: white;
    border-radius: 16px;
    text-align: center;

    blockquote {
      font-size: 1.875rem; // 30px
      font-weight: 600;
      line-height: 1.26;

      @media (max-width: @screen-sm-max) {
        font-size: 1.5rem; // 24px
        line-height: 1.333;
      }
    }

    .quote-card-img {
      margin-top: 32px;
      margin-bottom: 16px;
    }

    @media (max-width: @screen-sm-max) {
      padding: 56px 24px 56px 24px;
    }
  }

  .integrations-card {
    .integrations-icons {
      img {
        width: 6rem; // 96px
        height: 6rem; // 96px
      }

      .first-row,
      .second-row {
        display: flex;
      }

      .first-row {
        justify-content: space-between;
      }

      .second-row {
        margin-top: 40px;
        justify-content: space-evenly;
      }
    }
  }

  .text-with-bg {
    font-family: 'DM Mono', monospace;
    font-feature-settings: 'ss05';
    padding: 0 @padding-sm;
    margin: 0 6px;
    border-radius: 10px;
    margin-top: 5px;

    // will make all spans content inline while avoiding overflowing the viewport in mobile
    // https://developer.mozilla.org/en-US/docs/Web/CSS/display#flow-root
    // https://css-tricks.com/display-flow-root/
    display: inline flow-root;

    &.tangerine-bg {
      background-color: var(--vivid-tangerine);
    }

    &.purple-bg {
      background-color: var(--ceil);
    }

    &.yellow-bg {
      background-color: var(--caramel);
    }

    &.green-bg {
      background-color: var(--mint-green);
    }
  }

  .security-info {
    .security-info-first-row {
      margin-bottom: 32px;
      @media (max-width: @screen-sm-max) {
        margin-bottom: 0;
      }
    }

    .security-info-item {
      @media (max-width: @screen-sm-max) {
        margin-bottom: 16px;
      }
    }
  }

  .resources {
    @media (min-width: @screen-md-min) {
      display: flex; /* equal heights */
      flex-wrap: wrap;
    }
    .resources-card {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      margin-bottom: 48px;
      align-content: flex-start;

      @media (max-width: @screen-sm-max) {
        margin-bottom: 16px;
      }

      img {
        width: 56px;
      }

      h3 {
        width: 100%;
      }

      a {
        margin-top: auto;
      }
    }
  }

  .centered-block {
    @media (min-width: @screen-md-min) {
      text-align: center;
    }
  }

  .mono-text {
    font-family: 'DM Mono', monospace;
    color: var(--green-60);
    font-feature-settings: 'ss05';
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5rem;
    margin: 0;
  }

  .link-with-arrow {
    font-size: 1.125rem;
    line-height: 1.333;
    font-family: 'DM Mono', monospace;
    font-feature-settings: 'ss05';
    font-weight: 500;

    i.material-symbols-rounded {
      vertical-align: middle;
      padding-bottom: 3px;
      font-size: 24px;
    }
  }

  .green-link {
    .link-with-arrow;
    color: var(--emerald-green);

    &:hover {
      color: var(--green-60);
      .right-arrow {
        background: var(--green-60);
      }
    }
  }

  .inline-green-link {
    color: var(--green-50);
    text-decoration: underline;
  }

  .white-link {
    .link-with-arrow;
    color: white;
  }

  .btn-blue {
    background: var(--sapphire-blue);
    color: var(--white);

    &:hover {
      background: var(--sapphire-blue-dark);
    }
  }

  .round-background {
    border-radius: 50%;
    font-size: 1.5rem;
    top: 4px;
    vertical-align: middle;
    margin-right: 8px;
    width: 24px;
    height: 24px;
  }

  .green-round-background {
    .round-background;
    background: var(--mint-green);
    color: var(--deep-green);
  }

  .blue-round-background {
    .round-background;
    background: var(--blue-10);
    color: var(--blue-40);
  }

  // most of these are here to replace rules from core/type.less
  blockquote {
    border-left: none;
    font-size: 1.875rem;
    line-height: 1.333;
    font-weight: 600;
    quotes: '\201C''\201D'; // override default quotes
    padding: unset;
    margin: unset;
    font-family: 'Noto Sans', sans-serif;

    &::after {
      visibility: visible;
      display: inline;
      margin-left: 1px; // it's too tight to the text otherwise
    }

    &::before {
      color: inherit;
      margin-right: 0;
      vertical-align: 0;
    }

    &::after,
    &::before {
      font-size: 1.875rem;
      line-height: 1.333;
    }

    @media (max-width: @screen-sm-max) {
      font-size: 1.5rem;
      line-height: 1.333;

      &::after,
      &::before {
        visibility: visible;
        font-size: 1.5rem;
        line-height: 1.333;
      }
    }
  }

  .circle-img {
    height: 64px;
    max-width: 64px;
  }

  .premium-badge {
    .premium-badge-img {
      margin-left: 10px;
    }

    @media (max-width: @screen-xs-max) {
      display: flex;
      .premium-badge-img {
        width: 87px;
        margin-left: auto;
      }
    }
  }

  .responsive-button-container {
    display: flex;
    margin-top: 24px;
    gap: 16px;

    &.centered-buttons {
      justify-content: center;
    }

    @media (max-width: @screen-sm-max) {
      flex-direction: column-reverse;
      width: 100%;
    }
  }

  .label-premium {
    height: 20px; // override default height
    @media (max-width: @screen-md-max) {
      display: block;
      width: fit-content;
      margin: 10px 0px 0px 0px;
    }
  }

  .header-description {
    p {
      font-size: 1.25rem;
      line-height: 1.4;
      margin-bottom: 0;

      @media (max-width: @screen-sm-max) {
        font-size: 1.125rem;
        line-height: 1.33;
      }
    }
  }

  .editor-pdf-video {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 585px;
    padding: 0px 15px;

    @media (max-width: @screen-sm-max) {
      height: auto;
    }

    video {
      box-shadow: 0px 60px 25px -15px rgba(16, 24, 40, 0.2);
      max-height: 100%;
      width: auto;

      @media (max-width: @screen-sm-max) {
        width: 100%;
      }
    }
  }

  .overleaf-sticker {
    float: right;
  }
}