html {
font: #{$base-font-size} $font-sans;
color: $color-text;
scroll-behavior: smooth;
min-width: 320px;
@media screen and (prefers-reduced-motion: reduce) {
scroll-behavior: auto;
}
}
body {
@include font-smooth;
background: $color-primary;
cursor: default;
overflow-x: hidden;
}
*, *:before, *:after {
box-sizing: border-box;
}
strong {
font-weight: normal;
}
em {
font-style: normal;
}
figure, p, dl, dt, dd, ul, ol, li {
margin: 0;
padding: 0;
}
figure img {
display: block;
}
button {
background: none;
border: none;
outline: none;
cursor: pointer;
}
// Selection
::selection { color: #fff; background: $color-secondary; }
::-moz-selection { color: #fff; background: $color-secondary; }
// Images glitches fix
// img {backface-visibility: hidden;}
/* Titles
========================================================================== */
#{headings(1,6)} {
margin: 0;
font-weight: normal;
font-style: normal;
}
// Title: Massive
.title-massive {
font-family: $font-serif-extra;
font-size: pxVW(800);
line-height: 1;
color: $color-secondary;
letter-spacing: -2vw;
pointer-events: none;
user-select: none;
@include breakpoint (xxl) {
font-size: rem(900px);
}
}
// Title: Locations
.title-location {
font-family: $font-serif;
font-size: rem(68px);
line-height: 1;
color: $color-secondary;
text-align: center;
@include breakpoint (sm) {
font-size: rem(64px);
}
@include breakpoint (lg) {
font-size: rem(72px);
}
@include breakpoint (xl) {
font-size: rem(96px);
}
em {
display: block;
font-size: rem(18px);
color: $color-lightpurple;
text-transform: uppercase;
letter-spacing: 1px;
@include breakpoint (sm) {
display: inline-block;
font-size: rem(32px);
margin-right: -8px;
}
}
// Bigger version
&--big {
font-size: rem(56px);
@include breakpoint (sm) {
font-size: rem(160px);
}
em {
display: inline-block;
font-size: rem(20px);
@include breakpoint (sm) {
margin-left: -8px;
font-size: rem(56px);
}
}
}
// Inline version
&--inline {
display: flex;
align-items: baseline;
justify-content: center;
em {
margin: 0 16px 0 24px;
}
}
}
/* Text Styles
========================================================================== */
.style-location {
text-align: center;
.street {
margin-bottom: 8px;
font-family: $font-serif;
font-size: rem(24px);
@include breakpoint (sm) {
font-size: rem(28px);
}
}
}
.style-caps {
font-size: rem(14px);
color: $color-tertiary;
text-transform: uppercase;
letter-spacing: 1px;
}
.style-description {
font-family: $font-sans-light;
font-size: rem(18px);
line-height: 1.55;
text-align: center;
@include breakpoint (sm) {
max-width: 572px;
font-size: rem(28px);
line-height: 1.64;
}
}