@charset "utf-8"; /* ============================================================ FUNZIONALITA.BUNDLE.CSS Netcoming Theme V4 — Bundle dei CSS "sempre presenti" Unisce: to-top.css + custom-cursor.css + progress-bar.css + visual-dark.css + aos-animations.css + click-to-chat.css + slider.css Caricamento: preload nel (non più on-demand da main.js) ============================================================ */ /* ********** TO TOP ********** */ #toTop { opacity: 0; text-decoration: none; position: fixed; bottom: 20px; right: 20px; overflow: hidden; width: 52px; height: 52px; line-height: 45px; border: none; border-radius: 0px; transition: 0.2s ease-out; outline: none; background: #2B324B; z-index: 99992; color: #ffffff; cursor: pointer; } #toTop:before { font-family: "bootstrap-icons"; font-weight: 900; font-size: 20px; content: "\F286"; color: #ffffff; position: relative; display: block; text-align: center; line-height: 50px; } #toTop:hover { background: #333333; transition: 0.2s ease-out; } #toTop:hover:before { color: #ffffff; } #toTop:active, #toTop:focus { outline: none; } #toTop.show{ opacity: 1; } #toTop.hide{ opacity: 0; } /* ********** CUSTOM CURSOR ********** */ .cursor-dot-outline { pointer-events: none; position: fixed; top: 0; left: 0; border-radius: 50%; transition: opacity 0.4s , transform 0.4s , background-color 0.4s ; z-index: 999999; width: 10px; height: 10px; opacity: 0; background-color: var(--color-dark, #033d56); } @media only screen and (max-width: 991px) { .cursor-dot-outline { display: none; } } /* ********** PROGRESS BAR ********** */ .progress-bar-wrap { position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 999999999999999999; } .progress-bar1 { position: relative; height: 100%; width: 0%; z-index: 2; top: 0; left: 0px; transition: all .2s ease-in-out; background: var(--color-secondary, #2C65AE); } /* ********** DARK MODE ********** */ .dark.page-template-home-page:not(.is-mobile) #moon-svg, .dark.page-template-home-page:not(.is-mobile) #sun-svg { fill: #e0e0e0 !important; } .dark { background-color: #15171b; color: #e5eef5; } .dark .claim-container{ color: #fff; } .dark .claim-container .stroke{ -webkit-text-stroke-color: #ffffff; } .dark .figure-video{ background-color: #15171b; } .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark .sec-title h1, .dark .sec-title h2, .dark .sec-title h3, .dark .sec-title h4, .dark .sec-title h5, .dark .sec-title h6{ color: #c3e5ff } .dark a{ color: #c9d7e2; } .dark a:hover{ color: #ffffff; } .dark .boxx .boxx--title::after{ background-color: #a7bbc3; } .dark .button-theme { color: #fff; } .dark .--slider--, .dark .--slider-- h4{ color: #2c2e30; } .dark .--slider-container-- .controls div.prev { background-image: url("data:image/svg+xml,%3Csvg width='37' height='24' viewBox='0 0 37 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.1177 0.999536L1.11747 11.9998M1.11747 11.9998L12.1177 23M1.11747 11.9998L35.0586 11.9998' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .dark .--slider-container-- .controls div.next { background-image: url("data:image/svg+xml,%3Csvg width='36' height='24' viewBox='0 0 36 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.9995 23L34.9997 11.9998M34.9997 11.9998L23.9995 0.999537M34.9997 11.9998L1.05859 11.9998' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .dark .swiper-pagination-bullet{ background: #ffffff; opacity: .9; } .dark .swiper-pagination-bullet-active{ background: #081add; } .dark .container-topfooterclaim h4, .dark .container-topfooterclaim h2, .dark .bx h2, .dark .bx a, .dark .bx i, .dark .list-lavori-eseguiti h2, .dark .list-lavori-eseguiti h3, .dark .list-lavori-eseguiti a, .dark .list-lavori-eseguiti a:hover, .dark header a, .dark .--slider-container-- .card .description{ color: #0c1418; } .dark .c-scrollbar_thumb { background-color: #ffffff; } .dark .dropdown-item:hover, .dark .dropdown-item { color: #1d2024; } .dark .dropdown-item.active{ color: #ffffff; } .dark .contact-button:hover { color: #06070a; } .dark .contact-button { color: #ffffff; } .dark .banner-cookie-wrapper h4, .dark .banner-cookie-wrapper h2, .dark .banner-cookie-wrapper a, .dark .banner-cookie-wrapper a:hover{ color: #000; } .dark .page-title, .dark .list-lavori-eseguiti .boxx .boxx--title::after{ background-color: #15171b; } .dark .page-title h1{ color: #c0d5f5; } .dark .page-title .breadcrumb .breadcrumb-item, .dark .page-title .breadcrumb .breadcrumb-item a, .dark label{ color: #cbcbcb; } .dark .page-title .breadcrumb .breadcrumb-item.active, .dark .page-item.active, .dark .button-theme{ color: #ffffff; } .dark .tags ul li a, .dark .page-item .page-link, .dark.is-mobile .night-light-label{ color: #000000 !important; } .dark .title-blue { background-color: #2b2b2b; } .dark .content--promozioni h1, .dark .content--promozioni h2, .dark .content--promozioni h3, .dark .content--promozioni h4, .dark .content--promozioni h5, .dark .content--promozioni h6 .dark .content--promozioni p, .dark .content--promozioni, .dark .contenuto-txt, .dark .sec-promozioni, .dark .--slider-container-- .card .content h4, .dark .cerca-results li a{ color: #000000 } .dark .form-control-line{ border-bottom: 2px solid #fff; background: rgba(255,255,255,0.2); } .dark .form-control-line:focus{ background: rgba(255,255,255,0.4); border-bottom: 2px solid #6995f2; } .dark input[type=checkbox], .dark input[type=radio] { border: 2px solid #000; background: #ffffff; } .dark label:hover input[type=checkbox], .dark label:hover input[type=radio] { border-color: #fff; } .dark input[type=checkbox]:checked { background: #fff; border-color: #fff !important; } .dark input[type=checkbox]:checked:before { border-color:#000; } .dark input[type=radio]:checked:before { background-color: #fff; } .dark input[type=checkbox]:disabled, .dark input[type=radio]:disabled, .dark input[type=checkbox]:disabled:hover, .dark input[type=radio]:disabled:hover { background: #898585; border-color: #898585; } @media(max-width:991px){ .dark .claim-container .stroke{ -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: transparent; color: #ffffff; } } .dark .nav-link:hover, .dark .bg--contatti-pos, .dark .bg--contatti-pos h2, .dark .bg--contatti-pos a, .dark .bg--contatti-pos a:hover{ color: #0c1418; } .dark .bg--contatti-pos .button-theme, .dark .bg--contatti-pos .button-theme:hover{ color: #ffffff; } .dark .sec-posiz .table{ color: #e5eef5; } .dark .sec-posiz .table_pos{ color: #333333; } .dark .inner-post-blog-meta { background: #2a2b2c; } .dark #respond, .dark .comment-author{ background: transparent; } .dark .comment-reply-link, .dark .loadingsend .spinner-border, .dark .gm-style-iw-d, .dark .gm-style-iw-d h5{ color: #000; } .dark .configuratore-siti-new .grey, .dark .configuratore-siti-new .opzioni-aggiuntive{ background-color: transparent; } .dark .scroll-loghi-clienti{ background-color: #f7f7f7; } .dark .form-control{ color: #ffffff; } .dark .pagina-base{ color: #e5eef5; } .dark .container-sluggizza{ background-color: #2B2B2B; } .dark .container-sluggizza .box h5{ color: #000; } /* ********** AOS ANIMATIONS ********** */ .topclaim-span.topclaim-anim { opacity: 0; transform: translateY(80px); animation: topclaimIn 0.8s ease-out forwards; animation-delay: var(--delay, 0s); } @keyframes topclaimIn { to { opacity: 1; transform: translateY(0); } } .ingressoTitolo h2, .ingressoTitolo h3 { opacity: 0; transform: translateX(80px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .ingressoTitolo h2.animated, .ingressoTitolo h3.animated { opacity: 1; transform: translateX(0); } .list--boxx .boxx { opacity: 0; transform: translateY(60px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .list--boxx .boxx.boxx-animated { opacity: 1; transform: translateY(0); } .footer .topfooterclaim h2 { opacity: 0; transform: translateY(-60px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .footer .topfooterclaim h2.footer-title-animated { opacity: 1; transform: translateY(0); } .footer .topfooterclaim p { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s; } .footer .topfooterclaim p.footer-claim-animated { opacity: 1; transform: translateY(0); } .footer .line { transform: scaleX(0); transform-origin: left center; transition: transform 0.9s ease-out; } .footer .line.line-animated { transform: scaleX(1); } .social-links:not(.no-animazione) li { opacity: 0; transform: translateY(-30px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .social-links:not(.no-animazione) li.social-animated { opacity: 1; transform: translateY(0); } .section-more-rec { transition: width 0.8s ease-out; } .section-more .section-more-rec.expanded { width: 100%; } .panel { opacity: 0; transition: opacity 0.6s ease-out; } .panel.panel-visible { opacity: 1; } /* ********** CLICK TO CHAT ********** */ .btn-social-chat { width: 80px; height: 80px; position: fixed; right: 20px; bottom:100px; border-radius: 100%; background: #7DA91E; color: #ffffff; text-align: center; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; z-index: 9999; animation: ripple 3s linear infinite; } .btn-social-chat:hover { color: #ffffff; } .btn-social-chat::before, .btn-social-chat::after{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius: 50%; animation: ripple 3s linear infinite 1s; } .btn-social-chat::after { animation: ripple 3s linear infinite 2s; } @-webkit-keyframes ripple { 0% { box-shadow: 0 0 0 .4rem rgba(125,169,30, 0.2); } 100% { box-shadow: 0 0 0 3rem rgba(125,169,30, 0); } } @keyframes ripple { 0% { box-shadow: 0 0 0 .4rem rgba(125,169,30, 0.2); } 100% { box-shadow: 0 0 0 3rem rgba(125,169,30, 0); } } .btn-social-chat i{ display: inline-block; line-height: 1.8; opacity: 1; font-size: 42px; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .btn-social-chat span { display: block; position: absolute; height: 3px; width: 20px; background: #ffffff; border-radius: 9px; opacity: 0; left: 50%; top: 50%; margin-left: -10px; margin-top: 20px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; z-index: 9999999999 } .btn-social-chat span:nth-child(1) { top: 0px; } .btn-social-chat span:nth-child(2),.btn-social-chat span:nth-child(3) { top: 18px; } .btn-social-chat span:nth-child(4) { top: 36px; } .btn-social-chat.open span:nth-child(1) { top: 18px; width: 0%; left: 50%; } .btn-social-chat.open i{ opacity: 0; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .btn-social-chat.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 1; } .btn-social-chat.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 1; } .btn-social-chat.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; } .div-speech-bubble { display: none; position: fixed; z-index: 99999999999; bottom: 160px; right: 20px; background: #ffffff; border-radius: 10px; box-shadow: 0px 0px 20px rgba(0,0,0,0.2); width: 200px; padding: 20px; line-height: 1.2; font-size: 14px } .div-speech-bubble:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 25px solid transparent; border-top-color: #ffffff; border-bottom: 0; border-right: 0; margin-left: -19px; margin-bottom: -23px; } .ul-div-speech-bubble{ margin: 0px; padding: 0px; margin-top: 15px; list-style: none; } .ul-div-speech-bubble li{ margin-bottom: 10px } .ul-div-speech-bubble li .btn-div-speech-bubble{ position: relative; padding-left: 40px; color: #ffffff; padding: 10px 5px 10px 5px; display: block } .ul-div-speech-bubble li .btn-div-speech-bubble img{ position: absolute; width: 30px; height: 30px; left: 5px; top: 5px } .ul-div-speech-bubble li .btn-div-speech-bubble.whatsapp{ background: #4CAF50 } .ul-div-speech-bubble li .btn-div-speech-bubble.facebook{ background: #2196F3 } /* ********** SLIDER ********** */ #panels-evidenza { width: 100%; } .panels-evidenza-swiper { width: 100%; position: relative; } .panels-evidenza-swiper .swiper-slide.panel-slide { display: grid; grid-template-columns: 40% 60%; height: 620px; opacity: 1 !important; transform: translateX(0) !important; } .panel-slide__txt { background-color: var(--color-panel-bg, #1e41ca); color: var(--bianco-paletta, #ffffff); padding: 5% 6%; display: flex; flex-direction: column; justify-content: center; } .panel-slide__txt h2 { color: var(--bianco-paletta, #ffffff); font-weight: 300; margin-bottom: 16px; } .panel-slide__txt h3 { color: var(--bianco-paletta, #ffffff); font-weight: 800; margin-bottom: 30px; } .panel-slide__img { overflow: hidden; } .panel-slide__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .panels-evidenza-controls { display: grid; gap: 2.5rem; grid-template-columns: repeat(2, 1fr); position: absolute; top: -65px; right: calc(2vw + 20px); z-index: 10; } .panels-evidenza-btn { background-position: 50%; background-repeat: no-repeat; background-size: contain; cursor: pointer; height: 2.25rem; width: 2.25rem; user-select: none; } .panels-evidenza-prev { background-image: url("data:image/svg+xml,%3Csvg width='37' height='24' viewBox='0 0 37 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.1177 0.999536L1.11747 11.9998M1.11747 11.9998L12.1177 23M1.11747 11.9998L35.0586 11.9998' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .panels-evidenza-next { background-image: url("data:image/svg+xml,%3Csvg width='36' height='24' viewBox='0 0 36 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.9995 23L34.9997 11.9998M34.9997 11.9998L23.9995 0.999537M34.9997 11.9998L1.05859 11.9998' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .panels-evidenza-pagination { bottom: -50px; padding: 10px; } .panels-evidenza-pagination .swiper-pagination-bullet { width: 22px; height: 22px; } @media (max-width: 1280px) { .panels-evidenza-swiper .swiper-slide.panel-slide { height: 440px; } .panel-slide__txt h2 { font-size: 28px; } .panel-slide__txt h3 { font-size: 20px; } } @media (max-width: 768px) { .panels-evidenza-swiper .swiper-slide.panel-slide { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; } .panel-slide__img { height: 220px; order: -1; } .panel-slide__txt { padding: 8% 6%; } } .--slider-container-- { position: relative; } .--slider-- { width: 100%; padding: 100px 2vw !important; overflow: visible !important; } .--slider-container-- .card{ display: -webkit-box; display: flex; padding: 3rem; background-color: #f2f2f2; border-radius: 2rem; height: 100%; border: none; } .--slider-container-- .card .brand { margin-bottom: 1.5rem; width: 150px; } .--slider-container-- .card .brand img { height: auto; width: 60%; } .--slider-container-- .card .content { height: auto; width: 70%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } .--slider-container-- .card .testimonial { font-size: 20px; margin-bottom: 5rem; line-height: 33px; height: 270px; } .--slider-container-- .card .avatar { border-radius: 50%; height: 3.5rem; margin-bottom: 1.5rem; margin-top: auto; position: relative; width: 3.5rem; } .--slider-container-- .card .avatar img { border-radius: 50%; display: block; height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; } .--slider-container-- .card .name { line-height: 1.4; } .--slider-container-- .card .role { color: #6B6B6B; font-size: .875rem; font-weight: 500; line-height: 1.4; } .--slider-container-- .controls { display: grid; } .--slider-container-- .controls { gap: 2.5rem; grid-template-columns: repeat(2,1fr); position: absolute; top: 50px; right: calc(2vw + 20px); z-index: 50; } .--slider-container-- .controls div { position: relative; z-index: 50; } .--slider-container-- .controls div { background-position: 50%; background-repeat: no-repeat; background-size: contain; cursor: pointer; height: 2.25rem; width: 2.25rem; } .--slider-container-- .controls div.prev { background-image: url("data:image/svg+xml,%3Csvg width='37' height='24' viewBox='0 0 37 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.1177 0.999536L1.11747 11.9998M1.11747 11.9998L12.1177 23M1.11747 11.9998L35.0586 11.9998' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .--slider-container-- .controls div.next { background-image: url("data:image/svg+xml,%3Csvg width='36' height='24' viewBox='0 0 36 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.9995 23L34.9997 11.9998M34.9997 11.9998L23.9995 0.999537M34.9997 11.9998L1.05859 11.9998' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .--slider-container-- .card .content h4{ font-size: 28px; line-height: 30px; } .--slider-container-- .card .description { font-size: 18px; min-height: 140px; line-height: 25px; } .--slider-- .swiper-pagination-bullet{ width: 22px; height: 22px; } .--slider-- .swiper-pagination{ bottom: -50px; padding: 10px; } @media(max-width:780px){ .--slider-container-- .card .testimonial { font-size: 20px; margin-bottom: 5rem; line-height: 25px; height: auto; } .--slider-container-- .card .content { width: 90%; } .--slider-- .swiper-pagination{ bottom: 0px; } } .swiper-wrapper1 { -webkit-transition-timing-function: linear !important; -o-transition-timing-function: linear !important; transition-timing-function: linear !important; } .thumbnail-lavori-big, .slider-big{ max-height: 850px; overflow: hidden; } .thumbnail-lavori-big img{ object-fit: cover; width: 100%; max-height: 850px; } .slider-big .swiper-button-next, .slider-big .swiper-button-prev{ color: #06070a; } .slider-big { aspect-ratio: 16 / 9; } .slider-big .swiper-wrapper { align-items: stretch; } .slider-big .swiper-slide { height: auto; overflow: hidden; } .slider-big .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .slider-big .swiper-slide .slide-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }