RELEASE 1.0

Finished the menu, mobile versions and animations.

css/style.css

@@ -62,6 +62,7 @@ p {
 b {
   font-weight: 600;
 }
+/* Superscript */
 sup {
   vertical-align: super;
   font-size: 70%;
@@ -95,15 +96,15 @@ sup {
   margin-left: 2.5rem;
 }
 /* Phone Number */
-.landing nav .phone {
+.landing .phone {
   display: flex;
   align-items: center;
 }
-.landing nav .phone address {
+.landing .phone address {
   font-size: 0.95em;
   font-weight: 600;
 }
-.landing nav .phone .free-tooltip {
+.landing .phone .free-tooltip {
   margin-left: 10px;
   padding: 2px 5px;
   font-size: 0.75em;
@@ -135,6 +136,8 @@ sup {
 /* Log in button */
 .landing nav .login-btn {
   padding: 10px 25px;
+  font-size: 0.75em;
+  font-weight: 600;
   color: #111;
   background: #FFF;
   border-radius: 25px;
@@ -147,19 +150,70 @@ sup {
     background: #111;
     transition: color 0.2s cubic-bezier(0.77, 0, 0.175, 1), background 0.2s cubic-bezier(0.77, 0, 0.175, 1);
   }
+
+/* == MENU FORMATTING == */
 /* Menu button */
+.landing nav .menu {
+  position: relative;
+  color: #FFF;
+  border-radius: 50%;
+}
 .landing nav .menu-btn {
-  width: 40px;
-  height: 40px;
+  width: 50px;
+  height: 50px;
   font-size: 0.65em;
   font-weight: 600;
-  color: #FFF;
-  background: #000;
+  color: #000;
+  background: #FFF;
   border: none;
-  border-radius: 25px;
+  border-radius: 50%;
   cursor: pointer;
 }
+.landing nav .menu.active .menu-btn,
+.landing nav .menu .menu-btn:hover {
+  color: #FFF;
+  background: #000;
+}
 
+/* Transformation effects */
+.landing nav .menu:not(.active) .menu-item a{
+  transform: scale(0);
+  transform-origin: 20px 20px;
+  transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
+}
+.landing nav .menu.active .menu-item a{
+  transform: scale(100%);
+  transform-origin: 20px 20px;
+  transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
+}
+.landing nav .menu.active .menu-item:nth-child(1) a {transition-delay: 0.3s}
+.landing nav .menu.active .menu-item:nth-child(2) a {transition-delay: 0.2s}
+.landing nav .menu.active .menu-item:nth-child(3) a {transition-delay: 0.1s}
+
+.landing nav .menu .menu-body {
+  position: absolute;
+  right: 0;
+  margin-top: 10px;
+  display: flex;
+  text-align: center;
+}
+.landing nav .menu .menu-body .menu-item a {
+  width: 40px;
+  height: 40px;
+  position: relative;
+  margin-right: 15px;
+  display: block;
+  line-height: 40px;
+  background: #000;
+  border-radius: 50%;
+}
+
+
+/* Colour formatting */
+.landing nav .menu.active .menu-body .menu-item:nth-child(1) a:hover {background: #00a0a3}
+.landing nav .menu.active .menu-body .menu-item:nth-child(2) a:hover {background: #9b1f82}
+.landing nav .menu.active .menu-body .menu-item:nth-child(3) a:hover {background: #ed0959}
+.landing nav .menu.active .menu-body .menu-item:nth-child(4) a:hover {background: #0073be}
 
 /* MAIN SECTION (NEWS + FORM) */
 .landing .news-container {
@@ -226,10 +280,35 @@ sup {
   min-width: 300px;
   margin: 0.5rem 0;
   padding: 10px 14px;
-  color: #a7a7a7;
+  color: #555;
+  background: #FFF;
   border: solid 1px rgba(0, 0, 0, 0.1);
   border-radius: 16px;
 }
+.landing .news-container form .select-wrapper {
+  position: relative;
+}
+.landing .news-container form select {
+  position: relative;
+  -webkit-appearance: none; 
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+.landing .news-container form .select-wrapper svg {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  color: #555;
+  z-index: 100;
+}
+.landing .news-container form select[disabled] {
+  color: red !important;
+}
+.landing .news-container form select svg {
+  position: absolute;
+}
 .landing .news-container form button {
   width: 100%;
   margin-top: 0.5rem;
@@ -448,7 +527,7 @@ sup {
   cursor: pointer;
 }
 .newsletter form button:hover {
-  background: #46cfd1;
+  background: #32a44d;
 }
 
 /* =========== FOOTER SECTION =========== */
@@ -614,6 +693,11 @@ footer .sitemap a:hover {
   padding: 10px 20px;
   border-radius: 20px;
 }
+.ourproducts > footer a:hover,
+.freetrials > footer a:hover {
+  color: #FFF;
+  background: #111;
+}
 
 /* =========== MEDIA QUERIES =========== */
 
@@ -682,7 +766,7 @@ and (max-width : 1060px) {
 
 /* PHONES */
 @media only screen
-and (max-width : 700px) {
+and (max-width : 750px) {
   /* Fixes the main padding */
   body > *:not(footer),
   .contact-info,
@@ -692,20 +776,20 @@ and (max-width : 700px) {
   }
   /* LANDING */
   /* Hiding irrelevant things */
-  .landing nav .phone,
+  .landing .phone,
   .landing nav .login-btn,
   .landing .news-container form {
     display: none;
   }
   .landing {
     min-height: 100vh;
-    padding: 2.5rem 1rem;
+    padding: 2.5rem;
   }
   .landing .news-container {
     margin-top: 4rem;
   }
   .landing .news-container article {
-    padding: 1.5rem 3rem 2.5rem 2rem;
+    padding: 3rem 4rem;
   }
   .landing .news-container article:after {
     top: 0;
@@ -730,7 +814,7 @@ and (max-width : 700px) {
 
   /* FREE TRIALS */
   .freetrials {
-    padding: 2rem 1rem;
+    padding: 2rem;
     background: #00a0a3;
   }
   .freetrials > header {
@@ -755,9 +839,13 @@ and (max-width : 700px) {
   }
   .product-card {
     margin-bottom: 1.5rem;
-    padding: 1rem 5vw 1.5rem;
+    padding: 1.5rem 12vw;
     border: none;
-    border-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .freetrials .product-card {
+    border-top-right-radius: 50px;
+    border-bottom-left-radius: 50px;
   }
   .ourproducts > footer a,
   .freetrials > footer a {
@@ -796,6 +884,29 @@ and (max-width : 700px) {
   }
 }
 
+/* SM PHONES */
+@media only screen
+and (max-width : 420px) {
+  .my-cart {
+    display: none;
+  }
+  .landing .news-container article {
+    padding: 2rem 2.5rem;
+  }
+  .ourproducts > footer a, .freetrials > footer a {
+    width: 90%;
+  }
+  .newsletter,
+  footer .sitemap {
+    padding: 2rem 0.5rem;
+  }
+  .newsletter form input,
+  .newsletter form button {
+    padding: 15px;
+  }
+}
+
+
 @media only screen
 and (max-width : 1069px)
 and (min-width : 700px) {