HEX
Server: nginx/1.18.0
System: Linux test-ipsremont 5.4.0-214-generic #234-Ubuntu SMP Fri Mar 14 23:50:27 UTC 2025 x86_64
User: ips (1000)
PHP: 8.0.30
Disabled: pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare,
$ pwd: /var/www/quadcode-site/src/style/components/
Upload Files
File: /var/www/quadcode-site/src/style/components/footer.scss
.footerTabs {
  background: rgba(248, 251, 253, 1);

  .container {
    padding: 0 !important;
  }

  .footerTabsWrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;

    @include breakpoint-down('tabM') {
      margin-left: -20px;
      width: calc(100% + 20px * 2);
    }
  }

  .footerTabsLogo {
    display: flex;
    max-width: 120px;

    @include breakpoint-down('tabM') {
      display: none;
    }

    :global(svg) {
      width: 100%;
      height: auto;
    }
  }

  .footerTabsItems {
    display: flex;

    @include breakpoint-down('tabM') {
      width: 100%;
    }
  }

  .footerTabsItem {
    font-weight: 500;
    font-size: 15px;
    line-height: 21px;

    @include breakpoint-down('deskL') {
      font-size: 14px;
      line-height: 20px;
    }

    @include breakpoint-down('deskS') {
      font-size: 12px;
      line-height: 13px;
    }

    padding: 22px 25px 22px 22px;
    position: relative;

    @include breakpoint-down('deskL') {
      padding: 19px 24px 18px 26px;
    }

    @include breakpoint-down('deskS') {
      padding: 19px 24px 21px 24px;
    }

    @include breakpoint-down('tabM') {
      padding: 15px 36px;
      width: calc(100% / 2);
    }

    &:last-of-type {
      transition: .4s ease-in-out;
      color: rgba(50, 50, 50, 0.3);
      border-left: 2px solid $white;

      &:hover {
        color: rgba(20, 20, 20, 1);
      }
    }

    &.active {

      @include breakpoint-down('tabM') {
        background: $white;
      }

      &:after {
        content: '';
        position: absolute;
        height: 2px;
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(230, 35, 52, 1);

        @include breakpoint-down('tabM') {
          bottom: auto;
          top: 0;
        }
      }
    }
  }
}

