style: chaged blocks
This commit is contained in:
Ignat Karelov
@@ -1,3 +1,4 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@700&display=swap");
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
@@ -64,11 +65,38 @@ html,
|
||||
body {
|
||||
background: #121212;
|
||||
color: #ffffff;
|
||||
font-family: "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
|
||||
font-family: "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Montserrat", "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
a,
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button,
|
||||
span {
|
||||
font-family: "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -183,7 +211,7 @@ img {
|
||||
.header__nav a {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
@@ -272,7 +300,7 @@ img {
|
||||
border-radius: 999px;
|
||||
background: rgba(41, 49, 51, 0.6);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
|
||||
@@ -367,7 +395,7 @@ img {
|
||||
}
|
||||
.infrastructure .section__head h2 {
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
line-height: 1.05;
|
||||
}
|
||||
.infrastructure .section__head p {
|
||||
@@ -554,24 +582,63 @@ img {
|
||||
|
||||
.service-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 72px;
|
||||
padding: 12px 18px;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 152px;
|
||||
padding: 20px;
|
||||
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;
|
||||
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
|
||||
}
|
||||
.service-card:hover {
|
||||
.service-card__title {
|
||||
display: block;
|
||||
font-family: "Montserrat", "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 21px;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||
}
|
||||
.service-card__description {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px 18px;
|
||||
text-align: center;
|
||||
background: rgba(7, 10, 12, 0.84);
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.45;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||
}
|
||||
.service-card:hover, .service-card:focus-visible {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(207, 23, 23, 0.75);
|
||||
background: #222c33;
|
||||
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.service-card:hover .service-card__title, .service-card:focus-visible .service-card__title {
|
||||
opacity: 0.25;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.service-card:hover .service-card__description, .service-card:focus-visible .service-card__description {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.pricing {
|
||||
@@ -603,7 +670,6 @@ img {
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.pricing-item {
|
||||
background: rgba(18, 18, 18, 0.4);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
@@ -736,42 +802,100 @@ img {
|
||||
.booking h2 {
|
||||
margin-bottom: 24px;
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
line-height: 1.02;
|
||||
}
|
||||
.booking p {
|
||||
margin-bottom: 32px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.booking form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 14px;
|
||||
}
|
||||
.booking form .btn {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
margin-top: 4px;
|
||||
padding: 0 24px;
|
||||
.booking__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.booking input {
|
||||
.booking__field label {
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.booking__field .required-mark {
|
||||
color: #cf1717;
|
||||
}
|
||||
.booking__submit {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
height: 64px;
|
||||
margin-top: 10px;
|
||||
padding: 0 24px;
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.booking__consent {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
margin-top: 2px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.booking__consent input[type=checkbox] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: 2px;
|
||||
accent-color: #cf1717;
|
||||
flex: 0 0 18px;
|
||||
}
|
||||
.booking__consent a {
|
||||
color: #ffd2d2;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.booking input,
|
||||
.booking select,
|
||||
.booking textarea {
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 14px;
|
||||
background: rgba(18, 18, 18, 0.35);
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.35;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.booking input::placeholder {
|
||||
.booking input:focus,
|
||||
.booking select:focus,
|
||||
.booking textarea:focus {
|
||||
border-color: rgba(207, 23, 23, 0.85);
|
||||
box-shadow: 0 0 0 3px rgba(207, 23, 23, 0.25);
|
||||
}
|
||||
.booking input::placeholder,
|
||||
.booking select::placeholder,
|
||||
.booking textarea::placeholder {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
.booking input {
|
||||
outline: none;
|
||||
.booking input,
|
||||
.booking select {
|
||||
height: 56px;
|
||||
}
|
||||
.booking textarea {
|
||||
min-height: 130px;
|
||||
padding: 16px 20px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.contacts-card,
|
||||
@@ -795,7 +919,7 @@ img {
|
||||
.contacts-card h3 {
|
||||
margin-bottom: 30px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
line-height: 1.05;
|
||||
}
|
||||
.contacts-card ul {
|
||||
@@ -823,7 +947,7 @@ img {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.contacts-card__item-content span {
|
||||
@@ -835,7 +959,7 @@ img {
|
||||
.hours-card h4 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.hours-card p {
|
||||
@@ -844,6 +968,93 @@ img {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.booking-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 60;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 20px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s ease, visibility 0.25s ease;
|
||||
}
|
||||
.booking-modal.is-open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.booking-modal__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at 30% 10%, rgba(207, 23, 23, 0.2), transparent 55%), rgba(0, 0, 0, 0.72);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.booking-modal__content {
|
||||
position: relative;
|
||||
width: min(100%, 620px);
|
||||
padding: 36px 30px 30px;
|
||||
border: 1px solid rgba(207, 23, 23, 0.52);
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(140deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)), linear-gradient(165deg, #202a30, #181f24 62%);
|
||||
box-shadow: 0 26px 58px rgba(0, 0, 0, 0.52);
|
||||
}
|
||||
.booking-modal__status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-bottom: 18px;
|
||||
border-radius: 16px;
|
||||
background: rgba(207, 23, 23, 0.18);
|
||||
border: 1px solid rgba(207, 23, 23, 0.45);
|
||||
color: #ffd9d9;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
.booking-modal__title {
|
||||
margin-bottom: 12px;
|
||||
padding-right: 42px;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.booking-modal__text {
|
||||
margin-bottom: 24px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.booking-modal__actions {
|
||||
display: flex;
|
||||
}
|
||||
.booking-modal__btn {
|
||||
min-width: 220px;
|
||||
}
|
||||
.booking-modal__close {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.booking-modal__close:hover {
|
||||
background: rgba(207, 23, 23, 0.34);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid rgba(207, 23, 23, 0.1);
|
||||
background: #090a0f;
|
||||
@@ -865,7 +1076,7 @@ img {
|
||||
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.footer__nav a, .footer__contacts a, .footer__social a {
|
||||
@@ -933,7 +1144,7 @@ img {
|
||||
|
||||
@media only screen and (max-width: 1600px) {
|
||||
.hero__content {
|
||||
margin-left: 420px;
|
||||
margin-left: auto;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 64px;
|
||||
@@ -1029,7 +1240,6 @@ img {
|
||||
}
|
||||
.highlights__grid,
|
||||
.gallery__grid,
|
||||
.pricing__list,
|
||||
.reviews__grid,
|
||||
.stats,
|
||||
.footer__top,
|
||||
@@ -1128,7 +1338,6 @@ img {
|
||||
}
|
||||
.highlights__grid,
|
||||
.gallery__grid,
|
||||
.pricing__list,
|
||||
.reviews__grid,
|
||||
.stats,
|
||||
.footer__top,
|
||||
@@ -1142,8 +1351,9 @@ img {
|
||||
.booking h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.booking input {
|
||||
height: 60px;
|
||||
.booking input,
|
||||
.booking select {
|
||||
height: 52px;
|
||||
}
|
||||
.contacts-card h3 {
|
||||
font-size: 34px;
|
||||
@@ -1163,17 +1373,15 @@ img {
|
||||
font-size: 16px;
|
||||
}
|
||||
.infrastructure .section__head h2,
|
||||
.services .section__head h2,
|
||||
.pricing .section__head h2 {
|
||||
.services .section__head h2 {
|
||||
font-size: 38px;
|
||||
}
|
||||
.infrastructure .section__head p,
|
||||
.services .section__head p,
|
||||
.pricing .section__head p {
|
||||
.services .section__head p {
|
||||
font-size: 20px;
|
||||
}
|
||||
.service-card {
|
||||
font-size: 17px;
|
||||
.service-card__title {
|
||||
font-size: 19px;
|
||||
}
|
||||
.footer__brand p {
|
||||
font-size: 16px;
|
||||
@@ -1195,6 +1403,26 @@ img {
|
||||
.stats strong {
|
||||
font-size: 40px;
|
||||
}
|
||||
.booking-modal__content {
|
||||
padding: 28px 18px 22px;
|
||||
}
|
||||
.booking-modal__status {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 14px;
|
||||
font-size: 24px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.booking-modal__title {
|
||||
font-size: 26px;
|
||||
}
|
||||
.booking-modal__text {
|
||||
font-size: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.booking-modal__btn {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 520px) {
|
||||
.header__inner {
|
||||
@@ -1239,8 +1467,18 @@ img {
|
||||
min-height: 260px;
|
||||
}
|
||||
.service-card {
|
||||
min-height: 64px;
|
||||
font-size: 16px;
|
||||
min-height: 142px;
|
||||
padding: 16px;
|
||||
}
|
||||
.service-card__title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.service-card__description {
|
||||
inset: 0;
|
||||
padding: 14px;
|
||||
opacity: 1;
|
||||
font-size: 14px;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.services__cta-btn {
|
||||
width: 100%;
|
||||
@@ -1258,6 +1496,17 @@ img {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
@media (hover: none) {
|
||||
.service-card {
|
||||
justify-content: center;
|
||||
}
|
||||
.service-card__description {
|
||||
position: absolute;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
|
||||
Reference in New Issue
Block a user