landing_page/qdrant-landing/themes/qdrant-2024/assets/css/partials/_footer.scss

@use '../helpers/functions' as *;

.footer {
  padding-top: $spacer * 4;
  padding-bottom: $spacer * 2.5;
  background-color: $neutral-10;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  &__top {
    display: flex;
    justify-content: center;
    padding-bottom: $spacer * 4;
    border-bottom: 1px solid $neutral-20;
  }

  &__top-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: $spacer * 3;
  }

  &__logo {
    max-width: pxToRem(118);
    margin-bottom: $spacer * 2;
  }

  &__social {
    max-width: pxToRem(350);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  &__subtitle {
    font-size: map-get($font-sizes-text, 's');
    line-height: pxToRem(21);
    color: $neutral-70;
    margin-bottom: $spacer * 2;
  }

  &__social-media-platforms {
    display: flex;
    gap: $spacer * 1.5;
  }

  &__social-media-link {
    outline: none;
    &:hover svg path {
      fill: $neutral-70;
    }
  }

  &__menu {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: $spacer * 3;
  }

  &__menu-section {
    display: flex;
    flex-direction: column;
    min-width: pxToRem(120);
  }

  &__menu-section-title {
    font-size: map-get($font-sizes-text, 'm');
    line-height: pxToRem(24);
    color: $neutral-98;
    font-weight: bold;
  }

  &__menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  &__menu-item:not(:last-of-type) {
    margin-bottom: $spacer;
  }

  &__menu-item a {
    color: $neutral-70;
    font-size: map-get($font-sizes-text, 's');
    line-height: pxToRem(21);
    text-decoration: none;
  }

  &__menu-item a:hover {
    color: $neutral-98;
  }

  &__middle {
    padding-top: $spacer * 2.5;
    padding-bottom: $spacer * 2.5;
    border-bottom: 1px solid $neutral-20;
  }

  &__middle-content {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    max-width: 100%;
    justify-content: space-between;
  }

  &__middle-newsletter {
    max-width: 100%;
    display: flex;
    flex-direction: column;
  }

  &__middle-title {
    font-weight: 500;
    font-size: map-get($font-sizes-text, 'xl');
    line-height: pxToRem(30);
    margin-bottom: $spacer;
    color: $neutral-98;
  }

  &__middle-subtitle {
    color: $neutral-70;
    font-size: map-get($font-sizes-text, 's');
    line-height: pxToRem(21);
    font-weight: 500;
  }

  &__bottom {
    width: 100%;
    padding-top: pxToRem(30);
    padding-bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__bottom-content {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    max-width: 100%;
    gap: $spacer * 1.5;
    justify-content: space-between;
  }

  &__bottom-content span,
  &__bottom-content a {
    color: $neutral-70;
    font-weight: 500;
    font-size: map-get($font-sizes-text, 's');
    line-height: pxToRem(21);
  }

  &__bottom-content a {
    text-decoration: none;
  }

  &__bottom-links {
    display: flex;
    gap: $spacer * 3;
  }

  @include media-breakpoint-up(xl) {
    padding-bottom: $spacer * 3;

    &__menu {
      min-width: pxToRem(540);
      gap: pxToRem(54);
    }

    &__menu-section {
      min-width: unset;
    }

    a.footer__menu-section-title {
      &:hover {
        box-shadow: 0 1px 0 0 currentColor;
      }
    }

    &__top-content {
      padding: 0;
      flex-direction: row;
      gap: 0;
    }

    &__middle-newsletter {
      justify-content: flex-end;
    }

    &__bottom {
      padding-bottom: pxToRem(30);
    }

    &__bottom-content {
      gap: 0;
      flex-direction: row;
    }
  }
}

@import 'subscribe-form';