.bkbg-bw-wrap { box-sizing: border-box; } .bkbg-bw-grid { display: grid; } .bkbg-bw-card { box-sizing: border-box; overflow: hidden; position: relative; } /* ── Heading ──────────────────────────────────── */ .bkbg-bw-heading { font-family: var(--bkbg-bw-heading-font-family, inherit); font-size: var(--bkbg-bw-heading-font-size-d, var(--bkbg-bw-heading-font-size, 19px)); font-weight: var(--bkbg-bw-heading-font-weight, 700); font-style: var(--bkbg-bw-heading-font-style, normal); text-transform: var(--bkbg-bw-heading-text-transform, none); text-decoration: var(--bkbg-bw-heading-text-decoration, none); line-height: var(--bkbg-bw-heading-line-height-d, var(--bkbg-bw-heading-line-height, 1.3)); letter-spacing: var(--bkbg-bw-heading-letter-spacing-d, var(--bkbg-bw-heading-letter-spacing, normal)); word-spacing: var(--bkbg-bw-heading-word-spacing-d, var(--bkbg-bw-heading-word-spacing, normal)); } /* ── Subtitle ─────────────────────────────────── */ .bkbg-bw-sub { font-family: var(--bkbg-bw-sub-font-family, inherit); font-size: var(--bkbg-bw-sub-font-size-d, var(--bkbg-bw-sub-font-size, 13px)); font-weight: var(--bkbg-bw-sub-font-weight, normal); font-style: var(--bkbg-bw-sub-font-style, normal); text-transform: var(--bkbg-bw-sub-text-transform, none); text-decoration: var(--bkbg-bw-sub-text-decoration, none); line-height: var(--bkbg-bw-sub-line-height-d, var(--bkbg-bw-sub-line-height, 1.5)); letter-spacing: var(--bkbg-bw-sub-letter-spacing-d, var(--bkbg-bw-sub-letter-spacing, normal)); word-spacing: var(--bkbg-bw-sub-word-spacing-d, var(--bkbg-bw-sub-word-spacing, normal)); } /* ── Badge Label ──────────────────────────────── */ .bkbg-bw-label { font-family: var(--bkbg-bw-label-font-family, inherit); font-size: var(--bkbg-bw-label-font-size-d, var(--bkbg-bw-label-font-size, 15px)); font-weight: var(--bkbg-bw-label-font-weight, 700); font-style: var(--bkbg-bw-label-font-style, normal); text-transform: var(--bkbg-bw-label-text-transform, none); text-decoration: var(--bkbg-bw-label-text-decoration, none); line-height: var(--bkbg-bw-label-line-height-d, var(--bkbg-bw-label-line-height, 1.3)); letter-spacing: var(--bkbg-bw-label-letter-spacing-d, var(--bkbg-bw-label-letter-spacing, normal)); word-spacing: var(--bkbg-bw-label-word-spacing-d, var(--bkbg-bw-label-word-spacing, normal)); } /* ── Badge Issuer ─────────────────────────────── */ .bkbg-bw-issuer { font-family: var(--bkbg-bw-issuer-font-family, inherit); font-size: var(--bkbg-bw-issuer-font-size-d, var(--bkbg-bw-issuer-font-size, 13px)); font-weight: var(--bkbg-bw-issuer-font-weight, normal); font-style: var(--bkbg-bw-issuer-font-style, normal); text-transform: var(--bkbg-bw-issuer-text-transform, none); text-decoration: var(--bkbg-bw-issuer-text-decoration, none); line-height: var(--bkbg-bw-issuer-line-height-d, var(--bkbg-bw-issuer-line-height, 1.4)); letter-spacing: var(--bkbg-bw-issuer-letter-spacing-d, var(--bkbg-bw-issuer-letter-spacing, normal)); word-spacing: var(--bkbg-bw-issuer-word-spacing-d, var(--bkbg-bw-issuer-word-spacing, normal)); } /* ── Year Pill ────────────────────────────────── */ .bkbg-bw-year { font-size: 11px; font-weight: 600; border-radius: 99px; padding: 2px 10px; margin-top: 2px; display: inline-block; } /* ── Responsive Typography ────────────────────── */ @media (max-width: 1024px) { .bkbg-bw-heading { font-size: var(--bkbg-bw-heading-font-size-t, var(--bkbg-bw-heading-font-size-d, var(--bkbg-bw-heading-font-size, 19px))); line-height: var(--bkbg-bw-heading-line-height-t, var(--bkbg-bw-heading-line-height-d, var(--bkbg-bw-heading-line-height, 1.3))); letter-spacing: var(--bkbg-bw-heading-letter-spacing-t, var(--bkbg-bw-heading-letter-spacing-d, var(--bkbg-bw-heading-letter-spacing, normal))); word-spacing: var(--bkbg-bw-heading-word-spacing-t, var(--bkbg-bw-heading-word-spacing-d, var(--bkbg-bw-heading-word-spacing, normal))); } .bkbg-bw-sub { font-size: var(--bkbg-bw-sub-font-size-t, var(--bkbg-bw-sub-font-size-d, var(--bkbg-bw-sub-font-size, 13px))); line-height: var(--bkbg-bw-sub-line-height-t, var(--bkbg-bw-sub-line-height-d, var(--bkbg-bw-sub-line-height, 1.5))); letter-spacing: var(--bkbg-bw-sub-letter-spacing-t, var(--bkbg-bw-sub-letter-spacing-d, var(--bkbg-bw-sub-letter-spacing, normal))); word-spacing: var(--bkbg-bw-sub-word-spacing-t, var(--bkbg-bw-sub-word-spacing-d, var(--bkbg-bw-sub-word-spacing, normal))); } .bkbg-bw-label { font-size: var(--bkbg-bw-label-font-size-t, var(--bkbg-bw-label-font-size-d, var(--bkbg-bw-label-font-size, 15px))); line-height: var(--bkbg-bw-label-line-height-t, var(--bkbg-bw-label-line-height-d, var(--bkbg-bw-label-line-height, 1.3))); letter-spacing: var(--bkbg-bw-label-letter-spacing-t, var(--bkbg-bw-label-letter-spacing-d, var(--bkbg-bw-label-letter-spacing, normal))); word-spacing: var(--bkbg-bw-label-word-spacing-t, var(--bkbg-bw-label-word-spacing-d, var(--bkbg-bw-label-word-spacing, normal))); } .bkbg-bw-issuer { font-size: var(--bkbg-bw-issuer-font-size-t, var(--bkbg-bw-issuer-font-size-d, var(--bkbg-bw-issuer-font-size, 13px))); line-height: var(--bkbg-bw-issuer-line-height-t, var(--bkbg-bw-issuer-line-height-d, var(--bkbg-bw-issuer-line-height, 1.4))); letter-spacing: var(--bkbg-bw-issuer-letter-spacing-t, var(--bkbg-bw-issuer-letter-spacing-d, var(--bkbg-bw-issuer-letter-spacing, normal))); word-spacing: var(--bkbg-bw-issuer-word-spacing-t, var(--bkbg-bw-issuer-word-spacing-d, var(--bkbg-bw-issuer-word-spacing, normal))); } } @media (max-width: 767px) { .bkbg-bw-heading { font-size: var(--bkbg-bw-heading-font-size-m, var(--bkbg-bw-heading-font-size-t, var(--bkbg-bw-heading-font-size-d, var(--bkbg-bw-heading-font-size, 19px)))); line-height: var(--bkbg-bw-heading-line-height-m, var(--bkbg-bw-heading-line-height-t, var(--bkbg-bw-heading-line-height-d, var(--bkbg-bw-heading-line-height, 1.3)))); letter-spacing: var(--bkbg-bw-heading-letter-spacing-m, var(--bkbg-bw-heading-letter-spacing-t, var(--bkbg-bw-heading-letter-spacing-d, var(--bkbg-bw-heading-letter-spacing, normal)))); word-spacing: var(--bkbg-bw-heading-word-spacing-m, var(--bkbg-bw-heading-word-spacing-t, var(--bkbg-bw-heading-word-spacing-d, var(--bkbg-bw-heading-word-spacing, normal)))); } .bkbg-bw-sub { font-size: var(--bkbg-bw-sub-font-size-m, var(--bkbg-bw-sub-font-size-t, var(--bkbg-bw-sub-font-size-d, var(--bkbg-bw-sub-font-size, 13px)))); line-height: var(--bkbg-bw-sub-line-height-m, var(--bkbg-bw-sub-line-height-t, var(--bkbg-bw-sub-line-height-d, var(--bkbg-bw-sub-line-height, 1.5)))); letter-spacing: var(--bkbg-bw-sub-letter-spacing-m, var(--bkbg-bw-sub-letter-spacing-t, var(--bkbg-bw-sub-letter-spacing-d, var(--bkbg-bw-sub-letter-spacing, normal)))); word-spacing: var(--bkbg-bw-sub-word-spacing-m, var(--bkbg-bw-sub-word-spacing-t, var(--bkbg-bw-sub-word-spacing-d, var(--bkbg-bw-sub-word-spacing, normal)))); } .bkbg-bw-label { font-size: var(--bkbg-bw-label-font-size-m, var(--bkbg-bw-label-font-size-t, var(--bkbg-bw-label-font-size-d, var(--bkbg-bw-label-font-size, 15px)))); line-height: var(--bkbg-bw-label-line-height-m, var(--bkbg-bw-label-line-height-t, var(--bkbg-bw-label-line-height-d, var(--bkbg-bw-label-line-height, 1.3)))); letter-spacing: var(--bkbg-bw-label-letter-spacing-m, var(--bkbg-bw-label-letter-spacing-t, var(--bkbg-bw-label-letter-spacing-d, var(--bkbg-bw-label-letter-spacing, normal)))); word-spacing: var(--bkbg-bw-label-word-spacing-m, var(--bkbg-bw-label-word-spacing-t, var(--bkbg-bw-label-word-spacing-d, var(--bkbg-bw-label-word-spacing, normal)))); } .bkbg-bw-issuer { font-size: var(--bkbg-bw-issuer-font-size-m, var(--bkbg-bw-issuer-font-size-t, var(--bkbg-bw-issuer-font-size-d, var(--bkbg-bw-issuer-font-size, 13px)))); line-height: var(--bkbg-bw-issuer-line-height-m, var(--bkbg-bw-issuer-line-height-t, var(--bkbg-bw-issuer-line-height-d, var(--bkbg-bw-issuer-line-height, 1.4)))); letter-spacing: var(--bkbg-bw-issuer-letter-spacing-m, var(--bkbg-bw-issuer-letter-spacing-t, var(--bkbg-bw-issuer-letter-spacing-d, var(--bkbg-bw-issuer-letter-spacing, normal)))); word-spacing: var(--bkbg-bw-issuer-word-spacing-m, var(--bkbg-bw-issuer-word-spacing-t, var(--bkbg-bw-issuer-word-spacing-d, var(--bkbg-bw-issuer-word-spacing, normal)))); } } .bkbg-bw-icon svg { width: 1em; height: 1em; fill: currentColor; } .bkbg-bw-icon .dashicons { font-size: inherit; width: 1em; height: 1em; line-height: 1; } .bkbg-bw-icon .bkbg-icon-img { width: 1em; height: 1em; object-fit: contain; }