viniBaxter-spa_landing 0.6.0 → 13.2

data/lib/viniBaxter/sass/spa_landing/theme/iOS/_OS_style.scss

@@ -0,0 +1,211 @@
+// @import url(https://fonts.googleapis.com/css?family=Ek+Mukta:200);
+$cubic: cubic-bezier(0.4, 0.01, 0.165, 0.99);
+// $mukta: 'Ek Mukta', sans-serif;
+$menuItems: 15;
+
+.window {
+  position: relative;
+  display: block;
+  width: 100%;
+  margin: 100px auto 0;
+  overflow: hidden;
+  border-radius: 3px;
+
+  .header {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    height: 60px;
+    width: 100%;
+    // background: rgba(#fff, 1);
+    overflow: hidden;
+    transition: all 0.5s ease-out, background 1s ease-out;
+    transition-delay: 0.2s;
+    z-index: 9999;
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    backdrop-filter: saturate(180%) blur(20px);
+
+    .burger-container {
+      position: relative;
+      display: inline-block;
+      height: 60px;
+      width: 60px;
+      cursor: pointer;
+      transform: rotate(0deg);
+      transition: all 0.3s $cubic;
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+
+      #burger {
+        width: 18px;
+        height: 8px;
+        position: relative;
+        display: block;
+        margin: -4px auto 0;
+        top: 50%;
+
+        .bar {
+          width: 100%;
+          height: 1px;
+          display: block;
+          position: relative;
+          background: $body-color;
+          transition: all 0.3s $cubic;
+          transition-delay: 0s;
+
+          &.topBar {
+            transform: translateY(0px) rotate(0deg);
+          }
+
+          &.btmBar {
+            transform: translateY(6px) rotate(0deg);
+          }
+        }
+      }
+    }
+
+    .icon {
+      display: inline-block;
+      position: absolute;
+      height: 100%;
+      line-height: 50px;
+      width: 50px;
+      height: 50px;
+      text-align: center;
+      color: $body-color;
+      font-size: 22px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      &.icon_sxmGreatAgain {
+        right: 0;
+        top: 0;
+        left: auto;
+        transform: translateX(0px);
+        transition: transform 0.5s $cubic;
+        transition-delay: 0.65s;
+      }
+    }
+
+    ul.menu {
+      position: relative;
+      display: block;
+      padding: 10% 20% 20%;
+      list-style: none;
+
+      li.menu-item {
+        border-bottom: 1px solid #fff;
+        margin-top: 5px;
+        transform: scale(1.15) translateY(-30px);
+        opacity: 0;
+        transition: transform 0.5s $cubic, opacity 0.6s $cubic;
+
+        @for $i from 1 through $menuItems {
+          &:nth-child(#{$i}) {
+            transition-delay: #{0.56 - ($i * 0.07)}s;
+          }
+        }
+
+        a {
+          display: block;
+          position: relative;
+          color: $light;
+          // font-family: $mukta;
+          font-weight: 100;
+          text-decoration: none;
+          font-size: 22px;
+          line-height: 2.35;
+          font-weight: 500;
+          width: 100%;
+        }
+      }
+    }
+
+    &.menu-opened {
+      height: 100%;
+      // background-color: rgba(255, 255, 255, 0.27);
+      background: $primary-gradient-opacity;
+      transition: all 0.3s ease-in, background 0.3s ease-in;
+      transition-delay: 0.25s;
+      backdrop-filter: saturate(180%) blur(20px);
+
+      .burger-container {
+        transform: rotate(90deg);
+
+        #burger {
+          .bar {
+            transition: all 0.4s $cubic;
+            transition-delay: 0.2s;
+
+            &.topBar {
+              transform: translateY(4px) rotate(45deg);
+            }
+
+            &.btmBar {
+              transform: translateY(3px) rotate(-45deg);
+            }
+          }
+        }
+      }
+
+      ul.menu {
+        li.menu-item {
+          transform: scale(1) translateY(0px);
+          opacity: 1;
+
+          @for $i from 1 through $menuItems {
+            &:nth-child(#{$i}) {
+              transition-delay: #{0.07 * $i + 0.2}s;
+            }
+          }
+        }
+      }
+
+      .icon {
+        &.icon_sxmGreatAgain {
+          transform: translateX(75px);
+          transition-delay: 0.3s;
+        }
+      }
+    }
+  }
+
+  .content {
+    // font-family: $mukta;
+    padding: 67px 4% 0;
+    text-align: justify;
+    overflow: scroll;
+    max-height: 100%;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    h2 {
+      margin-bottom: 0px;
+      letter-spacing: 1px;
+    }
+
+    img {
+      width: 95%;
+      position: relative;
+      display: block;
+      margin: 75px auto 75px;
+
+      &:nth-of-type(2) {
+        margin: 75px auto;
+      }
+    }
+  }
+
+  @media (max-width: 3300px) {
+    width: 100%;
+    margin: 0;
+    border-radius: 0px;
+
+    .header {
+      position: fixed;
+    }
+  }
+}

data/lib/viniBaxter/sass/spa_landing/theme/iOS/_index.scss

@@ -0,0 +1,3 @@
+@import 'OS_style';
+@import 'safari__blur__effect';
+@import 'os_card';

data/lib/viniBaxter/sass/spa_landing/theme/iOS/_os_card.scss

