/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " Cammino dei borghi " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █ █ █▀▀ ▄▀▀▄ █▀▀▄ █▀▀ █▀▀▄ * █▀▀█ █▀▀ █▀▀█ █ █ █▀▀ █▐█▀ * ▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - HEADER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .head_custom { position: absolute; top: 0; left: 0; padding: 1.5rem; z-index: 3; } .head_right { gap: 1rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .head_logo { display: inline-block; --head-logo-width: 100px; /* <- in 'px' */ --head-logo-min: 100; --head-logo-max: 200; max-width: 200px; } .head_logo :where(img, svg) { width: 100%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .elenco_tappe { display: none; background-color: rgb(var(--white-rgb) / 80%); backdrop-filter: blur(2px); padding: 1.5rem 1rem; position: absolute; right: 0; top: calc(100% + 1rem); border-radius: 1rem } .apri_sub.open svg { transform: scaleY(-1); } .btn_menu { width: max-content; background: transparent !important; display: inline-flex; align-items: center; justify-content: flex-start; gap: .625rem; text-align: left; color: var(--blue); text-transform: uppercase; font-weight: 600; font-size: 1rem; line-height: 1; letter-spacing: 0; } .btn_menu + .btn_menu { margin-top: .75rem } .btn_menu img { width: 1.5rem; } /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKs / BTNs STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .link { display: inline-flex; gap: .625rem; position: relative; width: fit-content; padding: .625em 1.25em; border: 1px solid var(--white); border-radius: 5rem; background-color: var(--red); font: inherit; font-size: var(--rem); color: var(--white); line-height: 1; letter-spacing: 0; } .link:hover, .link:focus, .link:active { background-color: var(--white); color: var(--red); } .link.white { background-color: rgb(var(--white-rgb) / 80%); border-color: var(--white); color: var(--red); } .link.white svg { min-width: 1rem; width: 1rem; } .link.white svg path { fill: var(--red); } .link.white:hover, .link.white:focus, .link.white:active { background-color: var(--red); color: var(--white); } .link.white:hover path, .link.white:focus path, .link.white:active path { fill: var(--white); } .link.out { background-color: rgb(var(--white-rgb) / 50%); backdrop-filter: blur(2px); border-color: var(--white); color: var(--red); } .link.out svg { width: 1rem; } .link.out svg path { fill: var(--red); } .link.out:hover, .link.out:focus, .link.out:active { background-color: var(--red); color: var(--white); } .link.out:hover path, .link.out:focus path, .link.out:active path { fill: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SCROLL BUTTON ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SWIPER NAV ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .nav_btn { top: 50%; transform: translateY(-50%); width: 3.5em; padding: .25em; z-index: 1; cursor: pointer; transition: .25s ease; } .nav_btn :where(img, svg) { width: 100%; } .nav_btn svg path { fill: var(--black); transition: .25s ease; } .nav_prev { left: 0; } .nav_next { right: 0; } .nav_btn.swiper-button-disabled { display: none; } /* Dots */ .nav_dots { gap: .5em; } /* NAV glightbox */ .glightbox-clean .gprev, .glightbox-clean .gnext { top: 45% !important; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ COMPONENTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █▀▀ ▄▀▀▄ ▄▀▀▄ ▀▀█▀▀ █▀▀ █▀▀▄ * █▀▀ █ █ █ █ █ █▀▀ █▐█▀ * ▀ ▀▀ ▀▀ ▀ ▀▀▀ ▀ ▀▀ - FOOTER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .sec_logo img { width: 12.5rem; } .box_footer h4 { font-size: 1.25rem; text-transform: uppercase; margin-bottom: 1.5rem; } .box_footer p { font-family: var(--title-font); font-size: 1rem; margin-bottom: .25rem } .box_footer p a { display: inline; font: inherit; } .box_credits p { font-size: clamp(14px, 1vw, 16px); } /** * * ▄▀▀ █▀▀ ▄▀▀ ▀▀█▀▀ ▀ ▄▀▀▄ █▄ █ ▄▀▀ * ▀▄ █▀▀ █ █ █ █ █ █ ▀█ ▀▄ * ▀▀ ▀▀▀ ▀▀ ▀ ▀ ▀▀ ▀ ▀ ▀▀ - SECTIONS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1_tit h1 { text-shadow: 0 4.416px 75.617px #232B55; } .s1_tit h1 + p { text-shadow: 0 4px 8.4px rgba(0, 0, 0, 0.98); font-family: var(--title-font); font-weight: 600; } .fiori_s1 { position: absolute; left: 0; bottom: 0; transform: translateY(12%); } .fiore_left_s1 { position: absolute; left: 0; bottom: 0; width: 20%; transform: translate(0%, 70%) rotate(20deg); transform-origin: top left; } /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .sub { font-family: var(--main-font); font-size: clamp(22px, 2vw, 1.75rem); color: var(--orange); font-weight: 700; } .fiore_2 { position: absolute; right: 0; bottom: 50%; width: 15%; transform: translate(20%, 50%) rotate(-30deg) scaleX(-1); } #map_canvas { width: 100% !important; } .box_tappe_map { background-color: rgb(var(--white-rgb) / 90%); backdrop-filter: blur(5px); padding: 1rem; } .box_dett_gen { gap: 1rem; background-color: rgb(var(--orange-rgb) / 90%); backdrop-filter: blur(5px); padding: 1rem; } .box_dett_gen .dettaglio { gap: .5rem; width: calc(50% - 1rem); } .box_dett_gen .dettaglio img { min-width: 1rem; width: 1rem; height: 1rem; object-fit: contain; margin-top: 2px } .box_dett_gen .dettaglio p { line-height: 1.1; font-size: 1rem; color: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .box_tappa + .box_tappa { margin-top: 2rem; } .box_tappa { padding: .75rem; background-color: #FFCCB8; } .box_tappa:nth-of-type(odd) { background-color: #d9dbca } .box_tappa .bkg_abs { background-image: url(images/webp/tappa_pink.webp); pointer-events: none; opacity: .2; } .box_tappa:nth-of-type(odd) .bkg_abs { background-image: url(images/webp/tappa_green.webp); opacity: 1; } .box_tappa .titolo { margin-bottom: 1rem; gap: 1rem; } .box_tappa .titolo h3 { font-size: 2rem; text-transform: uppercase; } .box_tappa .titolo h3 span { font-size: 75%; } .box_tappa .titolo img { width: 2.5rem; } .box_tappa .info_tappa { background-color: rgb(var(--white-rgb) / 80%); padding: 1rem; } .box_tappa .mappa { margin-bottom: 1rem; } .box_tappa .mappa img { width: 100%; height: auto; } .box_tappa .mappa .link { position: absolute; bottom: 1rem; right: 1rem; } .box_tappa .text {} .box_tappa .text p { font-size: clamp(16px, 1vw, 18px); } .box_tappa .text button { background: transparent !important; color: var(--blue); font-weight: 700; gap: .5rem; text-transform: uppercase; margin-top: 1rem; } .box_tappa .text button img { width: 1.25rem; } .box_tappa .text button:hover { opacity: .75; } .box_tappa .dettagli { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #ccc; } .box_tappa .dettagli { gap: 1rem } .box_tappa .dettagli .dettaglio { gap: .5rem; } .box_tappa .dettagli .dettaglio.w50 { width: 100%; } .box_tappa .dettagli .dettaglio img { width: 1rem; height: 1rem; object-fit: contain; margin-top: 2px } .box_tappa .dettagli .dettaglio p { font-size: 1rem; } .box_tappa .dettagli .dettaglio p b { color: var(--blue); } /* Variante */ .btn_var { padding: .25rem 1rem; background-color: var(--white); color: var(--blue); text-transform: uppercase; font-weight: 700; opacity: .75; } .btn_var.active { opacity: 1; background-color: var(--white); } .btn_var:not(.active):hover, .btn_var:not(.active):active, .btn_var:not(.active):focus { background-color: var(--blue); color: var(--white); } #variante_2 { display: none; } /* Modale */ .modal_txt { display: none; top: 0; left: 0; z-index: 4; backdrop-filter: blur(5px); background-color: rgb(var(--black-rgb) / 25%); } .modal_txt .wrapper_modal { background-color: rgb(var(--white-rgb) / 90%); /* backdrop-filter: blur(5px); */ width: 90%; height: 100vh; overflow-y: scroll; } .modal_txt .filter_close { pointer-events: initial; } .modal_txt .close { background: transparent !important; width: 2.5rem; height: 2.5rem; position: fixed; top: 1rem; left: calc(90% - 4rem); } .modal_txt .close:hover { opacity: .75; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .olive { position: absolute; right: 0; bottom: 0; width: 25%; } .wrapper_gallery {} .wrapper_gallery .grid-item { padding: .25rem; max-width: 50%; } .wrapper_gallery picture img { border-radius: 1rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 5 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .fiore_3 { position: absolute; left: 0; bottom: 0; width: 20%; transform: translate(-15%, 0%) rotate(0); transform-origin: top left; } .contain { object-fit: contain; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 6 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .fiori_finali { position: absolute; left: 0; bottom: 0; transform: translateY(12%); } /** * * █▀▀ ▄▀▀▄ █▀▀▄ █▄ ▄█ * █▀▀ █ █ █▐█▀ █ █ █ * ▀ ▀▀ ▀ ▀▀ ▀ ▀ - FORM * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /* WP-Form - Custom */ #form { background-color: var(--white); } #form .wpforms-field label { color: ; } #form .wpforms-field :where(input, textarea, select) { background-color: transparent; border: ; border-radius: ; padding: ; font-size: ; color: ; } #form .wpforms-field input::placeholder, #form .wpforms-field textarea::placeholder { color: ; opacity: ; } #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"] { padding: ; border: ; border-radius: ; } #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"]:checked { background: ; } #form .wpforms-field.wpforms-field-checkbox li label { padding: ; color: ; } #form .wpforms-field.wpforms-field-checkbox li label a:hover { color: ; } #form button[type=submit], #form input[type=submit] { padding: ; font-size: ; color: ; background-color: ; border: ; border-radius: ; } #form button[type=submit]:hover, #form input[type=submit]:hover { background-color: ; border-color: ; color: ; } /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - EXTRA * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /** * ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ * * RESPONSIVE * * Settare se necessario regole fluid per minmax di elementi specifici basandosi sulle seguenti regole: * => ORIGINAL CALC -> calc( 12px + (24 - 12) * ( (100vw - 360px) / (1920 - 360) ) ) * => CALC 1920px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 1560 ) ) * => CALC 1280px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 920 ) ) * => CALC 1024px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 664 ) ) * * Da creare fluid dinamico con 2 step per i calc iniziali = 1920 -> 1024 1024 -> 360 * * __________________________________________________________________________________________________________________________________________________________________________ */ .head_logo { width: calc( var(--head-logo-width) + ( var(--head-logo-max) - var(--head-logo-min) ) * ( (100vw - 360px) / 1560 ) ); } #scroll_btn { width: calc( var(--scroll-px) + ( var(--scroll-max) - var(--scroll-min) ) * ( (100vw - 360px) / 1560 ) ); } .foot_logo { width: calc( var(--foot-logo-width) + ( var(--foot-logo-max) - var(--foot-logo-min) ) * ( (100vw - 360px) / 1560 ) ); } #back_top { width: calc( var(--back-top-px) + ( var(--back-top-max) - var(--back-top-min) ) * ( (100vw - 360px) / 1560 ) ); } /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ /* Nav Menu */ /* Darkmode Switch */ /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Buttons */ /* Links */ /* Filters */ /* Sections 1 */ /* Breadcrumbs */ /* Scroll */ /* Components */ /* Cards */ /* Sidebar */ /* ... */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Structure */ /* Credits */ /* Back Top */ /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ /* Card Empty */ /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec [...] */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template ... */ /* Template ... */ /* Template ... */ /*∞∞∞∞∞∞ ARCHIVE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec ... */ /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec ... */ /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ /** * * █▄ ▄█ ▄▀▀▄ █▀▀▄ ▀ █ █▀▀ * █ █ █ █ █ █▀▀█ █ █ ▄ █▀▀ * ▀ ▀ ▀▀ ▀▀▀ ▀ ▀▀▀▀ ▀▀▀ - MOBILE PORT | 601 -> 767 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 601px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ .head_wrapper { padding: 1.5em 2.5%; z-index: 2; } /* Hamburger */ /* Nav Menu */ } /** * * ▀▀█▀▀ ▄▀▀▄ █▀▀▄ █ █▀▀ ▀▀█▀▀ * █ █▀▀█ █▀▀█ █ ▄ █▀▀ █ * ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀ - TABLET | 768 x 1024 -> 1023 x 1280 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 768px) { /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Contents */ /* Credits */ #credits br { display: none; } #credits .resp_sep { display: inline-block; } } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀▀█▀▀ ▄▀▀▄ █▀▀▄ ▄▀▀ █▄ ▄█ ▄▀▀▄ █ █ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ ▀▄ █ █ █ █▀▀█ █ ▄ █ ▄ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ ▀▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀ - LAPTOP | 1024 x 768 -> 1280 x 720 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1024px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ .head_custom { justify-content: space-between; } /* Hamburger */ #hamburger:hover { } #hamburger.tapped:hover { } /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ .sec_logo { justify-content: flex-start; } .box_credits { text-align: right; } .box_footer_2 { display: flex; align-items: center; justify-content: center; } /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ /* Sec 2 */ #map_canvas_wrapper .ratio-1-1 { aspect-ratio: 16 / 8; } .info_cammino { display: flex; justify-content: center; align-items: stretch; } .box_tappe_map { padding: 1rem 2rem; } /* Sec 3 */ .box_tappa { padding: 2.5rem; } .box_tappa .info_tappa { padding: 1rem 1.5rem } .box_tappa .dettagli { gap: 2rem 1rem } .box_tappa .dettagli .dettaglio.w50 { width: calc(50% - 1rem); } .box_tappa .dettagli .dettaglio img { width: 1.5rem; height: 1.5rem; } .box_tappa .dettagli .dettaglio p { font-size: 1rem; } /* Modale */ .modal_txt .wrapper_modal { width: 60%; } .modal_txt .close { width: 2.5rem; height: 2.5rem; position: fixed; top: 1rem; left: calc(60% - 4rem); } /* Mappa */ #s3_borghi { padding-right: 1.5rem } #s3_borghi .wrapper_right { position: sticky; top: 5vh; } #mappa_lago { transform: scale(1.0); width: 100%; height: 95vh; object-fit: contain; } #mappa_lago .button_tappa { cursor: pointer; } /* Sec 5 */ #s5_borghi .sec_img { transform: scale(1.125); transform-origin: right; } } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1281 x 720 -> 1366 x 768 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1281px) {} /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀█▀ ▄▀▀▄ █▀▀▄ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ - 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 ) {}