/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " ___NOME_SITO___ " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ .ratio-1-1, .squared { padding-bottom: 100%; } => 1:1 -> padding-bottom: calc(100% * 1 / 1); .ratio-16-9 { padding-bottom: 56.25%; } => 16:9 -> padding-bottom: calc(100% * 9 / 16); .ratio-4-3 { padding-bottom: 75%; } => 4:3 -> padding-bottom: calc(100% * 3 / 4); .ratio-3-2 { padding-bottom: calc(100% * 3 / 4); } => 3:2 -> padding-bottom: calc(100% * 2 / 3); .ratio-8-5 { padding-bottom: 62.5%; } => 8:5 -> padding-bottom: calc(100% * 8 / 5); */ ul.topmenu-links-menu li a { padding: 10px 20px; font-weight: normal; color: #000; border-radius: 23px; } .topmenu * { box-sizing: initial; } /** * * ▐▌ ▐▌ ▄▀▀▄ █▀▀▄ ▄▀▀ * ▀▄▀ █▀▀█ █▐█▀ ▀▄ * ▀ ▀ ▀ ▀ ▀▀ ▀▀ - VARS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ section { position: relative; } #sidenav { display: none !important; } .p20 { padding: 20px; } .site-content { padding-bottom: 0; } .credits p, .credits a { display: inline-block; } main { --grey: #383634; --grey-rgb: 56,54,52; --gold: #cca75a; --gold-rgb: 204,167,90; --red: #da3848; --red-rgb: 218,56,72; --light: #e8e3bf; --main-font: 'Josefin', sans-serif; --title-font: 'Playfair Display', serif; } p, .p { --font-size: var( --rem ); --p-color: var( --black ); --p-family: var( --main-font ); --p-line: 1.4; --p-weight: normal; --p-style: normal; } h1, .h1 { --h1-max: 50; --h1-size: 50px; --h1-min: 40; --h1-min-px: 40px; --h1-color: var( --black ); --h1-family: var( --title-font ); --h1-line-height: 1; --h1-weight: 600; --h1-spacing: initial; --h1-style: normal; } h2, .h2 { --h2-max: 45; --h2-size: 45px; --h2-min: 35; --h2-min-px: 35px; --h2-color: var( --black ); --h2-family: var( --title-font ); --h2-line-height: 1; --h2-weight: normal; --h2-spacing: initial; --h2-style: normal; } h3, .h3 { --h3-max: 50; --h3-size: 50px; --h3-min: 35; --h3-min-px: 35px; --h3-color: var( --black ); --h3-family: var( --title-font ); --h3-line-height: 1; --h3-weight: normal; --h3-spacing: initial; --h3-style: normal; } h4, .h4 { --h4-max: 40; --h4-size: 40px; --h4-min: 30; --h4-min-px: 30px; --h4-color: var( --black ); --h4-family: var( --title-font ); --h4-line-height: 1; --h4-weight: normal; --h4-spacing: initial; --h4-style: normal; } h5, .h5 { --h5-max: 30; --h5-size: 30px; --h5-min: 25; --h5-min-px: 25px; --h5-color: var( --black ); --h5-family: var( --title-font ); --h5-line-height: 1; --h5-weight: normal; --h5-spacing: initial; --h5-style: normal; } h6, .h6 { --h6-max: 25; --h6-size: 25px; --h6-min: 20; --h6-min-px: 20px; --h6-color: var( --black ); --h6-family: var( --title-font ); --h6-line-height: 1; --h6-weight: normal; --h6-spacing: initial; --h6-style: normal; } /*∞∞ Fluid Typography + Max font-size ∞∞*/ @media screen and (max-width: 1920px) { html { --rem-diff: calc( var(--rem-max) - var(--rem-min) ); --rem: calc( var(--rem-min-px) + var(--rem-diff) * ((100vw - 320px) / 1600)); } h1, .h1 { --h1-diff: calc( var(--h1-max) - var(--h1-min) ); --h1-size: calc( var(--h1-min-px) + var(--h1-diff) * ((100vw - 320px) / 1600)); } h2, .h2 { --h2-diff: calc( var(--h2-max) - var(--h2-min) ); --h2-size: calc( var(--h2-min-px) + var(--h2-diff) * ((100vw - 320px) / 1600)); } h3, .h3 { --h3-diff: calc( var(--h3-max) - var(--h3-min) ); --h3-size: calc( var(--h3-min-px) + var(--h3-diff) * ((100vw - 320px) / 1600)); } h3, .h3 { --h3-diff: calc( var(--h3-max) - var(--h3-min) ); --h3-size: calc( var(--h3-min-px) + var(--h3-diff) * ((100vw - 320px) / 1600)); } h4, .h4 { --h4-diff: calc( var(--h4-max) - var(--h4-min) ); --h4-size: calc( var(--h4-min-px) + var(--h4-diff) * ((100vw - 320px) / 1600)); } h5, .h5 { --h5-diff: calc( var(--h5-max) - var(--h5-min) ); --h5-size: calc( var(--h5-min-px) + var(--h5-diff) * ((100vw - 320px) / 1600)); } } /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BUTTONS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .btn { display: inline-block; position: relative; font: inherit; color: inherit; padding: .5em 1em; border: 2px solid #3e3e3e; background-color: #ccc; font-size: 130%; text-transform: uppercase; font-weight: 800; border-radius: .8rem; } .btn_gold { background-color: var(--gold); color: #fff; border-color: var(--gold); } .btn_red { background-color: var(--red); color: #fff; border-color: var(--red); } .btn_gold:hover, .btn_gold:focus { background-color: var(--white); color: var(--gold); } .btn_red:hover, .btn_red:focus { background-color: var(--white); color: var(--red); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .link_btn { display: inline-block; position: relative; font: inherit; color: inherit; padding: .5em 1em; border: 1px solid #3e3e3e; background-color: #ccc; font-size: var(--rem); /* DA GUARDARE */ } .link_btn:hover, .link_btn:focus, .link_btn:active {} .link_color { background-color: #2980b9; border-color: #; color: #; } .link_color:hover, .link_color:focus, .link_color:active { background-color: #2574a8; } /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ main, footer { background-color: var(--grey) !important; } h1, h2, h3, h4, p, li { color: var(--white); } span.red { color: var(--red); } span.gold { color: var(--gold); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1_title { padding: 5%; } .pretitle { text-transform: uppercase; margin-bottom: 1rem; font-weight: 700; letter-spacing: 6px; } .s1_title .btn { margin-top: 1rem; min-width: 14rem; } .s1_title .btn:after, .s1_title .btn:before { content: ""; position: absolute; top: 50%; width: 2rem; height: 2rem; background: center no-repeat; background-size: contain; transition: .2s linear; } .s1_title .btn:after { background-image: url(arrow_right.svg); left: 0; transform: translate(-140%, -50%); animation: anim_button_l infinite forwards 2s; } .s1_title .btn:before { background-image: url(arrow_left.svg); right: 0; transform: translate(140%, -50%); animation: anim_button_r infinite forwards 2s; } .s1_title .btn:hover:after { } .s1_title .btn:hover:before { } @keyframes anim_button_l { 0% { transform: translate(-140%, -50%); } 50% { transform: translate(-110%, -50%); } 100% { transform: translate(-140%, -50%); } } @keyframes anim_button_r { 0% { transform: translate(140%, -50%); } 50% { transform: translate(110%, -50%); } 100% { transform: translate(140%, -50%); } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .slider_c { border-radius: 1rem; } .slider_c h2.tit { position: absolute; left: .2rem; top: 0; transform: translateY(-55%); font-weight: 700; font-size: calc(var(--h2-size) * 1.4); } .box_container { background-color: var(--gold); } .info_slider { padding: 2rem; padding-top: 4rem; } .info_slider img { margin-bottom: 1.5rem; height: 4rem; } .info_slider p { font-weight: 700; font-size: 115%; } .swiper-box, .swiper-gift { transform: scaleY(1.1); } .swiper-box .text_slide, .swiper-gift .text_slide { transform: scaleY(1); } .swiper_contenitore { padding: 1.5rem; } .swiper_contenitore .slider_next { right: 1rem; top: 50%; transform: translateY(-50%); height: 3rem; background: unset !important; } .swiper_contenitore .slider_next img { width: 100%; height: 100%; object-fit: contain; } .img_slide { height: 15rem; position: relative; } .img_slide img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(20% 0, 100% 0%, 80% 100%, 0% 100%); box-shadow: 0 0 10px rgba(30,30,30,.1); } .img_slide .filter_img { position: absolute; right: -20%; top: 0; height: 100%; width: 100%; background-color: var(--gold); clip-path: polygon(20% 0, 80% 0, 100% 100%, 20% 100%); opacity: .2; } .text_slide { padding: 5% 0; padding-left: 0; padding-right: 7%; text-align: center; } .text_slide h2 { color: var(--grey); font-weight: 600; } .text_slide .pretitle { color: var(--grey); font-weight: 400; } .text_slide .link { background-color: var(--grey); color: #fff; text-transform: uppercase; display: inline-block; padding: .1rem 2rem; border-radius: .6rem; font-weight: 700; margin-top: 1.5rem; border: 2px solid var(--grey); } .text_slide .link:hover { background-color: var(--white); color: var(--grey); } .content_slide p { margin: .5rem 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .gift_container { background-color: var(--red); } .gift_container .info_slider * { color: var(--light); } .gift_container .text_slide h2 { color: var(--light); } .gift_container .text_slide .pretitle { color: var(--light); } .gift_container .img_slide .filter_img { background-color: var(--red); } .more_info { position: absolute; right: 1rem; bottom: 1rem; height: 2rem; cursor: pointer; z-index: 99; } .more_info img { width: 100%; height: 100%; object-fit: cover; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .more_info_box { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; display: none; } .blur { position: absolute; left: 0; top: 0; width: 100%; height: 100%; backdrop-filter: blur(10px); } .more_info_container { background-color: #fff; padding: 5%; max-width: 70rem; width: 100%; border-radius: 1rem; } .more_info_container * { color: var(--grey); } .more_info_container p { margin-bottom: 1rem; } .more_info_container a { color: #9dbf15; display: inline-block; } .more_info_container h2 { font-size: calc(var(--h2-size) * 1.5); margin-bottom: 1rem; } .more_info_container .text.w40m { padding-bottom: 2rem; } .close { height: 2.5rem; position: absolute; right: 1rem; top: 1rem; cursor: pointer; } .close img { width: 100%; height: 100%; object-fit: cover; } /** * * █▀▀▄ ▄▀▀▄ ▄▀▀▀ █▀▀ ▄▀▀ * █ █ █▀▀█ █ ▀▌ █▀▀ ▀▄ * █▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀ - TEMPLATES _ PAGINE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Section 1 */ /* Section 2 */ /* Section 3 */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀▄ █▀▀▄ ▄▀▀▀ █ █ ▀ ▐▌ ▐▌ █▀▀ * █▀▀█ █▐█▀ █ █▀▀█ █ ▀▄▀ █▀▀ * ▀ ▀ ▀ ▀▀ ▀▀▀ ▀ ▀ ▀ ▀ ▀▀▀ - TEMPLATES _ ARCHIVIO * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Background */ /* Content */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Search & Filter */ /* Terms Loop */ /* Posts Loop */ /* Custom pagination */ /* Load More */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀ ▀ █▄ █ ▄▀▀▀ █ █▀▀ * ▀▄ █ █ ▀█ █ ▀▌ █ ▄ █▀▀ * ▀▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ - SINGLE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Background */ /* Content */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █▀▀ ▄▀▀▄ █▀▀▄ █▄ ▄█ * █▀▀ █ █ █▐█▀ █ █ █ * ▀ ▀▀ ▀ ▀▀ ▀ ▀ - FORM * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ input[type="..."], select, textarea {} input[type="..."]:focus, input[type="..."]:active, select:focus, select:active, textarea:focus, textarea:active {} /* Animazioni */ input:focus { /* animation-name / animation-duration / animation-delay / animation-iteration-count */ -webkit-animation: formanim 0.25s forwards; animation: formanim 0.25s forwards; } @-webkit-keyframes formanim { 0% {} 100% {} } @keyframes formanim { 0% {} 100% {} } input[type=checkbox]:not(.switch), input[type=radio]:not(.switch), input[type="checkbox"] { border: 1px solid var(--black); width: 1.5em; height: 1.5em; } input[type=checkbox]:checked { background: url(../images/svg/checked.svg) no-repeat center; background-size: 1.25em; } input[type="..."].wpforms-error {} input[type="..."].wpforms-error:hover {} input[type="..."].wpforms-valid {} input[type="..."][disabled] {} select {} textarea {} input[type="submit"] {} input[type="submit"]:hover {} input[type="submit"]:focus, input[type="submit"]:active {} /* input[type=checkbox]:not(.switch):after { display: none; } */ /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - EXTRA * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE GRAZIE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_grazie { text-align: center; } .back_wrapper { margin-top: 2.5%; } .go_back { display: inline-block; padding: .75em 1.25em .75em 4.5em; border: 1px solid #1e1e1e; border-radius: .5em; background: url(../images/svg/back.svg) no-repeat 1.25em center; background-size: 2em; font-size: 1.25em; font-weight: bolder; color: #1e1e1e; letter-spacing: .1em; text-transform: uppercase; } .go_back:hover, .go_back:active, .go_back:focus { background-color: #888; color: #fff; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE 404 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CSS EXTRA O MOD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ * * RESPONSIVE * * Settare se necessario regole fluid per minmax di elemtni specifici basandosi sulle seguenti regole: * => ORIGINAL CALC -> calc( 12px + (24 - 12) * ( (100vw - 320px) / (1920 - 320) ) ) * => CALC 1920px -> 320px -> calc( 12px + (24 - 12) * ( (100vw - 320px) / 1600 ) ) * => CALC 1280px -> 320px -> calc( 12px + (24 - 12) * ( (100vw - 320px) / 960 ) ) * => CALC 1024px -> 320px -> calc( 12px + (24 - 12) * ( (100vw - 320px) / 704 ) ) * * Da creare fluid dinamico con 2 step per i calc iniziali = 1920 -> 1024 1024 -> 320 * * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (max-width: 1921px) { .head_logo { width: calc( var(--head-logo-width) + ( var(--head-logo-max) - var(--head-logo-min) ) * ( (100vw - 320px) / 1600 ) ); } .hamburger_btn { font-size: calc( var(--hamburger-px) + ( var(--hamburger-max) - var(--hamburger-min) ) * ( (100vw - 320px) / 1600 ) ); } .scroll { width: calc( var(--scroll-px) + ( var(--scroll-max) - var(--scroll-min) ) * ( (100vw - 320px) / 1600 ) ); } .foot_logo { width: calc( var(--foot-logo-width) + ( var(--foot-logo-max) - var(--foot-logo-min) ) * ( (100vw - 320px) / 1600 ) ); } .back_top { width: calc( var(--back-top-px) + ( var(--back-top-max) - var(--back-top-min) ) * ( (100vw - 320px) / 1600 ) ); } } /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ /* Nav Menu */ /* Darkmode Switch */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Contents */ /* Credits */ /* Back Top */ /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Buttons */ /* Links */ /* Filters */ /* Sections 1 */ /* Breadcrumbs */ /* Scroll */ /* Components */ /* Cards */ /* Sidebar */ /* ... */ /*∞∞∞∞∞∞ 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 | 480 -> 767 * * Stylesheet: 481px and Up Stylesheet * This stylesheet is loaded for larger devices. * It's set to 481px because at 480px it would load on a landscaped iPhone. * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 481px) {} /** * * ▀▀█▀▀ ▄▀▀▄ █▀▀▄ █ █▀▀ ▀▀█▀▀ * █ █▀▀█ █▀▀█ █ ▄ █▀▀ █ * ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀ - TABLET | 768 -> 1280 * * Stylesheet: Tablet & Small Desktop Stylesheet * Here's where you can start getting into the good stuff. * This size will work on iPads, other tablets, and desktops. * So you can start working with more styles, background images, and other resources. * You'll also notice the grid starts to come into play. * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 768px) { /*__ FOOTER __*/ .credits br { display: none; } .credits .resp_sep { display: inline-block; } .more_info_container .text.w40m { padding-bottom: 0; padding-right: 3rem; text-align: right; } .swiper_contenitore { padding: 0; padding-right: 2rem; } .info_slider { padding-top: 2rem; } } /** * * Stylesheet: Desktop Stylsheet * This is the desktop size. * It's larger than an iPad so it will only be seen on the Desktop. * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1025px) { /*__ HEADER __*/ /* Overlay */ .hamburger_btn { font-size: 25px; } .hamburger_btn:hover { } .hamburger_btn.tapped:hover { } /*__ FOOTER __*/ .credits a:hover, .credits a:active, .credits a:focus { opacity: 1; color: var(--color); } #credits_studio:hover { color: #e74e0f; } /* Back Top */ .back_top { opacity: 1; } .more_info_container { clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 0 30%); } .img_slide { height: 25rem; } } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1281 -> 1366 * * Stylesheet: Super Large Monitor Stylesheet * You can add some advanced styles here if you like. * This kicks in on larger screens. * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1281px) {} /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀█▀ ▄▀▀▄ █▀▀▄ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1440 -> 1919 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1367px) {} /** * * █ █ █▀▀▄ █▀▀ █▀▀▄ * █ █ █▀▀█ █▀▀ █▐█▀ * ▀▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - ÜBER | 1920 -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1921px) {} /** * * ▄▀█ █ ▄▀ * █▄▄█▄ █▀▄ * █ ▀ ▀▀ - DESKTOP 4K & UP | 2561px -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and ( min-width: 2561px ) {} /** * * █▀▀▄ █▀▀ ▀▀█▀▀ ▀ █▄ █ ▄▀▀▄ * █▐█▀ █▀▀ █ █ █ ▀█ █▀▀█ * ▀ ▀▀ ▀▀▀ ▀ ▀ ▀ ▀ ▀ ▀ - RETINA (2x RESOLUTION DEVICES) * * This applies to the retina iPhone (4s) and iPad (2,3) along with other displays with a 2x resolution. * You can also create a media query for retina AND a certain size if you want. * Go Nuts. * __________________________________________________________________________________________________________________________________________________________________________ */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { } /** * * █▀▀▄ █▀▀ ▐▌ ▐▌ ▀ ▄▀▀ █▀▀ ▄▀▀ * █ █ █▀▀ ▀▄▀ █ █ █▀▀ ▀▄ * ▀▀▀ ▀▀▀ ▀ ▀ ▀▀ ▀▀▀ ▀▀ - SPECIFIC DEVICES * __________________________________________________________________________________________________________________________________________________________________________ */ /* If is Device */ @media screen and (max-device-width: 1280px){} @media screen and (max-device-width: 768px){} @media screen and (max-device-width: 480px){}