File "main-home.scss"
Full Path: /srv/www/www.cadoro.it/src/scss/main-home.scss
File size: 4.02 KB
MIME-type: text/plain
Charset: utf-8
.page-hero {
background-color: #fff;
background-position: center top;
background-repeat: no-repeat;
.hero {
padding: 0 0 80px;
text-align: center;
.link-hero-mod {
text-decoration: none;
color: inherit;
}
h1 {
color: #fff;
font-family: Oswald, sans-serif;
font-size: 70px;
/*line-height: 20px;*/
font-weight: 600;
margin: 80px 0 0;
text-shadow: 1px 1px 15px #000;
small {
color: #fff;
display: block;
font-size: 54px;
font-weight: 600;
line-height: 54px;
margin-bottom: 10px;
}
a,
a:hover {
color: inherit;
text-decoration: none;
}
}
h2 {
color: #fff;
font-family: Oswald, sans-serif;
font-size: 44px;
font-weight: 400;
line-height: 48px;
margin: 40px 0 0;
text-shadow: 1px 1px 15px #000;
}
}
.header .header-logo {
visibility: hidden;
}
}
.content .home-cardoro {
background: transparent url(../images/home-cardoro.jpg) center center no-repeat;
background-position: center center;
background-size: cover;
color: #fff;
padding-bottom: 30px;
padding-top: 20px;
h2 {
font-size: 32px;
font-weight: 600;
margin-top: 20px;
}
h2 small {
color: #fff;
}
h3 {
margin-top: 22px;
font-size: 20px;
font-weight: 300;
}
p {
line-height: 20px;
}
.btn {
background-color: transparent;
border: 1px solid #fff;
color: #fff;
padding: 6px;
}
}
.content .home-beauty {
p {
font-family: 'Roboto Slab', serif;
font-size: 18px;
line-height: 24px;
}
.btn-1,
.btn-2 {
color: #fff;
display: block;
padding: 20px;
font-family: 'Roboto Slab', serif;
font-size: 18px;
line-height: 24px;
text-align: center;
strong {
display: block;
font-weight: 700;
font-size: 24px;
line-height: 28px;
}
&:hover {
text-decoration: none;
}
}
.btn-1 {
background-color: #855c5d;
}
.btn-2 {
background-color: #c34a6b;
}
}
.home-giftcard {
background-color: #557c0a;
padding: 20px 0;
.btn-1 {
background-color: #fff;
color: #000;
display: block;
padding: 20px;
font-size: 18px;
line-height: 24px;
text-align: center;
strong {
display: block;
font-weight: 700;
font-size: 24px;
line-height: 28px;
}
&:hover {
text-decoration: none;
}
}
}
@media (min-width: 767px) {
.page-hero {
background-size: contain;
}
body.header-sticky {
.header .header-logo {
visibility: visible;
}
}
}
/* new code */
.hero {
height: 520px;
}
.video-wrapper {
position: relative;
width: 100%;
height: 0;
opacity: 0;
padding-bottom: 56.25%;
max-height: 420px;
overflow: hidden;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media(max-width: 991px) {
.hero {
height: 400px;
}
}
@media(max-width: 768px) {
.hero {
height: 350px;
}
}
@media(max-width: 576px) {
.hero {
height: 350px;
}
.page-hero {
.hero {
padding: 10px 0 20px;
h1 {
font-size: 30px;
line-height: 20px;
font-weight: 400;
margin: 30px 0 0;
small {
font-size: 28px;
font-weight: 400;
line-height: 28px;
}
}
h2 {
font-size: 24px;
line-height: 24px;
margin: 30px 0 0;
}
}
.header .header-logo {
visibility: hidden;
}
}
}
/* end */
@media (max-width: 1200px) {
.hero {height: 430px;}
.page-hero .hero h1 {font-size: 70px; line-height: 70px; margin: 40px 0 0;}
.page-hero .hero h1 small {font-size: 30px; line-height: 30px;}
.header .nav>li>a {
font-size: 15px;
padding: 10px 7px 6px;
}
.dropdown-menu>li>a {
padding: 3px 18px;
font-size: 15px;
}
}
@media (max-width: 991px) {
.hero {height: 380px;}
}
@media (max-width: 767px) {
.page-hero .header .header-logo { visibility: visible; }
}