%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /var/www/html/higroup/wp-content/themes/evenex/assets/scss/
Upload File :
Create Path :
Current File : /var/www/html/higroup/wp-content/themes/evenex/assets/scss/_speaker.scss

// Speaker default style
:root {
  --speaker-color: #5dbf7c;
}

.spekaer-box-style {
  box-shadow: 0px 15px 40px 0px rgba(0, 0, 0, 0.07);
  background-color: $white;
  margin-bottom: rem(30px);
  @include transition;

  .round-icon-btn > i {
    display: inline-block;
    transition: transform 0.4s;
  }

  &:hover {
    .speaker-image {
      &:before {
        opacity: 0;
      }
      a > img {
        transform: scale(1.03) translateY(-8px);
        filter: grayscale(0);
      }
      a > span {
        transform: scaleY(1);
      }
    }

    .round-icon-btn {
      color: $white;

      > i {
        transform: rotate(360deg);
      }
    }
  }
  .details-btn-wraper {
    display: inline-block;
    &:hover {
      .speakers-social-lists {
        opacity: 1;
        bottom: 100px;
        visibility: visible;
      }
    }
  }
  .speakers-social-lists {
    display: flex;
    position: absolute;
    right: 40px;
    bottom: 80px;
    flex-direction: column;
    z-index: 1;
    @include transition;
    background: var(--speaker-color);
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    &:hover {
      transform: scaleY(0.95);
    }
    li {
      margin-right: 0 !important;
      &:hover a {
        transform: scale(1.1) translateY(-5px);
        z-index: 10;
      }

      a {
        @include equal-size-lineHeight(rem(40px));
        border-radius: 0;
        @include transition;
        &:hover {
          background: var(--speaker-color);
          color: #fff;
        }
      }
    }
  }
}
.speaker-image {
  position: relative;
  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--speaker-color);
    z-index: 1;
    mix-blend-mode: multiply;
    pointer-events: none;
    border-radius: inherit;
    @include transition;
  }
  > a {
    display: block;
    width: 100%;
    > img {
      filter: grayscale(100%);
      @include transition;
    }

    span {
      position: absolute;
      bottom: 0;
      text-align: center;
      left: 0;
      width: 100%;
      height: 50px;
      font-size: 14px;
      line-height: 50px;
      color: #fff;
      display: inline-block;
      background-color: var(--speaker-color);
      transform: scaleY(0);
      transform-origin: bottom center;
      @include transition;
    }
  }
}
.speaker-footer-content {
  > p {
    margin-bottom: 0;
  }
  padding: {
    top: rem(50px);
    right: rem(30px);
    left: rem(50px);
    bottom: rem(25px);
  }
  .speaker-title {
    font-size: rem(24px);
  }
}
.speaker-title {
  color: $titleColor;
  line-height: 1;
  margin-left: rem(-50px);
  &::before {
    content: "";
    height: rem(3px);
    width: rem(20px);
    background-color: var(--speaker-color);
    display: inline-block;
    vertical-align: middle;
    margin-right: rem(25px);
  }
  > a {
    color: inherit;
  }
}

.round-icon-btn {
  background-color: var(--speaker-color);
  @include equal-size-lineHeight(rem(30px), $Lheight: rem(32px));
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  z-index: 1;
  font-size: rem(10px);
  color: #fff;
  @include transition;
  cursor: pointer;
  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    box-shadow: 0px 15px 25px 0px var(--speaker-color);
    opacity: 0.3;
    z-index: -1;
  }
}

// Speaker round style
.spekaer-round-style {
  margin-bottom: rem(75px);
  .speaker-image {
    display: inline-block;
    &::before {
      mix-blend-mode: normal;
      top: 53px;
      left: 65px;
      transform: rotate(140deg);
      border-radius: 0;
      opacity: 0;
      height: 150%;
      width: 150%;
    }
    @include equal-size(rem(200px));
    border-radius: 50%;
    > a {
      display: inline-block;
      border-radius: inherit;
      > img {
        border-radius: inherit;
        filter: grayscale(0);
      }
    }
  }
  .speaker-title {
    margin-left: 0;
    font-weight: 500;
    margin-bottom: rem(7px);
    &::before {
      display: none;
    }
  }
  &:hover {
    .speaker-image {
      &::before {
        opacity: 0.9;
      }
    }
    .speaker-social-profiles {
      left: 3px;
      opacity: 1;
    }
  }
  .speaker-footer-content {
    padding: 0px;
    padding-top: rem(24px);
    > p {
      font-size: rem(15px);
    }
  }
}
.speakers-social-lists {
  @include remove-list-sltye;
  > li {
    display: inline-block;
    &:not(:last-child) {
      margin-right: 10px;
    }
    > a {
      display: inline-block;
      border-radius: 5px;
      background-color: $white;
      box-shadow: 0px 15px 40px 0px rgba(0, 0, 0, 0.07);
      @include equal-size-lineHeight(rem(30px));
      text-align: center;
      color: #313636;
      @include transition;
      &:hover {
        color: var(--speaker-color);
      }
    }
  }
}

