@visa/nova-styles/themes/default-base/index.css

Visa Product Design System Nova HTML+CSS library

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
@layer overrides{@media(forced-colors: active){svg.v-icon{--v-icon-primary:currentColor !important;--v-icon-secondary:currentColor !important}}}@layer theme{:root,::backdrop{--color-primary-h: 230;--color-primary-s: 82%;--color-primary-l: 44%;--color-secondary-h: 44;--color-secondary-s: 97%;--color-secondary-l: 54%;--color-lightest-h: 0;--color-lightest-s: 0%;--color-lightest-l: 100%;--color-darkest-h: 0;--color-darkest-s: 0%;--color-darkest-l: 0%;--color-positive-h: 149;--color-positive-s: 41%;--color-positive-l: 43%;--color-warning-h: 39;--color-warning-s: 96%;--color-warning-l: 39%;--color-negative-h: 0;--color-negative-s: 62%;--color-negative-l: 58%;--color-info-h: 222;--color-info-s: 55%;--color-info-l: 42%;--palette-default-active: hsla(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l));--palette-default-active-hover: hsla(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) + 10%));--palette-default-active-pressed: hsla(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) - 5%));--palette-default-active-subtle: hsla(var(--color-lightest-h) var(--color-lightest-s) 50%);--palette-default-active-accent: hsla(var(--color-secondary-h) var(--color-secondary-s) var(--color-secondary-l));--palette-default-surface-1: hsla(var(--color-lightest-h) var(--color-lightest-s) var(--color-lightest-l));--palette-default-surface-2: hsla(var(--color-lightest-h) var(--color-lightest-s) calc(var(--color-lightest-l) - 5%));--palette-default-surface-3: hsla(var(--color-lightest-h) var(--color-lightest-s) calc(var(--color-lightest-l) - 10%));--palette-default-surface-highlight: hsla(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) + 45%));--palette-default-surface-lowlight: hsla(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) + 35%));--palette-default-text: hsla(var(--color-darkest-h) var(--color-darkest-s) var(--color-darkest-l));--palette-default-text-subtle: hsla(var(--color-darkest-h) var(--color-darkest-s) 30%);--palette-default-text-on-active: hsla(var(--color-lightest-h) var(--color-lightest-s) var(--color-lightest-l));--palette-default-border: hsla(var(--color-lightest-h) var(--color-lightest-s) calc(var(--color-lightest-l) - 10%));--palette-default-disabled: hsla(var(--color-lightest-h) var(--color-lightest-s) calc(var(--color-lightest-l) - 20%));--palette-default-overlay: hsla(var(--color-darkest-h) var(--color-darkest-s) calc(var(--color-darkest-l) + 20%) / 40%);--palette-default-transparent: hsla(var(--color-lightest-h) var(--color-lightest-s) var(--color-lightest-l) / 0);--palette-messaging-highlight-positive: hsla(var(--color-positive-h) var(--color-positive-s) calc(var(--color-positive-l) + 45%));--palette-messaging-lowlight-positive: hsla(var(--color-positive-h) var(--color-positive-s) calc(var(--color-positive-l) + 35%));--palette-messaging-surface-positive: hsla(var(--color-positive-h) var(--color-positive-s) calc(var(--color-positive-l) + 25%));--palette-messaging-graphics-positive: hsla(var(--color-positive-h) var(--color-positive-s) var(--color-positive-l));--palette-messaging-text-hover-positive: hsla(var(--color-positive-h) var(--color-positive-s) calc(var(--color-positive-l) - 10%));--palette-messaging-text-positive: hsla(var(--color-positive-h) var(--color-positive-s) calc(var(--color-positive-l) - 20%));--palette-messaging-text-pressed-positive: hsla(var(--color-positive-h) var(--color-positive-s) calc(var(--color-positive-l) - 30%));--palette-messaging-highlight-warning: hsla(var(--color-warning-h) var(--color-warning-s) calc(var(--color-warning-l) + 45%));--palette-messaging-graphics-warning: hsla(var(--color-warning-h) var(--color-warning-s) var(--color-warning-l));--palette-messaging-text-warning: hsla(var(--color-warning-h) var(--color-warning-s) calc(var(--color-warning-l) - 20%));--palette-messaging-highlight-negative: hsla(var(--color-negative-h) var(--color-negative-s) calc(var(--color-negative-l) + 40%));--palette-messaging-lowlight-negative: hsla(var(--color-negative-h) var(--color-negative-s) calc(var(--color-negative-l) + 35%));--palette-messaging-surface-negative: hsla(var(--color-negative-h) var(--color-negative-s) calc(var(--color-negative-l) + 25%));--palette-messaging-graphics-negative: hsla(var(--color-negative-h) var(--color-negative-s) var(--color-negative-l));--palette-messaging-text-hover-negative: hsla(var(--color-negative-h) var(--color-negative-s) calc(var(--color-negative-l) - 10%));--palette-messaging-text-negative: hsla(var(--color-negative-h) var(--color-negative-s) calc(var(--color-negative-l) - 20%));--palette-messaging-text-pressed-negative: hsla(var(--color-negative-h) var(--color-negative-s) calc(var(--color-negative-l) - 30%));--palette-messaging-highlight-info: hsla(var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) + 45%));--palette-messaging-graphics-info: hsla(var(--color-info-h) var(--color-info-s) var(--color-info-l));--palette-messaging-text-info: hsla(var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) - 20%))}.v-alternate{--palette-default-active: hsla(var(--color-secondary-h) var(--color-secondary-s) var(--color-secondary-l));--palette-default-active-hover: hsla(var(--color-secondary-h) var(--color-secondary-s) calc(var(--color-secondary-l) + 10%));--palette-default-active-pressed: hsla(var(--color-secondary-h) var(--color-secondary-s) calc(var(--color-secondary-l) - 5%));--palette-default-active-subtle: hsla(var(--color-lightest-h) var(--color-lightest-s) 70%);--palette-default-active-accent: hsla(var(--color-lightest-h) var(--color-lightest-s) var(--color-lightest-l));--palette-default-surface-1: hsla(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l));--palette-default-surface-2: hsla(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) - 10%));--palette-default-surface-3: hsla(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) - 20%));--palette-default-surface-highlight: hsla(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) + 10%));--palette-default-surface-lowlight: hsla(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) - 5%));--palette-default-text: hsla(var(--color-secondary-h) var(--color-secondary-s) var(--color-secondary-l));--palette-default-text-subtle: hsla(var(--color-lightest-h) var(--color-lightest-s) calc(var(--color-lightest-l) - 10%));--palette-default-text-on-active: hsla(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l)));--palette-default-border: hsla(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) + 10%));--palette-default-disabled: hsla(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) + 20%));--palette-default-overlay: hsla(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) + 10%) / 40%);--palette-default-transparent: hsla(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l) / 0)}}@layer theme{:root,::backdrop{--theme-font-size: 14px;--theme-focus-outline-size: 2px;--theme-focus-outline-offset: var(--size-scalable-1);--theme-border-size: 2px;--theme-border-radius: 4px;--theme-responsive-factor: 1.25;--theme-scale-factor: 1}}@layer theme{:root,::backdrop{--typography-display-1-font-family: sans-serif;--typography-display-1-font-size: 4.2857142857rem;--typography-display-1-font-weight: 600;--typography-display-1-letter-spacing: 0rem;--typography-display-1-line-height: 5.5714285714rem;--typography-display-1-text-decoration: none;--typography-display-1-text-transform: none;--typography-display-2-font-family: sans-serif;--typography-display-2-font-size: 3.5rem;--typography-display-2-font-weight: 600;--typography-display-2-letter-spacing: 0rem;--typography-display-2-line-height: 4.4285714286rem;--typography-display-2-text-decoration: none;--typography-display-2-text-transform: none;--typography-headline-1-font-family: sans-serif;--typography-headline-1-font-size: 2.2857142857rem;--typography-headline-1-font-weight: 600;--typography-headline-1-letter-spacing: 0.0357142857rem;--typography-headline-1-line-height: 3rem;--typography-headline-1-text-decoration: none;--typography-headline-1-text-transform: none;--typography-headline-2-font-family: sans-serif;--typography-headline-2-font-size: 1.7857142857rem;--typography-headline-2-font-weight: 500;--typography-headline-2-letter-spacing: 0rem;--typography-headline-2-line-height: 2.3571428571rem;--typography-headline-2-text-decoration: none;--typography-headline-2-text-transform: none;--typography-headline-3-font-family: sans-serif;--typography-headline-3-font-size: 1.4285714286rem;--typography-headline-3-font-weight: 600;--typography-headline-3-letter-spacing: 0rem;--typography-headline-3-line-height: 1.8571428571rem;--typography-headline-3-text-decoration: none;--typography-headline-3-text-transform: none;--typography-headline-4-font-family: sans-serif;--typography-headline-4-font-size: 1.2857142857rem;--typography-headline-4-font-weight: 600;--typography-headline-4-letter-spacing: 0rem;--typography-headline-4-line-height: 1.7142857143rem;--typography-headline-4-text-decoration: none;--typography-headline-4-text-transform: none;--typography-subtitle-1-font-family: sans-serif;--typography-subtitle-1-font-size: 1.1428571429rem;--typography-subtitle-1-font-weight: 600;--typography-subtitle-1-letter-spacing: 0rem;--typography-subtitle-1-line-height: 1.5rem;--typography-subtitle-1-text-decoration: none;--typography-subtitle-1-text-transform: none;--typography-subtitle-2-font-family: sans-serif;--typography-subtitle-2-font-size: 1.1428571429rem;--typography-subtitle-2-font-weight: 500;--typography-subtitle-2-letter-spacing: 0rem;--typography-subtitle-2-line-height: 1.5rem;--typography-subtitle-2-text-decoration: none;--typography-subtitle-2-text-transform: none;--typography-subtitle-3-font-family: sans-serif;--typography-subtitle-3-font-size: 1rem;--typography-subtitle-3-font-weight: 600;--typography-subtitle-3-letter-spacing: 0rem;--typography-subtitle-3-line-height: 1.2857142857rem;--typography-subtitle-3-text-decoration: none;--typography-subtitle-3-text-transform: none;--typography-overline-font-family: sans-serif;--typography-overline-font-size: 0.7142857143rem;--typography-overline-font-weight: 600;--typography-overline-letter-spacing: 0.0714285714rem;--typography-overline-line-height: 0.9285714286rem;--typography-overline-text-decoration: none;--typography-overline-text-transform: uppercase;--typography-body-1-font-family: sans-serif;--typography-body-1-font-size: 1.1428571429rem;--typography-body-1-font-weight: 400;--typography-body-1-letter-spacing: 0rem;--typography-body-1-line-height: 1.7142857143rem;--typography-body-1-text-decoration: none;--typography-body-1-text-transform: none;--typography-body-2-font-family: sans-serif;--typography-body-2-font-size: 1rem;--typography-body-2-font-weight: 400;--typography-body-2-letter-spacing: 0rem;--typography-body-2-line-height: 1.5714285714rem;--typography-body-2-text-decoration: none;--typography-body-2-text-transform: none;--typography-body-2-bold-font-family: sans-serif;--typography-body-2-bold-font-size: 1rem;--typography-body-2-bold-font-weight: 600;--typography-body-2-bold-letter-spacing: 0rem;--typography-body-2-bold-line-height: 1.5714285714rem;--typography-body-2-bold-text-decoration: none;--typography-body-2-bold-text-transform: none;--typography-body-2-link-font-family: sans-serif;--typography-body-2-link-font-size: 1rem;--typography-body-2-link-font-weight: 500;--typography-body-2-link-letter-spacing: 0rem;--typography-body-2-link-line-height: 1.5714285714rem;--typography-body-2-link-text-decoration: underline;--typography-body-2-link-text-transform: none;--typography-body-2-medium-font-family: sans-serif;--typography-body-2-medium-font-size: 1rem;--typography-body-2-medium-font-weight: 500;--typography-body-2-medium-letter-spacing: 0rem;--typography-body-2-medium-line-height: 1.5714285714rem;--typography-body-2-medium-text-decoration: none;--typography-body-2-medium-text-transform: none;--typography-body-3-font-family: sans-serif;--typography-body-3-font-size: 0.8571428571rem;--typography-body-3-font-weight: 400;--typography-body-3-letter-spacing: 0rem;--typography-body-3-line-height: 1.2857142857rem;--typography-body-3-text-decoration: none;--typography-body-3-text-transform: none;--typography-button-large-font-family: sans-serif;--typography-button-large-font-size: 1rem;--typography-button-large-font-weight: 600;--typography-button-large-letter-spacing: 0.0178571429rem;--typography-button-large-line-height: 1.2857142857rem;--typography-button-large-text-decoration: none;--typography-button-large-text-transform: none;--typography-button-medium-font-family: sans-serif;--typography-button-medium-font-size: 0.8571428571rem;--typography-button-medium-font-weight: 600;--typography-button-medium-letter-spacing: 0.0178571429rem;--typography-button-medium-line-height: 1.1428571429rem;--typography-button-medium-text-decoration: none;--typography-button-medium-text-transform: none;--typography-button-small-font-family: sans-serif;--typography-button-small-font-size: 0.8571428571rem;--typography-button-small-font-weight: 500;--typography-button-small-letter-spacing: 0.0178571429rem;--typography-button-small-line-height: 1.1428571429rem;--typography-button-small-text-decoration: none;--typography-button-small-text-transform: none;--typography-label-large-font-family: sans-serif;--typography-label-large-font-size: 1rem;--typography-label-large-font-weight: 400;--typography-label-large-letter-spacing: 0rem;--typography-label-large-line-height: 1.2857142857rem;--typography-label-large-text-decoration: none;--typography-label-large-text-transform: none;--typography-label-large-active-font-family: sans-serif;--typography-label-large-active-font-size: 1rem;--typography-label-large-active-font-weight: 500;--typography-label-large-active-letter-spacing: 0rem;--typography-label-large-active-line-height: 1.2857142857rem;--typography-label-large-active-text-decoration: none;--typography-label-large-active-text-transform: none;--typography-label-font-family: sans-serif;--typography-label-font-size: 0.8571428571rem;--typography-label-font-weight: 400;--typography-label-letter-spacing: 0rem;--typography-label-line-height: 16px;--typography-label-text-decoration: none;--typography-label-text-transform: none;--typography-label-active-font-family: sans-serif;--typography-label-active-font-size: 0.8571428571rem;--typography-label-active-font-weight: 500;--typography-label-active-letter-spacing: 0rem;--typography-label-active-line-height: 1.1428571429rem;--typography-label-active-text-decoration: none;--typography-label-active-text-transform: none;--typography-label-small-font-family: sans-serif;--typography-label-small-font-size: 0.7857142857rem;--typography-label-small-font-weight: 400;--typography-label-small-letter-spacing: 0rem;--typography-label-small-line-height: 1rem;--typography-label-small-text-decoration: none;--typography-label-small-text-transform: none}}