Feature/restyling colors

assets/css/footer-section.css

@@ -129,10 +129,10 @@ footer .social li {
 }
 
 footer .social li a {
-    color: #fff;
+    color: var(--activeColor);
+    background-color: var(--activeColor);
     text-align: center;
-    background-color: transparent;
-    border: 1px solid #fff;
+    border: 1px solid var(--activeColor);
     width: 44px;
     height: 44px;
     line-height: 44px;
@@ -146,9 +146,9 @@ footer .social li a {
 }
 
 footer .social li a:hover {
-    background-color: #fba70b;
-    border-color: #fba70b;
-    color: #fff;
+    background-color: var(--hoverColor);
+    border-color: var(--hoverColor);
+    color: var(--activeColor);
 }
 
 footer .copyright {

assets/css/header.css

@@ -136,7 +136,7 @@
 
 .header-area .main-nav .nav li.submenu ul li a {
     display: block;
-    background: var(--primaryBackgroundDarker);
+    background: var(--primaryBackground);
     color: var(--primaryFontColor)!important;
     padding-left: 20px;
     height: 40px;
@@ -358,8 +358,8 @@
     .header-area .main-nav .nav li {
         width: 100%;
         background: var(--primaryBackground);
-        /*border-bottom: 1px solid var(--primaryBackgroundDarker);*/
-        border: 1px solid var(--primaryBackgroundDarker);
+        /*border-bottom: 1px solid var(--primaryBackground);*/
+        border: 1px solid var(--primaryBackground);
         padding-left: 0 !important;
         padding-right: 0 !important;
     }
@@ -372,7 +372,7 @@
         color: var(--primaryFontColor) !important;
     }
     .header-area .main-nav .nav li a:hover {
-        background: var(--activeColor) !important;
+        background: var(--hoverColor) !important;
         color: var(--primaryFontColor) !important;
     }
     .header-area .main-nav .nav li.submenu ul {

assets/css/main.css

@@ -73,7 +73,16 @@ a:hover,
 a:active,
 a:visited:hover,
 a:visited:active {
-  color: var(--textHoverColor);
+  color: var(--hoverColor);
+}
+
+a.button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+
+  text-decoration: none;
+  color: initial;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -100,7 +109,6 @@ img {
   .hide-image-on-mobile {
     display: none;
   }
-
 }
 
 
@@ -244,7 +252,7 @@ button.main-button:hover {
 
 @-webkit-keyframes glow {
   from {
-    text-shadow: 0 0 10px var(--primaryBackground), 0 0 20px var(--primaryBackground), 0 0 30px var(--primaryBackgroundDarker), 0 0 40px var(--primaryBackgroundDarker), 0 0 50px var(--primaryBackgroundDarker), 0 0 60px var(--primaryBackgroundDarker), 0 0 70px var(--primaryBackgroundDarker);
+    text-shadow: 0 0 10px var(--primaryBackground), 0 0 20px var(--primaryBackground), 0 0 30px var(--primaryBackground), 0 0 40px var(--primaryBackground), 0 0 50px var(--primaryBprimaryBackgroundackgroundDarker), 0 0 60px var(--primaryBackground), 0 0 70px var(--primaryBackground);
   }
 
   to {
@@ -258,7 +266,7 @@ button.main-button:hover {
 --------------------------------------------- */
 #preloader {
   overflow: hidden;
-  background-image: linear-gradient(145deg, var(--primaryBackground) 0%, var(--primaryBackgroundDarker) 100%);
+  background-image: linear-gradient(145deg, var(--primaryBackground) 0%, var(--primaryBackground) 100%);
   left: 0;
   right: 0;
   top: 0;

assets/css/theme-variables.css

@@ -13,40 +13,37 @@
     /* ---------------------------------------------
         DECLARED COLORS
     --------------------------------------------- */
-    --color1: #A72608;
-    --color2: #FA9F42;
-    --color3: #E88723;
-    --color4: #3891A6;
-    --color5: #8783D1;
-    --color6: #AA9ABA;
+    --color1: #EF6351;
+    --color2: #FCE1A7;
+    --color3: #C97CD8;
+    --color4: #DCFFDE;
+    --color5: #253D5B;
 
     /* ---------------------------------------------
         GENERAL COLORS
     --------------------------------------------- */
     --hoverColor: var(--color1);
     --activeColor: var(--color3) !important;
-    --textHoverColor: var(--color4);
-    --textActiveColor: var(--color1);
+    --textHoverColor: var(--color1);
+    --textActiveColor: var(--color3);
 
     /* ---------------------------------------------
         BACKGROUND COLORS
     --------------------------------------------- */
-    --primaryBackground: var(--color6);
-    --primaryBackgroundDarker: var(--color5);
+    --primaryBackground: var(--color5);
     --secondaryBackground: var(--color3);
-    --secondaryBackgroundDarker: var(--color4);
 
     /* ---------------------------------------------
         BUTTON COLORS
     --------------------------------------------- */
     --buttonFontColor: white;
-    --primaryButton: var(--color2);
+    --primaryButton: var(--color3);
 
     /* ---------------------------------------------
         FONT COLORS
     --------------------------------------------- */
     --primaryFontColor: white;
-    --secondaryFontColor: #7a7a7a;
+    --secondaryFontColor: var(--color3);
     --selectionColor: var(--color4);
     --selectionBackground: var(--color3);
     --boldFontColor: var(--color2);

assets/css/tracks-section.css

@@ -16,7 +16,7 @@
     border-radius: 5px;
     padding: 60px 30px;
     text-align: center;
-    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
+    box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
 }
 
 .tracks-item h2 {
@@ -26,7 +26,7 @@
     left: 45px;
     font-size: 100px;
     font-weight: 600;
-    color: #fdefe9;
+    color: var(--secondaryFontColor);
 }
 
 .tracks-item img {
@@ -39,7 +39,7 @@
 .tracks-item h4 {
     margin-top: 0px;
     font-size: 22px;
-    color: #1e1e1e;
+    color: var(--primaryFontColor);
     margin-bottom: 25px;
 }
 

index.html

@@ -339,7 +339,7 @@ <h2>The <em>F.A.Q.</em></h2>
                         </div>
                         <div class="right-content col-lg-6 col-md-12 col-sm-12">
                             <h2>Looking to <em>Sponsor?</em></h2>
-                            <button class="main-button"><a target="_blank" href="https://drive.google.com/file/d/1ETeao2MnMO9b-wmxt-bGjXHVvrfSSnr3/view?usp=sharing">checkout our sponsorship packet here</a></button>
+                            <a class="main-button button" target="_blank" href="https://drive.google.com/file/d/1ETeao2MnMO9b-wmxt-bGjXHVvrfSSnr3/view?usp=sharing">checkout our sponsorship packet here</a>
                             <p>
                                 <br><br>
                                 We look forward to our first iteration as Code Quantum and we are glad to have you along for the experience!