.speaker-social-profiles {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 8px;
  z-index: 5;
  opacity: 0;
  transform: translateY(-50%) rotate(-42deg);
  transition: all 0.4s ease-out;
}

// Round style 2
.spekaer-round-style-2 {
  .speaker-image {
    &::before {
      left: auto;
      height: 100%;
      width: 100%;
      right: 0;
      transform: rotate(0deg);
      top: 0;
    }
  }
  .speaker-social-profiles {
    left: 0px;
    transform: translateY(-50%) rotate(0deg);
  }
}

.spekaer-round-style-3 {
  .speakers-social-lists {
    li {
      position: absolute;
      &:nth-child(1) {
        left: -8px;
        top: 50%;
        transform: translateY(-50%);
      }
      &:nth-child(2) {
        left: -5px;
        top: calc(50% + 40px);
        transform: translateY(-50%);
      }
      &:nth-child(3) {
        left: -2px;
        top: calc(50% - 40px);
        transform: translateY(-50%);
      }
      &:nth-child(4) {
        left: 23px;
        top: calc(50% - 72px);
        transform: translateY(-50%);
      }
      &:nth-child(5) {
        left: 23px;
        top: calc(50% + 72px);
        transform: translateY(-50%);
      }
      &:nth-child(6) {
        left: 63px;
        top: calc(50% - 92px);
        transform: translateY(-50%);
      }
    }
  }
}

.spekaer-round-style-3 {
  .speaker-image {
    @include equal-size(rem(255px));
    &::before {
      display: none;
    }
    overflow: visible;
    > a,
    img {
      height: inherit;
      width: inherit;
    }
  }
}
.social_brands_color {
  > li {
    > a {
      color: $white;
      background-color: $black;
      @include equal-size-lineHeight(rem(35px));
      border-radius: 50%;
      @each $name, $color in $social {
        &[class*="#{$name}"] {
          background-color: $color;
        }
      }
      position: relative;
      font-size: rem(13px);
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: inherit;
        background: rgb(242, 80, 34);
        background: linear-gradient(
          90deg,
          rgba(242, 80, 34, 1) 0%,
          rgba(255, 146, 75, 1) 100%
        );
        opacity: 0;
        @include transition;
      }
      &::before {
        z-index: 1;
        position: relative;
      }
      &:hover {
        color: $white;
        background-color: transparent;
        &::after {
          opacity: 1;
        }
      }
    }
  }
}

// Speaker Creative
.speaker-creative {
  background-color: $white;
  box-shadow: 0px 15px 30px 0px rgba($color: $black, $alpha: 0.1);
  border-radius: 5px;
  margin-top: rem(110px);
  @include potrait-tablet {
    margin-bottom: rem(30px);
    padding: {
      top: rem(24px);
      bottom: rem(0px);
      left: rem(32px);
    }
  }
  @include potrait-tablet-upper {
    max-height: rem(186px);
    padding: {
      top: rem(24px);
      left: rem(32px);
      bottom: rem(24px);
    }
  }
  @include potrait-tablet {
    .speaker-creative-col {
      align-self: center;
    }
  }
  .speaker-image {
    text-align: right;
  }
  position: relative;
  .speaker-title {
    font-size: rem(26px);
    margin-left: 0px;
    font-weight: 600;
    &::before {
      display: none;
    }
  }
  .speaker-image {
    @include potrait-tablet-upper {
      position: absolute;
      bottom: rem(-24px);
    }
    img {
      filter: grayscale(0);
      border-bottom-right-radius: 5px;
    }
    &::before {
      display: none;
    }
  }
  .speaker-content {
    @include potrait-tablet {
      margin-bottom: rem(15px);
    }
    > p {
      margin-bottom: rem(44px);
    }
  }
  .speakers-social-lists {
    > li {
      &:not(:last-child) {
        margin-right: rem(6px);
      }
      > a {
        border-radius: 50%;
        background-color: #f5f5f5;
        box-shadow: none;
        @include equal-size-lineHeight(rem(26px));
        font-size: rem(12px);
      }
    }
  }
}

