/* ------------------------- Variables -------------------------------------------------- */ :root { /* CSS Animations */ --animation-default-fast: 0.3s cubic-bezier(0.625, 0.05, 0, 1); --animation-default: 0.6s cubic-bezier(0.625, 0.05, 0, 1); --animation-default-slow: 0.9s cubic-bezier(0.625, 0.05, 0, 1); --animation-grow: 0.45s cubic-bezier(0.35, 1.5, 0.6, 1); --animation-grow-slow: 0.6s cubic-bezier(0.35, 1.2, 0.65, 1); --animation-ease: 0.2s ease-in-out; } /* ------------------------- Theme -------------------------------------------------- */ :root { /* Colors (not changing with Dark/Light Theme) */ --color-ignore-black: #000; --color-ignore-white: #FFF; --color-ignore-dark: #121515; --color-ignore-dark-tint: #1D222C; --color-ignore-dark-tint-hover: #121515; --color-ignore-light: #EDEFF2; --color-ignore-light-tint: #F6F7F8; --color-ignore-light-tint-hover: #EDEFF2; /* Colors Theme */ --color-black: var(--color-ignore-black); --color-white: var(--color-ignore-white); --color-dark: var(--color-ignore-dark); --color-dark-tint: var(--color-ignore-dark-tint); --color-dark-tint-hover: var(--color-ignore-dark-tint-hover); --color-light: var(--color-ignore-light); --color-light-tint: var(--color-ignore-light-tint); --color-light-tint-hover: var(--color-ignore-light-tint-hover); } /* Theme Dark */ [data-theme="dark"] { --color-black: var(--color-ignore-white); --color-white: var(--color-ignore-black); --color-dark: var(--color-ignore-light); --color-dark-tint: var(--color-ignore-light-tint); --color-dark-tint-hover: var(--color-ignore-light-tint-hover); --color-light: var(--color-ignore-dark); --color-light-tint: var(--color-ignore-dark-tint); --color-light-tint-hover: var(--color-ignore-dark-tint-hover); } /* ------------------------- Scaling System by Osmo [https://osmo.supply/] ------------------------- */ /* Desktop */ :root { --size-unit: 16; /* body font-size in design - no px */ --size-container-ideal: 1440; /* screen-size in design - no px */ --size-container-min: 992px; --size-container-max: 1600px; --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max)); --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit))); --section-padding: 8em; --container-padding: 3em; --gap: 1.5em; } [data-animate="heading"]>div { padding-bottom: 0.0625em; margin-bottom: -0.0625em; } .home-hero_title>div, .reviews-hero_title>div { padding-bottom: 0.0625em; margin-bottom: -0.0625em; } .container:has(.swiper-group) { padding-right: 0; } /* Tablet */ @media screen and (max-width: 991px) { :root { --size-container-ideal: 834; /* screen-size in design - no px */ --size-container-min: 768px; --size-container-max: 991px; --section-padding: 7em; } } /* Mobile Landscape */ @media screen and (max-width: 767px) { :root { --size-container-ideal: 550; /* screen-size in design - no px */ --size-container-min: 480px; --size-container-max: 767px; --section-padding: 5em; --container-padding: 1em; --gap: 1em; } [data-animate="heading"]>div { padding-bottom: 0.02em; margin-bottom: -0.02em; } .home-hero_title>div .reviews-hero_title>div { padding-bottom: 0.02em; margin-bottom: -0.02em; } } /* Mobile Portrait */ @media screen and (max-width: 479px) { :root { --size-container-ideal: 390; /* screen-size in design - no px */ --size-container-min: 320px; --size-container-max: 479px; } } /* ------------------------- Hide Scrollbar -------------------------------------------------- */ body ::-webkit-scrollbar, body::-webkit-scrollbar { display: none; } /* Chrome, Safari, Opera */ body { -ms-overflow-style: none; } /* IE & Edge */ html { scrollbar-width: none; } /* Firefox */ /* ------------------------- Body -------------------------------------------------- */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } li, ul, figure { padding: 0; margin: 0; list-style: none; } html { scroll-behavior: initial; } body { -webkit-font-smoothing: antialiased; transition: color var(--animation-ease), background-color var(--animation-ease); } html, body { width: 100%; min-height: 100%; -webkit-font-smoothing: antialiased; position: relative; } section { position: relative; z-index: 1; } a { color: inherit; } /* Selection */ ::selection { background-color: var(--color-dark); color: var(--color-light); text-shadow: none; } ::-moz-selection { background-color: var(--color-dark); color: var(--color-light); text-shadow: none; } /* General */ canvas, img, video, picture, figure { max-width: 100%; height: auto; box-sizing: border-box; display: block; } img { width: 100%; } svg { max-width: none; height: auto; box-sizing: border-box; } audio, canvas, iframe, img, svg, video, picture, figure { vertical-align: middle; } h1, h2, h3, h4, h5, h6, p, a, li, ul, ol, span, strong, em, figcaption { padding: 0; margin: 0; } video { padding: 0 !important; outline: 0 solid transparent !important; box-shadow: none !important; } /* ------------------------- Webflow Designer -------------------------------------------------- */ :is(.wf-design-mode, .w-editor) .swiper-wrapper { overflow: scroll; } :is(.wf-design-mode, .w-editor) .page_transition_wrap { display: none; } :is(.wf-design-mode, .w-editor) .page_transition_wrap { display: none; } :is(.wf-design-mode, .w-editor) .bunny-lightbox { display: none; } /* ------------------------- Features Swiper -------------------------------------------------- */ body { --swiper-pagination-color: currentColor; --swiper-pagination-bottom: auto; --swiper-pagination-bullet-size: 0.5em; --swiper-pagination-bullet-inactive-color: currentColor; --swiper-pagination-bullet-inactive-opacity: 0.15; --swiper-pagination-bullet-horizontal-gap: 0.25em; --swiper-wrapper-transition-timing-function: cubic-bezier(0.625, 0.05, 0, 1); } .swiper-slide { padding-right: var(--gap); } .swiper-slide:last-of-type { margin-right: calc(-1 * var(--gap)); } .swiper-navigation__button { transition: opacity 0.2s ease; } .swiper-button-disabled { opacity: 0.25; pointer-events: none; } [data-underline-link] { text-decoration: none; position: relative; } [data-underline-link]::before, [data-underline-link="alt"]::before, [data-underline-link="alt"]::after { content: ""; position: absolute; bottom: -0.0625em; left: 0; width: 100%; height: 0.0625em; background-color: currentColor; transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform-origin: right; transform: scaleX(0) rotate(0.001deg); } [data-underline-link="alt"]::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.3s; } [data-underline-link="alt"]::after { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } @media (hover: hover) and (pointer: fine) { [data-hover]:hover [data-underline-link]::before, [data-underline-link]:hover::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); } [data-hover]:hover [data-underline-link="alt"]::before, [data-underline-link="alt"]:hover::before { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } [data-hover]:hover [data-underline-link="alt"]::after, [data-underline-link="alt"]:hover::after { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.3s; } } /*-------- Buttons ---------*/ .btn-magnetic__click .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); } /*-------- Phone accordion ---------*/ /* Max width of expanded pill/content */ [data-feature-pills-init] { --content-item-expanded: 25em; } @media screen and (max-width: 991px) { [data-feature-pills-init] { --content-item-expanded: calc(50% - 0.5em); } } @media screen and (max-width: 767px) { [data-feature-pills-init] { --content-item-expanded: 100%; } } /* Default state + transition */ [data-feature-pills-button] { opacity: 1; transition: opacity 400ms ease-in-out 300ms; } [data-feature-pills-inner] { opacity: 0; transition: opacity 300ms ease-in-out 0ms; } [data-feature-pills-visual] { opacity: 0; transition: opacity 350ms ease-in-out; } [data-feature-pills-cover] { opacity: 1; transition: opacity 350ms ease-in-out; } /* Active Pill */ [data-feature-pills-item][data-active="true"] [data-feature-pills-button] { opacity: 0; transition: opacity 50ms ease-in-out 0ms; } [data-feature-pills-item][data-active="true"] [data-feature-pills-inner] { opacity: 1; } /* Active Visual */ [data-feature-pills-visual][data-active="true"] { opacity: 1; } [data-feature-pills-cover][data-active="false"] { opacity: 0; } /* Close button */ [data-feature-pills-close] { transform: scale(0) rotate(135deg); opacity: 0; pointer-events: none; transition: all 500ms cubic-bezier(.7, 0, .3, 1); } [data-feature-pills-active="true"] [data-feature-pills-close] { transform: scale(1) rotate(45deg); opacity: 1; pointer-events: auto; } /* 'edit' mode where buttons are hidden and inner content is shown */ [data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-collection] { overflow: auto; justify-content: start; } [data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-button] { display: none; } [data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-content] { position: relative; pointer-events: auto; } [data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-inner] { opacity: 1; transform: translate(0px, 0em); } /*-------- App features ---------*/ :is(.wf-design-mode, .wf-editor) [data-typo-scroll-item]:hover .typo-scroll__h, [data-typo-scroll-item="active"] .typo-scroll__h { z-index: 2; color: var(--color-black); /*mix-blend-mode: difference;*/ } .typo-scroll__link:hover .typo-scroll__h { opacity: 1; } .typo-scroll__link:not(:hover) .typo-scroll__h { opacity: .25; transition: opacity .4s cubic-bezier(0.16, 1, 0.3, 1); } .typo-scroll__media { transition: opacity .4s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; } .typo-scroll__img { transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1); transform: scale(.9); } :is(.wf-design-mode, .wf-editor) [data-typo-scroll-item]:hover .typo-scroll__media, [data-typo-scroll-item="active"] .typo-scroll__media { opacity: 1; } :is(.wf-design-mode, .wf-editor) [data-typo-scroll-item]:hover .typo-scroll__img, [data-typo-scroll-item="active"] .typo-scroll__img { transform: scale(1); } @media (hover: none) and (pointer: coarse) { [data-typo-scroll-item="active"] .typo-scroll__media { pointer-events: all; } } /*-------- Modal ---------*/ [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; } /*-------- About Rotating Words ---------*/ [data-rotating-words] { display: inline-block; position: relative; } .rotating-text__inner { display: inline-block; } .rotating-text__word { display: block; white-space: nowrap; position: absolute; top: 0; left: 0; } .rotating-line { padding-bottom: 0.1em; margin-bottom: -0.1em; white-space: nowrap; } .rotating-line-mask { overflow-x: visible !important; overflow-y: clip !important; } /*-------- Form Validation ---------*/ /* Field: Error */ [data-validate].is--error input, [data-validate].is--error textarea, [data-validate].is--error select { border-color: #ff3939; } [data-validate].is--error .form-field-icon.is--error, [data-validate].is--error .radiocheck-field-icon.is--error { opacity: 1; } /* Field: Success */ [data-validate].is--success .form-field-icon.is--success, [data-validate].is--success .radiocheck-field-icon.is--success { opacity: 1; } /* Field: Custom Radio or Checkbox */ [data-form-validate] .radiocheck-field input:focus-visible~.radiocheck-custom { background-color: #FFF; color: #E2E1DF; } [data-form-validate] .radiocheck-field input:focus-visible:checked~.radiocheck-custom, [data-form-validate] .radiocheck-field input:checked~.radiocheck-custom { background-color: #121515; color: #FFF; } [data-form-validate] .radiocheck-field .radiocheck-label.is--small { margin-top: 0.125em; } [data-validate].is--error .radiocheck-custom { border-color: #FF4C24; } [data-validate].is--error input:checked~.radiocheck-custom { border-color: #121515; } /* Field: Select */ [data-form-validate] select:has(option[value=""]:checked) { color: rgba(19, 19, 19, 0.3); } @media (min-width: 992px) { :is(.wf-design-mode, .wf-editor) .swiper.is--app .swiper-slide { transform: translateY(0%) rotateZ(0) scale(1); } :is(.wf-design-mode, .wf-editor) .swiper.is--app .swiper-slide .app-card_content { opacity: 1; } /*style slides only on live site*/ .swiper.is--app .swiper-slide { transform: translateY(16%) rotateZ(0) scale(0.5); transition: transform .5s; } .swiper.is--app .swiper-slide .app-card_content { opacity: 0; transition: opacity .3s; } .swiper.is--app .swiper-slide.swiper-slide-active { transform: scale(1) translateY(0) rotate(0); } .swiper.is--app .swiper-slide.swiper-slide-active .app-card_content { opacity: 1; } .swiper.is--app .swiper-slide.swiper-slide-prev { transform: scale(.8) translateY(12%) rotate(-14deg); } .swiper.is--app .swiper-slide.swiper-slide-next { transform: scale(.8) translateY(12%) rotate(14deg); } } /*-------- HSL Lightbox ---------*/ [data-bunny-lightbox-status] .bunny-lightbox__calc { transition: transform 0.3s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.3s linear, visibility 0.3s linear; opacity: 0; visibility: hidden; transform: scale(0.9) rotate(0.001deg); } [data-bunny-lightbox-status="active"] .bunny-lightbox__calc { opacity: 1; visibility: visible; transform: scale(1) rotate(0.001deg); } [data-bunny-lightbox-status] .bunny-lightbox__dark, [data-bunny-lightbox-status] .bunny-lightbox__close { transition: opacity 0.3s linear, visibility 0.3s linear; opacity: 0; visibility: hidden; } [data-bunny-lightbox-status="active"] .bunny-lightbox__dark, [data-bunny-lightbox-status="active"] .bunny-lightbox__close { opacity: 1; visibility: visible; } /* Animation */ [data-bunny-lightbox-init] :is(.bunny-lightbox-player__placeholder, .bunny-lightbox-player__dark, .bunny-lightbox-player__playpause, .bunny-lightbox-player__loading) { transition: opacity 0.3s linear, visibility 0.3s linear; } /* Placeholder */ [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__placeholder, [data-bunny-lightbox-init][data-player-status="paused"] .bunny-lightbox-player__placeholder, [data-bunny-lightbox-init][data-player-activated="true"][data-player-status="ready"] .bunny-lightbox-player__placeholder { opacity: 0; visibility: hidden; } /* Dark Overlay */ [data-bunny-lightbox-init][data-player-status="paused"] .bunny-lightbox-player__dark, [data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__dark { opacity: 0.3; } [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__dark { opacity: 0; } /* Play/Pause */ [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__playpause, [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__playpause { opacity: 0; } [data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__playpause { opacity: 1; } [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__play-svg, [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__play-svg { display: none; } [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__pause-svg, [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__pause-svg { display: block; } /* Loading */ [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__loading { opacity: 1; visibility: visible; } /* Interface */ .bunny-lightbox-player__interface { transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__interface, [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__interface { opacity: 0; transform: translateY(1em) rotate(0.001deg); } [data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__interface, [data-bunny-lightbox-init][data-player-status="loading"][data-player-hover="active"] .bunny-lightbox-player__interface { opacity: 1; transform: translateY(0em) rotate(0.001deg); } /* Timeline */ [data-bunny-lightbox-init][data-player-status="idle"][data-player-activated="false"] .bunny-lightbox-player__timeline, [data-bunny-lightbox-init][data-player-status="ready"][data-player-activated="false"] .bunny-lightbox-player__timeline { pointer-events: none; } /* Timeline Handle */ [data-bunny-lightbox-init] .bunny-lightbox-player__timeline-handle { transition: transform 0.15s ease-in-out; } [data-bunny-lightbox-init][data-timeline-drag="true"] .bunny-lightbox-player__timeline-handle { transform: translate(-50%, -50%) scale(1); } /* Fullscreen */ [data-bunny-lightbox-init][data-player-fullscreen="true"] .bunny-lightbox-player__fullscreen-shrink-svg { display: block; } [data-bunny-lightbox-init][data-player-fullscreen="true"] .bunny-lightbox-player__fullscreen-scale-svg { display: none; } /* Mute */ [data-bunny-lightbox-init][data-player-muted="true"] .bunny-lightbox-player__volume-mute-svg { display: block; } [data-bunny-lightbox-init][data-player-muted="true"] .bunny-lightbox-player__volume-up-svg { display: none; } /* Cover Mode */ [data-bunny-lightbox-init][data-player-update-size="cover"] { height: 100%; top: 0; left: 0; position: absolute; } [data-bunny-lightbox-init][data-player-update-size="cover"] [data-player-before] { display: none; } [data-bunny-lightbox-init][data-player-update-size="cover"][data-player-fullscreen="false"] .bunny-lightbox-player__video { object-fit: cover; } /* Bento Quote Loop */ .bento_quote { animation: bentoQuoteFade 9s linear infinite; } .bento_quote:nth-child(1) { animation-delay: 0s; } .bento_quote:nth-child(2) { animation-delay: 3s; } .bento_quote:nth-child(3) { animation-delay: 6s; } @keyframes bentoQuoteFade { 0% { opacity: 0; } 4.44% { opacity: 1; } /* 0.4 / 9 */ 28.89% { opacity: 1; } /* 2.6 / 9 */ 33.33% { opacity: 0; } /* 3 / 9 */ 100% { opacity: 0; } }