/* ------------------------------------------------------------------------------------------------------------------------------------------ FORM ------------------------------------------------------------------------------------------------------------------------------------------*/ /* Field: Error */ /*[data-validate].is--error input,*/ /*[data-validate].is--error textarea,*/ /*[data-validate].is--error select{*/ /* border-color: #FF4C24;*/ /*}*/ /*[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: #D0CFCD;*/ /* color: #E2E1DF;*/ /*}*/ /*[data-form-validate] .radiocheck-field input:focus-visible:checked ~ .radiocheck-custom,*/ /*[data-form-validate] .radiocheck-field input:checked ~ .radiocheck-custom {*/ /* background-color: #131313;*/ /* color: #EFEEEC;*/ /*}*/ [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: #131313; } /* Field: Select */ [data-form-validate] select:has(option[value=""]:checked) { color: rgba(19, 19, 19, 0.3); } /* ------------------------------------------------------------------------------------------------------------------------------------------ TESTIMONIAL CARDS ------------------------------------------------------------------------------------------------------------------------------------------*/ .stack-cards__card { transition: box-shadow 0.25s cubic-bezier(0.625, 0.05, 0, 1); /*box-shadow: 0em 0.5em 0em 0em rgba(0, 0, 0, 0);*/ } .stack-cards__item.is--active .stack-cards__card, .stack-cards__item.is--second .stack-cards__card { /*box-shadow: 0em 0.5em 0em 0em rgba(0, 0, 0, 0.15);*/ } /* Rotate the first two cards in the Webflow editor */ :is(.wf-design-mode, .w-editor) [data-stacked-cards-item]:nth-child(1) { transform: rotate(1deg); z-index: 3; } :is(.wf-design-mode, .w-editor) [data-stacked-cards-item]:nth-child(2) { transform: rotate(-1deg); z-index: 2; } /* ------------------------------------------------------------------------------------------------------------------------------------------ MENU ------------------------------------------------------------------------------------------------------------------------------------------*/ .navigation__dark-bg { transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1); } [data-navigation-status="active"] .navigation__dark-bg { opacity: 0.33; visibility: visible; } /* Nav Group BG */ .hamburger-nav__bg { transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1); } [data-navigation-status="active"] .hamburger-nav__bg { width: 100%; height: 100%; } /* Nav Group */ .hamburger-nav__group { transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1), transform 0.7s cubic-bezier(0.5, 0.5, 0, 1); transform: scale(0.15) rotate(0.001deg); opacity: 0; visibility: hidden; } [data-navigation-status="active"] .hamburger-nav__group { transform: scale(1) rotate(0.001deg); opacity: 1; visibility: visible; } /* Active Link */ .hamburger-nav__a[aria-current] .hamburger-nav__p { opacity: 0.33; } /* Active Indicator */ .hamburger-nav__a[aria-current] .hamburger-nav__dot { transform: scale(1) rotate(0.001deg); opacity: 1; } .hamburger-nav:has(.hamburger-nav__a:hover) .hamburger-nav__dot { transform: scale(0) rotate(0.001deg); } /* Hamburger Button */ .hamburger-nav__toggle { transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1); transform: translate(0em, 0em) rotate(0.001deg); } [data-navigation-status="active"] .hamburger-nav__toggle { transform: translate(-1em, 1em) rotate(0.001deg); } .hamburger-nav__toggle .hamburger-nav__toggle-bar { transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1); transform: translateY(-0.15em) rotate(0.001deg); } .hamburger-nav__toggle:hover .hamburger-nav__toggle-bar { transform: translateY(0.15em) rotate(0.001deg); } [data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar { transform: translateY(0em) rotate(45deg); } .hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) { transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1); transform: translateY(0.15em) rotate(0.001deg); } .hamburger-nav__toggle:hover .hamburger-nav__toggle-bar:nth-child(2) { transform: translateY(-0.15em) rotate(0.001deg); } [data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) { transform: translateY(0em) rotate(-45deg); } /* ------------------------------------------------------------------------------------------------------------------------------------------ Hover on video cards ------------------------------------------------------------------------------------------------------------------------------------------*/ /* ———— If video is active and hovered, set it to opacity 1 ———— */ [data-video-on-hover="active"] video { opacity: 1; } /* ==================================================================== Modal styles ==================================================================== */ [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; } /* ==================================================================== Service cards ==================================================================== */ /* smooth transitions on the button and SVG */ .feature__container .icon-button { transition: background-color 0.3s ease; } .feature__container .icon-s { transform-origin: center; transition: transform 1.2s cubic-bezier(.19, 1, .22, 1); transform: rotate(0deg); } /* hover state — change the button color and spin the SVG */ .feature__container:hover .icon-button { background-color: #af8257; } .feature__container:hover .icon-s { transform: rotate(360deg); } /* ==================================================================== Partner labels ==================================================================== */ .knx:hover .partner-learn-more, .control4:hover .partner-learn-more { opacity: 1; transform: translateY(0); } /* ==================================================================== AUTO TABS ==================================================================== */ /* Fade the links that are not active */ .tab-content__bottom:has(.tab-content__item.active) .tab-content__item:not(.active) { opacity: 0.5; } @media (hover:hover) and (pointer:fine) { .tab-content__item:not(.active):hover .tab-content__item-bottom { background-color: rgba(0, 0, 0, 0.75); } .tab-content__item:not(.active):hover .content-item__nr { transform: translate(25%, 0px); } } /* ==================================================================== Team section ==================================================================== */ /* Desktop only - initial state */ @media (min-width: 1280px) { .team__person .team-person__linkedin { transform: translateY(-3.7em); opacity: 0; transition: transform 1600ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; } /* hover state */ .team__person:hover .team-person__linkedin { transform: translateY(0em); opacity: 1; } } /* Mobile/Tablet - always visible */ @media (max-width: 1279px) { .team__person .team-person__linkedin { transform: translateY(0em); opacity: 1; } } /* Accessibility - applies to all devices */ @media (prefers-reduced-motion: reduce) { .team__person .team-person__linkedin { transition-duration: 0.01ms; } }