Compare commits
2 Commits
020ba08ff1
...
1ec50bb142
| Author | SHA1 | Date | |
|---|---|---|---|
| 1ec50bb142 | |||
|
5f069b9801 |
@@ -135,7 +135,7 @@ img {
|
|||||||
background: #cf1717;
|
background: #cf1717;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 500;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
box-shadow: 0 25px 50px rgba(231, 0, 11, 0.5);
|
box-shadow: 0 25px 50px rgba(231, 0, 11, 0.5);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -210,7 +210,7 @@ img {
|
|||||||
.hero__bg {
|
.hero__bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
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 {
|
.hero__bg::after {
|
||||||
content: "";
|
content: "";
|
||||||
@@ -246,7 +246,7 @@ img {
|
|||||||
max-width: 768px;
|
max-width: 768px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
line-height: 90px;
|
line-height: 90px;
|
||||||
}
|
}
|
||||||
.hero h1 span {
|
.hero h1 span {
|
||||||
@@ -287,7 +287,7 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.highlights {
|
.highlights {
|
||||||
background: #293133;
|
background: linear-gradient(90deg, #293133, #20272a);
|
||||||
padding: 96px 0;
|
padding: 96px 0;
|
||||||
}
|
}
|
||||||
.highlights__grid {
|
.highlights__grid {
|
||||||
@@ -331,7 +331,7 @@ img {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.section--pattern {
|
.section--pattern {
|
||||||
background: #1a2124;
|
background: #121212;
|
||||||
}
|
}
|
||||||
.section--pattern::before {
|
.section--pattern::before {
|
||||||
content: "";
|
content: "";
|
||||||
@@ -358,7 +358,23 @@ img {
|
|||||||
line-height: 1.15;
|
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;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
@@ -369,37 +385,53 @@ img {
|
|||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
position: relative;
|
display: flex;
|
||||||
min-height: 162px;
|
flex-direction: column;
|
||||||
padding: 25px;
|
align-items: center;
|
||||||
transition: transform 0.3s ease, border-color 0.3s ease;
|
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 {
|
.feature-card:hover {
|
||||||
transform: translateY(-5px);
|
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 {
|
.feature-card__icon {
|
||||||
content: "";
|
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;
|
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 {
|
.feature-card h3 {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 10px;
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
.feature-card p {
|
.feature-card p {
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
font-size: 16px;
|
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 {
|
.objects .section__head {
|
||||||
margin-bottom: 64px;
|
margin-bottom: 64px;
|
||||||
}
|
}
|
||||||
@@ -480,55 +512,66 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.services {
|
.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 {
|
.services__grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
gap: 24px;
|
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 {
|
.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;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
min-height: 260px;
|
justify-content: center;
|
||||||
padding: 33px;
|
min-height: 72px;
|
||||||
transition: transform 0.3s ease, border-color 0.3s ease;
|
padding: 12px 18px;
|
||||||
}
|
border: 1px solid rgba(207, 23, 23, 0.45);
|
||||||
.service-card:hover {
|
border-radius: 16px;
|
||||||
transform: translateY(-6px);
|
background: #1d252b;
|
||||||
border-color: rgba(207, 23, 23, 0.45);
|
color: #ffffff;
|
||||||
}
|
font-size: 18px;
|
||||||
.service-card h3 {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1.2;
|
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 {
|
.service-card:hover {
|
||||||
margin-bottom: auto;
|
transform: translateY(-3px);
|
||||||
color: rgba(255, 255, 255, 0.7);
|
border-color: rgba(207, 23, 23, 0.75);
|
||||||
font-size: 18px;
|
background: #222c33;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery {
|
.gallery {
|
||||||
background: #1b2225;
|
background: linear-gradient(90deg, #293133, #20272a);
|
||||||
}
|
}
|
||||||
.gallery__grid {
|
.gallery__grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -550,7 +593,9 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.reviews {
|
.reviews {
|
||||||
background: #1a2023;
|
background: #121212;
|
||||||
|
background-image: url(../images/bg-pattern.svg);
|
||||||
|
background-position: center;
|
||||||
}
|
}
|
||||||
.reviews__grid {
|
.reviews__grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -626,7 +671,7 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.booking {
|
.booking {
|
||||||
background: #1b2225;
|
background: linear-gradient(90deg, #293133, #20272a);
|
||||||
}
|
}
|
||||||
.booking__wrap {
|
.booking__wrap {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -637,13 +682,13 @@ img {
|
|||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.1;
|
line-height: 1.02;
|
||||||
}
|
}
|
||||||
.booking p {
|
.booking p {
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
line-height: 1.45;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
.booking form {
|
.booking form {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -652,13 +697,13 @@ img {
|
|||||||
}
|
}
|
||||||
.booking form .btn {
|
.booking form .btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 56px;
|
height: 60px;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
}
|
}
|
||||||
.booking input {
|
.booking input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 58px;
|
height: 72px;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
@@ -668,7 +713,10 @@ img {
|
|||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
.booking input::placeholder {
|
.booking input::placeholder {
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: rgba(255, 255, 255, 0.45);
|
||||||
|
}
|
||||||
|
.booking input {
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contacts-card,
|
.contacts-card,
|
||||||
@@ -690,73 +738,98 @@ img {
|
|||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
}
|
}
|
||||||
.contacts-card h3 {
|
.contacts-card h3 {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 30px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
line-height: 1.2;
|
line-height: 1.05;
|
||||||
}
|
}
|
||||||
.contacts-card ul {
|
.contacts-card ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
.contacts-card li {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
gap: 16px;
|
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;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
line-height: 1.2;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
.contacts-card li span {
|
.contacts-card__item-content span {
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.5;
|
line-height: 1.45;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hours-card h4 {
|
.hours-card h4 {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
.hours-card p {
|
.hours-card p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.2;
|
line-height: 1.25;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
border-top: 1px solid rgba(207, 23, 23, 0.1);
|
border-top: 1px solid rgba(207, 23, 23, 0.1);
|
||||||
background: #121212;
|
background: #090a0f;
|
||||||
padding: 49px 0;
|
padding: 64px 0 20px;
|
||||||
}
|
}
|
||||||
.footer__top {
|
.footer__top {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
grid-template-columns: 1.45fr 1fr 1.15fr 1fr;
|
||||||
gap: 32px;
|
gap: 36px;
|
||||||
margin-bottom: 32px;
|
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;
|
margin-bottom: 16px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
line-height: 1.2;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
.footer__col p,
|
.footer__nav a, .footer__contacts a, .footer__social a {
|
||||||
.footer__col span,
|
|
||||||
.footer__col a {
|
|
||||||
display: block;
|
display: block;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.65);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.3;
|
line-height: 1.35;
|
||||||
}
|
}
|
||||||
.footer__col p {
|
.footer__nav span, .footer__contacts span, .footer__social span {
|
||||||
margin-top: 16px;
|
display: block;
|
||||||
line-height: 1.4;
|
color: rgba(255, 255, 255, 0.65);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.35;
|
||||||
}
|
}
|
||||||
.footer__col a + a,
|
.footer__nav a + a,
|
||||||
.footer__col span + span {
|
.footer__nav span + span, .footer__contacts a + a,
|
||||||
margin-top: 8px;
|
.footer__contacts span + span, .footer__social a + a,
|
||||||
|
.footer__social span + span {
|
||||||
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
.footer__socials {
|
.footer__socials {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -766,36 +839,41 @@ img {
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 40px;
|
width: 58px;
|
||||||
height: 40px;
|
height: 58px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(207, 23, 23, 0.5);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 14px;
|
color: rgba(255, 255, 255, 0.92);
|
||||||
font-weight: 700;
|
|
||||||
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
|
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 {
|
.footer__socials a:hover {
|
||||||
transform: translateY(-2px);
|
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);
|
background: rgba(207, 23, 23, 0.15);
|
||||||
}
|
}
|
||||||
.footer__bottom {
|
.footer__bottom {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 16px;
|
gap: 24px;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
border-top: 1px solid rgba(207, 23, 23, 0.35);
|
||||||
padding-top: 24px;
|
padding-top: 30px;
|
||||||
}
|
}
|
||||||
.footer__bottom span,
|
.footer__bottom span,
|
||||||
.footer__bottom a {
|
.footer__bottom a {
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.4);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
.footer__bottom div {
|
.footer__legal {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 24px;
|
gap: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1600px) {
|
@media only screen and (max-width: 1600px) {
|
||||||
@@ -836,7 +914,35 @@ img {
|
|||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
.booking h2 {
|
.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) {
|
@media only screen and (max-width: 1024px) {
|
||||||
@@ -867,14 +973,17 @@ img {
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.highlights__grid,
|
.highlights__grid,
|
||||||
.advantages__grid,
|
|
||||||
.services__grid,
|
|
||||||
.gallery__grid,
|
.gallery__grid,
|
||||||
.reviews__grid,
|
.reviews__grid,
|
||||||
.stats,
|
.stats,
|
||||||
.footer__top {
|
.footer__top,
|
||||||
|
.infrastructure__grid,
|
||||||
|
.services__grid {
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
.services__grid {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
.object-card,
|
.object-card,
|
||||||
.booking__wrap {
|
.booking__wrap {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
@@ -902,6 +1011,29 @@ img {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
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) {
|
@media only screen and (max-width: 768px) {
|
||||||
.container {
|
.container {
|
||||||
@@ -939,20 +1071,67 @@ img {
|
|||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
.highlights__grid,
|
.highlights__grid,
|
||||||
.advantages__grid,
|
|
||||||
.services__grid,
|
|
||||||
.gallery__grid,
|
.gallery__grid,
|
||||||
.reviews__grid,
|
.reviews__grid,
|
||||||
.stats,
|
.stats,
|
||||||
.footer__top,
|
.footer__top,
|
||||||
.booking__contacts {
|
.booking__contacts,
|
||||||
|
.infrastructure__grid,
|
||||||
|
.services__grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
.feature-card h3,
|
.feature-card h3,
|
||||||
.object-card__content h3,
|
.object-card__content h3,
|
||||||
.service-card h3,
|
|
||||||
.booking h2 {
|
.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 {
|
.stats strong {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
@@ -990,7 +1169,6 @@ img {
|
|||||||
}
|
}
|
||||||
.info-card,
|
.info-card,
|
||||||
.feature-card,
|
.feature-card,
|
||||||
.service-card,
|
|
||||||
.review-card,
|
.review-card,
|
||||||
.stats article,
|
.stats article,
|
||||||
.contacts-card,
|
.contacts-card,
|
||||||
@@ -1001,10 +1179,25 @@ img {
|
|||||||
.object-card__image {
|
.object-card__image {
|
||||||
min-height: 260px;
|
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;
|
flex-direction: column;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
.footer__top {
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.footer__socials a {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
*,
|
*,
|
||||||
|
|||||||
2
assets/css/main.min.css
vendored
2
assets/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
40
assets/images/bg-pattern.svg
Normal file
40
assets/images/bg-pattern.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 357 KiB |
9
assets/images/logo.svg
Normal file
9
assets/images/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
BIN
assets/images/other/_tmp_infra.png
Normal file
BIN
assets/images/other/_tmp_infra.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
assets/images/other/_tmp_services.png
Normal file
BIN
assets/images/other/_tmp_services.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
assets/images/other/booking-section.webp
Normal file
BIN
assets/images/other/booking-section.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
assets/images/other/footer-section.webp
Normal file
BIN
assets/images/other/footer-section.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
assets/images/other/infrastructure-section.webp
Normal file
BIN
assets/images/other/infrastructure-section.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
assets/images/other/section-main.webp
Normal file
BIN
assets/images/other/section-main.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
assets/images/other/services-section.webp
Normal file
BIN
assets/images/other/services-section.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
46
assets/images/svg-sprites.svg
Normal file
46
assets/images/svg-sprites.svg
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
|
||||||
|
<symbol id="icon-complex" viewBox="0 0 32 32" fill="none">
|
||||||
|
<path d="M20 28V17.3333C20 16.9797 19.8595 16.6406 19.6095 16.3905C19.3594 16.1405 19.0203 16 18.6667 16H13.3333C12.9797 16 12.6406 16.1405 12.3905 16.3905C12.1405 16.6406 12 16.9797 12 17.3333V28" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M4 13.3335C3.99991 12.9455 4.08445 12.5623 4.24772 12.2104C4.41099 11.8585 4.64906 11.5465 4.94533 11.2961L14.2787 3.29745C14.76 2.89067 15.3698 2.66748 16 2.66748C16.6302 2.66748 17.24 2.89067 17.7213 3.29745L27.0547 11.2961C27.3509 11.5465 27.589 11.8585 27.7523 12.2104C27.9156 12.5623 28.0001 12.9455 28 13.3335V25.3335C28 26.0407 27.719 26.719 27.219 27.2191C26.7189 27.7192 26.0406 28.0001 25.3333 28.0001H6.66667C5.95942 28.0001 5.28115 27.7192 4.78105 27.2191C4.28095 26.719 4 26.0407 4 25.3335V13.3335Z" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="icon-restaurant" viewBox="0 0 32 32" fill="none">
|
||||||
|
<path d="M4 2.6665V11.9998C4 13.4665 5.2 14.6665 6.66667 14.6665H12C12.7072 14.6665 13.3855 14.3856 13.8856 13.8855C14.3857 13.3854 14.6667 12.7071 14.6667 11.9998V2.6665" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M9.33331 2.6665V29.3332" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M28 19.9998V2.6665C26.2319 2.6665 24.5362 3.36888 23.2859 4.61913C22.0357 5.86937 21.3333 7.56506 21.3333 9.33317V17.3332C21.3333 18.7998 22.5333 19.9998 24 19.9998H28ZM28 19.9998V29.3332" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="icon-changingrooms" viewBox="0 0 32 32" fill="none">
|
||||||
|
<path d="M20.636 17.1865L22.656 28.5545C22.6787 28.6884 22.6599 28.826 22.6022 28.9489C22.5445 29.0718 22.4507 29.1741 22.3333 29.2423C22.2159 29.3104 22.0804 29.341 21.9451 29.3301C21.8098 29.3192 21.681 29.2673 21.576 29.1812L16.8027 25.5985C16.5723 25.4264 16.2923 25.3334 16.0047 25.3334C15.7171 25.3334 15.4371 25.4264 15.2067 25.5985L10.4254 29.1799C10.3205 29.2658 10.1919 29.3177 10.0567 29.3286C9.92154 29.3395 9.78626 29.309 9.66892 29.241C9.55157 29.1731 9.45774 29.071 9.39993 28.9483C9.34212 28.8256 9.32308 28.6883 9.34537 28.5545L11.364 17.1865" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M16 18.6665C20.4183 18.6665 24 15.0848 24 10.6665C24 6.24823 20.4183 2.6665 16 2.6665C11.5817 2.6665 8 6.24823 8 10.6665C8 15.0848 11.5817 18.6665 16 18.6665Z" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="icon-drying" viewBox="0 0 32 32" fill="none">
|
||||||
|
<path d="M13.3333 26.6668L11.6667 23.3335L8 24.0002" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M13.3333 5.3335L11.6667 8.66683L8 8.00016" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M18.6666 26.6668L20.3333 23.3335L24 24.0002" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M18.6666 5.3335L20.3333 8.66683L24 8.00016" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M22.6667 28L18.6667 20H13.3334" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M22.6666 4L18.6666 12L20.6666 16" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M2.66663 16H11.3333L13.3333 12" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M26.6666 13.3335L24.6666 16.0002L26.6666 18.6668" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M29.3333 16H20.6666L18.6666 20" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M5.33337 13.3335L7.33337 16.0002L5.33337 18.6668" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M9.33337 28L13.3334 20L11.3334 16" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M9.33337 4L13.3334 12H18.6667" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="icon-address" viewBox="0 0 24 24" fill="none">
|
||||||
|
<path d="M20 10C20 14.993 14.461 20.193 12.601 21.799C12.4277 21.9293 12.2168 21.9998 12 21.9998C11.7832 21.9998 11.5723 21.9293 11.399 21.799C9.539 20.193 4 14.993 4 10C4 7.87827 4.84285 5.84344 6.34315 4.34315C7.84344 2.84285 9.87827 2 12 2C14.1217 2 16.1566 2.84285 17.6569 4.34315C19.1571 5.84344 20 7.87827 20 10Z" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="icon-telephone" viewBox="0 0 24 24" fill="none">
|
||||||
|
<path d="M22 16.9201V19.9201C22.0011 20.1986 21.9441 20.4743 21.8325 20.7294C21.7209 20.9846 21.5573 21.2137 21.3521 21.402C21.1468 21.5902 20.9046 21.7336 20.6407 21.8228C20.3769 21.912 20.0974 21.9452 19.82 21.9201C16.7428 21.5857 13.787 20.5342 11.19 18.8501C8.77382 17.3148 6.72533 15.2663 5.18999 12.8501C3.49997 10.2413 2.44824 7.27109 2.11999 4.1801C2.095 3.90356 2.12787 3.62486 2.21649 3.36172C2.30512 3.09859 2.44756 2.85679 2.63476 2.65172C2.82196 2.44665 3.0498 2.28281 3.30379 2.17062C3.55777 2.05843 3.83233 2.00036 4.10999 2.0001H7.10999C7.5953 1.99532 8.06579 2.16718 8.43376 2.48363C8.80173 2.80008 9.04207 3.23954 9.10999 3.7201C9.23662 4.68016 9.47144 5.62282 9.80999 6.5301C9.94454 6.88802 9.97366 7.27701 9.8939 7.65098C9.81415 8.02494 9.62886 8.36821 9.35999 8.6401L8.08999 9.9101C9.51355 12.4136 11.5864 14.4865 14.09 15.9101L15.36 14.6401C15.6319 14.3712 15.9751 14.1859 16.3491 14.1062C16.7231 14.0264 17.1121 14.0556 17.47 14.1901C18.3773 14.5286 19.3199 14.7635 20.28 14.8901C20.7658 14.9586 21.2094 15.2033 21.5265 15.5776C21.8437 15.9519 22.0122 16.4297 22 16.9201Z" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="icon-email" viewBox="0 0 24 24" fill="none">
|
||||||
|
<path d="M20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4Z" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M22 7L13.03 12.7C12.7213 12.8934 12.3643 12.996 12 12.996C11.6357 12.996 11.2787 12.8934 10.97 12.7L2 7" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
@@ -13,8 +13,6 @@
|
|||||||
".booking__form",
|
".booking__form",
|
||||||
".contacts-card",
|
".contacts-card",
|
||||||
".hours-card",
|
".hours-card",
|
||||||
".footer__col",
|
|
||||||
".footer__bottom"
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const elements = Array.from(document.querySelectorAll(selectors.join(",")));
|
const elements = Array.from(document.querySelectorAll(selectors.join(",")));
|
||||||
|
|||||||
@@ -81,7 +81,7 @@ img {
|
|||||||
background: $color-accent;
|
background: $color-accent;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 500;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
box-shadow: $shadow-accent;
|
box-shadow: $shadow-accent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -167,7 +167,7 @@ img {
|
|||||||
inset: 0;
|
inset: 0;
|
||||||
background:
|
background:
|
||||||
linear-gradient(90deg, rgba(18, 18, 18, 0.9) 0%, rgba(18, 18, 18, 0.7) 50%, rgba(0, 0, 0, 0) 100%),
|
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;
|
url("../images/other/section-main.webp") center / cover no-repeat;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
@@ -213,7 +213,7 @@ img {
|
|||||||
max-width: 768px;
|
max-width: 768px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
line-height: 90px;
|
line-height: 90px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
@@ -261,7 +261,7 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.highlights {
|
.highlights {
|
||||||
background: $color-surface;
|
background: linear-gradient(90deg, $color-surface, $color-surface-2);
|
||||||
padding: 96px 0;
|
padding: 96px 0;
|
||||||
|
|
||||||
&__grid {
|
&__grid {
|
||||||
@@ -307,7 +307,7 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&--pattern {
|
&--pattern {
|
||||||
background: #1a2124;
|
background: $color-bg;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
@@ -341,7 +341,25 @@ img {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.advantages {
|
.infrastructure {
|
||||||
|
background: linear-gradient(90deg, #293133 0%, #2f3b40 100%);
|
||||||
|
|
||||||
|
.section__head {
|
||||||
|
margin-bottom: 56px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.05;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__grid {
|
&__grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
@@ -351,30 +369,43 @@ img {
|
|||||||
|
|
||||||
.feature-card {
|
.feature-card {
|
||||||
@include card;
|
@include card;
|
||||||
position: relative;
|
display: flex;
|
||||||
min-height: 162px;
|
flex-direction: column;
|
||||||
padding: 25px;
|
align-items: center;
|
||||||
transition: transform 0.3s ease, border-color 0.3s ease;
|
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;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: translateY(-5px);
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&__icon {
|
||||||
content: "";
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
border-radius: 18px;
|
||||||
|
background: $color-accent;
|
||||||
|
color: $color-text;
|
||||||
|
box-shadow: 0 12px 24px rgba(231, 0, 11, 0.5);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
display: block;
|
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 10px;
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
@@ -382,11 +413,13 @@ img {
|
|||||||
p {
|
p {
|
||||||
color: $color-text-muted;
|
color: $color-text-muted;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.4;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.objects {
|
.objects {
|
||||||
|
background-image: url(../images/bg-pattern.svg);
|
||||||
|
background-position: center;
|
||||||
.section__head {
|
.section__head {
|
||||||
margin-bottom: 64px;
|
margin-bottom: 64px;
|
||||||
}
|
}
|
||||||
@@ -482,57 +515,73 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.services {
|
.services {
|
||||||
background: $color-surface;
|
background: $color-bg;
|
||||||
|
background-image: url(../images/bg-pattern.svg);
|
||||||
|
background-position: center;
|
||||||
|
|
||||||
|
.section__head {
|
||||||
|
margin-bottom: 52px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 48px;
|
||||||
|
line-height: 1.05;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__grid {
|
&__grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
gap: 24px;
|
gap: 18px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 896px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__cta {
|
||||||
|
margin-top: 48px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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 {
|
.service-card {
|
||||||
@include card;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
min-height: 260px;
|
justify-content: center;
|
||||||
padding: 33px;
|
min-height: 72px;
|
||||||
transition: transform 0.3s ease, border-color 0.3s ease;
|
padding: 12px 18px;
|
||||||
|
border: 1px solid rgba(207, 23, 23, 0.45);
|
||||||
&:hover {
|
border-radius: $radius-md;
|
||||||
transform: translateY(-6px);
|
background: #1d252b;
|
||||||
border-color: rgba(207, 23, 23, 0.45);
|
color: $color-text;
|
||||||
}
|
font-size: 18px;
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
text-align: center;
|
||||||
|
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
|
||||||
|
|
||||||
p {
|
&:hover {
|
||||||
margin-bottom: auto;
|
transform: translateY(-3px);
|
||||||
color: $color-text-muted;
|
border-color: rgba(207, 23, 23, 0.75);
|
||||||
font-size: 18px;
|
background: #222c33;
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: inline-flex;
|
|
||||||
width: fit-content;
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: $radius-sm;
|
|
||||||
background: $color-accent;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery {
|
.gallery {
|
||||||
background: #1b2225;
|
background: linear-gradient(90deg, $color-surface, $color-surface-2);
|
||||||
|
|
||||||
&__grid {
|
&__grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -557,7 +606,9 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.reviews {
|
.reviews {
|
||||||
background: #1a2023;
|
background: $color-bg;
|
||||||
|
background-image: url(../images/bg-pattern.svg);
|
||||||
|
background-position: center;
|
||||||
|
|
||||||
&__grid {
|
&__grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -636,7 +687,7 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.booking {
|
.booking {
|
||||||
background: #1b2225;
|
background: linear-gradient(90deg, $color-surface, $color-surface-2);
|
||||||
|
|
||||||
&__wrap {
|
&__wrap {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -648,14 +699,14 @@ img {
|
|||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.1;
|
line-height: 1.02;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
color: $color-text-soft;
|
color: $color-text-soft;
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
line-height: 1.45;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
@@ -665,7 +716,7 @@ img {
|
|||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 56px;
|
height: 60px;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
}
|
}
|
||||||
@@ -673,7 +724,7 @@ img {
|
|||||||
|
|
||||||
input {
|
input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 58px;
|
height: 72px;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
border: 1px solid $color-border;
|
border: 1px solid $color-border;
|
||||||
border-radius: $radius-sm;
|
border-radius: $radius-sm;
|
||||||
@@ -683,8 +734,10 @@ img {
|
|||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: rgba(255, 255, 255, 0.45);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -704,31 +757,50 @@ img {
|
|||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 30px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
line-height: 1.2;
|
line-height: 1.05;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
flex: 0 0 24px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin-top: 2px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item-content {
|
||||||
strong {
|
strong {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
line-height: 1.2;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color: $color-text-soft;
|
color: $color-text-soft;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.5;
|
line-height: 1.45;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -737,54 +809,66 @@ img {
|
|||||||
h4 {
|
h4 {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.2;
|
line-height: 1.25;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
border-top: 1px solid rgba(207, 23, 23, 0.1);
|
border-top: 1px solid rgba(207, 23, 23, 0.1);
|
||||||
background: #121212;
|
background: #090a0f;
|
||||||
padding: 49px 0;
|
padding: 64px 0 20px;
|
||||||
|
|
||||||
&__top {
|
&__top {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
grid-template-columns: 1.45fr 1fr 1.15fr 1fr;
|
||||||
gap: 32px;
|
gap: 36px;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__col {
|
&__brand {
|
||||||
|
p {
|
||||||
|
max-width: 286px;
|
||||||
|
margin-top: 16px;
|
||||||
|
color: rgba(255, 255, 255, 0.65);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.28;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__nav,
|
||||||
|
&__contacts,
|
||||||
|
&__social {
|
||||||
h4 {
|
h4 {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
line-height: 1.2;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
|
|
||||||
p,
|
|
||||||
span,
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
color: $color-text-soft;
|
color: rgba(255, 255, 255, 0.65);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.3;
|
line-height: 1.35;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
span {
|
||||||
margin-top: 16px;
|
display: block;
|
||||||
line-height: 1.4;
|
color: rgba(255, 255, 255, 0.65);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.35;
|
||||||
}
|
}
|
||||||
|
|
||||||
a + a,
|
a + a,
|
||||||
span + span {
|
span + span {
|
||||||
margin-top: 8px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -796,17 +880,23 @@ img {
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 40px;
|
width: 58px;
|
||||||
height: 40px;
|
height: 58px;
|
||||||
border: 1px solid $color-border;
|
border: 1px solid rgba(207, 23, 23, 0.5);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 14px;
|
color: rgba(255, 255, 255, 0.92);
|
||||||
font-weight: 700;
|
|
||||||
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
|
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
|
||||||
|
margin-top: 0 !important;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: translateY(-2px);
|
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);
|
background: rgba(207, 23, 23, 0.15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -816,21 +906,21 @@ img {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 16px;
|
gap: 24px;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
border-top: 1px solid rgba(207, 23, 23, 0.35);
|
||||||
padding-top: 24px;
|
padding-top: 30px;
|
||||||
|
|
||||||
span,
|
span,
|
||||||
a {
|
a {
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.4);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
|
||||||
display: flex;
|
|
||||||
gap: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__legal {
|
||||||
|
display: flex;
|
||||||
|
gap: 34px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -893,7 +983,55 @@ img {
|
|||||||
|
|
||||||
.booking {
|
.booking {
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 42px;
|
font-size: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contacts-card {
|
||||||
|
h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item-content {
|
||||||
|
strong {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hours-card {
|
||||||
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
&__brand p {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__nav,
|
||||||
|
&__contacts,
|
||||||
|
&__social {
|
||||||
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bottom {
|
||||||
|
span,
|
||||||
|
a {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -935,15 +1073,19 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.highlights__grid,
|
.highlights__grid,
|
||||||
.advantages__grid,
|
|
||||||
.services__grid,
|
|
||||||
.gallery__grid,
|
.gallery__grid,
|
||||||
.reviews__grid,
|
.reviews__grid,
|
||||||
.stats,
|
.stats,
|
||||||
.footer__top {
|
.footer__top,
|
||||||
|
.infrastructure__grid,
|
||||||
|
.services__grid {
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.services__grid {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
.object-card,
|
.object-card,
|
||||||
.booking__wrap {
|
.booking__wrap {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
@@ -979,6 +1121,40 @@ img {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
&__top {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__brand p {
|
||||||
|
font-size: 22px;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__nav,
|
||||||
|
&__contacts,
|
||||||
|
&__social {
|
||||||
|
h4 {
|
||||||
|
font-size: 30px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
span {
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 1.32;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bottom {
|
||||||
|
span,
|
||||||
|
a {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include respond($bp-md) {
|
@include respond($bp-md) {
|
||||||
@@ -1033,21 +1209,95 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.highlights__grid,
|
.highlights__grid,
|
||||||
.advantages__grid,
|
|
||||||
.services__grid,
|
|
||||||
.gallery__grid,
|
.gallery__grid,
|
||||||
.reviews__grid,
|
.reviews__grid,
|
||||||
.stats,
|
.stats,
|
||||||
.footer__top,
|
.footer__top,
|
||||||
.booking__contacts {
|
.booking__contacts,
|
||||||
|
.infrastructure__grid,
|
||||||
|
.services__grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-card h3,
|
.feature-card h3,
|
||||||
.object-card__content h3,
|
.object-card__content h3,
|
||||||
.service-card h3,
|
|
||||||
.booking h2 {
|
.booking h2 {
|
||||||
font-size: 28px;
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.booking {
|
||||||
|
input {
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contacts-card {
|
||||||
|
h3 {
|
||||||
|
font-size: 34px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item-content {
|
||||||
|
strong {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hours-card {
|
||||||
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__nav,
|
||||||
|
&__contacts,
|
||||||
|
&__social {
|
||||||
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bottom {
|
||||||
|
span,
|
||||||
|
a {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats strong {
|
.stats strong {
|
||||||
@@ -1100,7 +1350,6 @@ img {
|
|||||||
|
|
||||||
.info-card,
|
.info-card,
|
||||||
.feature-card,
|
.feature-card,
|
||||||
.service-card,
|
|
||||||
.review-card,
|
.review-card,
|
||||||
.stats article,
|
.stats article,
|
||||||
.contacts-card,
|
.contacts-card,
|
||||||
@@ -1113,12 +1362,33 @@ img {
|
|||||||
min-height: 260px;
|
min-height: 260px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
min-height: 64px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services__cta-btn {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.footer__bottom {
|
.footer__bottom {
|
||||||
div {
|
.footer__legal {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
&__top {
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__socials a {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
|||||||
169
index.html
169
index.html
@@ -11,7 +11,7 @@
|
|||||||
<header class="header" id="top">
|
<header class="header" id="top">
|
||||||
<div class="container header__inner">
|
<div class="container header__inner">
|
||||||
<a class="logo" href="#top" aria-label="OlimpArena">
|
<a class="logo" href="#top" aria-label="OlimpArena">
|
||||||
<img src="https://www.figma.com/api/mcp/asset/8a836c8e-ef3b-4a4c-80e1-57e33b81f3f2" alt="OlimpArena">
|
<img src="./assets/images/logo.svg" alt="OlimpArena">
|
||||||
</a>
|
</a>
|
||||||
<nav class="header__nav" aria-label="Основная навигация">
|
<nav class="header__nav" aria-label="Основная навигация">
|
||||||
<a href="#objects">Объекты</a>
|
<a href="#objects">Объекты</a>
|
||||||
@@ -70,25 +70,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section section--pattern advantages">
|
|
||||||
<div class="container">
|
|
||||||
<header class="section__head">
|
|
||||||
<h2>Преимущества</h2>
|
|
||||||
<p>Всё для профессионального спорта и активного отдыха</p>
|
|
||||||
</header>
|
|
||||||
<div class="advantages__grid">
|
|
||||||
<article class="feature-card"><h3>Два ледовых поля</h3><p>Профессиональные поля 56×26 м</p></article>
|
|
||||||
<article class="feature-card"><h3>Универсальный зал</h3><p>Для любых тренировок</p></article>
|
|
||||||
<article class="feature-card"><h3>Фитнес-центр</h3><p>Новейшее оборудование</p></article>
|
|
||||||
<article class="feature-card"><h3>Зал хореографии</h3><p>Для фигуристов и танцоров</p></article>
|
|
||||||
<article class="feature-card"><h3>Зал единоборств</h3><p>Оборудованный татами</p></article>
|
|
||||||
<article class="feature-card"><h3>Апарт-комплекс</h3><p>150+ мест для спортсменов</p></article>
|
|
||||||
<article class="feature-card"><h3>Ресторан</h3><p>Спортивное питание</p></article>
|
|
||||||
<article class="feature-card"><h3>Отличная локация</h3><p>15 минут от метро</p></article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section section--pattern objects" id="objects">
|
<section class="section section--pattern objects" id="objects">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<header class="section__head">
|
<header class="section__head">
|
||||||
@@ -97,7 +78,7 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<article class="object-card">
|
<article class="object-card">
|
||||||
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('https://images.unsplash.com/photo-1515703407324-5f753afd8be8?auto=format&fit=crop&w=1400&q=80');"></div>
|
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/section-main.webp');"></div>
|
||||||
<div class="object-card__content">
|
<div class="object-card__content">
|
||||||
<h3>Ледовые поля</h3>
|
<h3>Ледовые поля</h3>
|
||||||
<p>Два профессиональных поля 56×26 м для хоккея, фигурного катания и массовых катаний.</p>
|
<p>Два профессиональных поля 56×26 м для хоккея, фигурного катания и массовых катаний.</p>
|
||||||
@@ -110,7 +91,7 @@
|
|||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="object-card object-card--reverse">
|
<article class="object-card object-card--reverse">
|
||||||
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('https://images.unsplash.com/photo-1544717305-2782549b5136?auto=format&fit=crop&w=1400&q=80');"></div>
|
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/booking-section.webp');"></div>
|
||||||
<div class="object-card__content">
|
<div class="object-card__content">
|
||||||
<h3>Универсальный зал</h3>
|
<h3>Универсальный зал</h3>
|
||||||
<p>Многофункциональное пространство для командных и индивидуальных тренировок.</p>
|
<p>Многофункциональное пространство для командных и индивидуальных тренировок.</p>
|
||||||
@@ -123,7 +104,7 @@
|
|||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="object-card">
|
<article class="object-card">
|
||||||
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=1400&q=80');"></div>
|
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/infrastructure-section.webp');"></div>
|
||||||
<div class="object-card__content">
|
<div class="object-card__content">
|
||||||
<h3>Фитнес-центр</h3>
|
<h3>Фитнес-центр</h3>
|
||||||
<p>Современная зона для силовых и функциональных тренировок.</p>
|
<p>Современная зона для силовых и функциональных тренировок.</p>
|
||||||
@@ -136,7 +117,7 @@
|
|||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="object-card object-card--reverse">
|
<article class="object-card object-card--reverse">
|
||||||
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('https://images.unsplash.com/photo-1571902943202-507ec2618e8f?auto=format&fit=crop&w=1400&q=80');"></div>
|
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/services-section.webp');"></div>
|
||||||
<div class="object-card__content">
|
<div class="object-card__content">
|
||||||
<h3>Апарт-комплекс</h3>
|
<h3>Апарт-комплекс</h3>
|
||||||
<p>Комфортное проживание спортсменов и команд на территории комплекса.</p>
|
<p>Комфортное проживание спортсменов и команд на территории комплекса.</p>
|
||||||
@@ -149,7 +130,7 @@
|
|||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="object-card">
|
<article class="object-card">
|
||||||
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('https://images.unsplash.com/photo-1556909212-d5b604d0c90d?auto=format&fit=crop&w=1400&q=80');"></div>
|
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/footer-section.webp');"></div>
|
||||||
<div class="object-card__content">
|
<div class="object-card__content">
|
||||||
<h3>Ресторан</h3>
|
<h3>Ресторан</h3>
|
||||||
<p>Полноценное спортивное питание и меню для командных сборов.</p>
|
<p>Полноценное спортивное питание и меню для командных сборов.</p>
|
||||||
@@ -163,17 +144,69 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="section infrastructure" id="infrastructure">
|
||||||
|
<div class="container">
|
||||||
|
<header class="section__head">
|
||||||
|
<h2>Инфраструктура</h2>
|
||||||
|
<p>Всё для комфорта спортсменов</p>
|
||||||
|
</header>
|
||||||
|
<div class="infrastructure__grid">
|
||||||
|
<article class="feature-card">
|
||||||
|
<div class="feature-card__icon" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 32 32" fill="none">
|
||||||
|
<use href="./assets/images/svg-sprites.svg#icon-complex"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Апарт-комплекс</h3>
|
||||||
|
<p>150+ мест для проживания</p>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card">
|
||||||
|
<div class="feature-card__icon" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 32 32" fill="none">
|
||||||
|
<use href="./assets/images/svg-sprites.svg#icon-restaurant"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Ресторан</h3>
|
||||||
|
<p>Спортивное питание</p>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card">
|
||||||
|
<div class="feature-card__icon" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 32 32" fill="none">
|
||||||
|
<use href="./assets/images/svg-sprites.svg#icon-changingrooms"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>10 раздевалок</h3>
|
||||||
|
<p>Современные условия</p>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card">
|
||||||
|
<div class="feature-card__icon" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 32 32" fill="none">
|
||||||
|
<use href="./assets/images/svg-sprites.svg#icon-drying"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Сушильные помещения</h3>
|
||||||
|
<p>Для экипировки</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="section services" id="services">
|
<section class="section services" id="services">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<header class="section__head">
|
<header class="section__head">
|
||||||
<h2>Услуги</h2>
|
<h2>Услуги</h2>
|
||||||
<p>Полный цикл сопровождения тренировочного процесса</p>
|
<p>Широкий спектр возможностей для вашего спорта</p>
|
||||||
</header>
|
</header>
|
||||||
<div class="services__grid">
|
<div class="services__grid">
|
||||||
<article class="service-card"><h3>Аренда площадок</h3><p>Лед, залы и специализированные пространства под задачи команды.</p><a href="#booking">Подробнее</a></article>
|
<a class="service-card" href="#booking">Аренда льда</a>
|
||||||
<article class="service-card"><h3>Тренировочные сборы</h3><p>Проживание, питание и логистика в рамках одного комплекса.</p><a href="#booking">Подробнее</a></article>
|
<a class="service-card" href="#booking">Аренда залов</a>
|
||||||
<article class="service-card"><h3>Турниры и мероприятия</h3><p>Организация соревнований, матчей и корпоративных ивентов.</p><a href="#booking">Подробнее</a></article>
|
<a class="service-card" href="#booking">Тренировки секций</a>
|
||||||
<article class="service-card"><h3>Реабилитация и ОФП</h3><p>Фитнес, восстановление и индивидуальные программы подготовки.</p><a href="#booking">Подробнее</a></article>
|
<a class="service-card" href="#booking">Турниры</a>
|
||||||
|
<a class="service-card" href="#booking">Корпоративные мероприятия</a>
|
||||||
|
<a class="service-card" href="#booking">Фитнес-занятия</a>
|
||||||
|
</div>
|
||||||
|
<div class="services__cta">
|
||||||
|
<a class="btn services__cta-btn" href="#">Посмотреть актуальное расписание</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -185,12 +218,12 @@
|
|||||||
<p>Пространства OlimpArena в деталях</p>
|
<p>Пространства OlimpArena в деталях</p>
|
||||||
</header>
|
</header>
|
||||||
<div class="gallery__grid">
|
<div class="gallery__grid">
|
||||||
<div class="gallery__item" style="background-image:url('https://images.unsplash.com/photo-1541534741688-6078c6bfb5c5?auto=format&fit=crop&w=1000&q=80');"></div>
|
<div class="gallery__item" style="background-image:url('./assets/images/other/section-main.webp');"></div>
|
||||||
<div class="gallery__item" style="background-image:url('https://images.unsplash.com/photo-1546519638-68e109498ffc?auto=format&fit=crop&w=1000&q=80');"></div>
|
<div class="gallery__item" style="background-image:url('./assets/images/other/booking-section.webp');"></div>
|
||||||
<div class="gallery__item" style="background-image:url('https://images.unsplash.com/photo-1517466787929-bc90951d0974?auto=format&fit=crop&w=1000&q=80');"></div>
|
<div class="gallery__item" style="background-image:url('./assets/images/other/infrastructure-section.webp');"></div>
|
||||||
<div class="gallery__item" style="background-image:url('https://images.unsplash.com/photo-1593079831268-3381b0db4a77?auto=format&fit=crop&w=1000&q=80');"></div>
|
<div class="gallery__item" style="background-image:url('./assets/images/other/services-section.webp');"></div>
|
||||||
<div class="gallery__item" style="background-image:url('https://images.unsplash.com/photo-1571019613914-85f342c55f5f?auto=format&fit=crop&w=1000&q=80');"></div>
|
<div class="gallery__item" style="background-image:url('./assets/images/other/footer-section.webp');"></div>
|
||||||
<div class="gallery__item" style="background-image:url('https://images.unsplash.com/photo-1623874514711-0f321325f318?auto=format&fit=crop&w=1000&q=80');"></div>
|
<div class="gallery__item" style="background-image:url('./assets/images/other/section-main.webp');"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -254,9 +287,39 @@
|
|||||||
<div class="contacts-card">
|
<div class="contacts-card">
|
||||||
<h3>Контакты</h3>
|
<h3>Контакты</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li><strong>Адрес</strong><span>Москва, в пределах ТТК<br>15 минут от м. Волгоградский проспект</span></li>
|
<li>
|
||||||
<li><strong>Телефон</strong><span>+7 (495) 123-45-67</span></li>
|
<span class="contacts-card__icon" aria-hidden="true">
|
||||||
<li><strong>Email</strong><span>info@olimparena.ru</span></li>
|
<svg viewBox="0 0 24 24" fill="none">
|
||||||
|
<use href="./assets/images/svg-sprites.svg#icon-address"></use>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div class="contacts-card__item-content">
|
||||||
|
<strong>Адрес</strong>
|
||||||
|
<span>Москва, в пределах ТТК<br>15 минут от м. Волгоградский проспект</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="contacts-card__icon" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none">
|
||||||
|
<use href="./assets/images/svg-sprites.svg#icon-telephone"></use>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div class="contacts-card__item-content">
|
||||||
|
<strong>Телефон</strong>
|
||||||
|
<span>+7 (495) 123-45-67</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="contacts-card__icon" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none">
|
||||||
|
<use href="./assets/images/svg-sprites.svg#icon-email"></use>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div class="contacts-card__item-content">
|
||||||
|
<strong>Email</strong>
|
||||||
|
<span>info@olimparena.ru</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="hours-card">
|
<div class="hours-card">
|
||||||
@@ -271,36 +334,46 @@
|
|||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="footer__top">
|
<div class="footer__top">
|
||||||
<div class="footer__col">
|
<div class="footer__brand">
|
||||||
<a class="logo" href="#top" aria-label="OlimpArena">
|
<a class="logo" href="#top" aria-label="OlimpArena">
|
||||||
<img src="https://www.figma.com/api/mcp/asset/8a836c8e-ef3b-4a4c-80e1-57e33b81f3f2" alt="OlimpArena">
|
<img src="./assets/images/logo.svg" alt="OlimpArena">
|
||||||
</a>
|
</a>
|
||||||
<p>Современный спортивный комплекс в центре Москвы</p>
|
<p>Современный спортивный комплекс в центре Москвы</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer__col">
|
<nav class="footer__nav" aria-label="Навигация в футере">
|
||||||
<h4>Навигация</h4>
|
<h4>Навигация</h4>
|
||||||
<a href="#objects">Объекты</a>
|
<a href="#objects">Объекты</a>
|
||||||
<a href="#services">Услуги</a>
|
<a href="#services">Услуги</a>
|
||||||
<a href="#gallery">Галерея</a>
|
<a href="#gallery">Галерея</a>
|
||||||
<a href="#contacts">Контакты</a>
|
<a href="#contacts">Контакты</a>
|
||||||
</div>
|
</nav>
|
||||||
<div class="footer__col">
|
<div class="footer__contacts">
|
||||||
<h4>Контакты</h4>
|
<h4>Контакты</h4>
|
||||||
<span>+7 (495) 123-45-67</span>
|
<span>+7 (495) 123-45-67</span>
|
||||||
<span>info@olimparena.ru</span>
|
<span>info@olimparena.ru</span>
|
||||||
<span>Москва, ТТК</span>
|
<span>Москва, ТТК</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer__col">
|
<div class="footer__social">
|
||||||
<h4>Социальные сети</h4>
|
<h4>Социальные сети</h4>
|
||||||
<div class="footer__socials">
|
<div class="footer__socials">
|
||||||
<a href="#" aria-label="Telegram">Tg</a>
|
<a href="#" aria-label="Instagram">
|
||||||
<a href="#" aria-label="VK">Vk</a>
|
<svg viewBox="0 0 24 24" fill="none">
|
||||||
|
<rect x="2.5" y="2.5" width="19" height="19" rx="5" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="12" cy="12" r="4.25" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="17.2" cy="6.8" r="1.2" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" aria-label="Facebook">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none">
|
||||||
|
<path d="M14.5 8H16.5V5H14C11.8 5 10 6.8 10 9V11H8V14H10V19H13V14H15.5L16 11H13V9.5C13 8.67 13.67 8 14.5 8Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer__bottom">
|
<div class="footer__bottom">
|
||||||
<span>© 2026 OlimpArena. Все права защищены.</span>
|
<span>© 2026 OlimpArena. Все права защищены.</span>
|
||||||
<div>
|
<div class="footer__legal">
|
||||||
<a href="#">Политика конфиденциальности</a>
|
<a href="#">Политика конфиденциальности</a>
|
||||||
<a href="#">Условия использования</a>
|
<a href="#">Условия использования</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user