barg-restuarant/assets/scss/_globalStyles.scss

body {
  background: $bgColor;
  @include transition(background-color $trs);
  font-family: 'sahel';
  direction: rtl;
  color: $txtColor;
}

h1, h2, h3, h4, h5, h6, a, p, span {
  font-family: 'sahel' !important;
}

* {
  direction: rtl;
  outline: none;
}

pre {
  display: block;
  width: 100%;
  background: #000;
  color: greenyellow;
  padding: 25px;
  direction: ltr;
  text-align: left;
  margin-bottom: 25px;
}

.logo {
  display: flex;
  margin: auto;
}

.logo--svg {
  display: block;
  margin: auto;
  width: 100%;
  padding: 0 10px;

  .dark--green {
    fill: #009444;
    ////////
    .line {
      stroke: #009444;
      stroke-width: 0.5px;
    }
  }

  .light--green {
    fill: #8DC63F;
  }

  .main--groups {
    @include transition(fill $trs);

    .line {
      @include transition(stroke $trs);
    }
  }
}

.simple-lightbox {
  .sl-navigation {
    button {
      direction: ltr;
    }
  }
}

//////////////////////// global themes (for use in body tag)
///// cafe theme
.cafe--theme {
  .logo--svg {
    .dark--green {
      fill: #fff !important;
      ////////
      .line {
        stroke: #fff !important;
      }
    }

    .light--green {
      fill: #fff !important;
    }
  }

  .site--header {
    .header--nav {
      background: $themeHover;

      .nav--links {
        ul {
          li {
            a {
              color: #fff;

              &:hover {
                color: rgba(255, 255, 255, 0.5);
              }
            }

            .active-link {
              position: relative;
              color: #fff;

              &:hover {
                &::after {
                  background: rgba(255, 255, 255, 0.5);
                }
              }

              &::after {
                content: '';
                display: block;
                width: 100%;
                height: 2px;
                background: #fff;
                position: absolute;
                bottom: 18px;
                left: 0;
                @include transition($trs);
              }
            }
          }
        }
      }

      .logo--box {
        background: $themeHover;
      }
    }
  }
}

///// reverse theme
.reverse--theme {
  .page--container {
    background: $theme !important;
  }

  .site--header {
    .reservation {
      background: #000 !important;

      &:hover {
        background-color: #000 !important;
      }
    }
  }

  .site--footer {
    background: $theme !important;

    .goUp {
      background: #fff !important;

      p {
        color: #000 !important;
      }

      &:hover {
        background: #fff !important;
      }
    }
  }

  .hamburger--btn {
    background: $themeHover !important;
  }
}

//// offCanvas active theme
.offCanvas--active {
  .simplebar-content {
    height: 100vh !important; // this will affect page scroll
    overflow: hidden !important; // this will affect page scroll
  }

  .site--header {
    .header--nav {
      .logo--box {
        background: $theme !important;

        svg {
          .main--groups {
            fill: #fff !important;
            ////////
            .line {
              stroke: #fff !important;
            }
          }
        }
      }

      .reservation {
        background: #fff !important;

        a {
          svg {
            fill: $theme !important;
          }
        }
      }
    }
  }
}

///// contactPage theme
.contactPage--theme {
  background: url("../img/contactPage/contact-bg.jpg");
  background-size: cover;
  -webkit-background-size: cover;
  background-position: center;
}

///////////////////////////////////////
.page--container {
  min-height: calc(100vh - #{$HF_height});
  padding-top: 100px;
  padding-bottom: 100px;

  @media (max-width: 768px) {
    min-height: 100vh;
  }
}

.section {
  padding-top: 100px;
}

.form {
  input {
    @extend %formStyles;
  }

  button {
    @extend %formStyles;
  }
}

a {
  color: $txtColor;
  display: inline-block;
}

//////////////////////////////////////////////////////// site header
.site--header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  ////////////
  .container {
    @media (max-width: 992px) {
      & {
        max-width: 100% !important;
        padding: 0 !important;

        .row {
          margin: 0;
        }
      }
    }
  }

  .header--nav {
    height: $HF_height;
    background: #fff;
    line-height: $HF_height;
    text-align: center;
    @include transition(background-color $trs);
    //////////
    .reservation {
      background: $theme;
      height: $HF_height;
      @include transition(background-color $trs);
      ///////////
      a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        svg {
          @include transform(translateY(3px));
          fill: #fff;
        }
      }

      &:hover {
        background-color: $themeHover;
      }

      .reservation--svg {
        fill: $theme;
      }
    }

    .nav--links {
      ul {
        display: flex;
        text-align: center;

        li {
          margin: auto;

          a {
            color: $txtColor;
            @include transition(color $trs);
            font-weight: bold;

            &:hover {
              color: $theme;
            }

            @media (max-width: 1200px) {
              & {
                font-size: 0.9em;
              }
            }

            @media (max-width: 992px) {
              & {
                font-size: 0.8em;
              }
            }
          }

          .active-link {
            color: $theme;
          }
        }
      }
    }

    .logo--box {
      display: flex;
      background: #fff;
      @include transition(background-color $trs);
    }
  }
}

