expanded-nav - adjust ticketing

assets/css/src/footer.css

@@ -11,8 +11,6 @@
 }
 
 .main-footer .social-icons {
-  display: flex;
-  column-gap: 1.15rem;
   margin-bottom: 2rem;
 }
 
@@ -25,12 +23,3 @@
 .main-footer form input::after {
   content: "→";
 }
-
-.main-footer .social-icons a svg {
-  transform: scale(1);
-  transition: transform 0.2s ease-in-out;
-}
-
-.main-footer .social-icons a:hover svg {
-  transform: scale(1.15);
-}

assets/css/src/generic.css

@@ -46,3 +46,17 @@ body.progress * {
 .logo > *:not(:first-child) {
   margin-left: 2.4ch;
 }
+
+.social-icons {
+  display: flex;
+  column-gap: 1.15rem;
+}
+
+.social-icons a svg {
+  transform: scale(1);
+  transition: transform 0.2s ease-in-out;
+}
+
+.social-icons a:hover svg {
+  transform: scale(1.15);
+}

assets/css/src/nav.css

@@ -12,13 +12,13 @@
   position: fixed;
   width: 100%;
   box-sizing: border-box;
-  top: -32rem;
+  top: -34rem;
   z-index: 2;
   background-color: var(--color-brown-light);
   display: grid;
   grid-template-columns: 2fr 8fr 1fr;
   transition: top 0.4s var(--curve-quick-slow);
-  padding: 2rem var(--space-m) 2rem 1rem;
+  padding: 3rem var(--space-m) 3rem 1rem;
   border-bottom: var(--border);
 }
 .expanded-nav.open {
@@ -68,6 +68,25 @@
   font-size: var(--font-size-s);
 }
 
+.expanded-nav__ticketing a {
+  display: flex;
+  align-items: center;
+}
+
+.expanded-nav__links {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.expanded-nav__ticketing .ticket {
+  margin-right: 1rem;
+}
+
+.expanded-nav__links .social-icons {
+  margin-top: 1rem;
+}
+
 /* Header */
 
 .main-nav {

assets/css/src/ticket.css

@@ -41,18 +41,20 @@ a:hover .ticket svg,
   animation: vibrate 0.5s forwards;
 }
 
-.ticket:hover svg path:not(.dot) {
+.ticket:hover svg path:not(.dot),
+a:hover .ticket svg path:not(.dot) {
   fill: var(--color-salmon);
   stroke: var(--color-salmon);
 }
-a:hover .ticket svg path:not(.dot) {
+a.to-blank:hover .ticket svg path:not(.dot) {
   fill: #fff;
   stroke: #fff;
 }
 
-.ticket:hover svg path.dot {
+.ticket:hover svg path.dot,
+a:hover .ticket svg path.dot {
   fill: #fff;
 }
-a:hover .ticket svg path.dot {
+a.to-blank:hover .ticket svg path.dot {
   fill: var(--color-salmon);
 }