WIP

src/style/_base.scss

@@ -1,6 +1,11 @@
 html {
     font: #{$base-font-size} $font-sans;
     color: $color-text;
+    scroll-behavior: smooth;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+		scroll-behavior: auto;
+    }
 }
 body {
     @include font-smooth;
@@ -50,30 +55,42 @@ button {
 
 // Title: Massive
 .title-massive {
-    font-size: 50.25vw;
-    letter-spacing: -2vw;
     font-family: $font-serif-extra;
-    color: $color-secondary;
+    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-size: rem(68px);
     font-family: $font-serif;
-    color: $color-secondary;
+    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);
-        text-transform: uppercase;
         color: $color-lightpurple;
+        text-transform: uppercase;
         letter-spacing: 1px;
 
         @include breakpoint (sm) {
@@ -101,26 +118,30 @@ button {
             }
         }
     }
+
+    // Inline version
+    &--inline {
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+
+        em {
+            margin: 0 16px 0 24px;
+        }
+    }
 }
 
-// Parallax title: Translate X
-.title-parallax {
-    transform: translate3d(var(--translateX), 0, 0);
-    will-change: transform;
-    pointer-events: none;
-    user-select: none;
-}
 
 
 /* Text Styles
 ========================================================================== */
-.location {
+.style-location {
     text-align: center;
 
     .street {
+        margin-bottom: 8px;
         font-family: $font-serif;
         font-size: rem(24px);
-        margin-bottom: 8px;
 
         @include breakpoint (sm) {
             font-size: rem(28px);
@@ -130,20 +151,20 @@ button {
 
 .style-caps {
     font-size: rem(14px);
+    color: $color-tertiary;
     text-transform: uppercase;
     letter-spacing: 1px;
-    color: $color-tertiary;
 }
 
-.description {
+.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;
-        max-width: 572px;
     }
 }