styles.scss

/*********************
VARIABLES
*********************/

$sansFont: 'Roboto', sans;
$scriptFont: 'Alex Brush', cursive;
$serifFont: 'Roboto Slab', serif;
$mainFont: black;
$headerFont: white;
$primaryColor: #3A0256;
$secondaryColor: white;
$tertiaryColor: white;
$red: #B31212;

/*********************
SETUP
*********************/

html, body {
  height: 100%;
  width: 100%;
}

html {
  font-size: 24px;
}

body {
  font-family: $sansFont;
}

*, *:before, *:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6,ul,li,p {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

a {
  text-decoration: underline;
}

/*********************
GENERAL
*********************/

#pageWrapper {
  max-width: 960px;
  margin: 0 auto;
}

.activePage {
  display: block !important;
}

.hidePage {
  display: none;
}

/*********************
HEADER
*********************/

header {
  height: 200px;
  background: $primaryColor;
  color: $secondaryColor;
  display: flex;
  margin-bottom: 50px;

  #headerLeft {
    width: 70%;
    display: flex;

    #headerLeftBlock {
      width: 100%;
      display: flex;

      #headerLeftLogo {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          cursor: pointer;
          width: 125px;
          height: 125px;
        }
      }

      #headerLeftTitle {
        width: 75%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        h1 {
          font-size: 3.5rem;
          font-weight: lighter;
          font-family: $scriptFont;
        }
      }
    }
  }

  #headerRight {
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    #headerRightBlock {
      width: 100%;
      height: 70%;
      display: flex;
      justify-content: center;
      align-items: center;

      #logInForm {
        height: 100%;
        display: flex;
        flex-direction: column;
        font-size: .75rem;
        font-weight: lighter;

        #logInInput {
          height: 50%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;

          > label {
            color: $secondaryColor;
          }

          > input {
            height: 50%;
            padding: 2.5px;
            width: 90%;
            border: 1px solid $secondaryColor;
            background-color: $primaryColor;
            padding: 2.5px;
            text-align: center;

            &:focus {
              outline: 0;
            }
          }
        }

        #logInSubmit {
          height: 30%;
          display: flex;
          justify-content: center;
          align-items: center;

          > input {
            width: 90%;
            background: $primaryColor;
            border: 1px solid $secondaryColor;
            padding: 10px 0;
          }
        }

        #createAcct {
          height: 30%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 1%;


          > input {
            width: 90%;
            background: $primaryColor;
            border: none;
            border-top: 1px solid $secondaryColor;
            padding: 10px 0;
            &:hover {
                color: $red;
            }
          }
        }
      }
    }

    #headerRightBlock2 {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      #headerRightBlock2Inner {
        height: 80%;
        width: 60%;
        display: flex;
        align-items: center;

        #usernameBlock {
          height: 35%;
          display: flex;
          justify-content: center;
          align-items: flex-end;
        }

        #cartBlock {
          cursor: pointer;
          position: relative;
          transition: all .25s ease;
          -webkit-transition: all .25s ease;
          display: flex;

          > div {
            text-align: center;
          }

          #cartBlockImage {
            width: 100%;

            i {
              font-size: 4rem;
              transition: all .25s ease;
              -webkit-transition: all .25s ease;
            }
          }

          #cartBlockAmount {
            position: absolute;
            color: $red;
            top: 25px;
            right: 30px;
            transition: all .25s ease;
            -webkit-transition: all .25s ease;
          }

          &:hover {

            i {
              color: $red;
            }

            #cartBlockAmount {
              color: white;
            }
          }
        }
      }
    }
  }
}

.inactiveHeaderRightBlock {
  display: none !important;
}

/*********************
CATALOG PAGE
*********************/

#loginFormWrapper {
  width: 100%;
  height: 100%;
  z-index: 100;
  font-size: 2vmax;
  background-color: rgba(0, 0, 0, .85);
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  form {
    position: fixed;
    top: 10%;
    left: 21%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    height: auto;
    width: 58%;
    background-color: white;
    opacity: none;
  }
  #loginFormInputWrapper {
    width: 80%;
    input {
      width: 90%;
    }
  }
  #labelText {
    width: 20%;
  }
  label {
    width: 100%;
    height: auto;
    text-align: right;
    display: flex;
    align-items: center;
  }

  #createAcctSubmitWrapper {
    width: 100%;
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    #createAcctSubmit {
        width: 35%;
        background-color: $red;
        border: 3px solid white;
        padding: 15px;
        font-weight: lighter;
        color: white;
        transition: all .25s ease;
        -webkit-transition: all .25s ease;

        &:hover {
          border-color: $red;
          color: $red;
          background-color: white;
        }

        &:focus {
          outline: 0;
        }
    }
  }
  #createAcctCancelWrapper {
    width: 100%;
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    #createAcctCancel {
      background-color: white;
      width: 35%;
      border: 3px solid white;
      padding: 15px;
      font-weight: lighter;
      color: gray;
      transition: all .25s ease;
      -webkit-transition: all .25s ease;

        &:hover {
          border-color: $red;
          color: $red;
          background-color: white;
        }

        &:focus {
          outline: 0;
        }
    }
  }
  input {
    margin: 1%;
    width: 73%;
    justify-content: flex-end;


  }
}





