Issue 4462 - Update styles on Eyeo.com to match new logo

static/css/styles.css

 /*
  * Fonts

[juliandoucette, 2017/01/10 20:26:39]

We should prefer local("Source Sans Pro") over url("...")

  */
 
-@font-face {
-  font-family: "Source Sans Pro";
+@font-face
+{
+  font-family: 'Source Sans Pro';
   font-weight: 300;
   font-style: normal;
-  src: url("/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.eot");
-  src: url("/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.eot?#iefix") format("embedded-opentype"), local("Source Sans Pro Light"), local("Source-Sans-Pro-300"), url("/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.woff2") format("woff2"), url("/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.woff") format("woff"), url("/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.ttf") format("truetype"), url("/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.svg#SourceSansPro") format("svg"); }
-
-@font-face {
-  font-family: "Source Sans Pro";
+  font-stretch: normal;
+  src: local('Source Sans Pro Light'),
+    local('SourceSansPro-Light'),
+    url('../fonts/SourceSansPro-Light.eot') format('embedded-opentype'),
+    url('../fonts/SourceSansPro-Light.ttf.woff2') format('woff2'),
+    url('../fonts/SourceSansPro-Light.otf.woff') format('woff'),
+    url('../fonts/SourceSansPro-Light.otf') format('opentype'),
+    url('../fonts/SourceSansPro-Light.ttf') format('truetype');
+}
+
+@font-face
+{
+  font-family: 'Source Sans Pro';
+  font-weight: 300;
+  font-style: italic;
+  font-stretch: normal;
+  src: local('Source Sans Pro Light Italic'),
+    local('SourceSansPro-LightIt'),
+    url('../fonts/SourceSansPro-LightIt.eot') format('embedded-opentype'),
+    url('../fonts/SourceSansPro-LightIt.ttf.woff2') format('woff2'),
+    url('../fonts/SourceSansPro-LightIt.otf.woff') format('woff'),
+    url('../fonts/SourceSansPro-LightIt.otf') format('opentype'),
+    url('../fonts/SourceSansPro-LightIt.ttf') format('truetype');
+}
+
+@font-face
+{
+  font-family: 'Source Sans Pro';
   font-weight: 400;
   font-style: normal;
-  src: url("/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.eot");
-  src: url("/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.eot?#iefix") format("embedded-opentype"), local("Source Sans Pro"), local("Source-Sans-Pro-regular"), url("/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.woff2") format("woff2"), url("/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.woff") format("woff"), url("/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.ttf") format("truetype"), url("/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.svg#SourceSansPro") format("svg"); }
-
-@font-face {
-  font-family: "Source Sans Pro";
-  font-weight: 700;
-  font-style: normal;
-  src: url("/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.eot");
-  src: url("/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.eot?#iefix") format("embedded-opentype"), local("Source Sans Pro Bold"), local("Source-Sans-Pro-700"), url("/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.woff2") format("woff2"), url("/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.woff") format("woff"), url("/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.ttf") format("truetype"), url("/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.svg#SourceSansPro") format("svg"); }
+  font-stretch: normal;
+  src: local('Source Sans Pro'),
+    local('SourceSansPro-Regular'),
+    url('../fonts/SourceSansPro-Regular.eot') format('embedded-opentype'),
+    url('../fonts/SourceSansPro-Regular.ttf.woff2') format('woff2'),
+    url('../fonts/SourceSansPro-Regular.otf.woff') format('woff'),
+    url('../fonts/SourceSansPro-Regular.otf') format('opentype'),
+    url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
+}
 
 /*
  * General layout
  */
 
