313 lines
8.1 KiB
SCSS
313 lines
8.1 KiB
SCSS
// Homepage
|
|
.homepage {
|
|
// Site title
|
|
&__title {
|
|
&--houses {
|
|
margin: -20px 0 0;
|
|
color: $color-secondary;
|
|
text-align: center;
|
|
|
|
@include bp (sm) {
|
|
margin-top: -100px;
|
|
}
|
|
}
|
|
&--world {
|
|
color: $color-primary-tertiary20;
|
|
text-align: center;
|
|
|
|
@include bp (sm) {
|
|
margin-top: calc(-1 * clamp(120px, 10vw, 216px));
|
|
}
|
|
}
|
|
}
|
|
|
|
// Intro Section
|
|
&__intro {
|
|
background-color: $color-tertiary;
|
|
color: $color-text;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
padding-bottom: calc(96px + 5vw);
|
|
|
|
@include bp (sm) {
|
|
padding-bottom: calc(280px + 10vw);
|
|
}
|
|
|
|
// Button
|
|
.button {
|
|
$color-shadow: rgba($color-shadow-brown, 0.05);
|
|
box-shadow:
|
|
0 1px 1px $color-shadow,
|
|
0 2px 2px $color-shadow,
|
|
0 4px 4px $color-shadow,
|
|
0 16px 16px $color-shadow;
|
|
margin-bottom: 40px;
|
|
|
|
svg {
|
|
transition: fill 0.3s;
|
|
}
|
|
.text-split__line {
|
|
&:last-child {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
// Hover
|
|
&:hover {
|
|
background-color: $color-primary-tertiary20;
|
|
|
|
svg {
|
|
fill: $color-tertiary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Text
|
|
&__description {
|
|
max-width: 350px;
|
|
margin: 100px auto 32px;
|
|
|
|
@include bp (sm) {
|
|
margin: 20px auto 32px;
|
|
max-width: 524px;
|
|
}
|
|
}
|
|
|
|
// Photos Collage
|
|
&__photos {
|
|
position: relative;
|
|
max-width: 2000px;
|
|
margin: calc(-1 * 96px + 5vw) 0 80px;
|
|
|
|
@include bp (sm) {
|
|
margin: calc(-1 * clamp(300px, 20vw, 500px)) auto clamp(64px, 6.5vw, 128px);
|
|
}
|
|
}
|
|
&__collage {
|
|
display: grid;
|
|
grid-template-columns: repeat(16, 1fr);
|
|
grid-template-rows: repeat(3, 1fr);
|
|
margin: 0 -14vw;
|
|
height: 110vw;
|
|
|
|
@include bp (sm) {
|
|
grid-template-columns: repeat(32, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
margin: 0 -140px;
|
|
height: clamp(400px, 40vw, 800px);
|
|
}
|
|
|
|
.photo-card {
|
|
position: relative;
|
|
display: block;
|
|
grid-column-end: span 8;
|
|
height: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
transform: rotate(var(--rotation)) translateZ(0);
|
|
|
|
@include bp (sm) {
|
|
height: clamp(156px, 18vw, 400px);
|
|
}
|
|
|
|
// First row
|
|
// Mobile: Top left
|
|
&:nth-child(1) {
|
|
--rotation: -10.5deg;
|
|
z-index: 5;
|
|
grid-column-start: 2;
|
|
grid-row: 1;
|
|
|
|
@include bp (sm) {
|
|
z-index: 10;
|
|
top: clamp(24px, 8vw, 128px);
|
|
}
|
|
}
|
|
// Mobile: Middle left
|
|
&:nth-child(2) {
|
|
--rotation: 3deg;
|
|
z-index: 3;
|
|
grid-column-start: 1;
|
|
grid-row: 2;
|
|
margin-top: -10vw;
|
|
left: -20vw;
|
|
|
|
@include bp (sm) {
|
|
z-index: 7;
|
|
grid-column-start: 7;
|
|
grid-row: 1;
|
|
top: clamp(16px, 3vw, 48px);
|
|
margin-top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
// Mobile: Middle center
|
|
&:nth-child(3) {
|
|
z-index: 4;
|
|
grid-column-start: 5;
|
|
grid-row: 2;
|
|
margin-top: -12vw;
|
|
|
|
@include bp (sm) {
|
|
z-index: 6;
|
|
grid-column-start: 13;
|
|
grid-row: 1;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
// Mobile: Middle right
|
|
&:nth-child(4) {
|
|
--rotation: -3deg;
|
|
z-index: 3;
|
|
grid-column-start: 8;
|
|
grid-row: 2;
|
|
margin-top: -7vw;
|
|
left: 20vw;
|
|
|
|
@include bp (sm) {
|
|
z-index: 2;
|
|
grid-column-start: 19;
|
|
grid-row: 1;
|
|
top: clamp(16px, 3vw, 48px);
|
|
margin-top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
// Mobile: Top right
|
|
&:nth-child(5) {
|
|
--rotation: 10.5deg;
|
|
z-index: 6;
|
|
grid-column-start: 8;
|
|
grid-row: 1;
|
|
|
|
@include bp (sm) {
|
|
z-index: 1;
|
|
top: clamp(24px, 8vw, 128px);
|
|
grid-column-start: 24;
|
|
}
|
|
}
|
|
|
|
// Second row
|
|
&:nth-child(6) {
|
|
display: none;
|
|
--rotation: -5.5deg;
|
|
|
|
@include bp (sm) {
|
|
display: block;
|
|
z-index: 9;
|
|
grid-column-start: 1;
|
|
grid-row: 2;
|
|
top: clamp(24px, 5.5vw, 88px);
|
|
}
|
|
}
|
|
&:nth-child(7) {
|
|
display: none;
|
|
--rotation: -8deg;
|
|
|
|
@include bp (sm) {
|
|
display: block;
|
|
z-index: 8;
|
|
grid-column-start: 5;
|
|
grid-row: 2;
|
|
}
|
|
}
|
|
// Mobile: Bottom left
|
|
&:nth-child(8) {
|
|
--rotation: 8deg;
|
|
z-index: 2;
|
|
grid-column-start: 2;
|
|
grid-row: 3;
|
|
margin-top: -16vw;
|
|
|
|
@include bp (sm) {
|
|
z-index: 5;
|
|
grid-column-start: 11;
|
|
grid-row: 2;
|
|
top: calc(-1 * clamp(20px, 3vw, 48px));
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
// Mobile: Bottom right
|
|
&:nth-child(9) {
|
|
--rotation: -2deg;
|
|
z-index: 1;
|
|
grid-column-start: 8;
|
|
grid-row: 3;
|
|
margin-top: -16vw;
|
|
|
|
@include bp (sm) {
|
|
--rotation: 2deg;
|
|
z-index: 4;
|
|
grid-column-start: 15;
|
|
grid-row: 2;
|
|
top: calc(-1 * clamp(20px, 3vw, 48px));
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
&:nth-child(10) {
|
|
--rotation: 8deg;
|
|
display: none;
|
|
|
|
@include bp (sm) {
|
|
display: block;
|
|
z-index: 3;
|
|
grid-column-start: 21;
|
|
grid-row: 2;
|
|
}
|
|
}
|
|
&:nth-child(11) {
|
|
--rotation: 5.5deg;
|
|
display: none;
|
|
|
|
@include bp (sm) {
|
|
z-index: 2;
|
|
grid-column-start: 25;
|
|
grid-row: 2;
|
|
top: clamp(24px, 5.5vw, 88px);
|
|
margin-right: 0;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// Put card in front when hovering
|
|
&:hover {
|
|
z-index: 13;
|
|
}
|
|
}
|
|
}
|
|
|
|
// CTAS
|
|
&__ctas {
|
|
text-align: center;
|
|
margin-bottom: 96px;
|
|
|
|
@include bp (sm) {
|
|
margin-bottom: 160px;
|
|
}
|
|
|
|
.cards {
|
|
justify-content: center;
|
|
margin-top: 48px;
|
|
|
|
@include bp (sm) {
|
|
display: flex;
|
|
margin-top: 72px;
|
|
}
|
|
|
|
& > * {
|
|
margin: 20px auto 0;
|
|
|
|
@include bp (sm) {
|
|
margin: 0 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// World title
|
|
.title-world {
|
|
color: rgba($color-tertiary, 0.3);
|
|
margin-top: -60px;
|
|
}
|
|
}
|