// Navigation breakpoints mobile-menu, .title-bar {
@include hide-for(medium);
}
.desktop-menu {
@include show-for(medium);
}
.no-js {
#mobile-menu { display: none; }
}
// Mobile menu .off-canvas {
> ul.menu { padding: 1rem; a { color: $ace-orange; } .is-accordion-submenu-parent > a { &:after { display: block; width: 0; height: 0; border: inset 6px; content: ''; border-bottom-width: 0; border-top-style: solid; border-color: $ace-orange transparent transparent; position: absolute; top: 50%; margin-top: -3px; right: 1rem; } } } .menu .active > a { background-color: lighten($dark-gray, 10%); } &.is-open { ~ .off-canvas-content { filter: blur(2.5px); } }
}
.title-bar {
position: relative; text-align: center; padding-right: 3rem; padding-left: 3rem; .menu-icon { position: absolute; top: 0; left: auto; right: 0; bottom: 0; margin: auto; }
}
mobile-menu {
position: absolute; top: 100%; right: 0; left: 0; z-index: 200; background: $ace-blue; color: $white; .menu.nested { margin: 0; } .menu { a { display: block; background: $ace-blue; padding-right: 1.5rem; border: none; &, span { color: $white; } &:hover, &:focus { background: $ace-navy; &, span { color: $ace-lime; } } } li[aria-expanded="true"] > a { background: $ace-navy-h; &:hover, &:focus { background: $ace-navy; } } .menu.nested { a { background: $ace-blue-h; } } .active, .current-menu-item { > a { border-bottom: 2px solid $ace-lime; } } } .is-accordion-submenu-parent > a:after { border-color: $ace-lime transparent transparent; }
}
body {
overflow-x: hidden;
}
.site-header {
@include grid-row; position: relative; z-index: 20; .site-link { text-align: center; @include breakpoint(tablet) { text-align: right; } a { display: inline-block; background: $ace-orange; color: $white; font-weight: bold; text-align: center; padding: 0.5rem 1rem; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; } } .main-logo { @include grid-column; text-align: center; img { width: auto; height: auto; max-width: 100%; max-height: 185px; margin-bottom: rem-calc(40); } } .desktop-header { @include grid-row; @include breakpoint(medium) { display: flex; } .header-right { @include grid-column(12,0); @include breakpoint(medium) { flex: 0 1 auto; @include grid-column(8); display: flex; flex-direction: column; .toolbar { flex: 0 1 auto; } .top-bar { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; } } } .header-left { @include show-for(medium); @include breakpoint(medium) { flex: 0 1 auto; @include grid-column(4); display: flex; flex-direction: column; .site-logo { display: flex; flex-direction: column; justify-content: center; a { flex: 0 1 auto; } } } } }
}
.site-logo {
a { display: block; padding: 1rem 0.5rem; }
}
.menu.vertical > li > a {
display: inline-block;
}
.menu-icon {
padding: 0.75rem; width: 1.5rem; box-sizing: content-box; &:after { width: 1.5rem; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: $ace-blue; box-shadow: 0 0.5rem 0 $ace-blue, 0 -0.5rem 0 $ace-blue; } &:hover, &:focus { &:after { background: $ace-orange; box-shadow: 0 0.5rem 0 $ace-orange, 0 -0.5rem 0 $ace-orange; } }
}
.top-top-bar {
@include breakpoint(tablet down) { &.logged-out { display: none; } .top-bar-left, .top-bar-right { float: none; text-align: center; ul { display: inline-block; margin: auto; } } } @include clearfix; color: $ace-grey; background: tint($black, 90%); font-size: rem-calc(14); line-height: 1.2; .top-bar-left { @include show-for(tablet); } .wrapper { @include grid-row; } .menu { text-align: center; li { position: relative; &:not(:last-child) { &:after { content: '|'; display: block; color: $ace-pink; position: absolute; text-align: center; top: 0; right: 0; bottom: 0; width: rem-calc(4); height: 1.1em; margin: auto; line-height: 1; } a { padding: rem-calc(14 12 14 8); @include breakpoint(tablet) { padding: rem-calc(12 12 13 8); } } } a { color: $ace-navy; line-height: 1.2; padding: rem-calc(14 8); @include breakpoint(tablet) { padding: rem-calc(12 8 13); } &:hover, &:focus { color: $ace-grey; } } } }
}
icon-twitter {
.cls-1 { fill:none; } .cls-2 { clip-path: url(#clip-path); } .cls-3 { fill: #1da0f1; } .cls-4 { fill: #fff; }
}
icon-youtube {
.cls-1 { fill:none; } .cls-2 { clip-path: url(#clip-path); } .cls-3 { fill: #e4322e; } .cls-4 { fill: #fff; }
}
icon-facebook {
.cls-1 { fill:none; } .cls-2 { clip-path: url(#clip-path); } .cls-3 { fill: #3e67a9; } .cls-4 { fill: #fff; }
}
// Tablet and desktop menu .top-bar {
@include clearfix; .site-link, .social-media { @include grid-column; } .site-link { @include breakpoint(tablet) { @include grid-column(4); @include grid-column-position(8); } } .social-media { padding-top: 0.5rem; padding-bottom: 0.5rem; @include breakpoint(tablet) { @include grid-column(8); @include grid-column-position(-4); } } .top-bar-menu { @include grid-row; }
}
.main-menu, .top-bar {
.menu { a { display: block; color: $ace-navy; padding: rem-calc(16); font-size: rem-calc(18); font-weight: 300; line-height: 1.2; @include breakpoint(tablet) { font-size: rem-calc(22); } } a:hover, a:focus, .is-active > a { &:not(.button) { color: $ace-blue; } } .active, .current-menu-item { &:not(.is-submenu-item) { > a { border-bottom: 4px solid $ace-blue; } } &.is-submenu-item { > a:after { background: $ace-blue; } } } &.dropdown { > li.is-dropdown-submenu-parent { position: static; > a { position: relative; &:after { content: ''; display: block; position: absolute; top: auto; right: 0; bottom: rem-calc(8); left: 0; margin: auto; height: rem-calc(14); width: rem-calc(14); border-right: 3px solid $ace-lime; border-bottom: 3px solid $ace-lime; transform: rotate(45deg); } } .is-dropdown-submenu { &.js-dropdown-active { display: flex; } @include grid-col-row; left: 0; right: 0; border: 0; margin: 0 auto; padding: rem-calc(25 16); flex-wrap: wrap; text-align: center; justify-content: center; &:before { content: ''; display: block; position: absolute; top: 0; right: -50vw; bottom: 0; left: -50vw; background: $ace-navy; } @include breakpoint(medium) { padding-top: rem-calc(40); padding-bottom: rem-calc(40); } li { display: block; width: auto; flex: 0 1 auto; padding: rem-calc(8); a { display: inline; position: relative; padding: rem-calc(12); font-size: rem-calc(20); color: $white; background: none; &:after { content: ''; display: block; opacity: 0; position: absolute; right: 8px; left: 8px; bottom: -5px; margin: auto; border-radius: 5px; height: 3px; background: $ace-lime; } &:hover, &:focus { color: $white; &:after { opacity: 1; } } } &.is-dropdown-submenu-parent { > a { &:after { display: none; } } } } } } } &.desktop-menu { display: flex; justify-content: center; > li { display: flex; flex: 0 1 auto; align-items: center; > a { display: flex; flex-direction: column; justify-content: flex-end; flex: 1 1 auto; align-items: center; text-align: center; color: $ace-navy; padding: rem-calc(12 16 24); border-right: 1px solid $white; span { color: $ace-blue; } } &:first-child > a { border-left: 1px solid $white; } } } }
}
.main-menu {
@include grid-column; text-align: center;
}
.post-navigation {
@include clearfix;
}
.nav-previous {
float: left;
} .nav-next {
float: right;
}
.breadcrumbs {
@include grid-row; margin-top: 35px; margin-bottom: 35px; .title & { margin-top: 0; } li:not(:last-child):after { color: $ace-orange; } a { &:hover, &:focus { text-decoration: none; color: $ace-orange; } }
}
ul.social-links {
display: flex; align-items: center; list-style-type: none; margin: 0; li { display: inline-block; a { display: block; padding: rem-calc(2.5); } }
}