@postnord/pn-marketweb-components 4.2.1 → 4.2.3

package/collection/components/cards/pn-versa-card/pn-versa-card.css

@@ -0,0 +1,519 @@
+pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
+  min-height: initial;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
+pn-versa-card {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  --versa-card-bg: transparent;
+  --versa-card-heading-color: inherit;
+  --versa-card-text-color: inherit;
+  --versa-card-blockquote-border-color: inherit;
+  --versa-link-color: #005d92;
+  --versa-card-padding: 1.6rem;
+  --versa-card-heading-size: 2.4rem;
+  --versa-card-preamble-size: 1.8rem;
+  --versa-card-label-size: 1.2rem;
+  --rte-text-color: var(--versa-card-text-color);
+  --rte-heading-color: var(--versa-card-heading-color);
+  --rte-blockquote-border-color: var(--versa-card-blockquote-border-color);
+  --rte-image-radius: 1.6rem;
+}
+pn-versa-card .pn-versa-card-label {
+  display: block;
+  font-size: var(--versa-card-label-size);
+  text-transform: uppercase;
+  margin: 0 0 0.4rem 0;
+}
+pn-versa-card .pn-versa-card-heading {
+  font-size: var(--versa-card-heading-size);
+  margin: 0 0 0.4rem 0;
+  color: var(--versa-card-heading-color);
+}
+pn-versa-card .pn-versa-card-preamble {
+  font-size: var(--versa-card-preamble-size);
+  margin: 0 0 0.4rem 0;
+}
+
+pn-versa-card .pn-versa-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: 0.8rem;
+  position: relative;
+}
+pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image],
+pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture,
+pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+pn-versa-card .pn-versa-card .pn-versa-card-imageWrapper [slot=image] picture img {
+  border-radius: 1.6rem;
+  object-fit: cover;
+}
+pn-versa-card .pn-versa-card .pn-versa-card-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  gap: 1.6rem;
+  max-width: 100%;
+  margin: 0 auto;
+  padding-bottom: 1.6rem;
+  --pn-link-current-color: var(--versa-link-color);
+  --rte-link-color: var(--pn-link-current-color);
+}
+pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-textContent {
+  display: flex;
+  flex-direction: column;
+  color: var(--versa-card-text-color);
+  max-width: 70rem;
+}
+pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper {
+  display: flex;
+  align-items: center;
+  min-height: 4.8rem;
+  width: 100%;
+}
+pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1.6rem;
+  width: 100%;
+}
+pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a {
+  margin-bottom: 0;
+}
+pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] pn-button[appearance=light] {
+  color: unset;
+}
+pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a:not(.pn-button) {
+  color: var(--pn-link-current-color);
+  text-decoration: none;
+  font-weight: 400;
+}
+pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a:not(.pn-button):hover {
+  text-decoration: underline;
+}
+pn-versa-card .pn-versa-card .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a.versa-card-cta-link-animated pn-icon svg path {
+  fill: var(--pn-link-current-color);
+}
+
+pn-versa-card .pn-versa-card-hasBg {
+  position: relative;
+  padding: var(--versa-card-padding);
+  border-radius: 1.6rem;
+  background-color: transparent;
+}
+pn-versa-card .pn-versa-card-hasBg::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: var(--versa-card-bg);
+  border-radius: inherit;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 1;
+}
+pn-versa-card .pn-versa-card-hasBg > * {
+  position: relative;
+  z-index: 1;
+}
+pn-versa-card .pn-versa-card-hasBg .pn-versa-card-content {
+  padding-bottom: 0;
+}
+pn-versa-card .pn-versa-card-hasBg.pn-versa-card-transparentBackground::before {
+  opacity: 0.9;
+}
+pn-versa-card .pn-versa-card-hasImageCover {
+  padding: 0;
+}
+pn-versa-card .pn-versa-card-hasImageCover .pn-versa-card-imageWrapper {
+  height: 100%;
+  margin-bottom: 0;
+}
+pn-versa-card .pn-versa-card-hasImageCover .pn-versa-card-imageWrapper [slot=image] picture img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText {
+  --pn-versa-hover-overlay-alpha: var(--pn-versa-opacity, 0.85);
+}
+pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper {
+  position: relative;
+  height: 100%;
+}
+pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::before, pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 1.6rem;
+  pointer-events: none;
+}
+pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::before {
+  background: radial-gradient(circle, rgba(13, 35, 75, 0.8) 7%, rgba(13, 35, 75, 0) 100%);
+  z-index: 1;
+}
+pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::after {
+  background-color: rgba(13, 35, 75, var(--pn-versa-hover-overlay-alpha));
+  opacity: 0;
+  transition: opacity 1s;
+  z-index: 2;
+}
+pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper [slot=image] picture img {
+  position: relative;
+  z-index: 0;
+}
+pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-content {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 2.4rem;
+  max-width: unset;
+  color: #ffffff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5);
+  --pn-link-current-color: #ffffff;
+  --rte-text-color: #ffffff;
+  --rte-heading-color: #ffffff;
+  --rte-blockquote-text-color: #ffffff;
+  --rte-blockquote-border-color: rgba(255, 255, 255, 0.8);
+  --rte-quote-author-color: #ffffff;
+  --rte-quote-author-bg: rgba(255, 255, 255, 0.16);
+}
+pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-content a {
+  color: var(--pn-link-current-color);
+  text-shadow: none;
+}
+pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-content pn-button[appearance=light] a {
+  color: #005d92;
+}
+pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] a.versa-card-cta-link-animated pn-icon svg path {
+  fill: var(--pn-link-current-color);
+}
+pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText:hover .pn-versa-card-imageWrapper::after {
+  opacity: 1;
+}
+pn-versa-card .pn-versa-card-hasRoundedImage .pn-versa-card-imageWrapper {
+  width: auto;
+  height: auto;
+}
+pn-versa-card .pn-versa-card-hasRoundedImage .pn-versa-card-imageWrapper [slot=image] picture img {
+  aspect-ratio: 1/1;
+  width: 100%;
+  height: 100%;
+  max-width: 12rem;
+  border-radius: 50%;
+}
+
+pn-versa-card .pn-versa-card-horizontal {
+  flex-direction: column;
+}
+pn-versa-card .pn-versa-card-horizontal.pn-versa-card-imageGrow .pn-versa-card-imageWrapper [slot=image] picture img {
+  height: 100%;
+}
+pn-versa-card .pn-versa-card-center .pn-versa-card-imageWrapper {
+  align-self: center;
+}
+pn-versa-card .pn-versa-card-center .pn-versa-card-content {
+  align-items: center;
+  text-align: center;
+}
+pn-versa-card .pn-versa-card-center .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] {
+  justify-content: center;
+}
+pn-versa-card .pn-versa-card-alignMiddle {
+  justify-content: center;
+}
+pn-versa-card .pn-versa-card-alignMiddle .pn-versa-card-content {
+  height: auto;
+}
+
+pn-versa-card[data-card-color=white] {
+  --versa-card-bg: #ffffff;
+}
+pn-versa-card[data-card-color=blue25] {
+  --versa-card-bg: #effbff;
+  --versa-card-blockquote-border-color: #00a0d6;
+}
+pn-versa-card[data-card-color=blue50] {
+  --versa-card-bg: #e0f8ff;
+  --versa-card-blockquote-border-color: #00a0d6;
+}
+pn-versa-card[data-card-color=blue400] {
+  --versa-card-bg: #00a0d6;
+}
+pn-versa-card[data-card-color=blue900] {
+  --versa-card-bg: #0d234b;
+  --versa-card-heading-color: #8eddf9;
+  --versa-card-text-color: #ffffff;
+  --versa-card-blockquote-border-color: #ffffff;
+  --versa-link-color: #ffffff;
+}
+pn-versa-card[data-card-color=coral25] {
+  --versa-card-bg: #fef7f6;
+  --versa-card-blockquote-border-color: #f06365;
+}
+pn-versa-card[data-card-color=coral50] {
+  --versa-card-bg: #fdefee;
+  --versa-card-blockquote-border-color: #f06365;
+}
+pn-versa-card[data-card-color=green25] {
+  --versa-card-bg: #edfbf3;
+  --versa-card-blockquote-border-color: #5ec584;
+}
+pn-versa-card[data-card-color=green50] {
+  --versa-card-bg: #dcf6e7;
+  --versa-card-blockquote-border-color: #5ec584;
+}
+
+@media (min-width: 600px) {
+  pn-versa-card .pn-versa-card-horizontal {
+    flex-direction: row;
+    gap: 3.2rem;
+  }
+  pn-versa-card .pn-versa-card-horizontal .pn-versa-card-imageWrapper,
+  pn-versa-card .pn-versa-card-horizontal .pn-versa-card-content {
+    flex: 1;
+  }
+  pn-versa-card .pn-versa-card-horizontal .pn-versa-card-imageWrapper {
+    height: auto;
+  }
+  pn-versa-card .pn-versa-card-horizontal .pn-versa-card-imageWrapper [slot=image] picture img {
+    height: auto;
+    position: sticky;
+    top: 1.6rem;
+  }
+  pn-versa-card .pn-versa-card-horizontal .pn-versa-card-content {
+    width: 50%;
+    box-sizing: border-box;
+    justify-content: flex-start;
+  }
+  pn-versa-card .pn-versa-card-horizontal.pn-versa-card-hasBg {
+    padding: 2.4rem;
+  }
+  pn-versa-card .pn-versa-card-horizontal.pn-versa-card-horizontal--imgRight {
+    flex-direction: row-reverse;
+  }
+  pn-versa-card .pn-versa-card-horizontal.pn-versa-card-imageGrow .pn-versa-card-imageWrapper {
+    height: 100%;
+  }
+  pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-imageWrapper {
+    align-self: auto;
+  }
+  pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-content {
+    align-items: stretch;
+    text-align: center;
+  }
+  pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-content .pn-versa-card-textContent,
+  pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-content .pn-versa-card-linkwrapper {
+    align-self: center;
+  }
+  pn-versa-card .pn-versa-card-horizontal.pn-versa-card-center .pn-versa-card-content .pn-versa-card-linkwrapper [slot=cta] {
+    justify-content: center;
+  }
+  pn-versa-card .pn-versa-card-horizontal.pn-versa-card-alignMiddle {
+    align-items: flex-start;
+  }
+  pn-versa-card .pn-versa-card-horizontal.pn-versa-card-alignMiddle .pn-versa-card-content {
+    align-self: center;
+  }
+  pn-versa-card .pn-versa-card-horizontal.pn-versa-card-hasRoundedImage .pn-versa-card-imageWrapper {
+    width: 50%;
+  }
+  pn-versa-card .pn-versa-card-horizontal.pn-versa-card-hasRoundedImage .pn-versa-card-imageWrapper [slot=image] picture img {
+    max-width: unset;
+  }
+}
+@media (min-width: 1440px) {
+  pn-versa-card .pn-versa-card-horizontal.pn-versa-card-hasBg {
+    padding: 3.2rem;
+  }
+}
+pn-versa-card .versa-card-cta-link-animated pn-icon {
+  position: relative;
+  left: -0.3rem;
+  transition: 0.3s ease-in-out;
+}
+pn-versa-card .versa-card-cta-link-animated:hover pn-icon {
+  left: 0;
+}
+
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] {
+  color: var(--rte-text-color, inherit);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] a {
+  text-decoration: underline;
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] a:not(.pn-button) {
+  color: var(--rte-link-color, currentColor);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] h1 {
+  font-size: var(--rte-h1-size, 2.4rem);
+  color: var(--rte-heading-color, inherit);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] h2 {
+  font-size: var(--rte-h2-size, 2.4rem);
+  color: var(--rte-heading-color, inherit);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] h3 {
+  font-size: var(--rte-h3-size, 2rem);
+  color: var(--rte-heading-color, inherit);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] h4 {
+  font-size: var(--rte-h4-size, 1.8rem);
+  color: var(--rte-heading-color, inherit);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] h5 {
+  font-weight: var(--rte-h5-weight, 500);
+  color: var(--rte-heading-color, inherit);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] h6 {
+  font-weight: var(--rte-h6-weight, 500);
+  color: var(--rte-heading-color, inherit);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] strong {
+  font-weight: var(--rte-strong-weight, 500);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] ul {
+  padding-left: var(--rte-list-padding-left, 2.4rem);
+  margin-bottom: var(--rte-list-margin-bottom, 3.2rem);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] ol {
+  padding-left: var(--rte-list-padding-left, 2.4rem);
+  margin-bottom: var(--rte-list-margin-bottom, 3.2rem);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] .flex-bullet-list {
+  padding-left: 0;
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] table {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  margin-bottom: var(--rte-table-margin-bottom, 2.4rem);
+  padding: var(--rte-table-padding, 0.8rem);
+  border: none;
+  border-radius: var(--rte-table-radius, 0.8rem);
+  background: var(--rte-table-bg, #fff);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] table.table-tiny-mce th {
+  background: transparent;
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] th {
+  padding: var(--rte-th-padding, 0.8rem);
+  min-width: var(--rte-th-min-width, 20rem);
+  text-align: left;
+  font-weight: var(--rte-th-font-weight, 500);
+  background: var(--rte-th-bg, #effbff);
+  border: var(--rte-th-border-width, 3px) solid var(--rte-th-border-color, #e0f8ff);
+  color: var(--rte-th-color, inherit);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] td {
+  padding: var(--rte-td-padding, 0.8rem);
+  min-width: var(--rte-td-min-width, 20rem);
+  text-align: left;
+  border: var(--rte-td-border-width, 1px) solid var(--rte-td-border-color, #e2e2e2);
+  background: var(--rte-td-bg, #fff);
+  color: var(--rte-td-color, inherit);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] blockquote {
+  padding-left: var(--rte-blockquote-padding-left, 1.6rem);
+  margin: var(--rte-blockquote-margin, 1.6rem 0);
+  border-left: var(--rte-blockquote-border-width, 0.4rem) solid var(--rte-blockquote-border-color, currentColor);
+  border-radius: var(--rte-blockquote-radius, 0);
+  color: var(--rte-blockquote-text-color, inherit);
+  background: var(--rte-blockquote-bg, transparent);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] blockquote p {
+  margin: var(--rte-blockquote-paragraph-margin, 0);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] blockquote em {
+  display: inline-block;
+  font-style: normal;
+  margin-top: var(--rte-quote-author-margin-top, 0.8rem);
+  font-size: var(--rte-quote-author-font-size, 1.4rem);
+  padding: var(--rte-quote-author-padding, 0.4rem);
+  border-radius: var(--rte-quote-author-radius, 0.4rem);
+  background: var(--rte-quote-author-bg, rgba(255, 255, 255, 0.1));
+  color: var(--rte-quote-author-color, inherit);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] .accordionblock-title {
+  font-size: var(--rte-accordion-title-size, 1.8rem);
+  color: var(--rte-heading-color, inherit);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] img {
+  border-radius: var(--rte-image-radius, 0);
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] .EPiServerForms .Form__Element {
+  margin-bottom: 0;
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] .FormSubmitButton .btn {
+  margin-bottom: 0;
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] .EPiServerForms .Form__MainBody section > div {
+  margin-bottom: var(--rte-forms-spacing, 1.6rem) !important;
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] .pn-quote-card__section {
+  max-width: none !important;
+  background-color: transparent;
+}
+pn-versa-card .pn-versa-card-RTEtext [slot=rte] .quoteblock-section .pn-quote-card__section .pn-quote-card__quote {
+  border: none !important;
+  padding-left: 0 !important;
+}
+
+.onethirdwidth pn-versa-card {
+  --rte-forms-spacing: 1.2rem;
+}
+
+@media (min-width: 992px) {
+  .onequarterwidth pn-versa-card {
+    --versa-card-padding: 0.8rem;
+    --versa-card-heading-size: 2rem;
+    --versa-card-preamble-size: 1.7rem;
+    --versa-card-label-size: 1.1rem;
+    --rte-h2-size: 2rem;
+    --rte-h3-size: 1.8rem;
+    --rte-h4-size: 1.6rem;
+  }
+  .halfwidth pn-versa-card,
+  .fullwidth pn-versa-card {
+    --rte-blockquote-margin: 2.4rem 0;
+  }
+}