1091 lines
23 KiB
SCSS
1091 lines
23 KiB
SCSS
.tracker {
|
||
font-family: "GT Eesti Pro Display";
|
||
|
||
// section:not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(
|
||
// :nth-child(5)
|
||
// ):not(:nth-child(6)) {
|
||
// display: none;
|
||
// }
|
||
|
||
.auth-header {
|
||
display: none;
|
||
|
||
@media (max-width: 431px) {
|
||
display: flex;
|
||
background-color: #a7ca60;
|
||
}
|
||
|
||
.burger__line {
|
||
background-color: #4a4a4a;
|
||
}
|
||
|
||
.auth__buttons {
|
||
.signIn {
|
||
background-color: #eeeeee;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__container {
|
||
margin: 0 auto;
|
||
// padding: 85px 0 90px;
|
||
max-width: 1080px;
|
||
position: relative;
|
||
display: flex;
|
||
}
|
||
&__intro {
|
||
background-color: #a7ca60;
|
||
position: relative;
|
||
|
||
@media (max-width: 431px) {
|
||
height: 485px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.intro {
|
||
&__question-mark {
|
||
position: absolute;
|
||
right: 15%;
|
||
|
||
@media (max-width: 431px) {
|
||
display: none;
|
||
}
|
||
}
|
||
&__code {
|
||
position: absolute;
|
||
mix-blend-mode: plus-lighter;
|
||
bottom: 96px;
|
||
left: 16%;
|
||
|
||
@media (max-width: 431px) {
|
||
display: none;
|
||
}
|
||
}
|
||
&__code--top {
|
||
position: absolute;
|
||
mix-blend-mode: plus-lighter;
|
||
top: 20px;
|
||
left: 38%;
|
||
|
||
@media (max-width: 431px) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
&__container {
|
||
display: flex;
|
||
column-gap: 165px;
|
||
height: 475px;
|
||
overflow: hidden;
|
||
|
||
@media (max-width: 431px) {
|
||
flex-direction: column-reverse;
|
||
align-items: center;
|
||
height: auto;
|
||
}
|
||
}
|
||
|
||
&-logo {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
|
||
h3 {
|
||
color: #ffffff;
|
||
font-family: "Geraspoheko";
|
||
font-size: 343px;
|
||
font-weight: 400;
|
||
line-height: 325.92px;
|
||
|
||
@media (max-width: 431px) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
&__cup {
|
||
position: absolute;
|
||
bottom: -85px;
|
||
right: -150px;
|
||
|
||
@media (max-width: 431px) {
|
||
position: static;
|
||
margin: -90px 0 0 0;
|
||
}
|
||
|
||
img {
|
||
@media (max-width: 431px) {
|
||
height: 350px;
|
||
}
|
||
}
|
||
|
||
&::before {
|
||
content: "Не нужно заваривать мышь";
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
top: 100px;
|
||
left: -80px;
|
||
width: 182px;
|
||
height: 106px;
|
||
border-radius: 8px;
|
||
border: 0.5px solid #ffffff;
|
||
background: linear-gradient(
|
||
110.06deg,
|
||
rgba(255, 255, 255, 0.34) 0%,
|
||
rgba(199, 206, 198, 0.34) 99.25%
|
||
);
|
||
backdrop-filter: blur(8.6999998093px);
|
||
box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
|
||
padding: 0 15px;
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
line-height: 19.72px;
|
||
letter-spacing: 0.01em;
|
||
text-align: center;
|
||
|
||
@media (max-width: 431px) {
|
||
width: 125px;
|
||
height: 106px;
|
||
left: 170px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #607536;
|
||
max-width: 455px;
|
||
|
||
@media (max-width: 431px) {
|
||
margin: 0 20px;
|
||
}
|
||
|
||
&__sublogo {
|
||
margin-top: 37px;
|
||
|
||
@media (max-width: 431px) {
|
||
display: none;
|
||
}
|
||
|
||
h5 {
|
||
font-size: 29px;
|
||
font-weight: 900;
|
||
line-height: 33.64px;
|
||
letter-spacing: 0.11em;
|
||
position: relative;
|
||
display: inline;
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
background: #ffffff;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 100px;
|
||
left: 49%;
|
||
top: -30%;
|
||
}
|
||
}
|
||
}
|
||
|
||
span {
|
||
font-size: 33px;
|
||
font-weight: 300;
|
||
line-height: 37.29px;
|
||
letter-spacing: 0.01em;
|
||
margin: 101px 0 34px 0;
|
||
|
||
@media (max-width: 431px) {
|
||
font-size: 29px;
|
||
line-height: 32.77px;
|
||
text-align: center;
|
||
margin: 21px 0 26px 0;
|
||
}
|
||
}
|
||
|
||
p {
|
||
font-size: 33px;
|
||
font-weight: 500;
|
||
line-height: 37.29px;
|
||
letter-spacing: 0.01em;
|
||
|
||
@media (max-width: 431px) {
|
||
font-size: 25px;
|
||
line-height: 28.25px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&__presentation {
|
||
background-color: #eeeeee;
|
||
position: relative;
|
||
|
||
.presentation {
|
||
&__code {
|
||
position: absolute;
|
||
mix-blend-mode: plus-lighter;
|
||
bottom: 225px;
|
||
right: 18%;
|
||
|
||
@media (max-width: 431px) {
|
||
display: none;
|
||
}
|
||
}
|
||
&__code--top {
|
||
position: absolute;
|
||
mix-blend-mode: plus-lighter;
|
||
top: 60px;
|
||
left: 25%;
|
||
|
||
@media (max-width: 431px) {
|
||
display: none;
|
||
}
|
||
}
|
||
&__ellipse {
|
||
position: absolute;
|
||
width: 563px;
|
||
height: 563px;
|
||
top: -90px;
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
|
||
@media (max-width: 431px) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
&__container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 749px;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
align-items: center;
|
||
z-index: 2;
|
||
|
||
@media (max-width: 431px) {
|
||
height: 660px;
|
||
}
|
||
|
||
h5 {
|
||
color: #4a4a4a;
|
||
font-size: 33px;
|
||
font-weight: 700;
|
||
line-height: 38.28px;
|
||
margin-top: 95px;
|
||
|
||
@media (max-width: 431px) {
|
||
font-size: 19px;
|
||
line-height: 22.04px;
|
||
text-align: center;
|
||
margin-top: 37px;
|
||
}
|
||
}
|
||
|
||
h4 {
|
||
text-transform: uppercase;
|
||
color: #a7ca60;
|
||
font-size: 103px;
|
||
font-weight: 900;
|
||
line-height: 119.48px;
|
||
margin-top: 9px;
|
||
|
||
@media (max-width: 431px) {
|
||
font-size: 50px;
|
||
font-weight: 900;
|
||
line-height: 58px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
p {
|
||
color: #4a4a4a;
|
||
font-size: 19px;
|
||
font-weight: 300;
|
||
line-height: 22.04px;
|
||
letter-spacing: 0.01em;
|
||
max-width: 609px;
|
||
margin-bottom: 52px;
|
||
|
||
@media (max-width: 431px) {
|
||
font-size: 15px;
|
||
line-height: 17.4px;
|
||
text-align: center;
|
||
max-width: 370px;
|
||
}
|
||
|
||
span {
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-auth__buttons {
|
||
display: flex;
|
||
column-gap: 29px;
|
||
|
||
@media (max-width: 431px) {
|
||
column-gap: 12px;
|
||
}
|
||
|
||
button {
|
||
width: 185px;
|
||
height: 45px;
|
||
border-radius: 44px;
|
||
font-size: 17px;
|
||
font-weight: 500;
|
||
line-height: 19.72px;
|
||
}
|
||
|
||
.signIn {
|
||
a {
|
||
color: #607536;
|
||
}
|
||
background-color: #a7ca60;
|
||
border: none;
|
||
}
|
||
|
||
.signUp {
|
||
a {
|
||
color: #a7ca60;
|
||
}
|
||
border: 1px solid #a7ca60;
|
||
background: none;
|
||
}
|
||
}
|
||
|
||
&__tracker-preview {
|
||
margin-top: 61px;
|
||
position: relative;
|
||
|
||
@media (max-width: 431px) {
|
||
margin-top: 37px;
|
||
overflow: hidden;
|
||
height: 315px;
|
||
left: 150px;
|
||
}
|
||
|
||
.tracker-preview {
|
||
&__buttons {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: absolute;
|
||
bottom: 155px;
|
||
right: -75px;
|
||
|
||
@media (max-width: 431px) {
|
||
display: none;
|
||
}
|
||
|
||
button {
|
||
background: none;
|
||
width: 70px;
|
||
height: 64px;
|
||
border-radius: 5px;
|
||
border: 1px solid #ffffff;
|
||
}
|
||
|
||
button:first-child {
|
||
margin-bottom: 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&__addition {
|
||
background-color: #a7ca60;
|
||
width: 247px;
|
||
height: 188px;
|
||
border-radius: 24px 0px 83px 0px;
|
||
color: #ffffff;
|
||
position: absolute;
|
||
padding: 40px 43px 40px 50px;
|
||
bottom: -34px;
|
||
left: 21%;
|
||
z-index: 2;
|
||
|
||
@media (max-width: 431px) {
|
||
width: 255px;
|
||
height: 102px;
|
||
left: -22.26px;
|
||
border-radius: 24px 0px 44px 0px;
|
||
padding: 25px 0 0 60px;
|
||
}
|
||
|
||
span {
|
||
font-size: 26px;
|
||
font-weight: 900;
|
||
line-height: 28.34px;
|
||
letter-spacing: 0.03em;
|
||
text-align: left;
|
||
|
||
@media (max-width: 431px) {
|
||
max-width: 174px;
|
||
}
|
||
}
|
||
|
||
p {
|
||
font-size: 15px;
|
||
font-weight: 300;
|
||
line-height: 19.65px;
|
||
text-align: left;
|
||
|
||
@media (max-width: 431px) {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&__goals {
|
||
background-color: #1e1e1e;
|
||
position: relative;
|
||
|
||
.goals {
|
||
&__code {
|
||
position: absolute;
|
||
mix-blend-mode: plus-lighter;
|
||
bottom: -96px;
|
||
left: 7%;
|
||
z-index: 1;
|
||
|
||
@media (max-width: 431px) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
&__container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 720px;
|
||
text-align: center;
|
||
align-items: center;
|
||
|
||
@media (max-width: 431px) {
|
||
height: 1020px;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
&-head {
|
||
margin-top: 24px;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
&__logo {
|
||
font-family: "Bebas Neue";
|
||
font-size: 244px;
|
||
font-weight: 700;
|
||
line-height: 244px;
|
||
letter-spacing: -0.03em;
|
||
background: linear-gradient(0deg, #171717 -59.84%, #2a2a2a 136.14%);
|
||
filter: drop-shadow(7px 0px 10px rgba(0, 0, 0, 0.1294117647));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
|
||
@media (max-width: 431px) {
|
||
font-size: 110px;
|
||
line-height: 110px;
|
||
letter-spacing: 0.01em;
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
|
||
&__info {
|
||
position: absolute;
|
||
bottom: 55px;
|
||
max-width: 552px;
|
||
font-size: 15px;
|
||
font-weight: 300;
|
||
line-height: 17.4px;
|
||
letter-spacing: 0.02em;
|
||
color: #eeeeee;
|
||
|
||
@media (max-width: 431px) {
|
||
bottom: -55px;
|
||
max-width: 372px;
|
||
}
|
||
|
||
span {
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__items {
|
||
margin-top: 31px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
column-gap: 48px;
|
||
|
||
@media (max-width: 431px) {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
row-gap: 86px;
|
||
margin-top: 95px;
|
||
}
|
||
|
||
.item {
|
||
&__wrapper {
|
||
position: relative;
|
||
|
||
&:nth-child(2) {
|
||
margin-right: 41px;
|
||
|
||
@media (max-width: 431px) {
|
||
margin: 0;
|
||
}
|
||
}
|
||
&:nth-child(3) {
|
||
margin-left: 41px;
|
||
|
||
@media (max-width: 431px) {
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__head {
|
||
position: absolute;
|
||
display: flex;
|
||
color: #a7ca60;
|
||
top: -45px;
|
||
left: 20px;
|
||
|
||
h4 {
|
||
margin-bottom: 0;
|
||
font-weight: 700;
|
||
font-size: 100px;
|
||
text-transform: uppercase;
|
||
line-height: 0.8;
|
||
}
|
||
|
||
p {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
line-height: 13.92px;
|
||
letter-spacing: 0.01em;
|
||
|
||
@media (max-width: 431px) {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
max-width: 107px;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&__item {
|
||
position: relative;
|
||
width: 200px;
|
||
height: 205px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
backdrop-filter: blur(3px);
|
||
box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
|
||
background: linear-gradient(
|
||
137deg,
|
||
rgba(87, 87, 87, 0.34) 0%,
|
||
rgba(104, 104, 104, 0.34) 100%
|
||
);
|
||
border: 0.5px solid #717171;
|
||
border-radius: 8px;
|
||
|
||
@media (max-width: 431px) {
|
||
width: 200px;
|
||
height: 205px;
|
||
}
|
||
|
||
.item {
|
||
&__info {
|
||
font-size: 15px;
|
||
font-weight: 300;
|
||
line-height: 19.65px;
|
||
color: #dddddd;
|
||
max-width: 148px;
|
||
|
||
@media (max-width: 431px) {
|
||
font-size: 17px;
|
||
}
|
||
|
||
span {
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&__target {
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__invite {
|
||
background-color: #a7ca60;
|
||
position: relative;
|
||
|
||
.invite {
|
||
&__code {
|
||
position: absolute;
|
||
mix-blend-mode: plus-lighter;
|
||
bottom: 10px;
|
||
right: 12%;
|
||
}
|
||
|
||
&__container {
|
||
padding-top: 84px;
|
||
height: 582px;
|
||
overflow: hidden;
|
||
column-gap: 133px;
|
||
|
||
@media (max-width: 431px) {
|
||
height: auto;
|
||
padding-top: 35px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
&__info {
|
||
max-width: 541px;
|
||
|
||
@media (max-width: 431px) {
|
||
max-width: 377px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
h5 {
|
||
color: #607536;
|
||
font-size: 44px;
|
||
font-weight: 700;
|
||
line-height: 51.04px;
|
||
|
||
@media (max-width: 431px) {
|
||
font-size: 29px;
|
||
line-height: 33.64px;
|
||
}
|
||
}
|
||
|
||
p {
|
||
color: #607536;
|
||
margin: 39px 0 64px 0;
|
||
font-size: 17px;
|
||
font-weight: 300;
|
||
line-height: 19.72px;
|
||
|
||
@media (max-width: 431px) {
|
||
margin: 30px 0 22px 0;
|
||
}
|
||
|
||
span {
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-auth__buttons {
|
||
display: flex;
|
||
column-gap: 29px;
|
||
|
||
@media (max-width: 431px) {
|
||
flex-direction: column;
|
||
row-gap: 22px;
|
||
}
|
||
|
||
button {
|
||
width: 185px;
|
||
height: 45px;
|
||
border-radius: 50px;
|
||
font-size: 17px;
|
||
font-weight: 500;
|
||
line-height: 19.72px;
|
||
}
|
||
|
||
.signIn {
|
||
a {
|
||
color: #607536;
|
||
}
|
||
background-color: #ffffff;
|
||
border: none;
|
||
|
||
@media (max-width: 431px) {
|
||
display: none;
|
||
}
|
||
|
||
&-modile {
|
||
a {
|
||
color: #607536;
|
||
}
|
||
background-color: #ffffff;
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.signUp {
|
||
a {
|
||
color: #ffffff;
|
||
}
|
||
border: 1px solid #ffffff;
|
||
background: none;
|
||
|
||
@media (max-width: 431px) {
|
||
display: none;
|
||
}
|
||
|
||
&-modile {
|
||
a {
|
||
color: #ffffff;
|
||
}
|
||
border: 1px solid #ffffff;
|
||
background: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__logo {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
align-items: center;
|
||
|
||
@media (max-width: 431px) {
|
||
flex-direction: row;
|
||
padding-left: 18px;
|
||
column-gap: 18px;
|
||
}
|
||
|
||
h3 {
|
||
color: #ffffff;
|
||
font-family: "Geraspoheko";
|
||
font-size: 343px;
|
||
font-weight: 400;
|
||
line-height: 325.92px;
|
||
z-index: 3;
|
||
position: relative;
|
||
|
||
@media (max-width: 431px) {
|
||
font-size: 140px;
|
||
font-weight: 400;
|
||
line-height: 140px;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
&__sign {
|
||
position: absolute;
|
||
z-index: 2;
|
||
left: -180px;
|
||
top: 70px;
|
||
|
||
@media (max-width: 431px) {
|
||
width: 90px;
|
||
left: -40px;
|
||
top: 50px;
|
||
}
|
||
}
|
||
|
||
&__ellipse {
|
||
position: absolute;
|
||
width: 463px;
|
||
height: 563px;
|
||
z-index: 1;
|
||
|
||
@media (max-width: 431px) {
|
||
width: 220px;
|
||
height: 220px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&__nav {
|
||
background-color: #eeeeee;
|
||
position: relative;
|
||
|
||
.nav {
|
||
&__code {
|
||
position: absolute;
|
||
mix-blend-mode: plus-lighter;
|
||
bottom: 10px;
|
||
right: 12%;
|
||
}
|
||
|
||
&__container {
|
||
padding-top: 49px;
|
||
height: 638px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
@media (max-width: 431px) {
|
||
height: 1170px;
|
||
}
|
||
}
|
||
|
||
&__project {
|
||
padding: 0 55px;
|
||
display: flex;
|
||
column-gap: 80px;
|
||
height: 142px;
|
||
align-items: center;
|
||
border-radius: 8px;
|
||
border: 1px solid #f8f8f8;
|
||
|
||
@media (max-width: 431px) {
|
||
align-items: normal;
|
||
flex-direction: column;
|
||
row-gap: 32px;
|
||
height: 266px;
|
||
max-width: 397px;
|
||
padding: 32px 30px;
|
||
}
|
||
|
||
.project__img {
|
||
border-radius: 8px;
|
||
width: 99px;
|
||
height: 81px;
|
||
background: #a7ca60;
|
||
position: relative;
|
||
|
||
img {
|
||
position: relative;
|
||
}
|
||
|
||
.flag {
|
||
bottom: 21px;
|
||
right: -10px;
|
||
}
|
||
}
|
||
|
||
p {
|
||
color: #717171;
|
||
font-size: 17px;
|
||
font-weight: 300;
|
||
line-height: 21.59px;
|
||
letter-spacing: 0.02em;
|
||
|
||
span {
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__title {
|
||
color: #4a4a4a;
|
||
font-size: 46px;
|
||
font-weight: 900;
|
||
line-height: 53.36px;
|
||
letter-spacing: 0.03em;
|
||
text-align: center;
|
||
margin: 42px 0 77px 0;
|
||
|
||
@media (max-width: 431px) {
|
||
font-size: 19px;
|
||
line-height: 22.04px;
|
||
}
|
||
}
|
||
|
||
&__opportunities {
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
||
|
||
@media (max-width: 431px) {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
column-gap: 20px;
|
||
row-gap: 19px;
|
||
width: 100%;
|
||
margin: 0 0 86px 0;
|
||
}
|
||
}
|
||
|
||
&__opportunity {
|
||
width: 320px;
|
||
height: 91px;
|
||
padding-left: 55px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
@media (max-width: 431px) {
|
||
padding: 0;
|
||
width: 40%;
|
||
height: auto;
|
||
display: block;
|
||
|
||
div {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: linear-gradient(
|
||
95.54deg,
|
||
#ffffff 5.13%,
|
||
#f1f1f1 97.48%
|
||
);
|
||
border: 0.5px solid #ffffff;
|
||
border-radius: 18px;
|
||
padding: 10px;
|
||
height: 221px;
|
||
}
|
||
}
|
||
|
||
p {
|
||
font-weight: 500;
|
||
font-size: 20px;
|
||
line-height: 21.4px;
|
||
color: #838383;
|
||
|
||
@media (max-width: 431px) {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 14.12px;
|
||
text-align: center;
|
||
min-height: 55px;
|
||
}
|
||
}
|
||
|
||
img {
|
||
display: none;
|
||
position: absolute;
|
||
right: -130px;
|
||
bottom: -15px;
|
||
|
||
@media (max-width: 431px) {
|
||
display: block;
|
||
position: relative;
|
||
right: auto;
|
||
bottom: auto;
|
||
}
|
||
}
|
||
@media (max-width: 431px) {
|
||
&:hover {
|
||
p {
|
||
font-weight: 700;
|
||
color: rgba(74, 74, 74, 1);
|
||
max-width: 165px;
|
||
|
||
span {
|
||
color: rgba(167, 202, 96, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
@media (min-width: 432px) {
|
||
&:hover {
|
||
border-right: 1px solid rgba(245, 245, 245, 1);
|
||
border-bottom: 1px solid rgba(245, 245, 245, 1);
|
||
background: linear-gradient(
|
||
95.54deg,
|
||
#ffffff 5.13%,
|
||
#eeeeee 97.48%
|
||
);
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
p {
|
||
font-weight: 700;
|
||
color: rgba(74, 74, 74, 1);
|
||
min-width: 167px;
|
||
|
||
span {
|
||
color: rgba(167, 202, 96, 1);
|
||
}
|
||
}
|
||
img {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&__opportunity:nth-child(-n + 3) {
|
||
border-bottom: 1px solid rgba(245, 245, 245, 1);
|
||
}
|
||
|
||
&__opportunity:nth-child(-n + 2) {
|
||
border-right: 1px solid rgba(245, 245, 245, 1);
|
||
}
|
||
|
||
&__opportunity:nth-child(4) {
|
||
border-right: 1px solid rgba(245, 245, 245, 1);
|
||
}
|
||
|
||
&__opportunity:nth-child(5) {
|
||
border-right: 1px solid rgba(245, 245, 245, 1);
|
||
}
|
||
}
|
||
|
||
.outstaffing__offers {
|
||
padding: 10px 0 25px 10px;
|
||
cursor: pointer;
|
||
|
||
@media (max-width: 431px) {
|
||
padding: 0;
|
||
width: 40%;
|
||
}
|
||
|
||
div {
|
||
display: flex;
|
||
background: rgba(255, 255, 255, 1);
|
||
border-radius: 5px;
|
||
height: 91px;
|
||
padding: 24px 35px 24px 42px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
@media (max-width: 431px) {
|
||
height: 100%;
|
||
padding: 0;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
border-radius: 18px;
|
||
border: 0.5px solid #ffffff;
|
||
}
|
||
|
||
p {
|
||
color: rgba(167, 202, 96, 1);
|
||
font-weight: 500;
|
||
font-size: 20px;
|
||
line-height: 21.4px;
|
||
max-width: 215px;
|
||
|
||
@media (max-width: 431px) {
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
line-height: 17.12px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 27px;
|
||
height: 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|