Skip to content
Snippets Groups Projects
Select Git revision
  • 9d1ff7191c5583998687a3094c8fc791ae0df6d0
  • master default protected
  • feat/redesign
  • feat/dockerfile
  • feat/nastenka
  • feat/crossroads
6 results

scroll-indicator.pcss

Blame
  • heading.pcss 4.92 KiB
    .h-default {
      @apply font-condensed font-medium leading-tight;
    }
    
    .h-alt {
      @apply font-alt font-normal;
      line-height: 0.96;
    }
    
    .h-allcaps {
      @apply font-condensed font-normal uppercase leading-tight;
    }
    
    
    @responsive {
      .head-alt-xl,
      .content-block .head-alt-xl {
        @apply text-7xl font-alt font-normal;
        line-height: 0.96;
      }
    
      .head-alt-lg,
      .content-block .head-alt-lg {
        @apply text-6xl font-alt font-normal;
        line-height: 0.96;
      }
    
      .head-alt-md,
      .content-block .head-alt-md {
        @apply text-4xl font-alt font-normal;
        line-height: 0.96;
      }
    
      .head-alt-base,
      .content-block .head-alt-base {
        @apply text-3xl font-alt font-normal;
        line-height: 0.96;
      }
    
      .head-alt-sm,
      .content-block .head-alt-sm {
        @apply text-2xl font-alt font-normal;
        line-height: 0.96;
      }
    
      .head-alt-xs,
      .content-block .head-alt-xs {
        @apply text-xl font-alt font-normal;
        line-height: 0.96;
      }
    
      .head-alt-2xs,
      .content-block .head-alt-2xs {
        @apply text-lg font-alt font-normal;
        line-height: 0.96;
      }
    
    
    
      .head-base,
      .content-block .head-base {
        @apply text-3xl font-condensed font-medium leading-tight;
      }
    
      .head-sm,
      .content-block .head-sm {
        @apply text-2xl font-condensed font-medium leading-tight;
      }
    
      .head-xs,
      .content-block .head-xs {
        @apply text-xl font-condensed font-medium leading-tight;
      }
    
      .head-2xs,
      .content-block .head-2xs {
        @apply text-lg font-condensed font-medium leading-tight;
      }
    
    
    
      .head-heavy-base,
      .content-block .head-heavy-base {
        @apply text-3xl font-condensed font-bold leading-tight;
      }
    
      .head-heavy-sm,
      .content-block .head-heavy-sm {
        @apply text-2xl font-condensed font-bold leading-tight;
      }
    
      .head-heavy-xs,
      .content-block .head-heavy-xs {
        @apply text-xl font-condensed font-bold leading-tight;
      }
    
      .head-heavy-2xs,
      .content-block .head-heavy-2xs {
        @apply text-lg font-condensed font-bold leading-tight;
      }
    
    
    
      .head-allcaps-2xs,
      .content-block .head-allcaps-2xs {
        @apply text-lg font-condensed font-normal uppercase leading-tight;
      }
    
      .head-allcaps-3xs,
      .content-block .head-allcaps-3xs {
        @apply text-base font-condensed font-normal uppercase leading-tight;
      }
    
      .head-allcaps-4xs,
      .content-block .head-allcaps-4xs {
        @apply text-sm font-condensed font-normal uppercase leading-tight;
      }
    
    
    
    
      .head-allcaps-heavy-2xs,
      .content-block .head-allcaps-heavy-2xs {
        @apply text-lg font-condensed font-bold uppercase leading-tight;
      }
    
      .head-allcaps-heavy-3xs,
      .content-block .head-allcaps-heavy-3xs {
        @apply text-base font-condensed font-bold uppercase leading-tight;
      }
    
      .head-allcaps-heavy-4xs,
      .content-block .head-allcaps-heavy-4xs {
        @apply text-sm font-condensed font-bold uppercase leading-tight;
      }
    }
    
    .header-clip {
      clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
    }
    
    
    
    .head-xl {
      @apply text-xl font-bold leading-7 uppercase;
    }
    
    .head-2xl {
      @apply text-2xl font-bold leading-8 uppercase
    }
    
    .head-3xl {
      @apply text-2xl leading-4 uppercase xl:text-3xl xl:leading-8;
    }
    
    .head-4xl {
      @apply text-2xl font-bold leading-7 uppercase mb-5 lg:text-4xl lg:leading-10;
    }
    
    .head-7xl {
      @apply text-3xl font-medium uppercase lg:text-7xl;
    }
    
    
    p {
      @apply leading-6;
    }
    
    
    .vertical-time-line {
      border-left: 1px solid green;
    }
    
    .header-carousel {
      display: block;
      margin: 0 auto;
      position: relative;
      .header-carousel--text {
        @apply text-2xl uppercase font-medium lg:text-7xl;
        position: absolute;
        top: 20%;
        left: 10%;
        max-width: 1200px;
        @screen sm {
          top: 35%;
        }
        @screen lg {
          top: 45%;
        }
      }
    
    
      img {
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        transition: all 800ms ease-in-out;
        transform: scale(1.15, 1.15);
      }
    
      .slick-slide {
        clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
      }
      .slick-active {
        img {
          transform: scale(1, 1);
        }
        .header-carousel--text {
          animation: right_to_left 500ms ease;
        }
      }
    
      @keyframes right_to_left {
        from {
          left: 15%;
        }
        to {
          left: 10%;
        }
      }
    
      .slick-arrow {
        font-size: 0;
        position: absolute;
        top: 80%;
        right: 10%;
        z-index: 10;
    
        @screen lg {
          top: 60%;
        }
    
        &:before, &:after {
          color: white;
          border-right: 2px solid white;
          border-bottom: 2px solid white;
          content: '';
          position: absolute;
          width: .8rem;
          height: .8rem;
          @screen lg {
            width: 1rem;
            height: 1rem;
          }
        }
    
        &.slick-next {
          transform: rotate(-45deg);
        }
        &.slick-prev {
          transform: rotate(135deg);
        }
      }
      .slick-dots {
        position: absolute;
        left: 5%;
        color: white;
        top: 60%;
        z-index: 10;
    
        li {
          height: 6px;
          width: 6px;
          margin-bottom: 6px;
          border: 1px solid white;
          border-radius: 50%;
    
          &.slick-active {
            background-color: white;
          }
    
          button {
            font-size: 0;
          }
        }
      }
    }