+html
+{
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 1.333333;
+  color: #161616;
+}
+
 body
 {
-  font-family: "Source Sans Pro", sans-serif;
-  font-size: 17px;

[juliandoucette, 2017/01/10 20:26:39]

The issue says 18. Why 17?

-  font-weight: 300;
-  line-height: 24px;
+  padding: 84px 0 0 0;
+  margin: 0;
+}
+
+a
+{
+  font-weight: 400;
+  text-decoration: none;
   color: #161616;
-  padding: 0;
-  margin: 0;
-  padding-top: 78px;
-}
-
-a
-{
-  color: #161616;
-        text-decoration: none;

[juliandoucette, 2017/01/10 20:26:39]

Please use spaces instead of tabs (everywhere).

-        font-weight: 500;

[juliandoucette, 2017/01/10 20:26:39]

We don't have this font in 500.

 }
 
 a:hover
 {
-        text-decoration: underline;
+  text-decoration: underline;
 }
 
 img
 {
   border-width: 0px;
 }
 
 header,
 footer,
 nav
 {
   display: block;
-}
-
-h1, h2, h3, h4, h5, h6
-{
-  color: #333;
 }
 
 h1
 {
   font-size:28px;
 }
 
 h2
 {
   font-size:24px;
@@ skipping 22 matching lines @@
 #header
 {
   position: fixed;
   background-color: #fff;
   width: 100%;
   top: 0px;
   left: 0px;
   box-shadow: 0px 0px 12px rgba(0,0,0, 0.09);
   z-index: 10000;
   text-align: right;
+  text-transform: uppercase;
 }
 
 #header .content-block
 {
   position: relative;
-  padding: 15px 10px;
+  padding: 10px;
   min-height: 32px;
 }
 
+#header.top
+{
+  box-shadow: none;
+}
+
 #header.top .content-block
 {
-  padding: 20px 10px;
+  padding: 22px 10px;
 }
 
 #logo
 {
   position: absolute;
   top: 50%;
   left: 10px;
   margin-top: -20px;
   height: 40px;
 }
 
 #logo img
 {
   height: 100%;
 }
 
 #header .menu-button
 {
-  margin: 0px 0px 0px 20px;
+  margin: 0px 5px 0px 20px;
 }
 
 #menu
 {
   display: inline;
   vertical-align: middle;
 }
 
 .assistive-text
 {
   position: absolute !important;
   height: 1px;
   width: 1px;
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
 }
 
 .menu-list
 {
   display: inline;
   margin: 0px;
-  font-size: 15px;
+  font-size: 16px;
   list-style: none;
 }
 
 .menu-list li
 {
   display: inline;
   font-weight: bold;
   white-space: nowrap;
 }
 
 .menu-list li a
 {
   color: #979797;
   padding: 0 8px;
-        text-transform: uppercase;

[juliandoucette, 2017/01/10 20:26:39]

Please use 2 spaces (everywhere).

 }
 
 .menu-list li:hover > a,
 .menu-list li.current-menu-item > a
 {
-  color: #373737;
+  text-decoration: none;
+  color: #161616;
 }
 
 #header-hamburger
 {
   display: none;
 }
-
-#header-hamburger:hover .icon-bar,
-#header-hamburger:focus .icon-bar,
-#header-hamburger:active .icon-bar
-{
-  background-color: #000;
-}
-
 
 .icon-bar
 {
   display: block;
   width: 22px;
   height: 2px;
-  border-radius: 1px;
-  background-color: #888;
+  background-color: #fff;
+}
+
+#header-hamburger:hover .icon-bar,
+#header-hamburger:active .icon-bar,
+#header-hamburger:focus .icon-bar
+{
+  background-color: #161616;
 }
 
 .icon-bar+.icon-bar
 {
   margin-top: 4px;
 }
 
 #content:before,
 #content:after,
 .columns-container:before,
 .columns-container:after
 {
   content: " ";
   display: table;
 }
 
 #content:after,
 .columns-container:after
 {
   clear: both;
 }
 
 #footer
 {
-  color: #666;
-  background-color: #252525;
+  color: #fff;
+  background-color: #2d2d2d;
   padding-top: 30px;
   padding-bottom: 50px;
 }
 
 #footer a
 {
   color: #c2c2c2;
 }
 
 #footer a:hover
@@ skipping 49 matching lines @@
 
 .content-block,
 .page-title h1
 {
   max-width: 1080px;
   margin: 0 auto;
 }
 
 .heading
 {
-  margin: 0;
   margin-bottom: 20px;
-  font-weight: normal;
-  height: 0.7em;
+  font-size: 28px;
+  font-weight: 400;
 }
 
 .heading span
 {
   padding: 0;
   padding-right: 10px;
   background-color: #fff;
 }
 
 .centered
 {
   text-align: center;
 }
 
 .centered span
 {
   padding-left: 10px;
 }
 
 button, .button, .menu-button
 {
   display: inline-block;
-  cursor: pointer;
+  padding: 0px 20px;
   background-color: #161616;
-  color: #ffffff;
+  border: 2px solid #161616;
+  border-radius: 0px;
+  color: #fff;
   font-size: 14px;
-        border: 1px solid #ffffff;
-  font-weight: bold;
+  font-weight: 400;
   line-height: 36px;
   white-space: nowrap;
-  height: 36px;
-  padding: 0 20px;
-        text-transform: uppercase;
+  cursor: pointer;
 }
 
 button:hover,
 button:focus,
 .button:hover,
 .button:focus,
 .menu-button:hover,
 .menu-button:focus
 {
+  background-color: #fff;
   color: #161616;
-        background-color: #ffffff;
-        text-decoration: none;
-        border: 1px solid #161616;
+  text-decoration: none;
 }
 
 .page-title
 {
-  background-image: url(/images/subtlenet2.png);
-  background-color: #e9e9e5;
+  background-color: #f2f2f2;
   padding-top: 25px;
   padding-bottom: 25px;
   margin-bottom: 40px;
 }
 
 .sidebar-left .contact-person
 {
   text-align: right;
   margin-top: 20px;
   float: right;
@@ skipping 26 matching lines @@
   margin-bottom: 25px;
 }
 
 #our-work
 {
   padding-top: 50px;
   padding-bottom: 50px;
   background-color: #f2f2f2;
 }
 
+#our-work h3
+{
+  text-transform: uppercase;
+}
+
 #media
 {
   margin-top: 25px;
 }
 
 #our-work .heading span
 {
   background-color: #f0f0f0;
-}
-
-#our-work .column
-{
-  text-align: left;
 }
 
 .profile
 {
   text-align: center;
   margin-top: 0px;
   margin-bottom: 30px;
 }
 
 .profile-image,
@@ skipping 92 matching lines @@
 .two-sidebars .column
 {
   width: 48.75%;
 }
 
 .four-columns .column
 {
   width: 23.125%;
 }
 
-/*
-.four-columns .columns h1,h2,h3,h4,h5,h6 {

[juliandoucette, 2017/01/10 20:26:39]

- Please delete commented code blocks
- This selector probably doesn't work like you expect (you have to re-start
after the comma eg: .test h1, .test h2)
- Please put additional selectors on separate lines

-        text-transform: uppercase;
-}
-*/
-
 .one-sidebar .sidebar-left,
 .one-sidebars .sidebar-right,
 .two-sidebars .sidebar-left,
 .two-sidebars .sidebar-right
 {
   width: 23.125%;
 }
 
 .column:first-child
 {
@@ skipping 26 matching lines @@
 }
 
 .ui-tabs-nav li
 {
   background-color: #FBFBFB;
   padding: 0;
   background-image: none;
   list-style: none;
   float: left;
   margin: 0;
-
   border: 1px solid #E1E1E1;
   border-left: none;
   border-bottom-color: #CFCFCF;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  -webkit-border-top-left-radius: 3px;
-  -webkit-border-top-right-radius: 3px;
-
   transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -webkit-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
 }
 
+.ui-tabs-nav-vertical li,
 .ui-tabs-nav li:first-child
 {
   border-left: 1px solid #E1E1E1;
   border-top: 1px solid #E1E1E1;
 }
 
 .ui-tabs-nav li.ui-tabs-active,
 .ui-tabs-nav li:hover
 {
   background-color: #fff;
   border-top: 2px solid #161616;
   border-bottom: none;
   position: relative;
-  top: 2px;
+  top: 1px;
+}
+
+.ui-tabs-nav-vertical li.ui-tabs-active,
+.ui-tabs-nav-vertical li:hover
+{
+  border: 1px solid #161616;
+  background-color: #161616;
+  top: 0px;
+}
+
+.ui-tabs-nav-vertical li.ui-tabs-active a,
+.ui-tabs-nav-vertical li:hover a
+{
+  color: #fff;
+  text-decoration: none;
 }
 
 .ui-tabs-active .ui-tabs-anchor
 {
   cursor: default;
 }
 
 .ui-tabs-anchor
 {
   border-bottom: none;
@@ skipping 178 matching lines @@
 }
 
 #fair-company-logo
 {
   float: right;
 }
 
 .why-work-here-button
 {
   background-color: #747474;
+  border-color: #747474;
 }
 
 .why-work-here-button:hover,
+.why-work-here-button:active,
 .why-work-here-button:focus
 {
-  background-color: #333;
+  background-color: #fff;
+  border-color: #747474;
+  color: #747474;
 }
 
 
 @media (max-width: 768px)
 {
   body
   {
     padding-top: 50px;
   }
 
@@ skipping 16 matching lines @@
   }
 
   #menu.open
   {
     display: block;
   }
 
   #header-hamburger
   {
     position: absolute;
-    top: 9px;
-    right: 10px;
+    top: 7px;
+    right: 6px;
     display: block;
-    padding: 0px;
-    margin: 0px 5px;
-    background: none;
+    height: 36px;
+    width: 36px;
+    margin: 0;
+    padding: 0px 5px;
   }
 
   .menu-list
   {
     margin-top: 45px;
     padding: 0px;
     display: block;
   }
 
   .menu-list > li
   {
     display: block;
     border-top: 1px solid #eee;
   }
 
   .menu-list > li > a
   {
     display: block;
     margin: 0px;
     padding: 10px;
-    font-size: 14px;
+    font-size: 14px
   }
 
   .menu-button
   {
     position: absolute;
-    top: 9px;
-    right: 50px;
+    top: 7px;
+    right: 43px;
     height: 32px;
-    padding: 0 10px;
+    padding: 0 6px;
     line-height: 32px;
     font-size: 14px;
   }
 
   .columns-container .column
   {
     width: 100%;
     margin-left: 0;
     clear: both;
   }
@@ skipping 15 matching lines @@
 }
 
 @media (min-width: 751px)
 {
   .ui-tabs-nav-vertical
   {
     padding: .2em .1em .2em .2em;
     float: left; width: 100%;
     border-bottom: none;
   }
+
   .ui-tabs-nav-vertical li
   {
     clear: left;
     width: 100%;
-    border-bottom-width: 1px !important;
-    border-left: 1px solid #E1E1E1 !important;
     margin: 0 -1px .2em 0;
   }
+
   .ui-tabs-nav-vertical li.ui-tabs-active
   {
     padding-bottom: 0;
     padding-right: .1em;
     border-right-width: 1px;
     border-right-width: 1px;
   }
 
   #panels-openings
   {
     margin-top: -40px;
   }
 }