7-menus-and-header edit

/* scss/7-menus-and-header/_site-menu.scss */ // GROUND RULES // - child layout (margin, flex, width) is controlled by the parent // - start with mobile only styles (sets up usable base version) // - set max-widths in mobile styles for ease of review .wm-site-menu a { text-decoration: none; font-weight: normal; } .wm-site-menu__primary-wrapper { flex-basis: 100%; flex-grow: 0; flex-shrink: 0; padding: 0; transition: all 0.3s ease-in; text-align: center; opacity: 0; text-align: center; @include breakpoint($menu-mobile-to-desktop-breakpoint) { display: flex; align-content: stretch; align-items: stretch; justify-content: center; max-width: toRem(714); width: 100%; margin-top: toRem(165); margin-bottom: toRem(44); } @include breakpoint(1175px) { margin-top: toRem(149); } } .wm-search { display: block; flex-basis: 100%; flex-grow: 0; flex-shrink: 1; width: auto; margin: 10.02rem kspaces(sm) 0 kspaces(sm); padding-top: 0; padding-bottom: kspaces(sm); font-family: font(text-sans); font-size: 1rem; @include breakpoint($menu-mobile-to-desktop-breakpoint) { flex-basis: 50%; flex-grow: 0; flex-shrink: 1; order: 3; max-width: toRem(366); margin-top: 0; margin-left: toRem(65); margin-right: 0; padding-bottom: 0; } &__form { text-align: center; } &__title { display: none; margin: 0; color: var(--color-text-base); font-family: font(text-sans); font-size: 1.14rem; font-style: bold; } &__input { float: left; width: calc(100% - 44px); height: toRem(44); padding: 0px toRem(10) 0 toRem(27); letter-spacing: 0.02em; color: rgba(black, 0.15); border: $border-width solid $border-color; //border-left: none; border-radius: 0; font-family: font(text-sans); font-size: 1.5625rem; line-height: toRem(60); @include breakpoint($menu-mobile-to-desktop-breakpoint) { width: toRem(239); height: toRem(55); margin-left: 0; padding-left: toRem(10); letter-spacing: 0.01em; border: none; border-bottom: $border-width solid $border-color; } &::placeholder { color: rgba(0, 0, 0, 0.414); font-size: toRem(18); position: relative; top: -2px; @include breakpoint($menu-mobile-to-desktop-breakpoint) { padding-left: toRem(8); text-transform: none; top: 0; font-size: toRem(25); font-weight: 400; letter-spacing: -0.01px; } } &:focus, &.active { color: black; outline: none; } } &__submit-wrapper { display: flex; float: right; overflow: hidden; align-items: center; justify-content: center; width: toRem(44); height: toRem(44); margin-left: 0; border: $border-width solid $border-color; //border-right: none; border-left: none; background: var(--color-wmsilver-0); font-family: font(text-sans); font-size: 1.14rem; @include breakpoint($menu-mobile-to-desktop-breakpoint) { float: left; height: toRem(55); border: none; border-bottom: $border-width solid $border-color; background: none; &:hover { background: white; & .fas { color: var(--color-webgold-75); } } } &:hover * { cursor: pointer; background-color: inherit; } } &__submit { margin: 0; transition: all 0.3s ease-in-out; letter-spacing: 0.05em; border: none; background: transparent; font-size: 1.5625rem; font-weight: 900; line-height: 0; @include breakpoint($menu-mobile-to-desktop-breakpoint) { &.fas { font-size: 1.68rem; } } &.fas { color: var(--color-wmgold-55); background: inherit; font-size: 1.5625rem; font-size: toRem(18); &:hover { color: var(--color-webgold-75); } @include breakpoint($menu-mobile-to-desktop-breakpoint) { color: var(--color-wmsilver-25); font-size: toRem(25); font-weight: 400; } } .fa-search:before { content: "\f002"; } } &__input:focus + .wm-search__submit-wrapper > .wm-search__submit.fas, &__input.active + .wm-search__submit-wrapper > .wm-search__submit.fas { color: var(--color-wmgold-55); &:hover { color: var(--color-webgold-75); } } &__caption { display: none; clear: both; width: toRem(304); padding-top: toRem(6); opacity: 0.5; color: var(--color-text-base); font-size: toRem(13); font-weight: font(demi); font-style: italic; @include breakpoint($menu-mobile-to-desktop-breakpoint) { &.active { display: block; } } &.highlight { opacity: 1; } } &__common-searches, &__suggested-results { display: none; margin-top: kspaces(sm); text-align: left; @include breakpoint($menu-mobile-to-desktop-breakpoint) { display: block; margin-left: 0; text-align: left; } & .label { padding-bottom: calc(#{kspaces(sm) / 3}); color: var(--color-wmgreen-90); letter-spacing: 0.2px; font-size: 0.88rem; font-weight: font(sans-weight, medium); } & .items { margin: 0; padding: 0 0 kspaces(lg) 1.066rem; list-style: none; } & .items a { display: inline-block; padding: toRem(5) 0 toRem(4) 0; letter-spacing: 0.45px; opacity: 0.6; color: black; font-family: font(sans); font-size: 1rem; font-weight: font(sans-weight, normal); line-height: 1.4; &:hover { text-decoration: none; opacity: 1; } } } &__common-searches.hidden, &__suggested-results.hidden { display: none; visibility: hidden; } } .nav-news-events.--inSearch { display: flex; height: kspaces(sm); justify-content: flex-start; align-items: center; gap: kspaces(lg); flex-shrink: 0; text-align: left; padding-left: toRem(17); // hide on mobile; --atBottom links will be showing display: none; @include breakpoint($menu-mobile-to-desktop-breakpoint) { display: flex; .wm-search__common-searches.hidden + .wm-search__suggested-results.hidden + & { margin-top: toRem(40); } } & .nav-news-events__link { position: relative; color: var(--color-wmgreen-90); letter-spacing: 0.348px; text-transform: uppercase; font-weight: 600; &:hover { color: black; } &:hover .fa-angle-right { right: -22px; } } & .fa-angle-right { transition: all 0.3s; position: absolute; content: ""; right: -18px; top: toRem(4); display: block; color: var(--color-wmgold-55); text-align: center; font-family: "Font Awesome 6 Pro"; } } .nav-news-events.--atBottom { // show on mobile; --inSearch links will be hidden display: inline-flex; padding: toRem(34) toRem(22) toRem(22) toRem(22); align-items: center; justify-content: center; width: 100%; & .nav-news-events__link { display: flex; width: 100%; max-width: toRem(166); height: toRem(47); padding: toRem(12) 0; flex-direction: column; justify-content: center; align-items: center; gap: toRem(10); flex: 1 0; border: 1.5px solid #fff; background: var(--soft-silver, #f0f1f2); color: var(--color-wmgreen-90); text-align: center; font-weight: 600; letter-spacing: 0.348px; text-transform: uppercase; .fa-angle-right { display: none; } &:hover { background: var(--color-wmsilver-25); color: var(--color-griffingreen-100); } } @include breakpoint($menu-mobile-to-desktop-breakpoint) { display: none; } } .wm-site-menu__divider { @include breakpoint($menu-mobile-to-desktop-breakpoint) { order: 2; width: toRem(1); // min-height: 100%; border-right: $border-width solid $border-color; } } .wm-site-menu { @include menu-closed-styles(); display: flex; visibility: hidden; align-content: flex-start; flex-wrap: wrap; justify-content: center; height: 100%; @include breakpoint($menu-mobile-to-desktop-breakpoint) { @include menu-closed-desktop-styles(); display: grid; grid-template-rows: max-content minmax(max-content, 1fr); grid-template-columns: 1fr; align-content: flex-start; justify-content: center; justify-items: center; &.fancybox-margin { max-width: 0; } } & .wm-topbar__menu-button.-close-x { top: $topbar-border-height-mobile; background: var(--color-webgold-75); @include breakpoint($mobile-to-desktop-breakpoint) { top: $topbar-border-height; } } .wm_logo_banner { @include wm_logo_banner; } // ============================================== // primary nav - mobile styles // ============================================== .primary-nav { text-align: center; font-size: 1rem; flex-basis: 100%; flex-grow: 0; flex-shrink: 1; margin-bottom: toRem(32); padding: 0; @include breakpoint($menu-mobile-to-desktop-breakpoint) { display: flex; flex-basis: 49%; flex-grow: 0; flex-shrink: 0; justify-content: flex-end; order: 1; margin-bottom: 0; max-width: toRem(348); } &__mainmenu { display: flow-root; list-style: none; text-align: left; margin: 0; padding: 0; & > li { display: flow-root; padding: 0 0 0 toRem(22); border-top: $border-width solid $border-color; border-bottom: none; @include breakpoint($menu-mobile-to-desktop-breakpoint) { padding-left: 0; border: none; margin-right: toRem(56); } &:last-child { border-bottom: $border-width solid $border-color; @include breakpoint($menu-mobile-to-desktop-breakpoint) { border: none; } } & > a { display: block; float: left; clear: both; width: toRem(292); width: calc(100% - #{4.09rem}); height: toRem(55); margin: 0; padding: 0 0 0 0; color: var(--color-wmgreen-90); font-family: font(serif); font-size: toRem(23); font-weight: 500; line-height: toRem(58); letter-spacing: 0.6px; font-feature-settings: "lnum"; @include breakpoint($menu-mobile-to-desktop-breakpoint) { width: auto; margin-right: toRem(8); font-size: toRem(34); font-weight: 300; letter-spacing: toRem(2); height: toRem(48); margin-bottom: toRem(13); border-bottom: 1px solid white; &:hover { border-bottom-color: rgba(var(--color-wmgreen-90-rgb), 0.4); transition: all 0.3s ease-in-out; } } &.-is-open { font-weight: font(serif-weight, book); } } &:last-child { // remove margin from last element so spacing with footer is correct // compensate using margin on its submenu margin-bottom: 0; .primary-nav__submenu { margin-top: toRem(13); } } } } // toggle button &__togglesubmenu { position: relative; float: right; width: 4.09rem; width: kspaces(xl); height: toRem(58); min-height: toRem(28); margin: 0; padding: 0; background: white; @include breakpoint($menu-mobile-to-desktop-breakpoint) { top: toRem(13); float: none; width: toRem(28); height: toRem(28); border-radius: toRem(6); } &:hover, &[aria-expanded="true"]:hover { cursor: pointer; background: var(--color-wmsilver-0); } &::before, &::after { position: absolute; bottom: toRem(30); left: toRem(24); display: block; width: toRem(15); height: 0; content: ""; transition: all 0.3s; border-bottom: solid 2px var(--color-wmgold-55); @include breakpoint($menu-mobile-to-desktop-breakpoint) { bottom: toRem(13); left: toRem(7); } } &::before { transform: rotate(90deg); } &:hover::before, &:hover::after { border-color: var(--color-webgold-75); } &[aria-expanded="true"]::before, &[aria-expanded="true"]::after { border-color: var(--color-wmsilver-25); transform: rotate(135deg); } &[aria-expanded="true"]::after { transform: rotate(45deg); } &[aria-expanded="true"]:hover::before, &[aria-expanded="true"]:hover::after { border-color: var(--color-slate-80); } } // primary nav accordion submenu &__submenu { clear: both; } &__submenu > ul { padding-bottom: toRem(30); padding-left: toRem(14); list-style: none; font-size: 1rem; @include breakpoint($menu-mobile-to-desktop-breakpoint) { // overflow: hidden; // height: 0; // padding-bottom: toRem(30); // padding-bottom: 0; } & li, & li:last-child { border: none; @include breakpoint($menu-mobile-to-desktop-breakpoint) { padding-left: 0; } & > a { min-height: toRem(37); padding: 0; opacity: 0.5; color: black; font-family: font(sans); font-size: 1rem; line-height: toRem(37); &:hover { text-decoration: none; opacity: 1; } } } } & > li { transition: none; } } @keyframes submenuFadeIn { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .primary-nav__togglesubmenu[aria-expanded="true"] + .primary-nav__submenu { animation: submenuFadeIn 0.5s; } .primary-nav__togglesubmenu[aria-expanded="false"] + .primary-nav__submenu { visibility: hidden; } .primary-nav__togglesubmenu[aria-expanded="true"] + .primary-nav__submenu { visibility: visible; } .accordion__content { overflow: hidden; height: 0; transition: height 0.3s ease-out; } .accordion__item:not(.is-expanded) .accordion__content { height: 0 !important; } // --- end primary nav // ============================================== // tactical and secondary menu wrappers - mobile styles // ============================================== .tac-wrapper { width: 100%; margin-top: 0; padding: 0; font-size: 1rem; @include breakpoint($menu-mobile-to-desktop-breakpoint) { position: absolute; top: toRem(38); left: toRem(200); left: 0; width: calc(100% - 350px); width: 100%; display: flex; justify-content: center; align-items: flex-start; &:before, &:after { content: ""; display: inline-block; width: toRem(150); height: toRem(50); } &::before { width: toRem(200); } @include breakpoint(1175px) { &:before { width: toRem(210); } &:after { width: toRem(175); } } @include breakpoint(1440px) { &:before { width: toRem(219); } &:after { width: toRem(200); } } } } // --- end tac-sec menu wrapper // ============================================== // tactical nav - mobile styles // ============================================== .tactical-nav { width: auto; margin: 0 auto; padding-bottom: 0; letter-spacing: 0.01em; font-size: 1rem; @include breakpoint($menu-mobile-to-desktop-breakpoint) { padding-bottom: toRem(6); flex: 1 1 auto; transition: all 0.3s ease-in-out; display: flex; } &__list { padding: 0; width: 100%; margin: 0; padding-left: kspaces(sm); list-style: none; @include breakpoint($menu-mobile-to-desktop-breakpoint) { padding-left: 0; display: flex; flex-direction: row-reverse; justify-content: center; gap: 0; border-bottom: $border-width solid $border-color; } @include breakpoint(1175px) { gap: toRem(10); } @include breakpoint(1280px) { gap: toRem(22); } & li { display: block; padding: 0; transition: all 0.3s ease-in-out; & a { border-bottom: 3px solid transparent; color: rgba(0, 0, 0, 0.6); font-family: font(sans); font-size: toRem(16); font-weight: 500; line-height: 1; padding: toRem(11) 0; display: block; &:hover { text-decoration: none; color: black; } @include breakpoint($menu-mobile-to-desktop-breakpoint) { font-size: toRem(12); letter-spacing: 0.7px; text-transform: uppercase; display: inline-block; padding: toRem(6) 8.5px toRem(17); &:hover { border-bottom: 3px solid var(--color-wmgold-55); } } @include breakpoint(1175px) { padding-left: toRem(10); padding-right: toRem(10); } } } } & a { word-wrap: none; word-break: normal; overflow-wrap: normal; } } /* &:after { content: ""; clear: both; } */ } #main-header { margin: 0 auto; } .nav-footer { background: var(--color-wmgreen-90); width: 100%; position: relative; overflow: hidden; // gold line &:before { display: block; content: ""; width: 100%; height: toRem(8); grid-row: 1/2; grid-column: 1/3; z-index: 5; position: relative; background-color: var(--color-wmgold-55); background: var(--color-wmgold-55) linear-gradient( 90deg, var(--color-webgold-75) 0%, var(--color-wmgold-55) 51.04%, var(--color-webgold-75) 100% ); } // gradients &:after { display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background: linear-gradient( 180deg, rgba(var(--color-griffingreen-100-rgb), 0.7) 0%, rgba(var(--color-griffingreen-100-rgb), 0) 49px ), linear-gradient(45deg, rgba(var(--color-moss-60-rgb), 0.2) 0%, rgba(var(--color-moss-60-rgb), 0) 100%), linear-gradient(134deg, var(--color-wmgreen-90) 0%, rgba(var(--color-griffingreen-100-rgb), 0.7) 100%); } @include breakpoint($menu-mobile-to-desktop-breakpoint) { display: grid; grid-template-rows: 8px 1fr; grid-template-columns: 1fr; width: 100%; align-self: flex-end; // all gradients &:after { background: linear-gradient( 90deg, rgba(var(--color-griffingreen-100-rgb), 0) 0%, rgba(var(--color-griffingreen-100-rgb), 0.8) 68.11%, rgba(var(--color-griffingreen-100-rgb), 0.8) 100% ), linear-gradient( 180deg, rgba(var(--color-griffingreen-100-rgb), 0.7) 0%, rgba(var(--color-griffingreen-100-rgb), 0) 49px ), radial-gradient( 426.49% 141.42% at 0% 100%, rgba(var(--color-moss-60-rgb), 0.35) 0%, rgba(var(--color-moss-60-rgb), 0) 100% ); } } &__links { width: 100%; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; position: relative; z-index: 4; padding: 0 kspaces(sm); // max-width: toRem(331); @include breakpoint($menu-mobile-to-desktop-breakpoint) { grid-column: 1/2; grid-row: 2/3; max-width: toRem(714); justify-content: flex-end; align-items: center; gap: toRem(22); } } &__link { flex: 0 1 100%; display: flex; min-width: toRem(60); justify-content: center; align-items: center; gap: toRem(12); height: toRem(40); flex-shrink: 0; color: #ffffff; background-color: var(--color-webgold-75); color: #fff; margin-bottom: kspaces(sm); text-align: center; font-size: toRem(18); font-weight: 500; letter-spacing: 0.4px; @include breakpoint($menu-mobile-to-desktop-breakpoint) { max-width: toRem(300); margin-left: toRem(65); margin-bottom: 0; } &:first-child { margin-top: kspaces(lg); } &:last-child { margin-bottom: kspaces(lg); } &:hover { background-color: var(--color-wmgold-55); & .fa-angle-right { opacity: 1; left: toRem(2); } } } .fa-angle-right { position: relative; left: -4px; color: #fff; text-align: center; font-family: "Font Awesome 6 Pro"; letter-spacing: 0.3px; opacity: 0.5; transition: all 0.3s ease-in-out; } &__background-image { display: none; width: 100%; height: 100%; grid-column: 1/2; grid-row: 2/3; filter: saturate(0); opacity: 0.7; object-fit: cover; @include breakpoint($menu-mobile-to-desktop-breakpoint) { display: block; } } } // ---------------------------------------------- // SITE MENU OPEN/HIDDEN/CLOSED STATES // hidden site menu state while info menu is showing .info-open .wm-site-menu { @include menu-hidden-styles(); & .wm-topbar__menu-button.-close-x { top: $topbar-border-height-mobile; @include breakpoint($mobile-to-desktop-breakpoint) { top: $topbar-border-height; } } & .wm-topbar__info-for-button { top: $open-menu-info-button-top-mobile; @include breakpoint($mobile-to-desktop-breakpoint) { top: $open-menu-info-button-top; } } } // open and visible site menu state .menu-open .wm-site-menu { @include menu-open-styles(); visibility: visible; @include breakpoint($menu-mobile-to-desktop-breakpoint) { @include menu-closed-desktop-styles(); } &__primary-wrapper { opacity: 1; } // info for button in site menu & .wm-topbar__info-for-button { top: $open-menu-info-button-top-mobile; display: block; @include breakpoint($menu-mobile-to-desktop-breakpoint) { top: $open-menu-info-button-top; } } // close X menu button in site menu & .wm-topbar__menu-button.-close-x { z-index: $z-index-topbar-buttons; top: $topbar-border-height-mobile; display: flex; padding: toRem(23); background: var(--color-webgold-75); display: flex; width: toRem(89); height: toRem(59); padding: 0; justify-content: center; align-items: center; gap: toRem(10); flex-shrink: 0; @include breakpoint($menu-mobile-to-desktop-breakpoint) { top: $topbar-border-height; width: toRem(121); height: toRem(71); transition: all 0.3s ease-in-out; } .fa-xmark { transition: transform 0.3s ease-in-out; color: #fff; text-align: center; font-family: "Font Awesome 6 Pro"; font-size: toRem(45); font-weight: 100; letter-spacing: 1.337px; } &:hover { cursor: pointer; background: var(--color-wmgold-55); } } } // show menu in atomic docs .atoms-main .wm-site-menu, .atoms-main .wm-info-for-menu, #atomsWrap #content.atoms-main { display: block; } .atoms-main .o-callout { position: relative; }