fixed drop shadows, and shine

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

script.js

@@ -35,6 +35,8 @@ fetch('colors.json')
         const swatch = document.createElement('div');
         swatch.classList.add('color-swatch');
         swatch.dataset.color = color.hex;
+        swatch.style.color = color.hex;
+
 
         const backgroundDiv = document.createElement('div');
         backgroundDiv.classList.add('color-background');
@@ -49,16 +51,17 @@ fetch('colors.json')
           backgroundDiv.classList.add('metallic', `chrome-${color.chromeType}`);
         }
 
-        if (isLightColor(color.hex)) {
-          backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
-        }
-
-        swatch.appendChild(backgroundDiv);
-
         const shineImg = document.createElement('img');
         shineImg.classList.add('color-shine');
         shineImg.src = "shine.svg";
         shineImg.alt = "";
+
+        if (isLightColor(color.hex)) {
+          backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
+          shineImg.classList.add('has-halo');
+        }
+
+        swatch.appendChild(backgroundDiv);
         swatch.appendChild(shineImg);
 
         const colorName = document.createElement('span');
@@ -143,20 +146,21 @@ function renderSelectedPalette() {
       backgroundDiv.style.backgroundColor = color.hex;
     }
 
-    if (isLightColor(color.hex)) {
-      backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
-    }
-
     if (color.metallic && color.chromeType) {
       backgroundDiv.classList.add('metallic', `chrome-${color.chromeType}`);
     }
 
-    swatch.appendChild(backgroundDiv);
-
     const shineImg = document.createElement('img');
     shineImg.classList.add('color-shine');
     shineImg.src = "shine.svg";
     shineImg.alt = "";
+
+    if (isLightColor(color.hex)) {
+      backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
+      shineImg.classList.add('has-halo');
+    }
+
+    swatch.appendChild(backgroundDiv);
     swatch.appendChild(shineImg);
 
     const svgNS = "http://www.w3.org/2000/svg";

style.css

@@ -151,34 +151,13 @@ footer {
   max-width: min-content;
   position: relative;
   overflow-wrap: break-word;
-  
+    transition: filter 0.3s ease;
+  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
 
 }
 
-/* .color-swatch {
-  width: 55px;
-  height: 65px;
-  border-radius: 50%;
-  position: relative;
-  cursor: pointer;
-  transition: transform 0.2s ease;
-} */
-.color-swatch::before {
-  content: '';
-  position: absolute;
-  top: 10%;
-  left: 20%;
-  width: 60%;
-  height: 40%;
-  border-radius: 50% / 30%;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.8),
-    rgba(255, 255, 255, 0) 70%
-  );
-  pointer-events: none;
-  /* filter: blur(4px); */
-}
+
+
 
 .metallic-element[data-color="#FFD700"] {
   background: linear-gradient(to bottom, #B88606, #79550E);
@@ -208,17 +187,16 @@ footer {
   mask-repeat: no-repeat;
   mask-position: center;
 
-  /* This is the base shadow for depth and lift */
-  box-shadow:
-    inset 2px 2px 6px rgba(255, 255, 255, 0.6), /* Inner highlight for depth */
-    0 4px 8px rgba(0, 0, 0, 0.2);              /* Outer shadow for lift */
+
 }
 
+.color-shine.has-halo {
+  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.4));
+}
 
 .color-swatch:hover,
 .color-swatch:active {
   transform: scale(1.2);
-  box-shadow: 0 0 5px rgba(0,0,0,0.2);
 }