Server : Apache/2.4.52 (Ubuntu) System : Linux webserver 6.8.0-49-generic #49~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Wed Nov 6 17:42:15 UTC 2 x86_64 User : www-data ( 33) PHP Version : 8.1.2-1ubuntu2.21 Disable Function : NONE Directory :  /var/www/theprintave/wp-content/themes/pricom/assets/scss/elementor/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

$root: '.haru-nav-menu';
$haru: '.haru';
$haru-item: '.haru-item';
$haru-sub-item: '.haru-sub-item';
$haru-menu-toggle: '.haru-menu-toggle';
$elementor-root: '.elementor-widget-haru-nav-menu';
$header: '.haru-header';

#{$root} {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: normal;
  -webkit-tap-highlight-color: rgba($cl-black, 0);

  .menu-label {
    border-radius: 2px;
    color: $cl-white;
    padding: 1px 3px;
    font-size: 10px;
    text-align: center;
    vertical-align: baseline;
    margin-left: 5px;
    position: relative;
    top: -8px;
  }

  .menu-icon {
    height: 16px;
    line-height: 16px;
    margin-right: 8px;

    img {
      max-height: 100%;
    }
  }

  .sub-arrow {
    i {
      font-style: normal;
      font-family: "haruicons";
    }
  }

  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: normal;
    -webkit-tap-highlight-color: rgba($cl-black, 0);
  }

  a,
  li {
    position: relative;
    display: block;
  }

  li {
    border-width: 0;
  }

  // Level 0
  > li {
    > a {
      display: flex;
      align-items: center;
    }
  }

  &--layout-horizontal {
    display: flex;

    #{$root} {
      display: flex;
      flex-wrap: wrap;

      #{$haru-item},
      #{$haru-sub-item} {
        white-space: nowrap; // issue with mega menu
      }
    }
  }

  &--indicator {
    &-none {
      #{$root} {
        #{$haru-item} {
          &.has-submenu {
            padding-right: 20px;

            .sub-arrow {
              display: none;
            }
          }
        }
      }
    }

    &-chevron {
      #{$root} {
        .sub-arrow {
          i:before {
            content: "\e914";
            font-weight: $fw-bold;
            font-size: 12px;
            margin-left: 5px;
          }
        }
      }
    }

    &-angle {
      #{$root} {
        .sub-arrow {
          i:before {
            content: "\e904";
            font-weight: $fw-bold;
            margin-left: 5px;
          }
        }
      }
    }

    &-classic {
      #{$root} {
        .sub-arrow {
          i:before {
            content: "\e903";
            font-weight: $fw-bold;
            margin-left: 5px;
          }
        }
      }
    }

    &-plus {
      #{$root} {
        .sub-arrow {
          i:before {
            content: '+';
            margin-left: 5px;
          }

          &.active {
            i:before {
              content: '-';
            }
          }
        }
      }
    }

    // Sub Menu Indicator
    &-chevron,
    &-angle,
    &-classic {
      #{$root}--main {
        .menu-item-has-children {
          > .sub-menu {
            .sub-arrow {
              transform: rotate(-90deg) translateY(5px);

              i:before {
                margin-left: 0;
              }
            }
          }
        }
      }
    }
  }

  &__align {
    &-left {
      #{$root} {
        margin-right: auto;
        justify-content: flex-start;
      }

      #{$root}--layout-vertical {
        > ul > li > a {
          -webkit-box-pack: start;
          -ms-flex-pack: start;
          justify-content: flex-start;
        }
      }
    }

    &-right {
      #{$root} {
        margin-left: auto;
        justify-content: flex-end;
      }

      #{$root}--layout-vertical {
        > ul > li > a {
          -webkit-box-pack: end;
          -ms-flex-pack: end;
          justify-content: flex-end;
        }
      }
    }

    &-center {
      #{$root} {
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
      }

      #{$root}--layout-vertical {
        > ul > li > a {
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
        }
      }
    }

    &-justify {
      #{$root}--layout-horizontal {
        #{$root} {
          width: 100%;

          > li {
            flex-grow: 1;

            > a {
              justify-content: center;
            }
          }
        }
      }

      #{$root}--layout-vertical {
        #{$root} {
          > li {
            .haru-item--main .sub-arrow {
              display: inline-flex;
              align-items: center;
              margin-left: auto;
            }
          }
        }
      }
    }
  }

  &--main {
    .menu-item-has-children {
      &:hover {
        // Level 1
        > .sub-menu {
          display: block;
          // opacity: 1;
          // visibility: visible;
          top: 100%;
          left: 0;
          z-index: 99;
          // background-color: $cl-white;

          > .menu-item-has-children {
            &:hover {
              // Level 2
              > .sub-menu {
                display: block;
                // opacity: 1;
                // visibility: visible;
                top: 0;
                left: 100%;
                z-index: 99;
                // background-color: $cl-white;

                > .menu-item-has-children {
                  &:hover {
                    // Level 3
                    > .sub-menu {
                      display: block;
                      // opacity: 1;
                      // visibility: visible;
                      top: 0;
                      left: 100%;
                      z-index: 99;
                      // background-color: $cl-white;

                      > .menu-item-has-children {
                        &:hover {
                          // Level 4
                          > .sub-menu {
                            display: block;
                            // opacity: 1;
                            // visibility: visible;
                            top: 0;
                            left: 100%;
                            z-index: 99;
                            // background-color: $cl-white;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      > .sub-menu {
        box-shadow: 0px 15px 20px rgba($cl-black, .1);

        .sub-arrow {
          float: right;
        }
      }

      .sub-menu {
        left: 100%;
      }
    }

    #{$root} {
      ul.sub-menu {
        position: absolute;
        min-width: 205px;
        display: none;
        background-color: $cl-white;
        // display: block;
        // opacity: 0;
        // visibility: hidden;
      }

      //  a
      // > .menu-item > a
      #{$haru-item}--main {
        padding: 13px 15px;
      }
    }
  }

  &--subdown {
    #{$haru-sub-item} {
      color: $cl-black;
      padding: 13px 15px;
    }
  }

  &--dropdown {
    background-color: $cl-white;
    font-size: 90%;
    display: none;
    max-height: 100vh;
    box-shadow: 0px 15px 20px rgba($cl-black, .1);

    ul:not(.sub-menu),
    li {
      display: block;
      list-style: none;
      margin: 0;
      padding: 0;
      line-height: normal;
      -webkit-tap-highlight-color: rgba($cl-black, 0);
    }

    ul.sub-menu {
      display: none;
    }

    ul {
      ul {
        a,
        a:hover,
        a:focus,
        a:active {
          border-left: 8px solid transparent; 
        }

        ul {
          a,
          a:hover,
          a:focus,
          a:active {
            border-left: 16px solid transparent; 
          }

          ul {
            a,
            a:hover,
            a:focus,
            a:active {
              border-left: 24px solid transparent; 
            }

            ul {
              a,
              a:hover,
              a:focus,
              a:active {
                border-left: 32px solid transparent; 
              }
            }
          }
        }
      }
    }

    a {
      color: $cl-black;
      padding: 13px 15px;
    }

    .haru-nav-menu .sub-arrow {
      i {
        &:before {
          margin-left: 0;
        }
      }
    }

    #{$haru-item} {
      &:hover,
      &:focus,
      &.highlighted,
      &.haru-item-active {
        background-color: $cl-primary;
        color: $cl-white;

        img {
          filter: brightness(0) invert(1);
        }
      }
    }

    &-tablet {
      #{$root}--main {
        @media screen and (max-width: 1024px) {
          display: none!important;
        }
      }

      #{$root}--dropdown,
      #{$haru-menu-toggle} {
        @media screen and (min-width: 1025px) {
          display: none!important;
        }
      }

      span.sub-arrow {
        @media screen and (max-width: 1024px) {
          position: absolute;
          top: 50%;
          margin-top: -17px;
          left: auto;
          right: 15px;
          width: 34px;
          height: 34px;
          line-height: 34px;
          overflow: hidden;
          font-weight: $fw-bold;
          font-size: 16px;
          text-align: center;
          text-shadow: none;
          background: rgba($black, .05);
          border-radius: 0;
          z-index: 9;
        }

        i {
          @media screen and (max-width: 1024px) {
            display: block;
            transition: all .3s;
          }
        }

        &.active {
          i {
            @media screen and (max-width: 1024px) {
              transform: rotate(180deg);
              transition: all .3s;
            }
          }
        }
      }

      &#{$root}--indicator {
        &-none {

        }

        &-plus {
          a.highlighted {
            .sub-arrow {
              i:before {
                @media screen and (max-width: 1024px) {
                  content: '-';
                }
              }
            }
          }
        }
      }
    }

    &-mobile {
      #{$root}--main {
        @media screen and (max-width: 767px) {
          display: none!important;
        }
      }

      #{$root}--dropdown,
      #{$haru-menu-toggle} {
        @media screen and (min-width: 768px) {
          display: none!important;
        }
      }

      span.sub-arrow {
        @media screen and (max-width: 767px) {
          position: absolute;
          top: 50%;
          margin-top: -17px;
          left: auto;
          right: 0;
          width: 34px;
          height: 34px;
          line-height: 34px;
          overflow: hidden;
          font-weight: $fw-bold;
          font-size: 16px;
          text-align: center;
          text-shadow: none;
          background: rgba($black, .05);
          border-radius: 0;
          z-index: 9;
        }

        i {
          @media screen and (max-width: 767px) {
            display: block;
            transition: all .3s;
          }
        }

        &.active {
          i {
            @media screen and (max-width: 767px) {
              transform: rotate(180deg);
              transition: all .3s;
            }
          }
        }
      }

      &#{$root}--indicator {
        &-plus {
          a.highlighted {
            .sub-arrow {
              i:before {
                @media screen and (max-width: 767px) {
                  content: '-';
                }
              }
            }
          }
        }
      }
    }

    &#{$root}__container {
      margin-top: 10px;
      overflow: auto;
      z-index: 99;
      // transform-origin: top;
      // transition: max-height .3s, transform .3s;
    }
  }

  &--stretch {
    #{$root}--dropdown {
      position: absolute;
    }
  }

  &--layout-vertical {
    background: $cl-white;
    border: 1px solid $cl-border;
    box-sizing: border-box;
    box-shadow: 0 0 8px rgba($cl-black, .1);
    border-radius: $border-radius;
    position: relative;

    &.show-view-more {
      .menu-vertical-toggle {
        display: block;
      }
    }

    &#{$root}--main {
      .menu-item-has-children {
        &:hover {
          // Level 1
          > .sub-menu {
            left: 100%;
            top: 0;
          }
        }
      }
    }

    .haru-menu-header {
      background-color: $cl-primary;
      color: $cl-white;
      border-top-left-radius: $border-radius;
      border-top-right-radius: $border-radius;
      font-size: 18px;
      font-weight: $fw-bold;
      padding: 16px 25px;
      letter-spacing: 1px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      text-transform: uppercase;

      @media screen and (max-width: $screen-lg-max) {
        font-size: 16px;
      }

      &:hover {
        cursor: pointer;
      }

      i {
        font-weight: $fw-bold;
        margin-right: 10px;
        position: relative;
        top: -1px;

        @media screen and (max-width: $screen-lg-max) {
          top: 0;
        }

        &:before {
          content: '\e927';
          font-family: 'phosphor'!important;
          font-size: 22px;

          @media screen and (max-width: $screen-lg-max) {
            font-size: 20px;
          }
        }
      }
    }

    .menu-vertical-wrap {
      position: absolute;
      width: 100%;
      top: 100%;
      box-shadow: 0 0 8px rgba($cl-black, .1);
      border-bottom-left-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
      z-index: 9;
    }

    #{$root} {
      @include scrollbars(3px, $cl-primary, #ededed, 0);
      
      > li {
        border-bottom: 1px solid $cl-border;

        &:last-child {
          border-bottom: none;
        }

        &.menu-item--more {
          display: none;

          &.show {
            display: block;
          }
        }

        // May be Process Align here
        .haru-item--main .sub-arrow {
          
          transform: rotate(-90deg);
          transform-origin: top right;
        }
      }

      .menu-icon {
        height: 24px;
        line-height: 24px;
        margin-right: 10px;
        display: inline-flex;
        align-items: center;

        @media screen and (max-width: $screen-lg-max) {
          // height: 20px;
          // line-height: 20px;
        }
      }
    }

    .menu-vertical-toggle {
      display: none;

      .vertical-view-more {
        display: flex;
        align-items: center;
        border-top: 1px solid transparent;
        color: $cl-black;
        padding: 13px 15px;
        transition: all .3s;

        &:before {
          content: '\e922';
          font-family: 'phosphor';
          font-size: 24px;
          margin-right: 10px;
        }

        &:hover {
          color: $cl-primary;
          transition: all .3s;
        }

        &.show-category {
          border-top: 1px solid $cl-border;

          &:before {
            content: '\e957';
          }
        }
      }
    }
  }
}

