/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " Il Nido di Siro " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ a:focus, button:focus { outline: thin dotted black; } /** * * █ █ █▀▀ ▄▀▀▄ █▀▀▄ █▀▀ █▀▀▄ * █▀▀█ █▀▀ █▀▀█ █ █ █▀▀ █▐█▀ * ▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - HEADER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .header { z-index: 4; top: 0; left: 0; background-color: var(--white); position: absolute; transform: translateY(0%); } .head_wrapper { padding: 1em var(--c2o); z-index: 2; } @keyframes header_ener { from { transform: translateY(-100%); } to { transform: translateY(0%); } } .scroll { box-shadow: 0 0 1rem rgb(30 30 30 / 10%); position: fixed; animation: header_ener .25s ease paused alternate forwards; animation-play-state: running; } .scroll .head_wrapper { padding: .5em var(--c1o); } .scroll .head_logo { --head-logo-width: 50px; --head-logo-min: 50; --head-logo-max: 90; max-width: 90px; transform: scale(1); transition: 0s; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .head_logo { display: inline-block; --head-logo-width: 100px; /* <- in 'px' */ --head-logo-min: 100; --head-logo-max: 120; max-width: 120px; z-index: 1; } .head_logo :where(img, svg) { width: 100%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAD CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .head_wrapper .flex-el { gap: 1rem; } .lang .wpml-ls-legacy-dropdown-click { width: auto; } .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.75rem; padding: 0; padding: .5rem .75rem; border: 1px solid var(--black); border-radius: 50%; aspect-ratio: 1 / 1; font-size: 1rem; line-height: 1; text-transform: uppercase; white-space: nowrap; } .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; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HAMBURGER / MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #hamburger { font-size: var(--rem); line-height: 0; padding: .5em .5em; margin-right: -.5em; overflow: visible; cursor: pointer; transition: .25s ease; } #hamburger .wrap { width: 2.5em; height: 2em; } #hamburger span { display: block; position: absolute; left: 50%; transform: translateX(-50%); width: 60%; height: 4px; border-radius: 1em; background-color: var(--brown); transform-origin: center; will-change: transform; transition: .25s ease; } #hamburger .top_bun { top: -1px; } #hamburger .burger { top: calc(50% - 2px); width: 100%; } #hamburger .bottom_bun { bottom: -1px; } /* Tapped / Clicked animation */ /* * Copiare l'animazione scelta dal file hamburger.css * oppure utilizare quella base qui sotto */ #hamburger.tapped span { background-color: var(--white); width: 100%; 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); } .open_up { transition: .25s ease; } .open_up.up { transform: translateY(-100%); opacity: 0; pointer-events: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ NAV MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #main_nav { display: none; position: absolute; top: 0; left: 0; z-index: 1; } #main_nav .menu_wrapper { top: 0; left: 0; padding-top: var(--hh); background: linear-gradient(152deg, var(--rosa, #E3866D) 17.59%, rgba(159, 66, 35, 1) 93.26%); } #main_nav .head_menu { width: 100%; } #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-family: var(--title-font); color: var(--white); font-size: 1.75em; line-height: 1; padding: .5em 0; } #main_nav .head_menu li a:hover {} #main_nav li.menu-item-has-children > a { padding-right: 1.5rem; position: relative; } #main_nav li.menu-item-has-children > a::before { content: ""; width: 1rem; height: 1rem; position: absolute; right: -.25rem; top: 50%; transform: translateY(-50%); background: url(../images/svg/arrow_down.svg) no-repeat center / 1rem; filter: brightness(0) invert(1); } #main_nav .head_menu .sub-menu { display: none; margin-left: 0; margin-bottom: 1rem; } #main_nav .head_menu li .sub-menu a { font-family: var(--main-font); font-size: 1rem; text-transform: uppercase; } #main_nav .link_btn { background-color: var(--white); } #main_nav .link_btn::after, #main_nav .link_btn::before { display: none; } #main_nav .link_btn span { color: var(--pink); } #main_nav .link_btn svg path { fill: var(--pink); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ DARKMODE SWITCHER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKs / BTNs STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .link_btn { display: inline-block; position: relative; width: fit-content; padding: .75em 1.25em; font: inherit; font-size: 1rem; color: var(--white); text-transform: uppercase; } .link_btn :where(span, svg) { z-index: 2; position: relative; } .link_btn::after, .link_btn::before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: .25s ease; } .link_btn::after { background: linear-gradient(to top, var(--orange), var(--pink) 50%); } .link_btn::before { background-color: var(--white); opacity: 0; width: calc(100% - 2px); height: calc(100% - 2px); top: 1px; left: 1px; z-index: 1; } .link_btn.flex { display: inline-flex; gap: .5rem; } .link_btn.flex svg { width: auto; height: 1.25rem; margin-bottom: 4px; } .link_btn.flex svg path { fill: var(--white); } .link_btn:hover::before { opacity: 1; } .link_btn:hover span { color: var(--pink); } .link_btn:hover svg path { fill: var(--pink); } .link { display: inline-block; position: relative; width: fit-content; padding: 1.5em 2.5em; font: inherit; font-size: 1rem; color: var(--white); text-transform: uppercase; } .link::before { content: ""; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(-45deg, var(--brown) -20%, var(--beige) 50%); position: absolute; left: 0; top: 0; transition: .25s ease; z-index: -1; } .link::after { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--brown); position: absolute; left: 0; top: 0; transform: rotate(-10deg); transition: .25s ease; } .link:hover { color: var(--beige); } .link:hover::before { opacity: 0; } .link:hover::after { transform: rotate(0deg); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .filter_bt { background: linear-gradient(to top, rgb(var(--black-rgb) / 80%), transparent); } .filter_brown_grad { background: linear-gradient(-45deg, var(--brown) -20%, var(--beige) 50%); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .sottotitolo { color: var(--beige); font-family: var(--cursive-font); font-size: calc(var(--h3-size) * 2); line-height: 0.625; } .white .sottotitolo { color: var(--white); } .dot { opacity: .25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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 { width: 2.75em; 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_btn.abs { top: 50%; transform: translateY(-50%); } .nav_prev.abs { left: 0; } .nav_next.abs { right: 0; } .nav_btn.swiper-button-disabled { display: none; } .wrapper_nav { gap: .5rem; } .wrapper_nav .nav_btn { padding: .5rem; border: 1px solid var(--brown); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .wrapper_nav .nav_btn img { aspect-ratio: 1 / 1; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SIDEBAR ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* * Se presenti position sticky, ricordarsi di disattivare nel foundation l' "overflow: hidden;" del "main" - riga 360 * Il valore "top" è indispensabile ed è l'offset dal top dello schermo se impostato */ .sticky { top: 15vh; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ ANIMAZIONE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .textAnim h1 { opacity: 0; } .textAnim.active h1 { opacity: 1; } .textAnim p, .textAnim li, .textAnim p a, .textAnim li a, .textAnim .link { opacity: 0; transform: translateY(25%); transition: all .25s ease, opacity 1s ease .25s, transform 1s ease .25s; } .textAnim.active p, .textAnim.active li, .textAnim.active p a, .textAnim.active li a, .textAnim.active .link { opacity: 1; transform: translateY(0); } .trigger.sec_img { clip-path: inset(0 0 0 100%); transition: 1s cubic-bezier(.76,0,.24,1); } .trigger.sec_img img { transform: scale(1.6); opacity: 0; transition: 2s cubic-bezier(.76,0,.24,1) -.25s, opacity .1s ease; will-change: transform; } .trigger.active.sec_img { clip-path: inset(0 0 0 0); transform: scale(1); } .trigger.active.sec_img img { transform: scale(1); opacity: 1; } .box_exp { opacity: 0; transform: translateY(25%); transition: .25s ease-out; } .elenco_esperienze.active .box_exp { opacity: 1; transform: translateY(0); } /** * * █▀▀ ▄▀▀▄ ▄▀▀▄ ▀▀█▀▀ █▀▀ █▀▀▄ * █▀▀ █ █ █ █ █ █▀▀ █▐█▀ * ▀ ▀▀ ▀▀ ▀ ▀▀▀ ▀ ▀▀ - FOOTER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ footer { padding: var(--c5v) var(--c1o); } footer .container { background: linear-gradient(152deg, var(--rosa, #E3866D) 17.59%, rgba(159, 66, 35, 1) 93.26%); } footer .dot { width: 35%; position: absolute; top: 0; right: 0; transform: translateY(-50%); z-index: -1; } .fixed_btn { position: fixed; bottom: 1.5rem; right: var(--c2o); z-index: 2; transform: translateX(100%); opacity: 0; transition: .25s ease; } .fixed_btn.dentro { transform: translateX(0%); opacity: 1; } .fixed_btn.via { transform: translateX(100%); opacity: 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ STRUCTURE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Contatti */ .mid_foot { border-top: 1px solid rgb(var(--white-rgb) / 50%); border-bottom: 1px solid rgb(var(--white-rgb) / 50%); } .foot_block h4 { font-family: var(--main-font); margin-bottom: 2rem; font-size: 1.5rem; text-transform: uppercase; } .foot_block p { font-weight: 400; } .foot_block p a { font: inherit; } .foot_block p a:hover { color: var(--brown); } /* Logo e slogan */ .top_foot .sottotitolo { color: var(--white); line-height: .8; font-size: clamp(2.75rem, 10vw, 7vw); } .foot_logo { display: inline-block; max-width: 40%; margin: 0 auto; } .foot_logo :where(img, svg) { width: 100%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CREDITS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #credits p { font-size: .825em; line-height: 1.5; margin: 0 auto; z-index: 1; color: var(--white); } #credits .resp_sep { display: none; } #credits a { display: inline-block; font: inherit; color: inherit; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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; padding-top: var(--hh); padding-right: var(--c2o); padding-left: var(--c2o); } .s1 .container { min-height: calc(100dvh - var(--hh) - var(--c2v)); overflow: hidden; } .s1 .container .bkg_thumb { pointer-events: none; } .s1_title { text-align: right; } .s1_title :where(h1, .h1) { text-shadow: 0px 4px 12.6px rgba(0, 0, 0, 0.58); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION ____ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀ ▄▀▀▄ █▀▀▄ █▀▀▄ ▄▀▀ * █ █▀▀█ █▐█▀ █ █ ▀▄ * ▀▀ ▀ ▀ ▀ ▀▀ ▀▀▀ ▀▀ - CARDS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD TERRITORIO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_territorio { overflow: hidden; position: relative; } .card_territorio .sized { transition: .375s ease; } .card_territorio .text { padding: 2.5rem 1.5rem; } .card_territorio .text h3 { font-size: 2rem; line-height: 1.5; } .card_territorio .text p { font-size: 1.125rem; line-height: 1.25; font-weight: 400; } .card_territorio:hover .sized { transform: scale(1.1); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD APPARTAMENTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card a { overflow: hidden; } .card .wrapper { padding: 2rem; } .card picture { transition: .375s ease; } .card .text { padding: 2rem; } .card .text h3 { line-height: 1.5; font-family: var(--cursive-font); font-size: clamp(3.75rem, 5vw, 5rem); line-height: .75; } .card .text p { font-size: 1.125rem; line-height: 1.25; font-weight: 400; margin-bottom: 0; text-transform: uppercase; } .card a:hover picture { transform: scale(1.1); } /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .slider_appartamenti { padding: 0 var(--c2o); } .slider_appartamenti .swiper { overflow-x: clip; overflow-y: visible; } .s2 .dot { position: absolute; top: 60%; right: 0; width: 40%; transform: translate(25%, 25%); z-index: -1; } .s2 .text .dot { position: absolute; top: 100%; left: 0; width: 80%; transform: translate(calc(-50% - var(--c5o)), 10%) translate(25%, 0%); z-index: -1; } .s2 .text .dot.center { left: 50%; transform: translate(25%, 0%) translate(0%, 0%) rotate(-35deg); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s3_home .filter { height: calc(100% - var(--c5o)); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .elenco_esperienze { display: grid; gap: 3rem 1rem; grid-template-columns: 1fr 1fr; } .box_exp img { width: 5rem; margin-bottom: 2rem; } #sec_exp .dot { position: absolute; left: 0; bottom: 100%; width: 45%; transform: translate(-45%, 0%) rotate(75deg); z-index: -1; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 5 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .slider_territorio { padding-bottom: 4rem; } .slider_territorio .swiper { padding: 0 2rem; } .slider_territorio .nav_btn { position: absolute; left: calc(50% + .5rem); bottom: 0; padding: .5rem; border: 1px solid var(--brown); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .slider_territorio .nav_btn img { aspect-ratio: 1 / 1; } .slider_territorio .nav_prev { transform: translateX(calc(-100% - 1rem)); } /** * * █▀▀▄ ▄▀▀▄ ▄▀▀▀ █▀▀ ▄▀▀ * █ █ █▀▀█ █ ▀▌ █▀▀ ▀▄ * █▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀ - TEMPLATES _ PAGINE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CASA VACANZE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 3 */ #s3_casa .filter_brown_grad { height: 50%; } .wrapper_appartamenti { gap: 2rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CUSTOM ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .sec_std:nth-of-type(even) .container { flex-direction: row-reverse; } .sec_std .dot.tre { position: absolute; left: 0; top: -50%; width: 35%; transform: translate(-60%, 0%) rotate(75deg); z-index: -1; } .sec_std .dot.quattro { position: absolute; right: 0; top: -50%; width: 35%; transform: translate(60%, 0%) rotate(75deg); z-index: -1; } /** * * ▄▀▀ ▀ █▄ █ ▄▀▀▀ █ █▀▀ * ▀▄ █ █ ▀█ █ ▀▌ █ ▄ █▀▀ * ▀▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ - SINGLE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ #s1_single .container { min-height: calc(80dvh - var(--hh) - var(--c2v)); overflow: hidden; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .box_dot { gap: 1rem; } .box_dot img { width: 2rem; } .box_dot p { color: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .video_app { aspect-ratio: 1 / 1; } .play_video { width: 15%; border-radius: 50% } .play_video path, .play_video polygon { fill: var(--white); } .play_video:hover { background-color: rgb(var(--orange-rgb) / 25%); transform: translate(-50%, -50%) scale(.95); } .wrapper_gallery { gap: .5rem; grid-template-columns: 1fr 1fr; } .wrapper_gallery .fresco { min-height: 15rem; height: 100%; } .wrapper_gallery .fresco:nth-of-type(7n + 1) { grid-column: 1 span; grid-row: 2 span; } .fresco .filter { background-color: rgb(var(--orange-rgb) / 50%); mix-blend-mode: multiply; opacity: 0; transition: .25s ease; } .fresco button { width: 25%; opacity: 0; } .fresco:hover .filter, .fresco:hover button { opacity: 1; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 5 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .dot.altri { position: absolute; left: 0; top: -10%; width: 35%; transform: translate(-55%, 0%) rotate(75deg); z-index: -1; } /** * * █▀▀ ▄▀▀▄ █▀▀▄ █▄ ▄█ * █▀▀ █ █ █▐█▀ █ █ █ * ▀ ▀▀ ▀ ▀▀ ▀ ▀ - FORM * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /* WP-Form - Custom */ #form { padding: 2rem; background: linear-gradient(-45deg, var(--brown) -10%, var(--beige) 75%); } #form .wpforms-field label { color: var(--white); font-weight: 400 } #form .wpforms-field :where(input, textarea, select) { background-color: transparent; border: 1px solid var(--white); border-radius: 0; padding: .75rem; font-size: 1rem; color: var(--white); } #form .wpforms-field:not(.wpforms-field.wpforms-field-checkbox) label { position: absolute; top: 0; left: 0; cursor: pointer; font-size: 16px; font-weight: 400; color: var(--white); opacity: 1; transform: translate(.75rem, 1rem); transition: .25s ease; } #form .wpforms-field:not(.wpforms-field.wpforms-field-checkbox).up label { transform: translate(.75rem, 2px); font-size: 14px; opacity: .5; } #form .wpforms-field.wpforms-field-checkbox { margin-bottom: 0; } #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"] { border-color: var(--white); } #form .wpforms-field.wpforms-field-checkbox li label a:hover { color: var(--pink); } #form .wpforms-submit-container { display: flex; align-items: center; justify-content: flex-end; } #form button[type=submit] { background-color: transparent; padding: 0; border: 0; border-radius: 0; position: relative; width: fit-content; padding: .75em 1.25em; display: inline-flex; justify-content: center; align-items: center; gap: .5rem; } #form button[type=submit] :where(span, svg) { position: relative; z-index: 2; transition: .25s ease; font: inherit; font-size: 1rem; color: var(--white); text-transform: uppercase; } #form button[type=submit]::after, #form button[type=submit]::before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: .25s ease; } #form button[type=submit]::after { background: linear-gradient(to top, var(--orange), var(--pink) 50%); } #form button[type=submit]::before { background-color: var(--white); opacity: 0; width: calc(100% - 2px); height: calc(100% - 2px); top: 1px; left: 1px; z-index: 1; } #form button[type=submit] svg { width: auto; height: 1.25rem; margin-bottom: 4px; } #form button[type=submit] svg path { fill: var(--white); } #form button[type=submit]:hover::before { opacity: 1; } #form button[type=submit]:hover span { color: var(--pink); } #form button[type=submit]:hover svg path { fill: var(--pink); } /* Flatpickr */ .flatpickr-calendar.open {} .flatpickr-calendar.open .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-calendar.open .flatpickr-current-month input.cur-year { color: var(--orange); } .flatpickr-calendar.open .flatpickr-months .flatpickr-prev-month svg path, .flatpickr-calendar.open .flatpickr-months .flatpickr-next-month svg path { fill: var(--orange); } .flatpickr-calendar.open .flatpickr-months .flatpickr-prev-month:hover svg path, .flatpickr-calendar.open .flatpickr-months .flatpickr-next-month:hover svg path { fill: var(--brown); } .flatpickr-calendar.open span.flatpickr-weekday, .flatpickr-calendar.open .flatpickr-day { color: var(--orange); } .flatpickr-calendar.open .flatpickr-day.flatpickr-disabled, .flatpickr-calendar.open .flatpickr-day.flatpickr-disabled:hover { color: #ccc !important; } .flatpickr-calendar.open .flatpickr-day.flatpickr-disabled, .flatpickr-calendar.open .flatpickr-day.flatpickr-disabled:hover, .flatpickr-calendar.open .flatpickr-day.prevMonthDay, .flatpickr-calendar.open .flatpickr-day.nextMonthDay, .flatpickr-calendar.open .flatpickr-day.notAllowed, .flatpickr-calendar.open .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-calendar.open .flatpickr-day.notAllowed.nextMonthDay { color: rgb(var(--orange-rgb) / 50%); } .flatpickr-calendar.open .flatpickr-day.selected, .flatpickr-calendar.open .flatpickr-day.startRange, .flatpickr-calendar.open .flatpickr-day.endRange, .flatpickr-calendar.open .flatpickr-day.selected.inRange, .flatpickr-calendar.open .flatpickr-day.startRange.inRange, .flatpickr-calendar.open .flatpickr-day.endRange.inRange, .flatpickr-calendar.open .flatpickr-day.selected:focus, .flatpickr-calendar.open .flatpickr-day.startRange:focus, .flatpickr-calendar.open .flatpickr-day.endRange:focus, .flatpickr-calendar.open .flatpickr-day.selected:hover, .flatpickr-calendar.open .flatpickr-day.startRange:hover, .flatpickr-calendar.open .flatpickr-day.endRange:hover, .flatpickr-calendar.open .flatpickr-day.selected.prevMonthDay, .flatpickr-calendar.open .flatpickr-day.startRange.prevMonthDay, .flatpickr-calendar.open .flatpickr-day.endRange.prevMonthDay, .flatpickr-calendar.open .flatpickr-day.selected.nextMonthDay, .flatpickr-calendar.open .flatpickr-day.startRange.nextMonthDay, .flatpickr-calendar.open .flatpickr-day.endRange.nextMonthDay { color: var(--white); background-color: var(--orange); border-color: var(--orange); } /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - EXTRA * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE GRAZIE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_grazie {} /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE 404 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_404 { background-color: var(--bkg_color); } #s1_404 .s1_title h1 { font-size: 2rem; } #s1_404 .s1_title p { font-size: 1.1rem; } #s1_404 .s1_title .link { display: inline-block; padding: 0.9rem 1.7rem; border: 2px solid var(--btn_color); border-radius: 0.6rem; font-size: 1rem; color: var(--btn_color); } #s1_404 .s1_title .link:hover { background-color: var(--btn_color); color: var(--btn_color_hover); transform: scale(1.05); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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 ) ); } #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 */ /* 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; } /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ /* Sec 4 */ .elenco_esperienze { grid-template-columns: 1fr 1fr 1fr; gap: 3rem; } /*∞∞∞∞∞∞ TEMPLATE CASA VACANZE ∞∞∞∞∞∞*/ .wrapper_appartamenti .card { width: calc(50% - 1rem); } } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀▀█▀▀ ▄▀▀▄ █▀▀▄ ▄▀▀ █▄ ▄█ ▄▀▀▄ █ █ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ ▀▄ █ █ █ █▀▀█ █ ▄ █ ▄ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ ▀▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀ - LAPTOP | 1024 x 768 -> 1280 x 720 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1024px) { .dot { opacity: 1; } /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ .head_wrapper { padding-left: 1rem; padding-right: var(--c1o); } .head_logo { transform-origin: top left; transform: scale(1.5); } .menu_ext { gap: 1rem; } .menu_ext li { position: relative; } .menu_ext li a { font-size: .9rem; position: relative; padding: .25rem 0; font-weight: 400; line-height: 1.1; } .menu_ext li a:hover { color: var(--orange); } .menu_ext li.current-menu-item a::after { content: ""; width: 100%; height: 1px; background-color: var(--brown); position: absolute; left: 0; bottom: .25rem; } .menu_ext li.menu-item-has-children > a { padding-right: 1.5rem; } .menu_ext li.menu-item-has-children > a::before { content: ""; width: 1rem; height: 1rem; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); background: url(../images/svg/arrow_down.svg) no-repeat center / 1rem; } .menu_ext li.menu-item-has-children:hover > a { color: var(--orange); } .sub-menu { display: flex; align-items: center; justify-content: center; gap: 2rem; z-index: 1; border-top: 1px solid rgb(var(--pink-rgb) / 50%); background-color: var(--white); margin: 0; padding: 1rem; width: max-content; transform: translate(-50%, 100%); transform-origin: top; position: absolute; left: 84%; bottom: 0; opacity: 0; pointer-events: none; transition: .25s ease; } .scroll .sub-menu { box-shadow: 0 1rem 0.5rem rgb(30 30 30 / 5%); } .menu_ext .sub-menu.open { opacity: 1; pointer-events: initial; } .menu_ext .sub-menu li a { padding: 0; color: var(--orange); margin: 0 1rem; } .menu_ext .sub-menu li a:hover { color: var(--brown); } .menu_ext .sub-menu li.current-menu-item a::after { bottom: 0; } /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Contents */ /* Credits */ #credits a:hover, #credits a:active, #credits a:focus { opacity: 1; color: var(--brown); } #credits #credits_studio:hover { opacity: .5; } /* Back Top */ #back_top { opacity: 1; } /*∞∞∞∞∞∞ S1 ∞∞∞∞∞∞*/ .s1 { padding-right: var(--c1o); padding-left: var(--c7o); transition: .25s ease; } .s1.spazio_sub { /*padding-top: calc(var(--hh) + 2rem);*/ transform: translateY(2rem); } /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ /* Sec 2 */ .slider_appartamenti .swiper { padding-bottom: 5rem; } .slider_appartamenti .swiper-slide a { transition: transform .25s ease; } .slider_appartamenti .swiper-slide-active a { transform: translateY(3.75rem); } .slider_appartamenti .swiper-slide-next a { transform: translateY(7.5rem); } /* Sec 4 */ .elenco_esperienze { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: var(--c5o); } /* Sec 5 */ .slider_territorio { padding-bottom: 0; padding: 0 var(--c2o); gap: 1.25rem; } .slider_territorio .swiper { padding: 0 ; } .slider_territorio .nav_btn { position: relative; left: 0; bottom: 0; padding: 0; border: unset; border-radius: 0; transform: unset; } /*∞∞∞∞∞∞ TEMPLATE CASA VACANZE ∞∞∞∞∞∞*/ .wrapper_appartamenti .card { width: calc((100% / 3) - 1.5rem); } /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ /* Sec 1*/ #s1_single .container { min-height: calc(100dvh - var(--hh) - var(--c2v)); overflow: hidden; } /* Sec 4 */ .video_app { aspect-ratio: 16 / 6; } .wrapper_gallery { grid-template-columns: 1fr 1fr 1fr; } } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1281 x 720 -> 1366 x 768 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1281px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /*.head_logo { transform: scale(2); }*/ /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ /* Sec 4 .wrapper_gallery { grid-template-columns: 1fr 1fr 1fr 1fr; }*/ } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀█▀ ▄▀▀▄ █▀▀▄ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1367 x 768 -> 1919 x 1080 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1440px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ .head_wrapper .flex-el { gap: 1.5rem; } .menu_ext { gap: 2rem; } .menu_ext li a { font-size: 1.125rem; } } /** * * █ █ █▀▀▄ █▀▀ █▀▀▄ * █ █ █▀▀█ █▀▀ █▐█▀ * ▀▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - ÜBER | 1921 -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1921px) {} /** * * ▄▀█ █ ▄▀ * █▄▄█▄ █▀▄ * █ ▀ ▀▀ - DESKTOP 4K & UP | 2561px -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and ( min-width: 2561px ) {}