diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css index de0ac30f614c4b29e4e20770b1b968d233b1c8d3..e4e023c0637d8c59237c4e20936a740c0f544ea7 100644 --- a/main/static/main/css/styles.css +++ b/main/static/main/css/styles.css @@ -1538,9 +1538,26 @@ video { .photo-header { height: 414px; + position: relative; } +.photo-header:after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: black; + opacity: 0.4; + z-index: 1; + } + +.photo-header > div { + z-index: 10; + } + @media (min-width: 768px) { .photo-header { @@ -2478,6 +2495,10 @@ p{ position: relative; } +.header-carousel img { + filter: brightness(60%); + } + .header-carousel .header-carousel--text{ font-family: Bebas Neue, Helvetica, Arial, sans-serif; } diff --git a/main/styleguide/source/css/atoms/extra_sizing.pcss b/main/styleguide/source/css/atoms/extra_sizing.pcss index 070b5e13f96447c5f903d077c65af4fc24bf0dea..9fc72e2a34d1b5aeb7969559fa309c14f6034e3b 100644 --- a/main/styleguide/source/css/atoms/extra_sizing.pcss +++ b/main/styleguide/source/css/atoms/extra_sizing.pcss @@ -14,7 +14,23 @@ .photo-header { height: 414px; + position: relative; + + &:after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: black; + opacity: 0.4; + z-index: 1; + } + > div { + z-index: 10; + } @screen md { height: 40vw; } diff --git a/main/styleguide/source/css/molecules/carousels.pcss b/main/styleguide/source/css/molecules/carousels.pcss index e43cfd550d6bd9dc58bb3027491935377ba2867d..5fdb49d9e08a55ed1c4715d6c1fcd1d9997ff807 100644 --- a/main/styleguide/source/css/molecules/carousels.pcss +++ b/main/styleguide/source/css/molecules/carousels.pcss @@ -29,6 +29,10 @@ margin: 0 auto; position: relative; + img { + filter: brightness(60%); + } + .header-carousel--text { @apply font-alt text-4xl sm:text-5xl uppercase lg:text-7xl; max-width: 1200px;