collapsable sections - add transition

assets/css/src/collapsable-section.css

@@ -4,7 +4,7 @@
   padding: 0 !important;
 }
 
-.collapsable:not(.sessions) > *,
+.collapsable > *,
 .collapsable.sessions > button,
 .collapsable .session {
   padding: var(--row-padding);
@@ -24,17 +24,21 @@
 }
 
 .collapsable__content {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.5s ease-in-out;
+  background-color: #fff;
+  font-size: var(--font-size-s);
+  border-bottom: none;
+
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.4s ease-in-out;
 }
-.collapsable__content {
-  max-height: 100%;
+
+.collapsable__content > * {
   overflow: hidden;
 }
 
-.collapsable__content {
-  font-size: var(--font-size-s);
+.collapsable__content.open {
+  grid-template-rows: 1fr;
 }
 
 .collapsable__content .session {

assets/css/src/footer.css

@@ -4,6 +4,7 @@
   display: grid;
   grid-template-columns: 0.5fr 1fr 1fr 1fr;
   column-gap: calc(var(--space-m));
+  border-top: var(--border);
 }
 
 .main-footer p {

assets/css/src/generic.css

@@ -52,7 +52,7 @@
 .logo {
   font-weight: normal;
   font-size: var(--font-size-h2);
-  transition: font-size 0.1s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: font-size 0.1s var(--curve-quick);
   line-height: 1;
 }
 
@@ -62,7 +62,7 @@
 
 .logo > *:not(:first-child) {
   margin-left: 2.27ch;
-  transition: margin 0.1s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: margin 0.1s var(--curve-quick);
 }
 
 .social-icons {
@@ -105,10 +105,14 @@
   transform: rotate(90deg);
 }
 
-.arrow-down {
+.arrow-right {
   font-size: 2rem;
-  height: 1.5rem;
-  transform: translateY(-0.2rem);
+  transform: rotate(0deg);
+  transition: transform 0.3s var(--curve-quick);
+}
+
+.arrow-right.open {
+  transform: rotate(90deg);
 }
 
 .ticket-link {
@@ -153,3 +157,7 @@
 .strong {
   font-weight: bolder;
 }
+
+.no-padding {
+  padding: 0 !important;
+}

assets/css/src/nav.css

@@ -117,7 +117,7 @@
   height: 1.8ch;
   max-width: 10rem;
   overflow: hidden;
-  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.5s var(--curve-quick);
 }
 
 .main-nav--small .logo > *:not(:first-child) {
@@ -133,7 +133,7 @@
 
 /* Logo hover */
 .main-nav .logo {
-  transition: scale 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: scale 0.5s var(--curve-quick);
 }
 .main-nav .logo:hover {
   scale: 1.035;

assets/css/src/variables.css

@@ -11,6 +11,7 @@
   --font-size-h1: 2.8125rem;
 
   --curve-quick-slow: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --curve-quick: cubic-bezier(0.23, 1, 0.32, 1);
   --padding-vertical: 2rem;
   --space-m: 4vw;