☠️ RESET for v2

src/style/_base.scss

@@ -1,38 +1,52 @@
 html {
-    font: #{$base-font-size} $font-sans;
-    color: $color-text;
+    font: #{$base-font-size}/1.2 $font-sans;
+    color: #fff;
     min-width: 320px;
-    overflow-x: hidden;
+    word-break: normal;
 }
 body {
     @include font-smooth;
     background: $color-primary;
     color: #fff;
     cursor: default;
+    overflow-x: hidden;
+    overscroll-behavior-y: none;
 }
 *, *:before, *:after {
-    box-sizing: border-box;
+    text-rendering: optimizeLegibility;
+    -moz-osx-font-smoothing: grayscale;
 }
 strong {
-    font-weight: normal;
+    font-weight: 700;
 }
 em {
     font-style: normal;
 }
-figure, p, dl, dt, dd, ul, ol, li {
+figure, p, dl, dt, dd, ul, li {
     margin: 0;
     padding: 0;
 }
-figure img {
+figure, picture {
     display: block;
 }
+nav li:before {
+    display: none;
+}
 button {
     background: none;
     border: none;
-    outline: none;
     cursor: pointer;
 }
 
+// Accessibility outline
+// Remove default focus styles for mouse users if :focus-visible is supported
+[data-js-focus-visible] :focus:not([data-focus-visible-added]) {
+    outline: none;
+}
+[data-focus-visible-added], *:focus-visible {
+    outline: 1px dashed $color-tertiary;
+}
+
 // Selection
 ::selection { color: #fff; background: $color-secondary; }
 ::-moz-selection { color: #fff; background: $color-secondary; }
@@ -50,215 +64,19 @@ button {
     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;
-    text-align: center;
-    pointer-events: none;
-    user-select: none;
 
-    @include breakpoint (lg) {
-        font-size: pxVW(700);
-    }
-    @include breakpoint (1920px) {
-        font-size: rem(900px);
-        letter-spacing: -40px;
-    }
-
-    &, span {
-        will-change: transform, opacity;
-    }
-}
-
-
-// Title: Category
-.title-category {
-    font-family: $font-serif;
-    font-size: rem(28px);
-    line-height: 1;
-    color: $color-secondary;
-}
-
-// Title: Locations
-.title-location {
-    font-family: $font-serif;
-    font-size: rem(48px);
-    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;
-        }
-    }
-    span, em {
-        will-change: transform;
-    }
-
-    // Bigger version
-    &--big {
-        font-size: pxVW(180);
-
-        @include breakpoint (sm) {
-            font-size: pxVW(130);
-        }
-        @include breakpoint (md) {
-            font-size: pxVW(160);
-        }
-        @include breakpoint (lg) {
-            font-size: rem(160px);
-        }
-
-        em {
-            display: inline-block;
-            font-size: 0.35em;
-
-            @include breakpoint (md) {
-                margin-left: -8px;
-            }
-        }
-    }
-
-    // Inline version
-    &--inline {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-
-        @include breakpoint (sm) {
-            flex-direction: row;
-            align-items: baseline;
-        }
-
-        em {
-            margin: 8px 0 4px;
-
-            @include breakpoint (sm) {
-                margin: 2px 16px 0 24px;
-            }
-
-            span {
-                position: relative;
-                display: inline-block;
-            }
-        }
-    }
-}
-
-
-
-/* Text Styles
+/* Global elements
 ========================================================================== */
-// Location
-.style-location {
-    font-family: $font-serif;
-    font-size: 6vw;
-    color: #fff;
-    line-height: 1.15;
-    text-align: center;
-
-    @include breakpoint (mob) {
-        font-size: rem(24px);
-    }
-    @include breakpoint (sm) {
-        font-size: rem(28px);
-    }
-
-    a {
-        color: #fff;
-        text-decoration: none;
-
-        &:hover {
-            color: $color-secondary;
-        }
-    }
-
-    .street {
-        margin-bottom: 8px;
-    }
+// Split text elements
+.word, .char {
+    display: inline-block;
+    transform-style: preserve-3d;
+    will-change: transform;
 }
+.words-3d {
+    perspective: 800px;
 
-// Information (capitalized text)
-.style-caps {
-    font-family: $font-sans;
-    font-size: rem(12px);
-    color: $color-tertiary;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-
-    // Transparent variant
-    &--transparent {
-        color: rgba($color-tertiary, 0.5);
-    }
-
-    @include breakpoint (sm) {
-        font-size: rem(14px);
-    }
-}
-
-// Short text (description)
-.style-description {
-    color: $color-tertiary;
-    font-family: $font-sans-light;
-    font-size: rem(18px);
-    line-height: 1.55;
-    text-align: center;
-
-    @include breakpoint (sm) {
-        max-width: 572px;
-        margin: 0 auto;
-        font-size: rem(28px);
-        line-height: 1.64;
-    }
-
-    // Dark text
-    &--dark {
-        color: $color-text;
-    }
-
-    // Small text variant
-    &--small {
-        font-size: rem(16px);
-        line-height: 1.4;
-
-        @include breakpoint (sm) {
-            font-size: rem(20px);
-            line-height: 1.5;
-        }
-    }
-}
-
-// Notice
-.style-notice {
-    color: rgba($color-tertiary, 0.5);
-    font-family: $font-sans-light;
-    font-size: rem(14px);
-
-    @include breakpoint (sm) {
-        font-size: rem(16px);
+    span {
+        transform-origin: 0 85%;
     }
 }