Rework Shop nav and intro classes and styling

- rename things and move styles around to make more sense
- quick nav past banner was somehow broken and would not appear past banner

src/components/organisms/ShopBanner.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/pages/shop/intro";
+    @import "../../style/pages/shop/banner";
 </style>
 
 <script lang="ts">
@@ -51,7 +51,7 @@
          */
         const animation = timeline([
             // Hero image
-            ['.shop-page__background', {
+            ['.shop-background', {
                 scale: [1.06, 1],
                 opacity: [0, 1],
                 z: 0,
@@ -61,7 +61,7 @@
             }],
 
             // Intro top elements
-            ['.shop-page__intro .top > *', {
+            ['.shop-banner .top > *', {
                 y: [-100, 0],
                 opacity: [0, 1],
             }, {
@@ -70,7 +70,7 @@
             }],
 
             // Hero title
-            ['.shop-page__title h1', {
+            ['.shop-banner .title h1', {
                 y: [32, 0],
                 opacity: [0, 1],
             }, {
@@ -78,7 +78,7 @@
             }],
 
             // Intro navbar
-            ['.shop-page__nav .container > *, .shop-page__intro .button-cart', {
+            ['.shop-banner .nav .container > *, .shop-banner .button-cart', {
                 y: [100, 0],
                 opacity: [0, 1],
             }, {
@@ -108,7 +108,7 @@
 <svelte:window bind:innerWidth />
 
 
-<section class="shop-page__intro" bind:this={introEl}>
+<section class="shop-banner" bind:this={introEl}>
     <div class="top container">
         <a href="/" class="back" data-sveltekit-noscroll>
             <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -118,11 +118,11 @@
         </a>
     </div>
 
-    <div class="shop-page__title">
+    <div class="title">
         <h1 class="title-big-sans">Shop</h1>
     </div>
 
-    <nav class="shop-page__nav">
+    <div class="nav">
         <div class="container">
             <p class="text-label">Choose a city</p>
             <nav>
@@ -137,12 +137,12 @@
                 </ul>
             </nav>
         </div>
-    </nav>
+    </div>
 
     <ButtonCart />
 
     <Image
-        class="shop-page__background"
+        class="background"
         id={shop.page_heroimage.id}
         alt={shop.page_heroimage.alt}
         sizeKey="hero"
@@ -155,7 +155,7 @@
     />
 </section>
 
-<nav class="shop-location"
+<nav class="shop-quicknav"
     class:is-visible={scrolledPastIntro}
     class:is-overlaid={$cartOpen}
 >

src/style/pages/_shop.scss

@@ -1,8 +1,8 @@
-.shop-page {
+:global(.shop-page) {
     position: relative;
 
     // Error
-    &__error {
+    :global(.shop-page__error) {
         padding: 64px 0;
         background: $color-cream;
         color: $color-text;
@@ -31,32 +31,6 @@
     }
 }
 
-// Nav
-:global(.shop-location) {
-    --inset: 20px;
-    display: flex;
-    position: fixed;
-    z-index: 20;
-    top: var(--inset);
-    left: var(--inset);
-    right: var(--inset);
-    justify-content: flex-end;
-    transform: translate3d(0, -88px, 0);
-    transition: transform 1s var(--ease-quart);
-    transition-delay: 100ms;
-    pointer-events: none;
-
-    @include bp (sm) {
-        --inset: 32px;
-        justify-content: space-between;
-    }
-
-    // Visible state
-    &.is-visible {
-        transform: translate3d(0,0,0);
-    }
-}
-
 // Notifications
 :global(.notifications) {
     position: fixed;

src/style/pages/shop/_banner.scss

@@ -1,7 +1,7 @@
 /*
-** Shop: Intro
+** Shop: Intro banner
 */
-.shop-page__intro {
+.shop-banner {
     position: relative;
     z-index: 30;
     height: 30vw;
@@ -70,8 +70,8 @@
         }
     }
 
-    // Site Title
+    // Page title
-    .shop-page__title {
+    .title {
         position: absolute;
         z-index: 2;
         top: 42%;
@@ -98,56 +98,8 @@
         }
     }
 
-    // Background Image
+    // Navigation
-    :global(picture) {
+    .nav {
-        position: relative;
-        display: flex;
-        align-items: flex-end;
-        width: 100%;
-        height: 100%;
-        background-color: $color-primary-darker;
-        pointer-events: none;
-        user-select: none;
-
-        :global(img) {
-            opacity: 0.55;
-            display: block;
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-
-        // Gradient
-        &:before {
-            content: "";
-            display: block;
-            position: absolute;
-            z-index: 1;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(180deg, rgba(45, 4, 88, 0) 72.5%, #1E0538 100%);
-        }
-    }
-
-    // Cart button
-    :global(.button-cart) {
-        position: absolute;
-        z-index: 21;
-        top: 16px;
-        right: 16px;
-
-        @include bp (sm) {
-            top: auto;
-            bottom: 32px;
-            right: 32px;
-        }
-    }
-}
-
-// Intro: Navigation
-.shop-page__nav {
         position: absolute;
         z-index: 20;
         bottom: 0;
@@ -221,4 +173,79 @@
                 }
             }
         }
+    }
+
+    // Background Image
+    :global(picture) {
+        position: relative;
+        display: flex;
+        align-items: flex-end;
+        width: 100%;
+        height: 100%;
+        background-color: $color-primary-darker;
+        pointer-events: none;
+        user-select: none;
+
+        :global(img) {
+            opacity: 0.55;
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        // Gradient
+        &:before {
+            content: "";
+            display: block;
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(180deg, rgba(45, 4, 88, 0) 72.5%, #1E0538 100%);
+        }
+    }
+
+    // Cart button
+    :global(.button-cart) {
+        position: absolute;
+        z-index: 21;
+        top: 16px;
+        right: 16px;
+
+        @include bp (sm) {
+            top: auto;
+            bottom: 32px;
+            right: 32px;
+        }
+    }
+}
+
+
+// Quick nav
+.shop-quicknav {
+    --inset: 20px;
+    display: flex;
+    position: fixed;
+    z-index: 20;
+    top: var(--inset);
+    left: var(--inset);
+    right: var(--inset);
+    justify-content: flex-end;
+    transform: translate3d(0, -88px, 0);
+    transition: transform 1s var(--ease-quart);
+    transition-delay: 100ms;
+    pointer-events: none;
+
+    @include bp (sm) {
+        --inset: 32px;
+        justify-content: space-between;
+    }
+
+    // Visible state
+    &.is-visible {
+        transform: translate3d(0,0,0);
+    }
 }