diff --git a/scss/header.scss b/scss/header.scss index f4d810c..8d332c7 100644 --- a/scss/header.scss +++ b/scss/header.scss @@ -140,11 +140,18 @@ body.activate-account-page { grid-row: 1; justify-self: end; + padding-right: 1em; + // the title and panel don't exist on the same plane // so we let the panel overlap the title // and fade it out so it looks intentional + background: var(--background-color); + @media screen and (max-width: 850px) { + background: var(--secondary); + } + &:before { content: ""; background: linear-gradient( @@ -152,6 +159,13 @@ body.activate-account-page { rgba(255, 255, 255, 0) 0%, var(--background-color) 80% ); + @media screen and (max-width: 850px) { + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + var(--secondary) 80% + ); + } top: -0.5em; bottom: 0; height: 4em; @@ -167,6 +181,28 @@ body.activate-account-page { .after-header-panel-outlet { grid-row: 1; } + + .before-header-panel-outlet { + &:has(.search-banner) { + grid-column: 2; + } + + @media screen and (max-width: 1280px) { + .floating-search-input { + margin-left: 2.75em; + padding-right: 15em; + } + } + } + } + } + + @media screen and (max-width: 1000px) { + &.search-header--visible + .floating-search-input + .search-banner-inner.wrap + .search-menu { + width: 100%; } } }