3 * This file is used to style the main menu.
10 font-family: 'Scope One', Georgia, serif;
17 transition: max-height 0.5s ease-in;
21 * An exact max-height value must be set to make possible to animate the menu display.
22 * It my not be much larger than the content because that would break the animation.
23 * See: https://css-tricks.com/using-css-transitions-auto-dimensions/
32 /* the padding, margin & transparent border means the hamburger doesn't move on focus/hover */
35 border: 3px solid transparent;
38 background-color: transparent;
40 .menu-main-toggle:hover {
41 background-color: transparent;
43 .menu-main-toggle svg {
51 background-color: inherit;
52 display: inline-block;
53 padding-bottom: 0.15em;
54 text-decoration: none;
55 border-bottom: solid 0.15em transparent;
59 .menu-main__link:hover,
60 .menu-main__link.is-active:hover,
61 .menu-main__link:focus {
62 background-color: inherit;
63 text-decoration: none;
64 border-bottom-color: rgba(255, 97, 56, 0.3);
67 .menu-main__link:active,
68 .menu-main__link.is-active {
69 text-decoration: none;
70 border-bottom-color: #da3c13;
73 @media screen and (min-width: 48em) {
76 justify-content: flex-end;
88 .menu-main__item + .menu-main__item {
93 @media screen and (min-width: 48em) {
94 .menu-main-togglewrap {
104 @media screen and (min-width: 48em) {
105 .menu-main__wrapper {
108 flex-basis: calc(100% - 220px);
113 @media screen and (min-width: 48em) {
116 justify-content: flex-end;