/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " Strada delle Api " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █ █ █▀▀ ▄▀▀▄ █▀▀▄ █▀▀ █▀▀▄ * █▀▀█ █▀▀ █▀▀█ █ █ █▀▀ █▐█▀ * ▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - HEADER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ header { z-index: 4; } .head_wrapper { padding: 1em 1.5em; z-index: 2; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .head_logo { display: inline-block; --head-logo-width: 150px; /* <- in 'px' */ --head-logo-min: 150; --head-logo-max: 350; max-width: 350px; } .head_logo :where(img, svg) { width: 100%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAD CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HAMBURGER / MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #hamburger { display: inline-block; font-size: var(--rem); line-height: 0; background: transparent; padding: .5em .5em; overflow: visible; cursor: pointer; transition: .25s ease; position: fixed; top: 2.5rem; right: 3rem; } #hamburger::after { content: ""; width: 100%; height: auto; aspect-ratio: 1 / 1; position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%) scale(2); background: url(svg/esagono_menu_2.svg) no-repeat center; background-size: contain; opacity: .5; z-index: -1; } #hamburger::before { content: ""; width: 100%; height: auto; aspect-ratio: 1 / 1; position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%) scale(1.25); background: url(svg/esagono_menu.svg) no-repeat center; background-size: contain; } #hamburger .wrap { width: 2.5em; height: 1.75em; } #hamburger span { display: block; position: absolute; left: 50%; transform: translateX(-50%); width: 2em; height: 4px; border-radius: .5em; background-color: var(--black); transform-origin: center; will-change: transform; transition: .25s ease; } #hamburger .top_bun { top: 0; } #hamburger .burger { top: calc(50% - 2px); } #hamburger .bottom_bun { bottom: 0; } /* Tapped / Clicked animation */ #hamburger.tapped span { background-color: var(--black); transition: .25s ease; } #hamburger.tapped .burger { opacity: 0; } #hamburger.tapped .top_bun { top: 50%; transform: translate(-50%,-50%) rotate(45deg); } #hamburger.tapped .bottom_bun { top: 50%; transform: translate(-50%,-50%) rotate(-45deg); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ NAV MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #main_nav { display: none; position: fixed; z-index: 1; top: 4rem; right: 4rem; width: max-content; max-width: 90%; height: auto; } #main_nav .menu_wrapper { padding: 1rem; padding-top: 3rem; background-color: var(--yellow); border-radius: 2rem; box-shadow: 0 0 1.5rem rgb(var(--black-rgb) / 10%); } #main_nav button { display: block; position: relative; color: var(--black); font-size: 1.5rem; font-weight: 400; line-height: 1.1; font-family: var(--title-font); padding: 1rem; text-align: right; width: 100%; } #main_nav button::after { content: ""; width: 1rem; height: 1rem; position: absolute; top: 50%; right: 0; transform: translateY(-50%) scale(0); background: url(svg/esagono_menu_2.svg) no-repeat center; background-size: contain; transition: .25s ease; } #main_nav button:hover { background: transparent; transform: translateX(-1rem); } #main_nav button:hover::after { transform: translate(1rem,-50%) scale(1.25); } #main_nav button:active, #main_nav button:focus { background: transparent; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ DARKMODE SWITCHER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKs / BTNs STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .link { display: block; position: relative; width: fit-content; padding: .5em 1em; margin: ; border: 1px solid var(--black); border-radius: ; font: inherit; font-size: var(--rem); color: var(--black); background-color: var(); } .link:hover, .link:focus, .link:active { background-color: var(--black); color: var(--white); } .link_color { background-color: var(--black); border-color: var(--black); color: var(--white); } .link_color:hover, .link_color:focus, .link_color:active { background-color: var(--white); color: var(--black); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .filter_yellow { background-color: var(--yellow); mix-blend-mode: hard-light; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .exy { width: 20%; pointer-events: none; z-index: 0; } .top_right { top: -20vh; right: 2.5%; } .bottom_left { bottom: 0vh; left: 2.5%; } .noev { pointer-events: none; } .fiori_gialli { position: absolute; top: 0; left: 0rem; min-width: 5rem; width: 50%; transform: translateY(-65%); } .fiori_arancio { position: absolute; bottom: 0; right: 4.5%; min-width: 5rem; width: 9rem; transform: translateY(-40%); } .fiori_gialli_2 { position: absolute; left: 0; bottom: var(--c15v); min-width: 5rem; width: var(--c7o); } .fiori_giallo_arancio { position: absolute; top: 0; right: 1rem; min-width: 5rem; width: var(--c5o); transform: translateY(-50%); } .fiore_arancio_2 { position: absolute; top: 0; right: 1rem; min-width: 5rem; width: var(--c7o); transform: translateY(-50%); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SCROLL BUTTON ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #scroll_btn { display: inline-block; position: absolute; left: 50%; bottom: 1.5em; --scroll-px: 40px; --scroll-min: 40; --scroll-max: 60; max-width: 60px; transform: translateX(-50%); cursor: pointer; z-index: 1; } #scroll_btn svg { width: 100%; animation: hang_scroll 1.5s ease-in-out infinite forwards alternate; animation-play-state: running; } @keyframes hang_scroll { from { transform: translateY(0); } to { transform: translateY(.5em); } } #scroll_btn:hover svg, #scroll_btn:focus svg, #scroll_btn:active svg { animation-play-state: paused; } #scroll_btn svg path { fill: var(--black); transition: .25s ease; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SWIPER NAV ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .nav_btn { top: 50%; transform: translateY(-50%); width: 3.5em; padding: .25em; z-index: 1; cursor: pointer; transition: .25s ease; } .nav_btn :where(img, svg) { width: 100%; } .nav_btn svg path { fill: var(--black); transition: .25s ease; } .nav_prev { left: 0; } .nav_next { right: 0; } .nav_btn.swiper-button-disabled { display: none; } /* Dots */ #nav_dots { margin-top: 3rem; } #nav_dots .swiper-pagination-bullet { width: 15px; height: 15px; background-color: transparent; border: 1px solid var(--black); opacity: 1; } #nav_dots .swiper-pagination-bullet-active { background-color: var(--black); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ COMPONENTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Social */ .social {} .social a { display: inline-block; width: 3.5em; padding: .25em; } .social a :where(img,svg) { width: 100%; } .social a svg path { transition: .25s ease; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █▀▀ ▄▀▀▄ ▄▀▀▄ ▀▀█▀▀ █▀▀ █▀▀▄ * █▀▀ █ █ █ █ █ █▀▀ █▐█▀ * ▀ ▀▀ ▀▀ ▀ ▀▀▀ ▀ ▀▀ - FOOTER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .footer { background: linear-gradient(to bottom, var(--dark), var(--yellow)); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ STRUCTURE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Foot Logo */ .foot_logo { display: block; --foot-logo-width: 240px; --foot-logo-min: 240; --foot-logo-max: 500; max-width: 500px; margin-bottom: 4rem; } .foot_logo :where(img, svg) { width: 100%; } /* Foot Block */ .foot_block .info p { font-weight: 500; font-size: 1.25rem; } .foot_block .info p a { font: inherit; display: inline-block; } .foot_block .info p a:hover { color: var(--black); opacity: .5 } /* Foot Social */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CREDITS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #credits p { font-weight: 500; font-size: 1rem; line-height: 1.5; z-index: 1; margin-top: 1.5rem; } #credits .resp_sep { display: none; } #credits a { display: inline-block; font: inherit; color: inherit; } .minicredits p { font-size: .85rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BACK TO TOP ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #back_top { display: none; z-index: 2; bottom: .5em; right: .5em; --back-top-px: 40px; --back-top-min: 40; --back-top-max: 60; max-width: 60px; padding: .25em; background-color: rgb(255 255 255 / 25%); cursor: pointer; transition: .25s ease; } #back_top :where(img, svg) { width: 100%; } #back_top svg path { fill: var(--black); } /** * * ▄▀▀ █▀▀ ▄▀▀ ▀▀█▀▀ ▀ ▄▀▀▄ █▄ █ ▄▀▀ * ▀▄ █▀▀ █ █ █ █ █ █ ▀█ ▀▄ * ▀▀ ▀▀▀ ▀▀ ▀ ▀ ▀▀ ▀ ▀ ▀▀ - SECTIONS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1 { overflow: hidden; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION ____ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀ ▄▀▀▄ █▀▀▄ █▀▀▄ ▄▀▀ * █ █▀▀█ █▐█▀ █ █ ▀▄ * ▀▀ ▀ ▀ ▀ ▀▀ ▀▀▀ ▀▀ - CARDS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card > div, .card > a { border-radius: 2rem; min-height: 22rem; overflow: hidden; } .card .filter_card { background: linear-gradient(to top, var(--black), transparent); } .card .top { border-bottom: 1px solid var(--dark); padding-bottom: 1rem } .card .bottom { padding-top: 1rem; gap: 1rem; } .card .card_content { padding: 1.5rem; } .card .card_content .flex-l { gap: .5rem; } .card .card_content h3 { color: var(--white); font-size: clamp(1.125rem, 4vw, 1.625rem); } .card .card_content p { font-size: 1rem; color: var(--white); } .card .card_content .top p { font-size: 1.25rem; } .link_scheda { padding: .5rem 1rem; gap: .5rem; background-color: var(--dark); border-radius: .75rem; color: var(--black); font-size: 1rem; font-weight: 600; } .link_scheda svg { width: 1.125rem; } .link_scheda svg path { } .link_scheda:hover { background-color: var(--white); color: var(--black); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD EMPTY ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_empty { padding: 2em 1.5em; } .card_empty svg { width: 6em; } .card_empty .text { margin-top: 1em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD EVENTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_eventi { padding: 0 var(--c1o); } .card_eventi .card_content .top p { margin-bottom: .5rem; font-size: 16px; } .card_eventi a, .card_extra > div { min-height: 28rem; } /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .bottom.abs { bottom: 0; left: 0; width: 100%; height: auto; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s2_api { background-color: var(--yellow); } .sec_mask { -webkit-mask-image: url(svg/mask.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100%; } .sec_mask { aspect-ratio: 1 / 1.12; } .play { width: 35%; } .play:hover, .play:active, .play:focus { background: transparent; transform: translate(-50%, -50%) scale(.95); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s3_api { background-color: var(--light); } #s3_api::before { content: ""; width: 100%; height: 55%; position: absolute; left: 0; top: 0; background-color: var(--yellow); } #s3_api .top.abs { top: 55%; } .info_percorso { width: 15rem; margin: 1rem auto 0 auto; display: block; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s4_api { background-color: var(--light); } .wrapper_cosa { gap: 2rem var(--c2o); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 5 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 6 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .wrapper_operatori { gap: 2rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 7 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s7_api { background-color: var(--light); } .info { gap: .75rem; margin-top: 1rem; } .info svg { width: 1.5rem; height: 1.5rem; } .info p { font-weight: 700; font-size: 1.125rem; } .info p a { font: inherit; } .info p a:hover { color: var(--dark); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 8 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .wrapper_comuni { gap: clamp(1.5rem, 5vw, 3.5rem) clamp(2rem, 5vw, 5rem); } .wrapper_comuni .ico { height: clamp(5rem, 10vw, 10rem); } .wrapper_comuni .ico img { width: 100%; height: 100%; object-fit: contain; } /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - 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 ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ #hamburger:hover { } #hamburger.tapped:hover { } /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Contents */ /* Credits */ #credits { text-align: right; } #credits a:hover, #credits a:active, #credits a:focus { opacity: .75; } #credits #credits_studio:hover { color: #e74e0f; } /* Back Top */ #back_top { opacity: 1; } /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ /* Sec 3 */ #map_canvas { width: 85% !important; } #map_canvas_wrapper .ratio-1-1 { aspect-ratio: 16 / 8; } .info_percorso { position: absolute; bottom: -10%; right: var(--c5o); z-index: 1; } /* Sec 4 */ .wrapper_cosa { grid-template-columns: 1fr 1fr 1fr; padding: 0 var(--c3o); } /* Sec 5 */ #carosello_eventi { padding: 0 var(--c2o); } /* Sec 6 */ .wrapper_operatori { grid-template-columns: 1fr 1fr; gap: 4rem; padding: 0 var(--c5o); } } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - 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 ) {}