#{$haru-menu-toggle} {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  width: 34px;
  height: 34px;
  // padding: 6px;
  cursor: pointer;
  border: 0 solid;
  border-radius: $border-radius-small;
  background-color: rgba($black, .05);
  color: $cl-black;

  &.haru-active {
    i:before {
      content: '\e957';
    }
  }

  &.toggle-vertical {
    width: 100%;
    height: auto;

    .haru-menu-header {
      background-color: $cl-primary;
      border-radius: $border-radius;
      color: $cl-white;
      font-size: 16px;
      font-weight: $fw-bold;
      padding: 10px 15px;
      letter-spacing: 1px;
      white-space: nowrap;
      display: flex;
      width: 100%;
      align-items: center;
      text-transform: uppercase;

      @media screen and(max-width: $screen-xs-max) {
        font-size: 15px;
      }

      &:hover {
        cursor: pointer;
      }

      i {
        font-weight: $fw-bold;
        margin-right: 10px;
        position: relative;
        top: 0px;

        &:before {
          content: '\e927';
          font-family: 'phosphor'!important;
          font-size: 22px;

          @media screen and(max-width: $screen-xs-max) {
            font-size: 20px;
          }
        }
      }
    }
  }
}

#{$elementor-root} {
  &:not(#{$root}--toggle) {
    #{$haru-menu-toggle} {
      display: none;
    }
  }

  .elementor-widget-container {
    display: flex;
    flex-direction: column;
  }

  #{$root}--main {
    #{$haru-item} {
      color: $cl-text-menu;
      transition: all .3s;

      &:hover,
      &:focus,
      &.highlighted,
      &.haru-item-active {
        color: $cl-primary;
        transition: all .3s;
      }
    }
  }
}

