| .skip-link { |
| position: fixed; |
| top: -30em; |
| left: 0; |
| right: 0; |
| z-index: 20; |
| background: $white;; |
| color: $dark-purple; |
| padding: .5em 1em; |
| font-size: 1em; |
| text-align: center; |
| transition: top .1s linear; |
| text-decoration: none; |
| |
| &:focus, |
| &:focus-visible { |
| top: 0; |
| color: $dark-purple; |
| } |
| } |
| |
| .main-header { |
| margin: 0 auto; |
| max-width: $max-width-m; |
| padding: 1.75em $m-s; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| flex-wrap: wrap; |
| |
| &:after { |
| content: ""; |
| display: block; |
| flex-grow: 9999; |
| height: 1em; |
| order: 2; |
| flex-basis: calc((40em - 100%) * 999); |
| } |
| } |
| |
| .logo { |
| font-size: 1em; |
| width: 12.5em; |
| max-height: 2.375em; |
| min-width: 12.5em; |
| order: 1; |
| flex-grow: 1; |
| flex-basis: calc((40em - 100%) * 999); |
| |
| svg { |
| width: 12.5em; |
| height: 2.375em; |
| display: block; |
| margin: 0 auto; |
| } |
| |
| a { |
| display: block; |
| &:focus { |
| outline: 1px dashed $white; |
| outline-offset: 0.5em; |
| } |
| } |
| } |
| |
| .main-nav { |
| order: 3; |
| flex-grow: 1; |
| flex-basis: calc((40em - 100%) * 999); |
| |
| &__list { |
| display: flex; |
| justify-content: center; |
| } |
| |
| &__item { |
| & + & { |
| margin-left: calc(0.25em + 1.56vw); |
| } |
| |
| a { |
| color: $white; |
| color: var(--text-white); |
| text-decoration: none; |
| font-weight: 700; |
| font-size: 1.125em; |
| display: block; |
| position: relative; |
| padding: 0.25em 0; |
| white-space: nowrap; |
| |
| &:after { |
| content: ""; |
| position: absolute; |
| left: 0; |
| bottom: 0; |
| right: 0; |
| height: 3px; |
| background: $white; |
| background: var(--text-white); |
| transform: scaleX(0); |
| transition: transform 0.4s ease-in-out; |
| will-change: transform; |
| } |
| |
| &:hover:after { |
| transform: scaleX(1); |
| transition-timing-function: cubic-bezier(.21,1.45,.51,1) |
| } |
| |
| &:focus { |
| outline: 1px dashed $white; |
| outline-offset: 0.3em; |
| } |
| } |
| } |
| } |