/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " Insieme sul serio - distretto commercio / TEB " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ main { --main-font: 'Chivo', sans-serif; --title-font: 'Playfair', sans-serif; --eucalipto: #1D8668; --eucalipto-rgb: 29 134 104; --red: #C43F24; --red-rgb: 196 63 36; --green: #97B53D; --green-rgb: 151 181 61; } main h2 { font-size: calc(var(--h2-size) * 1.375); line-height: 1; } /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKs / BTNs STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .filter_lr { background: linear-gradient(to right, rgb(var(--black-rgb) / 25%), transparent); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .eucalipto { color: var(--eucalipto); } .red { color: var(--red); } .pretitle { text-transform: uppercase; } .text .pretitle + h2 { margin-top: 1rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SWIPER NAV ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .nav_wrp { gap: 1.25rem; } .nav_btn { width: 1.75em; z-index: 1; cursor: pointer; transition: .25s ease; background-color: transparent !important; } .nav_btn :where(img, svg) { width: 100%; } .nav_btn svg path { fill: var(--black); transition: .25s ease; } .nav_btn.swiper-button-disabled { display: none; } /* Dots */ .nav_dots { gap: .5em; } /** * * ▄▀▀ ▄▀▀▄ █▀▀▄ █▀▀▄ ▄▀▀ * █ █▀▀█ █▐█▀ █ █ ▀▄ * ▀▀ ▀ ▀ ▀ ▀▀ ▀▀▀ ▀▀ - CARDS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .box_swiper .card_i, .box_grid .card_i { overflow: hidden; box-shadow: 0 0 .75rem rgb(30 30 30 / 10%); } .box_swiper .card_i .bkg_abs, .box_grid .card_i .bkg_abs { transition: .25s ease; will-change: transform; } .box_swiper .card_i:hover .bkg_abs, .box_grid .card_i:hover .bkg_abs { transform: scale(1.05); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD EMPTY ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_empty { padding: 2em 1.5em; } .card_empty svg { width: 6em; } .card_empty .text { margin-top: 1em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD ____ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_landing { z-index: 1; } .s1_title p { font-size: ; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s2_landing .montagne { position: absolute; opacity: 0.4; transform: scale(1.5); } #s2_landing .mappa { mix-blend-mode: multiply; } .box_grid { padding: .5rem; width: 50%; } .box_grid .card_i { min-height: 17rem; } .box_grid .content { backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); padding: 1rem 1.5rem; background-color: rgb(var(--green-rgb) / 25%); } .box_grid .content svg { display: block; width: 1.5rem; height: auto; } .box_grid .content h3 { color: var(--white); width: calc(100% - 1.5rem); padding-left: .5rem; line-height: 1.1; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .slider_wrapper .swiper { overflow-y: visible; overflow-x: clip; } .wrapper_arte .box_swiper .content { background-color: rgb(var(--red-rgb) / 25%); } .box_swiper .card_i { min-height: 25rem; } .box_swiper .content { backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); } .box_swiper .content > .w100 { padding: 1rem 1.5rem; } .box_swiper .content > .w100:nth-of-type(1) { border-bottom: 1px solid #fff; } .box_swiper .content svg { display: block; width: 1rem; height: auto; } .box_swiper .content h3 { color: var(--white); line-height: 1.1; } .box_swiper .content p { color: var(--white); text-transform: capitalize; font-size: .85rem; width: calc(100% - 1rem); padding-left: .5rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .wrapper_natura .box_grid .content { background-color: rgb(var(--eucalipto-rgb) / 25%); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 5 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .wrapper_eventi .box_swiper .content { background-color: rgb(var(--black-rgb) / 25%); } .box_swiper mark { position: absolute; top: 1rem; right: 1rem; background-color: var(--green); padding: .25rem 1rem; font-size: .75rem; text-transform: uppercase; color: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 6 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .box_dove { box-flex: 1; flex: 1 0 0%; } .box_dove .bkg_abs { transition: .25s ease; } .box_dove:hover { flex-grow: 1.5; } .box_dove:hover .bkg_abs { filter: brightness(.5); } .box_dove h2 { text-shadow: 0 4px 17.6px #000; color: var(--white); width: 90%; } .box_dove svg { width: 3rem; margin-top: -1rem; } .box_dove svg path { fill: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 7 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .box_top { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid #ccc; height: 70%; } .box_top > .flex { display: flex; padding: var(--c7v) var(--c2o) var(--c2v) var(--c2o); border-right: 1px solid #ccc; } .box_top img { width: 100%; max-height: 9rem; object-fit: contain; } .box_bottom { display: grid; grid-template-columns: 1fr 1fr; padding: var(--c5v) var(--c1o); border-bottom: 1px solid #ccc; gap: var(--c2o); height: 30%; } .box_1 { padding: var(--c10v) var(--c5o) var(--c5v) var(--c5o); border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } /** * * █▀▀▄ ▄▀▀▄ ▄▀▀▀ █▀▀ ▄▀▀ * █ █ █▀▀█ █ ▀▌ █▀▀ ▀▄ * █▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀ - TEMPLATES _ PAGINE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▀▀█▀▀ ▄▀▀▄ █▀▀▄ █ █▀▀ ▀▀█▀▀ * █ █▀▀█ █▀▀█ █ ▄ █▀▀ █ * ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀ - TABLET | 768 x 1024 -> 1023 x 1280 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 768px) { /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ /* Sec 2 */ .box_grid .card_i { min-height: 25rem; } /* Sec 7 */ #s7_landing .container { display: grid; grid-template-columns: .675fr 1fr; } .box_top { grid-template-columns: 1fr 1fr 1fr; } .box_bottom { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; padding: var(--c5v) var(--c1o); border-bottom: 1px solid #ccc; gap: var(--c2o); height: 30%; } } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀▀█▀▀ ▄▀▀▄ █▀▀▄ ▄▀▀ █▄ ▄█ ▄▀▀▄ █ █ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ ▀▄ █ █ █ █▀▀█ █ ▄ █ ▄ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ ▀▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀ - LAPTOP | 1024 x 768 -> 1280 x 720 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1024px) { /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ /* Sec 2 */ #s2_landing .sec_img { position: absolute; top: 0; right: 0; width: 55%; transform: translate(10%, -15%); } .wrapper_griglia .box_grid:nth-of-type(5n + 1) { width: 45%; } .wrapper_griglia .box_grid:nth-of-type(5n + 2) { width: 27.5%; } .wrapper_griglia .box_grid:nth-of-type(5n + 3) { width: 27.5%; } .wrapper_griglia .box_grid:nth-of-type(5n + 4) { width: 50%; } .wrapper_griglia .box_grid:nth-of-type(5n + 5) { width: 50%; } /* Sec 3 */ .fut_pr { padding-right: 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 ) {}