From e18f0875d4fba419f9308b25a0bf62d32dc0b1d9 Mon Sep 17 00:00:00 2001 From: Jen Breese-Kauth Date: Fri, 27 Jun 2025 22:20:51 +0000 Subject: [PATCH] SRC-130: moved search and hambuger for lg and md breakpoints --- dist/css/main.css | 2 +- src/scss/components/masthead/_masthead.scss | 27 ++++++++++++++++----- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/dist/css/main.css b/dist/css/main.css index f044103..018899e 100644 --- a/dist/css/main.css +++ b/dist/css/main.css @@ -1 +1 @@ -@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);.su-hero .su-hero__media .gradient-overlay{height:unset}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .overlay-left .su-card{left:13px}}@media (min-width:992px){.csharp-wrapper--banner-transparent-overlay .overlay-left .su-card{left:40px}}@media (min-width:1200px){.csharp-wrapper--banner-transparent-overlay .overlay-left .su-card{left:60px}}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .overlay-right .su-card{right:13px}.csharp-wrapper--banner-transparent-overlay .overlay-right .su-card .su-card__contents{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.csharp-wrapper--banner-transparent-overlay .overlay-right .su-card .su-card__contents p{text-align:end}}@media (min-width:992px){.csharp-wrapper--banner-transparent-overlay .overlay-right .su-card{right:40px}}@media (min-width:1200px){.csharp-wrapper--banner-transparent-overlay .overlay-right .su-card{right:60px}}.csharp-wrapper--banner-transparent-overlay .overlay-right .su-card__contents{text-align:end}.csharp-wrapper--banner-transparent-overlay .su-hero__card{background:#2e2d29;border:none}.csharp-wrapper--banner-transparent-overlay .su-card__contents{color:#eaeaea}.csharp-wrapper--banner-transparent-overlay .su-card__contents h2,.csharp-wrapper--banner-transparent-overlay .su-card__contents h3,.csharp-wrapper--banner-transparent-overlay .su-card__contents h4 .su-font-splash{font-family:Roboto Slab,Georgia,Times,Times New Roman,serif;font-size:3.9rem;font-weight:500;letter-spacing:.195px}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-card__contents h2,.csharp-wrapper--banner-transparent-overlay .su-card__contents h3,.csharp-wrapper--banner-transparent-overlay .su-card__contents h4 .su-font-splash{font-size:4.4rem;letter-spacing:.22px}}@media (min-width:992px){.csharp-wrapper--banner-transparent-overlay .su-card__contents h2,.csharp-wrapper--banner-transparent-overlay .su-card__contents h3,.csharp-wrapper--banner-transparent-overlay .su-card__contents h4 .su-font-splash{font-size:8.7rem;letter-spacing:.435px}}@media (min-width:1200px){.csharp-wrapper--banner-transparent-overlay .su-card__contents h2,.csharp-wrapper--banner-transparent-overlay .su-card__contents h3,.csharp-wrapper--banner-transparent-overlay .su-card__contents h4 .su-font-splash{font-size:9.6rem;letter-spacing:.48px}}.csharp-wrapper--banner-transparent-overlay .su-card__contents p{font-family:Roboto;font-size:2.65rem;line-height:1.2;margin-left:0;margin-right:0}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-card__contents p{font-size:2.8rem}}@media (min-width:992px){.csharp-wrapper--banner-transparent-overlay .su-card__contents p{font-size:3.5rem}}@media (min-width:1200px){.csharp-wrapper--banner-transparent-overlay .su-card__contents p{font-size:4.4rem}}.csharp-wrapper--banner-transparent-overlay a{color:#fff;text-decoration:none}.csharp-wrapper--banner-transparent-overlay a:after{background-color:#fff;height:15px;width:15px}.csharp-wrapper--banner-transparent-overlay a:active,.csharp-wrapper--banner-transparent-overlay a:focus,.csharp-wrapper--banner-transparent-overlay a:hover{color:#fff;text-decoration:underline}.csharp-wrapper--banner-transparent-overlay a:active:after,.csharp-wrapper--banner-transparent-overlay a:focus:after,.csharp-wrapper--banner-transparent-overlay a:hover:after{background-color:#fff}.csharp-wrapper--banner-transparent-overlay a.su-button--secondary{text-shadow:none}.csharp-wrapper--banner-transparent-overlay a.su-button--secondary:active,.csharp-wrapper--banner-transparent-overlay a.su-button--secondary:focus,.csharp-wrapper--banner-transparent-overlay a.su-button--secondary:hover{color:#2e2d29}.csharp-wrapper--banner-transparent-overlay a.su-button,.csharp-wrapper--banner-transparent-overlay a.su-button--big{border-radius:7px;text-shadow:none}.csharp-wrapper--banner-transparent-overlay a.su-button--big:active,.csharp-wrapper--banner-transparent-overlay a.su-button--big:focus,.csharp-wrapper--banner-transparent-overlay a.su-button--big:hover,.csharp-wrapper--banner-transparent-overlay a.su-button:active,.csharp-wrapper--banner-transparent-overlay a.su-button:focus,.csharp-wrapper--banner-transparent-overlay a.su-button:hover{background-color:#fff;color:#2e2d29}.csharp-wrapper--banner-transparent-overlay a.su-button--big:active:after,.csharp-wrapper--banner-transparent-overlay a.su-button--big:focus:after,.csharp-wrapper--banner-transparent-overlay a.su-button--big:hover:after,.csharp-wrapper--banner-transparent-overlay a.su-button:active:after,.csharp-wrapper--banner-transparent-overlay a.su-button:focus:after,.csharp-wrapper--banner-transparent-overlay a.su-button:hover:after{background-color:#2e2d29}@media (min-width:1200px){.csharp-wrapper--banner-transparent-overlay a.su-button,.csharp-wrapper--banner-transparent-overlay a.su-button--big{font-size:2.8rem;padding:1.5rem 3rem 1.8rem}}@media (min-width:1500px){.csharp-wrapper--banner-transparent-overlay a.su-button,.csharp-wrapper--banner-transparent-overlay a.su-button--big{font-size:3rem}}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__media{min-height:auto;position:absolute}.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__media .gradient-overlay{background:linear-gradient(108deg,#121212 28.73%,rgba(46,45,41,0) 55.15%);height:100%;left:0;position:absolute;top:0;width:100%;z-index:9}}@media (min-width:768px) and (min-width:1200px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__media .gradient-overlay{width:95%}}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-hero.overlay-right .gradient-overlay{background:linear-gradient(252deg,#121212 28.73%,rgba(46,45,41,0) 55.15%);left:unset;right:0}.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card{background:transparent;border:0;bottom:unset;-webkit-box-shadow:none;box-shadow:none;margin-bottom:0;margin-top:0;max-width:375px;text-align:center;text-align:unset}}@media (min-width:768px) and (min-width:992px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card{max-width:525px}}@media (min-width:768px) and (min-width:1200px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card{max-width:600px}}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card .su-card__contents{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;color:#eaeaea;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;margin:0 auto;max-width:100ch;min-height:220px;padding-bottom:3.8rem;padding-top:3.4rem;text-shadow:0 4px 10px #000}}@media only screen and (min-width:768px) and (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card .su-card__contents{padding-top:5.8rem}}@media only screen and (min-width:768px) and (min-width:1500px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card .su-card__contents{padding-top:6.1rem}}@media only screen and (min-width:768px) and (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card .su-card__contents{padding-bottom:7.2rem}}@media only screen and (min-width:768px) and (min-width:1500px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card .su-card__contents{padding-bottom:7.6rem}}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card .su-card__contents :first-child{margin-top:0}.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card .su-card__contents span{font-size:1.25em;letter-spacing:-.01em}}.su-local-footer{background-color:#fff;border-top:1px solid #2e2d29}.su-local-footer .su-lockup__cell2,.su-local-footer h2,.su-local-footer h3,.su-local-footer h4,.su-local-footer h5{font-family:Roboto Slab,Georgia,Times,Times New Roman,serif}.su-local-footer #signup-submit,.su-local-footer .su-link--internal,.su-local-footer a,.su-local-footer p{font-family:Roboto}.su-masthead .su-lockup{-webkit-box-flex:unset;-ms-flex:unset;flex:unset;margin-bottom:1.8rem;margin-top:1.8rem}.su-masthead .su-lockup.su-lockup--option-o .su-lockup__cell1{border-right:1px solid #2e2d29;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;padding-right:2rem}.su-masthead .su-lockup.su-lockup--option-o .su-lockup__wordmark-wrapper{margin-bottom:1rem;margin-top:1rem}@media (min-width:768px){.su-masthead .su-lockup.su-lockup--option-o .su-lockup__wordmark{font-size:3.8rem}}@media (min-width:992px){.su-masthead .su-lockup.su-lockup--option-o .su-lockup__wordmark{font-size:4.1rem}}.su-masthead .su-lockup.su-lockup--option-o .su-lockup__line4{font-family:Roboto Slab,Georgia,Times,Times New Roman,serif;font-size:2.2rem;font-weight:400;margin-top:1.5rem;text-align:end;text-transform:unset}@media (min-width:768px){.su-masthead .su-lockup.su-lockup--option-o .su-lockup__line4{font-size:2.3rem}}@media (min-width:992px){.su-masthead .su-lockup.su-lockup--option-o .su-lockup__line4{font-size:2.7rem}}@media (min-width:576px){.su-masthead .su-site-search{display:block;margin:unset;min-width:30rem;padding-left:4rem;width:unset}}@media (min-width:768px){.su-masthead .su-site-search{min-width:40rem}}.su-masthead .su-site-search>form{width:100%}.su-masthead .su-site-search__submit{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='23' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.763 9.263a6.151 6.151 0 1 1-12.303 0 6.151 6.151 0 0 1 12.303 0Zm2.237 0a8.388 8.388 0 0 1-13.203 6.87l-6.17 5.695a1.118 1.118 0 1 1-1.517-1.643l6.039-5.575A8.388 8.388 0 1 1 22 9.263Z' fill='%23007C7E'/%3E%3C/svg%3E") no-repeat 0 0}.su-masthead>section:last-of-type{padding-top:0}@media (min-width:576px){.su-masthead>section:last-of-type{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-content:flex-start}}@media (min-width:1200px){.su-masthead>section:last-of-type{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}#back-to-top,#signup-submit,.su-button,.su-button--big,.su-link--internal{background-color:#007c7e}#back-to-top:active,#back-to-top:focus,#back-to-top:hover,#signup-submit:active,#signup-submit:focus,#signup-submit:hover,.su-button--big:active,.su-button--big:focus,.su-button--big:hover,.su-button:active,.su-button:focus,.su-button:hover,.su-link--internal:active,.su-link--internal:focus,.su-link--internal:hover{background-color:#2e2d29}#back-to-top.su-link,#signup-submit.su-link,.su-button--big.su-link,.su-button.su-link,.su-link--internal.su-link{background-color:#007c7e}#back-to-top.mailto:active,#back-to-top.mailto:focus,#back-to-top.mailto:hover,#signup-submit.mailto:active,#signup-submit.mailto:focus,#signup-submit.mailto:hover,.su-button--big.mailto:active,.su-button--big.mailto:focus,.su-button--big.mailto:hover,.su-button.mailto:active,.su-button.mailto:focus,.su-button.mailto:hover,.su-link--internal.mailto:active,.su-link--internal.mailto:focus,.su-link--internal.mailto:hover{color:#fff}#back-to-top.mailto:active svg,#back-to-top.mailto:focus svg,#back-to-top.mailto:hover svg,#signup-submit.mailto:active svg,#signup-submit.mailto:focus svg,#signup-submit.mailto:hover svg,.su-button--big.mailto:active svg,.su-button--big.mailto:focus svg,.su-button--big.mailto:hover svg,.su-button.mailto:active svg,.su-button.mailto:focus svg,.su-button.mailto:hover svg,.su-link--internal.mailto:active svg,.su-link--internal.mailto:focus svg,.su-link--internal.mailto:hover svg{fill:#fff}a.su-button--secondary,a.su-link--external.su-button--secondary{-webkit-box-shadow:inset 0 0 0 2px #007c7e;box-shadow:inset 0 0 0 2px #007c7e;color:#007c7e}a.su-link--external.su-button--secondary:after{background-color:#007c7e}a.mailto.su-button--secondary svg{fill:#007c7e}.filter-menu .topics__collapsable-menu{color:#007c7e}.filter-menu .topics__collapsable-menu .su-link--jump:after{background-color:#007c7e}.filter-menu .menu .menu-item--active-trail .is-active,.filter-menu .menu .menu-item--active-trail:before,.su-link,.su-link--action,.su-link--internal,a{color:#007c7e}.su-link--action:after,.su-link--internal:after,.su-link:after,a:after{background-color:#007c7e}.su-link--action:active,.su-link--action:focus,.su-link--action:hover,.su-link--internal:active,.su-link--internal:focus,.su-link--internal:hover,.su-link:active,.su-link:focus,.su-link:hover,a:active,a:focus,a:hover{color:#2e2d29}.su-link--action:active:after,.su-link--action:focus:after,.su-link--action:hover:after,.su-link--internal:active:after,.su-link--internal:focus:after,.su-link--internal:hover:after,.su-link:active:after,.su-link:focus:after,.su-link:hover:after,a:active:after,a:focus:after,a:hover:after{background-color:#2e2d29}.su-link--action:active svg,.su-link--action:focus svg,.su-link--action:hover svg,.su-link--internal:active svg,.su-link--internal:focus svg,.su-link--internal:hover svg,.su-link:active svg,.su-link:focus svg,.su-link:hover svg,a:active svg,a:focus svg,a:hover svg{fill:#2e2d29}.su-link--action.mailto:after,.su-link--internal.mailto:after,.su-link.mailto:after,a.mailto:after{background-color:#007c7e}.su-link--action.mailto svg,.su-link--internal.mailto svg,.su-link.mailto svg,a.mailto svg{fill:#007c7e}.su-link--action.mailto:active,.su-link--action.mailto:focus,.su-link--action.mailto:hover,.su-link--internal.mailto:active,.su-link--internal.mailto:focus,.su-link--internal.mailto:hover,.su-link.mailto:active,.su-link.mailto:focus,.su-link.mailto:hover,a.mailto:active,a.mailto:focus,a.mailto:hover{color:#2e2d29}.su-link--action.mailto:active:after,.su-link--action.mailto:focus:after,.su-link--action.mailto:hover:after,.su-link--internal.mailto:active:after,.su-link--internal.mailto:focus:after,.su-link--internal.mailto:hover:after,.su-link.mailto:active:after,.su-link.mailto:focus:after,.su-link.mailto:hover:after,a.mailto:active:after,a.mailto:focus:after,a.mailto:hover:after{background-color:#2e2d29}.su-link--action.mailto:active svg,.su-link--action.mailto:focus svg,.su-link--action.mailto:hover svg,.su-link--internal.mailto:active svg,.su-link--internal.mailto:focus svg,.su-link--internal.mailto:hover svg,.su-link.mailto:active svg,.su-link.mailto:focus svg,.su-link.mailto:hover svg,a.mailto:active svg,a.mailto:focus svg,a.mailto:hover svg{fill:#2e2d29} \ No newline at end of file +@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);.su-hero .su-hero__media .gradient-overlay{height:unset}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .overlay-left .su-card{left:13px}}@media (min-width:992px){.csharp-wrapper--banner-transparent-overlay .overlay-left .su-card{left:40px}}@media (min-width:1200px){.csharp-wrapper--banner-transparent-overlay .overlay-left .su-card{left:60px}}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .overlay-right .su-card{right:13px}.csharp-wrapper--banner-transparent-overlay .overlay-right .su-card .su-card__contents{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.csharp-wrapper--banner-transparent-overlay .overlay-right .su-card .su-card__contents p{text-align:end}}@media (min-width:992px){.csharp-wrapper--banner-transparent-overlay .overlay-right .su-card{right:40px}}@media (min-width:1200px){.csharp-wrapper--banner-transparent-overlay .overlay-right .su-card{right:60px}}.csharp-wrapper--banner-transparent-overlay .overlay-right .su-card__contents{text-align:end}.csharp-wrapper--banner-transparent-overlay .su-hero__card{background:#2e2d29;border:none}.csharp-wrapper--banner-transparent-overlay .su-card__contents{color:#eaeaea}.csharp-wrapper--banner-transparent-overlay .su-card__contents h2,.csharp-wrapper--banner-transparent-overlay .su-card__contents h3,.csharp-wrapper--banner-transparent-overlay .su-card__contents h4 .su-font-splash{font-family:Roboto Slab,Georgia,Times,Times New Roman,serif;font-size:3.9rem;font-weight:500;letter-spacing:.195px}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-card__contents h2,.csharp-wrapper--banner-transparent-overlay .su-card__contents h3,.csharp-wrapper--banner-transparent-overlay .su-card__contents h4 .su-font-splash{font-size:4.4rem;letter-spacing:.22px}}@media (min-width:992px){.csharp-wrapper--banner-transparent-overlay .su-card__contents h2,.csharp-wrapper--banner-transparent-overlay .su-card__contents h3,.csharp-wrapper--banner-transparent-overlay .su-card__contents h4 .su-font-splash{font-size:8.7rem;letter-spacing:.435px}}@media (min-width:1200px){.csharp-wrapper--banner-transparent-overlay .su-card__contents h2,.csharp-wrapper--banner-transparent-overlay .su-card__contents h3,.csharp-wrapper--banner-transparent-overlay .su-card__contents h4 .su-font-splash{font-size:9.6rem;letter-spacing:.48px}}.csharp-wrapper--banner-transparent-overlay .su-card__contents p{font-family:Roboto;font-size:2.65rem;line-height:1.2;margin-left:0;margin-right:0}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-card__contents p{font-size:2.8rem}}@media (min-width:992px){.csharp-wrapper--banner-transparent-overlay .su-card__contents p{font-size:3.5rem}}@media (min-width:1200px){.csharp-wrapper--banner-transparent-overlay .su-card__contents p{font-size:4.4rem}}.csharp-wrapper--banner-transparent-overlay a{color:#fff;text-decoration:none}.csharp-wrapper--banner-transparent-overlay a:after{background-color:#fff;height:15px;width:15px}.csharp-wrapper--banner-transparent-overlay a:active,.csharp-wrapper--banner-transparent-overlay a:focus,.csharp-wrapper--banner-transparent-overlay a:hover{color:#fff;text-decoration:underline}.csharp-wrapper--banner-transparent-overlay a:active:after,.csharp-wrapper--banner-transparent-overlay a:focus:after,.csharp-wrapper--banner-transparent-overlay a:hover:after{background-color:#fff}.csharp-wrapper--banner-transparent-overlay a.su-button--secondary{text-shadow:none}.csharp-wrapper--banner-transparent-overlay a.su-button--secondary:active,.csharp-wrapper--banner-transparent-overlay a.su-button--secondary:focus,.csharp-wrapper--banner-transparent-overlay a.su-button--secondary:hover{color:#2e2d29}.csharp-wrapper--banner-transparent-overlay a.su-button,.csharp-wrapper--banner-transparent-overlay a.su-button--big{border-radius:7px;text-shadow:none}.csharp-wrapper--banner-transparent-overlay a.su-button--big:active,.csharp-wrapper--banner-transparent-overlay a.su-button--big:focus,.csharp-wrapper--banner-transparent-overlay a.su-button--big:hover,.csharp-wrapper--banner-transparent-overlay a.su-button:active,.csharp-wrapper--banner-transparent-overlay a.su-button:focus,.csharp-wrapper--banner-transparent-overlay a.su-button:hover{background-color:#fff;color:#2e2d29}.csharp-wrapper--banner-transparent-overlay a.su-button--big:active:after,.csharp-wrapper--banner-transparent-overlay a.su-button--big:focus:after,.csharp-wrapper--banner-transparent-overlay a.su-button--big:hover:after,.csharp-wrapper--banner-transparent-overlay a.su-button:active:after,.csharp-wrapper--banner-transparent-overlay a.su-button:focus:after,.csharp-wrapper--banner-transparent-overlay a.su-button:hover:after{background-color:#2e2d29}@media (min-width:1200px){.csharp-wrapper--banner-transparent-overlay a.su-button,.csharp-wrapper--banner-transparent-overlay a.su-button--big{font-size:2.8rem;padding:1.5rem 3rem 1.8rem}}@media (min-width:1500px){.csharp-wrapper--banner-transparent-overlay a.su-button,.csharp-wrapper--banner-transparent-overlay a.su-button--big{font-size:3rem}}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__media{min-height:auto;position:absolute}.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__media .gradient-overlay{background:linear-gradient(108deg,#121212 28.73%,rgba(46,45,41,0) 55.15%);height:100%;left:0;position:absolute;top:0;width:100%;z-index:9}}@media (min-width:768px) and (min-width:1200px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__media .gradient-overlay{width:95%}}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-hero.overlay-right .gradient-overlay{background:linear-gradient(252deg,#121212 28.73%,rgba(46,45,41,0) 55.15%);left:unset;right:0}.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card{background:transparent;border:0;bottom:unset;-webkit-box-shadow:none;box-shadow:none;margin-bottom:0;margin-top:0;max-width:375px;text-align:center;text-align:unset}}@media (min-width:768px) and (min-width:992px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card{max-width:525px}}@media (min-width:768px) and (min-width:1200px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card{max-width:600px}}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card .su-card__contents{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;color:#eaeaea;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;margin:0 auto;max-width:100ch;min-height:220px;padding-bottom:3.8rem;padding-top:3.4rem;text-shadow:0 4px 10px #000}}@media only screen and (min-width:768px) and (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card .su-card__contents{padding-top:5.8rem}}@media only screen and (min-width:768px) and (min-width:1500px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card .su-card__contents{padding-top:6.1rem}}@media only screen and (min-width:768px) and (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card .su-card__contents{padding-bottom:7.2rem}}@media only screen and (min-width:768px) and (min-width:1500px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card .su-card__contents{padding-bottom:7.6rem}}@media (min-width:768px){.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card .su-card__contents :first-child{margin-top:0}.csharp-wrapper--banner-transparent-overlay .su-hero .su-hero__card .su-card__contents span{font-size:1.25em;letter-spacing:-.01em}}.su-local-footer{background-color:#fff;border-top:1px solid #2e2d29}.su-local-footer .su-lockup__cell2,.su-local-footer h2,.su-local-footer h3,.su-local-footer h4,.su-local-footer h5{font-family:Roboto Slab,Georgia,Times,Times New Roman,serif}.su-local-footer #signup-submit,.su-local-footer .su-link--internal,.su-local-footer a,.su-local-footer p{font-family:Roboto}.su-masthead .su-lockup{-webkit-box-flex:unset;-ms-flex:unset;flex:unset;margin-bottom:1.8rem;margin-top:1.8rem}.su-masthead .su-lockup.su-lockup--option-o .su-lockup__cell1{border-right:1px solid #2e2d29;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;padding-right:2rem}.su-masthead .su-lockup.su-lockup--option-o .su-lockup__wordmark-wrapper{margin-bottom:1rem;margin-top:1rem}@media (min-width:768px){.su-masthead .su-lockup.su-lockup--option-o .su-lockup__wordmark{font-size:3.8rem}}@media (min-width:992px){.su-masthead .su-lockup.su-lockup--option-o .su-lockup__wordmark{font-size:4.1rem}}.su-masthead .su-lockup.su-lockup--option-o .su-lockup__line4{font-family:Roboto Slab,Georgia,Times,Times New Roman,serif;font-size:2.2rem;font-weight:400;margin-top:1.5rem;text-align:end;text-transform:unset}@media (min-width:768px){.su-masthead .su-lockup.su-lockup--option-o .su-lockup__line4{font-size:2.3rem}}@media (min-width:992px){.su-masthead .su-lockup.su-lockup--option-o .su-lockup__line4{font-size:2.7rem}}@media (min-width:576px){.su-masthead .su-site-search{display:block;margin:unset;min-width:30rem;padding-left:4rem;width:unset}}@media (min-width:768px){.su-masthead .su-site-search{min-width:40rem}}.su-masthead .su-site-search>form{width:100%}.su-masthead .su-site-search__submit{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='23' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.763 9.263a6.151 6.151 0 1 1-12.303 0 6.151 6.151 0 0 1 12.303 0Zm2.237 0a8.388 8.388 0 0 1-13.203 6.87l-6.17 5.695a1.118 1.118 0 1 1-1.517-1.643l6.039-5.575A8.388 8.388 0 1 1 22 9.263Z' fill='%23007C7E'/%3E%3C/svg%3E") no-repeat 0 0}.su-masthead>section:last-of-type{padding-top:0}@media (min-width:576px){.su-masthead>section:last-of-type{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-content:flex-start}}@media (min-width:1200px){.su-masthead>section:last-of-type{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}@media only screen and (min-width:992px) and (max-width:1199px){.su-masthead>section:last-of-type{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column wrap;flex-flow:column wrap}}@media only screen and (min-width:768px) and (max-width:991px){.su-masthead nav.preact-main-menu button{top:-60px}}#back-to-top,#signup-submit,.su-button,.su-button--big,.su-link--internal{background-color:#007c7e}#back-to-top:active,#back-to-top:focus,#back-to-top:hover,#signup-submit:active,#signup-submit:focus,#signup-submit:hover,.su-button--big:active,.su-button--big:focus,.su-button--big:hover,.su-button:active,.su-button:focus,.su-button:hover,.su-link--internal:active,.su-link--internal:focus,.su-link--internal:hover{background-color:#2e2d29}#back-to-top.su-link,#signup-submit.su-link,.su-button--big.su-link,.su-button.su-link,.su-link--internal.su-link{background-color:#007c7e}#back-to-top.mailto:active,#back-to-top.mailto:focus,#back-to-top.mailto:hover,#signup-submit.mailto:active,#signup-submit.mailto:focus,#signup-submit.mailto:hover,.su-button--big.mailto:active,.su-button--big.mailto:focus,.su-button--big.mailto:hover,.su-button.mailto:active,.su-button.mailto:focus,.su-button.mailto:hover,.su-link--internal.mailto:active,.su-link--internal.mailto:focus,.su-link--internal.mailto:hover{color:#fff}#back-to-top.mailto:active svg,#back-to-top.mailto:focus svg,#back-to-top.mailto:hover svg,#signup-submit.mailto:active svg,#signup-submit.mailto:focus svg,#signup-submit.mailto:hover svg,.su-button--big.mailto:active svg,.su-button--big.mailto:focus svg,.su-button--big.mailto:hover svg,.su-button.mailto:active svg,.su-button.mailto:focus svg,.su-button.mailto:hover svg,.su-link--internal.mailto:active svg,.su-link--internal.mailto:focus svg,.su-link--internal.mailto:hover svg{fill:#fff}a.su-button--secondary,a.su-link--external.su-button--secondary{-webkit-box-shadow:inset 0 0 0 2px #007c7e;box-shadow:inset 0 0 0 2px #007c7e;color:#007c7e}a.su-link--external.su-button--secondary:after{background-color:#007c7e}a.mailto.su-button--secondary svg{fill:#007c7e}.filter-menu .topics__collapsable-menu{color:#007c7e}.filter-menu .topics__collapsable-menu .su-link--jump:after{background-color:#007c7e}.filter-menu .menu .menu-item--active-trail .is-active,.filter-menu .menu .menu-item--active-trail:before,.su-link,.su-link--action,.su-link--internal,a{color:#007c7e}.su-link--action:after,.su-link--internal:after,.su-link:after,a:after{background-color:#007c7e}.su-link--action:active,.su-link--action:focus,.su-link--action:hover,.su-link--internal:active,.su-link--internal:focus,.su-link--internal:hover,.su-link:active,.su-link:focus,.su-link:hover,a:active,a:focus,a:hover{color:#2e2d29}.su-link--action:active:after,.su-link--action:focus:after,.su-link--action:hover:after,.su-link--internal:active:after,.su-link--internal:focus:after,.su-link--internal:hover:after,.su-link:active:after,.su-link:focus:after,.su-link:hover:after,a:active:after,a:focus:after,a:hover:after{background-color:#2e2d29}.su-link--action:active svg,.su-link--action:focus svg,.su-link--action:hover svg,.su-link--internal:active svg,.su-link--internal:focus svg,.su-link--internal:hover svg,.su-link:active svg,.su-link:focus svg,.su-link:hover svg,a:active svg,a:focus svg,a:hover svg{fill:#2e2d29}.su-link--action.mailto:after,.su-link--internal.mailto:after,.su-link.mailto:after,a.mailto:after{background-color:#007c7e}.su-link--action.mailto svg,.su-link--internal.mailto svg,.su-link.mailto svg,a.mailto svg{fill:#007c7e}.su-link--action.mailto:active,.su-link--action.mailto:focus,.su-link--action.mailto:hover,.su-link--internal.mailto:active,.su-link--internal.mailto:focus,.su-link--internal.mailto:hover,.su-link.mailto:active,.su-link.mailto:focus,.su-link.mailto:hover,a.mailto:active,a.mailto:focus,a.mailto:hover{color:#2e2d29}.su-link--action.mailto:active:after,.su-link--action.mailto:focus:after,.su-link--action.mailto:hover:after,.su-link--internal.mailto:active:after,.su-link--internal.mailto:focus:after,.su-link--internal.mailto:hover:after,.su-link.mailto:active:after,.su-link.mailto:focus:after,.su-link.mailto:hover:after,a.mailto:active:after,a.mailto:focus:after,a.mailto:hover:after{background-color:#2e2d29}.su-link--action.mailto:active svg,.su-link--action.mailto:focus svg,.su-link--action.mailto:hover svg,.su-link--internal.mailto:active svg,.su-link--internal.mailto:focus svg,.su-link--internal.mailto:hover svg,.su-link.mailto:active svg,.su-link.mailto:focus svg,.su-link.mailto:hover svg,a.mailto:active svg,a.mailto:focus svg,a.mailto:hover svg{fill:#2e2d29} \ No newline at end of file diff --git a/src/scss/components/masthead/_masthead.scss b/src/scss/components/masthead/_masthead.scss index 837ad09..f042807 100644 --- a/src/scss/components/masthead/_masthead.scss +++ b/src/scss/components/masthead/_masthead.scss @@ -12,22 +12,22 @@ padding-right: 2rem; max-width: max-content; } - + .su-lockup__wordmark-wrapper { margin-top: 1rem; margin-bottom: 1rem; } - + .su-lockup__wordmark { @include grid-media-min('md') { font-size: 3.8rem; } - + @include grid-media-min('lg') { font-size: 4.1rem; } } - + .su-lockup__line4{ font-family: $su-font-slab; font-weight: 400; @@ -35,11 +35,11 @@ margin-top: 1.5rem; text-transform: unset; text-align: end; - + @include grid-media-min('md') { font-size: 2.3rem; } - + @include grid-media-min('lg') { font-size: 2.7rem; } @@ -83,4 +83,19 @@ } } } + + // From 1199px down to 992px the mobile hamburger is on top of search. + @include grid-media-only('lg'){ + > section:last-of-type { + flex-flow: column wrap; + } + } + + // Moved hamburger out of brandbar. + @include grid-media-only('md'){ + nav.preact-main-menu button { + top: -60px; + } + } } +