135 lines
2.6 KiB
SCSS
135 lines
2.6 KiB
SCSS
// Introduction
|
|
.intro {
|
|
background-color: $color-tertiary;
|
|
overflow: hidden;
|
|
|
|
// Title
|
|
.title-parallax {
|
|
margin-top: -#{pxVW(160)};
|
|
margin-left: -#{pxVW(160)};
|
|
}
|
|
|
|
// Description
|
|
&__description {
|
|
margin-top: 14vw;
|
|
margin-bottom: 72px;
|
|
padding: 0 32px;
|
|
color: $color-text;
|
|
|
|
@include breakpoint (600px) {
|
|
margin-top: 72px;
|
|
}
|
|
@include breakpoint (sm) {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 120px;
|
|
padding: 0;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 40px;
|
|
|
|
@include breakpoint (sm) {
|
|
margin-bottom: 72px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Carousel
|
|
.carousel {
|
|
position: relative;
|
|
|
|
// Beige background under
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 0;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: pxVW(768);
|
|
background-color: $color-tertiary;
|
|
|
|
@include breakpoint (xxl) {
|
|
height: 820px;
|
|
}
|
|
}
|
|
|
|
// Photos
|
|
.gallery__picture:before {
|
|
background-color: $color-secondary;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Explore
|
|
.explore--homepage {
|
|
margin-top: pxVW(248);
|
|
|
|
@include breakpoint (lg) {
|
|
margin-top: 248px;
|
|
}
|
|
|
|
// Description
|
|
.style-description {
|
|
color: $color-tertiary;
|
|
}
|
|
|
|
// Globe
|
|
|
|
// .globe {
|
|
// margin-bottom: calc(-200px - 8vw);
|
|
// @include breakpoint (sm) {
|
|
// margin-bottom: calc(-100px - 28vw);
|
|
// }
|
|
// @include breakpoint (xl) {
|
|
// margin-bottom: -550px;
|
|
// }
|
|
// }
|
|
|
|
// Browse
|
|
.browse {
|
|
margin-top: 4vw;
|
|
|
|
@include breakpoint (xl) {
|
|
margin-top: 72px;
|
|
}
|
|
}
|
|
|
|
// Of text
|
|
.of {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: pxVW(224);
|
|
font-family: $font-serif-extra;
|
|
font-size: pxVW(248);
|
|
line-height: 1;
|
|
color: $color-lightpurple;
|
|
text-transform: uppercase;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
|
|
@include breakpoint (lg) {
|
|
margin-bottom: 200px;
|
|
font-size: rem(248px);
|
|
}
|
|
|
|
span {
|
|
will-change: transform;
|
|
}
|
|
}
|
|
|
|
// Massive title
|
|
.anim-title {
|
|
margin-top: -#{pxVW(352)};
|
|
margin-left: -60px;
|
|
|
|
span:nth-of-type(1) {
|
|
letter-spacing: -6vw;
|
|
}
|
|
}
|
|
}
|