Bright Version

assets/css/style.css

@@ -25,48 +25,48 @@
 
   --bg-gradient-onyx: linear-gradient(
     to bottom right, 
-    hsl(240, 1%, 25%) 3%, 
-    hsl(0, 0%, 19%) 97%
+    hsl(252, 56%, 93%) 100%, 
+    hsl(255, 100%, 98%) 100%
   );
   --bg-gradient-jet: linear-gradient(
     to bottom right, 
-    hsla(240, 1%, 18%, 0.251) 0%, 
-    hsla(240, 2%, 11%, 0) 100%
-  ), hsl(240, 2%, 13%);
+    hsla(216, 45%, 98%) 0%, 
+    hsla(216, 45%, 98%) 100%
+  ), hsl(216, 45%, 98%);
   --bg-gradient-yellow-1: linear-gradient(
     to bottom right, 
-    hsl(45, 100%, 71%) 0%, 
-    hsla(36, 100%, 69%, 0) 50%
+    hsl(230, 91%, 64%) 0%, 
+    hsla(216, 45%, 98%) 50%
   );
   --bg-gradient-yellow-2: linear-gradient(
     135deg, 
-    hsla(45, 100%, 71%, 0.251) 0%, 
-    hsla(35, 100%, 68%, 0) 59.86%
-  ), hsl(240, 2%, 13%);
+    hsla(230, 91%, 64%, 0.251) 0%, 
+    hsla(224, 70%, 95%, 0) 59.86%
+  ), hsl(216, 45%, 98%);
   --border-gradient-onyx: linear-gradient(
     to bottom right, 
-    hsl(0, 0%, 25%) 0%, 
-    hsla(0, 0%, 25%, 0) 50%
+    hsl(224, 70%, 95%) 0%, 
+    hsla(216, 45%, 98%) 50%
   );
   --text-gradient-yellow: linear-gradient(
     to right, 
-    hsl(45, 100%, 72%), 
-    hsl(35, 100%, 68%)
+    hsl(230, 91%, 64%), 
+    hsl(230, 68%, 51%)
   );
 
   /* solid */
 
-  --jet: hsl(0, 0%, 22%);
-  --onyx: hsl(240, 1%, 17%);
-  --eerie-black-1: hsl(240, 2%, 13%);
-  --eerie-black-2: hsl(240, 2%, 12%);
-  --smoky-black: hsl(0, 0%, 7%);
-  --white-1: hsl(0, 0%, 100%);
-  --white-2: hsl(0, 0%, 98%);
-  --orange-yellow-crayola: hsl(45, 100%, 72%);
-  --vegas-gold: hsl(45, 54%, 58%);
-  --light-gray: hsl(0, 0%, 84%);
-  --light-gray-70: hsla(0, 0%, 84%, 0.7);
+  --jet: hsl(0, 0%, 100%);
+  --onyx: hsl(216, 45%, 98%);
+  --eerie-black-1: hsl(216, 45%, 98%);
+  --eerie-black-2: hsl(0, 0%, 100%);
+  --smoky-black: hsl(255, 100%, 98%);
+  --white-1: hsl(210, 11%, 7%);
+  --white-2: hsl(207, 13%, 17%);
+  --orange-yellow-crayola: hsl(230, 91%, 64%);
+  --vegas-gold: hsl(230, 91%, 64%);
+  --light-gray: hsl(208, 14%, 24%);
+  --light-gray-70: hsla(208, 14%, 24%, 0.7);
   --bittersweet-shimmer: hsl(0, 43%, 51%);
 
   /**
@@ -96,11 +96,11 @@
    * shadow
    */
 
-  --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
-  --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
-  --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
-  --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
-  --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);
+  --shadow-1: hsl(229, 100%, 94%);
+  --shadow-2: hsl(228, 100%, 86%);
+  --shadow-3: hsl(228, 100%, 86%);
+  --shadow-4: hsla(228, 100%, 92%, 0.934);
+  --shadow-5: 0 24px 80px hsl(228, 100%, 91%);
 
   /**
    * transition
@@ -332,7 +332,7 @@ main {
 }
 
 .avatar-box {
-  background: var(--bg-gradient-onyx);
+  background: var(--light-gray);
   border-radius: 20px;
 }
 
@@ -345,7 +345,7 @@ main {
 }
 
 .info-content .title {
-  color: var(--white-1);
+  color: var(--vegas-gold);
   background: var(--onyx);
   font-size: var(--fs-8);
   font-weight: var(--fw-300);
@@ -416,7 +416,7 @@ main {
 }
 
 .contact-title {
-  color: var(--light-gray-70);
+  color: var(--vegas-gold);
   font-size: var(--fs-8);
   text-transform: uppercase;
   margin-bottom: 2px;
@@ -459,7 +459,7 @@ main {
   bottom: 0;
   left: 0;
   width: 100%;
-  background: hsla(240, 1%, 17%, 0.75);
+  background: hsla(216, 45%, 98%, 0.75);
   backdrop-filter: blur(10px);
   border: 1px solid var(--jet);
   border-radius: 12px 12px 0 0;
@@ -1157,7 +1157,7 @@ main {
   font-size: var(--fs-6);
   font-weight: var(--fw-400);
   padding: 13px 20px;
-  border: 1px solid var(--jet);
+  border: 1px solid var(--light-gray);
   border-radius: 14px;
   outline: none;
 }
@@ -1661,9 +1661,9 @@ textarea.form-input::-webkit-resizer { display: none; }
     * shadow
     */
 
-    --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
-    --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
-    --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);
+    --shadow-1: -4px 8px 24px hsla(228, 92%, 90%, 0.729);
+    --shadow-2: 0 16px 20px hsla(232, 100%, 89%, 0.46);
+    --shadow-3: 0 16px 40px hsla(245, 100%, 86%, 0.377);
 
   }