200 lines
5.0 KiB
SCSS
200 lines
5.0 KiB
SCSS
.landing-hero {
|
|
flex: 1 1 auto;
|
|
|
|
.hero-inner {
|
|
.hero-box {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.name {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
opacity: 0;
|
|
transition: 1s;
|
|
transition-delay: 1.8s;
|
|
}
|
|
|
|
img {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
transition: 0.5s;
|
|
transition-delay: 1.8s;
|
|
}
|
|
|
|
b {
|
|
color: var(--home-primary-text-color);
|
|
display: block;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
}
|
|
|
|
span {
|
|
color: var(--home-secondary-text-color);
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
}
|
|
|
|
&:before {
|
|
content: '';
|
|
background: var(--home-herobox-bg);
|
|
border: 1px solid var(--home-border-color);
|
|
box-shadow: 0px 50px 100px var(--home-herobox-shadow);
|
|
border-radius: 9px;
|
|
z-index: -1;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 100%;
|
|
height: 0%;
|
|
opacity: 0;
|
|
transform: translate(-50%, -50%);
|
|
transition: height 1s 1.4s, opacity 1s 1.4s, border-color .3s;
|
|
}
|
|
|
|
&:hover {
|
|
&:before {
|
|
border-color: var(--home-highlight-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.hero-border-top {
|
|
opacity: 0;
|
|
border: 1px solid transparent;
|
|
width: 380px;
|
|
height: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: -1;
|
|
transition: height 1.5s, opacity 1.5s;
|
|
transition-delay: 0.6s;
|
|
border-radius: 9px;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.hero-border-left {
|
|
border: 1px solid var(--home-border-color);
|
|
border-right: transparent;
|
|
width: 0%;
|
|
border-radius: 9px 0 0 9px;
|
|
height: 35%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -3%;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
transition: width 1s, opacity 1s, transform 1s;
|
|
transition-delay: 1s;
|
|
transform: translate(108px, -50%);
|
|
}
|
|
|
|
.hero-border-right {
|
|
border: 1px solid var(--home-border-color);
|
|
border-left: transparent;
|
|
width: 0%;
|
|
border-radius: 0 9px 9px 0;
|
|
height: 35%;
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -3%;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
transition: width 1s, opacity 1s, transform 1s;
|
|
transition-delay: 1s;
|
|
transform: translate(-108px, -50%);
|
|
}
|
|
}
|
|
|
|
.hero-bg {
|
|
transition-delay: 1.4s;
|
|
|
|
.hero-strip-top {
|
|
transition: 1.6s;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 114px;
|
|
height: 0%;
|
|
opacity: 0;
|
|
background: var(--home-herobox-strip-top-bg);
|
|
}
|
|
|
|
.hero-strip-left {
|
|
transition: 1.6s;
|
|
position: absolute;
|
|
top: 45.6%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 0%;
|
|
height: 114px;
|
|
opacity: 0;
|
|
background: var(--home-herobox-strip-bottom-bg);
|
|
}
|
|
}
|
|
|
|
&.hero-animation {
|
|
.hero-bg {
|
|
.hero-strip-top {
|
|
opacity: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
.hero-strip-left {
|
|
width: 100%;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.hero-inner {
|
|
.hero-box {
|
|
cursor: pointer;
|
|
|
|
img {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
&.logo {
|
|
&::before {
|
|
box-shadow: var(--home-herobox-logo-shadow);
|
|
}
|
|
}
|
|
|
|
.name {
|
|
opacity: 1;
|
|
}
|
|
|
|
&:before {
|
|
height: 100%;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.hero-border-top {
|
|
height: 70%;
|
|
opacity: 1;
|
|
border-color: var(--home-border-color);
|
|
}
|
|
|
|
.hero-border-left {
|
|
opacity: 1;
|
|
width: 19%;
|
|
transform: translate(0, -50%);
|
|
}
|
|
|
|
.hero-border-right {
|
|
opacity: 1;
|
|
width: 19%;
|
|
transform: translate(0, -50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: $landingBreakpointLG) {
|
|
.landing-hero {
|
|
padding: 0 2rem;
|
|
}
|
|
} |