.footer {
  background: $white;
  padding: 0 0 26px 0;

  @include breakpoint-down('deskS') {
    padding-top: 0;
  }

  @include breakpoint-down('tabM') {
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    padding-bottom: 31px;
  }

  .footerTabs {
    margin-bottom: 37px;

    @include breakpoint-down('deskL') {
      margin-bottom: 68px;
    }

    @include breakpoint-down('deskS') {
      margin-bottom: 79px;
    }

    @include breakpoint-down('tabM') {
      margin-bottom: 40px;
    }
  }

  .container {
    position: relative;

    @include breakpoint-down('deskL') {
      max-width: 1180px;
    }

    @include breakpoint-down('deskM') {
      max-width: 1120px;
    }

    @include breakpoint-down('tabM') {
      width: auto;
      padding: 0 20px;
    }
  }

  &__row {

    &_first {
      display: flex;
      margin-bottom: 40px;

      @include breakpoint-down('deskL') {
        margin-bottom: 35px;
      }

      @include breakpoint-down('deskS') {
        flex-wrap: wrap;
      }

      @include breakpoint-down('tabM') {
        flex-direction: column;
        margin-bottom: 24px;
        margin-left: -20px;
        width: calc(100% + 40px);
      }

      .footer__social {
        flex: 1;
        justify-content: flex-end;
        display: flex;
        align-items: flex-start;

        @include breakpoint-down('deskS') {
          order: 1;
          width: 100%;
          justify-content: center;
          flex: none;
          margin-top: 32px;
        }

        @include breakpoint-down('tabM') {
          justify-content: center;
          order: 1;
          margin-bottom: 0;
          margin-top: 86px;
        }
      }
    }

    &_middle {
      display: flex;
      margin-bottom: 24px;
      width: 100%;

      @include breakpoint-down('deskS') {
        margin-bottom: 24px;
      }
    }

    &_last {
      display: flex;
      align-items: center;
      justify-content: space-between;

      @include breakpoint-down('deskS') {
        display: block;
      }
    }
  }

  &__items {
    display: flex;
    align-items: center;

    @include breakpoint-down('deskS') {
      margin-bottom: 24px;
      width: 100%;
      max-width: 532px;
      margin-inline: auto;
      justify-content: space-between;
    }

    @include breakpoint-down('tabM') {
      flex-direction: column;
    }
  }

  &__item {
    display: flex;
    margin-right: 80px;

    @include breakpoint-down('deskM') {
      margin-right: 64px;
    }

    @include breakpoint-down('deskS') {
      margin-right: 0;
    }

    @include breakpoint-down('tabM') {
      margin-bottom: 16px;
    }

    &:last-of-type {
      margin-right: 0;
      margin-bottom: 0;
    }
  }

  &__link {
    font-weight: 500;
    font-size: 15px;
    line-height: 21px;

    @include breakpoint-down('deskL') {
      font-size: 14px;
      line-height: 20px;
    }

    @include breakpoint-down('deskS') {
      font-size: 12px;
      line-height: 13px;
    }
  }

  &__block {
    margin-right: 81px;

    @include breakpoint-down('deskL') {
      margin-right: 65px;
    }

    @include breakpoint-down('deskS') {
      margin-right: 57px;
    }

    @include breakpoint-down('tabM') {
      padding-top: 0;
      margin-right: 0;
      min-width: 0;
      border-top: 2px solid rgba(242, 246, 249, 1);
    }

    &:first-of-type {
      @include breakpoint-down('tabM') {
        border-top: none;
      }
    }

    &-header {
      font-size: 15px;
      font-weight: 700;
      line-height: 21px;

      @include breakpoint-down('deskL') {
        font-size: 14px;
        line-height: 20px;
      }

      @include breakpoint-down('deskS') {
        font-size: 12px;
        line-height: 13px;
      }

      margin-bottom: 16px;
      display: block;

      @include breakpoint-down('deskL') {
        margin-bottom: 16px;
      }

      @include breakpoint-down('deskS') {
        margin-bottom: 12px;
      }

      @include breakpoint-down('tabM') {
        font-size: 20px;
        font-weight: 700;
        line-height: 28px;
        text-align: right;

        transition: 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
        width: 100%;
        margin-bottom: 0;
        padding: 22px 85px 23px 22px;
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 17L20 23L26 17' stroke='%23F5333F' stroke-width='3'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-size: 40px 40px;
        background-position-y: center;
        background-position-x: calc(100% - 21px);
      }
    }

    &-body {
      max-width: 165px;

      @include breakpoint-down('deskM') {
        max-width: 139px;
      }

      @include breakpoint-down('tabM') {
        max-width: none;
        overflow: hidden;
        opacity: 0;
        height: 0;
        transition: 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
      }
    }

    &-item {
      margin-bottom: 16px;
      display: flex;

      @include breakpoint-down('deskL') {
        margin-bottom: 16px;
      }

      @include breakpoint-down('deskS') {
        margin-bottom: 12px;
      }

      @include breakpoint-down('tabM') {
        margin-bottom: 0;
        border-bottom: 2px solid rgba(255, 255, 255, 1);
      }

      &:last-of-type {
        margin-bottom: 0;

        @include breakpoint-down('tabM') {
          border-bottom: 0;
        }
      }
    }

    &-link {
      font-weight: 500;
      font-size: 15px;
      line-height: 21px;

      @include breakpoint-down('deskL') {
        font-size: 14px;
        line-height: 20px;
      }

      @include breakpoint-down('deskS') {
        font-size: 12px;
        line-height: 13px;
      }

      @include breakpoint-down('tabM') {
        font-size: 17px;
        font-weight: 500;
        line-height: 24px;
        display: flex;
        justify-content: flex-end;

        padding: 19px 85px 19px 21px;
        width: 100%;
        background: rgba(248, 251, 253, 1);
      }

      &:global(.active) {
        @include breakpoint-down('tabM') {
          background: rgba(242, 246, 249, 1);
        }
      }
    }

    &.open {
      .footer__block-body {
        @include breakpoint-down('tabM') {
          opacity: 1;
        }
      }

      .footer__block-header {
        @include breakpoint-down('tabM') {
          background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 23L20 17L14 23' stroke='%23E62334' stroke-width='3'/%3E%3C/svg%3E%0A");
        }
      }
    }
  }

  &__text {
    width: 100%;
    padding: 20px;
    border: 1px solid rgba(136, 154, 168, 1);

    @include breakpoint-down('deskS') {
      padding: 19px 35px;
    }

    @include breakpoint-down('tabM') {
      padding: 20px;
    }

    p {
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;

      @include breakpoint-down('deskL') {
        font-size: 13px;
        line-height: 18px;
      }

      @include breakpoint-down('deskS') {
        font-size: 11px;
        line-height: 15px;
      }

      color: rgba(136, 154, 168, 1);
    }
  }

  &__copyright {
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;

    @include breakpoint-down('deskL') {
      font-size: 14px;
      line-height: 20px;
    }

    @include breakpoint-down('deskS') {
      font-size: 12px;
      line-height: 17px;
    }

    color: rgba(136, 154, 168, 1);

    @include breakpoint-down('deskS') {
      width: max-content;
      margin-inline: auto;
    }
  }
}
@ Telegram