/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " Visit Cinque Terre - Quelle vere " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █ █ █▀▀ ▄▀▀▄ █▀▀▄ █▀▀ █▀▀▄ * █▀▀█ █▀▀ █▀▀█ █ █ █▀▀ █▐█▀ * ▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - HEADER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .header { z-index: 4; transition: .125s ease } .header:not(.open).scrolling { transform: translateY(-62%); transition: .25s cubic-bezier(0.8, 0, 0.41, 0.81) } .head_wrapper { padding: 1em 1.5em; z-index: 2; border-bottom: 1px solid var(--white); } .header .head_wrapper { backdrop-filter: blur(5px); } .header .head_wrapper::before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(to bottom, rgb(0 0 0 / 60%), transparent); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .head_logo { display: inline-block; --head-logo-width: 100px; /* <- in 'px' */ --head-logo-min: 100; --head-logo-max: 175; max-width: 175px; } .head_logo :where(img, svg) { width: 100%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAD CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Lang */ .lang .wpml-ls-legacy-dropdown-click { width: auto; margin-right: 0.75rem; } .lang .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle, .lang .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu a { display: flex; align-items: center; justify-content: center; width: 2.5rem; background-color: transparent; padding: 0; padding: .25rem .5rem; border: 1px solid var(--white); border-radius: 50%; aspect-ratio: 1 / 1; font-size: 1rem; line-height: 1; text-transform: uppercase; white-space: nowrap; font-weight: 600; color: var(--white); } .lang .wpml-ls-legacy-dropdown-click a span { margin-top: 2px; } .lang .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:after { display: none; } .lang .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu { border: 0; margin-top: .25rem; } .lang .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu a { background: var(--white); color: var(--black); box-shadow: 0 0 1rem rgb(30 30 30 / 20%); } .lang .wpml-ls-legacy-dropdown-click .wpml-ls-item { margin-top: 2px; } .lang #wpml-ls-submenu-click-default { background-color: transparent; } /* Sottomenu */ .elenco_tag {} .tag_menu { background-color: var(--color); flex: 1 1 auto; width: 100%; aspect-ratio: 1 / 1; padding: .75rem; box-shadow: 0 0 1rem rgb(30 30 30 / 13%); max-height: 3rem; } .tag_menu svg { width: 100%; height: 100%; object-fit: contain; } /* Button cerca */ .btn_cerca { cursor: pointer; width: 2.5rem; margin-right: .5rem; padding: .625rem; aspect-ratio: 1 / 1; border: 1px solid var(--white); border-radius: 5rem; } .btn_cerca path { fill: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HAMBURGER / MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #hamburger { display: inline-block; font-size: var(--rem); line-height: 0; padding: .375em; overflow: visible; cursor: pointer; transition: .25s ease; } #hamburger .wrap { width: 2.5em; height: 2em; } #hamburger span { display: block; position: absolute; left: 0; width: 2.5em; height: 3px; border-radius: 1em; background-color: var(--white); transform-origin: center; will-change: transform; transition: .25s ease; } #hamburger .top_bun { top: 0; } #hamburger .pomdor { top: calc(33% - 1px); width: 80% } #hamburger .burger { bottom: calc(33% - 1px); } #hamburger .bottom_bun { bottom: 0; width: 80% } /* Tapped / Clicked animation */ #hamburger.tapped span { transition: .25s ease; width: 100%; } #hamburger.tapped :where(.burger, .pomdor) { opacity: 0; } #hamburger.tapped .top_bun { top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); } #hamburger.tapped .bottom_bun { top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-45deg); } .header.open .head_wrapper { background-color: var(--blue_light); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ NAV MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #main_nav { display: none; position: absolute; top: 0; left: 0; z-index: 1; } #main_nav .menu_wrapper { top: 0; left: 0; background-color: var(--blue_light); padding-top: var(--hh); padding-bottom: var(--c25v); overflow-y: scroll; } #main_nav .menu_wrapper::-webkit-scrollbar { width: 0; background-color: var(--white); } #main_nav .menu_wrapper::-webkit-scrollbar-thumb { width: 0; background-color: var(--blue_light); } #main_nav .col_menu { padding: 0 var(--c5o); } /*#main_nav .col_menu + .col_menu { padding-top: var(--c5v); margin-top: var(--c5v); }*/ #main_nav .head_menu li { font: inherit; line-height: 1; } #main_nav .head_menu li.current-menu-item { color: ; } #main_nav .head_menu li a { display: inline-block; font-size: 1.5em; color: var(--white); font-weight: 250; text-transform: uppercase; font-family: var(--title-font); line-height: 1; padding: .25em; } .box_menu { min-height: 7rem; border-radius: 1rem; overflow: hidden; } .box_menu + .box_menu { margin-top: 1rem; } .box_menu .filter { background: linear-gradient(to top, var(--color), transparent); } .box_menu p { font-size: 1.125rem; color: var(--white); padding: .75rem; } .box_menu button { position: absolute; bottom: .75rem; right: .75rem; width: 1.25rem; } .box_menu button svg { width: 100%; height: auto; } .box_menu button svg path { fill: var(--white); } .sep_1, .sep_2 { margin: var(--c5v) 0; pointer-events: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CERCA ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .wrapper_seacrh { display: none; position: fixed; top: 0; right: 0; /* padding-top: var(--topHead); */ z-index: 5; background: rgb(var(--blue-rgb) / 90%); backdrop-filter: blur(2rem); } .wrapper_seacrh .filter_close { pointer-events: initial; } .wrapper_seacrh .search { padding: var(--c7v) 1.5rem 1.5rem 1.5rem; width: 40rem; max-width: 100%; margin: 0 auto; } .wrapper_seacrh .search .text h3 {} .wrapper_seacrh .search .text p { font-size: 1rem; margin-top: 1rem; } .wrapper_seacrh .search .close { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; margin-bottom: 1rem; font-size: 1rem; color: var(--white); } .wrapper_seacrh .search .close svg { width: 1rem; } .wrapper_seacrh .search .close svg rect { fill: var(--white); } .wrapper_seacrh .search .close:hover { opacity: .75; } .wrapper_seacrh .search form { position: relative; } .wrapper_seacrh .search #keyword { width: 100%; height: auto; padding: .75rem 1rem; background-color: rgb(var(--white-rgb) / 15%); border-radius: .25em; color: var(--white); font-size: 1.25rem; font-weight: 300; line-height: 1.5; } .wrapper_seacrh .search #keyword::placeholder { color: var(--white); font-size: 1.25rem; line-height: 1.5; } .wrapper_seacrh .search .input_wrapper svg { width: 1rem; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); } .wrapper_seacrh .search .input_wrapper svg path { fill: var(--white); } .wrapper_seacrh .searchInput .ajax_spinner { display: none; padding: 1rem; margin-top: 1rem; background-color: rgb(var(--white-rgb) / 15%); border-radius: .25em; z-index: 1; position: relative; } .wrapper_seacrh .searchInput .ajax_spinner img { width: 1.5rem; } .wrapper_seacrh .wrapper_datafetch { display: none; margin-top: 1rem; background-color: rgb(var(--white-rgb) / 15%); border-radius: .25em; z-index: 1; position: relative; text-align: left; } .wrapper_seacrh .search_result { overflow-y: scroll; height: 45vh; z-index: 1; position: relative; } .wrapper_seacrh .search_result ul { padding: 1rem; } .wrapper_seacrh .search_result ul + ul { border-top: 1px solid rgb(var(--white-rgb) / 50%); } .wrapper_seacrh .search_result::-webkit-scrollbar { width: 5px; background-color: rgb(var(--white-rgb) / 50%); } .wrapper_seacrh .search_result::-webkit-scrollbar-thumb { width: 5px; background-color: var(--white); border-radius: 2rem; } .wrapper_seacrh .search_result li + li { margin-top: 1rem; } .wrapper_seacrh .search_result li.pretitolo + li { margin-top: .5rem; } .wrapper_seacrh .search_result li.pretitolo { font-weight: 600; font-size: .85rem; text-transform: uppercase; color: var(--blue_light); background: white; width: fit-content; line-height: 1; padding: 2px; } .wrapper_seacrh .search_result li a { font: inherit; font-weight: 400; font-size: 1rem; color: var(--white); line-height: 1.125; } .wrapper_seacrh .search_result li a:hover { opacity: .5; } /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKs / BTNs STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .link { display: inline-flex; gap: .625em; position: relative; width: fit-content; padding: .5em 1.625em; border: 1px solid var(--white); border-radius: .5em; font: inherit; font-size: var(--rem); color: var(--black); background-color: var(--white); } .link svg { min-width: 1rem; width: 1.25rem; height: auto; } .link svg path { fill: var(--black); transition: .25s ease; } .link:hover, .link:focus, .link:active { background-color: var(--black); color: var(--white); } .link:hover svg path, .link:focus svg path, .link:active svg path { fill: var(--white); } /* Outline */ .link.out { background-color: transparent; border-color: var(--white); color: var(--white); } .link.out svg path { fill: var(--white); } .link.out:hover, .link.out:focus, .link.out:active { background-color: var(--white); color: var(--blue_light); } .link.out:hover svg path, .link.out:focus svg path, .link.out:active svg path { fill: var(--blue_light); } /* Colori pieni */ .link.orange { background-color: var(--orange); border-color: var(--orange); color: var(--white); } .link.orange svg path { fill: var(--white); } .link.orange:hover, .link.orange:focus, .link.orange:active { background-color: var(--white); color: var(--orange); } .link.orange:hover svg path, .link.orange:focus svg path, .link.orange:active svg path { fill: var(--orange); } .link.blue { background-color: var(--blue); border-color: var(--blue); color: var(--white); } .link.blue svg path { fill: var(--white); } .link.blue:hover, .link.blue:focus, .link.blue:active { background-color: var(--white); color: var(--blue); } .link.blue:hover svg path, .link.blue:focus svg path, .link.blue:active svg path { fill: var(--blue); } .link.brick { background-color: var(--brick); border-color: var(--brick); color: var(--white); } .link.brick svg path { fill: var(--white); } .link.brick:hover, .link.brick:focus, .link.brick:active { background-color: var(--white); color: var(--brick); } .link.brick:hover svg path, .link.brick:focus svg path, .link.brick:active svg path { fill: var(--brick); } .link.swamp { background-color: var(--swamp); border-color: var(--swamp); color: var(--white); } .link.swamp svg path { fill: var(--white); } .link.swamp:hover, .link.swamp:focus, .link.swamp:active { background-color: var(--white); color: var(--swamp); } .link.swamp:hover svg path, .link.swamp:focus svg path, .link.swamp:active svg path { fill: var(--swamp); } .link.blue_light { background-color: var(--blue_light); border-color: var(--blue_light); color: var(--white); } .link.blue_light svg path { fill: var(--white); } .link.blue_light:hover, .link.blue_light:focus, .link.blue_light:active { background-color: var(--white); color: var(--blue_light); } .link.blue_light:hover svg path, .link.blue_light:focus svg path, .link.blue_light:active svg path { fill: var(--blue_light); } .link.green_light { background-color: var(--green_light); border-color: var(--green_light); color: var(--white); } .link.green_light svg path { fill: var(--white); } .link.green_light:hover, .link.green_light:focus, .link.green_light:active { background-color: var(--white); color: var(--green_light); } .link.green_light:hover svg path, .link.green_light:focus svg path, .link.green_light:active svg path { fill: var(--green_light); } .link.fucsia { background-color: var(--fucsia); border-color: var(--fucsia); color: var(--white); } .link.fucsia svg path { fill: var(--white); } .link.fucsia:hover, .link.fucsia:focus, .link.fucsia:active { background-color: var(--white); color: var(--fucsia); } .link.fucsia:hover svg path, .link.fucsia:focus svg path, .link.fucsia:active svg path { fill: var(--fucsia); } .link.green { background-color: var(--green); border-color: var(--green); color: var(--white); } .link.green svg path { fill: var(--white); } .link.green:hover, .link.green:focus, .link.green:active { background-color: var(--white); color: var(--green); } .link.green:hover svg path, .link.green:focus svg path, .link.green:active svg path { fill: var(--green); } .link.green_dark { background-color: var(--green_dark); border-color: var(--green_dark); color: var(--white); } .link.green_dark svg path { fill: var(--white); } .link.green_dark:hover, .link.green_dark:focus, .link.green_dark:active { background-color: var(--white); color: var(--green_dark); } .link.green_dark:hover svg path, .link.green_dark:focus svg path, .link.green_dark:active svg path { fill: var(--green_dark); } .link.pink { background-color: var(--pink); border-color: var(--pink); color: var(--white); } .link.pink svg path { fill: var(--white); } .link.pink:hover, .link.pink:focus, .link.pink:active { background-color: var(--white); color: var(--pink); } .link.pink:hover svg path, .link.pink:focus svg path, .link.pink:active svg path { fill: var(--pink); } .link.brown_white { background-color: var(--white); border-color: var(--white); color: var(--brown); } .link.brown_white svg path { fill: var(--brown); } .link.brown_white:hover, .link.brown_white:focus, .link.brown_white:active { background-color: var(--brown); color: var(--white); } .link.brown_white:hover svg path, .link.brown_white:focus svg path, .link.brown_white:active svg path { fill: var(--white); } .link.fucsia_white { background-color: var(--white); border-color: var(--white); color: var(--fucsia); } .link.fucsia_white svg path { fill: var(--fucsia); } .link.fucsia_white:hover, .link.fucsia_white:focus, .link.fucsia_white:active { background-color: var(--fucsia); color: var(--white); } .link.fucsia_white:hover svg path, .link.fucsia_white:focus svg path, .link.fucsia_white:active svg path { fill: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .filter_bt_black { background: linear-gradient(to top, rgb(var(--black-rgb) / 100%), rgb(var(--black-rgb) / 20%), transparent); } .filter_bt_rose { background: linear-gradient(to top, var(--rose), transparent); opacity: 0.2; } .filter_bt_brick { background: linear-gradient(to top, var(--brick), transparent); opacity: 0.2; } .filter_bt_swamp { background: linear-gradient(to top, var(--swamp), transparent); opacity: 0.2; } .filter_bt_blue { background: linear-gradient(to top, var(--blue), transparent); opacity: 0.2; } .filter_bt_blue_light { background: linear-gradient(to top, var(--blue_light), transparent); opacity: 0.2; } .filter_bt_green_light { background: linear-gradient(to top, var(--green_light), transparent); opacity: 0.2; } .filter_bt_green_dark { background: linear-gradient(to top, var(--green_dark), transparent); opacity: 0.2; } .filter_bt_brown_light { background: linear-gradient(to top, var(--brown_light), transparent); opacity: 0.2; } .filter_tb_salmon { background: linear-gradient(to bottom, var(--salmon), transparent); opacity: 0.2; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .bold { font-weight: 700; } .big { font-size: clamp(3rem, 12vw, 250px); z-index: 1; position: relative; } .big { line-height: .8; } .big .light { } .big .dark { font-weight: 500; } /* Maschere */ .mask { -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100%; width: 105%; transform: translate(-2.5%, -5%) rotate(-5deg); aspect-ratio: 2 / 1; } .mask.vernazza { -webkit-mask-image: url(../images/svg/mask/vernazza.svg); } .mask.riomaggiore { -webkit-mask-image: url(../images/svg/mask/riomaggiore.svg); aspect-ratio: 1.7 / 1; } .mask.manarola { -webkit-mask-image: url(../images/svg/mask/manarola.svg); aspect-ratio: 2 / 1.1; transform: translate(-2.5%, -5%) rotate(0); } .mask.corniglia { -webkit-mask-image: url(../images/svg/mask/corniglia.svg); aspect-ratio: 2 / 0.9; transform: translate(-2.5%, -5%) rotate(0); } /* Onde */ .onda_top { top: -2.5%; left: 0; opacity: .05; pointer-events: none; z-index: -1; } .onda_bottom { bottom: -5%; left: 0; opacity: .05; pointer-events: none; z-index: -1; } .onda_mid { top: 25%; left: 0; opacity: .05; pointer-events: none; z-index: -1; transform: translateY(-50%); } /* Background e colori */ .bkg_white { background-color: var(--white); } .bkg_green { background-color: var(--green); } .bkg_brick { background-color: var(--brick); } .bkg_blue { background-color: var(--blue); } .bkg_blue_light { background-color: var(--blue_light); } .bkg_brown { background-color: var(--brown); } .bkg_orange { background-color: var(--orange); } .bkg_wine { background-color: var(--wine); } .bkg_fucsia { background-color: var(--fucsia); } .bkg_green_dark { background-color: var(--green_dark); } .bkg_green_light { background-color: var(--green_light); } .bkg_salmon { background-color: var(--salmon); } .green_light { color: var(--green_light); } .green { color: var(--green); } .brick { color: var(--brick); } .blue { color: var(--blue); } .brown { color: var(--brown); } .orange { color: var(--orange); } .wine { color: var(--wine); } .fucsia { color: var(--fucsia); } .green_dark { color: var(--green_dark); } .rose { color: var(--rose); } .blue_light { color: var(--blue_light); } .green .light { color: var(--green_light) !important; } .blue .light { color: var(--blue_light) !important; } .brown .light { color: var(--brown_light) !important; } .wine .light { color: var(--rose) !important; } .fucsia .light { color: var(--pink) !important; } .page_green .text:not(.white) { --title-color: var(--green); } .page_brick .text:not(.white) { --title-color: var(--brick); } .page_blue .text:not(.white) { --title-color: var(--blue); } .page_brown .text:not(.white) { --title-color: var(--brown); } .page_orange .text:not(.white) { --title-color: var(--orange); } .page_wine .text:not(.white) { --title-color: var(--wine); } .page_fucsia .text:not(.white) { --title-color: var(--fucsia); } .page_green_dark .text:not(.white) { --title-color: var(--green_dark); } .page_green .text:not(.white) .light { color: var(--green_light); } .page_blue .text:not(.white) .light { color: var(--blue_light); } .page_brown .text:not(.white) .light { color: var(--brown_light); } .page_wine .text:not(.white) .light { color: var(--rose); } .page_fucsia .text:not(.white) .light { color: var(--pink); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SCROLL BUTTON ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SWIPER NAV ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .nav_wrp { gap: .5rem; } .nav_btn { width: 3.5em; 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_btn.abs { top: 50%; transform: translateY(-50%); } .nav_prev.abs { left: 0; } .nav_next.abs { 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; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ COMPONENTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Social */ .social { gap: .5em; } .social a { display: inline-block; width: 2.25em; } .social a :where(img,svg) { width: 100%; } .social a svg path { transition: .25s ease; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SLIDER AVVISI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .opne_news { position: fixed; bottom: var(--c10v); right: 0; z-index: 3; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .5rem; padding: 1em .75em; background-color: var(--rose); border-radius: .75rem 0 0 .75rem; color: var(--white); text-transform: uppercase; font-size: clamp(16px, 1.25vw, 1rem); font-family: var(--title-font); font-weight: 600; } .opne_news .num { display: flex; align-items: center; justify-content: center; position: absolute; top: -.5rem; left: -.5rem; padding: .5rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: 14px; font-weight: 600; list-style: 1; background-color: var(--green_light); box-shadow: 0 0 .75rem rgb(30 30 30 / 10%); } .opne_news:hover { background-color: rgb(var(--rose-rgb) / 75%); } .opne_news.hide { transform: translateX(120%); } /* Chiudi news */ .filter_close_news { display: none; z-index: 4; position: fixed; pointer-events: initial; background-color: rgb(var(--blue-rgb) / 25%); backdrop-filter: blur(.25rem); } .wrapper_slider_news .close_news { min-width: fit-content; width: 100%; padding: 1rem; background-color: var(--rose); color: var(--white); text-transform: uppercase; font-size: 1rem; font-weight: 400; } .wrapper_slider_news .close_news:hover { background-color: rgb(var(--rose-rgb) / 75%); } /* Banner news */ .wrapper_slider_news { pointer-events: none; position: fixed; bottom: var(--c5v); right: 0; background-color: var(--white); z-index: 5; transform: translateY(100%); opacity: 0; transition: .25s ease; width: 24rem; height: calc(95% - var(--c5v)); } .wrapper_slider_news.open { pointer-events: initial; transform: translateY(0); opacity: 1; } .wrapper_slider_news .tit, .wrapper_news { padding: 1rem; } .wrapper_news { padding-top: 0; } .slide_news { padding: 1rem; width: 100%; border: 1px solid #ccc; } .slide_news + .slide_news { margin-top: 1rem; } .slide_news > p { min-width: fit-content; } .slide_news .date { font-size: clamp(16px, 2vw, 17px); font-weight: 700; } .slide_news .date .autore { font-weight: 400; } .slide_news div .p { font-size: 1.25rem; margin-top: .5rem; } .slide_news div p { font-size: 1rem; } .slide_news button { color: var(--rose); text-decoration: underline 1px; } .slide_news:hover { background-color: #f0f0f0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BREADCRUMBS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #breadcrumb { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5em; } #breadcrumb li { list-style: none; margin: 0; } #breadcrumb .separator {} #breadcrumb :where(a,span) { display: inline-block; min-width: fit-content; color: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █▀▀ ▄▀▀▄ ▄▀▀▄ ▀▀█▀▀ █▀▀ █▀▀▄ * █▀▀ █ █ █ █ █ █▀▀ █▐█▀ * ▀ ▀▀ ▀▀ ▀ ▀▀▀ ▀ ▀▀ - FOOTER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ footer { border-top: 1px solid rgb(var(--black-rgb) / 30%); } footer .grid { gap: var(--c10v) var(--c2o); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ STRUCTURE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Foot Logo */ .foot_logo { display: block; --foot-logo-width: 150px; --foot-logo-min: 150; --foot-logo-max: 200; max-width: 200px; margin-bottom: 1.5rem; } .foot_logo :where(img, svg) { width: 100%; } /* Foot Block */ .foot_block {} .foot_block .prop { font-size: 1.25rem; font-family: var(--title-font); font-weight: 600; } .foot_block p {} .foot_block p + p { margin-top: 1em; } .foot_block p a { display: inline-block; font: inherit; } .foot_block p a:hover { color: var(--blue_light); } .logo_ist { display: inline-block; margin-top: 1rem; } .logo_ist img { width: auto; max-width: 80%; height: 3.5rem; object-fit: contain; } .logo_ist:hover { opacity: .75; } .credits { font-size: .85rem; } #credits_studio:hover { color: #e74e0f; } /* Foot Social */ .foot_block .social { margin-top: 1rem; margin-bottom: 2.5rem; } .foot_block .social a:hover svg path { fill: var(--blue_light); } /* Menu */ #foot_menu ul { column-count: 2; column-gap: 2rem; } #foot_menu li { font: inherit; line-height: 1; } #foot_menu li.current-menu-item { color: ; } #foot_menu li a { display: inline-block; font-size: 1.25rem; color: var(--black); font-weight: 250; text-transform: uppercase; font-family: var(--title-font); line-height: 1; padding: .25em; } /** * * ▄▀▀ █▀▀ ▄▀▀ ▀▀█▀▀ ▀ ▄▀▀▄ █▄ █ ▄▀▀ * ▀▄ █▀▀ █ █ █ █ █ █ ▀█ ▀▄ * ▀▀ ▀▀▀ ▀▀ ▀ ▀ ▀▀ ▀ ▀ ▀▀ - SECTIONS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1 { overflow: hidden; padding-top: var(--hh); } .onda_s1 { position: absolute; top: var(--hh); left: 0; opacity: .05; pointer-events: none; } .shape_s1 { pointer-events: none; transform: translateY(1px); } .s1_title h1 span { display: block; } /*.s1_title h1 span:nth-of-type(1) { transform: translate(calc(var(--c2o) * -1)); }*/ .s1_title h1.row span:nth-of-type(2) { transform: translate(var(--c2o)); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION ____ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀ ▄▀▀▄ █▀▀▄ █▀▀▄ ▄▀▀ * █ █▀▀█ █▐█▀ █ █ ▀▄ * ▀▀ ▀ ▀ ▀ ▀▀ ▀▀▀ ▀▀ - CARDS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD TREKKING ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card a { border-radius: 1rem 1rem 0 0; overflow: hidden; min-height: 30rem; overflow: hidden; } .card picture img { transition: .25s ease; } .card .tag_trail { position: absolute; top: 1rem; right: 1rem; background-color: var(--salmon); color: var(--white); font-size: 16px; border-radius: 5rem; padding: .625rem 1rem; } .card .card_filter { background: linear-gradient(to top, rgb(var(--black-rgb) / 100%), rgb(var(--black-rgb) / 20%), transparent) } .card .card_content { padding: 1.5rem; } .card h3 { color: var(--white); margin-bottom: .75rem; } .card p { color: var(--white); font-size: 1rem; margin-bottom: .75rem; } .card:hover picture img { transform: scale(1.05); } .wrapper_info { border: 1px solid var(--white); margin-bottom: 1rem; /*display: inline-grid; grid-template-columns: fit-content(8rem) fit-content(8rem); */ display: inline-flex; align-items: stretch; justify-content: flex-start; } .wrapper_info .box { padding: .75em 1.25em; text-align: center; } .wrapper_info .box:nth-of-type(2) { border-left: 1px solid var(--white); } .wrapper_info .box p {font-weight: 500; margin: 0; } .wrapper_info .box p:nth-of-type(1) { font-size: 16px; font-weight: 600; text-transform: uppercase; line-height: .8; margin-bottom: .5rem; } .wrapper_info .box p:nth-of-type(2) { font-size: clamp(18px, 2.5vw, 26px); line-height: .8; font-family: var(--title-font); } .wrapper_info .box p span::before { content: " / "; } .wrapper_info .box p span:first-of-type::before { content: ""; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD EVENTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_ev .date { display: inline-block; background-color: var(--pink); padding: .375em 1em; border-radius: 4rem; font-size: 16px; color: var(--white); margin-bottom: .75rem; } .card_ev .luogo + .luogo { margin-top: .25rem; } .card_ev .luogo { gap: .5rem; } .card_ev .luogo svg { width: 1rem; height: 1rem; object-fit: contain; } .card_ev .luogo svg path { fill: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD POI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card .icon { position: absolute; top: 1rem; right: 1rem; display: flex; align-items: flex-start; justify-content: flex-end; gap: .5rem; } .card .icon mark { width: 2.5rem; height: 2.5rem; padding: .5rem; border-radius: .25rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD OSPITALITÀ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .cat span::before { content: ", "; } .cat span:first-of-type::before { content: ""; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD EVENTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_pdf a { gap: .75rem; height: 100%; padding: 1rem; border-radius: 1rem; /* box-shadow: 0 0 1rem rgb(30 30 30 / 10%) */ border: 3px solid var(--fucsia); } .card_pdf .date { display: inline-block; background-color: var(--pink); padding: .375em 1em; border-radius: 4rem; font-size: 16px; color: var(--white); margin-bottom: .75rem; } .card_pdf .luogo + .luogo { margin-top: .25rem; } .card_pdf .luogo { gap: .5rem; } .card_pdf .luogo svg { width: 1rem; height: 1rem; object-fit: contain; } .card_pdf .card_content h3 { margin-bottom: .5rem; } .card_pdf .card_content p { font-size: 18px; } .card_pdf .card_content button { margin-top: 1rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD RISULTATI MAPPA ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_result + .card_result { margin-top: 1.5rem; } .card_result .grid { gap: 1rem; grid-template-columns: 1fr; align-items: center; } .card_result picture { height: 100%; max-height: 7rem; border-radius: 1.5rem 0 0 0; overflow: hidden; } .card_result p { color: var(--color); font-size: 1rem; line-height: 1.5; font-weight: 300; font-family: var(--title-font); margin-bottom: .5rem; } .card_result h3 { font-size: 2rem; font-weight: 700; transition: .25s ease; margin-bottom: .75rem } .card_result button { background-color: var(--color); border-color: var(--color); color: var(--white); } .card_result button svg path { fill: var(--white); } .card_result button:hover { background-color: var(--white); color: var(--color); } .card_result button:hover svg path { fill: var(--color); } /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ #page_home .text h2 { font-size: clamp(2rem, 5vw, calc(var(--h2-size) * 2)); } #page_home .text h2 b { display: block; } #s7_home .text h2 b { display: inline; } #page_home .page_green .text:not(.white) p { color: var(--green); } #page_home .page_blue .text:not(.white) p { color: var(--blue); } #page_home .page_brick .text:not(.white) p { color: var(--brick); } #page_home .page_wine .text:not(.white) p { color: var(--wine); } #page_home .page_green_dark .text:not(.white) p { color: var(--green_dark); } #page_home .page_fucsia .text:not(.white) p { color: var(--fucsia); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_home { padding-top: 0; } #s1_home .onda_s1 { opacity: .1 } #s1_home .filter { opacity: .45; } #s1_home h1 { font-size: clamp(4rem, 9vw, 160px); font-weight: 600; position: relative; text-shadow: 0 0 1rem rgb(30 30 30 / 50%); } #s1_home h1 span:nth-of-type(1) { transform: translateX(calc(var(--c2o) * -1));} #s1_home h1 span:nth-of-type(2) { position: absolute; top: 0; left: 55vw; font-size: 200%; transform: translateY(-25%); opacity: .375; } #s1_home h1 span:nth-of-type(3) { transform: translateX(var(--c2o)); } #s1_home .s1_title > svg { display: block; max-width: 80%; margin: 2.5rem auto 1.5rem auto; } #s1_home .s1_title p { font-weight: 300; text-shadow: 0 0 1rem rgb(30 30 30 / 50%); } #s1_home .s1_title p strong { font-weight: 400; } #s1_home .s1_title p:nth-of-type(1) { font-size: 1.5rem; } #s1_home .s1_title p:nth-of-type(2) { font-size: 18px; text-transform: uppercase; margin-top: .25rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s2_home .text h2 b { display: inline-block; } .wrapper_atti { gap: 1rem; } .box_atti { border-radius: .75rem; overflow: hidden; min-height: 33vh; } .box_atti .content { padding: 1rem; padding-top: 4rem; } .box_atti .content mark { display: inline-block; margin-bottom: .5rem; background-color: var(--green_light); color: var(--white); font-family: var(--title-font); font-size: 18px; border-radius: 5rem; padding: .5rem 1rem; } .box_atti .content h3 { color: var(--white); } .box_atti .links { gap: .5rem; margin-top: 1rem; flex-wrap: wrap; } .box_atti .links .link:nth-of-type(2) { background-color: var(--white); color: var(--green); } .box_atti .links .link:nth-of-type(2) svg path { fill: var(--green); } .box_atti .links .link:nth-of-type(2):hover { background-color: var(--green); color: var(--white); } .box_atti .links .link:nth-of-type(2):hover svg path { fill: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTRO HOME ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* .filtro_big { background-color: var(--blue_light); padding: 1.5rem var(--c2o); border-radius: 1rem; box-shadow: 0 0 1rem rgb(30 30 30 / 10%); margin-bottom: var(--c7v); margin-top: -3rem; } .filtro_big .text { margin-bottom: 2rem; } .filtro_big .text::before { content: ""; width: 100%; height: 2px; background-color: var(--white); position: absolute; left: 0; top: calc(50% - 1px); } .filtro_big .text .h2 { position: relative; background-color: var(--blue_light); padding: 0 1rem; } .wrapper_filtro_big { gap: 1rem .5rem; grid-template-columns: 1fr; } .filtro_item { width: 100%; } .filtro_item > p { font-size: 1.5rem; font-weight: 400; font-family: var(--title-font); color: var(--white); margin-bottom: .5rem; } .filtro_item select { appearance: none; cursor: pointer; width: 100%; border: 2px solid var(--white); padding: .75rem 1rem; padding-right: 2.5em; background: url(../images/svg/form_sel_open_1.svg) no-repeat calc(100% - 1em) / 1em var(--white); border-radius: .5em; font-size: clamp(16px, 1.5vw, 18px); } .filtro_bottone { margin-top: 1rem; } #btn_cerca_filtro { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .75rem 1rem; background-color: var(--blue); border-radius: .5em; width: 100%; border: 2px solid var(--blue); font-size: clamp(16px, 1.5vw, 18px); color: var(--white); text-transform: uppercase; font-weight: 600; } #btn_cerca_filtro svg { width: auto; height: 1rem; } #btn_cerca_filtro svg path { transition: .25s ease-in-out; } #btn_cerca_filtro:hover { background-color: var(--white); color: var(--blue); } #btn_cerca_filtro:hover path { fill: var(--blue); } */ .filtro_big { margin-top: var(--c7v); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #slider_scale .swiper { overflow-y: visible; overflow-x: clip; padding: 0 1.5rem; } #slider_scale .swiper .swiper-slide { transition: transform .25s ease; } #slider_scale .swiper .swiper-slide-active { transform: scale(1.05); z-index: 2; } #slider_scale .swiper .card a { border-radius: 1rem; } #slider_scale .swiper .card .shape_s1 { display: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .wrapper_mappa > .filter { height: 3%; background: linear-gradient(to bottom, var(--white), transparent); } .wrapper_mappa #mappa {} .sec_mappa { z-index: 2; background: linear-gradient(45deg, var(--blue), var(--blue_light)); } .sec_mappa .italia { position: absolute; left: var(--c2o); bottom: var(--c2v); width: auto; height: 65%; transition: .5s ease; } .sec_mappa .italia.hide { transform: translateX(-100%) scale(0); } .open_infobox { cursor: pointer; transform-origin: center center; transition: .25s; } .open_infobox:hover { transform: scale(.98); } #manarola rect { animation: running pulse_red 2s infinite; } #riomaggiore rect { animation: running pulse_green 2s infinite; } @keyframes pulse_red { 0% { filter: drop-shadow(0 0 1px rgb(var(--black-rgb) / 80%)); } 100% { filter: drop-shadow(0 0 40px rgb(var(--black-rgb) / 0%)); } } @keyframes pulse_green { 0% { filter: drop-shadow(0 0 1px rgb(var(--black-rgb) / 80%)); } 100% { filter: drop-shadow(0 0 40px rgb(var(--black-rgb) / 0%)); } } /* Modale mappa */ .box_comuni { z-index: 2; position: fixed; left: 10%; top: calc(130px + (205 - 130) * ((100vw - 320px) / 1600)); width: 80%; transform: translateX(-100%); opacity: 0; pointer-events: none; transition: .375s ease-in-out; } .box_comuni.show { transform: translateX(0%); opacity: 1; pointer-events: initial; } .box_comuni .tabs { padding-right: 1rem; } .box_comuni .tabs button { display: inline-block; padding: .5em 1rem; background-color: var(--color); border-radius: .5em .5em 0 0; margin-right: .25rem; box-shadow: 0 0 1rem rgb(30 30 30 / 10%); color: var(--white); font-family: var(--title-font); font-size: 1.125rem; font-weight: 300; } .box_comuni .tabs button.active { background-color: var(--white); color: var(--color); } #risultati_box { background-color: var(--white); border-radius: 1rem; box-shadow: 0 0 1rem rgb(30 30 30 / 10%); } .wrapper_box { padding: 1rem 1rem 1.5rem 1rem; display: none; } .wrapper_box.active { display: block; } .wrapper_box .wrapper_box_i { height: calc(75vh - (130px + (205 - 130) * ((100vw - 320px) / 1600))); overflow-y: scroll; padding-right: 1.5rem; } .wrapper_box .wrapper_box_i::-webkit-scrollbar { width: 8px; background-color: #f0f0f0; } .wrapper_box .wrapper_box_i::-webkit-scrollbar-thumb { width: 8px; background-color: var(--color); } .close_box { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); background-color: var(--color); width: 2.5rem; border-radius: 5rem; aspect-ratio: 1 / 1; padding: .75rem; display: flex; align-items: center; justify-content: center; z-index: 1; } .filter_close_map { position: fixed; top: 0; left: 0; z-index: 1; display: none; background-color: rgb(var(--black-rgb) / 40%); backdrop-filter: blur(.5rem); pointer-events: initial; } :where(#loader, #loader_2) { display: none; background-color: rgb(var(--white-rgb) / 70%); border-radius: 2rem; } #loader_2 { position: fixed; z-index: 2; } :where(#loader, #loader_2) span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); border: 8px solid #f0f0f0; border-top: 8px solid var(--blue_light); border-radius: 50%; width: 2em; height: 2em; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 5 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*#slider_trk .swiper { padding: 0 var(--c10o); }*/ #slider_trk .swiper { padding: 0 1.5rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 6 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #slider_rot .swiper { overflow-y: visible; overflow-x: clip; padding: 0 1.5rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 7 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .box_org { border-radius: .75rem; overflow: hidden; } .box_org + .box_org { margin-top: 1rem; } .box_org .content { padding: 1rem; padding-top: 4rem; max-width: calc(80% - 3rem); } .box_org .content h3, .box_org .content p { color: var(--white); } .box_org .content p { margin-top: 1rem; font-size: .85rem; } .box_org .icona_org { width: 3rem; position: absolute; bottom: 1rem; right: 1rem; } .box_org .sized { transition: .25s ease; } .box_org:hover .sized { transform: scale(1.05); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 8 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Calendario */ .cerca_eventi { padding: 1.5rem 1.5rem 2.5rem 1.5rem; } .cerca_eventi { background-color: var(--white); padding: .5rem; box-shadow: 0 0 1rem rgb(30 30 30 / 10%); border-radius: .75rem; } .cerca_eventi .flatpickr-calendar.inline { border: 0; background: transparent; top: 0; box-shadow: unset; border-radius: 1rem; /* max-width: 325px; */ max-width: 100%; width: 100%; } .cerca_eventi .link.disabled { cursor: not-allowed; filter: grayscale(1); opacity: .5 } .cerca_eventi .link { width: 100%; margin-top: 1rem; text-align: center; justify-content: center; } .cerca_eventi .flatpickr-calendar .flatpickr-months { position: relative; margin-bottom: 1rem; } .cerca_eventi .flatpickr-calendar .flatpickr-months .flatpickr-current-month { position: relative; height: auto; display: flex; align-items: center; justify-content: center; padding: 1rem 0; width: 100%; left: 0; } /* Mesi */ .cerca_eventi .flatpickr-calendar .flatpickr-months .flatpickr-month { color: var(--black); fill: var(--black); height: auto; position: relative; } .cerca_eventi .flatpickr-calendar .flatpickr-months .flatpickr-month :where(select, input) { font-weight: 500; margin: 0 .25rem; } .cerca_eventi .flatpickr-calendar .flatpickr-months .flatpickr-month select option { color: var(--black); } .cerca_eventi .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:not(.flatpickr-disabled), .cerca_eventi .flatpickr-calendar .flatpickr-months .flatpickr-next-month:not(.flatpickr-disabled) { top: 50%; transform: translateY(-50%); cursor: pointer; background-color: var(--white); border-radius: 50%; width: 1.5rem; height: 1.5rem; padding: .25rem; display: flex; align-items: center; justify-content: center; } .cerca_eventi .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg, .cerca_eventi .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg { display: block; fill: var(--black); } .cerca_eventi .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg, .cerca_eventi .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--fucsia); } /* Settimane */ .cerca_eventi .flatpickr-calendar span.flatpickr-weekday { color: var(--black); } .cerca_eventi .flatpickr-calendar .flatpickr-day { color: var(--black); font-size: clamp(.75rem, 1.25vw, .95rem); font-weight: 400; border: 0; transition: .125s ease; } .cerca_eventi .flatpickr-calendar .flatpickr-day.today { border: 1px solid #ccc; } /* Giorni */ .cerca_eventi .flatpickr-calendar .flatpickr-day.endRange, .cerca_eventi .flatpickr-calendar .flatpickr-day.startRange { background: var(--fucsia); } .cerca_eventi .flatpickr-days, .cerca_eventi .dayContainer { width: 100%; max-width: unset; } .cerca_eventi .flatpickr-day { cursor: initial; width: calc(100% / 7) !important; max-width: unset; height: auto; line-height: 2.5; font-size: clamp(.75rem, 1.25vw, .95rem); } .cerca_eventi .flatpickr-calendar .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .cerca_eventi .flatpickr-calendar .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .cerca_eventi .flatpickr-calendar .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 var(--fucsia); } .cerca_eventi .flatpickr-calendar .flatpickr-day.flatpickr-disabled, .cerca_eventi .flatpickr-calendar .flatpickr-day.nextMonthDay, .cerca_eventi .flatpickr-calendar .flatpickr-day.prevMonthDay { color: var(--black); opacity: .5; font-weight: 400; } .cerca_eventi .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover { color: #6d6d6d; } .cerca_eventi .flatpickr-calendar .flatpickr-day:hover, .cerca_eventi .flatpickr-calendar .flatpickr-day.nextMonthDay:hover, .cerca_eventi .flatpickr-calendar .flatpickr-day.prevMonthDay:hover { background: rgb(var(--fucsia-rgb) / 15%); border: 0; } .cerca_eventi .flatpickr-calendar .flatpickr-day.selected { background: rgb(var(--fucsia-rgb) / 100%) !important; border: 0; color: var(--white); } .cerca_eventi .flatpickr-calendar .flatpickr-day.selected:hover, .cerca_eventi .flatpickr-calendar .flatpickr-day:focus { background: rgb(var(--fucsia-rgb) / 50%) !important; border: 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 9 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .filter_bt_green_dark { opacity: .375; background: linear-gradient(to top, transparent, var(--green_dark), transparent); } /** * * █▀▀▄ ▄▀▀▄ ▄▀▀▀ █▀▀ ▄▀▀ * █ █ █▀▀█ █ ▀▌ █▀▀ ▀▄ * █▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀ - TEMPLATES _ PAGINE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .ratio-strecth { aspect-ratio: 3 / 1; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE RISULTATI DI RICERCA ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s2_risultati .filtro_big { margin-bottom: var(--c7v); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE PARCO E TERRITORIO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ #s1_parco { } /* Section 2 */ #s2_parco .big span { display: block; } #s2_parco .big span:nth-of-type(1) { transform: translateX(calc(var(--c2o) * -1)); } #s2_parco .big span:nth-of-type(2) { transform: translateX(var(--c2o)); } /* Section 3 */ #s3_parco .tit_wrapper { gap: 2rem; } #s3_parco .tit_wrapper .h3 { max-width: 40ch; } /* Section 4 */ #s4_parco .big { } #s4_parco h2 { font-weight: 600; transform: translateX(calc(var(--c3o) * -1)); } .gradient > .filter { opacity: 0.25; background: linear-gradient(to bottom, transparent 0%, var(--green_light) 50%,transparent 100%); } /* Section 5 */ #s5_parco .h2 { transform: translateX(10vw); } #s5_parco .big span { display: block; } #s5_parco .big span:nth-of-type(2) { transform: translateX(20vw); } /* Section 6 */ .elenco_territori:nth-of-type(odd) { flex-direction: row-reverse; } .elenco_territori + .elenco_territori { margin-top: var(--c10v); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE RESPONSABILE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 3 */ #s3_resp .filter_bt_rose { bottom: calc(var(--c10v) + 20%); top: unset; } /* Section 4 */ .filter_bt_swamp { bottom: 18.5vw; top: unset; } #s4_resp .text .h0 span { display: block; } #s4_resp .text .h0 span:nth-of-type(1) { transform: translateX(calc(var(--c2o) * -1)); } #s4_resp .text .h0 span:nth-of-type(2) { transform: translateX(var(--c2o)); } #s4_resp .sec_img .ratio-1-1 { transform: rotate(-5deg); } .sec_img picture img { border-radius: 1rem; } .rispetto { padding: .85rem 1rem; border: 3px solid var(--green_dark); border-radius: 0.75rem; background-color: var(--white); /* margin-top: 1.375em; */ margin-top: 1.25em; } .rispetto p { font-weight: 600; color: var(--green_dark) } /* .rispetto:nth-of-type(even) { transform: rotate(5deg); } .rispetto:nth-of-type(odd) { transform: rotate(-5deg); } */ /* Section 5 */ .filter_bt_blue { bottom: 0; top: unset; } #s5_resp .text .h0 span { display: block; } #s5_resp .text .h0 span:nth-of-type(1) { transform: translate(calc(var(--c3o) * -1)); } #s5_resp .text .h0 span:nth-of-type(2) { transform: translate(var(--c3o)); } .box_principio { border: 3px solid var(--blue); border-radius: 1rem; background-color: var(--white); margin-top: 1.375em; max-width: 60rem; margin-left: auto; margin-right: auto; } .box_principio .tit { padding: .85rem 1rem; background-color: var(--blue); border-radius: .75rem .75rem 0 0; color: var(--white); font-weight: 600; } .box_principio .text { padding: var(--c5v) 2rem ; } .box_principio .text p { max-width: 40rem; margin-left: auto; margin-right: auto; } .box_principio:nth-of-type(even) { transform: rotate(2.5deg); } .box_principio:nth-of-type(odd) { transform: rotate(-2.5deg); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE GUEST CARD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Sec 3 */ #s3_card .big span { display: block; } #s3_card .big span:nth-of-type(2) { transform: translate(5%); } #s3_card .big span:nth-of-type(3) { transform: translate(20%); } .vantaggi_gc { gap: .75rem; } .box_vantaggi { text-align: center; padding: 2.5rem 1.5rem; border-radius: 1rem; } .box_vantaggi img { width: 5rem; height: 5rem; object-fit: contain; margin-bottom: 1rem; } .box_vantaggi p { color: var(--white); } .box_vantaggi:nth-of-type(1) { background-color: var(--green); } .box_vantaggi:nth-of-type(2) { background-color: var(--blue); } .box_vantaggi:nth-of-type(3) { background-color: var(--brick); } .box_vantaggi:nth-of-type(4) { background-color: var(--orange); } .box_vantaggi:nth-of-type(5) { background-color: var(--wine); } .box_vantaggi:nth-of-type(6) { background-color: var(--fucsia); } /* Sec 4 */ #s4_card .text .big span { display: block; } #s4_card .text .big span:nth-of-type(2) { transform: translate(7.5%); } #s4_card .text svg { position: absolute; top: 5%; right: -2.5%; opacity: .25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE FAQ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ #s1_faq h1 span:nth-of-type(1) { margin-left: 20%; } /* Section 2 */ .titolo_tag { border-bottom: 4px solid var(--color); } .titolo_tag :where(h2, h3, h4, h5, h6) { padding: .75rem 1.25rem; background-color: var(--color); border-radius: .75rem .75rem 0 0; display: inline-block; margin-left: 1rem } :where(.accordion, .accordion_cerca) .card_accordion + .card_accordion { margin-top: 1rem } :where(.accordion, .accordion_cerca) .accordion_head { transition: .25s ease; padding: 1rem; gap: 1rem; cursor: pointer; border: 1px solid var(--green); } :where(.accordion, .accordion_cerca) .accordion_head > .flex-l { gap: .5rem; } :where(.accordion, .accordion_cerca) .accordion_head h2 { transition: .25s ease; font-size: clamp(1.25rem, 1.75vw, 1.75rem); font-weight: 250; color: var(--green); } :where(.accordion, .accordion_cerca) .accordion_head svg { min-width: 1rem; width: 1rem; } :where(.accordion, .accordion_cerca) .accordion_head.active { background-color: var(--green_light); } :where(.accordion, .accordion_cerca) .accordion_head.active h2 { color: var(--white); } :where(.accordion, .accordion_cerca) .accordion_head.active svg { transform: scaleY(-1); } :where(.accordion, .accordion_cerca) .accordion_head.active svg path { stroke: var(--white); } :where(.accordion, .accordion_cerca) .accordion_text { display: none; padding: 1rem; padding-bottom: 2rem; padding-right: 3rem; border: 1px solid var(--green); border-top: unset; border-radius: 0 0 1rem 1rem; } #s2_faq .cerca_faq .tit { font-size: clamp(1.25rem, 1.75vw, 1.75rem); font-weight: 250; color: var(--green); font-family: var(--title-font); } #s2_faq .input_wrapper { position: relative; margin-top: 1rem; } #s2_faq .input_wrapper input#keyword_faq { width: 100%; height: auto; line-height: 1.25; font-size: 1rem; padding: .75em; border-radius: .5rem; background-color: #f0f0f0; } #s2_faq .input_wrapper img { width: auto; height: 1.5rem; position: absolute; right: .5em; top: 50%; transform: translateY(-50%); } .filter_ajax { display: none; background-color: rgb(var(--white-rgb) / 50%); position: fixed; } .filter_ajax #loader { z-index: 1; transform: rotate(0deg); border: 8px solid #f3f3f3; border-top: 8px solid var(--green); border-radius: 50%; width: 2em; height: 2em; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE INFO UTILI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ .pre_icon { margin-bottom: 1rem; width: 4rem; } /* Section 4 */ #s4_info .filter_bt_green_light { bottom: 24vw; top: unset; } .wrapper_farma { gap: 1rem 0; } .box_farma { border: 3px solid var(--green); border-radius: 1rem; background-color: var(--white); } .box_farma .tit { padding: .85rem 1rem; background-color: var(--green); border-radius: .75rem .75rem 0 0; color: var(--white); font-weight: 600; } .box_farma .text { padding: var(--c5v) 2rem; } /* Section 5 */ #s5_info .sec_img { transform: rotate(2deg); } .box_cell { display: inline-flex; align-items: stretch; margin-top: 1.5rem; border: 3px solid var(--fucsia); border-radius: 1rem; background-color: var(--white); overflow: hidden; } .box_cell .icon_cell { background-color: var(--fucsia); padding: .625rem; } .box_cell .icon_cell svg { height: 2rem; width: auto; } .box_cell p { color: var(--fucsia); font-size: 1.25rem; font-weight: 650; padding: .625rem 1.5rem; } .box_cell:hover { background-color: rgb(var(--fucsia-rgb) / 5%); transform: scale(.95); } .box_orario { border: 3px solid var(--fucsia); border-radius: 1rem; background-color: var(--pink); padding: 2rem; max-width: 35rem; transform: rotate(-5deg); z-index: 1; } .box_orario p { color: var(--white); font-size: clamp(1.25rem, 2vw, 1.75rem); font-family: var(--title-font); line-height: 1.25; } /* Section 6 */ #s6_info .sec_img { transform: rotate(-2deg); } .box_meteo { border: 3px solid var(--orange); border-radius: 1rem; background-color: var(--brick); padding: 2rem; transform: rotate(5deg); z-index: 1; } .box_meteo p { color: var(--white); font-size: clamp(1.25rem, 2vw, 1.75rem); font-family: var(--title-font); line-height: 1.25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE INFOPOINT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Sec 3 */ .wrapper_infopoint { gap: 1rem 0; margin-top: 2rem; } .box_infopoint { border: 3px solid var(--green_dark); border-radius: 1rem; background-color: var(--white); } .box_infopoint .tit { padding: .85rem 1rem; background-color: var(--green_dark); border-radius: .75rem .75rem 0 0; color: var(--white); font-weight: 600; } .box_infopoint .text { padding: var(--c5v) 2rem; } #s4_infopoint .box_infopoint { border: 3px solid var(--rose); } #s4_infopoint .box_infopoint .tit { background-color: var(--rose); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE COME ARRIVARE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 3 */ .consigli_utili { max-width: 35ch; } .consigli_utili * { color: var(--blue_light); } .consigli_utili p { margin-top: .75rem !important; } .box_treni { border: 3px solid var(--blue_light); background-color: var(--white); border-radius: .75rem; margin-top: 1.5rem; overflow: hidden; align-items: stretch; } .box_treni .flex-l { padding: .75rem; gap: .5rem; } .box_treni .flex-l p { font-size: clamp(18px, 2vw, 1.75rem); font-weight: 500; font-family: var(--title-font); color: var(--blue_light); } .box_treni .flex-l svg { width: 1.5rem; } .box_treni .flex-l svg path { fill: var(--blue_light); } .box_treni .flex-r { padding: .75rem; gap: .5rem; background-color: var(--blue_light); width: 100%; } .box_treni .flex-r p { font-size: 1rem; color: var(--white); } .box_treni .flex-r svg { width: 1rem; } .box_treni .flex-r svg path { fill: var(--white); } /* Section 4 */ #s4_come .filter_bt_blue_light { bottom: 24vw; top: unset; } .wrapper_info_auto { gap: 1rem 0; } .wrapper_info_auto .text { border: 3px solid var(--blue); border-radius: 1rem; background-color: var(--white); padding: 2rem; } .wrapper_info_auto .text:nth-of-type(1) { background-color: var(--blue_light); } .wrapper_info_auto .text:nth-of-type(1) p { color: var(--white); font-weight: 600; } .wrapper_info_auto .text:nth-of-type(2) p { color: var(--blue_light); font-weight: 600; } .ico_park { width: 5rem; position: absolute; bottom: 0; left: 10%; transform: translateY(50%); } .info_park { display: flex; align-items: stretch; justify-content: center; gap: ; flex-wrap: wrap; } .info_park .box_info { border-radius: 1rem; padding: 1.5rem .75rem; width: 40%; max-width: 12rem; text-align: center; margin-bottom: 2.5rem; } .info_park .box_info p { line-height: 1; color: var(--white); font-family: var(--title-font); font-size: clamp(20px, 1.5vw, 25px); font-weight: 700; } .info_park .box_info p:nth-of-type(1) { font-size: 200%; margin-bottom: .5rem; font-weight: 400; } .info_park .box_info p .num { font-size: 250%; } .info_park .box_info:nth-of-type(3n + 1) { border: 3px solid var(--blue); background-color: var(--blue_light); } .info_park .box_info:not(:nth-of-type(3n + 1)) { border: 3px solid var(--blue_light); background-color: var(--blue); } .info_park .box_info:nth-of-type(4n + 1) { transform: rotate(-2deg); } .info_park .box_info:nth-of-type(4n + 2) { transform: rotate(4deg) translateY(5rem); } .info_park .box_info:nth-of-type(4n + 3) { transform: rotate(-7deg); } .info_park .box_info:nth-of-type(4n + 4) { transform: rotate(6deg) translateY(5rem); } /* Section 5 */ .box_info_batt { border: 3px solid var(--blue); border-radius: 1rem; background-color: var(--blue_light); padding: 2rem; transform: rotate(5deg); z-index: 1; } .box_info_batt p { color: var(--white); font-size: clamp(1.25rem, 2vw, 1.75rem); font-family: var(--title-font); line-height: 1.25; } .paesi_battello p { font-size: clamp(2rem, 4vw, 4rem); font-weight: 250; font-family: var(--title-font); line-height: 1; color: var(--blue_light); text-align: center; } .paesi_battello p span { display: block; } .paesi_battello p span:nth-of-type(odd) { transform: translateX(var(--c2o)); } .paesi_battello p span:nth-of-type(even) { transform: translate(calc(var(--c2o) * -1)); } /* Section 6 */ #s6_come .filter_bt_blue_light { bottom: 24vw; top: unset; } .box_aereo { border: 3px solid var(--blue); background-color: var(--white); border-radius: .75rem; margin-top: 1.5rem; overflow: hidden; align-items: stretch; } .box_aereo .flex-l { padding: .75rem; gap: .5rem; } .box_aereo .flex-l p { font-size: clamp(1rem, 2.5vw, 2.125rem); font-weight: 500; font-family: var(--title-font); color: var(--blue); } .box_aereo hr { width: 4vw; height: 2px; background-color: var(--blue); } .box_aereo .flex { padding: .75rem; gap: .5rem; background-color: var(--blue); aspect-ratio: 1 / 1; } .box_aereo .flex p { font-size: 1rem; color: var(--white); } .box_aereo .flex svg { width: 1rem; height: 1rem; } .box_aereo .flex svg path { fill: var(--white); } /* Section 7 */ #s7_come .big span { display: block; } #s7_come .big span:nth-of-type(1) { transform: translate(-5%); } #s7_come .big span:nth-of-type(2) { transform: translate(5%); } #s7_come .text .h1 { font-size: calc(var(--h1-size) * 1.25); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE ESPERIENZE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 2 */ .box_cat img { margin-bottom: 1.5rem; width: 4rem; } .box_cat .h2 { color: var(--green); font-size: clamp(2rem, 4vw, 4rem); margin-bottom: 1rem; } .box_cat:nth-of-type(2) .h2, .box_cat:nth-of-type(3) .h2 { color: var(--green_light); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE TUTTI GLI OPERATORI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .box_download { background-color: var(--brown); padding: 1rem 1.5rem; gap: 1rem; border-radius: .75rem; } .box_download + .box_download { margin-top: 1.5rem; } .box_download p { font-size: clamp(1.25rem, 2vw, 2rem); font-weight: 500; font-family: var(--title-font); color: var(--white); } .box_download svg { width: 2rem; height: auto; } .box_download svg path { fill: var(--white); } .box_download:hover { transform: scale(.975); } /** * * ▄▀▀▄ █▀▀▄ ▄▀▀▀ █ █ ▀ ▐▌ ▐▌ █▀▀ * █▀▀█ █▐█▀ █ █▀▀█ █ ▀▄▀ █▀▀ * ▀ ▀ ▀ ▀▀ ▀▀▀ ▀ ▀ ▀ ▀ ▀▀▀ - TEMPLATES _ ARCHIVIO * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Posts Loop */ #card_grid { gap: 1.25rem; } /* Custom pagination */ .pagination .navigation { padding: var(--c5v) 0; } .pagination .nav-links { display: flex; align-items: center; justify-content: center; gap: .125rem; } .pagination a, .pagination span { min-width: unset; width: 2rem; height: 2rem; aspect-ratio: 1 / 1; border-radius: 5rem; display: flex; align-items: center; justify-content: center; background-color: transparent; color: var(--black); } .pagination .current { background-color: var(--black) !important; color: var(--white) !important; } .pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus { opacity: .75; background-color: var(--black) !important; } .pagination .next, .pagination .prev { display: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTRO E MAPPA ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .filter_close_archive { position: fixed; top: 0; left: 0; z-index: 2; display: none; background-color: rgb(var(--black-rgb) / 40%); backdrop-filter: blur(.5rem); pointer-events: initial; } .wrapper_filtro { z-index: 3; position: fixed; bottom: 2rem; left: 50%; transform: translate(-50%, 0); opacity: 0; transition: .25s ease; pointer-events: none; } .wrapper_filtro.show { pointer-events: initial; opacity: 1; } .wrapper_filtro .wrp_btn { position: relative; background-color: var(--white); box-shadow: 0 0 2rem rgb(30 30 30 / 50%); border-radius: 5rem; /* border: 1px solid var(--color); */ } .wrapper_filtro .wrp_btn button { display: inline-flex; gap: .5rem; align-items: center; width: auto; font-size: 1rem; line-height: 1; text-transform: uppercase; font-weight: 600; color: var(--color); } .wrapper_filtro .wrp_btn button svg { width: auto; min-width: 1.25rem; height: 1rem; } .wrapper_filtro .wrp_btn button svg path { fill: var(--color); } .wrapper_filtro .wrp_btn button + button { border-left: 1px solid var(--color); } .wrapper_filtro .wrp_btn button:hover, .wrapper_filtro .wrp_btn button:active, .wrapper_filtro .wrp_btn button:focus-visible { background-color: rgb(var(--color-rgb) / 10%) } .wrapper_filtro .wrp_btn button.active { background-color: var(--color); color: var(--white); } .toggle_filtro { border-radius: 5rem 0 0 5rem; padding: 1em 1em 1em 1.5em; } .toggle_map { border-radius: 5rem; padding: 0.85em 1em; } .toggle_filtro + .toggle_map { border-radius: 0 5rem 5rem 0; padding: 1em 1.5em 1em 1em; } /* Filtro */ .wrapper_filtro .filtro { display: none; position: absolute; left: 50%; bottom: 3.5rem; transform: translateX(-50%); padding: 1rem 1rem 3.37rem 2rem; border-radius: 1.5rem; background-color: var(--white); width: 30rem; max-width: 90vw; box-shadow: 0 0 1rem rgb(30 30 30 / 10%); } .wrapper_filtro .filtro_i { height: 20rem; padding-right: 1rem } .box_filtro + .box_filtro { margin-top: 1rem; } .box_filtro p { font-size: 1rem; margin-bottom: .5rem; } .wrapper_select select { appearance: none; cursor: pointer; width: 100%; border: 2px solid #f0f0f0; padding: .75rem 1rem; padding-right: 2.5em; background: url(../images/svg/form_sel_open_1.svg) no-repeat calc(100% - 1em) / 1em #f0f0f0; border-radius: .5em; font-size: clamp(16px, 1.5vw, 18px); color: var(--black); } .wrapper_select select::placeholder { color: var(--black); } .range_slider_wrapper { height: .25rem; } .range_track, .range_fill { position: absolute; top: 0; left: 0; width: 100%; height: .25rem; border-radius: 1rem; } .range_track { background: var(--white); } .range_fill { background: var(--brick); z-index: 1; } .price_range_labels { margin-top: .5rem; } .price_range_labels label { font-size: 1rem; } .range_slider_wrapper input[type="range"] { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 100%; height: .5rem; background: transparent; appearance: none; -webkit-appearance: none; pointer-events: none; } .range_slider_wrapper input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 1rem; height: 1rem; background: var(--brick); border-radius: 5px; cursor: pointer; pointer-events: all; } .link_filtro_wrp { background-color: var(--white); position: absolute; bottom: 0; left: 0; padding: .5rem 2rem .75rem 2rem; } .link_filtro_wrp .link { font-size: .85rem; display: inline-block; } .link_filtro_wrp a { text-decoration: underline 1px; } .link_filtro_wrp a:hover { color: #aaa; } /* Mappa */ #wrapper_maps { position: fixed; z-index: 2; left: var(--c2o); bottom: 5.5rem; width: calc(100% - var(--c5o)); height: 72.5%; border-radius: 2rem; overflow: hidden; transform: translateY(100%); opacity: 0; pointer-events: none; transition: .25s ease; } #wrapper_maps.active { transform: translateY(0); opacity: 1; pointer-events: initial; } #wrapper_maps .acf-map { width: 100%; height: 100%; } #wrapper_maps .card a { min-height: 20rem; } #wrapper_maps .card .info_top { right: unset; left: .5rem; } #wrapper_maps .card .wishlist { width: 1.75rem; height: 1.75rem; } #wrapper_maps .card .info_top mark { padding: .375rem 0.5rem; font-size: 12px; } #wrapper_maps .card .tit, #wrapper_maps .card .luogo { padding: .75rem; } #wrapper_maps .card .tit h3 { font-size: 1.125rem; } #wrapper_maps .card .luogo p { font-size: 14px; } #wrapper_maps .card .luogo button { width: 1.25rem; } #wrapper_maps .leaflet-control-attribution { display: none !important; } /** * * ▄▀▀ ▀ █▄ █ ▄▀▀▀ █ █▀▀ * ▀▄ █ █ ▀█ █ ▀▌ █ ▄ █▀▀ * ▀▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ - SINGLE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .sec_related .nav_wrp { margin-top: 1rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION TREKKING ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1_single .tag_trail { display: inline-block; margin-bottom: 1rem; background-color: var(--white); color: var(--brick); font-size: 1rem; border-radius: 5rem; padding: .625rem 1rem; } .s2_single .mask { transform: translate(-10%, -5%) rotate(-5deg); margin: var(--c10v) 0; width: 105vw; } .s2_single .text h2 { font-weight: 600; } .photogallery_wrapper { gap: 1rem; grid-template-columns: 1fr 1fr; } /* Sidebar */ .dettagli_tecnici { position: relative; z-index: 1; } .box_dettagli { background-color: var(--white); box-shadow: 0 0 1rem rgb(30 30 30 / 10%); border-radius: 1rem; overflow: hidden; } .box_dettagli .tit { border-radius: 1rem 1rem 0 0; background-color: var(--brick); padding: .75rem; text-align: center; } .box_dettagli .tit p { color: var(--white); font-family: var(--title-font); font-weight: 600; } .box_dettagli .grid { grid-template-columns: 1fr 1fr; } .box_dettagli .info { padding: 1rem; border-top: 1px solid #ccc; } .box_dettagli .info:nth-of-type(1), .box_dettagli .info:nth-of-type(2) { border-top: 0; } .box_dettagli .info:nth-of-type(odd) { border-right: 1px solid #ccc; } .box_dettagli .info p:nth-of-type(1) { font-size: 16px; color: var(--brick); font-weight: 600; text-transform: uppercase; line-height: 1; margin-bottom: .5rem; } .box_dettagli .info p:nth-of-type(2) { font-size: clamp(16px, 1.5vw, 22px); line-height: 1; } .box_dettagli .span_2 { grid-column: 2 span; border-right: 0 !important; } .dettagli_tecnici .link.w100 { width: 100%; justify-content: center; } .dettagli_tecnici hr { margin: 1.5rem 0; } .dettagli_tecnici .share p { font-size: 16px; color: var(--brick); font-weight: 600; text-transform: uppercase; line-height: 1; margin-bottom: .5rem; } .a2a_kit { gap: .25rem; } .a2a_kit a { border: 1px solid var(--black); border-radius: .25rem; padding: 0 !important; background-color: var(--white); } .a2a_kit a span { background-color: transparent !important; width: 2rem; height: 2rem; line-height: 1; } .a2a_kit a span svg path { fill: var(--black); } .a2a_kit a .a2a_s_share2 svg path:nth-of-type(2) { fill: var(--black) !important; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SINGLE ESPERIENZE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ .s1_title .icon { display: flex; align-items: flex-start; justify-content: flex-end; gap: .5rem; margin-bottom: 1rem; } .s1_title .icon .bkg_white { width: 3rem; height: 3rem; padding: .625rem; border-radius: .25rem; } /* Contatti */ .wrapper_contatti { padding: 0 var(--c2o); margin-top: -2.5rem; gap: .25rem; } .wrapper_contatti .box_cont { box-shadow: 0 0 1rem rgb(30 30 30 / 10%); width: 3.25rem; height: 3.25rem; padding: .625rem; border-radius: .25rem; } .wrapper_contatti .box_cont svg { width: 100%; height: 100%; } .wrapper_contatti .box_cont svg path { fill: var(--white); } .wrapper_contatti .box_cont p { font-family: var(--title-font); color: var(--white); font-size: clamp(18px, 1.5vw, 1.625rem); line-height: 1; } .wrapper_contatti .box_cont p span::before { content: "/"; } .wrapper_contatti .box_cont p span:first-of-type::before { content: ""; } /* Section 2 */ .wrapper_info_exp { gap: 2rem; } .box_exp { background-color: var(--white); border-radius: 1rem; overflow: hidden; box-shadow: 0 0 1rem rgb(30 30 30 / 10%) } .box_exp .tit { padding: .85rem 1rem; background-color: var(--green); border-radius: .75rem .75rem 0 0; color: var(--white); font-weight: 600; text-align: center; } .box_exp .text { padding: 1rem; } .box_exp .text p { font-family: var(--title-font); font-weight: 500; line-height: 1.25; font-size: clamp(1.5rem, 2vw, 1.75rem); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SINGLE OSPITALIÀ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #single_osp .s1_title .cat { margin-top: .5rem; font-family: var(--title-font); font-weight: 400; font-size: clamp(1rem, 2vw, 1.75rem); } /* Contatti estesi */ #single_osp .contatto_esteso svg { background-color: var(--brick); } #single_exp .contatto_esteso svg { background-color: var(--green); } .contatto_esteso + .contatto_esteso.cin { margin-top: 1rem; } .contatto_esteso { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; margin-top: .5rem; } .contatto_esteso svg { width: 1.5rem; height: 1.5rem; border-radius: .25em; padding: .25em; } .contatto_esteso svg * { fill: var(--white); } .contatto_esteso { font-size: 1rem; } .contatto_esteso:hover { opacity: .5; } /* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION BLOG ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */ #s2_blog .text img { margin: 1.5rem 0; width: 100%; } /** * * █▀▀ ▄▀▀▄ █▀▀▄ █▄ ▄█ * █▀▀ █ █ █▐█▀ █ █ █ * ▀ ▀▀ ▀ ▀▀ ▀ ▀ - FORM * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /* WP-Form - Custom */ #form .wpforms-field :where(input, textarea, select) { background-color: transparent; border: 2px solid var(--color); border-radius: .5rem; padding: .75rem 1.25rem; font-size: 1rem; color: var(--color); } #form .wpforms-field input::placeholder, #form .wpforms-field textarea::placeholder { color: var(--color); opacity: .75; } #form .wpforms-field:not(.wpforms-field-checkbox) > label { position: absolute; left: 1.25rem; top: .75rem; font-size: 1rem; color: var(--color); font-weight: 400; transform-origin: left; transition: .125s ease; } #form .wpforms-field:not(.wpforms-field-checkbox).focus > label { top: -2px; transform: scale(.625); } #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"] { border: 2px solid var(--color); border-radius: .25rem; background-size: .75rem; } #form .wpforms-field.wpforms-field-checkbox li label { color: var(--color); } #form .wpforms-field.wpforms-field-checkbox li label a:hover { color: var(--color_light); } #form button[type=submit] { display: inline-flex; gap: .625em; position: relative; width: fit-content; padding: .625em 1.625em; border: 1px solid var(--color); border-radius: .5em; font: inherit; font-size: 1.125rem; color: var(--white); background-color: var(--color); } #form button[type=submit]:hover, #form button[type=submit]:focus, #form button[type=submit]:active { background-color: var(--white); color: var(--color); } /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - 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 ∞∞∞∞∞∞*/ .header.scrolling { transform: translateY(-56%); } .head_wrapper { padding: 1em 2.5%; z-index: 2; } .elenco_tag { } .tag_menu { max-height: 3.75rem; } /*∞∞∞∞∞∞ COME ARRIVARE ∞∞∞∞∞∞*/ .box_treni .flex-r { width: fit-content; } } /** * * ▀▀█▀▀ ▄▀▀▄ █▀▀▄ █ █▀▀ ▀▀█▀▀ * █ █▀▀█ █▀▀█ █ ▄ █▀▀ █ * ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀ - TABLET | 768 x 1024 -> 1023 x 1280 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 768px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Contents */ #searchInput { margin-right: .5em; } /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ /* Sec 2 */ .wrapper_filtro_big { grid-template-columns: 1fr 1fr; } .filtro_bottone { grid-column: 2 span; margin-top: 1rem; } /* Sec 3 */ #slider_scale .swiper { padding: 0; } #slider_scale .swiper .swiper-slide-active { transform: scale(1.05); z-index: 2; } /* Sec 5 */ #slider_trk .swiper { padding: 0; } /* Sec 6 */ #slider_rot .swiper { padding: 0; } #slider_rot .swiper .swiper-slide { transition: transform .25s ease; transform: rotate(-2deg); } #slider_rot .swiper .swiper-slide-active { transform: rotate(-3deg); z-index: 2; } #slider_rot .swiper .swiper-slide-prev, #slider_rot .swiper .swiper-slide-next { transform: rotate(4deg); z-index: 1; } /*∞∞∞∞∞∞ GUEST CARD ∞∞∞∞∞∞*/ /* Sec 3 */ .vantaggi_gc { grid-template-columns: 1fr 1fr; } /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ /* Esperienze */ .wrapper_info_exp { grid-template-columns: 1fr 1fr; } } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀▀█▀▀ ▄▀▀▄ █▀▀▄ ▄▀▀ █▄ ▄█ ▄▀▀▄ █ █ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ ▀▄ █ █ █ █▀▀█ █ ▄ █ ▄ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ ▀▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀ - LAPTOP | 1024 x 768 -> 1280 x 720 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1024px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ .header.scrolling { transform: translateY(-70%); } /* Menu */ #main_nav .menu_wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5rem; padding-bottom: var(--c7v); padding-left: var(--c2o); padding-right: var(--c2o); } #main_nav .col_menu { padding: 0 1rem; padding-top: var(--c7v); } #main_nav .head_menu li + li { margin-top: 1rem; } #main_nav .head_menu li a { font-size: 1.75em; } #main_nav .head_menu li a:hover { transform: scale(1.05); } .box_menu .sized { transition: .25s ease; } .box_menu:hover .sized { transform: scale(1.05); } .sep_1, .sep_2 { margin: 0; position: absolute; top: 0; transform-origin: top left; transform: rotate(90deg); width: 100vh; } .sep_1 { left: 33%; } .sep_2 { left: 66%; } /* Button cerca */ .btn_cerca { justify-content: space-between; gap: 1rem; width: 15rem; color: var(--white); margin-right: 1rem; padding: .5rem 1.5em; aspect-ratio: unset; border: 1px solid var(--white); border-radius: 5rem; } .btn_cerca:hover { width: 17rem; background-color: rgb(var(--white-rgb) / 10%); } /* Sottomenu */ .elenco_tag { gap: .5rem; padding-right: var(--c2o); align-items: flex-start; } .tag_menu { flex: unset; max-height: unset; width: fit-content; aspect-ratio: unset; padding: .5em 1em; border-radius: 0 0 .5em .5em; gap: .5em; border: 1px solid var(--color); font-size: clamp(16px, 1.25vw, 20px); color: var(--white); font-weight: 400; font-family: var(--title-font); } .tag_menu svg { width: 1rem; height: auto; } .tag_menu svg path { transition: .25s ease; } .tag_menu:hover { color: var(--color); background-color: var(--white); } .tag_menu:hover path { fill: var(--color); } /* Search */ #searchInput.active { position: relative; width: auto; max-width: 720px; left: auto; flex: 1 1 auto; right: auto; } #searchInput .resultBox { border-radius: 1.25em; } #searchInput { position: relative; bottom: auto; right: auto; } #searchInput input { width: 100%; height: auto; padding: .525em 3em .5em 1.25em; border-color: var(--white); color: var(--black); border: 1px solid var(--black); } #searchInput input::placeholder { opacity: 1; } #searchInput .close_btn { width: 2.5em; height: 2.5em; padding: .625em; } #searchInput .close_btn:hover { background-color: var(--blue); } #searchInput .close_btn:hover svg path { fill: var(--white); } #searchInput .resultBox { top: 3em; bottom: auto; } /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Contents */ footer .grid { grid-template-columns: 1fr 1fr 1fr } #foot_info { text-align: right; } .foot_block .social { justify-content: flex-end; } #foot_menu { display: flex; align-items: flex-start; justify-content: center; } #foot_menu ul { column-gap: var(--c5o); } #foot_menu li a { font-size: 1.375rem; padding: .5em 0; } #foot_menu li a:hover { transform: scale(1.05); } /* Back Top */ #back_top { opacity: 1; } /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ .maxPar p { max-width: 40ch; } .maxPar.tac p { margin-left: auto; margin-right: auto; } /* Sec 2 */ .wrapper_atti { grid-template-columns: 1fr 1fr; } .box_atti { min-height: unset; } .box_atti:nth-of-type(1) { grid-row: 2 span } .box_atti:nth-of-type(1) .content, .box_atti:nth-of-type(1) .links { width: 100%; } .box_atti .content { padding: 1.5rem; padding-top: 4rem; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; } /* Form di ricerca */ .wrapper_filtro_big { gap: 1rem .5rem; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: flex-end; } .wrapper_filtro_big.colonna_5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .filtro_bottone { grid-column: 1 span; margin-top: 0; } /* Sec 3 */ #slider_scale { margin-top: var(--c20v); } #slider_scale .swiper .swiper-slide-active { transform: scale(1.25); } #slider_scale .swiper .swiper-slide-prev, #slider_scale .swiper .swiper-slide-next { transform: scale(1.125); z-index: 1; } /* Sec 4 */ /* Modale mappa */ .box_comuni { width: 47.5%; left: 5%; top: unset; bottom: 10%; position: absolute; } .wrapper_box .wrapper_box_i { height: 20rem } .wrapper_box .card_result .grid { grid-template-columns: .375fr 1fr } .wrapper_box .card_result picture { max-height: unset; } .wrapper_box .card_result h3 { font-size: 1.5rem; } .filter_close_map { position: absolute; } /*.close_box { width: 3.5rem; }*/ /* Sec 7 */ .box_org .content { padding: 1.5rem; padding-top: 6rem; } .box_org .icona_org { width: 4rem; } /*∞∞∞∞∞∞ PARCO ∞∞∞∞∞∞*/ /* Sec 4 */ #s4_parco .tit_wrapper { margin-bottom: 0; display: flex; align-items: center; justify-content: center; } #s4_parco .big { margin-bottom: -2rem; } #s4_parco h2 { transform: unset; position: absolute; right: 50%; right: 50%; bottom: -70%; } /*∞∞∞∞∞∞ GUEST CARD ∞∞∞∞∞∞*/ /* Sec 2 */ #s2_card .testo { transform: translate(25%, -5%); } /* Sec 3 */ .vantaggi_gc { grid-template-columns: 1fr 1fr 1fr; } .box_vantaggi:nth-of-type(2), .box_vantaggi:nth-of-type(5) { transform: translateY(2rem); } /*∞∞∞∞∞∞ INFO UTILI ∞∞∞∞∞∞*/ /* Sec 2 */ .pre_icon { margin-bottom: 0; position: absolute; top: 0; left: var(--c5o); transform: translateX(calc(-100% - 1.5rem)); } /* Sec 4 */ .wrapper_farma { grid-template-columns: 1fr 1.25fr; z-index: 1; } .box_farma:nth-of-type(1) { transform: rotate(-5deg) translateY(-2rem); } .box_farma:nth-of-type(2) { transform: rotate(5deg); } .box_farma .text { padding: var(--c5v) var(--c2o); } /*∞∞∞∞∞∞ INFOPOINT ∞∞∞∞∞∞*/ /* Sec 3 e 4 */ /* .wrapper_infopoint { grid-template-columns: 1fr 1frfr; z-index: 1; } .box_infopoint:nth-of-type(1) { transform: rotate(-5deg) translateY(-2rem); } .box_infopoint:nth-of-type(2) { transform: rotate(5deg); } .box_infopoint .text { padding: var(--c5v) var(--c2o); } */ .note_orari { position: absolute; bottom: 5%; right: var(--c2o); width: 50%; } /*∞∞∞∞∞∞ COME ARRIVARE ∞∞∞∞∞∞*/ #page_come .pre_icon { transform: translate(calc(-130% - 1.5rem), -20%) scale(2.5) rotate(-10deg); transform-origin: right; } /* Sec 3 */ #s3_come .sec_img { transform: rotate(5deg); } #s3_come .text h2 { text-align: center; } .move_right { transform: translateX(var(--c10o)); } .elenco_orari_treni { margin-bottom: 0; } .box_treni { z-index: 1; } .box_treni .flex-l, .box_treni .flex-r { padding: .75rem 1.5rem; } /* Sec 4 */ #s4_come .pre_icon { transform: translate(calc(0% - 1.5rem), 0%) scale(2.5) rotate(10deg); transform-origin: right; position: absolute; right: 0; top: 0; left: unset; } #s4_come .container .sec_img { margin: 0; padding: 0; transform: rotate(-15deg) translate(-30%, -30%); } #s4_come .container .sec_img .ico_park { transform: rotate(25deg); } #s4_come .container .sec_img .ico_park { width: 10rem; bottom: -30%; left: 40%; } .wrapper_info_auto { grid-template-columns: 1fr 1.25fr; z-index: 1; } .wrapper_info_auto .text:nth-of-type(1) { transform: rotate(-5deg) translateY(-2rem); } .wrapper_info_auto .text:nth-of-type(2) { transform: rotate(5deg); } /* Sec 5 */ #s5_come .text h2 { text-align: center; } /* Sec 6 */ #s6_come .pre_icon { transform: translate(10%, -10%) scale(2.5) rotate(10deg); transform-origin: left; position: absolute; right: 0; top: 0; left: unset; } .box_aereo { width: fit-content; } .box_aereo .flex-l { padding: .75rem 1.5rem; } .box_aereo .flex { width: 4rem; padding: .75rem; } .box_aereo .flex svg { width: 2rem; height: 2rem } .box_aereo hr { min-width: 5rem; width: auto; flex: 1 1 auto; } /* Sec 7 */ #s7_come .flex-auto .sec_img { transform: rotate(-3deg); z-index: -1; } /*∞∞∞∞∞∞ ESPERIENZE ∞∞∞∞∞∞*/ /* Sec 2 */ .wrapper_categorie.flex-auto { gap: var(--c10v) var(--c2o); } .box_cat { display: flex; align-items: flex-start; justify-content: flex-start; gap: 2rem; } .box_cat img { min-width: 5rem; } .box_cat:nth-of-type(2) img, .box_cat:nth-of-type(3) img { transform: rotate(2deg); } .box_cat:nth-of-type(1) img, .box_cat:nth-of-type(4) img { transform: rotate(-3deg); } .box_cat:nth-of-type(2), .box_cat:nth-of-type(4) { margin-top: var(--c7v); flex-direction: row-reverse; text-align: right; } /* Sec 3 */ #s3_exp .text .h0 span { display: block; } #s3_exp .text .h0 span:nth-of-type(1) { transform: translate(calc(var(--c3o) * -1)); } #s3_exp .text .h0 span:nth-of-type(3) { transform: translate(var(--c3o)); } /*∞∞∞∞∞∞ ARCHIVE ∞∞∞∞∞∞*/ /* Sec 2 */ #card_grid { grid-template-columns: 1fr 1fr; } /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ /* Trekking e sentieri */ .s2_single .wrapper_content .mask { transform: translate(-42vw, 0%) rotate(-5deg); } .photogallery_wrapper { grid-template-columns: 1fr 1fr 1fr; } .sidebar { position: sticky; top: calc(var(--hh) + 2.5vh); } /* Esperienze */ .box_exp .text { padding: 2rem; } .wrapper_contatti { padding: 0 var(--c5o); gap: .5rem; margin-top: -5rem; } .wrapper_contatti .box_cont { width: 4.5rem; height: 4.5rem; padding: .625rem; border-radius: .25rem; } .wrapper_contatti .box_cont.box_social { padding: 1rem; } .wrapper_contatti a.box_cont:hover { transform: scale(.95); } } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1281 x 720 -> 1366 x 768 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1281px) { /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Contents */ footer .grid { grid-template-columns: 1fr 2fr 1fr } /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ /* Modale mappa */ .box_comuni { width: 35%; } .wrapper_box .wrapper_box_i { height: 25rem; } /* Sec 2 */ .box_atti .content { padding-top: 8rem; } /*∞∞∞∞∞∞ ARCHIVE ∞∞∞∞∞∞*/ /* Sec 2 */ #card_grid { grid-template-columns: 1fr 1fr 1fr; } /* SINGLE TREKKING */ .s2_single .wrapper_content .mask { transform: translate(-35vw, 0%) rotate(-5deg); } /*∞∞∞∞∞∞ GUEST CARD ∞∞∞∞∞∞*/ /* Sec 4 */ #s4_card .text svg { opacity: 1; } } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀█▀ ▄▀▀▄ █▀▀▄ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ - 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 ) {}