.elementor-1390 .elementor-element.elementor-element-7be1a62{--display:flex;--min-height:65vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--overlay-opacity:0.65;--padding-top:140px;--padding-bottom:100px;--padding-left:40px;--padding-right:40px;}.elementor-1390 .elementor-element.elementor-element-7be1a62:not(.elementor-motion-effects-element-type-background), .elementor-1390 .elementor-element.elementor-element-7be1a62 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/549fe4e1-58be-4873-8300-397534d6f432.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1390 .elementor-element.elementor-element-7be1a62::before, .elementor-1390 .elementor-element.elementor-element-7be1a62 > .elementor-background-video-container::before, .elementor-1390 .elementor-element.elementor-element-7be1a62 > .e-con-inner > .elementor-background-video-container::before, .elementor-1390 .elementor-element.elementor-element-7be1a62 > .elementor-background-slideshow::before, .elementor-1390 .elementor-element.elementor-element-7be1a62 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1390 .elementor-element.elementor-element-7be1a62 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, var( --e-global-color-astglobalcolor2 ) 0%, var( --e-global-color-astglobalcolor2 ) 100%);}.elementor-1390 .elementor-element.elementor-element-e8fc76d > .elementor-widget-container{margin:0px 0px 10px 0px;}.elementor-1390 .elementor-element.elementor-element-e8fc76d .elementor-heading-title{color:var( --e-global-color-astglobalcolor5 );}.elementor-1390 .elementor-element.elementor-element-1bb0b14 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0% 45% 0% 0%;}.elementor-1390 .elementor-element.elementor-element-1bb0b14{color:var( --e-global-color-astglobalcolor5 );}.elementor-1390 .elementor-element.elementor-element-e38dc2e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1390 .elementor-element.elementor-global-1344{--e-image-carousel-slides-to-show:7;}.elementor-1390 .elementor-element.elementor-element-be76b10{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--gap:35px 35px;--row-gap:35px;--column-gap:35px;--grid-auto-flow:row;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:0px;--padding-left:25px;--padding-right:25px;}.elementor-1390 .elementor-element.elementor-element-ac581df .elementor-flip-box__front{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/Campania-ink-brandz-1.png");background-position:-800px -224px;background-size:auto;}.elementor-1390 .elementor-element.elementor-element-ac581df .elementor-flip-box__back{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/Campania-ink-brandz-2-1024x683.png");}.elementor-1390 .elementor-element.elementor-element-ac581df .elementor-flip-box{height:360px;}.elementor-1390 .elementor-element.elementor-element-ac581df .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1390 .elementor-element.elementor-element-ac581df .elementor-icon i{transform:rotate(0deg);}.elementor-1390 .elementor-element.elementor-element-ac581df .elementor-icon svg{transform:rotate(0deg);}.elementor-1390 .elementor-element.elementor-element-ac581df .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1390 .elementor-element.elementor-element-ac581df .elementor-flip-box__button{margin-inline-center:0;}.elementor-1390 .elementor-element.elementor-element-6d99c37 .elementor-flip-box__front{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/Abruzzo-ink-brandz-2.png");}.elementor-1390 .elementor-element.elementor-element-6d99c37 .elementor-flip-box__back{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/Abruzzo-ink-brandz-1.png");}.elementor-1390 .elementor-element.elementor-element-6d99c37 .elementor-flip-box{height:360px;}.elementor-1390 .elementor-element.elementor-element-6d99c37 .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1390 .elementor-element.elementor-element-6d99c37 .elementor-icon i{transform:rotate(0deg);}.elementor-1390 .elementor-element.elementor-element-6d99c37 .elementor-icon svg{transform:rotate(0deg);}.elementor-1390 .elementor-element.elementor-element-6d99c37 .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1390 .elementor-element.elementor-element-6d99c37 .elementor-flip-box__button{margin-inline-center:0;}.elementor-1390 .elementor-element.elementor-element-2bf54a3 .elementor-flip-box__front{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/INK-BRANDZ-REGIONI-3.png");}.elementor-1390 .elementor-element.elementor-element-2bf54a3 .elementor-flip-box__back{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/INK-BRANDZ-REGIONI-5.png");}.elementor-1390 .elementor-element.elementor-element-2bf54a3 .elementor-flip-box{height:360px;}.elementor-1390 .elementor-element.elementor-element-2bf54a3 .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1390 .elementor-element.elementor-element-2bf54a3 .elementor-icon i{transform:rotate(0deg);}.elementor-1390 .elementor-element.elementor-element-2bf54a3 .elementor-icon svg{transform:rotate(0deg);}.elementor-1390 .elementor-element.elementor-element-2bf54a3 .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1390 .elementor-element.elementor-element-2bf54a3 .elementor-flip-box__button{margin-inline-center:0;}.elementor-1390 .elementor-element.elementor-element-f304c71 .elementor-flip-box__front{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/INK-BRANDZ-REGIONI-7.png");}.elementor-1390 .elementor-element.elementor-element-f304c71 .elementor-flip-box__back{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/INK-BRANDZ-REGIONI-1.png");}.elementor-1390 .elementor-element.elementor-element-f304c71 .elementor-flip-box{height:360px;}.elementor-1390 .elementor-element.elementor-element-f304c71 .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1390 .elementor-element.elementor-element-f304c71 .elementor-icon i{transform:rotate(0deg);}.elementor-1390 .elementor-element.elementor-element-f304c71 .elementor-icon svg{transform:rotate(0deg);}.elementor-1390 .elementor-element.elementor-element-f304c71 .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1390 .elementor-element.elementor-element-f304c71 .elementor-flip-box__button{margin-inline-center:0;}.elementor-1390 .elementor-element.elementor-element-20fa680 .elementor-flip-box__front{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/INK-BRANDZ-REGIONI-4.png");}.elementor-1390 .elementor-element.elementor-element-20fa680 .elementor-flip-box__back{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/INK-BRANDZ-REGIONI-6.png");}.elementor-1390 .elementor-element.elementor-element-20fa680 .elementor-flip-box{height:360px;}.elementor-1390 .elementor-element.elementor-element-20fa680 .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1390 .elementor-element.elementor-element-20fa680 .elementor-icon i{transform:rotate(0deg);}.elementor-1390 .elementor-element.elementor-element-20fa680 .elementor-icon svg{transform:rotate(0deg);}.elementor-1390 .elementor-element.elementor-element-20fa680 .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1390 .elementor-element.elementor-element-20fa680 .elementor-flip-box__button{margin-inline-center:0;}.elementor-1390 .elementor-element.elementor-element-3668f30 .elementor-flip-box__front{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/INK-BRANDZ-REGIONI-2.png");}.elementor-1390 .elementor-element.elementor-element-3668f30 .elementor-flip-box__back{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/INK-BRANDZ-REGIONI-8.png");}.elementor-1390 .elementor-element.elementor-element-3668f30 .elementor-flip-box{height:360px;}.elementor-1390 .elementor-element.elementor-element-3668f30 .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1390 .elementor-element.elementor-element-3668f30 .elementor-icon i{transform:rotate(0deg);}.elementor-1390 .elementor-element.elementor-element-3668f30 .elementor-icon svg{transform:rotate(0deg);}.elementor-1390 .elementor-element.elementor-element-3668f30 .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1390 .elementor-element.elementor-element-3668f30 .elementor-flip-box__button{margin-inline-center:0;}.elementor-1390 .elementor-element.elementor-element-59e5d9f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:75px;--padding-bottom:25px;--padding-left:25px;--padding-right:25px;}.elementor-1390 .elementor-element.elementor-element-d6d434d .elementor-flip-box__front{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/INK-BRANDZ-REGIONI-9.png");}.elementor-1390 .elementor-element.elementor-element-d6d434d .elementor-flip-box__back{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/INK-BRANDZ-REGIONI-10.png");}.elementor-1390 .elementor-element.elementor-element-d6d434d > .elementor-widget-container{margin:4px 0px 0px 0px;}.elementor-1390 .elementor-element.elementor-element-d6d434d .elementor-flip-box{height:360px;}.elementor-1390 .elementor-element.elementor-element-d6d434d .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1390 .elementor-element.elementor-element-d6d434d .elementor-icon i{transform:rotate(0deg);}.elementor-1390 .elementor-element.elementor-element-d6d434d .elementor-icon svg{transform:rotate(0deg);}.elementor-1390 .elementor-element.elementor-element-d6d434d .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1390 .elementor-element.elementor-element-d6d434d .elementor-flip-box__button{margin-inline-center:0;}.elementor-1390 .elementor-element.elementor-element-11e231e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1390 .elementor-element.elementor-element-92b79f3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1390 .elementor-element.elementor-element-7258b2c5{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-end;--overlay-opacity:0.24;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:120px;--padding-bottom:120px;--padding-left:40px;--padding-right:40px;}.elementor-1390 .elementor-element.elementor-element-7258b2c5:not(.elementor-motion-effects-element-type-background), .elementor-1390 .elementor-element.elementor-element-7258b2c5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.inkbrandz.com/wp-content/uploads/2026/07/VIgneto-Ink-Brandz.png");background-position:bottom center;background-repeat:no-repeat;background-size:cover;}.elementor-1390 .elementor-element.elementor-element-7258b2c5::before, .elementor-1390 .elementor-element.elementor-element-7258b2c5 > .elementor-background-video-container::before, .elementor-1390 .elementor-element.elementor-element-7258b2c5 > .e-con-inner > .elementor-background-video-container::before, .elementor-1390 .elementor-element.elementor-element-7258b2c5 > .elementor-background-slideshow::before, .elementor-1390 .elementor-element.elementor-element-7258b2c5 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1390 .elementor-element.elementor-element-7258b2c5 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(184deg, var( --e-global-color-astglobalcolor2 ) 74%, var( --e-global-color-astglobalcolor2 ) 47%);}.elementor-1390 .elementor-element.elementor-element-6d20d758{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1390 .elementor-element.elementor-element-59cc8e97 .elementor-heading-title{color:var( --e-global-color-astglobalcolor0 );}.elementor-1390 .elementor-element.elementor-element-20c18bc3{text-shadow:0px 0px 100px rgba(0,0,0,0.3);color:var( --e-global-color-astglobalcolor5 );}.elementor-1390 .elementor-element.elementor-element-4ec6fb01 > .elementor-widget-container{margin:20px 0px 0px 0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-1390 .elementor-element.elementor-element-7be1a62{--padding-top:100px;--padding-bottom:100px;--padding-left:32px;--padding-right:32px;}.elementor-1390 .elementor-element.elementor-element-1bb0b14 > .elementor-widget-container{padding:0% 20% 0% 0%;}.elementor-1390 .elementor-element.elementor-element-be76b10{--grid-auto-flow:row;}.elementor-1390 .elementor-element.elementor-element-ac581df .elementor-flip-box__front{background-position:0px 0px;}.elementor-1390 .elementor-element.elementor-element-7258b2c5{--padding-top:80px;--padding-bottom:80px;--padding-left:32px;--padding-right:32px;}.elementor-1390 .elementor-element.elementor-element-4ec6fb01 > .elementor-widget-container{margin:10px 0px 0px 0px;}}@media(min-width:768px){.elementor-1390 .elementor-element.elementor-element-7be1a62{--content-width:1200px;}.elementor-1390 .elementor-element.elementor-element-7258b2c5{--content-width:1200px;}.elementor-1390 .elementor-element.elementor-element-6d20d758{--width:50%;}}@media(max-width:767px){.elementor-1390 .elementor-element.elementor-element-7be1a62{--min-height:1vh;--gap:12px 0px;--row-gap:12px;--column-gap:0px;--padding-top:120px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}.elementor-1390 .elementor-element.elementor-element-1bb0b14 > .elementor-widget-container{padding:0% 0% 0% 0%;}.elementor-1390 .elementor-element.elementor-global-1344{--e-image-carousel-slides-to-show:4;}.elementor-1390 .elementor-element.elementor-element-be76b10{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-1390 .elementor-element.elementor-element-ac581df .elementor-flip-box__front{background-position:0px 0px;}.elementor-1390 .elementor-element.elementor-element-11e231e{--margin-top:0px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;}.elementor-1390 .elementor-element.elementor-element-7258b2c5{--gap:15px 0px;--row-gap:15px;--column-gap:0px;--padding-top:64px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}.elementor-1390 .elementor-element.elementor-element-4ec6fb01 > .elementor-widget-container{margin:12px 0px 0px 0px;}}/* Start custom CSS for heading, class: .elementor-element-e8fc76d */.elementor-1390 .elementor-element.elementor-element-e8fc76d .elementor-heading-title{ background:linear-gradient( 90deg, #ff1f2d, #ff6b2d, #ffc400, #38c95a, #27c7df, #8f4ccf); background-size:250%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:gradientMove 7s linear infinite; font-weight:700; } @keyframes gradientMove{ 0%{ background-position:0%; } 100%{ background-position:250%; } }/* End custom CSS */ /* Start custom CSS for global, class: .elementor-global-1344 */.elementor-1390 .elementor-element.elementor-global-1344{ overflow:visible; } /* spazio del carosello */ .elementor-1390 .elementor-element.elementor-global-1344 .swiper{ padding:30px 55px; } /* ----------------------------- LOGHI ------------------------------*/ .elementor-1390 .elementor-element.elementor-global-1344 img{ max-height:90px; width:auto; object-fit:contain; transition:.35s cubic-bezier(.22,.8,.22,1); opacity:.92; filter: drop-shadow(0 6px 10px rgba(0,0,0,.04)); } .elementor-1390 .elementor-element.elementor-global-1344 .swiper-slide{ transition:.35s ease; } .elementor-1390 .elementor-element.elementor-global-1344 .swiper-slide:hover img{ transform: translateY(-3px) scale(1.04); opacity:1; filter: drop-shadow(0 12px 18px rgba(0,0,0,.10)); } /* ----------------------------- FRECCE ------------------------------*/ .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: linear-gradient( 135deg, #ff1f2d, #ff6b2d, #ffc400, #38c95a, #27c7df, #8f4ccf ); border:1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 28px rgba(0,0,0,.16); transition:.25s cubic-bezier(.22,.8,.22,1); z-index:20; } .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button i, .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button svg{ color:#fff !important; fill:#fff !important; font-size:15px; width:15px; height:15px; } /* mini zoom */ .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button:hover{ transform:scale(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 16px 34px rgba(0,0,0,.18); } .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button:active{ transform:scale(.97); } /* posizione */ .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button-prev{ left:0; } .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button-next{ right:0; } /* ----------------------------- PAGINATION ------------------------------*/ .elementor-1390 .elementor-element.elementor-global-1344 .swiper-pagination-bullet{ width:8px; height:8px; opacity:.35; background:#C9A227; } .elementor-1390 .elementor-element.elementor-global-1344 .swiper-pagination-bullet-active{ width:26px; border-radius:999px; opacity:1; background: linear-gradient( 90deg, #ff1f2d, #ffc400, #27c7df ); } /* ----------------------------- MOBILE ------------------------------*/ @media(max-width:767px){ .elementor-1390 .elementor-element.elementor-global-1344 .swiper{ padding:22px 42px; } .elementor-1390 .elementor-element.elementor-global-1344 img{ max-height:62px; } .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button{ width:36px; height:36px; } .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button i, .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button svg{ font-size:12px; width:12px; height:12px; } .elementor-1390 .elementor-element.elementor-global-1344 .swiper-pagination-bullet{ width:6px; height:6px; } .elementor-1390 .elementor-element.elementor-global-1344 .swiper-pagination-bullet-active{ width:20px; } }/* End custom CSS */ /* Start custom CSS for flip-box, class: .elementor-element-ac581df *//* ========================================================= INK BRANDZ — REGION FLIP BOX DEFINITIVO Classe widget: ink-region-card Immagini consigliate: 1600 × 1200 px Formato fisso desktop, tablet e mobile: 4:3 ========================================================= */ /* --------------------------------------------------------- 1. STRUTTURA GENERALE DELLA CARD --------------------------------------------------------- */ .ink-region-card { width: 100%; } .ink-region-card .elementor-widget-container { width: 100%; height: 100%; } .ink-region-card .elementor-flip-box { position: relative; width: 100%; height: auto !important; aspect-ratio: 4 / 3; min-height: 0 !important; overflow: hidden; /* Niente riquadri e niente angoli arrotondati */ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #111318; isolation: isolate; } /* Tutti i livelli devono occupare la stessa dimensione */ .ink-region-card .elementor-flip-box__layer, .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; } /* --------------------------------------------------------- 2. IMMAGINI DI SFONDO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { background-repeat: no-repeat !important; background-size: cover !important; background-position: center center !important; } /* Il retro deve mostrare chiaramente la mappa. Nessun colore pieno sopra l’immagine. */ .ink-region-card .elementor-flip-box__back { background-color: #101217 !important; } /* --------------------------------------------------------- 3. ELIMINAZIONE COMPLETA DEI RIQUADRI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front::after, .ink-region-card .elementor-flip-box__back::after { content: none !important; display: none !important; } .ink-region-card .elementor-flip-box__layer::after, .ink-region-card .elementor-flip-box__layer::before { border: 0 !important; box-shadow: none !important; } /* --------------------------------------------------------- 4. OVERLAY DEL FRONTE Serve esclusivamente a leggere bene il testo. Non copre tutta la fotografia. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(7, 9, 13, 0.01) 0%, rgba(7, 9, 13, 0.02) 38%, rgba(7, 9, 13, 0.16) 58%, rgba(7, 9, 13, 0.56) 79%, rgba(7, 9, 13, 0.86) 100% ); } /* --------------------------------------------------------- 5. OVERLAY DEL RETRO Molto leggero: la mappa deve restare visibile. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__back::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(7, 9, 13, 0.00) 0%, rgba(7, 9, 13, 0.02) 45%, rgba(7, 9, 13, 0.25) 72%, rgba(7, 9, 13, 0.72) 100% ); } /* --------------------------------------------------------- 6. CONTENUTO FRONTE E RETRO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__overlay { position: relative; z-index: 3; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; width: 100%; height: 100%; padding: 32px !important; text-align: left !important; } /* --------------------------------------------------------- 7. RIMOZIONE ICONA / STELLA --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__inner > .elementor-icon-wrapper, .ink-region-card .elementor-flip-box__layer__inner > .elementor-flip-box__image, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-default, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-stacked, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-framed { display: none !important; } /* --------------------------------------------------------- 8. CONTENITORE INTERNO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 100%; margin: 0; padding: 0; text-align: left; } /* --------------------------------------------------------- 9. TITOLI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__title { width: 100%; margin: 0 !important; padding: 0 !important; font-family: "Cormorant Garamond", serif !important; font-size: clamp(36px, 3.3vw, 50px) !important; font-weight: 500 !important; line-height: 0.96 !important; letter-spacing: -0.02em !important; color: #ffffff !important; text-align: left !important; text-transform: none !important; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.38); } /* Il titolo del retro leggermente più piccolo */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__title { font-size: clamp(34px, 3vw, 46px) !important; } /* --------------------------------------------------------- 10. DESCRIZIONE FRONTE --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front .elementor-flip-box__layer__description { width: auto; max-width: 90%; margin: 11px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: 0.17em !important; color: rgba(255, 255, 255, 0.80) !important; text-transform: uppercase !important; text-align: left !important; } /* --------------------------------------------------------- 11. DESCRIZIONE RETRO Testo normale, senza pill e senza rettangolone. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__description { display: block !important; width: auto !important; max-width: 410px; margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: 0.02em !important; color: rgba(255, 255, 255, 0.76) !important; text-transform: none !important; text-align: left !important; transform: none !important; } /* --------------------------------------------------------- 12. LINK CLICCABILE DEL RETRO Utilizziamo il pulsante nativo Elementor, ma graficamente sembra un semplice link editoriale. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__button { position: relative; display: inline-flex !important; align-items: center; justify-content: flex-start; gap: 9px; width: auto !important; min-width: 0 !important; margin: 20px 0 0 !important; padding: 0 0 7px !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.62) !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.16em !important; color: #ffffff !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer; pointer-events: auto; transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important; } /* Freccia inserita via CSS */ .ink-region-card .elementor-flip-box__button::after { content: "↗"; display: inline-block; margin-left: 3px; font-family: Arial, sans-serif; font-size: 15px; font-weight: 300; line-height: 0.8; transition: transform 0.3s ease; } /* Piccolo accento multicolore Ink Brandz */ .ink-region-card .elementor-flip-box__button::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 2px; background: linear-gradient( 90deg, #ff7043 0%, #ff3e75 30%, #a847ef 62%, #26bde2 100% ); transition: width 0.3s ease; } /* Hover del link */ .ink-region-card .elementor-flip-box__button:hover, .ink-region-card .elementor-flip-box__button:focus { color: #ffffff !important; border-bottom-color: transparent !important; background: transparent !important; transform: translateX(3px); } .ink-region-card .elementor-flip-box__button:hover::before, .ink-region-card .elementor-flip-box__button:focus::before { width: 32px; } .ink-region-card .elementor-flip-box__button:hover::after, .ink-region-card .elementor-flip-box__button:focus::after { transform: translate(3px, -3px); } /* --------------------------------------------------------- 13. CORREZIONE TESTI CAPOVOLTI E SPECCHIATI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } .ink-region-card .elementor-flip-box__layer__overlay, .ink-region-card .elementor-flip-box__layer__inner, .ink-region-card .elementor-flip-box__layer__title, .ink-region-card .elementor-flip-box__layer__description, .ink-region-card .elementor-flip-box__button { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; transform-style: flat !important; } /* --------------------------------------------------------- 14. TRANSIZIONE MORBIDA Funziona meglio impostando “Fade” in Elementor. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer { transition: opacity 0.65s cubic-bezier(.22, .61, .36, 1), transform 0.65s cubic-bezier(.22, .61, .36, 1) !important; } /* --------------------------------------------------------- 15. LEGGERO MOVIMENTO DELLA FOTO SUL FRONTE --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front { transform-origin: center center; } /* --------------------------------------------------------- 16. MOBILE Stessa proporzione 4:3 del desktop. Primo tocco: mostra il retro. Secondo tocco sul link: apre la pagina. --------------------------------------------------------- */ @media (max-width: 767px) { .ink-region-card .elementor-flip-box { width: 100%; aspect-ratio: 4 / 3; height: auto !important; } .ink-region-card .elementor-flip-box__layer__overlay { padding: 23px !important; } .ink-region-card .elementor-flip-box__layer__title { font-size: 38px !important; } .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__title { font-size: 35px !important; } .ink-region-card .elementor-flip-box__front .elementor-flip-box__layer__description { max-width: 100%; font-size: 9px !important; letter-spacing: 0.14em !important; } .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__description { max-width: 90%; font-size: 11px !important; line-height: 1.45 !important; } .ink-region-card .elementor-flip-box__button { margin-top: 16px !important; font-size: 9px !important; } } /* --------------------------------------------------------- 17. TABLET --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { .ink-region-card .elementor-flip-box { aspect-ratio: 4 / 3; height: auto !important; } .ink-region-card .elementor-flip-box__layer__overlay { padding: 27px !important; } .ink-region-card .elementor-flip-box__layer__title { font-size: 41px !important; } } /* --------------------------------------------------------- 18. ACCESSIBILITÀ --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__button:focus-visible { outline: 2px solid #36b8ff !important; outline-offset: 5px; } /* Riduce le animazioni per chi le ha disattivate */ @media (prefers-reduced-motion: reduce) { .ink-region-card *, .ink-region-card *::before, .ink-region-card *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================= CORREZIONE EFFETTO FADE Evita la sovrapposizione tra fronte e retro ========================================================= */ /* Stato iniziale */ .ink-region-card .elementor-flip-box__front { opacity: 1 !important; visibility: visible !important; pointer-events: auto; z-index: 2 !important; transform: none !important; transition: opacity 0.55s ease, visibility 0s linear 0s !important; } .ink-region-card .elementor-flip-box__back { opacity: 0 !important; visibility: hidden !important; pointer-events: none; z-index: 3 !important; transform: none !important; transition: opacity 0.55s ease, visibility 0s linear 0.55s !important; } /* Nasconde anche tutto il contenuto interno del retro */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 0 !important; transform: translateY(10px) !important; transition: opacity 0.4s ease, transform 0.55s ease !important; } /* ========================================================= PASSAGGIO MOUSE DESKTOP ========================================================= */ .ink-region-card:hover .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; transition: opacity 0.55s ease, visibility 0s linear 0.55s !important; } .ink-region-card:hover .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; transition: opacity 0.55s ease, visibility 0s linear 0s !important; } /* Il contenuto del fronte sparisce completamente */ .ink-region-card:hover .elementor-flip-box__front .elementor-flip-box__layer__inner { opacity: 0 !important; visibility: hidden !important; } /* Il contenuto del retro appare leggermente dopo la mappa */ .ink-region-card:hover .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; transition-delay: 0.12s !important; } /* ========================================================= FOCUS — utile per tastiera e alcuni dispositivi touch ========================================================= */ .ink-region-card:focus-within .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; } .ink-region-card:focus-within .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; } .ink-region-card:focus-within .elementor-flip-box__front .elementor-flip-box__layer__inner { opacity: 0 !important; visibility: hidden !important; } .ink-region-card:focus-within .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* ========================================================= CORREZIONE SPECIFICA PER L'EFFETTO FADE DI ELEMENTOR ========================================================= */ .ink-region-card .elementor-flip-box--effect-fade .elementor-flip-box__front, .ink-region-card .elementor-flip-box--effect-fade .elementor-flip-box__back { transform: none !important; backface-visibility: visible !important; } /* Elementor a volte lascia il contenuto frontale sopra al retro */ .ink-region-card:hover .elementor-flip-box--effect-fade .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; z-index: 1 !important; } .ink-region-card:hover .elementor-flip-box--effect-fade .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; z-index: 4 !important; } /* ========================================================= MOBILE Elementor gestisce il primo tocco come stato hover/focus ========================================================= */ @media (max-width: 767px) { .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { transform: none !important; } .ink-region-card:hover .elementor-flip-box__front, .ink-region-card:focus-within .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; } .ink-region-card:hover .elementor-flip-box__back, .ink-region-card:focus-within .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; } }/* End custom CSS */ /* Start custom CSS for flip-box, class: .elementor-element-6d99c37 *//* ========================================================= INK BRANDZ — REGION FLIP BOX DEFINITIVO Classe widget: ink-region-card Immagini consigliate: 1600 × 1200 px Formato fisso desktop, tablet e mobile: 4:3 ========================================================= */ /* --------------------------------------------------------- 1. STRUTTURA GENERALE DELLA CARD --------------------------------------------------------- */ .ink-region-card { width: 100%; } .ink-region-card .elementor-widget-container { width: 100%; height: 100%; } .ink-region-card .elementor-flip-box { position: relative; width: 100%; height: auto !important; aspect-ratio: 4 / 3; min-height: 0 !important; overflow: hidden; /* Niente riquadri e niente angoli arrotondati */ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #111318; isolation: isolate; } /* Tutti i livelli devono occupare la stessa dimensione */ .ink-region-card .elementor-flip-box__layer, .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; } /* --------------------------------------------------------- 2. IMMAGINI DI SFONDO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { background-repeat: no-repeat !important; background-size: cover !important; background-position: center center !important; } /* Il retro deve mostrare chiaramente la mappa. Nessun colore pieno sopra l’immagine. */ .ink-region-card .elementor-flip-box__back { background-color: #101217 !important; } /* --------------------------------------------------------- 3. ELIMINAZIONE COMPLETA DEI RIQUADRI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front::after, .ink-region-card .elementor-flip-box__back::after { content: none !important; display: none !important; } .ink-region-card .elementor-flip-box__layer::after, .ink-region-card .elementor-flip-box__layer::before { border: 0 !important; box-shadow: none !important; } /* --------------------------------------------------------- 4. OVERLAY DEL FRONTE Serve esclusivamente a leggere bene il testo. Non copre tutta la fotografia. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(7, 9, 13, 0.01) 0%, rgba(7, 9, 13, 0.02) 38%, rgba(7, 9, 13, 0.16) 58%, rgba(7, 9, 13, 0.56) 79%, rgba(7, 9, 13, 0.86) 100% ); } /* --------------------------------------------------------- 5. OVERLAY DEL RETRO Molto leggero: la mappa deve restare visibile. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__back::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(7, 9, 13, 0.00) 0%, rgba(7, 9, 13, 0.02) 45%, rgba(7, 9, 13, 0.25) 72%, rgba(7, 9, 13, 0.72) 100% ); } /* --------------------------------------------------------- 6. CONTENUTO FRONTE E RETRO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__overlay { position: relative; z-index: 3; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; width: 100%; height: 100%; padding: 32px !important; text-align: left !important; } /* --------------------------------------------------------- 7. RIMOZIONE ICONA / STELLA --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__inner > .elementor-icon-wrapper, .ink-region-card .elementor-flip-box__layer__inner > .elementor-flip-box__image, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-default, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-stacked, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-framed { display: none !important; } /* --------------------------------------------------------- 8. CONTENITORE INTERNO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 100%; margin: 0; padding: 0; text-align: left; } /* --------------------------------------------------------- 9. TITOLI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__title { width: 100%; margin: 0 !important; padding: 0 !important; font-family: "Cormorant Garamond", serif !important; font-size: clamp(36px, 3.3vw, 50px) !important; font-weight: 500 !important; line-height: 0.96 !important; letter-spacing: -0.02em !important; color: #ffffff !important; text-align: left !important; text-transform: none !important; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.38); } /* Il titolo del retro leggermente più piccolo */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__title { font-size: clamp(34px, 3vw, 46px) !important; } /* --------------------------------------------------------- 10. DESCRIZIONE FRONTE --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front .elementor-flip-box__layer__description { width: auto; max-width: 90%; margin: 11px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: 0.17em !important; color: rgba(255, 255, 255, 0.80) !important; text-transform: uppercase !important; text-align: left !important; } /* --------------------------------------------------------- 11. DESCRIZIONE RETRO Testo normale, senza pill e senza rettangolone. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__description { display: block !important; width: auto !important; max-width: 410px; margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: 0.02em !important; color: rgba(255, 255, 255, 0.76) !important; text-transform: none !important; text-align: left !important; transform: none !important; } /* --------------------------------------------------------- 12. LINK CLICCABILE DEL RETRO Utilizziamo il pulsante nativo Elementor, ma graficamente sembra un semplice link editoriale. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__button { position: relative; display: inline-flex !important; align-items: center; justify-content: flex-start; gap: 9px; width: auto !important; min-width: 0 !important; margin: 20px 0 0 !important; padding: 0 0 7px !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.62) !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.16em !important; color: #ffffff !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer; pointer-events: auto; transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important; } /* Freccia inserita via CSS */ .ink-region-card .elementor-flip-box__button::after { content: "↗"; display: inline-block; margin-left: 3px; font-family: Arial, sans-serif; font-size: 15px; font-weight: 300; line-height: 0.8; transition: transform 0.3s ease; } /* Piccolo accento multicolore Ink Brandz */ .ink-region-card .elementor-flip-box__button::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 2px; background: linear-gradient( 90deg, #ff7043 0%, #ff3e75 30%, #a847ef 62%, #26bde2 100% ); transition: width 0.3s ease; } /* Hover del link */ .ink-region-card .elementor-flip-box__button:hover, .ink-region-card .elementor-flip-box__button:focus { color: #ffffff !important; border-bottom-color: transparent !important; background: transparent !important; transform: translateX(3px); } .ink-region-card .elementor-flip-box__button:hover::before, .ink-region-card .elementor-flip-box__button:focus::before { width: 32px; } .ink-region-card .elementor-flip-box__button:hover::after, .ink-region-card .elementor-flip-box__button:focus::after { transform: translate(3px, -3px); } /* --------------------------------------------------------- 13. CORREZIONE TESTI CAPOVOLTI E SPECCHIATI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } .ink-region-card .elementor-flip-box__layer__overlay, .ink-region-card .elementor-flip-box__layer__inner, .ink-region-card .elementor-flip-box__layer__title, .ink-region-card .elementor-flip-box__layer__description, .ink-region-card .elementor-flip-box__button { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; transform-style: flat !important; } /* --------------------------------------------------------- 14. TRANSIZIONE MORBIDA Funziona meglio impostando “Fade” in Elementor. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer { transition: opacity 0.65s cubic-bezier(.22, .61, .36, 1), transform 0.65s cubic-bezier(.22, .61, .36, 1) !important; } /* --------------------------------------------------------- 15. LEGGERO MOVIMENTO DELLA FOTO SUL FRONTE --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front { transform-origin: center center; } /* --------------------------------------------------------- 16. MOBILE Stessa proporzione 4:3 del desktop. Primo tocco: mostra il retro. Secondo tocco sul link: apre la pagina. --------------------------------------------------------- */ @media (max-width: 767px) { .ink-region-card .elementor-flip-box { width: 100%; aspect-ratio: 4 / 3; height: auto !important; } .ink-region-card .elementor-flip-box__layer__overlay { padding: 23px !important; } .ink-region-card .elementor-flip-box__layer__title { font-size: 38px !important; } .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__title { font-size: 35px !important; } .ink-region-card .elementor-flip-box__front .elementor-flip-box__layer__description { max-width: 100%; font-size: 9px !important; letter-spacing: 0.14em !important; } .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__description { max-width: 90%; font-size: 11px !important; line-height: 1.45 !important; } .ink-region-card .elementor-flip-box__button { margin-top: 16px !important; font-size: 9px !important; } } /* --------------------------------------------------------- 17. TABLET --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { .ink-region-card .elementor-flip-box { aspect-ratio: 4 / 3; height: auto !important; } .ink-region-card .elementor-flip-box__layer__overlay { padding: 27px !important; } .ink-region-card .elementor-flip-box__layer__title { font-size: 41px !important; } } /* --------------------------------------------------------- 18. ACCESSIBILITÀ --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__button:focus-visible { outline: 2px solid #36b8ff !important; outline-offset: 5px; } /* Riduce le animazioni per chi le ha disattivate */ @media (prefers-reduced-motion: reduce) { .ink-region-card *, .ink-region-card *::before, .ink-region-card *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================= CORREZIONE EFFETTO FADE Evita la sovrapposizione tra fronte e retro ========================================================= */ /* Stato iniziale */ .ink-region-card .elementor-flip-box__front { opacity: 1 !important; visibility: visible !important; pointer-events: auto; z-index: 2 !important; transform: none !important; transition: opacity 0.55s ease, visibility 0s linear 0s !important; } .ink-region-card .elementor-flip-box__back { opacity: 0 !important; visibility: hidden !important; pointer-events: none; z-index: 3 !important; transform: none !important; transition: opacity 0.55s ease, visibility 0s linear 0.55s !important; } /* Nasconde anche tutto il contenuto interno del retro */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 0 !important; transform: translateY(10px) !important; transition: opacity 0.4s ease, transform 0.55s ease !important; } /* ========================================================= PASSAGGIO MOUSE DESKTOP ========================================================= */ .ink-region-card:hover .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; transition: opacity 0.55s ease, visibility 0s linear 0.55s !important; } .ink-region-card:hover .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; transition: opacity 0.55s ease, visibility 0s linear 0s !important; } /* Il contenuto del fronte sparisce completamente */ .ink-region-card:hover .elementor-flip-box__front .elementor-flip-box__layer__inner { opacity: 0 !important; visibility: hidden !important; } /* Il contenuto del retro appare leggermente dopo la mappa */ .ink-region-card:hover .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; transition-delay: 0.12s !important; } /* ========================================================= FOCUS — utile per tastiera e alcuni dispositivi touch ========================================================= */ .ink-region-card:focus-within .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; } .ink-region-card:focus-within .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; } .ink-region-card:focus-within .elementor-flip-box__front .elementor-flip-box__layer__inner { opacity: 0 !important; visibility: hidden !important; } .ink-region-card:focus-within .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* ========================================================= CORREZIONE SPECIFICA PER L'EFFETTO FADE DI ELEMENTOR ========================================================= */ .ink-region-card .elementor-flip-box--effect-fade .elementor-flip-box__front, .ink-region-card .elementor-flip-box--effect-fade .elementor-flip-box__back { transform: none !important; backface-visibility: visible !important; } /* Elementor a volte lascia il contenuto frontale sopra al retro */ .ink-region-card:hover .elementor-flip-box--effect-fade .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; z-index: 1 !important; } .ink-region-card:hover .elementor-flip-box--effect-fade .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; z-index: 4 !important; } /* ========================================================= MOBILE Elementor gestisce il primo tocco come stato hover/focus ========================================================= */ @media (max-width: 767px) { .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { transform: none !important; } .ink-region-card:hover .elementor-flip-box__front, .ink-region-card:focus-within .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; } .ink-region-card:hover .elementor-flip-box__back, .ink-region-card:focus-within .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; } }/* End custom CSS */ /* Start custom CSS for flip-box, class: .elementor-element-2bf54a3 *//* ========================================================= INK BRANDZ — REGION FLIP BOX DEFINITIVO Classe widget: ink-region-card Immagini consigliate: 1600 × 1200 px Formato fisso desktop, tablet e mobile: 4:3 ========================================================= */ /* --------------------------------------------------------- 1. STRUTTURA GENERALE DELLA CARD --------------------------------------------------------- */ .ink-region-card { width: 100%; } .ink-region-card .elementor-widget-container { width: 100%; height: 100%; } .ink-region-card .elementor-flip-box { position: relative; width: 100%; height: auto !important; aspect-ratio: 4 / 3; min-height: 0 !important; overflow: hidden; /* Niente riquadri e niente angoli arrotondati */ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #111318; isolation: isolate; } /* Tutti i livelli devono occupare la stessa dimensione */ .ink-region-card .elementor-flip-box__layer, .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; } /* --------------------------------------------------------- 2. IMMAGINI DI SFONDO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { background-repeat: no-repeat !important; background-size: cover !important; background-position: center center !important; } /* Il retro deve mostrare chiaramente la mappa. Nessun colore pieno sopra l’immagine. */ .ink-region-card .elementor-flip-box__back { background-color: #101217 !important; } /* --------------------------------------------------------- 3. ELIMINAZIONE COMPLETA DEI RIQUADRI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front::after, .ink-region-card .elementor-flip-box__back::after { content: none !important; display: none !important; } .ink-region-card .elementor-flip-box__layer::after, .ink-region-card .elementor-flip-box__layer::before { border: 0 !important; box-shadow: none !important; } /* --------------------------------------------------------- 4. OVERLAY DEL FRONTE Serve esclusivamente a leggere bene il testo. Non copre tutta la fotografia. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(7, 9, 13, 0.01) 0%, rgba(7, 9, 13, 0.02) 38%, rgba(7, 9, 13, 0.16) 58%, rgba(7, 9, 13, 0.56) 79%, rgba(7, 9, 13, 0.86) 100% ); } /* --------------------------------------------------------- 5. OVERLAY DEL RETRO Molto leggero: la mappa deve restare visibile. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__back::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(7, 9, 13, 0.00) 0%, rgba(7, 9, 13, 0.02) 45%, rgba(7, 9, 13, 0.25) 72%, rgba(7, 9, 13, 0.72) 100% ); } /* --------------------------------------------------------- 6. CONTENUTO FRONTE E RETRO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__overlay { position: relative; z-index: 3; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; width: 100%; height: 100%; padding: 32px !important; text-align: left !important; } /* --------------------------------------------------------- 7. RIMOZIONE ICONA / STELLA --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__inner > .elementor-icon-wrapper, .ink-region-card .elementor-flip-box__layer__inner > .elementor-flip-box__image, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-default, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-stacked, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-framed { display: none !important; } /* --------------------------------------------------------- 8. CONTENITORE INTERNO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 100%; margin: 0; padding: 0; text-align: left; } /* --------------------------------------------------------- 9. TITOLI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__title { width: 100%; margin: 0 !important; padding: 0 !important; font-family: "Cormorant Garamond", serif !important; font-size: clamp(36px, 3.3vw, 50px) !important; font-weight: 500 !important; line-height: 0.96 !important; letter-spacing: -0.02em !important; color: #ffffff !important; text-align: left !important; text-transform: none !important; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.38); } /* Il titolo del retro leggermente più piccolo */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__title { font-size: clamp(34px, 3vw, 46px) !important; } /* --------------------------------------------------------- 10. DESCRIZIONE FRONTE --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front .elementor-flip-box__layer__description { width: auto; max-width: 90%; margin: 11px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: 0.17em !important; color: rgba(255, 255, 255, 0.80) !important; text-transform: uppercase !important; text-align: left !important; } /* --------------------------------------------------------- 11. DESCRIZIONE RETRO Testo normale, senza pill e senza rettangolone. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__description { display: block !important; width: auto !important; max-width: 410px; margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: 0.02em !important; color: rgba(255, 255, 255, 0.76) !important; text-transform: none !important; text-align: left !important; transform: none !important; } /* --------------------------------------------------------- 12. LINK CLICCABILE DEL RETRO Utilizziamo il pulsante nativo Elementor, ma graficamente sembra un semplice link editoriale. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__button { position: relative; display: inline-flex !important; align-items: center; justify-content: flex-start; gap: 9px; width: auto !important; min-width: 0 !important; margin: 20px 0 0 !important; padding: 0 0 7px !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.62) !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.16em !important; color: #ffffff !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer; pointer-events: auto; transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important; } /* Freccia inserita via CSS */ .ink-region-card .elementor-flip-box__button::after { content: "↗"; display: inline-block; margin-left: 3px; font-family: Arial, sans-serif; font-size: 15px; font-weight: 300; line-height: 0.8; transition: transform 0.3s ease; } /* Piccolo accento multicolore Ink Brandz */ .ink-region-card .elementor-flip-box__button::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 2px; background: linear-gradient( 90deg, #ff7043 0%, #ff3e75 30%, #a847ef 62%, #26bde2 100% ); transition: width 0.3s ease; } /* Hover del link */ .ink-region-card .elementor-flip-box__button:hover, .ink-region-card .elementor-flip-box__button:focus { color: #ffffff !important; border-bottom-color: transparent !important; background: transparent !important; transform: translateX(3px); } .ink-region-card .elementor-flip-box__button:hover::before, .ink-region-card .elementor-flip-box__button:focus::before { width: 32px; } .ink-region-card .elementor-flip-box__button:hover::after, .ink-region-card .elementor-flip-box__button:focus::after { transform: translate(3px, -3px); } /* --------------------------------------------------------- 13. CORREZIONE TESTI CAPOVOLTI E SPECCHIATI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } .ink-region-card .elementor-flip-box__layer__overlay, .ink-region-card .elementor-flip-box__layer__inner, .ink-region-card .elementor-flip-box__layer__title, .ink-region-card .elementor-flip-box__layer__description, .ink-region-card .elementor-flip-box__button { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; transform-style: flat !important; } /* --------------------------------------------------------- 14. TRANSIZIONE MORBIDA Funziona meglio impostando “Fade” in Elementor. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer { transition: opacity 0.65s cubic-bezier(.22, .61, .36, 1), transform 0.65s cubic-bezier(.22, .61, .36, 1) !important; } /* --------------------------------------------------------- 15. LEGGERO MOVIMENTO DELLA FOTO SUL FRONTE --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front { transform-origin: center center; } /* --------------------------------------------------------- 16. MOBILE Stessa proporzione 4:3 del desktop. Primo tocco: mostra il retro. Secondo tocco sul link: apre la pagina. --------------------------------------------------------- */ @media (max-width: 767px) { .ink-region-card .elementor-flip-box { width: 100%; aspect-ratio: 4 / 3; height: auto !important; } .ink-region-card .elementor-flip-box__layer__overlay { padding: 23px !important; } .ink-region-card .elementor-flip-box__layer__title { font-size: 38px !important; } .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__title { font-size: 35px !important; } .ink-region-card .elementor-flip-box__front .elementor-flip-box__layer__description { max-width: 100%; font-size: 9px !important; letter-spacing: 0.14em !important; } .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__description { max-width: 90%; font-size: 11px !important; line-height: 1.45 !important; } .ink-region-card .elementor-flip-box__button { margin-top: 16px !important; font-size: 9px !important; } } /* --------------------------------------------------------- 17. TABLET --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { .ink-region-card .elementor-flip-box { aspect-ratio: 4 / 3; height: auto !important; } .ink-region-card .elementor-flip-box__layer__overlay { padding: 27px !important; } .ink-region-card .elementor-flip-box__layer__title { font-size: 41px !important; } } /* --------------------------------------------------------- 18. ACCESSIBILITÀ --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__button:focus-visible { outline: 2px solid #36b8ff !important; outline-offset: 5px; } /* Riduce le animazioni per chi le ha disattivate */ @media (prefers-reduced-motion: reduce) { .ink-region-card *, .ink-region-card *::before, .ink-region-card *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================= CORREZIONE EFFETTO FADE Evita la sovrapposizione tra fronte e retro ========================================================= */ /* Stato iniziale */ .ink-region-card .elementor-flip-box__front { opacity: 1 !important; visibility: visible !important; pointer-events: auto; z-index: 2 !important; transform: none !important; transition: opacity 0.55s ease, visibility 0s linear 0s !important; } .ink-region-card .elementor-flip-box__back { opacity: 0 !important; visibility: hidden !important; pointer-events: none; z-index: 3 !important; transform: none !important; transition: opacity 0.55s ease, visibility 0s linear 0.55s !important; } /* Nasconde anche tutto il contenuto interno del retro */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 0 !important; transform: translateY(10px) !important; transition: opacity 0.4s ease, transform 0.55s ease !important; } /* ========================================================= PASSAGGIO MOUSE DESKTOP ========================================================= */ .ink-region-card:hover .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; transition: opacity 0.55s ease, visibility 0s linear 0.55s !important; } .ink-region-card:hover .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; transition: opacity 0.55s ease, visibility 0s linear 0s !important; } /* Il contenuto del fronte sparisce completamente */ .ink-region-card:hover .elementor-flip-box__front .elementor-flip-box__layer__inner { opacity: 0 !important; visibility: hidden !important; } /* Il contenuto del retro appare leggermente dopo la mappa */ .ink-region-card:hover .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; transition-delay: 0.12s !important; } /* ========================================================= FOCUS — utile per tastiera e alcuni dispositivi touch ========================================================= */ .ink-region-card:focus-within .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; } .ink-region-card:focus-within .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; } .ink-region-card:focus-within .elementor-flip-box__front .elementor-flip-box__layer__inner { opacity: 0 !important; visibility: hidden !important; } .ink-region-card:focus-within .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* ========================================================= CORREZIONE SPECIFICA PER L'EFFETTO FADE DI ELEMENTOR ========================================================= */ .ink-region-card .elementor-flip-box--effect-fade .elementor-flip-box__front, .ink-region-card .elementor-flip-box--effect-fade .elementor-flip-box__back { transform: none !important; backface-visibility: visible !important; } /* Elementor a volte lascia il contenuto frontale sopra al retro */ .ink-region-card:hover .elementor-flip-box--effect-fade .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; z-index: 1 !important; } .ink-region-card:hover .elementor-flip-box--effect-fade .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; z-index: 4 !important; } /* ========================================================= MOBILE Elementor gestisce il primo tocco come stato hover/focus ========================================================= */ @media (max-width: 767px) { .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { transform: none !important; } .ink-region-card:hover .elementor-flip-box__front, .ink-region-card:focus-within .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; } .ink-region-card:hover .elementor-flip-box__back, .ink-region-card:focus-within .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; } }/* End custom CSS */ /* Start custom CSS for flip-box, class: .elementor-element-f304c71 *//* ========================================================= INK BRANDZ — REGION FLIP BOX DEFINITIVO Classe widget: ink-region-card Immagini consigliate: 1600 × 1200 px Formato fisso desktop, tablet e mobile: 4:3 ========================================================= */ /* --------------------------------------------------------- 1. STRUTTURA GENERALE DELLA CARD --------------------------------------------------------- */ .ink-region-card { width: 100%; } .ink-region-card .elementor-widget-container { width: 100%; height: 100%; } .ink-region-card .elementor-flip-box { position: relative; width: 100%; height: auto !important; aspect-ratio: 4 / 3; min-height: 0 !important; overflow: hidden; /* Niente riquadri e niente angoli arrotondati */ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #111318; isolation: isolate; } /* Tutti i livelli devono occupare la stessa dimensione */ .ink-region-card .elementor-flip-box__layer, .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; } /* --------------------------------------------------------- 2. IMMAGINI DI SFONDO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { background-repeat: no-repeat !important; background-size: cover !important; background-position: center center !important; } /* Il retro deve mostrare chiaramente la mappa. Nessun colore pieno sopra l’immagine. */ .ink-region-card .elementor-flip-box__back { background-color: #101217 !important; } /* --------------------------------------------------------- 3. ELIMINAZIONE COMPLETA DEI RIQUADRI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front::after, .ink-region-card .elementor-flip-box__back::after { content: none !important; display: none !important; } .ink-region-card .elementor-flip-box__layer::after, .ink-region-card .elementor-flip-box__layer::before { border: 0 !important; box-shadow: none !important; } /* --------------------------------------------------------- 4. OVERLAY DEL FRONTE Serve esclusivamente a leggere bene il testo. Non copre tutta la fotografia. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(7, 9, 13, 0.01) 0%, rgba(7, 9, 13, 0.02) 38%, rgba(7, 9, 13, 0.16) 58%, rgba(7, 9, 13, 0.56) 79%, rgba(7, 9, 13, 0.86) 100% ); } /* --------------------------------------------------------- 5. OVERLAY DEL RETRO Molto leggero: la mappa deve restare visibile. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__back::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(7, 9, 13, 0.00) 0%, rgba(7, 9, 13, 0.02) 45%, rgba(7, 9, 13, 0.25) 72%, rgba(7, 9, 13, 0.72) 100% ); } /* --------------------------------------------------------- 6. CONTENUTO FRONTE E RETRO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__overlay { position: relative; z-index: 3; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; width: 100%; height: 100%; padding: 32px !important; text-align: left !important; } /* --------------------------------------------------------- 7. RIMOZIONE ICONA / STELLA --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__inner > .elementor-icon-wrapper, .ink-region-card .elementor-flip-box__layer__inner > .elementor-flip-box__image, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-default, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-stacked, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-framed { display: none !important; } /* --------------------------------------------------------- 8. CONTENITORE INTERNO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 100%; margin: 0; padding: 0; text-align: left; } /* --------------------------------------------------------- 9. TITOLI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__title { width: 100%; margin: 0 !important; padding: 0 !important; font-family: "Cormorant Garamond", serif !important; font-size: clamp(36px, 3.3vw, 50px) !important; font-weight: 500 !important; line-height: 0.96 !important; letter-spacing: -0.02em !important; color: #ffffff !important; text-align: left !important; text-transform: none !important; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.38); } /* Il titolo del retro leggermente più piccolo */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__title { font-size: clamp(34px, 3vw, 46px) !important; } /* --------------------------------------------------------- 10. DESCRIZIONE FRONTE --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front .elementor-flip-box__layer__description { width: auto; max-width: 90%; margin: 11px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: 0.17em !important; color: rgba(255, 255, 255, 0.80) !important; text-transform: uppercase !important; text-align: left !important; } /* --------------------------------------------------------- 11. DESCRIZIONE RETRO Testo normale, senza pill e senza rettangolone. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__description { display: block !important; width: auto !important; max-width: 410px; margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: 0.02em !important; color: rgba(255, 255, 255, 0.76) !important; text-transform: none !important; text-align: left !important; transform: none !important; } /* --------------------------------------------------------- 12. LINK CLICCABILE DEL RETRO Utilizziamo il pulsante nativo Elementor, ma graficamente sembra un semplice link editoriale. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__button { position: relative; display: inline-flex !important; align-items: center; justify-content: flex-start; gap: 9px; width: auto !important; min-width: 0 !important; margin: 20px 0 0 !important; padding: 0 0 7px !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.62) !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.16em !important; color: #ffffff !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer; pointer-events: auto; transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important; } /* Freccia inserita via CSS */ .ink-region-card .elementor-flip-box__button::after { content: "↗"; display: inline-block; margin-left: 3px; font-family: Arial, sans-serif; font-size: 15px; font-weight: 300; line-height: 0.8; transition: transform 0.3s ease; } /* Piccolo accento multicolore Ink Brandz */ .ink-region-card .elementor-flip-box__button::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 2px; background: linear-gradient( 90deg, #ff7043 0%, #ff3e75 30%, #a847ef 62%, #26bde2 100% ); transition: width 0.3s ease; } /* Hover del link */ .ink-region-card .elementor-flip-box__button:hover, .ink-region-card .elementor-flip-box__button:focus { color: #ffffff !important; border-bottom-color: transparent !important; background: transparent !important; transform: translateX(3px); } .ink-region-card .elementor-flip-box__button:hover::before, .ink-region-card .elementor-flip-box__button:focus::before { width: 32px; } .ink-region-card .elementor-flip-box__button:hover::after, .ink-region-card .elementor-flip-box__button:focus::after { transform: translate(3px, -3px); } /* --------------------------------------------------------- 13. CORREZIONE TESTI CAPOVOLTI E SPECCHIATI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } .ink-region-card .elementor-flip-box__layer__overlay, .ink-region-card .elementor-flip-box__layer__inner, .ink-region-card .elementor-flip-box__layer__title, .ink-region-card .elementor-flip-box__layer__description, .ink-region-card .elementor-flip-box__button { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; transform-style: flat !important; } /* --------------------------------------------------------- 14. TRANSIZIONE MORBIDA Funziona meglio impostando “Fade” in Elementor. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer { transition: opacity 0.65s cubic-bezier(.22, .61, .36, 1), transform 0.65s cubic-bezier(.22, .61, .36, 1) !important; } /* --------------------------------------------------------- 15. LEGGERO MOVIMENTO DELLA FOTO SUL FRONTE --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front { transform-origin: center center; } /* --------------------------------------------------------- 16. MOBILE Stessa proporzione 4:3 del desktop. Primo tocco: mostra il retro. Secondo tocco sul link: apre la pagina. --------------------------------------------------------- */ @media (max-width: 767px) { .ink-region-card .elementor-flip-box { width: 100%; aspect-ratio: 4 / 3; height: auto !important; } .ink-region-card .elementor-flip-box__layer__overlay { padding: 23px !important; } .ink-region-card .elementor-flip-box__layer__title { font-size: 38px !important; } .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__title { font-size: 35px !important; } .ink-region-card .elementor-flip-box__front .elementor-flip-box__layer__description { max-width: 100%; font-size: 9px !important; letter-spacing: 0.14em !important; } .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__description { max-width: 90%; font-size: 11px !important; line-height: 1.45 !important; } .ink-region-card .elementor-flip-box__button { margin-top: 16px !important; font-size: 9px !important; } } /* --------------------------------------------------------- 17. TABLET --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { .ink-region-card .elementor-flip-box { aspect-ratio: 4 / 3; height: auto !important; } .ink-region-card .elementor-flip-box__layer__overlay { padding: 27px !important; } .ink-region-card .elementor-flip-box__layer__title { font-size: 41px !important; } } /* --------------------------------------------------------- 18. ACCESSIBILITÀ --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__button:focus-visible { outline: 2px solid #36b8ff !important; outline-offset: 5px; } /* Riduce le animazioni per chi le ha disattivate */ @media (prefers-reduced-motion: reduce) { .ink-region-card *, .ink-region-card *::before, .ink-region-card *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================= CORREZIONE EFFETTO FADE Evita la sovrapposizione tra fronte e retro ========================================================= */ /* Stato iniziale */ .ink-region-card .elementor-flip-box__front { opacity: 1 !important; visibility: visible !important; pointer-events: auto; z-index: 2 !important; transform: none !important; transition: opacity 0.55s ease, visibility 0s linear 0s !important; } .ink-region-card .elementor-flip-box__back { opacity: 0 !important; visibility: hidden !important; pointer-events: none; z-index: 3 !important; transform: none !important; transition: opacity 0.55s ease, visibility 0s linear 0.55s !important; } /* Nasconde anche tutto il contenuto interno del retro */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 0 !important; transform: translateY(10px) !important; transition: opacity 0.4s ease, transform 0.55s ease !important; } /* ========================================================= PASSAGGIO MOUSE DESKTOP ========================================================= */ .ink-region-card:hover .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; transition: opacity 0.55s ease, visibility 0s linear 0.55s !important; } .ink-region-card:hover .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; transition: opacity 0.55s ease, visibility 0s linear 0s !important; } /* Il contenuto del fronte sparisce completamente */ .ink-region-card:hover .elementor-flip-box__front .elementor-flip-box__layer__inner { opacity: 0 !important; visibility: hidden !important; } /* Il contenuto del retro appare leggermente dopo la mappa */ .ink-region-card:hover .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; transition-delay: 0.12s !important; } /* ========================================================= FOCUS — utile per tastiera e alcuni dispositivi touch ========================================================= */ .ink-region-card:focus-within .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; } .ink-region-card:focus-within .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; } .ink-region-card:focus-within .elementor-flip-box__front .elementor-flip-box__layer__inner { opacity: 0 !important; visibility: hidden !important; } .ink-region-card:focus-within .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* ========================================================= CORREZIONE SPECIFICA PER L'EFFETTO FADE DI ELEMENTOR ========================================================= */ .ink-region-card .elementor-flip-box--effect-fade .elementor-flip-box__front, .ink-region-card .elementor-flip-box--effect-fade .elementor-flip-box__back { transform: none !important; backface-visibility: visible !important; } /* Elementor a volte lascia il contenuto frontale sopra al retro */ .ink-region-card:hover .elementor-flip-box--effect-fade .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; z-index: 1 !important; } .ink-region-card:hover .elementor-flip-box--effect-fade .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; z-index: 4 !important; } /* ========================================================= MOBILE Elementor gestisce il primo tocco come stato hover/focus ========================================================= */ @media (max-width: 767px) { .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { transform: none !important; } .ink-region-card:hover .elementor-flip-box__front, .ink-region-card:focus-within .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; } .ink-region-card:hover .elementor-flip-box__back, .ink-region-card:focus-within .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; } }/* End custom CSS */ /* Start custom CSS for flip-box, class: .elementor-element-20fa680 *//* ========================================================= INK BRANDZ — REGION FLIP BOX DEFINITIVO Classe widget: ink-region-card Immagini consigliate: 1600 × 1200 px Formato fisso desktop, tablet e mobile: 4:3 ========================================================= */ /* --------------------------------------------------------- 1. STRUTTURA GENERALE DELLA CARD --------------------------------------------------------- */ .ink-region-card { width: 100%; } .ink-region-card .elementor-widget-container { width: 100%; height: 100%; } .ink-region-card .elementor-flip-box { position: relative; width: 100%; height: auto !important; aspect-ratio: 4 / 3; min-height: 0 !important; overflow: hidden; /* Niente riquadri e niente angoli arrotondati */ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #111318; isolation: isolate; } /* Tutti i livelli devono occupare la stessa dimensione */ .ink-region-card .elementor-flip-box__layer, .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; } /* --------------------------------------------------------- 2. IMMAGINI DI SFONDO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { background-repeat: no-repeat !important; background-size: cover !important; background-position: center center !important; } /* Il retro deve mostrare chiaramente la mappa. Nessun colore pieno sopra l’immagine. */ .ink-region-card .elementor-flip-box__back { background-color: #101217 !important; } /* --------------------------------------------------------- 3. ELIMINAZIONE COMPLETA DEI RIQUADRI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front::after, .ink-region-card .elementor-flip-box__back::after { content: none !important; display: none !important; } .ink-region-card .elementor-flip-box__layer::after, .ink-region-card .elementor-flip-box__layer::before { border: 0 !important; box-shadow: none !important; } /* --------------------------------------------------------- 4. OVERLAY DEL FRONTE Serve esclusivamente a leggere bene il testo. Non copre tutta la fotografia. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(7, 9, 13, 0.01) 0%, rgba(7, 9, 13, 0.02) 38%, rgba(7, 9, 13, 0.16) 58%, rgba(7, 9, 13, 0.56) 79%, rgba(7, 9, 13, 0.86) 100% ); } /* --------------------------------------------------------- 5. OVERLAY DEL RETRO Molto leggero: la mappa deve restare visibile. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__back::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(7, 9, 13, 0.00) 0%, rgba(7, 9, 13, 0.02) 45%, rgba(7, 9, 13, 0.25) 72%, rgba(7, 9, 13, 0.72) 100% ); } /* --------------------------------------------------------- 6. CONTENUTO FRONTE E RETRO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__overlay { position: relative; z-index: 3; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; width: 100%; height: 100%; padding: 32px !important; text-align: left !important; } /* --------------------------------------------------------- 7. RIMOZIONE ICONA / STELLA --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__inner > .elementor-icon-wrapper, .ink-region-card .elementor-flip-box__layer__inner > .elementor-flip-box__image, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-default, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-stacked, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-framed { display: none !important; } /* --------------------------------------------------------- 8. CONTENITORE INTERNO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 100%; margin: 0; padding: 0; text-align: left; } /* --------------------------------------------------------- 9. TITOLI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__title { width: 100%; margin: 0 !important; padding: 0 !important; font-family: "Cormorant Garamond", serif !important; font-size: clamp(36px, 3.3vw, 50px) !important; font-weight: 500 !important; line-height: 0.96 !important; letter-spacing: -0.02em !important; color: #ffffff !important; text-align: left !important; text-transform: none !important; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.38); } /* Il titolo del retro leggermente più piccolo */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__title { font-size: clamp(34px, 3vw, 46px) !important; } /* --------------------------------------------------------- 10. DESCRIZIONE FRONTE --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front .elementor-flip-box__layer__description { width: auto; max-width: 90%; margin: 11px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: 0.17em !important; color: rgba(255, 255, 255, 0.80) !important; text-transform: uppercase !important; text-align: left !important; } /* --------------------------------------------------------- 11. DESCRIZIONE RETRO Testo normale, senza pill e senza rettangolone. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__description { display: block !important; width: auto !important; max-width: 410px; margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: 0.02em !important; color: rgba(255, 255, 255, 0.76) !important; text-transform: none !important; text-align: left !important; transform: none !important; } /* --------------------------------------------------------- 12. LINK CLICCABILE DEL RETRO Utilizziamo il pulsante nativo Elementor, ma graficamente sembra un semplice link editoriale. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__button { position: relative; display: inline-flex !important; align-items: center; justify-content: flex-start; gap: 9px; width: auto !important; min-width: 0 !important; margin: 20px 0 0 !important; padding: 0 0 7px !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.62) !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.16em !important; color: #ffffff !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer; pointer-events: auto; transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important; } /* Freccia inserita via CSS */ .ink-region-card .elementor-flip-box__button::after { content: "↗"; display: inline-block; margin-left: 3px; font-family: Arial, sans-serif; font-size: 15px; font-weight: 300; line-height: 0.8; transition: transform 0.3s ease; } /* Piccolo accento multicolore Ink Brandz */ .ink-region-card .elementor-flip-box__button::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 2px; background: linear-gradient( 90deg, #ff7043 0%, #ff3e75 30%, #a847ef 62%, #26bde2 100% ); transition: width 0.3s ease; } /* Hover del link */ .ink-region-card .elementor-flip-box__button:hover, .ink-region-card .elementor-flip-box__button:focus { color: #ffffff !important; border-bottom-color: transparent !important; background: transparent !important; transform: translateX(3px); } .ink-region-card .elementor-flip-box__button:hover::before, .ink-region-card .elementor-flip-box__button:focus::before { width: 32px; } .ink-region-card .elementor-flip-box__button:hover::after, .ink-region-card .elementor-flip-box__button:focus::after { transform: translate(3px, -3px); } /* --------------------------------------------------------- 13. CORREZIONE TESTI CAPOVOLTI E SPECCHIATI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } .ink-region-card .elementor-flip-box__layer__overlay, .ink-region-card .elementor-flip-box__layer__inner, .ink-region-card .elementor-flip-box__layer__title, .ink-region-card .elementor-flip-box__layer__description, .ink-region-card .elementor-flip-box__button { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; transform-style: flat !important; } /* --------------------------------------------------------- 14. TRANSIZIONE MORBIDA Funziona meglio impostando “Fade” in Elementor. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer { transition: opacity 0.65s cubic-bezier(.22, .61, .36, 1), transform 0.65s cubic-bezier(.22, .61, .36, 1) !important; } /* --------------------------------------------------------- 15. LEGGERO MOVIMENTO DELLA FOTO SUL FRONTE --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front { transform-origin: center center; } /* --------------------------------------------------------- 16. MOBILE Stessa proporzione 4:3 del desktop. Primo tocco: mostra il retro. Secondo tocco sul link: apre la pagina. --------------------------------------------------------- */ @media (max-width: 767px) { .ink-region-card .elementor-flip-box { width: 100%; aspect-ratio: 4 / 3; height: auto !important; } .ink-region-card .elementor-flip-box__layer__overlay { padding: 23px !important; } .ink-region-card .elementor-flip-box__layer__title { font-size: 38px !important; } .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__title { font-size: 35px !important; } .ink-region-card .elementor-flip-box__front .elementor-flip-box__layer__description { max-width: 100%; font-size: 9px !important; letter-spacing: 0.14em !important; } .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__description { max-width: 90%; font-size: 11px !important; line-height: 1.45 !important; } .ink-region-card .elementor-flip-box__button { margin-top: 16px !important; font-size: 9px !important; } } /* --------------------------------------------------------- 17. TABLET --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { .ink-region-card .elementor-flip-box { aspect-ratio: 4 / 3; height: auto !important; } .ink-region-card .elementor-flip-box__layer__overlay { padding: 27px !important; } .ink-region-card .elementor-flip-box__layer__title { font-size: 41px !important; } } /* --------------------------------------------------------- 18. ACCESSIBILITÀ --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__button:focus-visible { outline: 2px solid #36b8ff !important; outline-offset: 5px; } /* Riduce le animazioni per chi le ha disattivate */ @media (prefers-reduced-motion: reduce) { .ink-region-card *, .ink-region-card *::before, .ink-region-card *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================= CORREZIONE EFFETTO FADE Evita la sovrapposizione tra fronte e retro ========================================================= */ /* Stato iniziale */ .ink-region-card .elementor-flip-box__front { opacity: 1 !important; visibility: visible !important; pointer-events: auto; z-index: 2 !important; transform: none !important; transition: opacity 0.55s ease, visibility 0s linear 0s !important; } .ink-region-card .elementor-flip-box__back { opacity: 0 !important; visibility: hidden !important; pointer-events: none; z-index: 3 !important; transform: none !important; transition: opacity 0.55s ease, visibility 0s linear 0.55s !important; } /* Nasconde anche tutto il contenuto interno del retro */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 0 !important; transform: translateY(10px) !important; transition: opacity 0.4s ease, transform 0.55s ease !important; } /* ========================================================= PASSAGGIO MOUSE DESKTOP ========================================================= */ .ink-region-card:hover .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; transition: opacity 0.55s ease, visibility 0s linear 0.55s !important; } .ink-region-card:hover .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; transition: opacity 0.55s ease, visibility 0s linear 0s !important; } /* Il contenuto del fronte sparisce completamente */ .ink-region-card:hover .elementor-flip-box__front .elementor-flip-box__layer__inner { opacity: 0 !important; visibility: hidden !important; } /* Il contenuto del retro appare leggermente dopo la mappa */ .ink-region-card:hover .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; transition-delay: 0.12s !important; } /* ========================================================= FOCUS — utile per tastiera e alcuni dispositivi touch ========================================================= */ .ink-region-card:focus-within .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; } .ink-region-card:focus-within .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; } .ink-region-card:focus-within .elementor-flip-box__front .elementor-flip-box__layer__inner { opacity: 0 !important; visibility: hidden !important; } .ink-region-card:focus-within .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* ========================================================= CORREZIONE SPECIFICA PER L'EFFETTO FADE DI ELEMENTOR ========================================================= */ .ink-region-card .elementor-flip-box--effect-fade .elementor-flip-box__front, .ink-region-card .elementor-flip-box--effect-fade .elementor-flip-box__back { transform: none !important; backface-visibility: visible !important; } /* Elementor a volte lascia il contenuto frontale sopra al retro */ .ink-region-card:hover .elementor-flip-box--effect-fade .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; z-index: 1 !important; } .ink-region-card:hover .elementor-flip-box--effect-fade .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; z-index: 4 !important; } /* ========================================================= MOBILE Elementor gestisce il primo tocco come stato hover/focus ========================================================= */ @media (max-width: 767px) { .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { transform: none !important; } .ink-region-card:hover .elementor-flip-box__front, .ink-region-card:focus-within .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; } .ink-region-card:hover .elementor-flip-box__back, .ink-region-card:focus-within .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; } }/* End custom CSS */ /* Start custom CSS for flip-box, class: .elementor-element-3668f30 *//* ========================================================= INK BRANDZ — REGION FLIP BOX DEFINITIVO Classe widget: ink-region-card Immagini consigliate: 1600 × 1200 px Formato fisso desktop, tablet e mobile: 4:3 ========================================================= */ /* --------------------------------------------------------- 1. STRUTTURA GENERALE DELLA CARD --------------------------------------------------------- */ .ink-region-card { width: 100%; } .ink-region-card .elementor-widget-container { width: 100%; height: 100%; } .ink-region-card .elementor-flip-box { position: relative; width: 100%; height: auto !important; aspect-ratio: 4 / 3; min-height: 0 !important; overflow: hidden; /* Niente riquadri e niente angoli arrotondati */ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #111318; isolation: isolate; } /* Tutti i livelli devono occupare la stessa dimensione */ .ink-region-card .elementor-flip-box__layer, .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; } /* --------------------------------------------------------- 2. IMMAGINI DI SFONDO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { background-repeat: no-repeat !important; background-size: cover !important; background-position: center center !important; } /* Il retro deve mostrare chiaramente la mappa. Nessun colore pieno sopra l’immagine. */ .ink-region-card .elementor-flip-box__back { background-color: #101217 !important; } /* --------------------------------------------------------- 3. ELIMINAZIONE COMPLETA DEI RIQUADRI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front::after, .ink-region-card .elementor-flip-box__back::after { content: none !important; display: none !important; } .ink-region-card .elementor-flip-box__layer::after, .ink-region-card .elementor-flip-box__layer::before { border: 0 !important; box-shadow: none !important; } /* --------------------------------------------------------- 4. OVERLAY DEL FRONTE Serve esclusivamente a leggere bene il testo. Non copre tutta la fotografia. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(7, 9, 13, 0.01) 0%, rgba(7, 9, 13, 0.02) 38%, rgba(7, 9, 13, 0.16) 58%, rgba(7, 9, 13, 0.56) 79%, rgba(7, 9, 13, 0.86) 100% ); } /* --------------------------------------------------------- 5. OVERLAY DEL RETRO Molto leggero: la mappa deve restare visibile. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__back::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(7, 9, 13, 0.00) 0%, rgba(7, 9, 13, 0.02) 45%, rgba(7, 9, 13, 0.25) 72%, rgba(7, 9, 13, 0.72) 100% ); } /* --------------------------------------------------------- 6. CONTENUTO FRONTE E RETRO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__overlay { position: relative; z-index: 3; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; width: 100%; height: 100%; padding: 32px !important; text-align: left !important; } /* --------------------------------------------------------- 7. RIMOZIONE ICONA / STELLA --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__inner > .elementor-icon-wrapper, .ink-region-card .elementor-flip-box__layer__inner > .elementor-flip-box__image, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-default, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-stacked, .ink-region-card .elementor-flip-box__layer__inner > .elementor-view-framed { display: none !important; } /* --------------------------------------------------------- 8. CONTENITORE INTERNO --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 100%; margin: 0; padding: 0; text-align: left; } /* --------------------------------------------------------- 9. TITOLI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer__title { width: 100%; margin: 0 !important; padding: 0 !important; font-family: "Cormorant Garamond", serif !important; font-size: clamp(36px, 3.3vw, 50px) !important; font-weight: 500 !important; line-height: 0.96 !important; letter-spacing: -0.02em !important; color: #ffffff !important; text-align: left !important; text-transform: none !important; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.38); } /* Il titolo del retro leggermente più piccolo */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__title { font-size: clamp(34px, 3vw, 46px) !important; } /* --------------------------------------------------------- 10. DESCRIZIONE FRONTE --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front .elementor-flip-box__layer__description { width: auto; max-width: 90%; margin: 11px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: 0.17em !important; color: rgba(255, 255, 255, 0.80) !important; text-transform: uppercase !important; text-align: left !important; } /* --------------------------------------------------------- 11. DESCRIZIONE RETRO Testo normale, senza pill e senza rettangolone. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__description { display: block !important; width: auto !important; max-width: 410px; margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: 0.02em !important; color: rgba(255, 255, 255, 0.76) !important; text-transform: none !important; text-align: left !important; transform: none !important; } /* --------------------------------------------------------- 12. LINK CLICCABILE DEL RETRO Utilizziamo il pulsante nativo Elementor, ma graficamente sembra un semplice link editoriale. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__button { position: relative; display: inline-flex !important; align-items: center; justify-content: flex-start; gap: 9px; width: auto !important; min-width: 0 !important; margin: 20px 0 0 !important; padding: 0 0 7px !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.62) !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.16em !important; color: #ffffff !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer; pointer-events: auto; transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important; } /* Freccia inserita via CSS */ .ink-region-card .elementor-flip-box__button::after { content: "↗"; display: inline-block; margin-left: 3px; font-family: Arial, sans-serif; font-size: 15px; font-weight: 300; line-height: 0.8; transition: transform 0.3s ease; } /* Piccolo accento multicolore Ink Brandz */ .ink-region-card .elementor-flip-box__button::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 2px; background: linear-gradient( 90deg, #ff7043 0%, #ff3e75 30%, #a847ef 62%, #26bde2 100% ); transition: width 0.3s ease; } /* Hover del link */ .ink-region-card .elementor-flip-box__button:hover, .ink-region-card .elementor-flip-box__button:focus { color: #ffffff !important; border-bottom-color: transparent !important; background: transparent !important; transform: translateX(3px); } .ink-region-card .elementor-flip-box__button:hover::before, .ink-region-card .elementor-flip-box__button:focus::before { width: 32px; } .ink-region-card .elementor-flip-box__button:hover::after, .ink-region-card .elementor-flip-box__button:focus::after { transform: translate(3px, -3px); } /* --------------------------------------------------------- 13. CORREZIONE TESTI CAPOVOLTI E SPECCHIATI --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } .ink-region-card .elementor-flip-box__layer__overlay, .ink-region-card .elementor-flip-box__layer__inner, .ink-region-card .elementor-flip-box__layer__title, .ink-region-card .elementor-flip-box__layer__description, .ink-region-card .elementor-flip-box__button { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; transform-style: flat !important; } /* --------------------------------------------------------- 14. TRANSIZIONE MORBIDA Funziona meglio impostando “Fade” in Elementor. --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__layer { transition: opacity 0.65s cubic-bezier(.22, .61, .36, 1), transform 0.65s cubic-bezier(.22, .61, .36, 1) !important; } /* --------------------------------------------------------- 15. LEGGERO MOVIMENTO DELLA FOTO SUL FRONTE --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__front { transform-origin: center center; } /* --------------------------------------------------------- 16. MOBILE Stessa proporzione 4:3 del desktop. Primo tocco: mostra il retro. Secondo tocco sul link: apre la pagina. --------------------------------------------------------- */ @media (max-width: 767px) { .ink-region-card .elementor-flip-box { width: 100%; aspect-ratio: 4 / 3; height: auto !important; } .ink-region-card .elementor-flip-box__layer__overlay { padding: 23px !important; } .ink-region-card .elementor-flip-box__layer__title { font-size: 38px !important; } .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__title { font-size: 35px !important; } .ink-region-card .elementor-flip-box__front .elementor-flip-box__layer__description { max-width: 100%; font-size: 9px !important; letter-spacing: 0.14em !important; } .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__description { max-width: 90%; font-size: 11px !important; line-height: 1.45 !important; } .ink-region-card .elementor-flip-box__button { margin-top: 16px !important; font-size: 9px !important; } } /* --------------------------------------------------------- 17. TABLET --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { .ink-region-card .elementor-flip-box { aspect-ratio: 4 / 3; height: auto !important; } .ink-region-card .elementor-flip-box__layer__overlay { padding: 27px !important; } .ink-region-card .elementor-flip-box__layer__title { font-size: 41px !important; } } /* --------------------------------------------------------- 18. ACCESSIBILITÀ --------------------------------------------------------- */ .ink-region-card .elementor-flip-box__button:focus-visible { outline: 2px solid #36b8ff !important; outline-offset: 5px; } /* Riduce le animazioni per chi le ha disattivate */ @media (prefers-reduced-motion: reduce) { .ink-region-card *, .ink-region-card *::before, .ink-region-card *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================= CORREZIONE EFFETTO FADE Evita la sovrapposizione tra fronte e retro ========================================================= */ /* Stato iniziale */ .ink-region-card .elementor-flip-box__front { opacity: 1 !important; visibility: visible !important; pointer-events: auto; z-index: 2 !important; transform: none !important; transition: opacity 0.55s ease, visibility 0s linear 0s !important; } .ink-region-card .elementor-flip-box__back { opacity: 0 !important; visibility: hidden !important; pointer-events: none; z-index: 3 !important; transform: none !important; transition: opacity 0.55s ease, visibility 0s linear 0.55s !important; } /* Nasconde anche tutto il contenuto interno del retro */ .ink-region-card .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 0 !important; transform: translateY(10px) !important; transition: opacity 0.4s ease, transform 0.55s ease !important; } /* ========================================================= PASSAGGIO MOUSE DESKTOP ========================================================= */ .ink-region-card:hover .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; transition: opacity 0.55s ease, visibility 0s linear 0.55s !important; } .ink-region-card:hover .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; transition: opacity 0.55s ease, visibility 0s linear 0s !important; } /* Il contenuto del fronte sparisce completamente */ .ink-region-card:hover .elementor-flip-box__front .elementor-flip-box__layer__inner { opacity: 0 !important; visibility: hidden !important; } /* Il contenuto del retro appare leggermente dopo la mappa */ .ink-region-card:hover .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; transition-delay: 0.12s !important; } /* ========================================================= FOCUS — utile per tastiera e alcuni dispositivi touch ========================================================= */ .ink-region-card:focus-within .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; } .ink-region-card:focus-within .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; } .ink-region-card:focus-within .elementor-flip-box__front .elementor-flip-box__layer__inner { opacity: 0 !important; visibility: hidden !important; } .ink-region-card:focus-within .elementor-flip-box__back .elementor-flip-box__layer__inner { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* ========================================================= CORREZIONE SPECIFICA PER L'EFFETTO FADE DI ELEMENTOR ========================================================= */ .ink-region-card .elementor-flip-box--effect-fade .elementor-flip-box__front, .ink-region-card .elementor-flip-box--effect-fade .elementor-flip-box__back { transform: none !important; backface-visibility: visible !important; } /* Elementor a volte lascia il contenuto frontale sopra al retro */ .ink-region-card:hover .elementor-flip-box--effect-fade .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; z-index: 1 !important; } .ink-region-card:hover .elementor-flip-box--effect-fade .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; z-index: 4 !important; } /* ========================================================= MOBILE Elementor gestisce il primo tocco come stato hover/focus ========================================================= */ @media (max-width: 767px) { .ink-region-card .elementor-flip-box__front, .ink-region-card .elementor-flip-box__back { transform: none !important; } .ink-region-card:hover .elementor-flip-box__front, .ink-region-card:focus-within .elementor-flip-box__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none; } .ink-region-card:hover .elementor-flip-box__back, .ink-region-card:focus-within .elementor-flip-box__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto; } }/* End custom CSS */ /* Start custom CSS for flip-box, class: .elementor-element-d6d434d *//* FLIP BOX SINGOLO */ .ink-region-card-single{ width:min(100%,760px)!important; max-width:760px!important; margin:auto!important; } .ink-region-card-single.elementor-widget-flip-box, .ink-region-card-single .elementor-widget-container{ width:100%!important; max-width:760px!important; margin:auto!important; } .ink-region-card-single .elementor-flip-box{ width:100%!important; max-width:760px!important; aspect-ratio:4/3!important; height:auto!important; } /* Tablet */ @media(max-width:1024px){ .ink-region-card-single, .ink-region-card-single .elementor-widget-container, .ink-region-card-single .elementor-flip-box{ max-width:680px!important; } } /* Mobile */ @media(max-width:767px){ .ink-region-card-single, .ink-region-card-single .elementor-widget-container, .ink-region-card-single .elementor-flip-box{ max-width:100%!important; } }/* End custom CSS */ /* Start custom CSS for global, class: .elementor-global-1344 */.elementor-1390 .elementor-element.elementor-global-1344{ overflow:visible; } /* spazio del carosello */ .elementor-1390 .elementor-element.elementor-global-1344 .swiper{ padding:30px 55px; } /* ----------------------------- LOGHI ------------------------------*/ .elementor-1390 .elementor-element.elementor-global-1344 img{ max-height:90px; width:auto; object-fit:contain; transition:.35s cubic-bezier(.22,.8,.22,1); opacity:.92; filter: drop-shadow(0 6px 10px rgba(0,0,0,.04)); } .elementor-1390 .elementor-element.elementor-global-1344 .swiper-slide{ transition:.35s ease; } .elementor-1390 .elementor-element.elementor-global-1344 .swiper-slide:hover img{ transform: translateY(-3px) scale(1.04); opacity:1; filter: drop-shadow(0 12px 18px rgba(0,0,0,.10)); } /* ----------------------------- FRECCE ------------------------------*/ .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: linear-gradient( 135deg, #ff1f2d, #ff6b2d, #ffc400, #38c95a, #27c7df, #8f4ccf ); border:1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 28px rgba(0,0,0,.16); transition:.25s cubic-bezier(.22,.8,.22,1); z-index:20; } .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button i, .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button svg{ color:#fff !important; fill:#fff !important; font-size:15px; width:15px; height:15px; } /* mini zoom */ .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button:hover{ transform:scale(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 16px 34px rgba(0,0,0,.18); } .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button:active{ transform:scale(.97); } /* posizione */ .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button-prev{ left:0; } .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button-next{ right:0; } /* ----------------------------- PAGINATION ------------------------------*/ .elementor-1390 .elementor-element.elementor-global-1344 .swiper-pagination-bullet{ width:8px; height:8px; opacity:.35; background:#C9A227; } .elementor-1390 .elementor-element.elementor-global-1344 .swiper-pagination-bullet-active{ width:26px; border-radius:999px; opacity:1; background: linear-gradient( 90deg, #ff1f2d, #ffc400, #27c7df ); } /* ----------------------------- MOBILE ------------------------------*/ @media(max-width:767px){ .elementor-1390 .elementor-element.elementor-global-1344 .swiper{ padding:22px 42px; } .elementor-1390 .elementor-element.elementor-global-1344 img{ max-height:62px; } .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button{ width:36px; height:36px; } .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button i, .elementor-1390 .elementor-element.elementor-global-1344 .elementor-swiper-button svg{ font-size:12px; width:12px; height:12px; } .elementor-1390 .elementor-element.elementor-global-1344 .swiper-pagination-bullet{ width:6px; height:6px; } .elementor-1390 .elementor-element.elementor-global-1344 .swiper-pagination-bullet-active{ width:20px; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-4ec6fb01 */.elementor-1390 .elementor-element.elementor-element-4ec6fb01 .elementor-button{ position:relative; overflow:hidden; padding:18px 40px; border-radius:999px; border:1.5px solid rgba(255,255,255,.35); color:#ffffff; font-weight:700; letter-spacing:1.2px; background:linear-gradient( 120deg, #ff1f2d 0%, #ff4d2f 18%, #ffc400 38%, #38c95a 58%, #27c7df 78%, #8f4ccf 100% ); background-size:220% 220%; box-shadow: 0 18px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35); transition:.45s cubic-bezier(.22,.8,.22,1); } /* luce premium */ .elementor-1390 .elementor-element.elementor-element-4ec6fb01 .elementor-button:before{ content:""; position:absolute; left:-120%; top:0; width:75%; height:100%; background:linear-gradient( 90deg, transparent, rgba(255,255,255,.65), transparent ); transform:skewX(-22deg); transition:.8s; } /* bordo interno elegante */ .elementor-1390 .elementor-element.elementor-element-4ec6fb01 .elementor-button:after{ content:""; position:absolute; inset:3px; border-radius:999px; border:1px solid rgba(255,255,255,.28); pointer-events:none; } .elementor-1390 .elementor-element.elementor-element-4ec6fb01:hover .elementor-button{ transform:translateY(-5px) scale(1.025); background-position:100% 50%; box-shadow: 0 28px 60px rgba(0,0,0,.26), 0 0 28px rgba(255,196,0,.22), inset 0 1px 0 rgba(255,255,255,.45); } .elementor-1390 .elementor-element.elementor-element-4ec6fb01:hover .elementor-button:before{ left:170%; } .elementor-1390 .elementor-element.elementor-element-4ec6fb01 .elementor-button:active{ transform:scale(.98); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7258b2c5 */.elementor-1390 .elementor-element.elementor-element-7258b2c5{ position:relative; min-height:560px; overflow:hidden; display:flex; align-items:center; background-position:center; background-size:cover; } /* overlay premium */ .elementor-1390 .elementor-element.elementor-element-7258b2c5:before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(18,12,10,.78) 0%, rgba(18,12,10,.55) 42%, rgba(18,12,10,.20) 72%, rgba(18,12,10,.10) 100% ); z-index:1; } /* leggera patina calda */ .elementor-1390 .elementor-element.elementor-element-7258b2c5:after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 25% 45%, rgba(201,162,39,.18), transparent 35%), radial-gradient(circle at 75% 25%, rgba(39,199,223,.14), transparent 30%); z-index:2; pointer-events:none; } /* contenitore testo */ .elementor-1390 .elementor-element.elementor-element-7258b2c5 .elementor-widget-wrap, .elementor-1390 .elementor-element.elementor-element-7258b2c5 .e-con-inner{ position:relative; z-index:5; } /* box vetro */ .elementor-1390 .elementor-element.elementor-element-7258b2c5 .elementor-widget-container{ position:relative; } /* titolo */ .elementor-1390 .elementor-element.elementor-element-7258b2c5 h2{ color:#fffdf8; font-size:58px; line-height:1.02; max-width:620px; text-shadow:0 14px 35px rgba(0,0,0,.28); } /* descrizione */ .elementor-1390 .elementor-element.elementor-element-7258b2c5 p{ color:rgba(255,255,255,.86); font-size:18px; line-height:1.75; max-width:620px; } /* bottone */ .elementor-1390 .elementor-element.elementor-element-7258b2c5 .elementor-button{ position:relative; overflow:hidden; padding:18px 42px; border-radius:999px; color:#fff; font-weight:700; letter-spacing:1.2px; background:linear-gradient(120deg,#ff1f2d,#ff4d2f,#ffc400,#38c95a,#27c7df,#8f4ccf); background-size:220% 220%; box-shadow:0 18px 40px rgba(0,0,0,.28); transition:.45s cubic-bezier(.22,.8,.22,1); } .elementor-1390 .elementor-element.elementor-element-7258b2c5 .elementor-button:before{ content:""; position:absolute; left:-120%; top:0; width:75%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); transform:skewX(-22deg); transition:.8s; } .elementor-1390 .elementor-element.elementor-element-7258b2c5 .elementor-button:hover{ transform:translateY(-5px) scale(1.03); background-position:100% 50%; box-shadow:0 30px 65px rgba(0,0,0,.35); } .elementor-1390 .elementor-element.elementor-element-7258b2c5 .elementor-button:hover:before{ left:170%; } /* mobile */ @media(max-width:767px){ .elementor-1390 .elementor-element.elementor-element-7258b2c5{ min-height:520px; padding:70px 24px; } .elementor-1390 .elementor-element.elementor-element-7258b2c5:before{ background:rgba(18,12,10,.72); } .elementor-1390 .elementor-element.elementor-element-7258b2c5 h2{ font-size:42px; } .elementor-1390 .elementor-element.elementor-element-7258b2c5 p{ font-size:16px; } }/* End custom CSS */