196 lines
4.0 KiB
CSS
196 lines
4.0 KiB
CSS
|
.index section.hero {
|
||
|
|
||
|
/*
|
||
|
background: radial-gradient(#610c632a 10%, transparent 10%), radial-gradient(#ee81b42a 10%,transparent 10%), radial-gradient(#37e2d42a 10%, transparent 10%) var(--b-color);
|
||
|
background-size: 100px 100px;
|
||
|
background-position: 0 0, 25px 25px, 50px 50px;
|
||
|
*/
|
||
|
|
||
|
.hero {
|
||
|
display: grid;
|
||
|
grid-template-columns: 3fr 1fr;
|
||
|
max-width: 52rem;
|
||
|
padding: 3.5rem 1rem 5rem 1rem;
|
||
|
margin: 0 auto;
|
||
|
|
||
|
.msg {
|
||
|
padding: 2rem 0;
|
||
|
|
||
|
h1 {
|
||
|
font-size: 4.25rem;
|
||
|
font-weight: 700;
|
||
|
line-height: 4.5rem;
|
||
|
letter-spacing: -.05rem;
|
||
|
padding: 0 2rem 0 0;
|
||
|
margin: 2rem 0;
|
||
|
|
||
|
span {
|
||
|
display: block;
|
||
|
font-size: 1.5rem;
|
||
|
font-weight: 600;
|
||
|
line-height: 2rem;
|
||
|
margin: 0 0 1rem .15rem;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
font-size: 1.25rem;
|
||
|
line-height: 1.85rem;
|
||
|
margin: 0 8rem 1.75rem .2rem;
|
||
|
|
||
|
span {
|
||
|
margin: 0 .1rem;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
display: inline-block;
|
||
|
font-size: 1.1rem;
|
||
|
font-weight: 600;
|
||
|
background: var(--b-color);
|
||
|
padding: .55rem 1.45rem .70rem 1.45rem;
|
||
|
margin: 0 0 1rem 0;
|
||
|
border-radius: .25rem;
|
||
|
|
||
|
&:hover { background: var(--btn-hover) }
|
||
|
}
|
||
|
|
||
|
.primary {
|
||
|
color: var(--s-color);
|
||
|
border: .15rem solid var(--s-color);
|
||
|
margin: 0 1rem 0 .2rem;
|
||
|
}
|
||
|
|
||
|
.secondary {
|
||
|
color: var(--fs-color);
|
||
|
border: .15rem solid var(--fs-color);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.oooh {
|
||
|
position: relative;
|
||
|
|
||
|
.img,
|
||
|
.blob {
|
||
|
position: absolute;
|
||
|
z-index: -1;
|
||
|
}
|
||
|
|
||
|
.img {
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
background-image: url('/img/hero.svg');
|
||
|
background-repeat: no-repeat;
|
||
|
}
|
||
|
|
||
|
.blob {
|
||
|
width: 40rem;
|
||
|
height: 35rem;
|
||
|
top: 50%;
|
||
|
left: 15%;
|
||
|
transform: translate(-50%, -50%);
|
||
|
background: var(--b-color);
|
||
|
box-shadow: 0 0 200px 0 #5d7dff10, 0 0 50px 0 #5d7eff10;
|
||
|
animation: morpheus 20s linear infinite;
|
||
|
}
|
||
|
|
||
|
/* tl tr br bl / lt rt rb lb */
|
||
|
/* top-left top-right bottom-right bottom-left / left-top right-top right-bottom left-bottom */
|
||
|
@keyframes morpheus {
|
||
|
0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
|
||
|
20% { border-radius: 60% 40% 40% 60% / 60% 25% 75% 40%; }
|
||
|
40% { border-radius: 70% 30% 65% 35% / 80% 45% 55% 20%; }
|
||
|
60% { border-radius: 30% 70% 70% 30% / 20% 30% 70% 80%; }
|
||
|
80% { border-radius: 40% 60% 40% 60% / 70% 55% 45% 30%; }
|
||
|
100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 1120px) {
|
||
|
.index section.hero .hero .oooh {
|
||
|
.blob {
|
||
|
width: 35rem;
|
||
|
height: 30rem;
|
||
|
top: 50%;
|
||
|
left: 0;
|
||
|
transform: translate(-50%, -50%);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (--viewport-9) {
|
||
|
.index section.hero .hero {
|
||
|
display: block;
|
||
|
padding: 3.5rem 4rem 5rem 4rem;
|
||
|
|
||
|
.msg {
|
||
|
h1 {
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
padding: 0 8rem 0 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.oooh {
|
||
|
display: none;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (--viewport-7) {
|
||
|
.index section.hero .hero {
|
||
|
.msg p {
|
||
|
padding: 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (--viewport-4) {
|
||
|
.index section.hero .hero {
|
||
|
padding: 3rem 2.15rem;
|
||
|
|
||
|
.msg {
|
||
|
padding: 1rem 0;
|
||
|
|
||
|
h1 {
|
||
|
font-size: 2.5rem;
|
||
|
line-height: 3rem;
|
||
|
padding: 0;
|
||
|
margin: 0 0 1.75rem 0;
|
||
|
|
||
|
span {
|
||
|
display: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
margin: 0 0 1.75rem .1rem;
|
||
|
|
||
|
span {
|
||
|
padding-right: .15rem;
|
||
|
margin: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
width: 100%;
|
||
|
text-align: center;
|
||
|
padding: .55rem 1rem .70rem 1rem;
|
||
|
}
|
||
|
|
||
|
.primary {
|
||
|
margin: 0 0 1rem 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (--viewport-3) {
|
||
|
.index section.hero .hero {
|
||
|
padding: 3rem 1.4rem;
|
||
|
}
|
||
|
}
|