?AlkantarClanX12
| Current Path : /home/rankinh/numerik/wp-content/themes/blackdsn/assets/sass/site/header/ |
| Current File : /home/rankinh/numerik/wp-content/themes/blackdsn/assets/sass/site/header/_header.scss |
/* -------------------------------------------------------
Header
-------------------------------------------------------- */
.link-project {
right: 60px;
bottom: 60px;
z-index: 15;
width: 120px;
height: 120px;
border-radius: 50%;
text-align: center;
line-height: 120px;
font-size: 13px;
letter-spacing: 1px;
svg {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
fill: currentColor;
overflow: hidden;
}
@include media_768 {
display: none;
}
}
#dsn_header {
position: relative;
overflow: hidden;
--margin-padding: 80px;
&:not(.header-normal , .header-padding , .dsn-full-header) {
min-height: 100vh;
#hero_content {
padding-top: 80px;
padding-bottom: 80px;
}
@include media_768(min) {
.entry-header, #hero_content {
min-height: calc(100vh - (#{$margin-padding} * 2));
}
}
@include media_768 {
padding: 0;
.entry-header, #hero_content {
min-height: 100vh;
}
}
}
&.show-box-shadow:not(.header-normal) {
& .entry-header:after {
content: "";
position: absolute;
width: 100%;
}
}
&:not(.header-normal):before {
content: "";
position: absolute;
width: 100%;
left: 0;
top: 50%;
height: 50%;
background-color: $assistant-color;
}
.entry-header:after {
left: 0;
bottom: 0;
box-shadow: 1px 0 31px 45px var(--assistant-color);
z-index: 1;
}
&.header-padding:not(.header-normal) {
.entry-header {
padding: 120px 0;
}
}
@include media_991(min) {
&.right-img, &.left-img {
#hero_image, #hero_content {
width: 50%;
}
&.right-img {
#hero_image {
left: 50%;
}
#hero_content {
margin-left: 0;
}
}
&.left-img {
#hero_content {
margin-right: 0;
margin-left: auto;
}
}
}
}
#hero_image {
top: 0;
width: 100%;
height: 100%;
}
#hero_content {
z-index: 2;
align-items: var(--dsn-ai, end);
justify-content: var(--dsn-jc, start);
text-align: var(--dsn-ta, left);
}
&.header-normal {
padding-top: 180px;
}
&.dsn-full-header {
padding: 0;
.entry-header, #hero_content {
min-height: 100vh;
}
#hero_content {
padding-top: $margin-padding;
padding-bottom: $margin-padding;
}
}
}
.dsn-scroll-bottom {
position: absolute;
right: 20px;
bottom: 50px;
z-index: 1;
width: fit-content;
min-width: 13px;
font-size: 10px;
letter-spacing: 5px;
cursor: pointer;
&:before, &:after {
content: '';
display: block;
width: 1px;
height: 40px;
left: 50%;
margin-bottom: 10px;
}
&:before {
position: relative;
background-color: $bg-color;
}
&:after {
position: absolute;
top: 0;
background-color: $theme-color;
transform: scale(0);
transform-origin: top;
animation: scroll-down 2.5s $easeInOutExpo infinite;
}
.text {
writing-mode: vertical-lr;
}
}
@keyframes scroll-down {
0% {
transform: scale(0);
transform-origin: top;
//animation-timing-function: $easeOutExpo;
}
50% {
transform: scale(1);
transform-origin: top;
}
51% {
transform: scale(1);
transform-origin: bottom;
//animation-timing-function: $easeInExpo;
}
100% {
transform: scale(0);
transform-origin: bottom;
}
}
@import "project-header";
@import "header-pages";
@import "header-post";