/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " Impresa migliorati " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █ █ █▀▀ ▄▀▀▄ █▀▀▄ █▀▀ █▀▀▄ * █▀▀█ █▀▀ █▀▀█ █ █ █▀▀ █▐█▀ * ▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - HEADER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ header { z-index: 4; } .head_wrapper { padding: 1rem; z-index: 2; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .head_logo { display: inline-block; --head-logo-width: 150px; /* <- in 'px' */ --head-logo-min: 150; --head-logo-max: 280; max-width: 280px; } .head_logo :where(img, svg) { width: 100%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAD CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .fixed_head { display: flex; align-items: center; justify-content: center; position: fixed; top: 1rem; right: 1rem; } .btn_servizi { display: inline-flex; gap: .5rem; padding: .5rem; height: 3rem; border-radius: .5rem 0 0 .5rem; background-color: rgb(var(--black-rgb) / 50%); border: 2px solid var(--white); border-right: 0; font-size: 1rem; color: var(--white); font-weight: 700; text-transform: uppercase; } .btn_servizi.tapped svg { transform: rotate(180deg); } .btn_servizi svg { width: .75rem; min-width: .75rem; } .btn_servizi svg path { fill: var(--white); transition: .25s ease } .btn_servizi:hover { color: var(--red); } .btn_servizi:hover path { fill: var(--red); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HAMBURGER / MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #hamburger { display: inline-block; font-size: var(--rem); line-height: 0; background: linear-gradient(to top, var(--gradient)); border-radius: 0 .5rem .5rem 0; padding: .625rem .75rem; overflow: visible; cursor: pointer; transition: .25s ease; } #hamburger .wrap { width: 2em; height: 1.75rem; } #hamburger span { display: block; position: absolute; left: 50%; transform: translateX(-50%); width: 2em; height: 4px; background-color: var(--black); 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; } /* Tapped / Clicked animation */ #hamburger.tapped span { background-color: var(--black); 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; z-index: 1; background: linear-gradient(to top, var(--gradient)); padding: 2.5rem 1.5rem; border-radius: .5rem; position: fixed; top: calc(80px + (115 - 80) * ((100vw - 320px) / 1600)); right: 1rem; margin-bottom: -1rem; width: 15rem; } #main_nav li + li { margin-top: 1rem; } #main_nav li a { font-size: 1.25rem; text-transform: uppercase; color: var(--black); font-weight: 600; } #main_nav li a:hover { color: var(--red); transform: scale(1.05); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ NAV SERVIZI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #second_nav { display: none; z-index: 1; border-radius: .5rem; border: 1px solid var(--white); background-color: rgb(var(--black-rgb) / 80%); backdrop-filter: blur(10px); position: fixed; top: calc(80px + (115 - 80) * ((100vw - 320px) / 1600)); right: 4.5rem; margin-bottom: -1rem; width: calc(100% - clamp(6rem, 10vw, 10rem)); } #second_nav .wrapper { display: grid; align-items: center; grid-template-columns: 1fr; } .box_menu_serv { gap: 2rem; padding: 1.5rem; text-align: center; height: 100%; } .box_menu_serv + .box_menu_serv { border-top: 1px solid var(--white); } .box_menu_serv:hover { background-color: rgb(var(--blue-rgb) / 20%); } .box_menu_serv img { width: 2rem; } .box_menu_serv p { text-transform: uppercase; color: var(--white); font-size: 1rem; font-weight: 700; line-height: 1.125; } /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKs / BTNs STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .link { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; position: relative; width: fit-content; padding: .75em 1em; border-radius: .25rem; border: 1px solid var(--black); font: inherit; font-size: 1.125rem; font-weight: 700; text-transform: uppercase; color: var(--black); } .link span { text-transform: uppercase; } .link svg { width: 1.25rem; } .link svg path { fill: var(--black); transition: .25s ease; } .link:hover, .link:focus, .link:active { background-color: var(--white); color: var(--red); } .link:hover svg path, .link:focus svg path, .link:active svg path { fill: var(--red); } .link.white { color: var(--white); border-color: var(--white); } .link.white svg path { fill: var(--white); } .link.white:hover, .link.white:focus, .link.white:active { background-color: var(--white); color: var(--red); } .link.white:hover svg path, .link.white:focus svg path, .link.white:active svg path { fill: var(--red); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .filter_grad { background: linear-gradient(to top, var(--gradient)); } .filter_red { background-color: var(--red); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .first_par p:first-of-type { font-size: calc(var(--p-size) * 1.25); font-weight: 500; } .slogan { font-weight: 700; text-align: center; white-space: nowrap; line-height: 1; } .line { height: 2px; background: linear-gradient(to right, transparent 50%, #223049 50%); background-size: 50px 2px, 100% 2px; } .line_vert { height: 100%; width: 2px; background: linear-gradient(to bottom, transparent 50%, #223049 50%); background-size: 2px 50px; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SCROLL BUTTON ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #scroll_btn { display: inline-block; margin-top: 2rem; --scroll-px: 35px; --scroll-min: 35; --scroll-max: 50; max-width: 50px; 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(--white); transition: .25s ease; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SWIPER NAV ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .nav_btn { top: 50%; transform: translateY(-50%); width: 3.5em; padding: .25em; z-index: 1; cursor: pointer; transition: .25s ease; } .nav_btn :where(img, svg) { width: 100%; } .nav_btn svg path { fill: var(--black); transition: .25s ease; } .nav_prev { left: 0; } .nav_next { right: 0; } .nav_btn.swiper-button-disabled { display: none; } /* Dots */ .nav_dots { gap: .5em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ COMPONENTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Social */ .social {} .social a { display: inline-block; width: 3.5em; padding: .25em; } .social a :where(img,svg) { width: 100%; } .social a svg path { transition: .25s ease; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SIDEBAR ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BREADCRUMBS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #breadcrumb { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5em; } #breadcrumb li { list-style: none; margin: 0; } #breadcrumb .separator {} #breadcrumb :where(a,span) { display: inline-block; min-width: fit-content; color: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █▀▀ ▄▀▀▄ ▄▀▀▄ ▀▀█▀▀ █▀▀ █▀▀▄ * █▀▀ █ █ █ █ █ █▀▀ █▐█▀ * ▀ ▀▀ ▀▀ ▀ ▀▀▀ ▀ ▀▀ - FOOTER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ footer .line { position: absolute; left: calc(var(--c5o) * -1); top: 50%; width: calc(100vw - 10px); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ STRUCTURE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .foot_block.loghi { gap: 2rem; background-color: #f0f0f0; padding: 0 1rem; } .foot_block.loghi :where(img, svg) { width: auto; height: clamp(3rem, 5vw, 4rem); object-fit: contain; } /* Foot Block */ .foot_block {} .foot_block h4 { font-size: 1.2rem; color: var(--red); text-transform: uppercase; } .foot_block p { font-size: 1.2rem; } .foot_block p a { font: inherit; } .foot_block p a:hover { color: var(--red); } .foot_block p u {text-decoration-thickness: 1px } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #cta { display: none; z-index: 2; bottom: .5em; right: .5em; --back-top-px: 60px; --back-top-min: 60; --back-top-max: 70; max-width: 70px; padding: .375em; background: linear-gradient(to top, var(--gradient)); cursor: pointer; transition: .25s ease; border-radius: .5rem; } #cta :where(img, svg) { width: 100%; } #cta svg path { fill: var(--black); } /** * * ▄▀▀ █▀▀ ▄▀▀ ▀▀█▀▀ ▀ ▄▀▀▄ █▄ █ ▄▀▀ * ▀▄ █▀▀ █ █ █ █ █ █ ▀█ ▀▄ * ▀▀ ▀▀▀ ▀▀ ▀ ▀ ▀▀ ▀ ▀ ▀▀ - SECTIONS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1 { overflow: hidden; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION ____ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀ ▄▀▀▄ █▀▀▄ █▀▀▄ ▄▀▀ * █ █▀▀█ █▐█▀ █ █ ▀▄ * ▀▀ ▀ ▀ ▀ ▀▀ ▀▀▀ ▀▀ - CARDS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD EMPTY ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_empty { padding: 2em 1.5em; } .card_empty svg { width: 6em; } .card_empty .text { margin-top: 1em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD ____ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s2_home .text .h3 { line-height: 1.25; } #s2_home .mask_m { transform: scale(1.25); } #s2_home .bkg_video { top: 0; left: 0; transform: unset; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s3_home .slogan { opacity: .5; font-size: clamp(17.5vw, 17.5vw, 16.5rem); margin-left: -1rem; } .camions { margin-bottom: -4rem; z-index: 1; position: relative; } .camions img { height: 12rem; width: auto; max-width: 80%; object-fit: contain; filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.20)); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s4_home .filter_black { opacity: .75; } #s4_home .slogan { font-size: clamp(4rem, 12vw, 11.5rem); opacity: .5; color: var(--white); white-space: initial; } .wrapper_servizi { gap: 1rem; grid-template-columns: 1fr 1fr } .box_serv { padding: 2rem 1rem; text-align: center; width: 100% !important; position: relative; } .box_serv::after { content: ""; border: 1px solid var(--white); border-radius: .5rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 100%; width: 100%; transition: .25s ease; } .box_serv img { height: 3rem; width: auto; margin-bottom: 2rem; transition: .25s ease; } .box_serv p { color: var(--white); line-height: 1; font-weight: 700; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 5 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s5_home .emme { width: auto; height: 18rem; transform: translateY(-25%); } #s5_home .slogan { font-size: clamp(4rem, 10vw, 10rem); padding: 2rem 1.5rem 3rem 1.5rem; opacity: .5; white-space: initial; } .wrapper_num_sec { background: linear-gradient(to top, var(--gradient)); overflow-x: clip; } .wrapper_numeri { gap: 3rem 2rem; padding: var(--c7v) var(--c5o); } .numero { text-align: center; } .numero .num { font-size: clamp(4rem, 9vw, 9rem); line-height: 1; color: var(--red); font-weight: 700; } .wrapper_num_sec .line_vert { position: absolute; left: var(--c2o); top: 0; } .wrapper_num_sec .line { position: relative; transform: translateX(var(--c2o)); } .wrapper_num_sec .terra { width: 100%; position: absolute; left: 0; bottom: 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 6 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s6_home .sec_img { aspect-ratio: 1 / 1; border-radius: 1.5rem; background: linear-gradient(to top, var(--gradient_green)); pointer-events: none; } #s6_home .sec_img .cert { position: absolute; top: 0; left: 0; transform: translate(20%, -20%); height: 35%; width: auto; } #s6_home .sec_img .cassa { position: absolute; top: 0; right: 0; transform: translate(20%, -20%); height: 35%; width: auto; filter: drop-shadow(0 0 25px 0 rgba(0, 0, 0, 0.25)); } #s6_home .sec_img .camion { } #s6_home .sec_img .camion img { width: 110%; max-width: unset; transform: translate(-9.1%, 10%); } /** * * █▀▀▄ ▄▀▀▄ ▄▀▀▀ █▀▀ ▄▀▀ * █ █ █▀▀█ █ ▀▌ █▀▀ ▀▄ * █▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀ - TEMPLATES _ PAGINE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CHI SIAMO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ .s1_page { padding-top: calc(80px + (115 - 80) * ((100vw - 320px) / 1600)); } .s1_page .line_vert { position: absolute; left: var(--c2o); top: calc(80px + (115 - 80) * ((100vw - 320px) / 1600)); background: linear-gradient(to bottom, transparent 50%, var(--blue) 50%); background-size: 2px 50px; } .s1_page .emme { position: absolute; top: calc(80px + (115 - 80) * ((100vw - 320px) / 1600)); width: 70%; right: -15%; filter: brightness(0) invert(1); } .s1_page .s1_title p { color: var(--red); font-size: calc(var(--p-size) * 1.25); font-weight: 500; } .s1_page .sec_img { border-radius: 0 1.5rem 1.5rem 0; max-width: 90%; overflow: hidden; } /* Section 2 */ /* Section 3 */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CONTATTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Mappa */ .map { min-height: 25rem; z-index: 1; } .map .leaflet-control-attribution { display: none; } /* Section 1 */ /* Section 2 */ /** * * ▄▀▀▄ █▀▀▄ ▄▀▀▀ █ █ ▀ ▐▌ ▐▌ █▀▀ * █▀▀█ █▐█▀ █ █▀▀█ █ ▀▄▀ █▀▀ * ▀ ▀ ▀ ▀▀ ▀▀▀ ▀ ▀ ▀ ▀ ▀▀▀ - TEMPLATES _ ARCHIVIO * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Search & Filter */ /* Terms Loop */ /* Posts Loop */ .s2_archive .grid { grid-template-columns: 1fr; grid-gap: 2em 1em; } /* Custom pagination */ .pagination {} /* Load More */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀ ▀ █▄ █ ▄▀▀▀ █ █▀▀ * ▀▄ █ █ ▀█ █ ▀▌ █ ▄ █▀▀ * ▀▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ - SINGLE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION RELATED ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █▀▀ ▄▀▀▄ █▀▀▄ █▄ ▄█ * █▀▀ █ █ █▐█▀ █ █ █ * ▀ ▀▀ ▀ ▀▀ ▀ ▀ - FORM * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ #sec_form { overflow-x: clip; } #sec_form p { max-width: 80% } .mask_m { position: relative; margin-bottom: 2rem; width: auto; } .mask_m :where(picture, video) { position: absolute; bottom: 0; right: 0; height: 100%; -webkit-mask-image: url(../images/svg/m.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100%; } .mask_m > img { height: 100%; width: auto; opacity: 0; } /* WP-Form - Custom */ #form { z-index: 1; } #form .wpforms-field label { color: var(--black); font-weight: 400; } #form .wpforms-field :where(input, textarea, select) { background-color: var(--white); border: 0; border-radius: 5px; padding: .75rem .75rem .5rem .75rem; font-size: 1rem; color: var(--black); } #form .wpforms-field select { background-color: var(--white); padding: .5rem .75rem; text-transform: uppercase; } #form .wpforms-field:not(.wpforms-field-checkbox, .wpforms-field-file-upload) label { position: absolute; top: .75rem; left: .75rem; text-transform: uppercase; transition: .25s ease; } #form .wpforms-field:not(.wpforms-field-checkbox, .wpforms-field-file-upload).focus label { transform-origin: left; transform: scale(.625); top: 2px; } #form .wpforms-uploader { padding: 2.5rem .75rem 1.5rem .75rem; } #form .wpforms-field.wpforms-field-file-upload label { position: absolute; top: .75rem; left: .75rem; text-transform: uppercase; transition: .25s ease; } #form .wpforms-field.wpforms-field-checkbox li label a:hover { color: var(--red); } #form button[type=submit] { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; position: relative; width: fit-content; padding: .75em 1em; background-color: var(--white); border-radius: .25rem; border: 0; font: inherit; font-size: 1.125rem; font-weight: 700; text-transform: uppercase; color: var(--black); } #form button[type=submit] span { text-transform: uppercase; } #form button[type=submit] svg { width: 1.25rem; } #form button[type=submit] svg path { fill: var(--black); transition: .25s ease; } #form button[type=submit]:hover, #form button[type=submit]:focus, #form button[type=submit]:active { background-color: var(--white); color: var(--red); } #form button[type=submit]:hover svg path, #form button[type=submit]:focus svg path, #form button[type=submit]:active svg path { fill: var(--red); } /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - EXTRA * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE GRAZIE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_grazie {} /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE 404 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_404 { background-color: var(--bkg_color); } #s1_404 .s1_title h1 { font-size: 2rem; } #s1_404 .s1_title p { font-size: 1.1rem; } #s1_404 .s1_title .link { display: inline-block; padding: 0.9rem 1.7rem; border: 2px solid var(--btn_color); border-radius: 0.6rem; font-size: 1rem; color: var(--btn_color); } #s1_404 .s1_title .link:hover { background-color: var(--btn_color); color: var(--btn_color_hover); transform: scale(1.05); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CSS EXTRA O MOD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ * * RESPONSIVE * * Settare se necessario regole fluid per minmax di elementi specifici basandosi sulle seguenti regole: * => ORIGINAL CALC -> calc( 12px + (24 - 12) * ( (100vw - 360px) / (1920 - 360) ) ) * => CALC 1920px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 1560 ) ) * => CALC 1280px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 920 ) ) * => CALC 1024px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 664 ) ) * * Da creare fluid dinamico con 2 step per i calc iniziali = 1920 -> 1024 1024 -> 360 * * __________________________________________________________________________________________________________________________________________________________________________ */ .head_logo { width: calc( var(--head-logo-width) + ( var(--head-logo-max) - var(--head-logo-min) ) * ( (100vw - 360px) / 1560 ) ); } #scroll_btn { width: calc( var(--scroll-px) + ( var(--scroll-max) - var(--scroll-min) ) * ( (100vw - 360px) / 1560 ) ); } .foot_logo { width: calc( var(--foot-logo-width) + ( var(--foot-logo-max) - var(--foot-logo-min) ) * ( (100vw - 360px) / 1560 ) ); } #back_top { width: calc( var(--back-top-px) + ( var(--back-top-max) - var(--back-top-min) ) * ( (100vw - 360px) / 1560 ) ); } /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ /* Nav Menu */ /* Darkmode Switch */ /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Buttons */ /* Links */ /* Filters */ /* Sections 1 */ /* Breadcrumbs */ /* Scroll */ /* Components */ /* Cards */ /* Sidebar */ /* ... */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Structure */ /* Credits */ /* Back Top */ /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ /* Card Empty */ /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec [...] */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template ... */ /* Template ... */ /* Template ... */ /*∞∞∞∞∞∞ ARCHIVE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec ... */ /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec ... */ /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ /** * * █▄ ▄█ ▄▀▀▄ █▀▀▄ ▀ █ █▀▀ * █ █ █ █ █ █▀▀█ █ █ ▄ █▀▀ * ▀ ▀ ▀▀ ▀▀▀ ▀ ▀▀▀▀ ▀▀▀ - MOBILE PORT | 601 -> 767 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 601px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /*.head_wrapper { padding: 1.5em 2.5%; z-index: 2; }*/ /* Hamburger */ /* Nav Menu */ } /** * * ▀▀█▀▀ ▄▀▀▄ █▀▀▄ █ █▀▀ ▀▀█▀▀ * █ █▀▀█ █▀▀█ █ ▄ █▀▀ █ * ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀ - TABLET | 768 x 1024 -> 1023 x 1280 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 768px) { /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Contents */ /* Credits */ #credits br { display: none; } #credits .resp_sep { display: inline-block; } } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀▀█▀▀ ▄▀▀▄ █▀▀▄ ▄▀▀ █▄ ▄█ ▄▀▀▄ █ █ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ ▀▄ █ █ █ █▀▀█ █ ▄ █ ▄ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ ▀▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀ - LAPTOP | 1024 x 768 -> 1280 x 720 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1024px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ #second_nav { right: 5rem; } #second_nav .wrapper { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .box_menu_serv + .box_menu_serv { border-top: 0; border-left: 1px solid var(--white); } .box_menu_serv { flex-direction: column; padding: 2rem 1rem; } .box_menu_serv img { width: 3rem; } .box_menu_serv p { font-size: 1.25rem; } #hamburger { padding: 1rem .75rem; } #hamburger .wrap { height: 1.75rem; width: 2.5em; } #hamburger span { width: 2.5em; height: 6px; } #hamburger .burger { top: calc(50% - 3px); } .btn_servizi { gap: 1rem; padding: .5rem 1rem; font-size: 1.25rem; height: 3.75rem; } .btn_servizi svg { width: 1rem; min-width: 1rem; } /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ #sec_form .filter { width: 95%; clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%); } #sec_form .mask_m { position: absolute; bottom: 5%; left: 0; height: 97%; width: auto; margin-bottom: 0; transform: translateX(45%); } #form .wpforms-submit-container { display: flex; align-items: center; justify-content: flex-end; margin-top: -2rem; } /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ #credits a:hover, #credits a:active, #credits a:focus { opacity: 1; color: var(--red); } #credits #credits_studio:hover { color: #e74e0f; } /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ /* Sec 1 */ #s1_home .line_vert { position: absolute; left: var(--c2o); top: calc(80px + (115 - 80) * ((100vw - 320px) / 1600)); background: linear-gradient(to bottom, transparent 50%, var(--white) 50%); background-size: 2px 50px; } /* Sec 2 */ #s2_home .container { min-height: 80vh; } #s2_home .filter_red { clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); left: 5%; } #s2_home .text { text-align: right; } #s2_home .mask_m { filter: brightness(.85); position: absolute; top: 50%; left: 0; height: 100%; width: auto; margin-bottom: 0; transform: scale(1.125) translate(-15%, -42.5%); } /* Sec 3 */ #s3_home .text:nth-of-type(1) { margin-top: -7.5%; } /* Sec 4 */ #s4_home .slogan { white-space: nowrap; } .wrapper_servizi { margin-top: -3rem; padding: 0 var(--c5o); grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .box_serv { padding: 2rem 1rem 0rem 1rem; opacity: .5; } .box_serv .link { opacity: 0; } .box_serv.hover { opacity: 1; } .box_serv.hover .link { opacity: 1; } .box_serv.hover::after { height: 120% } .box_serv.hover img { transform: scale(1.25); } .img_servizio { opacity: 0; transition: .25s ease; } .img_servizio.hover { opacity: 1; } /* Sec 5 */ #s5_home .slogan { white-space: nowrap; } .wrapper_num_sec { width: 98%; border-radius: 0 1.5rem 1.5rem 0; } .wrapper_numeri { grid-template-columns: 1fr 1fr 1fr; } .wrapper_num_sec .terra { width: 100%; border-radius: 0 0 1.5rem 0; } } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1281 x 720 -> 1366 x 768 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1281px) { } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀█▀ ▄▀▀▄ █▀▀▄ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1367 x 768 -> 1919 x 1080 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1367px) { /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ } /** * * █ █ █▀▀▄ █▀▀ █▀▀▄ * █ █ █▀▀█ █▀▀ █▐█▀ * ▀▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - ÜBER | 1921 -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1921px) {} /** * * ▄▀█ █ ▄▀ * █▄▄█▄ █▀▄ * █ ▀ ▀▀ - DESKTOP 4K & UP | 2561px -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and ( min-width: 2561px ) {}