jekyll-theme-saifas 0.1.0

data/_sass/_base.sass

@@ -0,0 +1,676 @@
+//Base fonts import
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap')
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap')
+
+*
+  margin: 0
+  box-sizing: border-box
+
+html
+  height: 100%
+  padding: 0
+  margin: 0
+  font-family: var(--main-font-family)
+  background: white
+
+body
+  display: flex
+  flex-direction: column
+  min-height: 100vh
+  font-family: var(--main-font-family)f
+  background: white
+
+iframe
+  flex: 1
+
+.cards__container
+  display: flex
+  flex: 4
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: center
+  /* max-width: 1268px */
+
+.custom-visual__card, .custom-visual-report__card
+  display: flex
+  flex-direction: column
+  background-color: var(--color-grey)
+  width: 300px
+  height: 300px
+  margin: 10px
+  padding: 20px
+  border-radius: 5px
+  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -ms-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -webkit-transition-delay: 0s
+  -moz-transition-delay: 0s
+  -o-transition-delay: 0s
+  -ms-transition-delay: 0s
+  transition-delay: 0s
+  -webkit-transform: translateY(0px)
+  -moz-transform: translateY(0px)
+  -o-transform: translateY(0px)
+  -ms-transform: translateY(0px)
+  transform: translateY(0px)
+  cursor: pointer
+  &:hover
+    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    background: rgba(200,200,200,0.2)
+    -webkit-transform: translateY(-1px)
+    -moz-transform: translateY(-1px)
+    -o-transform: translateY(-1px)
+    -ms-transform: translateY(-1px)
+    transform: translateY(-1px)
+
+.card__top-section
+  display: flex
+
+.top-section__icon
+  img
+    height: 64px
+    width: 64px
+    border-radius: 10px
+
+.top-section__title
+  display: flex
+  flex-direction: column
+  padding-left: 10px
+  font-family: var(--main-font-family)
+  font-size: 20px
+  color: var(--text-color)
+  width: 100%
+
+.top-section__description
+  font-size: 14px
+  font-weight: 400
+  margin-top: 6px
+  img
+    width: 14px
+    height: 14px
+
+.main-section
+  display: flex
+  flex-direction: column
+  margin-top: 10px
+
+.main-section__description
+  font-size: 16px
+  color: var(--text-color)
+
+.cards-section
+  display: none
+  height: 100%
+  align-items: flex-end
+
+.report-cards-section
+  display: none
+  height: 100%
+  align-items: center
+  flex-direction: column
+  justify-content: flex-end
+  .cards-section__top
+    width: 100%
+    a
+      margin: 0 5px
+      width: auto
+      padding: 0
+  .cards-section__bottom
+    margin-top: 10px
+    width: 100%
+    display: flex
+    a
+      margin: 0
+      width: 100%
+      margin: 0 5px
+
+.custom-visual__card:hover
+  .cards-section
+    display: flex
+
+.custom-visual-report__card:hover
+  .report-cards-section
+    display: flex
+
+.body-separator
+  height: 2px
+  background-color: var(--color-grey)
+  margin: 20px
+
+.contact-link-container
+  display: flex
+  align-items: center
+  justify-content: center
+  border: 2px solid var(--color-grey)
+  height: 64px
+  border-radius: 5px
+
+.contact-link-container__link
+  font-style: normal
+  margin: 0 20px
+
+.card
+  display: flex
+  flex-direction: column
+  background-color: var(--color-grey)
+  margin: 10px
+  padding: 20px
+  height: fit-content
+  border-radius: 5px
+  min-width: 295px
+  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -ms-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -webkit-transition-delay: 0s
+  -moz-transition-delay: 0s
+  -o-transition-delay: 0s
+  -ms-transition-delay: 0s
+  transition-delay: 0s
+  -webkit-transform: translateY(0px)
+  -moz-transform: translateY(0px)
+  -o-transform: translateY(0px)
+  -ms-transform: translateY(0px)
+  transform: translateY(0px)
+  .btn
+    margin-top: 10px
+  &:hover
+    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    background: rgba(200,200,200,0.2)
+    -webkit-transform: translateY(-1px)
+    -moz-transform: translateY(-1px)
+    -o-transform: translateY(-1px)
+    -ms-transform: translateY(-1px)
+    transform: translateY(-1px)
+    .card__description
+      display: none
+    .card__buttons-container
+      display: flex
+    .card__buttons-container
+      transition: .3s
+      opacity: 1
+
+.card__title
+  color: var(--text-color)
+  font-size: var(--font-size-title)
+  margin-bottom: 20px
+
+.card__description
+  color: var(--text-color)
+  font-size: var(--font-size-description)
+  margin-top: 20px
+  height: 40px
+
+.home-body
+  display: flex
+  align-items: center
+  justify-content: center
+  flex-direction: column
+
+.headline
+  margin: 18px
+  /* flex: 1 */
+  display: flex
+  align-items: center
+  justify-content: center
+  font-size: 30px
+  color: var(--text-color)
+
+.card__image
+  display: flex
+  justify-content: center
+  img
+    width: 100%
+    max-width: 200px
+    height: auto
+
+.footer__contact-us
+  display: flex
+  height: 100%
+  width: fit-content
+  font-family: var(--main-font-family)
+  align-items: center
+  margin-left: 20px
+  font-style: normal
+
+.watermark
+  display: flex
+  font-family: var(--main-font-family)
+  margin-right: 20px
+
+.details__card
+  margin: 20px
+  display: flex
+  background-color: var(--color-grey)
+  padding: 20px
+
+.details__card-text
+  margin-left: 20px
+  a
+    margin-top: 20px
+
+.details__card-title
+  color: var(--text-color)
+  font-size: var(--font-size-title)
+
+.details__card-description
+  color: var(--text-color)
+  font-size: var(--font-size-description)
+  margin-top: 10px
+  img
+    height: 14px
+    width: 14px
+
+
+.details__card-image
+  img
+    width: 150px
+    height: auto
+
+.details__card-buttons
+  margin-left: 20px
+  .btn
+    margin-bottom: 15px
+
+.details__card-cost
+  margin: 10px 0
+  display: flex
+  flex-direction: row
+  font-size: 16px
+  font-family: var(--main-font-family)
+  color: var(--text-color)
+
+.details__card-cost
+  .cost
+    margin-left: 4px
+    font-weight: 700
+
+.get-it-now-button
+  background-color: #0271b6
+  color: white
+  &:hover
+    background-color: #0271b6
+
+.card__buttons-container
+  display: none
+  margin-top: 20px
+  transition: .3s
+  opacity: 0
+  height: 40px
+
+.breadcrumbs-separator
+  display: flex
+  align-items: center
+  justify-content: center
+  margin: 0 6px
+
+.breadcrumbs-text
+  margin: 0
+  display: block /* or in-line block according to your requirement */
+  overflow: hidden
+  white-space: nowrap
+  text-overflow: ellipsis
+
+.columns-container
+  display: grid
+  grid-template-columns: 400px auto
+  height: 100%
+
+.left-column
+  display: flex
+  flex-direction: column
+  padding-left: 20px
+  .btn
+    margin-bottom: 10px
+
+.left-column__title
+  color: var(--text-color)
+  font-family: var(--main-font-family)
+  font-size: 20px
+  margin-bottom: 20px
+
+.disabled
+  opacity: .5
+  pointer-events: none
+  cursor: not-allowed
+
+.custom-visual__description
+  margin: 20px
+  display: flex
+  flex-direction: column
+  font-family: var(--main-font-family)
+  color: var(--text-color)
+
+.main-features__title, .most-popular-use-cases__title
+  font-size: 18px
+  font-weight: 600
+  margin-bottom: 20px
+
+.custom-visual__description-text
+  font-size: 16px
+  font-weight: 400
+  margin-top: 10px
+
+.reports-card
+  display: flex
+  flex-direction: column
+  background: var(--color-grey)
+  border-radius: 5px
+  min-width: 480px
+  max-height: 240px
+  position: relative
+
+.reports-card__top-section
+  display: flex
+  align-items: center
+  padding: 20px
+
+.reports-card-buttons__container
+  display: flex
+  justify-content: center
+  flex-direction: column
+  opacity: 0
+  position: absolute
+  bottom: 0
+  transition: .3s
+  width: 100%
+
+.reports-card__wrapper
+  position: relative
+  &:hover
+    .reports-card
+      filter: grayscale(70%)
+      filter: brightness(0.4)
+    .reports-card-buttons__container
+      opacity: 1
+      transition: .3s
+      .reports-card-buttons__container-bottom
+        display: flex
+        .btn
+          background: var(--color-grey)
+          width: 100%
+          margin: 10px
+
+.reports-card-details-button
+  .btn
+    width: auto
+    margin: 10px 10px 0 10px
+    background: var(--color-grey)
+
+.power-bi__buttons-container
+  display: flex
+  align-content: flex-start
+  align-items: center
+  justify-content: center
+  flex-direction: row
+  flex-wrap: wrap
+  max-width: 1400px
+
+.power-bi__buttons-container--btn
+  background: var(--color-grey)
+  height: 240px
+  width: 320px
+  border-radius: 5px
+  margin: 10px
+  display: flex
+  padding-top: 20px
+  flex-direction: column
+  color: var(--text-color)
+  font-size: 20px
+  font-family: var(--main-font-family)
+  text-decoration: none
+  text-align: center
+  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -ms-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -webkit-transition-delay: 0s
+  -moz-transition-delay: 0s
+  -o-transition-delay: 0s
+  -ms-transition-delay: 0s
+  transition-delay: 0s
+  -webkit-transform: translateY(0px)
+  -moz-transform: translateY(0px)
+  -o-transform: translateY(0px)
+  -ms-transform: translateY(0px)
+  transform: translateY(0px)
+  cursor: pointer
+  &:hover
+    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    background: rgba(200,200,200,0.2)
+    -webkit-transform: translateY(-1px)
+    -moz-transform: translateY(-1px)
+    -o-transform: translateY(-1px)
+    -ms-transform: translateY(-1px)
+    transform: translateY(-1px)
+  i
+    margin-top: 20px
+
+.power-bi__buttons-container--tag
+  font-family: var(--main-font-family)
+  font-size: 16px
+  color: var(--text-color)
+  margin-top: 30px
+  display: flex
+  padding-left: 20px
+  justify-content: flex-start
+
+.conctact-us-btn
+  margin-left: 20px
+  cursor: pointer
+  display: flex
+  align-items: center
+  i
+    margin-right: 8px
+
+/*Modal styles*/
+
+#modal
+  display: none
+  position: fixed
+  top: 0
+  height: 100%
+  width: 100%
+  background-color: black
+  opacity: 0.4
+  z-index: 10
+
+.modalBody
+  font-family: var(--main-font-family)
+  color: var(--text-color)
+  position: fixed
+  display: none
+  top: 10%
+  width: 100%
+  max-width: 600px
+  max-height: 700px
+  left: 50%
+  transform: translate(-50%, 0)
+  padding: 0 20px 20px 20px
+  background-color: #fff
+  border-radius: 5px
+  overflow: auto
+  z-index: 11
+
+.modal-close
+  cursor: pointer
+  position: absolute
+  right: 10px
+  top: 10px
+  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -ms-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -webkit-transition-delay: 0s
+  -moz-transition-delay: 0s
+  -o-transition-delay: 0s
+  -ms-transition-delay: 0s
+  transition-delay: 0s
+  -webkit-transform: translateY(0px)
+  -moz-transform: translateY(0px)
+  -o-transform: translateY(0px)
+  -ms-transform: translateY(0px)
+  transform: translateY(0px)
+  cursor: pointer
+  &:hover
+    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    background: rgba(200,200,200,0.2)
+    -webkit-transform: translateY(-1px)
+    -moz-transform: translateY(-1px)
+    -o-transform: translateY(-1px)
+    -ms-transform: translateY(-1px)
+    transform: translateY(-1px)
+
+.modal-headline
+  font-size: 22px !important
+
+/*Form styles*/
+
+.contact-form
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+
+
+.form-elem__container
+  width: 100%
+  display: flex
+  flex-direction: column
+  overflow: auto
+  margin: 0 0 20px 0
+
+
+.form-elem
+  display: flex
+  flex-direction: column
+  margin: 5px
+  input, textarea, select
+    height: 36px
+    border-radius: 5px
+    border: 2px solid #f0f0f0
+    background: transparent
+    color: var(--text-color)
+    font-family: var(--main-font-family)
+    font-size: 16px
+    padding: 0 10px
+  textarea
+    padding: 10px
+    min-height: 100px
+  input:active
+    border: 2px solid var(--text-color)
+  label
+    font-weight: 600
+    margin-bottom: 3px
+
+.three-form-elements
+  display: grid
+  grid-template-columns: 33.3% 33.3% 33.3%
+  .form-elem
+    display: flex
+
+.two-form-elements
+  display: grid
+  grid-template-columns: 50% 50%
+  .form-elem
+    display: flex
+
+.form-radio-buttons-container
+  display: flex
+  align-items: center
+  input
+    margin-right: 4px
+  .radio-button-text
+    margin-right: 10px
+
+.form-current-page
+  display: none
+
+.circle-container
+  width: 100%
+  height: 100%
+  display: flex
+  align-items: center
+  justify-content: center
+  flex-direction: column
+  a
+    margin-top: 20px
+
+.circle
+  margin: 10px
+  display: flex
+  align-items: center
+  justify-content: center
+  max-width: 300px
+  width: 300px
+  max-height: 300px
+  height: 300px
+  border-radius: 50%
+  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -ms-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -webkit-transition-delay: 0s
+  -moz-transition-delay: 0s
+  -o-transition-delay: 0s
+  -ms-transition-delay: 0s
+  transition-delay: 0s
+  -webkit-transform: translateY(0px)
+  -moz-transform: translateY(0px)
+  -o-transform: translateY(0px)
+  -ms-transform: translateY(0px)
+  transform: translateY(0px)
+  cursor: pointer
+  background: var(--color-grey)
+  color: var(--text-color)
+  font-size: 20px
+  text-decoration: none
+  z-index: 2
+  &:visited
+    color: var(--text-color)
+  &:hover
+    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    background: rgba(200,200,200,0.2)
+    -webkit-transform: translateY(-1px)
+    -moz-transform: translateY(-1px)
+    -o-transform: translateY(-1px)
+    -ms-transform: translateY(-1px)
+    transform: translateY(-1px)
+
+/*Flex styles*/
+
+.flex-direction-column
+  display: flex
+  flex-direction: column
+
+.flex-align-items-start
+  display: flex
+  align-items: flex-start
+
+.flex-justify-content-center
+  display: flex
+  justify-content: center
+
+.full-centering
+  display: flex
+  align-items: center
+  justify-content: center
+
+article
+  margin: 20px 20px 0 20px
+  padding: 10px
+  display: flex
+  flex-direction: column
+  background: var(--color-grey)
+  border-radius: 5px