You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
1.9 KiB
SCSS
111 lines
1.9 KiB
SCSS
// Masks
|
|
.view {
|
|
overflow: hidden;
|
|
position: relative;
|
|
cursor: default;
|
|
.mask {
|
|
background-attachment: fixed;
|
|
}
|
|
.mask,
|
|
.full-bg-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
img, video {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
// Zoom and overlays
|
|
.hm-zoom,
|
|
.overlay {
|
|
img,
|
|
video {
|
|
@include transition(all 0.2s linear);
|
|
}
|
|
&:hover {
|
|
.mask {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.hm-zoom {
|
|
&:hover {
|
|
img {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
}
|
|
.overlay {
|
|
.mask {
|
|
opacity: 0;
|
|
@include transition(all 0.4s ease-in-out);
|
|
}
|
|
}
|
|
|
|
// Overlay patterns
|
|
$patterns: (
|
|
1: "01",
|
|
2: "02",
|
|
3: "03",
|
|
4: "04",
|
|
5: "05",
|
|
6: "06",
|
|
7: "07",
|
|
8: "08",
|
|
9: "09"
|
|
);
|
|
|
|
@each $no, $filename in $patterns {
|
|
.pattern-#{$no} {
|
|
background: url('../img/overlays/#{$filename}.png');
|
|
}
|
|
}
|
|
|
|
// Overlay masks
|
|
@each $name, $color in $rgba-colors {
|
|
.hm-#{$name} {
|
|
.mask,
|
|
.full-bg-img {
|
|
background-color: $color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.full-height,
|
|
.full-height body,
|
|
.full-height header,
|
|
.full-height header .view {
|
|
height: 100%;
|
|
}
|
|
|
|
.intro {
|
|
min-height: 1000px;
|
|
position: relative;
|
|
@media (max-width: 768px) {
|
|
min-height: 1000px;
|
|
}
|
|
}
|
|
|
|
.intro-video {
|
|
video {
|
|
top: 50%;
|
|
left: 50%;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
z-index: -100;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
transition: 1s opacity;
|
|
}
|
|
}
|
|
|