// Navigation styling for base
.navbar
@include default-trans align-items: center display: flex height: $mobile-navbar-height justify-content: space-between position: fixed top: 0 white-space: nowrap width: 100% z-index: 9998 .social-media margin-left: 3vw z-index: inherit .social-media-link font-size: $sm-font-size padding-right: $sm-font-size
.nav-scrolled
@include navbar-color
.nav-brand
width: 30vw padding-left: 3vw z-index: 1 margin-top: .7rem // fudge fix for G making logo apear off-centre .site__logo * @include default-trans
.nav-list
border-bottom-left-radius: 80px font-size: 1.3rem height: $mobile-nav-list-height height: calc( var(--vh, 1vh) * #{ strip-unit($mobile-nav-list-height)} ) list-style: none margin: 0 margin-block-start: calc( var(--vh, 1vh) * #{ strip-unit($mobile-navbar-height)} ) padding: 0 padding-top: 0 position: absolute right: 0 top: 0 transform: translateX(100%) transition: $nav-slider-transition width: 100vw box-sizing: content-box background-color: $env-primary overflow: scroll
.nav-group-content
//text-indent: 2rem .nav-link margin: 3vh 20vw
.nav-link
margin: 6vh 15vw opacity: 0 text-decoration: none display: flex
.nav-group-link
color: $nav-link-color
.nav-link
font-size: 1.7rem z-index: 100 color: $nav-link-color
.nav-active
// we toggle this class in mobile-nav-slider.js on burger click transform: translateX(0%) box-shadow: -.2px .2px 0 rgba($pure-black, .3)
.site__logo-active
.site__logo--group .site__logo--curve, .site__logo--legvert, .site__logo--leg45, .site__logo--g, .site__logo--a, .site__logo__i *, .site__logo--t, .site__logo--Q fill: $env-secondary