🔥 Huge style refactoring by using SvelteKit built-in style tag

It's been tricky but got there finally! Hello `:global`
- Avoid using one global CSS file containing everything
- Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used

src/components/atoms/Badge.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/atoms/badge";
+</style>
+
 <script lang="ts">
     export let text: string
     export let size: string = 'small'

src/components/atoms/BoxCTA.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/atoms/box-cta";
+</style>
+
 <script lang="ts">
     import Icon from '$components/atoms/Icon.svelte'
 

src/components/atoms/Button.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/atoms/button";
+</style>
+
 <script lang="ts">
     import SplitText from '$components/SplitText.svelte'
 

src/components/atoms/ButtonCart.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/atoms/button-cart";
+</style>
+
 <script lang="ts">
     import { scale } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'

src/components/atoms/ButtonCircle.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/atoms/button-circle";
+</style>
+
 <script lang="ts">
     export let tag: string = 'button'
     export let url: string = undefined

src/components/atoms/DiscoverText.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/atoms/discover";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
 

src/components/atoms/IconArrow.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/atoms/arrow";
+</style>
+
 <script lang="ts">
     export let color: string = undefined
     export let flip: boolean = false

src/components/atoms/IconEarth.svelte

@@ -1,3 +1,11 @@
+<style lang="scss">
+    svg {
+        width: 24px;
+        height: 24px;
+        color: $color-gray;
+    }
+</style>
+
 <script lang="ts">
     export let animate: boolean = false
 

src/components/atoms/ScrollingTitle.svelte

@@ -1,3 +1,11 @@
+<style lang="scss">
+    :global(.scrolling-title) {
+        transform: translate3d(var(--parallax-x), 0, 0);
+        transition: transform 1.2s var(--ease-quart);
+        will-change: transform;
+    }
+</style>
+
 <script lang="ts">
     import { map } from '$utils/functions'
     import { reveal, fly } from '$animations/index'

src/components/atoms/SiteTitle.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/atoms/site-title";
+</style>
+
 <script lang="ts">
     import SplitText from '$components/SplitText.svelte'
     import { reveal, fly } from '$animations/index'

src/components/layouts/PosterLayout.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/layouts/poster";
+</style>
+
 <script lang="ts">
     import { cartId } from '$utils/stores/shop'
     import { addToCart } from '$utils/functions/shop'

src/components/molecules/CartItem.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/cart-item";
+</style>
+
 <script lang="ts">
     import { createEventDispatcher } from 'svelte'
     // Components

src/components/molecules/EmailForm.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/newsletter-form";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components

src/components/molecules/Heading.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/heading";
+</style>
+
 <script lang="ts">
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
 

src/components/molecules/House.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/house";
+</style>
+
 <script lang="ts">
     import dayjs from 'dayjs'
     // Components

src/components/molecules/Location.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/location";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
     import { spring } from 'svelte/motion'
@@ -66,7 +70,7 @@
         tabindex="0"
     >
         <Image
-            class="location__flag"
+            class="flag"
             id={location.country.flag.id}
             sizeKey="square-small"
             width={32} height={32}
