/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " ___NOME_SITO___ " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █ █ █▀▀ ▄▀▀▄ █▀▀▄ █▀▀ █▀▀▄ * █▀▀█ █▀▀ █▀▀█ █ █ █▀▀ █▐█▀ * ▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - HEADER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ header { z-index: 4; top: 0; left: 0; background: linear-gradient(to bottom, rgb(var(--black-rgb) / 58%) 70%, rgb(var(--black-rgb) / 0%) 100%); } .head_wrapper { padding: 1em 1.5em; z-index: 2; } .head_wrapper .menu { display: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .head_logo { width: auto; } .head_logo :where(img, svg) { height: 2rem; width: auto; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HAMBURGER / MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #hamburger { display: inline-block; font-size: var(--rem); line-height: 0; padding: .5em .5em; overflow: visible; cursor: pointer; transition: .25s ease; } #hamburger .wrap { width: 2.5rem; height: 2rem; } #hamburger span { display: block; position: absolute; left: 50%; transform: translateX(-50%); width: 2.25rem; height: 4px; background-color: var(--white); transform-origin: center; will-change: transform; transition: .25s ease; } #hamburger .top_bun { top: 0px; } #hamburger .burger { top: calc(50% - 2px); } #hamburger .bottom_bun { bottom: 0px; } /* Tapped / Clicked animation */ /* * Copiare l'animazione scelta dal file hamburger.css * oppure utilizare quella base qui sotto */ #hamburger.tapped span { 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; position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden; } #main_nav .menu_wrapper { top: 0; left: 0; background-color: var(--black); } #main_nav .menu { gap: 1rem; padding: 0 1rem; } #main_nav .menu .menu_btn { font-size: 1.25rem; } #main_nav .btn_custom { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); box-shadow: 0 0 1rem rgb(var(--white-rgb) / 25%); } /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKs / BTNs STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .link { position: relative; padding: 1rem 2rem; font-size: 0.95rem; color: var(--black); text-transform: uppercase; line-height: 1; background-color: rgb(var(--black-rgb) / 10%); border-radius: 0.25rem; font-weight: 700; border: 1px solid rgb(var(--black-rgb) / 10%); transition: .35s ease; } .link::before { content: ""; display: inline-block; position: relative; background-color: var(--blue); width: 1rem; min-width: 1rem; height: 1rem; border-radius: 8rem; margin-right: 0.5rem; transform: translateY(2px); transition: .35s ease; } .link:hover { background-color: var(--blue); border-color: var(--blue); color: var(--white); } .link:hover::before { background: var(--white); } /* Line link */ .line_link { position: relative; width: max-content; } .line_link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--black); transition: .35s ease; } .line_link:hover::after { width: 100%; } /* Btn custom */ .btn_custom { border-radius: 8rem; text-transform: uppercase; font-weight: 400; width: max-content; padding: 0.75rem 1.5rem 0.9rem 1.5rem; transition: .35s ease; } .btn_custom.blue { background-color: var(--blue); color: var(--black); border: 1px solid var(--blue); } .btn_custom.blue:hover { background-color: var(--white); } /* Menu btn */ .menu_btn { position: relative; display: block; font-weight: 700; padding: 0.5rem 1rem; width: max-content; color: var(--white); text-transform: uppercase; } .menu_btn::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--white); transition: .5s ease; } .menu_btn:hover::after { width: 100%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .filter_color { background-color: var(--color); mix-blend-mode: multiply; opacity: .5; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .dvh100 { min-height: 100dvh; } .tac_responsive { text-align: center; } .pretitle { position: relative; gap: 0.5rem; margin-bottom: 2rem; padding-left: var(--c5o); } .pretitle img { width: 1rem; } .pretitle p { text-transform: uppercase; color: var(--blue); font-weight: 700; font-size: 1.25rem; } .pretitle .line { flex: 0; background-color: rgb(var(--black-rgb) / 50%); height: 1px; transition: .5s ease; } .pretitle.active .line { flex: 1; } /* Borders */ .border { position: absolute; pointer-events: none; max-width: 1281px; } .border.left_bottom { display: none; } .border.top_right { top: -8px; right: -4px; width: 50%; max-width: 300px; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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 { top: 50%; transform: translateY(-50%); width: 3.5em; padding: .25em; z-index: 1; cursor: pointer; transition: .25s ease; } .nav_btn :where(img, svg) { width: 100%; } .nav_btn svg path { fill: var(--black); transition: .25s ease; } .nav_prev { left: 0; } .nav_next { right: 0; } .nav_btn.swiper-button-disabled { display: none; } /* Dots */ .nav_dots { gap: .5em; } /* NAV glightbox */ .glightbox-clean .gprev, .glightbox-clean .gnext { top: 45% !important; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ ANIMATIONS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .block_bt { opacity: 0; transform: translateY(2rem); transition: .5s ease; } .block_lr { opacity: 0; transform: translateX(-25%); transition: .5s ease; } .block_rl { opacity: 0; transform: translateX(25%); transition: .5s ease; } .block_bt.active { transform: translateY(0); opacity: 1; } .block_lr.active, .block_rl.active { transform: translateX(0); opacity: 1; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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); } */ /** * * █▀▀ ▄▀▀▄ ▄▀▀▄ ▀▀█▀▀ █▀▀ █▀▀▄ * █▀▀ █ █ █ █ █ █▀▀ █▐█▀ * ▀ ▀▀ ▀▀ ▀ ▀▀▀ ▀ ▀▀ - FOOTER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /* Foot form */ footer .form_container .left { padding: var(--c10v) var(--c5o); background-color: var(--grey); } footer .form_container .left .text h2 { max-width: 18ch; margin: 0 auto; } footer .form_container .left #form { margin-top: 2rem; } /* Foot info */ #foot_info { min-height: 90vh; } #foot_info .border { display: none; } #foot_info .bkg { width: 100%; height: 100%; } #foot_info .filter { background: linear-gradient(to bottom, rgb(var(--black-rgb) / 55%) 0%,rgb(var(--black-rgb) / 95%) 100%); } #foot_info .all_contacts { gap: 3rem; text-align: center; } #foot_info .single_contact { width: 100%; display: inline-block; } #foot_info .single_contact img { height: 1.5rem; margin-right: 0.5rem; transform: translateY(-2px); } #foot_info .single_contact span { color: var(--white); font-size: 1.25rem; font-weight: 700; } /* Foot Logo */ .foot_logo { width: 90%; max-width: 320px; } .foot_logo :where(img, svg) { width: 100%; } /* Lines */ .foot_lines { overflow: hidden; } .foot_line_bot { position: relative; transform: translate(0, 0.5rem); max-height: 300px; } .foot_line_left { display: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CREDITS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #credits p { font-size: 1rem; line-height: 1.5; margin: 1.5rem auto 0 auto; display: block; width: 100%; margin-top: 1.5rem; } #credits p:first-child { margin-top: 0; } #credits .resp_sep { display: none; } #credits a { display: inline-block; font: inherit; color: inherit; font-size: 1rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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); } */ /** * * ▄▀▀ █▀▀ ▄▀▀ ▀▀█▀▀ ▀ ▄▀▀▄ █▄ █ ▄▀▀ * ▀▄ █▀▀ █ █ █ █ █ █ ▀█ ▀▄ * ▀▀ ▀▀▀ ▀▀ ▀ ▀ ▀▀ ▀ ▀ ▀▀ - SECTIONS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1 { overflow: hidden; } /** * * ▄▀▀ ▄▀▀▄ █▀▀▄ █▀▀▄ ▄▀▀ * █ █▀▀█ █▐█▀ █ █ ▀▄ * ▀▀ ▀ ▀ ▀ ▀▀ ▀▀▀ ▀▀ - CARDS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD EMPTY ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_empty { padding: 2em 1.5em; } .card_empty svg { width: 6em; } .card_empty .text { margin-top: 1em; } /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_home .outline { position: absolute; top: 50%; right: 0; transform: translate(60%, -50%); height: 105%; width: auto; pointer-events: none; } #s1_home .filter { mix-blend-mode: multiply; opacity: 0.70; } #s1_home .s1_title h1 span { display: block; margin-top: 1.5rem; } #s1_home .s1_title h1 span br { display: none; } #s1_home .btn_custom { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); box-shadow: 0 0 1rem rgb(var(--black-rgb) / 35%); font-weight: 700; color: var(--white); } #s1_home .btn_custom:hover { box-shadow: 0 0 1rem rgb(var(--black-rgb) / 35%); color: var(--black); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s2_home .title { margin-bottom: 2rem; } #s2_home .img_container { margin-bottom: 2.5rem; } #s2_home .img_container .border { width: 50%; max-width: 300px; } #s2_home .img_container picture img { max-height: 18rem; border-radius: 0.5rem; } /* Prodotti */ #s2_home .btn_container.fixed { top: 0; transform: translateY(-100%); opacity: 0; pointer-events: none; z-index: 3; width: 100vw; box-shadow: 0 1.15rem 1rem rgb(var(--black-rgb) / 25%); background-color: var(--white); padding: 5.5rem var(--c5o) 1rem var(--c5o); background-color: var(--white); } #s2_home .btn_container.fixed.active { transform: translateY(0); opacity: 1; pointer-events: initial; } #s2_home .btn_container.rel.active { opacity: 0; } #s2_home .btn_container { padding: 0 var(--c5o); z-index: 1; gap: 0.5rem 0.5rem; transition: .5s ease; } #s2_home .btn_container button { text-transform: uppercase; font-weight: 700; padding: 0.65rem 1.5rem 0.85rem 1.5rem; border: 1px solid rgb(var(--black-rgb) / 50%); border-radius: 8rem; background-color: var(--white); transition: .35s ease; } #s2_home .btn_container button:hover { background-color: var(--blue); border-color: var(--blue); color: var(--white); } .products_container .single_prod { padding-top: var(--c15v); } .products_container .single_prod:first-child { padding-top: var(--c7v); } .single_prod .left { padding: 0 var(--c5o); } .single_prod .left .count { position: relative; display: block; width: 100%; font-weight: 300; color: rgb(var(--black-rgb) / 50%); margin-bottom: 1rem; opacity: 0; transition: .35s ease; } .single_prod .left .count.active { opacity: 1; } .single_prod .left .count::after { content: ""; position: absolute; top: 50%; left: 1.5rem; width: 0; height: 1px; background-color: rgb(var(--black-rgb) / 50%); transform: translate(0, -50%); transition: .35s ease; transition-delay: 0.35s; } .single_prod .left .count.active::after { width: calc(100% - 1.5rem); } .single_prod .left .text { flex-direction: column; margin-bottom: 4rem; } .single_prod .left .text p { margin-top: 0.5rem; text-transform: uppercase; font-weight: 700; text-align: center;line-height: 1.5; } .single_prod .left .single_feature { margin-top: 1rem; gap: 1rem; padding: 0.5rem 1rem; border: 1px solid var(--black); border-radius: 0.25rem; transform: translateX(-25%); transition: .35s ease; opacity: 0; } .single_prod .left .active .single_feature { opacity: 1; transform: translateX(0); } .single_prod .left .single_feature p { line-height: 1.3; font-size: 0.9rem; } .single_prod .left .single_feature img { width: 1.5rem; } .single_prod .left .files { margin-top: 1rem; gap: 1rem; } .single_prod .left .files a { width: 100%; } .single_prod .right .swiper-slide { height: auto; } .single_prod .right .swiper-slide picture { height: 100%; } .single_prod .right .nav_btn { filter: brightness(0) invert(1); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s3_home .sec_container picture img { border-radius: 0.5rem; aspect-ratio: 1 / 0.75; max-height: 55vh; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s4_home .video video { border-radius: 0.5rem; aspect-ratio: 1 / 0.75; max-height: 55vh; object-fit: cover; } #s4_home .video .play { position: absolute; top: 50%; left: 50%; height: 50%; transform: translate(-50%, -50%); width: 6rem; padding: 1rem; background: rgb(var(--white-rgb) / 25%); border-radius: 8rem; height: 6rem; backdrop-filter: blur(5px); } #s4_home .text h3 { font-weight: 400; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 5 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s5_home .filter { opacity: 0.8; } #s5_home .swiper_bkg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } #s5_home .swiper_bkg picture { width: 100%; height: 100%; object-fit: cover;} #s5_home .title h2 { color: var(--white); } #s5_home .title .swiper_dots { margin-top: 1.5rem; } #s5_home .title .swiper_dots span { width: 1rem; height: 1rem; background-color: var(--white); opacity: 1; border: 1px solid var(--white); } #s5_home .title .swiper_dots span.swiper-pagination-bullet-active { background-color: transparent; } #s5_home .swiper_date { margin-top: 2rem; margin-bottom: 1.5rem; } #s5_home .swiper_date .slide_container { flex-direction: column-reverse; } #s5_home .nav_btn { filter: brightness(0) invert(1); width: 2.75rem; top: 0; transform: translateY(45%); } #s5_home .swiper-slide .data h3 { color: var(--blue); font-size: 3.5rem; line-height: 1; } #s5_home .swiper-slide .text p { font-size: 1.25rem; font-weight: 700; line-height: 1.4; max-width: 35ch; margin: 0 auto; } #s5_home .line { position: relative; width: 8px; height: 7rem; background-color: var(--blue); left: 50%; transform: translateX(-50%); } /** * * █▀▀▄ ▄▀▀▄ ▄▀▀▀ █▀▀ ▄▀▀ * █ █ █▀▀█ █ ▀▌ █▀▀ ▀▄ * █▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀ - TEMPLATES _ PAGINE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CONTATTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Mappa .map { min-height: 25rem; z-index: 1; } .map .leaflet-control-attribution { display: none; } */ /** * * ▄▀▀▄ █▀▀▄ ▄▀▀▀ █ █ ▀ ▐▌ ▐▌ █▀▀ * █▀▀█ █▐█▀ █ █▀▀█ █ ▀▄▀ █▀▀ * ▀ ▀ ▀ ▀▀ ▀▀▀ ▀ ▀ ▀ ▀ ▀▀▀ - TEMPLATES _ ARCHIVIO * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /** * * ▄▀▀ ▀ █▄ █ ▄▀▀▀ █ █▀▀ * ▀▄ █ █ ▀█ █ ▀▌ █ ▄ █▀▀ * ▀▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ - SINGLE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /** * * █▀▀ ▄▀▀▄ █▀▀▄ █▄ ▄█ * █▀▀ █ █ █▐█▀ █ █ █ * ▀ ▀▀ ▀ ▀▀ ▀ ▀ - FORM * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /* WP-Form - Custom */ #form .wpforms-field label { color: var(--black); font-weight: 400; } #form .wpforms-field :where(input, textarea, select) { background-color: transparent; border: 1px solid rgb(var(--black-rgb) / 50%); border-radius: 0.25rem; padding: 0.5rem 1rem; font-size: 1rem; color: var(--black); background-color: var(--white); } #form .wpforms-field input::placeholder, #form .wpforms-field textarea::placeholder { color: var(--black); opacity: .75; } #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"] { padding: 0.5rem; border: 1px solid rgb(var(--black-rgb) / 50%); border-radius: 0; } #form .wpforms-field.wpforms-field-checkbox ul { justify-content: center; } #form .wpforms-field.wpforms-field-checkbox li label { padding: 0; color: var(--black); } #form .wpforms-field.wpforms-field-checkbox li label a:hover { color: var(--blue); } /* #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"]:checked { background: ; } */ #form button[type=submit], #form input[type=submit] { padding: 1rem 2rem; font-size: 0.95rem; color: var(--black); text-transform: uppercase; line-height: 1; margin: 0 auto; background-color: rgb(var(--black-rgb) / 10%); border: 1px solid rgb(var(--black-rgb) / 10%);; border-radius: 0.25rem; transition: .35s ease; } #form button[type=submit]::before { content: ""; display: inline-block; position: relative; background-color: var(--blue); width: 1rem; height: 1rem; border-radius: 8rem; margin-right: 0.5rem; transform: translateY(2px); transition: .35s ease; } #form button[type=submit]:hover, #form input[type=submit]:hover { background-color: var(--blue); border-color: var(--blue); color: var(--white); } #form button[type=submit]:hover::before , #form input[type=submit]:hover::before { background-color: var(--white); } /* MailPoet Form - Custom #form_mp { background-color: var(--white); } #form_mp .mailpoet_form .mailpoet_paragraph label { color: ; } #form_mp .mailpoet_form .mailpoet_paragraph :where(input, textarea, select) { background-color: transparent; border: ; border-radius: ; padding: ; font-size: ; color: ; } #form_mp .mailpoet_form .mailpoet_paragraph input::placeholder { color: ; opacity: ; } #form_mp .mailpoet_form input.mailpoet_checkbox { padding: ; border: ; border-radius: ; } #form_mp .mailpoet_form input.mailpoet_checkbox:checked { background: ; } #form_mp .mailpoet_form .mailpoet_checkbox_label { color: ; } #form_mp .mailpoet_form .mailpoet_checkbox_label a:hover { color: ; } #form_mp .mailpoet_form .mailpoet_paragraph .mailpoet_submit { padding: ; font-size: ; color: ; background-color: ; border: ; border-radius: ; } #form_mp .mailpoet_form .mailpoet_paragraph .mailpoet_submit:hover { background-color: ; border-color: ; color: ; } */ /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - EXTRA * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE GRAZIE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_grazie .container { max-width: 1024px; margin: 0 auto; } #s1_grazie .s1_title .link { margin-top: 2rem; width: max-content; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE 404 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_404 .container { max-width: 1024px; margin: 0 auto; } #s1_404 .s1_title h1 span { display: block; font-size: 2rem; margin-top: 0.5rem; } #s1_404 .s1_title .link { margin-top: 2rem; width: max-content; } /** * ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ * * RESPONSIVE * * Settare se necessario regole fluid per minmax di elementi specifici basandosi sulle seguenti regole: * => ORIGINAL CALC -> calc( 12px + (24 - 12) * ( (100vw - 360px) / (1920 - 360) ) ) * => CALC 1920px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 1560 ) ) * => CALC 1280px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 920 ) ) * => CALC 1024px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 664 ) ) * * Da creare fluid dinamico con 2 step per i calc iniziali = 1920 -> 1024 1024 -> 360 * * __________________________________________________________________________________________________________________________________________________________________________ */ /* .head_logo { width: calc( var(--head-logo-width) + ( var(--head-logo-max) - var(--head-logo-min) ) * ( (100vw - 360px) / 1560 ) ); } #scroll_btn { width: calc( var(--scroll-px) + ( var(--scroll-max) - var(--scroll-min) ) * ( (100vw - 360px) / 1560 ) ); } .foot_logo { width: calc( var(--foot-logo-width) + ( var(--foot-logo-max) - var(--foot-logo-min) ) * ( (100vw - 360px) / 1560 ) ); } #back_top { width: calc( var(--back-top-px) + ( var(--back-top-max) - var(--back-top-min) ) * ( (100vw - 360px) / 1560 ) ); } */ /** * * █▄ ▄█ ▄▀▀▄ █▀▀▄ ▀ █ █▀▀ * █ █ █ █ █ █▀▀█ █ █ ▄ █▀▀ * ▀ ▀ ▀▀ ▀▀▀ ▀ ▀▀▀▀ ▀▀▀ - MOBILE PORT | 601 -> 767 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 601px) { /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ #s5_home .swiper-slide .data h3 { font-size: 6rem; } #s5_home .nav_btn { width: 3.5rem; transform: translateY(2.5rem); } /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ #form .wpforms-field:where(#wpforms-70-field_2-container, #wpforms-70-field_3-container, #wpforms-70-field_4-container, #wpforms-70-field_5-container) { width: calc(50% - 0.5rem); } } /** * * ▀▀█▀▀ ▄▀▀▄ █▀▀▄ █ █▀▀ ▀▀█▀▀ * █ █▀▀█ █▀▀█ █ ▄ █▀▀ █ * ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀ - 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) { /*∞∞∞∞∞∞ VARS ∞∞∞∞∞∞*/ .tac_responsive { text-align: left; } .pretitle { padding-right: var(--c5o); } .border.left_bottom { bottom: -5px; left: -1px; width: 50%; display: block; } /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ #hamburger { display: none; } .head_wrapper .menu { display: flex; } /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ #s1_home .container { align-items: flex-end; } #s1_home .btn_custom { position: fixed; transform: unset; left: unset; right: 1.25rem; bottom: 1.25rem; z-index: 5; } #s1_home .s1_title { padding-bottom: var(--c10v); } #s1_home .s1_title h1 span br { display: block; } /* Section 2 */ #s2_home .btn_container { justify-content: flex-start; } #s2_home .btn_container button { padding: 0.55rem 2.5rem 0.75rem 2.5rem; } #s2_home .btn_container.fixed { padding: 5.5rem var(--c5o) 1rem var(--c5o); } .products_container { padding-left: var(--c5o); padding-right: var(--c5o); } .products_container .single_prod { flex-direction: row-reverse; } .single_prod .left { padding: 0; } .single_prod .left .text { flex-direction: row; justify-content: space-between; } .single_prod .left .text h2 { min-width: 40%; } .single_prod .left .text p { text-align: right; margin: 0; max-width: 30ch; } .single_prod .left .files { align-items: stretch; } .single_prod .left .files a { width: calc(50% - 0.5rem); display: flex; justify-content: center; align-items: center; } .single_prod .right .swiper-slide picture img { border-radius: 0.5rem; } /* Section 3 */ #s3_home .sec_container:nth-of-type(odd) { flex-direction: row-reverse; } /* Section 5 */ #s5_home .swiper_date { margin-top: 0; margin-bottom: 0; } #s5_home .swiper_date .swiper-slide { height: auto; } #s5_home .swiper_date .slide_container { flex-direction: row; max-width: calc(100% - 8rem); margin: 0 auto; height: 100%; } #s5_home .nav_btn { top: 50%; transform: translateY(-50%); } #s5_home .swiper-slide .data h3 { transform: translateY(-1rem); } #s5_home .container { padding-bottom: var(--c15v); min-height: 90vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--c7v); } #s5_home .line { position: absolute; bottom: 0; height: 50%; width: 5px; } /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /* #form .wpforms-field.wpforms-field-checkbox ul { justify-content: flex-start; } */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Contents */ footer .form_container { align-items: stretch; padding: 0 var(--c5o); } footer .form_container .left { padding: 3rem 2rem; border-radius: 0.5rem 0 0 0.5rem; } footer .form_container .left .text h2 { margin: 0; } #foot_info { min-height: unset; } #foot_info .border { display: block; } #foot_info .bkg img { border-radius: 0 0.5rem 0.5rem 0; } #foot_info .filter { border-radius: 0 0.5rem 0.5rem 0; } #foot_info .all_contacts { padding: 3rem 2rem; max-width: 600px; margin: 0 auto; } #foot_info a.single_contact span { position: relative; } #foot_info a.single_contact span::after { content: ""; position: absolute; bottom: -0.25rem; left: 0; width: 0; height: 1px; background-color: var(--white); transition: .35s ease; } #foot_info a.single_contact:hover span::after { width: 100%; } /* Credits */ .foot_logo { max-width: 550px; } .foot_line_bot { position: relative; transform: translate(30%, 0rem); margin-bottom: -6rem; } .foot_line_left { display: block; position: absolute; bottom: 0; left: 0; transform: translateX(calc((100% * -1) + var(--c5o) + 4rem)); z-index: -1; height: 65rem; } #credits { max-width: 65ch; margin: 0 auto; } #credits a:hover, #credits a:active, #credits a:focus { opacity: 1; color: var(--color); } #credits #credits_studio:hover { color: #e74e0f; } /* Back Top */ #back_top { opacity: 1; } } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1281 x 720 -> 1366 x 768 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1281px) { /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ #s1_home .outline { transform: translate(40%, -50%); height: 130%; } /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ #foot_info { min-height: unset; align-items: flex-end; } #foot_info .filter { background: linear-gradient(to bottom, rgb(var(--black-rgb) / 0%) 0%, rgb(var(--black-rgb) / 95%) 100%); } #foot_info .all_contacts { text-align: left; gap: 2rem 0; justify-content: space-between;} #foot_info .single_contact { display: flex; justify-content: flex-start; align-items: flex-start; } #foot_info .single_contact img { transform: unset; } #foot_info .single_contact br { display: none; } #foot_info .single_contact span { font-size: 1rem; } #foot_info .single_contact:nth-child(2) { width: 45%; } #foot_info .single_contact:nth-child(3 ){ width: 45%; } } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀█▀ ▄▀▀▄ █▀▀▄ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1367 x 768 -> 1919 x 1080 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1367px) { /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ /* Section 5 */ #s5_home .swiper_date .slide_container { max-width: 1024px; } #s5_home .swiper-slide .data h3 { font-size: 8rem; transform: translateY(-1.5rem); } } /** * * █ █ █▀▀▄ █▀▀ █▀▀▄ * █ █ █▀▀█ █▀▀ █▐█▀ * ▀▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - ÜBER | 1921 -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1921px) {} /** * * ▄▀█ █ ▄▀ * █▄▄█▄ █▀▄ * █ ▀ ▀▀ - DESKTOP 4K & UP | 2561px -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and ( min-width: 2561px ) {}