/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "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); */ ul.topmenu-links-menu li a { padding: 10px 20px; font-weight: normal; color: #000; border-radius: 23px; } .topmenu * { box-sizing: initial; } /** * * ▐▌ ▐▌ ▄▀▀▄ █▀▀▄ ▄▀▀ * ▀▄▀ █▀▀█ █▐█▀ ▀▄ * ▀ ▀ ▀ ▀ ▀▀ ▀▀ - VARS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /** * * █ █ █▀▀ ▄▀▀▄ █▀▀▄ █▀▀ █▀▀▄ * █▀▀█ █▀▀ █▀▀█ █ █ █▀▀ █▐█▀ * ▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - HEADER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ header { display: none; } #content .container_total { padding: 0; } .head_logo { width: 6rem; height: auto; position: absolute; left: 2.5%; top: 1.5rem; z-index: 2; } .top_link { position: absolute; top: 1.5rem; right: 2.5%; z-index: 2; } .top_link button { margin: .25rem; text-shadow: 0 0.2rem 0.3rem rgb(0 0 0 / 80%); } .loader_wrapper { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background-color: rgba(var(--green-rgb),.9); } .loader { width: 4rem; height: 4rem; border: 3px dotted #FFF; border-style: solid solid dotted dotted; border-radius: 50%; display: inline-block; position: relative; box-sizing: border-box; animation: rotation 2s linear infinite; } .loader::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 3px dotted #FF3D00; border-style: solid solid dotted; width: 2rem; height: 2rem; border-radius: 50%; animation: rotationBack 1s linear infinite; transform-origin: center center; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotationBack { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } .lang * { background-color: transparent !important; } .lang .wpml-ls-legacy-list-horizontal { border-radius: 5rem; border: 2px solid var(--white); padding: 0.25rem; margin-right: 0.5rem; } .lang a { font-weight: 600; opacity: .5; } .lang .wpml-ls-current-language a { opacity: 1; } .lang span { color: #fff; display: flex; } /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .swiper_nav { width: 1em; top: 50%; transform: translateY(-50%); z-index: 1; filter: drop-shadow(0 0 .5rem rgba(30,30,30,.2)); background-color: transparent !important; } .swiper_prev { left: .5rem; } .swiper_next { right: .5rem; } .swiper_nav img { width: 100%; transition: .2s ease; } .swiper_nav:hover img { opacity: .6; } .swiper_nav:active img { transform: scale(.9); } .swiper_nav.swiper-button-disabled { display: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BUTTONS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .btn { display: inline-block; position: relative; font: inherit; color: inherit; padding: .5em 1.5em; border: 2px solid var(--white); border-radius: 4rem; background-color: transparent; font-size: .9rem; color: var(--white); font-weight: 700; text-transform: uppercase; } .btn:hover, .btn:active, .btn:focus { background-color: transparent; border-color: var(--l_green); color: var(--l_green); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ a.link { display: inline-block; position: relative; cursor: pointer; font: inherit; color: inherit; padding: .5em 1.5em; border: 2px solid var(--l_green); border-radius: 4rem; background: var(--l_green); font-size: .9rem; color: var(--grey); font-weight: 700; text-transform: uppercase; } a.link:hover { background: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .filter_tb { background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); } .filter_bt { background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); } .filter_white { background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 42%, rgba(80,95,96,0.9) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.96) 42%,rgba(80,95,96,0.9) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.96) 42%,rgba(80,95,96,0.9) 100%); } /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .tac { text-align: center; } .text h2 { text-transform: uppercase; margin: 1.25rem 0; } .text p, .text li { margin: 1rem 0; } .text p a, .text li a { display: inline-block; font-weight: 700; } .text p a:hover, .text li a:hover { color: var(--l_green); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1 h1 { text-transform: uppercase; color: var(--white); font-weight: 900; text-shadow: 0 0.2rem 0.3rem rgb(0 0 0 / 80%); margin-bottom: 1.5rem; } .s1 p { color: var(--white); font-size: 1.2rem; font-weight: 700; margin-bottom: 1.5rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s2_page { background-color: var(--grey); } .s2_page * { color: var(--white); } .s2_page p { font-size: 1.125rem; } .s2_page p b, .s2_page p strong { color: var(--l_green); } .s2_page .bkg_abs { background-image: url(albero_int.svg); opacity: .1; } .text.max_w { max-width: 90ch; margin-left: auto; margin-right: auto; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_percorso { padding: 1rem; } .card_percorso_i { height: 28rem; cursor: pointer; } .card_content { padding: 1.5rem; } .card_percorso .filter_color { background: rgb(20,126,49); background: -moz-linear-gradient(45deg, rgba(20,126,49,1) 0%, rgba(157,191,21,1) 100%); background: -webkit-linear-gradient(45deg, rgba(20,126,49,1) 0%,rgba(157,191,21,1) 100%); background: linear-gradient(45deg, rgba(20,126,49,1) 0%,rgba(157,191,21,1) 100%); opacity: 0; transition: .3s ease; } .card_percorso_i:hover .filter_color { opacity: .5; } .card_percorso h2 { font-size: 2.5rem; color: var(--white); text-transform: uppercase; font-weight: 600; text-shadow: 0 0.2rem 0.3rem rgb(0 0 0 / 80%); margin-bottom: 1.5rem; } .card_percorso button { display: inline-block; position: relative; font: inherit; color: inherit; padding: .25em 1.5em; border: 2px solid var(--color_card); border-radius: 4rem; background-color: var(--color_card); font-size: .9rem; color: var(--white); font-weight: 700; text-transform: uppercase; } .card_percorso button:hover { color: var(--color_card); background-color: var(--white); } .box_percorso { box-shadow: 0 0 .75rem rgba(30,30,30,.2); width: calc(100% - 2rem); margin: 1rem; background-color: var(--white); } .box_percorso h3 { color: var(--color_card); font-weight: 900; } .box_percorso img { width: 100%; } .box_percorso .text { padding: 5%; } .box_percorso .more_text { display: none; } .box_percorso button { color: var(--color_card); font-weight: 700; background-color: transparent !important; text-transform: uppercase; } .box_percorso button:hover { opacity: .6; } .caratteristiche_percorso { background-color: var(--color_card); padding: 1.5rem; } .caratteristiche_percorso .swiper-slide img { display: block; margin: 0 auto; width: auto; height: 2.5rem; object-fit: contain; margin-bottom: 1rem; } .caratteristiche_percorso .swiper-slide p { text-align: center; color: var(--white); font-size: .8rem; font-weight: 700; margin: 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 5 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s5_page .swiper_nav img { filter: invert(1); } .how_to { background-color: var(--grey); padding: 2.5rem 1.25rem; min-height: 20rem; border-radius: 10rem; } .how_to p { color: var(--white); font-size: 16px; } .how_to p a { display: inline-block; font: inherit; } .how_to p a:hover { color: var(--vls); } .how_to img { width: 5rem; margin-bottom: 1rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 6 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s6_page .bkg_abs { background-image: url(albero_int.svg); opacity: .1; } .s6_page .col { padding: 1.5rem; } .s6_page .col h3 { color: var(--l_green); font-size: 2rem; margin-bottom: 2rem; font-weight: 700; } .s6_page .col p { color: var(--white); } .s6_page .col:nth-of-type(2) { border-top: 1px solid var(--l_green); border-bottom: 1px solid var(--l_green); } .s8_page h2 { font-size: calc(var(--h2-size) * 1.4); } .punto_supp { margin: 1rem 0; } .punto_supp img { margin-right: .75rem; width: 1.5rem; } .punto_supp p { font-size: 1.1rem; } .punto_supp a:hover { color: var(--l_green); } /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - EXTRA * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE GRAZIE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_grazie { text-align: center; } .back_wrapper { margin-top: 2.5%; } .go_back { display: inline-block; padding: .75em 1.25em .75em 4.5em; border: 1px solid #1e1e1e; border-radius: .5em; background: url(../images/svg/back.svg) no-repeat 1.25em center; background-size: 2em; 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; } /** * ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ * * 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 * * __________________________________________________________________________________________________________________________________________________________________________ */ /** * * █▄ ▄█ ▄▀▀▄ █▀▀▄ ▀ █ █▀▀ * █ █ █ █ █ █▀▀█ █ █ ▄ █▀▀ * ▀ ▀ ▀▀ ▀▀▀ ▀ ▀▀▀▀ ▀▀▀ - 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; } } /** * * 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 __*/ .head_logo { width: 10rem; } /*__ FOOTER __*/ .credits a:hover, .credits a:active, .credits a:focus { opacity: 1; color: var(--color); } #credits_studio:hover { color: #e74e0f; } /* Back Top */ .back_top { opacity: 1; } .i_percorsi.open { padding-bottom: 45rem; } .swiper-caratteristiche .swiper-slide:first-of-type { border: 0; } .swiper-caratteristiche .swiper-slide { border-left: 1px solid rgba(255,255,255,.25); } .map_mobile, .btn_more { display: none; } .box_percorso { position: absolute; left: 0; bottom: 0; } .box_percorso .text { padding: 2rem; } .box_percorso .text_scroll { overflow-y: scroll; height: 30rem; padding-right: 2rem; } .box_percorso .more_text { display: block !important; } .box_percorso .text_scroll::-webkit-scrollbar { width: 5px; background-color: #f8f8f8; } .box_percorso .text_scroll::-webkit-scrollbar-thumb { width: 5px; background-color: var(--color_card); } .map_canvas { position: absolute; top: 0; right: 0; width: 50% !important; height: 34rem; } .s6_page .col:nth-of-type(2) { border: 0; border-left: 1px solid var(--l_green); border-right: 1px solid var(--l_green); } } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - 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) {} /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀█▀ ▄▀▀▄ █▀▀▄ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ - 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){}