@@ -0,0 +1,152 @@
+.section-card-tiles {
+  margin: 0 auto;
+  max-width: 1440px;
+
+  @include media-breakpoint-up(lg) {
+    top: 110px;
+    position: relative;
+  }
+  .cards-tiles-list {
+    padding: 0px;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0px 30px 30px 30px;
+  }
+
+  .card-tile {
+    box-sizing: border-box;
+    max-width: 50%;
+    flex-basis: 50%;
+    position: relative;
+    overflow: hidden;
+
+    &:nth-child(odd) {
+      border-right: 15px solid #fff;
+    }
+
+    &:nth-child(even) {
+      border-left: 15px solid #fff;
+    }
+
+    &:nth-child(1),
+    &:nth-child(2) {
+      border-bottom: 15px solid #fff;
+    }
+
+    &:nth-child(3),
+    &:nth-child(4) {
+      border-top: 15px solid #fff;
+    }
+
+    &:hover .cat-tile-dark-layer {
+      opacity: 0.3;
+    }
+  }
+
+  .jump-tile-link {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+
+  .jump-tile-video {
+    opacity: 0;
+    transition: opacity 0.2s ease-in;
+    width: 100%;
+    position: absolute;
+
+    video {
+      width: 100%;
+      height: 100%;
+      -o-object-fit: cover;
+      object-fit: cover;
+      display: block;
+    }
+  }
+
+  .cat-tile-bg {
+    background-size: cover;
+    background-position: center;
+    padding-bottom: 100%;
+    width: 100%;
+  }
+
+  .cat-tile-dark-layer {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    opacity: 0.2;
+    transition: opacity 0.4s;
+    background-color: black;
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  .cat-tile-copy {
+    width: 100%;
+    z-index: 2;
+    text-align: left;
+    position: absolute;
+    pointer-events: none;
+    top: 28%;
+
+    h2,
+    a {
+      max-width: 80%;
+      padding-left: 15%;
+      font-weight: 500;
+    }
+
+    h2 {
+      color: #fff;
+      text-align: left;
+      // font-family: $font-family-sans-serif;
+
+      font-size: 32px;
+
+      @media screen and (min-width: 1068px) {
+        font-size: 56px;
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    a {
+      display: inline-block;
+      color: #fff;
+      justify-self: start;
+      pointer-events: all;
+      margin-top: 32px;
+      font-size: 24px;
+    }
+  }
+
+  .card-tile-set {
+    h2 {
+      max-width: 398px;
+    }
+
+    .cat-tile-bg {
+      background-repeat: no-repeat;
+    }
+  }
+}
+@import '_1068';
+@import '_735';
+
+.more:after {
+  font-family: 'Nucleo Outline';
+  content: '\ea3b';
+  font-weight: bold;
+  margin-left: 10px;
+  color: #fff;
+  font-size: 15px;
+  line-height: 1;
+}

data/lib/viniBaxter/sass/spa_landing/theme/iOS/_safari__blur__effect.scss

@@ -0,0 +1,50 @@
+.header_TEST {
+  height: 60px;
+  // height: 100%;
+  margin: 0;
+  // position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  background: rgba(255, 255, 255, 31%);
+}
+
+.overlay_TEST {
+  height: 60px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.clone_TEST {
+  height: 80px;
+  padding: 3em 0em 0em 1em;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  /* overflow: hidden;
+  -webkit-filter: blur(5px);
+  filter: blur(5px);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none; */
+  user-select: none;
+  backdrop-filter: saturate(180%) blur(20px);
+  /*   backdrop-filter: saturate(250%) blur(5px); */
+}
+
+.content_TEST {
+  padding: 3em 1em 1em;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  z-index: 1;
+}

data/lib/viniBaxter/sass/spa_landing/theme/mixins/_colored_block.scss

@@ -0,0 +1,78 @@
+@mixin colored_block($color, $font_colored_block) {
+  background: $color !important;
+  transition: opacity 0.3s ease !important;
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $font_colored_block !important;
+    font-weight: 600;
+  }
+  .block-mission {
+    line-height: $line-height-500 !important;
+  }
+  p {
+    color: $font_colored_block !important;
+    font-weight: 200;
+    line-height: $line-height-90 !important;
+    letter-spacing: 0.6px !important;
+    word-wrap: break-word !important;
+    margin-bottom: $paragraph-colored-block-margin-bottom;
+    font-size: $paragraph-80;
+  }
+}
+
+@mixin farthest-corner {
+  &.red {
+    @include colored_block($farthest-corner_redy, $light);
+  }
+  &.sand {
+    @include colored_block($farthest-corner_sand, $black);
+  }
+  &.blue {
+    @include colored_block($farthest-corner_blue, $light);
+  }
+  &.caribean {
+    @include colored_block($farthest-corner_caribean, $black);
+  }
+  &.light_green {
+    @include colored_block($farthest-corner_light_green, $black);
+    height: 100%;
+  }
+  &.none_ {
+    @include colored_block($farthest-corner_none_, $black);
+    height: 100%;
+  }
+  &.purple {
+    @include colored_block($farthest-corner_purple, $light);
+    height: 100%;
+  }
+  &.cold_desert {
+    @include colored_block($farthest-corner_cold_desert, $black);
+  }
+  &.minthy {
+    @include colored_block($farthest-corner_minthy, $black);
+  }
+  &.mint {
+    @include colored_block($farthest-corner_mint, $light);
+  }
+  &.velour {
+    @include colored_block($farthest-corner_velour, $light);
+  }
+  &.grey {
+    @include colored_block($farthest-corner_grey, $black);
+  }
+  &.lovely {
+    @include colored_block($farthest-corner_lovely, $light);
+  }
+  &.golfy {
+    @include colored_block($farthest-corner_golfy, $light);
+  }
+  &.sandy {
+    @include colored_block($farthest-corner_sandy, $dark);
+  }
+  &.in_love {
+    @include colored_block($farthest-corner_in_love, $dark);
+  }
+}