#catalogPage {
  display: none;

  #catalogPageTitle {
    padding: 25px 0;
    border-bottom: 1px solid $primaryColor;

    h2 {
      font-size: 2.5rem;
      font-weight: lighter;
      color: $primaryColor;
    }
  }

  #catalogPageContent {
    padding: 25px 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .catalogProductAddToCartBlock {
      width: 100%;
    }

    .catalogAddToCartButton {
      background-color: #B31212;
      width: 100%;
      border: none;
      padding: 4.5px;
      font-weight: lighter;
      color: white;
      transition: all 0.25s ease;
      -webkit-transition: all 0.25s ease;
      font-size: 1em;

      &:hover {
        background-color: white;
        color: $red;
        border-color: $red;
      }

      &:focus {
        outline: 0;
      }
    }

    .catalogWrapper {
      width: 22.5%;
      height: 400px;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      transition: all .25s ease;
      -webkit-transition: all .25s ease;
    }

    .catalogProductBlock {
      width: 100%;
      height: 300px;
      cursor: pointer;
      color: $tertiaryColor;
      transition: all .25s ease;
      -webkit-transition: all .25s ease;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .catalogProductBlockImage {
        width: 100%;
        height: 200px;
        /* background-color: $primaryColor; */

        img {
          width: 100%;
        }
      }

      .catalogProductBlockInfo {
        width: 100%;
        height: 100px;
        background-color: $primaryColor;
        border: 1px solid $primaryColor;
        text-align: center;

        .catalogProductBlockTitle {
          height: 80px;
          font-weight: lighter;
          font-size: 1.15rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .catalogProductBlockPrice {
          height: 20px;
          font-size: .6rem;
          padding-bottom: 2.5px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

      }

      &:hover {
        color: $primaryColor;
        background-color: white;


        > * {
          background-color: white;
        }
      }
    }
  }
}

/*********************
PRODUCT PAGE
*********************/

#productPage {
  display: none;

  #productPageTitle {
    padding: 25px 0;
    border-bottom: 1px solid $primaryColor;

    h2 {
      font-size: 2.5rem;
      font-weight: lighter;
      color: $primaryColor;
    }
  }

  #productPageContent {
    margin: 25px 0;
    display: flex;
    flex-wrap: wrap;

    #productPageLeft {
      width: 50%;

      #productPagePairingBlock {
        margin-top: 35px;
        padding: 35px 15px 15px;
        position: relative;
        border: 1px solid $primaryColor;

        h4 {
          position: absolute;
          top: -32.5px;
          left: 10px;
          background-color: white;
          font-size: 2rem;
          font-weight: lighter;
          color: $primaryColor;
        }

        #productPagePairingImage {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          img {
            cursor: pointer;
            max-height: 100px;
            max-width: 100px;
          }
        }
      }
    }

    #productPageRight {
      width: 50%;
      display: flex;
      justify-content: center;

      #productPageRightBlock {
        width: 80%;
        color: $primaryColor;

        > div {
          margin-bottom: 15px;
        }

        #productDescriptionBlock {
          font-family: $serifFont;
        }

        #productPriceBlock {
          text-align: center;
          font-size: 1.5rem;
          font-weight: lighter;
        }

        #productCartBlock {
          text-align: center;

          button {
            background-color: $red;
            border: 3px solid white;
            padding: 15px;
            position: relative;
            font-weight: lighter;
            color: white;
            transition: all .25s ease;
            -webkit-transition: all .25s ease;

            &:hover {
              border-color: $red;
              color: $red;
              background-color: white;


            }

            &:focus {
              outline: 0;
            }

            #cartPlusOne {
              display: none;
              color: white;
              position: absolute;
              background-color: $red;
              right: -55px;
              top: 6px;
              padding: 10px;
              border-radius: 50%;
              transition: all .5s ease;
            }

            #cartPlusOne.productAddedAnimate {
              transform: translateY(-100px);
              opacity: 1;
            }

            #cartPlusOne.productAddedStarting {
              opacity: 0;
              transform: translateY(0px);
            }
          }
        }
      }
    }

    #productPageReviews {
      margin-top: 50px;
      padding: 35px 0 15px;
      position: relative;
      width: 100%;
      border: 1px solid $primaryColor;
      display: flex;
      flex-direction: column;

      h4 {
        position: absolute;
        background-color: white;
        top: -32.5px;
        left: 10px;
        font-size: 2rem;
        font-weight: lighter;
      }

      #productReviewsBlock {
        min-height: 100px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;

        .productReview {
          width: 40%;
          border: 1px solid $primaryColor;
          margin-bottom: 25px;
          color: white;

          .productReviewContent {
            min-height: 125px;
            padding: 7.5px;
            color: $primaryColor;
          }

          .reviewBottom {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;

            .productReviewRating {
              width: 50%;
              height: 100%;
              display: flex;
              background-color: $red;
              justify-content: center;
              align-items: center;
            }

            .productReviewAuthor {
              width: 50%;
              height: 100%;
              background-color: $red;
              padding: 7.5px 5px;
              display: flex;
              justify-content: flex-end;
              align-items: center;
            }
          }


        }
      }
    }

    #productReviewsFormBlock {
      width: 100%;
      margin-top: 25px;
      display: flex;
      justify-content: center;

      #productReviewsForm {
        width: 40%;
      }

      #productReviewsFormUsername {
        text-align: center;
        font-size: 1.5rem;
        font-weight: lighter;
      }

      #productReviewsFormComment {

        textarea {
          width: 100%;
          height: 150px;
          resize: none;

          &:focus {
            outline: 0;
          }
        }
      }

      #productReviewsFormRating {
        margin-bottom: 10px;

        select {
          width: 100%;
          text-align: center;
        }
      }

      #productReviewsFormSubmit {

        input {
          width: 100%;
          padding: 10px 0;
          background-color: $primaryColor;
          color: white;
          border: 3px solid $primaryColor;
          transition: all .25s ease;
          -webkit-transition: all .25s ease;

          &:hover {
            background-color: white;
            color: $primaryColor;
          }

          &:focus {
            outline: 0;
          }
        }
      }
    }
  }
}

