@visa/nova-styles/themes/vault/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{}@layer overrides{:root,::backdrop,.v-alternate{--v-badge-border-width:1px;--v-badge-border-radius:2px;--v-badge-neutral-icon-color:var(--palette-messaging-graphics-info);--v-badge-neutral-border-color:var(--palette-messaging-border-info);--v-button-default-text-transform:uppercase;--v-button-secondary-active-background:var(--palette-default-active-pressed);--v-button-secondary-active-foreground:var(--palette-default-text-on-active);--v-chip-border-radius:34px;--v-input-container-border-width:1px;--v-checkbox-border-size:2px;--v-divider-color-standard:#8a847f;--v-divider-color-decorative:#cacaca;--v-message-border-block-end-size:var(--theme-border-size);--v-message-background-error:var(--palette-messaging-surface-negative);--v-message-background-warning:var(--palette-messaging-surface-warning);--v-switch-track-block-size:var(--size-scalable-10);--v-switch-track-inline-size:var(--size-scalable-36);--v-switch-track-padding:var(--size-scalable-0);--v-switch-node-checked-border-color:var(--palette-default-active)}.v-switch{--v-switch-node-margin-inline-start:-2px}.v-switch:only-of-type:checked{--v-switch-node-checked-margin-inline-start:calc(var(--v-switch-track-inline-size) - var(--v-switch-node-inline-size) - var(--v-switch-track-padding) - var(--v-switch-track-border-size))}.v-accordion-heading.v-button-secondary{--v-button-secondary-active-background:var(--palette-default-surface-1);--v-button-secondary-active-foreground:var(--palette-default-active)}.v-accordion-panel{--v-accordion-panel-background-color:var(--palette-default-transparent);--v-accordion-panel-border-color:var(--palette-default-transparent)}.v-badge-neutral:not(.v-badge-clear):not(.v-badge-number):not(.v-badge-icon){--v-badge-border-color:var(--palette-messaging-border-info)}.v-badge-stable:not(.v-badge-clear):not(.v-badge-number):not(.v-badge-icon){--v-badge-border-color:var(--palette-messaging-border-positive)}.v-badge-warning:not(.v-badge-clear):not(.v-badge-number):not(.v-badge-icon){--v-badge-border-color:var(--palette-messaging-border-warning)}.v-badge-critical:not(.v-badge-critical):not(.v-badge-number):not(.v-badge-icon){--v-badge-border-color:var(--palette-messaging-border-negative)}.v-button.v-button-tertiary *:not(.v-tab){--v-button-tertiary-background:var(--palette-default-surface-1);--v-button-tertiary-border-color:var(--palette-default-active)}.v-button.v-button-tertiary *:not(.v-tab) .v-button.v-button-tertiary *:not(.v-tab):hover,.v-button.v-button-tertiary *:not(.v-tab):focus-visible,.v-button.v-button-tertiary *:not(.v-tab):active,.v-button.v-button-tertiary *:not(.v-tab):disabled{--v-button-default-border-size:1px}.v-logo{fill:var(--color-primary)}@media screen and (forced-colors: active){.v-logo{background-color:var(--color-lightest)}}.v-listbox-item .v-label{--typography-font-size:var(--typography-body-2-bold-font-size)}.v-nav .v-nav-app-name{color:var(--color-primary)}.v-nav,.v-nav *.v-alternate{--v-tabs-active-line-padding:0px}.v-section.v-message{--v-message-border-inline-start-size:var(--theme-border-size);--v-message-border-block-end-size:0px}.v-tab{--v-tabs-selected-background:var(--palette-default-surface-lowlight);--v-tabs-horizontal-padding-block-end:0px;--v-tabs-vertical-active-line-padding:0px}.v-toggle,.v-toggle:has(input:checked){--v-toggle-indicator-color:rgba(0,0,0,0);--v-toggle-elevation:var(--elevation-none);--v-toggle-text-transform:uppercase}.v-toggle:has(input:checked){--v-toggle-active-background:var(--palette-default-active);--v-toggle-active-foreground:var(--palette-default-text-on-active);--v-toggle-active-icon-color:var(--palette-default-text-on-active)}.v-alternate .v-nav,.v-alternate.v-nav{--v-nav-foreground:var(--palette-default-active-accent)}.v-alternate .v-nav .v-nav-app-name,.v-alternate.v-nav .v-nav-app-name{color:var(--color-lightest)}.v-alternate .v-logo{fill:var(--color-lightest)}@media screen and (forced-colors: active){.v-alternate .v-logo{background-color:var(--color-darkest)}}@media(forced-colors: active){svg.v-icon{--v-icon-primary:currentColor !important;--v-icon-secondary:currentColor !important}}}@layer theme{:root{--color-transparent: rgba(255, 255, 255, 0);--color-primary: #1434cb;--color-secondary: #fcc015;--color-lightest: #ffffff;--color-darkest: #000000;--color-primary-10: hsl(230 64% 8%);--color-primary-20: hsl(230 64% 17%);--color-primary-30: hsl(230 64% 25%);--color-primary-40: hsl(230 64% 33%);--color-primary-50: hsl(230 64% 42%);--color-primary-60: hsl(230 64% 50%);--color-primary-70: hsl(230 64% 58%);--color-primary-80: hsl(230 64% 67%);--color-primary-90: hsl(230 64% 75%);--color-primary-100: hsl(230 64% 83%);--color-primary-110: hsl(230 64% 92%);--color-secondary-10: hsl(44 97% 8%);--color-secondary-20: hsl(44 97% 17%);--color-secondary-30: hsl(44 97% 25%);--color-secondary-40: hsl(44 97% 33%);--color-secondary-50: hsl(44 97% 42%);--color-secondary-60: hsl(44 97% 50%);--color-secondary-70: hsl(44 97% 58%);--color-secondary-80: hsl(44 97% 67%);--color-secondary-90: hsl(44 97% 75%);--color-secondary-100: hsl(44 97% 83%);--color-secondary-110: hsl(44 97% 92%);--color-grayscale-0: hsl(0 0% 0%);--color-grayscale-10: hsl(0 0% 10%);--color-grayscale-20: hsl(0 0% 20%);--color-grayscale-30: hsl(0 0% 30%);--color-grayscale-40: hsl(0 0% 40%);--color-grayscale-50: hsl(0 0% 50%);--color-grayscale-60: hsl(0 0% 60%);--color-grayscale-70: hsl(0 0% 70%);--color-grayscale-80: hsl(0 0% 80%);--color-grayscale-90: hsl(0 0% 90%);--color-grayscale-100: hsl(0 0% 100%)}}@layer theme{:root{color-scheme:only light;--palette-default-active: var(--color-primary);--palette-default-active-hover: var(--color-primary-60);--palette-default-active-pressed: #0052e1;--palette-default-active-subtle: var(--color-grayscale-60);--palette-default-active-accent: var(--color-secondary);--palette-default-surface-1: var(--color-lightest);--palette-default-surface-2: rgb(245, 245, 245);--palette-default-surface-3: rgb(245, 245, 245);--palette-default-surface-highlight: rgb(230, 242, 255);--palette-default-surface-lowlight: #e6f2ff;--palette-default-text: var(--color-darkest);--palette-default-text-subtle: #4a4a4a;--palette-default-text-on-active: var(--color-lightest);--palette-default-border: var(--color-grayscale-100);--palette-default-disabled: var(--color-grayscale-90);--palette-default-overlay: var(--color-grayscale-70);--palette-default-transparent: var(--color-transparent);--palette-alternate-active: var(--color-secondary);--palette-alternate-active-hover: var(--color-secondary-80);--palette-alternate-active-pressed: var(--color-secondary-60);--palette-alternate-active-subtle: var(--color-grayscale-80);--palette-alternate-active-accent: var(--color-lightest);--palette-alternate-surface-1: var(--color-primary);--palette-alternate-surface-2: var(--color-primary-50);--palette-alternate-surface-3: var(--color-primary-40);--palette-alternate-surface-highlight: var(--color-primary-60);--palette-alternate-surface-lowlight: var(--color-primary-40);--palette-alternate-text: var(--color-lightest);--palette-alternate-text-subtle: var(--color-grayscale-110);--palette-alternate-text-on-active: var(--color-primary-30);--palette-alternate-border: var(--color-primary-70);--palette-alternate-disabled: var(--color-primary-80);--palette-alternate-overlay: var(--color-grayscale-70);--palette-alternate-transparent: var(--color-transparent);--palette-messaging-highlight-positive: rgba(214, 242, 196, 0.35);--palette-messaging-lowlight-positive: rgba(214, 242, 196, 0.6);--palette-messaging-surface-positive: #e2f6d5;--palette-messaging-border-positive: #9acea0;--palette-messaging-graphics-positive: #40996b;--palette-messaging-text-hover-positive: #36815b;--palette-messaging-text-positive: #2f6f4e;--palette-messaging-text-pressed-positive: #1d4430;--palette-messaging-surface-warning: #fff7cc;--palette-messaging-highlight-warning: #ffef99;--palette-messaging-border-warning: #fcd05e;--palette-messaging-graphics-warning: #c38004;--palette-messaging-text-warning: #875903;--palette-messaging-highlight-negative: rgba(255, 214, 233, 0.35);--palette-messaging-lowlight-negative: rgba(255, 214, 233, 0.6);--palette-messaging-surface-negative: #ffeef2;--palette-messaging-border-negative: #f9b8c0;--palette-messaging-graphics-negative: #d65151;--palette-messaging-text-hover-negative: #d03939;--palette-messaging-text-negative: #be2d2d;--palette-messaging-text-pressed-negative: #8c2121;--palette-messaging-highlight-info: #e5f2fa;--palette-messaging-border-info: #a1c1df;--palette-messaging-graphics-info: #2765a8;--palette-messaging-text-info: #021e4c}.v-alternate{--palette-default-active: var(--palette-alternate-active);--palette-default-active-hover: var(--palette-alternate-active-hover);--palette-default-active-pressed: var(--palette-alternate-active-pressed);--palette-default-active-subtle: var(--palette-alternate-active-subtle);--palette-default-active-accent: var(--palette-alternate-active-accent);--palette-default-surface-1: var(--palette-alternate-surface-1);--palette-default-surface-2: var(--palette-alternate-surface-2);--palette-default-surface-3: var(--palette-alternate-surface-3);--palette-default-surface-highlight: var(--palette-alternate-surface-highlight);--palette-default-surface-lowlight: var(--palette-alternate-surface-lowlight);--palette-default-text: var(--palette-alternate-text);--palette-default-text-subtle: var(--palette-alternate-text-subtle);--palette-default-text-on-active: var(--palette-alternate-text-on-active);--palette-default-border: var(--palette-alternate-border);--palette-default-disabled: var(--palette-alternate-disabled);--palette-default-overlay: var(--palette-alternate-overlay);--palette-default-transparent: var(--palette-alternate-transparent)}}@layer theme{:root,.v-alternate{--theme-primary: #1434cb;--theme-secondary: #fcc015;--theme-lightest: #ffffff;--theme-darkest: #000000;--theme-success: #40996b;--theme-warning: #c38004;--theme-error: #d65151;--theme-info: #2765a8;--theme-font-size: 12px;--theme-focus-outline-size: 1px;--theme-focus-outline-offset: 1px;--theme-border-size: 4px;--theme-border-radius: 0px;--theme-responsive-factor: 1.25;--theme-scale-factor: 1}}@font-face{font-display:swap;font-family:"visa-font-light";src:url("https://cdn.visa.com/v0/assets/fonts/types/dialect/latin/visa_font_light.woff2");font-weight:300;font-style:normal}@font-face{font-display:swap;font-family:"visa-font-regular";src:url("https://cdn.visa.com/v0/assets/fonts/types/dialect/latin/visa_font_regular.woff2");font-weight:400;font-style:normal}@font-face{font-display:swap;font-family:"visa-font-medium";src:url("https://cdn.visa.com/3.5.0/assets/fonts/types/dialect/visa_font_medium.woff2");font-weight:500;font-style:normal}@font-face{font-display:swap;font-family:"visa-font-semi-bold";src:url("https://cdn.visa.com/v0/assets/fonts/types/dialect/latin/visa_font_semi_bold.woff2");font-weight:600;font-style:normal}@layer theme{:root{--typography-display-1-font-family: visa-font-semi-bold, Open Sans, sans-serif;--typography-display-1-font-size: 5rem;--typography-display-1-font-weight: 600;--typography-display-1-letter-spacing: 0rem;--typography-display-1-line-height: 6.5rem;--typography-display-1-text-decoration: none;--typography-display-1-text-transform: none;--typography-display-2-font-family: visa-font-semi-bold, Open Sans, sans-serif;--typography-display-2-font-size: 4.0833333333rem;--typography-display-2-font-weight: 600;--typography-display-2-letter-spacing: 0rem;--typography-display-2-line-height: 5.1666666667rem;--typography-display-2-text-decoration: none;--typography-display-2-text-transform: none;--typography-headline-1-font-family: visa-font-semi-bold, Open Sans, sans-serif;--typography-headline-1-font-size: 2.6666666667rem;--typography-headline-1-font-weight: 600;--typography-headline-1-letter-spacing: 0.0416666667rem;--typography-headline-1-line-height: 3.5rem;--typography-headline-1-text-decoration: none;--typography-headline-1-text-transform: none;--typography-headline-2-font-family: visa-font-medium, Open Sans, sans-serif;--typography-headline-2-font-size: 2.0833333333rem;--typography-headline-2-font-weight: 500;--typography-headline-2-letter-spacing: 0rem;--typography-headline-2-line-height: 2.75rem;--typography-headline-2-text-decoration: none;--typography-headline-2-text-transform: none;--typography-headline-3-font-family: visa-font-semi-bold, Open Sans, sans-serif;--typography-headline-3-font-size: 1.6666666667rem;--typography-headline-3-font-weight: 600;--typography-headline-3-letter-spacing: 0rem;--typography-headline-3-line-height: 2.1666666667rem;--typography-headline-3-text-decoration: none;--typography-headline-3-text-transform: none;--typography-headline-4-font-family: visa-font-semi-bold, Open Sans, sans-serif;--typography-headline-4-font-size: 1.5rem;--typography-headline-4-font-weight: 600;--typography-headline-4-letter-spacing: 0rem;--typography-headline-4-line-height: 2rem;--typography-headline-4-text-decoration: none;--typography-headline-4-text-transform: none;--typography-subtitle-1-font-family: visa-font-semi-bold, Open Sans, sans-serif;--typography-subtitle-1-font-size: 1.3333333333rem;--typography-subtitle-1-font-weight: 600;--typography-subtitle-1-letter-spacing: 0rem;--typography-subtitle-1-line-height: 1.75rem;--typography-subtitle-1-text-decoration: none;--typography-subtitle-1-text-transform: none;--typography-subtitle-2-font-family: visa-font-medium, Open Sans, sans-serif;--typography-subtitle-2-font-size: 1.3333333333rem;--typography-subtitle-2-font-weight: 500;--typography-subtitle-2-letter-spacing: 0rem;--typography-subtitle-2-line-height: 1.75rem;--typography-subtitle-2-text-decoration: none;--typography-subtitle-2-text-transform: none;--typography-subtitle-3-font-family: visa-font-semi-bold, Open Sans, sans-serif;--typography-subtitle-3-font-size: 1.1666666667rem;--typography-subtitle-3-font-weight: 600;--typography-subtitle-3-letter-spacing: 0rem;--typography-subtitle-3-line-height: 1.5rem;--typography-subtitle-3-text-decoration: none;--typography-subtitle-3-text-transform: none;--typography-overline-font-family: visa-font-semi-bold, Open Sans, sans-serif;--typography-overline-font-size: 0.8333333333rem;--typography-overline-font-weight: 600;--typography-overline-letter-spacing: 0.0833333333rem;--typography-overline-line-height: 1.0833333333rem;--typography-overline-text-decoration: none;--typography-overline-text-transform: uppercase;--typography-body-1-font-family: visa-font-regular, Open Sans, sans-serif;--typography-body-1-font-size: 1.3333333333rem;--typography-body-1-font-weight: 400;--typography-body-1-letter-spacing: 0rem;--typography-body-1-line-height: 2rem;--typography-body-1-text-decoration: none;--typography-body-1-text-transform: none;--typography-body-2-font-family: visa-font-regular, Open Sans, sans-serif;--typography-body-2-font-size: 1.1666666667rem;--typography-body-2-font-weight: 400;--typography-body-2-letter-spacing: 0rem;--typography-body-2-line-height: 1.8333333333rem;--typography-body-2-text-decoration: none;--typography-body-2-text-transform: none;--typography-body-2-bold-font-family: visa-font-semi-bold, Open Sans, sans-serif;--typography-body-2-bold-font-size: 1.1666666667rem;--typography-body-2-bold-font-weight: 600;--typography-body-2-bold-letter-spacing: 0rem;--typography-body-2-bold-line-height: 1.8333333333rem;--typography-body-2-bold-text-decoration: none;--typography-body-2-bold-text-transform: none;--typography-body-2-link-font-family: visa-font-medium, Open Sans, sans-serif;--typography-body-2-link-font-size: 1.1666666667rem;--typography-body-2-link-font-weight: 500;--typography-body-2-link-letter-spacing: 0rem;--typography-body-2-link-line-height: 1.8333333333rem;--typography-body-2-link-text-decoration: underline;--typography-body-2-link-text-transform: none;--typography-body-2-medium-font-family: visa-font-medium, Open Sans, sans-serif;--typography-body-2-medium-font-size: 1.1666666667rem;--typography-body-2-medium-font-weight: 500;--typography-body-2-medium-letter-spacing: 0rem;--typography-body-2-medium-line-height: 1.8333333333rem;--typography-body-2-medium-text-decoration: none;--typography-body-2-medium-text-transform: none;--typography-body-3-font-family: visa-font-regular, Open Sans, sans-serif;--typography-body-3-font-size: 1rem;--typography-body-3-font-weight: 400;--typography-body-3-letter-spacing: 0rem;--typography-body-3-line-height: 1.5rem;--typography-body-3-text-decoration: none;--typography-body-3-text-transform: none;--typography-button-large-font-family: visa-font-semi-bold, Open Sans, sans-serif;--typography-button-large-font-size: 1.1666666667rem;--typography-button-large-font-weight: 600;--typography-button-large-letter-spacing: 0.0208333333rem;--typography-button-large-line-height: 1.5rem;--typography-button-large-text-decoration: none;--typography-button-large-text-transform: none;--typography-button-medium-font-family: visa-font-semi-bold, Open Sans, sans-serif;--typography-button-medium-font-size: 1rem;--typography-button-medium-font-weight: 600;--typography-button-medium-letter-spacing: 0.0208333333rem;--typography-button-medium-line-height: 1.3333333333rem;--typography-button-medium-text-decoration: none;--typography-button-medium-text-transform: none;--typography-button-small-font-family: visa-font-medium, Open Sans, sans-serif;--typography-button-small-font-size: 1rem;--typography-button-small-font-weight: 500;--typography-button-small-letter-spacing: 0.0208333333rem;--typography-button-small-line-height: 1.3333333333rem;--typography-button-small-text-decoration: none;--typography-button-small-text-transform: none;--typography-label-large-font-family: visa-font-regular, Open Sans, sans-serif;--typography-label-large-font-size: 1.1666666667rem;--typography-label-large-font-weight: 400;--typography-label-large-letter-spacing: 0rem;--typography-label-large-line-height: 1.5rem;--typography-label-large-text-decoration: none;--typography-label-large-text-transform: none;--typography-label-large-active-font-family: visa-font-medium, Open Sans, sans-serif;--typography-label-large-active-font-size: 1.1666666667rem;--typography-label-large-active-font-weight: 500;--typography-label-large-active-letter-spacing: 0rem;--typography-label-large-active-line-height: 1.5rem;--typography-label-large-active-text-decoration: none;--typography-label-large-active-text-transform: none;--typography-label-font-family: visa-font-regular, Open Sans, sans-serif;--typography-label-font-size: 1rem;--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: visa-font-medium, Open Sans, sans-serif;--typography-label-active-font-size: 1rem;--typography-label-active-font-weight: 500;--typography-label-active-letter-spacing: 0rem;--typography-label-active-line-height: 1.3333333333rem;--typography-label-active-text-decoration: none;--typography-label-active-text-transform: none;--typography-label-small-font-family: visa-font-regular, Open Sans, sans-serif;--typography-label-small-font-size: 0.9166666667rem;--typography-label-small-font-weight: 400;--typography-label-small-letter-spacing: 0rem;--typography-label-small-line-height: 1.1666666667rem;--typography-label-small-text-decoration: none;--typography-label-small-text-transform: none}}