@postnord/web-components/collection/components/navigation/pn-card/pn-card.css

PostNord Web Components

/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-card {
  position: relative;
  display: block;
}

pn-card .pn-card {
  position: relative;
  background-color: #ffffff;
  color: #2d2013;
  border-radius: 0.5em;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  box-shadow: 0em 0.0625em 0.125em 0em rgba(20, 20, 20, 0.11), 0em 0.1875em 0.4375em 0em rgba(0, 0, 0, 0.13);
  outline: 0.2rem solid transparent;
  outline-offset: 0.2rem;
  transition-property: background-color, outline-color;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  pn-card .pn-card {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}
pn-card .pn-card[data-link]:hover {
  background-color: #e0f8ff;
}
pn-card .pn-card[data-link][data-focus] {
  outline-color: #005d92;
}
pn-card .pn-card {
  /** If you use a `href`, hide the navigation slot. */
}
pn-card .pn-card[data-link] .pn-card-navigation > [slot=navigation] {
  display: none;
}
pn-card .pn-card[data-horizontal] {
  flex-direction: row;
}
pn-card .pn-card[data-horizontal][data-reverse] {
  flex-direction: row-reverse;
}
pn-card .pn-card[data-horizontal][data-reverse] .pn-card-picture {
  clip-path: ellipse(100% 175% at right center);
}
pn-card .pn-card[data-horizontal] .pn-card-content {
  flex: 1 1 50%;
}
pn-card .pn-card[data-horizontal] .pn-card-image {
  flex: 1 1 50%;
  flex-direction: row;
}
pn-card .pn-card[data-horizontal] .pn-card-picture {
  width: 100%;
  clip-path: ellipse(100% 175% at left center);
}
pn-card .pn-card[data-reverse] {
  flex-direction: column-reverse;
}
pn-card .pn-card[data-reverse] .pn-card-picture {
  clip-path: ellipse(175% 100% at bottom center);
}
pn-card .pn-card-header {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5em, 5vw, 0.75em);
}
pn-card .pn-card-label {
  font-size: clamp(1.125em, 5vw, 1.5em);
  font-weight: 700;
  margin: 0;
}
pn-card .pn-card-label-overline {
  color: #5e554a;
  font-size: 0.875em;
  font-weight: 400;
  margin: 0;
}
pn-card .pn-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: #005d92;
  text-decoration-color: transparent;
  -webkit-tap-highlight-color: transparent;
  transition-property: color, text-decoration-color;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  pn-card .pn-card-link {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}
pn-card .pn-card-link:hover {
  color: #0d234b;
  text-decoration-color: #0d234b;
}
pn-card .pn-card-link:hover > pn-icon .pn-icon-svg > path {
  fill: #0d234b;
}
pn-card .pn-card-link:focus {
  outline: 0;
  color: #0d234b;
  text-decoration-color: #0d234b;
}
pn-card .pn-card-link:focus > pn-icon .pn-icon-svg > path {
  fill: #0d234b;
}
pn-card .pn-card-link:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
pn-card .pn-card-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: 1;
  gap: clamp(0.5em, 5vw, 0.75em);
  padding: clamp(0.75em, 5vw, 1.5em) clamp(0.75em, 5vw, 1.5em);
}
pn-card .pn-card-section {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  color: #5e554a;
}
pn-card .pn-card-section-paragraph,
pn-card .pn-card-section p {
  margin: 0 0 0.25em;
}
pn-card .pn-card-section-paragraph:last-child,
pn-card .pn-card-section p:last-child {
  margin: 0em;
}
pn-card .pn-card-navigation {
  margin-top: auto;
  padding-top: clamp(0.5em, 5vw, 0.75em);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
}
pn-card .pn-card-navigation > pn-button {
  flex: 1 1 12em;
}
pn-card .pn-card-navigation:empty {
  display: none;
}
pn-card .pn-card-image {
  position: relative;
  display: flex;
  flex-direction: column;
}
pn-card .pn-card-picture {
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  clip-path: ellipse(175% 100% at top center);
  aspect-ratio: var(--pn-card-aspect-ratio);
}
pn-card .pn-card-picture:empty {
  display: none;
}
pn-card .pn-card-picture > *[slot=image] {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
pn-card .pn-card-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
}
pn-card .pn-card-tags:empty {
  display: none;
}
pn-card .pn-card > .pn-ripple {
  animation: ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);
  position: absolute;
  border-radius: 50%;
  background-color: #005d92;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.1;
  pointer-events: none;
  z-index: 3;
}
@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}