From a71a5be86cd83bf55dc684eb9582fbbfaaae53ea Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Fri, 11 Jan 2019 14:19:54 +0200
Subject: [PATCH 1/8] Color changes and accessability improvements

---
 css/styles.css                             | 339 +++++++++++----------
 fonts/hy-icons.eot                         | Bin 27960 -> 27960 bytes
 fonts/hy-icons.ttf                         | Bin 27792 -> 27792 bytes
 fonts/hy-icons.woff                        | Bin 16812 -> 16812 bytes
 gulpfile.js                                |   2 +-
 sass/common-elements/_common-elements.scss |   2 +-
 sass/components/_avatar.scss               |   6 +-
 sass/components/_hero.scss                 |   4 +-
 sass/components/_highlight.scss            |   2 +-
 sass/components/_horizontal-tabs.scss      |  28 +-
 sass/components/_label-row.scss            |   6 +-
 sass/components/_liftup-grid.scss          |   2 +-
 sass/components/_liftup-mosaic.scss        |   2 +-
 sass/components/_liftup.scss               |   4 +-
 sass/components/_messages.scss             |   8 +-
 sass/components/_search-form.scss          |   2 +-
 sass/variables/_colors.scss                |  14 +-
 17 files changed, 221 insertions(+), 200 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 88f1ddd..ed54a61 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1980,7 +1980,7 @@ th {
 .button {
   font-family: 'Open Sans', Helvetica, Arial, sans-serif;
   font-size: 0.9375rem;
-  background-color: #0098d0;
+  background-color: #107EAB;
   border: none;
   color: #FFF;
   cursor: pointer;
@@ -1997,20 +1997,20 @@ th {
 .button--small:focus, .accordion__title:focus,
 .button--accordion:focus,
 .button--action-before:focus,
-.button--action:focus, .button--anchor:focus, .button--expand:focus, .button--icon:focus, .button--outline:focus, input[type="submit"]:focus, .button--small:hover, .accordion__title:hover,
+.button--action:focus, .button--anchor:focus, .button--expand:focus, .button--icon:focus, .button--outline:focus, input:focus[type="submit"], .button--small:hover, .accordion__title:hover,
 .button--accordion:hover,
 .button--action-before:hover,
-.button--action:hover, .button--anchor:hover, .button--expand:hover, .button--icon:hover, .button--outline:hover, input[type="submit"]:hover,
+.button--action:hover, .button--anchor:hover, .button--expand:hover, .button--icon:hover, .button--outline:hover, input:hover[type="submit"],
 .button:focus,
 .button:hover {
-  background-color: #005479;
+  background-color: #005379;
   color: #FFF;
 }
 
 .button--small:active, .accordion__title:active,
 .button--accordion:active,
 .button--action-before:active,
-.button--action:active, .button--anchor:active, .button--expand:active, .button--icon:active, .button--outline:active, input[type="submit"]:active, .is-active.button--small, .is-active.accordion__title,
+.button--action:active, .button--anchor:active, .button--expand:active, .button--icon:active, .button--outline:active, input:active[type="submit"], .is-active.button--small, .is-active.accordion__title,
 .is-active.button--accordion,
 .is-active.button--action-before,
 .is-active.button--action, .is-active.button--anchor, .is-active.button--expand, .is-active.button--icon, .is-active.button--outline, input.is-active[type="submit"],
@@ -2042,34 +2042,28 @@ th {
 .button.theme-transparent,
 .button.theme-transparent-alt {
   background-color: transparent;
-  color: #0098d0;
+  color: #107EAB;
 }
 
 .theme-transparent.button--small:hover, .theme-transparent.accordion__title:hover,
 .theme-transparent.button--accordion:hover,
 .theme-transparent.button--action-before:hover,
-.theme-transparent.button--action:hover, .theme-transparent.button--anchor:hover, .theme-transparent.button--expand:hover, .theme-transparent.button--icon:hover, .theme-transparent.button--outline:hover, input.theme-transparent[type="submit"]:hover, .theme-transparent-alt.button--small:hover, .theme-transparent-alt.accordion__title:hover,
+.theme-transparent.button--action:hover, .theme-transparent.button--anchor:hover, .theme-transparent.button--expand:hover, .theme-transparent.button--icon:hover, .theme-transparent.button--outline:hover, input.theme-transparent:hover[type="submit"], .theme-transparent-alt.button--small:hover, .theme-transparent-alt.accordion__title:hover,
 .theme-transparent-alt.button--accordion:hover,
 .theme-transparent-alt.button--action-before:hover,
-.theme-transparent-alt.button--action:hover, .theme-transparent-alt.button--anchor:hover, .theme-transparent-alt.button--expand:hover, .theme-transparent-alt.button--icon:hover, .theme-transparent-alt.button--outline:hover, input.theme-transparent-alt[type="submit"]:hover,
+.theme-transparent-alt.button--action:hover, .theme-transparent-alt.button--anchor:hover, .theme-transparent-alt.button--expand:hover, .theme-transparent-alt.button--icon:hover, .theme-transparent-alt.button--outline:hover, input.theme-transparent-alt:hover[type="submit"],
 .button.theme-transparent:hover,
 .button.theme-transparent-alt:hover {
-  background-color: #0098d0;
+  background-color: #107EAB;
 }
 
-.theme-transparent.button--small a:hover, .theme-transparent.accordion__title a:hover,
-.theme-transparent.button--accordion a:hover,
-.theme-transparent.button--action-before a:hover,
-.theme-transparent.button--action a:hover, .theme-transparent.button--anchor a:hover, .theme-transparent.button--expand a:hover, .theme-transparent.button--icon a:hover, .theme-transparent.button--outline a:hover, input.theme-transparent[type="submit"] a:hover, .theme-transparent.button--small:hover, .theme-transparent.accordion__title:hover,
+.theme-transparent.button--small a:hover, .theme-transparent.accordion__title a:hover, .theme-transparent.button--accordion a:hover, .theme-transparent.button--action-before a:hover, .theme-transparent.button--action a:hover, .theme-transparent.button--anchor a:hover, .theme-transparent.button--expand a:hover, .theme-transparent.button--icon a:hover, .theme-transparent.button--outline a:hover, input.theme-transparent[type="submit"] a:hover, .theme-transparent.button--small:hover, .theme-transparent.accordion__title:hover,
 .theme-transparent.button--accordion:hover,
 .theme-transparent.button--action-before:hover,
-.theme-transparent.button--action:hover, .theme-transparent.button--anchor:hover, .theme-transparent.button--expand:hover, .theme-transparent.button--icon:hover, .theme-transparent.button--outline:hover, input.theme-transparent[type="submit"]:hover, .theme-transparent-alt.button--small a:hover, .theme-transparent-alt.accordion__title a:hover,
-.theme-transparent-alt.button--accordion a:hover,
-.theme-transparent-alt.button--action-before a:hover,
-.theme-transparent-alt.button--action a:hover, .theme-transparent-alt.button--anchor a:hover, .theme-transparent-alt.button--expand a:hover, .theme-transparent-alt.button--icon a:hover, .theme-transparent-alt.button--outline a:hover, input.theme-transparent-alt[type="submit"] a:hover, .theme-transparent-alt.button--small:hover, .theme-transparent-alt.accordion__title:hover,
+.theme-transparent.button--action:hover, .theme-transparent.button--anchor:hover, .theme-transparent.button--expand:hover, .theme-transparent.button--icon:hover, .theme-transparent.button--outline:hover, input.theme-transparent:hover[type="submit"], .theme-transparent-alt.button--small a:hover, .theme-transparent-alt.accordion__title a:hover, .theme-transparent-alt.button--accordion a:hover, .theme-transparent-alt.button--action-before a:hover, .theme-transparent-alt.button--action a:hover, .theme-transparent-alt.button--anchor a:hover, .theme-transparent-alt.button--expand a:hover, .theme-transparent-alt.button--icon a:hover, .theme-transparent-alt.button--outline a:hover, input.theme-transparent-alt[type="submit"] a:hover, .theme-transparent-alt.button--small:hover, .theme-transparent-alt.accordion__title:hover,
 .theme-transparent-alt.button--accordion:hover,
 .theme-transparent-alt.button--action-before:hover,
-.theme-transparent-alt.button--action:hover, .theme-transparent-alt.button--anchor:hover, .theme-transparent-alt.button--expand:hover, .theme-transparent-alt.button--icon:hover, .theme-transparent-alt.button--outline:hover, input.theme-transparent-alt[type="submit"]:hover,
+.theme-transparent-alt.button--action:hover, .theme-transparent-alt.button--anchor:hover, .theme-transparent-alt.button--expand:hover, .theme-transparent-alt.button--icon:hover, .theme-transparent-alt.button--outline:hover, input.theme-transparent-alt:hover[type="submit"],
 .button.theme-transparent a:hover,
 .button.theme-transparent:hover,
 .button.theme-transparent-alt a:hover,
@@ -2108,7 +2102,7 @@ th {
 */
 .accordion__title,
 .button--accordion {
-  border: 2px solid #0098d0;
+  border: 2px solid #107EAB;
   display: block;
   line-height: normal;
   overflow: hidden;
@@ -2140,7 +2134,7 @@ th {
 
 .is-active.accordion__title,
 .button--accordion.is-active {
-  background-color: #0098d0;
+  background-color: #107EAB;
   color: #FFF;
 }
 
@@ -2178,7 +2172,7 @@ a:hover .accordion__title:before, .accordion__title:hover:before, a:hover
 .button--action:after {
   -ms-flex-align: center;
       align-items: center;
-  background-color: #0882B3;
+  background-color: #0E688B;
   color: #FFF;
   display: -ms-flexbox;
   display: flex;
@@ -2224,7 +2218,7 @@ a:hover .accordion__title:before, .accordion__title:hover:before, a:hover
 .button--action.theme-transparent:after,
 .button--action.theme-transparent-alt:after {
   background: none;
-  color: #0098d0;
+  color: #107EAB;
   margin-left: 15px;
   line-height: 0;
   position: static;
@@ -2243,11 +2237,9 @@ a:hover .accordion__title:before, .accordion__title:hover:before, a:hover
   background-color: transparent;
 }
 
-
 .theme-transparent.button--action-before a:hover,
 .theme-transparent.button--action-before:hover,
-.theme-transparent.button--action-before:hover:after,
-.theme-transparent-alt.button--action-before a:hover,
+.theme-transparent.button--action-before:hover:after, .theme-transparent-alt.button--action-before a:hover,
 .theme-transparent-alt.button--action-before:hover,
 .theme-transparent-alt.button--action-before:hover:after,
 .button--action.theme-transparent a:hover,
@@ -2256,7 +2248,7 @@ a:hover .accordion__title:before, .accordion__title:hover:before, a:hover
 .button--action.theme-transparent-alt a:hover,
 .button--action.theme-transparent-alt:hover,
 .button--action.theme-transparent-alt:hover:after {
-  color: #005479;
+  color: #005379;
 }
 
 
@@ -2462,8 +2454,8 @@ a:hover .accordion__title:before, .accordion__title:hover:before, a:hover
   font-weight: 600;
   font-style: normal;
   background-color: transparent;
-  border: 2px solid #0098d0;
-  color: #0098d0;
+  border: 2px solid #107EAB;
+  color: #107EAB;
 }
 
 .button--outline:after {
@@ -2472,7 +2464,7 @@ a:hover .accordion__title:before, .accordion__title:hover:before, a:hover
 }
 
 .button--outline:hover {
-  background-color: #0098d0;
+  background-color: #107EAB;
 }
 
 .island {
@@ -2483,7 +2475,7 @@ a:hover .accordion__title:before, .accordion__title:hover:before, a:hover
   font-size: 0.75rem;
   font-weight: 600;
   font-style: normal;
-  background-color: #0098d0;
+  background-color: #107EAB;
   color: #FFF;
   padding: 0.3em 1em;
   text-transform: uppercase;
@@ -2495,7 +2487,7 @@ a.label {
 }
 
 a.label:hover {
-  background-color: #005479;
+  background-color: #005379;
   color: #FFF;
 }
 
@@ -3295,12 +3287,12 @@ p {
   template: 3_3_links
 */
 a {
-  color: #0098d0;
+  color: #107EAB;
   text-decoration: none;
 }
 
 a:hover {
-  color: #005479;
+  color: #005379;
 }
 
 /*
@@ -3329,7 +3321,7 @@ blockquote p {
   font-size: 1.125rem;
   font-weight: 400;
   font-style: normal;
-  color: #979797;
+  color: #555555;
   line-height: 1.5em;
 }
 
@@ -3372,7 +3364,7 @@ label {
 }
 
 label .is-required {
-  color: #0098d0;
+  color: #107EAB;
   font-size: 1.2em;
   font-weight: 600;
   line-height: 1.2em;
@@ -3397,7 +3389,7 @@ textarea {
   border-radius: 0;
   border: 1px solid #979797;
   color: #555555;
-  outline-color: rgba(0, 152, 208, 0);
+  outline-color: rgba(16, 126, 171, 0);
   outline-offset: -2px;
   outline-style: solid;
   outline-width: 2px;
@@ -3413,7 +3405,7 @@ input[type="text"]:focus,
 input[type="password"]:focus,
 textarea:focus {
   border-color: transparent;
-  outline-color: #0098d0;
+  outline-color: #107eab;
 }
 
 select[disabled], select[disabled]:active, select[disabled]:focus, select[disabled]:hover,
@@ -3492,9 +3484,9 @@ input[type="checkbox"][disabled]:hover + label:before {
 
 input[type="radio"] + label:before {
   font-size: 1rem;
-  border: 1px solid #0098d0;
+  border: 1px solid #107EAB;
   border-radius: 100%;
-  color: #0098d0;
+  color: #107EAB;
   content: "";
   height: 14px;
   margin-right: 10px;
@@ -3505,7 +3497,7 @@ input[type="radio"] + label:before {
 }
 
 input[type="radio"]:checked + label:before {
-  background-color: #0098d0;
+  background-color: #107EAB;
   box-shadow: inset 0 0 0 3px #FFF;
 }
 
@@ -3518,7 +3510,7 @@ input[type="checkbox"] + label:before {
   -moz-osx-font-smoothing: grayscale;
   vertical-align: bottom;
   content: "";
-  color: #0098d0;
+  color: #107EAB;
   left: 1px;
   margin-right: 10px;
 }
@@ -3599,7 +3591,7 @@ dl, ol, ul {
 }
 
 .accordion--dark .accordion__title.ui-state-active {
-  background-color: #0882B3;
+  background-color: #0E688B;
 }
 
 /*
@@ -3655,7 +3647,7 @@ dl, ol, ul {
 .avatar-image {
   background: url("../assets/svg/avatar.svg") no-repeat center center;
   background-size: 65% 65%;
-  color: white;
+  color: #FFF;
   display: inline-block;
   height: 60px;
   width: 60px;
@@ -3672,11 +3664,11 @@ dl, ol, ul {
 }
 
 .avatar-image.is-student {
-  background-color: #7b46a3;
+  background-color: #D14600;
 }
 
 .avatar-image.is-teacher {
-  background-color: #99cc66;
+  background-color: #96BA3C;
 }
 
 /*
@@ -3716,20 +3708,20 @@ dl, ol, ul {
 .breadcrumbs__item a {
   font-weight: 600;
   font-style: normal;
-  color: #0098d0;
+  color: #107EAB;
   letter-spacing: 0.01em;
   text-decoration: none;
   text-transform: uppercase;
 }
 
 .breadcrumbs__item a:hover {
-  color: #0882B3;
+  color: #0E688B;
 }
 
 .breadcrumbs__divider {
   font-weight: 600;
   font-style: normal;
-  color: #0098d0;
+  color: #107EAB;
   display: inline;
   margin-right: 0.5em;
 }
@@ -4020,7 +4012,7 @@ dl, ol, ul {
 }
 
 .carousel-unwrapped__direction-nav a.carousel-unwrapped__prev {
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent 100%);
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0) 100%);
   left: 0;
 }
 
@@ -4036,7 +4028,7 @@ dl, ol, ul {
 }
 
 .carousel-unwrapped__direction-nav a.carousel-unwrapped__next {
-  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent 100%);
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0) 100%);
   right: 0;
 }
 
@@ -4245,11 +4237,11 @@ dl, ol, ul {
 }
 
 .fatmenu li.is-lvl2 > a:hover {
-  color: #005479;
+  color: #005379;
 }
 
 .fatmenu li.is-lvl2 > a.active-trail {
-  color: #005479;
+  color: #005379;
 }
 
 .fatmenu li.is-lvl2 > ul.menu {
@@ -4269,7 +4261,7 @@ dl, ol, ul {
 }
 
 .fatmenu li.is-lvl3 > a:hover, .fatmenu li.is-lvl3 > a.active-trail, .fatmenu li.is-lvl3 > a.active {
-  color: #005479;
+  color: #005379;
 }
 
 .fatmenu li.is-lvl3 > ul.menu {
@@ -4277,11 +4269,11 @@ dl, ol, ul {
 }
 
 .fatmenu__title a {
-  color: #0098d0;
+  color: #107EAB;
 }
 
 .fatmenu__title a:hover {
-  color: #005479;
+  color: #005379;
 }
 
 .fatmenu__title a:after {
@@ -4304,7 +4296,7 @@ dl, ol, ul {
   font-size: 1.25rem;
   -ms-flex-align: center;
       align-items: center;
-  color: #0098d0;
+  color: #107EAB;
   cursor: pointer;
   display: -ms-flexbox;
   display: flex;
@@ -4320,7 +4312,7 @@ dl, ol, ul {
 }
 
 .fatmenu__collapse:hover {
-  color: #005479;
+  color: #005379;
 }
 
 .fatmenu__collapse:before {
@@ -4484,7 +4476,7 @@ dl, ol, ul {
  description:
 */
 .hero {
-  background-color: #0098d0;
+  background-color: #107EAB;
   overflow: hidden;
   position: relative;
 }
@@ -4542,7 +4534,7 @@ dl, ol, ul {
   bottom: 0;
   content: "";
   left: 0;
-  opacity: .4;
+  opacity: .6;
   position: absolute;
   right: 0;
   top: 0;
@@ -4841,7 +4833,7 @@ dl, ol, ul {
   bottom: 0;
   content: "";
   left: 0;
-  opacity: .4;
+  opacity: .6;
   position: absolute;
   right: 0;
   top: 0;
@@ -4970,7 +4962,7 @@ a.highlight:hover .highlight__title {
   bottom: 0;
   content: "";
   left: 0;
-  opacity: .4;
+  opacity: .6;
   position: absolute;
   right: 0;
   top: 0;
@@ -5011,7 +5003,9 @@ a.highlight:hover .highlight__title {
 }
 
 .horizontal-tabs .horizontal-tab-button {
-  border: 1px solid #eaeaea;
+  border-top: 1px solid #107EAB;
+  border-left: 1px solid #D2D2D2;
+  border-right: 1px solid #D2D2D2;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
@@ -5023,15 +5017,15 @@ a.highlight:hover .highlight__title {
 }
 
 .horizontal-tabs .horizontal-tab-button:not(:last-child) {
-  border-right: none;
+  border-right: #D2D2D2;
 }
 
 .horizontal-tabs .horizontal-tab-button > a {
-  font-size: 0.875rem;
+  font-size: 1.125rem;
   -ms-flex-align: center;
       align-items: center;
-  background: #F8F8F8;
-  color: #979797;
+  background: #107EAB;
+  color: #F8F8F8;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
@@ -5046,62 +5040,43 @@ a.highlight:hover .highlight__title {
 }
 
 .horizontal-tabs .horizontal-tab-button > a > strong {
-  font-weight: 400;
+  font-weight: 600;
 }
 
 .horizontal-tabs .horizontal-tab-button > a[href='#programme']:before {
-  display: inline-block;
-  font-family: "hy-icons";
-  font-style: normal;
-  font-weight: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  vertical-align: bottom;
-  content: "";
-  font-size: 2em;
   margin-bottom: 5px;
 }
 
 .horizontal-tabs .horizontal-tab-button > a[href='#applying']:before {
-  display: inline-block;
-  font-family: "hy-icons";
-  font-style: normal;
-  font-weight: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  vertical-align: bottom;
-  content: "";
-  font-size: 2em;
   margin-bottom: 5px;
 }
 
 .horizontal-tabs .horizontal-tab-button > a[href='#organisation']:before {
-  display: inline-block;
-  font-family: "hy-icons";
-  font-style: normal;
-  font-weight: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  vertical-align: bottom;
-  content: "";
-  font-size: 2em;
   margin-bottom: 5px;
 }
 
 .horizontal-tabs .horizontal-tab-button.selected {
-  border-top-color: #0098d0;
+  border-top-color: #107EAB;
   border-bottom-color: transparent;
   z-index: 2;
 }
 
 .horizontal-tabs .horizontal-tab-button.selected a {
   background-color: #FFF;
-  box-shadow: inset 0 3px 0 #0098d0;
-  color: #0098d0;
+  box-shadow: inset 0 3px 0 #107EAB;
+  color: #107EAB;
+}
+
+.horizontal-tabs .horizontal-tab-button.selected:hover {
+  color: #107EAB;
 }
 
 .horizontal-tabs .horizontal-tab-button:hover > a {
-  color: #0098d0;
+  color: #FFF;
+}
+
+.horizontal-tabs .horizontal-tab-button.selected:hover > a {
+  color: #107EAB;
 }
 
 /*
@@ -5320,7 +5295,7 @@ a.highlight:hover .highlight__title {
 }
 
 .index-topical__field a:hover {
-  color: #005479;
+  color: #005379;
 }
 
 .index-topical__content {
@@ -5445,12 +5420,12 @@ td.jobs-listing__date {
   font-size: 0.75rem;
   font-weight: 600;
   font-style: normal;
-  background-color: #0098d0;
+  background-color: #107EAB;
   color: #FFF;
   padding: 0.3em 1em;
   text-transform: uppercase;
-  border-bottom: 1px solid #0098d0;
-  border-top: 1px solid #0098d0;
+  border-bottom: 1px solid #107EAB;
+  border-top: 1px solid #107EAB;
   display: inline-block;
   height: 2.2em;
   position: relative;
@@ -5459,7 +5434,7 @@ td.jobs-listing__date {
 
 .label-row__item.theme-secondary {
   background: none;
-  color: #0098d0;
+  color: #107EAB;
   left: 0;
   padding-right: 0;
   position: absolute;
@@ -5470,13 +5445,13 @@ td.jobs-listing__date {
 }
 
 .label-row__item.theme-yliopisto-lehti {
-  background-color: #fca311;
-  border-color: #fca311;
+  background-color: #D14600;
+  border-color: #D14600;
 }
 
 .label-row__item.theme-yliopisto-lehti.theme-secondary {
   background: none;
-  color: #fca311;
+  color: #D14600;
 }
 
 /*
@@ -5608,7 +5583,7 @@ a.liftup-grid__item:hover .liftup-grid__title {
   bottom: 0;
   content: "";
   left: 0;
-  opacity: .4;
+  opacity: .6;
   position: absolute;
   right: 0;
   top: 0;
@@ -5664,7 +5639,7 @@ a.liftup-grid__item:hover .liftup-grid__title {
   bottom: 0;
   content: "";
   left: 0;
-  opacity: .4;
+  opacity: .6;
   position: absolute;
   right: 0;
   top: 0;
@@ -5759,7 +5734,7 @@ a.liftup-grid__item:hover .liftup-grid__title {
   bottom: 0;
   content: "";
   left: 0;
-  opacity: 0.2;
+  opacity: 0.4;
   position: absolute;
   right: 0;
   top: 0;
@@ -5769,7 +5744,7 @@ a.liftup-grid__item:hover .liftup-grid__title {
 }
 
 .liftup:hover:before {
-  opacity: 0.4;
+  opacity: 0.6;
 }
 
 @media (min-width: 48em) {
@@ -5840,8 +5815,8 @@ a.liftup-grid__item:hover .liftup-grid__title {
 }
 
 .link-grid__item:hover .link-grid__content {
-  border-color: #0098d0;
-  color: #0098d0;
+  border-color: #107EAB;
+  color: #107EAB;
 }
 
 @media (min-width: 48em) {
@@ -5864,7 +5839,7 @@ a.liftup-grid__item:hover .liftup-grid__title {
 
 .link-grid__figure {
   font-size: 3.75rem;
-  color: #0098d0;
+  color: #107EAB;
   font-weight: 700;
   letter-spacing: -1px;
   line-height: 1;
@@ -6227,7 +6202,7 @@ span.links__link.theme-language {
   font-size: 0.9375rem;
   font-weight: 700;
   font-style: normal;
-  color: #0098d0;
+  color: #107EAB;
   display: block;
   line-height: 1.25em;
   letter-spacing: 0.01em;
@@ -6236,7 +6211,7 @@ span.links__link.theme-language {
 }
 
 .main-menu a:hover, .main-menu a.active-trail, .main-menu a.active {
-  color: #005479;
+  color: #005379;
 }
 
 .main-menu > ul.menu {
@@ -6317,7 +6292,7 @@ span.links__link.theme-language {
 }
 
 .main-menu li.is-lvl3 > a:hover, .main-menu li.is-lvl3 > a.active-trail, .main-menu li.is-lvl3 > a.active {
-  color: #005479;
+  color: #005379;
 }
 
 .main-menu li.is-lvl3 > ul.menu {
@@ -6424,12 +6399,12 @@ span.links__link.theme-language {
 }
 
 .is-open > .main-menu__expand:before {
-  color: #0098d0;
+  color: #107EAB;
   transform: rotate3d(1, 0, 0, 180deg);
 }
 
 .is-open > .main-menu__expand:hover:before {
-  color: #005479;
+  color: #005379;
 }
 
 @media (min-width: 62.5em) {
@@ -6536,9 +6511,13 @@ span.links__link.theme-language {
 }
 
 .main-menu-v2__expand {
+  background: none;
+  border: 0;
   bottom: 0;
   cursor: pointer;
   left: 0;
+  margin: 0;
+  padding: 0;
   position: absolute;
   text-align: center;
   top: 2px;
@@ -6693,7 +6672,7 @@ span.links__link.theme-language {
 }
 
 .messages.status {
-  background-color: #b2e576;
+  background-color: #96BA3C;
   color: #222;
 }
 
@@ -6727,7 +6706,7 @@ span.links__link.theme-language {
 }
 
 .messages.info {
-  background-color: #52c6af;
+  background-color: #F9A21A;
   color: #FFF;
 }
 
@@ -6761,7 +6740,7 @@ span.links__link.theme-language {
 }
 
 .messages.error {
-  background-color: #964822;
+  background-color: #A31621;
   color: #FFF;
 }
 
@@ -6771,11 +6750,11 @@ span.links__link.theme-language {
 
 .messages.error.alternative {
   background-color: #f4ece8;
-  color: #964822;
+  color: #A31621;
 }
 
 .messages.error.alternative * {
-  color: #964822;
+  color: #A31621;
 }
 
 .messages.error p:before,
@@ -7281,7 +7260,7 @@ input[type="submit"].search-form__submit {
   background-color: transparent;
   border-radius: 0;
   bottom: 0;
-  color: #0098d0;
+  color: #107EAB;
   height: 3rem;
   padding: 0;
   position: absolute;
@@ -7291,12 +7270,12 @@ input[type="submit"].search-form__submit {
 
 input[type="submit"].search-form__submit:hover,
 .search-form__input:focus + input[type="submit"].search-form__submit {
-  background-color: #0098d0;
+  background-color: #107EAB;
   color: #FFF;
 }
 
 .search-form__input:focus + input[type="submit"].search-form__submit:hover {
-  background-color: #005479;
+  background-color: #005379;
 }
 
 .search-form--dark {
@@ -7318,7 +7297,7 @@ input[type="text"].search-form--dark__input {
 }
 
 input[type="text"].search-form--dark__input:focus {
-  outline-color: #0098d0;
+  outline-color: #107EAB;
 }
 
 input[type="submit"].search-form--dark__submit {
@@ -7344,7 +7323,7 @@ input[type="submit"].search-form--dark__submit {
 }
 
 .search-form--dark__input:focus + input[type="submit"].search-form--dark__submit:hover {
-  color: #0098d0;
+  color: #107EAB;
 }
 
 .search-form-large {
@@ -7382,7 +7361,7 @@ input[type="submit"].search-form--dark__submit {
 input[type="text"].search-form-large__input {
   font-size: 0.9375rem;
   border: 2px solid #F8F8F8;
-  color: #979797;
+  color: #F8F8F8;
   display: block;
   line-height: 1.7em;
   margin-bottom: 30px;
@@ -7485,7 +7464,7 @@ input[type="text"].search-form-large__input {
 }
 
 .search-form--minimal input[type="text"].search-form__input:focus {
-  border-color: #0098d0;
+  border-color: #107EAB;
   outline: none;
 }
 
@@ -7517,7 +7496,7 @@ input[type="text"].search-form-large__input {
 .search-form--minimal .search-form__input:focus + input[type="submit"].search-form__submit:hover,
 .search-form--minimal .search-form__input:focus + input[type="submit"].search-form__submit:active {
   background-color: transparent;
-  color: #0098d0;
+  color: #107EAB;
 }
 
 .search-form-toggle {
@@ -7564,6 +7543,7 @@ input[type="text"].search-form-large__input {
   -ms-flex-align: center;
       align-items: center;
   background-color: transparent;
+  border: 0;
   color: #FFF;
   cursor: pointer;
   display: -ms-flexbox;
@@ -7687,12 +7667,12 @@ input[type="text"].search-form-large__input {
 }
 
 .table-sortable tbody tr td a, .table-sortable tbody tr td a.active {
-  color: #0098d0;
+  color: #107EAB;
   text-decoration: none;
 }
 
 .table-sortable tbody tr td a:hover, .table-sortable tbody tr td a.active:hover {
-  color: #0882B3;
+  color: #0E688B;
   text-decoration: none;
 }
 
@@ -7726,7 +7706,8 @@ input[type="text"].search-form-large__input {
  template: 6_1_2_table-simple
  description:
 */
-.textarea table, .textarea-ingress table, .box-application__table,
+.textarea table,
+.textarea-ingress table, .box-application__table,
 .table-simple {
   font-size: 0.875rem;
 }
@@ -7766,7 +7747,7 @@ input[type="text"].search-form-large__input {
 .table-simple td a.active,
 .table-simple th a,
 .table-simple th a.active {
-  color: #0098d0;
+  color: #107EAB;
   text-decoration: none;
 }
 
@@ -7775,7 +7756,7 @@ input[type="text"].search-form-large__input {
 .table-simple td a.active:hover,
 .table-simple th a:hover,
 .table-simple th a.active:hover {
-  color: #0882B3;
+  color: #0E688B;
   text-decoration: none;
 }
 
@@ -7938,25 +7919,31 @@ input[type="text"].search-form-large__input {
   line-height: 1.5em;
 }
 
-.textarea ul, .textarea ol, .textarea-ingress ul, .textarea-ingress ol {
+.textarea ul, .textarea ol,
+.textarea-ingress ul,
+.textarea-ingress ol {
   margin-bottom: 30px;
 }
 
-.textarea li, .textarea-ingress li {
+.textarea li,
+.textarea-ingress li {
   line-height: 1.5em;
   margin-bottom: 0.5em;
 }
 
-.textarea ul, .textarea-ingress ul {
+.textarea ul,
+.textarea-ingress ul {
   padding-left: 2em;
   position: relative;
 }
 
-.textarea ul li, .textarea-ingress ul li {
+.textarea ul li,
+.textarea-ingress ul li {
   list-style-type: none;
 }
 
-.textarea ul li:before, .textarea-ingress ul li:before {
+.textarea ul li:before,
+.textarea-ingress ul li:before {
   font-size: 0.5625rem;
   display: inline-block;
   font-family: "hy-icons";
@@ -7971,17 +7958,20 @@ input[type="text"].search-form-large__input {
   position: absolute;
 }
 
-.textarea ol, .textarea-ingress ol {
+.textarea ol,
+.textarea-ingress ol {
   counter-reset: item;
   padding-left: 2em;
   position: relative;
 }
 
-.textarea ol li, .textarea-ingress ol li {
+.textarea ol li,
+.textarea-ingress ol li {
   display: block;
 }
 
-.textarea ol li:before, .textarea-ingress ol li:before {
+.textarea ol li:before,
+.textarea-ingress ol li:before {
   font-family: 'Open Sans', Helvetica, Arial, sans-serif;
   font-weight: 700;
   font-style: normal;
@@ -7991,25 +7981,46 @@ input[type="text"].search-form-large__input {
   position: absolute;
 }
 
-.textarea h1, .textarea h2, .textarea h3, .textarea h4, .textarea legend, .textarea .logo-block__content .logo-block__sitename, .logo-block__content .textarea .logo-block__sitename, .textarea h5, .textarea h6, .textarea-ingress h1, .textarea-ingress h2, .textarea-ingress h3, .textarea-ingress h4, .textarea-ingress legend, .textarea-ingress .logo-block__content .logo-block__sitename, .logo-block__content .textarea-ingress .logo-block__sitename, .textarea-ingress h5, .textarea-ingress h6 {
+.textarea h1, .textarea h2, .textarea h3, .textarea h4, .textarea legend, .textarea .logo-block__content .logo-block__sitename, .logo-block__content .textarea .logo-block__sitename, .textarea h5, .textarea h6,
+.textarea-ingress h1,
+.textarea-ingress h2,
+.textarea-ingress h3,
+.textarea-ingress h4,
+.textarea-ingress legend,
+.textarea-ingress .logo-block__content .logo-block__sitename,
+.logo-block__content .textarea-ingress .logo-block__sitename,
+.textarea-ingress h5,
+.textarea-ingress h6 {
   margin-top: 32px;
 }
 
-.textarea h1:first-child, .textarea h2:first-child, .textarea h3:first-child, .textarea h4:first-child, .textarea legend:first-child, .textarea .logo-block__content .logo-block__sitename:first-child, .logo-block__content .textarea .logo-block__sitename:first-child, .textarea h5:first-child, .textarea h6:first-child, .textarea-ingress h1:first-child, .textarea-ingress h2:first-child, .textarea-ingress h3:first-child, .textarea-ingress h4:first-child, .textarea-ingress legend:first-child, .textarea-ingress .logo-block__content .logo-block__sitename:first-child, .logo-block__content .textarea-ingress .logo-block__sitename:first-child, .textarea-ingress h5:first-child, .textarea-ingress h6:first-child {
+.textarea h1:first-child, .textarea h2:first-child, .textarea h3:first-child, .textarea h4:first-child, .textarea legend:first-child, .textarea .logo-block__content .logo-block__sitename:first-child, .logo-block__content .textarea .logo-block__sitename:first-child, .textarea h5:first-child, .textarea h6:first-child,
+.textarea-ingress h1:first-child,
+.textarea-ingress h2:first-child,
+.textarea-ingress h3:first-child,
+.textarea-ingress h4:first-child,
+.textarea-ingress legend:first-child,
+.textarea-ingress .logo-block__content .logo-block__sitename:first-child,
+.logo-block__content .textarea-ingress .logo-block__sitename:first-child,
+.textarea-ingress h5:first-child,
+.textarea-ingress h6:first-child {
   margin-top: 0;
 }
 
-.textarea a, .textarea-ingress a {
+.textarea a,
+.textarea-ingress a {
   word-wrap: break-word;
 }
 
-.textarea table, .textarea-ingress table {
+.textarea table,
+.textarea-ingress table {
   line-height: normal;
   margin-bottom: 2em;
 }
 
 @media (min-width: 48em) {
-  .textarea .dropcap, .textarea-ingress .dropcap {
+  .textarea .dropcap,
+  .textarea-ingress .dropcap {
     font-size: 4.6875rem;
     font-weight: 700;
     font-style: normal;
@@ -8263,12 +8274,12 @@ input[type="text"].search-form-large__input {
 }
 
 .box-application__td a, .box-application__td a.active {
-  color: #0098d0;
+  color: #107EAB;
   text-decoration: none;
 }
 
 .box-application__td a:hover, .box-application__td a.active:hover {
-  color: #0882B3;
+  color: #0E688B;
   text-decoration: none;
 }
 
@@ -8524,7 +8535,7 @@ input[type="text"].search-form-large__input {
 }
 
 .box-data.theme-orange .box-data__left {
-  background-color: #fca311;
+  background-color: #F9A21A;
 }
 
 .box-data.theme-black .box-data__left {
@@ -8891,7 +8902,7 @@ input[type="text"].search-form-large__input {
 */
 
 .box-liftup {
-  background-color: #0882B3;
+  background-color: #0E688B;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: row;
@@ -8906,7 +8917,7 @@ input[type="text"].search-form-large__input {
 
 
 .box-liftup:hover {
-  background-color: #005479;
+  background-color: #005379;
 }
 
 @media (min-width: 48em) {
@@ -9061,7 +9072,7 @@ input[type="text"].search-form-large__input {
 
 .box-story.theme-plain-alt .box-story__label {
   background: #FFF;
-  color: #0882B3;
+  color: #0E688B;
 }
 
 .box-story.theme-plain-alt .box-story__link {
@@ -9141,7 +9152,7 @@ input[type="text"].search-form-large__input {
   font-size: 0.75rem;
   font-weight: 600;
   font-style: normal;
-  background-color: #0098d0;
+  background-color: #107EAB;
   color: #FFF;
   padding: 0.3em 1em;
   text-transform: uppercase;
@@ -9157,7 +9168,7 @@ input[type="text"].search-form-large__input {
 }
 
 .box-story__label.theme-yliopisto-lehti {
-  background-color: #fca311;
+  background-color: #F9A21A;
 }
 
 .box-story__image {
@@ -9252,7 +9263,7 @@ input[type="text"].search-form-large__input {
 }
 
 .box-story__meta-item a:hover {
-  color: #005479;
+  color: #005379;
 }
 
 .box-story__title {
@@ -9275,7 +9286,7 @@ input[type="text"].search-form-large__input {
 
 .box-story__link-wrapper:active .box-story__title,
 .box-story__link-wrapper:hover .box-story__title {
-  color: #005479;
+  color: #005379;
 }
 
 .box-story__content {
@@ -9369,7 +9380,7 @@ input[type="text"].search-form-large__input {
  description: Box story variant for topical items like news stories. ".theme-plain" modifier is for pictureless topical stories.
 */
 .box-story--topical.theme-plain {
-  background-color: #0882B3;
+  background-color: #0E688B;
   padding: 3.5em 1.5em;
 }
 
@@ -9403,7 +9414,7 @@ input[type="text"].search-form-large__input {
 
 .box-story--topical.theme-plain .box-story__label {
   background: #FFF;
-  color: #0098d0;
+  color: #107EAB;
 }
 
 .box-story--topical.theme-plain .box-story__link {
@@ -9413,7 +9424,7 @@ input[type="text"].search-form-large__input {
 }
 
 .box-story--topical.theme-plain:hover {
-  background-color: #005479;
+  background-color: #005379;
 }
 
 /*
@@ -9481,7 +9492,7 @@ input[type="text"].search-form-large__input {
 }
 
 .box-story--constrained .box-story__title:hover {
-  color: #005479;
+  color: #005379;
 }
 
 /*
@@ -9705,7 +9716,7 @@ input[type="text"].search-form-large__input {
   vertical-align: bottom;
   content: "";
   font-size: 0.75rem;
-  color: #0098d0;
+  color: #107EAB;
   margin-left: 0.75em;
   vertical-align: middle;
 }
diff --git a/fonts/hy-icons.eot b/fonts/hy-icons.eot
index ed3f79bbdc71b85d7dde43d5a7e0e3b7ad0ac7d6..7c251cd9122f41f12f7d458d20b133a8083d6a96 100644
GIT binary patch
delta 58
zcmdmSi*d&-#tAkovk#pSoanHFMP%kW>4|@)$OxV}G&`Q(<|_j?^9u$bxDjWv21ajQ
I!`PDz0MVir!vFvP

delta 58
zcmdmSi*d&-#tAko!DpU`Omx`6BFwwee&U}gG9pjT1jqB+d}ZKfe!&0)*Jl{n!RXCv
H7<;k-vGWz7

diff --git a/fonts/hy-icons.ttf b/fonts/hy-icons.ttf
index c2addec206784f698ff862306933cc04d79be3d0..48a69fce6f4cb8e6d90c843d0a054a9d24a4a99f 100644
GIT binary patch
delta 50
xcmbPmlW_tN1+a+BTqiv-WQvU7nM1SV`E9;3a5KMP0D>EFCTn2yW){YtYyjNW5pDng

delta 50
xcmbPmlW_tN1+WP7uC$*RGDSw@$(i7Iew(ih+{`Z+fZ+NJBRd$qnT4?@8vw)|5N`kg

diff --git a/fonts/hy-icons.woff b/fonts/hy-icons.woff
index bda13650e0048e9b42e0c858415f25bb0df546b4..37545fa75e8c189d9f444dbc76c4ccd15975b03d 100644
GIT binary patch
delta 65
zcmV-H0KWgMg8{6A0g#LY6q&9Yv5=WMD#254*T?hQd}ZKfegPC=xDjWv21ft?{r@}5
XVdm#RE(Ze>NE85!9}ecTQ#)A(<RKiv

delta 65
zcmV-H0KWgMg8{6A0g#LY6Ah_9v5=WMDv?Lu)8qMVzA|t#zW|CbT%TcN2c!T0{{Nlj
XF!OUDmxF-`Bnkk1eGXN#Q#)A(+3Xz>

diff --git a/gulpfile.js b/gulpfile.js
index f8dc184..4bc18aa 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -135,7 +135,7 @@ gulp.task('serve', ['build'], function () {
       baseDir: './'
     }
   });
-  gulp.watch(['./sass/**/*.scss', './templates/**/*.html'], ['build']);
+  gulp.watch(['./sass/**/*.scss', '!./sass/icons/**/*.scss', './templates/**/*.html'], ['build']);
 
   gulp.watch(['index.html']).on('change', browserSync.reload);
 });
diff --git a/sass/common-elements/_common-elements.scss b/sass/common-elements/_common-elements.scss
index e847917..b914ca5 100644
--- a/sass/common-elements/_common-elements.scss
+++ b/sass/common-elements/_common-elements.scss
@@ -146,7 +146,7 @@ blockquote,
 blockquote p {
   @include font-size(18px, 16px);
   @include font-weight-book;
-  color: $silver;
+  color: $lightgray;
   line-height: 1.5em;
 }
 
diff --git a/sass/components/_avatar.scss b/sass/components/_avatar.scss
index c5daa3f..20fa1de 100644
--- a/sass/components/_avatar.scss
+++ b/sass/components/_avatar.scss
@@ -14,7 +14,7 @@
 .avatar-image {
   background: url("../assets/svg/avatar.svg") no-repeat center center;
   background-size: 65% 65%;
-  color: white;
+  color: $white;
   display: inline-block;
   height: 60px;
   width: 60px;
@@ -30,10 +30,10 @@
   }
 
   &.is-student {
-    background-color: #7b46a3;
+    background-color: $darkorange;
   }
 
   &.is-teacher {
-    background-color: #99cc66;
+    background-color: $green;
   }
 }
diff --git a/sass/components/_hero.scss b/sass/components/_hero.scss
index 30d1c53..b13449f 100644
--- a/sass/components/_hero.scss
+++ b/sass/components/_hero.scss
@@ -56,7 +56,7 @@
     bottom: 0;
     content: "";
     left: 0;
-    opacity: .4;
+    opacity: .6;
     position: absolute;
     right: 0;
     top: 0;
@@ -307,7 +307,7 @@
     bottom: 0;
     content: "";
     left: 0;
-    opacity: .4;
+    opacity: .6;
     position: absolute;
     right: 0;
     top: 0;
diff --git a/sass/components/_highlight.scss b/sass/components/_highlight.scss
index 722ce7f..9c74d51 100644
--- a/sass/components/_highlight.scss
+++ b/sass/components/_highlight.scss
@@ -67,7 +67,7 @@ a.highlight:hover {
     bottom: 0;
     content: "";
     left: 0;
-    opacity: .4;
+    opacity: .6;
     position: absolute;
     right: 0;
     top: 0;
diff --git a/sass/components/_horizontal-tabs.scss b/sass/components/_horizontal-tabs.scss
index 6938a62..3f7644f 100644
--- a/sass/components/_horizontal-tabs.scss
+++ b/sass/components/_horizontal-tabs.scss
@@ -28,7 +28,9 @@
   }
 
   .horizontal-tab-button {
-    border: 1px solid #eaeaea;
+    border-top: 1px solid $blue;
+    border-left: 1px solid $mediumsilver;
+    border-right: 1px solid $mediumsilver;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -36,14 +38,14 @@
     text-align: center;
 
     &:not(:last-child) {
-      border-right: none;
+      border-right: $mediumsilver;
     }
 
     > a {
-      @include font-size(14px);
+      @include font-size(18px);
       align-items: center;
-      background: $lightsilver;
-      color: $silver;
+      background: $blue;
+      color: $lightsilver;
       display: flex;
       flex-direction: column;
       font-weight: 600;
@@ -54,29 +56,23 @@
       transition-property: color, background-color;
 
       > strong {
-        font-weight: 400;
+        font-weight: 600;
       }
 
       &[href='#programme'] {
         &:before {
-          @include icon($icon-todo-list);
-          font-size: 2em;
           margin-bottom: 5px;
         }
       }
 
       &[href='#applying'] {
         &:before {
-          @include icon($icon-edit-event);
-          font-size: 2em;
           margin-bottom: 5px;
         }
       }
 
       &[href='#organisation'] {
         &:before {
-          @include icon($icon-units-and-faculties);
-          font-size: 2em;
           margin-bottom: 5px;
         }
       }
@@ -92,9 +88,17 @@
         box-shadow: inset 0 3px 0 $blue;
         color: $blue;
       }
+
+      &:hover {
+        color: $blue;
+      }
     }
 
     &:hover > a {
+      color: $white;
+    }
+
+    &.selected:hover > a {
       color: $blue;
     }
   }
diff --git a/sass/components/_label-row.scss b/sass/components/_label-row.scss
index 4125aa0..1accf09 100644
--- a/sass/components/_label-row.scss
+++ b/sass/components/_label-row.scss
@@ -31,12 +31,12 @@
   }
 
   &.theme-yliopisto-lehti {
-    background-color: $orange;
-    border-color: $orange;
+    background-color: $darkorange;
+    border-color: $darkorange;
 
     &.theme-secondary {
       background: none;
-      color: $orange;
+      color: $darkorange;
     }
   }
 }
diff --git a/sass/components/_liftup-grid.scss b/sass/components/_liftup-grid.scss
index cb323a1..ad136c3 100644
--- a/sass/components/_liftup-grid.scss
+++ b/sass/components/_liftup-grid.scss
@@ -106,7 +106,7 @@ a.liftup-grid__item:hover {
     bottom: 0;
     content: "";
     left: 0;
-    opacity: .4;
+    opacity: .6;
     position: absolute;
     right: 0;
     top: 0;
diff --git a/sass/components/_liftup-mosaic.scss b/sass/components/_liftup-mosaic.scss
index 57efba4..890d331 100644
--- a/sass/components/_liftup-mosaic.scss
+++ b/sass/components/_liftup-mosaic.scss
@@ -33,7 +33,7 @@
     bottom: 0;
     content: "";
     left: 0;
-    opacity: .4;
+    opacity: .6;
     position: absolute;
     right: 0;
     top: 0;
diff --git a/sass/components/_liftup.scss b/sass/components/_liftup.scss
index 747612a..19d2add 100644
--- a/sass/components/_liftup.scss
+++ b/sass/components/_liftup.scss
@@ -16,7 +16,7 @@
     bottom: 0;
     content: "";
     left: 0;
-    opacity: 0.2;
+    opacity: 0.4;
     position: absolute;
     right: 0;
     top: 0;
@@ -26,7 +26,7 @@
   }
 
   &:hover:before {
-    opacity: 0.4;
+    opacity: 0.6;
   }
 
   @include breakpoint($small) {
diff --git a/sass/components/_messages.scss b/sass/components/_messages.scss
index ff77914..08f314e 100644
--- a/sass/components/_messages.scss
+++ b/sass/components/_messages.scss
@@ -8,21 +8,21 @@ $messages: (
   "status": (
     "color": $black,
     "color-alt": #81b43b,
-    "bg-color": #b2e576,
+    "bg-color": $green,
     "bg-color-alt": #f2f7eb,
     "icon": $icon-done,
   ),
   "info": (
     "color": $white,
     "color-alt": $black,
-    "bg-color": #52c6af,
+    "bg-color": $orange,
     "bg-color-alt": #f8f8f8,
     "icon": $icon-info,
   ),
   "error": (
     "color": $white,
-    "color-alt": #964822,
-    "bg-color": #964822,
+    "color-alt": $redalert,
+    "bg-color": $redalert,
     "bg-color-alt": #f4ece8,
     "icon": $icon-warning,
   )
diff --git a/sass/components/_search-form.scss b/sass/components/_search-form.scss
index 24688df..1a92a7d 100644
--- a/sass/components/_search-form.scss
+++ b/sass/components/_search-form.scss
@@ -117,7 +117,7 @@ input[type="submit"].search-form--dark__submit {
 input[type="text"].search-form-large__input {
   @include font-size(15px);
   border: 2px solid $lightsilver;
-  color: $silver;
+  color: $lightsilver;
   display: block;
   line-height: 1.7em;
   margin-bottom: $vert-spacing-unit;
diff --git a/sass/variables/_colors.scss b/sass/variables/_colors.scss
index 623dc24..80da754 100644
--- a/sass/variables/_colors.scss
+++ b/sass/variables/_colors.scss
@@ -22,9 +22,9 @@ $pitchblack: #000;
  color-list: list
  colors: $blue, $blue--active, $darkblue, $darkblue--active, $lightsilver, $mediumsilver, $silver, $lightgray, $darkgray, $red, $orange
 */
-$blue: #0098d0;
-$blue--active: #0882B3;
-$darkblue: #005479;
+$blue: #107EAB;
+$blue--active: #0E688B;
+$darkblue: #005379;
 $darkblue--active: #003146;
 
 $lightsilver: #F8F8F8;
@@ -34,4 +34,10 @@ $lightgray: #555555;
 $darkgray: #424242;
 
 $red: #e5053a;
-$orange: #fca311;
+$redalert: #A31621;
+$purple: #420039;
+$orange: #F9A21A;
+$darkorange: #D14600;
+
+$green: #96BA3C;
+$darkgreen: #006400;

From 1e7c5416d3263c410183459ef5ef342b269c04f6 Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Fri, 11 Jan 2019 15:50:01 +0200
Subject: [PATCH 2/8] Minor hero adjustments, changed search-form placeholder
 color and button color

---
 css/styles.css                    |  12 ++++++++++--
 fonts/hy-icons.eot                | Bin 27960 -> 27960 bytes
 fonts/hy-icons.ttf                | Bin 27792 -> 27792 bytes
 fonts/hy-icons.woff               | Bin 16812 -> 16812 bytes
 sass/components/_hero.scss        |   2 +-
 sass/components/_search-form.scss |   4 ++++
 sass/objects/_button.scss         |   2 +-
 7 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index ed54a61..6c3346e 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2078,7 +2078,7 @@ th {
  description:
 */
 .button--small {
-  background-color: #F8F8F8;
+  background-color: #D2D2D2;
   color: #222;
   line-height: 1;
   padding: .4em .7em;
@@ -4534,7 +4534,7 @@ dl, ol, ul {
   bottom: 0;
   content: "";
   left: 0;
-  opacity: .6;
+  opacity: .8;
   position: absolute;
   right: 0;
   top: 0;
@@ -7300,6 +7300,14 @@ input[type="text"].search-form--dark__input:focus {
   outline-color: #107EAB;
 }
 
+input[type="text"].search-form--dark__input:-ms-input-placeholder {
+  color: #F8F8F8;
+}
+
+input[type="text"].search-form--dark__input::placeholder {
+  color: #F8F8F8;
+}
+
 input[type="submit"].search-form--dark__submit {
   display: inline-block;
   font-family: "hy-icons";
diff --git a/fonts/hy-icons.eot b/fonts/hy-icons.eot
index 7c251cd9122f41f12f7d458d20b133a8083d6a96..8dae3bcb930b8111a1bcca68eb24bd64485c7492 100644
GIT binary patch
delta 52
zcmdmSi*d&-#tAk|%o!8y_AuQ}pZI5*R0eZAzs*+$Zsr#ZKyV|@I|xQ^Uc=av4FC-0
B5@`Sc

delta 52
zcmdmSi*d&-#tAk|vky(Q+rzX@dg7mHQio>8^V@u7;AVco00cMUOxD2Y&1)EYvH?ZK
B6j}fP

diff --git a/fonts/hy-icons.ttf b/fonts/hy-icons.ttf
index 48a69fce6f4cb8e6d90c843d0a054a9d24a4a99f..0182aabc4f1664b6644034873b878225cdee308a 100644
GIT binary patch
delta 46
tcmbPmlW_tN1u@-DpBOStDuX$m-{va=H}eYyAh;3d9R#B{voQ8#0|0^A4&?v<

delta 46
tcmbPmlW_tN1u?CYo)|Js>d@?Xew(ih+{`Z+fZ#@)$r>2FnT4?@8vv4R599y<

diff --git a/fonts/hy-icons.woff b/fonts/hy-icons.woff
index 37545fa75e8c189d9f444dbc76c4ccd15975b03d..258b92fdedb769d3e5f23ad2ee2853b47f31b27a 100644
GIT binary patch
delta 61
zcmV-D0K)&Qg8{6A0g#RY+h?(mn>r|y#pC&HzA|t#zW|Cb+=%lIg3<qf|NqW%nE5%7
T%fY||5(NNPLk(`TQ#)A(!ABjK

delta 61
zcmV-D0K)&Qg8{6A0g#RYt{btCn>r|O*T?hQd}ZKfegPC=xDjWv21ft?{r@}5Vdm#R
TE(Ze>NE85!9}ecTQ#)A(czqiH

diff --git a/sass/components/_hero.scss b/sass/components/_hero.scss
index b13449f..c45ff58 100644
--- a/sass/components/_hero.scss
+++ b/sass/components/_hero.scss
@@ -56,7 +56,7 @@
     bottom: 0;
     content: "";
     left: 0;
-    opacity: .6;
+    opacity: .8;
     position: absolute;
     right: 0;
     top: 0;
diff --git a/sass/components/_search-form.scss b/sass/components/_search-form.scss
index 1a92a7d..63025c7 100644
--- a/sass/components/_search-form.scss
+++ b/sass/components/_search-form.scss
@@ -80,6 +80,10 @@ input[type="text"].search-form--dark__input {
   &:focus {
     outline-color: $blue;
   }
+
+  &::placeholder {
+    color: $lightsilver;
+  }
 }
 
 input[type="submit"].search-form--dark__submit {
diff --git a/sass/objects/_button.scss b/sass/objects/_button.scss
index cc01ade..1db914f 100644
--- a/sass/objects/_button.scss
+++ b/sass/objects/_button.scss
@@ -65,7 +65,7 @@
 
 .button--small {
   @extend %button;
-  background-color: $lightsilver;
+  background-color: $mediumsilver;
   color: $black;
   line-height: 1;
   padding: .4em .7em;

From a09096a50f52a66b76a104abb4cee5dc35d18a97 Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Mon, 14 Jan 2019 11:51:30 +0200
Subject: [PATCH 3/8] Changed opacity

---
 css/styles.css               | 2 +-
 sass/components/_liftup.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 6c3346e..5389fe5 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -5734,7 +5734,7 @@ a.liftup-grid__item:hover .liftup-grid__title {
   bottom: 0;
   content: "";
   left: 0;
-  opacity: 0.4;
+  opacity: 0.6;
   position: absolute;
   right: 0;
   top: 0;
diff --git a/sass/components/_liftup.scss b/sass/components/_liftup.scss
index 19d2add..9fd30c7 100644
--- a/sass/components/_liftup.scss
+++ b/sass/components/_liftup.scss
@@ -16,7 +16,7 @@
     bottom: 0;
     content: "";
     left: 0;
-    opacity: 0.4;
+    opacity: 0.6;
     position: absolute;
     right: 0;
     top: 0;

From 8b8b64eee8cf87787603022766e89b992d22c9b2 Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Mon, 14 Jan 2019 12:01:45 +0200
Subject: [PATCH 4/8] Box hero shadow opacity change

---
 css/styles.css                     | 2 +-
 sass/components/box/_box-hero.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 5389fe5..0fe1b66 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -8702,7 +8702,7 @@ input[type="text"].search-form-large__input {
 .box-hero__shadow {
   background: none;
   background: #000;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.6);
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
   display: inline;
diff --git a/sass/components/box/_box-hero.scss b/sass/components/box/_box-hero.scss
index 8e926f3..ddd1ef4 100644
--- a/sass/components/box/_box-hero.scss
+++ b/sass/components/box/_box-hero.scss
@@ -92,7 +92,7 @@
 .box-hero__shadow {
   background: none;
   background: #000;
-  background: rgba(#000, 0.4);
+  background: rgba(#000, 0.6);
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
   display: inline;

From 925e2cde7f3196a626e1bea1aa4baee53968d0fe Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Mon, 14 Jan 2019 12:43:05 +0200
Subject: [PATCH 5/8] Added new colors to color listing

---
 css/styles.css              | 2 +-
 sass/variables/_colors.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 0fe1b66..d8bf9d4 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -416,7 +416,7 @@ th {
  title: Other colors
  description: The colors used through out the theme.
  color-list: list
- colors: $blue, $blue--active, $darkblue, $darkblue--active, $lightsilver, $mediumsilver, $silver, $lightgray, $darkgray, $red, $orange
+ colors: $blue, $blue--active, $darkblue, $darkblue--active, $lightsilver, $mediumsilver, $silver, $lightgray, $darkgray, $red, $redalert, $purple, $orange, $darkorange, $green, $darkgreen
 */
 @font-face {
   font-family: 'Open Sans';
diff --git a/sass/variables/_colors.scss b/sass/variables/_colors.scss
index 80da754..0cb8531 100644
--- a/sass/variables/_colors.scss
+++ b/sass/variables/_colors.scss
@@ -20,7 +20,7 @@ $pitchblack: #000;
  title: Other colors
  description: The colors used through out the theme.
  color-list: list
- colors: $blue, $blue--active, $darkblue, $darkblue--active, $lightsilver, $mediumsilver, $silver, $lightgray, $darkgray, $red, $orange
+ colors: $blue, $blue--active, $darkblue, $darkblue--active, $lightsilver, $mediumsilver, $silver, $lightgray, $darkgray, $red, $redalert, $purple, $orange, $darkorange, $green, $darkgreen
 */
 $blue: #107EAB;
 $blue--active: #0E688B;

From 6bdf70b17fb8ad50c166166970425fd616d687d0 Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Mon, 14 Jan 2019 13:00:09 +0200
Subject: [PATCH 6/8] Few color tweaks

---
 css/styles.css                             | 14 ++++++++++----
 sass/common-elements/_common-elements.scss |  3 ++-
 sass/components/_messages.scss             |  2 +-
 sass/objects/_button.scss                  |  6 +++++-
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index d8bf9d4..a37ce2b 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2086,7 +2086,7 @@ th {
 
 .button--small:focus, .button--small:hover {
   background-color: #979797;
-  color: #FFF;
+  color: #222;
 }
 
 .button--small:active, .button--small.is-active {
@@ -2145,6 +2145,11 @@ th {
   color: #FFF;
 }
 
+.accordion__title:hover,
+.button--accordion:hover {
+  border: 2px solid #005379;
+}
+
 a:hover .accordion__title:before, .accordion__title:hover:before, a:hover
 .button--accordion:before,
 .button--accordion:hover:before {
@@ -3376,7 +3381,8 @@ input[type="submit"] {
 }
 
 input[type="submit"][disabled], input[type="submit"][disabled]:active, input[type="submit"][disabled]:focus, input[type="submit"][disabled]:hover {
-  background-color: #F8F8F8;
+  background-color: #D2D2D2;
+  color: #555555;
 }
 
 select,
@@ -6707,11 +6713,11 @@ span.links__link.theme-language {
 
 .messages.info {
   background-color: #F9A21A;
-  color: #FFF;
+  color: #222;
 }
 
 .messages.info * {
-  color: #FFF;
+  color: #222;
 }
 
 .messages.info.alternative {
diff --git a/sass/common-elements/_common-elements.scss b/sass/common-elements/_common-elements.scss
index b914ca5..96c53d2 100644
--- a/sass/common-elements/_common-elements.scss
+++ b/sass/common-elements/_common-elements.scss
@@ -198,7 +198,8 @@ input[type="submit"] {
   &[disabled]:active,
   &[disabled]:focus,
   &[disabled]:hover {
-    background-color: $lightsilver;
+    background-color: $mediumsilver;
+    color: $lightgray;
   }
 }
 
diff --git a/sass/components/_messages.scss b/sass/components/_messages.scss
index 08f314e..a29ab59 100644
--- a/sass/components/_messages.scss
+++ b/sass/components/_messages.scss
@@ -13,7 +13,7 @@ $messages: (
     "icon": $icon-done,
   ),
   "info": (
-    "color": $white,
+    "color": $black,
     "color-alt": $black,
     "bg-color": $orange,
     "bg-color-alt": #f8f8f8,
diff --git a/sass/objects/_button.scss b/sass/objects/_button.scss
index 1db914f..c4bb896 100644
--- a/sass/objects/_button.scss
+++ b/sass/objects/_button.scss
@@ -73,7 +73,7 @@
   &:focus,
   &:hover {
     background-color: $silver;
-    color: $white;
+    color: $black;
   }
 
   &:active,
@@ -119,6 +119,10 @@
     }
   }
 
+  &:hover {
+    border: 2px solid $darkblue;
+  }
+
   a:hover &:before,
   &:hover:before {
     color: $white;

From 60d2d936bd06bae85121d1a3af95095955e1563a Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Mon, 14 Jan 2019 13:03:31 +0200
Subject: [PATCH 7/8] Dropped hero big overlay opacity from 80 to 60

---
 css/styles.css             | 2 +-
 sass/components/_hero.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index a37ce2b..a63f89f 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -4540,7 +4540,7 @@ dl, ol, ul {
   bottom: 0;
   content: "";
   left: 0;
-  opacity: .8;
+  opacity: .6;
   position: absolute;
   right: 0;
   top: 0;
diff --git a/sass/components/_hero.scss b/sass/components/_hero.scss
index c45ff58..b13449f 100644
--- a/sass/components/_hero.scss
+++ b/sass/components/_hero.scss
@@ -56,7 +56,7 @@
     bottom: 0;
     content: "";
     left: 0;
-    opacity: .8;
+    opacity: .6;
     position: absolute;
     right: 0;
     top: 0;

From fb4323ed94f615473e48e164e5269cfbdb936c04 Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Mon, 14 Jan 2019 13:24:25 +0200
Subject: [PATCH 8/8] Box story label color

---
 css/styles.css                      | 2 +-
 sass/components/box/_box-story.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index a63f89f..a122e0f 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -9182,7 +9182,7 @@ input[type="text"].search-form-large__input {
 }
 
 .box-story__label.theme-yliopisto-lehti {
-  background-color: #F9A21A;
+  background-color: #D14600;
 }
 
 .box-story__image {
diff --git a/sass/components/box/_box-story.scss b/sass/components/box/_box-story.scss
index b3556bc..c9a9922 100644
--- a/sass/components/box/_box-story.scss
+++ b/sass/components/box/_box-story.scss
@@ -139,7 +139,7 @@
   }
 
   &.theme-yliopisto-lehti {
-    background-color: $orange;
+    background-color: $darkorange;
   }
 }