Sites-Camelia/branches/zaap-sufokien/v3/sass/_hero.scss

151 lines
3.6 KiB
SCSS

/*---------------------
Hero section
-----------------------*/
.hero-section {
height: 100%;
// @media #{$tab_device} {
// padding: 0 40px;
// }
}
.pana-accordion {
@media #{$large_mobile, $small_mobile} {
display: none;
}
}
.pana-accordion-item,
.hero-item {
display: flex;
align-items: flex-end;
position: relative;
.pa-text {
padding-left: 40px;
padding-bottom: 50px;
position: relative;
z-index: 5;
opacity: 0;
top: -50px;
.pa-tag{
display: inline-block;
padding: 4px 20px;
margin-bottom: 10px;
font-size: 12px;
color: $primary_color;
text-transform: uppercase;
font-weight: 600;
border-radius: 2px;
background: $white_color;
}
h2 {
font-size: 60px;
font-weight: 700;
color: $white_color;
margin-bottom: 20px;
@media #{$large_mobile, $tab_device} {
font-size: 48px;
}
@media #{$small_mobile} {
font-size: 36px;
}
@media #{ $xs_mobile} {
font-size: 24px;
}
}
h4 {
font-weight: 600;
color: $white_color;
padding-top: 15px;
@media #{ $xs_mobile} {
font-size: 16px;
}
}
.pa-author {
overflow: hidden;
img {
width: 60px;
height: 60px;
float: left;
border-radius: 50%;
margin-right: 10px;
}
}
}
&.active {
.pa-text {
opacity: 1;
top: 0;
@include transition(all 0.4s ease 0.4s);
}
&:after {
content: "";
position: absolute;
width: 100%;
height: 50%;
left: 0;
bottom: 0;
background: rgb(0,0,0);
background: -moz-linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 94%);
background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 94%);
background: linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 94%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}
}
}
.hero-slider-warp {
height: 100%;
display: none;
@media #{$large_mobile, $small_mobile} {
display: block;
}
}
.hero-slider {
height: 100%;
.owl-stage-outer,
.owl-stage,
.owl-item,
.pana-accordion-item,
.hero-item {
height: 100%;
}
}
.hero-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 15px;
.pa-text {
padding-left: 0;
padding-bottom: 0;
h4 {
display: inline-block;
}
.pa-author {
img {
float: none;
display: inline-block;
}
}
}
}
.owl-item.active .hero-item {
.pa-text {
opacity: 1;
top: 0;
@include transition(all 0.4s ease 0.4s);
}
&:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
background: #000000;
opacity: 0.5;
}
}