Destructure Shop stylesheets

src/style/pages/shop/_intro.scss

@@ -0,0 +1,201 @@
+/*
+** Shop: Intro
+*/
+&__intro {
+    position: relative;
+    z-index: 30;
+    height: 100vh;
+    min-height: 600px;
+    max-height: 1400px;
+    overflow: hidden;
+
+    // Top Menu
+    .top {
+        position: absolute;
+        z-index: 1;
+        top: 20px;
+        left: 0;
+        padding: 0 20px;
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        margin: 0 auto;
+
+        @include bp (sm) {
+            top: 32px;
+            padding: 0 32px;
+        }
+
+        // Back
+        .back {
+            display: flex;
+            align-items: center;
+            color: #fff;
+            font-size: rem(14px);
+            color: $color-cream;
+            text-decoration: none;
+            transition: color 0.4s var(--ease-quart);
+
+            @include bp (sm) {
+                max-width: none;
+                font-size: rem(18px);
+            }
+
+            svg {
+                margin-right: 8px;
+                transition: transform 0.4s var(--ease-quart);
+            }
+
+            // Hover
+            &:hover {
+                color: $color-tertiary;
+
+                svg {
+                    transform: translate3d(-4px, 0, 0);
+                }
+            }
+        }
+        // Shop
+        .shop-title {
+            font-size: rem(14px);
+            color: $color-cream;
+
+            @include bp (sm) {
+                font-size: rem(18px);
+            }
+        }
+    }
+
+    // Site Title
+    h1 {
+        position: absolute;
+        z-index: 2;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        transform: translate3d(-50%, -50%, 0);
+        // font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
+        text-shadow: 0px 8px 12px rgba(#000, 0.25);
+        text-align: center;
+
+
+        @include bp (sm) {
+            top: clamp(#{rem(40px)}, 16vw, #{rem(144px)});
+            left: 0;
+            font-size: clamp(#{rem(40px)}, 8vw, #{rem(96px)});
+            transform: none;
+        }
+        @include bp (md) {
+            top: clamp(#{rem(40px)}, 10vw, #{rem(96px)});
+            font-size: clamp(#{rem(40px)}, 6vw, #{rem(96px)});
+        }
+
+        span, strong {
+            color: #fff;
+        }
+        span {
+            font-weight: 300;
+        }
+    }
+
+    // Background Image
+    picture {
+        position: relative;
+        display: flex;
+        align-items: flex-end;
+        width: 100%;
+        height: 100%;
+        background-color: $color-primary-darker;
+        pointer-events: none;
+        user-select: none;
+
+        img {
+            opacity: 0.55;
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        // Gradient
+        &:before {
+            display: block;
+            content: "";
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(180deg, rgba(45, 4, 88, 0) 84.2%, #1E0538 100%);
+        }
+    }
+}
+
+// Intro: Navigation
+&__nav {
+    position: absolute;
+    z-index: 20;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+
+    .container {
+        padding: 0 16px 24px;
+
+        @include bp (md) {
+            display: grid;
+            grid-template-columns: 15% auto 15%;
+            align-items: flex-end;
+            gap: 16px;
+            height: 100%;
+            padding: 0 32px 32px;
+        }
+    }
+
+    // Shop
+    p {
+        text-align: center;
+        margin-bottom: 8px;
+
+        @include bp (md) {
+            margin-right: auto;
+        }
+    }
+
+    // Navigation
+    nav {
+        ul {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        li {
+            display: block;
+        }
+        a {
+            text-decoration: none;
+            font-size: rem(22px);
+            font-family: $font-serif;
+            color: $color-tertiary;
+            margin: 0 10px;
+            transition: color 0.3s;
+
+            &:hover {
+                color: $color-secondary;
+            }
+
+            @include bp (sm) {
+                font-size: rem(24px);
+                margin: 0 12px;
+            }
+        }
+
+        // Active
+        .is-active {
+            a {
+                color: $color-secondary;
+            }
+        }
+    }
+}