cs2.tinysites.com/assets/style/pages/index/index.css

136 lines
2.5 KiB
CSS

.index {
.templates,
.resources,
.pricing {
h3,
p {
text-align: center;
}
h3 {
color: var(--f-color);
font-size: 3.25rem;
font-weight: 600;
margin: 1.75rem 0 1.25rem 0;
span {
font-size: 2.25rem;
margin: 0 .25rem;
}
}
p {
color: var(--fs-color);
font-size: 1.525rem;
font-weight: 300;
line-height: 2rem;
margin: 0 0 0 0.15rem;
}
}
.cta {
padding: 2rem 0 6rem 0;
text-align: center;
h4 {
font-size: 2.25rem;
font-weight: 700;
line-height: 3.25rem;
margin: 2rem 0;
}
a {
display: inline-block;
color: var(--f-color);
font-size: 1rem;
font-weight: 600;
border: .15rem solid var(--br-color);
border-radius: var(--radius-full);
padding: 1rem 1.55rem 1rem 1.65rem;
margin: 0 .5rem;
text-align: center;
&:hover {
background: var(--brh-color);
}
&:last-of-type {
border-color: var(--f-color);
&:hover {
background: var(--lt-color);
}
}
}
}
.scroll-down {
display: block;
width: fit-content;
padding: .5rem;
margin: 3rem auto;
.arrow {
width: .75rem;
height: .75rem;
border-bottom: .2rem solid var(--f-color);
border-right: .2rem solid var(--f-color);
}
.rotate45 {
-webkit-transform: translate(-50%, 0%) rotate(45deg);
-moz-transform: translate(-50%, 0%) rotate(45deg);
transform: translate(-50%, 0%) rotate(45deg);
}
.fade {
-webkit-animation: fade_move_down 2s ease-in-out infinite;
-moz-animation: fade_move_down 2s ease-in-out infinite;
animation: fade_move_down 2s ease-in-out infinite;
}
}
@-webkit-keyframes fade_move_down {
0% {
-webkit-transform: translate(0, -10px) rotate(45deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: translate(0, 10px) rotate(45deg);
opacity: 0;
}
}
@-moz-keyframes fade_move_down {
0% {
-moz-transform: translate(0, -10px) rotate(45deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-moz-transform: translate(0, 10px) rotate(45deg);
opacity: 0;
}
}
@keyframes fade_move_down {
0% {
transform: translate(0, -10px) rotate(45deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translate(0, 10px) rotate(45deg);
opacity: 0;
}
}
}