167 lines
3.2 KiB
Plaintext
167 lines
3.2 KiB
Plaintext
@import '~styles/variables.less';
|
|
@min-tablet-query: ~'(min-width: 920px)';
|
|
|
|
.HomeIntro {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
max-width: 1440px;
|
|
padding: 0 4rem;
|
|
margin: 4rem auto;
|
|
overflow: hidden;
|
|
|
|
@media @thin-query {
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
@media @tablet-query {
|
|
padding-top: 3rem;
|
|
}
|
|
|
|
&-content {
|
|
|
|
&-title {
|
|
margin-bottom: 2rem;
|
|
font-size: 2.6rem;
|
|
}
|
|
|
|
&-subtitle {
|
|
margin-bottom: 2rem;
|
|
font-size: 1.4rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: start;
|
|
|
|
@media @tablet-query {
|
|
margin-left: 0;
|
|
}
|
|
|
|
@media @mobile-query {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
&-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 4.2rem;
|
|
width: 16rem;
|
|
padding: 0;
|
|
margin: 0 10px;
|
|
border: 2px solid rgba(@text-color, 0.7);
|
|
color: rgba(@text-color, 0.7);
|
|
text-align: center;
|
|
font-size: 1.4rem;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
transition: transform 200ms ease, box-shadow 200ms ease;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
transform: translateY(-2px);
|
|
border-color: rgba(@text-color, 0.9);
|
|
color: rgba(@text-color, 0.9);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(0px);
|
|
border-color: rgba(@text-color, 1);
|
|
color: rgba(@text-color, 1);
|
|
}
|
|
|
|
@media @tablet-query {
|
|
width: 100%;
|
|
height: 5rem;
|
|
font-size: 1.8rem;
|
|
max-width: 320px;
|
|
margin-bottom: 1rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&.is-primary {
|
|
border-color: rgba(@primary-color, 0.7);
|
|
color: rgba(@primary-color, 0.7);
|
|
|
|
@media @min-tablet-query {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&hover,
|
|
&:focus {
|
|
color: @primary-color;
|
|
border-color: rgba(@primary-color, 0.9);
|
|
color: rgba(@primary-color, 0.9);
|
|
}
|
|
|
|
&:active {
|
|
border-color: rgba(@primary-color, 1);
|
|
color: rgba(@primary-color, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media @thin-query {
|
|
width: auto;
|
|
min-width: 0;
|
|
|
|
&-title {
|
|
margin-bottom: 1.5rem;
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
&-subtitle {
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1.2rem;
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
@media @tablet-query {
|
|
text-align: center;
|
|
|
|
&-buttons {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&-auth {
|
|
width: 100%;
|
|
max-width: 260px;
|
|
margin: 0 auto 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-illustration {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 480px;
|
|
background-size: contain;
|
|
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
padding-top: 86.3%; // Aspect ratio of img
|
|
}
|
|
|
|
@media @thin-query {
|
|
margin-right: -9rem;
|
|
}
|
|
|
|
@media @tablet-query {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|