blob: 4b7039f474d28740374cbab9c602e7cd148cde6a [file] [log] [blame]
.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;
}
}
}
}