#{$haru-item} {
  &:before,
  &:after {
    display: block;
    position: absolute;
    transition: .3s;
  }

  &:not(:hover):not(:focus):not(#{$haru-item}-active) {
    &:before,
    &:after {
      opacity: 0;
    }
  }

  &-active,
  &:hover,
  &:focus {
    &:before,
    &:after {
      transform: scale(1);
    }
  }
}

#{$haru} {
  &--pointer {
    &-overline,
    &-underline,
    &-double-line {
      #{$haru-item}--main {
        &:before,
        &:after {
          background-color: $cl-primary;
          height: 2px;
          width: 100%;
          left: 0;
          z-index: 1;
        }
      }

      &#{$haru}--animation {
        &-slide {
          #{$haru-item}--main {
            &:not(:hover):not(:focus):not(#{$haru-item}-active) {
              &:before {
                width: 8px;
                left: -16px;
              }

              &:after {
                width: 8px;
                left: calc( 100% + 16px);
              }
            }
          }
        }

        &-grow {
          #{$haru-item}--main {
            &:not(:hover):not(:focus):not(#{$haru-item}-active) {
              &:before,
              &:after {
                height: 0;
                width: 0;
                left: 50%;
              }
            }
          }
        }

        &-drop {
          &-in {
            #{$haru-item}--main {
              &:not(:hover):not(:focus):not(#{$haru-item}-active) {
                &:before {
                  top: -8px;
                }

                &:after {
                  bottom: -8px;
                }
              }
            }
          }

          &-out {
            #{$haru-item}--main {
              &:not(:hover):not(:focus):not(#{$haru-item}-active) {
                &:before {
                  top: 8px;
                }

                &:after {
                  bottom: 8px;
                }
              }
            }
          }
        }

        &-none {
          transition-duration: 0s;

          &:before,
          &:after,
          &:hover,
          &:focus {
            transition-duration: 0s;
          }

          #{$haru-item}--main {
            transition-duration: 0s;

            &:before,
            &:after,
            &:hover,
            &:focus {
              transition-duration: 0s;
            }
          }
        }
      }
    }

    &-overline,
    &-double-line {
      #{$haru-item}--main {
        &:before {
          content: '';
          top: 0;
        }
      }
    }

    &-underline,
    &-double-line {
      #{$haru-item}--main {
        &:after {
          content: '';
          bottom: 0;
        }
      }
    }

    &-highlight {
      #{$haru-item}--main {
        &:after {
          content: '';
          background-color: rgba($cl-black, .1);
          border-radius: $border-radius-e-small;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 90%;
          height: 20px;
          z-index: -1;
        }
      }
    }
  }
}

