@postnord/pn-marketweb-components 2.8.4 → 2.8.5

package/collection/components/media/pn-media-block/pn-media-block.css

@@ -0,0 +1,283 @@
+pn-media-block .media-block .media-block__block-container {
+  display: grid;
+  overflow: hidden;
+}
+pn-media-block .media-block .media-block__media-container, pn-media-block .media-block .media-block__content-container, pn-media-block .media-block .media-block__overlay-filter {
+  grid-area: 1/1;
+  width: 100%;
+  position: relative;
+}
+pn-media-block .media-block .media-block__media-container {
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+}
+pn-media-block .media-block .media-block__media-container img, pn-media-block .media-block .media-block__media-container video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  object-fit: cover;
+  pointer-events: none;
+  max-width: 100%;
+  max-height: none;
+  height: 100%;
+  width: 100%;
+  pointer-events: none;
+}
+pn-media-block .media-block .media-block__media-container pn-play-on-scroll {
+  width: 100%;
+  height: 100%;
+}
+pn-media-block .media-block .media-block__media-container .scroll-wrapper {
+  width: 100%;
+  height: 100%;
+}
+pn-media-block .media-block .media-block__media-container [slot=scroll-affected] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+pn-media-block .media-block .media-block__media-container .scroll-wrapper, pn-media-block .media-block .media-block__media-container .scroll-affected {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+pn-media-block .media-block .media-block__media-container video {
+  width: 100%;
+  height: 100%;
+}
+pn-media-block .media-block .media-block__overlay-filter {
+  z-index: 2;
+}
+pn-media-block .media-block .media-block__content-container {
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 1s;
+  flex-direction: column;
+  margin: 0 auto;
+  padding: 3.4rem 0;
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+@media (min-width: 576px) {
+  pn-media-block .media-block .media-block__content-container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  pn-media-block .media-block .media-block__content-container {
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  pn-media-block .media-block .media-block__content-container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  pn-media-block .media-block .media-block__content-container {
+    max-width: 1140px;
+  }
+}
+@media (min-width: 1640px) {
+  pn-media-block .media-block .media-block__content-container {
+    max-width: 1440px;
+  }
+}
+@media screen and (min-width: 992px) {
+  pn-media-block .media-block .media-block__content-container {
+    padding: 6.4rem 0;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-media-block .media-block .media-block__content-container {
+    padding: 7.2rem 0;
+  }
+}
+@media screen and (min-width: 1640px) {
+  pn-media-block .media-block .media-block__content-container {
+    padding: 8rem 0;
+  }
+}
+pn-media-block .media-block .media-block__content-container .media-block__block-heading {
+  max-width: 100rem;
+  text-wrap: balance;
+  color: white;
+  font-size: 3.2rem;
+  text-align: center;
+  font-weight: 700;
+  line-height: 1.1;
+  margin-bottom: 3rem;
+}
+@media screen and (min-width: 576px) {
+  pn-media-block .media-block .media-block__content-container .media-block__block-heading {
+    font-size: 4rem;
+  }
+}
+@media screen and (min-width: 768px) {
+  pn-media-block .media-block .media-block__content-container .media-block__block-heading {
+    font-size: 4.8rem;
+  }
+}
+@media screen and (min-width: 992px) {
+  pn-media-block .media-block .media-block__content-container .media-block__block-heading {
+    font-size: 5.6rem;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-media-block .media-block .media-block__content-container .media-block__block-heading {
+    font-size: 8rem;
+  }
+}
+@media screen and (min-width: 1640px) {
+  pn-media-block .media-block .media-block__content-container .media-block__block-heading {
+    font-size: 8.8rem;
+  }
+}
+pn-media-block .media-block .media-block__content-container .media-block__preamble {
+  max-width: 80rem;
+  max-width: 80ch;
+  text-wrap: balance;
+  display: flex;
+  color: white;
+  font-size: 1.8rem;
+  text-align: center;
+  font-weight: 300;
+}
+@media screen and (min-width: 576px) {
+  pn-media-block .media-block .media-block__content-container .media-block__preamble {
+    font-size: 2rem;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-media-block .media-block .media-block__content-container .media-block__preamble {
+    font-size: 2.4rem;
+  }
+}
+@media screen and (min-width: 1640px) {
+  pn-media-block .media-block .media-block__content-container .media-block__preamble {
+    font-weight: 500;
+  }
+}
+pn-media-block .media-block .media-block__content-container .media-block__cta-link {
+  margin-top: 3rem;
+}
+pn-media-block .media-block--height-100svh {
+  height: 100vh;
+}
+@supports (height: 100svh) {
+  pn-media-block .media-block--height-100svh {
+    height: 100svh;
+  }
+}
+pn-media-block .media-block--height-100svh .media-block__block-container {
+  height: 100vh;
+}
+@supports (max-height: 100svh) {
+  pn-media-block .media-block--height-100svh .media-block__block-container {
+    max-height: 100svh;
+  }
+}
+pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container, pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container, pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter {
+  height: 100vh;
+}
+@supports (max-height: 100svh) {
+  pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container, pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container, pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter {
+    max-height: 100svh;
+  }
+}
+pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture {
+  height: 100vh;
+}
+@supports (max-height: 100svh) {
+  pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture {
+    max-height: 100svh;
+  }
+}
+pn-media-block .media-block--height-65svh {
+  height: 65svh;
+  overflow: auto;
+}
+pn-media-block .media-block--height-65svh .media-block__block-container {
+  height: 65vh;
+}
+@supports (max-height: 100svh) {
+  pn-media-block .media-block--height-65svh .media-block__block-container {
+    max-height: 65svh;
+  }
+}
+pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container, pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container, pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter {
+  height: 65vh;
+}
+@supports (max-height: 100svh) {
+  pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container, pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container, pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter {
+    max-height: 65svh;
+  }
+}
+pn-media-block .media-block--height-65svh .media-block__media-container img {
+  max-height: none !important;
+  height: auto !important;
+}
+pn-media-block .media-block--height-dynamic {
+  height: auto;
+  overflow: auto;
+}
+pn-media-block .media-block--height-dynamic .media-block__block-container {
+  height: auto;
+  max-height: none;
+}
+pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__media-container, pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__content-container, pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__overlay-filter {
+  height: auto;
+  max-height: none;
+}
+pn-media-block .media-block--with-overlay .media-block__block-container .media-block__overlay-filter {
+  z-index: 2;
+  background: radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%);
+}
+pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container, pn-media-block .media-block--fixed-background .media-block__block-container .media-block__overlay-filter {
+  position: relative;
+  overflow: hidden;
+  top: 0;
+  width: 100%;
+  display: flex !important;
+  clip-path: inset(0);
+}
+pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  display: flex !important;
+  clip-path: inset(0);
+  height: 100%;
+}
+pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture img {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+pn-media-block .media-block--video .media-block__content-container {
+  max-width: 80%;
+}
+pn-media-block .media-block--animate-overlay-background .media-block__overlay-filter {
+  background-size: 200% 200% !important;
+  animation: overlayBackgroundAnimation 20s ease infinite;
+}
+@keyframes overlayBackgroundAnimation {
+  0% {
+    background-position: 100% 100%;
+  }
+  50% {
+    background-position: 50% 60%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}