/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " ___NOME_SITO___ " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █ █ █▀▀ ▄▀▀▄ █▀▀▄ █▀▀ █▀▀▄ * █▀▀█ █▀▀ █▀▀█ █ █ █▀▀ █▐█▀ * ▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - HEADER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ header { z-index: 4; position: absolute; top: 0; left: 0; width: fit-content; } .head_wrapper { padding: 1rem 0.5rem; z-index: 2; } .menu_fixed { top: 0; right: 0; padding: 0.5rem 0.5rem; transition: .5s ease; } .menu_fixed .menu_container { background-color: rgb(var(--white-rgb) / 65%); backdrop-filter: blur(15px); padding: 0.25rem 0.25rem 0.25rem 0.5rem; border-radius: 0.35rem; transition: .5s ease; box-shadow: 0 0 1rem rgb(var(--blue-rgb) / 5%); border: 1px solid rgb(var(--white-rgb) / 10%); } .menu_fixed .lang_select { display: none; } .menu_fixed .custom_solutions { display: none; } header.nav_open .menu_fixed { top: 1rem; right: 1rem; } header.nav_open .menu_fixed .menu_container { border-radius: 3rem; padding: 0; background-color: transparent; backdrop-filter: unset; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .head_logo { display: block; width: 7rem; filter: brightness(0) invert(1); padding: 0.5rem 0; } .head_logo :where(img, svg) { width: 100%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAD CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Bottone prodotti */ #modal_prod_btn { padding: 0.5rem 1.75rem 0.5rem 0.5rem; color: var(--white); background-color: var(--blue); border-radius: 0.5rem; background-image: url(../images/svg/freccia-giu-bianca.svg); background-repeat: no-repeat; background-size: 0.75rem; background-position: calc(100% - 0.5rem) 50%; } /* Search */ #modal_search { max-width: 768px; } #modal_search_btn { padding: 0.5rem 0.8rem; } #modal_search_btn span { display: none; } /* Lang select */ .lang_select .wpml-ls-legacy-dropdown-click { width: fit-content; } .lang_select .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle { width: fit-content; background-color: transparent; border: 0; padding: 0.5rem 1.25rem 0.5rem 0.5rem; background-image: url(../images/svg/freccia-giu-blu.svg); background-repeat: no-repeat; background-size: 0.75rem; background-position: calc(100% - 0.25rem) 50%; } .lang_select .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:after { content: unset; display: none; } /* Hamburger */ #hamburger { display: inline-block; font-size: var(--rem); line-height: 0; overflow: visible; cursor: pointer; transition: .25s ease; padding: 0.5rem; } #hamburger .wrap { width: 1.5rem; height: 1.25rem; } #hamburger span { display: block; position: absolute; left: 50%; transform: translateX(-50%); width: 1.5rem; height: 4px; background-color: var(--blue); transform-origin: center; will-change: transform; transition: .25s ease; } #hamburger .top_bun { top: 0px; } #hamburger .burger { top: calc(50% - 2px); } #hamburger .bottom_bun { bottom: 0px; } /* Tapped / Clicked animation */ /* * Copiare l'animazione scelta dal file hamburger.css * oppure utilizare quella base qui sotto */ #hamburger.tapped span { 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); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ NAV MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #main_nav { display: block; position: fixed; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; transform: translateX(-110%); pointer-events: none; overflow: hidden; background-color: var(--light_blue); transition: 0.75s ease; } #main_nav.open { transform: translateX(0); pointer-events: initial; } #main_nav .blue_line { display: none; } #main_nav .dots { position: absolute; top: 0; left: 0; width: 265%; max-width: unset; pointer-events: none; transform: rotate(25deg); transform-origin: top left; mix-blend-mode: plus-lighter; opacity: 0.2; } #main_nav .menu_wrapper { top: 0; left: 0; display: grid; grid-template-columns: 25% calc(75% - 1rem); gap: 1rem; align-items: center; } #main_nav button.close { position: absolute; width: fit-content; top: 1.5rem; right: 1.5rem; width: 3rem; padding: 0.65rem; } /* Left */ #main_nav .left { transform: translateX(-100%); transition: .5s ease; transition-delay: 0.45s; } #main_nav.open .left { transform: translateX(0);} #main_nav .left img { width: 100%; transform: scale(1.75); transform-origin: right center; max-height: 100vh; } /* Right */ #main_nav .right { height: calc(100% - 2rem); display: flex; justify-content: center; align-items: flex-start; flex-direction: column; padding: 1rem; border: 1px solid rgb(var(--blue-rgb) / 75%); border-radius: 1.5rem; width: calc(100% - 1rem); } #main_nav .lang_select { gap: 0.25rem; } #main_nav .lang_select a { color: var(--blue); padding: 1rem 0.5rem; } #main_nav .lang_select a:first-of-type { padding-left: 0; } #main_nav .lang_select a.active { font-weight: 500; text-decoration: underline; } #main_nav .head_menu li { font: inherit; line-height: 1; } #main_nav .head_menu li.current-menu-item { font-weight: 400;} #main_nav .head_menu li a { position: relative; display: inline-block; font-size: 1.5rem; color: var(--blue); font-weight: 500; padding: 0.75rem 0; } /* #main_nav .head_menu li a::after { content: ""; position: absolute; bottom: 0; left: 50%; height: 2px; width: 0; transform: translateX(-50%); background-color: var(--blue); transition: .5s ease; } */ #main_nav .head_menu li.current-menu-item a { filter: drop-shadow(0 0 0.25rem rgb(var(--blue-rgb) / 50%)); } #main_nav .head_menu li a:hover { filter: drop-shadow(0 0 0.25rem rgb(var(--blue-rgb) / 50%)); } /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ main { background-color: var(--light_blue); } section { transition: .75s ease; } body.open section { transform: translateX(100%); } body.open main { overflow: clip; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKs / BTNs STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .link { position: relative; display: flex; justify-content: flex-start; align-items: stretch; gap: 2rem; width: fit-content; transition: .35s ease; } .link:hover { box-shadow: 0 0 1rem rgb(var(--blue-rgb) / 25%); } .link .txt { position: relative; font-size: 0.9rem; padding: 0.65rem 1rem; border-top: 1px solid rgb(var(--blue-rgb) / 50%); border-bottom: 1px solid rgb(var(--blue-rgb) / 50%); border-left: 1px solid rgb(var(--blue-rgb) / 50%); border-radius: 0.25rem 0 0 0.25rem; width: fit-content; text-transform: uppercase; font-weight: 700; color: var(--blue); text-align: left; display: flex; justify-content: center; align-items: center; } .link .txt::after { content: ""; position: absolute; width: 1.5rem; display: block; height: calc(100% + 1px); border-top: 1px solid rgb(var(--blue-rgb) / 50%); border-right: 1px solid rgb(var(--blue-rgb) / 50%); right: 0; top: -1px; transform: skewX(-22deg); transform: translateX(0%) skewX(-22deg); transform-origin: bottom left; } .link .arrow { position: relative; height: auto; display: flex; justify-content: center; align-items: center; padding: 0.5rem 0.75rem 0.5rem 0; border-radius: 0 0.25rem 0.25rem 0; } .link .arrow img { position: relative; z-index: 2; width: 1.5rem; min-width: 1.5rem; } .link .arrow::before { content: ""; position: absolute; top: 0; left: 0; width: 75%; height: 100%; transform: translateX(-100%) skewX(-22deg); transform-origin: bottom; } /* Shadow*/ .link.shadow { filter: drop-shadow(0 0 1rem rgb(var(--black-rgb) / 50%)); } /* White */ .link.white .arrow { background-color: var(--white); } .link.white .arrow::before { background-color: var(--white); } .link.total_white .arrow { background-color: var(--white); } .link.total_white .arrow::before { background-color: var(--white); } .link.total_white .txt { color: var(--white); border-top: 1px solid rgb(var(--white-rgb) / 75%); border-bottom: 1px solid rgb(var(--white-rgb) / 75%); border-left: 1px solid rgb(var(--white-rgb) / 75%); } .link.total_white .txt::after { border-top: 1px solid rgb(var(--white-rgb) / 75%);border-right: 1px solid rgb(var(--white-rgb) / 75%); } /* blue */ .link.blue .arrow { background-color: var(--blue); } .link.blue .arrow::before { background-color: var(--blue); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .filter_color { background-color: var(--color); mix-blend-mode: multiply; opacity: .5; } .filter_black_lr { background: linear-gradient(to right, rgb(var(--black-rgb) / 50%) 0%,rgb(var(--black-rgb) / 5%) 100%); } .filter_light_black { background-color: rgb(var(--black-rgb) / 5%); } .filter_blue_bt { background: linear-gradient(to bottom, rgb(var(--blue-rgb) / 5%) 0%,rgb(var(--blue-rgb) / 80%) 100%); } .filter_blue { background-color: var(--blue); } .filter_white { background-color: var(--white); } .filter_foot { background: linear-gradient(to bottom, rgb(var(--light_blue-rgb) / 100%) 0%, rgb(var(--light_blue-rgb) / 0%) 100%); } .radial_white { background: radial-gradient(ellipse farthest-side at center, rgb(var(--white-rgb) / 100%) 0%, rgb(var(--white-rgb) / 100%) 60%,rgb(var(--white-rgb) / 0%) 100%); pointer-events: none; } .radial_blue { background: radial-gradient(ellipse farthest-side at center, rgb(var(--blue-rgb) / 100%) 0%, rgb(var(--blue-rgb) / 100%) 60%,rgb(var(--blue-rgb) / 0%) 100%); pointer-events: none; } .slide_filter { position: absolute; top: 0; left: 0; width: calc(100% - 1.5rem); height: 100%; background-color: rgb(var(--black-rgb) / 5%); border-radius: 0.5rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .dvh100 { min-height: 100dvh; } .maxw_30ch { max-width: 30ch; } .tac_responsive { text-align: center; } .tac_responsive .link { margin: 1rem auto 0 auto; } .text .subtitle { font-size: 1.25rem; font-weight: 500; line-height: 1.5; } .img_radius, .img_radius img { border-radius: 0.5rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SWIPER NAV ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .nav_btn { top: 50%; transform: translateY(-50%); width: 3.5em; padding: .25em; z-index: 1; cursor: pointer; transition: .25s ease; } .nav_btn :where(img, svg) { width: 100%; } .nav_btn svg path { fill: var(--black); transition: .25s ease; } .nav_prev { left: 0; } .nav_next { right: 0; } .nav_btn.swiper-button-disabled { display: none; } /* Dots */ .nav_dots { gap: .5em; } /* NAV glightbox */ .glightbox-clean .gprev, .glightbox-clean .gnext { top: 45% !important; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ COMPONENTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Social */ .social a { display: inline-block; width: 3.5em; padding: .25em; } .social a :where(img,svg) { width: 100%; } .social a svg path { transition: .25s ease; } /* Breadcrumbs */ #breadcrumb { gap: 0.15rem .5em; justify-content: center; } #breadcrumb li { list-style: none; margin: 0; } #breadcrumb :where(a,span) { display: inline-block; min-width: fit-content; } /* close overlay */ #close_overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(var(--blue-rgb) / 50%); z-index: 5; } /* Blur items */ .blur_item { position: absolute; top: 0; width: var(--c5o); height: 100%; backdrop-filter: blur(5px); z-index: 2; pointer-events: none; } .blur_item.left { left: 0; } .blur_item.right { right: 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ ANIMATIONS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Left right */ .txt_lr :where(h1, h2, p.h1, p, .link, h3:not(.single_btn h3)) { opacity: 0; transform: translateX(-25%); transition: .75s ease; } .txt_lr.active :where(h1, h2, p.h1, p, .link, h3:not(.single_btn h3)) { opacity: 1; transform: translateX(0); } .txt_lr :where(h1.p, p, h3:not(.single_btn h3)) { transition-delay: 0.25s; } .txt_lr :where(.link) { transition-property: opacity, transform, box-shadow; transition-duration: 0.35s; transition-delay: 0.55s, 0.55s, 0s; } .txt_lr .btn_list .single_btn { transform: translateX(-2rem); opacity: 0; } .txt_lr .btn_list.active .single_btn { transform: translateX(0); opacity: 1; } /* Right left */ .txt_rl :where(h1, h2, p.h1, p, .link, h3:not(.single_btn h3)) { opacity: 0; transform: translateX(25%); transition: .75s ease; } .txt_rl.active :where(h1, h2, p.h1, p, .link, h3:not(.single_btn h3)) { opacity: 1; transform: translateX(0); } .txt_rl :where(h1.p, p, h3:not(.single_btn h3)) { transition-delay: 0.25s; } .txt_rl :where(.link) { transition-property: opacity, transform, box-shadow; transition-duration: 0.35s; transition-delay: 0.55s, 0.55s, 0s;} .txt_rl .btn_list .single_btn { transform: translateX(2rem); opacity: 0; } .txt_rl .btn_list.active .single_btn { transform: translateX(0); opacity: 1; } /* Bottom top */ .txt_bt :where(h1, h2, p.h1, p, h3:not(.single_btn h3), li) { opacity: 0; transform: translateY(2rem); transition: .75s ease; } .txt_bt.active :where(h1, h2, p.h1, p, h3:not(.single_btn h3), li) { opacity: 1; transform: translateY(0); } .txt_bt :where(h1.p, p, h3:not(.single_btn h3), li) { transition-delay: 0.25s; } /* Img transform */ .img_lr { transform: translateX(-25%); opacity: 0; transition: 0.75s; } .img_lr.active { transform: translateX(0); opacity: 1; } .img_rl { transform: translateX(25%); opacity: 0; transition: 0.75s; } .img_rl.active { transform: translateX(0); opacity: 1; } /* Scale */ .scale_anim { opacity: 0; transform: scale(0.75); transition: .75s ease; } .scale_anim.active { opacity: 1; transform: scale(1); } /** * * █▀▀ ▄▀▀▄ ▄▀▀▄ ▀▀█▀▀ █▀▀ █▀▀▄ * █▀▀ █ █ █ █ █ █▀▀ █▐█▀ * ▀ ▀▀ ▀▀ ▀ ▀▀▀ ▀ ▀▀ - FOOTER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ STRUCTURE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ footer { overflow: hidden; } /* From sec */ footer .form_sec { background-color: var(--blue); padding-bottom: calc(var(--c15v) + 2rem); } footer .form_sec .form_container .text { padding: 3rem 0; } /* Foot images */ .foot_blue_line { position: absolute; bottom: -2rem; right: 50%; width: 95vw; max-width: unset; pointer-events: none; transform: translateX(50%); } .foot_dots { display: none; } .foot_logo { width: 100%; transform: translateY(1rem); filter: drop-shadow(0 0 0.5rem rgb(var(--black-rgb) / 5%)); } .foot_logo :where(img, svg) { width: 100%; } /* Foot Block */ .foot_block { padding: 4rem 1rem 0 1rem; margin-top: -2rem; background-color: rgb(var(--blue-rgb) / 10%); backdrop-filter: blur(25px); border-radius: 1rem; border: 1px solid rgb(var(--white-rgb) / 25%); } .foot_block .text { margin-bottom: var(--c15v); z-index: 1; } .foot_block .text .title { font-size: 1.25rem; text-transform: uppercase; color: var(--blue); font-weight: 700; line-height: 1.2; margin-bottom: 1rem; } .foot_block .text :where(p, a, span) { font-size: 1rem; color: var(--blue); line-height: 1.6; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CREDITS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #credits p { font-size: .825em; line-height: 1.5; margin: 0 auto; z-index: 1; font-weight: 350; color: var(--blue); } #credits .resp_sep { display: none; } #credits a { display: inline-block; font: inherit; color: inherit; } /** * * ▄▀▀ █▀▀ ▄▀▀ ▀▀█▀▀ ▀ ▄▀▀▄ █▄ █ ▄▀▀ * ▀▄ █▀▀ █ █ █ █ █ █ ▀█ ▀▄ * ▀▀ ▀▀▀ ▀▀ ▀ ▀ ▀▀ ▀ ▀ ▀▀ - SECTIONS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION S1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1 .bkg_thumb { overflow: hidden; } .s1_title h1 { font-weight: 350; } .s1_title h1 .title_bold { font-weight: 700; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION LISTA BOTTONI (BTN LIST) ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .btn_list { margin-top: 2rem; } .btn_list .single_btn { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; padding: 1.25rem 1rem; background-color: rgb(var(--blue-rgb) / 10%); transition: .35s ease; } .btn_list .single_btn:hover, .btn_list .single_btn.active { background-color: rgb(var(--blue-rgb) / 25%); transition-delay: 0s !important; } .btn_list .single_btn:first-of-type { margin-top: 0; } .btn_list .single_btn h3 { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; color: var(--blue); text-align: left; } .btn_list .single_btn .number { font-size: 0.9rem; font-weight: 300; color: var(--blue); } .btn_list + .link { margin-top: 2rem !important; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION CARDS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_section { grid-template-columns: 100%; gap: 1.5rem; } .card_section .single_card { padding: 0.6rem; border: 1px solid rgb(var(--blue-rgb) / 75%); border-radius: 1rem; } .card_section .single_card .filter { border-radius: 1rem; opacity: 0; transition: .35s ease; } .card_section .single_card.active .filter { opacity: 1; } .card_section .single_card .left picture img { border-radius: 0.5rem; max-height: 450px; } .card_section .single_card .right { padding: 2rem; } .card_section .single_card .right .title { gap: 0.5rem; } .card_section .single_card .right .title img { width: 3rem; min-width: 3rem; } .card_section .single_card .right .text { margin-top: 1.5rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION TABLES ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .table_sec.table_container { overflow-x: auto; padding-bottom: 1.5rem; } .table_sec.table_container .table_wrapper { border-radius: 1rem; background-color: rgb(var(--white-rgb) / 80%); width: fit-content; min-width: 100%; } .table_sec.table_container::-webkit-scrollbar { height: 6px; background-color: var(--white); border: 1px solid rgb(var(--blue-rgb) / 25%); border-radius: 2rem; } .table_sec.table_container::-webkit-scrollbar-thumb { height: 6px; background-color: var(--blue); border-radius: 2rem; } .table_sec.table_container .table_wrapper :where(.dt-length, .dt-search, .paging_simple_numbers, .dt-info, .dt-column-order) { display: none; } .table_sec.table_container th { background: var(--blue); color: var(--white); font-weight: 500; font-size: 14px; text-align: center; } .table_sec.table_container tr td { border-top: 0; border-left: 1px solid var(--blue); text-align: center; font-size: 14px; padding: 0.35rem 1rem; color: var(--blue); } .table_sec.table_container tr td:first-of-type { border-left: 0; } .table_sec.table_container tbody tr:first-of-type td { border-bottom: 1px solid var(--blue); } .table_sec.table_container tbody tr:nth-of-type(odd) td { background-color: rgb(var(--white-rgb) / 80%); } .table_sec.table_container caption { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, calc(100% + 0.5rem)); } .table_sec.table_container caption a { text-decoration: underline; font-size: 14px; padding: 0.35rem 1rem !important; text-align: center; border-radius: 0.5rem; background-color: var(--blue) !important; color: var(--white); } /** * * ▄▀▀ ▄▀▀▄ █▀▀▄ █▀▀▄ ▄▀▀ * █ █▀▀█ █▐█▀ █ █ ▀▄ * ▀▀ ▀ ▀ ▀ ▀▀ ▀▀▀ ▀▀ - CARDS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINEA PRODOTTO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .product_line { padding: 1rem; background-color: var(--modals_white); border-radius: 0.5rem; width: calc(50% - 0.5rem); } .product_line .preview { margin-bottom: 0.75rem; } .product_line .preview.thumb { width: calc(100% + 1rem); transform-origin: right; } .product_line .top { cursor: pointer; } .product_line .top .title { padding-bottom: 1rem; } .product_line .top .title .name { display: none; } .product_line .top .title p { text-align: center; margin-top: 0.25rem; } .product_line .top button { padding: 1rem 0.5rem 0 0.5rem; border-top: 1px solid rgb(var(--blue-rgb) / 25%); margin-top: auto; } .product_line .top button svg { width: 1.5rem; transition: .5s ease; } .product_line.open .top button svg { transform: scale(-1); } .product_line .bottom { margin-top: 1rem; display: none; } .product_line .bottom .single_spec { padding: 0.25rem 0; border-top: 1px solid rgb(var(--blue-rgb) / 25%); display: flex; flex-direction: column; align-items: center; justify-content: center; } .product_line .bottom .single_spec:first-of-type { border-top: 0; } .product_line .bottom .single_spec p { text-align: center; } .product_line .bottom .single_spec p.label { font-size: 0.8rem; font-weight: 350; } .product_line .bottom .single_spec img.label { width: 2rem; margin: 0 auto; } .product_line .bottom .btn_blue { width: 100%; margin-top: 1rem; font-weight: 700; color: var(--blue); padding: 0.5rem; border: 1px solid var(--blue); text-align: center; text-transform: uppercase; } /* Colors */ /* .prod_color { position: relative; border-radius: 8rem; width: 3rem; height: 3rem; } .prod_color::after { position: absolute; top: 50%; left: 50%; width: 30%; height: auto; aspect-ratio: 1 / 1; border-radius: 8rem; transform: translate(-50%, -50%); } .trasparente .prod_color { border: 1px solid rgb(var(--black-rgb) / 50%); } .bianco .prod_color { border: 1px solid rgb(var(--black-rgb) / 25%); } .kevlar .prod_color::after { content: ""; background-color: var(--yellow); } .polyester .prod_color::after { content: ""; background-color: var(--white); } */ .product_line .prod_color { position: relative; display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; } .preview.ico picture { position: relative; width: 3rem; height: 3rem; } .preview svg { width: 100%; } .preview svg .int { opacity: 0; } .preview.transparent svg .ext { fill: transparent; stroke: rgb(var(--black-rgb) / 50%); } .preview.verde svg .ext { fill: var(--verde); stroke: transparent; } .preview.rosso svg .ext { fill: var(--rosso); stroke: transparent; } .preview.blue svg .ext { fill: var(--prod_blue); stroke: transparent; } .preview.bianco svg .ext { fill: var(--white); stroke: rgb(var(--black-rgb) / 50%); } .preview.arancione svg .ext { fill: var(--arancione ); stroke: transparent; } .preview.avorio svg .ext { fill: var(--avorio); stroke: transparent; } .preview.kevlar svg .int { opacity: 1; fill: var(--yellow); filter: drop-shadow(0 0 0.25rem rgb(var(--black-rgb) / 5%)); } .preview.polyester svg .int { opacity: 1; fill: var(--white); filter: drop-shadow(0 0 0.25rem rgb(var(--black-rgb) / 5%)); } .preview.top_rosso svg .top { fill: var(--rosso_top_cover); stroke: var(--rosso_top_cover); } .preview.top_verde svg .top { fill: var(--verde_top_cover); stroke: var(--verde_top_cover); } .preview.top_verde_petrolio svg .top { fill: var(--verde_petrolio_top_cover); stroke: var(--verde_petrolio_top_cover); } /* Cleats */ .product_line.cleats .top .title .name { display: block; font-size: 0.8rem; } .product_line.cleats .preview picture { height: 5rem; } .product_line.cleats .preview picture img { mix-blend-mode: multiply; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD EMPTY ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_empty { padding: 2em 1.5em; } .card_empty svg { width: 6em; } .card_empty .text { margin-top: 1em; } /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #home_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } #s1_home p { color: var(--white); font-weight: 350; } #s1_home h1 { color: var(--white); font-size: 1.5rem; } #s1_home .bkg_video_wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } #s1_home .video_container { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); width: calc(100% - var(--c20o)); z-index: 1; max-width: 375px; opacity: 0; transition: .5s ease; } #s1_home .video_container.active { transform: translate(-50%, 70%); opacity: 1; } #s1_home .video_container video { border-radius: 1rem; object-fit: cover; border-radius: 0.5rem; aspect-ratio: 4 / 2.5; } #s1_home .video_container img { width: 4rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s2_home .container { padding-top: calc(var(--c15v) * 3); } #s2_home .radial_white { bottom: -30%; left: -15%; height: 100%; position: absolute; } #s2_home_swiper { max-width: 450px; margin: 0 auto; } #s2_home_swiper .swiper-slide { height: auto; } #s2_home_swiper .slide_container { height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #s2_home_swiper .slide_container .text { padding: 1rem 1rem 1.5rem 1.5rem; max-width: 60%; position: absolute; bottom: 0; left: 0; } #s2_home_swiper .slide_container .text h3 { text-transform: uppercase; font-size: 1.15rem; font-weight: 500; } #s2_home_swiper .slide_container .num { position: absolute; top: 1rem; right: 3rem; font-size: 5.5rem; font-weight: 200; color: var(--blue); line-height: 1; } #s2_home_swiper .slide_container picture { padding: 1rem 0; max-height: 75%; } #s2_home_swiper .slide_container picture img { object-fit: contain; object-position: left; } #s2_home_swiper .slide_container .btn_scopri { opacity: 0; transition: .35s ease; } #s2_home_swiper .slide_container:hover .btn_scopri { opacity: 1; } #s2_home_swiper .nav_btn { padding: 0; width: 3.25rem; } #s2_home_swiper .nav_btn:hover { z-index: 2; } #s2_home_swiper .nav_prev { top: unset; transform: unset; bottom: 1.5rem; right: 4.75rem; left: unset; } #s2_home_swiper .nav_next { top: unset; right: 2.5rem; bottom: 1.5rem; transform: unset; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #swiper_icos { position: absolute; left: 0; bottom: 55%; z-index: 2; overflow: visible; } #swiper_icos .swiper-slide img { width: 3.5rem; filter: brightness(0) invert(1); } #swiper_icos .swiper-slide button { display: flex; justify-content: center; align-items: center; aspect-ratio: 1 / 1; border-radius: 8rem; padding: 1rem; margin: 0 auto; transition: .25s ease; } #swiper_icos .swiper-slide.swiper-slide-thumb-active button { background-color: var(--blue); transform: scale(1.25); } #s3_home_swiper .slide_container { overflow: hidden; } #s3_home_swiper .filter { background: linear-gradient(to bottom, rgb(var(--blue-rgb) / 0%) 0%,rgb(var(--blue-rgb) / 90%) 100%); border-radius: 50%; width: 140%; margin-left: -20%; } #s3_home_swiper .swiper-slide .text { position: absolute; bottom: 25%; left: 50%; transform: translateX(-50%); width: 90%;} #s3_home_swiper .swiper-slide .text h3 { color: var(--white); font-weight: 700; color: var(--white); font-size: 10vw; filter: drop-shadow(0 0 0.5rem rgb(var(--black-rgb) / 50%)); line-height: 1; } #s3_home_swiper .swiper-slide .text p { color: var(--white); filter: drop-shadow(0 0 1rem rgb(var(--black-rgb) / 50%)); margin-top: 1rem; } #s3_home_swiper .swiper-slide picture { aspect-ratio: 1 / 1; clip-path: circle(50% at 50% 50%); width: 140%; margin-left: -20%; } #s3_home_swiper .nav_btn { width: 5rem; bottom: 10%; } #s3_home_swiper .nav_prev { top: unset; left: unset; right: 50%; transform: translateX(calc(50% - 1.7rem)); } #s3_home_swiper .nav_next { top: unset; left: unset; right: 50%; transform: translateX(calc(50% + 1.7rem)); } #s3_home .right { width: calc(100vw - 8px); transform: translateX(calc(var(--c5o) * -1)); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .gallery-wrap { position: relative; width: calc(100vw - 8px); margin-left: -25vw; } .gallery-track { display: flex; align-items: center; gap: 1rem; width: max-content; min-width: 110vw; will-change: transform; } .gallery-track picture { display: block; flex: 0 0 auto; } .gallery-track img { display: block; height: auto; object-fit: contain; width: 5rem; min-width: 5rem; } #s4_home .title { margin-bottom: 3rem; } #s4_home .filter_light_black { border-radius: 2.5rem; } #s4_home .wrapper { padding: 2rem 1.5rem; border-radius: 1.5rem; } #s4_home .flex_container { margin-top: 3rem; } #s4_home .flex_container .left .link { margin-top: 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 5 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s5_home { z-index: 2; } #s5_home .container { min-height: 90vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } #s5_home video { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } #s5_home .punti_forza { margin-top: 3rem; gap: 2rem; } #s5_home .single_pf { opacity: 0; transform: scale(0.8); transition: .35s ease; } #s5_home .punti_forza.active .single_pf { opacity: 1; transform: scale(1); } #s5_home .single_pf picture { margin-bottom: 1rem; } #s5_home .single_pf picture img { width: 3rem; } #s5_home .single_pf .text h3 { font-size: 1.5rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 6 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s6_home .radial_blue { position: absolute; top: 0; left: 50%; width: 115%; height: auto; aspect-ratio: 1 / 1; transform: translate(-50%, -60%); opacity: 0.2; } #s6_home .text { z-index: 1; } #s6_home .text .dots { position: absolute; bottom: 0; left: -40%; transform: translate(0, 2%) scale(2); transform-origin: left bottom; width: 100%; height: auto; opacity: 0.5; } #s6_home picture { pointer-events: none; } #s6_home picture img { transform: scale(2); transform-origin: top; pointer-events: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 7 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s7_home .right { width: calc(100vw - 8px); min-width: calc(100vw - 8px); transform: translateX(calc(var(--c5o) * -1)); } #s7_home .right picture { aspect-ratio: 1 / 1; clip-path: circle(50% at 50% 50%); width: 140%; margin-left: -20%; opacity: 0; transition: .5s ease; } #s7_home .right picture.active { opacity: 1; } #s7_home .right picture:not(:first-of-type) { position: absolute; top: 0; left: 0; height: 100%; } #s7_home .right picture .label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; display: block; width: 110vw; z-index: 1; padding: 1rem; background-color: var(--blue_sky); border-top: 1px solid rgb(var(--white-rgb) / 25%); border-bottom: 1px solid rgb(var(--white-rgb) / 25%); } #s7_home .right picture .label .num { position: relative; display: block; margin-bottom: 0.25rem; font-size: 0.75rem; color: var(--white); } #s7_home .right picture .label .txt { position: relative; display: block; text-transform: uppercase; color: var(--white); font-weight: 700; } /** * * █▀▀▄ ▄▀▀▄ ▄▀▀▀ █▀▀ ▄▀▀ * █ █ █▀▀█ █ ▀▌ █▀▀ ▀▄ * █▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀ - TEMPLATES _ PAGINE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE COMPANY ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ #s2_company .right .thumb_img img { border-radius: 0.5rem; filter: brightness(0.7); } #s2_company .right .play { width: 30%; max-width: 150px; } /* Section 3 */ #s3_company .radial_blue { position: absolute; top: 0; right: 0; width: 100%; height: auto; aspect-ratio: 1 / 1; transform: translate(50%, 50%); opacity: 0.15; pointer-events: none; } #s3_company .date_container { gap: 1.5rem; } #s3_company .single_date { padding: 2rem; border-radius: 1rem; opacity: 0.25; transition: .5s ease; transform: scale(0.9); } #s3_company .single_date.active { background-color: var(--white); transform: scale(1); opacity: 1; } #s3_company .single_date .date { color: var(--blue); font-weight: 400; font-size: 4rem; margin-bottom: 0.75rem; position: relative; display: block; } /* Section 4 */ #s4_company .wrapper { padding: 2rem 1.5rem; border-radius: 1.5rem; } #s4_company .filter_blue { border-radius: 1.5rem; } #s4_company .title { margin-bottom: 3rem; } #s4_company_swiper .swiper-slide .slide_container { max-width: 250px; margin: 0 auto; } #s4_company_swiper .swiper-slide .count { display: block; width: 100%; position: relative; text-align: right; color: rgb(var(--white-rgb) / 75%); font-weight: 200; font-size: 1rem; } #s4_company_swiper .swiper-slide .text p { transition: .35s ease; } #s4_company_swiper .swiper-slide picture { margin-bottom: 1.5rem; } #s4_company_swiper .swiper-slide picture img { width: 6rem; filter: brightness(0) invert(1); transition: .35s ease; } #s4_company_swiper .swiper_dots { position: absolute; left: 50%; bottom: -2rem; text-align: center; transform: translate(-50%, calc(100% + 0.75rem)); width: fit-content; } #s4_company_swiper .swiper_dots span { width: 0.85rem; height: 0.85rem; background-color: transparent; border: 1px solid var(--blue); opacity: 1; margin: 0 0.15rem; } #s4_company_swiper .swiper_dots span.swiper-pagination-bullet-active { background-color: var(--blue); } /* Section 5 */ #s5_company .left p { font-size: 1.5rem; font-weight: 500; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE INDUSTRIAL APPLICATIONS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ #s2_industrial-apl .radial_blue { position: absolute; top: 0; right: 0; width: 100%; height: auto; aspect-ratio: 1 / 1; transform: translate(50%, 50%); opacity: 0.15; pointer-events: none; } #s2_industrial-apl .flex_container { flex-direction: column-reverse; } #s2_industrial-apl .thumb_img { margin-top: -20%; transform: translateX(calc(var(--c5o) + 20%)); display: flex; justify-content: flex-end; align-items: center; } #s2_industrial-apl .thumb_img img { max-width: 600px; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CUSTOM SOLUTINS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #page_custom :where(#s2_custom, #s5_custom) .radial_blue { position: absolute; top: 50%; left: 0; width: 100%; height: auto; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); opacity: 0.15; pointer-events: none; } #page_custom :where(#s3_custom, #s5_custom) .right picture img { max-height: 50vh; object-fit: contain; object-position: left; } /* Section 3 */ #s3_custom .radial_white { position: absolute; bottom: 0; right: 0; width: 100%; height: auto; aspect-ratio: 1 / 1; transform: translate(50%, 50%); opacity: 0.75; pointer-events: none; } /* Section 4 */ #s4_custom .bkg_img { top: 0; left: 0; width: 100%; height: 100%; } #s4_custom .filter { background-color: rgb(var(--black-rgb) / 75%); } #s4_custom .left .link .txt { color: var(--white); border-top: 1px solid rgb(var(--white-rgb) / 100%); border-bottom: 1px solid rgb(var(--white-rgb) / 100%); border-left: 1px solid rgb(var(--white-rgb) / 100%); } #s4_custom .left .link .txt::after { border-top: 1px solid rgb(var(--white-rgb) / 100%); border-right: 1px solid rgb(var(--white-rgb) / 100%); } #s4_custom .right picture { transform: translateY(2rem); } #s4_custom .right picture img { max-height: 50vh; object-fit: contain; object-position: right; } /* Section 5 */ #s5_custom .container {padding-top: calc(var(--c15v) + 2rem); } /* Section 6 */ #s6_custom .radial_white { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; aspect-ratio: 1 / 1; transform: translate(-50%, 50%); opacity: 0.75; pointer-events: none; } /* Section 7 */ #s7_custom .title { margin-bottom: 2rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE SERVICES ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ #s1_services .radial_white { position: absolute; bottom: 0; right: 0; width: 100%; height: auto; aspect-ratio: 1 / 1; transform: translate(50%, 50%); opacity: 0.75; pointer-events: none; } /* Section 3 */ #s3_services .services_right { display: grid; grid-template-columns: 100%; gap: var(--c15v); } #s3_services .services_left { display: none; } #s3_services .services_right .single_service .service_image { margin-top: 1.5rem; } #s3_services .services_right .single_service .service_image img { aspect-ratio: 4 / 2.6; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CONTATTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 3 */ #s3_contatti .map_bkg { transform: translate(-50%, -50%) scale(1.5); pointer-events: none; } #s3_contatti .left .logo img { width: 14rem; } #s3_contatti .flex_container { border: 1px solid rgb(var(--blue-rgb) / 75%); border-radius: 1.25rem; padding: 2rem 1rem; } #s3_contatti .text h3 { font-size: 1.25rem; text-transform: uppercase; color: var(--blue); font-weight: 700; line-height: 1.2; margin-bottom: 1rem; } #s3_contatti .text :where(p, a, span) { font-size: 1rem; color: var(--blue); line-height: 1.6; } #s3_contatti .flex_container .right .w100.flex { gap: 1rem 2px; } /* Section 4 */ #s4_contatti .iframe_container iframe { min-height: 60vh; } /** * * ▄▀▀▄ █▀▀▄ ▄▀▀▀ █ █ ▀ ▐▌ ▐▌ █▀▀ * █▀▀█ █▐█▀ █ █▀▀█ █ ▀▄▀ █▀▀ * ▀ ▀ ▀ ▀▀ ▀▀▀ ▀ ▀ ▀ ▀ ▀▀▀ - TEMPLATES _ ARCHIVIO * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀ ▀ █▄ █ ▄▀▀▀ █ █▀▀ * ▀▄ █ █ ▀█ █ ▀▌ █ ▄ █▀▀ * ▀▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ - SINGLE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_single .container { padding-top: 8rem; } #s1_single .text { z-index: 1; } #s1_single .text h1 { font-weight: 500; } #s1_single .thumb_img { margin-top: 2rem; } #s1_single:not(.child) picture { transform: rotateY(180deg); } #s1_single .thumb_img .radial_white { position: absolute; top: 0; left: 0; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-65%, -50%); width: 125%; aspect-ratio: 1 / 1; height: auto; } #s1_single.child picture .radial_white { left: unset; right: 0; transform: translate(35%, -50%); } #s1_single .thumb_img img { position: relative; max-height: 35vh; object-fit: contain; object-position: left; } /* Cleats */ #s1_single:where(.single_255, .single_1258) picture { padding-right: var(--c5o); } #s1_single:where(.single_255, .single_1258) picture img { object-position: center; mix-blend-mode: multiply; } /* Child */ #s1_single .specs { gap: 1rem; margin-top: 2rem; border: 1px solid rgb(var(--blue-rgb) / 35%); border-radius: 0.75rem; padding: 1rem 2rem; justify-content: space-around; } #s1_single .specs .prod_thumb { width: 100%; text-align: center; } #s1_single .specs .prod_color { display: flex; position: relative; width: 3rem; min-width: 3rem; height: 3rem; border-radius: 8rem; margin: 0 auto; } #s1_single .specs .single_spec { text-align: center; } #s1_single .specs .single_spec span { display: block; position: relative; font-size: 400; color: var(--blue); } #s1_single .specs .single_spec .label { text-transform: uppercase; font-size: 16px; margin-bottom: 0.5rem; } #s1_single .specs .single_spec .value { font-size: 1.25rem; font-weight: 700; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .single_modal { position: fixed; bottom: 6rem; left: 50%; width: calc(100% - 4rem); z-index: 5; transform: translate(-50%, calc(100% + 6rem)); opacity: 0; pointer-events: none; transition: .5s ease; max-width: 450px; } .single_modal.open { transform: translate(-50%, 0); opacity: 1; pointer-events: initial; } .s2_single .buttons_mobile { bottom: 2rem; left: 50%; transform: translateX(-50%); box-shadow: 0 0 1rem rgb(var(--black-rgb) / 10%); z-index: 2; } .s2_single .buttons_mobile button { background-color: var(--blue); padding: 0.75rem 1rem; color: var(--white); font-weight: 500; text-align: center; min-width: 6rem; } .s2_single .intro h3 { font-size: 1.5rem; font-weight: 500; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s3_single .title h2 { margin-bottom: 3rem; } .s3_single .radial_blue { position: absolute; bottom: 0; left: 0; width: 60%; height: auto; aspect-ratio: 1 / 1; transform: translate(-50%, -1%); opacity: 0.10; pointer-events: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PARENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Parent */ #single_parent .buttons_mobile button:nth-of-type(1) { border-radius: 0.5rem 0 0 0.5rem; } #single_parent .buttons_mobile button:nth-of-type(2) { border-radius: 0 0.5rem 0.5rem 0; border-left: 1px solid var(--white); } #right_index .btns_wrapper { background-color: var(--modals_white); padding: 2rem 1.5rem; border-radius: 1rem; } #right_index button { position: relative; display: block; padding: 0.75rem 0; border-top: 1px solid rgb(var(--black-rgb) / 5%); text-align: left; color: var(--blue); width: 100%; transition: .35s ease; } #right_index button::before { content: ""; width: 0.35rem; height: 0.35rem; background-color: var(--blue); position: absolute; left: -0.75rem; top: 50%; transform: translateY(-50%); border-radius: 8rem; opacity: 0; transition: .15s ease; } #right_index button.active::before, #right_index button:hover::before { opacity: 1; } #right_index button:first-of-type { border-top: 0; } /* Categorie left */ #term_modal .product img { width: 6rem; } /* ∞∞∞∞∞∞∞ Flexible content ∞∞∞∞∞∞∞ */ /* Prodotti */ #flexible_container .prodotti .prod_container { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 1rem; } #flexible_container .prodotti .sec_title { margin-bottom: 1.5rem; } #flexible_container .prodotti .sec_title :where(h3) { text-transform: uppercase; font-weight: 500; font-size: 1.25rem;} #flexible_container .prodotti .sec_title .open_all { margin-top: 0.5rem; display: block; position: relative; font-size: 0.9rem; color: rgb(var(--blue-rgb) / 80%); text-decoration: underline; } #flexible_container .prodotti .notes { margin-top: 1.5rem; } /* Testi */ #flexible_container .content h3 { font-size: calc(var(--h3-size) * 0.65); } #flexible_container .content table { border: 0; box-shadow: 0 0 1rem rgb(var(--black-rgb) / 10%); margin-top: 1rem; border-radius: 0.5rem; } #flexible_container .content table td { background-color: var(--white); padding: 0.75rem 1rem; border: 0; border-bottom: 1px solid var(--blue); color: var(--blue); } #flexible_container .content table td .td_container { display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; } #flexible_container .content table td .td_container img { width: 2.5rem; } #flexible_container .content table td:nth-of-type(even) { border-left: 1px solid var(--blue); } #flexible_container .content table tr:first-child td:first-child { border-radius: 0.5rem 0 0 0; } #flexible_container .content table tr:first-child td:nth-child(2) { border-radius: 0 0.5rem 0 0; } #flexible_container .content table tr:last-child td:first-child { border-radius: 0 0 0 0.5rem; } #flexible_container .content table tr:last-child td:nth-child(2) { border-radius: 0 0 0.5rem 0; } #flexible_container .content table tr:last-of-type td { border-bottom: 0; } /* FAQ */ .faq .card_accordion { margin-top: 1rem; border: 1px solid var(--blue); border-radius: 0.75rem; transform: translateY(2rem); opacity: 0; transition: .35s ease; } .faq .accordion_container.active .card_accordion { transform: translateY(0); opacity: 1; } .faq .card_accordion .filter { background: linear-gradient(to bottom, rgb(var(--blue-rgb) / 100%) 0%, rgb(var(--blue_sky-rgb) / 100%) 100%); border-radius: 0.75rem; opacity: 0; transition: .35s ease; } .faq .card_accordion.active .filter, .faq .card_accordion:hover .filter { opacity: 1; } .faq .accordion_head { gap: 1rem; padding: 1.5rem 1.5rem; cursor: pointer; } .faq .accordion_head h3 { font-size: 1rem; font-weight: 700; transition: .35s ease; } .faq .card_accordion.active .accordion_head h3, .faq .card_accordion:hover .accordion_head h3 { color: var(--white); } .faq .accordion_head svg { width: 2.5rem; min-width: 2.5rem; } .faq .accordion_head svg path { fill: var(--blue); transition: .35s ease; } .faq .card_accordion.active .accordion_head svg path, .faq .card_accordion:hover .accordion_head svg path { fill: var(--white); } .faq .card_accordion.active .accordion_head svg .line { opacity: 0; } .faq .accordion_text { display: none; padding: 0 1.5rem 1.5rem 1.5rem; } .faq .accordion_text p { color: var(--blue); transition: .35s ease; } .faq .card_accordion.active .accordion_text p, .faq .card_accordion:hover .accordion_text p { color: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CHILD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Prodotti left */ #cat_modal .wrapper { background-color: var(--modals_white); border-radius: 1rem; } #cat_modal .product span { position: relative; display: block; min-width: 2rem; width: 2rem; height: 2rem; border-radius: 8rem; } #cat_modal .product { padding: 0 1rem; } #cat_modal .product .preview picture { width: 3rem; height: 3rem; } #cat_modal .product .preview picture img { object-fit: contain; } /* Tables */ #single_child { grid-template-columns: 100%; } #single_child .buttons_mobile button { border-radius: 0.5rem; } #single_child .table h2 { margin-bottom: 1.5rem; } /* Correlati */ #featured_swiper .card { height: auto; } #featured_swiper .card a { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; } #featured_swiper .card .text { padding: 1rem 2.5rem 1rem 1rem; text-align: center; } #featured_swiper .card .text h3 { text-transform: uppercase; font-size: 1.15rem; font-weight: 500; } #featured_swiper .swiper_dots { transform: unset; margin: 1.5rem auto 0 auto; text-align: center; } #featured_swiper .swiper-pagination-bullet { width: 0.75rem; height: 0.75rem; } #featured_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--blue); } /** * * █▀▀ ▄▀▀▄ █▀▀▄ █▄ ▄█ * █▀▀ █ █ █▐█▀ █ █ █ * ▀ ▀▀ ▀ ▀▀ ▀ ▀ - FORM * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /* Labels */ #form .wpforms-field label { color: var(--white); text-transform: uppercase; font-weight: 350; font-size: 0.8rem; margin: 0; } #form .wpforms-field .wpforms-required-label { color: var(--white); } #form .wpforms-field:where(.wpforms-field-name, .wpforms-field-text, .wpforms-field-phone, .wpforms-field-email, .wpforms-field-textarea, .wpforms-field-file-upload) label { position: absolute; top: 0; left: 0; transition: .25s ease; } #form .focus.wpforms-field:where(.wpforms-field-name, .wpforms-field-text, .wpforms-field-phone, .wpforms-field-email, .wpforms-field-textarea) label { top: -1rem; font-size: 0.8rem; } /* Input */ #form .wpforms-field :where(input, textarea, select) { background-color: transparent; border: 0; border-bottom: 1px solid rgb(var(--white-rgb) / 50%); border-radius: 0; padding: 0.25rem 0; font-size: 0.8rem; color: var(--white); } #form .wpforms-field input::placeholder, #form .wpforms-field textarea::placeholder { color: var(--white); opacity: 0.9; } /* Upload */ #form .wpforms-field.wpforms-field-file-upload { border-bottom: 1px solid rgb(var(--white-rgb) / 50%); } #form .wpforms-field.wpforms-field-file-upload input { opacity: 0; max-height: 1.75rem; } #form .wpforms-field.wpforms-field-file-upload .file-name { padding-right: 0.5rem; } /* Checkbox */ #form .wpforms-field.wpforms-field-checkbox li { justify-content: flex-start; } #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"] { padding: 0.5rem; border: 1px solid var(--white); border-radius: 0; } #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"]:checked { background-color: var(--white); } #form .wpforms-field.wpforms-field-checkbox li label { padding: 0; color: var(--white); text-transform: uppercase; width: fit-content; } #form .wpforms-field.wpforms-field-checkbox li label a { text-transform: uppercase; } #form button[type=submit], #form input[type=submit] { padding: 0.5rem 1.5rem; font-size: 0.9rem; color: var(--white); margin: 0 auto; font-weight: 700; background-color: transparent; border: 0; border-radius: 0; text-transform: uppercase; border: 1px solid var(--white); } #form button[type=submit]:hover, #form input[type=submit]:hover { background-color: var(--white); color: var(--blue); } /* MailPoet Form - Custom #form_mp { background-color: var(--white); } #form_mp .mailpoet_form .mailpoet_paragraph label { color: ; } #form_mp .mailpoet_form .mailpoet_paragraph :where(input, textarea, select) { background-color: transparent; border: ; border-radius: ; padding: ; font-size: ; color: ; } #form_mp .mailpoet_form .mailpoet_paragraph input::placeholder { color: ; opacity: ; } #form_mp .mailpoet_form input.mailpoet_checkbox { padding: ; border: ; border-radius: ; } #form_mp .mailpoet_form input.mailpoet_checkbox:checked { background: ; } #form_mp .mailpoet_form .mailpoet_checkbox_label { color: ; } #form_mp .mailpoet_form .mailpoet_checkbox_label a:hover { color: ; } #form_mp .mailpoet_form .mailpoet_paragraph .mailpoet_submit { padding: ; font-size: ; color: ; background-color: ; border: ; border-radius: ; } #form_mp .mailpoet_form .mailpoet_paragraph .mailpoet_submit:hover { background-color: ; border-color: ; color: ; } */ /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - EXTRA * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE GRAZIE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* #s1_grazie {} */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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); } */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ MODALS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Generic */ .modal { position: fixed; top: 2rem; left: 50%; width: calc(100% - 4rem); z-index: 5; transform: translate(-50%, calc(-100% - 2rem)); opacity: 0; pointer-events: none; transition: .5s ease; max-width: 450px; } .modal.open { transform: translate(-50%, 0); opacity: 1; pointer-events: initial; } .modal .modal_wrapper { background-color: var(--white); border-radius: 1rem; padding: 1rem; } .modal .product { display: flex; justify-content: flex-start; align-items: center; background-color: rgb(var(--blue-rgb) / 15%); border-radius: 0.5rem; margin-top: 0.75rem; min-height: 2.5rem; } .modal .product img { width: 4rem; } .modal .product span { text-transform: uppercase; color: var(--blue); font-weight: 500; font-size: 0.8rem; padding: 0.25rem 1rem 0.25rem 1rem; } .modal .product.is_child { margin-left: 1rem; width: calc(100% - 1rem); } /* Products */ #modal_products .single_cat { padding: 0.5rem 0; border-top: 1px solid rgb(var(--black-rgb) / 5%); } #modal_products .single_cat:first-of-type { padding-top: 0; border-top: 0; } #modal_products .single_cat:last-of-type { padding-bottom: 0; } #modal_products .single_cat .title { font-size: 1rem; color: var(--blue); font-weight: 400; cursor: pointer; background-image: url(../images/svg/freccia-giu-blu.svg); background-repeat: no-repeat; background-size: 0.75rem; background-position: calc(100% - 0.25rem) 50%; } #modal_products .products_wrapper { display: none; } #modal_products .single_cat:first-of-type .products_wrapper { display: block; } /* Search */ #modal_search form label { margin-bottom: 0.5rem; position: relative; display: block; } #modal_search .products_wrapper { max-height: 70vh; padding-right: 0.5rem; overflow-y: auto; margin-top: 0.5rem; } #modal_search .products_wrapper::-webkit-scrollbar { width: 6px; background-color: var(--white); border: 1px solid rgb(var(--blue-rgb) / 25%); border-radius: 2rem; } #modal_search .products_wrapper::-webkit-scrollbar-thumb { width: 6px; background-color: var(--blue); border-radius: 2rem; } #modal_search .results { display: none; padding-top: 1rem; border-top: 1px solid rgb(var(--black-rgb) / 25%); margin-top: 1rem; } #modal_search .results .title { font-size: 1.25rem; color: var(--blue); font-weight: 400; } #search_input { padding: 0.5rem 1rem; border: 1px solid rgb(var(--black-rgb) / 25%); border-radius: 0.5rem; width: 100%; font-size: 1rem; } /* Accordion */ .modal_accordion .wrapper { background-color: var(--modals_white); border-radius: 1rem; } .modal_accordion .single_cat { border-top: 1px solid rgb(var(--black-rgb) / 5%); } .modal_accordion .single_cat:first-of-type { padding-top: 0; border-top: 0; } .modal_accordion .single_cat:last-of-type { padding-bottom: 0; } .modal_accordion .single_cat .title { font-size: 1rem; color: var(--blue); font-weight: 400; cursor: pointer; padding: 1rem 3rem 1rem 1rem; text-transform: uppercase; background-image: url(../images/svg/freccia-giu-blu.svg); background-repeat: no-repeat; background-size: 1.25rem; background-position: calc(100% - 1rem) 50%; } .modal_accordion .single_cat .title.active { background-image: url(../images/svg/freccia-su-blu.svg); } .modal_accordion .single_cat .products_wrapper { display: none; padding-bottom: 1rem; max-height: 60vh; overflow-y: auto; } .modal_accordion .single_cat.active .products_wrapper { display: block; } .modal_accordion .single_cat .products_wrapper::-webkit-scrollbar { width: 6px; background-color: var(--white); border: 1px solid rgb(var(--blue-rgb) / 25%); } .modal_accordion .single_cat .products_wrapper::-webkit-scrollbar-thumb { width: 6px; background-color: var(--blue); } .modal_accordion .product { display: flex; justify-content: flex-start; align-items: center; border-radius: 0.5rem; margin-top: 0.75rem; min-height: 2.5rem; } .modal_accordion .product.active { pointer-events: none; } .modal_accordion .product p { color: var(--blue); font-weight: 400; font-size: 0.9rem; padding: 0.25rem 1rem 0.25rem 1rem; } .modal_accordion .product.active p { font-weight: 700; } /** * ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ * * 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 ) ); } .foot_logo { width: calc( var(--foot-logo-width) + ( var(--foot-logo-max) - var(--foot-logo-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 ∞∞∞∞∞∞*/ header { top: 2.25rem; left: 2rem; } .head_wrapper { padding: 0; } .head_logo { width: 9rem; } .menu_fixed { padding: 0; top: 2rem; right: 2rem; } .menu_fixed .lang_select { display: block; } .menu_fixed .lang_select li span { color: var(--blue); } #modal_prod_btn { background-position: calc(100% - 1rem) 50%; padding: 0.65rem 2.25rem 0.65rem 1rem; } .menu_fixed .menu_container { padding: 0.5rem; } #main_nav .lang_select { display: none; } #main_nav .head_menu li a { font-size: 2.25rem; } /*∞∞∞∞∞∞ CARD ∞∞∞∞∞∞*/ .product_line { width: calc(25% - 0.75rem); } /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Page */ .s1_page :where(.filter, .bkg_thumb), .s1_page picture.h100.abs { top: 1rem; left: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); border-radius: 1.25rem; } .s1_page .bkg_thumb img { border-radius: 1.25rem; height: 100%; } /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ #s1_home p { font-size: calc(var(--h1-size) * 1.5); max-width: 15ch; } #s1_home .filter_black_lr, #s1_home .bkg_video_wrapper { top: 1rem; left: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); border-radius: 1.25rem; } /* Section 3 */ /* #s3_home_swiper .swiper-slide .text { top: 15%; width: 70%; } */ #s3_home_swiper .swiper-slide picture { width: 110%; margin-left: -5%; } #s3_home_swiper .filter { width: 110%; margin-left: -5%; } .gallery-track { gap: 3rem; } .gallery-track img { width: 6rem; min-width: 6rem; } /* Section 5 */ #s5_home .punti_forza .single_pf { width: calc(50% - 1rem); } #s5_home video, #s5_home .filter { top: 1rem; left: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); border-radius: 1.25rem; } /* ∞∞∞∞∞∞ CUSTOM SOLUTINS ∞∞∞∞∞∞ */ /* Section 4 */ #s4_custom .filter, #s4_custom .bkg_img { top: 1rem; left: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); border-radius: 1.25rem; } #s4_custom .bkg_img img { border-radius: 1.25rem; } /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ #flexible_container .content table td .td_container { text-align: left; flex-direction: row; justify-content: flex-start; } #flexible_container .content table td .td_container.center { justify-content: center; text-align: center; } /* Child */ #featured_swiper .card picture img { height: 14rem; object-fit: contain; object-position: left; } } /** * * ▀▀█▀▀ ▄▀▀▄ █▀▀▄ █ █▀▀ ▀▀█▀▀ * █ █▀▀█ █▀▀█ █ ▄ █▀▀ █ * ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀ - TABLET | 768 x 1024 -> 1023 x 1280 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 768px) { /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ .modal .product img { width: 6rem; } /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ #main_nav .left img { transform: scale(1.1); } #modal_search_btn { position: relative; } #modal_search_btn::after { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: calc(100% + 1rem); background-color: rgb(var(--white-rgb) / 50%); transform: translateY(-50%); } /*∞∞∞∞∞∞ PAGES ∞∞∞∞∞∞*/ /* Company */ #s4_company_swiper { margin-left: -37.5%; width: 175%; } #s4_company_swiper .swiper-slide:not(.swiper-slide-active, .swiper-slide-prev, .swiper-slide-next) .text p { color: var(--blue); } #s4_company_swiper .swiper-slide:not(.swiper-slide-active, .swiper-slide-prev, .swiper-slide-next) picture img { filter: unset; } /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Contents */ .menu_fixed .custom_solutions { display: block; padding: 0.5rem 0.8rem; color: var(--blue); margin-left: 0.5rem; } #modal_search_btn span { display: block; color: var(--blue); padding-left: 0.5rem; } /* Credits */ #credits br { display: none; } #credits .resp_sep { display: inline-block; } } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀▀█▀▀ ▄▀▀▄ █▀▀▄ ▄▀▀ █▄ ▄█ ▄▀▀▄ █ █ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ ▀▄ █ █ █ █▀▀█ █ ▄ █ ▄ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ ▀▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀ - LAPTOP | 1024 x 768 -> 1280 x 720 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1024px) { /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .maxw_1024 { max-width: 1024px; } .tac.maxw_1024 { margin: 0 auto; } .tac_responsive { text-align: left; } .tac_responsive .link { margin: 1.5rem 0 0 0; } .text .subtitle { font-size: 1.75rem; } .modal { max-width: unset; } #breadcrumb { justify-content: flex-start; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ ANIMATIONS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .txt_lr .btn_list .single_btn.active { transform: translateX(-2rem); } .txt_lr .btn_list.active .single_btn.active { transform: translateX(1rem); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ header { top: 3.25rem; left: var(--c5o); } .menu_fixed { right: var(--c2o); } .head_logo { width: 12rem; } .menu_fixed .menu_container { gap: 0.75rem; } #modal_search_btn::after { right: calc((0.75rem / 2) * -1); } .menu_fixed :where(.custom_solutions, .menu_btn, #modal_search_btn, .lang_select), #modal_prod_btn { transition: .35s ease; border-radius: 0.5rem; } .menu_fixed :where(.custom_solutions, .menu_btn, #modal_search_btn, .lang_select):hover { background-color: var(--white); color: var(--blue); } #modal_prod_btn:hover { background-color: var(--white); color: var(--blue); background-image: url(../images/svg/freccia-giu-blu.svg); } #hamburger .wrap { transition: .25s ease; } #hamburger:hover .wrap span { width: 2rem; } /* Nav */ #main_nav .right { height: calc(100% - 6rem); width: calc(100% - var(--c5o)); padding: 2.5rem; justify-content: flex-end; height: calc(100% - 6rem); width: calc(100% - var(--c5o)); } #main_nav .left { display: flex; justify-content: flex-end; align-items: center; } #main_nav .left img { width: auto; transform-origin: right center; max-height: calc(100vh - 6rem); transform: scale(1); } #main_nav .menu_wrapper { grid-template-columns: 15% calc(85% - 1rem); gap: 4px; } #main_nav .menu-main-menu-container { height: 100%; } #main_nav .head_menu { height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #main_nav .head_menu li a { font-size: 2.75rem; } #main_nav .head_menu li#menu-item-336 a { font-size: 2.25rem; } #main_nav #menu-item-336 a { font-weight: 400; } #main_nav #menu-item-337 { margin-top: auto; } #main_nav .blue_line { display: block; position: absolute; bottom: 50%; right: 0; width: 100%; transform: translate(50%, 50%); transform-origin: center; object-position: right; pointer-events: none; max-width: 40%; object-fit: contain; z-index: 1; transition: .35s ease; transition-delay: 0.35s; } #main_nav.open .blue_line { transform: translate(10%, 50%); } #main_nav .dots { transform: translateY(-50%) rotate(0deg); transform-origin: center; width: 125%; top: 50%; } #main_nav button.close { top: 1rem; right: 1rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Modal products */ #modal_products .modal_wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } #modal_products .single_cat { padding: 0; border: 0; } #modal_products .single_cat .title { background: unset; pointer-events: none; min-height: 4.25rem; font-size: 1.5rem; } #modal_products .products_wrapper { display: grid; gap: 1rem; } #modal_products .single_cat .products_wrapper { padding: 1rem; border: 1px solid rgb(var(--blue-rgb) / 25%); border-radius: 1rem; } #modal_products .single_cat:first-of-type .products_wrapper { display: grid; } #modal_products .product { margin-top: 1rem; align-items: center; flex-direction: column; gap: 1rem; padding-bottom: 0.5rem; justify-content: flex-end; min-height: 20vh; overflow: hidden;} #modal_products .products_wrapper .product:first-child { margin-top: 0; } #modal_products .product span { position: relative; width: 100%; text-align: center; transition: .35s ease; line-height: 1.2; } #modal_products .product:hover span { color: var(--white); } #modal_products .product .filter { background: linear-gradient(to bottom, rgb(var(--blue-rgb) / 0%) 0%,rgb(var(--blue-rgb) / 90%) 100%); opacity: 0; transition: .35s ease; } #modal_products .product:hover .filter { opacity: 1; } #modal_products .product .prod_thumb { width: 100%; position: absolute; bottom: 3rem; left: 0;} #modal_products .product .prod_thumb img { width: 95%; max-width: unset; transition: .35s ease; } #modal_products .product:hover .prod_thumb img { transform: scale(1.15); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* .product_line { display: flex; justify-content: center; align-items: center; gap: 0.5rem; padding: 0.45rem 0.45rem 0.45rem 0.75rem; } .product_line .preview { margin: 0; width: 2rem; height: 2rem; } .product_line .preview .prod_color { width: 100%; height: 100%; object-fit: contain; } .product_line .top { pointer-events: none; width: 2rem; } .product_line .top .title { display: none; } .product_line .top button { display: none; } .product_line .bottom { display: flex !important; justify-content: space-between; align-items: center; margin-top: 0; flex: 1; gap: 0.5rem; } .product_line .bottom .link { margin: 0; } */ /* non scommentare .product_line .bottom .link span { padding: 0.35rem 1.45rem 0.35rem 1rem; font-size: 0.9rem; display: flex; justify-content: center; align-items: center; } .product_line .bottom .link span::before { width: calc(2rem + 3px); } .product_line .bottom .link span::after { width: calc(100% - 1rem - 2px);} */ /* .product_line .bottom p { border-top: 0; text-align: center; flex: 1; font-size: 0.9rem; } .product_line .bottom p .label { display: none; } */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ .s1_page .container { justify-content: flex-start; align-items: flex-end; } .s1_page .container.dvh100 { min-height: 80vh; } .s1_page .s1_title { max-width: 75%; } /* Section card */ .card_section .single_card { display: flex; justify-content: center; align-items: stretch; } .card_section .single_card .right { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 2rem 2rem 4rem; } .card_section .single_card .right .title { justify-content: flex-start; } /* Lista bottoni */ .btn_list .single_btn { max-width: 45ch; } .btn_list .single_btn:hover, .btn_list .single_btn.active { transform: translateX(1rem); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HOME ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_home .container { align-items: flex-start; } #s1_home .video_container { left: unset; right: var(--c5o); transform: translate(0%, 0%) scale(0.25); bottom: calc(var(--c15v) - 3rem); width: 30%; } #s1_home .video_container.active { transform: translate(0%, 0%) scale(1); } #s1_home .video_container.active:hover { transform: translate(0%, 0%) scale(1.1); } #s1_home h1 { position: absolute; left: var(--c5o); bottom: calc(var(--c15v) - 3rem); max-width: 30ch; line-height: 1.2; } /* Section 2 */ #s2_home .container { padding-top: var(--c15v); } #s2_home .radial_white { left: -10%; transform: unset; bottom: -10%; transform: unset; } #s2_home .flex_container { flex-direction: row-reverse; justify-content: flex-end; } #s2_home_swiper { max-width: unset; margin: 0; } /* Section 3 */ #s3_home .container { padding-right: 0; } #s3_home .right { width: calc(55% - var(--c1o)); transform: scale(0.75); } #s3_home .right.active { transform: scale(1); } #s3_home_swiper { transform: translateX(2rem); } #s3_home_swiper .swiper-slide picture { width: 100%; margin-left: 0; } #s3_home_swiper .filter { width: 100%; margin-left: 0; } #s3_home_swiper .swiper-slide .text { width: 80%; } #s3_home_swiper .swiper-slide .text h3 { font-size: 3.25vw; white-space: nowrap; } #s3_home_swiper .swiper-slide .text p { margin-top: 0.5rem; line-height: 1.2; } #swiper_icos { width: 80%; bottom: 45%; overflow: hidden; padding: 1rem 0; left: 50%; transform: translate(calc(-50% + 2rem), 0); } /* #s3_home_swiper .swiper-slide .text { top: 10%; } #swiper_icos { position: relative; height: auto; top: unset; left: unset; width: 6vw; display: flex; justify-content: center; align-items: center; transform: unset; } #swiper_icos .swiper-wrapper { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; transform: none !important; --max-offset: 25vw; } #swiper_icos .swiper-slide:nth-child(1) { transform: translateX(calc(var(--max-offset) * 0.65)); } #swiper_icos .swiper-slide:nth-child(2) { transform: translateX(calc(var(--max-offset) * 0.30)); } #swiper_icos .swiper-slide:nth-child(3) { transform: translateX(calc(var(--max-offset) * 0.097)); } #swiper_icos .swiper-slide:nth-child(4) { transform: translateX(calc(var(--max-offset) * 0.01)); } #swiper_icos .swiper-slide:nth-child(5) { transform: translateX(calc(var(--max-offset) * 0.01)); } #swiper_icos .swiper-slide:nth-child(6) { transform: translateX(calc(var(--max-offset) * 0.097)); } #swiper_icos .swiper-slide:nth-child(7) { transform: translateX(calc(var(--max-offset) * 0.30)); } #swiper_icos .swiper-slide:nth-child(8) { transform: translateX(calc(var(--max-offset) * 0.65)); } #swiper_icos .swiper-slide { width: auto !important; height: auto !important; margin: 0 !important; } #swiper_icos .swiper-slide button { background-color: var(--white); width: 100%; padding: 0.5rem; } #swiper_icos .swiper-slide button img { filter: unset; width: 90%; } #swiper_icos .swiper-slide.swiper-slide-thumb-active button { transform: scale(1); } #swiper_icos .swiper-slide.swiper-slide-thumb-active button img { filter: brightness(0) invert(1); } */ /* Section 4 */ #s4_home .wrapper { padding: var(--c10v) var(--c5o); } #s4_home .title { margin-bottom: var(--c15v); } #s4_home .flex_container { margin-top: var(--c15v); } /* Section 5 */ #s5_home .punti_forza { margin-top: 5rem; } /* Section 6 */ #s6_home .flex_container { flex-direction: row-reverse; } /* Section 7 */ #s7_home .container { padding-right: 0; } #s7_home .right { width: calc(55% - var(--c1o)); transform: scale(0.75); min-width: unset; } #s7_home .right.active { transform: scale(1); } #s7_home .right picture { width: 100%; margin-left: 0; transform: translateX(2rem); } #s7_home .right picture .label { display: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGES ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ COMPANY ∞∞∞∞∞∞*/ /* Section 1 */ #s1_company .s1_title h1 .title_bold { display: block; } /* Section 3 */ #s3_company .single_date { display: flex; justify-content: center; align-items: center; gap: 5rem; padding: 2rem 3rem; } #s3_company .single_date .date { font-size: 6rem; } #s3_company .single_date .right p { font-size: 1.35rem; } /* Section 4 */ #s4_company .wrapper { padding: var(--c10v) var(--c5o); } #s4_company .title { max-width: 75ch; margin: 0 auto var(--c15v) auto; } #s4_company_swiper .swiper_dots { bottom: calc(var(--c10v) * -1); } /*∞∞∞∞∞∞ INDUSTRIAL APPLICATIONS ∞∞∞∞∞∞*/ /* Section 2 */ #s2_industrial-apl .container { padding-top: var(--c15v); } #s2_industrial-apl .flex_container { flex-direction: row; } #s2_industrial-apl .thumb_img { transform: unset; } #s2_industrial-apl .thumb_img img { max-width: unset; transform: scale(1.35) translateX(10%); transform-origin: bottom left; } /*∞∞∞∞∞∞ CUSTOM SOLUTIONS ∞∞∞∞∞∞*/ #page_custom :where(#s3_custom, #s5_custom) .flex_container { flex-direction: row-reverse; } #page_custom :where(#s3_custom, #s5_custom) .text.p5l { padding-left: 0; } #page_custom :where(#s3_custom, #s5_custom) .right picture img { max-height: 80vh; } #page_custom :where(#s3_custom, #s5_custom) .btn_list .single_btn { max-width: unset; } #s4_custom .container { padding-bottom: var(--c15v); } #s4_custom .right picture { transform: translateY(calc(var(--c15v) + 2rem)); } #s4_custom .right picture img { max-height: 80vh; } #s4_custom .text.p5r { padding-right: 0; } #s4_custom .flex_container { align-items: flex-end; } #s4_custom .filter { background: linear-gradient(to bottom, rgb(var(--black-rgb) / 5%) 0%,rgb(var(--black-rgb) / 75%) 100%); } /*∞∞∞∞∞∞ SERVICE ∞∞∞∞∞∞*/ #s3_services .services_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } #s3_services .services_left { display: block; position: sticky; top: 8rem; height: 70vh; } #s3_services .services_sticky .service_image { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 100% 0); will-change: clip-path; pointer-events: none; } #s3_services .services_sticky .service_image.is-active { clip-path: inset(0 0 0% 0); } #s3_services .services_sticky .service_image img { width: 100%; height: 100%; object-fit: cover; display: block; } #s3_services .services_right .single_service { min-height: 60vh; display: flex; justify-content: center; align-items: center; } #s3_services .services_right .single_service .service_image { display: none; } /*∞∞∞∞∞∞ CONTACTS ∞∞∞∞∞∞*/ #s3_contatti .map_bkg { transform: translate(-50%, -50%) scale(1); width: calc(100% - var(--c10o) - 2rem); } #s3_contatti .left .logo img { width: 100%; max-width: 375px; } #s3_contatti .flex_container { padding: var(--c15v) 1rem; } #s3_contatti .flex_container .right :where(.addr, .info) { width: calc(50% - 1px); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ #s1_single .thumb_img img { max-height: 40vh; object-position: right; } #s1_single.parent picture img { transform: scale(1.35); transform-origin: bottom right; } /* #s1_single.child picture img { } */ /* Modal accordion */ .modal_accordion .wrapper { background-color: transparent; } .modal_accordion .single_cat { margin-bottom: 1rem; background-color: var(--white); border-radius: 0.5rem; border-top: 0; } .modal_accordion .single_cat .products_wrapper { max-height: unset; overflow: hidden; } .modal_accordion .single_cat:last-of-type { margin-bottom: 0; } /* Parent */ #single_parent { grid-template-columns: calc(35% - var(--c5o)) 65%; gap: var(--c5o); } #left_produtcs_parent.single_modal { position: relative; opacity: 1; width: 100%; transform: unset; left: unset; bottom: unset; z-index: unset; pointer-events: initial; } #single_parent .buttons_mobile button:nth-of-type(1) { display: none; } #single_parent .buttons_mobile button:nth-of-type(2) { border-radius: 0.5rem; border: 0; } #term_modal { position: sticky; top: 8rem; } #term_modal .product img { width: 4rem; } #flexible_container .prodotti .prod_container { justify-content: flex-start; } /* Child */ #single_child { grid-template-columns: calc(35% - var(--c5o)) 65%; gap: var(--c5o); } #single_child .buttons_mobile { display: none; } #left_produtcs_child.single_modal { position: relative; opacity: 1; width: 100%; transform: unset; left: unset; bottom: unset; z-index: unset; pointer-events: initial; } #cat_modal { position: sticky; top: 8rem; } #cat_modal .wrapper { background-color: transparent; } #s2_single_child .right .wrapper { position: sticky; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Contents */ footer .container { padding-left: var(--c5o); padding-right: var(--c5o); } footer .form_sec { padding-bottom: 0; border-radius: 1rem; align-items: center; } footer .form_sec picture img { border-radius: 1rem 0 0 1rem; } footer .form_sec .form_container { padding: 2rem; } footer .form_sec .form_container .text { padding: 0 0 2rem 0; } footer .form_sec .form_container .text h2 { font-size: calc(var(--h2-size) * 0.9); font-weight: 400; } footer .contacts { margin-top: var(--c15v); padding-left: 0; padding-right: 0; } .foot_block { margin-top: 0; padding: 3rem 1rem 0 1rem; backdrop-filter: blur(20px); } .foot_block .text { max-width: 700px; margin: 0 auto var(--c10v) auto; } .foot_blue_line { bottom: -10%; } .foot_dots { display: block; position: absolute; top: 0; right: var(--c5o); width: 90%; height: auto; z-index: 1; transform: rotate(10deg) rotateX(180deg); transform-origin: center; pointer-events: none; mix-blend-mode: plus-lighter; opacity: 0.15;} /* Credits */ #credits a:hover, #credits a:active, #credits a:focus { opacity: 1; color: var(--color); } #credits #credits_studio:hover { color: #e74e0f; } /* Back Top #back_top { opacity: 1; } */ } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1281 x 720 -> 1366 x 768 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1281px) { /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ #s5_home .punti_forza { gap: unset; align-items: stretch; } #s5_home .punti_forza .single_pf { width: 25%; padding: 0 1rem; border-left: 1px solid rgb(var(--white-rgb) / 50%); height: auto; } #s5_home .punti_forza .single_pf:first-of-type { padding-left: 0; border-left: 0; } #s5_home .punti_forza .single_pf:last-of-type { padding-right: 0; } /*∞∞∞∞∞∞ PAGES ∞∞∞∞∞∞*/ /* Company */ #s5_company .left p { font-size: 1.85rem; line-height: 1.4; } /* Contacts */ #s3_contatti .flex_container { padding: var(--c15v) var(--c5o); } /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ /* Section 1 */ #s1_single .specs .prod_thumb { width: fit-content; } #s1_single .specs .single_spec { flex: 1; } /* Section 2 */ .s2_single .buttons_mobile { display: none; } .s2_single .intro h3 { font-size: 2rem; } /* Parent */ #single_parent { grid-template-columns: calc(25% - var(--c2o)) calc(60% - var(--c2o)) 15%; gap: var(--c2o); } #s2_single_parent .container.p5lr { padding-left: var(--c2o); padding-right: var(--c2o); } #right_index.single_modal { position: relative; opacity: 1; width: 100%; transform: unset; left: unset; bottom: unset; z-index: unset; pointer-events: initial; } #right_index .btns_wrapper { padding: 0; background-color: transparent; border-radius: unset; position: sticky; top: 8rem; } #right_index button { font-size: 0.9rem; padding: 0.65rem 0; border-top: 0; } } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀█▀ ▄▀▀▄ █▀▀▄ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1367 x 768 -> 1919 x 1080 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1367px) { /*∞∞∞∞∞∞ CARD ∞∞∞∞∞∞*/ .product_line { width: calc((100% / 5) - 0.8rem); } } /** * * █ █ █▀▀▄ █▀▀ █▀▀▄ * █ █ █▀▀█ █▀▀ █▐█▀ * ▀▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - ÜBER | 1921 -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1921px) { /*∞∞∞∞∞∞ VARS ∞∞∞∞∞∞*/ .maxw_unset { max-width: unset; } /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ footer .form_sec picture img { max-height: 90vh; } } /** * * ▄▀█ █ ▄▀ * █▄▄█▄ █▀▄ * █ ▀ ▀▀ - DESKTOP 4K & UP | 2561px -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and ( min-width: 2561px ) { #s3_home_swiper .swiper-slide .text h3 { font-size: 4rem; } }