// Speaker overlay style
.speaker_overlay_style {
  @include potrait-tablet-upper {
    margin: {
      left: rem(38px);
      right: rem(38px);
    }
  }
  &:hover {
    .speaker-image {
      .speaker-social-wraper {
        opacity: 1;
      }
    }
  }
  .speaker-image {
    text-align: center;
    img {
      filter: grayscale(0);
    }
    &::before {
      display: none;
    }
    .speaker-social-wraper {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      @include transition;
      &::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: var(--speaker-color);
        filter: blur(30px);
        opacity: 0.8;
      }
    }
  }
  .speakers-social-lists {
    position: relative;
    padding: {
      top: rem(21px);
      bottom: rem(50px);
    }
    z-index: 5;
    > li {
      &:not(:last-child) {
        margin-right: rem(10px);
      }
      > a {
        @include equal-size-lineHeight(rem(40px));
        border-radius: 0px;
        font-size: rem(18px);
        &:hover {
          background-color: #ff4070;
          color: $white;
        }
      }
    }
  }
  .speaker-title {
    font-weight: 600;
    letter-spacing: normal;
    margin-left: rem(-32px);
    margin-bottom: rem(12px);
    &::before {
      width: rem(10px);
      height: rem(17px);
      margin-right: rem(15px);
    }
  }
  .speaker-footer-content {
    padding: {
      top: rem(20px);
      left: rem(32px);
    }
  }
  .speaker-designation {
    font-weight: 500;
    font-size: rem(16px);
    text-transform: capitalize;
    color: #999999;
    margin-bottom: rem(5px);
    line-height: 1;
  }
}

.schedule-info-wrap {
  margin-top: -140px;
  padding-top: 140px;
  &[style^="transform"] {
    margin-top: 0;
  }
}

.schedule-info {
  // padding-top: 78px;
  .watermark-icon {
    padding-top: 78px;
  }
}

/* Speaker new home style */
.speaker-simple-grid-style{
  position: relative;
  &::before{
    content: "";
    position: absolute;
    background: rgb(4,26,87);
    background: linear-gradient(180deg, rgba(4,26,87,0) 0%, rgba(4,26,87,1) 100%);
    left: 0;
    top: 0;
    z-index: 1;
    transition: transform .4s ease-in;
    height: 100%;
    width: 100%;
    transform: scaleY(0);
    transform-origin: bottom;
    pointer-events: none;
  }
  &:hover {
    &::before{
      transform: scaleY(1);
    }
    .speaker-hover-content{
      opacity: 1;
      visibility: visible;
      bottom: 0;
    }
    .speaker-image-simple-grid {
      > a {
        > img {
          filter: grayscale(100%);
        }
      }
    }
  }
  .speaker-hover-content {
    .speaker-title-simple {
      a{
        font-size: 23px;
        font-weight: 600;
        text-transform: capitalize;
        color: #fff;
      }
    }
  }
}

.speaker-image-simple-grid {
  > a {
    > img {
      @include transition;
    }
  }
}

.speaker-hover-content {
  position: absolute;
  left: 0;
  bottom: -50px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: all .4s;
  transition-delay: .2s;
  width: 100%;
  padding: 40px;
  p{
    color: rgba($color: $white, $alpha: .8);
    font-size: 16px;
    margin-bottom: 13px
  }
  h2{
   margin-bottom: 2px;
   font-size: 23px;
   font-weight: 600;
  }
}

.speakers-social-lists-simple {
  list-style: none;
  padding: 0;
  margin-bottom: 0px;
  > li{
    display: inline-block;
    &:not(:last-child) {
      margin-right: 5px;
    }
    > a{
      color: $white;
      width: 44px;
      height: 44px;
      line-height: 40px;
      border: 2px solid currentColor;
      border-radius: 50%;
      &:hover {
        border-color: $primary;
        background-color: $primary;
      }
    }
  }
}

.style_simple_gird {
  margin: {
    left: -10px;
    right: -10px;
  };
  >[class*=col-] {
    padding-right: 10px;
    padding-left: 10px;
    @media (min-width: #{$tablet + 1px}) {
      margin-bottom: 20px;
    }
    @include small-device {
      margin-bottom: 10px;
    }
  }
}

Zerion Mini Shell 1.0