/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " OMPN " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █ █ █▀▀ ▄▀▀▄ █▀▀▄ █▀▀ █▀▀▄ * █▀▀█ █▀▀ █▀▀█ █ █ █▀▀ █▐█▀ * ▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - HEADER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ header { top: 0; left: 0; z-index: 4; } .head_wrapper { padding: .5rem .5rem 0 .5rem; z-index: 2; } header.stuck .dashboard { background: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .head_logo { display: inline-block; width: 10em; padding: .5rem; } .head_logo :where(img, svg) { width: 100%; } .head_logo svg .letter { transition: .25s ease; } header.opened .head_logo svg .letter { fill: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAD CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ header .dashboard { top: .5em; right: .5em; width: fit-content; border-bottom: 1px solid var(--blue); transition: .25s ease; } header.opened .dashboard { border-color: var(--white); } /* Sub-Menu */ .head_block, .sub_menu { display: none; } /* Lang */ .dashboard .wpml-ls-legacy-dropdown-click { width: auto; border-left: 1px solid var(--blue); font: 500 1rem / 1 var(--title-font); } .dashboard .wpml-ls-legacy-dropdown-click li { line-height: 1; } .dashboard .wpml-ls-legacy-dropdown-click a { border: 0; background-color: transparent; padding: 1rem; font: 500 1rem / 1 var(--title-font); color: var(--blue); text-transform: uppercase; transition: 0s; } .dashboard .wpml-ls-legacy-dropdown-click a span { display: block; } header.opened .dashboard .wpml-ls-legacy-dropdown-click { border-color: var(--white); } header.opened .dashboard .wpml-ls-legacy-dropdown-click a { color: var(--white); } .dashboard .wpml-ls-legacy-dropdown-click .wpml-ls-current-language:hover > a, .dashboard .wpml-ls-legacy-dropdown-click a:focus, .dashboard .wpml-ls-legacy-dropdown-click a:hover { background: var(--blue-l); color: var(--white); } .dashboard .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle { padding-right: calc(.75rem + 2ch); } .dashboard .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle::after { content: "+"; border: 0; border-top: 0; right: 1rem; top: 50%; transform: translateY(-50%); font: inherit; font-weight: 500; color: var(--blue-l); transition: .25s ease; } .dashboard .wpml-ls-legacy-dropdown-click:hover a.wpml-ls-item-toggle::after, .dashboard .wpml-ls-legacy-dropdown-click .wpml-ls-current-language:hover > a::after, .dashboard .wpml-ls-legacy-dropdown-click a:focus::after, .dashboard .wpml-ls-legacy-dropdown-click a:hover::after { color: var(--white); } .dashboard #wpml-ls-submenu-click-default { display: block; left: auto; width: calc(100% + 1px); max-width: unset; border-top: 1px solid var(--blue); background-color: transparent; } .dashboard #wpml-ls-submenu-click-default li { border-bottom: 1px solid var(--white); border-left: 1px solid var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HAMBURGER / MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #hamburger { font-size: var(--rem); line-height: 0; display: inline-block; padding: .75em; border-left: 1px solid var(--blue); background: var(--blue-l); overflow: visible; cursor: pointer; transition: .25s ease; } #hamburger .wrap { width: 1.5em; height: 1.5em; } #hamburger span { display: block; position: absolute; left: 50%; transform: translateX(-50%); width: 1.5em; height: 4px; background-color: transparent; transform-origin: center; will-change: transform; transition: .25s ease; } #hamburger .top_bun { top: 0; } #hamburger .burger { top: calc(50% - 2px); } #hamburger .bottom_bun { bottom: 0; } #hamburger span::before, #hamburger span::after { display: inline-block; content: ''; position: absolute; top: 50%; transform: translateY(-50%); } #hamburger span span, #hamburger span::before, #hamburger span::after { width: 4px; height: 4px; background: var(--white); } #hamburger span::before { left: 0; } #hamburger span::after { right: 0; } /* Tapped / Clicked animation */ /* * Copiare l'animazione scelta dal file hamburger.css * oppure utilizare quella base qui sotto */ #hamburger.tapped { border-color: var(--white); } #hamburger.tapped span { width: 1.75em; background-color: var(--white); 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: none; top: 0; left: 0; z-index: 1; } #main_nav .menu_wrapper { top: 0; left: 0; padding: calc(3.5rem + var(--c15v)) 1.5rem var(--c10v) 1.5rem; background-color: var(--blue); } #main_nav .menu_wrapper .circle_1, #main_nav .menu_wrapper .svg_plus { display: none; } #main_nav .menu_wrapper .cross_1 { bottom: 20%; right: 10%; width: 6em; opacity: .25; } #main_nav .menu_wrapper .cross_1 :where(path, polygon, text) { fill: var(--white); } #main_nav .menu_wrapper .el_num_triangle { bottom: 30%; left: 15%; opacity: .125; } #main_nav .menu_wrapper .el_num_triangle span { font-size: 150%; color: var(--blue-l); } #main_nav .menu_wrapper .el_num_triangle span::before { border-top-color: var(--blue-l); } #main_nav .menu_wrapper .el_circle { bottom: 40%; right: 15%; width: 1em; height: 1em; opacity: .125; } #main_nav .menu_wrapper .el_big_num { transform: translate(calc(1.25% + .5rem), calc(5% + .5rem)); font-size: clamp(4em, 17.5vw, 10em); color: var(--white); text-align: right; opacity: .25; } #main_nav .menu-menu-container { position: relative; width: 100%; text-align: center; } #main_nav .menu {} #main_nav .menu li { font: inherit; line-height: 1; } #main_nav .menu li.current-menu-item a { opacity: .5; } #main_nav .menu li a { display: inline-block; padding: .25em 0; font: 500 125% / 1.25 var(--title-font); color: var(--white); text-transform: uppercase; } #main_nav .menu li a:hover {} /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKs / BTNs STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .link { display: block; position: relative; width: fit-content; padding: 0 1em 0 0; border: 2px solid var(--blue-l); border-radius: 20em; font: 500 100% / 1.25 var(--main-font); color: var(--white); background-color: var(--blue-l); } .link:hover, .link:focus, .link:active { background-color: var(--white); color: var(--blue-l); } .link_color { background-color: var(--black); border-color: var(--black); color: var(--white); } .link_color:hover, .link_color:focus, .link_color:active { background-color: var(--white); color: var(--black); } .link.flex { display: flex; gap: 1em; } .link.flex span { position: relative; transition: .25s ease; } .link.flex .ico, .link_btn { width: 2.5em; flex: 0 0 auto; padding: .625em; background: var(--white); border-radius: 20em; } .link.flex .ico svg, .link_btn .ico svg { width: 100%; } .link.flex .ico svg path, .link_btn .ico svg path { fill: var(--blue-l); transition: .25s ease; } .link.flex svg.arrow { position: absolute; top: 50%; right: 0; width: 2.5em; flex: 0 0 auto; transform: translateY(-50%) scale(0); } .link.flex::before { display: block; content: ''; position: absolute; top: 0%; left: 0; width: 2.5em; height: 2.5em; background: var(--white); border-radius: 20em; transition: .25s ease; will-change: width; } .link.flex::after { display: block; content: ''; position: absolute; top: 0%; right: 0%; width: 2.5em; height: 2.5em; background: url(../images/svg/link.svg) no-repeat center / 1.25em; opacity: 0; transition: .25s ease; } .link.flex:hover, .link.flex:focus, .link.flex:active { background: var(--blue-l); color: var(--blue-l); } .link.flex:hover::before, .link.flex:focus::before, .link.flex:active::before { width: 100%; } .link.flex:hover::after, .link.flex:focus::after, .link.flex:active::after { opacity: 1; } .link.flex:hover span.ico, .link.flex:focus span.ico, .link.flex:active span.ico { opacity: 0; } .link.flex:hover span:not(.ico), .link.flex:focus span:not(.ico), .link.flex:active span:not(.ico) { transform: translateX(-2.75em); } .link.desktop, .link.flex.desktop { display: none; } .card .text .link_btn { transform: translateX(.5rem); background: var(--blue-l); } .card .text .link_btn svg path { fill: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SEC COLORS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .sec_blue { background-color: var(--blue); } .sec_grey { background-color: var(--grey); } .sec_green { background-color: var(--green); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SVG ELEMENTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .svg_el { pointer-events: none; } .svg_el :where(polygon, rect, path, text) { fill: var(--blue); } .svg_el text { font-family: var(--title-font); } .sec_blue .svg_el :where(polygon, rect, path, text) { fill: var(--white); } .svg_el.cross_1 text, .svg_el.cross_2 text, .svg_el.cross_3 text, .svg_el.cross_4 text, .svg_el.cross_5 text, .svg_el.cross_6 text, .svg_el.cross_7 text, .svg_el.cross_8 text, .svg_el.cross_9 text { font-size: 87.5%; } .el_num_triangle { pointer-events: none; font: 500 1rem / 1 var(--title-font); color: var(--blue); } .el_num_triangle span { display: block; width: fit-content; position: relative; } .el_num_triangle span::before { display: block; content: ''; position: absolute; top: 0; left: 0; transform: translate(-50%, calc(-100% - .5rem)); width: 0; height: 0; border-left: .5rem solid transparent; border-right: .5rem solid transparent; border-top: .875rem solid var(--blue); } .sec_blue .el_num_triangle span { color: var(--white); } .sec_blue .el_num_triangle span::before { border-top-color: var(--white); } .el_circle { width: .75rem; height: .75rem; border-radius: 2em; background-color: var(--blue-l); pointer-events: none; } .sec_blue .el_circle { background-color: var(--white); } .el_big_num { bottom: 0; right: 0; pointer-events: none; font: 500 200% / 1 var(--title-font); color: var(--blue); } .el_big_num span { display: block; width: fit-content; min-width: 7ch; } .el_big_num .svg_tri { position: relative; width: .75em; } .sec_blue .el_big_num { color: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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: 3em; padding: .625em; border-radius: 20em; background: var(--white); line-height: 0; z-index: 1; cursor: pointer; transition: .25s ease; } .nav_btn :where(img, svg) { width: 100%; } .nav_btn svg path { fill: var(--blue-l); transition: .25s ease; } .nav_btn.abs { top: 50%; transform: translateY(-50%); } .nav_prev.abs { left: 0; } .nav_next.abs { 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 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Text */ .text.tac .link, .text.tac_mobile .link { margin-right: auto; margin-left: auto; } /* Ico Link */ .ico_link svg { width: 3.5em; min-width: 3.5em; height: 3.5em; padding: .625em; border-radius: 20em; background: var(--white); } .ico_link svg path { fill: var(--blue-l); transition: .25s ease; } /* Sec Img */ .sec_img.animate picture, picture.animate { opacity: 0; transition: .325s ease-out; } .sec_img.animate.active picture, picture.animate.active { opacity: 1; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FIXED CHAT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #contact_btn { bottom: 1em; right: 1em; width: 4em; padding: .125em; border-radius: 20em; filter: drop-shadow(0 0 1em rgb(10 10 10 / 75%)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 2; } #contact_btn svg #scritta { fill: #fefefe; transform-origin: 50% 50%; animation: rotate 10s linear forwards infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } /** * * █▀▀ ▄▀▀▄ ▄▀▀▄ ▀▀█▀▀ █▀▀ █▀▀▄ * █▀▀ █ █ █ █ █ █▀▀ █▐█▀ * ▀ ▀▀ ▀▀ ▀ ▀▀▀ ▀ ▀▀ - FOOTER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ footer { background: var(--blue); padding-bottom: 4.5rem; overflow: hidden; } footer .svg_el :where(polygon, rect, path, text) { fill: var(--white); } footer .svg_plus { position: relative; width: 3.5em; margin-left: 10%; opacity: .25; } footer .el_num_triangle { position: relative; align-self: flex-end; padding-right: 2em; font-size: 150%; color: var(--blue-l); } footer .el_num_triangle span:before { top: 100%; left: auto; right: 0; transform: translate(calc(100% + .5em), -50%); border-top-color: var(--blue-l); } footer .circle_13 { display: none; } footer .cross_7 { position: relative; width: 6rem; margin: 0 auto; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ STRUCTURE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Foot Logo */ .foot_logo { display: block; width: 12em; margin: 0 auto; } .foot_logo :where(img, svg) { width: 100%; } /* Foot Block */ .foot_block h4 { position: relative; font: 500 125% / 1.25 var(--title-font); color: var(--blue-l); } .foot_block h4::before { display: inline-block; content: ''; width: 1em; height: 1em; margin: 0 1em -.125em 0; border-radius: 2em; background: var(--blue-l); } .foot_block :where(h4 + nav, h4 + p) { margin-top: 1.5em; } .foot_block :where(p, li) { font: 500 100% / 1.5 var(--main-font); } .foot_block p a { font: inherit; } #foot_company .foot_logo + div { margin-top: 1.5rem; } #foot_menu .menu li { list-style: none; margin: 0; } #foot_menu .menu li a { line-height: 1.5; } #foot_info :where(a, span) { display: block; width: fit-content; margin: 0 auto; } #foot_contatti .block { margin-top: 1.5rem; } #foot_contatti .block h5 { font: 500 100% / 1.5 var(--main-font); color: var(--blue-l); } #foot_contatti .block p { margin-top: 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CREDITS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #credits p { font-size: .825em; line-height: 1.5; margin: 0 auto; z-index: 1; } #credits .resp_sep { display: none; } #credits a { display: inline-block; font: inherit; color: inherit; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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; background-color: rgb(255 255 255 / 25%); cursor: pointer; transition: .25s ease; } #back_top :where(img, svg) { width: 100%; } #back_top svg path { fill: var(--black); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FRAME ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #frame { top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 1rem); height: calc(100% - 1rem); min-height: unset; border: 1px solid var(--blue); pointer-events: none; z-index: 4; } #frame.opened { border-color: var(--white); } #frame span { position: absolute; display: block; width: .5rem; height: .5rem; background: var(--blue-l); } #frame span:nth-of-type(1) { top: 0; left: 0; transform: translate(-50%, -50%); } #frame span:nth-of-type(2) { top: 0; right: 0; transform: translate(50%, -50%); } #frame span:nth-of-type(3) { bottom: 0; right: 0; transform: translate(50%, 50%); } #frame span:nth-of-type(4) { bottom: 0; left: 0; transform: translate(-50%, 50%); } /** * * ▄▀▀ █▀▀ ▄▀▀ ▀▀█▀▀ ▀ ▄▀▀▄ █▄ █ ▄▀▀ * ▀▄ █▀▀ █ █ █ █ █ █ ▀█ ▀▄ * ▀▀ ▀▀▀ ▀▀ ▀ ▀ ▀▀ ▀ ▀ ▀▀ - SECTIONS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1 { overflow: hidden; } .s1 .filter_blue { background: rgb(var(--blue-rgb) / 60%); } .s1_title { transform: scale(.5); opacity: 0; transition: .25s ease-out; will-change: transform, opacity; } .s1_title.active { transform: scale(1); opacity: 1; } .s1_title h1 { text-transform: uppercase; } .s1_title p { font: 400 150% / 1.25 var(--title-font); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 - PAGE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1_page, .s1_single { overflow: visible; z-index: 1; } .s1_page .container { padding-top: calc(var(--c15v) + 4.5em) } .s1 .gallery_x3 { align-self: flex-end; flex-wrap: wrap; } .s1 .gallery_x3 picture { pointer-events: none; opacity: 0; transition: .325s ease-out; } .s1 .gallery_x3 .img_1 { z-index: 2; width: 60%; margin: 0 calc(-5% - 1px); transform: translate(-10%, 60%) rotate(0deg) scale(0); } .s1 .gallery_x3 .img_2 { z-index: 1; width: 60%; margin: 0 calc(-5% - 1px); transform: translate(-5%, 50%) rotate(0deg) scale(0); } .s1 .gallery_x3 .img_3 { z-index: 3; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 40%) rotate(0deg) scale(0); width: calc((100% / 3) * 2); } .s1 .gallery_x3.active picture { opacity: 1; } .s1 .gallery_x3.active .img_1 { transform: translate(-10%, 10%) rotate(2.5deg) scale(1); } .s1 .gallery_x3.active .img_2 { transform: translate(-5%, 0%) rotate(12.5deg) scale(1); } .s1 .gallery_x3.active .img_3 { transform: translate(-50%, -10%) rotate(-3.75deg) scale(1); } .s1_page + section .container { padding-top: calc(var(--c12v) + 40vw); } .s1_page .el_circle { top: 50%; left: 40%; } .s1_page .cross_1 { position: relative; width: 6rem; margin: 0 0 -10% 10%; z-index: 3; } .s1_page .el_big_num_1, .s1_page .el_big_num { bottom: auto; top: 50%; transform: translateX(5%); color: var(--grey); } .s1_page :where(.circle_6, .circle_8, .circle_13, .circle_14, .circle_15, .svg_plus, .svg_tab_1, .letter_a_alt, .el_big_num_2 ) { display: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 - SINGLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1_single .container { padding-top: calc(var(--c10v) + 4.5em); gap: var(--c10v) 0; } .s1_single .s1_title { z-index: 2; } .s1 .gallery_x5 {} .s1 .gallery_x5 picture { pointer-events: none; opacity: 0; transition: .325s ease-out; } .s1 .gallery_x5 .img_1 { order: 3; transform: translate(0%, 50%) rotate(0deg) scale(0); z-index: 1; } .s1 .gallery_x5 :where(.img_2, .img_3, .img_4, .img_5) { position: absolute; } .s1 .gallery_x5 .img_2 { order: 4; bottom: 0%; left: 10%; width: 42.5%; transform: translate(0%, 80%) rotate(0deg) scale(0); z-index: 2; } .s1 .gallery_x5 .img_3 { order: 2; bottom: 50%; right: 0; width: 35%; transform: translate(20%, 37.5%) rotate(0deg) scale(0); } .s1 .gallery_x5 .img_4 { order: 5; bottom: 50%; left: 0; width: 35%; transform: translate(-17.5%, 40%) rotate(0deg) scale(0); } .s1 .gallery_x5 .img_5 { order: 1; transform: translate(0%, 50%) rotate(0deg) scale(0); display: none; } .s1 .gallery_x5.active picture { opacity: 1; } .s1 .gallery_x5.active .img_1 { transform: translate(0%, 0%) rotate(2.5deg) scale(1); } .s1 .gallery_x5.active .img_2 { transform: translate(0%, 30%) rotate(-5deg) scale(1); } .s1 .gallery_x5.active .img_3 { transform: translate(20%, -12.5%) rotate(10deg) scale(1); } .s1 .gallery_x5.active .img_4 { transform: translate(-17.5%, -10%) rotate(-5deg) scale(1); } .s1 .gallery_x5.active .img_5 { transform: translate(0%, 0%) rotate(0deg) scale(1); } .s1_single + section .container { padding-top: calc(var(--c12v) + 15vw); } .s1_single :where(.svg_plus, .circle_2, .circle_7, .cross_6, .letter_a_alt, .letter_c_alt, .el_big_num_2) { display: none; } .s1_single .el_circle { top: 70%; right: 10%; background-color: var(--blue-l); } .s1_single .svg_plus { top: 30%; left: 52.5%; transform: translateX(-50%); width: 3.5em; } .s1_single .el_big_num_1 { bottom: 15%; right: 0; transform: translateX(5%); font-size: 300%; color: var(--blue-l); text-align: right; z-index: 2; } .s1_single .el_big_num_1 .svg_tri { display: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION MOTIVI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #sec_motivi .container { gap: var(--c12v) 0; } #sec_motivi .text h2 + div { margin-top: 1.5rem; } #sec_motivi .text + .grid { margin-top: var(--c15v); } #sec_motivi .grid { grid-template-columns: 1fr 1fr; gap: 1rem; } #sec_motivi .card:not(.desktop) { gap: 1.5rem; padding: 1rem; border: 2px solid var(--blue); } #sec_motivi .card.animate:not(.desktop) { transform: translateY(50%) scale(0); opacity: 0; transition: .325s ease-out; } #sec_motivi .card.active:not(.desktop) { transform: translateY(0) scale(1); opacity: 1; } #sec_motivi .card .card_num { align-self: flex-end; color: var(--blue); } #sec_motivi .card .text { align-self: flex-start; padding: 0; } #sec_motivi .card .text p { font-size: 100%; line-height: 1.25; font-family: var(--title-font); } #sec_motivi .link.mobile { margin: 0 auto; } #sec_motivi .el_circle { top: 2.5%; left: 10%; } #sec_motivi .circle_6 { display: none; } #sec_motivi .cross_7 { position: relative; width: 6rem; margin: 0 auto 0 10%; } #sec_motivi .letter_b_alt { top: 27.5%; right: 25%; width: 4rem; } #sec_motivi .letter_b_alt :where(polygon, path, text) { fill: var(--blue-l); } #sec_motivi .letter_b_alt text { display: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION SETTORI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #sec_settori .card_processi { border: 2px solid var(--blue); } #sec_settori .card_processi.animate { transform: translateX(calc(100% + var(--c10o))); opacity: 0; transition: .325s ease-out; } #sec_settori .card_processi.animate.active { transform: translateX(0); opacity: 1; } #sec_settori .card_processi + .card_processi { margin-top: 1em; } #sec_settori .card_processi .text .trigger .ico { width: 3em; min-width: 3em; padding: .5em; background: var(--blue); } #sec_settori .card_processi .text .trigger .ico img { width: 100%; } #sec_settori .card_processi .text .trigger h3 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem .5rem; font: 400 100% / 1.25 var(--title-font); color: var(--blue); text-transform: uppercase; text-align: left; transition: .25s ease; } #sec_settori .card_processi .text .trigger h3::after { display: inline-block; content: '+'; min-width: fit-content; font: 400 200% / 1 var(--title-font); color: var(--blue); } #sec_settori .card_processi .text .trigger.open { background-color: var(--blue); } #sec_settori .card_processi .text .trigger.open h3 { color: var(--white); } #sec_settori .card_processi .text .trigger.open h3::after { content: '-'; color: var(--white); } #sec_settori .card_processi .text .desc { display: none; } #sec_settori .card_processi .text .desc p { padding: .75em 1em; font-size: 100%; } #sec_settori .link.mobile { margin: 0 auto; } #sec_settori .el_circle { top: 0; right: 25%; transform: translate(50%, -50%); } #sec_settori .svg_tri { position: relative; width: 1rem; margin: 0 auto; transform: rotate(180deg); } #sec_settori .circle_7 { display: none; } #sec_settori .cross_8 { display: none; } #sec_settori .el_big_num { position: relative; width: 100%; transform: translateX(7.5%); font-size: 400%; text-align: right; opacity: .25; } #sec_settori .el_num_triangle { position: relative; width: 100%; margin-top: calc(var(--c7v) * -1); padding-left: 15%; font-size: 150%; color: var(--blue-l); } #sec_settori .el_num_triangle span:before { top: 100%; transform: translate(calc(-100% - .75em), -50%); border-top-color: var(--blue-l); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION PARCO MACCHINE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #sec_parco .text { align-self: flex-end; } #sec_parco .text.scroll_fill { align-self: flex-start; } #sec_parco .text + .text { margin-top: var(--c10v); } h2 + .scroll_fill { margin-top: 1.5em; } .scroll_fill p { font: 400 175% / 1.125 var(--title-font); text-transform: uppercase; } .scroll_fill_base { position: relative; opacity: .25; } .scroll_fill_overlay { inset: 0; pointer-events: none; } .scroll_fill_overlay .fill-line { display: block; position: relative; overflow: visible; } .scroll_fill_overlay .fill-line-inner { display: inline-block; clip-path: inset(0 100% 0 0); will-change: clip-path; } #sec_parco .link.mobile { margin: var(--c12v) auto 0 auto; } #sec_parco .letter_a { position: relative; width: 5rem; margin: 0 0 var(--c12v) 15%; } #sec_parco .letter_a path { fill: var(--blue-l); } #sec_parco .el_big_num_1 { bottom: auto; top: 6.25%; right: 17.5%; font-size: 125%; color: var(--blue-l); } #sec_parco .el_big_num_1 .svg_tri { position: relative; width: 1rem; transform: translate(0rem, -.5rem); } #sec_parco .el_big_num_1 path { fill: var(--blue-l); } #sec_parco .el_big_num_2 { display: none; } #sec_parco .circle_10 { display: none; } #sec_parco .cross_8 { position: relative; width: 6rem; margin: var(--c12v) auto 0 20%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION FAQ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .sec_faq { margin-bottom: 10%; } .sec_faq .sec_title h2 { font-size: calc(var(--h2-size) * 1.25); } .sec_faq .text + .wrapper { margin-top: var(--c10v); } .sec_faq .accordion + .accordion { margin-top: 1em; } .accordion { border: 2px solid var(--white); } .accordion.animate { transform: scale(.5); opacity: 0; transition: .325s ease-out; } .accordion.animate.active { transform: scale(1); opacity: 1; } .accordion + .accordion { margin-top: 1em; } .accordion .accordion_head { grid-template-columns: 2.5em 1fr 2.5em; } .accordion .accordion_head .ico { width: 2.5em; min-width: 2.5em; height: 100%; padding: .625em; background-color: var(--white); } .accordion .accordion_head .ico img { width: 100%; } .accordion .accordion_head h3 { display: block; padding: .5rem; } .accordion .accordion_head h3, .accordion .accordion_head::after { font: 400 100% / 1.25 var(--title-font); color: var(--white); text-transform: uppercase; text-align: left; } .accordion .accordion_head::after { display: flex; content: '+'; align-items: center; justify-content: center; font-size: 200%; line-height: 1; transition: .25s ease; } .accordion .accordion_head.active { background-color: var(--white); } .accordion .accordion_head.active h3, .accordion .accordion_head.active::after { color: var(--blue); } .accordion .accordion_head.active::after { content: '-'; } .accordion .accordion_text { display: none; padding: 1.5em 1.5em 2.5em 1.5em; background: var(--blue); } .accordion .accordion_text :where(p, li) { font-size: 100%; } .sec_faq .svg_tab_3 { position: relative; width: 10rem; margin: 0 auto var(--c12v) 5%; opacity: .25; } .sec_faq .svg_tab_3 text { font-size: 150%; } .sec_faq .svg_plus { display: none; } .sec_faq .el_big_num_1 { bottom: auto; top: 3rem; right: 0%; font-size: 150%; opacity: .25; } .sec_faq .el_big_num_1 .svg_tri { position: relative; width: 1em; transform: translate(0em, -.5em); } .sec_faq .letter_b_alt { display: none; } .sec_faq .cross_7 { display: none; } .sec_faq .el_big_num_2 { position: relative; margin: var(--c12v) 0 calc((var(--c15v) + 17.5%) * -1) auto; font-size: clamp(140px, 30vw, 420px); color: var(--blue-l); opacity: .25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION FORM ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #sec_form .text .mobile { margin-top: 1.5rem; } #sec_form .text :where(h2 + #form, div + #form) { margin-top: var(--c10v); } #sec_form #form { text-align: left; } #sec_form .el_circle { position: relative; margin: 0 10% 0 auto; } #sec_form .svg_tri { top: 5%; left: 5%; width: 1rem; transform: rotate(180deg); } #sec_form .circle_1 { position: relative; width: 10rem; margin: 0 auto; } #sec_form .cross_8 { display: none; } #sec_form .el_num_triangle { display: none; } /** * * ▄▀▀ ▄▀▀▄ █▀▀▄ █▀▀▄ ▄▀▀ * █ █▀▀█ █▐█▀ █ █ ▀▄ * ▀▀ ▀ ▀ ▀ ▀▀ ▀▀▀ ▀▀ - CARDS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card .filter { background: linear-gradient(to bottom, rgb(var(--black-rgb) / 0%) 0%, rgb(var(--blue-rgb) / 90%) 100%); } .card span.shape { top: -1px; left: 1.5rem; width: 0; height: 0; pointer-events: none; border-left: .5rem solid transparent; border-right: .5rem solid transparent; border-top: .875rem solid var(--blue); } .card span.card_num { font: 400 200% / 1 var(--title-font); color: var(--white); } .card span.card_num.abs { top: 1rem; right: 1rem; text-shadow: 0 0 1rem rgb(var(--black-rgb) / 50%); } .card .text.abs { bottom: 0; left: 0; } .card .text { padding: 1.5em; } .card .text h3 { font: 300 175% / 1.25 var(--title-font); text-shadow: 0 0 1rem rgb(var(--black-rgb) / 50%); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD PAGE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card.card_page .filter { background: linear-gradient(to bottom, rgb(var(--grey-rgb) / 0%) 0%, rgb(var(--blue-rgb) / 100%) 75%, rgb(var(--blue-rgb) / 100%) 100%); } .card.card_page > picture { aspect-ratio: 3 / 5; } .card.card_page span.card_num.abs { top: 1.5rem; right: auto; left: 1.5rem; } .card.card_page .text { padding: 0 1.5em 2em 1.5em; } .card.card_page .text h3 { font: 400 150% / 1 var(--title-font); } .card.card_page .text h3 + p { margin-top: 1em; } .card.card_page .text p { font-size: 100%; line-height: 1.25; } .card.card_page .text :where(h3, p) { text-shadow: 0 0 .75em rgb(10 10 10 / 50%); } .card.card_page .text > div { gap: 1em; margin-top: 1.5em; } .card.card_page .text > div .link { margin: 0; } .card.card_page .text > div img { width: 2.5em; min-width: 2.5em; transition: .25s ease; will-change: transform; } /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_home { margin-bottom: -.25em; } #s1_home .bkg_thumb, #home_video, #s1_home .filter { height: 100dvh; object-fit: cover; } #s1_home > .line { position: absolute; background: var(--white); opacity: .25; } #s1_home > .line_v { top: .5rem; left: 50%; transform: translate(-50%, 0%); width: 1px; height: 0; will-change: height; transition: .25s ease-out; } #s1_home > .line_o { top: 50dvh; left: .5rem; transform: translate(0%, -50%); width: 0; height: 1px; will-change: width; transition: .5s ease-out; } #s1_home > .el_circle { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: .5; transition: .25s ease .125s; } #s1_home > .svg_el :where(polygon, path, text) { fill: var(--white); } #s1_home > .el_big_num { color: var(--white); opacity: .25; } #s1_home > .circle_1 { bottom: 1.5rem; left: 1.5rem; width: 8rem; opacity: .5; } #s1_home > .circle_2 { display: none; } #s1_home > .cross_2 { display: none; } #s1_home > .cross_3 { top: 17.5%; right: 10%; width: 6em; opacity: .25; } #s1_home > .cross_4 { display: none; } #s1_home > .el_big_num_1 { display: none; } #s1_home > .el_big_num_2 { display: none; } #s1_home > .el_big_num_3 { bottom: 20%; margin-right: 5%; } #s1_home.active > .line_v { height: calc(50dvh - .5rem); } #s1_home.active > .line_o { width: calc(100% - 1rem); } #s1_home.active > .el_circle { transform: translate(-50%, -50%) scale(1); } #s1_home .container .el_circle {} #s1_home .container .circle_2 { display: none; } #s1_home .container .circle_3 { display: none; } #s1_home .container .cross_1 { display: none; } #s1_home .container .cross_5 { display: none; } #s1_home .container .cross_6 { display: none; } #s1_home .container .svg_tab_1 { display: none; } #s1_home .container .el_big_num_1 {} #s1_home .container .el_big_num_2 {} #s1_home h1 { font-size: clamp(36px, 9vw, 180px); text-shadow: 0 0 1em rgb(10 10 10 / var(--blue-rgb) / 75%); } #s1_home h1 strong { font-weight: 500; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s2_home { margin-bottom: -1px; z-index: 1; } #s2_home :where(.img_3, .img_4, .img_5) { display: none; } #s2_home picture { width: 60%; min-width: 60%; transform: translate(0%, 0%) rotate(0deg) scale(0); opacity: 0; transition: .325s ease-out; } #s2_home .active picture { opacity: 1; } #s2_home .active picture.img_1 { transform: translate(0%, -10%) rotate(-7.5deg) scale(1); } #s2_home .active picture.img_2 { transform: translate(-7.5%, 0%) rotate(5deg) scale(1); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s3_home .text { margin-top: var(--c15v); } #s3_home .text { z-index: 2; } #s3_home .text + .text { margin-top: 1.5rem; } #s3_home .el_circle { top: 10%; left: 10%; } #s3_home .el_big_num_1 { bottom: auto; top: 0; right: 50%; transform: translateX(50%); opacity: .25; } #s3_home .circle_4 { display: none; } #s3_home .cross_7 { position: relative; margin: calc(var(--c12v) + 15%) auto var(--c12v) 7.5%; width: 6em; opacity: .5; } #s3_home .letter_a_alt { position: absolute; bottom: 22.5%; right: 27.5%; width: 3.5em; opacity: .75; } #s3_home .letter_a_alt :where(polygon, path, text) { fill: var(--blue-l); } #s3_home .letter_a_alt text { display: none; } #s3_home .svg_plus { display: none; } #s3_home .el_big_num_2 { bottom: 15%; right: 12.5%; font-size: 150%; color: var(--blue-l); opacity: .25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s4_home .sec_img picture { margin-top: -10%; transform: rotate(0deg) scale(0); opacity: 0; } #s4_home .sec_img.active picture { transform: rotate(5deg) scale(1); opacity: 1; } #s4_home .letter_c { position: relative; width: 3.5em; margin: 0 auto 0 15%; opacity: .75; } #s4_home .circle_5 { position: relative; width: 10rem; margin: 0 auto 0 0; } #s4_home .cross_3 { display: none; } #s4_home .el_num_triangle { bottom: 7.5%; right: 10%; min-width: 7ch; font-size: 150%; color: var(--blue-l); } #s4_home .el_num_triangle span::before { top: auto; bottom: 0; left: 100%; transform: translate(75%, calc(-50% + .5em)); border-left: .875rem solid var(--blue-l); border-right: 0; border-top: .5rem solid transparent; border-bottom: .5rem solid transparent; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 5 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s5_home .wrapper { padding-bottom: 4em; } #s5_home .wrapper .card { transition: 0s; margin-top: var(--c10v); } #s5_home .wrapper .card_1 { transform: rotate(-2.5deg); margin-top: 0; } #s5_home .wrapper .card_2 { transform: rotate(2.5deg); } #s5_home .wrapper .card_3 { transform: rotate(-3deg); } #s5_home .wrapper .card_4 { transform: rotate(1.5deg); } #s5_home .wrapper .card_5 { transform: rotate(-2deg); } #s5_home .wrapper .card .text { padding: 0 1.5em 3em 1.5em; } #s5_home .wrapper .card .text h3 { font-size: 175%; } #s5_home .link.mobile { margin: 0 auto; } #s5_home .svg_el.svg_tri { position: relative; width: 1rem; margin: 0 auto; } #s5_home .el_big_num { position: relative; display: block; width: 100%; margin: 0 auto 0 5%; font-size: 150%; color: var(--blue-l); } #s5_home .circle_5 { position: relative; width: 10rem; margin: -10% auto 0 5%; } #s5_home .cross_8 { display: none; } #s5_home .svg_cariola { top: 20%; right: 20%; width: 5rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 6 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s6_home .card_pic { display: none; } #s6_home .card { background-color: var(--blue-l); transform: translateX(calc(100% + var(--c10o))); opacity: 0; transition: .325s ease-out; } #s6_home .card.active { transform: translateX(0); opacity: 1; } #s6_home .card + .card { margin-top: 1em; } #s6_home .card picture { opacity: .05; } #s6_home .card a { padding: 1.5em 1em; } #s6_home .card h3 { font: 400 125% / 1.25 var(--title-font); text-transform: uppercase; text-align: center; } #s6_home .card .card_num { margin: .75em 0 0 1ch; font: 300 50% / 1 var(--title-font); color: var(--white); } #s6_home .card :where(h3, .card_num) { text-shadow: 0 0 .75em rgb(var(--black-rgb) / 50%); } #s6_home .link.mobile { margin: 0 auto; } #s6_home .svg_tab_2 { display: none; } #s6_home .svg_plus { position: relative; width: 3.5rem; margin: 0 auto calc(var(--c7v) * -1) 0; opacity: .25; } #s6_home .el_num_triangle { position: relative; width: 100%; font-size: 200%; text-align: center; opacity: .25; } #s6_home .el_num_triangle span { display: inline; } #s6_home .el_num_triangle span::before { top: 100%; left: 0; transform: translate(calc(-100% - 1em), -1rem); border-left-width: .5rem; border-right-width: .5rem; border-top-width: .875rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 9 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s9_home .sec_img, #s9_home .text { z-index: 2; } #s9_home .sec_img picture:nth-of-type(1) { margin-right: -10%; transform: translate(-10%, -15%) rotate(0deg) scale(0); } #s9_home .sec_img picture:nth-of-type(2) { margin-left: -10%; transform: translate(20%,0%) rotate(0deg) scale(0); } #s9_home .sec_img.active picture:nth-of-type(1) { transform: translate(-10%, -15%) rotate(-5deg) scale(1); } #s9_home .sec_img.active picture:nth-of-type(2) { transform: translate(20%,0%) rotate(2.5deg) scale(1); } #s9_home .svg_plus { top: 2.5%; right: 15%; width: 3.5em; opacity: .25; } #s9_home .svg_plus + .svg_plus { display: none; } #s9_home .cross_9 { display: none; } #s9_home .svg_tab_3 { position: relative; width: 12rem; margin: 0 auto 0 15%; } #s9_home .svg_tab_3 text { font-size: 175%; } #s9_home .el_num_triangle { display: none; } #s9_home .el_num_triangle span:before { top: 100%; transform: translate(calc(-100% - .75em), -50%); border-top-color: var(--blue-l); } #s9_home .el_big_num { position: relative; width: 100%; margin-top: -5%; transform: translateX(7.5%); font-size: 400%; text-align: right; opacity: .25; } /** * * █▀▀▄ ▄▀▀▄ ▄▀▀▀ █▀▀ ▄▀▀ * █ █ █▀▀█ █ ▀▌ █▀▀ ▀▄ * █▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀ - TEMPLATES _ PAGINE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE AZIENDA ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ #s2_azienda .anno { font: 100 clamp(160px, 40vw, 300px) / .875 var(--title-font); color: var(--white); opacity: .25; } #s2_azienda .anno span { display: inline-block; } #s2_azienda .anno span:nth-of-type(2) { margin-left: 1ch; } #s2_azienda .anno + .text { margin-top: var(--c15v); } .s2_page .text + .text { margin-top: 1.5rem; } .s2_page:not(#s2_processi) .h100 .text { align-self: flex-end; } .s2_page .h100 .text + .text { align-self: flex-start; } #s2_azienda .circle_6 { display: block; top: 12.5%; right: 10%; width: 6rem; opacity: .5; } #s2_azienda .letter_b_alt { position: relative; width: 3.5rem; margin: var(--c12v) auto 0 auto; } #s2_azienda .letter_b_alt :where(rect, polygon, path, text) { fill: var(--blue-l); } #s2_azienda .svg_plus { top: 27.5%; left: 15%; width: 3.5rem; opacity: .125; } /* Section 3 */ #s3_azienda .container {} #s3_azienda .grid { gap: 1.5em; } #s3_azienda .card:not(.desktop) { border: 2px solid var(--blue); } #s3_azienda .card.animate:not(.desktop) { transform: translateY(25%) scale(.5); opacity: 0; transform-origin: bottom center; transition: .325s ease-out; } #s3_azienda .card.animate.active:not(.desktop) { transform: translateY(0%) scale(1); opacity: 1; } #s3_azienda .card p { font: 400 150% / 1.25 var(--title-font); } #s3_azienda .card p.num { font-size: 400%; line-height: 1; } #s3_azienda .svg_tab_4 { position: relative; width: 10rem; margin: 0 auto; } #s3_azienda .svg_tab_4 text { font-size: 150%; } #s3_azienda .circle_9 { position: relative; width: 18em; margin: 0 auto -45% auto; } #s3_azienda .svg_cariola, #s3_azienda .svg_tri, #s3_azienda .svg_plus, #s3_azienda .el_big_num_1 { display: none; } #s3_azienda + #sec_motivi { padding-top: 35%; } #page_azienda #sec_motivi .letter_b_alt { top: 35%; } /* Section 6 */ #s6_azienda .sec_img picture { transform: rotate(0deg) scale(0); } #s6_azienda .sec_img.active picture { transform: rotate(-2.5deg) scale(1); } #s6_azienda .letter_c_alt { position: relative; width: 3.5rem; margin: 0 20% 0 0; } #s6_azienda .letter_c_alt :where(path, text) { fill: var(--blue-l); } #s6_azienda .letter_c_alt text { display: none; } #s6_azienda .svg_tab_5 { display: none; } #s6_azienda .el_big_num_1 { bottom: auto; top: 5%; left: 15%; font-size: 150%; color: var(--blue-l); } #s6_azienda .el_big_num_1 .svg_tri { position: relative; width: 1rem; transform: translate(-100%, -2rem); } #s6_azienda .el_big_num_1 .svg_tri path { fill: var(--blue-l); } #s6_azienda .svg_plus { position: relative; width: 3.5rem; margin: 0 25% 0 0; } #s6_azienda .el_big_num_2 { position: relative; bottom: auto; right: auto; margin-top: -30%; transform: translateX(10%); font-size: clamp(140px, 38vw, 450px); color: var(--blue-l); text-align: right; opacity: .25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE SERVIZI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ #s2_servizi .nav_wrapper { gap: 1em; margin-top: 1.5em; } #s2_servizi .circle_6 { position: relative; width: 6rem; margin: 10% auto 0 15%; } #s2_servizi .circle_6 :where(path, polygon, text) { fill: var(--blue-l); } #s2_servizi .letter_a_alt { top: 5%; right: 20%; width: 3.5rem; } #s2_servizi .letter_a_alt :where(path, polygon, text) { fill: var(--blue-l); } #s2_servizi .svg_plus { position: relative; width: 3.5rem; margin: 0 auto 0 25%; opacity: .5; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE LAVORAZIONI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ #s2_lavorazioni .el_circle { top: 10%; left: 10%; background-color: var(--blue-l); } #s2_lavorazioni .svg_plus, #s2_lavorazioni .el_big_num { display: none; } #s2_lavorazioni .letter_a_alt { position: relative; width: 3.5rem; margin: var(--c12v) auto 0 20%; } #s2_lavorazioni .letter_a_alt :where(path, polygon, text) { fill: var(--blue-l); } #s2_lavorazioni .circle_6 { bottom: auto; top: 5%; right: 5%; width: 6rem; } /* Section 3 */ #s3_lavorazioni .sec_title { order: 1; } #s3_lavorazioni .card_lavorazione.animate picture, #s3_lavorazioni .card_lavorazione.animate .btn { transition: .325s ease-out; } #s3_lavorazioni .card_lavorazione.animate .btn .ico { transform: scale(0); transition: .25s ease .325s; } #s3_lavorazioni .card_lavorazione.animate.active .btn .ico { transform: scale(1); } #s3_lavorazioni .card_1 { order: 2; } #s3_lavorazioni .card_1.animate picture { transform: translateX(calc(-100% - var(--c7o))) rotate(0deg); } #s3_lavorazioni .card_1.animate .btn { transform: translateX(calc(100% + var(--c7o))); opacity: 0; } #s3_lavorazioni .card_1.animate.active picture { transform: translateX(0%) rotate(-2.5deg); } #s3_lavorazioni .card_1.animate.active .btn { transform: translateX(0%); opacity: 1; } #s3_lavorazioni .card_2 { order: 3; } #s3_lavorazioni .card_2.animate picture { transform: translateX(calc(100% + var(--c7o))) rotate(0deg); } #s3_lavorazioni .card_2.animate .btn { transform: translateX(calc(-100% - var(--c7o))); opacity: 0; } #s3_lavorazioni .card_2.animate.active picture { transform: translateX(0%) rotate(2.5deg); } #s3_lavorazioni .card_2.animate.active .btn { transform: translateX(0%); opacity: 1; } .card_lavorazione a {} .card_lavorazione picture { width: 40%; flex: 0 0 auto } .card_lavorazione.card_1 picture { transform: rotate(-2.5deg); } .card_lavorazione.card_2 picture { transform: rotate(2.5deg); } .card_lavorazione picture .filter { background: rgb(var(--black-rgb) / 25%); opacity: 0; } .card_lavorazione picture img { transition: .25s ease-out; } .card_lavorazione .btn { gap: .75em; flex: 1 1 auto; margin-left: -2em; } .card_lavorazione .btn .ico { padding: .25em; border-radius: 20em; background: var(--grey); } .card_lavorazione .btn .ico svg { width: 3.5em; flex: 0 0 auto; height: 3.5em; padding: .625em; border-radius: 20em; background: var(--white); } .card_lavorazione .btn .ico svg path { fill: var(--blue); transition: .25s ease; } .card_lavorazione .btn .text { text-align: left; } .card_lavorazione .btn .text h3 { font: 500 .875rem / 1 var(--title-font); } .card_lavorazione .btn .text h3 span { display: block; font: 400 150% / 1 var(--title-font); font-style: italic; text-transform: uppercase; } .card_lavorazione.card_2 a { flex-direction: row-reverse; } .card_lavorazione.card_2 .btn { flex-direction: row-reverse; margin: 0 -2em 0 0; } .card_lavorazione.card_2 .btn .text { text-align: right; } #s3_lavorazioni .el_circle { top: 55%; left: 55%; } #s3_lavorazioni .circle_11 { display: none; } #s3_lavorazioni .circle_12 { position: relative; width: 10rem; margin: 0 0 -25% auto; order: 4; } #s3_lavorazioni .cross_2 { position: relative; width: 6rem; margin: 0 auto 0 10%; opacity: .25; } #s3_lavorazioni .el_big_num_1 { bottom: auto; top: 2.5%; right: 7.5%; font-size: 125%; } #s3_lavorazioni .el_big_num_1 .svg_tri { position: relative; width: .75em; transform: translate(-.5em, 1.25em); } #s3_lavorazioni .el_big_num_2 { bottom: 10%; right: auto; left: 10%; font-size: 125%; } #s3_lavorazioni .el_big_num_2 .svg_tri { position: relative; width: .75em; transform: translate(-1.25em, 1.25em) rotate(180deg); } /* Section 5 */ #s5_lavorazioni .text + .wrapper { margin-top: var(--c12v); } #s5_lavorazioni .card { border: 2px solid var(--blue); } #s5_lavorazioni .card .text { order: 2; padding: 6em 4em 1.5em 1.5em; border-top: 2px solid var(--blue); } #s5_lavorazioni .card .text .card_num { color: var(--blue); text-shadow: none; } #s5_lavorazioni .card .text p { font: 400 100% / 1.5 var(--title-font); } #s5_lavorazioni .nav_wrapper { gap: 1em; margin: 1.5rem auto 0 auto; } #s5_lavorazioni .svg_tab_5 { position: relative; width: 10em; margin: 0 auto var(--c12v) auto; } #s5_lavorazioni .svg_tab_5 text { font-size: 150%; } #s5_lavorazioni .circle_5 { display: none; } #s5_lavorazioni .cross_9 { bottom: 2.5%; left: 10%; width: 3.5rem; opacity: .25; } #s5_lavorazioni .el_big_num_1 { display: none; } #s5_lavorazioni .el_big_num_2 { display: none; } /* Section 6 */ #s6_lavorazioni .sec_img picture { margin: 0 auto; transform: rotate(0deg) scale(0); } #s6_lavorazioni .sec_img.active picture { transform: rotate(-2.5deg) scale(1); } #s6_lavorazioni .el_circle { top: 0; right: 10%; transform: translateY(-50%); background-color: var(--blue-l); } #s6_lavorazioni .circle_6 { bottom: 25%; left: 75%; width: 6rem; opacity: .25; } #s6_lavorazioni .svg_plus { top: 82.5%; left: 7.5%; width: 3.5rem; opacity: .5; } #s6_lavorazioni .el_big_num_1 { bottom: 37.5%; right: 10%; font-size: 125%; color: var(--blue-l); z-index: 1; } #s6_lavorazioni .el_big_num_1 .svg_tri { transform: translate(0em, 0em); } #s6_lavorazioni .el_big_num_1 .svg_tri path { fill: var(--blue-l); } #s6_lavorazioni .el_big_num_2 { bottom: 3.25%; right: 25%; opacity: .25; z-index: 1; } /* Section 8 */ #s8_lavorazioni .text + .grid { margin-top: var(--c10v); } #s8_lavorazioni .grid { gap: 1em; } #s8_lavorazioni .card { border: 2px solid var(--blue); } #s8_lavorazioni .card .card_num { color: var(--blue); text-shadow: none; } #s8_lavorazioni .card .text { padding-top: 4em; padding-right: 4em; } #s8_lavorazioni .card .text p { font: 400 100% / 1.25 var(--title-font); } #s8_lavorazioni .card.animate { transform: scale(0); opacity: 0; transition: .325s ease-out; } #s8_lavorazioni .card.animate.active { transform: scale(1); opacity: 1; } #s8_lavorazioni .el_circle { top: 0%; right: 15%; transform: translateY(-50%); background-color: var(--blue-l); } #s8_lavorazioni .circle_5 { display: none; } #s8_lavorazioni .cross_9 { position: relative; width: 3.5rem; margin: var(--c12v) auto var(--c12v) 15%; } #s8_lavorazioni .el_big_num_1 { bottom: 67.5%; right: 10%; font-size: 125%; color: var(--blue-l); } #s8_lavorazioni .el_big_num_1 .svg_tri { transform: translate(-1.5em, -1.5em); } #s8_lavorazioni .el_big_num_1 .svg_tri path { fill: var(--blue-l); } #s8_lavorazioni .el_big_num_2 { transform: translate(5%, 35%); font-size: clamp(80px, 20vw, 420px); text-align: right; opacity: .25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE SETTORI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ .s2_page .el_circle { top: 12.5%; right: 25%; background-color: var(--blue-l); } .s2_page .circle_6 { display: none; } .s2_page .circle_7, .s2_page .circle_14, .s2_page .circle_15 { position: relative; width: 14rem; margin: var(--c12v) 0 0 auto; } .s2_page .letter_b_alt, .s2_page .letter_c_alt { top: 7.5%; left: 7.5%; width: 3.5rem; } .s2_page .letter_b_alt :where(path, polygon, text), .s2_page .letter_c_alt :where(path, polygon, text) { fill: var(--blue-l); } .s2_page .letter_b_alt text, .s2_page .letter_c_alt text { font-size: 125%; } .s2_page .svg_plus { bottom: 10%; left: 5%; width: 3.5rem; opacity: .25; } /* Section 3 */ .sec_slider_sub .swiper { padding: 0 1.25em; } .sec_slider_sub .nav_wrapper { margin: 1.5em auto 0 auto; gap: 1em; } .sec_slider_sub .svg_tab_2,.sec_slider_sub .svg_tab_3, #s3_contatti .svg_tab_3 { position: relative; width: 12em; margin: 0 auto var(--c12v) auto; } .sec_slider_sub .svg_tab_2 text { font-size: 150% } .sec_slider_sub .svg_tab_3 text { font-size: 175% } .sec_slider_sub .circle_1, .sec_slider_sub .svg_plus, .sec_slider_sub .letter_a_alt { display: none; } .sec_slider_sub .cross_2, #s3_contatti .cross_2 { position: relative; width: 3.5em; margin: var(--c12v) auto 0 10%; } .sec_slider_sub .el_big_num_2, #s3_contatti .el_big_num { transform: translate(5%, 30%); font-size: clamp(80px, 20vw, 420px); text-align: right; opacity: .25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE PARCO MACCHINE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ /* Section 3 */ #s3_parco .swiper { padding: 0 1.25em; } #s3_parco .card .sec_img h3 { bottom: 0; left: 0; padding: 1.5rem; font: 400 calc(var(--h3-size) * .75) / 1.25 var(--title-font); color: var(--white); text-shadow: 0 0 .75rem rgb(var(--black-rgb) / 50%); } #s3_parco .card .text { padding: 2em 1.5em; border: 2px solid var(--blue); background-color: var(--grey); } #s3_parco .card .text .shape { left: auto; right: 2rem; } #s3_parco .card .text .card_num { display: block; color: var(--blue); text-shadow: none; text-align: right; } #s3_parco .card .text .card_num + p { margin-top: 1.5em; } #s3_parco .card .text p { font: 400 100% / 1.5 var(--title-font); } #s3_parco .nav_wrapper { margin: 1.5em auto 0 auto; gap: 1em; } #s3_parco .circle_1 { display: none; } #s3_parco .cross_2 { top: 2.5%; right: 10%; width: 6rem; } #s3_parco .el_big_num { transform: translate(5%, 35%); font-size: clamp(120px, 20vw, 420px); text-align: right; opacity: .125; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE QUALITÁ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ #s2_quality h2 + .scroll_fill { margin-top: 1.5em; } #s2_quality .svg_tab_5, #s2_quality .el_big_num_2 { display: none; } /* Section 3 */ #s3_quality .card + .card { margin-top: 1rem; } #s3_quality .card.animate { transform: scale(.5); opacity: 0; transition: .325s ease-out; } #s3_quality .card.animate.active { transform: scale(1); opacity: 1; } #s3_quality .card .text { order: 2; border: 2px solid var(--blue); background: var(--white); } #s3_quality .card .text .shape { top: auto; left: auto; bottom: -1px; right: 1.5rem; border-top: 0; border-bottom: 1rem solid var(--blue); } #s3_quality .card .text p { font: 400 100% / 1.5 var(--title-font); } #s3_quality .card .img_block { order: 1; } #s3_quality .card .img_block h3.card_title { bottom: 0; left: 0; padding: 1.5rem; font: 400 calc(var(--h3-size) * .75) / 1.25 var(--title-font); color: var(--white); text-shadow: 0 0 .75rem rgb(var(--black-rgb) / 50%); } #s3_quality .el_big_num_1 { bottom: auto; top: 1.25%; right: 10%; font-size: 125%; color: var(--blue-l); } #s3_quality .el_big_num_1 .svg_tri { transform: translate(-.75em, -1.25em) rotate(180deg); } #s3_quality .el_big_num_1 .svg_tri path { fill: var(--blue-l); } #s3_quality .circle_2 { display: none; } #s3_quality .cross_1 { position: relative; width: 6em; margin: 0 auto var(--c12v) 15%; } #s3_quality .svg_cariola { display: none; } #s3_quality .letter_a_alt { position: relative; width: 3.5rem; margin: var(--c12v) auto 0 10%; } #s3_quality .letter_a_alt :where(path, polygon, text) { fill: var(--blue-l); } #s3_quality .letter_a_alt text { display: none; } #s3_quality .el_big_num_2 { transform: translate(5%, 35%); font-size: clamp(120px, 20vw, 420px); text-align: right; opacity: .125; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE PROCESSI PRODUTTIVI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ /* Section 3 */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE LAVORA CON NOI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ #s2_lavora .text :where(h4, h5) { font: 400 150% / 1.125 var(--title-font); color: var(--blue-l); } #s2_lavora .swiper { padding-bottom: 1.25em; } .card.card_position { padding: 1.5rem 1.5rem 0 1.5rem; background: var(--white); } .card.card_position .card_num { margin: 0 0 0 auto; color: var(--blue); text-shadow: none; } .card.card_position .text { padding: 1.5em 0; } .card.card_position .text h3 { font-weight: 400; font-size: 150%; line-height: 1; text-shadow: none; } .card.card_position .text h3 + p { margin-top: .25em; } .card.card_position .text p { font-size: 100%; } .card.card_position .link { align-self: flex-end; margin-bottom: -1.25em; } #s2_lavora .nav_wrapper { gap: 1em; margin: 1.5em auto 0 auto; } #s2_lavora .cross_1 { display: none; } /* Section 3 */ #s3_lavora .svg_tab_3 { position: relative; width: 10em; margin: 0 5% 0 auto; } #s3_lavora .svg_tab_3 text { font-size: 150%; } #s3_lavora .letter_a_alt { top: 2.5%; left: 10%; width: 3.5rem; } #s3_lavora .letter_a_alt :where(path, polygon, text) { fill: var(--blue-l); } #s3_lavora .letter_a_alt text { display: none; } #s3_lavora .cross_3, #s3_lavora .cross_2 { display: none; } #s3_lavora .svg_plus { position: relative; width: 3.5em; margin: 0 auto 0 10%; } #s3_lavora .el_big_num { transform: translate(5%, 35%); font-size: clamp(120px, 20vw, 420px); opacity: .25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CONTATTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ #s2_contatti .sec_title + .grid { margin-top: var(--c10v); gap: 1em; } .card.card_contact + .card.card_contact { margin: 0; } .card.card_contact { padding: 1.5em; background-color: var(--white); } .card.card_contact .ico { width: 3.5em; min-width: 3.5em; margin: 0 0 0 auto; } .card.card_contact .ico + p { margin-top: 1.5em; } .card.card_contact p { display: block; width: 100%; font: 400 100% / 1.25 var(--title-font); text-align: left; } /* Section 3 */ .card_info.animate { transform: scale(.5); opacity: 0; transition: .25s ease-out; } .card_info.animate.active { transform: scale(1); opacity: 1; } .card_info + .card_info { margin-top: 1em; } .card_info { padding: 2.5em 1.5em; background: var(--white); z-index: 1; } .card_info .text p { font-size: 100%; } .card_info .text p + p { margin-top: 1rem; } .card_info .text p.h3 { font: 400 200% / 1 var(--title-font); color: var(--blue); } .card_info .text p.h4 { font: 400 150% / 1 var(--title-font); color: var(--blue); } .card_info .text p a { display: inline-block; } .card_info .text p a:hover { text-decoration: underline; } #s3_contatti :where(.circle_1, .svg_plus, .letter_a_alt) { display: none; } #s3_contatti .svg_tab_3 text { font-size: 175% } /** * * ▄▀▀ ▀ █▄ █ ▄▀▀▀ █ █▀▀ * ▀▄ █ █ ▀█ █ ▀▌ █ ▄ █▀▀ * ▀▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ - SINGLE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SINGLE SERVIZI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ .s2_single .svg_plus { position: relative; width: 3.5em; margin: 0 auto var(--c12v) 15%; opacity: .25; } .s2_single .svg_tab_6 { display: none } .s2_single .letter_c_alt { position: relative; width: 3.5rem; margin: var(--c12v) auto var(--c12v) 5%; } .s2_single .letter_c_alt :where(path, polygon, text) { fill: var(--blue-l); } .s2_single .letter_c_alt text { font-size: 125%; } .s2_single .cross_1 { position: relative; width: 6em; margin: var(--c10v) 15% var(--c10v) auto; opacity: .25; } .s2_single .circle_6 { display: block; position: relative; width: 8em; margin: var(--c12v) 10% calc(var(--c12v) * -1) auto; } .s2_single .el_big_num { position: relative; bottom: auto; right: auto; transform: translate(20%, 125%); font-size: 150%; color: var(--blue-l); } .s2_single .el_big_num .svg_tri { transform: translate(2.5em, -2.5em) rotate(180deg); } .s2_single .el_big_num .svg_tri path { fill: var(--blue-l); } /* Section 3 */ #s3_single_service .sec_img picture.w65 { margin: 0 -20% 15% 0; transform: translate(-10%, 0%) rotate(0deg) scale(0); transform-origin: right bottom; } #s3_single_service .sec_img picture.w55 { align-self: flex-end; transform: translate(5%, 0%) rotate(0deg) scale(0); transform-origin: left bottom; } #s3_single_service .sec_img.active picture.w65 { transform: translate(-10%, 0%) rotate(-3.25deg) scale(1); } #s3_single_service .sec_img.active picture.w55 { transform: translate(5%, 0%) rotate(5deg) scale(1); } #s3_single_service .sec_img + .sec_title { margin-top: var(--c12v); } #s3_single_service .sec_title h4 { font: 400 112.5% / 1.25 var(--title-font); text-transform: uppercase; } #s3_single_service .sec_title + .cards_wrapper { margin-top: 1.5em; } #s3_single_service .cards_wrapper {} /*#s3_single_service .cards_wrapper .card { margin-top: 1em; }*/ #s3_single_service .cards_wrapper .card.card_1 { margin-top: 0; } #s3_single_service .cards_wrapper .card { border: 2px solid var(--blue); background: var(--grey); transform: translateZ(0); will-change: transform; } #s3_single_service .cards_wrapper .shape { top: auto; left: auto; bottom: -1px; right: 1.25em; border-top: 0; border-left: .5em solid transparent; border-right: .5em solid transparent; border-bottom: .875em solid var(--blue); } #s3_single_service .cards_wrapper .card_num { display: block; margin: 0 1.25rem 0 auto; font-size: 250%; line-height: .725; color: var(--blue); text-align: right; } #s3_single_service .cards_wrapper .text { padding: 3em 5em 1.5em 1.5em; } #s3_single_service .cards_wrapper .text p { font: 400 125% / 1.125 var(--title-font); } #s3_single_service .circle_10 { display: none; } #s3_single_service .cross_2 { position: relative; width: 3.5em; margin: var(--c12v) auto var(--c12v) 5%; } #s3_single_service .svg_cariola { top: 25%; left: 5%; width: 4em; } #s3_single_service .svg_plus { top: 2.5%; right: 5%; width: 3.5em; } #s3_single_service .el_big_num { position: relative; margin: -15% 0 var(--c12v) auto; font-size: 300%; opacity: .25; } /* Section 4 */ #s4_single_service .svg_plus { position: relative; width: 3.5em; margin: calc(var(--c12v) * -1) 25% var(--c12v) auto; opacity: .5; } #s4_single_service .circle_8 { position: relative; width: 18em; margin: var(--c12v) auto; } #s4_single_service .letter_b_alt { display: none; } #s4_single_service .el_big_num_2 { transform: translate(5%, -20%); font-size: clamp(120px, 20vw, 420px); color: var(--blue-l); opacity: .25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SINGLE LAVORAZIONI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ #s2_single_lavorazioni .container { padding-bottom: calc(var(--c15v) + 10%); } /* Section 3 */ #s3_single_lavorazioni picture.w75 { margin-top: -20%; transform: translate(-7.5%, 0%) rotate(0deg) scale(0); } #s3_single_lavorazioni picture.w65 { margin: -65% 0 0 auto; transform: translate(5%, 0%) rotate(0deg) scale(0); } #s3_single_lavorazioni picture.w75.active { transform: translate(-7.5%, 0%) rotate(-2.5deg) scale(1); } #s3_single_lavorazioni picture.w65.active { transform: translate(5%, 0%) rotate(5deg) scale(1); } #s3_single_lavorazioni picture + .text { margin-top: var(--c10v); } #s3_single_lavorazioni .container > .text p { font: 400 100% / 1.5 var(--title-font); text-transform: uppercase; } #s3_single_lavorazioni .text + .wrapper { margin-top: var(--c7v); } #s3_single_lavorazioni .card .num { text-align: center; } #s3_single_lavorazioni .card .num span { display: block; padding: .25em; font: 400 300% / 1.25 var(--title-font); color: var(--blue); opacity: .25; } #s3_single_lavorazioni .card .num::after { display: block; content: ''; width: 1px; height: 0; margin: -1em auto 0 auto; background: var(--blue); transition: .25s ease; } #s3_single_lavorazioni .card .text { display: none; padding: 2.5em 1.5em; border: 2px solid var(--blue); background: var(--white); } #s3_single_lavorazioni .card .text p { font: 400 125% / 1.25 var(--title-font); } #s3_single_lavorazioni .num.active span { opacity: 1; } #s3_single_lavorazioni .num.active::after { height: 3em; } #s3_single_lavorazioni .svg_plus { top: 7.5%; right: 12.5%; width: 3.5em; } #s3_single_lavorazioni .svg_cariola { width: 4em; top: 15%; left: 5%; z-index: 2; } #s3_single_lavorazioni .el_circle { top: calc(20% + 4em); left: calc(15% + 4em); background-color: var(--blue-l); z-index: 3; } #s3_single_lavorazioni .cross_2 { display: block; position: relative; width: 5em; margin: var(--c15v) 20% var(--c7v) auto; } #s3_single_lavorazioni .letter_a_alt { bottom: 10%; left: 15%; width: 3.5em; } #s3_single_lavorazioni .letter_a_alt :where(path, polygon, text) { fill: var(--blue-l); } #s3_single_lavorazioni .letter_a_alt text { display: none; } #s3_single_lavorazioni .el_big_num_1 { display: none; } #s3_single_lavorazioni .el_big_num_2 { position: relative; bottom: auto; right: auto; width: fit-content; margin: 0 0 -10% 0; font-size: clamp(120px, 20vw, 420px); text-align: right; opacity: .25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SINGLE SETTORI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ /* Section 3 */ #s3_single_settori picture.w75 { margin: -20% -25% 25% 0; transform: translate(-10%, 0%) rotate(0deg) scale(0); } #s3_single_settori picture.w60 { align-self: flex-end; margin: 0 0 0 -10%; transform: translate(5%, 0%) rotate(0deg) scale(0); } #s3_single_settori .active picture.w75 { transform: translate(-10%, 0%) rotate(-2.5deg) scale(1); } #s3_single_settori .active picture.w60 { transform: translate(5%, 0%) rotate(5deg) scale(1); } #s3_single_settori :where(.el_circle, .circle_6, .el_big_num_2), #s3_single_quality_cert :where(.el_circle, .circle_6, .el_big_num_2) { display: none; } #s3_single_settori .svg_plus, #s3_single_quality_cert .svg_plus { top: 5%; right: 12.5%; width: 3.5em; } #s3_single_settori .el_big_num_1, #s3_single_quality_cert .el_big_num_1 { bottom: auto; right: auto; top: 42.5%; left: 25%; font-size: 150%; color: var(--blue-l); z-index: 2; } #s3_single_settori .el_big_num_1 .svg_tri, #s3_single_quality_cert .el_big_num_1 .svg_tri { transform: translate(1.5em, -2.5em) rotate(180deg); } #s3_single_settori .el_big_num_1 .svg_tri path, #s3_single_quality_cert .el_big_num_1 .svg_tri path { fill: var(--blue-l); } /* Section 4 */ #s4_single_settori .text + .wrapper { margin-top: var(--c10v); } #s4_single_settori .wrapper { z-index: 1; } #s4_single_settori .card + .card { margin-top: .25em; } #s4_single_settori .card .card_img .filter { background: var(--blue); opacity: .875; transition: .25s ease; } #s4_single_settori .card .card_img .text { bottom: 0; left: 0; padding: 1.5em; text-align: left; transition: .25s ease; } #s4_single_settori .card .card_img .text h4 { font: 300 125% / 1 var(--title-font); text-transform: uppercase; } #s4_single_settori .card .card_img .text .ico_link { transform: rotate(90deg); } #s4_single_settori .card .card_img .text .ico_link svg { width: 2.5em; min-width: 2.5em; height: 2.5em; } #s4_single_settori .card .card_img .text .ico_link svg path { fill: var(--blue); } #s4_single_settori .card.active .card_img .filter { opacity: 0; } #s4_single_settori .card.active .card_img .text { opacity: 0; } #s4_single_settori .card .card_text { display: none; padding-top: 4em; border: 2px solid var(--blue); background: var(--white); } #s4_single_settori .card .card_text .card_num { color: var(--blue); text-shadow: none; } #s4_single_settori .card .card_text p { font: 400 100% / 1.25 var(--title-font); } #s4_single_settori .card .card_text p.title { text-transform: uppercase; } #s4_single_settori .card .card_text p.title br { display: none; } #s4_single_settori .el_circle { position: relative; margin: 0 auto var(--c12v) 25%; } #s4_single_settori .cross_9 { top: 0; right: 15%; width: 5em; transform: translate(0%, -35%); } #s4_single_settori :where(.circle_5, .el_big_num_1) { display: none; } #s4_single_settori .el_big_num_2 { display: block; position: relative; bottom: auto; right: auto; margin: -10% 0 0 -17.5%; transform: translateX(calc(var(--c5o) + 5%)); font-size: clamp(120px, 20vw, 420px); text-align: right; opacity: .25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SINGLE QUALITÁ - QUALITY FLOW ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ /* Section 3 */ #s3_single_quality_flow .container { padding-bottom: calc(var(--c15v) + 10%); } #s3_single_quality_flow .sec_img.animate { transform: scale(0); transition: .325s ease-out; } #s3_single_quality_flow .sec_img.animate.active { transform: scale(1); } #s3_single_quality_flow .sec_img picture.abs { top: 0; left: 50%; width: 62.5%; height: 52.5%; transform: translate(-54%, 18%) rotate(12deg) skew(2deg, 0deg); } #s3_single_quality_flow .el_circle { top: 2.5%; left: 10%; } #s3_single_quality_flow .svg_plus { top: 12.5%; right: 7.5%; width: 3.5em; opacity: .25; } #s3_single_quality_flow :where(.circle_6, .el_big_num_1, .el_big_num_2) { display: none; } #s3_single_quality_flow .el_big_num_3 { width: fit-content; transform: translate(5%, 40%); font-size: clamp(120px, 20vw, 420px); text-align: right; opacity: .25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SINGLE QUALITÁ - SOSTENIBILITÁ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section Sostenibilità */ .sec_sostenibilita .text h2 { font-size: calc(var(--h2-size) * .8); } .sec_sostenibilita .text + .megaText { margin-top: var(--c12v); } .sec_sostenibilita .megaText { font: 300 clamp(2.25em, 10vw, 10em) / .75 var(--title-font); color: var(--green); opacity: 0; } .sec_sostenibilita.sec_green .megaText { color: var(--white); } #s2_single_quality_sustain .el_circle { top: 0; right: 15%; transform: translateY(-50%); background-color: var(--white); } #s2_single_quality_sustain .svg_el :where(path, polygon, rect, text) { fill: var(--white); } #s2_single_quality_sustain :where(.circle_10, .svg_plus) { display: none; } #s2_single_quality_sustain .cross_1 { position: relative; width: 6rem; margin: 0 auto var(--c12v) 15%; } #s2_single_quality_sustain .letter_b_alt { top: 5%; right: 25%; width: 3.5em; } #s2_single_quality_sustain .letter_b_alt text { display: none; } #s3_single_quality_sustain .el_circle, #s4_single_quality_sustain .el_circle, #s5_single_quality_sustain .el_circle { top: 15%; left: 8.5%; background-color: var(--green); } #s3_single_quality_sustain :where(.circle_1, .el_big_num), #s4_single_quality_sustain :where(.circle_8, .el_big_num), #s5_single_quality_sustain :where(.circle_6, .el_big_num, .svg_plus) { display: none; } #s3_single_quality_sustain .letter_a_alt, #s4_single_quality_sustain .letter_b_alt, #s5_single_quality_sustain .cross_7 { position: relative; width: 3.5em; margin: 0 15% var(--c12v) auto; } #s3_single_quality_sustain .svg_plus, #s4_single_quality_sustain .svg_plus { top: 5%; left: 25%; width: 3.5em; opacity: .25; } #s5_single_quality_sustain .cross_7 { width: 6rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SINGLE QUALITÁ - CERTIFICAZIONI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ /* Section 3 */ #s3_single_quality_cert picture.w75 { margin: -20% -25% 25% 0; transform: translate(-10%, 0%) rotate(0deg) scale(0); } #s3_single_quality_cert picture.w60 { align-self: flex-end; margin: 0 0 0 -10%; transform: translate(5%, 0%) rotate(0deg) scale(0); } #s3_single_quality_cert .active picture.w75 { transform: translate(-10%, 0%) rotate(-2.5deg) scale(1); } #s3_single_quality_cert .active picture.w60 { transform: translate(5%, 0%) rotate(5deg) scale(1); } #s3_single_quality_cert .el_big_num_1 { top: 35%; } /* Section 4 */ #s4_single_quality_cert .container { padding-bottom: calc(var(--c15v) + 10%); } #s3_single_quality_cert + #s4_single_quality_cert .container { padding-top: 0; } #s4_single_quality_cert .sec_title h2 { font-size: calc(var(--h2-size) * .8); } #s4_single_quality_cert .sec_title + .wrapper { max-width: 1024px; margin-top: var(--c10v); } #s4_single_quality_cert .card + .card { margin-top: 1em; } #s4_single_quality_cert .card { padding: 3em 1.5em; min-height: 15em; border: 2px solid var(--blue); background: var(--white); } #s4_single_quality_cert .card.animate { transform: translateY(25%) scale(.5); opacity: 0; transition: .25s ease-out; } #s4_single_quality_cert .card.animate.active { transform: translateY(0) scale(1); opacity: 1; } #s4_single_quality_cert .card .shape { top: auto; left: auto; bottom: 1.25rem; right: -1px; border-top: .5em solid transparent; border-right: 1em solid var(--blue); border-bottom: .5em solid transparent; } #s4_single_quality_cert .card p { font: 400 150% / 1 var(--title-font); text-transform: uppercase; } #s4_single_quality_cert .link { margin: var(--c10v) auto 0 auto; } #s4_single_quality_cert .el_circle { top: -1em; right: 15%; background-color: var(--blue-l); } #s4_single_quality_cert :where(.circle_1, .cross_2) { display: none; } #s4_single_quality_cert .svg_plus { position: relative; width: 3.5em; margin: 0 auto var(--c12v) 15%; } #s4_single_quality_cert .el_big_num_2 { transform: translate(5%, 40%); font-size: clamp(120px, 20vw, 420px); text-align: right; opacity: .25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SINGLE PROCESSI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_single_processi .s1_title h1 { font-size: calc(var(--h1-size) * .875); } /* Section 2 */ /* Section 3 */ .struttura_text_img .img_1 { align-self: flex-start; margin: calc((var(--c12v) * -1) - 5%) -25% 0 0; transform: translate(calc(-100% - var(--c7o)), 0%) rotate(0deg) scale(.75); } .struttura_text_img .img_2 { align-self: flex-end; margin: -95% 0 0 -15%; transform: translate(calc(100% + var(--c7o)), 0%) rotate(0deg) scale(.75); } .struttura_text_img .img_1.active { transform: translate(-5%, 0%) rotate(-2.5deg) scale(1); } .struttura_text_img .img_2.active { transform: translate(0%, 0%) rotate(5deg) scale(1); } .struttura_text_img picture + .text { margin-top: var(--c12v); } .struttura_text_img :where(.circle_8, .el_big_num_1, .el_big_num_2) { display: none; } .struttura_text_img .cross_2 { top: 2.5%; right: 7.5%; width: 5rem; z-index: 2; } .struttura_text_img .svg_cariola { top: 30%; left: 15%; width: 4em; z-index: 2; } .struttura_text_flex .text + .wrapper { margin-top: var(--c10v); } .struttura_text_flex .wrapper { gap: 1em; } .struttura_text_flex .block.animate { transform: scale(.5); opacity: 0; transition: .25s ease-out; } .struttura_text_flex .block.animate.active { transform: scale(1); opacity: 1; } .struttura_text_flex .block .filter { background: linear-gradient(to bottom, rgb(10 10 10 / 0%) 0%, rgb(10 10 10 / 60%) 100%); opacity: 1; } .struttura_text_flex .block .text { bottom: 0; left: 0; padding: 1.5rem; } .struttura_text_flex .block .text p { font-size: 100%; line-height: 1.25; text-shadow: 0 0 .75em rgb(10 10 10 / 50%); } .struttura_text_flex .block .text strong { display: inline-block; font: 400 125% / 1.5 var(--title-font); } .struttura_text_flex .cross_2 { position: relative; width: 5em; margin: 0 auto var(--c12v) 15%; opacity: .5; } .struttura_text_flex .svg_cariola { top: 2.5%; right: 7.5%; width: 4em; } .struttura_text_flex .el_big_num_2 { display: none; } .struttura_text_flex .circle_8 { position: relative; width: 14em; margin: var(--c12v) auto var(--c7v) auto; } .struttura_faq .text + .wrapper { margin-top: var(--c10v); } .struttura_faq .wrapper { max-width: 1024px; } .struttura_faq .accordion .accordion_head { grid-template-columns: calc(3ch + 1.25em) 1fr 2.5em; } .struttura_faq .accordion .accordion_head .ico { width: calc(3ch + 1.25em); min-width: calc(3ch + 1.25em); } .struttura_faq .accordion .accordion_head .ico p { font-weight: 500; font-family: var(--title-font); } .struttura_faq .accordion .accordion_head h3, .struttura_faq .accordion .accordion_head::after { align-self: center; } .struttura_faq :where(.cross_7, .letter_b_alt, .el_big_num_1) { display: none; } .struttura_faq .svg_tab_3 { position: relative; width: 10em; margin: 0 auto var(--c12v) 5%; opacity: .5 } .struttura_faq .svg_tab_3 text { font-size: 150%; } .struttura_faq .svg_plus { top: 5%; right: 5%; width: 3.5em; opacity: .25; } .struttura_faq .el_big_num_2 { transform: translate(5%, 40%); font-size: clamp(120px, 20vw, 420px); color: var(--blue-l); text-align: right; opacity: .25; } /** * * █▀▀ ▄▀▀▄ █▀▀▄ █▄ ▄█ * █▀▀ █ █ █▐█▀ █ █ █ * ▀ ▀▀ ▀ ▀▀ ▀ ▀ - FORM * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /* WP-Form - Custom */ #form { background-color: transparent; padding: 0 .5em; } #form .wpforms-field label:not(.wpforms-field-label-inline), #form .wpforms-field label.wpforms-field-sublabel { display: inline-block; width: fit-content; min-width: unset; padding: .325em .5em; margin: 0 0 -1em .5em; background-color: var(--blue); font: 400 100% / 1 var(--title-font); text-transform: uppercase; color: var(--white); transform-origin: center left; transition: .25s ease; will-change: transform; } #form .wpforms-field label span { color: var(--white); } #form .wpforms-field.focus label:not(.wpforms-field-label-inline), #form .wpforms-field.focus label.wpforms-field-sublabel { background-color: var(--blue-l); transform: scale(.75); } #form .wpforms-field .wpforms-field-row-block { display: flex; flex-direction: column; } #form .wpforms-field .wpforms-field-row-block input { order: 2; } #form .wpforms-field label.wpforms-field-sublabel { position: relative; order: 1; } #form .wpforms-field :where(input, textarea, select) { background-color: transparent; border: 2px solid var(--blue); padding: 1em 1em .5em 1em; font-size: 400 100% / 1.25 var(--title-font); color: var(--blue); } #form .wpforms-field.focus :where(input, textarea, select) { border-color: var(--blue-l); } #form .wpforms-field-file-upload .wpforms-uploader { border: 2px solid var(--blue); background: transparent; } #form .wpforms-field-file-upload .wpforms-uploader svg { fill: var(--blue); } #form .wpforms-field-file-upload .wpforms-uploader span { color: var(--blue); } #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"] { padding: ; border: 2px solid var(--blue); border-radius: 0; } #form .wpforms-field.wpforms-field-checkbox li label { color: var(--blue); } #form .wpforms-field.wpforms-field-checkbox li label a:hover { color: var(--blue-l); } #form button[type=submit], #form input[type=submit] { padding: .75em 1.5em; font: 400 100% / 1.25 var(--title-font); color: var(--white); background-color: var(--blue-l); border: 2px solid var(--blue-l); border-radius: 20em; } #form button[type=submit]:hover, #form input[type=submit]:hover { background-color: var(--white); color: var(--blue-l); } #form input[type=submit]:focus:after, #form button[type=submit]:focus:after, #form .wpforms-page-button:focus:after, #form input[type=submit]:focus:after, #form button[type=submit]:focus:after, #form .wpforms-page-button:focus:after { display: none; } /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - EXTRA * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE GRAZIE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_grazie .container, #s1_404 .container { padding-top: calc(3.5em + var(--c15v)); } #s1_grazie :where(.circle_15, .svg_tab_1, .el_big_num), #s1_404 :where(.circle_15, .svg_tab_1, .el_big_num) { display: none; } #s1_grazie .letter_a_alt, #s1_404 .letter_a_alt { top: calc(3.5em + 5%); right: 5%; width: 3.5em; } #s1_grazie .letter_a_alt :where(polygon, path, text), #s1_404 .letter_a_alt :where(polygon, path, text) { fill: var(--blue-l); } #s1_grazie .letter_a_alt text, #s1_404 .letter_a_alt text { display: none; } #s1_grazie .svg_plus, #s1_404 .svg_plus { top: calc(3.5em + 2.5%); left: 10%; width: 3.5em; opacity: .25; } #s1_grazie .cross_1, #s1_404 .cross_1 { bottom: 2.5%; left: 10%; width: 5rem; } #s1_grazie .s1_title h1 strong, #s1_404 .s1_title h1 strong { font-size: calc(var(--h1-size) * 1.25); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE 404 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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 * * __________________________________________________________________________________________________________________________________________________________________________ */ /** * * █▄ ▄█ ▄▀▀▄ █▀▀▄ ▀ █ █▀▀ * █ █ █ █ █ █▀▀█ █ █ ▄ █▀▀ * ▀ ▀ ▀▀ ▀▀▀ ▀ ▀▀▀▀ ▀▀▀ - MOBILE PORT | 601 -> 767 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 601px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ .head_wrapper { z-index: 2; } /* Hamburger */ /* Nav Menu */ #main_nav .menu_wrapper { align-items: center; padding: calc(3.5rem + var(--c10v)) calc(var(--c5o) + .5em) var(--c12v) calc(var(--c5o) + .5em); } #main_nav .menu li a { padding: .325em 0; font-size: 150%; } /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Links */ .link.flex .ico, .link_btn { width: 3.5em; height: 3.5em; min-width: 3.5em; padding: .75em; } .link.flex::before { width: 3.5em; height: 3.5em; } .link.flex::after { width: 3.5em; height: 3.5em; background-size: 2em; } .link.flex:hover span:not(.ico), .link.flex:focus span:not(.ico), .link.flex:active span:not(.ico) { transform: translateX(-3.5em); } /* Vars */ /* Scroll */ /* Swiper Nav */ /* Components */ /* Fixed Chat */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Structure */ .foot_block { text-align: left; } .foot_block.w50s { width: calc(50% - var(--c2o)); } .foot_block:not(#foot_company) :where(nav, h5, p) { padding-left: 2.625rem; } #foot_company .flex-t { width: fit-content; margin-right: auto; margin-left: auto; padding-left: 2.625rem; } #foot_menu nav ul { column-count: 2; column-gap: 4.25rem; } #foot_info :where(a, span) { margin: 0; } #foot_contatti .w50s { width: calc(50% - (var(--c3o) / 2)); } /* Credits */ /* Back Top */ /* Frame */ /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ /* Section 1 - Page */ /* Section 1 - Single */ /* Section Motivi */ /* Section Settori */ /* Section Parco Macchine */ /* Section FAQ */ /* Section Form */ /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ .card span.card_num { font-size: 250%; } .card .text h3 { font-size: 200%; } /* Card Page */ .card.card_page .text h3 { font-size: 200%; } .card.card_page .text p { font-size: 125%; } /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ #s2_home picture { width: 50%; min-width: 50%; } /* Sec 3 */ /* Sec 4 */ #s4_home .sec_img picture { width: 75%; margin: -10% auto 0 auto; } /* Sec 5 */ /* Sec 6 */ #s6_home .card a { padding: 2em 1em; } #s6_home .card h3 { font-size: 150%; } /* Sec 9 */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template Azienda */ #s3_azienda .grid { grid-template-columns: 1fr 1fr; } #s3_azienda .card p.num { font-size: 300%; } #s3_azienda .card p { font-size: 125%; } #s6_azienda .sec_img picture { width: 75%; margin: 0 auto; } /* Template Servizi */ #s2_servizi .container { padding-right: 0; } #s2_servizi .container > .text { padding-right: var(--c5o); } #s2_servizi .wrapper { flex-wrap: nowrap; flex-direction: row-reverse; } #s2_servizi .swiper { padding-right: var(--c5o); } #s2_servizi .swiper-slide a, .sec_slider_sub .swiper-slide a { transform: scale(.875); transition: all .25s ease, transform .5s ease; will-change: transform; } #s2_servizi .swiper-slide.swiper-slide-active a, .sec_slider_sub .swiper-slide.swiper-slide-active a { transform: scale(1); } #s2_servizi .swiper-slide a .text, .sec_slider_sub .swiper-slide a .text { transform: translateY(5.25em); transition: .25s ease; will-change: transform; } #s2_servizi .swiper-slide.swiper-slide-active a .text, .sec_slider_sub .swiper-slide.swiper-slide-active a .text { transform: translateY(0); } #s2_servizi .swiper-slide a .text .link, .sec_slider_sub .swiper-slide a .text .link, .sec_slider_sub .swiper-slide a .text > div img { transform: scale(0); opacity: 0 } #s2_servizi .swiper-slide.swiper-slide-active a .text .link, .sec_slider_sub .swiper-slide.swiper-slide-active a .text .link, .sec_slider_sub .swiper-slide.swiper-slide-active a .text > div img { transform: scale(1); opacity: 1; } #s2_servizi .nav_wrapper { width: auto; gap: 1em; margin: 0; padding-right: 1.5em; flex-direction: column; } /* Template Lavorazioni */ .card_lavorazione picture { width: 50%; } .card_lavorazione .btn .ico svg { width: 4em; height: 4em; padding: .75em; } .card_lavorazione .btn .text h3 { font-size: 1rem; } .card_lavorazione .btn .text h3 span { font-size: 200%; } #s5_lavorazioni .card { grid-template-columns: 1.75fr 1fr; } #s5_lavorazioni .card .text { border-bottom: 0; } #s5_lavorazioni .card picture { height: 100%; } /* Template Settori */ .sec_slider_sub .swiper { padding: 0 var(--c10o); } /* Template Parco Macchine */ #s3_parco .card .sec_img > picture { aspect-ratio: 4 / 3; } /* Template Qualità */ /* Template Process Produttivi */ /* Template Lavora con noi */ /* Template Contatti */ #s2_contatti .sec_title + .grid { grid-template-columns: 1fr 1fr; } .card_contact { height: 100%; } #s2_contatti .map_block { grid-column: 2 span; } #s2_contatti .map_block iframe { aspect-ratio: 1 / 1; } /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ /* Single Servizi */ /* Single Lavorazioni */ /* Single Settori */ #s4_single_settori .card .card_img > picture { aspect-ratio: 4 / 3; } #s4_single_settori .card .card_img .text h4 { font-size: 150%; } /* Single Qualità - Quality Flow */ /* Single Qualità - Sostenibilità */ .sec_sostenibilita .text h2 { font-size: var(--h2-size); } /* Single Qualità - Certificazioni */ /* Single Processi */ /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ } /** * * ▀▀█▀▀ ▄▀▀▄ █▀▀▄ █ █▀▀ ▀▀█▀▀ * █ █▀▀█ █▀▀█ █ ▄ █▀▀ █ * ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀ - TABLET | 768 x 1024 -> 1023 x 1280 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 768px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ /* Nav Menu */ #main_nav .menu li a { font-size: 175%; } #main_nav .menu_wrapper .el_circle { bottom: 75%; } #main_nav .menu_wrapper .cross_1 { bottom: 15%; right: 7.5%; opacity: .25; } #main_nav .menu_wrapper .el_num_triangle { bottom: 80%; left: 10%; } /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Links */ .link.flex .ico, .link_btn { width: 3em; height: 3em; min-width: 3em; } .link.flex::before { width: 3em; height: 3em; } .link.flex::after { width: 3em; height: 3em; background-size: 1.5em; } .link.flex:hover span:not(.ico), .link.flex:focus span:not(.ico), .link.flex:active span:not(.ico) { transform: translateX(-3em); } /* Vars */ /* Scroll */ /* Swiper Nav */ /* Components */ /* Fixed Chat */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ footer { padding-bottom: .5rem; } footer .svg_plus { position: absolute; top: 15%; left: 60%; margin: 0%; } footer .el_num_triangle { position: absolute; top: 10%; right: 10%; align-self: unset; padding-right: 0; opacity: .25; } footer .cross_7 { position: absolute; bottom: 25%; right: 5%; margin: 0; opacity: .25; } /* Structure */ .foot_block { text-align: left; } .foot_logo { margin: 0; } #foot_company .flex-t { margin-left: 0; } #foot_info :where(a, span) { margin: 0; } /* Credits */ #credits br { display: none; } #credits .resp_sep { display: inline-block; } /* Back Top */ /* Frame */ /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ /* Section 1 - Page */ .s1 .gallery_x3 .img_1 { width: 50%; margin: 0 calc(0% - 1px); transform: translate(calc(-100% - var(--c7o)), 10%) rotate(0deg) scale(.5); } .s1 .gallery_x3 .img_2 { width: 50%; margin: 0 calc(0% - 1px); transform: translate(calc(100% + var(--c7o)), 0%) rotate(0deg) scale(.5); } .s1 .gallery_x3 .img_3 { width: 55%; transform: translate(-50%, 60%) rotate(0deg) scale(.5); } .s1 .gallery_x3.active .img_1 { transform: translate(0%, 10%) rotate(2.5deg) scale(1); } .s1 .gallery_x3.active .img_2 { transform: translate(-5%, 0%) rotate(12.5deg) scale(1); } .s1 .gallery_x3.active .img_3 { transform: translate(-50%, -10%) rotate(-3.75deg) scale(1); } .s1_page + section .container { padding-top: calc(var(--c12v) + 60vw); } /* Section 1 - Single */ .s1 .gallery_x5 .img_1 { width: 40%; transform: rotate(0deg) scale(0); z-index: 1; } .s1 .gallery_x5 .img_2 { width: 27.5%; left: -1.25%; transform: translate(100%, -25%) rotate(0deg) scale(1); } .s1 .gallery_x5 .img_3 { width: 25%; bottom: 40%; transform: translate(-125%, 10%) rotate(0deg) scale(0); } .s1 .gallery_x5 .img_4 { width: 25%; bottom: 47.5%; transform: translate(125%, 20%) rotate(0deg) scale(0); } .s1 .gallery_x5 .img_5 { display: block; z-index: 2; width: 30%; bottom: 0; right: 0; transform: translate(-100%, -25%) rotate(0deg) scale(0); } .s1 .gallery_x5.active .img_1 { transform: rotate(2.5deg) scale(1); } .s1 .gallery_x5.active .img_2 { transform: translate(0%, 10%) rotate(-5deg); } .s1 .gallery_x5.active .img_3 { transform: translate(5%, -25%) rotate(10deg); } .s1 .gallery_x5.active .img_4 { transform: translate(2.5%, -10%) rotate(-2.5deg); } .s1 .gallery_x5.active .img_5 { transform: translate(5%, 15%) rotate(2.5deg); } .s1_single + section .container { padding-top: var(--c12v); } /* Section Motivi */ /* Section Settori */ /* Section Parco Macchine */ .scroll_fill p { line-height: 1.5; } #sec_parco .cross_8 { position: absolute; bottom: 7.5%; left: 7.5%; margin: 0; opacity: .25; } /* Section FAQ */ .sec_faq .svg_tab_3 { position: absolute; top: 7.5%; left: 7.5%; margin: 0; } .sec_faq .el_big_num_2 { position: absolute; bottom: 0; right: 0; transform: translate(5%, 40%); margin: 0; text-align: right; } /* Section Form */ /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ /* Card Page */ /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ #s1_home { margin-bottom: -.25em; } /* Sec 2 */ #s2_home picture { width: 35%; min-width: 35%; } #s2_home picture.img_3 { display: block; transform: translate(-5%, -5%) rotate(0deg) scale(0); } #s2_home .active picture.img_3 { display: block; transform: translate(-5%, -5%) rotate(-2.5deg) scale(1); } /* Sec 3 */ /* Sec 4 */ #s4_home .sec_img picture, #s6_azienda .sec_img picture, #s6_lavorazioni .sec_img picture { width: 60%; } /* Sec 5 */ #s5_home .wrapper { margin: 0 auto; } #s5_home .el_big_num { width: auto; } /* Sec 6 */ #s6_home .card a { padding: 2.5em 1em; } /* Sec 9 */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template Azienda */ #s2_azienda .circle_6 { top: 30%; right: 20%; } #s2_azienda .svg_plus { top: 50%; } #s6_azienda .svg_plus { position: absolute; top: 50%; right: 10%; margin: 0; opacity: .5; } /* Template Servizi */ #s2_servizi .container { padding-top: calc(var(--c12v) + 10vw); } #s2_servizi .swiper { width: 125vw; margin-right: -25vw; padding-right: 1.25em; } #s2_servizi .svg_plus { position: absolute; bottom: 50%; margin: 0; } /* Template Lavorazioni */ #s2_lavorazioni .letter_a_alt { position: absolute; top: 25%; right: 10%; margin: 0; } .card_lavorazione .btn { margin-left: -2.75em; } .card_lavorazione.card_2 .btn { margin: 0 -2.75em 0 0; } .card_lavorazione .btn .ico { padding: .325em; } .card_lavorazione .btn .ico svg { width: 5em; height: 5em; } #s3_lavorazioni .cross_2 { position: absolute; top: 60%; left: 10%; margin: 0; } #s3_lavorazioni .el_big_num_1 { top: 20%; } #s3_lavorazioni .el_big_num_1 .svg_tri { transform: translate(-0.5em, 0.25rem); } #s5_lavorazioni .card { grid-template-columns: 1fr 1fr; } #s8_lavorazioni .el_big_num_1 { top: 2.5%; bottom: auto; } #s8_lavorazioni .cross_9 { position: absolute; top: 5%; left: 5%; margin: 0; opacity: .5; } #s8_lavorazioni .container > .text { max-width: 1024px; margin-bottom: var(--c10v); } /* Template Settori */ .sec_slider_sub .swiper { padding: 0 1.25em; } /* Template Parco Macchine */ #s3_parco .card { grid-template-columns: 1fr 1.5fr; } #s3_parco .card .sec_img > picture, #s3_quality .card .img_block > picture { aspect-ratio: 3 / 5; } #s3_parco .card .sec_img h3, #s3_quality .card .img_block h3.card_title { font-size: calc(var(--h3-size) * .625); } /* Template Qualità */ #s3_quality .card { grid-template-columns: 1.25fr 1fr; z-index: 1; } #s3_quality .card .text, #s3_quality .card .img_block h3.card_title { padding: 2rem 1.5rem; } #s3_quality .card .text { order: 1; } #s3_quality .card .img_block { order: 2; } /* Template Process Produttivi */ /* Template Lavora con noi */s /* Template Contatti */ /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ /* Single Servizi */ .s2_single .svg_plus { position: absolute; bottom: 35%; margin: 0; } .s2_single .letter_c_alt { position: absolute; top: 5%; left: 2.5%; margin: 0; opacity: .25; } .s2_single .cross_1 { position: absolute; top: 2.5%; right: 20%; margin: 0; opacity: .25; } .s2_single .el_big_num { position: absolute; top: 5%; left: 15%; transform: none; opacity: .25; } .s2_single .el_big_num .svg_tri { transform: translate(-0.5em, -0.5em) rotate(180deg); } .s2_single .circle_6 { position: absolute; bottom: 40%; right: 5%; margin: 0; opacity: .25; } #s3_single_service .sec_img + .sec_title { max-width: 45ch; margin: var(--c12v) auto 0 auto; } #s3_single_service .cards_wrapper { margin-top: 1.5rem; } #s3_single_service .cards_wrapper .text { padding: 5em 6em 2em 1.9em; } #s3_single_service .cross_2 { position: absolute; top: 45%; left: 5%; margin: 0; } #s3_single_service .el_big_num { position: absolute; margin: 0; transform: translate(5%, 150%); } #s4_single_service .text { align-items: flex-end; } #s4_single_service .text + .text { align-items: flex-start; margin-top: 3em; } #s4_single_service .svg_plus { position: absolute; top: 2.5%; left: 2.5%; margin: 0; } #s4_single_service .el_big_num_2 { text-align: right; } /* Single Lavorazioni */ #s3_single_lavorazioni picture.w75 { width: 55%; margin-right: -10%; margin-top: -17.5%; } #s3_single_lavorazioni picture.w65 { width: 55%; margin: -80% 0 0 auto; } #s3_single_lavorazioni .svg_plus { top: 2.5%; opacity: .5; } #s3_single_lavorazioni .svg_cariola { top: 30%; left: 25%; } #s3_single_lavorazioni .cross_2 { position: absolute; top: 75%; right: 10%; margin: 0; opacity: .25; } #s3_single_lavorazioni .letter_a_alt { bottom: 17.5%; } #s3_single_lavorazioni .el_big_num_2 { margin: var(--c5v) calc(var(--c5o) * -1) -20% 0; transform: translateX(15%); } /* Single Settori */ #s1_single_settori .gallery_x5 picture, #s1_single_quality_flow .gallery_x5 picture, #s1_single_processi .gallery_x5 picture { aspect-ratio: 9 / 16; } #s3_single_settori picture.w75, #s3_single_quality_cert picture.w75, .struttura_text_img .img_1 { width: 55%; margin: -20% -10% 25% 0; } #s3_single_settori picture.w60, #s3_single_quality_cert picture.w60, .struttura_text_img .img_2 { width: 55%; margin: 0; transform: translate(0%, 0%) rotate(5deg) scale(0); } #s4_single_settori .card .card_img > picture { aspect-ratio: 16 / 9; } #s4_single_settori .card .card_img .text h4 { font-size: 175%; } /* Single Qualità - Quality Flow */ /* Single Qualità - Sostenibilità */ /* Single Qualità - Certificazioni */ #s3_single_quality_cert + #s4_single_quality_cert { margin-top: -1px; } #s4_single_quality_cert .card p { font-size: 175%; line-height: 1.25; } /* Single Processi */ .struttura_text_img .img_2 { margin: -95% 0 0 -15%; } /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀▀█▀▀ ▄▀▀▄ █▀▀▄ ▄▀▀ █▄ ▄█ ▄▀▀▄ █ █ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ ▀▄ █ █ █ █▀▀█ █ ▄ █ ▄ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ ▀▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀ - LAPTOP | 1024 x 768 -> 1280 x 720 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1024px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ .head_block { display: block; border-left: 1px solid var(--blue); } .head_block .head_link { gap: .5em; padding: 1rem; font: 500 100% / 1 var(--title-font); color: var(--blue); text-transform: uppercase; } .head_block .head_link span { color: var(--blue-l); } .head_block .head_link:hover { background-color: rgb(var(--white-rgb) / 12.5%); } .head_block .head_link.active { background-color: var(--blue-l); color: var(--white); } .head_block .head_link.active span { color: var(--white); } .dashboard .wpml-ls-legacy-dropdown-click a { padding-top: 1rem; padding-bottom: 1rem; font-size: 1rem; } .dashboard .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle { padding-right: calc(.5rem + 2ch); } /* Sub Menu */ .sub_menu { top: 100%; left: -1px; width: max-content; min-width: fit-content; padding: .75em 0; border: 1px solid var(--blue); background-color: var(--white); } .sub_menu a { padding: .5em 1.5em; font: 300 1rem / 1.25 var(--title-font); color: var(--blue); } .sub_menu a:hover { background-color: rgb(var(--blue-l-rgb) / 25%); text-decoration: underline; } /* Hamburger */ #hamburger:hover { background-color: var(--blue); } /* Nav Menu */ #main_nav .menu_wrapper { justify-content: flex-start; } #main_nav .menu-menu-container { width: fit-content; text-align: left; } #main_nav .menu li a { display: flex; align-items: center; justify-content: flex-start; gap: .25em; padding: .125em 0; font-size: clamp(1.75em, 1.75vw, 3em); transform: translateX(calc((.5em + .5ch) * -1)); transform-origin: left; } #main_nav .menu li a::before { display: inline-block; content: '01'; width: 2ch; min-width: fit-content; font-size: 50%; margin-bottom: .75em; transform: translateX(.5em); opacity: 0; transform-origin: right; transition: .25s ease; } #main_nav .menu li:nth-child(2) a::before { content: '02'; } #main_nav .menu li:nth-child(3) a::before { content: '03'; } #main_nav .menu li:nth-child(4) a::before { content: '04'; } #main_nav .menu li:nth-child(5) a::before { content: '05'; } #main_nav .menu li:nth-child(6) a::before { content: '06'; } #main_nav .menu li:nth-child(7) a::before { content: '07'; } #main_nav .menu li:nth-child(8) a::before { content: '08'; } #main_nav .menu li:nth-child(9) a::before { content: '09'; } #main_nav .menu li:nth-child(10) a::before { content: '10'; } #main_nav .menu li:nth-child(11) a::before { content: '11'; } #main_nav .menu li:nth-child(12) a::before { content: '12'; } #main_nav .menu li a::after { display: inline-block; content: ''; width: .75em; height: .75em; border-radius: 20em; background: url(../images/svg/next.svg) no-repeat center / 50%; background-color: var(--white); transform: translateX(-.25em) scale(.75); opacity: 0; transform-origin: left; transition: .25s ease; } #main_nav .menu li a:hover { transform: translateX(0); color: var(--blue-l); } #main_nav .menu li a:hover::before { transform: translateX(0); opacity: 1; } #main_nav .menu li a:hover::after { transform: translateX(0) scale(1); opacity: 1; } #main_nav .menu_wrapper .el_circle { bottom: 65%; right: 20%; width: .75rem; height: .75rem; opacity: 1; } #main_nav .menu_wrapper .circle_1 { display: block; bottom: 30%; right: 15%; width: 15%; } #main_nav .menu_wrapper .svg_plus { display: block; bottom: 22.5%; right: 17.5%; transform: translate(0%, 0%); width: 2em; } #main_nav .menu_wrapper .circle_1 :where(path, polygon, rect, text), #main_nav .menu_wrapper .svg_plus :where(path, polygon, rect, text) { fill: var(--white); } #main_nav .menu_wrapper .cross_1 { bottom: 52.5%; right: 27.5%; opacity: 1; width: 3.5em; } #main_nav .menu_wrapper .el_num_triangle { bottom: 80%; left: 65%; opacity: 1; } #main_nav .menu_wrapper .el_big_num { transform: translate(calc(-7.5% + .5rem), calc(17.5% + .5rem)); font-size: 15vw; text-align: right; } /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Links */ .link.flex .ico, .link_btn { width: 2.75em; height: 2.75em; min-width: 2.75em; padding: .675em; } .link.flex::before { width: 2.75em; height: 2.75em; } .link.flex::after { width: 2.75em; height: 2.75em; background-size: 1.25em; } .link.flex:hover span:not(.ico), .link.flex:focus span:not(.ico), .link.flex:active span:not(.ico) { transform: translateX(-2.75em); } .link_btn:hover { background-color: var(--white); } .link_btn:hover svg path { fill: var(--blue-l); } /* Vars */ /* Scroll */ /* Swiper Nav */ .nav_btn { width: 2.5em; } .nav_btn:hover { background-color: var(--blue); } .nav_btn:hover svg path { fill: var(--white); } /* Components */ .text .link { margin-top: 2.5em; } .text.tac_mobile .link { margin-left: 0; } /* Fixed Chat */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Structure */ .foot_block:not(#foot_company, #foot_contatti) { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .foot_block.w50s { width: calc((100% - (var(--c3o) * 2)) / 3); } .foot_block h4 { font-size: 100%; } .foot_block h4::before { width: .75em; height: .75em; margin: 0 .5em 0 0; } .foot_block:not(#foot_company) :where(nav, h5, p) { padding-left: 0; } .foot_block:not(#foot_contatti) :where(nav, h5, p) { padding-left: 1.375rem; } .foot_block p { font-size: 75%; } .foot_block p a:hover, .foot_block li a:hover { color: var(--blue-l); text-decoration: underline; } #foot_company .flex-t { width: 100%; justify-content: flex-start; gap: 1.375rem; padding-left: 1.375rem; } #foot_company .flex-t p { width: calc(50% - (1.375rem / 2)); padding: 0; margin: 0; } #foot_menu { padding-top: 2.25em; } #foot_menu nav { padding-left: 1.25rem; font-size: 75%; } #foot_menu nav ul { column-count: 2; column-gap: 1.375rem; } #foot_info p, #foot_contatti .block { width: 100%; } #foot_contatti .block { padding-left: 1.375em; } #foot_contatti { } #foot_contatti > div { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0 var(--c3o); } #foot_contatti > div h4 { display: block; } footer .svg_plus { top: auto; bottom: 5%; left: 10%; width: 2em; opacity: 1; } footer .el_num_triangle { top: 5%; right: 10%; } footer .circle_13 { display: block; bottom: -2.5%; left: 30%; width: 10%; opacity: .125; } footer .cross_7 { position: absolute; bottom: 15%; left: 55%; width: 3.5em; margin: 0; } /* Credits */ #credits { display: none; } .credits a:hover, .credits a:active, .credits a:focus { opacity: 1; color: var(--blue-l); text-decoration: underline; } .credits #credits_studio:hover { color: #e74e0f; } /* Back Top */ #back_top { opacity: 1; } /* Frame */ /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ .s1_title h1 { font-size: calc(var(--h1-size) * .75); } /* Section 1 - Page */ .s1_page .container { padding-top: calc(var(--c10v) + 3.5em); padding-bottom: var(--c12v); } .s1_page .text, .s1_page .s1_gallery { z-index: 2; } .s1_page .s1_title { transform: scale(1); opacity: 1; } .s1_page .s1_title :where(h1, p) { transform: translateX(calc(-100% - var(--c5o))); opacity: 0; transition: .325s ease-out; } .s1_page .s1_title p { transition-delay: .125s; } .s1_page .s1_title.active :where(h1, p) { transform: translateX(0); opacity: 1; } .s1 .gallery_x3 { align-self: flex-start; } .s1 .gallery_x3 .img_1 { width: 60%; margin: 0 -10% 0 0; transform: translate(25%, 25%) rotate(0deg) scale(.5); } .s1 .gallery_x3 .img_2 { width: 60%; margin: 0 0 0 calc(-10% - 1px); transform: translate(-25%, 25%) rotate(0deg) scale(.5); } .s1 .gallery_x3 .img_3 { width: 70%; transform: translate(-50%, -25%) rotate(0deg) scale(.5); } .s1 .gallery_x3.active .img_1 { transform: translate(-25%, 5%) rotate(3.75deg) scale(1); } .s1 .gallery_x3.active .img_2 { transform: translate(-10%, -5%) rotate(12.5deg) scale(1); } .s1 .gallery_x3.active .img_3 { transform: translate(-60%, 30%) rotate(-3.75deg) scale(1); } .s1_page + section .container { padding-top: var(--c12v); } .s1_page .el_circle { top: 70%; left: 40%; } .s1_page :where(.circle_6, .circle_8, .circle_13, .circle_14, .circle_15, .svg_plus, .svg_tab_1, .letter_a_alt, .el_big_num_2 ) { display: block; } .s1_page .circle_6 { bottom: 25%; left: 15%; width: 12.5%; } .s1_page .circle_13 { bottom: 5vh; left: 45%; width: 8em; } .s1_page .circle_8 { bottom: var(--c2o); left: 30%; width: 15%; } .s1_page .circle_15 { bottom: 22.5%; left: 12.5%; width: 20%; } .s1_page .cross_1 { position: absolute; bottom: 15%; right: 5%; width: 3.5rem; margin: 0; z-index: 3; } .s1_page .svg_plus { top: var(--c15v); right: 2.5%; transform: none; width: 2em; } .s1_page .letter_a_alt { bottom: 5%; left: 25%; width: 3em; } .s1_page .letter_a_alt :where(polygon, rect, path, text) { fill: var(--blue-l); } .s1_page .letter_a_alt text { display: none; } .s1_page .el_big_num_1 { top: 12.5%; right: 27.5%; font-size: 125%; } .s1_page .el_big_num_2 { top: auto; bottom: 7.5vh; left: 0; transform: translateX(-5%); width: fit-content; font-size: 10vw; } .s1_page .svg_tab_1 { bottom: 15%; right: 50%; width: 8em; } /* Section 1 - Single */ .s1_single .container { padding-top: calc(var(--c12v) + 3.5em); } .s1 .gallery_x5 picture { aspect-ratio: 9 / 16; } .s1 .gallery_x5 .img_1 { width: 20%; margin-left: 50%; transform: translate(-50%, 0%) rotate(0deg) scale(0); } .s1 .gallery_x5 .img_2 { width: 15%; left: 50%; transform: translate(-25%, -25%) rotate(0deg) scale(0); } .s1 .gallery_x5 .img_3 { width: 17.5%; bottom: 0; right: auto; left: 10%; transform: translate(100%, 0%) rotate(0deg) scale(0); } .s1 .gallery_x5 .img_4 { width: 15%; bottom: auto; top: 0; transform: translate(100%, -0%) rotate(0deg) scale(0); } .s1 .gallery_x5 .img_5 { width: 15%; bottom: auto; top: 0; right: 0; transform: translate(-100%, 0%) rotate(0deg) scale(0); } .s1 .gallery_x5.active .img_1 { transform: translate(0%, 50%) rotate(3.25deg) scale(1); } .s1 .gallery_x5.active .img_2 { transform: translate(-75%, -5%) rotate(-5deg) scale(1); } .s1 .gallery_x5.active .img_3 { transform: translate(0%, 30%) rotate(5deg) scale(1); } .s1 .gallery_x5.active .img_4 { transform: translate(35%, -100%) rotate(-7.5deg) scale(1); } .s1 .gallery_x5.active .img_5 { transform: translate(0%, -60%) rotate(12.5deg) scale(1); } .s1_single :where(.svg_plus, .circle_2, .circle_7, .cross_6, .letter_a_alt, .letter_c_alt, .el_big_num_2) { display: block; } .s1_single .el_circle { top: 40%; right: 67.5%; background-color: var(--blue-l); } .s1_single .svg_plus { top: auto; bottom: 5%; left: 37.5%; width: 2em; } .s1_single .circle_2 { top: 55%; left: 60%; width: 4em; z-index: 1; } .s1_single .circle_7 { top: 35%; left: 35%; width: 17.5%; z-index: 1; } .s1_single .cross_6 { top: 50%; right: 25%; width: 2em; } .s1_single .letter_a_alt, .s1_single .letter_c_alt { top: 50%; right: 3.25%; width: 3.5em; } .s1_single .letter_a_alt :where(polygon, rect, path, text), .s1_single .letter_c_alt :where(polygon, rect, path, text) { fill: var(--blue-l); } .s1_single .letter_a_alt text, .s1_single .letter_c_alt text { display: none; } .s1_single .el_big_num_1 { bottom: auto; top: 65%; right: 5%; font-size: 200%; } .s1_single .el_big_num_2 { bottom: auto; top: 50%; right: auto; left: 0; font-size: 10vw; opacity: .25; } /* Section Motivi */ #sec_motivi .container > .text h2 { padding-left: 6.25%; } #sec_motivi .container > .text div div { max-width: 50%; padding-left: 12.5%; } #sec_motivi .container > .text .link { display: flex; margin: 0 auto; } #sec_motivi .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } #sec_motivi .card.animate:not(.desktop) { transform: scale(1); opacity: 1; } #sec_motivi .card.animate:not(.desktop) :where(.text, .card_num) { transform: scale(.75); opacity: 0; transition: .25s ease-out; } #sec_motivi .card.animate.active:not(.desktop) :where(.text, .card_num) { transform: scale(1); opacity: 1; } #sec_motivi .el_circle { top: 22.5%; left: 65%; } #sec_motivi .circle_6 { display: block; top: 45%; right: 10%; width: 10%; } #sec_motivi .circle_6 text { font-size: 75%; } #sec_motivi .cross_7 { position: absolute; top: 15%; right: 7.5%; width: 3.5em; margin: 0; } #sec_motivi .letter_b_alt { top: 22.5%; right: auto; left: 7.5%; width: 3rem; } #sec_motivi .letter_b_alt text { display: block; font-size: 125%; text-align: left; } #sec_motivi .link.mobile { display: none; } /* Section Settori */ #sec_settori .card_processi { display: grid; grid-template-columns: 6em 1fr; border: 0; } #sec_settori .card_processi picture.desktop { height: 3em; min-height: 100%; aspect-ratio: unset; transform: translateX(100%); transition: .25s ease .125s; } #sec_settori .card_processi.open picture.desktop { transform: translateX(0); } #sec_settori .card_processi .text { background-color: var(--white); border: 2px solid var(--blue); } #sec_settori .card_processi .text .desc { padding-left: 2.5em; } #sec_settori .el_circle { top: 35%; right: auto; left: 45%; transform: translate(50%, -50%); } #sec_settori .svg_tri { position: absolute; top: 25%; left: 3.75%; margin: 0; } #sec_settori .circle_7 { display: block; bottom: var(--c15v); left: 2.5%; width: 20%; } #sec_settori .cross_8 { display: block; bottom: var(--c10v); left: 25%; width: 4em; } #sec_settori .el_big_num { position: absolute; bottom: 27.5%; right: 50%; width: fit-content; font-size: 5vw; transform: none; } #sec_settori .el_num_triangle { position: absolute; bottom: auto; top: 10%; right: var(--c5o); left: auto; width: fit-content; margin-top: 0; padding-left: 0; font-size: 125%; } #sec_settori .link.desktop { display: flex; } #sec_settori .link.mobile { display: none; } /* Section Parco Macchine */ #sec_parco .text { align-self: flex-start; } #sec_parco .text .link.desktop { display: flex; } #sec_parco .text .link.mobile { display: none; } .scroll_fill p { font-size: 162.5%; line-height: 1.25; } #sec_parco .letter_a { position: absolute; top: 17.5%; left: 50%; width: 3.5rem; margin: 0; opacity: .25; } #sec_parco .el_big_num_1 { top: 6.25%; right: 5%; font-size: 100%; color: var(--blue-l); } #sec_parco .el_big_num_1 .svg_tri { transform: translate(-0.5rem, 2.5rem) rotate(180deg); } #sec_parco .circle_10 { display: block; bottom: 10%; left: 50%; transform: translateX(-100%); width: 10%; } #sec_parco .cross_8 { bottom: 7.5%; left: 32.5%; width: 3.5em; opacity: 1; } #sec_parco .link.mobile { display: none; } /* Section FAQ */ .sec_faq { margin-bottom: 0; } .sec_faq :where(.sec_title, .wrapper) { z-index: 2; } .accordion.animate { transform: translateY(50%); } .accordion.animate.active { transform: translateY(0%); } .sec_faq .svg_tab_3, .struttura_faq .svg_tab_3 { position: absolute; top: var(--c10v); left: var(--c5o); margin: 0; opacity: 1; } .sec_faq .svg_plus, .struttura_faq .svg_plus { display: block; top: var(--c7v); right: 15%; width: 2em; } .sec_faq .el_big_num_1, .struttura_faq .el_big_num_1 { display: flex; align-items: center; justify-content: center; bottom: auto; top: var(--c15v); right: var(--c2o); font-size: 125%; text-align: center; opacity: 1; } .sec_faq .el_big_num_1 .svg_tri, .struttura_faq .el_big_num_1 .svg_tri { position: relative; width: .75em; transform: translate(0, .5em) rotate(180deg); } .sec_faq .letter_b_alt, .struttura_faq .letter_b_alt { display: block; bottom: 35%; right: var(--c2o); width: 2.5em; opacity: .25; } .sec_faq .letter_b_alt :where(path, rect, polygon, text), .struttura_faq .letter_b_alt :where(path, rect, polygon, text) { fill: var(--blue-l); } .sec_faq .letter_b_alt text, .struttura_faq .letter_b_alt text { display: none; } .sec_faq .cross_7, .struttura_faq .cross_7 { display: block; bottom: var(--c10v); left: var(--c3o); width: 3.5em; } .sec_faq .el_big_num_2, .struttura_faq .el_big_num_2 { position: absolute; bottom: 0; right: 0; transform: translate(5%, 40%); margin: 0; text-align: right; } /* Section Form */ #sec_form #form { padding: 0; } #sec_form .text.desktop { margin-top: var(--c10v); text-align: right; } #sec_form .text.w75l > h2 { padding-left: var(--c2o); } #sec_form .el_circle { position: absolute; top: 15%; left: 72.5%; margin: 0; } #sec_form .svg_tri { top: 15%; } #sec_form .circle_1 { position: absolute; bottom: var(--c15v); right: var(--c3o); width: 7.5em; margin: 0; opacity: 1; } #sec_form .cross_8 { display: block; bottom: calc(var(--c15v) + 7.5em); right: calc(var(--c3o) + 7.5em); transform: translate(25%, 25%); width: 3.5em; } #sec_form .el_num_triangle { display: block; bottom: var(--c10v); right: 20%; color: var(--blue-l); } #sec_form .el_num_triangle span::before { top: 100%; left: 0; transform: translate(calc(-100% - 1em), -50%); border-top-color: var(--blue-l); } .sec_faq + #sec_form, #s6_azienda + #sec_form, #s4_single_service + #sec_form, #s4_single_settori + #sec_form, #s8_lavorazioni + #sec_form, #s3_settori + #sec_form, #s3_single_lavorazioni + #sec_form, #s3_parco + #sec_form, #s3_quality + #sec_form, #s3_single_quality_flow + #sec_form, #s4_single_quality_cert + #sec_form, .sec_sostenibilita + #sec_form, .struttura_faq + #sec_form, #s3_contatti + #sec_form, #s3_lavora + #sec_form { margin-top: 5vw; } /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ .card span.card_num { font-size: 200%; } .card:hover .text .link_btn { background-color: var(--white); } .card:hover .text .link_btn svg path { fill: var(--blue-l); } /* Card Page */ /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ #s1_home .container { position: relative; top: auto; left: auto; transform: none; padding-bottom: var(--c15v); } #s1_home :where(h1, p) { color: var(--blue); } #s1_home h1 { margin-top: -2.7em; } #s1_home h1 strong { color: var(--white); } #s1_home p br { display: none; } #s1_home > .line { opacity: 1; } #s1_home > .el_circle { top: 50dvh; opacity: 1; } #s1_home > .circle_1 { bottom: auto; top: 50dvh; left: 50%; transform: translate(-100%, -100%) scale(0); width: 15%; opacity: 1; transition: .25s ease .325s; } #s1_home > .circle_2 { display: block; top: 50dvh; left: 50%; transform: translate(0%, -100%) scale(0); width: 7.5%; transition: .25s ease .325s; } #s1_home > .circle_2 text { font-size: 75%; } #s1_home > .cross_2 { display: block; top: 37.5dvh; left: 25%; width: 3.5rem; } #s1_home > .cross_3 { top: 30dvh; right: 15%; width: 4.5rem; opacity: 1; } #s1_home > .cross_4 { display: block; top: 50dvh; left: 67.5%; width: 3.5em; transform: translateY(-50%); } #s1_home > .el_big_num_1 { display: block; top: 25dvh; bottom: auto; right: auto; left: 0; transform: translateX(-5%); font-size: 7.5vw; } #s1_home > .el_big_num_2 { display: block; top: 20dvh; bottom: auto; transform: translateX(5%); font-size: 5vw; text-align: right; } #s1_home > .el_big_num_3 { top: 50dvh; bottom: auto; right: 2.5%; transform: translateY(-50%); margin-right: 0; font-size: 3.75vw; text-align: center; } #s1_home.active > .circle_1 { transform: translate(-100%, -100%) scale(1); } #s1_home.active > .circle_2 { transform: translate(0%, -100%) scale(1); } #s1_home .container .el_circle { top: 30%; right: 15%; } #s1_home .container .circle_2 { display: block; bottom: 5%; right: auto; left: 60%; width: 7.5%; } #s1_home .container .circle_3 { display: block; bottom: 45%; right: auto; left: 2.5%; width: 17.5%; } #s1_home .container .cross_1 { display: block; width: 4rem; top: 20%; right: 5%; } #s1_home .container .cross_5 { display: block; position: relative; width: 4em; margin: var(--c10v) auto var(--c10v) 25%; } #s1_home .container .cross_6 { display: block; bottom: 17.5%; right: 30%; width: 2.5em; } #s1_home .container .svg_tab_1 { display: block; bottom: 25%; left: 42.5%; width: 8em; } #s1_home .container .svg_tab_1 text { font-size: 125%; } #s1_home .container .el_big_num_1 { bottom: 7.5%; right: auto; left: 15%; color: var(--blue-l); text-align: center; } #s1_home .container .el_big_num_2 { bottom: 25%; right: 12.5%; font-size: 150%; opacity: .25; } /* Sec 2 */ #s2_home { background-color: transparent; } #s2_home::before { display: block; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: var(--blue); } #s2_home :where(.img_4, .img_5) { display: block; } #s2_home picture { width: 22.5%; min-width: 22.5%; } #s2_home picture.img_1 { transform: translate(200%, 0%) rotate(0deg) scale(.5); z-index: 2; margin-right: -2.5%; } #s2_home picture.img_2 { transform: translate(100%, 0%) rotate(0deg) scale(.5); z-index: 0; margin-right: -2.5%; } #s2_home picture.img_3 { transform: translate(0%, 0%) rotate(0deg) scale(.5); z-index: 2; } #s2_home picture.img_4 { transform: translate(-100%, 0%) rotate(0deg) scale(.5); margin-left: -2.5%; z-index: 1; } #s2_home picture.img_5 { transform: translate(-200%, 0%) rotate(0deg) scale(.5); margin-left: -2.5%; z-index: 0; } #s2_home .active picture.img_1 { transform: translate(0%, 7.5%) rotate(1.25deg); } #s2_home .active picture.img_2 { transform: translate(-5%, -10%) rotate(-7.5deg); } #s2_home .active picture.img_3 { transform: translate(0%, 0%) rotate(5deg) scale(1); } #s2_home .active picture.img_4 { transform: translate(0%, -2.5%) rotate(12.5deg); } #s2_home .active picture.img_5 { transform: translate(0%, -7.5%) rotate(-5deg); } /* Sec 3 */ #s3_home .sec_title { align-self: flex-start; margin-left: 6.25%; } #s3_home .text + .text { align-self: flex-end; margin-right: 6.25%; } #s3_home .el_circle { top: 50%; left: 17.5%; background-color: var(--blue-l); } #s3_home .el_big_num_1 { bottom: auto; top: 0%; right: 15%; transform: none; font-size: 5vw; text-align: right; opacity: .25; } #s3_home .circle_4 { display: block; top: 55%; left: 25%; width: 12.5%; } #s3_home .cross_7 { position: absolute; margin: 0; bottom: 10%; left: auto; right: 12.5%; width: 4em; } #s3_home .letter_a_alt { bottom: 60%; right: 7.5%; width: 3em; } #s3_home .letter_a_alt text { display: block; font-size: 125%; text-align: right; } #s3_home .svg_plus { display: block; top: 55%; left: 25%; transform: translate(-50%, -50%); width: 2em; } #s3_home .el_big_num_2 { display: none; } /* Sec 4 */ #s4_home .text h2 { width: 18ch; } #s4_home .text p { width: 87.5%; } #s4_home .text :where(p, .link) { margin-left: 12.5%; } #s4_home .sec_img picture, #s6_azienda .sec_img picture, #s6_lavorazioni .sec_img picture { width: 100%; } #s4_home .sec_img picture { margin: 0; transform: translate(calc(100% + var(--c5o)), 0%) rotate(0deg) scale(.5); } #s4_home .sec_img.active picture { transform: translate(5%, -20%) rotate(5deg) scale(1); } #s4_home .letter_c { position: absolute; top: 17.5%; left: 55%; width: 2.5em; margin: 0; opacity: 1; } #s4_home .circle_5 { position: absolute; bottom: 30%; right: 35%; width: 7.5%; margin: 0; opacity: 1; } #s4_home .cross_3 { display: block; bottom: 7.5%; left: var(--c7o); width: 4.5em; } #s4_home .el_num_triangle { bottom: 20%; right: 15%; min-width: 7ch; font-size: 100%; color: var(--blue-l); } #s4_home .el_num_triangle span::before { transform: translate(75%, calc(-50% + 1em)); } /* Sec 5 */ #s5_home .container { flex-wrap: nowrap; } #s5_home .container .text.w50l { text-align: right; } #s5_home .container .text.w50l .link { display: flex; margin-right: 0; margin-left: auto; } #s5_home .wrapper { margin: 0 auto 0 0; z-index: 2; } #s5_home .wrapper .card .text h3 { font-size: 150%; } #s5_home .svg_el.svg_tri { position: absolute; top: 10dvh; right: 50%; margin: 0; } #s5_home .el_big_num { position: absolute; top: auto; bottom: 2.5%; left: 5%; margin: 0; width: fit-content; } #s5_home .circle_5 { position: absolute; bottom: 25%; left: 5%; width: 8em; margin: 0; opacity: 1; z-index: 2; } #s5_home .cross_8 { display: block; bottom: 50%; left: 50%; transform: translateX(-50%); width: 4em; } #s5_home .svg_cariola { right: auto; left: 52.5%; top: 35dvh; width: 3.5em; opacity: .25; } #s5_home .link.mobile { display: none; } /* Sec 6 */ #s6_home { z-index: 1; } #s6_home .card_pic { top: 50%; left: 0; transform: translate(25%, -67.5%) rotate(0deg); transition: transform .25s ease .25s; } #s6_home .card_pic.active { transform: translate(0%, -67.5%) rotate(-2.5deg); transition: transform .25s ease; } #s6_home .card { background: transparent; } #s6_home .card picture { display: none; } #s6_home .card a { position: relative; overflow: hidden; justify-content: flex-end; width: fit-content; margin-left: auto; padding: .125em 0; text-align: right; } #s6_home .card a::after { display: block; content: ''; position: absolute; bottom: 0; right: 0; transform: translateX(100%); width: 100%; height: 1px; border-bottom: 1px solid var(--white); transition: .25s ease; } #s6_home .card :where(h3, .card_num) { text-shadow: none; } #s6_home .card h3 { transform: translateX(1ch); transition: .25s ease; } #s6_home .card .card_num { opacity: 0; transition: .25s ease; } #s6_home .card a:hover h3 { transform: translateX(0); } #s6_home .card a:hover .card_num { opacity: 1; } #s6_home .card a:hover::after { transform: translateX(0); } #s6_home .svg_tab_2 { display: block; top: 20%; left: 37.5%; width: 10%; opacity: .25; } #s6_home .svg_plus { position: absolute; top: auto; bottom: 20%; left: 40%; width: 2em; margin: 0; opacity: 1; } #s6_home .el_num_triangle { position: absolute; top: var(--c12v); left: auto; right: 2.5%; font-size: 6vw; text-align: right; width: fit-content; } #s6_home .el_num_triangle span::before { top: 100%; left: 30%; transform: translate(-50%, 0rem); } #s6_home .link.desktop { display: flex; } #s6_home .link.mobile { display: none; } /* Sec 9 */ #s9_home .sec_img picture:nth-of-type(1) { width: 75%; margin-right: -20%; transform: translate(0%, 0%) rotate(0deg) scale(0); } #s9_home .sec_img picture:nth-of-type(2) { width: 65%; margin-left: -20%; transform: translate(0%, 0%) rotate(0deg) scale(0); } #s9_home .sec_img.active picture:nth-of-type(1) { transform: translate(0%, -15%) rotate(-7.5deg) scale(1); } #s9_home .sec_img.active picture:nth-of-type(2) { transform: translate(0%, 5%) rotate(2.5deg) scale(1); } #s9_home .text { text-align: right; } #s9_home .text .link { margin-right: 0; margin-left: auto; } #s9_home .svg_plus { top: 10%; right: 57.5%; width: 2em; opacity: 1; } #s9_home .svg_plus + .svg_plus { display: block; top: 65%; right: auto; left: 3.75%; } #s9_home .cross_9 { display: block; bottom: 10%; right: 25%; width: 3.5em; } #s9_home .svg_tab_3 { position: absolute; top: 50%; right: 50%; transform: translateX(100%); width: 10rem; margin: 0; opacity: .125; } #s9_home .svg_tab_3 text { font-size: 125%; } #s9_home .el_num_triangle { display: block; bottom: 10%; left: 7.5%; font-size: 125%; } #s9_home .el_num_triangle span { color: var(--blue-l); } #s9_home .el_num_triangle span:before { top: 100%; left: 100%; transform: translate(100%, -50%); border-top-color: var(--blue-l); } #s9_home .el_big_num { position: absolute; bottom: 20%; right: 50%; width: fit-content; margin-top: 0; transform: translateX(60%); } /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template Azienda */ #s2_azienda .anno { position: absolute; top: calc(var(--c5v) + 2.5%); left: 50%; transform: translate(-10%, 0%); z-index: 1; font-size: clamp(160px, 16vw, 300px); } #s2_azienda .circle_6 { top: 12.5%; right: 5%; opacity: 1; z-index: 1; } #s2_azienda .letter_b_alt { position: absolute; top: 5%; left: 25%; width: 3.5rem; margin: 0; } #s2_azienda .svg_plus { top: 15%; left: 5%; width: 2em; opacity: 1; } #s3_azienda .grid { grid-template-columns: 1fr 1fr 1fr; gap: 2px; } #s3_azienda .card:not(.desktop) { aspect-ratio: 1 / 1; border: 0; outline: 2px solid var(--blue); } #s3_azienda .card:not(.desktop).animate { transform: none; opacity: 1; } #s3_azienda .card:not(.desktop).animate .text { transform: scale(.75); opacity: 0; transition: .25s ease-out; } #s3_azienda .card:not(.desktop).animate.active .text { transform: scale(1); opacity: 1; } #s3_azienda .svg_tab_4 { position: absolute; top: 12.5%; right: 17.5%; width: 6em; margin: 0; opacity: .125; } #s3_azienda .svg_cariola, #s3_azienda .svg_tri, #s3_azienda .svg_plus, #s3_azienda .el_big_num_1 { display: block; } #s3_azienda .svg_cariola { top: 50%; left: 17.5%; width: 3.5em; } #s3_azienda .svg_tri { width: .75em; height: .75em; } #s3_azienda .svg_plus { bottom: 2.5%; right: 50%; width: 2em; } #s3_azienda .circle_9 { position: absolute; bottom: 12.5%; right: 10%; width: 17.5%; margin: 0; } #s3_azienda .el_big_num_1 { bottom: 3.75%; right: 25%; font-size: 100%; } #s3_azienda .svg_tri { position: absolute; top: 100%; left: 0; transform: translate(-1.25em, -0.25em) rotate(180deg); width: .75em; height: .75em; } #s3_azienda + #sec_motivi { padding-top: 0; } #s6_azienda :where(.text, .sec_img) { z-index: 1; } #s6_azienda .text { align-self: flex-start; text-align: right; } #s6_azienda .text .link { margin-right: 0; margin-left: auto; } #s6_azienda .sec_img picture { transform: rotate(0deg) scale(.5); } #s6_azienda .sec_img.active picture { transform: rotate(-2.5deg) scale(1); } #s6_azienda .letter_c_alt { position: absolute; top: 55%; left: 50%; transform: translateX(-100%); width: 3.5rem; margin: 0; } #s6_azienda .svg_tab_5 { display: block; top: var(--c10v); left: 50%; transform: translateX(-50%); width: 8em; opacity: .25; } #s6_azienda .svg_tab_5 text { font-size: 150%; } #s6_azienda .el_big_num_1 { bottom: auto; top: 35%; left: 40%; width: fit-content; font-size: 150%; color: var(--blue-l); z-index: 2; } #s6_azienda .el_big_num_1 .svg_tri { position: absolute; top: 0; right: 0; width: 1rem; transform: translate(-1em, -1.25rem); } #s6_azienda .svg_plus { position: absolute; top: 25%; right: auto; left: 5%; margin: 0; opacity: 1; z-index: 2; } #s6_azienda .el_big_num_2 { position: absolute; bottom: 0; right: 0; margin-top: 0; transform: translate(5%, 37.5%); font-size: 24vw; } /* Template Servizi */ #s1_servizi .svg_tab_1 { bottom: 20%; left: 50%; transform: translateX(-50%); width: 6em; z-index: 1; } #s1_servizi .el_big_num { bottom: auto; top: 15%; right: 27.5%; transform: translateX(5%); font-size: 150%; color: var(--grey); } .s2_page:not(#s2_azienda, #s2_processi) .h100 .text { align-self: flex-start; } .s2_page .text + .text { align-self: flex-end; } #s2_servizi .container { padding-top: var(--c12v); } #s2_servizi .container > .text { padding: 0; } #s2_servizi .swiper-slide a .text, .sec_slider_sub .swiper-slide a .text { transform: translateY(4.625em); } #s2_servizi .nav_wrapper { gap: .75em; } #s2_servizi .circle_6 { display: block; position: absolute; top: 20%; left: 35%; width: 5rem; margin: 0; } #s2_servizi .letter_a_alt { top: auto; bottom: 7.5%; right: auto; left: 17.5%; width: 3.5rem; } #s2_servizi .letter_a_alt text { font-size: 125%; } #s2_servizi .svg_plus { position: absolute; top: auto; bottom: 35%; left: 45%; width: 2em; margin: 0; } /* Template Lavorazioni */ #s2_lavorazioni .text_2 { align-self: flex-end; } #s2_lavorazioni .el_circle { top: 20%; left: 50%; background-color: var(--blue-l); } #s2_lavorazioni .svg_plus, #s2_lavorazioni .el_big_num { display: block; } #s2_lavorazioni .svg_plus { bottom: auto; top: 5%; left: 7.5%; width: 2em; opacity: .25; } #s2_lavorazioni .el_big_num { bottom: auto; top: 10%; right: var(--c3o); font-size: 400%; text-align: right; z-index: 1; opacity: .25; } #s2_lavorazioni .letter_a_alt { position: absolute; top: auto; bottom: 5%; right: auto; left: 5%; margin: 0; opacity: .25; } #s2_lavorazioni .letter_a_alt text { font-size: 125%; } #s2_lavorazioni .circle_6 { display: block; bottom: auto; top: 20%; right: 10%; width: 6rem; opacity: .125; } #s3_lavorazioni .card_1 { order: 1; } #s3_lavorazioni .sec_title { order: 2; } #s3_lavorazioni .sec_title h2 { font-size: calc(var(--h2-size) * .75); } #s3_lavorazioni .card_2 {} .card_lavorazione picture { width: 100%; } .card_lavorazione.card_1 picture { transform: translate(0%, -5%) rotate(-2.5deg); } .card_lavorazione.card_2 picture { transform: translate(0%, 12.5%) rotate(2.5deg); } .card_lavorazione .btn { position: absolute; top: 50%; left: 100%; width: max-content; margin-left: -1.75em; } .card_lavorazione.card_2 .btn { top: 75%; left: auto; right: 100%; margin: 0 -1.75em 0 0; } .card_lavorazione .btn .ico svg { width: 3.5em; height: 3.5em; } .card_lavorazione .btn .ico svg, .card_lavorazione .btn .ico svg path { transition: .25s ease; } .card_lavorazione .btn .text h3 span { position: relative; width: fit-content; padding-right: .25ch; overflow: hidden; font-size: 175%; transition: .25s ease; } .card_lavorazione .btn .text h3 span::after { display: block; content: ''; position: absolute; bottom: 0; left: 0; transform: translateX(-100%); width: 100%; height: 2px; border-top: 2px solid var(--blue); transition: .25s ease; } .card_lavorazione.card_2 .btn .text h3 { padding-right: .25ch; } .card_lavorazione.card_2 .btn .text h3 span::after { left: auto; transform: translateX(100%); } .card_lavorazione a:hover .btn .ico svg { background-color: var(--blue-l); } .card_lavorazione a:hover .btn .ico svg path { fill: var(--white); } .card_lavorazione a:hover .btn .text h3 { color: var(--blue); } .card_lavorazione a:hover .btn .text h3 span { color: var(--blue-l); } .card_lavorazione a:hover .btn .text h3 span::after { transform: translateX(0); border-color: var(--blue-l); } #s3_lavorazioni .el_circle { top: 50%; left: 60%; } #s3_lavorazioni .circle_11 { display: block; top: 37.5%; left: 62.5%; width: 4em; z-index: 1; } #s3_lavorazioni .cross_2 { position: absolute; top: auto; bottom: 5%; left: 52.5%; width: 3.5em; opacity: 1; } #s3_lavorazioni .el_big_num_1 { top: 10%; } #s3_lavorazioni .el_big_num_1 .svg_tri { transform: translate(3em, 0.25rem); } #s3_lavorazioni .el_big_num_2 { bottom: 12.5%; right: auto; left: 20%; font-size: 125%; } #s3_lavorazioni .circle_12 { position: absolute; bottom: 15%; left: 30%; width: 10rem; margin: 0; order: unset; z-index: 1; } #s5_lavorazioni .container > .text { width: 65%; align-self: flex-start; } #s5_lavorazioni .wrapper { width: 87.5%; margin-left: auto; } #s5_lavorazioni .card { grid-template-columns: 1fr 1.5fr; } #s5_lavorazioni .card .text { order: 1; border-top: 0; border-right: 2px solid var(--blue); } #s5_lavorazioni .card picture { order: 2; aspect-ratio: 16 / 9; } #s5_lavorazioni .nav_wrapper { position: absolute; top: 1.5em; right: 0; transform: translateX(50%); flex-direction: column; width: fit-content; z-index: 2; } #s5_lavorazioni .svg_tab_5 { position: absolute; top: 32.5%; left: 55%; width: 10em; margin: 0; opacity: .25; } #s5_lavorazioni .circle_5 { display: block; top: 30%; right: 10%; width: 6em; z-index: 1; } #s5_lavorazioni .cross_9 { bottom: 22.5%; left: 7.5%; width: 3.5rem; opacity: 1; } #s5_lavorazioni .el_big_num_1 { display: block; bottom: 10%; right: auto; left: 5%; font-size: 125%; color: var(--blue-l); } #s5_lavorazioni .el_big_num .svg_tri { position: absolute; top: 0; left: 50%; transform: translate(0em, -1.25em); width: .75em; } #s5_lavorazioni .el_big_num .svg_tri path { fill: var(--blue-l); } #s5_lavorazioni .el_big_num_2 { display: block; bottom: auto; top: 5%; transform: translateX(5%); font-size: 8vw; text-align: right; opacity: .25; } #s6_lavorazioni .text { text-align: right; } #s6_lavorazioni .el_circle { top: 10%; right: 42.5%; transform: none; background-color: var(--blue-l); } #s6_lavorazioni .circle_6 { left: 40%; z-index: 1; } #s6_lavorazioni .svg_plus { top: 20%; left: 3.25%; width: 2em; opacity: 1; z-index: 1; } #s6_lavorazioni .el_big_num_1 { bottom: 50%; right: 50%; font-size: 125%; color: var(--blue-l); z-index: 1; } #s6_lavorazioni .el_big_num_1 .svg_tri { transform: translate(3em, -2.5em); } #s6_lavorazioni .el_big_num_2 { bottom: 7.5%; right: auto; left: 5%; z-index: 1; } #s8_lavorazioni .grid { max-width: 1024px; grid-template-columns: 1fr 1fr 1fr; } /* Template Settori */ .s2_page .el_circle { top: 25%; right: 7.5%; } .s2_page .circle_6 { display: block; top: 5%; right: 10%; width: 5em; z-index: 1; } .s2_page .circle_6 :where(polygon, rect, path, text) { fill: var(--blue-l); } .s2_page .letter_b_alt, .s2_page .letter_c_alt { top: 50%; left: auto; right: 10%; width: 3.5rem; } .s2_page .svg_plus { bottom: auto; top: 7.5%; left: 50%; width: 2em; opacity: 1; } .s2_page .circle_7, .s2_page .circle_14, .s2_page .circle_15 { position: absolute; bottom: 7.5%; right: 12.5%; width: 12rem; margin: 0; } #s2_settori .circle_6, #s2_parco .circle_6, #s2_quality .circle_6, #s2_processi .circle_6 { bottom: auto; top: 7.5%; right: 7.5%; width: 5em; } #s2_settori .circle_6 :where(polygon, rect, path, text), #s2_parco .circle_6 :where(polygon, rect, path, text), #s2_quality .circle_6 :where(polygon, rect, path, text), #s2_processi .circle_6 :where(polygon, rect, path, text) { fill: var(--blue-l); } #s2_settori .letter_c_alt, #s2_parco .letter_c_alt, #s2_quality .letter_b_alt, #s2_processi .letter_c_alt { bottom: 50%; transform: translateY(50%); left: auto; right: 15%; } .sec_slider_sub .svg_tab_2, .sec_slider_sub .svg_tab_3, #s3_contatti .svg_tab_3 { position: absolute; top: 5%; left: 5%; width: 10em; margin: 0; } .sec_slider_sub .circle_1, .sec_slider_sub .svg_plus, .sec_slider_sub .letter_a_alt { display: block; } .sec_slider_sub .circle_1 { top: 2.5%; right: 25%; width: 6em; z-index: 2; } .sec_slider_sub .svg_plus { top: 2.5%; right: calc(25% - 2em); width: 2em; } .sec_slider_sub .letter_a_alt { top: 5%; right: var(--c3o); width: 3em; } .sec_slider_sub .letter_a_alt :where(polygon, rect, path, text) { fill: var(--blue-l); } .sec_slider_sub .letter_a_alt text { display: none; } .sec_slider_sub .cross_2, #s3_contatti .cross_2 { position: absolute; bottom: 5%; left: 15%; width: 3.5em; margin: 0; } .card.card_page .text h3 { font-size: 150%; } .card.card_page .text p { font-size: 100%; } .card.card_page .text .link .ico { width: 2.5em; height: 2.5em; min-width: 2.5em; } .card.card_page .text .link.flex::before { width: 2.5em; height: 2.5em; } .card.card_page .text .link.flex:hover::before { width: 100%; } /* Template Parco Macchine */ #s3_parco .container { padding: var(--c5o); } #s3_parco .swiper { padding: 0; } #s3_parco .card { grid-template-columns: 1fr; } #s3_parco .card .sec_img > picture { aspect-ratio: 4 / 3; } #s3_parco .card .text p { font-size: 87.5%; } #s3_parco .nav_wrapper { z-index: 2; } #s3_parco .circle_1 { display: block; top: 15%; right: 5%; width: 6em; z-index: 2; } #s3_parco .cross_2 { top: 5%; right: 2.5%; width: 3.5rem; } /* Template Qualità */ #s3_quality .card + .card { margin-top: var(--c5v); } #s3_quality .card.animate { transform-origin: top; transform: none; opacity: 1; transition: 0s; } #s3_quality .card .text { padding: 2.5em 2em; } #s3_quality .el_big_num_1 { top: 2.5%; right: auto; left: 5%; } #s3_quality .el_big_num_1 .svg_tri { position: absolute; top: 0; right: 0; transform: translate(-0.75em, -1.25em) rotate(180deg); } #s3_quality .circle_2 { display: block; top: 3.25%; left: 12.5%; width: 6em; } #s3_quality .cross_1 { position: absolute; top: 2.5%; right: 5%; width: 3.5em; margin: 0; } #s3_quality .svg_cariola { display: block; bottom: 5%; left: 5%; width: 4em; } #s3_quality .letter_a_alt { position: absolute; bottom: 15%; right: 5%; width: 3.5rem; margin: 0; } /* Template Process Produttivi */ #s3_processi .svg_tab_2 { width: 8em; } #s3_processi .circle_1 { opacity: .125; } /* Template Lavora con noi */ #s2_lavora .nav_wrapper { position: absolute; top: 0; left: 0; transform: translate(0%, calc(-100% - 1.5em)); width: fit-content; margin: 0; } .card.card_position { padding: 1.5em 1em 0 1em; } .card.card_position .text h3 { font-size: 125%; } .card.card_position .text p { font-size: 87.5%; } #s2_lavora .circle_6:first-of-type { top: 5%; right: auto; left: 45%; } #s2_lavora .circle_6:first-of-type :where(polygon, rect, path, text) { fill: var(--blue-l); } #s2_lavora .circle_6 + .circle_6 { top: 20%; right: 15%; width: 7em; } #s2_lavora .cross_1 { display: block; top: 37.5%; left: 40%; width: 3.5em; opacity: .125; } #s2_lavora .letter_c_alt { bottom: auto; top: 22.5%; left: auto; right: 42.5%; width: 3em; } #s2_lavora .svg_plus { top: 35%; left: auto; right: 5%; } #s3_lavora .container { padding-bottom: 0; } #s3_lavora .svg_tab_3 { position: absolute; bottom: 25%; left: 25%; width: 10em; margin: 0; } #s3_lavora .letter_a_alt { top: auto; bottom: 10%; left: auto; right: 5%; width: 3.5rem; opacity: .125; } #s3_lavora .cross_3, #s3_lavora .cross_2 { display: block; } #s3_lavora .cross_2 { bottom: 5%; left: 7.5%; width: 3.5em; } #s3_lavora .cross_3 { top: 22.5%; left: 42.5%; width: 3.5em; } #s3_lavora .svg_plus { position: absolute; bottom: 12.5%; right: 20%; width: 2em; margin: 0; } #s3_lavora .el_big_num { position: relative; bottom: auto; right: auto; transform: none; margin: 0 calc((var(--c5o) * -1) - 5%) -10% auto; text-align: right; } /* Template Contatti */ #s2_contatti .container { padding-top: calc(var(--c12v) + 5%); } #s2_contatti .sec_title + .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } .card_contact { justify-content: space-between; } .card.card_contact .ico { width: 2.5em; min-width: 2.5em; } .card.card_contact .ico + p { margin-top: 1em; } #s2_contatti .card_contact:nth-child(2) { order: 2; } #s2_contatti .card_contact:nth-child(3) { order: 4; } #s2_contatti .card_contact:nth-child(4) { order: 5; } #s2_contatti .map_block { grid-column: 2 span; grid-row: 2 span; order: 3; } #s2_contatti .el_circle { top: 5%; right: 7.5%; } #s2_contatti .circle_6 { top: 10%; right: 35%;} #s2_contatti .circle_6 :where(path, polygon, rect, text) { fill: var(--blue-l); } #s2_contatti .letter_c_alt { top: 7.5%; right: 57.5%; } #s2_contatti .svg_plus { top: 25%; left: 32.5%; } .card_info::before { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--blue-l); opacity: 0; transition: .25s ease; } .card_info + .card_info { margin-top: 0; } .card_info .text p { transition: .25s ease; } .card_info .text p.h3 { font-size: 150%; } .card_info .text p.h4 { font-size: 125%; } .card_info .text p { font-size: 87.5%; } .card_info .text p a { transition: all .25s ease, color 0s; } .card_info:hover::before { opacity: 1; } .card_info:hover .text p:not(.h3) { color: var(--white); } #s2_contatti .map_block iframe { aspect-ratio: 4 / 3; } #s3_contatti .grid { grid-template-columns: 1fr 1fr; gap: .5em; z-index: 1; } #s3_contatti :where(.circle_1, .svg_plus, .letter_a_alt) { display: block; } #s3_contatti .circle_1 { top: 2.5%; right: 25%; width: 6em; z-index: 1; } #s3_contatti .svg_plus { top: 2.5%; right: calc(25% - 2em); width: 2em; } #s3_contatti .letter_a_alt { top: 7.5%; right: 5%; width: 3em; } #s3_contatti .letter_a_alt :where(polygon, rext, path, text) { fill: var(--blue-l); } #s3_contatti .letter_a_alt text { display: none; } /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ .s1_single + section .container { padding-top: calc(var(--c12v) + 7.5vw); } .s2_page .svg_plus { top: 10%; left: 47.5%; } .s2_single .svg_tab_6 { display: block; bottom: 35%; left: 30%; width: 6em; } .s2_single .svg_tab_6 text { font-size: 150%; } .s2_page .letter_b_alt, .s2_page .letter_c_alt { top: auto; bottom: var(--c15v); left: var(--c5o); right: auto; opacity: 1; } .s2_single .cross_1 { position: absolute; top: auto; bottom: 7.5%; right: 62.5%; width: 3.5em; margin: 0; opacity: 1; } .s2_page .circle_6 { top: auto; bottom: 10%; right: 50%; width: 6em; opacity: 1; } .s2_page .circle_6 :where(polygon, rect, path, text) { fill: var(--white); } /* Single Servizi */ #s3_single_service .container > .text { position: sticky; top: 5em; text-align: right; } #s3_single_service .container > .text h2 { font-size: calc(var(--h2-size) * .75); } #s3_single_service .wrapper { margin-top: -15%; } #s3_single_service .circle_10 { display: block; top: 60dvh; left: 0; transform: translateX(-35%); width: 8em; } #s3_single_service .cross_2 { position: absolute; top: 72.5dvh; left: auto; right: 10%; margin: 0; } #s3_single_service .svg_cariola { top: 5%; left: 75%; width: 3.5em; } #s3_single_service .svg_plus { top: 45dvh; right: -35%; width: 2em; opacity: .125; } #s3_single_service .el_big_num { position: absolute; bottom: auto; top: 60dvh; transform: translateX(25%); margin: 0; font-size: 200%; text-align: right; } #s4_single_service .svg_plus { position: absolute; top: 50%; left: 40%; width: 2em; margin: 0; opacity: 1; } #s4_single_service .circle_8 { position: absolute; bottom: 10%; left: 5%; width: 12em; margin: 0; } #s4_single_service .letter_b_alt { display: block; top: 55%; left: 50%; transform: translateX(-100%); width: 3.5em; } #s4_single_service .letter_b_alt :where(polygon, rect, path, text) { fill: var(--blue-l); } #s4_single_service .letter_b_alt text { font-size: 125%; } #s4_single_service .el_big_num_2 { transform: translate(5%, 35%); } /* Single Lavorazioni */ .s2_page.s2_single .text.sec_title { align-self: flex-start; } .s2_page.s2_single .text:not(.sec_title) { margin-top: 5%; } #s3_single_lavorazioni picture.w75, #s3_single_lavorazioni picture.w65, .struttura_text_img .img_1, .struttura_text_img .img_2 { position: absolute; top: 50%; width: 20%; margin: 0; } #s3_single_lavorazioni picture.w75, .struttura_text_img .img_1 { left: 0%; transform: translate(-100%, -50%) rotate(0deg) scale(.5); } #s3_single_lavorazioni picture.w65, .struttura_text_img .img_2 { right: 0%; transform: translate(100%, -75%) rotate(0deg) scale(.5); } #s3_single_lavorazioni picture.w75.active, .struttura_text_img .img_1.active { transform: translate(-35%, -50%) rotate(-5deg) scale(1); } #s3_single_lavorazioni picture.w65.active, .struttura_text_img .img_2.active { transform: translate(40%, -75%) rotate(7.5deg) scale(1); } #s3_single_lavorazioni .container > .text, .struttura_text_img .text { max-width: calc(100% - 20%); margin: 0 auto; } #s3_single_lavorazioni .container > .text p { max-width: 34ch; margin-right: auto; margin-left: auto; } #s3_single_lavorazioni .grid { display: grid; grid-template-columns: 1fr 1.75fr; width: calc(100% - 20% - 6em); max-width: 1024px; margin: var(--c7v) auto 0 auto; } #s3_single_lavorazioni .col_1 { gap: .5em; } #s3_single_lavorazioni .col_1 button.num { display: flex; align-items: center; justify-content: flex-start; gap: 1em; text-align: left; } #s3_single_lavorazioni .col_1 button.num span { padding: 0; font-size: 250%; line-height: 1.125; } #s3_single_lavorazioni .col_1 button.num::after { width: auto; height: 2px; flex: 1 1 auto; margin: .5em 0 0 0; opacity: 0; } #s3_single_lavorazioni .col_1 button.num.active::after { opacity: 1; } #s3_single_lavorazioni .col_2 .text { display: block; height: 100%; padding: 2.5em 1.5em 2.5em 5em; text-align: right; align-content: center; } #s3_single_lavorazioni .svg_plus { display: none; } #s3_single_lavorazioni .svg_cariola { top: 10%; left: 7.5%; } #s3_single_lavorazioni .el_circle { top: calc(7.5% + 4em); left: calc(7.25% + 4em); } #s3_single_lavorazioni .cross_2 { top: 25%; right: 12.5%; width: 3.5em; } #s3_single_lavorazioni .letter_a_alt { bottom: 7.5%; left: 7.5%; } #s3_single_lavorazioni .el_big_num_1 { display: block; bottom: auto; top: 5%; right: var(--c2o); opacity: .25; } /* Single Settori */ #s1_single_settori .el_big_num_1 .svg_tri { display: block; position: absolute; top: 0; right: 0; transform: translate(-.25em, -1em); } #s1_single_settori .el_big_num_1 .svg_tri path { fill: var(--blue-l); } .s2_page.s2_single .el_circle { top: 30%; right: 55%; } .s2_page.s2_single .svg_plus { top: 10%; left: 7.5%; } .s2_single .el_big_num { top: auto; bottom: 15%; left: 5%; font-size: 100%; opacity: 1; } .s2_single .cross_1 { top: auto; bottom: 5%; right: 60%; width: 3.5em; opacity: 1; } #s3_single_settori .text { text-align: right; } #s3_single_settori picture.w75, #s3_single_quality_cert picture.w75, .struttura_text_img .img_1 { margin-top: 0; } #s3_single_settori :where(.el_circle, .circle_6, .el_big_num_2), #s3_single_quality_cert :where(.el_circle, .circle_6, .el_big_num_2) { display: block; } #s3_single_settori .el_circle, #s3_single_quality_cert .el_circle { top: 45%; left: 52.5%; } #s3_single_settori .circle_6, #s3_single_quality_cert .circle_6 { bottom: 20%; left: 3.25%; width: 5em; } #s3_single_settori .svg_plus, #s3_single_quality_cert .svg_plus { top: 10%; right: 50%; width: 2em; } #s3_single_settori .el_big_num_1, #s3_single_quality_cert .el_big_num_1 { top: 20%; left: 32.5%; font-size: 100%; } #s3_single_settori .el_big_num_2, #s3_single_quality_cert .el_big_num_2 { bottom: 12.5%; left: 17.5%; width: fit-content; margin: 0; text-align: center; opacity: .25; } #s4_single_settori .wrapper { display: grid; } #s4_single_settori .wrapper, #s4_single_settori .wrapper.grid_1 { grid-template-columns: 2fr 1fr 1fr; } #s4_single_settori .wrapper.grid_2 { grid-template-columns: 1fr 2fr 1fr; } #s4_single_settori .wrapper.grid_3 { grid-template-columns: 1fr 1fr 2fr; } #s4_single_settori .card { height: 100%; grid-template-columns: 1fr 0fr; } #s4_single_settori .card + .card { margin: 0; } #s4_single_settori .card .card_img > picture { aspect-ratio: 3 / 5; } #s4_single_settori .card .card_img .text h4 { font-weight: 400; font-size: 87.5%; } #s4_single_settori .card:not(.active) .card_img:hover .filter { opacity: .625; } #s4_single_settori .card span.card_num { font-weight: 400; font-size: 175%; } #s4_single_settori .card .card_text { flex-direction: column; justify-content: flex-end; } #s4_single_settori .card .card_text p { font-size: 87.5%; } #s4_single_settori .card.active { grid-template-columns: 1fr 1fr; } #s4_single_settori .card.active .card_img :where(.filter, .text) { opacity: 0; } #s4_single_settori .card.active .card_text { display: flex; } #s4_single_settori .card .card_img .text .ico_link { opacity: 0; transform: rotate(0deg) scale(0); transition: .25s ease; } #s4_single_settori .card .card_img:hover .text .ico_link { transform: scale(1); opacity: 1; } #s4_single_settori .el_circle { position: absolute; top: 30%; right: 25%; margin: 0; } #s4_single_settori .cross_9 { top: 20%; right: 3.25%; width: 2em; transform: none; } #s4_single_settori :where(.circle_5, .el_big_num_1) { display: block; } #s4_single_settori .circle_5 { top: 30%; left: 15%; width: 5em; } #s4_single_settori .el_big_num_1 { bottom: auto; top: 10%; right: auto; left: 5%; width: fit-content; font-size: 100%; color: var(--blue-l); opacity: .25; } #s4_single_settori .el_big_num_1 .svg_tri { position: absolute; top: 0; right: 0; transform: translate(-1.25em, -1em); width: .75em; } #s4_single_settori .el_big_num_1 .svg_tri path { fill: var(--blue-l); } #s4_single_settori .el_big_num_2 { position: absolute; bottom: 0; right: 0; margin: 0; transform: translate(5%, 35%); } /* Single Qualità - Quality Flow */ #s3_single_quality_flow .text { text-align: right; } #s3_single_quality_flow .sec_img { pointer-events: none; } #s3_single_quality_flow .sec_img picture.rel { width: 125%; margin-right: -25%; } #s3_single_quality_flow .sec_img picture.abs { width: 78%; height: 52.5%; transform: translate(-38%, 18%) rotate(12.5deg); } #s3_single_quality_flow .el_circle { top: 17.5%; left: 60%; } #s3_single_quality_flow :where(.circle_6, .el_big_num_1, .el_big_num_2) { display: block; } #s3_single_quality_flow .circle_6 { bottom: 20%; left: var(--c5o); width: 5em; z-index: 1; } #s3_single_quality_flow .svg_plus { top: 5%; right: 55%; width: 2em; opacity: 1; } #s3_single_quality_flow .el_big_num_1 { bottom: auto; top: 25%; right: auto; left: var(--c5o); font-size: 100%; color: var(--blue-l); } #s3_single_quality_flow .el_big_num_1 .svg_tri { position: absolute; top: 0; left: 0; transform: translate(.75em, -1.25em) rotate(180deg); width: .75em; } #s3_single_quality_flow .el_big_num_1 .svg_tri path { fill: var(--blue-l); } #s3_single_quality_flow .el_big_num_2 { bottom: 20%; left: 22.5%; width: fit-content; font-size: 150%; text-align: center; opacity: .25; } /* Single Qualità - Sostenibilità */ .sec_sostenibilita .text h2 { max-width: 24ch; margin-right: auto; margin-left: auto; } .sec_sostenibilita .text p { max-width: 60ch; margin-right: auto; margin-left: auto; } #s2_single_quality_sustain .el_circle { top: 35%; right: 15%; } #s2_single_quality_sustain :where(.circle_10, .svg_plus) { display: block; } #s2_single_quality_sustain .circle_10 { top: 50%; right: 2.5%; transform: translateY(-50%); width: 6em; } #s2_single_quality_sustain .cross_1 { position: absolute; bottom: 30%; right: 7.5%; width: 3.5em; margin: 0; } #s2_single_quality_sustain .letter_b_alt { top: 50%; right: auto; left: 5%; width: 3.5em; } #s2_single_quality_sustain .letter_b_alt text { display: block; font-size: 125%; } #s2_single_quality_sustain .svg_plus { top: 25%; left: 5%; width: 2em; } #s3_single_quality_sustain .el_circle, #s4_single_quality_sustain .el_circle, #s5_single_quality_sustain .el_circle { top: 25%; left: 7.5%; } #s3_single_quality_sustain :where(.circle_1, .el_big_num), #s4_single_quality_sustain :where(.circle_8, .el_big_num), #s5_single_quality_sustain :where(.circle_6, .el_big_num, .svg_plus) { display: block; } #s3_single_quality_sustain .circle_1 { top: 45%; left: 2.5%; width: 12em; opacity: .125; } #s3_single_quality_sustain .letter_a_alt, #s4_single_quality_sustain .letter_b_alt, #s5_single_quality_sustain .cross_7 { position: absolute; width: 3.5em; margin: 0; } #s3_single_quality_sustain .letter_a_alt { top: 50%; right: 2.5%; transform: translateY(-50%);} #s3_single_quality_sustain .letter_a_alt :where(path, rect, polygon, text), #s4_single_quality_sustain .letter_b_alt :where(path, rect, polygon, text) { fill: var(--green); } #s3_single_quality_sustain .letter_a_alt text, #s4_single_quality_sustain .letter_b_alt text, #s5_single_quality_sustain .cross_7 text { font-size: 125%; } #s3_single_quality_sustain .svg_plus { top: 10%; left: 15%; width: 2em; opacity: 1; } #s3_single_quality_sustain .el_big_num { bottom: auto; top: 5%; font-size: 5vw; text-align: right; opacity: .25; } #s4_single_quality_sustain .circle_8 { top: 40%; right: 5%; width: 12em; opacity: .125; } #s4_single_quality_sustain .letter_b_alt { top: 50%; left: 2.5%; } #s4_single_quality_sustain .svg_plus { top: 20%; left: 5%; width: 2em; opacity: 1; } #s4_single_quality_sustain .el_big_num { bottom: auto; top: 5%; right: 5%; width: fit-content; font-size: 100%; color: var(--green); text-align: right; } #s4_single_quality_sustain .el_big_num .svg_tri { position: absolute; top: 100%; left: 0; transform: translate(0, -.5em); width: .75em; } #s4_single_quality_sustain .el_big_num .svg_tri path { fill: var(--green); } #s5_single_quality_sustain .container { padding-bottom: 0; } #s5_single_quality_sustain .circle_6 { top: 40%; right: var(--c5o); width: 5em; opacity: .125; } #s5_single_quality_sustain .cross_7 { top: 15%; right: 5%; opacity: 1; } #s5_single_quality_sustain .svg_plus { top: 20%; left: 5%; width: 2em; } #s5_single_quality_sustain .el_big_num_1 { bottom: auto; top: 40%; right: auto; left: var(--c5o); width: fit-content; font-size: 100%; color: var(--green); } #s5_single_quality_sustain .el_big_num_1 .svg_tri {} #s5_single_quality_sustain .el_big_num_1 .svg_tri path { fill: var(--green); } #s5_single_quality_sustain .el_big_num_2 { position: relative; width: fit-content; max-width: 100%; margin: var(--c5v) calc((var(--c5o) * -1) - 5%) -12.5% auto; font-size: clamp(140px, 20vw, 420px); text-align: right; opacity: .25; } /* Single Qualità - Certificazioni */ #s3_single_quality_cert .text { text-align: right; } #s4_single_quality_cert .wrapper {} #s4_single_quality_cert .card.animate { transform: none; opacity: 1; transition: 0s; } #s4_single_quality_cert .el_circle { top: 0%; right: auto; left: 10%; } #s4_single_quality_cert :where(.circle_1, .cross_2) { display: block; } #s4_single_quality_cert .circle_1 { top: 7.5dvh; right: var(--c2o); width: 8em; } #s4_single_quality_cert .cross_2 { bottom: 12.5%; left: 7.5%; width: 3.5em; } #s4_single_quality_cert .svg_plus { position: absolute; top: 0; left: 2.5%; width: 2em; margin: 0; opacity: 1; } #s4_single_quality_cert .el_big_num_2 { width: fit-content; } /* Single Processi */ .struttura_text_img .text p { max-width: 720px; margin-right: auto; margin-left: auto; } .struttura_text_img :where(.circle_8, .el_big_num_1, .el_big_num_2) { display: block; } .struttura_text_img .circle_8 { bottom: 5%; right: var(--c5o); width: 12em; opacity: .125; z-index: 1; } .struttura_text_img .cross_2 { top: 40%; right: 10%; width: 3.5em; opacity: .125; } .struttura_text_img .svg_cariola { top: 10dvh; left: 7.5%; } .struttura_text_img .el_big_num_1 { bottom: 7.5%; right: auto; left: 7.5%; width: fit-content; font-size: 100%; color: var(--blue-l); } .struttura_text_img .el_big_num_1 .svg_tri { position: absolute; top: 100%; left: 0; transform: translate(-1.5em, -.25em); } .struttura_text_img .el_big_num_1 .svg_tri path { fill: var(--blue-l); } .struttura_text_img .el_big_num_2 { bottom: auto; top: 7.5%; right: var(--c3o); width: fit-content; font-size: 4vw; text-align: right; opacity: .25; z-index: 1; } .struttura_text_flex .container > .text { max-width: 60ch; margin-right: auto; margin-left: auto; } .struttura_text_flex .text + .wrapper { gap: 0; flex-wrap: nowrap; } .struttura_text_flex .block.animate { transform: none; opacity: 0; } .struttura_text_flex .block picture { aspect-ratio: unset; height: 35vh; min-height: 100%; } .struttura_faq .svg_tab_3 { position: absolute; top: var(--c10v); left: var(--c5o); width: 8em; margin: 0; opacity: 1; } /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ #form form { padding-bottom: .75em; } #form .wpforms-field.wpforms-field-checkbox { margin: 1em 0 0 0; } #form .wpforms-submit-container { position: absolute; bottom: 0; right: 0; } /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ #s1_grazie .cross_1, #s1_404 .cross_1 { left: 2.5%; width: 3.5rem; } #s1_grazie .svg_plus, #s1_404 .svg_plus { top: calc(3.5em + 5%); width: 2em; opacity: 1; } #s1_grazie :where(.circle_15, .svg_tab_1, .el_big_num), #s1_404 :where(.circle_15, .svg_tab_1, .el_big_num) { display: block; } #s1_grazie .circle_15, #s1_404 .circle_15 { bottom: 5%; left: 10%; width: 8em; } #s1_grazie .svg_tab_1, #s1_404 .svg_tab_1 { bottom: 20%; right: 0; width: 6em; } #s1_grazie .el_big_num, #s1_404 .el_big_num { top: calc(3.5rem + 10%); left: 17.5%; font-size: 100%; text-align: center; color: var(--blue-l); } } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1281 x 720 -> 1366 x 768 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1281px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ /* Nav Menu */ #main_nav .menu_wrapper .cross_1 { bottom: 55%; width: 4.5em; } /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Links */ /* Vars */ /* Scroll */ /* Swiper Nav */ /* Components */ /* Fixed Chat */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ footer .cross_7 { bottom: 45%; left: 87.5%; } /* Structure */ .foot_block.w50s { width: calc(((100% - (var(--c7o) * 3)) / 3) - 1px); } .foot_block h4 { white-space: nowrap; } .foot_block p, #foot_menu nav { font-size: 87.5%; } #foot_company .flex-t { gap: 0 calc(var(--c3o) + 1.375em); } #foot_company .flex-t p { width: calc(50% - ((var(--c3o) / 2) + (1.375rem / 2))); } #foot_menu.foot_block { align-items: flex-start; } #foot_menu > div { width: 100%; } #foot_menu nav ul { column-gap: calc(var(--c3o) + 1.375em); } #foot_contatti .block { width: calc(50% - (var(--c3o) / 2)); } #foot_contatti .block h5 { white-space: nowrap; } /* Credits */ /* Back Top */ /* Frame */ /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ .s1_title h1 { font-size: calc(var(--h1-size) * .875); } /* Section 1 - Page */ .s1_page .s1_title p { max-width: 65%; } .s1_page .el_circle { top: auto; bottom: calc(var(--c10v) + 12em); } .s1_page .circle_6 { bottom: 17.5%; left: 12.5%; width: 6em; } .s1_page .circle_8 { left: 32.5%; width: 12em; } .s1_page .cross_1 { width: 4.5rem; } /* Section 1 - Single */ .s1 .gallery_x5 .img_1 { transform: translate(0%, 50%) rotate(0deg) scale(0); } .s1 .gallery_x5 .img_4 { transform: translate(35%, -100%) rotate(0deg) scale(0); } .s1 .gallery_x5 .img_5 { transform: translate(0%, -60%) rotate(0deg) scale(0); } .s1 .gallery_x5.active .img_1 { transform: translate(0%, 35%) rotate(3.25deg) scale(1); } .s1 .gallery_x5.active .img_4 { transform: translate(35%, -75%) rotate(-7.5deg) scale(1); } .s1 .gallery_x5.active .img_5 { transform: translate(0%, -75%) rotate(12.5deg) scale(1); } .s1_single .circle_7 { top: 40%; width: 12em; } /* Section Motivi */ #sec_motivi .el_circle { top: 25%; left: 57.5%; } #page_azienda #sec_motivi .letter_b_alt { top: 27.5%; } #sec_motivi .cross_7 { top: 17.5%; right: var(--c5o); width: 5em; } #sec_parco .letter_a { opacity: 1; } #sec_parco .circle_10 { width: 8em; } #sec_parco .cross_8 { bottom: 10%; left: 30%; width: 4.5em; } #sec_parco .el_big_num_1 { font-size: 125%; } /* Section Settori */ #sec_settori .container > .text { padding-left: var(--c5o); } #sec_settori .circle_7 { bottom: var(--c20v); width: 12em; } #sec_settori .cross_8 { bottom: var(--c12v); width: 4.5em; } /* Section Parco Macchine */ #sec_parco .text + .text { align-self: flex-end; } .scroll_fill p { font-size: 175%; } /* Section FAQ */ .sec_faq .wrapper { max-width: 1024px; margin-right: auto; margin-left: auto; } .sec_faq .letter_b_alt { opacity: 1; } /* Section Form */ #sec_form .circle_1 { width: 8em; } #sec_form .cross_8 { bottom: calc(var(--c15v) + 8em); right: calc(var(--c3o) + 8em); width: 4.5em; } /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ /* Card Page */ /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ #s1_home > .cross_3 { right: 20%; } #s1_home > .cross_4 { left: 65%; } #s1_home .container .circle_3 { width: 10em; opacity: .25; } /* Sec 2 */ /* Sec 3 */ #s3_home .el_circle { top: 60%; } #s3_home .circle_4 { top: 65%; } #s3_home .cross_7 { opacity: 1; } #s3_home .svg_plus { top: 65%; } /* Sec 4 */ #s4_home .text p { width: 75%; margin-left: 25%; } #s4_home .text :where(p, .link) { margin-left: 25%; } #s4_home .sec_img picture { transform: translate(5%, -5%) rotate(5deg); } #s4_home .letter_c { top: 20%; left: 55%; } #s4_home .circle_5 { bottom: 12.5%; right: 35%; } #s4_home .cross_3 { bottom: 20%; left: var(--c5o); } #s4_home .el_num_triangle { bottom: 10%; } /* Sec 5 */ #s5_home .wrapper .card_1 { transform: translate(-5%, 0%) rotate(-2.5deg); } #s5_home .wrapper .card_2 { transform: translate(10%, 6.25%) rotate(5deg); } #s5_home .wrapper .card_3 { transform: translate(-10%, 15%) rotate(-3deg); } #s5_home .wrapper .card_4 { transform: translate(5%, 20%) rotate(1.5deg); } /* Sec 6 */ #s6_home .card_pic { width: 62.5%; } /* Sec 9 */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template Azienda */ #s3_azienda .sec_title { align-self: flex-start; margin-top: var(--c15v); text-align: right; } #s2_azienda .anno + .text { margin-top: 15vw; } #s2_azienda .anno { transform: translate(-35%, 0%); width: 3ch; } #s2_azienda .circle_6 { top: 37.5%; right: 7.5%; } #s3_azienda .container { padding: 1rem var(--c5o); } #s3_azienda .card p.num { font-size: 215%; } #s3_azienda .card p.num + p { margin-top: 1rem; } #s3_azienda .card p { font-size: 125%; } #s3_azienda .svg_tab_4 { top: 7.5%; right: 25%; opacity: 1; } #s3_azienda .svg_tab_4 text { font-size: 125%; } #s3_azienda .svg_cariola { top: 50%; left: 12.5%; transform: translateY(-50%); } #s3_azienda .svg_plus { bottom: 20%; right: 47.5%; } #s3_azienda .el_big_num_1 { bottom: 10%; right: 37.5%; font-size: 125%; } #s6_azienda .sec_img { padding: 0 var(--c2o); } #s6_azienda .text { padding-top: var(--c7v); } #s6_azienda .svg_tab_5 { width: 9em; opacity: 1; } #s6_azienda .el_big_num_1 { top: 45%; } #s6_azienda .svg_plus { width: 2em; } /* Template Servizi */ #s1_servizi .svg_tab_1 { bottom: 15%; left: 47.5%; width: 8em; } #s2_servizi .swiper { width: 100%; margin-right: 0; padding-right: 1.25em; } #s2_servizi .svg_plus { left: 37.5%; } #s2_servizi .letter_a_alt { bottom: 2.5%; } /* Template Lavorazioni */ #s2_lavorazioni .letter_a_alt { left: 2.5%; opacity: 1; } #s2_lavorazioni .circle_6 { top: 35%; right: 7.5%; opacity: 1; } #s2_lavorazioni .el_big_num { top: 15%; } .card_lavorazione.card_1 picture { transform: rotate(-2.5deg); } .card_lavorazione.card_2 { margin-top: 6.25%; } .card_lavorazione.card_2 picture { transform: rotate(2.5deg); } .card_lavorazione.card_2 .btn { top: 60%; } #s3_lavorazioni .circle_12 { bottom: 7.5%; } #s3_lavorazioni .el_big_num_2 { bottom: 10%; } #s3_lavorazioni .cross_2 { bottom: 7.5%; } #s5_lavorazioni .wrapper { width: 75%; margin-left: auto; margin-right: var(--c5o); } #s5_lavorazioni .svg_tab_5 { top: 35%; left: 52.5%; opacity: 1; } #s5_lavorazioni .circle_5 { top: 32.5%; right: 17.5%; } #s5_lavorazioni .cross_9 { left: 10%; width: 4.5rem; } #s6_lavorazioni .text p { max-width: 75%; margin-left: 25%; } #s6_lavorazioni .circle_6 { bottom: 20%; left: 41.25%; width: 5em; opacity: 1; } #s6_lavorazioni .svg_plus { top: 25%; left: 5%; } #s6_lavorazioni .el_big_num_2 { bottom: 6.25%; font-size: 250%; } #s8_lavorazioni .el_circle { top: 40%; } #s8_lavorazioni .circle_5 { display: block; top: 15%; left: 2.5%; width: 6em; opacity: .25; } #s8_lavorazioni .el_big_num_1 { top: 42.5%; bottom: auto; right: auto; left: 5%; } #s8_lavorazioni .cross_9 { top: 15%; left: auto; right: 5%; opacity: 1; } /* Template Settori */ #s2_settori .circle_6, #s2_quality .circle_6 { top: 12.5%; right: 10%; } .sec_slider_sub .nav_wrapper { position: absolute; top: var(--c12v); left: calc(((100% / 3) * 2) + 1.75em); transform: translateY(-50%); width: fit-content; margin: 0; z-index: 2; } .sec_slider_sub .circle_1 { right: 12.5%; opacity: 0; } .sec_slider_sub .svg_plus { right: calc(12.5% - 2em); } .sec_slider_sub .el_big_num_2, #s3_contatti .el_big_num { transform: translate(5%, 37.5%); } #s3_single_settori .el_big_num_1, #s3_single_quality_cert .el_big_num_1 { top: 17.5%; font-size: 125%; } #s3_single_settori .el_big_num_2, #s3_single_quality_cert .el_big_num_2 { bottom: 10%; } #s4_single_settori .container > .text h2 { max-width: 20ch; margin: 0 auto; } #s4_single_settori .el_circle, #s4_single_settori .circle_5 { top: 37.5%; } #s4_single_settori .cross_9 { top: 20%; right: var(--c5o); width: 3.5em; } #s4_single_settori .el_big_num_1 { top: 22.5%; left: 10%; font-size: 125%; opacity: 1; } /* Template Parco Macchine */ #s3_parco .card .sec_img > picture { aspect-ratio: 16 / 9; } /* Template Qualità */ #s3_quality .container { padding-right: var(--c10o); padding-left: var(--c10o); } /* Template Processi Produttivi */ #s3_processi .nav_wrapper { position: absolute; top: var(--c12v); width: fit-content; margin: 0; } /* Template Lavora con noi */ #s2_lavora .wrapper { margin-top: 40%; } #s2_lavora .circle_6 + .circle_6 { top: 37.5%; } /* Template Contatti */ #s2_contatti .container { padding-top: calc(var(--c12v) + 12.5%); } #s2_contatti .sec_title h2 { max-width: 12ch; } .card.card_contact { gap: 1em; } #s2_contatti .map_block iframe { aspect-ratio: 16 / 9; } #s2_contatti .circle_6 { top: 20%; right: 37.5%; } .card_info { padding: 2.5em 2em; } .card_info .text p.h3 { font-size: 200%; } .card_info .text p.h4 { font-size: 167.5%; } .card_info .text p { font-size: 112.5%; line-height: 1.75; } /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ .s2_page.s2_single .svg_plus { left: 45%; } .s2_single .cross_1 { bottom: 7.5%; right: 62.5%; width: 4.5em; } .s2_page .circle_6 { bottom: 10%; right: 55%; } /* Single Servizi */ #s3_single_service .wrapper { margin-top: -10%; } #s3_single_service .svg_plus { right: -17.5%; opacity: 1; } #s3_single_service .circle_10 { top: 75dvh; transform: translateX(-45%); } #s3_single_service .cross_2 { top: 75dvh; right: -12.5%; } /* Single Lavorazioni */ #s3_single_lavorazioni picture.w65, .struttura_text_img .img_2 { transform: translate(100%, 0%) rotate(0deg) scale(.5); } #s3_single_lavorazioni picture.w65.active, .struttura_text_img .img_2.active { transform: translate(40%, -55%) rotate(7.5deg) scale(1); } /* Single Settori */ #s4_single_settori .card .card_img > picture { aspect-ratio: 3 / 4; } /* Single Qualità - Quality Flow */ #s3_single_quality_flow .el_big_num_1 { top: 30%; left: var(--c3o); font-size: 125%; } #s3_single_quality_flow .circle_6 { bottom: 17.5%; } #s3_single_quality_flow .el_big_num_2 { font-size: 175%; } /* Single Qualità - Sostenibilità */ #s5_single_quality_sustain .el_big_num_2 { margin-bottom: -10%; } /* Single Qualità - Certificazioni */ /* Single Processi */ .struttura_text_img .cross_2 { right: 12.5%; opacity: 1; } .struttura_faq .svg_tab_3 { width: 10em; } .sec_faq .cross_7, .struttura_faq .cross_7 { width: 4.5em; } /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀█▀ ▄▀▀▄ █▀▀▄ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1367 x 768 -> 1919 x 1080 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1367px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ /* Nav Menu */ #main_nav .menu li a { font-size: clamp(1.25em, 4.5vh, 2.5em); } /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Links */ /* Vars */ /* Scroll */ /* Swiper Nav */ /* Components */ /* Fixed Chat */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /*footer .container { flex-wrap: nowrap; gap: 0 2.5em; padding-right: var(--c3o); padding-left: var(--c3o); }*/ /* Structure */ .foot_block > div { width: 100%; } /*.foot_block { flex: 1 1 auto; } #foot_company { min-width: max-content; } #foot_company .flex-t { flex-direction: column; } #foot_company .flex-t p { width: 100%; } #foot_menu nav ul { column-count: 1; column-gap: 0; } #foot_contatti { padding-top: 1.25em; padding-left: 0; } #foot_contatti .block { width: 100%; } footer .svg_plus { bottom: 15%; left: 17.5%; } footer .el_num_triangle { top: auto; bottom: 10%; right: 50%; font-size: 125%; opacity: 1; } footer .circle_13 { bottom: 10%; left: 22.5%; width: 8em; opacity: 1; } footer .cross_7 { bottom: 12.5%; left: 60%; width: 5em; }*/ /* Credits */ /* Back Top */ /* Frame */ /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ /* Section 1 - Page */ /* Section 1 - Single */ /* Section Motivi */ /* Section Settori */ /* Section Parco Macchine */ /* Section FAQ */ /* Section Form */ /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ /* Card Page */ /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ #s1_home h1 { margin-top: -2.525em; } /* Sec 2 */ /* Sec 3 */ section .container.h100 { min-height: 0; } /* Sec 4 */ #s4_home .sec_img.active picture { transform: translate(5%, -10%) rotate(5deg) scale(1); } /* Sec 5 */ #s5_home .wrapper { padding-right: var(--c5o); } /* Sec 6 */ #s6_home .card_pic { width: 50%; } /* Sec 9 */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template Azienda */ /* Template Servizi */ /* Template Lavorazioni */ .card_lavorazione .btn .text h3 { font-size: 1.25rem; } #s6_lavorazioni .sec_img { padding: 0 var(--c1o); } /* Template Settori */ #s2_servizi .swiper-slide.swiper-slide-next a, .sec_slider_sub .swiper-slide.swiper-slide-active a { transform: scale(.875); } #s2_servizi .swiper-slide.swiper-slide-next a .text, .sec_slider_sub .swiper-slide.swiper-slide-active a .text { transform: translateY(5.25em); transition: .25s ease; will-change: transform; } #s2_servizi .swiper-slide.swiper-slide-next a .text .link, .sec_slider_sub .swiper-slide.swiper-slide-active a .text .link, .sec_slider_sub .swiper-slide.swiper-slide-active a .text > div img { transform: scale(0); opacity: 0 } #s2_servizi .swiper-slide.swiper-slide-active a, .sec_slider_sub .swiper-slide.swiper-slide-next a { transform: scale(1); } #s2_servizi .swiper-slide.swiper-slide-active a .text, .sec_slider_sub .swiper-slide.swiper-slide-next a .text { transform: translateY(0); } #s2_servizi .swiper-slide.swiper-slide-active a .text .link, .sec_slider_sub .swiper-slide.swiper-slide-next a .text .link, .sec_slider_sub .swiper-slide.swiper-slide-next a .text > div img { transform: scale(1); opacity: 1; } .sec_slider_sub .nav_wrapper { left: calc(50% + 1.75em); } /* Template Parco Macchine */ /* Template Qualità */ /* Template Process Produttivi */ #s3_parco .card .sec_img > picture { aspect-ratio: 4 / 3; } /* Template Lavora con noi */ /* Template Contatti */ .card_info .text p { font-size: 125%; } /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ /* Single Servizi */ /* Single Lavorazioni */ /* Single Settori */ /* Single Qualità - Quality Flow */ /* Single Qualità - Sostenibilità */ /* Single Qualità - Certificazioni */ /* Single Processi */ /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ } /** * * █ █ █▀▀▄ █▀▀ █▀▀▄ * █ █ █▀▀█ █▀▀ █▐█▀ * ▀▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - ÜBER | 1921 -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1921px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ /* Nav Menu */ #main_nav .menu li a { font-size: clamp(1.25em, 2vw, 2.5em); } /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Links */ /* Vars */ /* Scroll */ /* Swiper Nav */ /* Components */ /* Fixed Chat */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Structure */ .foot_block p, #foot_menu nav { font-size: 100%; } /* Credits */ /* Back Top */ /* Frame */ /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ /* Section 1 - Page */ /* Section 1 - Single */ /* Section Motivi */ /* Section Settori */ /* Section Parco Macchine */ /* Section FAQ */ /* Section Form */ /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ /* Card Page */ /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ #s1_home h1 { margin-top: -2.65em; } /* Sec 2 */ /* Sec 3 */ /* Sec 4 */ /* Sec 5 */ /* Sec 6 */ /* Sec 9 */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template Azienda */ #s6_azienda .el_big_num_2 { font-size: 450px; } /* Template Servizi */ /* Template Lavorazioni */ /* Template Settori */ /* Template Parco Macchine */ #s3_parco .swiper-slide.swiper-slide-active .text { padding-left: calc(100% / 3); } /* Template Qualità */ /* Template Process Produttivi */ /* Template Lavora con noi */ /* Template Contatti */ /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ /* Single Servizi */ /* Single Lavorazioni */ /* Single Settori */ /* Single Qualità - Quality Flow */ /* Single Qualità - Sostenibilità */ .sec_sostenibilita .megaText { font-size: clamp(2.25em, 10vw, 8em); } /* Single Qualità - Certificazioni */ /* Single Processi */ /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ } /** * * ▄▀█ █ ▄▀ * █▄▄█▄ █▀▄ * █ ▀ ▀▀ - DESKTOP 4K & UP | 2561px -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and ( min-width: 2561px ) {}