/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " IQIQO " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █ █ █▀▀ ▄▀▀▄ █▀▀▄ █▀▀ █▀▀▄ * █▀▀█ █▀▀ █▀▀█ █ █ █▀▀ █▐█▀ * ▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - HEADER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ header { top: 0; left: 0; z-index: 4; } .head_wrapper { padding: 1em; gap: 1em; transition: .25s ease-out; will-change: padding, background, filter; z-index: 2; } header.stuck .head_wrapper { padding: .5em 1em; background-color: rgb(var(--white-rgb) / 50%); backdrop-filter: blur(10px); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .head_logo { display: inline-block; --head-logo-width: 200px; /* <- in 'px' */ --head-logo-min: 200; --head-logo-max: 320; max-width: 320px; } .head_logo :where(img, svg) { width: 100%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAD CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .head_wrapper .flex-el { gap: 0 1em; } #head_landing_crea, #menu_btn_landing, .desk_sub_menu_wrap { display: none; } .head_btn { width: 3.5em; height: 3.5em; aspect-ratio: 1 / 1; padding: .75em; border-radius: 20em; border: 1px solid var(--black); background-color: var(--green); /* box-shadow: 0 0 1em rgb(10 10 10 / 25%), 0 0 .25em rgb(10 10 10 / 25%);*/ will-change: width, height; } .head_btn svg { display: block; width: 100%; } .head_btn svg path { fill: var(--black); transition: .25s ease; } .head_btn:hover { background-color: var(--yellow); } /*.head_btn:hover svg path { fill: var(--green); }*/ header.stuck .head_btn { width: 3em; height: 3em; } #menu_btn_landing .close { display: none; } #menu_btn_landing.tapped .open { display: none; } #menu_btn_landing.tapped .close { display: block; } .head_menu_btn.link { display: none; } .head_wrapper .flex-el > .head_landing_btn { display: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HAMBURGER / MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #hamburger { display: inline-block; font-size: var(--rem); line-height: 0; border-radius: 20em; border: 1px solid var(--black); background-color: var(--green); /* box-shadow: 0 0 1em rgb(10 10 10 / 25%), 0 0 .25em rgb(10 10 10 / 25%);*/ overflow: visible; cursor: pointer; transition: .25s ease; } #hamburger .wrap { width: 3.5em; height: 3.5em; padding: .5em; transition: .25s ease-out; will-change: width, height; } #hamburger span { display: block; position: absolute; left: 50%; transform: translateX(-50%); width: 2.5em; height: 4px; border-radius: .2em; background-color: var(--black); transform-origin: center; will-change: transform, width, height; transition: .25s ease; } #hamburger .top_bun { top: 1em; } #hamburger .burger { top: 50%; transform:translate(-50%, -50%); } #hamburger .bottom_bun { bottom: 1em; } header.stuck #hamburger .wrap { width: 3em; height: 3em; } header.stuck #hamburger span { width: 1.75em; height: 3px; } header.stuck #hamburger .top_bun { top: .875em; } header.stuck #hamburger .bottom_bun { bottom: .875em; } /* Tapped / Clicked animation */ #hamburger.tapped { } #hamburger.tapped span { width: 2.5em; background-color: var(--black); box-shadow: none; transition: .25s ease; } #hamburger.tapped .burger { opacity: 0; } #hamburger.tapped .top_bun { top: 50%; transform: translate(-50%,-50%) rotate(45deg); } #hamburger.tapped .bottom_bun { top: 50%; transform: translate(-50%,-50%) rotate(-45deg); } #hamburger:hover { background-color: var(--yellow); } /*#hamburger:hover span, #hamburger.tapped:hover span { background-color: var(--green); }*/ header.stuck #hamburger.tapped .top_bun { top: 50%; } header.stuck #hamburger.tapped .bottom_bun { top: 50%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ NAV MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #main_nav, #landing_nav { top: calc(5.5em - 1px); right: 1.5em; transform: scale(0); transform-origin: calc(100% - 1em) top; width: calc(100% - 3em); max-width: 52em; min-height: unset; background-color: var(--white); border-radius: 1em; box-shadow: 0 0 .5em rgb(10 10 10 / 25%), 0 0 1.5em rgb(10 10 10 / 25%); overflow: hidden; z-index: 2; transition: .25s ease-out; } #main_nav.active, #landing_nav.active { transform: scale(1); } #main_nav .menu_wrapper { top: 0; right: 0; } #main_nav .menu-menu-container, #main_nav .menu { width: 100%; } #main_nav .menu { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: calc(97.5dvh - 5.5em); padding: 1em 0; } #main_nav .menu li { position: relative; width: 100%; flex: 1 1 auto; font: inherit; line-height: 1; } #main_nav .menu li.current-menu-item a { opacity: .5; } #main_nav .menu li a { display: flex; align-items: center; justify-content: space-between; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: .75em 1em; border-bottom: 1px solid rgb(var(--black-rgb) / 50%); font: 700 2.5vh / 1.25 var(--main-font); color: var(--black); text-transform: uppercase; } #main_nav .menu li a:hover { color: var(--green); } #main_nav .menu li:last-of-type a { border-bottom: 0; } #main_nav .menu li.mobile { display: flex; align-items: center; justify-content: space-between; } #main_nav .menu li.mobile a { width: 100%; padding-right: 5rem; } #main_nav .menu li.mobile button { display: flex; align-items: center; justify-content: center; z-index: 1; position: absolute; top: 50%; right: 1em; transform: translateY(-50%); width: 6.5vh; height: 6.5vh; border-radius: 20em; border: 1px solid var(--white); background-color: var(--white); box-shadow: 0 0 .25em rgb(10 10 10 / 25%); } #main_nav .menu li.mobile button svg { width: 2.5vh; } #main_nav .menu li.mobile button svg path { fill: var(--black); } #main_nav .menu li.menu_btn_1 { background-color: var(--orange); } #main_nav .menu li.menu_btn_1 a { color: var(--black); } #main_nav .menu li.menu_btn_1 button svg path { fill: var(--orange); } #main_nav .menu li.menu_btn_2 { background-color: var(--blue); } #main_nav .menu li.menu_btn_2 a { color: var(--white); } #main_nav .menu li.menu_btn_2 button svg path { fill: var(--blue); } #main_nav .menu li.menu_btn_3 { background-color: var(--green); } #main_nav .menu li.menu_btn_3 a { color: var(--black); } #main_nav .menu li.menu_btn_3 button svg path { fill: var(--green); } .menu_settori { transform: translateX(100%); z-index: 1; transition: .25s ease-out; } .menu_settori.active { transform: translateX(0); } .menu_settori .block { padding: 2em 1.5em; transform: translateX(100%); transition: .25s ease-out; } .menu_settori .block::before { display: inline-block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(10 10 10 / 7.5%); } .menu_settori .block.active { transform: translateX(0%); } .menu_settori .block span.cat { font: 700 75% / 1.25 var(--main-font); color: var(--white); text-transform: uppercase; text-align: left; } .menu_settori .block .back_btn { gap: .5em; padding:.5em 1em; border: 1px solid var(--white); border-radius: 20em; font: 500 100% / 1.25 var(--main-font); color: var(--white); text-transform: uppercase; } .menu_settori .block .back_btn svg { width: 1em; min-width: 1em; } .menu_settori .block .back_btn svg path { fill: var(--white); } .menu_settori .block .back_btn span { display: inline-block; } .menu_settori .block a.cat { display: none; } .menu_settori .block .text { margin-top: 1.5em; padding-top: 1.5em; border-top: 1px solid rgb(var(--white-rgb) / 50%); } .menu_settori .block .text .extra_link a, #landing_nav .extra_link a, .desk_sub_menu .sub_menu.extra_link a { padding-left: .5em; padding-right: .5em; border: 1px solid var(--black); border-radius: .5em; text-transform: uppercase; text-align: center; } .menu_settori .block .text .extra_link a:hover, #landing_nav .extra_link a:hover, .desk_sub_menu .sub_menu.extra_link a:hover { background-color: var(--white); } .menu_settori .block .text .sub_menu li { list-style: none; margin: 0; align-content: end; } .menu_settori .block .text .sub_menu li a { display: block; padding: 1.5vh 0; font: 700 1.75vh / 1.25 var(--main-font); border-bottom: 1px solid var(--black); } .menu_settori .block .text .sub_menu li a.flex { display: flex; gap: 0 .5em; } .menu_settori .block .text.white .sub_menu li a { border-color: var(--white); } .menu_settori .block button.more { display: none; } #sub_menu_1 { background-color: var(--orange); } #sub_menu_1 span.cat { color: var(--black); } #sub_menu_1 .back_btn { border-color: var(--black); color: var(--black); } #sub_menu_1 .back_btn svg path { fill: var(--black); } #sub_menu_1 .text { border-color: var(--black); } #sub_menu_1 .text .sub_menu ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5em; } #sub_menu_1 .text .sub_menu li a { color: var(--black); } #sub_menu_2 { background-color: var(--blue); } #sub_menu_3 { background-color: var(--green); } #sub_menu_3 span.cat { color: var(--black); } #sub_menu_3 .back_btn { border-color: var(--black); color: var(--black); } #sub_menu_3 .back_btn svg path { fill: var(--black); } #sub_menu_3 .text { border-color: var(--black); } #sub_menu_3 .text .sub_menu li a { color: var(--black); } .desk_sub_menu { display: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ NAV LANDING ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #landing_nav { height: auto; max-height: calc(97.5dvh - 5.5em); } #landing_nav .menu_wrapper { padding: 2em 1.5em; } #landing_nav h3 { font: 700 125% / 1.25 var(--title-font); } #landing_nav .link { padding: .5em 1.5em; margin-bottom: 1em; background-color: transparent; border-color: var(--black); font-size: 2.125vh; } #landing_nav .link svg { width: 1.25em; filter: none !important; } #landing_nav .link:hover { background-color: var(--white); color: var(--black); } #landing_nav ul { grid-template-columns: 1fr 1fr; gap: .5em 1.5em; } #landing_nav li { list-style: none; margin: 0; align-content: end; } #landing_nav li a { display: block; padding: .75vh 0; font: 700 1.75vh / 1.25 var(--main-font); border-bottom: 1px solid var(--black); } #landing_nav li a.flex { display: flex; gap: 0 .5em; } /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKs / BTNs STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .link { display: block; position: relative; width: fit-content; padding: .75em 1.5em; background-color: var(--green); border: 1px solid var(--green); border-radius: 20em; font: 700 112.5% / 1.25 var(--main-font); color: var(--black); text-align: center; } .link:hover { background-color: var(--black); color: var(--green); } .link.flex { display: flex; gap: .75em; } .link.flex span { display: block; min-width: fit-content; } .link.flex :where(svg, img) { filter: brightness(0); transition: .25s ease; } .link.flex:hover svg, .link.flex:hover img { filter: brightness(0) invert(1); } .link.link_w { background-color: var(--white); border-color: var(--white); color: var(--black); } .link.link_w:hover { background-color: var(--black); color: var(--white); } .link.link_b { background-color: var(--blue); border-color: var(--blue); color: var(--white); } .link.link_b:hover { background-color: var(--white); color: var(--blue); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .filter_color { background-color: var(--color); mix-blend-mode: multiply; opacity: .5; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SCROLL BUTTON ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #scroll_btn { display: inline-block; position: absolute; left: 50%; bottom: 1.5em; --scroll-px: 40px; --scroll-min: 40; --scroll-max: 60; max-width: 60px; transform: translateX(-50%); cursor: pointer; z-index: 1; } #scroll_btn svg { width: 100%; animation: hang_scroll 1.5s ease-in-out infinite forwards alternate; animation-play-state: running; } @keyframes hang_scroll { from { transform: translateY(0); } to { transform: translateY(.5em); } } #scroll_btn:hover svg, #scroll_btn:focus svg, #scroll_btn:active svg { animation-play-state: paused; } #scroll_btn svg path { fill: var(--black); transition: .25s ease; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SWIPER NAV ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .nav_btn { width: 3.5em; padding: .25em; filter: drop-shadow(0 0 .5em rgb(10 10 10 / 50%)); z-index: 1; cursor: pointer; transition: .25s ease; } .nav_btn.abs { top: 50%; transform: translateY(-50%); } .nav_btn :where(img, svg) { width: 100%; } .nav_btn svg path { fill: var(--black); transition: .25s ease; } .nav_prev.abs { left: 0; } .nav_next.abs { right: 0; } .nav_btn.swiper-button-disabled { display: none; } /* Dots */ .nav_dots { gap: .5em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ COMPONENTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #overlay { display: none; background-color: rgb(10 10 10 / 25%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 3; } .green { background-color: var(--green); } .orange { background-color: var(--orange); } .black { background-color: var(--black); } .blue { background-color: var(--blue); } /* Text */ .text h2 { color: var(--orange); } .text.tac .link, .text.tac_mobile .link { margin-left: auto; margin-right: auto; } .text ol li { list-style: decimal; } .text p a { text-decoration: underline; } .text p a:hover { color: var(--orange); } /* Social */ .social { gap: 1em; } .social a { display: inline-block; width: 3.5em; padding: .5em; } .social a :where(img,svg) { width: 100%; } .social a svg path { fill: var(--green); transition: .25s ease; } .line { display: block; width: 100%; margin-right: auto; margin-left: auto; height: 1px; border-top: 1px solid rgb(var(--black-rgb) / 50%); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TAGS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .tags { gap: 1em; } .tags .tag { display: inline-block; padding: .75em 1.25em; border: 1px solid var(--black); border-radius: 20em; font: 700 100% / 1.25 var(--main-font); color: var(--black); } .single_tag { display: flex; align-items: center; justify-content: center; width: fit-content; margin: 0 auto; padding: .5em .75em; border-radius: 20em; background-color: var(--white); font: 500 75% / 1.25 var(--main-font); color: var(--black); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FIGURINE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .figurina { aspect-ratio: 5.5 / 8; box-shadow: 0 0 .5em rgb(10 10 10 / 25%); } .fig_outline { display: block; border: 1px dashed rgb(var(--black-rgb) / 25%); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ ANIMATIONS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .animate { transition: all .5s ease-out, opacity .25s ease-out; will-change: transform; } .textAnimTop { transform: translateY(25%) rotateX(25deg) scale(.75); opacity: 0; } .textAnimTop.active { transform: translateY(0%) rotateX(0deg) scale(1); opacity: 1; } .animTop { transform: translateY(25%) rotateX(50deg) scale(.5); opacity: 0; } .animTop.active { transform: translateY(0%) rotateX(0deg) scale(1); opacity: 1; } .animFadeIn { transform: scale(.5); opacity: 0; } .animFadeIn.active { transform: scale(1); opacity: 1; } .animSplit .figurina { opacity: 0; will-change: transform; transition: all .5s ease-out, opacity .25s ease-out; } .animSplit.active .figurina { opacity: 1; } .animSplit .figurina:nth-of-type(1) { transform: translate(-25%, -50%) rotate(-10deg) scale(.75); } .animSplit.active .figurina:nth-of-type(1) { transform: translate(5%, 0%) rotate(-5deg) scale(1); } .animSplit .figurina:nth-of-type(2) { transform: translate(25%, 50%) rotate(7.5deg) scale(.75); } .animSplit.active .figurina:nth-of-type(2) { transform: translate(-5%, 2.5%) rotate(2.5deg) scale(1); } .bounce { transition-timing-function: cubic-bezier(.5,.1,.2,1.45); } /** * * █▀▀ ▄▀▀▄ ▄▀▀▄ ▀▀█▀▀ █▀▀ █▀▀▄ * █▀▀ █ █ █ █ █ █▀▀ █▐█▀ * ▀ ▀▀ ▀▀ ▀ ▀▀▀ ▀ ▀▀ - FOOTER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ footer, #credits { background-color: var(--black); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ STRUCTURE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Foot Block */ .foot_block {} .foot_block h4 { font-size: 125%; } .foot_block li { display: block; list-style: none; margin: 0; } .foot_block p {} .foot_block p a { display: inline-block; text-decoration: none; } .foot_block p a:hover, .foot_block li a:hover { text-decoration: underline; color: var(--green); } .foot_block .foot_loghi {} .foot_block .foot_loghi li {} .foot_block .foot_loghi li a { display: inline-block; height: 3.25em; padding: .75em 0; } .foot_block .foot_loghi li a img { width: 100%; height: 100%; object-fit: contain; } /* Foot Utility */ #foot_utility li a { display: inline-block; padding: .5em 0; font-weight: 300; } #foot_utility .foot_menu { margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid rgb(var(--green-rgb) / 50%); } #foot_utility .foot_menu li a { font-weight: 500; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CREDITS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #credits { margin-top: -1px; padding-bottom: 5em; } #credits p { margin: 0 auto; font-size: 75%; line-height: 1.5; color: var(--green); } #credits .resp_sep { display: none; } #credits a { display: inline-block; font: inherit; color: inherit; } #credits a#credits_studio { margin-top: 1em; padding: .5em 0; font-weight: 700; text-transform: uppercase; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BACK TO TOP ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #back_top { display: none; z-index: 2; bottom: .5em; right: .5em; --back-top-px: 40px; --back-top-min: 40; --back-top-max: 60; max-width: 60px; padding: .25em; cursor: pointer; transition: .25s ease; } #back_top :where(img, svg) { width: 100%; } #back_top svg path { fill: var(--black); } /** * * ▄▀▀ █▀▀ ▄▀▀ ▀▀█▀▀ ▀ ▄▀▀▄ █▄ █ ▄▀▀ * ▀▄ █▀▀ █ █ █ █ █ █ ▀█ ▀▄ * ▀▀ ▀▀▀ ▀▀ ▀ ▀ ▀▀ ▀ ▀ ▀▀ - SECTIONS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1 { overflow: hidden; } .s1_title { padding-top: 5.5em; } .s1_title .h1, .s1_title h1 { opacity: 0; transition: all .5s ease-out, opacity .25s ease-out; will-change: transform; } .s1_title.active .h1, .s1_title.active h1 { opacity: 1; } .s1_title .h1 { transform: translateY(-50%) rotateX(-25deg); } .s1_title.active .h1 { transform: translate(0%, 0%) rotate(0deg); } .s1_title .h1 p { font-weight: 700; font-size: var(--h1-size); line-height: 1; } .s1_title h1 { transform: scale(.5); } .s1_title.active h1 { transform: scale(1); } .s1_title .h1 + h1 { margin-top: 1.5em; font-size: 125%; font-weight: 400; transform: translateY(25%) rotateX(25deg); } .s1_title.active .h1 + h1 { transform: translate(0%, 0%) rotateX(0deg); } .s1_page .s1_title h1.p { color: var(--orange); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION CLIENTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .sec_clienti .text h3 { font-weight: 700; font-size: 150%; color: var(--blue); } .sec_clienti .swiper, .sec_clienti .grid { margin: .5em auto 1em auto; } .sec_clienti .grid { display: none; grid-template-columns: 1fr 1fr 1fr 1fr; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION REVIEWS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #sec_reviews { background-color: var(--white); } #sec_reviews .sec_title h3 { color: var(--orange); } #sec_reviews .container > .link { margin: 2.5em auto 0 auto; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION BLOG ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .sec_blog .container, .sec_form:not(#s4_contatti) .container { width: calc(100% - 2em); border-radius: 1.5em; background: linear-gradient(125deg, rgba(255 115 0 / 100%) 0%, rgb(239 140 59 / 100%) 100%); } .sec_blog .sec_title.text h2 { font-size: 100%; line-height: 1; color: var(--white); text-transform: uppercase; letter-spacing: .25ch; } .sec_blog .sec_title.text h2 + h3 { margin-top: .5rem; } .sec_blog .container > .link { margin: 2.5em auto 0 auto; } /** * * ▄▀▀ ▄▀▀▄ █▀▀▄ █▀▀▄ ▄▀▀ * █ █▀▀█ █▐█▀ █ █ ▀▄ * ▀▀ ▀ ▀ ▀ ▀▀ ▀▀▀ ▀▀ - CARDS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD EMPTY ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_empty { padding: 2em 1.5em; } .card_empty svg { width: 6em; } .card_empty .text { margin-top: 1em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD BLOG ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_blog a { line-height: 0; border-radius: 1em; overflow: hidden; } .card_blog picture, .card_blog picture > img { will-change: transform; transition: .5s ease; } .card_blog .card_filter { background: linear-gradient(to bottom, rgb(10 10 10 / 0%) 0%,rgb(10 10 10 / 90%) 100%); } .card_blog .text { bottom: 0; left: 0; padding: 2em 1.5em; max-height: 100%; overflow: hidden; transition: .25s ease-out; } .card_blog .text h3 { font: 700 100% / 1.25 var(--main-font); text-shadow: 0 0 .5em rgb(10 10 10 / 75%); } .card_blog button.link { display: none; position: absolute; bottom: 2rem; left: 50%; transform: translate(-50%, 0%) scale(0); transform-origin: bottom center; padding: .5em 1.5em; font-size: 100%; opacity: 0; } .card_blog button svg { width: 1.75em; min-width: 1.75em; } .card_blog .single_tag { margin-bottom: 1em; } .card_blog a:hover picture > img { transform: scale(1.05); } .card_blog a:hover .text { transform: translateY(-4.25em); } .card_blog a:hover button.link { transform: translate(-50%, 0%) scale(1); opacity: 1; } .card_blog a button.link:hover svg { filter: none; } .card_blog a button.link:hover svg path { fill: var(--green); } /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s2_home .block { overflow: hidden; } #s2_home .block .wrapper { gap: var(--c10v) 0; } #s2_home .block .tags { gap: .5em; margin-top: 1em; } #s2_home .block .tag { border: 0; background-color: rgb(var(--white-rgb) / 50%); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); font-size: 85%; transform: scale(0); opacity: 0; transition: all.25s ease, transform .375s ease-out, opacity .365s ease-out; } #s2_home .block .tag:nth-of-type(2) { transition-delay: 0s, .05s, .05s; } #s2_home .block .tag:nth-of-type(3) { transition-delay: 0s, .1s, .1s; } #s2_home .block .tag:nth-of-type(4) { transition-delay: 0s, .15s, .15s; } #s2_home .block .tag:nth-of-type(5) { transition-delay: 0s, .2s, .2s; } #s2_home .block .tag:nth-of-type(6) { transition-delay: 0s, .25s, .25s; } #s2_home .block .active .tag { transform: scale(1); opacity: 1; } #s2_home .block .tag.flex { display: flex; gap: 0 .5em; } #s2_home .block .text :where(h2, h3) { text-shadow: 4px 4px 4px rgb(10 10 10 / 25%); } #s2_home .block .text h2 { margin-top: .5em; font-size: 175%; color: var(--white); } #s2_home .block .text h3 { font-weight: 700; font-size: 150%; line-height: 1.25; text-transform: uppercase; letter-spacing: .25ch; } #s2_home .block .trigger_btn { display: none; } #s2_home .block .link_wrap { transition: all .25s ease, transform .5s cubic-bezier(.5,.1,.2,1.45), opacity .375s ease-out; } #s2_home .block .pic_wrap .figurina { opacity: 0; transition: .375s ease-out; } #s2_home .block .pic_wrap.active .figurina { opacity: 1; } #s2_home .block .album_img { margin-bottom: calc(-1 * var(--c15v)); } #s2_home #block_1 { background-color: var(--orange); } /*#s2_home #block_1 .wrapper { padding-top: calc(var(--c5v) + 5em); }*/ #s2_home #block_1 > picture { opacity: .5; } #s2_home #block_1 .pic_wrap .fig_1 { transform: translate(-100%, 25%) rotate(-25deg) scale(0); } #s2_home #block_1 .pic_wrap .fig_2 { transform: translate(100%, 25%) rotate(25deg) scale(0); } #s2_home #block_1 .pic_wrap.active .fig_1 { transform: translate(5%, 2.5%) rotate(-5deg) scale(1); } #s2_home #block_1 .pic_wrap.active .fig_2 { transform: translate(-5%, -5%) rotate(2.5deg) scale(1); } #s2_home #block_2 { background-color: var(--blue); } #s2_home #block_2 > picture { mix-blend-mode: multiply; opacity: .4; } #s2_home #block_2 .pic_wrap { gap: .75em; } #s2_home #block_2 .pic_wrap .fig_1 { transform-origin: left center; transform: translateX(-50%) scale(.5); } #s2_home #block_2 .pic_wrap .fig_2 { transform-origin: right center; transform: translateX(50%) scale(.5); } #s2_home #block_2 .pic_wrap.active .fig_1 { transform: translateX(0%) scale(1); } #s2_home #block_2 .pic_wrap.active .fig_2 { transform: translateX(0%) scale(1); } #s2_home #block_3 { background-color: var(--green); } #s2_home #block_3 > picture { object-position: bottom; } #s2_home #block_3 .pic_wrap .fig_1 { transform: translate(50%, 75%) rotate(0deg) scale(0.5); z-index: 1; } #s2_home #block_3 .pic_wrap .fig_2 { transform: translate(-50%, 75%) rotate(0deg) scale(0.5); } #s2_home #block_3 .pic_wrap.active .fig_1 { transform: translate(0%, 0%) rotate(-3.75deg) scale(1); z-index: 1; } #s2_home #block_3 .pic_wrap.active .fig_2 { transform: translate(0%, -2.5%) rotate(5deg) scale(1); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s3_home .text p { max-width: 45ch; margin-left: auto; margin-right: auto; } .sec_clienti .grid { gap: 1.5em 2em; } .sec_clienti .grid picture { transform: scale(.25); opacity: 0; transition: .375s ease-out; } .sec_clienti .grid picture:nth-of-type(2){ transition-delay: 0.025s; } .sec_clienti .grid picture:nth-of-type(3){ transition-delay: 0.05s; } .sec_clienti .grid picture:nth-of-type(4){ transition-delay: 0.075s; } .sec_clienti .grid picture:nth-of-type(5){ transition-delay: 0.1s; } .sec_clienti .grid picture:nth-of-type(6){ transition-delay: 0.125s; } .sec_clienti .grid picture:nth-of-type(7){ transition-delay: 0.15s; } .sec_clienti .grid picture:nth-of-type(8){ transition-delay: 0.175s; } .sec_clienti .grid picture:nth-of-type(9){ transition-delay: 0.2s; } .sec_clienti .grid picture:nth-of-type(10){ transition-delay: 0.225s; } .sec_clienti .grid picture:nth-of-type(11){ transition-delay: 0.25s; } .sec_clienti .grid picture:nth-of-type(12){ transition-delay: 0.275s; } .sec_clienti .grid picture:nth-of-type(13){ transition-delay: 0.3s; } .sec_clienti .grid picture:nth-of-type(14){ transition-delay: 0.325s; } .sec_clienti .grid picture:nth-of-type(15){ transition-delay: 0.35s; } .sec_clienti .grid picture:nth-of-type(16){ transition-delay: 0.375s; } .sec_clienti .grid.active picture { transform: scale(1); opacity: 1; } /*.sec_clienti .grid picture { max-height: 4.5em; }*/ .sec_clienti .grid picture img { object-fit: contain; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s4_home .wrapper { gap: 4em 2.5em; } #s4_home .block { transform: translateY(50%) scale(.5); opacity: 0; transition: .375s ease-out; } #s4_home .block.active { transform: translateY(0%) scale(1); opacity: 1; } #s4_home .block img { width: 4.5em; margin: 0 auto 1.5em auto; } #s4_home .block h3 { font: 700 125% / 1.25 var(--main-font); } #s4_home .nav_dots { position: relative; top: auto; bottom: auto; left: auto; margin-top: 1.5em; } #s4_home .nav_dots span { width: .75em; height: .75em; padding: 0; margin: 0; background: transparent; border: 1px solid var(--black); opacity: 1; transition: .25s ease; } #s4_home .nav_dots span.swiper-pagination-bullet-active { background: var(--black); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 5 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s5_home { overflow-x: clip; } #s5_home .text h2 { color: var(--black); } #s5_home .text h2 + p { margin-top: 1.5rem; } #s5_home .text p { font: 700 175% / 1 var(--comic-font); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 6 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █▀▀▄ ▄▀▀▄ ▄▀▀▀ █▀▀ ▄▀▀ * █ █ █▀▀█ █ ▀▌ █▀▀ ▀▄ * █▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀ - TEMPLATES _ PAGINE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE PER TUTTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ #s1_privati .s1_title .h1 p { font-size: calc(var(--h1-size) * .75) } /* Section 2 */ .sec_split .sec_img { padding: 5% 0; } .sec_split .figurina { width: 75%; } .sec_split .fig_1 { transform: translate(5%, -7.5%) rotate(-1.25deg); z-index: 1; } .sec_split .fig_2 { transform: translate(0%, 7.5%) rotate(2.5deg); margin-left: -50%; } #s2_privati .fig_1, #s2_privati .fig_2 { width: 25%; } #s2_privati .fig_1 { top: 0; left: var(--c2o); z-index: 2; } #s2_privati .fig_2 { bottom: 0; left: 50%; margin: 0; z-index: 1; } #s2_privati .fig_3 { aspect-ratio: unset; box-shadow: none; width: calc(100% - var(--c5o)); transform: translateX(101%) scale(.75); } #s2_privati .fig_3 img { object-fit: contain; } #s2_privati .active .fig_1 { transform: translate(15%, 15%) rotate(-1.25deg) scale(1); } #s2_privati .active .fig_2 { transform: translate(-25%, -25%) rotate(2.5deg) scale(1); } #s2_privati .active .fig_3 { transform: translateX(0%) scale(1); } /* Section 3 */ #s3_privati .sec_title h2 { color: var(--black); } #s3_privati .sec_title h2 + div { margin-top: 1.5em; } #products_head { gap: 1.5em var(--c2o); } #products_head .product_btn { padding: 1em 1em; background-color: var(--green); border: 1px solid var(--black); border-radius: 20em; } #products_head .product_btn picture { max-width: 24em; margin: 0 auto; } #products_head .product_btn picture > img { object-fit: contain; object-position: bottom; } #products_head .product_btn .text { gap: .75em; } #products_head .product_btn .text h3 { font-weight: 700; font-size: 100%; color: var(--black); transition: .25s ease; } #products_head .product_btn .text svg { display: none; width: 2.5em; } #products_head .product_btn .text svg :where(path, rect) { fill: var(--white); transition: .25s ease; } #products_head .product_btn.active .text svg .vert { opacity: 0; } #products_head .product_btn .text svg {} .cat_wrapper .sec_title + .grid { padding-top: var(--c7v); } .cat_wrapper .grid { grid-template-columns: 1fr 1fr; gap: var(--c7v) var(--c3o); } .cat_wrapper .card_product {} .cat_wrapper .card_product picture {} .cat_wrapper .card_product picture > img { object-fit: contain; object-position: bottom; } .cat_wrapper .card_product picture .link { display: none; } .cat_wrapper .card_product .text { margin-top: .5em; } .cat_wrapper .card_product .text h3 { font-size: 125%; } .cat_wrapper + .cat_wrapper { padding-top: var(--c20v); } /* Section 4 */ #s4_privati .container { gap: 1.5em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CORPORATE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ #s1_corporate .s1_title :where(h1, .h1 p) { color: var(--blue); } /* Section 3 */ #s3_corporate .text h2 { color: var(--blue); } /* Section 4 */ #s4_corporate .sec_title h2 { color: var(--white); } #s4_corporate .wrapper + .wrapper { margin-top: var(--c10v); } #s4_corporate .swiper-slide { padding: 0 var(--c5o); } #s4_corporate .slide_title { gap: 1em; } #s4_corporate .slide_title picture { width: 7.5em; } #s4_corporate .slide_title picture img { object-fit: contain; } #s4_corporate .slide_title + .mobile_slider { margin-top: 1em; } #s4_corporate .mobile_slider { padding: 1.5em 2.5em; background-color: rgb(var(--white-rgb) / 25%); border-radius: 1.5em; } #s4_corporate .mobile_slider .swiper { max-width: 1024px; overflow: visible; overflow-x: clip; } #s4_corporate .mobile_slider .swiper-slide { padding: 0; } #s4_corporate .slide_wrap { gap: 1em 1.5em; } #s4_corporate .slide_wrap picture { max-width: 14em; } #s4_corporate .slide_wrap picture img { object-fit: contain; } #s4_corporate .slide_wrap .text h4 { font-size: calc(var(--h4-size) * .875); } #s4_corporate .slide_wrap .text h4 + p { margin-top: .75em; } #s4_corporate .slide_wrap .text p { font-size: 85%; } #s4_corporate .nav_btn { width: 2.5em; height: 2.5em; filter: none; } #s4_corporate .nav_btn svg path { fill: var(--white); transition: .25s ease; } #s4_corporate .nav_dots { top: auto; bottom: auto; left: auto; right: auto; padding: var(--c10v) 0 1.5em 0; gap: 1em; } #s4_corporate .nav_dots span { width: 1em; height: 1em; margin: 0; padding: 0; border: 1px solid rgb(var(--white-rgb) / 50%); background: transparent; opacity: 1; } #s4_corporate .nav_dots span.swiper-pagination-bullet-active { background: var(--white); } /* Section 5 */ #s5_coprorate { overflow: hidden; } #s5_corporate .sec_title :where(h2, h3, h4, h5, p, li) { color: var(--blue); } #s5_corporate .main_wrapper { margin-top: 1.5em; } #s5_corporate .tags { z-index: 2; } #s5_corporate .tags .tag { background-color: var(--white); } #s5_corporate .tags .tag:hover { background-color: var(--blue); color: var(--white); } #s5_corporate .card_settore { margin-bottom: var(--c10v); background-color: var(--white); border-radius: 1em; overflow: hidden; box-shadow: 0 0 1.5em rgb(10 10 10 / 25%); transform-origin: center top; transition: 0s; } #s5_corporate .card_settore:last-of-type { margin-bottom: 0; } #s5_corporate .card_settore .text { padding: 2em 1.5em; } #s5_corporate .card_settore .text h2 { font-size: calc(var(--h2-size)* .875); color: var(--black); } #s5_corporate .card_settore .text h3 { font: 600 125% / 1.1 var(--title-font); transition: .25s ease; } #s5_corporate .card_settore .text p { display: none; } #s5_corporate .card_settore .link.abs-center { position: absolute; width: max-content; color: var(--blue); } #s5_corporate .card_settore .link.abs-center:hover { color: var(--white); } /* Section 6 */ #form h2 + .wpforms-container { margin-top: 1.5em; } #s6_corporate.sec_form .container { background: var(--blue); } #s6_corporate #form h2, #s6_corporate #form input, #s6_corporate #form .wpforms-field textarea, #s6_corporate #form .wpforms-field label, #s6_corporate #form .wpforms-field input::placeholder, #s6_corporate #form .wpforms-field textarea::placeholder { color: var(--white); } #s6_corporate #form input, #s6_corporate #form .wpforms-field textarea { border-color: var(--white); } #s6_corporate #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"] { border-color: var(--white); } #s6_corporate #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"]:checked { background-image: url(../images/svg/checked_w.svg); } #s6_corporate #form button[type="submit"], #s6_corporate #form input[type="submit"] { border-color: var(--white); color: var(--white); } #s6_corporate #form button[type="submit"]:hover, #s6_corporate #form input[type="submit"]:hover { background-color: var(--white); color: var(--blue); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CHI SIAMO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ /* Section 3 */ #s3_chi + section { margin-top: var(--c25v); } #s3_chi .ext_wrap h2 + .text { margin-top: 1.5em; } #s3_chi .fig_wrapper { margin-top: calc(-1 * var(--c15v)); transform: translateY(50%); } #s3_chi .figurina { border-width: .5em; opacity: 0; transition: .5s ease-out; will-change: transform; } #s3_chi .fig_1 { width: 37.5%; transform: translate(-40%, 0%) rotate(-3.75deg) scale(.5); aspect-ratio: 8 / 5.5; } #s3_chi .fig_2 { width: 25%; transform: translate(0%, 2.5%) rotate(5deg) scale(.5); z-index: 1; } #s3_chi .fig_3 { width: 37.5%; transform: translate(40%, 45%) rotate(2.5deg) scale(.5); aspect-ratio: 8 / 5.5; } #s3_chi .active .figurina { opacity: 1; } #s3_chi .active .fig_1 { transform: translate(10%, 10%) rotate(-3.75deg) scale(1); } #s3_chi .active .fig_2 { width: 25%; transform: translate(0%, 2.5%) rotate(5deg) scale(1); z-index: 1; } #s3_chi .active .fig_3 { width: 37.5%; transform: translate(-10%, 35%) rotate(2.5deg) scale(1); aspect-ratio: 8 / 5.5; } /* Section 4 */ /* Section 5 */ #s5_chi .sec_title h2 { color: var(--black); } #s5_chi .grid { grid-template-columns: 1fr; gap: var(--c15v) var(--c5o); } #s5_chi .block {} #s5_chi .block img { width: 4.5em; filter: brightness(0) invert(1); } #s5_chi .block img + h3, #s5_chi .block img + p { margin-top: 1.5em; } #s5_chi .block h3 { font: 700 125% / 1.25 var(--main-font); } #s5_chi .block :where(h2, h3, h4, h5, p, li) { text-shadow: 0 0 .25em rgb(10 10 10 / 25%); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE FAQ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .accordion .accordion_main_head { gap: 1.5em; padding: 2em 0; border-top: 1px solid var(--grey); text-align: left; } .accordion .accordion_main_head h2, #accordion_video h2 { font-size: calc(var(--h2-size) * .75); transition: .25s ease; } .accordion .accordion_main_head svg, .accordion .accordion_head svg { width: 2.5em; min-width: 2.5em; } .accordion .accordion_main_head svg :where(path, rect) { fill: var(--black); transition: .25s ease; } .accordion .accordion_main_head.active h2 { color: var(--orange); } .accordion .accordion_main_head.active svg :where(path, rect) { fill: var(--orange); } .accordion .accordion_main_head.active svg rect.vert, .accordion .accordion_head.active svg rect.vert { opacity: 0; } .accordion .accordion_wrap { display: none; } .accordion .sub_accordion { margin-bottom: 1em; background: var(--orange); border-radius: 1em; transition: .25s ease; } .accordion .sub_accordion.active { background-color: var(--grey); } .accordion .accordion_head { padding: 2em 1.5em; text-align: left; } .accordion .accordion_head h3 { font: 400 100% / 1.25 var(--main-font); color: var(--white); text-transform: uppercase; transition: .25s ease; } .accordion .accordion_head svg { width: 3.5em; min-width: 3.5em; } .accordion .accordion_head svg :where(path, rect) { fill: var(--white); transition: .25s ease; } .accordion .accordion_head.active h3 { color: var(--black); } .accordion .accordion_head.active svg :where(path, rect) { fill: var(--black); } .accordion .accordion_body { display: none; padding: 0 1.5em 2em 1.5em; } .accordion .accordion_body p a { color: var(--orange); text-decoration: underline; } .accordion .accordion_body p a:hover { color: var(--white); } #accordion_video h2 { padding: 2rem 0; border-top: 1px solid var(--grey); } #accordion_video .grid { grid-template-columns: 1fr; gap: 2em; } #accordion_video .video_block { border-radius: 1em; overflow: hidden; } #accordion_video .video_block p { line-height: 0; } #accordion_video .video_block iframe { width: 100%; height: fit-content; aspect-ratio: 16 / 9; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE PREZZI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ /* Section 2 */ #tab_prezzi .grid { grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr; } #tab_prezzi p { font-size: 60%; padding: 0 .5em; } #tab_prezzi .tab_head { padding: 0 1.5em; } #tab_prezzi .tab_head p { text-transform: uppercase; } #tab_prezzi .tab_row { margin-top: 1em; padding: 1.5em; border-radius: 1em; background-color: rgb(var(--grey-rgb) / 50%); } #tab_prezzi .tab_head p, #tab_prezzi .tab_row p { text-align: center; } #tab_prezzi .tab_head p:first-of-type, #tab_prezzi .tab_row p:first-of-type { writing-mode: unset; align-content: end; text-align: left; } #s2_calc .legenda { margin-top: 1em; } #s2_calc .legenda p { font-weight: 300; font-size: 75%; text-transform: uppercase; } #s2_calc .legenda + div { margin-top: var(--c10v); } /* Section 3 */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE SYSTEM ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_system { margin-top: 5.5em; } #s1_system .text { max-width: 60ch; margin: 0 auto; } #s1_system .text h1 { margin-bottom: var(--c10v); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE LANDING - PRIVATI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ #s1_landing-privati { overflow: visible; } #s1_landing-privati::before, #s1_landing-privati::after { display: inline-block; content: ''; position: absolute; left: 0%; width: 100%; height: 20%; z-index: 0 } #s1_landing-privati::before { bottom: -1px; background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%,rgb(255 255 255 / 100%) 50%,rgb(255 255 255 / 100%) 100%); } #s1_landing-privati::after { bottom: -1px; background: linear-gradient(to top, rgb(var(--white-rgb) / 100%) 0%,rgb(var(--white-rgb) / 0%) 100%); } #s1_landing-privati .filter { height: calc(100% - 20vh); background: linear-gradient(to bottom, rgb(0 0 0 / 25%) 0%,rgb(0 0 0 / 0%) 100%); } #s1_landing-privati .container { z-index: 1; } #s1_landing-privati .s1_title { padding-top: 5.5em; } #s1_landing-privati .s1_title h1 { font-size: calc(var(--h1-size) * .75); text-shadow: 0 4px 4px rgb(10 10 10 / 25%); } #s1_landing-privati .s1_title h1 strong { font-size: 125%; } #s1_landing-privati .bkg_thumb { overflow: visible; z-index: 1; } #s1_landing-privati .comp { width: 90%; max-width: 1920px; margin: 0 auto; transform: translateY(25%) rotateX(25deg) scale(0.5); opacity: 0; transition: all .5s ease-out, opacity .25s ease-out; } #s1_landing-privati .comp.active { transform: translateY(0%) rotateX(0deg) scale(1); opacity: 1; } #s1_landing-privati .comp > img { object-fit: contain; } #s1_landing-privati .nuvola, #s5_landing-privati .nuvola { left: 50%; pointer-events: none; } #s1_landing-privati .nuvola { top: 50%; left: 50%; transform: translate(-50%, -25%); width: 150%; } /* Section 2 */ #s2_landing-privati { z-index: 1; } #s2_landing-privati .pin_svg { bottom: 0; left: 50%; transform: translate(-50%, 50%); width: 2em; } #s2_landing-privati .text { z-index: 1; } #s2_landing-privati .text h2 { font-size: calc(var(--h2-size) * .625); line-height: 1.375; color: var(--dark-grey); } #s2_landing-privati .figurina { border-width: .25em; } #s2_landing-privati .fig_1 { top: 50%; left: 0%; transform: translate(-101%, -100%) rotate(0); } #s2_landing-privati .fig_2 { bottom: 50%; left: 0%; transform: translate(-101%, 100%) rotate(0); } #s2_landing-privati .fig_3 { top: 50%; right: 0%; transform: translate(101%, -100%) rotate(0); } #s2_landing-privati .fig_4 { bottom: 50%; right: 0%; transform: translate(101%, 100%) rotate(0); } #s2_landing-privati .fig_1.active { transform: translate(-30%, -75%) rotate(-7.5deg); } #s2_landing-privati .fig_2.active { transform: translate(-10%, 115%) rotate(2.5deg); } #s2_landing-privati .fig_3.active { transform: translate(25%, -75%) rotate(-5deg); } #s2_landing-privati .fig_4.active { transform: translate(15%, 105%) rotate(2.5deg); } /* Section 3 */ #s3_landing-privati { overflow: hidden; } #s3_landing-privati .fig_outline { width: 20%; aspect-ratio: 5.5 / 8; } #s3_landing-privati .fig_outline_1 { top: 0; left: 0; transform: translate(-30%, -65%) rotate(0deg) scale(0); } #s3_landing-privati .fig_outline_2 { top: 25%; left: 5%; transform: translate(0%, -75%) rotate(0deg) scale(0); } #s3_landing-privati .fig_outline_3 { top: 25%; left: 0; transform: translate(-25%, 0%) rotate(0deg) scale(0); } #s3_landing-privati .fig_outline_4 { bottom: 25%; left: 50%; transform: translate(0%, 0%) rotate(0deg) scale(0); } #s3_landing-privati .fig_outline_5 { bottom: 50%; right: 10%; transform: translate(0%, 0%) rotate(0deg) scale(0); } #s3_landing-privati .fig_outline_6 { bottom: 5%; right: 30%; transform: translate(0%, 0%) rotate(0deg) scale(0); } #s3_landing-privati .fig_outline_1.active { transform: translate(-30%, -65%) rotate(-10deg); } #s3_landing-privati .fig_outline_2.active { transform: translate(0%, -75%) rotate(2.5deg); } #s3_landing-privati .fig_outline_3.active { transform: translate(-25%, 0%) rotate(-5deg); } #s3_landing-privati .fig_outline_4.active { transform: translate(0%, 0%) rotate(10deg); } #s3_landing-privati .fig_outline_5.active { transform: translate(0%, 0%) rotate(-7.5deg); } #s3_landing-privati .fig_outline_6.active { transform: translate(0%, 0%) rotate(7.5deg); } #s3_landing-privati .sec_title h2 { color: var(--white); } #s3_landing-privati .sec_title p { font-size: 125%; } #s3_landing-privati .box { max-width: 20em; padding: 1.5em 4.5em 1.5em 1.5em; margin-bottom: 1.5em; clip-path: polygon(calc(100% - 3em) 0, 100% 3em, 100% 100%, 0 100%, 0 0); background-color: var(--white); opacity: 0; transition: .5s ease-out; will-change: transform; } #s3_landing-privati .box::before { display: inline-block; content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-bottom: 3em solid rgb(var(--grey-rgb) / 50%); border-right: 3em solid transparent; } #s3_landing-privati .box p {} #s3_landing-privati .box span.price { display: flex; align-items: flex-start; justify-content: center; position: absolute; bottom: 1em; right: 1em; font: 500 100% / 1.25 var(--main-font); color: var(--dark-grey); text-align: center; } #s3_landing-privati .box span.price::before { display: inline-block; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-47.5%, -37.5%); width: calc(100% + 4em); height: auto; aspect-ratio: 1 / 1; border-radius: 20em; background-color: var(--green); z-index: -1; } #s3_landing-privati .box_1 { transform: translateX(-50%) scale(.5); transform-origin: left center; } /*#s3_landing-privati .box_1 p { padding-bottom: 1.5em; }*/ #s3_landing-privati .box_2 { transform: translateX(50%) scale(.5); margin-left: 10%; margin-bottom: var(--c10v); transform: right center; } #s3_landing-privati .box_wrapper .popup_btn { display: block; width: fit-content; padding: .25em 0; line-height: 1.5; color: var(--white); text-decoration: underline; } #s3_landing-privati .box_wrapper .popup_btn:hover { color: var(--green); } #s3_landing-privati .box_wrapper .link { margin-top: 1em; } #s3_landing-privati .box.active { opacity: 1; transform: translateX(0) scale(1); } /* Carosello Rotante */ #s3_landing-privati .modelli { margin-top: calc(var(--c15v) + 10em); margin-bottom: -65%; } #s3_landing-privati .carousel { overflow: visible; border-radius: 100vw; border: .25rem dashed rgb(var(--black-rgb) / 75%); } #s3_landing-privati .modello { transform-origin: center; } #s3_landing-privati .modello > .rel { transform: scale(0); transform-origin: center; transition: .25s ease-out; will-change: transform; } #s3_landing-privati .modello picture { width: 20em; } #s3_landing-privati .modello picture img { object-fit: contain; } #s3_landing-privati .modello button { position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%) scale(0); border: 0; background-color: rgb(var(--dark-grey-rgb) / 90%); color: var(--green); opacity: 0; transition: all .25s ease, transform .25s eae-out, opacity .25s ease-out; } #s3_landing-privati .modello.active { z-index: 1; } #s3_landing-privati .modello.active > .rel { transform: scale(1); } #s3_landing-privati .modello.active button { transform: translate(50%,-50%) scale(1); opacity: 1; } #s3_landing-privati .modelli .nav_btn { top: 0; width: 3em; background-color: var(--white); border-radius: 20em; padding: .75em; } #s3_landing-privati .modelli .nav_btn svg { width: 100%; } #s3_landing-privati .modelli .nav_btn svg path { fill: var(--dark-grey); } #s3_landing-privati .modelli .nav_btn:hover { background-color: var(--green); } /* Section 4 */ #s4_landing-privati { z-index: 1; } #s4_landing-privati .sec_title h2 { color: var(--dark-grey); } #s4_landing-privati .sec_title p { max-width: 24ch; margin: 1em auto 0 auto; font-size: 112.5%; line-height: 1.25; } .sec_order_content .block { margin-top: var(--c15v); } .sec_order_content .block:nth-of-type(even) { flex-direction: row-reverse; } .sec_order_content .block .fig_outline { box-shadow: none; } .sec_order_content .block picture { /* filter: drop-shadow(0 0 .75em rgb(10 10 10 / 25%));*/ z-index: 1; } .sec_order_content .block picture img { object-fit: contain; } .sec_order_content .block .text { background-color: var(--white); border-radius: .25em; filter: drop-shadow(0 0 1em rgb(10 10 10 / 25%)); } .sec_order_content .block .text::before { display: block; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; border: .25em solid var(--orange); border-radius: .25em; } .sec_order_content .block .text span { display: block; position: relative; padding: 2em .5em; background-color: var(--white); box-shadow: 0 0 .5em rgb(10 10 10 / 25%); } .sec_order_content .block h3 { font-weight: 700; font-size: 125%; color: var(--black); } .sec_order_content .block p { font-size: 67.5%; } .sec_order_content .block:nth-of-type(1) picture { transform: translate(-40%, 10%) rotate(-15deg); } .sec_order_content .block:nth-of-type(1) .fig_outline { width: 35%; bottom: 0; left: 0; transform: translate(-25%, 75%) rotate(-15deg) scale(.5); } .sec_order_content .block:nth-of-type(1) .text { transform: scale(.75); } .sec_order_content .block:nth-of-type(1) .text::before { transform: translate(-45%, -50%) rotate(15deg); } .sec_order_content .block:nth-of-type(2) picture { transform: translate(47.5%, -22.5%) rotate(-15deg); } .sec_order_content .block:nth-of-type(2) .fig_outline { aspect-ratio: 8 / 5.5; top: 0; right: 0; transform: translate(50%, -40%) rotate(-15deg) scale(.5); } .sec_order_content .block:nth-of-type(2) .text { transform: scale(.75); } .sec_order_content .block:nth-of-type(2) .text::before { transform: translate(-55%, -42.5%) rotate(-15deg); } .sec_order_content .block:nth-of-type(3) picture { transform: translate(-45%, 0%) rotate(-35deg); } .sec_order_content .block:nth-of-type(3) .fig_outline { top: 50%; left: 50%; aspect-ratio: 8 / 5.5; transform: translate(-90%, -150%) rotate(17.5deg) scale(.5); } .sec_order_content .block:nth-of-type(3) .text { transform: scale(.75); } .sec_order_content .block:nth-of-type(3) .text::before { transform: translate(-42.5%,-60%) rotate(-15deg); } .sec_order_content .block:nth-of-type(4) picture { transform: translate(37.5%, -15%); } .sec_order_content .block:nth-of-type(4) .fig_outline { bottom: 0; left: 50%; transform: translate(60%, 0%) rotate(-15deg) scale(.5); } .sec_order_content .block:nth-of-type(4) .text { transform: scale(.75); } .sec_order_content .block:nth-of-type(4) .text::before { transform: translate(-55%, -55%) rotate(15deg); } .sec_order_content .block .fig_outline, .sec_order_content .block picture, .sec_order_content .block .text, .sec_order_content .block .text::before { opacity: 0; transition: all .5s ease-out, opacity .25s ease-out; will-change: transform, opacity; } .sec_order_content .block.active .fig_outline, .sec_order_content .block.active picture, .sec_order_content .block.active .text, .sec_order_content .block.active .text::before { opacity: 1; } .sec_order_content .block:nth-of-type(1).active picture { transform: translate(0%, 0%) rotate(-5deg); } .sec_order_content .block:nth-of-type(1).active .fig_outline { transform: translate(-25%, 75%) rotate(-5deg) scale(1); } .sec_order_content .block:nth-of-type(1).active .text { transform: scale(1); } .sec_order_content .block:nth-of-type(1).active .text::before { transform: translate(-45%, -50%) rotate(5deg); } .sec_order_content .block:nth-of-type(2).active picture { transform: translate(-2.5%, -12.5%) rotate(-5deg); } .sec_order_content .block:nth-of-type(2).active .fig_outline { transform: translate(0%, -50%) rotate(-5deg) scale(1); } .sec_order_content .block:nth-of-type(2).active .text { transform: scale(1); } .sec_order_content .block:nth-of-type(2).active .text::before { transform: translate(-55%, -42.5%) rotate(-5deg); } .sec_order_content .block:nth-of-type(3).active picture { transform: translate(5%, 10%) rotate(-25deg); } .sec_order_content .block:nth-of-type(3).active .fig_outline { transform: translate(-40%, -100%) rotate(7.5deg) scale(1); } .sec_order_content .block:nth-of-type(3).active .text { transform: scale(1); } .sec_order_content .block:nth-of-type(3).active .text::before { transform: translate(-42.5%,-60%) rotate(-5deg); } .sec_order_content .block:nth-of-type(4).active picture { transform: translate(-12.5%, -25%); } .sec_order_content .block:nth-of-type(4).active .fig_outline { transform: translate(10%, -20%) rotate(-5deg) scale(1); } .sec_order_content .block:nth-of-type(4).active .text { transform: scale(1); } .sec_order_content .block:nth-of-type(4).active .text::before { transform: translate(-55%, -55%) rotate(5deg); } /* Section 5 */ #s5_landing-privati { padding: 5% 0; z-index: 0; } #s5_landing-privati::before, #s5_landing-privati::after { display: inline-block; content: ''; position: absolute; left: 0%; width: 100%; height: 20%; z-index: 0 } #s5_landing-privati::before { top: -1px; background: linear-gradient(to bottom, rgb(var(--white-rgb) / 100%) 0%,rgb(var(--white-rgb) / 0%) 100%); } #s5_landing-privati::after { bottom: -1px; background: linear-gradient(to top, rgb(var(--white-rgb) / 100%) 0%,rgb(var(--white-rgb) / 0%) 100%); } #s5_landing-privati .nuvola { width: 110%; z-index: 1; } #s5_landing-privati .nuvola_top { top: 0; transform: translate(-50%, -50%); } #s5_landing-privati .nuvola_bottom { bottom: 0; transform: translate(-50%, 50%) rotate(180deg); } #s5_landing-privati .container { z-index: 2; } #s5_landing-privati .sec_title h2 { color: var(--white); } #s5_landing-privati .sec_title + .slider_opt { margin-top: var(--c10v); } .card_opt { padding: 1.5em; background-color: var(--white); border-radius: 1.5em; } .card_opt picture { margin: 0 auto; border: 2px solid var(--green); border-radius: .75em; overflow: hidden; } .card_opt picture > img.ico { max-width: 50%; object-fit: contain; } .card_opt picture + .text { margin-top: 1em; } .card_opt .text h3 { font-weight: 700; font-size: 150% } .card_opt .text p { margin-top: 1em; } #s5_landing-privati .slider_dots { bottom: auto; top: auto; left: auto; margin-top: 1.5em; } #s5_landing-privati .slider_dots span { width: 1em; height: 1em; background: transparent; border-radius: 20em; border: 1px solid rgb(var(--black-rgb) / 50%); opacity: 1; transition: .25s ease; } #s5_landing-privati .slider_dots span.swiper-pagination-bullet-active { background-color: var(--black); } /* Section 6 */ #s6_landing-privati { z-index: 1; } #s6_landing-privati .container > .figurina { border-width: .25em; opacity: 0; transition: all .5s ease-out, opacity .25s ease-out; } #s6_landing-privati .fig_1 { top: 0; left: 15%; transform: translate(-50%, -35%) rotate(-7.5deg) scale(.5); } #s6_landing-privati .fig_2 { bottom: 20%; left: 20%; transform: translate(-50%, 35%) rotate(5deg) scale(.5); } #s6_landing-privati .fig_3 { bottom: 10%; right: 20%; transform: translate(50%, 25%) rotate(5deg) scale(.5); } #s6_landing-privati .fig_outline { display: none; border-radius: .25em; opacity: 0; transition: all .5s ease-out, opacity .25s ease-out; } #s6_landing-privati .fig_outline_1 { width: 10%; aspect-ratio: 8 / 5.5; top: 5%; left: 65%; transform: rotate(15deg) scale(0); } #s6_landing-privati .fig_outline_2 { width: 7.5%; aspect-ratio: 5.5 / 8; bottom: 15%; right: 50%; transform: rotate(-5deg) scale(0); } #s6_landing-privati .container > .figurina.active { opacity: 1; } #s6_landing-privati .fig_1.active { transform: translate(0%, 15%) rotate(7.5deg) scale(1); } #s6_landing-privati .fig_2.active { transform: translate(0%, 0%) rotate(-5deg) scale(1); } #s6_landing-privati .fig_3.active { transform: translate(0%, 0%) rotate(-5deg) scale(1); } #s6_landing-privati .fig_outline.active { opacity: 1; } #s6_landing-privati .fig_outline_1.active { transform: rotate(5deg) scale(1); } #s6_landing-privati .fig_outline_2.active { transform: rotate(5deg) scale(1); } #s6_landing-privati #world_map { width: 80%; pointer-events: none; } #s6_landing-privati #world_map img:not(.svg) { object-fit: contain; } #s6_landing-privati #world_map img.svg { height: auto; opacity: .5; } #s6_landing-privati #world_map img.svg_1 { width: 15%; top: 17.5%; left: 32.5%; transform: rotate(0deg); } #s6_landing-privati #world_map img.svg_2 { width: 10%; top: 25%; right: 15%; transform: rotate(5deg); } #s6_landing-privati #world_map img.svg_3 { width: 7.5%; bottom: 22.5%; left: 35%; } #s6_landing-privati #world_map img.svg_4 { width: 10%; top: 50%; right: 7.5%; } #s6_landing-privati #world_map img.svg_5 { width: 5%; bottom: 20%; left: 25%; transform: rotate(-2.5deg); } #s6_landing-privati .sec_title p { font: 300 3vh / 1.25 var(--title-font); color: var(--dark-grey); } #s6_landing-privati .sec_title p em { font-weight: 700; color: var(--orange); } #s6_landing-privati .sec_title p strong { font-weight: 700; } #s6_landing-privati #timbro { width: 30vh; margin: var(--c10v) auto 0 auto; opacity: 0; transform: rotate(5deg) scale(150); pointer-events: none; transition: .75s cubic-bezier(.5,0,.75,.75); } #s6_landing-privati #timbro.active { opacity: .75; transform: rotate(5deg) scale(1); } /* Section 7 */ .sec_bustine { background-color: #ededed; } .sec_bustine .text h2 { color: var(--black); } #page_landing-corpo .sec_bustine .text h2 { color: var(--blue); } /*.sec_bustine .sec_img picture { filter: drop-shadow(.25em .25em .5em rgb(10 10 10 / 50%)); }*/ /* Popup Private */ .info_popup { top: 5.5em; left: 50%; transform: translate(calc(100% + var(--c10o)), 0); max-width: calc(100% - var(--c10o)); padding: 2em 1.5em; border-radius: 1.5em; overflow: hidden; background-color: var(--white); box-shadow: 0 0 1.5em rgb(10 10 10 / 25%); z-index: 4; transition: .375s ease-out; } .info_popup.active { transform: translate(-50%, 0); } .info_popup .wrapper { max-height: calc(100dvh - 11em); padding: 0 1.5em 0 .5em; overflow-y: scroll; } .info_popup .wrapper :where(h1, h2) { font-size: 150%; line-height: 1.25; } .info_popup .wrapper :where(h3, h4, h5) { font-weight: 700; font-size: 100%; line-height: 1.25; } .info_popup .wrapper :where(p, li) { font-size: 75%; } .info_popup .wrapper p + div, .info_popup #form p + .wpforms-container { margin-top: 1.5em; } .info_popup .close_btn { top: 1em; right: .5em; padding: 0.675em; border: 1px solid var(--black); border-radius: 20em; background-color: var(--white); } .info_popup .close_btn svg { width: 1.25em; } .info_popup .close_btn svg path { fill: var(--black); transition: .25s ease; } .info_popup .close_btn:hover { background-color: var(--black); } .info_popup .close_btn:hover svg path { fill: var(--white); } /* Popup Prices */ #popup_prices { display: none; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: calc(100% - var(--c5o)); padding: 1.5em; background-color: var(--white); border-radius: 1.5em; box-shadow: 0 0 1em rgb(10 10 10 / 25%); text-align: center; } #popup_prices h4 { font-size: 150%; } #popup_prices #tab_prezzi { margin-top: 1.5em; } #popup_prices .link { margin: 1.5em auto 0 auto; } #popup_prices .close { top: 0; right: 0; transform: translate(.25em, -1em); width: 2.5em; padding: .5em; background-color: var(--black); border: 1px solid var(--black); border-radius: 20em; } #popup_prices .close svg { width: 100%; } #popup_prices .close svg path { fill: var(--white); transition: .25s ease; } #popup_prices .close:hover { background-color: var(--white); } #popup_prices .close:hover svg path { fill: var(--black); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE LANDING - CORPORATE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ #s1_landing-corpo { overflow: visible; overflow-x: clip; } #s1_landing-corpo .container { z-index: 2; } #s1_landing-corpo .s1_title h1 { font-size: calc(var(--h1-size) * .75); line-height: 1.25; color: var(--blue); } #s1_landing-corpo .s1_title h3 { font-size: calc(var(--h3-size) * .875); line-height: 1.25; } #s1_landing-corpo .comp { width: 75%; margin: 0 auto; transform: translateY(25%) rotateX(25deg) scale(0.875); opacity: 0; transition: all .5s ease-out, opacity .25s ease-out; will-change: transform; } #s1_landing-corpo .comp.active { transform: translateY(0) rotateX(0deg) scale(1); opacity: 1; } #s1_landing-corpo .comp img { object-fit: contain; } /* Section 2 */ #s2_landing-corpo .text.w100, #s3_landing-corpo .text.w100, #s4_landing-corpo .text.w100 { max-width: 65ch; margin: 0 auto; } #s2_landing-corpo .text h2, #s4_landing-corpo .text h2, #s6_landing-corpo .text h2 { color: var(--blue); } #s2_landing-corpo .sec_img, #s3_landing-corpo .sec_img, #s4_landing-corpo .sec_img { margin: 0 auto; } #s2_landing-corpo .sec_img.animate, #s4_landing-corpo .sec_img.animate { transform: translateY(25%) rotateX(25deg) scale(0.875); opacity: 0; transition: .5s ease-out; will-change: transform; } #s2_landing-corpo .sec_img.active, #s4_landing-corpo .sec_img.active { transform: translateY(0) rotateX(0deg) scale(1); opacity: 1; } /* Section 3 */ #s3_landing-corpo .wrapper { border-radius: 1.5em; background-color: var(--blue); } #s3_landing-corpo .text.white :where(h2, h3, h4, h5) { color: var(--white); } #s3_landing-corpo .text.white h3 { font-size: 150%; line-height: 1.25; } #s3_landing-corpo .text.white p a { color: var(--yellow); } #s3_landing-corpo .text.white .link:hover { background-color: var(--yellow); border-color: var(--black); color: var(--black); } /* Section 6 */ #s6_landing-corpo .text + .link_wrapper { margin-top: var(--c10v); } #s6_landing-corpo .link_wrapper { gap: 1.5em; } /* Form Contatto */ .sidebar_form { top: 50%; right: var(--c2o); transform: translate(calc(100% + var(--c2o) + 1.5em), -50%); width: calc(100% - var(--c5o)); height: auto; max-height: calc(100% - var(--c5v)); border-radius: 1.5em; filter: drop-shadow(0 0 1em rgb(10 10 10 / 50%)); overflow: hidden; z-index: 5; transition: .375s ease-out; } .sidebar_form.active { transform: translate(0%, -50%); } .sidebar_form .text h3 { font-weight: 700; } .sidebar_form .text h3 + p { margin-top: 1em; } .sidebar_form #form .wpforms-container, .sidebar_form #form_sample .wpforms-container { margin: 0; } .sidebar_form #form .wpforms-field, .sidebar_form #form_sample .wpforms-field { padding: 0; margin-bottom: 1em; overflow: clip; } .sidebar_form #form .wpforms-form label.wpforms-error, .sidebar_form #form .wpforms-form em.wpforms-error, .sidebar_form #form_sample .wpforms-form label.wpforms-error, .sidebar_form #form_sample .wpforms-form em.wpforms-error { margin: .5em 0 0 0; padding: 0; font: 500 62.5% / 1.25 var(--main-font); text-transform: uppercase; } .sidebar_form #form .wpforms-field :where(input, textarea), .sidebar_form #form_sample .wpforms-field :where(input, textarea) { height: auto; font: 400 .8rem / 1.25 var(--main-font); } .sidebar_form #form_sample .wpforms-field.wpforms-field-checkbox li { display: flex; align-items: center; justify-content: flex-start; } .sidebar_form #form_sample .wpforms-field.wpforms-field-checkbox li input[type="checkbox"]::before, .sidebar_form #form_sample .wpforms-field.wpforms-field-checkbox li input[type="checkbox"]::after { display: none; } .sidebar_form #form_sample .wpforms-field.wpforms-field-checkbox li input[type="checkbox"] { -webkit-appearance: none; appearance: none; display: inline-block; margin: 0; padding: .625rem; border: 1px solid var(--white); background-repeat: no-repeat; background-position: center; background-size: 80%; cursor: pointer; transition: .25s ease; } .sidebar_form #form_sample .wpforms-field.wpforms-field-checkbox li input[type="checkbox"]:checked {} .sidebar_form #form_sample .wpforms-field.wpforms-field-checkbox li label { font-size: 75%; } .sidebar_form .white #form_sample .wpforms-container .wpforms-submit-container { margin-top: 1.75rem } .sidebar_form .white #form button[type=submit], .sidebar_form .white #form input[type=submit], .sidebar_form .white #form_sample button[type=submit], .sidebar_form .white #form_sample input[type=submit] { display: inline-block; margin: 0 auto; height: auto; padding: .75em 1.5em; font: 700 1rem / 1.25 var(--main-font); color: var(--blue); background: var(--white); border: 1px solid var(--white); border-radius: 20em; transition: .25s ease; } .sidebar_form .white #form button[type=submit]:hover, .sidebar_form .white #form input[type=submit]:hover, .sidebar_form .white #form_sample button[type=submit]:hover, .sidebar_form .white #form_sample input[type=submit]:hover { background: var(--orange); color: var(--white); } .sidebar_form .close_btn, #sport_close { top: .5em; right: .5em; width: 2.5em; height: 2.5em; padding: .75em; background-color: var(--white); border: 1px solid var(--black); border-radius: 20em; line-height: 0; } .sidebar_form .close_btn svg, #sport_close svg { width: 100% } .sidebar_form .close_btn svg path { fill: var(--black); transition: .25s ease; } .sidebar_form .close_btn:hover { background-color: var(--yellow); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE LANDING - ASSOCIAZIONI SPORTIVE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ #s1_sport .s1_title { padding-top: 5.5em; } #s1_sport .s1_title h1 { font-size: calc(var(--h1-size) * .75); text-shadow: 0 4px 4px rgb(10 10 10 / 25%); } #s1_sport .s1_title h1 strong { font-size: 125%; } #s1_sport .bkg_thumb { transform: translateY(25%) rotateX(25deg) scale(0.875); opacity: 0; transition: all .5s ease-out, opacity .25s ease-out; will-change: transform; } #s1_sport .bkg_thumb.active { transform: translateY(0) rotateX(0deg) scale(1); opacity: 1; } #s1_sport .bkg_thumb > img { object-fit: contain; } /* Section 2 */ #s2_sport .sec_title h2 { color: var(--white); } #s2_sport .grid { grid-template-columns: 1fr; gap: var(--c10v) var(--c5o); } #s2_sport .block::before { display: block; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); width: 100%; height: 100%; border: .25em solid var(--yellow); border-radius: .5em; transition: .5s ease-out .125s; } #s2_sport .block.active::before { transform: translate(-47.5%, -45%) scale(1); } #s2_sport .block .text { padding: 2em 1.5em; background: var(--white); border-radius: .5em; transform: scale(.5); opacity: 0; transition: all .5s ease-out, opacity .25s ease-out; } #s2_sport .block.active .text { transform: scale(1); opacity: 1; } #s2_sport .block .text span { display: flex; align-items: center; justify-content: center; width: 2ch; height: 2ch; margin: 0 auto; background: var(--yellow); border-radius: 20em; font: 700 250% / 1 var(--main-font); color: var(--white); text-align: center; } #s2_sport .block .text .link { background-color: var(--yellow); border-color: var(--yellow); } #s2_sport .block .text .link:hover { background-color: var(--black); color: var(--yellow); } #s2_sport .block .text p { font-size: 125%; } /* Section 3 */ #s3_sport .sec_title h2 { color: var(--white); } #s3_sport .fig_outline { border-color: rgb(var(--white-rgb) / 50%); } #s3_sport .block .text::before { border-color: var(--yellow); } .sec_order_content .block:nth-of-type(5) picture { transform: rotate(0deg) scale(.25); opacity: 0; width: 45%; z-index: 2; } .sec_order_content .block:nth-of-type(5) .fig_outline { display: none; } .sec_order_content .block:nth-of-type(5) .text { transform: scale(.75); z-index: 1; } .sec_order_content .block:nth-of-type(5) .text::before { transform: translate(-50%, -50%) rotate(0deg); } .sec_order_content .block.active:nth-of-type(5) picture { transform: rotate(-3.75deg) scale(1); opacity: 1; } .sec_order_content .block.active:nth-of-type(5) .text { transform: scale(1); } .sec_order_content .block.active:nth-of-type(5) .text::before { transform: translate(-55%, -55%) rotate(5deg); } /* Section 4 */ #s4_sport .text p { font-size: 125%; transform: translateX(-75%); opacity: 0; transition: all .5s ease-out, opacity .25s ease-out; } #s4_sport .text p:nth-of-type(even) { transform: translateX(75%); opacity: 1; } #s4_sport .text.active p, #s4_sport .text.active p:nth-of-type(even) { transform: translateX(0%); opacity: 1; } #s4_sport .text p strong { font-weight: 700; color: var(--yellow); } /* Btn form */ #btn_form_fixed { position: fixed; bottom: 1em; left: 50%; transform: translate(-50%, calc(100% + 1em)); width: max-content; border-color: var(--black); background-color: var(--blue); color: var(--white); z-index: 2; } #btn_form_fixed:hover { border-color: var(--black); background-color: var(--yellow); color: var(--black); } #btn_form_fixed.active { transform: translate(-50%); } /* Form Preventivo Sport */ #sidebar_preventivo { height: auto; background-color: var(--yellow); } /* Close btn form */ #sport_close { display: none; position: fixed; top: 1em; right: 1.5em; width: 3.5em; height: 3.5em; background-color: var(--white); z-index: 6; } #sport_close.active { display: flex; } #sport_close svg path { fill: var(--yellow); transition: .25s ease; } #sport_close:hover { background-color: var(--yellow); } #sport_close:hover svg path { fill: var(--black); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE PER IL SOCIALE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_sociale .container { padding-top: calc(var(--c10v) + 5em); } #s1_sociale .card_sociale { padding: 2em 1.5em; border: 2px solid var(--green); border-radius: 1.5em; } #s1_sociale .card_sociale h2 { font-size: 150%; color: var(--black); } #s1_sociale .card_sociale .text div { gap: 1.5em; } #s1_sociale .card_sociale p { font-size: 85%; } #s1_sociale .card_sociale p img { width: 100%; max-width: 20em; margin: 1.5em auto 0 auto; } #s1_sociale .card_sociale + .text { margin-top: var(--c10v); } #s1_sociale .text + .grid { margin-top: 1.5em; } #s1_sociale .grid { grid-template-columns: 1fr; gap: 1em; } #s1_sociale .card_ambiente { border: 2px solid var(--green); border-radius: 1.5em; overflow: hidden; } #s1_sociale .card_ambiente .filter { background: linear-gradient(to bottom, rgb(10 10 10 / 0%) 0%, rgb(10 10 10 / 75%) 100%); opacity: 1; mix-blend-mode: multiply; } #s1_sociale .card_ambiente .ico { width: 2em; top: 1.5em; right: 1.5em; filter: drop-shadow(0 0 .75em rgb(10 10 10 / 50%)); } #s1_sociale .card_ambiente .text { bottom: 0; left: 0; padding: 2em 1.5em; } #s1_sociale .card_ambiente .text :where(h2, h3, h4, h5, li, p) { text-shadow: 0 0 .25em rgb(10 10 10 / 50%); } #s1_sociale .card_ambiente .text h3 { font-weight: 700; font-size: 125%; } #s1_sociale .card_ambiente .text :where(h2 + p, h3 + p, h4 + p, h5 + p) { margin-top: 1em; } #s1_sociale .card_ambiente .text p { font-size: 85%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CONTATTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ #s2_contatti .text svg { width: 3.5em; } #s2_contatti .text svg path { fill: var(--orange); } #s2_contatti .text svg + p { margin-top: 1.5em; } #s2_contatti .text p a { display: block; line-height: 1.5; text-decoration: none; } /* Section 3 */ #s3_contatti > picture > img { object-position: 55% center; } #s3_contatti .filter_green { background: var(--green); mix-blend-mode: multiply; } #s3_contatti .green_grad { background: linear-gradient(to right, rgb(var(--green-rgb) / 0%) 0%, rgb(var(--green-rgb) / 100%) 100%); } #s3_contatti .text { gap: 2em; width: calc(14ch + 5.5em); } #s3_contatti .text p a { text-decoration: none; } #s3_contatti .text svg { width: 3.5em; min-width: 3.5em; } /* Section 4 */ .sec_form .text h2 { color: var(--black); } /* Section 5 */ #s5_contatti .sec_title h2 { color: var(--black); } #s5_contatti .sec_title + .link { margin-top: 2em; min-width: fit-content; } /** * * █▀▀▄ █ ▄▀▀▄ ▄▀▀ * █▀▀█ █ ▄ █ █ █ ▀▌ * ▀▀▀ ▀▀▀ ▀▀ ▀▀▀ - BLOG * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BLOG ARCHIVE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ #s1_blog .filter_black { opacity: 1; background: #434343; mix-blend-mode: multiply; } /* Section 2 */ #sf_filter .search-filter-input-button-group { display: flex; align-items: center; justify-content: center; gap: .5em; } #sf_filter button { margin: 0; padding: .75em .75em; border: 1px solid var(--dark-grey); border-radius: .5em; font: 500 100% / 1.25 var(--main-font); color: var(--dark-grey); } #sf_filter button:hover { background-color: rgb(var(--orange-rgb) / 50%); } #sf_filter button.search-filter-input-button--is-selected { background-color: var(--orange); } #s2_blog .grid { grid-template-columns: 1fr; grid-gap: 2em; } @media screen and (min-width: 680px) { #s2_blog .grid { grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 1281px) { #s2_blog .grid { grid-template-columns: 1fr 1fr 1fr; } } .pagination { margin: var(--c10v) auto 0 auto; } .pagination .nav-links { display: flex; align-items: center; justify-content: center; gap: .5em; } .pagination a, .pagination span { min-width: max-content; border-radius: .5em; font: 400 85% / 1.25 var(--main-font); color: var(--dark-grey); } .pagination .current { opacity: .5; } .pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus { background-color: var(--orange); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SINGLE BLOG ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ Section 1 ∞∞∞∞∞∞*/ #s1_single_blog .filter_black { opacity: 1; background: linear-gradient(to bottom, rgb(10 10 10 / 25%) 0%,rgb(10 10 10 / 75%) 100%); mix-blend-mode: multiply; } #s1_single_blog .s1_title { padding-top: 6.5em; } #s1_single_blog .s1_title .single_tag { margin-bottom: 1.5rem; } #s1_single_blog :where(h1, p) { text-shadow: 0 0 .5em rgb(30 30 30 / 50%); } #s1_single_blog .s1_title h1 { font-size: calc(var(--h1-size) * .75); } #s1_single_blog .s1_title p { max-width: 75ch; margin: 1.5em auto 0 auto; font-size: 112.5%; font-weight: 500; } #s1_single_blog .s1_title .info_wrap { margin-top: 1.5em; gap: 1em var(--c5o); } #s1_single_blog .s1_title .info_wrap p { margin: 0; font-weight: 400; font-size: 125%; } /*∞∞∞∞∞∞ Section 2 ∞∞∞∞∞∞*/ #s2_single_blog .wrapper > div { max-width: calc(75ch + var(--c10o)); margin: var(--c10v) auto 0 auto; } #s2_single_blog .wrapper > div:last-of-type { padding-bottom: var(--c10v); } #s2_single_blog .text :where( h2, h3, h4, h5, h6, li, p ) { color: #3e3e3e; } #s2_single_blog .text :where( h2, h3, h4, h5, h6 ) { font-weight: bolder; color: var(--orange); } #s2_single_blog .text :where( h2, .h2 ) { font-size: 150%; } #s2_single_blog .text :where( h3, .h3, h4, .h4 ) { font-size: 125%; } #s2_single_blog .text :where( h5, .h5, h6, .h6 ) { font-size: 100%; font-weight: bolder; } #s2_single_blog .text a:not(.link) { display: inline-block; font: inherit; font-weight: 500; color: var(--link_color); text-decoration: underline; } #s2_single_blog .text li { margin: .25em 0 0 1em; } #s2_single_blog .text li:first-of-type { margin-top: 0; } #s2_single_blog .text li:last-of-type { margin-bottom: 0; } #s2_single_blog .text p { line-height: 1.6; } #s2_single_blog :where(.single_data, .single_intro, .single_paragraph) { padding: 0 var(--c5o); } /* Intro */ #s2_single_blog .single_intro p { font-size: 112.5%; font-weight: 500; } /* Paragrafo */ #s2_single_blog .single_paragraph {} /* Citazione */ #s2_single_blog .single_cit { padding: 0 calc(var(--c5o) + 1.5rem); } #s2_single_blog .single_cit p.h3 { font-size: 125%; line-height: 1.5; font-style: italic; } #s2_single_blog .single_cit p.h3::before { content: '"'; position: absolute; top: 0; left: 0; transform: translateX(calc(-100% - .5ch)); font-size: 175%; line-height: 1; color: #3e3e3e; } #s2_single_blog .single_cit p.h3 big { font-size: 175%; line-height: .5; vertical-align: text-bottom; } #s2_single_blog .single_cit p.author { text-align: right; font-size: 85%; line-height: 1.25; } /* Immagine */ #s2_single_blog .single_img { max-width: calc(75ch + var(--c10o)); margin: var(--c10v) auto 0 auto; } #s2_single_blog .single_img + .caption { margin-top: .75em; font: 400 75% / 1.25 var(--main-font); color: var(--dark-grey); font-style: italic; text-align: center; } /* Galleria */ #s2_single_blog .single_gallery .swiper-slide {} #s2_single_blog .single_gallery .swiper-slide .filter_black { opacity: 0; transition: .25s ease; } #s2_single_blog .single_gallery .swiper-slide svg { width: 25%; max-width: 4em; filter: drop-shadow(0 0 .5em rgb(30 30 30 / 50%)); opacity: 0; transition: .25s ease; } #s2_single_blog .single_gallery .swiper-slide svg .zoom_path { fill: var(--white); transition: .25s ease; } #s2_single_blog .single_gallery .gallery_thumb { margin-top: 5px; } #s2_single_blog .single_gallery .gallery_thumb button { display: block; transition: .25s ease; } #s2_single_blog .single_gallery .nav_btn svg { filter: drop-shadow(0 0 .25em rgb(10 10 10 / 50%)); } #s2_single_blog .single_gallery .nav_btn svg path { fill: var(--orange); } /* Video */ #s2_single_blog .single_video {} /* Articolo Correlato */ #s2_single_blog .single_link { padding: 0 var(--c5o); } #s2_single_blog .single_link.text a { padding: 1.5em; background-color: rgb(var(--orange-rgb) / 12.5%); box-shadow: 0 0 1.5em rgb(30 30 30 / 25%); border: 1px solid #ccc; border-radius: .5em; text-decoration: none; } #s2_single_blog .single_link a > h3 {} #s2_single_blog .single_link a > h3::after { content: ''; display: inline-block; position: relative; width: 1.25rem; height: 1.25rem; margin-left: 1em; vertical-align: text-bottom; background: url(../images/svg/ico_link.svg) no-repeat center / contain; } #s2_single_blog .single_link a > p {} /*∞∞∞∞∞∞ Sidebar ∞∞∞∞∞∞*/ #sidebar_blog { position: fixed; top: 0; left: 0; display: flex; align-items: flex-start; justify-content: space-between; width: 100%; transform: translateY(-100%); padding: 1em; transition: .25s ease; overflow: visible; z-index: 2; } #sidebar_blog.active { transform: translateY(0); } /* Overlay */ #sidebar_blog .mobile_overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgb(var(--black-rgb) / 75%); z-index: 1; } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { #sidebar_blog .mobile_overlay { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } } #sidebar_blog .mobile_overlay.active { display: block; } /* Sidebar Index */ #sidebar_blog .index { display: block; flex: 1 1 auto; position: relative; padding: 0; border-radius: .5em; background-color: var(--white); box-shadow: 0 0 .25em rgb(var(--black-rgb) / 25%), 0 0 2em rgb(var(--black-rgb) / 25%); transition: .25s ease; z-index: 2; overflow: hidden; } /* Icons */ #sidebar_blog .index:before, #sidebar_blog .index:after { display: inline-block; content: ''; position: absolute; top: 0; width: 40px; height: 50px; transition: .25s ease; } #sidebar_blog .index:before { left: 0; background: url(../images/svg/index_icon.svg) no-repeat center / 1em; } #sidebar_blog .index:after { right: 0; background: url(../images/svg/index_arrow.svg) no-repeat calc(100% - .75em) center / 1em; } #sidebar_blog .index.opened:after { transform: scale(1, -1); } /* Buttons */ #sidebar_blog .index li { list-style: none; } #sidebar_blog .index li button { width: 100%; height: 50px; padding: 0 40px; font-size: 100%; line-height: 1.25; font-weight: 400; color: var(--black); text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; transition: .25s ease; } #sidebar_blog .index li button br { display: none !important; } /* Index Select */ #sidebar_blog .index_select { height: 50px; overflow: hidden; z-index: 1; } #sidebar_blog .index_select:before, #sidebar_blog .index_select:after { display: block; content: ''; z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: .625em; background-color: var(--white); } #sidebar_blog .index_select:after { top: auto; bottom: 0; } #sidebar_blog .index_select > ul { will-change: transform; transition: .125s linear .025s; } #sidebar_blog .index_select li.active button { opacity: 1; } /* Index List */ #sidebar_blog .index_list { display: none; z-index: 1; } #sidebar_blog .index_list:before { display: inline-block; content: ''; position: absolute; top: 0; left: 10px; width: calc(100% - 20px); height: 1px; background-color: #ccc; } #sidebar_blog .index.opened .index_list { padding: 15px 0; } /* Trigger */ #sidebar_blog .index_trigger { position: absolute; top: 0; right: 0; width: 100%; height: 50px; z-index: 1; } #sidebar_blog .index_trigger.hide { display: none; } /* Sidebar Prev / Next */ #sidebar_blog .post_nav { display: none; } /* Sidebar Newsletter */ #sidebar_blog #side_form { display: none; } /* Sidebar Share */ #sidebar_blog #side_share { display: none; } /*∞∞∞∞∞∞ Autore e Share Mobile ∞∞∞∞∞∞*/ #s2_single_blog .single_signature { gap: .5em; } #s2_single_blog .single_signature::before { display: inline-block; content: ''; position: relative; flex: 1 1 auto; height: 1px; border-bottom: 1px solid var(--grey); } #s2_single_blog .single_signature p { margin-top: 0; font-weight: 400; font-size: 85%; font-style: italic; } #s2_single_blog .single_signature { gap: .75em; } #s2_single_blog .single_signature > p { font-size: 85%; text-transform: uppercase; } #s2_single_blog #single_signature .share_mobile { margin-top: var(--c10v); } /*∞∞∞∞∞∞ Related ∞∞∞∞∞∞*/ #s3_single_blog .sec_title h3 { font-weight: 700; } .sec_related .nav_btn { display: block; width: 2.5em; height: 2.5em; padding: .25em; } .sec_related .nav_btn :where(img, svg) { width: 100% } .sec_related .nev_prev {} .sec_related .nav_next {} .sec_related .nav_dots { gap: .5em; } .sec_related .nav_dots span.swiper-pagination-bullet { width: 0.75em; height: 0.75em; border: 1px solid #3e3e3e; background: transparent; transition: .25s ease; } .sec_related .nav_dots span.swiper-pagination-bullet.swiper-pagination-bullet-active { background: #3e3e3e; transform: scale(1.25); } #s3_single_blog .container > .link { margin-top: var(--c7v); } /** * * █▀▀ ▄▀▀▄ █▀▀▄ █▄ ▄█ * █▀▀ █ █ █▐█▀ █ █ █ * ▀ ▀▀ ▀ ▀▀ ▀ ▀ - FORM * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /* WP-Form - Custom */ #form .wpforms-field :where(input, textarea, select), #form_sample .wpforms-field :where(input, textarea, select) { background-color: transparent; border: 0; border-bottom: 1px solid var(--black); border-radius: 0; padding: .5em 0; font: 400 100% / 1.25 var(--main-font); color: var(--black); } #form .wpforms-field input::placeholder, #form .wpforms-field textarea::placeholder, #form_sample .wpforms-field input::placeholder, #form_sample .wpforms-field textarea::placeholder { color: var(--black); opacity: 1; } #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"], #form_sample .wpforms-field.wpforms-field-checkbox li input[type="checkbox"] { } #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"]:checked, #form_sample .wpforms-field.wpforms-field-checkbox li input[type="checkbox"]:checked { } #form .wpforms-field.wpforms-field-checkbox li label, #form_sample .wpforms-field.wpforms-field-checkbox li label { text-align: left; } #form .wpforms-field.wpforms-field-checkbox li label a, #form_sample .wpforms-field.wpforms-field-checkbox li label a { text-decoration: underline; } #form .wpforms-field.wpforms-field-checkbox li label a:hover, #form_sample .wpforms-field.wpforms-field-checkbox li label a:hover { color: var(--orange); } #form button[type=submit], #form input[type=submit], #form_sample button[type=submit], #form_sample input[type=submit] { display: inline-block; margin: 0 auto; padding: .75em 1.5em; font: 700 125% / 1.25 var(--main-font); color: var(--black); background-color: transparent; border: 2px solid var(--black); border-radius: 20em; } #form button[type=submit]:hover, #form input[type=submit]:hover, #form_sample button[type=submit]:hover, #form_sample input[type=submit]:hover { background-color: var(--black); color: var(--white); } .white #form .wpforms-field :where(input, textarea, select), .white #form_sample .wpforms-field :where(input, textarea, select) { border-color: var(--white); } .white #form .wpforms-field :where(input, textarea, select), .white #form .wpforms-field input::placeholder, .white #form .wpforms-field textarea::placeholder, .white #form_sample .wpforms-field :where(input, textarea, select), .white #form_sample .wpforms-field input::placeholder, .white #form_sample .wpforms-field textarea::placeholder { color: var(--white); } .white #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"], .white #form_sample .wpforms-field.wpforms-field-checkbox li input[type="checkbox"] { border-color: var(--white); } .white #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"]:checked, .white #form_sample .wpforms-field.wpforms-field-checkbox li input[type="checkbox"]:checked { background-image: url(../images/svg/checked_w.svg); } .white #form .wpforms-field.wpforms-field-checkbox li label, .white #form_sample .wpforms-field.wpforms-field-checkbox li label { color: var(--white); } .white #form button[type=submit], .white #form input[type=submit], .white #form_sample button[type=submit], .white #form_sample input[type=submit] { border-color: var(--white); color: var(--white); } .white #form button[type=submit]:hover, .white #form input[type=submit]:hover, .white #form_sample button[type=submit]:hover, .white #form_sample input[type=submit]:hover { background-color: var(--white); color: var(--black); } /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - EXTRA * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE GRAZIE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_grazie .s1_title h1 { font-size: calc(var(--h1-size) * .75); } #s1_grazie .s1_title h1 strong { font-weight: 500; font-size: 175%; } #s1_grazie .s1_title p { font-size: 150%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE 404 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_404 { background-color: var(--bkg_color); } #s1_404 .s1_title h1 { font-size: 2rem; } #s1_404 .s1_title p { font-size: 1.1rem; } #s1_404 .s1_title .link { display: inline-block; padding: 0.9rem 1.7rem; border: 2px solid var(--btn_color); border-radius: 0.6rem; font-size: 1rem; color: var(--btn_color); } #s1_404 .s1_title .link:hover { background-color: var(--btn_color); color: var(--btn_color_hover); transform: scale(1.05); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CSS EXTRA O MOD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ * * RESPONSIVE * * Settare se necessario regole fluid per minmax di elementi specifici basandosi sulle seguenti regole: * => ORIGINAL CALC -> calc( 12px + (24 - 12) * ( (100vw - 360px) / (1920 - 360) ) ) * => CALC 1920px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 1560 ) ) * => CALC 1280px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 920 ) ) * => CALC 1024px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 664 ) ) * * Da creare fluid dinamico con 2 step per i calc iniziali = 1920 -> 1024 1024 -> 360 * * __________________________________________________________________________________________________________________________________________________________________________ */ .head_logo { width: calc( var(--head-logo-width) + ( var(--head-logo-max) - var(--head-logo-min) ) * ( (100vw - 360px) / 1560 ) ); } #scroll_btn { width: calc( var(--scroll-px) + ( var(--scroll-max) - var(--scroll-min) ) * ( (100vw - 360px) / 1560 ) ); } #back_top { width: calc( var(--back-top-px) + ( var(--back-top-max) - var(--back-top-min) ) * ( (100vw - 360px) / 1560 ) ); } /** * * █▄ ▄█ ▄▀▀▄ █▀▀▄ ▀ █ █▀▀ * █ █ █ █ █ █▀▀█ █ █ ▄ █▀▀ * ▀ ▀ ▀▀ ▀▀▀ ▀ ▀▀▀▀ ▀▀▀ - MOBILE PORT | 601 -> 767 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 601px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ /* Nav Menu */ /* Nav Landing */ /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Links */ /* Filters */ /* Scroll */ /* Swiper */ /* Components */ /* Tags */ /* Figurine */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Structure */ /* Back Top */ /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ /* Section Blog */ /* Section Reviews */ /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ /* Card Empty */ /* Card Blog */ /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ #s2_home .block .text h3 { font-size: 175%; } #s2_home .block .text h2 { font-size: var(--h2-size); } #s2_home .block .pic_wrap .figurina { width: 50%; } /* Sec 3 */ .sec_clienti .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } /* Sec 4 */ /* #s4_home .block { width: calc(50% - 1.25em); }*/ #s4_home .block { padding: 0 1em; } /* Sec 5 */ /* Sec 6 */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template Per Tutti */ #products_head .product_btn .text h3 { font-size: 85%; } /* Template Corporate */ #s4_corporate .slide_wrap { flex-wrap: nowrap; } #s4_corporate .slide_wrap picture { max-width: unset; aspect-ratio: 1 / 1; } #s4_corporate .slide_wrap .text { text-align: left; padding-right: 1em; } /* Template Chi Siamo */ /* Template FAQ */ /* Template Prezzi */ #tab_prezzi p { font-size: 75%; } /* Template System */ /* Template Landing Privati */ #s2_landing-privati .figurina { width: 20%; } #s3_landing-privati .modelli { margin-top: calc(var(--c15v) + 12em); margin-bottom: -75%; } #s3_landing-privati .modello picture { width: 24em; } /* Template Landing Corporate */ /* Template Landing Ass. Sportive */ /* .sec_order_content .block:nth-of-type(5) picture { height: 250%; }*/ /* Template Contatti */ /*∞∞∞∞∞∞ BLOG ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ #s2_blog .grid { grid-template-columns: 1fr 1fr; } /*∞∞∞∞∞∞ CARD BLOG ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ SINGLE BLOG ∞∞∞∞∞∞*/ #s2_single_blog .single_data { justify-content: space-between; } /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ } /** * * ▀▀█▀▀ ▄▀▀▄ █▀▀▄ █ █▀▀ ▀▀█▀▀ * █ █▀▀█ █▀▀█ █ ▄ █▀▀ █ * ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀ - TABLET | 768 x 1024 -> 1023 x 1280 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 768px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ #head_landing_crea, #menu_btn_landing { display: flex; } .head_wrapper .flex-el > .head_landing_btn { padding: .75rem 1.25rem; background-color: var(--orange); border-color: var(--black); font-size: 100%; } .head_wrapper .flex-el > .head_landing_btn:hover { background-color: var(--yellow); border-color: var(--black); color: var(--black); } /* Hamburger */ /* Nav Menu */ #main_nav { max-width: 58vh; } /* Nav Landing */ #landing_nav li a { padding: .5em 0; } /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Links */ /* Filters */ /* Scroll */ /* Swiper */ /* Components */ /* Tags */ .tags .tag { font-size: 75%; } /* Figurine */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Structure */ .foot_block { text-align: left; } .social { justify-content: flex-start; margin-left: -.5em; } #credits br { display: none; } #credits .resp_sep { display: inline-block; } /* Back Top */ /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ /* Section Blog */ /* Section Reviews */ /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ /* Card Empty */ /* Card Blog */ /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec 3 */ /* Sec 4 */ /* Sec 5 */ /* Sec 6 */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template Per Tutti */ .sec_split .sec_img { margin: 0 auto; padding: 0; } .sec_split .figurina { width: 62.5%; } .sec_split .fig_1 { transform: translate(-20%, -7.5%) rotate(-1.25deg); } .sec_split .fig_2 { transform: translate(10%, 7.5%) rotate(5deg); } #s2_privati .fig_1, #s2_privati .fig_2 { width: 20%; } #sec_product_album .grid, .cat_wrapper .grid.triple-grid { grid-template-columns: 1fr 1fr 1fr; } /* Template Corporate */ /* Template Chi Siamo */ /* Template FAQ */ /* Template Prezzi */ /* Template System */ /* Template Landing Privati */ #s2_landing-privati .text h2 { font-size: calc(var(--h2-size) * .75); } #s2_landing-privati .figurina { width: 17.5%; } #s2_landing-privati .fig_1.active { transform: translate(-5%, -75%) rotate(-7.5deg); } #s2_landing-privati .fig_2.active { transform: translate(10%, 115%) rotate(2.5deg); } #s2_landing-privati .fig_3.active { transform: translate(5%, -75%) rotate(-5deg); } #s2_landing-privati .fig_4.active { transform: translate(-5%, 105%) rotate(2.5deg); } .sec_order_content .block p { font-size: 100%; } #s3_landing-privati .box { max-width: 22em; } #s3_landing-privati .modelli { margin-top: calc(var(--c15v) + 10em); } #s3_landing-privati .modello picture { aspect-ratio: 3 / 4; pointer-events: none; } #s3_landing-privati .modelli .nav_prev { left: calc(50% - 12em); transform: translate(calc(-100% - 1.5em), -50%); } #s3_landing-privati .modelli .nav_next { right: calc(50% - 12em); transform: translate(calc(100% + 1.5em), -50%); } #popup_norme { top: 50%; transform: translate(calc(100% + var(--c10o)), -50%); } #popup_norme.active { transform: translate(-50%, -50%); } /* Template Landing Corporate */ /* Template Landing Ass. Sportive */ /* Template Ambiente */ #s1_sociale .card_sociale div { align-items: flex-start; flex-wrap: nowrap; gap: 1.5em; margin-top: 1.5em; } #s1_sociale .card_sociale div img { min-width: auto; width: auto; height: 3em; margin: 0; } #s1_sociale .card_sociale div p { text-align: left; margin: 0; } #s1_sociale .grid { grid-template-columns: 1fr 1fr; } #s1_sociale .card_ambiente picture { aspect-ratio: 1 / 1; } #s1_sociale .card_ambiente .text h3 { font-size: 150%; } #s1_sociale .card_ambiente .text p { font-size: 85%; } /* Template Contatti */ #s3_contatti > picture > img { object-position: 42.5% center; } /*∞∞∞∞∞∞ BLOG ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /*∞∞∞∞∞∞ CARD BLOG ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ SINGLE BLOG ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀▀█▀▀ ▄▀▀▄ █▀▀▄ ▄▀▀ █▄ ▄█ ▄▀▀▄ █ █ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ ▀▄ █ █ █ █▀▀█ █ ▄ █ ▄ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ ▀▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀ - LAPTOP | 1024 x 768 -> 1280 x 720 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1024px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ .head_wrapper .flex-el { padding-left: 1.5em; gap: 0 1em; } .desk_sub_menu_wrap { display: block; min-width: max-content; } .head_menu_btn.link { display: flex; align-items: center; justify-content: center; gap: .5em; padding: .75rem 1.25em; height: 3rem; background-color: transparent; border: 1px solid var(--black); border-radius: 20em; font-size: 100%; line-height: 1.25; color: var(--black); } header.stuck .head_menu_btn.link { padding: .5rem 1.25em; height: 2.5rem; } .head_menu_btn.link span { display: inline-block; } .head_menu_btn.link svg { width: 1.25em; min-width: 1.25em; } .head_menu_btn.link svg path { fill: var(--black); transition: .25s ease; } #head_menu_btn_1:hover, #head_menu_btn_1.active { background-color: var(--orange); } #head_menu_btn_2:hover, #head_menu_btn_2.active { background-color:var(--blue); } #head_menu_btn_2:hover, #head_menu_btn_2.active { color: var(--white); } #head_menu_btn_2:hover svg path, #head_menu_btn_2.active svg path { fill: var(--white); } #head_menu_btn_3:hover, #head_menu_btn_3.active { background-color: var(--green); color: var(--black); } #head_menu_btn_3:hover svg path { fill: var(--black); } .head_wrapper .flex-el > .head_landing_btn { font-size: 100%; } .head_btn { width: 3em; height: 3em; } #hamburger .wrap { width: 3em; height: 3em; } #hamburger span, #hamburger.tapped span { width: 1.75em; height: 3px; } #hamburger .top_bun { top: .875em; } #hamburger .bottom_bun { bottom: .875em; } /* Hamburger */ #hamburger:hover { } #hamburger.tapped:hover { } /* Nav Menu */ #main_nav { top: calc(5.25em - 1px); width: max-content; height: auto; border-radius: 1.5em 1.5em 5em 1.5em; } #main_nav .menu_wrapper { position: relative; top: auto; right: auto; height: auto; } #main_nav .menu { height: auto; } #main_nav .menu li a { position: relative; top: auto; left: auto; height: auto; padding: .75rem 2rem; border: 0; font-size: 125%; } #main_nav .menu li a:hover { color: var(--green); opacity: 1; } #main_nav .menu li.mobile a { padding-right: 2rem; } #main_nav .menu li.menu_btn_1, #main_nav .menu li.menu_btn_2, #main_nav .menu li.menu_btn_3 { background-color: transparent; } #main_nav .menu li.menu_btn_2 a { color: var(--black); } #main_nav .menu li.menu_btn_1 a:hover { color: var(--orange); } #main_nav .menu li.menu_btn_2 a:hover { color: var(--blue); } #main_nav .menu li.menu_btn_3 a:hover { color: var(--green); } /* Sub Menu Desktop */ .desk_sub_menu { display: block; top: calc(4em + 2px); width: max-content; max-height: calc(100vh - 6.5rem); padding: 3.5em 4.5em; border-radius: 1.5em 1.5em 5em 1.5em; box-shadow: 0 0 .5em rgb(10 10 10 / 25%), 0 0 1.5em rgb(10 10 10 / 25%); opacity: 0; transition: .125s ease-out; } .desk_sub_menu.active { opacity: 1; } .desk_sub_menu .link { padding: .5em 1.5em; margin-bottom: 1em; background-color: transparent; border-color: var(--black); } .desk_sub_menu .link svg { width: 1.25em; filter: none !important; } .desk_sub_menu .link svg path { fill: var(--black); transition: .25s ease; } .desk_sub_menu .link:hover { background-color: var(--white); color: var(--black); } .desk_sub_menu .sub_menu { display: grid; grid-template-columns: 1fr 1fr; gap: .5em 1.5em; } .desk_sub_menu .sub_menu a { display: flex; gap: 0 .5em; height: 100%; padding: .75vh 0; border-bottom: 1px solid var(--black); font-weight: 700; font-size: 100%; } .desk_sub_menu .sub_menu a:hover { color: var(--white); border-color: var(--white); } .desk_sub_menu .sub_menu.extra_link { margin-top: 1.5em; } .desk_sub_menu .sub_menu.extra_link a { display: block; } .desk_sub_menu .sub_menu.extra_link a:hover { border-color: var(--black); color: var(--black); } .desk_sub_menu .close { top: 1em; right: 1em; width: 2.5em; padding: .5em; background-color: var(--white); border: 1px solid var(--black); border-radius: 20em; } .desk_sub_menu .close svg { width: 1.25em; } .desk_sub_menu .close svg path { fill: var(--black); transition: .25s ease; } .desk_sub_menu .close:hover { background-color: var(--black); } .desk_sub_menu .close:hover svg path { fill: var(--white); } #desk_sub_menu_1 { left: 0; transform: scale(0); transform-origin: top left; background-color: var(--orange); } #desk_sub_menu_1.active { transform: scale(1); } #desk_sub_menu_2 { left: 50%; transform: translateX(-50%) scale(0); transform-origin: top center; background-color: var(--blue); } #desk_sub_menu_2.active { transform: translateX(-50%) scale(1); } #desk_sub_menu_2 .link { color: var(--white); border-color: var(--white); } #desk_sub_menu_2 .link svg path { fill: var(--white); } #desk_sub_menu_2 .link:hover { border-color: var(--black); background-color: var(--yellow); color: var(--black); } #desk_sub_menu_2 .link:hover svg path { fill: var(--black); } #desk_sub_menu_2 .sub_menu a { color: var(--white); border-color: rgb(var(--white-rgb) / 50%); } #desk_sub_menu_2 .sub_menu a:hover { color: var(--yellow); border-color: var(--yellow); } #desk_sub_menu_3 { left: 100%; transform: translateX(-100%) scale(0); transform-origin: top right; background-color: var(--green); } #desk_sub_menu_3.active { transform: translateX(-100%) scale(1); } /* .menu_settori { position: relative; top: auto; left: auto; transform: none; } .menu_settori .block { position: relative; top: 0; left: 0; transform: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 0; border-bottom: 1px solid var(--white); } .menu_settori .block:last-of-type { border-bottom: 0; } .menu_settori .block::before { display: none; } .menu_settori .block .block_head { align-self: flex-start; gap: 1em; padding: 2em; cursor: pointer; transition: .25s ease; } .menu_settori .block .block_head .block_head_svg { width: 2em; min-width: 2em; height: 2em; } .menu_settori .block .block_head .block_head_svg path, .menu_settori .block .block_head .block_head_svg rect { fill: var(--white); } .menu_settori .block .block_head .block_head_svg path {} .menu_settori .block a.cat { display: block; min-width: fit-content; width: max-content; padding: .75em 1.5em; border: 1px solid var(--white); border-radius: 20em; font: 500 75% / 1.25 var(--main-font); color: var(--white); } .menu_settori .block span.cat { width: auto; font-size: 2.5vh; } .menu_settori .block .back_btn { display: none; } .menu_settori .block .text { display: none; margin-top: 0; padding: 0 2em 2em 2em; border-top: 0; width: 100%; } .menu_settori .block .text .sub_menu ul, #sub_menu_1 .text .sub_menu ul { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0 1em; } .menu_settori .block .text .sub_menu li a { font-size: 75%; } .menu_settori .block .text .sub_menu li a:hover { color: var(--green); }*/ /* Nav Landing */ #landing_nav { max-width: 60%; } #landing_nav .menu_wrapper { padding: var(--c7v) var(--c3o); } #landing_nav ul { gap: .5em var(--c2o); } #landing_nav li a { display: block; position: relative; padding: .75vh 0; text-decoration: none; border-bottom: 1px solid var(--black); font-size: clamp(14px, 1.25vw, 20px); } #landing_nav li a:hover { color: var(--white); border-color: var(--white); } .menu_settori .block .text .extra_link a:hover, #landing_nav .extra_link a:hover, .desk_sub_menu .sub_menu.extra_link a:hover { border-color: var(--black); color: var(--black); } /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Links */ /* Filters */ /* Scroll */ /* Swiper */ /* Components */ .text.tac_mobile .link { margin-left: 0; } /* Tags */ /* Figurine */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ footer { overflow-x: clip; } footer .figurina { max-width: 20em; border-width: .5em; transition: .5s ease-out; } footer .fig_1 { margin-left: -7.5%; transform: translate(-100%, -10%) rotate(-15deg); } footer .fig_1.active { transform: translate(10%, -10%) rotate(-10deg); } footer .fig_2 { margin-right: -7.5%; transform: translate(100%, 0%) rotate(10deg); transition-delay: .0625s; } footer .fig_2.active { transform: translate(-10%, 0%) rotate(5deg); } footer .container { padding-top: var(--c7v); padding-bottom: var(--c3v); } .social a { padding: .25em; transform-origin: center; will-change: transform; } .social a:hover { transform: scale(1.15); } .social a:hover svg path { fill: var(--orange); } /* Structure */ #credits { padding: 1.5em var(--c2o); } #credits p { margin: 0; font-size: 62.5%; } #credits a:hover, #credits a:active, #credits a:focus { color: var(--white); } #credits a#credits_studio { margin: 0; padding: 0; min-width: max-content; line-height: 1.5; } #credits a#credits_studio:hover { color: #e74e0f; } /* Back Top */ #back_top { opacity: 1; } /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ .s1 .s1_title { padding-top: 2.5em; } .s1 .s1_title.flex, .s1 .s1_title.flex-b { justify-content: space-between; flex-wrap: nowrap; gap: 0 1.5em; } .s1_title .h1 { transform: translateX(-50%); } .s1_title .h1 + h1 { max-width: 50%; min-width: 25%; margin: 1.5rem 0 0 auto; transform: translateX(50%); font-size: clamp(24px, 2.5vw, 40px); line-height: 1.25; text-align: right; } #s1_home .container, #s1_privati .container, #s1_corporate .container, #s1_chi .container { min-height: 100dvh; } /* Section Blog */ .sec_blog .container, .sec_form:not(#s4_contatti) .container { width: calc(100% - 3em); padding: var(--c10v) var(--c5o); } .sec_blog:not(#s3_single_blog) .sec_title { margin-bottom: var(--c5v); } /* Section Reviews */ /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ /* Card Empty */ /* Card Blog */ .card_blog button.link { display: flex; opacity: 0; transform: translate(-50%, -50%) scale(0); } .card_blog:hover button { transform: translate(-50%, -50%) scale(1); opacity: 1; } /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ #s1_home .sec_title .h1, #s1_home .sec_title h1:not(.p) { font-size: calc(var(--h1-size) * 1.5); } #s1_home .s1_title .h1 p { font-size: clamp(80px, 7.25vw, 140px); } /* Sec 2 */ #s2_home { display: flex; align-items: flex-start; justify-content: center; transition: .5s ease-out; } #s2_home .block { min-width: 20vw; height: 100dvh; min-height: 36em; overflow: clip; transition: .75s ease-out; will-change: width; cursor: pointer; } #s2_home .block .wrapper { height: 100dvh; min-height: max-content; gap: 0; justify-content: center; } #s2_home .block .wrapper, #s2_home #block_1 .wrapper { padding: calc(10dvh + 4em) 1.5em 10dvh 1.5em; } #s2_home .block .tags { transform: scale(0); margin-top: 0; } #s2_home .block .tag { font-size: 0; } #s2_home .block .tag:hover { background-color: var(--white); } #s2_home .block .text, #s2_home .block .link { z-index: 2; } #s2_home .block .text h3 { font-size: clamp(20px, 2vw, 36px); transition: .25s ease; will-change: font-size; } #s2_home #block_3 .text h3 { margin-top: -1em; } #s2_home .block .text h2 { min-height: calc(4em * 1.1); margin: 1em auto 0 auto; transform: scale(1); /* font-size: clamp(24px, 2.5vw, 40px);*/ opacity: 1; transition: all .5s ease, opacity .25s ease .25s; will-change: font-size; } #s2_home .block .text h2 { font-size: clamp(20px, 2vw, 36px); } #s2_home .block .link_wrap { min-height: 3.5em; margin: 7.5vh 0; } #s2_home .block .link { font-size: 85%; transform: scale(0); opacity: 0; } #s2_home .block .trigger_btn { display: block; width: 3.5em; transform: translate(-50%, -50%); } #s2_home .block .trigger_btn svg path { fill: var(--white); transition: .25s ease; } #s2_home .block .trigger_btn:hover svg path { fill: var(--green); } #s2_home .block .pic_wrap { display: flex; width: 75%; max-width: 14em; transform-origin: center bottom; transition: all .5s ease-out, width .75s ease-out, opacity .25 ease-out; } #s2_home .block .album_img { display: none; margin-bottom: -30vh; z-index: 1; transition: .375s ease-out; } #s2_home .block .album_img img { object-fit: contain; } #s2_home .block.active { width: 60%; cursor: unset; } #s2_home .block.active .wrapper { gap: 7.5vh 0; } #s2_home .block.active .tags { transform: scale(1); margin-top: 1em; } #s2_home .block.active .tag { font-size: 75%; } #s2_home .block.active .text h2 { min-height: unset; } #s2_home .block.active .link_wrap { margin: 0; } #s2_home .block.active .link { transform: scale(1); opacity: 1; } #s2_home .block.active .trigger_btn { transform: translate(-50%, -50%) scale(0); opacity: 0; } #s2_home .block.active .pic_wrap { display: none; } #s2_home .block.active .album_img { display: block; } #s2_home .block.shrinked { width: 20%; } #s2_home .block.shrinked .wrapper { gap: 10vh 0; } #s2_home .block.shrinked .tags { transform: scale(0); margin-bottom: -10vh; } #s2_home .block.shrinked .text h3 { font-size: 67.5%; } #s2_home .block.shrinked .text h2 { transform: scale(0); min-height: unset; font-size: 0; } #s2_home .block.shrinked .link_wrap { margin: 0; } #s2_home .block.shrinked .pic_wrap { width: 100%; } #s2_home #block_1 .pic_wrap.active .fig_1 { transform: translate(2.5%, 5%) rotate(-7.5deg) scale(1); } #s2_home #block_1 .pic_wrap.active .fig_2 { transform: translate(-2.5%, -5%) rotate(5deg) scale(1); } #s2_home #block_2 .pic_wrap { gap: .75em; } #s2_home #block_3 .pic_wrap.active .fig_1 { transform: translate(1.25%, 1.25%) rotate(-3.75deg) scale(1); } #s2_home #block_3 .pic_wrap.active .fig_2 { transform: translate(-1.25%, -1.25%) rotate(5deg) scale(1); } /* Sec 3 */ /* Sec 4 */ /*#s4_home .block { width: calc((100% / 3) - (5em / 3)); } #s4_home .block:nth-of-type(2) { transition-delay: .05s; } #s4_home .block:nth-of-type(3) { transition-delay: .1s; } #s4_home .block:nth-of-type(4) { transition-delay: .15s; } #s4_home .block:nth-of-type(5) { transition-delay: .2s; }*/ #s4_home .block img { width: 3.5em; } #s4_home .block h3 { font-size: 112.5%; } #s4_home .block p { font-size: 75%; } /* Sec 5 */ #s5_home .container { height: 100dvh; } #s5_home .text p { font-size: clamp(40px, 3vw, 55px); } /* Sec 6 */ .sec_clienti .swiper, .sec_clienti .grid { margin: .75em auto 1em auto; } /* Sec 6 */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ #s2_chi .container, #s2_privati .container, #s3_corporate .container { flex-direction: row; } /* Template Per Tutti */ #s2_privati .text { padding-right: 0; } #s2_privati .fig_1, #s2_privati .fig_2 { width: 25%; } #s2_privati .fig_3 { width: 100%; } #s2_privati .active .fig_1 { transform: translate(-15%, 5%) rotate(-5deg) scale(1); } #s2_privati .active .fig_2 { transform: translate(-50%, -5%) rotate(2.5deg) scale(1); } #s3_privati .sec_title { align-items: flex-start; flex-wrap: nowrap; gap: var(--c5o); } #s3_privati .sec_title h2 { width: 62.5%; min-width: 62.5%; font-size: calc(var(--h2-size) * .875); } #products_head { flex-wrap: nowrap; } #products_head .product_btn { padding: 0; background: transparent; border: none; border-radius: 0; } #products_head .product_btn::before { display: block; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 100%; aspect-ratio: 1 / 1; background-color: rgb(var(--white-rgb) / 50%); border-radius: 200em; transition: .25s ease-out; } #products_head .product_btn .text { margin-top: .5em; } #products_head .product_btn .text h3 { color: var(--white); } #products_head .product_btn:hover::before { transform: translate(-50%, -50%) scale(.75); } #products_head .product_btn:hover .text h3 { text-shadow: 1px 1px 2px rgb(10 10 10 / 75%); } .cat_wrapper .card_product picture .link { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: max-content; padding: 1em 1.25em; background-color: rgb(var(--dark-grey-rgb) / 90%); font: 700 85% / 1.25 var(--main-font); color: var(--green); text-align: center; opacity: 0; z-index: 1; transition: .25s ease-out; } .cat_wrapper .card_product:hover picture .link { transform: translate(-50%,-50%) scale(1); opacity: 1; } .cat_wrapper .card_product .text h3 { transition: .25s ease; } .cat_wrapper .card_product:hover .text h3 { color: var(--green); } .cat_wrapper .card_product picture .link:hover { background-color: var(--green); color: var(--dark-grey); } /* Template Corporate */ .sec_clienti .swiper { display: none; } .sec_clienti .grid { display: flex; align-items: center; justify-content: space-between; gap: 0 1.5em; } #s4_corporate .container { padding-bottom: var(--c10v); } #s4_corporate .products_head { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } #s4_corporate .products_head button { padding: 1.5em 1em; border: 1px solid transparent; border-radius: 1em; text-align: center; } #s4_corporate .products_head button picture { width: 100%; margin: 0 auto 1em auto; } #s4_corporate .products_head button picture img { object-fit: contain; } #s4_corporate .products_head button h4 { font-size: 100%; color: var(--white); } #s4_corporate .products_head button:hover, #s4_corporate .products_head button.active { border-color: var(--white); } #s4_corporate .products_head button.active { background-color: rgb(var(--white-rgb) / 12.5%); } #s4_corporate .products_head button.active h4 { text-shadow: 1px 1px 2px rgb(10 10 10 / 50%); } #s4_corporate .products_head + .slider_container { max-width: 1024px; margin: var(--c10v) auto 0 auto; } #s4_corporate .slider_container > div { position: absolute; top: 0; left: 0; opacity: 0; margin: 0; z-index: 0; } #s4_corporate .slider_container > div.active { position: relative; top: auto; left: auto; opacity: 1; z-index: 2; } #s4_corporate .slider_container .slide_title { display: none; } #s4_corporate .slider_container .slide_wrap { gap: 1em 0em; } #s4_corporate .slider_container .slide_wrap picture { aspect-ratio: 3 / 4; } #s4_corporate .slider_container .slide_wrap .text { width: auto; padding-left: 2.5em; } #s4_corporate .slider_container .slide_wrap .text h4 + p { margin-top: 1rem; font-size: 85%; } #s4_corporate .nav_dots { padding: 1.5em 0 0 0; } #s5_corporate .tags .tag:hover { background-color: var(--blue); color: var(--white); } #s5_corporate .wrapper { margin-top: 0; } #s5_corporate .card_settore { display: grid; grid-template-columns: 1fr .75fr; margin: 5vh 0 0 0; background-color: var(--white); transform-origin: top center; will-change: transform, background; transition: 0s; } #s5_corporate .card_settore .text p { display: block; min-height: 10em; } #s5_corporate .card_settore .text h2 { font-size: calc(var(--h2-size)* .75); } #s5_corporate .card_settore .text :where(h2, h4, h5, p, li) { transition: .25s ease; } #s5_corporate .card_settore .img { height: 100%; min-height: 100%; aspect-ratio: 16 / 9; overflow: hidden; } #s5_corporate .card_settore .img img { will-change: transform; transition: 2.5s ease-out; } /*#s5_corporate .card_settore:hover { background-color: var(--blue) !important; } #s5_corporate .card_settore:hover .text :where(h2, h4, h5, li, p) { color: var(--white); } #s5_corporate .card_settore:hover .text h3 { color: var(--yellow); } #s5_corporate .card_settore:hover .img img { transform: scale(1.125); }*/ /* Template Chi Siamo */ #s3_chi .ext_wrap .text { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--c5o); } #s3_chi .ext_wrap .text p + p { margin-top: 0; } #s3_chi .fig_wrapper { max-width: 980px; margin-left: auto; margin-right: auto; } #s3_chi .fig_1, #s3_chi .fig_2 { width: 25% } #s3_chi .fig_3 { width: 40%; } #s5_chi .grid { grid-template-columns: 1fr 1fr 1fr; } #s5_chi .block :where(p, li) { font-size: 75%; } #s6_corporate .sec_img span { border-color: var(--white); } /* Template FAQ */ #accordion_video .grid { grid-template-columns: 1fr 1fr; } .accordion .accordion_main_head:hover h2 { color: var(--orange); } .accordion .accordion_main_head:hover svg :where(path, rect) { fill: var(--orange); } .accordion .sub_accordion:hover { background-color: var(--grey); } /* Template Prezzi */ /* Template System */ /* Template Landing Privati */ #s1_landing-privati .s1_title h1 strong { font-size: 175%; } #s1_landing-privati .nuvola { transform: translate(-50%, -20%); } #s2_landing-privati .container { padding: var(--c15v) var(--c15o); } #s2_landing-privati .text h2 { font-size: var(--h2-size); } #s2_landing-privati .figurina.ratio-4-3 { width: 20%; } #s2_landing-privati .fig_1.active { transform: translate(0%, -85%) rotate(-7.5deg); } #s2_landing-privati .fig_2.active { transform: translate(-5%, 100%) rotate(2.5deg); } #s2_landing-privati .fig_3.active { transform: translate(0%, -95%) rotate(-2.5deg); } #s2_landing-privati .fig_4.active { transform: translate(5%, 90%) rotate(2.5deg); } #s2_landing-privati .figurina.ratio-3-4 { width: 15%; } #s3_landing-privati .fig_outline { width: 15%; } #s3_landing-privati .fig_outline_2 { top: auto; bottom: 50%; left: 7.5%; } #s3_landing-privati .fig_outline_3 { top: auto; bottom: 5%; } #s3_landing-privati .fig_outline_1.active { transform: translate(-40%, -65%) rotate(-10deg); } #s3_landing-privati .fig_outline_2.active { transform: translate(0%, 100%) rotate(2.5deg); } #s3_landing-privati .fig_outline_3.active { transform: translate(5%, 0%) rotate(-5deg); } #s3_landing-privati .fig_outline_6.active { transform: translate(50%, 0%) rotate(7.5deg); } #s3_landing-privati .sec_title p { margin-top: 0; } #s3_landing-privati .wrapper { justify-content: flex-start; margin-top: var(--c2v); } #s3_landing-privati .box_wrapper { z-index: 2; } #s3_landing-privati .box { max-width: 24em; clip-path: polygon(calc(100% - 2.5em) 0, 100% 2.5em, 100% 100%, 0 100%, 0 0); } #s3_landing-privati .box::before { border-bottom: 2.5em solid rgb(var(--grey-rgb) / 50%); border-right: 2.5em solid transparent; } #s3_landing-privati .box_1 { max-width: 20ch; } #s3_landing-privati .box { max-width: 22ch; } #s3_landing-privati .box_wrapper + .modelli { width: 87.5%; margin: -12em -20% -70% auto; } #s3_landing-privati .box_wrapper + .modelli { margin: -6em -20% -70% auto; } #s3_landing-privati .modello picture { width: 20em; } #s3_landing-privati .modello > .rel { transform: scale(0.375); } #s3_landing-privati .modello button:hover { background-color: var(--green); color: var(--black); } #s3_landing-privati .modelli .nav_prev { left: calc(50% - 10em); transform: translate(-100%, -50%) } #s3_landing-privati .modelli .nav_next { right: calc(50% - 10em); transform: translate(100%, -50%) } .sec_order_content .block { margin: 0; } .sec_order_content .block::after { display: block; content: ''; position: absolute; width: 10vw; aspect-ratio: 8 / 5.5; transform: scale(0); opacity: 0; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; transition: all .5s ease-out, opacity .25s ease-out; } .sec_order_content .block:nth-of-type(even) { margin-left: auto; } .sec_order_content .block:nth-of-type(1) {} .sec_order_content .block:nth-of-type(1) picture { transform: scale(1.5) translate(10%, 0%) rotate(-2.5deg); } .sec_order_content .block:nth-of-type(1)::after { display: none; } .sec_order_content .block:nth-of-type(2) { margin-top: -17.5%; } .sec_order_content .block:nth-of-type(2) .fig_outline { transform: translate(-5%, -120%) rotate(-5deg); } .sec_order_content .block:nth-of-type(2) picture { transform: scale(1.25) translate(-10%, -40%) rotate(-2.5deg); } .sec_order_content .block:nth-of-type(2)::after { top: 0; left: 0; transform: translate(calc(-100% - 3.25vw), 10%) rotate(0deg); background-image: url(../images/svg/arrow_1.svg); } .sec_order_content .block:nth-of-type(3) { margin-top: 5%; margin-left: 5%; } .sec_order_content .block:nth-of-type(3) .fig_outline { top: 100%; left: 50%; transform: translate(-25%, -40%) rotate(7.5deg); width: 35%; } .sec_order_content .block:nth-of-type(3) picture { transform: scale(1.5) translate(0%, 10%) rotate(0deg); } .sec_order_content .block:nth-of-type(3)::after { top: 0; left: 100%; transform: translate(60%, -25%) rotate(0deg); background-image: url(../images/svg/arrow_2.svg); } .sec_order_content .block:nth-of-type(4) { margin-top: -10%; margin-right: 2.5%; } .sec_order_content .block:nth-of-type(4) .fig_outline { aspect-ratio: 8 / 5.5; bottom: auto; top: 0; left: 50%; transform: translate(-75%, -60%) rotate(5deg); } .sec_order_content .block:nth-of-type(4) picture { transform: scale(1.5) translate(5%, 0%); } .sec_order_content .block:nth-of-type(4)::after { top: 50%; left: 0; transform: translate(-125%, -35%) rotate(0deg); background-image: url(../images/svg/arrow_3.svg); } .sec_order_content .block:nth-of-type(5) { margin-top: 5%; margin-left: 15%; } /* .sec_order_content .block:nth-of-type(5) picture { height: 125%; transform: translate(-60%, -40%); }*/ .sec_order_content .block:nth-of-type(5)::after { top: 0; right: 0; transform: translate(80%, -50%) rotate(125deg); background-image: url(../images/svg/arrow_1.svg); } .sec_order_content .block:nth-of-type(5) .text::before { transform: translate(-60%, -40%) rotate(-5deg); } /* .sec_order_content .block .text { z-index: 1; }*/ .sec_order_content .block p { font-size: 60%; } .sec_order_content .block.active::after { transform: scale(1); opacity: 1; } .sec_order_content .block:nth-of-type(2)::after { transform: translate(calc(-100% - 3.25vw), 10%) rotate(0deg) scale(1); } .sec_order_content .block:nth-of-type(3)::after { transform: translate(60%, -25%) rotate(0deg) scale(1); } .sec_order_content .block:nth-of-type(4)::after { transform: translate(-125%, -35%) rotate(0deg) scale(1); } .sec_order_content .block:nth-of-type(5)::after { transform: translate(100%, -50%) rotate(125deg) scale(1); } #s5_landing-privati .slider_opt .swiper-slide { will-change: width; } .card_opt { } .card_opt picture > img.ico { max-width: 25%; } .card_opt .text h3 { font-weight: 700; font-size: 100%; } .card_opt .text p { font-size: 75%; } #s6_landing-privati .container { padding: 0; } #s6_landing-privati #world_map { position: relative; width: 90%; } #s6_landing-privati #world_map img.svg { opacity: 1; } #s6_landing-privati #world_map img.svg_1 { width: 10%; top: 0; left: 50%; transform: translate(-120%, -50%); } #s6_landing-privati #world_map img.svg_2 { width: 7.5%; top: 10%; right: 15%; transform: translate(-15%, -47.5%) rotate(5deg); } #s6_landing-privati #world_map img.svg_3 { width: 5%; bottom: 12.5%; left: 40%; } #s6_landing-privati #world_map img.svg_4 { width: 7.5%; top: 50%; right: 12.5%; z-index: 1; } #s6_landing-privati #world_map img.svg_5 { bottom: 10%; } #s6_landing-privati .fig_outline { display: block; } #s6_landing-privati .sec_title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #s6_landing-privati .sec_title p { font-size: 200%; } #s6_landing-privati #timbro { margin-top: var(--c7v); width: 40%; max-width: 30em; } .info_popup { max-width: 1024px; transform: translate(calc(100vw + 1px), 0) } #popup_norme { transform: translate(calc(100vw + 1px), -50%); } #popup_prices { width: max-content } /* Template Landing Corporate */ #page_landing-corpo .text h2 { font-size: calc(var(--h2-size) * .75); } #s2_landing-corpo .container, #s4_landing-corpo .container, #s6_landing-corpo .container { max-width: calc(1280px + var(--c10o)); } #s2_landing-corpo .sec_img.animate, #s4_landing-corpo .sec_img.animate { transform: translateX(-25%) rotateY(-25deg) scale(0.875); opacity: 0; } #s2_landing-corpo .sec_img.active, #s4_landing-corpo .sec_img.active { transform: translateX(0) rotateY(0deg) scale(1); opacity: 1; } #s2_landing-corpo .text.animate, #s4_landing-corpo .text.animate { transform: translateX(25%) rotateY(25deg) scale(.875); opacity: 0; transition: .5s ease-out; will-change: transform; } #s2_landing-corpo .text.animate.active, #s4_landing-corpo .text.animate.active { transform: translateX(0) rotateY(0deg) scale(1); opacity: 1; } #s3_landing-corpo .wrapper { max-width: calc(1024px + var(--c10o)); margin: 0 auto; padding: 2em var(--c2o); transform: scale(.75); opacity: 0; transition: .5s ease-out; will-change: transform; } #s3_landing-corpo .wrapper.active { transform: scale(1); opacity: 1; } #s3_landing-corpo .text :where(p, li) { font-size: 85%; } #s3_landing-corpo .text .link { font-size: 100%; } #s6_landing-corpo .text.animate { transform: translateY(25%) rotateX(-25deg) scale(0.875); opacity: 0; transition: .25s ease-out; will-change: transform; } #s6_landing-corpo .text.active { transform: translateY(0) rotateX(0) scale(1); opacity: 1; } #s6_landing-corpo .text p { max-width: 45ch; margin-right: auto; margin-left: auto; } .sidebar_form { right: 50%; transform: translate(calc(100% + 50vw + 1.5em), -50%); width: max-content; max-width: calc(100% - var(--c5o)); } .sidebar_form.active { transform: translate(50%, -50%); } .sidebar_form .wrapper .m10t { margin-top: 1.5em; } /* Template Landing Ass. Sportive */ #btn_form_fixed { font-size: 100%; } #s2_sport .grid { grid-template-columns: 1fr 1fr 1fr; } #s2_sport .block:nth-of-type(2) { transition-delay: .125s; } #s2_sport .block:nth-of-type(3) { transition-delay: .25s; } #s2_sport .block .text { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 100%; } #s3_sport.sec_order_content .block:nth-of-type(2)::after { background-image: url(../images/svg/arrow_y1.svg); } #s3_sport.sec_order_content .block:nth-of-type(3)::after { background-image: url(../images/svg/arrow_y2.svg); } #s3_sport.sec_order_content .block:nth-of-type(4)::after { background-image: url(../images/svg/arrow_y3.svg); } #s3_sport.sec_order_content .block:nth-of-type(5)::after { background-image: url(../images/svg/arrow_y1.svg); } #s4_sport .text p { font-size: 150%; } #sidebar_preventivo .text h3 { color: var(--black); } #sidebar_preventivo #form .wpforms-field :where(input, textarea, select) { border-color: var(--black); } #sidebar_preventivo #form .wpforms-field :where(input, textarea, select), #sidebar_preventivo #form .wpforms-field input::placeholder, #sidebar_preventivo #form .wpforms-field textarea::placeholder, #sidebar_preventivo #form .wpforms-field.wpforms-field-checkbox li label, #sidebar_preventivo #form_sample .wpforms-field.wpforms-field-checkbox li label { color: var(--black); } #sidebar_preventivo #form .wpforms-field.wpforms-field-checkbox li label a:hover, #sidebar_preventivo #form_sample .wpforms-field.wpforms-field-checkbox li label a:hover { color: var(--white); } #sidebar_preventivo #form button[type=submit], #sidebar_preventivo #form input[type=submit] { background-color: var(--yellow); border-color: var(--black); color: var(--black); } #sidebar_preventivo #form button[type=submit]:hover, #sidebar_preventivo #form input[type=submit]:hover { background-color: var(--white); color: var(--black); } #sidebar_preventivo .close_btn { background-color: var(--yellow); } #sidebar_preventivo .close_btn:hover { background-color: var(--white); } /* Template Ambiente */ #s1_sociale .card_sociale p { font-size: 100%; } #s1_sociale .card_ambiente picture { aspect-ratio: 4 / 3; } #s1_sociale .card_ambiente .text h3 { font-size: 175%; } #s1_sociale .card_ambiente .text p { font-size: 100%; } /* Template Contatti */ #s2_contatti .container { justify-content: center; } #s2_contatti .text { min-width: fit-content; } #s3_contatti > picture { aspect-ratio: 16 / 9; } #s3_contatti .text { width: calc(14ch + 10em); } #s3_contatti .text svg { width: 7.5em; min-width: 7.5em; } .sec_form .sec_img span { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-45%, -55%) rotate(-7.5deg); width: 80%; max-width: 20em; aspect-ratio: 5.5 / 8; border: 1px dashed var(--grey); } .sec_form .figurina { width: 80%; max-width: 20em; margin-left: auto; margin-right: auto; transform: rotate(-5deg); overflow: visible; } .sec_form #form h2 { font-size: calc(var(--h2-size) * .5); } #s5_contatti .container { flex-wrap: nowrap; gap: var(--c5o); } /*∞∞∞∞∞∞ BLOG ∞∞∞∞∞∞*/ /* Sec 1 */ #s1_blog .s1_title h1 { font-size: calc(var(--h1-size)* .75); } /* Sec 2 */ #s2_blog .grid { grid-template-columns: 1fr 1fr 1fr; } /*∞∞∞∞∞∞ CARD BLOG ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ SINGLE BLOG ∞∞∞∞∞∞*/ #s1_single_blog .s1_title h1 { font-size: calc(var(--h1-size)* .5); } #s2_single_blog .wrapper > div:last-of-type { padding-bottom: 0; } #s2_single_blog .single_gallery .swiper-slide:hover .filter_black { opacity: .75; } #s2_single_blog .single_gallery .swiper-slide:hover svg { opacity: 1; } /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1281 x 720 -> 1366 x 768 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1281px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ .head_wrapper .flex-el { gap: 0 1.5em; } /* Hamburger */ /* Nav Menu */ /* Nav Landing */ /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Links */ /* Filters */ /* Scroll */ /* Swiper */ /* Components */ /* Tags */ /* Figurine */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Structure */ /* Back Top */ /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ /* Section Blog */ /* Section Reviews */ /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ /* Card Empty */ /* Card Blog */ /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec 3 */ #s3_chi .ext_wrap { align-items: flex-start; flex-wrap: nowrap; gap: var(--c3o); margin-bottom: var(--c5v); } #s3_chi .ext_wrap h2 { min-width: calc(100% / 3); font-size: clamp(50px, 3.5vw, 60px); } #s3_chi .ext_wrap h2 + .text { margin: 0; } #s3_chi .ext_wrap .text { gap: 0 var(--c3o); } #s3_chi .ext_wrap .text p {} /* Sec 4 */ #s4_home .wrapper { padding: 0 var(--c1o); } /* #s4_home .block { width: calc(20% - 2em); }*/ #s4_home .block { padding: 0 var(--c1o); } /* Sec 5 */ /* Sec 6 */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template Per Tutti */ #sec_product_album .grid, #sec_product_album .grid.quad-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } .cat_wrapper .grid.double-grid { width: 50%; margin-left: auto; margin-right: auto; } .cat_wrapper .grid.triple-grid { width: calc((100% / 3) * 2); margin-left: auto; margin-right: auto; } /* Template Corporate */ #s5_corporate .card_settore { grid-template-columns: 1fr 1fr; } /* Template Chi Siamo */ /* Template FAQ */ /* Template Prezzi */ /* Template System */ /* Template Landing Privati */ #s2_landing-privati .figurina { width: 15%; } #s3_landing-privati .box_wrapper + .modelli { margin: -12em -20% -70% auto; } #s3_landing-privati .modello > .rel { transform: scale(0.5); } #s6_landing-privati #world_map { width: 80%; } #s6_landing-privati .sec_title p { font-size: 250%; } /* Template Landing Corporate */ .sidebar_form { max-width: 1024px; } /* Template Landing Ass. Sportive */ #s4_sport .text p { font-size: 200%; } /* Template Per il Sociale */ #s1_sociale .card_ambiente .ico { width: 2.5em; filter: drop-shadow(0 0 .75em rgb(10 10 10 / 25%)); } /* Template Contatti */ #s4_contatti .sec_img { margin-top: calc(-1* var(--c15v)); } /*∞∞∞∞∞∞ BLOG ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /*∞∞∞∞∞∞ CARD BLOG ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ SINGLE BLOG ∞∞∞∞∞∞*/ #s2_single_blog .container:not(#single_signature) { padding: 0 var(--c2o); } #s2_single_blog .wrapper { padding-right: var(--c2o); } #s2_single_blog .single_share { display: none; } /* Sidebar */ #sidebar_blog { position: sticky; top: 3.5em; left: auto; width: 25%; margin-top: var(--c5v); padding: 1em 0; flex-wrap: wrap; transform: none; } /* Sidebar Index */ #sidebar_blog .index { border-radius: 1.5em; border: 1px solid var(--orange); box-shadow: 0 0 1em rgb(var(--black-rgb) / 25%); } #sidebar_blog .index:before, #sidebar_blog .index:after, #sidebar_blog .index_select { display: none; } #sidebar_blog .index_list { display: block; padding: 1.25em 0; background-color: var(--orange); } #sidebar_blog .index_list:before { display: none; } #sidebar_blog .index li { transition: .25s ease; } #sidebar_blog .index li button { height: auto; padding: .75rem 1.5rem; font: 700 75% / 1.25 var(--main-font); color: var(--white); opacity: .5; } #sidebar_blog .index li.active button { opacity: 1; } #sidebar_blog .index li:hover button { opacity: 1; } /* Sidebar Share */ #sidebar_blog #side_share { display: flex; gap: .5em; padding: 1em 1.5em; } #sidebar_blog #side_share p { font: 400 62.5% / 1.25 var(--main-font); color: var(--black); text-transform: uppercase; } #sidebar_blog #side_share .flex { gap: .25em; } #sidebar_blog #side_share .flex a { padding: 0; } #sidebar_blog #side_share .a2a_svg { width: 1.5em; height: 1.5em; } /* Sidebar Prev / Next */ #sidebar_blog .post_nav { display: block; margin-top: 1.5em; border-radius: 1.5em; overflow: hidden; background-color: rgb(var(--black-rgb) / 25%); box-shadow: 0 0 1em rgb(var(--black-rgb) / 25%); } #sidebar_blog .post_nav .text { top: 50%; left: 0; transform: translateY(-50%); padding: 1em; } #sidebar_blog .post_nav .text p { font-weight: 400; font-size: 75%; color: var(--white); text-transform: uppercase; } #sidebar_blog .post_nav .text button { margin: 1.25rem auto; padding: .5rem 1.25rem; font-size: 100%; } #sidebar_blog .post_nav .text button svg { width: 1.5em; min-width: 1.5em; } #sidebar_blog .post_nav .text button svg path {} #sidebar_blog .post_nav .text h3 { margin-top: 1rem; font-size: 75%; line-height: 1.1; color: var(--white); } /* Single Signature */ #s2_single_blog .container#single_signature { padding: var(--c10v) var(--c2o); } #s2_single_blog .container#single_signature .share_mobile { display: none; } /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀█▀ ▄▀▀▄ █▀▀▄ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1367 x 768 -> 1919 x 1080 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1367px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ /* Nav Menu */ /* Nav Landing */ /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Links */ /* Filters */ /* Scroll */ /* Swiper */ /* Components */ /* Tags */ /* Figurine */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ footer .fig_1 { transform: translate(-100%, -7.5%) rotate(-15deg); } footer .fig_1.active { transform: translate(5%, -7.5%) rotate(-10deg); } footer .fig_2 { transform: translate(100%, 0%) rotate(10deg); } footer .fig_2.active { transform: translate(-10%, 0%) rotate(5deg); } /* Structure */ /* Back Top */ /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ /* Section Blog */ /* Section Reviews */ /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ /* Card Empty */ /* Card Blog */ /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec 3 */ /* Sec 4 */ /* Sec 5 */ /* Sec 6 */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template Per Tutti */ /* Template Corporate */ #s5_corporate .card_settore { grid-template-columns: 1fr 1.25fr; } /* Template Chi Siamo */ /* Template FAQ */ /* Template Prezzi */ /* Template System */ /* Template Landing Privati */ /* .sec_order_content .block:nth-of-type(5) picture { transform: translate(-55%, -35%); }*/ .sec_order_content .block p { font-size: 87.5%; } #s3_landing-privati .box_2 { margin-left: var(--c7o); } #s3_landing-privati .box_wrapper + .modelli { margin-top: -10em; margin-bottom: -65%; } #s3_landing-privati .modello > .rel { transform: scale(0.625); } #s3_landing-privati .modello picture { width: 24em; } #s3_landing-privati .modelli .nav_prev { left: calc(50% - 12em); } #s3_landing-privati .modelli .nav_next { right: calc(50% - 12em); } /* Template Landing Corporate */ /* Template Landing Ass. Sportive */ /* Template Contatti */ /*∞∞∞∞∞∞ BLOG ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /*∞∞∞∞∞∞ CARD BLOG ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ SINGLE BLOG ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ } /** * * █ █ █▀▀▄ █▀▀ █▀▀▄ * █ █ █▀▀█ █▀▀ █▐█▀ * ▀▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - ÜBER | 1921 -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1921px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ /* Nav Menu */ /* Nav Landing */ /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Links */ /* Filters */ /* Scroll */ /* Swiper */ /* Components */ /* Tags */ /* Figurine */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Structure */ /* Back Top */ /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ /* Section Blog */ /* Section Reviews */ /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ /* Card Empty */ /* Card Blog */ /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec 3 */ /* Sec 4 */ /* Sec 5 */ /* Sec 6 */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template Per Tutti */ #s2_privati .container { max-width: unset; justify-content: flex-end; } #s2_privati .text { max-width: calc((1920px / 2) + var(--c7o)); } #s2_privati .sec_img { margin: 0; } /* Template Corporate */ /* Template Chi Siamo */ /* Template FAQ */ /* Template Prezzi */ /* Template System */ /* Template Landing Privati */ #landing_nav { max-width: 1024px; } #s2_landing-privati .container { padding: var(--c15v) var(--c7o); } /* Template Landing Corporate */ /* Template Landing Ass. Sportive */ /* Template Contatti */ /*∞∞∞∞∞∞ BLOG ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /*∞∞∞∞∞∞ CARD BLOG ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ SINGLE BLOG ∞∞∞∞∞∞*/ #sidebar_blog { top: 3.25em; } /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ } /** * * ▄▀█ █ ▄▀ * █▄▄█▄ █▀▄ * █ ▀ ▀▀ - DESKTOP 4K & UP | 2561px -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and ( min-width: 2561px ) {}