144 lines
3.3 KiB
SCSS
144 lines
3.3 KiB
SCSS
// Homepage
|
|
.homepage {
|
|
// Site title
|
|
&__title {
|
|
// Houses
|
|
&--houses {
|
|
display: inline-flex;
|
|
margin: -28px 0 0;
|
|
color: $color-secondary;
|
|
text-align: center;
|
|
|
|
@include bp (sm) {
|
|
margin-top: calc(-1 * clamp(24px, 5vw, 104px));
|
|
}
|
|
|
|
.text-split {
|
|
margin-left: calc(-1 * clamp(24px, 5vw, 64px));
|
|
}
|
|
span {
|
|
transition: none;
|
|
letter-spacing: -0.06em;
|
|
}
|
|
}
|
|
// World
|
|
&--world {
|
|
min-width: 100%;
|
|
display: inline-flex;
|
|
color: $color-primary-tertiary20;
|
|
text-align: center;
|
|
|
|
@include bp (sm) {
|
|
margin-top: calc(-1 * clamp(120px, 10vw, 216px));
|
|
}
|
|
|
|
span:first-child {
|
|
margin-right: -0.075em;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Intro Section
|
|
&__intro {
|
|
overflow: hidden;
|
|
padding-bottom: calc(96px + 20vw);
|
|
background: linear-gradient(180deg, $color-tertiary 85%, $color-primary 100%), $color-tertiary;
|
|
color: $color-text;
|
|
text-align: center;
|
|
|
|
@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 {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: $color-gray;
|
|
}
|
|
.text-split__line {
|
|
&:last-child {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
// Hover
|
|
&:hover {
|
|
background-color: $color-primary-tertiary20;
|
|
}
|
|
}
|
|
}
|
|
// Headline
|
|
&__headline {
|
|
max-width: 350px;
|
|
margin: clamp(24px, 10vw, 96px) auto 0;
|
|
|
|
@include bp (sm) {
|
|
max-width: 524px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 24px;
|
|
|
|
@include bp (sm) {
|
|
margin-bottom: 32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Photos Collage
|
|
&__photos {
|
|
position: relative;
|
|
max-width: 2000px;
|
|
margin: calc(-1 * 96px - 4vw) 0 80px;
|
|
|
|
@include bp (sm) {
|
|
margin: calc(-1 * clamp(300px, 20vw, 500px)) auto clamp(64px, 6.5vw, 128px);
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|