@font-face { font-family: Cupra; src: url("../fonts/Cupra-Medium.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Cupra; src: url("../fonts/Cupra-Light.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { --brand-color-cupra-petrol: #003e51; --brand-color-iridicent-copper: #95572b; --brand-color-engine-grey: #75787b; --brand-color-dark-peacock: #276071; --brand-color-desert-sand: #d9cebd; --brand-color-oxygen-white: #f5f4ef; --brand-color-pitch-black: #030303; --brand-color-background-600: #1b1b1b; --brand-color-background-400: #f5f5f5; --brand-color-white: #fff; --brand-color-gray-50: #f1f4f5; --brand-color-gray-100: #e6e6e6; --brand-color-gray-200: #becdd3; --brand-color-gray: #a3b8c0; --brand-color-gray-500: #728186; --brand-color-gray-700: #41494c; --brand-color-black: #000; --brand-color-global-neutral: #d1d1d1; --brand-color-cta: var(--brand-color-iridicent-copper); --brand-color-primary: var(--brand-color-iridicent-copper); --brand-color-primary-alternative: var(--brand-color-background-600); --brand-action-label-background: var(--brand-color-cupra-petrol); --brand-color-active: var(--brand-color-cupra-petrol); --brand-link-color: var(--brand-color-iridicent-copper); --brand-overlay-link-color: var(--brand-color-iridicent-copper); --brand-overlay-footer-link-color: var(--brand-color-iridicent-copper); --brand-stock-match-background: var(--brand-color-cupra-petrol); --brand-stock-match-configured-background: var(--brand-color-pitch-black); --brand-stock-match-container-background: var(--brand-color-background-600); --brand-stock-match-car-action-text-color: var(--brand-color-pitch-black); --brand-stock-car-details-header-text-color: var(--brand-color-pitch-black); --brand-stock-car-details-trimline-text-size: 1.25rem; --brand-stock-car-details-price-details-text-color: var(--brand-color-pitch-black); --brand-stock-car-details-delivery-text-weight: 700; --brand-stock-car-details-option-label-text-color: var(--brand-color-pitch-black); --brand-stock-match-list-header-text-color: var(--brand-color-pitch-black); --brand-stock-car-icon-color: var(--brand-color-pitch-black); --brand-stock-carousel-background-color: var(--brand-color-white); --brand-stock-carousel-border-radius: 0; --brand-stock-car-list-hover-color: var(--brand-color-cupra-petrol); --brand-font-family-base: Cupra, helvetica, arial, sans-serif; --brand-text-color: var(--color-white); --brand-text-color-dark: #0f0f0f; --brand-consent-popup-text-color: var(--brand-text-color-dark); --brand-score-color: var(--brand-color-cupra-petrol); --brand-button-border-radius: 0; --brand-button-border-width: 1px; --brand-button-navigation-border-radius: var(--brand-button-border-radius); --brand-body-background: var(--brand-color-background-600); --brand-select-engine-background-color: var(--brand-body-background); --brand-header-background-color: var(--brand-body-background); --brand-button-ghost-background: transparent; --brand-button-ghost-color: currentColor; --brand-button-with-sub-text-border-radius: 0; --brand-button-ghost-background-hover: var(--brand-color-cupra-petrol); --brand-button-ghost-border-color-hover: var( --brand-button-ghost-background-hover ); --brand-button-cta-background: var(--color-white); --brand-button-cta-border-color: var(--color-white); --brand-button-cta-border-color-hover: var(--brand-color-iridicent-copper); --brand-button-cta-color: var(--brand-color-iridicent-copper); --brand-engine-color-disabled: var(--brand-text-color-dark); --brand-card-title-font-size: var(--font-size-h1); --brand-card-background-color: var(--brand-color-background-600); --brand-card-background-alternative-color: var(--brand-color-background-400); --brand-card-intro-background-color: var(--brand-card-background-color); --brand-card-intro-border-color: var(--brand-card-background-color); --brand-engine-box-shadow: var(--brand-color-gray-200); --brand-engine-header-background-color-disabled: var( --brand-card-intro-background-color ); --brand-engine-header-color-disabled: var(--text-color); --brand-engine-card-link-color: var(--brand-color-iridicent-copper); --brand-header-font-weight: normal; --brand-header-light-font-weight: normal; --brand-card-btn-link-color: currentColor; --brand-card-image-scale: 1.1; --brand-trimline-card-image-scale: 1.6; --brand-trimline-details-image-scale: 1.5; --brand-button-navigation-background: transparent; --brand-button-navigation-color: var(--text-color); --brand-button-navigation-border-width: 1px; --brand-engine-header-background-color: var(--brand-card-background-color); --brand-engine-error-message-color: var(--brand-text-color-dark); --brand-engine-error-message-background-color: var(--brand-color-gray-100); --brand-score-bar-background-color: #ddd; --brand-summary-next-steps-wrapper-background: var(--brand-color-white); --brand-side-bar-background-color: var(--brand-color-background-400); --brand-side-bar-background-footer-color: var(--brand-color-background-400); --brand-side-bar-text-color: var(--brand-color-pitch-black); --brand-side-bar-border-color: var(--brand-color-gray-200); --brand-logo-height: 1.5rem; --brand-card-horizotal-indent: 1.5rem; --brand-card-bottom-indent: 1.5rem; --brand-carousel-side-indents: 7rem; --brand-page-title-bottom-indent: 4rem; --brand-card-btn-link-margin: 0 auto; --brand-button-large-padding-vertical: 1.075rem; --brand-card-price-font-size: var(--font-size-large); --brand-score-bar-height: 0.5rem; --brand-header-height: 5.5rem; --brand-header-height-ios: 5.5rem; --brand-carousel-button-size: 3rem; --brand-color-active-panel: transparent; --brand-option-list-title-margin: var(--gutter) 0 1rem; --brand-option-list-content-padding-inline: 0.5rem; --brand-option-list-title-line-height: var(--line-height-h3); --brand-option-list-title-font-size: var(--font-size-h3); --brand-option-active-marker-color: transparent; --brand-summary-overview-color: var(--brand-color-primary); --brand-header-height-indent: 6em; --brand-engine-header-color: var(--color-white); --brand-engine-header-color-selected: var(--color-gray); --brand-next-step-link-mb: 0; --brand-forms-border-color: #a3a3a3; --brand-forms-text-color: var(--brand-color-primary); --brand-forms-text-field-background-color: transparent; --brand-forms-container-border-radius: 0; --brand-forms-container-background-color: #f5f5f5; --brand-button-light-background: transparent; --brand-button-light-border-color: var(--brand-color-pitch-black); --brand-button-light-color-hover: var(--color-white); --brand-button-light-background-hover: var(--brand-color-cupra-petrol); --brand-button-light-border-color-hover: var( --brand-button-light-background-hover ); --brand-button-light-color:currentColor --brand-summary-top-content-margin-top: -6em; --brand-summary-top-content-margin-top-ios: -13.5em; /* External components styling */ --plc-title-margin: 0 0 var(--indent-2xl); --plc-legend-margin: 0 0 var(--indent-xs); --plc-legend-font-size: var(--font-size-normal); --plc-legend-font-weight: bold; --plc-description-color: #a4a4a4; --plc-radio-background: var(--brand-color-background-400); --plc-radio-checked-background: var(--brand-color-cupra-petrol); --plc-radio-color: var(--brand-color-background-600); --plc-radio-checked-color: var(--color-white); --plc-radio-font-weight: bold; --plc-radio-border-radius: 0; --plc-tooltip-color: var(--brand-text-color-dark); --plc-radio-border-color: #dddddd; --brand-configurator-bg-color: #1b1b1b; --tac-overlay-header-text-color: var(--brand-color-black); --tac-overlay-header-text-size: 32px; --tac-overlay-subheader-text-color: var(--brand-color-black); --tac-overlay-subheader-text-size: 16px; --tac-overlay-input-text-color: var(--brand-color-black); --tac-overlay-input-text-size: 16px; --tac-overlay-input-text-weight: 700; --tac-overlay-input-item-text-color: var(--brand-color-black); --tac-overlay-input-icon-color: var(--brand-color-black); --tac-overlay-radio-button-checked-option-text: var(--brand-color-white); --tac-overlay-radio-button-checked-option: var(--brand-color-cupra-petrol); --tac-overlay-radio-button-checked-option-focus: var(--brand-color-cupra-petrol); --tac-overlay-radio-button-background-color: var(--brand-color-background-400); --tac-overlay-button-color: var(--brand-color-white); --tac-overlay-button-text-color: var(--brand-color-pitch-black); --tac-overlay-button-text-size: 16px; --tac-overlay-button-hover-color: var(--brand-color-white); --tac-overlay-button-hover-text-color: var(--brand-color-pitch-black); --tac-overlay-button-border-radius: 0; --tac-overlay-button-border-color: var(--brand-color-pitch-black); --tac-overlay-disclaimer-text-color: #474747; --tac-overlay-fiscal-value-text-color: var(--brand-color-black); --tac-overlay-fiscal-value-text-size: 16px; --brand-summary-top-bg-color: var(--brand-color-pitch-black); --brand-summary-cta-background-color: var(--brand-color-cupra-petrol); --brand-summary-cta-button-bg-color: var(--brand-color-cupra-petrol); --brand-summary-cta-link-icon-color: var(--brand-color-white); --brand-summary-cta-link-text-color: var(--brand-color-black); --brand-summary-disclaimer-text-color: var(--brand-color-white); --brand-summary-tab-text-color: var(--brand-color-pitch-black); --brand-summary-tab-bg-color: var(--brand-color-white); --brand-summary-tab-active-bg-color: var(--brand-color-white); --brand-summary-tab-button-bg-color: var(--brand-color-cupra-petrol); --brand-summary-tab-button-border-color: var(--brand-color-cupra-petrol); --brand-summary-tab-link-color: #95572B; --brand-summary-hero-block-title-icon-check: var(--brand-color-pitch-black); --brand-dealer-search-text-field-border-size: 0; --brand-dealer-search-cart-icon-bg-color-hover: var(--brand-color-cupra-petrol); --brand-dealer-search-cart-icon-border-color-hover: var(--brand-color-cupra-petrol); --brand-dealer-search-cart-icon-bg-color: var(--brand-color-cupra-petrol); --brand-dealer-search-cart-icon-border-color: var(--brand-color-cupra-petrol); --brand-form-success-message-decorator-bg-header-color: var(--brand-color-cupra-petrol); --brand-overlay-btn-close-svg-color: var(--brand-color-pitch-black); --brand-overlay-btn-close-success-svg-color: var(--brand-color-white); --brand-summary-top-block-cta-margin: 13rem; --brand-forms-text-field-checkbox-check-bg-color: var(--brand-color-cupra-petrol); --brand-button-close-color-hover: var(--brand-color-white); --form-field-container-margin-bottom: 1rem; /* Step Number */ --brand-step-number-container-border-color: var(--brand-color-black); --brand-step-number-container-bg-color: var(--brand-color-white); --brand-step-number-container-text-color: var(--brand-color-black); --brand-step-number-container-active-text-color: var(--brand-color-white); --brand-step-number-container-active-bg-color: var(--brand-color-iridicent-copper); --brand-step-number-container-active-border-color: var(--brand-color-iridicent-copper); /* Option Field */ --brand-step-container-option-button-input-default-bg-color: var(--brand-color-white); --brand-step-container-option-button-input-default-border-color: var(--brand-color-black); /* Option Field Checked/Selected */ --brand-step-container-option-button-input-selected-bg-color: var(--brand-color-cupra-petrol); --brand-step-container-option-button-input-selected-border-color: var(--brand-color-white); --brand-step-container-option-button-input-selected-before-bg-color: var(--brand-color-white); --brand-step-container-option-button-input-selected-text-color: var(--brand-color-white); /* Primary and Seconadary Buttons */ --brand-button-type-primary-color: #FFFFFF; --brand-button-type-primary-background-color: #030303; --brand-button-type-primary-border: 1px solid #030303; --brand-button-type-primary-color-hover: #FFFFFF; --brand-button-type-primary-background-color-hover: #76787B; --brand-button-type-primary-border-hover: 1px solid #76787B; --brand-button-type-secondary-color: #030303; --brand-button-type-secondary-background-color: #FAFAFA; --brand-button-type-secondary-border: 1px solid #030303; --brand-button-type-secondary-color-hover: #030303; --brand-button-type-secondary-background-color-hover: #FAFAFA; --brand-button-type-secondary-box-shadow-hover: 2px; --brand-button-type-secondary-box-shadow-color-hover: #1b1b1b; --brand-button-type-secondary-margin-hover: -2px; --brand-form-component-title-font-weight: 700; }