@dnb/eufemia/extensions/payment-card/style/dnb-payment-card.css

DNB Eufemia Design System UI Library

/*
 * PaymentCard component styles
 * This file provides styling for the PaymentCard component, including general design tokens
 * and variations for different card types (e.g., default, pluss, gold, etc.).
 */
/*
 * Utilities
 */
/*
 * CSS Properties Sbanken
 *
 */
:root {
  --sb-font-family-default: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  --sb-font-family-heading: 'MaisonNeueHeadings', 'Roboto', 'Helvetica',
    'Arial', sans-serif;
  --sb-font-weight-default: normal;
  --sb-font-weight-basis: normal;
  --sb-font-weight-regular: normal;
  --sb-font-weight-medium: 500;
  --sb-font-weight-bold: 700;
  --sb-font-size-x-small: 0.75rem;
  --sb-font-size-small: 0.875rem;
  --sb-font-size-basis: 1rem;
  --sb-font-size-basis--em: 1em;
  --sb-font-size-lead: var(--font-size-medium);
  --sb-font-size-medium: 1.25rem;
  --sb-font-size-medium--plus: 1.625rem;
  --sb-font-size-large: 2rem;
  --sb-font-size-x-large: 2.375rem;
  --sb-font-size-xx-large: 3rem;
  --sb-line-height-x-small: 1.125rem;
  --sb-line-height-small: 1.25rem;
  --sb-line-height-basis: 1.5rem;
  --sb-line-height-basis--em: 1.5em;
  --sb-line-height-lead: 1.75rem;
  --sb-line-height-medium: 2rem;
  --sb-line-height-large: 2.375rem;
  --sb-line-height-x-large: 2.75rem;
  --sb-line-height-xx-large: 3.375rem;
  --sb-color-black: #000;
  --sb-color-text: #18172a;
  --sb-color-gray-dark-3: #3a3a4a;
  --sb-color-gray-dark-3-neutral: #3e3e4a;
  --sb-color-gray-dark-2: #4a4a5b;
  --sb-color-gray-dark-2-neutral: #656472;
  --sb-color-gray-dark: #666578;
  --sb-color-gray-dark-neutral: #9494a3;
  --sb-color-gray: #bbbbce;
  --sb-color-gray-neutral: #bdbdc6;
  --sb-color-gray-light: #d9d9e4;
  --sb-color-gray-light-2: #ebebf2;
  --sb-color-gray-light-3: #f9f9fd;
  --sb-color-purple: #1c1b4e;
  --sb-color-purple-alternative: #222163;
  --sb-color-green: #92eecd;
  --sb-color-white: #fff;
  --sb-color-red: #d8134b;
  --sb-color-magenta: #ff3c64;
  --sb-color-orange: #ff5b44;
  --sb-color-yellow-dark: #f7bf16;
  --sb-color-yellow: #ffef57;
  --sb-color-green-dark-3: #00785b;
  --sb-color-green-dark-2: #1e9f73;
  --sb-color-violet: #4e08bc;
  --sb-color-violet-light: #7129e2;
  --sb-color-blue-dark-2: #044ccc;
  --sb-color-blue-dark: #005cff;
  --sb-color-blue: #008eff;
  --sb-color-orange-light: #ff817b;
  --sb-color-orange-light-2: #ffd7d5;
  --sb-color-orange-light-3: #fff0ef;
  --sb-color-magenta-light: #ffb6d2;
  --sb-color-magenta-light-2: #ffdbe9;
  --sb-color-magenta-light-3: #fff5f9;
  --sb-color-yellow-light: #fff489;
  --sb-color-yellow-light-2: #fff9c4;
  --sb-color-yellow-light-3: #fffce5;
  --sb-color-green-dark: #64d7b4;
  --sb-color-green-light: #c8f6e5;
  --sb-color-green-light-2: #e5fff7;
  --sb-color-violet-light-2: #be99ff;
  --sb-color-violet-light-3: #e0d0ff;
  --sb-color-violet-light-4: #f1ebff;
  --sb-color-blue-light: #61b9ff;
  --sb-color-blue-light-2: #bfe3ff;
  --sb-color-blue-light-3: #ebf6ff;
  --sb-spacing-x-small: 0.5rem;
  --sb-spacing-small: 1rem;
  --sb-spacing-medium: 1.5rem;
  --sb-spacing-large: 2rem;
  --sb-spacing-x-large: 3rem;
  --sb-spacing-xx-large: 3.5rem;
  --sb-layout-small: 40em;
  --sb-layout-medium: 60em;
  --sb-layout-large: 72em;
  --sb-layout-x-large: 80em;
  --sb-layout-xx-large: 90em;
  --sb-shadow-small: 0 2px 4px rgba(38 35 66 / 12%);
  --sb-shadow-medium: 0 5px 20px rgba(38 35 66 / 10%);
  --sb-shadow-large: 0 5px 20px rgba(38 35 66 / 20%);
  --sb-shadow-hover: 0 20px 40px rgba(38 35 66 / 20%);
  --sb-easing-default: cubic-bezier(0.42, 0, 0, 1);
  --prose-max-width: 60ch;
}

