Select Git revision
scroll-indicator.pcss
-
Tomi Valentová authoredTomi Valentová authored
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;
}
}
}
}