style: changing and bringing the appearance to the figma

This commit is contained in:
Ignat Karelov
2026-04-23 23:07:35 +03:00
parent 020ba08ff1
commit 5f069b9801
15 changed files with 916 additions and 287 deletions

View File

@@ -135,7 +135,7 @@ img {
background: #cf1717;
color: #ffffff;
font-size: 16px;
font-weight: 700;
font-weight: 500;
line-height: 24px;
box-shadow: 0 25px 50px rgba(231, 0, 11, 0.5);
cursor: pointer;
@@ -210,7 +210,7 @@ img {
.hero__bg {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(18, 18, 18, 0.9) 0%, rgba(18, 18, 18, 0.7) 50%, rgba(0, 0, 0, 0) 100%), url("https://www.figma.com/api/mcp/asset/e5a37fb1-e23a-4258-855e-e6951519202d") center/cover no-repeat;
background: linear-gradient(90deg, rgba(18, 18, 18, 0.9) 0%, rgba(18, 18, 18, 0.7) 50%, rgba(0, 0, 0, 0) 100%), url("../images/other/section-main.webp") center/cover no-repeat;
}
.hero__bg::after {
content: "";
@@ -246,7 +246,7 @@ img {
max-width: 768px;
margin-bottom: 24px;
font-size: 72px;
font-weight: 800;
font-weight: 700;
line-height: 90px;
}
.hero h1 span {
@@ -287,7 +287,7 @@ img {
}
.highlights {
background: #293133;
background: linear-gradient(90deg, #293133, #20272a);
padding: 96px 0;
}
.highlights__grid {
@@ -331,7 +331,7 @@ img {
z-index: 1;
}
.section--pattern {
background: #1a2124;
background: #121212;
}
.section--pattern::before {
content: "";
@@ -358,7 +358,23 @@ img {
line-height: 1.15;
}
.advantages__grid {
.infrastructure {
background: linear-gradient(90deg, #293133 0%, #2f3b40 100%);
}
.infrastructure .section__head {
margin-bottom: 56px;
}
.infrastructure .section__head h2 {
font-size: 48px;
font-weight: 600;
line-height: 1.05;
}
.infrastructure .section__head p {
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
.infrastructure__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
@@ -369,37 +385,53 @@ img {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
position: relative;
min-height: 162px;
padding: 25px;
transition: transform 0.3s ease, border-color 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 238px;
padding: 32px 26px 30px;
text-align: center;
transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
border-color: rgba(207, 23, 23, 0.4);
border-color: rgba(207, 23, 23, 0.55);
background: rgba(18, 18, 18, 0.6);
}
.feature-card::before {
content: "";
.feature-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: 18px;
border-radius: 18px;
background: #cf1717;
color: #ffffff;
box-shadow: 0 12px 24px rgba(231, 0, 11, 0.5);
}
.feature-card__icon svg {
width: 32px;
height: 32px;
display: block;
width: 48px;
height: 48px;
margin-bottom: 16px;
border: 1px solid rgba(207, 23, 23, 0.32);
border-radius: 14px;
background: rgba(207, 23, 23, 0.16);
}
.feature-card h3 {
margin-bottom: 8px;
font-size: 20px;
margin-bottom: 10px;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
.feature-card p {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
line-height: 1.4;
line-height: 1.3;
}
.objects {
background-image: url(../images/bg-pattern.svg);
background-position: center;
}
.objects .section__head {
margin-bottom: 64px;
}
@@ -480,55 +512,66 @@ img {
}
.services {
background: #293133;
background: #121212;
background-image: url(../images/bg-pattern.svg);
background-position: center;
}
.services .section__head {
margin-bottom: 52px;
}
.services .section__head h2 {
font-size: 48px;
line-height: 1.05;
}
.services .section__head p {
font-size: 20px;
line-height: 1.2;
}
.services__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
width: 100%;
max-width: 896px;
margin: 0 auto;
}
.services__cta {
margin-top: 48px;
text-align: center;
}
.services__cta-btn {
width: min(100%, 560px);
min-height: 60px;
padding: 16px 26px;
font-size: 18px;
line-height: 1.2;
box-shadow: 0 18px 34px rgba(231, 0, 11, 0.45);
}
.service-card {
background: rgba(18, 18, 18, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
min-height: 260px;
padding: 33px;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.service-card:hover {
transform: translateY(-6px);
border-color: rgba(207, 23, 23, 0.45);
}
.service-card h3 {
margin-bottom: 12px;
font-size: 24px;
align-items: center;
justify-content: center;
min-height: 72px;
padding: 12px 18px;
border: 1px solid rgba(207, 23, 23, 0.45);
border-radius: 16px;
background: #1d252b;
color: #ffffff;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
text-align: center;
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.service-card p {
margin-bottom: auto;
color: rgba(255, 255, 255, 0.7);
font-size: 18px;
line-height: 28px;
}
.service-card a {
display: inline-flex;
width: fit-content;
margin-top: 20px;
padding: 10px 20px;
border-radius: 14px;
background: #cf1717;
font-size: 14px;
font-weight: 700;
line-height: 20px;
.service-card:hover {
transform: translateY(-3px);
border-color: rgba(207, 23, 23, 0.75);
background: #222c33;
}
.gallery {
background: #1b2225;
background: linear-gradient(90deg, #293133, #20272a);
}
.gallery__grid {
display: grid;
@@ -550,7 +593,9 @@ img {
}
.reviews {
background: #1a2023;
background: #121212;
background-image: url(../images/bg-pattern.svg);
background-position: center;
}
.reviews__grid {
display: grid;
@@ -626,7 +671,7 @@ img {
}
.booking {
background: #1b2225;
background: linear-gradient(90deg, #293133, #20272a);
}
.booking__wrap {
display: grid;
@@ -637,13 +682,13 @@ img {
margin-bottom: 24px;
font-size: 48px;
font-weight: 600;
line-height: 1.1;
line-height: 1.02;
}
.booking p {
margin-bottom: 32px;
color: rgba(255, 255, 255, 0.8);
font-size: 18px;
line-height: 1.45;
font-size: 16px;
line-height: 1.4;
}
.booking form {
display: flex;
@@ -652,13 +697,13 @@ img {
}
.booking form .btn {
width: 100%;
height: 56px;
height: 60px;
margin-top: 4px;
padding: 0 24px;
}
.booking input {
width: 100%;
height: 58px;
height: 72px;
padding: 0 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
@@ -668,7 +713,10 @@ img {
line-height: 18px;
}
.booking input::placeholder {
color: rgba(255, 255, 255, 0.75);
color: rgba(255, 255, 255, 0.45);
}
.booking input {
outline: none;
}
.contacts-card,
@@ -690,73 +738,98 @@ img {
margin-bottom: 32px;
}
.contacts-card h3 {
margin-bottom: 24px;
margin-bottom: 30px;
font-size: 24px;
font-weight: 700;
line-height: 1.2;
font-weight: 600;
line-height: 1.05;
}
.contacts-card ul {
display: flex;
flex-direction: column;
gap: 18px;
}
.contacts-card li {
display: flex;
align-items: flex-start;
gap: 16px;
}
.contacts-card li strong {
.contacts-card__icon {
flex: 0 0 24px;
width: 24px;
height: 24px;
margin-top: 2px;
}
.contacts-card__icon svg {
width: 24px;
height: 24px;
display: block;
}
.contacts-card__item-content strong {
display: block;
margin-bottom: 8px;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
font-weight: 600;
line-height: 1.1;
}
.contacts-card li span {
.contacts-card__item-content span {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
line-height: 1.5;
line-height: 1.45;
}
.hours-card h4 {
margin-bottom: 16px;
font-size: 16px;
font-weight: 700;
font-weight: 600;
line-height: 1.2;
}
.hours-card p {
margin: 0;
font-size: 16px;
line-height: 1.2;
line-height: 1.25;
}
.footer {
border-top: 1px solid rgba(207, 23, 23, 0.1);
background: #121212;
padding: 49px 0;
background: #090a0f;
padding: 64px 0 20px;
}
.footer__top {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
margin-bottom: 32px;
grid-template-columns: 1.45fr 1fr 1.15fr 1fr;
gap: 36px;
margin-bottom: 48px;
}
.footer__col h4 {
.footer__brand p {
max-width: 286px;
margin-top: 16px;
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
line-height: 1.28;
}
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
margin-bottom: 16px;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
font-weight: 600;
line-height: 1.1;
}
.footer__col p,
.footer__col span,
.footer__col a {
.footer__nav a, .footer__contacts a, .footer__social a {
display: block;
color: rgba(255, 255, 255, 0.8);
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
line-height: 1.3;
line-height: 1.35;
}
.footer__col p {
margin-top: 16px;
line-height: 1.4;
.footer__nav span, .footer__contacts span, .footer__social span {
display: block;
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
line-height: 1.35;
}
.footer__col a + a,
.footer__col span + span {
margin-top: 8px;
.footer__nav a + a,
.footer__nav span + span, .footer__contacts a + a,
.footer__contacts span + span, .footer__social a + a,
.footer__social span + span {
margin-top: 10px;
}
.footer__socials {
display: flex;
@@ -766,36 +839,41 @@ img {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.1);
width: 58px;
height: 58px;
border: 1px solid rgba(207, 23, 23, 0.5);
border-radius: 10px;
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
margin-top: 0 !important;
}
.footer__socials a svg {
width: 24px;
height: 24px;
display: block;
}
.footer__socials a:hover {
transform: translateY(-2px);
border-color: rgba(207, 23, 23, 0.5);
border-color: rgba(207, 23, 23, 0.85);
background: rgba(207, 23, 23, 0.15);
}
.footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 24px;
gap: 24px;
border-top: 1px solid rgba(207, 23, 23, 0.35);
padding-top: 30px;
}
.footer__bottom span,
.footer__bottom a {
color: rgba(255, 255, 255, 0.7);
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
line-height: 1.3;
}
.footer__bottom div {
.footer__legal {
display: flex;
gap: 24px;
gap: 34px;
}
@media only screen and (max-width: 1600px) {
@@ -836,7 +914,35 @@ img {
font-size: 30px;
}
.booking h2 {
font-size: 42px;
font-size: 48px;
}
.contacts-card h3 {
font-size: 24px;
}
.contacts-card__item-content strong {
font-size: 16px;
}
.hours-card h4 {
font-size: 16px;
}
.hours-card p {
font-size: 16px;
}
.footer__brand p {
font-size: 28px;
}
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
font-size: 16px;
}
.footer__nav a,
.footer__nav span, .footer__contacts a,
.footer__contacts span, .footer__social a,
.footer__social span {
font-size: 14px;
}
.footer__bottom span,
.footer__bottom a {
font-size: 14px;
}
}
@media only screen and (max-width: 1024px) {
@@ -867,14 +973,17 @@ img {
flex-wrap: wrap;
}
.highlights__grid,
.advantages__grid,
.services__grid,
.gallery__grid,
.reviews__grid,
.stats,
.footer__top {
.footer__top,
.infrastructure__grid,
.services__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.services__grid {
max-width: none;
}
.object-card,
.booking__wrap {
grid-template-columns: 1fr;
@@ -902,6 +1011,29 @@ img {
flex-direction: column;
align-items: flex-start;
}
.footer__top {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.footer__brand p {
font-size: 22px;
margin-top: 18px;
}
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
font-size: 30px;
margin-bottom: 16px;
}
.footer__nav a,
.footer__nav span, .footer__contacts a,
.footer__contacts span, .footer__social a,
.footer__social span {
font-size: 22px;
line-height: 1.32;
}
.footer__bottom span,
.footer__bottom a {
font-size: 14px;
}
}
@media only screen and (max-width: 768px) {
.container {
@@ -939,20 +1071,67 @@ img {
line-height: 1.3;
}
.highlights__grid,
.advantages__grid,
.services__grid,
.gallery__grid,
.reviews__grid,
.stats,
.footer__top,
.booking__contacts {
.booking__contacts,
.infrastructure__grid,
.services__grid {
grid-template-columns: 1fr;
}
.feature-card h3,
.object-card__content h3,
.service-card h3,
.booking h2 {
font-size: 28px;
font-size: 24px;
}
.booking input {
height: 60px;
}
.contacts-card h3 {
font-size: 34px;
margin-bottom: 18px;
}
.contacts-card__item-content strong {
font-size: 16px;
}
.contacts-card__item-content span {
font-size: 16px;
}
.hours-card h4 {
font-size: 16px;
margin-bottom: 12px;
}
.hours-card p {
font-size: 16px;
}
.infrastructure .section__head h2,
.services .section__head h2 {
font-size: 38px;
}
.infrastructure .section__head p,
.services .section__head p {
font-size: 20px;
}
.service-card {
font-size: 17px;
}
.footer__brand p {
font-size: 16px;
max-width: 100%;
}
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
font-size: 16px;
}
.footer__nav a,
.footer__nav span, .footer__contacts a,
.footer__contacts span, .footer__social a,
.footer__social span {
font-size: 16px;
}
.footer__bottom span,
.footer__bottom a {
font-size: 14px;
}
.stats strong {
font-size: 40px;
@@ -990,7 +1169,6 @@ img {
}
.info-card,
.feature-card,
.service-card,
.review-card,
.stats article,
.contacts-card,
@@ -1001,10 +1179,25 @@ img {
.object-card__image {
min-height: 260px;
}
.footer__bottom div {
.service-card {
min-height: 64px;
font-size: 16px;
}
.services__cta-btn {
width: 100%;
font-size: 16px;
}
.footer__bottom .footer__legal {
flex-direction: column;
gap: 12px;
}
.footer__top {
gap: 20px;
}
.footer__socials a {
width: 50px;
height: 50px;
}
}
@media (prefers-reduced-motion: reduce) {
*,