@@ -92,7 +96,7 @@
             {#each location.photos as { image }, index}
                 {#if image}
                     <Image
-                        class={index === photoIndex ? 'is-visible' : null}
+                        class={`location__photo ${index === photoIndex ? 'is-visible' : ''}`}
                         id={image.id}
                         sizeKey="photo-thumbnail"
                         width={340} height={226}

src/components/molecules/NotificationCart.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/notification-cart";
+</style>
+
 <script lang="ts">
     import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'

src/components/molecules/Pagination.svelte

@@ -0,0 +1,23 @@
+<style lang="scss">
+    @import "../../style/molecules/pagination";
+</style>
+
+<script lang="ts">
+    export let ended: boolean = false
+    export let current: number
+    export let total: number
+</script>
+
+<div class="pagination" role="button" tabindex="0"
+    disabled={ended ? ended : undefined}
+    on:click
+    on:keydown
+>
+    <div class="pagination__progress">
+        <span class="current">{current}</span>
+        <span>/</span>
+        <span class="total">{total}</span>
+
+        <slot />
+    </div>
+</div>

src/components/molecules/PhotoCard.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/photo-card";
+</style>
+
 <script lang="ts">
     import { createEventDispatcher } from 'svelte'
     import Image from '$components/atoms/Image.svelte'

src/components/molecules/PostCard.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/postcard";
+</style>
+
 <script lang="ts">
     import Image from '$components/atoms/Image.svelte'
 

src/components/molecules/Poster.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/poster";
+</style>
+
 <script lang="ts">
     import { cartId } from '$utils/stores/shop'
     import { addToCart } from '$utils/functions/shop'

src/components/molecules/ShopLocationSwitcher.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/shop-locationswitcher";
+</style>
+
 <script lang="ts">
     import { goto } from '$app/navigation'
     import { getContext } from 'svelte'

src/components/molecules/Switcher.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/switcher";
+</style>
+
 <script lang="ts">
     import { page } from '$app/stores'
     import { getContext } from 'svelte'

src/components/organisms/Carousel.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/carousel";
+</style>
+
 <script lang="ts">
     import { onMount } from 'svelte'
     import { writable } from 'svelte/store'

src/components/organisms/Cart.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/cart";
+</style>
+
 <script lang="ts">
     import { onMount } from 'svelte'
     import { fade, fly } from 'svelte/transition'

src/components/organisms/Collage.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/collage";
+</style>
+
 <script lang="ts">
     import PhotoCard from '$components/molecules/PhotoCard.svelte'
 

src/components/organisms/Footer.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/footer";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components

src/components/organisms/InteractiveGlobe.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/modules/globe";
+</style>
+
 <script lang="ts">
     import { onMount, onDestroy, getContext } from 'svelte'
     import { getPosition, getRandomItem } from '$utils/functions'
@@ -123,7 +127,7 @@
 
 <section id="globe">
     {#if type === 'cropped'}
-        <div class="globe--cropped">
+        <div class="globe-cropped">
             <div class="globe" bind:this={globeEl} />
         </div>
     {:else}

src/components/organisms/ListCTAs.svelte

@@ -0,0 +1,20 @@
+<style lang="scss">
+    .list-cta {
+        @include bp (sm) {
+            display: flex;
+            justify-content: center;
+        }
+
+        & > :global(*) {
+            margin: 20px auto 0;
+
+            @include bp (sm) {
+                margin: 0 16px;
+            }
+        }
+    }
+</style>
+
+<ul class="list-cta">
+    <slot />
+</ul>

src/components/organisms/Locations.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/locations";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
     import { flip } from 'svelte/animate'

src/components/organisms/NewsletterModule.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/newsletter";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components

src/components/organisms/PostersGrid.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/pages/shop/posters";
+</style>
+
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
     import EmblaCarousel, { type EmblaCarouselType } from 'embla-carousel'

src/components/organisms/ShopHeader.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/pages/shop/intro";
+</style>
+
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
     import anime, { type AnimeTimelineInstance } from 'animejs'

src/components/organisms/ShopModule.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/shop";
+</style>
+
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
     // Components

src/routes/[country]/[location]/[photo].svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../../style/pages/viewer";
+</style>
+
 <script lang="ts">
     import { browser } from '$app/env'
     import { page } from '$app/stores'
@@ -223,24 +227,24 @@
             autoplay: false,
         })
 
-        anime.set('.viewer__picture', {
+        anime.set('.photo-page__picture', {
             opacity: 0,
         })
-        anime.set('.viewer__picture.is-1', {
+        anime.set('.photo-page__picture.is-1', {
             translateY: 24,
         })
 
         // Photos
         timeline.add({
-            targets: '.viewer__picture.is-1',
+            targets: '.photo-page__picture.is-1',
             opacity: 1,
             translateY: 0,
             duration: 900,
         }, 250)
         timeline.add({
-            targets: '.viewer__picture:not(.is-1)',
+            targets: '.photo-page__picture:not(.is-1)',
             opacity: 1,
-            translateX (element: HTMLElement, index: number) {
+            translateX (element: HTMLElement) {
                 const x = getComputedStyle(element).getPropertyValue('--offset-x').trim()
                 return [`-${x}`, 0]
             },
@@ -249,7 +253,7 @@
 
         // Prev/Next buttons
         timeline.add({
-            targets: '.viewer__controls button',
+            targets: '.photo-page__controls button',
             translateX (item: HTMLElement) {
                 let direction = item.classList.contains('prev') ? -1 : 1
                 return [16 * direction, 0]
@@ -260,25 +264,25 @@
 
         // Infos
         timeline.add({
-            targets: '.viewer__info > *',
+            targets: '.photo-page__info > *',
             translateY: [24, 0],
             opacity: [0, 1],
             delay: anime.stagger(200)
         }, 400)
 
 
-        anime.set('.viewer__index', {
+        anime.set('.photo-page__index', {
             opacity: 0
         })
         // Index
         timeline.add({
-            targets: '.viewer__index',
+            targets: '.photo-page__index',
             opacity: 1,
             duration: 900,
         }, 600)
         // Fly each number
         timeline.add({
-            targets: '.viewer__index .char',
+            targets: '.photo-page__index .char',
             translateY: ['100%', 0],
             delay: anime.stagger(200),
             duration: 1000,
@@ -303,25 +307,25 @@
 {/if}
 
 
-<PageTransition name="viewer">
+<PageTransition name="photo-page">
     <div class="container grid">
-        <p class="viewer__notice text-label">Tap for fullscreen</p>
+        <p class="photo-page__notice text-label">Tap for fullscreen</p>
 
         <ButtonCircle
             tag="a"
             url={previousUrl}
             color="purple"
-            class="viewer__close shadow-box-dark"
+            class="close shadow-box-dark"
         >
             <svg width="12" height="12">
                 <use xlink:href="#cross">
             </svg>
         </ButtonCircle>
 
-        <div class="viewer__carousel">
+        <div class="photo-page__carousel">
-            <div class="viewer__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
+            <div class="photo-page__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
                 {#each visiblePhotos as { id, image, title }, index (id)}
-                    <div class="viewer__picture is-{currentIndex === 0 ? index + 1 : index}">
+                    <div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}">
                         <Image
                             class="photo {image.width / image.height < 1.475 ? 'not-landscape' : ''}"
                             id={image.id}
@@ -337,7 +341,7 @@
                     </div>
                 {/each}
 
-                <div class="viewer__controls">
+                <div class="photo-page__controls">
                     <ButtonCircle class="prev shadow-box-dark" disabled={!canGoNext} clone={true} on:click={goToPrevious}>
                         <IconArrow color="pink" flip={true} />
                     </ButtonCircle>
@@ -347,12 +351,12 @@
                 </div>
 
 
-                <div class="viewer__index title-index">
+                <div class="photo-page__index title-index">
                     <SplitText text="{(currentPhotoIndex < 10) ? '0' : ''}{currentPhotoIndex}" mode="chars" />
                 </div>
             </div>
 
-            <div class="viewer__info">
+            <div class="photo-page__info">
                 <h1 class="title-medium">{currentPhoto.title}</h1>
 
                 <div class="detail text-info">
@@ -376,7 +380,7 @@
     </div>
 
     {#if isFullscreen}
-        <div class="viewer__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}
+        <div class="photo-page__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}
             in:fade={{ easing: quartOut, duration: 1000 }}
             out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}
         >

src/routes/[country]/[location]/index.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../../style/pages/location";
+</style>
+
 <script lang="ts">
     import { navigating, page } from '$app/stores'
     import { onMount } from 'svelte'
@@ -14,6 +18,7 @@
     import Button from '$components/atoms/Button.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
     import House from '$components/molecules/House.svelte'
+    import Pagination from '$components/molecules/Pagination.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
     export let location: any
@@ -279,23 +284,19 @@
 
         <section class="location-page__next">
             <div class="container">
-                <div class="pagination" role="button"
+                <Pagination
-                    on:click={!ended && loadMorePhotos} disabled={ended ? ended : undefined}
+                    ended={ended}
+                    current={currentPhotosAmount}
+                    total={totalPhotos}
+                    on:click={!ended && loadMorePhotos}
                     on:keydown={({ key, target }) => key === 'Enter' && target.click()}
-                    tabindex="0"
             >
-                    <div class="pagination__progress">
-                        <span class="current">{currentPhotosAmount}</span>
-                        <span>/</span>
-                        <span class="total">{totalPhotos}</span>
-
                     {#if !ended}
-                            <p class="pagination__more">See more photos</p>
+                        <p class="more">See more photos</p>
                     {:else}
-                            <p class="pagination__message">You've seen it all!</p>
+                        <p class="message">You've seen it all!</p>
                     {/if}
-                    </div>
+                </Pagination>
-                </div>
 
                 {#if ended}
                     <NewsletterModule theme="light" />

src/routes/__error.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../style/pages/shop";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components
@@ -7,6 +11,7 @@
     import BoxCTA from '$components/atoms/BoxCTA.svelte'
     import Heading from '$components/molecules/Heading.svelte'
     import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
+    import ListCTAs from '$components/organisms/ListCTAs.svelte'
     import Locations from '$components/organisms/Locations.svelte'
     import ShopModule from '$components/organisms/ShopModule.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
@@ -37,7 +42,7 @@
             text="{errors[status].message} {defaultMessage}"
         />
 
-        <div class="list-cta">
+        <ListCTAs>
             <BoxCTA
                 url="{$page.url.pathname}#locations"
                 icon="globe"
@@ -56,7 +61,7 @@
                 label="Shop our products"
                 alt="Shopping bag"
             />
-        </div>
+        </ListCTAs>
     </div>
 
     <InteractiveGlobe />

src/routes/__layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import '../style/style.scss'
+    import '../style/global.scss'
+
     import { navigating, page } from '$app/stores'
     import { beforeNavigate } from '$app/navigation'
     import { onMount, setContext } from 'svelte'

src/routes/credits.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../style/pages/credits";
+</style>
+
 <script lang="ts">
     import { onMount } from 'svelte'
     import anime, { type AnimeTimelineInstance } from 'animejs'

src/routes/index.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../style/pages/homepage";
+</style>
+
 <script lang="ts">
     import { page } from '$app/stores'
     import { getContext, onMount } from 'svelte'
@@ -17,6 +21,7 @@
     import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
     import Collage from '$components/organisms/Collage.svelte'
     import Locations from '$components/organisms/Locations.svelte'
+    import ListCTAs from '$components/organisms/ListCTAs.svelte'
     import ShopModule from '$components/organisms/ShopModule.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
@@ -77,7 +82,7 @@
     >
         <ScrollingTitle
             tag="h1"
-            class="homepage__title--houses"
+            class="title-houses"
             label="Houses of the World"
             offsetStart={-300}
             offsetEnd={400}
@@ -103,32 +108,38 @@
     <div class="homepage__ctas" id="ctas">
         <DiscoverText />
 
-        <div class="list-cta">
+        <ListCTAs>
+            <li>
                 <BoxCTA
                     url="{$page.url.pathname}#locations"
                     icon="globe"
                     label="Discover locations"
                     alt="Globe"
                 />
+            </li>
+            <li>
                 <BoxCTA
                     url="/photos"
                     icon="photos"
                     label="Browse all photos"
                     alt="Photos"
                 />
+            </li>
+            <li>
                 <BoxCTA
                     url="/shop"
                     icon="bag"
                     label="Shop our products"
                     alt="Shopping bag"
                 />
-        </div>
+            </li>
+        </ListCTAs>
     </div>
 
     <section class="homepage__locations">
         <InteractiveGlobe />
 
-        <ScrollingTitle tag="p" class="homepage__title--world mask">
+        <ScrollingTitle tag="p" class="title-world mask">
             <SplitText text="World" mode="chars" />
         </ScrollingTitle>
 

src/routes/locations.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../style/pages/explore";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components

src/routes/photos.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../style/pages/photos";
+</style>
+
 <script lang="ts">
     import { page } from '$app/stores'
     import { goto } from '$app/navigation'
@@ -290,14 +294,14 @@
 
         // Reveal text
         timeline.add({
-            targets: '.photos__intro .discover',
+            targets: '.photos-page__intro .discover',
             translateY: [16, 0],
             opacity: [0, 1],
         }, 900)
 
         // Filters
         timeline.add({
-            targets: '.photos__intro .filter',
+            targets: '.photos-page__intro .filter',
             translateY: [16, 0],
             opacity: [0, 1],
             complete ({ animatables }) {
@@ -332,8 +336,8 @@
 />
 
 
-<PageTransition name="photos">
+<PageTransition name="photos-page">
-    <section class="photos__intro"
+    <section class="photos-page__intro"
         class:is-passed={scrolledPastIntro}
     >
         <ScrollingTitle tag="h1" text="Houses">
@@ -342,14 +346,14 @@
 
         <DiscoverText />
 
-        <div class="filter"
+        <div class="filters"
             class:is-over={filtersOver}
             class:is-transitioning={filtersTransitioning}
             class:is-visible={filtersVisible}
         >
-            <span class="text-label filter__label">Filter photos</span>
+            <span class="text-label filters__label">Filter photos</span>
 
-            <div class="filter__bar">
+            <div class="filters__bar">
                 <ul>
                     <li>
                         <Select
@@ -410,7 +414,7 @@
                 </ul>
             </div>
 
-            <div class="filter__actions">
+            <div class="filters__actions">
                 {#if filtered}
                     <button class="reset button-link"
                         on:click={resetFiltered}
@@ -423,10 +427,10 @@
         </div>
     </section>
 
-    <section class="photos__content" style="--margin-sides: {sideMargins}px;" bind:this={photosContentEl}>
+    <section class="photos-page__content" style="--margin-sides: {sideMargins}px;" bind:this={photosContentEl}>
         <div class="grid container">
             {#if photos}
-                <div class="photos__grid" bind:this={photosGridEl}>
+                <div class="photos-page__grid" bind:this={photosGridEl}>
                     {#each photos as { id, image, slug, location, title, city }, index (id)}
                         <figure class="photo shadow-photo">
                             <a href="/{location.country.slug}/{location.slug}/{slug}" sveltekit:prefetch sveltekit:noscroll tabindex="0">
@@ -476,7 +480,7 @@
                     </div>
                 </div>
             {:else if !filteredCountryExists}
-                <div class="photos__message">
+                <div class="photos-page__message">
                     <p>
                         <strong>{$page.url.searchParams.get('country').replace(/(^|\s)\S/g, letter => letter.toUpperCase())}</strong> is not available… yet 👀
                     </p>

src/routes/shop/__layout.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/pages/shop";
+</style>
+
 <script lang="ts">
     import { setContext } from 'svelte'
     import { cartNotifications } from '$utils/stores/shop'

src/routes/subscribe.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../style/pages/subscribe";
+</style>
+
 <script lang="ts">
     import { onMount } from 'svelte'
     import dayjs from 'dayjs'

src/style/_animations.scss

@@ -1,17 +1,3 @@
-/*
-** Globe
-*/
-// Marker
-@keyframes globeMarkerPulse {
-    0% {
-        box-shadow: 0 0 0 0 rgba($color-secondary, 1);
-    }
-    100% {
-        box-shadow: 0 0 0 32px rgba(#fff, 0);
-    }
-}
-
-
 /*
 ** Earth icon
 */

src/style/_base.scss

@@ -52,7 +52,7 @@ button {
     border: none;
     cursor: pointer;
 
-    &[disabled] {
+    &:global([disabled]) {
         cursor: not-allowed;
     }
 }

src/style/atoms/_box-cta.scss

@@ -18,7 +18,7 @@
         padding: 24px 16px;
     }
 
-    .icon {
+    :global(.icon) {
         width: 36px;
         height: 36px;
         color: #fff;
@@ -31,7 +31,7 @@
             height: 48px;
         }
 
-        svg {
+        :global(svg) {
             display: block;
             width: 100%;
             height: 100%;

src/style/atoms/_button-cart.scss

@@ -7,12 +7,12 @@
         margin-left: auto;
     }
 
-    button {
+    :global(button) {
         overflow: visible;
     }
 
     // Icon
-    svg {
+    :global(svg) {
         display: block;
         width: min(65%, 27px);
         height: min(65%, 27px);

src/style/atoms/_button-circle.scss

@@ -15,7 +15,7 @@
         height: 56px;
     }
 
-    & > * {
+    & > :global(*) {
         width: 22px;
         height: 22px;
         object-fit: contain;
@@ -41,7 +41,7 @@
     */
     // Hover
     &.has-clone:not([disabled]):hover {
-        & > * {
+        & > :global(*) {
             &:first-child {
                 opacity: 0;
                 transform: scale(0.75) translate3d(20%, 0, 0);
@@ -59,7 +59,7 @@
         background: $color-primary;
         border: 3px solid rgba(#fff, 0.2);
 
-        svg {
+        :global(svg) {
             color: $color-primary-tertiary20;
         }
     }
@@ -73,7 +73,7 @@
         height: 24px;
         width: 24px;
 
-        img, svg {
+        :global(img), :global(svg) {
             width: 8px;
             height: 8px;
             object-fit: contain;
@@ -85,7 +85,7 @@
         height: 32px;
         width: 32px;
 
-        img, svg {
+        :global(img), :global(svg) {
             width: 16px;
             height: 16px;
             object-fit: contain;

src/style/atoms/_button.scss

@@ -19,7 +19,7 @@
     }
 
     // Icon
-    img, svg {
+    :global(img), :global(svg) {
         display: block;
         margin-right: 12px;
         color: $color-gray;
@@ -30,11 +30,11 @@
     &:not([disabled]):hover {
         background: $color-secondary;
 
-        svg {
+        :global(svg) {
             color: #fff;
         }
     }
-    .text-split__line {
+    :global(.text-split__line) {
         &:last-child {
             --offset-y: 65%;
             color: #fff;
@@ -95,7 +95,7 @@
             color: #fff;
             background: $color-secondary;
         }
-        .text-split__line {
+        :global(.text-split__line) {
             &:last-child {
                 color: #fff;
             }
@@ -126,7 +126,7 @@
         }
 
         // Hover
-        .text-split__line {
+        :global(.text-split__line) {
             &:last-child {
                 color: $color-primary-tertiary20;
             }

src/style/atoms/_icon.scss

@@ -1,8 +0,0 @@
-.icon {
-    // Earth icon
-    &-earth {
-        width: 24px;
-        height: 24px;
-        color: $color-gray;
-    }
-}

src/style/atoms/_scrolling-title.scss

@@ -1,5 +0,0 @@
-.scrolling-title {
-    transform: translate3d(var(--parallax-x), 0, 0);
-    transition: transform 1.2s var(--ease-quart);
-    will-change: transform;
-}

src/style/atoms/_site-title.scss

@@ -1,7 +1,7 @@
 .site-title {
     font-family: $font-serif;
 
-    .middle {
+    :global(.middle) {
         position: relative;
         top: -4px;
         font-weight: 600;
@@ -23,19 +23,19 @@
             font-size: clamp(#{rem(20px)}, 2.5vw, #{rem(30px)});
         }
 
-        .word-1 {
+        :global(.word-1) {
             display: block;
             color: $color-lilas-bright;
         }
-        .word-2 {
+        :global(.word-2) {
             font-size: 0.45em;
         }
-        .word-3 {
+        :global(.word-3) {
             display: inline-block;
             margin-left: -0.023em;
             color: $color-secondary;
         }
-        span {
+        :global(span) {
             transition: color 0.25s;
         }
     }
@@ -57,7 +57,7 @@
             font-size: rem(96px);
         }
 
-        .middle {
+        :global(.middle) {
             top: 0;
             margin: 10px 0;
             font-size: 0.3125em;
@@ -67,7 +67,7 @@
                 margin: 0 10px 0 20px;
             }
         }
-        .char {
+        :global(.char) {
             transition: none;
         }
     }

src/style/global.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+
+// Dependencies
+@import "sanitize.css/sanitize";
+
+// Tools
+@import "tools/helpers";
+
+// Base
+@import "base";
+@import "fonts";
+@import "typography";
+@import "effects";
+
+// Layout
+@import "layout/grid";
+@import "layout/modules";
+
+// Misc
+@import "animations";
+
+// Components (Atomic Design System)
+// Atoms
+@import "atoms/photo";

src/style/imports.scss

@@ -0,0 +1,4 @@
+// Tools
+@import "variables";
+@import "tools/mixins";
+@import "tools/functions";

src/style/layouts/_poster.scss

@@ -17,7 +17,7 @@
             margin: clamp(112px, 10vw, 200px) 0 clamp(88px, 10vw, 120px);
         }
     }
-    h2 {
+    :global(h2) {
         display: block;
         white-space: nowrap;
         margin-bottom: 16px;
@@ -102,11 +102,13 @@
             grid-column: 14 / span var(--columns);
         }
     }
-    .image {
+
+    // Image
+    :global(.image) {
         position: relative;
         border-radius: 6px;
 
-        img {
+        :global(img) {
             position: absolute;
             top: 0;
             left: 0;
@@ -122,15 +124,15 @@
             width: 100%;
             padding-bottom: 75%;
         }
-
+    }
-        &--1 {
+    :global(.image--1) {
         grid-column: 1 / span 7;
 
         @include bp (sm) {
             grid-column: 1 / span 7;
         }
     }
-        &--2 {
+    :global(.image--2) {
         grid-column: 2 / span 7;
         margin: 32px 0;
 
@@ -139,7 +141,7 @@
             margin: 48px 0;
         }
     }
-        &--3 {
+    :global(.image--3) {
         grid-column: 1 / span 6;
         z-index: 10;
         margin-bottom: -64px;
@@ -153,7 +155,7 @@
             padding-bottom: 128%;
         }
     }
-        &--4 {
+    :global(.image--4) {
         grid-column: 1 / span 8;
         margin: -56px 20px 20px;
 
@@ -164,7 +166,6 @@
             margin-right: 0;
         }
     }
-    }
 
     // About
     &__about {

src/style/modules/_globe.scss

@@ -10,15 +10,15 @@
     cursor: grab;
     user-select: none;
 
-    @include bp (sm) {
+    // @include bp (sm) {
     //     height: 130vw;
-    }
+    // }
-    @include bp (md) {
+    // @include bp (md) {
     //     height: 112vw;
-    }
+    // }
-    @include bp (xl) {
+    // @include bp (xl) {
     //     height: 100vw;
-    }
+    // }
 
     // DEBUG //
     // background: rgba(red, 0.2);
@@ -40,25 +40,26 @@
     ** States and Variants
     */
     // When dragging
-    &.is-grabbing {
+    &:global(.is-grabbing) {
         cursor: grabbing;
     }
 
     // Cropped globe
-    &--cropped {
+    &-cropped {
         overflow: hidden;
         height: clamp(300px, 30vw, 500px);
     }
+}
 
 
-    /*
+/*
-    ** Markers
+** Markers
-    */
+*/
-    &__markers {
+:global(.globe__markers) {
     z-index: 2;
 
     // Marker
-        .marker {
+    :global(.marker) {
         position: absolute;
         z-index: 2;
         cursor: pointer;
@@ -81,28 +82,26 @@
             background: $color-secondary;
             border-radius: 100%;
         }
-
-            span {
-                transition: color 0.4s var(--ease-quart), opacity 0.3s var(--ease-inout);
     }
 
     // Hover glow effect
-            &.hover {
+    :global(.hover) {
         &:before {
-                    animation: globeMarkerPulse 1s;
+            animation: markerPulse 1s;
         }
     }
 
     // Label
-            &__label {
+    :global(.marker__label) {
         position: absolute;
         bottom: 16px;
         left: 0px;
         color: transparent;
         pointer-events: none;
+        transition: color 0.4s var(--ease-quart), opacity 0.3s var(--ease-quart), transform 0.3s var(--ease-quart);
     }
     // Location city
-            &__city {
+    :global(.marker__city) {
         font-family: $font-serif;
         font-size: rem(18px);
         line-height: 1;
@@ -112,7 +111,7 @@
         }
     }
     // Location country
-            &__country {
+    :global(.marker__country) {
         display: block;
         opacity: 0.8;
         font-family: $font-sans;
@@ -127,67 +126,74 @@
     }
 
     // Active
-            &.is-active {
+    :global(.is-active) {
-                &, span {
+        opacity: 1;
+
+        :global(span) {
             opacity: 1;
         }
-                .marker {
+        :global(.marker__city) {
-                    &__city {
             color: $color-secondary;
         }
-                    &__country {
+        :global(.marker__country) {
             color: $color-text;
         }
     }
-            }
 
     // Is light
-            &.is-light {
+    :global(.is-light) {
-                &.is-active {
+        :global(.is-active) {
-                    .marker {
+            :global(.marker__city) {
-                        &__city {
                 color: #fff;
             }
-                        &__country {
+            :global(.marker__country) {
                 color: #d2b7e4;
             }
         }
     }
-            }
 
     // Left positioned
-            &.is-left {
+    :global(.is-left) {
-                .marker {
+        :global(.marker__city) {
-                    &__label {
             left: auto;
             right: 32px;
         }
-                    &__country {
+        :global(.marker__country) {
             text-align: right;
         }
     }
-            }
 
     // Marker is close to another one
     // Show the marker infos only on hover
-            &.is-close {
+    :global(.is-close) {
         // Dot
         &:before {
             width: 7px;
             height: 7px;
         }
         // Label
-                .marker__label {
+        :global(.marker__label) {
             opacity: 0;
+            transform: translate3d(0, 4px, 0);
         }
 
         // Show labels on hover
         &:hover {
-                    .marker__label {
+            :global(.marker__label) {
                 opacity: 1;
-                    }
+                transform: translate3d(0,0,0);
-                }
             }
         }
     }
 }
+
+
+// Pulse animation
+@keyframes markerPulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba($color-secondary, 1);
+    }
+    100% {
+        box-shadow: 0 0 0 32px rgba(#fff, 0);
+    }
+}

src/style/molecules/_cart-item.scss

@@ -63,7 +63,7 @@
             }
         }
         // Select
-        .select {
+        :global(.select) {
             position: relative;
             display: flex;
             align-items: center;
@@ -75,16 +75,16 @@
             cursor: pointer;
             transition: border-color 0.4s var(--ease-quart);
 
-            span {
+            :global(span) {
                 display: block;
                 font-size: rem(12px);
                 color: $color-text;
 
-                & + span {
+                & + :global(span) {
                     margin-left: 4px;
                 }
             }
-            select {
+            :global(select) {
                 position: absolute;
                 z-index: 1;
                 top: 0;
@@ -114,7 +114,7 @@
         }
 
         // Remove Icon
-        .remove {
+        :global(.remove) {
             position: absolute;
             top: 16px;
             right: 16px;

src/style/molecules/_heading.scss

@@ -8,7 +8,7 @@
     }
 
     // Title
-    h1 {
+    :global(h1) {
         margin-top: 56px;
         line-height: 1;
         color: $color-secondary;
@@ -17,8 +17,9 @@
             margin-top: 160px;
         }
     }
+
     // Text
-    p {
+    :global(p) {
         max-width: 300px;
         margin: 40px auto 0;
         font-weight: 200;

src/style/molecules/_house.scss

@@ -57,7 +57,7 @@
             & > * {
                 display: inline-block;
             }
-            svg {
+            :global(svg) {
                 width: 1em;
                 height: 1em;
                 margin-right: 0.4em;
@@ -77,7 +77,7 @@
         opacity: 0;
         transition: opacity 2s var(--ease-quart);
 
-        figure {
+        :global(figure) {
             position: relative;
             z-index: 5;
             display: flex;
@@ -98,7 +98,7 @@
                 height: 0;
             }
         }
-        picture {
+        :global(picture) {
             height: 100%;
             border-radius: 0;
 
@@ -112,7 +112,7 @@
                 transform: translateX(-50%);
             }
         }
-        img {
+        :global(img) {
             display: block;
             width: 100%;
             height: 100%;
@@ -132,7 +132,7 @@
         // Scale down image on hover
         @media (hover: hover) {
             a:hover {
-                img {
+                :global(img) {
                     opacity: 0.7;
                     transform: scale3d(1.03, 1.03, 1.03) !important;
                     transition-duration: 1.2s;
@@ -187,9 +187,10 @@
             }
         }
     }
+}
 
-    // Visible state
+// Visible state
-    &.is-visible {
+:global(.is-visible) {
     .house__info {
         h2 {
             opacity: 1;
@@ -202,9 +203,8 @@
     .house__photo {
         opacity: 1;
 
-            img {
+        :global(img) {
             transform: scale3d(1.01, 1.01, 1.01);
         }
     }
-    }
 }

src/style/molecules/_issue.scss

@@ -12,7 +12,7 @@
         text-decoration: none;
     }
     // Image
-    img {
+    :global(img) {
         $shadow-color: rgba(#936B47, 0.06);
         display: block;
         width: 80px;

src/style/molecules/_list-cta.scss

@@ -1,14 +0,0 @@
-.list-cta {
-    @include bp (sm) {
-        display: flex;
-        justify-content: center;
-    }
-
-    & > * {
-        margin: 20px auto 0;
-
-        @include bp (sm) {
-            margin: 0 16px;
-        }
-    }
-}

src/style/molecules/_location.scss

@@ -41,9 +41,6 @@
 
         // Hover
         &:hover {
-            strong {
-                color: $color-tertiary;
-            }
             &:after {
                 opacity: 1;
                 transform: translate3d(-50%, -50%, 0);
@@ -52,11 +49,10 @@
     }
 
     // Flag
-    &__flag {
+    :global(.flag img) {
-        img {
         display: block;
         margin: 2px auto 0;
-            border-radius: 100%;
+        border-radius: 100% !important;
         margin-right: 24px;
 
         @include bp (sm) {
@@ -64,7 +60,6 @@
             margin-right: 0;
         }
     }
-    }
 
     // Location name
     &__name {
@@ -93,7 +88,7 @@
     }
 
     // Badge
-    .badge {
+    :global(.badge) {
         display: inline-flex;
 
         @include bp (sm) {
@@ -125,8 +120,10 @@
         @include bp (sm) {
             display: block;
         }
+    }
 
-        picture {
+    // Photo
+    :global(.location__photo) {
         position: absolute;
         top: 0;
         left: 0;
@@ -135,19 +132,19 @@
         opacity: 0;
         transition: opacity 0.3s;
 
-            img {
+        :global(img) {
             display: block;
             width: 100%;
             height: 100%;
             object-fit: cover;
         }
+    }
 
-            &.is-visible {
+    :global(.is-visible) {
         opacity: 1;
     }
-        }
-    }
 
+    // Hover
     &:hover {
         .location__photos {
             opacity: 1;

src/style/molecules/_newsletter-form.scss

@@ -30,14 +30,13 @@
             @include bp (sm) {
                 font-size: rem(18px);
             }
-
+        }
-            &::placeholder {
+        :global(input::placeholder) {
-                color: $color-gray;
+            color: rgba($color-tertiary, 0.6);
             opacity: 1;
         }
-        }
+        :global(button) {
-        button {
+            position: absolute !important;
-            position: absolute;
             right: 16px;
             top: 50%;
             transform: translateY(-50%);

src/style/molecules/_pagination.scss

@@ -0,0 +1,72 @@
+// Pagination
+.pagination {
+    position: relative;
+    display: block;
+    margin: auto 0;
+    cursor: pointer;
+
+    &[disabled] {
+        cursor: not-allowed;
+    }
+
+    // Progress
+    &__progress {
+        position: relative;
+        display: inline-block;
+        font-size: rem(88px);
+        color: rgba($color-text, 0.2);
+        font-family: $font-serif;
+        font-weight: 200;
+        line-height: 1;
+        letter-spacing: -0.05em;
+        transition: color 0.5s;
+
+        @include bp (sm) {
+            font-size: clamp(80px, 16vw, #{rem(160px)});
+        }
+
+        span {
+            display: inline-block;
+            margin: 0 -10px;
+        }
+    }
+
+    // Hover
+    &:not([disabled]):hover {
+        .pagination__progress {
+            color: rgba($color-text, 0.4);
+        }
+    }
+
+    // Label
+    :global(p) {
+        display: block;
+        margin: 16px auto 0;
+        text-align: center;
+        font-family: $font-sans;
+        text-transform: uppercase;
+        color: $color-text;
+        letter-spacing: 0.1em;
+        font-weight: 400;
+        font-size: rem(14px);
+    }
+
+    // More button
+    :global(.more) {
+        color: $color-secondary !important;
+    }
+
+    // Message
+    :global(.message) {
+        padding: clamp(96px, 24vw, 360px) 0 clamp(96px, 16vw, 280px);
+        text-align: center;
+        color: $color-text;
+        font-size: rem(24px);
+        font-weight: 200;
+        line-height: 1.4;
+
+        @include bp (sm) {
+            font-size: rem(28px);
+        }
+    }
+}

src/style/molecules/_photo-card.scss

@@ -1,9 +1,4 @@
 .photo-card {
-    picture {
-        width: 100%;
-        height: 100%;
-        background: $color-primary-tertiary20;
-    }
     & > * {
         border-radius: 8px;
     }
@@ -15,7 +10,12 @@
         transition: transform 0.7s var(--ease-quart);
         will-change: transform;
     }
-    img {
+    :global(picture) {
+        width: 100%;
+        height: 100%;
+        background: $color-primary-tertiary20;
+    }
+    :global(img) {
         display: block;
         width: calc(100% + 2px);
         height: calc(100% + 2px);
@@ -41,7 +41,7 @@
             font-size: clamp(#{rem(12px)}, 1.2vw, #{rem(14px)});
         }
 
-        picture {
+        :global(picture) {
             width: 20px;
             height: 20px;
             margin-right: 12px;
@@ -54,18 +54,18 @@
                 margin-right: 16px;
             }
 
-            img {
+            :global(img) {
                 display: block;
                 width: 100%;
                 height: 100%;
             }
         }
-        p {
+        :global(p) {
             max-width: min(80%, 300px);
             line-height: 1.4;
         }
 
-        & > * {
+        & > :global(*) {
             opacity: 0;
             transform: translate3d(0, 8px, 0);
             transition: opacity 0.7s var(--ease-quart), transform 0.8s var(--ease-quart);
@@ -97,15 +97,15 @@
         a:hover {
             transform: scale(1.0375) rotate(2deg) translateZ(0);
 
-            .photo-card__info {
+            :global(.photo-card__info) {
-                & > * {
+                :global(*) {
                     opacity: 1;
                     transform: translate3d(0,0,0);
                 }
-                picture {
+                :global(picture) {
                     transition-delay: 100ms;
                 }
-                p {
+                :global(p) {
                     transition-delay: 180ms;
                 }
             }

src/style/molecules/_poster.scss

@@ -15,7 +15,7 @@
     }
 
     // Poster image
-    img {
+    :global(img) {
         pointer-events: auto;
         position: relative;
         z-index: 2;
@@ -49,7 +49,7 @@
             transition: transform 0.8s var(--ease-quart);
         }
 
-        & > * {
+        & > :global(*) {
             background: none;
             font-size: rem(14px);
             font-weight: 300;
@@ -88,7 +88,7 @@
 
     // Hover effect
     &:hover {
-        img {
+        :global(img) {
             @include bp (md) {
                 transform: scale(0.8) translate3d(0, -5%, 0);
                 border-radius: 8px;

src/style/molecules/_switcher.scss

@@ -51,7 +51,7 @@
                 background: rgba($color-tertiary, 0.2);
             }
         }
-        .icon {
+        :global(.icon) {
             display: block;
             width: 32px;
             height: 32px;

src/style/organisms/_carousel.scss

@@ -8,13 +8,13 @@
     &__slides {
         display: flex;
     }
-    &__slide {
+    & :global(picture) {
         position: relative;
         flex: 0 0 100%;
         color: $color-text;
         cursor: pointer;
 
-        img {
+        & :global(img) {
             display: block;
             width: 100%;
             height: 100%;

src/style/organisms/_cart.scss

@@ -162,7 +162,7 @@
         }
 
         // Icon
-        .icon {
+        :global(.icon) {
             display: flex;
             align-items: center;
             justify-content: center;
@@ -173,7 +173,7 @@
             background: $color-cream;
             border-radius: 100%;
 
-            svg {
+            :global(svg) {
                 display: block;
                 width: auto;
                 height: 50%;
@@ -200,20 +200,6 @@
         transform: translate3d(0, -8px, 0);
     }
 
-
-    // Updating state
-    &.is-updating {
-        .cart-item {
-            opacity: 0.1;
-            pointer-events: none;
-            user-select: none;
-        }
-        .cart__update {
-            opacity: 1;
-            transform: translate3d(0,0,0);
-        }
-    }
-
     // Location switcher
     &-switcher {
         position: fixed;
@@ -240,3 +226,16 @@
         cursor: w-resize;
     }
 }
+
+// Updating state
+:global(.is-updating) {
+    :global(.cart-item) {
+        opacity: 0.1;
+        pointer-events: none;
+        user-select: none;
+    }
+    :global(.cart__update) {
+        opacity: 1;
+        transform: translate3d(0,0,0);
+    }
+}

src/style/organisms/_collage.scss

@@ -12,7 +12,7 @@
         height: clamp(400px, 40vw, 800px);
     }
 
-    .photo-card {
+    :global(.photo-card) {
         --rotation: 0deg;
         position: relative;
         display: block;
@@ -189,20 +189,19 @@
         &:hover {
             z-index: 13;
         }
+    }
 
     // Not hovered
-        &.is-hovered {
+    :global(.is-hovered) {
-            img {
+        :global(img) {
             opacity: 1.0 !important;
         }
     }
-    }
 
     // Mouse over collage
     &.is-hovering {
-        .photo-card img {
+        :global(.photo-card img) {
             opacity: 0.5;
         }
     }
-
 }

src/style/organisms/_footer.scss

@@ -9,7 +9,7 @@
         height: 120px;
     }
 
-    .container {
+    :global(.container) {
         justify-content: center;
         height: 100%;
 
@@ -31,14 +31,14 @@
             margin: auto 0;
         }
 
-        .site-title {
+        :global(.site-title) {
             line-height: 1;
+        }
 
         // Hover
         &:hover {
-                strong, span {
+            :global(strong), :global(span) {
-                    color: #fff;
+                color: #fff !important;
-                }
             }
         }
     }
@@ -100,10 +100,7 @@
 
         // Instagram link
         .instagram {
-            &__text {
+            :global(svg) {
-                position: relative;
-            }
-            svg {
                 width: 1.2em;
                 height: auto;
                 transition: color 0.35s;

src/style/organisms/_locations.scss

@@ -83,7 +83,8 @@
                 margin-bottom: 24px;
             }
             @include bp (sd) {
-                margin: 0 22px 56px;
+                margin-left: 22px;
+                margin-right: 22px;
             }
         }
     }

src/style/organisms/_newsletter.scss

@@ -36,17 +36,15 @@
         }
 
         // Form
-        .past-issues {
+        :global(.past-issues:hover) {
-            &:hover {
+            color: $color-secondary;
-                &, span {
+
+            :global(span) {
                 color: $color-secondary;
-                }
-                span {
                 border-color: $color-secondary;
             }
         }
     }
-    }
 
 
     /*
@@ -56,15 +54,19 @@
     &--default {
         background: $color-tertiary 50% 0 / cover url(#{$dir-img}/newsletter-beige.jpg) no-repeat;
 
-        .newsletter-form__email {
+        :global(.newsletter-form__email) {
             background: $color-tertiary;
+
+            :global(input::placeholder) {
+                color: $color-gray;
+            }
         }
      }
     // Light
     &--light {
         background: $color-cream 50% 0 / cover url(#{$dir-img}/newsletter-cream.jpg) no-repeat;
 
-        .newsletter-form__email {
+        :global(.newsletter-form__email) {
             background: $color-cream;
         }
     }

src/style/organisms/_postcard.scss

@@ -59,7 +59,7 @@
         top: 0;
         right: 0;
 
-        img {
+        :global(img) {
             display: block;
             width: 100%;
             height: auto;
@@ -68,7 +68,7 @@
         .frame {
             width: 32px;
         }
-        .flag {
+        :global(.flag) {
             position: absolute;
             top: 10px;
             left: -8px;
@@ -79,7 +79,7 @@
             border-radius: 100%;
             overflow: hidden;
 
-            img {
+            :global(img) {
                 height: 100%;
                 object-fit: contain;
             }
@@ -154,7 +154,7 @@
             &__right {
                 position: static;
 
-                .flag {
+                :global(.flag) {
                     width: 18px;
                     height: 18px;
                 }

src/style/organisms/_shop.scss

@@ -21,8 +21,9 @@
     &__images {
         position: relative;
         overflow: hidden;
+        min-height: 256px;
 
-        picture {
+        :global(picture) {
             position: absolute;
             top: 0;
             left: 0;
@@ -31,16 +32,17 @@
             opacity: 0;
             transform: scale3d(1.075, 1.075, 1.075);
             transition: opacity 0.8s, transform 1.6s var(--ease-quart);
+        }
 
-            &.is-visible {
+        :global(.is-visible) {
             opacity: 1;
             transform: scale3d(1,1,1);
         }
-        }
+
-        img {
+        :global(img) {
             display: block;
             width: 100%;
-            height: 216px;
+            height: 100%;
             object-fit: cover;
 
             @include bp (sm) {
@@ -65,7 +67,7 @@
             padding: clamp(40px, 4.5vw, 64px) clamp(48px, 4.5vw, 72px) clamp(24px, 4.5vw, 40px) clamp(40px, 4.5vw, 64px);
         }
 
-        .button {
+        :global(.button) {
             margin-right: auto;
         }
     }

src/style/pages/_credits.scss

@@ -1,7 +1,5 @@
 // Credits Page
 .credits {
-    // padding: 160px 0;
-
     // Intro Section
     &__heading {
         margin: 56px 0 72px;
@@ -115,7 +113,7 @@
                 display: inline-block;
                 line-height: 1.7;
 
-                picture {
+                :global(picture) {
                     display: inline-block;
                     width: 12px;
                     height: 12px;
@@ -124,7 +122,7 @@
                     vertical-align: middle;
                     border-radius: 100%;
 
-                    img {
+                    :global(img) {
                         display: block;
                         width: 100%;
                         height: 100%;
@@ -143,13 +141,15 @@
             }
         }
     }
+}
 
+:global(.credits) {
     // Globe
-    .globe {
+    :global(.globe) {
-        * {
+        :global(*) {
             pointer-events: none;
         }
-        canvas {
+        :global(canvas) {
             opacity: 0.5;
         }
     }

src/style/pages/_explore.scss

@@ -1,53 +1,3 @@
 // Explore Page
-.explore {
+// .explore {
-    // Intro Section
+// }
-    &__intro {
-        overflow: hidden;
-        color: $color-tertiary;
-        text-align: center;
-
-        // Title
-        h1 {
-            color: $color-secondary;
-            line-height: 1;
-            margin-top: 56px;
-
-            @include bp (sm) {
-                margin-top: 160px;
-            }
-        }
-        // Text
-        p {
-            max-width: 260px;
-            margin: 40px auto 0;
-            font-weight: 200;
-
-            @include bp (sm) {
-                margin: 72px auto 128px;
-                max-width: 500px;
-            }
-        }
-    }
-    .globe {
-        margin-top: 72px;
-    }
-
-    // Locations
-    &__locations {
-        .browse {
-            margin-bottom: 0;
-        }
-    }
-
-    // Modules
-    .grid-modules {
-        grid-column: span var(--columns);
-        margin: 96px 20px 0;
-        padding-bottom: 40px;
-
-        @include bp (sm) {
-            grid-column: 2 / span 22;
-            margin: 200px 0 72px;
-        }
-    }
-}

src/style/pages/_homepage.scss

@@ -1,43 +1,5 @@
 // Homepage
 .homepage {
-    // Site title
-    &__title {
-        // Houses
-        &--houses {
-            display: inline-flex;
-            margin: -28px 0 0;
-            color: $color-secondary;
-            text-align: center;
-
-            @include bp (sm) {
-                margin-top: calc(-1 * clamp(24px, 5vw, 104px));
-            }
-
-            .text-split {
-                margin-left: calc(-1 * clamp(24px, 5vw, 64px));
-            }
-            span {
-                transition: none;
-                letter-spacing: -0.06em;
-            }
-        }
-        // World
-        &--world {
-            min-width: 100%;
-            display: inline-flex;
-            color: $color-primary-tertiary20;
-            text-align: center;
-
-            @include bp (sm) {
-                margin-top: calc(-1 * clamp(120px, 10vw, 216px));
-            }
-
-            span:first-child {
-                margin-right: -0.075em;
-            }
-        }
-    }
-
     // Intro Section
     &__intro {
         overflow: hidden;
@@ -50,8 +12,28 @@
             padding-bottom: calc(280px + 10vw);
         }
 
+        // Title
+        :global(.title-houses) {
+            display: inline-flex;
+            margin: -28px 0 0;
+            color: $color-secondary;
+            text-align: center;
+
+            @include bp (sm) {
+                margin-top: calc(-1 * clamp(24px, 5vw, 104px));
+            }
+
+            :global(.text-split) {
+                margin-left: calc(-1 * clamp(24px, 5vw, 64px));
+            }
+            :global(span) {
+                transition: none;
+                letter-spacing: -0.06em;
+            }
+        }
+
         // Button
-        .button {
+        :global(.button) {
             $color-shadow: rgba($color-shadow-brown, 0.05);
             box-shadow:
                 0 1px 1px $color-shadow,
@@ -60,12 +42,12 @@
                 0 16px 16px $color-shadow;
             margin-bottom: 40px;
 
-            svg {
+            :global(svg) {
                 width: 24px;
                 height: 24px;
                 color: $color-gray;
             }
-            .text-split__line {
+            :global(.text-split__line) {
                 &:last-child {
                     color: #fff;
                 }
@@ -117,18 +99,34 @@
         }
 
         // List
-        .list-cta {
+        :global(.list-cta) {
             margin-top: 48px;
 
             @include bp (sm) {
                 margin-top: 72px;
             }
         }
+
+        li {
+            display: block;
+        }
     }
 
     // World title
-    .title-world {
+    &__locations {
-        color: rgba($color-tertiary, 0.3);
+        :global(.title-world) {
-        margin-top: -60px;
+            min-width: 100%;
+            display: inline-flex;
+            color: $color-primary-tertiary20;
+            text-align: center;
+
+            @include bp (sm) {
+                margin-top: calc(-1 * clamp(120px, 10vw, 216px));
+            }
+
+            :global(span:first-child) {
+                margin-right: -0.075em;
+            }
+        }
     }
 }

src/style/pages/_location.scss

@@ -1,298 +1,234 @@
 // Location Page
-.location-page {
+:global(.location-page) {
     background: #fff;
 
-    // Intro
+    // // Intro
-    &__intro {
+    // &__intro {
-        position: relative;
+    //     position: relative;
-        background: $color-primary;
+    //     background: $color-primary;
 
-        @include bp (sm) {
+    //     @include bp (sm) {
-            padding-top: clamp(40px, 14vw, 320px);
+    //         padding-top: clamp(40px, 14vw, 320px);
-        }
+    //     }
-        @include bp (lg) {
+    //     @include bp (lg) {
-            padding-top: clamp(40px, 18vw, 320px);
+    //         padding-top: clamp(40px, 18vw, 320px);
-        }
+    //     }
 
-        // Houses Of Title
+    //     // Houses Of Title
-        .title {
+    //     .title {
-            position: relative;
+    //         position: relative;
-            z-index: 2;
+    //         z-index: 2;
-            grid-column: 1 / span var(--columns);
+    //         grid-column: 1 / span var(--columns);
-            margin: 0 auto;
+    //         margin: 0 auto;
-            padding: 0 32px;
+    //         padding: 0 32px;
-            font-family: $font-serif;
+    //         font-family: $font-serif;
-            line-height: 1;
+    //         line-height: 1;
-            text-transform: uppercase;
+    //         text-transform: uppercase;
-            color: $color-lightpurple;
+    //         color: $color-lightpurple;
-            font-size: clamp(48px, 12vw, 160px);
+    //         font-size: clamp(48px, 12vw, 160px);
-            text-align: center;
+    //         text-align: center;
-            margin: min(360px, 60vw) auto;
+    //         margin: min(360px, 60vw) auto;
 
-            @include bp (sm) {
+    //         @include bp (sm) {
-                display: flex;
+    //             display: flex;
-                flex-flow: row wrap;
+    //             flex-flow: row wrap;
-                align-items: baseline;
+    //             align-items: baseline;
-                justify-content: center;
+    //             justify-content: center;
-                max-width: clamp(300px, 80vw, 1120px);
+    //             max-width: clamp(300px, 80vw, 1120px);
-                margin: 0 auto;
+    //             margin: 0 auto;
-                padding: 0;
+    //             padding: 0;
-            }
+    //         }
 
-            strong {
+    //         strong {
-                display: block;
+    //             display: block;
-                color: $color-secondary;
+    //             color: $color-secondary;
-                font-weight: 300;
+    //             font-weight: 300;
-                text-transform: none;
+    //             text-transform: none;
-            }
+    //         }
 
-            .housesof {
+    //         .housesof {
-                grid-column: span var(--columns);
+    //             grid-column: span var(--columns);
 
-                @include bp (sm) {
+    //             @include bp (sm) {
-                    display: flex;
+    //                 display: flex;
-                    align-items: baseline;
+    //                 align-items: baseline;
-                    // margin-right: auto;
+    //                 // margin-right: auto;
-                    // margin-left: -15vw;
+    //                 // margin-left: -15vw;
-                }
+    //             }
 
-                span {
+    //             span {
-                    display: block;
+    //                 display: block;
-                    font-size: 0.35em;
+    //                 font-size: 0.35em;
-                    margin-top: 8px;
+    //                 margin-top: 8px;
 
-                    @include bp (sm) {
+    //                 @include bp (sm) {
-                        display: inline;
+    //                     display: inline;
-                        margin: 0 24px;
+    //                     margin: 0 24px;
-                    }
+    //                 }
-                }
+    //             }
-            }
+    //         }
-            .city {
+    //         .city {
-                text-align: center;
+    //             text-align: center;
 
-                @include bp (sm) {
+    //             @include bp (sm) {
-                    // margin-left: 15vw;
+    //                 // margin-left: 15vw;
-                    // width: 80%;
+    //                 // width: 80%;
-                    // padding-left: min(400px, 16vw);
+    //                 // padding-left: min(400px, 16vw);
-                }
+    //             }
-            }
+    //         }
-        }
+    //     }
-    }
+    // }
 
-    // Description
+    // // Description
-    &__description {
+    // &__description {
-        grid-column: span var(--columns);
+    //     grid-column: span var(--columns);
-        position: relative;
+    //     position: relative;
-        z-index: 2;
+    //     z-index: 2;
-        margin-bottom: -8px;
+    //     margin-bottom: -8px;
-        background-color: $color-tertiary;
+    //     background-color: $color-tertiary;
-        color: $color-text;
+    //     color: $color-text;
-        border-radius: 8px;
+    //     border-radius: 8px;
 
-        @include bp (sm) {
+    //     @include bp (sm) {
-            --columns: 19;
+    //         --columns: 19;
-            grid-column: 4 / span 21;
+    //         grid-column: 4 / span 21;
-            margin: clamp(40px, 14vw, 200px) 0 calc(-1 * clamp(60px, 6vw, 120px));
+    //         margin: clamp(40px, 14vw, 200px) 0 calc(-1 * clamp(60px, 6vw, 120px));
-            border-radius: 8px 0 0 8px;
+    //         border-radius: 8px 0 0 8px;
-        }
+    //     }
-        @include bp (md) {
+    //     @include bp (md) {
-            grid-column: 6 / span 19;
+    //         grid-column: 6 / span 19;
-        }
+    //     }
 
-        .wrap {
+    //     .wrap {
-            grid-column: 2 / span 6;
+    //         grid-column: 2 / span 6;
-            max-width: 800px;
+    //         max-width: 800px;
-            padding: 50px 0;
+    //         padding: 50px 0;
 
-            @include bp (sm) {
+    //         @include bp (sm) {
-                grid-column: 3 / span 13;
+    //             grid-column: 3 / span 13;
-                padding: 72px 0;
+    //             padding: 72px 0;
-            }
+    //         }
-            @include bp (md) {
+    //         @include bp (md) {
-                padding: 128px 0;
+    //             padding: 128px 0;
-            }
+    //         }
-        }
+    //     }
 
-        .info {
+    //     .info {
-            $text-color: rgba($color-text, 0.5);
+    //         $text-color: rgba($color-text, 0.5);
-            margin: 32px 0 40px;
+    //         margin: 32px 0 40px;
-            color: $text-color;
+    //         color: $text-color;
-            line-height: 0.8;
+    //         line-height: 0.8;
 
-            @include bp (sm) {
+    //         @include bp (sm) {
-                margin: 40px 0 64px;
+    //             margin: 40px 0 64px;
-                line-height: 1.3;
+    //             line-height: 1.3;
-            }
+    //         }
 
-            a {
+    //         a {
-                color: $text-color;
+    //             color: $text-color;
 
-                &:hover {
+    //             &:hover {
-                    color: $color-secondary;
+    //                 color: $color-secondary;
-                }
+    //             }
-            }
+    //         }
 
-            & > * {
+    //         & > * {
-                display: inline-block;
+    //             display: inline-block;
-                vertical-align: middle;
+    //             vertical-align: middle;
-            }
+    //         }
-        }
+    //     }
-        .ctas {
+    //     .ctas {
-            display: flex;
+    //         display: flex;
-            flex-wrap: wrap;
+    //         flex-wrap: wrap;
 
-            .button {
+    //         .button {
-                margin-right: 16px;
+    //             margin-right: 16px;
-                margin-bottom: 16px;
+    //             margin-bottom: 16px;
 
-                @include bp (sm) {
+    //             @include bp (sm) {
-                    margin-bottom: 0;
+    //                 margin-bottom: 0;
-                }
+    //             }
-            }
+    //         }
-        }
+    //     }
-    }
+    // }
 
-    // Illustration
+    // // Illustration
-    &__illustration {
+    // &__illustration {
-        pointer-events: none;
+    //     pointer-events: none;
-        position: absolute;
+    //     position: absolute;
-        z-index: 1;
+    //     z-index: 1;
-        top: 0;
+    //     top: 0;
-        left: 0;
+    //     left: 0;
-        right: 0;
+    //     right: 0;
-        width: clamp(320px, 100vw, 2560px);
+    //     width: clamp(320px, 100vw, 2560px);
-        height: 100%;
+    //     height: 100%;
-        margin: 0 auto;
+    //     margin: 0 auto;
-        overflow: hidden;
+    //     overflow: hidden;
-        transform-origin: top center;
+    //     transform-origin: top center;
 
-        /* Bottom fading gradient for illustration */
+    //     /* Bottom fading gradient for illustration */
-        @include bp (sm) {
+    //     @include bp (sm) {
-            $mask: linear-gradient(180deg,rgba(0,0,0) 0%,rgb(0,0,0) 70%,rgba(0,0,0,0) 100%);
+    //         $mask: linear-gradient(180deg,rgba(0,0,0) 0%,rgb(0,0,0) 70%,rgba(0,0,0,0) 100%);
-            -webkit-mask-image: $mask;
+    //         -webkit-mask-image: $mask;
-            mask-image: $mask;
+    //         mask-image: $mask;
-        }
+    //     }
 
-        img {
+    //     img {
-            display: block;
+    //         display: block;
-            width: 100%;
+    //         width: 100%;
-            height: auto;
+    //         height: auto;
-            object-fit: contain;
+    //         object-fit: contain;
-            pointer-events: none;
+    //         pointer-events: none;
-            user-select: none;
+    //         user-select: none;
-            transform: translate3d(0, var(--parallax-y), 0);
+    //         transform: translate3d(0, var(--parallax-y), 0);
-            transition: transform 0.7s var(--ease-quart);
+    //         transition: transform 0.7s var(--ease-quart);
-            will-change: transform, opacity;
+    //         will-change: transform, opacity;
-        }
+    //     }
-    }
+    // }
 
-    // Houses
+    // // Houses
-    &__houses {
+    // &__houses {
-        background-color: #fff;
+    //     background-color: #fff;
-        padding-top: 80px;
+    //     padding-top: 80px;
 
-        @include bp (sm) {
+    //     @include bp (sm) {
-            padding-top: 240px;
+    //         padding-top: 240px;
-        }
+    //     }
-    }
 
-    // House
+    //     // House
-    .house {
+    //     :global(.house:not(:last-child)) {
-        &:not(:last-child) {
+    //         margin-bottom: 72px;
-            margin-bottom: 72px;
 
-            @include bp (sm) {
+    //         @include bp (sm) {
-                margin-bottom: 88px;
+    //             margin-bottom: 88px;
-            }
+    //         }
-            @include bp (md) {
+    //         @include bp (md) {
-                margin-bottom: 120px;
+    //             margin-bottom: 120px;
-            }
+    //         }
-        }
+    //     }
-    }
+    // }
 
-    // Next photos section
+    // // Next photos section
-    &__next {
+    // &__next {
-        margin-top: 135px;
+    //     margin-top: 135px;
-        padding: 72px 0 56px;
+    //     padding: 72px 0 56px;
-        background-color: $color-tertiary;
+    //     background-color: $color-tertiary;
-        text-align: center;
+    //     text-align: center;
 
-        @include bp (sm) {
+    //     @include bp (sm) {
-            margin-top: calc(-1 * clamp(64px, 8vw, 120px));
+    //         margin-top: calc(-1 * clamp(64px, 8vw, 120px));
-            padding-top: 240px;
+    //         padding-top: 240px;
-            padding-bottom: 104px;
+    //         padding-bottom: 104px;
-        }
+    //     }
 
-        // Newsletter block
+    //     // Newsletter block
-        .newsletter {
+    //     :global(.newsletter) {
-            max-width: 600px;
+    //         max-width: 600px;
-            margin: 56px auto 0;
+    //         margin: 56px auto 0;
 
-            @include bp (sm) {
+    //         @include bp (sm) {
-                margin-top: 72px;
+    //             margin-top: 72px;
-            }
+    //         }
-        }
+    //     }
-    }
+    // }
-
-        // Pagination
-        .pagination {
-            position: relative;
-            display: block;
-            margin: auto 0;
-            cursor: pointer;
-
-            &__progress {
-                position: relative;
-                display: inline-block;
-                font-size: rem(88px);
-                color: rgba($color-text, 0.2);
-                font-family: $font-serif;
-                font-weight: 200;
-                line-height: 1;
-                letter-spacing: -0.05em;
-                transition: color 0.5s;
-
-                @include bp (sm) {
-                    font-size: clamp(80px, 16vw, #{rem(160px)});
-                }
-
-                span {
-                    display: inline-block;
-                    margin: 0 -10px;
-                }
-
-                // Hover
-                &:hover {
-                    color: rgba($color-text, 0.4);
-                }
-            }
-            p {
-                display: block;
-                margin: 16px auto 0;
-                text-align: center;
-                font-family: $font-sans;
-                text-transform: uppercase;
-                color: $color-text;
-                letter-spacing: 0.1em;
-                font-weight: 400;
-                font-size: rem(14px);
-            }
-            &__more {
-                color: $color-secondary !important;
-            }
-        }
-
-    // Message
-    &__message {
-        padding: clamp(96px, 24vw, 360px) 0 clamp(96px, 16vw, 280px);
-        text-align: center;
-        color: $color-text;
-        font-size: rem(24px);
-        font-weight: 200;
-        line-height: 1.4;
-
-        @include bp (sm) {
-            font-size: rem(28px);
-        }
-    }
 }

src/style/pages/_photos.scss

@@ -1,5 +1,5 @@
 // Photos Page
-.photos {
+.photos-page {
     // Intro Section
     &__intro {
         margin-bottom: clamp(32px, 7.5vw, 96px);
@@ -7,7 +7,7 @@
         text-align: center;
 
         // Title
-        h1 {
+        :global(h1) {
             margin: -20px 0 48px;
             color: $color-secondary;
             line-height: 1;
@@ -17,7 +17,7 @@
             }
         }
         // Text
-        p {
+        & > :global(p) {
             max-width: 456px;
             margin: 20px auto 56px;
 
@@ -35,219 +35,11 @@
         }
     }
 
-    // Filter
-    .filter {
-        position: relative;
-        max-width: 982px;
-        margin: 0 auto;
-        padding: 0 16px;
-
-        @include bp (sm) {
-            padding: 0 32px;
-        }
-
-        // Span
-        &__label {
-            display: block;
-            color: rgba($color-tertiary, 0.7);
-
-            @include bp (sm) {
-                position: absolute;
-                left: 64px;
-                top: 52%;
-                transform: translateY(-50%);
-                margin-bottom: 0;
-            }
-        }
-
-        &__bar {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 64px;
-            margin-top: 20px;
-            padding: 0 12px;
-            background: $color-primary-darker;
-            border-radius: 50vh;
-
-            @include bp (mob-lg) {
-                padding: 0 16px;
-            }
-            @include bp (sm) {
-                height: 72px;
-                margin-top: 0;
-                padding: 28px 32px;
-            }
-
-            ul {
-                display: flex;
-                flex-wrap: wrap;
-                align-items: center;
-                justify-content: center;
-            }
-            li {
-                display: block;
-                margin: 8px 2px;
-                font-size: rem(14px);
-                color: #fff;
-
-                @include bp (sm) {
-                    margin: 0 2px;
-                    font-size: rem(16px);
-                }
-            }
-            .icon {
-                display: block;
-                width: 20px;
-                height: 20px;
-                overflow: hidden;
-                margin-right: 12px;
-                color: #fff;
-                border-radius: 100%;
-                transition: color 0.3s;
-
-                @include bp (sm) {
-                    width: 26px;
-                    height: 26px;
-                }
-
-                img {
-                    display: block;
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-
-            .select {
-                position: relative;
-                display: flex;
-                align-items: center;
-                padding: 8px 12px 8px 8px;
-                font-weight: 900;
-                border-radius: 100vh;
-                transition: background-color 0.2s;
-
-                @include bp (sm) {
-                    padding: 8px 16px;
-                }
-
-                select {
-                    opacity: 0;
-                    position: absolute;
-                    top: 0;
-                    left: 8px;
-                    width: 100%;
-                    height: 100%;
-                    cursor: pointer;
-                }
-            }
-
-            // Hover
-            li:hover {
-                .icon {
-                    color: $color-secondary-light;
-                }
-                .select {
-                    background-color: $color-primary-tertiary20;
-                }
-            }
-        }
-
-        // Actions
-        &__actions {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-top: 20px;
-
-            @include bp (sm) {
-                position: absolute;
-                top: 50%;
-                right: 56px;
-                transform: translateY(-50%);
-                margin-top: 0;
-            }
-
-            a {
-                display: block;
-                text-decoration: none;
-                color: rgba(#fff, 0.6);
-                font-size: rem(14px);
-                font-weight: 900;
-                line-height: 1;
-
-                img {
-                    display: block;
-                }
-            }
-
-            // Reset link
-            .reset {
-                margin-right: 16px;
-                padding: 0;
-                color: rgba($color-tertiary, 0.6);
-                font-weight: 900;
-                font-size: rem(14px);
-                transition: color 0.3s;
-
-                &:hover {
-                    color: $color-tertiary;
-                }
-            }
-
-            // Shuffle button
-            .shuffle {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                height: 32px;
-                background-color: $color-tertiary;
-                padding: 0 16px;
-                border-radius: 50vh;
-            }
-        }
-
-
-        /*
-        ** States
-        */
-        // Fixed when scrolled pass intro
-        &.is-over {
-            --top: 24px;
-            transform: translate3d(0, calc(-100% - var(--top)), 0);
-            pointer-events: none;
-
-            .filter__bar {
-                pointer-events: auto;
-                box-shadow: 0 10px 20px rgba(#000, 0.1);
-            }
-
-            @include bp (sm) {
-                position: fixed;
-                z-index: 10;
-                top: var(--top);
-                left: 0;
-                right: 0;
-            }
-        }
-
-        // Visible when scrolling back up
-        &.is-visible {
-            transform: translate3d(0,0,0);
-            pointer-events: auto;
-        }
-
-        // Apply transition
-        &.is-transitioning {
-            transition: transform 1.0s var(--ease-quart);
-        }
-    }
-
     // Content Block
     &__content {
         --corners: 8px;
         position: relative;
-        padding: 20px 0;
+        padding: 20px;
         background-color: $color-tertiary;
 
         @include bp (sm) {
@@ -286,6 +78,16 @@
                 transform: translate3d(var(--margin-sides), 0, 0);
             }
         }
+
+        // Modules
+        :global(.grid-modules) {
+            grid-column: span var(--columns);
+            margin-bottom: 0;
+
+            @include bp (sd) {
+                grid-column: 2 / span 22;
+            }
+        }
     }
 
     // Photo Grid
@@ -310,22 +112,16 @@
         }
 
         // Photo
-        .photo {
+        :global(.photo) {
             position: relative;
             opacity: 0;
             transform: translate3d(0, 96px, 0);
             transition: opacity 1.2s var(--ease-quart), transform 1.2s var(--ease-quart);
 
-            // Hidden state
+            :global(a) {
-            &.is-visible {
-                opacity: 1;
-                transform: translate3d(0,0,0);
-            }
-
-            a {
                 display: block;
             }
-            figcaption {
+            :global(figcaption) {
                 position: absolute;
                 top: 0;
                 left: 0;
@@ -397,9 +193,19 @@
                 }
             }
 
+            // Show postcard on hover
+            &:hover {
+                :global(.postcard) {
+                    opacity: 1;
+                    transform: translate3d(3%, 3%, 0) rotate(2deg);
+                }
+                :global(.postcard--small) {
+                    transform: translate3d(0,0,0);
+                }
+            }
 
             // Postcard
-            .postcard {
+            :global(.postcard) {
                 position: absolute;
                 bottom: 0;
                 right: 0;
@@ -408,27 +214,19 @@
                 opacity: 0;
                 transform: translate3d(6%, 12%, 0) rotate(-1deg);
                 transition: opacity 0.5s var(--ease-quart), transform 0.9s var(--ease-quart);
-
+            }
-                &--small {
+            :global(.postcard--small) {
                 border-radius: 6px 6px 0 0;
                 transform: translate3d(6%, 12%, 0) rotate(-3deg);
             }
         }
 
-            // Show postcard on hover
+        // Visible photo state
-            &:hover {
+        :global(.is-visible) {
-                .postcard {
             opacity: 1;
-                    transform: translate3d(3%, 3%, 0) rotate(2deg);
-
-                    &--small {
             transform: translate3d(0,0,0);
         }
     }
-            }
-        }
-    }
-
 
     // Message
     &__message {
@@ -441,12 +239,212 @@
             grid-column: 3 / span 20;
         }
     }
+}
 
 
-    /**
+/*
-     * Controls
+** Filters
+*/
+.filters {
+    position: relative;
+    max-width: 982px;
+    margin: 0 auto;
+    padding: 0 16px;
+
+    @include bp (sm) {
+        padding: 0 32px;
+    }
+
+    // Bar
+    &__bar {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 64px;
+        margin-top: 20px;
+        padding: 0 12px;
+        background: $color-primary-darker;
+        border-radius: 50vh;
+
+        @include bp (mob-lg) {
+            padding: 0 16px;
+        }
+        @include bp (sm) {
+            height: 72px;
+            margin-top: 0;
+            padding: 28px 32px;
+        }
+
+        ul {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+        }
+        li {
+            display: block;
+            margin: 8px 2px;
+            font-size: rem(14px);
+            color: #fff;
+
+            @include bp (sm) {
+                margin: 0 2px;
+                font-size: rem(16px);
+            }
+        }
+        :global(.icon) {
+            display: block;
+            width: 20px;
+            height: 20px;
+            overflow: hidden;
+            margin-right: 12px;
+            color: #fff;
+            border-radius: 100%;
+            transition: color 0.3s;
+
+            @include bp (sm) {
+                width: 26px;
+                height: 26px;
+            }
+
+            :global(img) {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        :global(.select) {
+            position: relative;
+            display: flex;
+            align-items: center;
+            padding: 8px 12px 8px 8px;
+            font-weight: 900;
+            border-radius: 100vh;
+            transition: background-color 0.2s;
+
+            @include bp (sm) {
+                padding: 8px 16px;
+            }
+
+            :global(select) {
+                opacity: 0;
+                position: absolute;
+                top: 0;
+                left: 8px;
+                width: 100%;
+                height: 100%;
+                cursor: pointer;
+            }
+        }
+
+        // Hover
+        li:hover {
+            :global(.icon) {
+                color: $color-secondary-light;
+            }
+            :global(.select) {
+                background-color: $color-primary-tertiary20;
+            }
+        }
+    }
+
+    // Span
+    &__label {
+        display: block;
+        color: rgba($color-tertiary, 0.7);
+
+        @include bp (sm) {
+            position: absolute;
+            left: 64px;
+            top: 52%;
+            transform: translateY(-50%);
+            margin-bottom: 0;
+        }
+    }
+
+    // Actions
+    &__actions {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 20px;
+
+        @include bp (sm) {
+            position: absolute;
+            top: 50%;
+            right: 56px;
+            transform: translateY(-50%);
+            margin-top: 0;
+        }
+
+        // Reset link
+        .reset {
+            margin-right: 16px;
+            padding: 0;
+            color: rgba($color-tertiary, 0.6);
+            font-weight: 900;
+            font-size: rem(14px);
+            transition: color 0.3s;
+
+            &:hover {
+                color: $color-tertiary;
+            }
+        }
+
+        // Shuffle button
+        // .shuffle {
+        //     display: flex;
+        //     align-items: center;
+        //     justify-content: center;
+        //     height: 32px;
+        //     background-color: $color-tertiary;
+        //     padding: 0 16px;
+        //     border-radius: 50vh;
+        // }
+    }
+
+
+    /*
+    ** States
     */
-    .controls {
+    // Fixed when scrolled pass intro
+    &.is-over {
+        --top: 24px;
+        transform: translate3d(0, calc(-100% - var(--top)), 0);
+        pointer-events: none;
+
+        .filters__bar {
+            pointer-events: auto;
+            box-shadow: 0 10px 20px rgba(#000, 0.1);
+        }
+
+        @include bp (sm) {
+            position: fixed;
+            z-index: 10;
+            top: var(--top);
+            left: 0;
+            right: 0;
+        }
+    }
+
+    // Visible when scrolling back up
+    &.is-visible {
+        transform: translate3d(0,0,0);
+        pointer-events: auto;
+    }
+
+    // Apply transition
+    &.is-transitioning {
+        transition: transform 1.0s var(--ease-quart);
+    }
+}
+
+
+/**
+* Controls
+*/
+.controls {
     grid-column: span var(--columns);
     display: grid;
     margin: 48px auto;
@@ -490,7 +488,7 @@
     }
 
     // See More Photos
-        .button {
+    :global(.button) {
         grid-column: span var(--columns);
         grid-row: 1;
         margin: 0 auto;
@@ -534,15 +532,4 @@
             }
         }
     }
-    }
-
-    // Modules
-    .grid-modules {
-        grid-column: span var(--columns);
-        margin-bottom: 0;
-
-        @include bp (sd) {
-            grid-column: 2 / span 22;
-        }
-    }
 }

src/style/pages/_shop.scss

@@ -1,13 +1,9 @@
-.shop-page {
+:global(.shop-page) {
     position: relative;
+}
 
-    // Sections
+// Nav
-    @import "shop/intro";
+:global(.shop-location) {
-    @import "shop/posters";
-
-
-    // Nav
-    .shop-location {
     --inset: 20px;
     display: flex;
     position: fixed;
@@ -24,15 +20,15 @@
     @include bp (sm) {
         --inset: 32px;
     }
-
+}
     // Visible state
-        &.is-visible {
+    :global(.shop-location.is-visible) {
         transform: translate3d(0,0,0);
     }
-    }
 
-    // Error
+
-    &__error {
+// Error
+:global(.shop-page__error) {
     padding: 64px 0;
     background: $color-cream;
     color: $color-text;
@@ -43,14 +39,14 @@
         text-align: left;
     }
 
-        .inner {
+    :global(.inner) {
         grid-column: 1 / span 8;
 
         @include bp (sm) {
             grid-column: 3 / span 12;
         }
     }
-        h2 {
+    :global(h2) {
         margin-bottom: 8px;
         color: $color-secondary;
 
@@ -58,29 +54,10 @@
             margin-bottom: 16px;
         }
     }
-    }
-}
-
-// Cart
-.cart {
-    position: fixed;
-    z-index: 101;
-    top: 72px;
-    right: 0;
-    width: 100%;
-    height: calc(100vh - 72px);
-
-    @include bp (sm) {
-        top: 24px;
-        right: 24px;
-        width: clamp(320px, 45vw, 500px);
-        height: calc(100vh - 48px);
-        max-height: 1000px;
-    }
 }
 
 // Notifications
-.notifications {
+:global(.notifications) {
     position: fixed;
     z-index: 100;
     top: 104px;
@@ -92,7 +69,7 @@
         right: 32px;
     }
 
-    & > * {
+    & > :global(*) {
         &:not(:last-child) {
             margin-bottom: 8px;
         }

src/style/pages/_subscribe.scss

@@ -1,19 +1,8 @@
 // Subscribe Page
 .subscribe {
-    // Modules
+    &__top {
-    .grid-modules {
-        grid-column: span var(--columns);
-        margin: 96px 20px 0;
-        padding-bottom: 40px;
-
-        @include bp (sm) {
-            grid-column: 2 / span 22;
-            margin: 200px 0 72px;
-        }
-    }
-
         // Email Form
-    .newsletter-form {
+        :global(.newsletter-form) {
             margin: 42px auto 70px;
             padding: 0 20px;
             max-width: max(432px, 70%);
@@ -23,18 +12,14 @@
                 margin-top: 0;
                 margin-bottom: 120px;
             }
-
+        }
-        &__email {
+        :global(.newsletter-form__email) {
-            input {
+            :global(input) {
                 color: #fff;
-
-                &::placeholder {
-                    color: rgba($color-tertiary, 0.6);
             }
         }
-        }
+        :global(.newsletter-form__bottom) {
-        &__bottom {
+            :global(p) {
-            p {
                 color: rgba($color-tertiary, 0.6);
             }
         }
@@ -74,12 +59,17 @@
             }
         }
     }
+}
 
-    .globe--cropped {
+// Globe
+:global(.globe--cropped) {
     margin-top: 96px;
 
     @include bp (sm) {
         margin-top: 156px;
     }
-    }
 }
+
+
+// Issue
+@import "../molecules/issue";

src/style/pages/_viewer.scss

@@ -1,5 +1,6 @@
-.viewer {
+:global(.photo-page) {
     position: relative;
+    width: 100vw;
     height: 100vh;
     display: flex;
     align-items: center;
@@ -7,6 +8,7 @@
 
     .container {
         position: relative;
+        width: 100%;
         height: 100%;
 
         @include bp (md, max) {
@@ -14,6 +16,7 @@
         }
     }
 
+    .photo-page {
         // Carousel
         &__carousel {
             position: absolute;
@@ -75,7 +78,7 @@
                 transform-origin: bottom right;
             }
 
-        .photo {
+            :global(.photo) {
                 position: absolute;
                 top: 0;
                 left: 0;
@@ -89,7 +92,7 @@
                     0 20px 20px rgba(#000, 0.15),
                     0 48px 48px rgba(#000, 0.15);
 
-            picture {
+                :global(picture) {
                     position: absolute;
                     top: 0;
                     left: 0;
@@ -99,7 +102,7 @@
                     background: $color-primary;
                     cursor: default;
                 }
-            img {
+                :global(img) {
                     display: block;
                     width: 100%;
                     height: 100%;
@@ -110,11 +113,12 @@
                     user-select: none;
                     transition: opacity 1s var(--ease-quart);
                 }
-
-            &.not-landscape {
-                img {
-                    object-fit: contain;
             }
+
+            // Ratio is not landscape
+            :global(.not-landscape) {
+                :global(img) {
+                    object-fit: contain;
                 }
             }
 
@@ -127,7 +131,7 @@
                 z-index: 9;
                 pointer-events: none;
 
-            .photo {
+                :global(.photo) {
                     opacity: 0;
                 }
 
@@ -205,12 +209,12 @@
                 --opacity: 0.25;
                 z-index: 3;
 
-            .photo {
+                :global(.photo) {
                     opacity: 0;
                 }
             }
             &.is-7 {
-            .photo {
+                :global(.photo) {
                     opacity: 0;
                 }
             }
@@ -270,7 +274,7 @@
                 }
 
                 // Icon
-            .icon {
+                :global(.icon) {
                     display: inline-block;
                     width: 17px;
                     height: 17px;
@@ -334,21 +338,21 @@
                 pointer-events: none;
             }
 
-        button {
+            :global(button) {
                 pointer-events: auto;
 
                 // Prev button
                 &:first-child {
-                & > *:nth-child(2) {
+                    & > :global(*:nth-child(2)) {
                         transform: translate3d(100%, -50%, 0) rotate(180deg);
                     }
 
                     // Hover
                     &:not([disabled]):hover {
-                    & > *:nth-child(1) {
+                        & > :global(*:nth-child(1)) {
                             transform: translate3d(-20%, 0, 0) rotate(180deg);
                         }
-                    & > *:nth-child(2) {
+                        & > :global(*:nth-child(2)) {
                             transform: translate3d(-50%, -50%, 0) rotate(180deg);
                         }
                     }
@@ -359,7 +363,7 @@
                     background-color: $color-secondary;
                     color: #fff;
 
-                svg:nth-child(2) {
+                    :global(svg:nth-child(2)) {
                         color: #fff;
                     }
                 }
@@ -380,15 +384,17 @@
                 width: 100%;
                 height: 100%;
             }
-        picture {
+
+            // Photo
+            :global(picture) {
                 display: flex;
                 justify-content: center;
                 width: 100%;
                 height: 100%;
                 overflow: auto;
                 cursor: pointer;
-        }
+
-        img {
+                :global(img) {
                     display: block;
                     width: auto;
                     height: 100%;
@@ -396,9 +402,10 @@
                     pointer-events: none;
                     user-select: none;
                 }
+            }
 
-
+            // Close
-        .close {
+            :global(.close) {
                 $color-shadow: rgba(#000, 0.15);
                 position: absolute;
                 z-index: 2;
@@ -424,9 +431,10 @@
                 display: none;
             }
         }
+    }
 
     // Close button
-    &__close {
+    :global(.close) {
         --offset: 16px;
         position: fixed !important;
         z-index: 2;
@@ -437,7 +445,7 @@
             --offset: clamp(20px, 3vw, 40px);
         }
 
-        svg {
+        :global(svg) {
             max-width: 14px;
             max-height: 14px;
 
@@ -449,7 +457,7 @@
 
         // Hover
         &:hover {
-            svg {
+            :global(svg) {
                 transform: rotate3d(0, 0, 1, 90deg) !important;
                 transition-duration: 1.2s;
             }

src/style/pages/shop/_intro.scss

@@ -1,7 +1,7 @@
 /*
 ** Shop: Intro
 */
-&__intro {
+.shop-page__intro {
     position: relative;
     z-index: 30;
     height: 30vw;
@@ -60,7 +60,7 @@
             }
         }
         // Shop
-        .shop-title {
+        :global(.shop-title) {
             font-size: rem(14px);
             color: $color-cream;
 
@@ -71,7 +71,7 @@
     }
 
     // Site Title
-    h1 {
+    :global(h1) {
         position: absolute;
         z-index: 2;
         top: 50%;
@@ -91,16 +91,16 @@
             transform: none;
         }
 
-        span, strong {
+        :global(span), :global(strong) {
             color: #fff;
         }
-        span {
+        :global(span) {
             font-weight: 300;
         }
     }
 
     // Background Image
-    picture {
+    :global(picture) {
         position: relative;
         display: flex;
         align-items: flex-end;
@@ -110,7 +110,7 @@
         pointer-events: none;
         user-select: none;
 
-        img {
+        :global(img) {
             opacity: 0.55;
             display: block;
             width: 100%;
@@ -134,7 +134,7 @@
 }
 
 // Intro: Navigation
-&__nav {
+.shop-page__nav {
     position: absolute;
     z-index: 20;
     bottom: 0;
@@ -208,11 +208,4 @@
             }
         }
     }
-
-    // Cart button
-    .button-cart {
-        @include bp (sm, max) {
-            display: none;
-        }
-    }
 }

src/style/pages/shop/_posters.scss

@@ -1,7 +1,7 @@
 /*
 ** Shop: Posters
 */
-&__posters {
+.shop-page__posters {
     background-color: $color-primary-darker;
     padding: clamp(56px, 10vw, 120px) 20px 72px;
     border-bottom: solid 1px $color-primary-tertiary20 ;
@@ -49,10 +49,6 @@
             cursor: default;
         }
 
-        &.is-dragging {
-            cursor: grabbing;
-        }
-
         &__content {
             display: flex;
             margin: 0 -8px;
@@ -72,8 +68,12 @@
             }
         }
 
+        :global(.is-dragging) {
+            cursor: grabbing;
+        }
+
         // Poster
-        .poster {
+        :global(.poster) {
             position: relative;
             flex: 0 0 100%;
             margin: 0 12px;
@@ -180,21 +180,19 @@
             }
         }
 
-        .newsletter-form {
+        :global(.newsletter-form) {
             padding: 0;
             margin: 0 auto;
 
             @include bp (sm) {
                 margin: 0;
             }
-
+        }
-            &__email {
+        :global(.newsletter-form__email) {
             margin-bottom: 0;
         }
-            &__bottom {
+        :global(.newsletter-form__bottom) {
             display: none;
         }
     }
-
-    }
 }

src/style/style.scss

@@ -1,79 +0,0 @@
-@charset "UTF-8";
-
-// Dependencies
-@import "sanitize.css/sanitize";
-
-// Tools
-@import "variables";
-@import "tools/mixins";
-@import "tools/functions";
-@import "tools/helpers";
-
-// Base
-@import "base";
-@import "fonts";
-@import "typography";
-@import "effects";
-
-// Layout
-@import "layout/grid";
-@import "layout/modules";
-
-// Pages
-@import "pages/homepage";
-@import "pages/photos";
-@import "pages/explore";
-@import "pages/credits";
-@import "pages/subscribe";
-@import "pages/location";
-@import "pages/viewer";
-@import "pages/shop";
-@import "pages/error";
-
-// Modules
-@import "modules/globe";
-@import "modules/postcard";
-
-
-// Atomic Design System
-// Atoms
-@import "atoms/button";
-@import "atoms/button-circle";
-@import "atoms/button-cart";
-@import "atoms/icon";
-@import "atoms/badge";
-@import "atoms/arrow";
-@import "atoms/discover";
-@import "atoms/box-cta";
-@import "atoms/site-title";
-@import "atoms/scrolling-title";
-@import "atoms/photo";
-
-// Molecules
-@import "molecules/photo-card";
-@import "molecules/location";
-@import "molecules/switcher";
-@import "molecules/heading";
-@import "molecules/list-cta";
-@import "molecules/house";
-@import "molecules/issue";
-@import "molecules/newsletter-form";
-@import "molecules/poster";
-@import "molecules/notification-cart";
-@import "molecules/cart-item";
-@import "molecules/shop-locationswitcher";
-
-// Organisms
-@import "organisms/collage";
-@import "organisms/locations";
-@import "organisms/newsletter";
-@import "organisms/carousel";
-@import "organisms/shop";
-@import "organisms/cart";
-@import "organisms/footer";
-
-// Layouts
-@import "layouts/poster";
-
-// Misc
-@import "animations";

src/style/tools/_helpers.scss

@@ -1,27 +1,14 @@
 /* Classes
 ========================================================================== */
-.clear {
+:global(.clear) {
     @extend %clearfix;
 }
-%center {
-    margin: 0 auto;
-}
-%trbl {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-%full-size {
-    width: 100%;
-    height: 100%;
-}
 
 
 /* Containers
 ========================================================================== */
 // Wrap (global)
-.container {
+:global(.container) {
     width: 100%;
     max-width: var(--container-width);
     margin: 0 auto;
@@ -31,8 +18,3 @@
         padding: 0;
     }
 }
-
-// Wrapper (inside and more spaced)
-.wrapper {
-
-}

svelte.config.js

@@ -1,10 +1,20 @@
 import preprocess from 'svelte-preprocess'
 import adapter from '@sveltejs/adapter-auto'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
+
+const stylePath = `${dirname(fileURLToPath(import.meta.url))}/src/style`
+const scssImports = `@use "${stylePath}/imports.scss" as *;`
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
     // Preprocessors docs: https://github.com/sveltejs/svelte-preprocess
-    preprocess: preprocess(),
+    preprocess: preprocess({
+        scss: {
+            prependData: scssImports,
+            renderSync: true,
+		}
+    }),
 
     kit: {
         adapter: adapter(),
@@ -13,6 +23,16 @@ const config = {
             $animations: 'src/animations',
             $modules: 'src/modules',
             $utils: 'src/utils',
+            $style: 'src/style',
+        },
+        vite: {
+            css: {
+                preprocessorOptions: {
+                    scss: {
+                        additionalData: scssImports,
+                    }
+                }
+            }
         }
     }
 }