85 lines
1.3 KiB
Stylus
85 lines
1.3 KiB
Stylus
@keyframes down
|
|
0%
|
|
margin-bottom 0
|
|
opacity 1
|
|
100%
|
|
margin-bottom -15px
|
|
opacity .1
|
|
//
|
|
.cover-frame
|
|
position relative
|
|
min-width 100%
|
|
height 100vh
|
|
.bg-box
|
|
width 100%
|
|
height 100%
|
|
&>img
|
|
display block
|
|
width 100vw
|
|
height 100vh
|
|
object-fit cover
|
|
object-position center center
|
|
.cover-inner
|
|
position absolute
|
|
top 50%
|
|
left 50%
|
|
transform translate(-50%, -100%)
|
|
h1
|
|
font-size 7rem
|
|
margin 0
|
|
opacity .95
|
|
h2
|
|
font-size 3rem
|
|
margin .5rem 0 1.5rem
|
|
a, &
|
|
color white
|
|
text-decoration none
|
|
video, img
|
|
position relative
|
|
.cover-logo
|
|
width cover-logo-size
|
|
|
|
|
|
.cover-learn-more
|
|
position absolute
|
|
z-index 1
|
|
bottom 10px
|
|
left 0
|
|
width 100%
|
|
a > i
|
|
font-size 3rem
|
|
color white
|
|
animation down 1s linear infinite
|
|
&:hover
|
|
color sea
|
|
|
|
.to_top
|
|
position fixed
|
|
bottom 10rem
|
|
right 50px
|
|
z-index 9
|
|
text-align center
|
|
transform scale(1.2)
|
|
|
|
#mask
|
|
position fixed
|
|
left 0
|
|
top 0
|
|
width 100%
|
|
height 100%
|
|
background-color rgba(0,0,0,.8)
|
|
z-index 9998
|
|
display none
|
|
|
|
// Media Query
|
|
@media (max-width: 768px)
|
|
.cover-inner
|
|
transform translate(-50%, -70%);
|
|
width 100%
|
|
h1
|
|
font-size 4.5rem
|
|
h2
|
|
font-size 2rem
|
|
|
|
.to_top
|
|
right 10px |