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 {
89 margin-left: 2.5em; /* LTR */
91 [dir="rtl"] .menu-main__item + .menu-main__item {
97 @media screen and (min-width: 48em) {
98 .menu-main-togglewrap {
103 .menu-main__wrapper {
108 @media screen and (min-width: 48em) {
109 .menu-main__wrapper {
112 flex-basis: calc(100% - 220px);
117 @media screen and (min-width: 48em) {
120 justify-content: flex-end;