/* * * RESPONSIVE.CSS - "NOME_SITO" * DESIGN BY LINOOLMOSTUDIO * */ /* ORIGINAL CALC -> calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320))) CALC FORMULATION FROM 1920px to 320px -> calc(12px + (24 - 12) * ( (100vw - 320px) / 1600 )) CALC FORMULATION FROM 1280px to 320px -> calc(12px + (24 - 12) * ( (100vw - 320px) / 960 )) CALC FORMULATION FROM 1024px to 320px -> calc(12px + (24 - 12) * ( (100vw - 320px) / 704 )) Da creare fluid dinamico da inserire nel Platform con 2 step per i calc iniziali = 1920 -> 1024 1024 -> 320 */ /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏━━━┓ ┏┓ ┏┓ ┏┓ ┏━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━━┛ ┃┃ ┃┃ ┃┃ ┗┫┣┛ ┗┓┏┓┃ ┃┏━┓┃ ┃┏━━┛ ┃┏━┓┃ ┃┏━┓┃ ┃┗━━┓ ┃┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃ ┃┗━┛┃ ┃┗━━┓ ┃┗━━┓ ┃┗━┛┃ ┃┏━━┛ ┃┃ ┏┓ ┃┃ ┃┃ ┃┃ ┃┃┃┃ ┃┏┓┏┛ ┃┏━━┛ ┗━━┓┃ ┃┏━━┛ ┃┃ ┃┗━┛┃ ┃┗━┛┃ ┏┫┣┓ ┏┛┗┛┃ ┃┃┃┗┓ ┃┗━━┓ ┃┗━┛┃ ┃┃ ┗┛ ┗━━━┛ ┗━━━┛ ┗━━┛ ┗━━━┛ ┗┛┗━┛ ┗━━━┛ ┗━━━┛ ┗┛ */ /*__ FLUID RESPONSIVE __*/ /* Break point for calc init */ @media screen and (max-width: 1920px) { /* Fonts Misc */ html { font-size: calc(14px + (20 - 14) * ( (100vw - 320px) / 1600 )); } h1 {} h2 {} h3 {} h4 {} p, li {} a {} /*__ HEADER __*/ /* Overlay */ .head_logo { width: calc(130px + (260 - 130) * ((100vw - 320px) / 1600 )); } /* Back Top */ .back_top { bottom: calc(0px + (10 - 0) * ((100vw - 320px) / 1600 )); right: calc(0px + (10 - 0) * ((100vw - 320px) / 1600 )); width: calc(30px + (60 - 30) * ((100vw - 320px) / 1600 )); } /*__ HOMEPAGE __*/ /* Section 1 */ /* Section 2 */ /*__ FOOTER __*/ /*__ PAGE __*/ /* Page 1 Name */ /* Page 2 Name */ /*__ ARCHIVE __*/ /*__ CARD __*/ /*__ SINGLE __*/ /* Section 1 */ /* Section 2 */ /*__ FORM __*/ /*__ EXTRA __*/ } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┏━━━┓┏┓ ┏┓┏━━━┓┏━━━┓ ┏┛┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┃┏━┓┃┃┗┓┏┛┃┃┏━━┛┃┏━┓┃ ┗┓┃ ┃┗━┛┃ ┗┛┏┛┃ ┃┃ ┃┃ ┃┗━┛┃ ┗┓┏┛ ┃┃ ┃┃┗┓┃┃┏┛┃┗━━┓┃┗━┛┃ ┃┃ ┗━━┓┃ ┏━┛┏┛ ┃┃ ┃┃ ┃┏━━┛ ┏┛┗┓ ┃┃ ┃┃ ┃┗┛┃ ┃┏━━┛┃┏┓┏┛ ┏┛┗┓ ┏━━┛┃ ┃ ┗━┓ ┃┗━┛┃ ┃┃ ┏┛┏┓┗┓ ┃┗━┛┃ ┗┓┏┛ ┃┗━━┓┃┃┃┗┓ ┗━━┛ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━┛┗━┛ ┗━━━┛ ┗┛ ┗━━━┛┗┛┗━┛ ÜBER - 1920 x 1080 */ @media screen and (min-width: 1920px) { /*__ HEADER __*/ /* Overlay */ /*__ HOMEPAGE __*/ /* Section 1 */ /* Section 2 */ /*__ FOOTER __*/ /*__ PAGE __*/ /* Page 1 Name */ /* Page 2 Name */ /*__ ARCHIVE __*/ /*__ CARD __*/ /*__ SINGLE __*/ /* Section 1 */ /* Section 2 */ /*__ FORM __*/ /*__ EXTRA __*/ } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏┓ ┏┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┏┛┃ ┃┃ ┃┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┗┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┃ ┃┗━┛┃ ┗┓┏┛ ┃┃ ┗━━┓┃ ┗━━┓┃ ┃┃ ┃┃ ┃┏━━┛ ┏┛┗┓ ┏┛┗┓ ┃┃ ┃┃ ┃┗━┛┃ ┃┃ ┏┛┏┓┗┓ ┗━━┛ ┗┛ ┗┛ ┗━━━┛ ┗┛ ┗━┛┗━┛ LAPTOP - 1440 x 720 */ @media screen and (max-width: 1440px) { /*__ HEADER __*/ /* Overlay */ /*__ HOMEPAGE __*/ /*__ FOOTER __*/ /*__ PAGE __*/ /* Page 1 Name */ /* Page 2 Name */ /*__ ARCHIVE __*/ /*__ CARD __*/ /*__ SINGLE __*/ /* Section 1 */ /* Section 2 */ /*__ FORM __*/ /*__ EXTRA __*/ } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┏┛┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┗┓┃ ┗┛┏┛┃ ┃┗━┛┃ ┃┃ ┃┃ ┃┗━┛┃ ┗┓┏┛ ┃┃ ┏━┛┏┛ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━━┛ ┏┛┗┓ ┏┛┗┓ ┃ ┗━┓ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┏┛┏┓┗┓ ┗━━┛ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━┛┗━┛ TABLET GRANDE - 1280 x 720 */ @media screen and (max-width: 1280px) { h1 { font-size: 5rem; line-height: 1.1; } h2 { font-size: 4rem; } /*__ HEADER __*/ /* Overlay */ .box_menu span { font-size: 2.5rem; } /*__ HOMEPAGE __*/ /*__ FOOTER __*/ .foot_logo { width: 250px; } .foot_block h2 { font-size: 2.5rem; } /*__ PAGE __*/ /* Page 1 Name */ /* Page 2 Name */ /*__ ARCHIVE __*/ /*__ CARD __*/ .s3_archive .card-prodotti { width: calc(33.3333333% - 1rem); margin: .5rem; float: left; } /*__ SINGLE __*/ /* Section 1 */ /* Section 2 */ /*__ FORM __*/ /*__ EXTRA __*/ .testo_sec.w50 p { width: 100%; } } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏━━━┓ ┏━━━┓ ┏┓ ┏┓ ┏━━━┓┏━┓┏━┓ ┏┛┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃┗┓┗┛┏┛ ┗┓┃ ┃┃ ┃┃ ┗┛┏┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗┓┏┛ ┃┃ ┃┃ ┃┃ ┏━┛┏┛ ┗━━┓┃ ┃┏━━┛ ┏┛┗┓ ┏┛┗┓ ┃┗━┛┃ ┃ ┗━┓ ┃┃ ┃┃ ┏┛┏┓┗┓ ┗━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗┛ ┗━┛┗━┛ TABLET - 1024 x 576 */ @media screen and (max-width: 1024px) { /*__ HEADER __*/ /* Overlay */ .overlay_i.t_wrap { flex-direction: column-reverse; width: 100%; height: 100%; } .menu_left, .menu_right { width: 100%; } .menu_right { display: flex; align-items: center; justify-content: center; } .menu_left { display: none; } .menu-menu-container { margin-bottom: 0; width: 60%; } .socila-contatti { width: 40%; } .menu-item a { font-size: 2.1rem; margin-bottom: .8rem; } .socila-contatti p, .socila-contatti a { font-size: 1.1rem !important; } .social.t_left { margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 1.5px solid #242424; } .social img { width: 2.3rem; } #menu-item-315, #menu-item-313, #menu-item-314, #menu-item-312 { display: block; } /* Back Top */ .back_top { opacity: 1; } .fixed_cta { padding: 1rem 2rem; } .fixed_cta img { width: 40%; } /*__ HOMEPAGE __*/ .testo_sec.w50 { width: 100%; text-align: center; padding: 0; margin-bottom: 3rem; } .bkg_sec { width: 80%; height: 30rem; } .bkg_sec.tilt { width: 40%; } /*__ FOOTER __*/ /*__ PAGE __*/ #s4_10 h2 { font-size: 3rem; } #s4_10 .w70 { width: 100%; } /*__ ARCHIVE __*/ /*__ CARD __*/ .s3_archive .card-prodotti { width: calc(50% - 1rem); margin: .5rem; float: left; } /*__ SINGLE __*/ /* Section 1 */ /* Section 2 */ /*__ FORM __*/ /*__ EXTRA __*/ img.plus { position: absolute; width: 8rem; top: calc(50% - 4rem); left: calc(50% - 4rem); display: block; } } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┃┏━┓┃ ┃┏━━┛ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┗┛┏┛┃ ┃┗━━┓ ┗┛┏┛┃ ┃┗━┛┃ ┗┓┏┛ ┃┏┛ ┃┏━┓┃ ┃┏┛ ┃┏━━┛ ┏┛┗┓ ┃┃ ┃┗━┛┃ ┃┃ ┃┃ ┏┛┏┓┗┓ ┗┛ ┗━━━┛ ┗┛ ┗┛ ┗━┛┗━┛ TABLET PICCOLO - 768 x 520 */ @media screen and (max-width: 767px) { /*__ HEADER __*/ /* Overlay */ #menu-item-493, #menu-item-492, #menu-item-315, #menu-item-313, #menu-item-314, #menu-item-312 { display: block; } /*__ HOMEPAGE __*/ .bkg_sec { width: 90%; height: 27rem; } .bkg_sec.tilt { width: 70%; } .fixed_cta { padding: 1rem 2rem;} .fixed_cta .text { width: 100%; } .fixed_cta img { display: none; } .s2 { padding-top: 250px !important; } /*__ FOOTER __*/ .foot_block.w50 { width: 100%; text-align: center; } .foot_logo { width: 80%; margin: 0 auto; margin-bottom: 9%; } .foot_block h2 { font-size: 2.2rem; } .credits { width: 90%; } .section_premi .w33 { width: 100%; margin-bottom: 5%; } /*__ PAGE __*/ /* Page 1 Name */ /* Page 2 Name */ /*__ ARCHIVE __*/ /*__ CARD __*/ .s3_archive .card-prodotti { width:100%; margin: 1rem 0; float: none; } .card-prodotti-i { height: auto; } /*__ SINGLE __*/ /* Section 1 */ /* Section 2 */ /*__ FORM __*/ /*__ EXTRA __*/ .testo_sec .link:nth-of-type(2) { margin-left: 0rem; } #menu-toggle { width: 50px; height: 50px; } #menu-toggle #hamburger span { width: 50px; } #menu-toggle #hamburger span:nth-child(2) { width: 35px; } #menu-toggle.open #cross span:nth-child(1) { height: 50px; } #menu-toggle.open #cross span:nth-child(2) { width: 50px; top: 25px; } #menu-toggle.open #hamburger span { width: 0; } } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏┓ ┏━━━┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┃┃ ┃┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┃┗━┛┃ ┗┛┏┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗┓┏┛ ┗━━┓┃ ┃┏┛ ┗━━┓┃ ┃┏━━┛ ┏┛┗┓ ┃┃ ┃┃ ┏━━┛┃ ┃┃ ┏┛┏┓┗┓ ┗┛ ┗┛ ┗━━━┛ ┗┛ ┗━┛┗━┛ MOBILE PORT - 320 x 520 */ @media screen and (max-width: 479px) { /* Fonts Misc */ h1 { font-size: 2.8rem; } h2 { font-size: 2.7rem; } h3 {} h4 {} p, li {} a {} /*__ HEADER __*/ /* Overlay */ .socila-contatti { display: none; } .menu-menu-container { width: 100%; } .overlay_menu { top: 1rem; left: 1rem; overflow: hidden; width: calc(100% - 2rem); height: calc(100vh - 2rem); z-index: 2; } /*__ HOMEPAGE __*/ /* Section 1 */ /* Section 2 */ /*__ FOOTER __*/ /*__ PAGE __*/ /* Page 1 Name */ /* Page 2 Name */ /*__ ARCHIVE __*/ /*__ CARD __*/ /*__ SINGLE __*/ /* Section 1 */ /* Section 2 */ /*__ FORM __*/ /*__ EXTRA __*/ } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏━━━┓ ┏━━━┓ ┏┓ ┏┓ ┏━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┗┓┏┓┃ ┃┏━━┛ ┃┗┓┏┛┃ ┗┫┣┛ ┃┏━┓┃ ┃┏━━┛ ┃┏━┓┃ ┃┃┃┃ ┃┗━━┓ ┗┓┃┃┏┛ ┃┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃┃┃ ┃┏━━┛ ┃┗┛┃ ┃┃ ┃┃ ┏┓ ┃┏━━┛ ┗━━┓┃ ┏┛┗┛┃ ┃┗━━┓ ┗┓┏┛ ┏┫┣┓ ┃┗━┛┃ ┃┗━━┓ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━┛ ┗━━━┛ ┗━━━┛ ┗━━━┛ SPECIFIC DEVICE */ /* If is Device */ @media screen and (max-device-width: 1280px){} @media screen and (max-device-width: 768px){} @media screen and (max-device-width: 480px){}