lotsa cool hover effects 💅

src/css/base.scss

@@ -92,11 +92,11 @@ button, .button {
   max-width: $width-m;
   padding: 0.6rem 2rem;
   margin-bottom: 1rem;
-  transition: all .2s ease-in-out;
+  transition: all .1s ease-in-out;
 
   &:hover {
-    color: $color-orange;
-    background: $color-black;
+    color: $color-black;
+    background: $color-yellow;
   }
 }
 

src/css/events.scss

@@ -28,16 +28,20 @@
   .event-group-header {
     text-align: center;
     background-color: $color-orange;
-    color: $color-white;
+    color: $color-black;
     margin: 0 -2rem 1rem;
     padding: 0.4rem 2rem;
     text-transform: uppercase;
     font-weight: 700;
-    font-size: 1.3rem;
     line-height: 1.2;
     letter-spacing: 0.05em;
   }
 
+  .event-meta, .event-date-weekday, .event-date-day-month {
+    font-size: 1rem;
+    transition: none;
+  }
+
   .event-types {
     display: none;
   }
@@ -81,27 +85,27 @@
   &-title {
     display: block;
     text-decoration: none;
-    font-size: 1.3rem;
+    font-size: 1.16rem;
     font-weight: 700;
-    line-height: 1.1;
+    line-height: 1.2;
     margin: 0.2rem 0;
   }
 
-  transition: color 1s ease-in-out;
+  transition: box-shadow .1s ease-in-out;
+
   &:hover {
-    transition: color 1s ease-in-out;
-    color: $color-orange;
-    border-color: $color-orange;
-    
-    .event-title, .event-meta {
+    color: $color-black;
+    box-shadow: 0 0 0 4px $color-black, 0 0 0 6px darken($color-orange, 20%);
+    animation: shine 3s alternate infinite;
+  }
+  
+  @keyframes shine {
+    from {
+      color: $color-black;
+    }
+    to {
       color: $color-orange;
     }
-    .event-types li {
-      background: $color-orange;
-    }
-    .event-image {
-      filter: sepia(100%) hue-rotate(340deg) saturate(360%);
-    }
   }
 
   .event-start {
@@ -153,7 +157,7 @@
 .event-types {
   ul {
     list-style: none;
-    margin: 0;
+    margin: 1rem 0;
     padding: 0;
   }
   li {
@@ -167,13 +171,13 @@
 
     color: $color-black;
     background: $color-white;
-    opacity: 0.4;
+    opacity: 0.6;
     padding: 0.2rem 0.3rem;
     line-height: 1;
     text-transform: uppercase;
     font-weight: 600;
     letter-spacing: 0.05em;
-    font-size: $font-xs;
+    font-size: $font-s;
     
   }
   a {
@@ -183,23 +187,27 @@
 }
 
 .event-page {
-  background: $color-black;
-  color: $color-white;
-  padding-top: 0;
-
-  .event-meta {
-    color: $color-white;
-  }
+  background: $color-white;
+  color: $color-black;
+  padding: 0 0 4rem;
 }
 
 .event-hero {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-
-  max-width: $width-l;
-  margin: 2rem auto 6rem;
+  background: $color-black;
+  color: $color-white;
+  overflow: hidden;
+  .event-meta {
+    color: $color-white;
+  }
+  &-inner {
+    max-width: $width-l;
+    margin: 2rem auto 0;
+    padding: 2rem 0;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
   
   &_text, &_image {
     width: 50%;
@@ -252,30 +260,61 @@
     text-transform: uppercase;
     letter-spacing: 0.1em;
   }
+}
+
+.event-links {
+  max-width: $width-l;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: -2.5rem auto 3rem;
+  padding: 1rem 0;
+
+  .event-link {
+    display: block;
+    width: calc(50% - 0.5rem);
+    margin: 0;
+    padding: 3px;
+    position: relative;
+    z-index: 9001;
 
-  .ticket-url {
-    display: inline-block;
-    background: $color-yellow;
-    color: $color-black;
-    margin: 1rem 0;
-    padding: 0.6rem 1.4rem;
     text-decoration: none;
+    text-align: center;
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    font-weight: 500;
-
-    transition: box-shadow .2s ease-in-out;
+    font-weight: 700;
 
+    color: $color-black;
+    transition: all .1s ease-in-out;
     &:hover {
-      background: $color-white;
+      transition: all .16s ease-in-out;
+    }
+    span {
+      display: block;
+      width: 100%;
+      padding: 1rem;
+    }
+  }
+
+  .ticket-url {
+    background: $color-orange;
+    border: 3px solid $color-orange;
+    span {
+      background: $color-orange;
+    }
+    &:hover {
+      background: transparent;
     }
   }
 
   .facebook-url {
-    display: block;
-    text-decoration: none;
-    &:before {
-      content: "→ ";
+    background: $color-yellow;
+    border: 3px solid $color-yellow;
+    span {
+      background: $color-yellow;
+    }
+    &:hover {
+      background: transparent;
     }
   }
 }

src/css/front-page.scss

@@ -28,7 +28,7 @@
 }
 
 .address {
-  background: $color-orange;
+  background: $color-green;
 
   label, input {
     display: block;
@@ -37,13 +37,12 @@
 }
 
 .opening-hours {
-  background: $color-orange;
+  background: $color-green;
 }
 
 
 .volunteer {
-  background: $color-black-gradient;
-  color: $color-white;
+  background: $color-pink;
 }
 
 .show-more {

src/css/header.scss

@@ -9,7 +9,7 @@
   top: 0;
   left: 0;
   right: 0;
-  z-index: 1000;
+  z-index: 9002;
 
   .logo {
     width: 1rem;
@@ -31,6 +31,7 @@
     text-decoration: none;
     display: inline-block;
     margin-right: 1.6rem;
+    position: relative;
     &:last-child {
       margin-right: 0;
     }
@@ -40,10 +41,26 @@
     text-transform: uppercase;
     letter-spacing: 0.08em;
     font-size: $font-s;
-
-    transition: box-shadow 0.2s ease-in-out;
-    &:hover {
-      box-shadow: 0 1px 0 0 $color-white;
+    
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 2px;
+      background: #fff;
+      opacity: 0;
+      transform: translateY(5px);
+      transition: transform 1s, opacity 0.1s;
+      pointer-events: none;
+    }
+    
+    &:hover:after,
+    &:focus:after {
+      opacity: 1;
+      transform: translateY(0px);
+      transition: transform 0.3s, opacity 0.3s;
     }
   }
   &_toggle {

src/css/page.scss

@@ -2,17 +2,18 @@
   display: block;
   position: relative;
   z-index: 5;
-  margin: -3rem auto 3rem;
-  padding: 0.5rem 1rem;
+  margin: 0 auto 3rem;
   font-weight: 400;
-  font-size: 2.4rem;
+  font-size: 3.6rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   line-height: 1.1;
   text-align: center;
   text-decoration: none;
-  background: $color-black;
-  color: $color-white;
+  color: inherit;
+  &:hover {
+    color: inherit;
+  }
 }
 h1.section-title {
   margin-top: 1rem;