color change

src/lib/styles/global.scss

@@ -1,13 +1,26 @@
 :root {
   --spacing-outer: 5vw;
   --spacing-nav: 5vw;
-  --color-bg: rgb(63, 111, 207);
+  --color-bg: rgb(207, 63, 70);;
-  --color-bg-variant-1: rgb(63, 111, 207);
-  --color-bg-variant-2: rgb(207, 63, 70);
-  --color-bg-variant-3: rgb(63, 207, 80);
-  --color-bg-variant-4: rgb(255, 174, 0);
   --color-text: rgb(255, 234, 217);
   --color-highlight: rgb(29, 12, 18);
+
+  --color-bg-variant-1: rgb(207, 63, 70);
+  --color-text-variant-1: rgb(255, 234, 217);
+  --color-highlight-variant-1: rgb(29, 12, 18);
+
+  --color-bg-variant-2: rgb(63, 111, 207);
+  --color-text-variant-2: rgb(255, 228, 207);
+  --color-highlight-variant-2: rgb(57, 0, 17);
+
+  --color-bg-variant-3: rgb(34, 169, 49);
+  --color-text-variant-3: rgb(255, 232, 168);
+  --color-highlight-variant-3: rgb(36, 0, 0);
+
+  --color-bg-variant-4: rgb(238, 127, 1);
+  --color-text-variant-4: rgb(253, 254, 255);
+  --color-highlight-variant-4: rgb(0, 39, 67);
+  
   --aspect-ratio-heroes: 1.5;
   --font-size-p: clamp(20px, 1.6vw, 1.6vw);
 
@@ -45,6 +58,7 @@ body {
   min-height: 100svh;
   max-width: 100vw;
   overflow-x: hidden;
+  transition: background-color .5s ease-in-out, color .5s ease-in-out;
 }
 body * {
   box-sizing: border-box;

src/routes/+layout.svelte

@@ -24,6 +24,35 @@
     }
   }
 
+  function setRandomBgColor() {
+    const currentBgColor = getComputedStyle(document.documentElement)
+      .getPropertyValue('--color-bg');
+    const currentHighlightColor = getComputedStyle(document.documentElement)
+      .getPropertyValue('--color-highlight');
+    const currentTextColor = getComputedStyle(document.documentElement)
+      .getPropertyValue('--color-text');
+      
+    let variantNumber: number;
+    let variantBgColor: string;
+    let variantHighlightColor: string;
+    let variantTextColor: string;
+    
+    // Keep picking a random variant until it's different from the current color
+    do {
+      variantNumber = Math.floor(Math.random() * 4) + 1;
+      variantBgColor = getComputedStyle(document.documentElement)
+        .getPropertyValue(`--color-bg-variant-${variantNumber}`);
+      variantHighlightColor = getComputedStyle(document.documentElement)
+        .getPropertyValue(`--color-highlight-variant-${variantNumber}`);
+      variantTextColor = getComputedStyle(document.documentElement)
+        .getPropertyValue(`--color-text-variant-${variantNumber}`);
+    } while (variantBgColor.trim() === currentBgColor.trim());
+    
+    document.documentElement.style.setProperty('--color-bg', variantBgColor);
+    document.documentElement.style.setProperty('--color-highlight', variantHighlightColor);
+    document.documentElement.style.setProperty('--color-text', variantTextColor);
+  }
+
   if (browser) {
     beforeNavigate((nav) => {
       // token to avoid races between overlapping navigations
@@ -32,6 +61,9 @@
       clearTimer();
       showLoader = false;
 
+      // Change background color on route change
+      setRandomBgColor();
+
       // only show if navigation takes >150ms
       timer = setTimeout(() => {
         if (token === navToken) showLoader = true;

src/routes/work/+page.svelte

@@ -16,6 +16,9 @@
 
     let isZoomed = false;
 
+    const currentBgColor = getComputedStyle(document.documentElement).getPropertyValue('--color-bg');
+    const currentHighlightColor = getComputedStyle(document.documentElement).getPropertyValue('--color-highlight');
+
     let works: Array<HTMLElement> = Array.from(document.querySelectorAll('.work'));
     for ( let i = 0; i < 40; i++ ){
       let clone = works[i].cloneNode(true) as HTMLElement;
@@ -136,14 +139,14 @@
       if (isZoomed) return;
       gsap.killTweensOf([work, work.querySelector('.work-logo')]);
       gsap.to(work, {
-        backgroundColor: 'rgb(63, 111, 207)',
+        backgroundColor: currentBgColor,
         duration: .125,
         ease: 'power1.inOut',
       })
       const logo = work.querySelector('.work-logo');
       if (logo) {
         gsap.to(logo, {
-          color: 'rgb(29, 12, 18)',
+          color: currentHighlightColor,
           duration: .125,
           ease: 'power1.inOut',
         })
@@ -154,14 +157,14 @@
       if (isZoomed) return;
       gsap.killTweensOf([work, work.querySelector('.work-logo')]);
       gsap.to(work, {
-        backgroundColor: 'rgb(29, 12, 18)',
+        backgroundColor: currentHighlightColor,
         duration: .125,
         ease: 'power1.inOut',
       })
       const logo = work.querySelector('.work-logo');
       if (logo) {
         gsap.to(logo, {
-          color: 'rgb(63, 111, 207)',
+          color: currentBgColor,
           duration: .125,
           ease: 'power1.inOut',
         })

src/routes/work/[slug]/+page.svelte

@@ -328,7 +328,6 @@
     overflow: hidden;
     padding: 0 0 1em 0;
     z-index: 1;
-    // opacity: 0.75;
     perspective: 250px;
     perspective-origin: center bottom;