/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " Studio ZPS " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █ █ █▀▀ ▄▀▀▄ █▀▀▄ █▀▀ █▀▀▄ * █▀▀█ █▀▀ █▀▀█ █ █ █▀▀ █▐█▀ * ▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - HEADER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .header { z-index: 4; } .head_wrapper { padding: 1em 1.5em; z-index: 2; } #mouse { display: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .head_logo { display: inline-block; --head-logo-width: 150px; /* <- in 'px' */ --head-logo-min: 150; --head-logo-max: 250; max-width: 250px; } .head_logo :where(img, svg) { width: 100%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAD CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .header .flex-el { position: fixed; top: 1.5em; right: 2.5% } .open_sub_menu { margin-left: 1rem; } .head_link { display: inline-flex; gap: .5rem; position: relative; padding: .625rem .5rem; border: 1px solid var(--black); border-radius: 1.5rem; background-color: var(--white); font: inherit; font-size: .75rem; color: var(--black); text-transform: uppercase; z-index: 1; } .head_link svg { width: 1rem; } .active .head_link { border-color: transparent; } .sub_menu button { opacity: 0; display: inline-flex; gap: .5rem; position: relative; margin-bottom: 0; font: inherit; font-size: .75rem; color: var(--black); text-transform: uppercase; } .sub_menu { display: none; position: absolute; right: -1px; top: -1px; z-index: 0; width: calc(100% + 2px); background-color: var(--white); padding: .5rem 1rem; border: 1px solid var(--black); border-radius: 1.25rem; } .sub_menu a:not(.link) { padding: .625rem 0; border-bottom: 1px solid var(--black); font-size: .85rem; } .sub_menu a:not(.link):last-of-type { border-bottom: 0; } .sub_menu a:not(.link):hover { color: var(--light); } nav.sub_menu { width: 80vw; top: unset; bottom: 0; transform: translateY(calc(100% + 1rem)); background-color: var(--black); } nav.sub_menu a:not(.link) { color: var(--white); border-bottom: 1px solid var(--white) !important; } nav.sub_menu li:last-of-type a { border: 0 !important; } nav.sub_menu .link { margin-top: .75rem; padding: .75rem 1.25rem; border-radius: 5rem; border: 1px solid var(--white); } nav.sub_menu .link svg { transform: unset; } nav.sub_menu .link span::after { display: none; } .close_menu.filter { pointer-events: initial; z-index: 1; display: none; position: fixed; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HAMBURGER / MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #hamburger { display: inline-block; font-size: var(--rem); line-height: 0; background-color: var(--black); border-radius: 5rem; padding: .5em .5em; overflow: visible; cursor: pointer; transition: .25s ease; aspect-ratio: 1 / 1; } #hamburger .wrap { width: 2em; height: 1.25em; } #hamburger span { display: block; position: absolute; left: 50%; transform: translateX(-50%); width: 1.5em; height: 3px; border-radius: .2em; background-color: var(--white); transform-origin: center; will-change: transform; transition: .25s ease; } #hamburger .top_bun { top: 0; } #hamburger .burger { top: calc(50% - 1.5px); } #hamburger .bottom_bun { bottom: 0; } /* Tapped / Clicked animation */ #hamburger.tapped span { transition: .25s ease; } #hamburger.tapped .burger { opacity: 0; } #hamburger.tapped .top_bun { top: 50%; transform: translate(-50%,-50%) rotate(45deg); } #hamburger.tapped .bottom_bun { top: 50%; transform: translate(-50%,-50%) rotate(-45deg); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ DARKMODE SWITCHER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKs / BTNs STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .link { display: inline-flex; position: relative; gap: .75rem; font-size: 1.125rem; color: var(--black); font-weight: 600; text-transform: uppercase; overflow: clip; } .link span { position: relative; display: inline-block; } .link span::after { content: ""; width: 100%; height: 1px; background-color: rgb(var(--black-rgb) / 50%); position: absolute; left: 0; bottom: 0; transition: .25s ease; } .link svg { width: 1rem; transition: .125s ease-in-out .125s; } .link svg path { fill: var(--black); transition: .25s ease; } .link:hover { transform: scale(1.05); color: var(--light); } .link:hover span::after { background-color: var(--light); } .link:hover svg { transform: translate(1.5rem,-1.5rem); transition: .125s ease-in-out; } .link:hover svg path { fill: var(--light); } .link svg:nth-of-type(2) { position: absolute; right: 0; transform: translate(-1.5rem,1.5rem); transition: .125s ease-in-out; } .link:hover svg:nth-of-type(2) { transform: translate(0,0); transition: .125s ease-in-out .125s; } .link.white { color: var(--white); } .link.white span::after { background-color: var(--white); } .link.white svg path { fill: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .bkg_light { background-color: var(--light); } .pretitle { text-transform: uppercase; font-weight: 600; font-size: 120%; } .black { color: var(--black); } .light { color: var(--light); } .big { font-size: 150%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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: 2.5em; z-index: 1; cursor: pointer; transition: .25s ease; } .nav_btn.abs { top: 50%; transform: translateY(-50%); } .nav_btn :where(img, svg) { width: 100%; } .nav_btn svg path { fill: var(--black); transition: .25s ease; } .nav_prev { left: 0; } .nav_next { right: 0; } .nav_btn.swiper-button-disabled { display: none; } /* Dots */ #nav_dots .swiper-pagination-bullet { background-color: var(--blue); margin-top: 1.5rem; } #nav_dots .swiper-pagination-bullet-active { } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* * Se presenti position sticky, ricordarsi di disattivare nel foundation l' "overflow: hidden;" del "main" - riga 360 * Il valore "top" è indispensabile ed è l'offset dal top dello schermo se impostato */ .sticky { top: 15vh; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ ANIMAZIONI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* S1 home */ .trigger .mask { opacity: 0; clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%); transition: 1s ease; } .trigger.active .mask { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .trigger .text { overflow: clip } .trigger .text h1 { transform: translateY(-100%); opacity: 0; transition: .5s ease .75s; } .trigger.active .text h1 { transform: translateY(0); opacity: 1; } /* Titoli */ .s1_title.textAnim { opacity: 0; } .s1_title.textAnim.active { opacity: 1; } .line_hide { overflow: clip } /* Testo normale */ .text.textAnim p, .text.textAnim li { transform: translateY(2rem); opacity: 0; transition: .5s ease .25s; } .text.textAnim.active p, .text.textAnim.active li { transform: translateY(0); opacity: 1; } /* Card */ .card.trigger { transform: translateY(50%); opacity: 0; transition: .5s ease; } .card.trigger.active { transform: translateY(0); opacity: 1; } .card.trigger:nth-of-type(3n + 2) { transition-delay: .125s; } .card.trigger:nth-of-type(3n + 3) { transition-delay: .25s; } /** * * █▀▀ ▄▀▀▄ ▄▀▀▄ ▀▀█▀▀ █▀▀ █▀▀▄ * █▀▀ █ █ █ █ █ █▀▀ █▐█▀ * ▀ ▀▀ ▀▀ ▀ ▀▀▀ ▀ ▀▀ - FOOTER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ footer { background-color: var(--black); overflow: hidden; } footer p, footer h4 { color: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ STRUCTURE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .foot_left { border-bottom: 1px solid rgb(var(--white-rgb ) / 50%); border-right: 1px solid rgb(var(--white-rgb ) / 50%); } .foot_left .top { padding: var(--c15v) var(--c5o) var(--c10v) var(--c5o); border-bottom: 1px solid rgb(var(--white-rgb ) / 50%); } .foot_left .top p { font-size: clamp(4rem, 15vw, 8vw); font-family: var(--title-font); font-weight: 250; color: var(--white); } .foot_left .top p b { font-family: var(--bold-font); font-size: 80%; } .foot_left .bottom { padding: var(--c10v) var(--c2o) var(--c10v) var(--c5o); } .foot_right { padding: var(--c15v) var(--c5o); height: 100%; border-bottom: 1px solid rgb(var(--white-rgb ) / 50%); } .foot_right h4 { font-size: clamp(2rem, 4vw, 4.5rem); } .foot_right p a:hover { color: var(--light); } .foot_right .trigger { transform: translateX(100%); opacity: 0; transition: .5s ease .5s; } .foot_right .trigger.active { transform: translateX(0); opacity: 1; } .bottom .w33l.trigger { transform: translateY(50%); opacity: 0; transition: .5s ease; } .bottom .w33l.trigger.active { transform: translateY(0); opacity: 1; } .bottom .w33l.trigger:nth-of-type(3n + 2) { transition-delay: .125s; } .bottom .w33l.trigger:nth-of-type(3n + 3) { transition-delay: .25s; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CREDITS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #credits p { font-size: .825em; line-height: 1.5; color: var(--white); z-index: 1; } #credits .resp_sep { display: none; } #credits a { display: inline-block; font: inherit; color: inherit; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .footer_menu { border-bottom: 1px solid rgb(var(--white-rgb ) / 50%); } .footer_menu .flex { gap: .5rem 1rem; } .footer_menu li a { color: var(--white); font-size: .85rem; padding: .375em 1.25em; border-radius: 4rem; border: 1px solid var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BACK TO TOP ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #back_top { display: none; z-index: 2; position: absolute; bottom: 1em; right: 1em; --back-top-px: 40px; --back-top-min: 40; --back-top-max: 40; max-width: 40px; cursor: pointer; transition: .25s ease; } #back_top :where(img, svg) { width: 100%; } #back_top svg path { fill: var(--white); } /** * * ▄▀▀ █▀▀ ▄▀▀ ▀▀█▀▀ ▀ ▄▀▀▄ █▄ █ ▄▀▀ * ▀▄ █▀▀ █ █ █ █ █ █ ▀█ ▀▄ * ▀▀ ▀▀▀ ▀▀ ▀ ▀ ▀▀ ▀ ▀ ▀▀ - SECTIONS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1 { overflow: hidden; padding-top: calc( 90px + ( 160 - 90 ) * ( (100vw - 320px) / 1600 ) ); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION DIFFERENZE BLU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #sec_diff { background-color: var(--blue); overflow: hidden; } #sec_diff h2 { position: absolute; left: 0; bottom: 0; color: var(--white); font-size: clamp(7vh, 7vw, 7vw); white-space: nowrap; transform: translateX(-50%); } #sec_diff h2 b { color: var(--white); } .wrapper_diff { width: 50rem; max-width: 90%; margin-bottom: var(--c10v); } .punto { padding: 1.5rem 0 2.5rem 0; border-bottom: 1px solid var(--white); gap: 1rem; } .punto .num { padding: .75rem 2rem; border-radius: 5rem; border: 1px solid var(--white); } .punto .num p { font-weight: 700; color: var(--white); } .punto .text h3 { font-size: clamp(1.5rem, 3vw, 3rem); } .punto .text p { margin-top: 1rem; font-weight: 700; font-size: 1rem; } /** * * ▄▀▀ ▄▀▀▄ █▀▀▄ █▀▀▄ ▄▀▀ * █ █▀▀█ █▐█▀ █ █ ▀▄ * ▀▀ ▀ ▀ ▀ ▀▀ ▀▀▀ ▀▀ - CARDS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .mask img { opacity: .75; z-index: 1; position: relative; pointer-events: none; } .mask video { -webkit-mask-image: url(../images/svg/mask_mobile.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100%; height: 100%; } #s1_home .text { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--black); } #s1_home .text h1 { font-size: clamp(1.125rem, 2vw, 1.5rem); } #s1_home .mask p { position: absolute; right: 0; bottom: 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s3_home .card h3 { font-size: calc(var(--h3-size) * 1.125) } #s3_home .card p { margin-top: 2em; margin-bottom: 2em } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .titolone { padding: 2rem 1rem; text-align: center; } .titolone h2 { font-size: clamp(10vw, 10vw, 10rem); text-transform: uppercase; } .titolone h2 b { color: var(--black); } .punto_elenco.flex { gap: 1rem; padding: 2rem; } .punto_elenco svg { width: clamp(1.5rem, 5vw, 3rem); min-width: clamp(1.5rem, 5vw, 3rem); transition: .125s ease-in-out .125s; } .punto_elenco svg path { fill: var(--black); transition: .25s ease; } .punto_elenco:hover svg { transform: translate(25%, -25%); transition: .5s ease; } .punto_elenco:hover svg path { fill: var(--light); } .punto_elenco.flex:hover { background-color: rgb(var(--light-rgb) / 10%); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 6 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .slider_wrapper { gap: 1.5rem; } .swiper-slide .pils { height: 100%; } .pils { padding: var(--c20v) var(--c2o); border-radius: 50rem; border: 1px solid var(--black); } /** * * █▀▀▄ ▄▀▀▄ ▄▀▀▀ █▀▀ ▄▀▀ * █ █ █▀▀█ █ ▀▌ █▀▀ ▀▄ * █▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀ - TEMPLATES _ PAGINE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE LO STUDIO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ .wrapper_team .left { padding: 2rem; border-top: 1px solid var(--black); } .wrapper_team .right .team { padding: 2rem; border-top: 1px solid var(--black); } .wrapper_team .right p { font-size: 1rem; } .wrapper_team .right img { object-position: top; background-color: var(--blue); } /* Section 3 */ .tl .top { padding-bottom: 6rem; } .tl .top::after { content: ""; width: 1px; height: 0; position: absolute; left: 50%; bottom: 0; background-color: var(--white); transition: .25s ease .25s; } .tl .top .anno { font-size: clamp(2.5rem, 10vw, 6rem); font-family: var(--bold-font); font-weight: 700; color: var(--white); opacity: 0; transition: .25s ease; } .tl .bottom { padding-top: 4rem; border-top: 1px solid var(--white); } .tl .bottom::after { content: ""; width: 1px; height: 3rem; position: absolute; left: 50%; top: 0; background-color: var(--white); transition: .25s ease; } .tl .bottom.text div { opacity: 0; transition: .25s ease; } .swiper-slide-active.tl .top .anno { opacity: 1; } .swiper-slide-active.tl .top::after { height: 5rem; } .swiper-slide-active.tl .bottom::after { height: 0; } .swiper-slide-active.tl .bottom .anno_b { display: none; } .swiper-slide-active.tl .bottom.text div { opacity: 1; } .slider_tl .nav_prev { left: calc(40% - 2.5em - clamp(2.5rem, 10vw, 6rem)); transform: translateY(calc(-100% - 8rem)); } .slider_tl .nav_next { right: calc(40% - 2.5em - clamp(2.5rem, 10vw, 6rem)); transform: translateY(calc(-100% - 8rem)); } .slider_tl .nav_btn { width: 1.75rem; } .slider_tl .nav_btn img { filter: invert(1); } /* Section 5 */ .wrapper_numeri { gap: var(--c7v) var(--c5o); } .numero .img { margin-bottom: 0; } .numero .num { font-size: 3rem; font-family: var(--bold-font); font-weight: 700; color: var(--white); white-space: nowrap; } .numero p { color: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE LAVORA CON NOI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .img { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; border-radius: 5rem; border: 1px solid var(--white); margin-bottom: 2rem; } .img img { width: auto; height: 2rem; } .wrapper_pos .link svg { transform: scaleY(-1); } .wrapper_pos .link svg:nth-of-type(2) { transform: translate(-1rem, -1.5rem) scaleY(-1); } .wrapper_pos .link:hover svg { transform: translate(1rem, 1.5rem) scaleY(-1); transition: .125s ease-in-out; } .wrapper_pos .link:hover svg:nth-of-type(2) { transform: translate(0,0) scaleY(-1); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CONTATTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ /* Section 2 */ .sede { padding: var(--c10v) var(--c2o); border-top: 1px solid var(--black); } .sede:last-of-type { border-bottom: 1px solid var(--black); } .sede h3 { margin-bottom: 1rem; } .sede h3 + p { font-size: 1rem; } .sede a { display: inline-flex; gap: .5rem; position: relative; padding: .625rem 1rem; border: 1px solid var(--black); border-radius: 1.5rem; background-color: var(--black); color: var(--white); font: inherit; font-size: .75rem; } .sede a svg { width: 1rem; } .sede a:hover { background-color: var(--blue); } #s2_contatti .grid { grid-template-columns: 1fr 1fr 1fr; } .sede { border-bottom: 1px solid var(--black); height: 100% } .sede:nth-of-type(2) { border-left: 1px solid var(--black); border-right: 1px solid var(--black); } /** * * ▄▀▀▄ █▀▀▄ ▄▀▀▀ █ █ ▀ ▐▌ ▐▌ █▀▀ * █▀▀█ █▐█▀ █ █▀▀█ █ ▀▄▀ █▀▀ * ▀ ▀ ▀ ▀▀ ▀▀▀ ▀ ▀ ▀ ▀ ▀▀▀ - TEMPLATES _ ARCHIVIO * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ #card_grid { gap: var(--c15v) 2rem; } /** * * ▄▀▀ ▀ █▄ █ ▄▀▀▀ █ █▀▀ * ▀▄ █ █ ▀█ █ ▀▌ █ ▄ █▀▀ * ▀▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ - SINGLE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .wrapper_elenco { border-top: 1px solid var(--black); } .wrapper_elenco .left { padding: 2rem; } .wrapper_elenco .left h2 { font-size: clamp(1.25rem, 3vw, 1.85rem); font-weight: 300; line-height: 1.375; } .wrapper_elenco .left h2 :where(strong, b) { color: var(--black); } .wrapper_elenco .right { height: 100%; border-top: 1px solid var(--black); } .wrapper_elenco .right .punto_elenco { padding: 2rem; border-bottom: 1px solid var(--black); } .wrapper_elenco .right .punto_elenco:last-of-type { border-bottom: 0; } .wrapper_elenco .right .punto_elenco * { font-size: clamp(1rem, 3vw, 1.25rem); } /** * * █▀▀ ▄▀▀▄ █▀▀▄ █▄ ▄█ * █▀▀ █ █ █▐█▀ █ █ █ * ▀ ▀▀ ▀ ▀▀ ▀ ▀ - FORM * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /* WP-Form - Custom */ #form { padding: var(--c5v) var(--c2o); border: 1px solid var(--black); } #form .wpforms-field label { font-weight: 300; } #form .wpforms-field :where(input, textarea, select) { background-color: transparent; padding: .75rem 1rem; font-weight: 300; } #form .wpforms-field:not(.wpforms-field-checkbox) label { position: absolute; left: 1rem; top: .75rem; transition: .25s ease; background-color: var(--white); padding: 2px; } #form .wpforms-field:not(.wpforms-field-checkbox).up label { transform: translateY(-50%); top: 0; color: rgb(var(--black-rgb) / 50%) } #form .wpforms-field.wpforms-field-checkbox li label a:hover { color: var(--light); } #form .wpforms-uploader { border: 1px solid rgb(var(--black-rgb) / 50%); border-radius: 0; } #form .wpforms-submit-container { display: flex; align-items: center; justify-content: flex-start; } #form button[type=submit] { display: inline-flex; padding: 0; background-color: transparent; border: 0; border-radius: 0; position: relative; gap: .5rem; font-size: 1.125rem; color: var(--black); font-weight: 700; text-transform: uppercase; overflow: clip; } #form button[type=submit] span { position: relative; display: inline-block; font-size: 1.125rem; color: var(--black); font-weight: 700; text-transform: uppercase; transition: .25s ease; } #form button[type=submit] span::after { content: ""; width: 100%; height: 1px; background-color: rgb(var(--black-rgb) / 50%); position: absolute; left: 0; bottom: 0; transition: .25s ease; } #form button[type=submit] svg { width: 1rem; transition: .125s ease-in-out .125s; } #form button[type=submit] svg path { fill: var(--black); transition: .25s ease; } #form button[type=submit]:hover { transform: scale(1.05); color: var(--light); } #form button[type=submit]:hover span { color: var(--light); } #form button[type=submit]:hover span::after { background-color: var(--light); } #form button[type=submit]:hover svg { transform: translate(1.5rem,-1.5rem); transition: .125s ease-in-out; } #form button[type=submit]:hover svg path { fill: var(--light); } #form button[type=submit] svg:nth-of-type(2) { position: absolute; right: 0; transform: translate(-1.5rem,1.5rem); transition: .125s ease-in-out; } #form button[type=submit]:hover svg:nth-of-type(2) { transform: translate(-5%,25%); transition: .125s ease-in-out .125s; } /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - EXTRA * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE GRAZIE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_grazie {} /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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 * * __________________________________________________________________________________________________________________________________________________________________________ */ .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 */ /*∞∞∞∞∞∞ CHI SIAMO ∞∞∞∞∞∞*/ /* Sec 5 */ .wrapper_numeri { grid-template-columns: 1fr 1fr; } } /** * * ▀▀█▀▀ ▄▀▀▄ █▀▀▄ █ █▀▀ ▀▀█▀▀ * █ █▀▀█ █▀▀█ █ ▄ █▀▀ █ * ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀ - 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; } /*∞∞∞∞∞∞ ARCHIVE ∞∞∞∞∞∞*/ #card_grid { grid-template-columns: 1fr 1fr; } } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀▀█▀▀ ▄▀▀▄ █▀▀▄ ▄▀▀ █▄ ▄█ ▄▀▀▄ █ █ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ ▀▄ █ █ █ █▀▀█ █ ▄ █ ▄ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ ▀▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀ - LAPTOP | 1024 x 768 -> 1280 x 720 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1024px) { html, html * { cursor: none !important; } #mouse { display: inline-block; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 11; } #mouse .circle { transition: .45s ease; width: 1.5rem; height: 1.5rem; border-radius: 50%; background-color: rgb(10 48 112 / 75%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ .header .flex-el { transition: .25s ease-out; } .header.scrolling .flex-el { transform: translateY(calc(-100% - 2rem)); } nav.sub_menu { width: 10rem; } /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ #form .wpforms-field.wpforms-field-checkbox { margin-bottom: 0; } #form .wpforms-submit-container { justify-content: flex-end; } /* Contents */ footer .container { display: grid; grid-template-columns: 1fr .625fr; } /* Credits */ #credits a:hover, #credits a:active, #credits a:focus { opacity: 1; color: var(--light); } #credits #credits_studio:hover { color: #e74e0f; } /* Menu */ .footer_menu .flex { justify-content: flex-start; } /* Back Top */ #back_top { opacity: 1; } /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ /* Sec 1 */ .mask video { -webkit-mask-image: url(../images/svg/mask_desktop.svg); } #s1_home .mask p { bottom: 60%; } #s1_home .text { position: absolute; top: 50%; left: var(--c5o); width: 45vw; padding-top: 2rem; } #s1_home .text h1 { padding-right: var(--c7o); } /* Sec 4 */ .wrapper_elenco .left { padding: 4rem; } .wrapper_elenco .right .punto_elenco { padding: 4rem; padding-left: 2rem; gap: 4rem; } .wrapper_elenco.animazione .left { background-color: var(--white); transform: translateX(100%); z-index: 1; border-right: 1px solid var(--black); } .wrapper_elenco.animazione .right { border-left: 0; } /*∞∞∞∞∞∞ ARCHIVE ∞∞∞∞∞∞*/ #card_grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--c15v) var(--c5o); } /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ .wrapper_elenco { grid-template-columns: 1fr 1fr } .wrapper_elenco .left { text-align: right; padding-left: var(--c5o); } .wrapper_elenco .right { border-top: 0; border-left: 1px solid var(--black); } /* Font size */ .sec_std .text h2 { font-size: calc(var(--h2-size) * .75) } .sec_std .text h3 { font-size: calc(var(--h3-size) * .85) } /*∞∞∞∞∞∞ LO STUDIO ∞∞∞∞∞∞*/ /* Sec 2 */ .wrapper_team { grid-template-columns: .75fr 1fr; } .wrapper_team .left { text-align: right; } .wrapper_team .right { border-left: 1px solid var(--black); } } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1281 x 720 -> 1366 x 768 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1281px) { .head_link { font-size: 1rem; padding: .75rem 1rem; gap: 1rem; } .head_link svg { width: 1.25rem; } .sub_menu button { font-size: 1rem; gap: 1rem; margin-bottom: 1rem; } /*∞∞∞∞∞∞ LO STUDIO ∞∞∞∞∞∞*/ /* Sec 5 */ .wrapper_numeri { grid-template-columns: 1fr 1fr 1fr 1fr; } } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀█▀ ▄▀▀▄ █▀▀▄ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1367 x 768 -> 1919 x 1080 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1367px) {} /** * * █ █ █▀▀▄ █▀▀ █▀▀▄ * █ █ █▀▀█ █▀▀ █▐█▀ * ▀▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - ÜBER | 1921 -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1921px) {} /** * * ▄▀█ █ ▄▀ * █▄▄█▄ █▀▄ * █ ▀ ▀▀ - DESKTOP 4K & UP | 2561px -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and ( min-width: 2561px ) {}