.dnb-payment-card {
  /*
   * Define custom CSS variables used throughout the PaymentCard component.
   * These variables allow for reusable colors, border-radius, and overlay background transitions.
   */
  --color-dark-cyan: #003b47;
  --dnb-payment-bg-default: var(--color-sea-green);
  --dnb-payment-bg-pluss: var(--color-ocean-green);
  --dnb-payment-bg-white: var(--color-white);
  --dnb-payment-bg-gold: #d8c583;
  --dnb-payment-bg-black-gold: #1f1b10;
  --dnb-payment-bg-black-grey: #1c1c1e;
  --dnb-payment-overlay-bg-dark: rgba(0 0 0 / 60%);
  --dnb-payment-overlay-bg-light: rgba(255 255 255 / 70%);
  --dnb-payment-border-radius: 12px;
  margin: 0;
  border-radius: var(--dnb-payment-border-radius);
  /*
   * Base styles for the card element including size, padding, color, and shadow.
   * This serves as the core design for all PaymentCard variations.
   */
}
.dnb-payment-card__card {
  width: 100%;
  height: 100%;
  padding: 16px;
  border-radius: inherit;
  color: var(--color-white);
  box-shadow: var(--shadow-default);
  transition: all 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  -webkit-user-select: none;
          user-select: none;
}
.dnb-payment-card__card__wrapper {
  position: relative;
  width: 343px;
  height: 216px;
  border-radius: inherit;
  border: 1px solid var(--color-black-8);
}
.dnb-payment-card__card__wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.dnb-payment-card__card--blocked {
  opacity: 0.5;
}
.dnb-payment-card__card {
  /*
   * Design variations for different card types.
   * Each modifier represents a unique card style and contains
   * specific background and text color configurations.
   */
}
.dnb-payment-card__card--design-default {
  background-color: var(--dnb-payment-bg-default);
  color: var(--color-white);
}
.dnb-payment-card__card--design-pluss {
  background-color: var(--dnb-payment-bg-pluss);
  color: var(--color-white);
}
.dnb-payment-card__card--design-ung, .dnb-payment-card__card--design-youth, .dnb-payment-card__card--design-my-first {
  background-color: var(--dnb-payment-bg-white);
  color: var(--color-black);
}
.dnb-payment-card__card--design-gold {
  background-color: var(--dnb-payment-bg-gold);
  color: var(--color-black);
}
.dnb-payment-card__card--design-saga {
  background-color: var(--dnb-payment-bg-black-gold);
  color: var(--color-white);
}
.dnb-payment-card__card--design-saga .provider--separator {
  color: var(--dnb-payment-bg-gold);
}
.dnb-payment-card__card--design-saga-platinum, .dnb-payment-card__card--design-private {
  background-color: var(--dnb-payment-bg-black-grey);
  color: var(--color-white);
}
.dnb-payment-card__card--design-black {
  background-color: var(--color-black);
  color: var(--color-white);
}
.dnb-payment-card__card--design-business-no-visa {
  background-color: var(--dnb-payment-bg-business-no-visa);
  color: var(--color-white);
}
.dnb-payment-card__card--design-business-with-visa {
  background-color: var(--dnb-payment-bg-business-with-visa);
  color: var(--color-white);
}
.dnb-payment-card__card--design-sbanken-mastercard {
  background-color: var(--sb-color-purple);
  color: var(--color-white);
}
.dnb-payment-card__card--design-sbanken-visa {
  background-color: var(--color-white);
  color: var(--sb-color-text);
}
.dnb-payment-card__card {
  /*
   * Primary container for card content (e.g., numbers, text, holder name).
   * Ensures content stretches to fit the card while preserving relative positioning.
   */
}
.dnb-payment-card__card__content {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
}
.dnb-spacing .dnb-payment-card__card .dnb-p {
  margin-bottom: 0 !important;
}
.dnb-payment-card__card__numbers.dnb-p {
  font-size: 1.375rem;
  line-height: 1.143rem;
  font-weight: var(--font-weight-regular);
}
.dnb-payment-card__card__type-text.dnb-p {
  font-size: 0.938rem;
  line-height: 1.188rem;
  padding-top: 6px;
}
.dnb-payment-card__card {
  /* Provider Icons Container
   * Flex container to house provider logos (e.g., Visa, Mastercard, BankAxept).
   * Includes a visual separator if two providers are present. */
}
.dnb-payment-card__card__providers {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}
.dnb-payment-card__card__providers .provider--separator {
  width: 1px;
  height: 26px;
  background-color: currentcolor;
  transform: scale(0.5, 1);
}
.dnb-payment-card__card__top__left {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
}
.dnb-payment-card__card__top {
  /*
   * Normal mode: Card Type Text (Credit / Debit)
   * Compact mode: Provider Icons
   */
}
.dnb-payment-card__card__top__right {
  position: absolute;
  top: 0;
  right: 0;
}
.dnb-payment-card__card__bottom {
  /*
   * Normal mode: Card Number
   * Compact mode: Hidden
   */
}
.dnb-payment-card__card__bottom__left {
  position: absolute;
  bottom: 0;
  left: 0;
}
.dnb-payment-card__card__bottom {
  /*
   * Normal mode: Provider Icons
   * Compact mode: Hidden
   */
}
.dnb-payment-card__card__bottom__right {
  position: absolute;
  bottom: 0;
  right: 0;
}
.dnb-payment-card {
  /*
   * Overlay styling used for additional content or status displayed over the card element.
   * It centers the content and adapts the overlay design
   * based on the card's background theme (light or dark).
   */
}
.dnb-payment-card__overlay svg {
  width: 2rem;
  height: 2rem;
  shape-rendering: geometricprecision;
}
.dnb-payment-card__overlay svg.icon--fill path {
  fill: currentcolor;
}
.dnb-payment-card__overlay svg.icon--stroke path {
  stroke: currentcolor;
}
.dnb-payment-card__overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dnb-payment-card__overlay__content {
  min-width: 6rem;
  height: 6rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.667rem;
  border-radius: inherit;
  font-size: var(--font-size-basis);
  line-height: var(--line-height-small);
}
.dnb-payment-card__overlay__content--light {
  background-color: var(--dnb-payment-overlay-bg-dark);
  color: var(--color-white);
}
.dnb-payment-card__overlay__content--dark {
  background-color: var(--dnb-payment-overlay-bg-light);
  color: var(--color-black);
}
.dnb-payment-card {
  /* Compact mode styling for PaymentCard component
   * This defines the styles and visual appearance of the card in its compact variant.
   * The compact variant is designed to be more concise, with reduced height and adjusted layouts.
   */
}
.dnb-payment-card--compact .dnb-payment-card__card {
  height: 62px;
  border-radius: var(--dnb-payment-border-radius) var(--dnb-payment-border-radius) 0 0;
}
.dnb-payment-card--compact .dnb-payment-card__card__wrapper {
  height: auto;
}
.dnb-payment-card--compact .dnb-payment-card__card__providers {
  margin-top: 5px;
  height: 1.375rem;
}
.dnb-payment-card--compact .dnb-payment-card__card__providers div,
.dnb-payment-card--compact .dnb-payment-card__card__providers svg {
  height: 100%;
  width: auto;
}
.dnb-payment-card--compact .dnb-payment-card__card__providers--multiple {
  margin-top: 7px;
  height: 1rem;
  column-gap: 0.5rem;
}
.dnb-payment-card--compact .dnb-payment-card__card__providers--multiple div,
.dnb-payment-card--compact .dnb-payment-card__card__providers--multiple svg {
  vertical-align: top;
}
.dnb-payment-card--compact .dnb-payment-card__card__providers--multiple .provider--separator {
  width: 1px;
}
.dnb-payment-card--compact .dnb-payment-card__overlay__content {
  display: none;
}