.offCanvas {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background: $theme;
  position: fixed;
  bottom: -100%;
  left: 0;
  z-index: 10;
  display: none;

  .scrollable {
    padding-bottom: 60px;

    a {
      color: #fff;
      padding: 10px;
      @include transition(color $trs);

      &:hover {
        color: rgba(0, 0, 0, 0.3);
      }
    }

    .nav--links {
      margin-top: 25vh;
      text-align: center;
      @media (max-height: 575px) {
        & {
          margin-top: 20vh;
        }
      }
    }

    .social {
      max-width: 300px;
      margin: 50px auto;
      @media (max-height: 575px) {
        & {
          margin: 30px auto;
        }
      }

      ul {
        display: flex;
        align-items: center;

        li {
          display: block;
          margin-left: 30px;
        }
      }

      .nav--icons {
        fill: #fff;
      }

    }

    .copyRight {
      text-align: center;

      h4 {
        color: #fff;
        direction: ltr;
        font-size: 18px;
      }

      p {
        direction: ltr;
        margin-top: 5px;
        color: #fff;
        font-size: 12px;
        opacity: 0.7;

        a {
          padding: 0;
        }
      }

    }
  }
}

.hamburger--btn {
  width: 50px;
  height: 50px;
  background: $theme;
  position: fixed;
  bottom: 0;
  left: calc(50% - 25px);
  z-index: 11;
  cursor: pointer;
  display: none;
  @media (max-width: 768px) {
    & {
      display: block;
    }
  }

  .bars {
    margin-top: 50%;
    @include transform(translateY(-50%));

    div {
      display: block;
      width: 30px;
      height: 2px !important;
      background: #fff;
      margin-left: auto;
      margin-right: auto;
      @include transition($trs);
    }

    .b2 {
      margin: 5px auto;
    }
  }

  .close {
    .b2 {
      width: 0;
    }

    .b1 {
      @include transform(rotate(45deg) translate(6px, 6px))
    }

    .b3 {
      @include transform(rotate(-45deg) translate(4px, -4px))
    }
  }
}

.hamburger--close--btn {
  background: $themeHover !important;
}

//////////////////////////////////////////////////////// site footer
.site--footer {
  width: 100%;

  .container {
    @media (max-width: 992px) {
      & {
        max-width: 100% !important;
        padding: 0 !important;

        .row {
          margin: 0;
        }
      }
    }
  }

  @media (max-width: 768px) {
    display: none;
  }

  .footer--nav {
    width: 100%;

    .goUp {
      height: $HF_height;
      background: $theme;
      display: flex;
      cursor: pointer;
      @include transition($trs);

      p {
        margin: auto;
        color: #fff;
      }

      &:hover {
        background: $themeHover;
      }
    }

    .nav--links {
      height: $HF_height;
      background: #000;

      .social {
        display: inline-block;

        ul {
          height: $HF_height;
          display: inline-flex;
          align-items: center;
          padding-right: 30px;

          li {
            display: block;
            margin-left: 30px;
          }
        }

        .nav--icons {
          fill: #fff;
        }
      }

      .copyRight {
        float: left;

        h4 {
          color: #fff;
          direction: ltr;
          font-size: 16px;
          margin-top: 20px;
        }

        p {
          direction: ltr;
          margin-top: 5px;
          color: #fff;
          font-size: 10.5px;
          opacity: 0.7;

          a {
            padding: 0;
            color: #fff;
          }
        }
      }

    }

  }
}