1 files changed, 34 insertions, 55 deletions

diff --git a/styles.css b/styles.css
index e2a931d..1bec822 100644
--- a/styles.css
+++ b/styles.css
@@ -3,6 +3,7 @@
     --background-l1:        #eff3f6;
     --background-l2:        #FFF;
     --background-l3:        #7c8083;
+    --toggle-bg:            #000;
     --header-bg:            #FFF;
     --vertical-block-space: 3.5rem;
     --text:                 #000;
@@ -50,7 +51,7 @@ body {
     grid-template-rows: auto auto;
     gap: 0px 0px;
     grid-template-areas:
-        "navbar-burger logo-name   ."
+        "navbar-toggle logo-name   ."
         "navbar-menu   navbar-menu navbar-menu";
     grid-area: header;
 
@@ -81,6 +82,25 @@ body {
     display: none;
 }
 
+.nav__toggle {
+    grid-area: navbar-toggle;
+    margin: auto;
+}
+
+.nav__toggle svg {
+    width: 1rem;
+    fill: var(--toggle-bg);
+}
+
+.nav__toggle .close {
+    display: none;
+}
+
+.nav__toggle .close,
+.nav__toggle .menu {
+    margin: auto;
+}
+
 label[for=navbar-toggle-cbox] {
     cursor: pointer;
 }
@@ -93,6 +113,14 @@ label[for=navbar-toggle-cbox] {
     animation: bounceInDown 1s both;
 }
 
+#navbar-toggle-cbox:checked ~ label.nav__toggle svg.close {
+    display: block;
+}
+
+#navbar-toggle-cbox:checked ~ label.nav__toggle svg.menu {
+    display: none;
+}
+
 @-webkit-keyframes bounceInDown {
     0% {
         opacity: 0;
@@ -159,37 +187,6 @@ label[for=navbar-toggle-cbox] {
 }
 
 /* --------- End Menu Mobile sin JS ----------- */
-
-/* ---------   Menu Mobile JS  ------------ */
-.navbar-burger.is-active {
-    display: flex;
-    cursor: pointer;
-    position: relative;
-    justify-content: center;
-    width: 100%;
-    height: auto;
-}
-
-.navbar-burger.is-active span {
-    display: block;
-    position: absolute;
-}
-
-.navbar-burger.is-active span:nth-child(1) {
-    transform: translateY(5px) rotate(45deg);
-    top: calc(50% - 6px);
-}
-
-.navbar-burger.is-active span:nth-child(2) {
-    opacity: 0;
-}
-
-.navbar-burger.is-active span:nth-child(3) {
-    transform: translateY(-5px) rotate(-45deg);
-    top: calc(50% + 4px);
-}
-/* --------- End Menu Mobile JS ----------- */
-
 .navbar-menu > ul > li {
     list-style: none;
     padding-top: 1rem;
@@ -213,27 +210,6 @@ ul.list-item > li > a {
     text-decoration: none;
 }
 
-.navbar-burger {
-    grid-area: navbar-burger;
-    margin: auto;
-
-    display: grid;
-    grid-row-gap: .25rem;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr 1fr;
-}
-
-.navbar-burger span {
-    background-color: var(--text);
-    display: block;
-    height: 2px;
-    transform-origin: center;
-    transition-duration: 86ms;
-    transition-property: background-color,opacity,transform;
-    transition-timing-function: ease-out;
-    width: 16px;
-}
-
 .logo-name {
     grid-area: logo-name;
     justify-self: center;
@@ -288,7 +264,10 @@ ul.list-item > li > a {
 #cm-search:checked ~ .clicked {
     display: none;
 }
-#cm-search:checked ~ .navbar-burger {
+#cm-search:checked ~ .nav__toggle {
+    display: none;
+}
+#cm-search:checked ~ .nav__toggle .menu {
     display: none;
 }
 #cm-search:checked ~ .logo-name {
@@ -428,7 +407,7 @@ input::-webkit-inner-spin-button {
         color: var(--text);
         width: 150px;
     }
-    .navbar-burger {
+    .nav__toggle {
         display: none;
     }
     .navbar-menu {