213 lines
3 KiB
SCSS
213 lines
3 KiB
SCSS
.hook {
|
|
.loader {
|
|
animation: spin 2s linear infinite;
|
|
border-radius: 50%;
|
|
border-style: solid;
|
|
border-top-color: $teal;
|
|
|
|
&:not(.small) {
|
|
width: 4rem; height: 4rem;
|
|
|
|
border-width: 6px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
&.small {
|
|
width: 2rem; height: 2rem;
|
|
border-width: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hook__navigation {
|
|
background-color: $black;
|
|
color: $white;
|
|
font-size: 1rem;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.hook__navigation__step {
|
|
@media (min-width: 501px) {
|
|
display: inline-block;
|
|
|
|
&:not(:last-of-type) {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
span {
|
|
width: 3rem; height: 3rem;
|
|
|
|
display: block;
|
|
font-size: 1.25rem;
|
|
line-height: 3rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
display: block;
|
|
|
|
span {
|
|
width: 1rem; height: 1rem;
|
|
|
|
display: inline-block;
|
|
font-size: 0.7rem;
|
|
line-height: 0.9rem;
|
|
position: relative;
|
|
top: 2px;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
&:not(.active) {
|
|
span {
|
|
border-color: rgba($white, 0.1);
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
color: $teal;
|
|
|
|
span {
|
|
border-color: rgba($teal, 0.3);
|
|
}
|
|
}
|
|
|
|
span {
|
|
border: 1px solid;
|
|
border-radius: 50%;
|
|
margin: 0 auto 0.5rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hook__page {
|
|
@extend .page__content;
|
|
}
|
|
|
|
.hook__page__hero {
|
|
margin-bottom: 2rem;
|
|
border-bottom: 1px solid rgba($black, 0.05);
|
|
|
|
h1, p {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.hook__page__hero__claim,
|
|
.hook__page__hero__support {
|
|
margin-bottom: 3rem; padding-left: 1rem;
|
|
|
|
background-color: $white;
|
|
border: 1px solid rgba($gray, 0.7);
|
|
font-size: 1rem;
|
|
|
|
@media (min-width: 501px) {
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
width: 80%;
|
|
}
|
|
|
|
&::after {
|
|
@include clearfix;
|
|
}
|
|
|
|
input, a {
|
|
line-height: 3rem;
|
|
}
|
|
|
|
span {
|
|
color: rgba($black, 0.3);
|
|
}
|
|
|
|
a {
|
|
border-left: 1px solid rgba($gray, 0.7);
|
|
color: $white;
|
|
float: right;
|
|
position: relative;
|
|
text-align: center;
|
|
transition: all 0.2s;
|
|
width: 6rem;
|
|
|
|
&::after {
|
|
width: calc(100% + 2px); height: calc(100% + 2px);
|
|
top: -1px; left: -1px;
|
|
|
|
border: 1px solid;
|
|
content: "";
|
|
position: absolute;
|
|
transition: inherit;
|
|
}
|
|
|
|
&:not(:hover) {
|
|
background-color: $black;
|
|
|
|
&::after {
|
|
border-color: $black;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $teal;
|
|
|
|
&::after {
|
|
border-color: $teal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.hook__page__hero__claim {
|
|
input {
|
|
width: calc(100% - 10rem);
|
|
}
|
|
}
|
|
|
|
.hook__page__hero__support {
|
|
input[type=number] {
|
|
width: 3rem;
|
|
}
|
|
|
|
input[type=text] {
|
|
width: calc(100% - 11.5rem);
|
|
}
|
|
|
|
span {
|
|
line-height: 3rem;
|
|
}
|
|
|
|
a {
|
|
margin-left: 0.5rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hook__page__content {
|
|
&::after {
|
|
@include clearfix;
|
|
}
|
|
}
|
|
|
|
.hook__page__content__card {
|
|
margin-bottom: 1rem; padding: 1rem;
|
|
|
|
img {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
@media (min-width: 501px) {
|
|
float: left;
|
|
vertical-align: top;
|
|
width: 50%;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
width: 100%;
|
|
}
|
|
}
|