/*********************
CART PAGE
*********************/

#cartPage {
  display: none;

  #cartPageTitle {
    padding: 25px 0;
    border-bottom: 1px solid $primaryColor;

    h2 {
      font-size: 2.5rem;
      font-weight: lighter;
      color: $primaryColor;
    }
  }

  #cartPageContent {
    margin: 25px 0;

    #cartItemsBlock {
      border: 1px solid $primaryColor;
      min-height: 150px;

      .cartItem {
        width: 80%;
        height: 150px;
        margin: 0 auto;
        border-bottom: 1px solid $primaryColor;
        display: flex;
        flex-wrap: wrap;

        &:last-child {
          border: none;
        }

        > div {
          width: 33%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .cartItemImage {

          img {
            height: 100px;
            width: 100px;
          }
        }

        .cartItemRight {

          > div {
            width: 50%;
            text-align: center;
          }

          .cartItemDeleteBlock {
            height: 100%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;

            .cartItemDelete {
              height: 50%;
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              transition: all .25s ease;
              -webkit-transition: all .25s ease;

              &:hover {
                background-color: $red;
                color: white;
                font-size: 1.5rem;
              }
            }
          }
        }
      }
    }

    #cartInfoBlock {
      width: 90%;
      margin: 0 auto;

      #cartTotalPriceBlock {
        height: 75px;
        display: flex;
        justify-content: flex-end;

        #cartTotalPrice {
          width: 20%;
          height: 100%;
          font-size: 2rem;
          font-weight: lighter;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      #cartCheckOutBlock {
        height: 75px;
        display: flex;
        justify-content: flex-end;

        #cartCheckOut,
        #cartContinue,
        #cartClear {
          width: 20%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          button {
            width: 140.25px;
            height: 70px;
            background-color: $red;
            border: 3px solid white;

            font-weight: lighter;
            color: white;
            transition: all .25s ease;
            -webkit-transition: all .25s ease;

            &:hover {
              border-color: $red;
              color: $red;
              background-color: white;
            }

            &:focus {
              outline: 0;
            }
          }

        }
      }
    }
  }
}

/*********************
FOOTER
*********************/

footer {
  background-color: $primaryColor;
  display: flex;
  color: $tertiaryColor;
  padding-bottom: 25px;

  #footerLeft {
    width: 50%;
    display: flex;
    justify-content: center;

    #footerLeftBlock {
      width: 90%;

      #footerLeftBlockTitle {
        text-align: left;
        padding: 15px 0;

        h3 {
          font-size: 2rem;
          font-weight: lighter;
        }
      }

      #footerLeftBlockContent {
        font-size: .7rem;
        font-family: $serifFont;
      }
    }
  }

  #footerRight {
    width: 50%;
    display: flex;
    justify-content: center;

    #footerRightBlock {
      width: 75%;


      #footerRightBlockTitle {
        text-align: center;
        padding: 15px 0;

        h3 {
          font-size: 2rem;
          font-weight: lighter;
        }
      }

      #footerRightBlockContent {
        font-size: .7rem;
        font-weight: lighter;
        font-family: $serifFont;

        .contactBlock {
          display: flex;
          justify-content: flex-end;
          margin-bottom: 15px;

          .contactLabel {
            width: 50%;
            text-align: center;
            font-weight: bolder;
          }

          .contactInfo {
            width: 50%;
          }
        }
      }
    }
  }
}