/* CARD CAR */ @media (hover: hover) and (pointer: fine) { .card-car_component { transition-property: transform; transition-duration: 600ms; transition-timing-function: var(--ease-cubic-default); cursor: pointer !important; } .card-car_component .card-car_link { transition-property: background-color, color; transition-duration: 600ms; transition-timing-function: var(--ease-cubic-default); } .card-car_component .price_component { transition-property: color; transition-duration: 600ms; transition-timing-function: var(--ease-cubic-default); } .card-car_component .price_component .price_bg { transition-property: width, left; transition-duration: 800ms; transition-timing-function: var(--ease-cubic-default); width: 0.5em; } .card-car_component .card-car_hover { transition-property: opacity; transition-duration: 800ms; transition-timing-function: var(--ease-cubic-default); display: none; } .card-car_component:hover { transform: scale(1.02); } .card-car_component:hover .card-car_hover { opacity: 1; display: flex; } .card-car_component:hover .card-car_price .price_component { color: var(--text-color--text-primary); } .card-car_component:hover .price_component .price_bg { width: 100%; left: 0; } .card-car_component:hover .card-car_link { background-color: var(--background-color--background-alternate); color: var(--text-color--text-alternate); } /* Card Link*/ .card-car_link.background-none:hover { background-color: transparent; color: var(--text-color--text-primary); } } /* ========================================================= VARIABLES ========================================================= */ :root { --ease-cubic-default: cubic-bezier(0.625, 0.05, 0, 1); --ease-in-quad: cubic-bezier(.55, .085, .68, .53); --ease-in-cubic: cubic-bezier(.550, .055, .675, .19); --ease-in-quart: cubic-bezier(.895, .03, .685, .22); --ease-in-quint: cubic-bezier(.755, .05, .855, .06); --ease-in-expo: cubic-bezier(.95, .05, .795, .035); --ease-in-circ: cubic-bezier(.6, .04, .98, .335); --ease-out-quad: cubic-bezier(.25, .46, .45, .94); --ease-out-cubic: cubic-bezier(.215, .61, .355, 1); --ease-out-quart: cubic-bezier(.165, .84, .44, 1); --ease-out-quint: cubic-bezier(.23, 1, .32, 1); --ease-out-expo: cubic-bezier(.19, 1, .22, 1); --ease-out-circ: cubic-bezier(.075, .82, .165, 1); --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955); --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1); --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1); --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1); --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86); --swiper-scrollbar-sides-offset: var(--grid--gutter-x3); --swiper-scrollbar-bottom: var(--grid--gutter-x3); --swiper-scrollbar-size: 0.25em; --swiper-scrollbar-bg-color: rgba(255, 255, 255, 0.1); --swiper-scrollbar-drag-bg-color: var(--base-color-neutral--white); --swiper-scrollbar-border-radius: 0.25em; } /* ========================================================= HELPERS & GLOBALS ========================================================= */ ::selection { background-color: var(--base-color-brand--blue); color: var(--base-color-neutral--white); text-shadow: none; } [visible=""] { display: none; } [data-hide-scroll] { scrollbar-width: none; } [data-hide-scroll]::-webkit-scrollbar { display: none; } html:not(.wf-design-mode) .search_component { display: block; } .is-loading { cursor: wait; } /* ========================================================= GRID SYSTEM ========================================================= */ .grid-main { display: grid; grid-template-rows: auto; gap: var(--grid--gutter); grid-template-columns: repeat(24, minmax(0, 1fr)); } .grid-main-inner { grid-column-start: 2; grid-column-end: 23; display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); grid-template-rows: auto; } @media screen and (max-width: 991px) { .grid-main { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-main-inner { grid-column-start: 1; grid-column-end: 12; grid-template-columns: repeat(12, minmax(0, 1fr)); } } @media screen and (max-width: 767px) { .grid-main { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* ========================================================= BUTTONS ========================================================= */ /* ========================================================= PLUGINS - SWIPER ========================================================= */ html:not(.wf-design-mode) .section_teams .swiper, html:not(.wf-design-mode) .section_usps-large .swiper { overflow: visible; } html:not(.wf-design-mode) .swiper-wrapper { flex-flow: row !important; grid-row-gap: 0 !important; grid-column-gap: 0 !important; } html:not(.wf-design-mode) .swiper-button-disabled { opacity: 0.3; } [data-cars-slider-pagination] { display: flex; justify-content: center; align-items: center; gap: 0.5em; } [data-cars-slider-pagination] .swiper-pagination-current { color: white; } [data-cars-slider-pagination] .swiper-pagination-total { color: rgba(255, 255, 255, 0.5); opacity: 0.4; } /* Swiper bullets */ .section_car-details .swiper-pagination-bullet { width: 4rem; height: 3px; border-radius: 3px; background-color: white; transition: all 300ms ease-in-out; } .section_slider .swiper { overflow: hidden !important; } .section_slider .slider_thumbs-item { transition-property: border-color, width !important; transition-duration: .4s !important; transition-timing-function: var(--ease-cubic-default) !important; border: 1px solid rgba(255, 255, 255, 0); } .section_slider .swiper-slide-thumb-active { border: 1px solid rgba(255, 255, 255, 0.5); } @media screen and (max-width: 991px) { .section_slider .slider_thumbs-item { width: 3rem !important; } } @media screen and (min-width: 992px) { .section_slider .slider_thumbs-item { width: 4.75rem !important; } .section_slider .swiper-slide-thumb-active { width: 6.5rem !important; } } /* ========================================================= ANIMATIONS ========================================================= */ .button-circle_component .button-circle_inner { transition: all 0.6s var(--ease-cubic-default); transform: scale(1) !important; } .button-circle_component:hover .button-circle_inner { background-color: var(--base-color-neutral--white); color: var(--base-color-brand--blue); transform: scale(0.95) !important; } .Typewriter__cursor { font-weight: 400; color: white; } .spotlight-initial { mask: radial-gradient(circle at 50% 50%, rgb(17, 19, 23) 0px, rgb(17, 19, 23) 25%); } /* ========================================================= BUTTONS ========================================================= */ .group:hover .button-arrow, .button-arrow:hover { background-color: transparent; color: var(--base-color-neutral--white); border: 1px solid var(--base-color-neutral--white); } .group[data-wf--cards-cta--variant="green-button"]:hover .button-arrow { background-color: transparent; color: var(--base-color-brand--green); border: 1px solid var(--base-color-brand--green); } .group:hover .button-arrow_icon { transform: rotate(-90deg); } /* ========================================================= CARDS ========================================================= */ .card-usp-small_component { border-bottom: 1px solid rgba(0, 0, 0, 0.2); } @media screen and (max-width: 991px) { .card-usp-small_component:last-of-type { border-bottom-width: 0 !important; } } @media screen and (min-width: 992px) { .card-usp-small_component:first-of-type { border-top-width: 0; } } .card-timeline_component:last-of-type { border-width: 0; } .card-timeline_component:last-of-type .card-timeline_line { display: none; } .card-price_component .card-price_list { margin: 0; padding: 0; } .card-price_component .card-price-item_component { list-style-type: none; } .card-price-item_component:first-of-type, .large-title_features-item:first-of-type { border-top-width: 0.0625rem; } .card-cta_background, .search-banner_background { transition-property: transform; transition-duration: 800ms; transition-timing-function: var(--ease-cubic-default); } .group:hover .card-cta_background, .group:hover .search-banner_background { transform: scale(1.05); } /* ========================================================= THEMES ========================================================= */ [data-wf--sections-timeline--theme-variant="light"] .card-timeline_component { color: var(--text-color--text-alternate); border-color: rgba(0, 0, 0, 0.2); } [data-wf--sections-timeline--theme-variant="light"] .race-line_component .race-line_item { background-color: var(--background-color--background-primary); } [data-wf--sections-usps-small--theme-variant="light"] .card-usp-small_component { border-bottom: 1px solid rgba(0, 0, 0, 0.2); } [data-wf--sections-usps-large--theme-variant="light"] .card-usp_component .card-usp_inner { color: var(--text-color--text-alternate); background: var(--background-color--background-tertiary); } [data-wf--sections-usps-large--theme-variant="light"] .card-usp_component .card-usp_shadow { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--background-color--background-alternate)); } [data-wf--sections-usps-large--theme-variant="light"] .swiper-navigation_component .swiper-navigation_button, [data-wf--sections-team--theme-variant="light"] .swiper-navigation_component .swiper-navigation_button { border-color: var(--text-color--text-alternate); color: var(--text-color--text-alternate); } [data-wf--sections-usps-large--theme-variant="light"] .swiper-navigation_component .swiper-navigation_button:hover, [data-wf--sections-team--theme-variant="light"] .swiper-navigation_component .swiper-navigation_button:hover { background-color: var(--base-color-brand--blue); border-color: var(--base-color-brand--blue); color: var(--text-color--text-primary); } [data-wf--sections-team--theme-variant="light"] .card-team_component .card-team_content { border-color: var(--base-color-brand--black); } /* ========================================================= SECTIONS ========================================================= */ .section_images .card-media_component { aspect-ratio: 850 / 960; } /*.section_images .images_cards>div:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 1710 / 960; }*/ /* ========================================================= PAGE SPECIFIC - CAR PAGE ========================================================= */ @media screen and (min-width: 768px) and (max-width: 991px) { .is-car-page .section_ctas .card-cta_component:nth-of-type(3) { grid-column: 1 / -1; } } /* Filters select */ .cars-list_sort-select {} .cars-list_sort-field {} .cars-list_sort-select { position: relative; display: inline-block; } .cars-list_sort-select select { appearance: none; /* Firefox */ -webkit-appearance: none; /* Chrome/Safari */ -moz-appearance: none; /* Firefox */ padding-right: 2rem; } .cars-list_sort-select::after { content: ''; background-image: url('https://cdn.prod.website-files.com/67653e014d525b137c276d0e/687604a0450107d6b48db9ab_icon_select_arrow.svg'); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; top: 55%; right: 1rem; transform: translateY(-50%); width: 0.5rem; height: 0.5rem; pointer-events: none; } /* Custom Checkbox */ /* Classic */ .button-checkbox_component:not([data-inverted]) input:checked+.button-checkbox_visual { background-color: var(--base-color-brand--blue); } .button-checkbox_component:not([data-inverted]) input:checked+.button-checkbox_visual .button-checkbox_icon { opacity: 1; } /* Inverted */ .button-checkbox_component[data-inverted] .button-checkbox_icon { opacity: 1; } .button-checkbox_component[data-inverted] input+.button-checkbox_visual { background-color: var(--base-color-brand--blue); } .button-checkbox_component[data-inverted] input:checked+.button-checkbox_visual { background-color: transparent; } .button-checkbox_component[data-inverted] input:checked+.button-checkbox_visual .button-checkbox_icon { opacity: 0; } /* Selection Swiper */ .selection_list-wrapper.swiper { overflow: visible !important; } .selection_list-wrapper .swiper-slide { height: auto; } /* Menu */ @media screen and (min-width: 992px) { .navbar { transition: all 800ms var(--ease-cubic-default); } .navbar_menu { backface-visibility: hidden; } .navbar_links { overflow: visible; } .navbar_link { transition: color 800ms var(--ease-cubic-default); &::before, &::after { bottom: -0.325rem; background-color: var(--base-color-brand--blue); } &:hover { color: var(--base-color-brand--blue); } } .navbar_link-item.w--current { color: var(--base-color-brand--blue); &::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); } } /** WHILE SCROLLING **/ [data-scrolling-direction="down"] { .navbar { margin-top: -15rem; } } [data-scrolling-direction="up"] { .navbar { margin-top: 0; } } } @media screen and (max-width: 991px) { .navbar .navbar_bg { transition: border-radius 400ms var(--ease-cubic-default) 300ms, height 400ms var(--ease-cubic-default) 300ms; } .navbar .navbar_icon { transition: left 400ms var(--ease-cubic-default) 200ms, bottom 400ms var(--ease-cubic-default) 200ms; } .navbar .navbar_hamburger { transition: right 400ms var(--ease-cubic-default) 200ms, bottom 400ms var(--ease-cubic-default) 200ms, background-color 400ms var(--ease-cubic-default) 200ms; } .navbar .navbar_links-wrap { transition: width 300ms var(--ease-cubic-default) 300ms, grid-template-rows 600ms var(--ease-cubic-default) 0ms; width: 95%; margin: 0 auto; } /* When active */ .navbar.is-active .navbar_bg { transition: border-radius 400ms var(--ease-cubic-default), height 400ms var(--ease-cubic-default) 200ms; border-top-left-radius: 0.625rem; border-top-right-radius: 0.625rem; border-bottom-left-radius: 1.75rem; border-bottom-right-radius: 1.75rem; } .navbar.is-active .navbar_icon { left: 0.6rem; bottom: 0.6rem; color: var(--base-color-brand--gray-dark); } .navbar.is-active .navbar_hamburger { right: 0.6rem; bottom: 0.6rem; background-color: var(--base-color-brand--gray-dark); } .navbar.is-active .navbar_links-wrap { transition: width 300ms var(--ease-cubic-default) 0ms, grid-template-rows 600ms var(--ease-cubic-default) 200ms; grid-template-rows: 1fr; width: 100%; } } /* Buttons */ .button_component { --padding: 0.625rem; } .button_component .button_content { transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); padding-left: var(--grid--gutter); } .button_component .button_icon { transition: all 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform: scale(0) rotate(0.001deg); } .button_component .button_icon.is-duplicated { transform: scale(1) rotate(0.001deg); } .button_component .button_arrow-up { transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform: rotate(-135deg); } /* HOVER */ .button_component:hover .button_content { transform: translateX(3rem) rotate(0.001deg); } .button_component:hover .button_icon { transform: scale(1) rotate(0.001deg); } .button_component:hover .button_arrow-up { transform: rotate(-90deg); } .button_component:hover .button_icon.is-duplicated { transform: scale(0) rotate(0.001deg); } /* THEME - Secondary */ [data-wf--buttons-simple--theme-variant="secondary"]:hover .button_icon { background-color: var(--base-color-brand--blue); color: var(--base-color-neutral--white); } [data-wf--buttons-simple-button--variant="secondary"]:hover .button_icon { background-color: var(--base-color-brand--blue); color: var(--base-color-neutral--white); } /* Back Button */ [data-wf--buttons-simple--theme-variant="back-primary"] .button_content { transform: translateX(3rem) rotate(0.001deg); } [data-wf--buttons-simple--theme-variant="back-primary"] .button_icon { transform: scale(1) rotate(0.001deg); } [data-wf--buttons-simple--theme-variant="back-primary"] .button_icon.is-duplicated { transform: scale(0) rotate(0.001deg); } [data-wf--buttons-simple--theme-variant="back-primary"] .button_arrow-up { transform: rotate(90deg); } [data-wf--buttons-simple--theme-variant="back-primary"]:hover .button_content { transform: translateX(0rem) rotate(0.001deg); } [data-wf--buttons-simple--theme-variant="back-primary"]:hover .button_icon { transform: scale(0) rotate(0.001deg); } [data-wf--buttons-simple--theme-variant="back-primary"]:hover .button_icon.is-duplicated { transform: scale(1) rotate(0.001deg); } [data-wf--buttons-simple--theme-variant="back-primary"]:hover .button_arrow-up { transform: rotate(90deg); } /* BUTTON DOWNLOAD*/ .button-download .button-download_icon { transition: all 0.735s cubic-bezier(0.625, 0.05, 0, 1); } .button-download:hover .button-download_icon { background-color: var(--base-color-neutral--white); border-color: var(--base-color-neutral--white); color: var(--base-color-brand--blue); } /* BUTTON CIRCLE*/ .button-arrow-circle_component { transition: all 0.735s cubic-bezier(0.625, 0.05, 0, 1); } .button-arrow-circle_component .button-arrow-circle_icon-wrap { transition: all 0.735s cubic-bezier(0.625, 0.05, 0, 1); } .button-arrow-circle_component:hover { background-color: var(--base-color-neutral--white); color: var(--base-color-brand--blue); } .button-arrow-circle_component:hover .button-arrow-circle_icon-wrap { transform: scale(0.7) translateX(3rem) rotateZ(-90deg); opacity: 0; } .button-arrow-circle_component:hover .button-arrow-circle_icon-wrap.is-duplicated { transform: scale(0.7) translateX(0rem) rotateZ(-90deg); opacity: 1; } /* Vault */ /* Play Video on Hover */ [data-video-on-hover="active"] video { opacity: 1; } /*Magnetic effect */ /* .button-circle_inner .btn-magnetic__text-p { transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1); transform: translateY(0%) rotate(0.001deg); } .btn-magnetic__click:hover .btn-magnetic__text-p { transform: translateY(-100%) rotate(0.001deg); }*/ /* Youtube Video Bg */ .youtube-bg[data-youtube-activated="true"][data-youtube-loaded="true"] .youtube-bg__placeholder { opacity: 0; transition-delay: 0.2s; } [data-youtube-hover-target]:hover .youtube-bg[data-youtube-play-hover="true"] .youtube-bg__placeholder { opacity: 0; transition-delay: 0.2s; } .youtube-bg .youtube-bg__pause { display: none; } .youtube-bg[data-youtube-playing="true"] .youtube-bg__pause { display: flex; } .youtube-bg[data-youtube-playing="true"] .youtube-bg__pause, .youtube-bg[data-youtube-playing="false"] .youtube-bg__play { opacity: 1; } .youtube-bg[data-youtube-playing="true"] .youtube-bg__play, .youtube-bg[data-youtube-playing="false"] .youtube-bg__pause { opacity: 0; } /* Auto Image Cycle (Slideshow) */ [data-image-cycle-item="active"] { transition: opacity 1s ease 0s, visibility 0s ease 0s; opacity: 1; visibility: visible; z-index: 3; } [data-image-cycle-item="previous"] { transition: opacity 1s ease 0.4s, visibility 0s ease 1s; opacity: 0; visibility: visible; z-index: 2; } [data-image-cycle-item="not-active"] { opacity: 0; visibility: hidden; z-index: 1; } /* Basic Modals */ [data-modal-group-status] { transition: all 0.2s linear; } [data-modal-group-status="active"] { opacity: 1; visibility: visible; } [data-modal-name][data-modal-status="active"] { display: flex; } /* Forms */ /* var(--_theme---forms--input-background) var(--_theme---forms--input-border) var(--_theme---forms--input-label) var(--_theme---forms--input-text) var(--_theme---forms--input-placeholder) var(--_theme---forms--input-background-success) var(--_theme---forms--input-border-success) var(--_theme---forms--input-background-error) var(--_theme---forms--input-border-error) var(--_theme---forms--input-background-focus) var(--_theme---forms--input-border-focus) var(--_theme---forms--input-label-focus) var(--_theme---forms--input-text-focus) var(--_theme---forms--input-background-fill) var(--_theme---forms--input-border-fill) var(--_theme---forms--input-label-fill) var(--_theme---forms--input-text-fill) */ /* Field: Filled */ .is--filled .form_label { color: var(--_theme---forms--input-label-fill); } .is--filled .form_input { background-color: var(--_theme---forms--input-background-fill); border-color: var(--_theme---forms--input-border-fill); color: var(--_theme---forms--input-text-fill); } /* Field: Error */ [data-validate].is--error input, [data-validate].is--error textarea, [data-validate].is--error select { background-color: var(--_theme---forms--input-background-error) !important; border-color: var(--_theme---forms--input-border-error) !important; } [data-validate].is--error input::placeholder, [data-validate].is--error textarea::placeholder, [data-validate].is--error select::placeholder, [data-validate].is--error select:has(option[value=""]:checked) { color: var(--_theme---forms--input-border-error) !important; } [data-validate].is--error .form_field-icon.is--error, [data-validate].is--error .form_radiocheck-field-icon.is--error { opacity: 1; } [data-validate].is--error .form_radiocheck-custom { border-color: var(--_theme---forms--input-error); } [data-validate].is--error input:checked~.form_radiocheck-custom { border-color: var(--_theme---forms--input-error); } /* Field: Success */ [data-validate].is--success .form_field-icon.is--success, [data-validate].is--success .form_radiocheck-field-icon.is--success { opacity: 1; } /* Field: Custom Radio or Checkbox Focus */ [data-form-validate] .form_radiocheck-field input:focus-visible~.form_radiocheck-custom { background-color: var(--_theme---forms--input-background-focus); color: var(--_theme---forms--input-text-focus); } /* Field: Custom Radio or Checkbox Selected with focus or without focus */ [data-form-validate] .form_radiocheck-field input:focus-visible:checked~.form_radiocheck-custom, [data-form-validate] .form_radiocheck-field input:checked~.form_radiocheck-custom { background-color: var(--_theme---forms--input-background-fill); border-color: var(--_theme---forms--input-border-fill); color: var(--_theme---forms--input-text-fill); } [data-form-validate] .form_radiocheck-field .form_radiocheck-label.is--small { margin-top: 0rem; } /* Field: Select */ [data-form-validate] select:has(option[value=""]:checked) { color: var(--_theme---forms--input-placeholder); } /* BUTTONS - STAGGERING */ [data-button-staggering] { font-kerning: none; [data-button-staggering-text] { overflow: hidden; position: relative; display: inline-block; font-kerning: none; .char { display: inline-block; position: relative; text-shadow: 0px 1.3rem currentColor; transform: translateY(0em) rotate(0.001deg); transition: transform 0.6s var(--ease-cubic-default); } } &:hover { [data-button-staggering-text] .char { transform: translateY(-1.3rem) rotate(0.001deg); } } } /* BUTTONS - BG INSET */ [data-button-scale] { [data-button-scale-bg] { inset: 0; transition: inset 0.2s var(--ease-cubic-default); } &:hover { [data-button-scale-bg] { inset: 0.125em; } } } /* Underline Links */ @media screen and (min-width: 992px) { [data-underline-button], [data-underline-link] { position: relative; } [data-underline-button]::before, [data-underline-link]::before { content: ""; position: absolute; bottom: 0rem; left: 0; width: 100%; height: 0.0625rem; display: block; background-color: var(--link-color--link-alternate); transition: transform 0.735s var(--ease-cubic-default); transform-origin: right; transform: scaleX(0) rotate(0.001deg); } [data-underline-button]::before { height: 0.13rem; } [data-underline-button="white"]::before, [data-underline-link="white"]::before { background-color: var(--link-color--link-alternate); } [data-underline-button="primary"]::before, [data-underline-link="primary"]::before { background-color: var(--link-color--link-primary); } .w--current[data-underline-button]::before, .w--current[data-underline-link]::before, [data-underline-button]:hover::before, [data-underline-link]:hover::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); } } /* Search */ .search_component { transition: all 0.3s var(--ease-cubic-default); pointer-events: none; } .search_component .search_bar { transition: all 0.6s var(--ease-cubic-default); } .search_component [data-search-panel] { transition: grid-template-rows 0.6s var(--ease-cubic-default); } /* Inactive */ [data-search="inactive"] { transition-delay: 0.5s; opacity: 0; } [data-search="inactive"] .search_bar { transition-delay: 0.3s; width: 0; } [data-search="inactive"] .search_panel { transition-delay: 0.3s; } [data-search-panel="inactive"] { grid-template-rows: 0fr; } /* Active */ [data-search="active"] { transition-delay: 0s; opacity: 1; } [data-search="active"] .search_bar { transition-delay: 0s; width: 100%; } [data-search="active"] [data-search-panel="active"] { grid-template-rows: 1fr; } /* Results */ [data-search-results="true"] [data-search-results-button] { display: flex; } [data-search-results="true"] [data-search-noresult-button] { display: none; } [data-search-results="false"] [data-search-results-button] { display: none; } [data-search-results="false"] [data-search-noresult-button] { display: flex; }