feat: added new blocks/form changed
This commit is contained in:
Ignat Karelov
@@ -713,17 +713,11 @@ img {
|
||||
filter: saturate(1.08);
|
||||
}
|
||||
|
||||
.reviews {
|
||||
.facts {
|
||||
background: #121212;
|
||||
background-image: url(../images/bg-pattern.svg);
|
||||
background-position: center;
|
||||
}
|
||||
.reviews__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 32px;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.review-card {
|
||||
background: rgba(18, 18, 18, 0.4);
|
||||
@@ -762,33 +756,40 @@ img {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 32px;
|
||||
}
|
||||
.stats article {
|
||||
.stats__item {
|
||||
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);
|
||||
border: 0;
|
||||
background: #cf1717;
|
||||
min-height: 144px;
|
||||
padding: 32px;
|
||||
min-height: 248px;
|
||||
padding: 34px 24px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.stats article:hover {
|
||||
.stats__item:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
.stats strong {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 14px;
|
||||
color: #ffffff;
|
||||
font-size: 48px;
|
||||
font-size: clamp(80px, 9vw, 120px);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
line-height: 0.9;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.stats span {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 1.3;
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.booking {
|
||||
@@ -950,11 +951,89 @@ img {
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.contacts-card__item-content a {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.contacts-card__item-content span {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 16px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.contacts-card__item-content small {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 13px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.contacts-card__links {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.contacts-card__messenger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 44px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
text-decoration: none;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
.contacts-card__messenger:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(207, 23, 23, 0.7);
|
||||
background: rgba(207, 23, 23, 0.18);
|
||||
}
|
||||
.contacts-card__messenger--secondary {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
.contacts-card__action-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.contacts-card__action-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
color: currentColor;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.contacts-card__links--social {
|
||||
margin-top: 14px;
|
||||
}
|
||||
.contacts-card__links--social a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
.contacts-card__links--social a:hover {
|
||||
border-color: rgba(207, 23, 23, 0.8);
|
||||
color: #ffffff;
|
||||
background: rgba(207, 23, 23, 0.2);
|
||||
}
|
||||
|
||||
.hours-card h4 {
|
||||
margin-bottom: 16px;
|
||||
@@ -968,6 +1047,64 @@ img {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.map-card__embed {
|
||||
width: 100%;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.map-card__embed iframe {
|
||||
width: 100%;
|
||||
min-height: 260px;
|
||||
border: 0;
|
||||
display: block;
|
||||
}
|
||||
.map-card__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.map-card__actions a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.map-card__actions a:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(207, 23, 23, 0.75);
|
||||
background: rgba(207, 23, 23, 0.18);
|
||||
}
|
||||
.map-card__action-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffd5d5;
|
||||
}
|
||||
.map-card__action-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
}
|
||||
.map-card__route {
|
||||
min-width: 44px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.booking-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -1073,19 +1210,19 @@ img {
|
||||
font-size: 14px;
|
||||
line-height: 1.28;
|
||||
}
|
||||
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
|
||||
.footer__nav h4, .footer__contacts h4 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.footer__nav a, .footer__contacts a, .footer__social a {
|
||||
.footer__nav a, .footer__contacts a {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.footer__nav span, .footer__contacts span, .footer__social span {
|
||||
.footer__nav span, .footer__contacts span {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
font-size: 14px;
|
||||
@@ -1093,35 +1230,36 @@ img {
|
||||
}
|
||||
.footer__nav a + a,
|
||||
.footer__nav span + span, .footer__contacts a + a,
|
||||
.footer__contacts span + span, .footer__social a + a,
|
||||
.footer__social span + span {
|
||||
.footer__contacts span + span {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.footer__socials {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.footer__socials a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border: 1px solid rgba(207, 23, 23, 0.5);
|
||||
border-radius: 10px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.footer__socials a svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: block;
|
||||
}
|
||||
.footer__socials a:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(207, 23, 23, 0.85);
|
||||
background: rgba(207, 23, 23, 0.15);
|
||||
border-color: rgba(207, 23, 23, 0.75);
|
||||
background: rgba(207, 23, 23, 0.18);
|
||||
}
|
||||
.footer__bottom {
|
||||
display: flex;
|
||||
@@ -1139,7 +1277,46 @@ img {
|
||||
}
|
||||
.footer__legal {
|
||||
display: flex;
|
||||
gap: 34px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 24px;
|
||||
}
|
||||
.footer__messengers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.footer__messengers a {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
border-radius: 12px;
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
margin-top: 0 !important;
|
||||
text-decoration: none !important;
|
||||
transition: border-color 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
.footer__messengers a:hover {
|
||||
border-color: rgba(207, 23, 23, 0.72);
|
||||
background: rgba(207, 23, 23, 0.16);
|
||||
}
|
||||
.footer__messenger-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.footer__messenger-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1600px) {
|
||||
@@ -1195,15 +1372,14 @@ img {
|
||||
font-size: 16px;
|
||||
}
|
||||
.footer__brand p {
|
||||
font-size: 28px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
|
||||
.footer__nav h4, .footer__contacts h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.footer__nav a,
|
||||
.footer__nav span, .footer__contacts a,
|
||||
.footer__contacts span, .footer__social a,
|
||||
.footer__social span {
|
||||
.footer__contacts span {
|
||||
font-size: 14px;
|
||||
}
|
||||
.footer__bottom span,
|
||||
@@ -1282,19 +1458,18 @@ img {
|
||||
gap: 28px;
|
||||
}
|
||||
.footer__brand p {
|
||||
font-size: 22px;
|
||||
font-size: 16px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
|
||||
font-size: 30px;
|
||||
.footer__nav h4, .footer__contacts h4 {
|
||||
font-size: 18px;
|
||||
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__contacts span {
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.footer__bottom span,
|
||||
.footer__bottom a {
|
||||
@@ -1387,13 +1562,12 @@ img {
|
||||
font-size: 16px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
|
||||
.footer__nav h4, .footer__contacts h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.footer__nav a,
|
||||
.footer__nav span, .footer__contacts a,
|
||||
.footer__contacts span, .footer__social a,
|
||||
.footer__social span {
|
||||
.footer__contacts span {
|
||||
font-size: 16px;
|
||||
}
|
||||
.footer__bottom span,
|
||||
@@ -1401,7 +1575,7 @@ img {
|
||||
font-size: 14px;
|
||||
}
|
||||
.stats strong {
|
||||
font-size: 40px;
|
||||
font-size: clamp(66px, 17vw, 96px);
|
||||
}
|
||||
.booking-modal__content {
|
||||
padding: 28px 18px 22px;
|
||||
@@ -1457,7 +1631,7 @@ img {
|
||||
.info-card,
|
||||
.feature-card,
|
||||
.review-card,
|
||||
.stats article,
|
||||
.stats__item,
|
||||
.contacts-card,
|
||||
.hours-card,
|
||||
.object-card__content {
|
||||
@@ -1492,8 +1666,8 @@ img {
|
||||
gap: 20px;
|
||||
}
|
||||
.footer__socials a {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
@media (hover: none) {
|
||||
|
||||
Reference in New Issue
Block a user