#{$haru-sub-item} {
  &:hover,
  &:focus,
  &.highlighted,
  &.haru-item-active {
    background-color: $cl-primary;
    color: $cl-white;
    transition: all .3s;
  }
}

.elementor-screen-only,
.screen-reader-text,
.screen-reader-text span,
.ui-helper-hidden-accessible {
  position: absolute;
  top: -10000em;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

// Mega menu
.mega-menu-content {
  // .menu {
    #{$haru-item} {
      padding: 10px 0;
      transition: all .3s;

      &:hover {
        transition: all .3s;
      }
    }

    .menu-item {
      &:first-child {
        #{$haru-item} {
          padding-top: 0;
        }
      }

      &:last-child {
        #{$haru-item} {
          padding-bottom: 0;
        }
      }
    }
  // }

  .haru-button {
    display: inline-block;
  }
}

// Dark Mode
.dark-mode {
  #{$elementor-root} {
    #{$root}--main {
      .menu-item-has-children {
        > .sub-menu {
          box-shadow: 0px 15px 20px rgba($cl-white, .1);
        }
      }

      #{$haru-item} {
        color: $cl-white-dark;

        &:hover,
        &:focus,
        &.highlighted,
        &.haru-item-active {
          color: $cl-primary;
        }
      }

      #{$root} {
        ul.sub-menu {
          background-color: $cl-black;
        }
      }
    }

    #{$root}--subdown {
      a {
        color: $cl-white-dark;
      }
    }

    #{$haru-sub-item} {
      &:hover,
      &:focus,
      &.highlighted,
      &.haru-item-active {
        background-color: $cl-primary;
        color: $cl-white;
      }
    }

    #{$root}--dropdown {
      background-color: $cl-black;
      box-shadow: 0px 15px 20px rgba($cl-white, .1);

      a {
        color: $cl-white;
        padding: 13px 15px;
      }
    }

    #{$haru-menu-toggle} {
      background-color: $cl-white-dark;
    }
  }
}

#{$header} {
  &--transparent {
    &-light:not(.haru-header--sticky-on) {
      #{$haru-menu-toggle} {
        background-color: $cl-white-dark;
        color: $cl-black;
      }
    }

    &-dark:not(.haru-header--sticky-on) {
      #{$haru-menu-toggle} {
        background-color: $cl-black;
        color: $cl-white-dark;
      }
    }
  }
}

// Mobile Menu
.hidden-scroll-y {
  overflow-y: hidden;
}