/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " ___NOME_SITO___ " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ .ratio-1-1, .squared { padding-bottom: 100%; } => 1:1 -> padding-bottom: calc(100% * 1 / 1); .ratio-16-9 { padding-bottom: 56.25%; } => 16:9 -> padding-bottom: calc(100% * 9 / 16); .ratio-4-3 { padding-bottom: 75%; } => 4:3 -> padding-bottom: calc(100% * 3 / 4); .ratio-3-2 { padding-bottom: calc(100% * 3 / 4); } => 3:2 -> padding-bottom: calc(100% * 2 / 3); .ratio-8-5 { padding-bottom: 62.5%; } => 8:5 -> padding-bottom: calc(100% * 8 / 5); */ .s1 .s1_slider .swiper-slide { display: flex !important; } /** * * ▐▌ ▐▌ ▄▀▀▄ █▀▀▄ ▄▀▀ * ▀▄▀ █▀▀█ █▐█▀ ▀▄ * ▀ ▀ ▀ ▀ ▀▀ ▀▀ - VARS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .s1_slider.swiper-container { height: 100vh; } /** * * █ █ █▀▀ ▄▀▀▄ █▀▀▄ █▀▀ █▀▀▄ * █▀▀█ █▀▀ █▀▀█ █ █ █▀▀ █▐█▀ * ▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - HEADER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ header { z-index: 4; top: 0; left: 0; } .head_wrapper { padding: 1.5em 2.5%; z-index: 2; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .head_logo { display: inline-block; --head-logo-width: 110px; /* <- in 'px' */ --head-logo-min: 110; --head-logo-max: 250; max-width: 250px; } .head_logo img, .foot_logo img { width: 100%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAD CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .lang { margin-right: 1rem; } .lang .wpml-ls-legacy-dropdown-click { width: auto; } .lang .wpml-ls-legacy-dropdown-click a { background-color: transparent; color: #fff; font-weight: 700; border: 1px solid #fff; display: inline-block; padding: .6rem; padding-right: calc(10px + 1.4em); } .lang .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu { border-top: 0; } .lang .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu a { width: 100%; border-top: 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HAMBURGER / MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .hamburger_btn { display: inline-block; font-size: 20px; line-height: 0; --hamburger-px: 15px; --hamburger-min: 15; --hamburger-max: 20; padding: .5em; } /* Included style from "hamburger.css" */ .hamburger { position: relative; display: inline-block; width: 3em; height: 1.5em; transition: .15s linear; } .top_bun, .burger, .bottom_bun { display: block; position: absolute; width: 3em; height: .15em; background-color: var(--white); text-shadow: 0 0 5px rgba(30,30,30,.8); border-radius: .4em; transition: .125s ease; } .top_bun { top: -.1em; } .burger { top: calc(50% - .1em); } .bottom_bun { bottom: -.1em; } /* Tapped / Clicked */ .tapped .hamburger--boring span { transform-origin: center; background-color: var(--black); } .tapped .hamburger--boring .burger, .tapped .hamburger--boring:hover .burger { opacity: 0; } .tapped .hamburger--boring .top_bun, .tapped .hamburger--boring:hover .top_bun { top: 0; transform: rotate(45deg) translate(.5em, .5em); } .tapped .hamburger--boring .bottom_bun, .tapped .hamburger--boring:hover .bottom_bun { bottom: 0; transform: rotate(-45deg) translate(0.5em, -0.5em); } /* Animation */ /* SONO TUTTE DA SISTEMARE, PER ORA NON UTILIZZARE O TORNARE ALLA VECCHIA VERSIONE! */ .hamburger--boring:hover { transform: scale(.95); } .hamburger--boring:hover .burger { opacity: 0; } .hamburger--boring:hover .top_bun { top: .2em; } .hamburger--boring:hover .bottom_bun { bottom: .2em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ NAV MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .main_nav { display: none; position: absolute; top: 0; left: 0; z-index: 1; } .menu_wrapper { background-color: var(--white); text-align: center; } .head_menu {} .head_menu li {} .head_menu li:first-child {} .head_menu li:last-child {} .head_menu li.current-menu-item {} .head_menu a { display: inline-block; font-size: 1.5em; line-height: 1; padding: .25em; font-size: calc(var(--rem) * 1.3); color: var(--blue); position: relative; z-index: 1; font-family: var(--title-font); } .head_menu li:hover a, .head_menu li:active a, .head_menu li:focus a {} /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ DARKMODE SWITCHER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BUTTONS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .btn { display: inline-block; position: relative; font: inherit; color: inherit; padding: .5em 1em; border: 1px solid #3e3e3e; background-color: #ccc; font-size: var(--rem); /* DA GUARDARE */ } .btn:hover, .btn:focus { background-color: ; color: ; } .btn:active { transform: translateY(1px); } .btn_color { background-color: #2980b9; border-color: #; color: #; } .btn_color:hover, .btn_color:focus { background-color: #2574a8; } .btn_color:active { background-color: #2472a4; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .link_btn { display: inline-block; position: relative; font: inherit; color: inherit; padding: .5em 1em; border: 1px solid #3e3e3e; background-color: #ccc; font-size: var(--rem); /* DA GUARDARE */ } .link_btn:hover, .link_btn:focus, .link_btn:active {} .link_color { background-color: #2980b9; border-color: #; color: #; } .link_color:hover, .link_color:focus, .link_color:active { background-color: #2574a8; } a.link_standard { width: fit-content; text-transform: uppercase; margin-top: 1.5rem; font-weight: 600; padding: .3rem 2.2rem .1rem 0; position: relative; } a.link_standard:before { content: ""; width: 40%; height: 1px; position: absolute; left: 0; bottom: 0; background-color: var(--black); transition: .3s ease; } a.link_standard:after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: calc(var(--rem) * 1.4); height: calc(var(--rem) * 1.4); background-image: url(../images/svg/link.svg); background-position: right; background-size: contain; background-repeat: no-repeat; } a.link_standard:hover:before { width: calc(100% - (var(--rem) * 2)); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .filter_color { background-color: var(--color); mix-blend-mode: multiply; opacity: .5; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .slider_nav { width: 3em; top: 50%; transform: translateY(-50%); z-index: 1; } .slider_prev { left: 0; } .slider_next { right: 0; } .slider_nav img { width: 100%; } .slider_nav.swiper-button-disabled { display: none; } .s1_title h1 { text-shadow: 0 0 10px rba(30,30,30,.7); color: #fff; } .s1_title p { text-shadow: 0 0 10px rba(30,30,30,.7); font-size: calc(var(--rem) * 1.2); color: #fff; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BREADCRUMBS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .breadcrumb, .breadcrumb a, .breadcrumb span { color: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SCROLL BUTTON ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .scroll { display: inline-block; position: absolute; left: 50%; bottom: 5%; --scroll-px: 40px; --scroll-min: 40; --scroll-max: 60; max-width: 60px; transform: translateX(-50%); cursor: pointer; z-index: 1; } .scroll svg { width: 100%; } .scroll svg .move { animation: hang_scroll 1.5s ease-in-out infinite forwards alternate; animation-play-state: running; } @keyframes hang_scroll { 0% { transform: translateY(.5em); } 50% { transform: translateY(0); } 100% { transform: translateY(.5em); } } .scroll:hover svg, .scroll:focus svg, .scroll:active svg { animation-play-state: paused; } .scroll svg .scroll-path { fill: var(--black); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ COMPONENTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD EMPTY ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SIDEBAR ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █▀▀ ▄▀▀▄ ▄▀▀▄ ▀▀█▀▀ █▀▀ █▀▀▄ * █▀▀ █ █ █ █ █ █▀▀ █▐█▀ * ▀ ▀▀ ▀▀ ▀ ▀▀▀ ▀ ▀▀ - FOOTER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ footer { background-color: var(--footer-bkg-color); text-align: center; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FOOTER CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .foot_logo { display: block; width: 80%; } .foot_block { padding: 5%; } footer .foot_block.border { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } .foot_block p a { display: inline-block; } .foot_block p a:hover { color: var(--blue); transform: scale(.95); } .filter_footer { background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(204,204,204,0.05) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(204,204,204,0.05) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(204,204,204,0.05) 100%); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CREDITS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .credits { font-size: .825em; line-height: 1.5; margin: 0 auto; text-align: center; opacity: .75; z-index: 1; } .credits .resp_sep { display: none; } .credits a { display: inline-block; color: inherit; font-size: 1em; } .credits a:active, .credits a:focus { opacity: 1; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BACK TO TOP ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .back_top { display: none; position: fixed; bottom: .5em; right: .5em; padding: .25em; --back-top-px: 40px; --back-top-min: 40; --back-top-max: 60; max-width: 60px; z-index: 2; } .back_top img { width: 100%; } /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1 div.swiper_dots { position: absolute; bottom: 1.5rem; right: 2.5%; z-index: 5; display: flex; align-items: center; justify-content: flex-end; width: auto; } .s1 div.swiper_dots.swiper-pagination-bullets span { border: 1px solid #fff; background-color: transparent; opacity: 1; width: .7rem; height: .7rem; margin: .3rem; } .s1 div.swiper_dots.swiper-pagination-bullets span.swiper-pagination-bullet-active { background-color: #fff; } .s1 .slider_nav { top: unset; transform: unset; bottom: 5%; } .s1 .slider_prev { left: 1rem; } .s1 .slider_next { right: 1rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .pretitle { text-transform: uppercase; font-family: var(--main-font); letter-spacing: 2px; margin-bottom: 1rem; font-size: calc(var(--rem) * .9); font-weight: 600; } .text h2, .text h3 { margin-bottom: 1rem; } .text p { margin: 1rem 0; } .img_cont { overflow: hidden; } .filter_blue { background-color: var(--blue); transform: translateX(-99.999%); transition: .4s ease-in-out; } .on_scroll.active .filter_blue { transform: translateX(0); } .on_scroll picture { transform: translateX(-99.999%); transition: .4s ease-in-out .2s; } .on_scroll.active picture { transform: translateX(0); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .collezione { height: 80vh; } .collezione .bkg_abs { background-position: top; box-shadow: 0 0 10px rgba(30,30,30,.2); } .collezione .text { background-color: #fff; width: 90%; padding: 1rem; margin: 5% auto; max-width: 30rem; } .collezione .text a { margin: 1.5rem auto 0 auto; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .tilt .img_1 { box-shadow: 0 0 10px rgba(30,30,30,.2); width: 100%; } .tilt .img_2 { box-shadow: 0 0 10px rgba(30,30,30,.2); width: 55%; bottom: 0; right: 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 5 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s5_home p, #s5_home h2, #s5_home a.link_standard { color: #fff; } #s5_home a.link_standard:before { background-color: #fff; } #s5_home a.link_standard:after { filter: invert(1); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 6 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s_brands { background-color: #f0f0f0; } .loghi_container .logo { max-width: 50%; padding: .7rem; } .logo_certificazioni { box-shadow: 0 0 10px rgba(30,30,30,.2); width: calc(50% - 2rem); margin: 1rem; padding: .4rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 6 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s_contatto { background-color: #f0f0f0; } #form { max-width: 35rem; margin: 0 auto; width: 100%; backdrop-filter: brightness(1.5) blur(10px); padding: 1rem 2rem; } #form .form-input input, #form .form-input textarea { background-color: transparent; border: 0; border-bottom: 1px solid var(--blue); border-radius: 0; font-family: var(--main-font); } #form .wpforms-submit { width: fit-content; margin: 0 auto; text-transform: uppercase; margin-top: 1.5rem; font-weight: 600; padding: .3rem 2.2rem .1rem 0; position: relative; font-size: calc(var(--rem) * 1.4); border: 0; background-color: transparent !important; display: block; } #form .wpforms-submit:before { content: ""; width: 40%; height: 1px; position: absolute; left: 0; bottom: 0; background-color: var(--black); transition: .3s ease; } #form .wpforms-submit:after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: calc(var(--rem) * 1.4); height: calc(var(--rem) * 1.4); background-image: url(../images/svg/link.svg); background-position: right; background-size: contain; background-repeat: no-repeat; } #form .wpforms-submit:hover:before { width: calc(100% - (var(--rem) * 2)); } #form .wpforms-field-checkbox .wpforms-selected input { background-image: url(../images/svg/checked.svg); background-color: #fff; } #form .wpforms-field-checkbox a { display: inline-block; font-weight: bold; } .s_contatto picture.img_1 { display: none; } .s_contatto picture.img_2 { display: none; } /** * * █▀▀▄ ▄▀▀▄ ▄▀▀▀ █▀▀ ▄▀▀ * █ █ █▀▀█ █ ▀▌ █▀▀ ▀▄ * █▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀ - TEMPLATES _ PAGINE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CHI SIAMO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1_title .breadcrumb { margin-bottom: 1rem; } .s1_title .breadcrumb a { display: inline-block; } .fasi_metodo { padding: 5% 0; } .fasi_metodo .text { background-color: #fafafa; } .text hr { margin: 5% 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE TESSUTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .scheda_tessuto { padding: 2rem 1.4rem; border-bottom: 1px solid #ccc; } .scheda_tessuto picture { margin-bottom: 2rem; box-shadow: 0 0 10px rgba(30,30,30,.2); height: 15rem; } .scheda_tessuto_completa { position: fixed; top: 0; left: 0; height: 100%; display: none; z-index: 10; } .scheda_tessuto_container { background-color: #fff; z-index: 1; width: 80%; margin: 1rem auto 0 auto; display: none; max-height: calc(100vh - 1rem); overflow-y: scroll; } .scheda_tessuto_container::-webkit-scrollbar { width: 8px; background-color: #ffffff; } .scheda_tessuto_container::-webkit-scrollbar-thumb { width: 8px; background-color: var(--blue); } img.back { position: absolute; top: 1rem; right: 1rem; width: 2rem; filter: drop-shadow(0 0 10px rgba(30,30,30,.2)); cursor: pointer; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE MAGLIE E POLO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .punto_forza { padding: 1rem; } .punto_forza_i { box-shadow: 0 0 10px rgba(30,30,30,.2); padding: 8%; height: 30rem; position: relative; background-color: #fff; } .punto_forza hr { width: 100%; } .punto_forza h3 { font-size: calc(var(--rem) * 1.5); margin-bottom: 1.5rem; font-family: var(--main-font); font-weight: 800; line-height: 1.2; } .punto_forza span.num { font-size: 22vw; opacity: .1; position: absolute; bottom: 1rem; right: 3rem; font-family: var(--title-font); } .punto_forza:nth-of-type(even) .punto_forza_i { background-color: var(--blue); } .punto_forza:nth-of-type(even) .punto_forza_i * { color: #fff; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CONTATTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s2_contatti .text p a { display: inline-block; } #s2_contatti .text p a:hover { color: var(--blue); transform: scale(.95); } /** * * ▄▀▀▄ █▀▀▄ ▄▀▀▀ █ █ ▀ ▐▌ ▐▌ █▀▀ * █▀▀█ █▐█▀ █ █▀▀█ █ ▀▄▀ █▀▀ * ▀ ▀ ▀ ▀▀ ▀▀▀ ▀ ▀ ▀ ▀ ▀▀▀ - TEMPLATES _ ARCHIVIO * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Background */ /* Content */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Search & Filter */ /* Terms Loop */ /* Posts Loop */ /* Custom pagination */ /* Load More */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀ ▀ █▄ █ ▄▀▀▀ █ █▀▀ * ▀▄ █ █ ▀█ █ ▀▌ █ ▄ █▀▀ * ▀▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ - SINGLE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Background */ /* Content */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █▀▀ ▄▀▀▄ █▀▀▄ █▄ ▄█ * █▀▀ █ █ █▐█▀ █ █ █ * ▀ ▀▀ ▀ ▀▀ ▀ ▀ - FORM * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ input[type="..."], select, textarea {} input[type="..."]:focus, input[type="..."]:active, select:focus, select:active, textarea:focus, textarea:active {} /* Animazioni */ input:focus { /* animation-name / animation-duration / animation-delay / animation-iteration-count */ -webkit-animation: formanim 0.25s forwards; animation: formanim 0.25s forwards; } @-webkit-keyframes formanim { 0% {} 100% {} } @keyframes formanim { 0% {} 100% {} } input[type="checkbox"] { border: 1px solid var(--black); width: 1.5em; height: 1.5em; } input[type=checkbox]:checked { background: url(../images/svg/checked.svg) no-repeat center; background-size: 1.25em; } input[type="..."].wpforms-error {} input[type="..."].wpforms-error:hover {} input[type="..."].wpforms-valid {} input[type="..."][disabled] {} select {} textarea {} input[type="submit"] {} input[type="submit"]:hover {} input[type="submit"]:focus, input[type="submit"]:active {} /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - EXTRA * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE GRAZIE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_grazie { text-align: center; } .back_wrapper { margin-top: 2.5%; } .go_back { display: inline-block; padding: .75em 1.25em .75em 3em; border: 1px solid #1e1e1e; border-radius: .5em; background: url(../images/svg/back.svg) no-repeat 1.25em center; background-size: 1.25em; font-size: 1.25em; font-weight: bolder; color: #1e1e1e; letter-spacing: .1em; text-transform: uppercase; } .go_back:hover, .go_back:active, .go_back:focus { background-color: #888; color: #fff; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE 404 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CSS EXTRA O MOD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ * * RESPONSIVE * * Settare se necessario regole fluid per minmax di elemtni specifici basandosi sulle seguenti regole: * => ORIGINAL CALC -> calc( 12px + (24 - 12) * ( (100vw - 320px) / (1920 - 320) ) ) * => CALC 1920px -> 320px -> calc( 12px + (24 - 12) * ( (100vw - 320px) / 1600 ) ) * => CALC 1280px -> 320px -> calc( 12px + (24 - 12) * ( (100vw - 320px) / 960 ) ) * => CALC 1024px -> 320px -> calc( 12px + (24 - 12) * ( (100vw - 320px) / 704 ) ) * * Da creare fluid dinamico con 2 step per i calc iniziali = 1920 -> 1024 1024 -> 320 * * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (max-width: 1921px) { .head_logo { width: calc( var(--head-logo-width) + ( var(--head-logo-max) - var(--head-logo-min) ) * ( (100vw - 320px) / 1600 ) ); } .hamburger_btn { font-size: calc( var(--hamburger-px) + ( var(--hamburger-max) - var(--hamburger-min) ) * ( (100vw - 320px) / 1600 ) ); } .scroll { width: calc( var(--scroll-px) + ( var(--scroll-max) - var(--scroll-min) ) * ( (100vw - 320px) / 1600 ) ); } .foot_logo { width: calc( var(--foot-logo-width) + ( var(--foot-logo-max) - var(--foot-logo-min) ) * ( (100vw - 320px) / 1600 ) ); } .back_top { width: calc( var(--back-top-px) + ( var(--back-top-max) - var(--back-top-min) ) * ( (100vw - 320px) / 1600 ) ); } } /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ /* Nav Menu */ /* Darkmode Switch */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Contents */ /* Credits */ /* Back Top */ /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Buttons */ /* Links */ /* Filters */ /* Sections 1 */ /* Breadcrumbs */ /* Scroll */ /* Components */ /* Cards */ /* Sidebar */ /* ... */ /*∞∞∞∞∞∞ 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 | 480 -> 767 * * Stylesheet: 481px and Up Stylesheet * This stylesheet is loaded for larger devices. * It's set to 481px because at 480px it would load on a landscaped iPhone. * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 481px) {} /** * * ▀▀█▀▀ ▄▀▀▄ █▀▀▄ █ █▀▀ ▀▀█▀▀ * █ █▀▀█ █▀▀█ █ ▄ █▀▀ █ * ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀ - TABLET | 768 -> 1280 * * Stylesheet: Tablet & Small Desktop Stylesheet * Here's where you can start getting into the good stuff. * This size will work on iPads, other tablets, and desktops. * So you can start working with more styles, background images, and other resources. * You'll also notice the grid starts to come into play. * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 768px) { /*__ FOOTER __*/ .credits br { display: none; } .credits .resp_sep { display: inline-block; } footer .foot_block { text-align: left; } footer .foot_block.border { border: 0; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } .scheda_tessuto { border: 0; } .punto_forza:nth-of-type(odd) { transform: translateY(-30%); z-index: 2; } /*.s_contatto picture.img_1 { display: block; width: 20rem; height: 30rem; transform: rotate(-5deg) translate(-60%, -50%); position: absolute; top: 50%; } .s_contatto picture.img_2 { display: block; width: 20rem; height: 30rem; transform: rotate(5deg) translate(60%, -50%); position: absolute; top: 50%; right: 0; }*/ .s_contatto picture.img_1 { display: block; position: absolute; left: 0; top: -10%; width: 25rem; } .s_contatto picture.img_2 { display: block; position: absolute; right: 0; top: 20%; width: 20rem; } .fasi_metodo { display: flex; } .fasi_metodo:nth-of-type(even) { flex-direction: row-reverse; } #s4_cosa_facciamo .container { flex-direction: row-reverse; } } /** * * Stylesheet: Desktop Stylsheet * This is the desktop size. * It's larger than an iPad so it will only be seen on the Desktop. * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1025px) { /*__ HEADER __*/ /* Overlay */ .hamburger_btn { font-size: 20px; } .hamburger_btn:hover { } .hamburger_btn.tapped:hover { } .head_menu li { position: relative; display: inline-block; width: 33%; margin: 2rem 0; } .head_menu li a { font-size: calc(var(--rem) * 2.2); } .head_menu li:after { content: ""; background-color: #ccc; width: 100%; height: 1rem; position: absolute; left: 0; bottom: 0; transition: .3s ease; } .head_menu li:hover:after { height: 100%; } .head_menu li:hover a { color: var(--green); } /*__ FOOTER __*/ .credits a:hover, .credits a:active, .credits a:focus { opacity: 1; color: var(--blue); } #credits_studio:hover { color: #e74e0f; } /* Back Top */ .back_top { opacity: 1; } .s1 .slider_nav { bottom: 50%; transform: translateY(50%); } .s1 .slider_nav { width: 4em; height: 4em; } .s1_title { width: 50%; } .p_resp { padding: 7%; } .collezione { justify-content: flex-start; align-items: center; } .collezione .text { margin: 5%; background-color: transparent; max-width: 25rem; } .loghi_container .logo { max-width: 50%; padding: 1.4rem; } .scheda_tessuto { padding: 5% 2rem; } .tilt .img_1 { width: 55%; margin: 1rem 0 1rem 1rem; } .tilt .img_2 { width: 55%;right: 0; bottom: 6%; } #s3_cosa_facciamo .tilt .img_1 { width: 90%; margin: 0.5rem 0 10% 1rem; } #s3_cosa_facciamo .tilt .img_2 { bottom: 0; } #s4_cosa_facciamo .tilt .img_1 { width: 90%; margin: 0.5rem 0 10% 1rem; } #s4_cosa_facciamo .tilt .img_2 { bottom: 0; } .due_colonne { columns: 2; column-gap: 5%; } .due_colonne hr { display: none; } } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1281 -> 1366 * * Stylesheet: Super Large Monitor Stylesheet * You can add some advanced styles here if you like. * This kicks in on larger screens. * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1281px) { .collezione .bkg_abs { background-position: 0% 10%; } } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀█▀ ▄▀▀▄ █▀▀▄ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1440 -> 1919 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1367px) { } /** * * █ █ █▀▀▄ █▀▀ █▀▀▄ * █ █ █▀▀█ █▀▀ █▐█▀ * ▀▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - ÜBER | 1920 -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1921px) {} /** * * ▄▀█ █ ▄▀ * █▄▄█▄ █▀▄ * █ ▀ ▀▀ - DESKTOP 4K & UP | 2561px -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and ( min-width: 2561px ) {} /** * * █▀▀▄ █▀▀ ▀▀█▀▀ ▀ █▄ █ ▄▀▀▄ * █▐█▀ █▀▀ █ █ █ ▀█ █▀▀█ * ▀ ▀▀ ▀▀▀ ▀ ▀ ▀ ▀ ▀ ▀ - RETINA (2x RESOLUTION DEVICES) * * This applies to the retina iPhone (4s) and iPad (2,3) along with other displays with a 2x resolution. * You can also create a media query for retina AND a certain size if you want. * Go Nuts. * __________________________________________________________________________________________________________________________________________________________________________ */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { } /** * * █▀▀▄ █▀▀ ▐▌ ▐▌ ▀ ▄▀▀ █▀▀ ▄▀▀ * █ █ █▀▀ ▀▄▀ █ █ █▀▀ ▀▄ * ▀▀▀ ▀▀▀ ▀ ▀ ▀▀ ▀▀▀ ▀▀ - SPECIFIC DEVICES * __________________________________________________________________________________________________________________________________________________________________________ */ /* If is Device */ @media screen and (max-device-width: 1280px){} @media screen and (max-device-width: 768px){} @media screen and (max-device-width: 480px){}