/***************/ /*** TO EDIT ***/ /***************/ .herobanner { background-image: url('../src/img/herobanner--calabria.jpg'); } .intro-right-img { background-image: url('../src/img/intro-right-img--mare.jpg'); } .structure-card .structure-card-img.img1{ background-image: url('../src/img/calabriavillaggi-com-onda.jpg'); } .structure-card .structure-card-img.img2{ background-image: url('../src/img/calabriavillaggi-com-salice.jpg'); } .structure-card .structure-card-img.img3{ background-image: url('../src/img/calabriavillaggi-com-international.jpg'); } .structure-card .structure-card-img.img4{ background-image: url('../src/img/calabriavillaggi-com-sibari.jpg'); } /*************/ /*** STYLE ***/ /*************/ @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap'); @import url('https://fonts.googleapis.com/css?family=Libre+Baskerville&display=swap'); * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } /******************/ /*** TYPOGRAPHY ***/ /******************/ body, div, p, label { font-family: 'Lato', sans-serif; color: #565656; font-size: 16px; font-weight: 100; line-height: 24px; } h1, h2, h3 { font-family: 'Libre Baskerville', serif; color: #2BB5B6; } h1 { font-size: 30px; line-height: 40px; margin-bottom: 16px; } h2 { font-size: 27px; line-height: 36px; margin-bottom: 16px; } h3 { font-size: 16px; line-height: 24px; margin-bottom: 16px; } label { font-size: 12px; line-height: 16px; } /**************************/ /*** HEROBANNER & INTRO ***/ /**************************/ .herobanner { height: 40vh; max-height: 400px; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; } @media screen and (min-width: 700px) { .herobanner { height: 70vh; max-height: 600px; } } @media screen and (min-width: 1000px) { .herobanner { height: 80vh; max-height: 750px; } } .intro { width: 100%; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 40px 24px 0; } @media screen and (min-width: 700px) { .intro { margin-top: -20vh; padding: 0 64px; } } @media screen and (min-width: 1000px) { .intro { width: 950px; margin: auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-top: -80px; margin-bottom: 56px; padding: 0; } } .intro-logo { width: 300px; margin-bottom: 40px; } .intro-card { background-color: white; width: 100%; } @media screen and (min-width: 700px) { .intro-card { padding: 32px; } } @media screen and (min-width: 1000px) { .intro-card { -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); width: 530px; min-height: 500px; } } .intro-card-button { font-family: 'Libre Baskerville', serif; color: #2BB5B6; margin-top: 32px; font-size: 16px; display: block; } .intro-card-button:hover { text-decoration: underline; } .intro-right { margin: 40px 0 64px; } @media screen and (min-width: 700px) { .intro-right { width: 400px; margin-left: 24px; } } @media screen and (min-width: 1000px) { .intro-right { margin-bottom: 0; } } .intro-right-img { height: 300px; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; margin-top: 24px; display: none; } @media screen and (min-width: 1000px) { .intro-right-img { display: block; } } .intro-right .button { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; -webkit-transition: linear 250ms bottom, linear 250ms box-shadow; transition: linear 250ms bottom, linear 250ms box-shadow; } @media screen and (min-width: 600px) { .intro-right .button { position: relative; } .intro-right a.button:hover { -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); margin-bottom: 10px; bottom: 3px; -webkit-transition: linear 250ms bottom, linear 250ms box-shadow; transition: linear 250ms bottom, linear 250ms box-shadow; } } /********************/ /**** STRUCTURES ****/ /********************/ .structures-row { background-color: #f5f5f5; padding: 48px 0 56px; } .structures-row .structures-intro { max-width: 700px; margin: 0 auto 30px; } .structures-row .structures-intro h2, .structures-row .structures-intro .structures-intro-text { text-align: center; padding: 0 24px; } .structures-list { padding: 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; width: 100%; margin: auto; } .structure-card .structure-card-nation { text-transform: uppercase; color: white; font-size: 16px; font-weight: 400; padding: 4px 16px; background-color: #2BB5B6; display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100%; } .structure-card-content h3 { height: 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .structure-card { width: 100%; max-width: 100%; background-color: white; border: 1px #E0E0E0 solid; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 16px; position: relative; -webkit-transition: linear 250ms transform, linear 250ms box-shadow; transition: linear 250ms transform, linear 250ms box-shadow; border-radius: 10px; overflow: hidden; } .structure-card:hover { -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); -webkit-transform: translateY(-8px); transform: translateY(-8px); } .structure-card-img { background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 200px; } .structure-card-content { padding: 12px; width: 100%; } .structure-card-content .button { margin-top: 15px; position: absolute; bottom: 12px; } @media screen and (min-width: 607px) { .structure-card-content .button { bottom: 0; } } @media screen and (min-width: 830px) { .structure-card-content .button { bottom: 12px; } } .structure-card-content label { margin-bottom: 64px; display: block; } @media screen and (min-width: 607px) { .structure-card { width: calc(50% - 16px); min-width: 260px; margin: 8px; } .structure-card-content .button { position: relative; } .structure-card-content label { margin-bottom: 0; } } @media screen and (min-width: 830px) { .structure-card { width: calc(50% - 18px); min-width: 240px; margin: 8px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .structure-card-img { width: 50%; } .structure-card-content { padding: 12px; width: 50%; } .structure-card-content h3 { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; white-space: normal; } .structure-card-content .button { position: absolute; bottom: 0; } } @media screen and (min-width: 1120px) { .structure-card { width: calc(25% - 16px); min-width: 240px; margin: 8px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .structure-card-img { width: 100%; } .structure-card-content { padding: 16px 24px; width: auto; } .structure-card-content h3 { height: 48px; } .structure-card-content .button { position: relative; } } @media screen and (min-width: 1400px) { .structure-card { width: calc(25% - 32px); min-width: 300px; margin: 16px; } } /**********************/ /*** SECONDARY TEXT ***/ /**********************/ .secondary-text { max-width: 700px; margin: 64px auto 56px; padding: 0 24px; } /******************/ /*** NEWSLETTER ***/ /******************/ .newsletter { background-color: #2BB5B6; padding: 56px 0; width: 100%; } .newsletter-content { width: 1000px; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .newsletter-text { max-width: 700px; padding: 0 24px; margin: auto; } .newsletter-text h2 { color: white; } .newsletter-text p { color: white; font-weight: 200; } .newsletter-text .button { display: inline-block; margin-top: 24px; -webkit-transition: linear 250ms box-shadow; transition: linear 250ms box-shadow; } .newsletter-text .button:hover { -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); -webkit-transition: linear 250ms box-shadow; transition: linear 250ms box-shadow; } /**************/ /*** PHOTOS ***/ /**************/ .photos { width: 100%; display: none; } .photos-item { height: 200px; width: calc(100% / 3); min-width: calc(100% / 3); background-repeat: no-repeat; background-size: cover; background-position: center; } .photos-item.photo1 { background-image: url('../src/img/footer1.jpg'); } .photos-item.photo2 { background-image: url('../src/img/footer2.jpg'); } .photos-item.photo3 { background-image: url('../src/img/footer3.jpg'); display: none; } .photos-item.photo4 { background-image: url('../src/img/footer4.jpg'); display: none; } .photos-item.photo5 { background-image: url('../src/img/footer5.jpg'); } .photos-item.photo6 { background-image: url('../src/img/footer6.jpg'); } .photos-item.photo7 { background-image: url('../src/img/footer7.jpg'); display: none; } .photos-item.photo8 { background-image: url('../src/img/footer8.jpg'); } .photos-item.photo9 { background-image: url('../src/img/footer9.jpg'); display: none; } .photos-item.photo10 { background-image: url('../src/img/footer10.jpg'); } @media screen and (min-width: 720px) { .photos { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (min-width: 860px) { .photos-item { width: 25%; min-width: 25%; } .photos-item.photo3, .photos-item.photo7 { display: block; } } @media screen and (min-width: 1100px) { .photos-item { width: 20%; min-width: 20%; } .photos-item.photo4, .photos-item.photo9 { display: block; } } /***************/ /*** BUTTONS ***/ /***************/ .button { font-size: 14px; font-weight: 400; text-transform: uppercase; border-radius: 6px; text-align: center; text-decoration: none; } @media screen and (min-width: 1000px) { .button { font-size: 16px; } } .button.button-full { background-color: #2BB5B6; color: white; padding: 12px 24px; } .button.button-full.button-white { background-color: white; color: #2BB5B6; } .button.button-ghost { border: #2BB5B6 2px solid; color: #2BB5B6; display: block; padding: 8px 16px; margin-bottom: 0; -webkit-transition: linear 250ms background-color; transition: linear 250ms background-color; } .button.button-ghost:hover { background-color: #2BB5B6; color: #ffffff; -webkit-transition: linear 250ms background-color; transition: linear 250ms background-color; } @media screen and (min-width: 830px) { .button.button-ghost { margin-bottom: 12px; } } @media screen and (min-width: 1000px) { .button.button-ghost { padding: 8px 24px; } } @media screen and (min-width: 1200px) { .button.button-ghost { margin-bottom: 0; } } /**************/ /*** FOOTER ***/ /**************/ footer { max-width: 1000px; margin: 56px auto 0; text-align: center; padding: 0 1rem; } .footer-koobcamp { margin-bottom: 32px; } .footer-koobcamp-logo { height: 28px; margin-bottom: 0.8rem; } @media screen and (min-width: 768px) { .footer-koobcamp-logo { height: 40px; } } footer h3 { margin: 0; font-weight: 400; font-size: 24px; color: #565656; font-family: 'Lato', sans-serif; } .footer-logos { font-size: 20px; font-weight: 800; font-style: italic; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 900px; margin: auto; } @media screen and (min-width: 768px) { .footer-logos { font-size: 20px; } } .footer-logos a span { color: #2BB5B6; text-decoration: none; } .footer-logos a { color: #3F3D3F; text-decoration: none; } .footer-logos-item { margin: 3px 10px; } .footer-follow { margin-top: 32px; } .footer-follow-title { font-size: 22px; font-style: italic; font-weight: 400; color: #3CA4A7; margin-bottom: 10px; } .footer-follow-item { margin: 0 8px; text-decoration: none; } .footer-follow-item svg { width: 35px; height: 35px; border: #8DCACA 1px solid; fill: #8DCACA; padding: 4px; } .footer-follow-item:hover svg { fill: #FFFFFF; background-color: #8DCACA; } .footer-links { font-family: 'Lato', sans-serif; font-size: 15; font-weight: 500; font-style: italic; color: #3CA4A7; margin-top: 10; } .footer-links a { text-decoration: none; color: #3CA4A7; } .footer-links a:hover { text-decoration: underline; } .footer-koobcamp-data { font-family: 'Lato', sans-serif; font-size: 12px; font-weight: 400; margin-top: 20px; line-height: 16px; }