diff --git a/assets/css/main.css b/assets/css/main.css index 73f2359..a79dff1 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -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, diff --git a/assets/css/main.min.css b/assets/css/main.min.css index 26010c6..9368ba3 100644 --- a/assets/css/main.min.css +++ b/assets/css/main.min.css @@ -1 +1 @@ -a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{color-scheme:dark}*{box-sizing:border-box}body,html{background:#121212;color:#fff;font-family:Segoe UI,Segoe UI Variable,Helvetica Neue,Arial,sans-serif}body{line-height:1}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}@keyframes fade-up{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}.container{margin:0 auto;max-width:1400px;padding:0 24px;width:100%}.site{overflow:hidden;position:relative}.scroll-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--reveal-delay,0s);will-change:opacity,transform}.scroll-reveal.is-visible{opacity:1;transform:translateY(0)}.btn{align-items:center;background:#cf1717;border:0;border-radius:14px;box-shadow:0 25px 50px rgba(231,0,11,.5);color:#fff;cursor:pointer;display:inline-flex;font-size:16px;font-weight:500;justify-content:center;line-height:24px;padding:18px 24px;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn--small{box-shadow:0 10px 15px rgba(231,0,11,.4),0 4px 6px rgba(231,0,11,.4);font-size:14px;line-height:20px;padding:10px 24px}.btn--ghost{background:rgba(41,49,51,.6);border:2px solid hsla(0,0%,100%,.2);box-shadow:none}.header{animation:slide-down .65s ease both;background:hsla(0,0%,7%,.95);border-bottom:1px solid rgba(207,23,23,.2);inset:0 0 auto;position:fixed;z-index:20}.header__inner{justify-content:space-between;min-height:72px}.header__inner,.header__nav{align-items:center;display:flex}.header__nav{gap:32px;margin-left:auto;margin-right:32px}.header__nav a{color:hsla(0,0%,100%,.8);font-size:14px;font-weight:600;line-height:20px;transition:color .2s ease}.header__nav a:hover{color:#fff}.logo{display:inline-flex;height:30px;width:137px}.logo img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.hero{min-height:852px;padding-top:72px;position:relative}.hero__bg{background:linear-gradient(90deg,hsla(0,0%,7%,.9),hsla(0,0%,7%,.7) 50%,transparent),url(../images/other/section-main.webp) 50%/cover no-repeat;inset:0;position:absolute}.hero__bg:after{background-image:repeating-linear-gradient(0deg,hsla(0,0%,100%,.045) 0 1px,transparent 1px 8px),repeating-linear-gradient(90deg,hsla(0,0%,100%,.045) 0 1px,transparent 1px 8px);content:"";inset:0;mix-blend-mode:soft-light;position:absolute}.hero__content{margin-left:528px;max-width:1000px;padding-bottom:50px;padding-top:104px;position:relative;z-index:1}.hero__content>*{animation:fade-up .7s ease forwards;opacity:0}.hero__content h1{animation-delay:.15s}.hero__content p{animation-delay:.28s}.hero__content .hero__tags{animation-delay:.4s}.hero__content .hero__actions{animation-delay:.52s}.hero h1{font-size:72px;font-weight:700;line-height:90px;margin-bottom:24px;max-width:1000px}.hero h1 span{color:#cf1717}.hero p{color:hsla(0,0%,100%,.8);font-size:20px;line-height:32px;margin-bottom:32px;max-width:768px}.hero__tags{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}.hero__tags li{background:rgba(41,49,51,.6);border:1px solid rgba(207,23,23,.3);border-radius:999px;font-size:14px;font-weight:600;line-height:20px;padding:9px 17px;transition:border-color .25s ease,background-color .25s ease,transform .25s ease;white-space:nowrap}.hero__tags li:hover{background:rgba(41,49,51,.9);border-color:rgba(207,23,23,.55);transform:translateY(-1px)}.hero__actions{display:flex;gap:16px}.highlights{background:linear-gradient(90deg,#293133,#20272a);padding:96px 0}.highlights__grid{display:grid;gap:24px;grid-template-columns:repeat(4,minmax(0,1fr))}.info-card{background:hsla(0,0%,7%,.4);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);min-height:178px;padding:33px;transition:transform .3s ease,border-color .3s ease,background-color .3s ease}.info-card:hover{background:hsla(0,0%,7%,.62);border-color:rgba(207,23,23,.45);transform:translateY(-6px)}.info-card h3{font-size:20px;font-weight:700;line-height:28px;margin-bottom:8px}.info-card p{color:hsla(0,0%,100%,.7);font-size:16px;line-height:24px}.section{padding:96px 0;position:relative}.section>.container{position:relative;z-index:1}.section--pattern{background:#121212}.section--pattern:before{background-image:radial-gradient(circle at 80px 80px,rgba(207,23,23,.25) 0 2px,transparent 2px 70px),radial-gradient(circle at 120px 120px,hsla(0,0%,100%,.06) 0 1px,transparent 1px 48px);background-size:320px 320px;content:"";inset:0;opacity:.4;pointer-events:none;position:absolute}.section__head{margin-bottom:64px;text-align:center}.section__head h2{font-size:48px;font-weight:700;line-height:1;margin-bottom:16px}.section__head p{color:hsla(0,0%,100%,.8);font-size:28px;line-height:1.15}.infrastructure{background:linear-gradient(90deg,#293133,#2f3b40)}.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;gap:24px;grid-template-columns:repeat(4,minmax(0,1fr))}.feature-card{align-items:center;background:hsla(0,0%,7%,.4);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:flex-start;min-height:238px;padding:32px 26px 30px;text-align:center;transition:transform .3s ease,border-color .3s ease,background-color .3s ease}.feature-card:hover{background:hsla(0,0%,7%,.6);border-color:rgba(207,23,23,.55);transform:translateY(-5px)}.feature-card__icon{align-items:center;background:#cf1717;border-radius:18px;box-shadow:0 12px 24px rgba(231,0,11,.5);color:#fff;display:inline-flex;height:64px;justify-content:center;margin-bottom:18px;width:64px}.feature-card__icon svg{display:block;height:32px;width:32px}.feature-card h3{font-size:18px;font-weight:700;line-height:1.2;margin-bottom:10px}.feature-card p{color:hsla(0,0%,100%,.7);font-size:16px;line-height:1.3}.objects{background-image:url(../images/bg-pattern.svg);background-position:50%}.objects .section__head{margin-bottom:64px}.object-card{display:grid;gap:32px;grid-template-columns:1fr 1fr;margin-bottom:48px}.object-card:last-child{margin-bottom:0}.object-card--reverse .object-card__image{order:2}.object-card--reverse .object-card__content{order:1}.object-card__image{background-position:50%;background-size:cover;border-radius:16px;min-height:400px;transition:transform .5s ease}.object-card__content{align-self:center;background:hsla(0,0%,7%,.4);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:center;min-height:338px;padding:33px;transition:transform .3s ease,border-color .3s ease}.object-card__content h3{font-size:34px;font-weight:700;line-height:1.1;margin-bottom:16px}.object-card__content p{color:hsla(0,0%,100%,.7);font-size:18px;line-height:28px;margin-bottom:24px}.object-card__content ul{margin-bottom:24px}.object-card__content li{color:hsla(0,0%,100%,.8);font-size:16px;line-height:28px;padding-left:14px;position:relative}.object-card__content li+li{margin-top:8px}.object-card__content li:before{background:#cf1717;border-radius:50%;content:"";height:6px;left:0;position:absolute;top:12px;width:6px}.object-card:hover .object-card__image{transform:scale(1.02)}.object-card:hover .object-card__content{border-color:rgba(207,23,23,.4);transform:translateY(-4px)}.services{background:#121212;background-image:url(../images/bg-pattern.svg);background-position:50%}.services .section__head{margin-bottom:52px}.services .section__head h2{font-size:48px;line-height:1.05}.services .section__head p{font-size:20px;line-height:1.2}.services__grid{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 auto;max-width:896px;width:100%}.services__cta{margin-top:48px;text-align:center}.services__cta-btn{box-shadow:0 18px 34px rgba(231,0,11,.45);font-size:18px;line-height:1.2;min-height:60px;padding:16px 26px;width:min(100%,560px)}.service-card{align-items:center;background:#1d252b;border:1px solid rgba(207,23,23,.45);border-radius:16px;color:#fff;display:flex;font-size:18px;font-weight:700;justify-content:center;line-height:1.2;min-height:72px;padding:12px 18px;text-align:center;transition:transform .25s ease,border-color .25s ease,background-color .25s ease}.service-card:hover{background:#222c33;border-color:rgba(207,23,23,.75);transform:translateY(-3px)}.pricing{background:linear-gradient(90deg,#293133,#20272a)}.pricing .section__head{margin-bottom:44px}.pricing__list{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:28px}.pricing__note{color:hsla(0,0%,100%,.8);font-size:18px;line-height:1.45;margin-bottom:30px}.pricing__cta,.pricing__note{text-align:center}.pricing__cta-btn{font-size:18px;line-height:1.2;min-height:60px;padding:16px 26px;width:min(100%,420px)}.pricing-item{background:hsla(0,0%,7%,.4);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);min-height:144px;padding:24px}.pricing-item h3{font-size:22px;font-weight:700;line-height:1.25;margin-bottom:10px}.pricing-item p{color:#cf1717;font-size:24px;font-weight:700;line-height:1.2}.gallery{background:linear-gradient(90deg,#293133,#20272a)}.gallery__grid{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr))}.gallery__item{aspect-ratio:16/10;background-position:50%;background-size:cover;border:1px solid hsla(0,0%,100%,.1);border-radius:16px;transition:transform .45s ease,border-color .3s ease,filter .3s ease}.gallery__item:hover{border-color:rgba(207,23,23,.55);filter:saturate(1.08);transform:scale(1.03)}.reviews{background:#121212;background-image:url(../images/bg-pattern.svg);background-position:50%}.reviews__grid{display:grid;gap:32px;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:64px}.review-card{background:hsla(0,0%,7%,.4);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);min-height:206px;padding:33px;transition:transform .3s ease,border-color .3s ease}.review-card:hover{border-color:rgba(207,23,23,.4);transform:translateY(-5px)}.review-card p{color:hsla(0,0%,100%,.8);font-size:16px;line-height:1.5;margin-bottom:24px}.review-card strong{display:block;font-size:16px;font-weight:700;line-height:1.2;margin-bottom:8px}.review-card span{color:hsla(0,0%,100%,.7);font-size:16px;line-height:1.2}.stats{display:grid;gap:32px;grid-template-columns:repeat(3,minmax(0,1fr))}.stats article{background:hsla(0,0%,7%,.4);background:#cf1717;border:0;border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);min-height:144px;padding:32px;text-align:center;transition:transform .3s ease}.stats article:hover{transform:translateY(-5px)}.stats strong{color:#fff;display:block;font-size:48px;font-weight:700;line-height:1;margin-bottom:8px}.stats span{color:#fff;font-size:16px;line-height:1.3}.booking{background:linear-gradient(90deg,#293133,#20272a)}.booking__wrap{display:grid;gap:48px;grid-template-columns:1fr 1fr}.booking h2{font-size:48px;font-weight:600;line-height:1.02;margin-bottom:24px}.booking p{color:hsla(0,0%,100%,.8);font-size:16px;line-height:1.4;margin-bottom:32px}.booking form{display:flex;flex-direction:column;gap:16px}.booking form .btn{height:60px;margin-top:4px;padding:0 24px;width:100%}.booking input{background:hsla(0,0%,7%,.35);border:1px solid hsla(0,0%,100%,.1);border-radius:14px;color:#fff;font-size:16px;height:72px;line-height:18px;padding:0 24px;width:100%}.booking input::-moz-placeholder{color:hsla(0,0%,100%,.45)}.booking input::placeholder{color:hsla(0,0%,100%,.45)}.booking input{outline:none}.contacts-card,.hours-card{background:hsla(0,0%,7%,.4);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);padding:33px;transition:transform .3s ease,border-color .3s ease}.contacts-card:hover,.hours-card:hover{border-color:rgba(207,23,23,.4);transform:translateY(-4px)}.contacts-card{margin-bottom:32px}.contacts-card h3{font-size:24px;font-weight:600;line-height:1.05;margin-bottom:30px}.contacts-card ul{display:flex;flex-direction:column;gap:18px}.contacts-card li{align-items:flex-start;display:flex;gap:16px}.contacts-card__icon{flex:0 0 24px;height:24px;margin-top:2px;width:24px}.contacts-card__icon svg{display:block;height:24px;width:24px}.contacts-card__item-content strong{display:block;font-size:16px;font-weight:600;line-height:1.1;margin-bottom:8px}.contacts-card__item-content span{color:hsla(0,0%,100%,.8);font-size:16px;line-height:1.45}.hours-card h4{font-size:16px;font-weight:600;line-height:1.2;margin-bottom:16px}.hours-card p{font-size:16px;line-height:1.25;margin:0}.footer{background:#090a0f;border-top:1px solid rgba(207,23,23,.1);padding:64px 0 20px}.footer__top{display:grid;gap:36px;grid-template-columns:1.45fr 1fr 1.15fr 1fr;margin-bottom:48px}.footer__brand p{color:hsla(0,0%,100%,.65);font-size:14px;line-height:1.28;margin-top:16px;max-width:286px}.footer__contacts h4,.footer__nav h4,.footer__social h4{font-size:16px;font-weight:600;line-height:1.1;margin-bottom:16px}.footer__contacts a,.footer__contacts span,.footer__nav a,.footer__nav span,.footer__social a,.footer__social span{color:hsla(0,0%,100%,.65);display:block;font-size:14px;line-height:1.35}.footer__contacts a+a,.footer__contacts span+span,.footer__nav a+a,.footer__nav span+span,.footer__social a+a,.footer__social span+span{margin-top:10px}.footer__socials{display:flex;gap:12px}.footer__socials a{align-items:center;border:1px solid rgba(207,23,23,.5);border-radius:10px;color:hsla(0,0%,100%,.92);display:inline-flex;height:58px;justify-content:center;margin-top:0!important;transition:transform .25s ease,border-color .25s ease,background-color .25s ease;width:58px}.footer__socials a svg{display:block;height:24px;width:24px}.footer__socials a:hover{background:rgba(207,23,23,.15);border-color:rgba(207,23,23,.85);transform:translateY(-2px)}.footer__bottom{align-items:center;border-top:1px solid rgba(207,23,23,.35);display:flex;gap:24px;justify-content:space-between;padding-top:30px}.footer__bottom a,.footer__bottom span{color:hsla(0,0%,100%,.4);font-size:14px;line-height:1.3}.footer__legal{display:flex;gap:34px}@media only screen and (max-width:1600px){.hero__content{margin-left:420px}.hero h1{font-size:64px;line-height:1.15}}@media only screen and (max-width:1280px){.container{padding:0 20px}.header__nav{gap:20px;margin-right:20px}.hero__content{margin-left:280px;max-width:700px}.hero h1{font-size:56px}.hero p{font-size:18px;line-height:1.6}.section__head h2{font-size:40px}.section__head p{font-size:24px}.object-card__content h3{font-size:30px}.booking h2{font-size:48px}.contacts-card h3{font-size:24px}.contacts-card__item-content strong,.hours-card h4,.hours-card p{font-size:16px}.footer__brand p{font-size:28px}.footer__contacts h4,.footer__nav h4,.footer__social h4{font-size:16px}.footer__bottom a,.footer__bottom span,.footer__contacts a,.footer__contacts span,.footer__nav a,.footer__nav span,.footer__social a,.footer__social span{font-size:14px}}@media only screen and (max-width:1024px){.header__inner{min-height:64px}.header__nav{display:none}.hero{min-height:auto;padding:120px 0 80px}.hero__content{margin-left:0;max-width:100%;padding-top:0}.hero h1{font-size:48px;line-height:1.15}.hero h1,.hero p{max-width:640px}.hero__actions{flex-wrap:wrap}.footer__top,.gallery__grid,.highlights__grid,.infrastructure__grid,.pricing__list,.reviews__grid,.services__grid,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.services__grid{max-width:none}.booking__wrap,.object-card{gap:24px;grid-template-columns:1fr}.object-card--reverse .object-card__content,.object-card--reverse .object-card__image{order:0}.section{padding:72px 0}.section__head{margin-bottom:40px}.booking__contacts{display:grid;gap:24px;grid-template-columns:1fr 1fr}.contacts-card{margin-bottom:0}.footer__bottom{align-items:flex-start;flex-direction:column}.footer__top{gap:28px;grid-template-columns:repeat(2,minmax(0,1fr))}.footer__brand p{font-size:22px;margin-top:18px}.footer__contacts h4,.footer__nav h4,.footer__social h4{font-size:30px;margin-bottom:16px}.footer__contacts a,.footer__contacts span,.footer__nav a,.footer__nav span,.footer__social a,.footer__social span{font-size:22px;line-height:1.32}.footer__bottom a,.footer__bottom span{font-size:14px}}@media only screen and (max-width:768px){.container{padding:0 16px}.btn{width:100%}.btn--small{width:auto}.hero{padding-top:108px}.hero h1{font-size:40px;max-width:100%}.hero p{font-size:16px;line-height:1.5;max-width:100%}.hero__tags li{white-space:normal}.hero__actions .btn--ghost{width:100%}.section__head h2{font-size:34px}.section__head p{font-size:20px;line-height:1.3}.booking__contacts,.footer__top,.gallery__grid,.highlights__grid,.infrastructure__grid,.pricing__list,.reviews__grid,.services__grid,.stats{grid-template-columns:1fr}.booking h2,.feature-card h3,.object-card__content h3{font-size:24px}.booking input{height:60px}.contacts-card h3{font-size:34px;margin-bottom:18px}.contacts-card__item-content span,.contacts-card__item-content strong{font-size:16px}.hours-card h4{font-size:16px;margin-bottom:12px}.hours-card p{font-size:16px}.infrastructure .section__head h2,.pricing .section__head h2,.services .section__head h2{font-size:38px}.infrastructure .section__head p,.pricing .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__contacts a,.footer__contacts h4,.footer__contacts span,.footer__nav a,.footer__nav h4,.footer__nav span,.footer__social a,.footer__social h4,.footer__social span{font-size:16px}.footer__bottom a,.footer__bottom span{font-size:14px}.stats strong{font-size:40px}}@media only screen and (max-width:520px){.header__inner{gap:12px}.logo{height:24px;width:110px}.btn--small{font-size:13px;padding:10px 16px}.hero{padding-top:100px}.hero h1{font-size:34px}.hero__actions{gap:12px}.section{padding:64px 0}.section__head h2{font-size:32px}.section__head p{font-size:18px}.contacts-card,.feature-card,.hours-card,.info-card,.object-card__content,.review-card,.stats article{padding:24px}.object-card__image{min-height:260px}.service-card{font-size:16px;min-height:64px}.services__cta-btn{font-size:16px;width:100%}.footer__bottom .footer__legal{flex-direction:column;gap:12px}.footer__top{gap:20px}.footer__socials a{height:50px;width:50px}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;scroll-behavior:auto!important;transition:none!important}.hero__content>*,.scroll-reveal{opacity:1!important}.scroll-reveal{transform:none!important}} \ No newline at end of file +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@700&display=swap");a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{color-scheme:dark}*{box-sizing:border-box}body,html{background:#121212;color:#fff;font-family:Inter,Segoe UI,Segoe UI Variable,Helvetica Neue,Arial,sans-serif}body{font-weight:400;line-height:1}h1,h2,h3,h4,h5,h6{font-family:Montserrat,Inter,Segoe UI,Segoe UI Variable,Helvetica Neue,Arial,sans-serif;font-weight:700}a,button,input,li,p,select,span,textarea{font-family:Inter,Segoe UI,Segoe UI Variable,Helvetica Neue,Arial,sans-serif}b,strong{font-weight:500}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}@keyframes fade-up{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}.container{margin:0 auto;max-width:1400px;padding:0 24px;width:100%}.site{overflow:hidden;position:relative}.scroll-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--reveal-delay,0s);will-change:opacity,transform}.scroll-reveal.is-visible{opacity:1;transform:translateY(0)}.btn{align-items:center;background:#cf1717;border:0;border-radius:14px;box-shadow:0 25px 50px rgba(231,0,11,.5);color:#fff;cursor:pointer;display:inline-flex;font-size:16px;font-weight:500;justify-content:center;line-height:24px;padding:18px 24px;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn--small{box-shadow:0 10px 15px rgba(231,0,11,.4),0 4px 6px rgba(231,0,11,.4);font-size:14px;line-height:20px;padding:10px 24px}.btn--ghost{background:rgba(41,49,51,.6);border:2px solid hsla(0,0%,100%,.2);box-shadow:none}.header{animation:slide-down .65s ease both;background:hsla(0,0%,7%,.95);border-bottom:1px solid rgba(207,23,23,.2);inset:0 0 auto;position:fixed;z-index:20}.header__inner{justify-content:space-between;min-height:72px}.header__inner,.header__nav{align-items:center;display:flex}.header__nav{gap:32px;margin-left:auto;margin-right:32px}.header__nav a{color:hsla(0,0%,100%,.8);font-size:14px;font-weight:500;line-height:20px;transition:color .2s ease}.header__nav a:hover{color:#fff}.logo{display:inline-flex;height:30px;width:137px}.logo img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.hero{min-height:852px;padding-top:72px;position:relative}.hero__bg{background:linear-gradient(90deg,hsla(0,0%,7%,.9),hsla(0,0%,7%,.7) 50%,transparent),url(../images/other/section-main.webp) 50%/cover no-repeat;inset:0;position:absolute}.hero__bg:after{background-image:repeating-linear-gradient(0deg,hsla(0,0%,100%,.045) 0 1px,transparent 1px 8px),repeating-linear-gradient(90deg,hsla(0,0%,100%,.045) 0 1px,transparent 1px 8px);content:"";inset:0;mix-blend-mode:soft-light;position:absolute}.hero__content{margin-left:528px;max-width:1000px;padding-bottom:50px;padding-top:104px;position:relative;z-index:1}.hero__content>*{animation:fade-up .7s ease forwards;opacity:0}.hero__content h1{animation-delay:.15s}.hero__content p{animation-delay:.28s}.hero__content .hero__tags{animation-delay:.4s}.hero__content .hero__actions{animation-delay:.52s}.hero h1{font-size:72px;font-weight:700;line-height:90px;margin-bottom:24px;max-width:1000px}.hero h1 span{color:#cf1717}.hero p{color:hsla(0,0%,100%,.8);font-size:20px;line-height:32px;margin-bottom:32px;max-width:768px}.hero__tags{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}.hero__tags li{background:rgba(41,49,51,.6);border:1px solid rgba(207,23,23,.3);border-radius:999px;font-size:14px;font-weight:500;line-height:20px;padding:9px 17px;transition:border-color .25s ease,background-color .25s ease,transform .25s ease;white-space:nowrap}.hero__tags li:hover{background:rgba(41,49,51,.9);border-color:rgba(207,23,23,.55);transform:translateY(-1px)}.hero__actions{display:flex;gap:16px}.highlights{background:linear-gradient(90deg,#293133,#20272a);padding:96px 0}.highlights__grid{display:grid;gap:24px;grid-template-columns:repeat(4,minmax(0,1fr))}.info-card{background:hsla(0,0%,7%,.4);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);min-height:178px;padding:33px;transition:transform .3s ease,border-color .3s ease,background-color .3s ease}.info-card:hover{background:hsla(0,0%,7%,.62);border-color:rgba(207,23,23,.45);transform:translateY(-6px)}.info-card h3{font-size:20px;font-weight:700;line-height:28px;margin-bottom:8px}.info-card p{color:hsla(0,0%,100%,.7);font-size:16px;line-height:24px}.section{padding:96px 0;position:relative}.section>.container{position:relative;z-index:1}.section--pattern{background:#121212}.section--pattern:before{background-image:radial-gradient(circle at 80px 80px,rgba(207,23,23,.25) 0 2px,transparent 2px 70px),radial-gradient(circle at 120px 120px,hsla(0,0%,100%,.06) 0 1px,transparent 1px 48px);background-size:320px 320px;content:"";inset:0;opacity:.4;pointer-events:none;position:absolute}.section__head{margin-bottom:64px;text-align:center}.section__head h2{font-size:48px;font-weight:700;line-height:1;margin-bottom:16px}.section__head p{color:hsla(0,0%,100%,.8);font-size:28px;line-height:1.15}.infrastructure{background:linear-gradient(90deg,#293133,#2f3b40)}.infrastructure .section__head{margin-bottom:56px}.infrastructure .section__head h2{font-size:48px;font-weight:700;line-height:1.05}.infrastructure .section__head p{font-size:20px;font-weight:400;line-height:1.2}.infrastructure__grid{display:grid;gap:24px;grid-template-columns:repeat(4,minmax(0,1fr))}.feature-card{align-items:center;background:hsla(0,0%,7%,.4);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:flex-start;min-height:238px;padding:32px 26px 30px;text-align:center;transition:transform .3s ease,border-color .3s ease,background-color .3s ease}.feature-card:hover{background:hsla(0,0%,7%,.6);border-color:rgba(207,23,23,.55);transform:translateY(-5px)}.feature-card__icon{align-items:center;background:#cf1717;border-radius:18px;box-shadow:0 12px 24px rgba(231,0,11,.5);color:#fff;display:inline-flex;height:64px;justify-content:center;margin-bottom:18px;width:64px}.feature-card__icon svg{display:block;height:32px;width:32px}.feature-card h3{font-size:18px;font-weight:700;line-height:1.2;margin-bottom:10px}.feature-card p{color:hsla(0,0%,100%,.7);font-size:16px;line-height:1.3}.objects{background-image:url(../images/bg-pattern.svg);background-position:50%}.objects .section__head{margin-bottom:64px}.object-card{display:grid;gap:32px;grid-template-columns:1fr 1fr;margin-bottom:48px}.object-card:last-child{margin-bottom:0}.object-card--reverse .object-card__image{order:2}.object-card--reverse .object-card__content{order:1}.object-card__image{background-position:50%;background-size:cover;border-radius:16px;min-height:400px;transition:transform .5s ease}.object-card__content{align-self:center;background:hsla(0,0%,7%,.4);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:center;min-height:338px;padding:33px;transition:transform .3s ease,border-color .3s ease}.object-card__content h3{font-size:34px;font-weight:700;line-height:1.1;margin-bottom:16px}.object-card__content p{color:hsla(0,0%,100%,.7);font-size:18px;line-height:28px;margin-bottom:24px}.object-card__content ul{margin-bottom:24px}.object-card__content li{color:hsla(0,0%,100%,.8);font-size:16px;line-height:28px;padding-left:14px;position:relative}.object-card__content li+li{margin-top:8px}.object-card__content li:before{background:#cf1717;border-radius:50%;content:"";height:6px;left:0;position:absolute;top:12px;width:6px}.object-card:hover .object-card__image{transform:scale(1.02)}.object-card:hover .object-card__content{border-color:rgba(207,23,23,.4);transform:translateY(-4px)}.services{background:#121212;background-image:url(../images/bg-pattern.svg);background-position:50%}.services .section__head{margin-bottom:52px}.services .section__head h2{font-size:48px;line-height:1.05}.services .section__head p{font-size:20px;line-height:1.2}.services__grid{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 auto;max-width:896px;width:100%}.services__cta{margin-top:48px;text-align:center}.services__cta-btn{box-shadow:0 18px 34px rgba(231,0,11,.45);font-size:18px;line-height:1.2;min-height:60px;padding:16px 26px;width:min(100%,560px)}.service-card{align-items:center;background:#1d252b;border:1px solid rgba(207,23,23,.45);border-radius:16px;color:#fff;display:flex;flex-direction:column;gap:10px;justify-content:center;min-height:152px;overflow:hidden;padding:20px;position:relative;text-align:center;transition:transform .25s ease,border-color .25s ease,background-color .25s ease,box-shadow .25s ease}.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}.service-card__description,.service-card__title{transition:opacity .25s ease,transform .25s ease}.service-card__description{align-items:center;background:rgba(7,10,12,.84);color:hsla(0,0%,100%,.7);display:flex;font-size:15px;font-weight:500;inset:0;justify-content:center;line-height:1.45;opacity:0;padding:16px 18px;pointer-events:none;position:absolute;text-align:center;transform:translateY(10px);z-index:2}.service-card:focus-visible,.service-card:hover{background:#222c33;border-color:rgba(207,23,23,.75);box-shadow:0 14px 30px rgba(0,0,0,.3);transform:translateY(-3px)}.service-card:focus-visible .service-card__title,.service-card:hover .service-card__title{opacity:.25;transform:scale(.98)}.service-card:focus-visible .service-card__description,.service-card:hover .service-card__description{opacity:1;transform:translateY(0)}.pricing{background:linear-gradient(90deg,#293133,#20272a)}.pricing .section__head{margin-bottom:44px}.pricing__list{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:28px}.pricing__note{color:hsla(0,0%,100%,.8);font-size:18px;line-height:1.45;margin-bottom:30px}.pricing__cta,.pricing__note{text-align:center}.pricing__cta-btn{font-size:18px;line-height:1.2;min-height:60px;padding:16px 26px;width:min(100%,420px)}.pricing-item{background:hsla(0,0%,7%,.4);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);min-height:144px;padding:24px}.pricing-item h3{font-size:22px;font-weight:700;line-height:1.25;margin-bottom:10px}.pricing-item p{color:#cf1717;font-size:24px;font-weight:700;line-height:1.2}.gallery{background:linear-gradient(90deg,#293133,#20272a)}.gallery__grid{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr))}.gallery__item{aspect-ratio:16/10;background-position:50%;background-size:cover;border:1px solid hsla(0,0%,100%,.1);border-radius:16px;transition:transform .45s ease,border-color .3s ease,filter .3s ease}.gallery__item:hover{border-color:rgba(207,23,23,.55);filter:saturate(1.08);transform:scale(1.03)}.reviews{background:#121212;background-image:url(../images/bg-pattern.svg);background-position:50%}.reviews__grid{display:grid;gap:32px;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:64px}.review-card{background:hsla(0,0%,7%,.4);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);min-height:206px;padding:33px;transition:transform .3s ease,border-color .3s ease}.review-card:hover{border-color:rgba(207,23,23,.4);transform:translateY(-5px)}.review-card p{color:hsla(0,0%,100%,.8);font-size:16px;line-height:1.5;margin-bottom:24px}.review-card strong{display:block;font-size:16px;font-weight:700;line-height:1.2;margin-bottom:8px}.review-card span{color:hsla(0,0%,100%,.7);font-size:16px;line-height:1.2}.stats{display:grid;gap:32px;grid-template-columns:repeat(3,minmax(0,1fr))}.stats article{background:hsla(0,0%,7%,.4);background:#cf1717;border:0;border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);min-height:144px;padding:32px;text-align:center;transition:transform .3s ease}.stats article:hover{transform:translateY(-5px)}.stats strong{color:#fff;display:block;font-size:48px;font-weight:700;line-height:1;margin-bottom:8px}.stats span{color:#fff;font-size:16px;line-height:1.3}.booking{background:linear-gradient(90deg,#293133,#20272a)}.booking__wrap{display:grid;gap:48px;grid-template-columns:1fr 1fr}.booking h2{font-size:48px;font-weight:700;line-height:1.02;margin-bottom:24px}.booking p{color:hsla(0,0%,100%,.8);font-size:18px;font-weight:500;line-height:1.4;margin-bottom:32px}.booking form{gap:14px}.booking form,.booking__field{display:flex;flex-direction:column}.booking__field{gap:8px}.booking__field label{color:hsla(0,0%,100%,.88);font-size:14px;font-weight:500;line-height:1.25}.booking__field .required-mark{color:#cf1717}.booking__submit{font-size:19px;font-weight:500;height:64px;line-height:1.2;margin-top:10px;padding:0 24px;width:100%}.booking__consent{align-items:flex-start;color:hsla(0,0%,100%,.8);display:flex;font-size:14px;font-weight:400;gap:10px;line-height:1.45;margin-top:2px}.booking__consent input[type=checkbox]{accent-color:#cf1717;flex:0 0 18px;height:18px;margin-top:2px;width:18px}.booking__consent a{color:#ffd2d2;text-decoration:underline;text-underline-offset:2px}.booking input,.booking select,.booking textarea{background:hsla(0,0%,7%,.35);border:1px solid hsla(0,0%,100%,.1);border-radius:14px;color:#fff;font-size:16px;font-weight:400;line-height:1.35;outline:none;padding:0 20px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.booking input:focus,.booking select:focus,.booking textarea:focus{border-color:rgba(207,23,23,.85);box-shadow:0 0 0 3px rgba(207,23,23,.25)}.booking input::-moz-placeholder,.booking select::-moz-placeholder,.booking textarea::-moz-placeholder{color:hsla(0,0%,100%,.45)}.booking input::placeholder,.booking select::placeholder,.booking textarea::placeholder{color:hsla(0,0%,100%,.45)}.booking input,.booking select{height:56px}.booking textarea{min-height:130px;padding:16px 20px;resize:vertical}.contacts-card,.hours-card{background:hsla(0,0%,7%,.4);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);padding:33px;transition:transform .3s ease,border-color .3s ease}.contacts-card:hover,.hours-card:hover{border-color:rgba(207,23,23,.4);transform:translateY(-4px)}.contacts-card{margin-bottom:32px}.contacts-card h3{font-size:24px;font-weight:700;line-height:1.05;margin-bottom:30px}.contacts-card ul{display:flex;flex-direction:column;gap:18px}.contacts-card li{align-items:flex-start;display:flex;gap:16px}.contacts-card__icon{flex:0 0 24px;height:24px;margin-top:2px;width:24px}.contacts-card__icon svg{display:block;height:24px;width:24px}.contacts-card__item-content strong{display:block;font-size:16px;font-weight:500;line-height:1.1;margin-bottom:8px}.contacts-card__item-content span{color:hsla(0,0%,100%,.8);font-size:16px;line-height:1.45}.hours-card h4{font-size:16px;font-weight:700;line-height:1.2;margin-bottom:16px}.hours-card p{font-size:16px;line-height:1.25;margin:0}.booking-modal{display:grid;inset:0;opacity:0;padding:20px;place-items:center;pointer-events:none;position:fixed;transition:opacity .25s ease,visibility .25s ease;visibility:hidden;z-index:60}.booking-modal.is-open{opacity:1;pointer-events:auto;visibility:visible}.booking-modal__overlay{backdrop-filter:blur(4px);background:radial-gradient(circle at 30% 10%,rgba(207,23,23,.2),transparent 55%),rgba(0,0,0,.72);inset:0;position:absolute}.booking-modal__content{background:linear-gradient(140deg,hsla(0,0%,100%,.03),hsla(0,0%,100%,0)),linear-gradient(165deg,#202a30,#181f24 62%);border:1px solid rgba(207,23,23,.52);border-radius:24px;box-shadow:0 26px 58px rgba(0,0,0,.52);padding:36px 30px 30px;position:relative;width:min(100%,620px)}.booking-modal__status{align-items:center;background:rgba(207,23,23,.18);border:1px solid rgba(207,23,23,.45);border-radius:16px;color:#ffd9d9;display:inline-flex;font-size:28px;font-weight:700;height:56px;justify-content:center;line-height:1;margin-bottom:18px;width:56px}.booking-modal__title{font-size:32px;font-weight:700;line-height:1.1;margin-bottom:12px;padding-right:42px}.booking-modal__text{color:hsla(0,0%,100%,.8);font-size:18px;font-weight:500;line-height:1.45;margin-bottom:24px}.booking-modal__actions{display:flex}.booking-modal__btn{min-width:220px}.booking-modal__close{background:hsla(0,0%,100%,.12);border:0;border-radius:50%;color:hsla(0,0%,100%,.92);cursor:pointer;font-size:22px;height:36px;line-height:1;position:absolute;right:14px;top:14px;transition:background-color .2s ease,transform .2s ease;width:36px}.booking-modal__close:hover{background:rgba(207,23,23,.34);transform:rotate(90deg)}.footer{background:#090a0f;border-top:1px solid rgba(207,23,23,.1);padding:64px 0 20px}.footer__top{display:grid;gap:36px;grid-template-columns:1.45fr 1fr 1.15fr 1fr;margin-bottom:48px}.footer__brand p{color:hsla(0,0%,100%,.65);font-size:14px;line-height:1.28;margin-top:16px;max-width:286px}.footer__contacts h4,.footer__nav h4,.footer__social h4{font-size:16px;font-weight:700;line-height:1.1;margin-bottom:16px}.footer__contacts a,.footer__contacts span,.footer__nav a,.footer__nav span,.footer__social a,.footer__social span{color:hsla(0,0%,100%,.65);display:block;font-size:14px;line-height:1.35}.footer__contacts a+a,.footer__contacts span+span,.footer__nav a+a,.footer__nav span+span,.footer__social a+a,.footer__social span+span{margin-top:10px}.footer__socials{display:flex;gap:12px}.footer__socials a{align-items:center;border:1px solid rgba(207,23,23,.5);border-radius:10px;color:hsla(0,0%,100%,.92);display:inline-flex;height:58px;justify-content:center;margin-top:0!important;transition:transform .25s ease,border-color .25s ease,background-color .25s ease;width:58px}.footer__socials a svg{display:block;height:24px;width:24px}.footer__socials a:hover{background:rgba(207,23,23,.15);border-color:rgba(207,23,23,.85);transform:translateY(-2px)}.footer__bottom{align-items:center;border-top:1px solid rgba(207,23,23,.35);display:flex;gap:24px;justify-content:space-between;padding-top:30px}.footer__bottom a,.footer__bottom span{color:hsla(0,0%,100%,.4);font-size:14px;line-height:1.3}.footer__legal{display:flex;gap:34px}@media only screen and (max-width:1600px){.hero__content{margin-left:auto}.hero h1{font-size:64px;line-height:1.15}}@media only screen and (max-width:1280px){.container{padding:0 20px}.header__nav{gap:20px;margin-right:20px}.hero__content{margin-left:280px;max-width:700px}.hero h1{font-size:56px}.hero p{font-size:18px;line-height:1.6}.section__head h2{font-size:40px}.section__head p{font-size:24px}.object-card__content h3{font-size:30px}.booking h2{font-size:48px}.contacts-card h3{font-size:24px}.contacts-card__item-content strong,.hours-card h4,.hours-card p{font-size:16px}.footer__brand p{font-size:28px}.footer__contacts h4,.footer__nav h4,.footer__social h4{font-size:16px}.footer__bottom a,.footer__bottom span,.footer__contacts a,.footer__contacts span,.footer__nav a,.footer__nav span,.footer__social a,.footer__social span{font-size:14px}}@media only screen and (max-width:1024px){.header__inner{min-height:64px}.header__nav{display:none}.hero{min-height:auto;padding:120px 0 80px}.hero__content{margin-left:0;max-width:100%;padding-top:0}.hero h1{font-size:48px;line-height:1.15}.hero h1,.hero p{max-width:640px}.hero__actions{flex-wrap:wrap}.footer__top,.gallery__grid,.highlights__grid,.infrastructure__grid,.reviews__grid,.services__grid,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.services__grid{max-width:none}.booking__wrap,.object-card{gap:24px;grid-template-columns:1fr}.object-card--reverse .object-card__content,.object-card--reverse .object-card__image{order:0}.section{padding:72px 0}.section__head{margin-bottom:40px}.booking__contacts{display:grid;gap:24px;grid-template-columns:1fr 1fr}.contacts-card{margin-bottom:0}.footer__bottom{align-items:flex-start;flex-direction:column}.footer__top{gap:28px;grid-template-columns:repeat(2,minmax(0,1fr))}.footer__brand p{font-size:22px;margin-top:18px}.footer__contacts h4,.footer__nav h4,.footer__social h4{font-size:30px;margin-bottom:16px}.footer__contacts a,.footer__contacts span,.footer__nav a,.footer__nav span,.footer__social a,.footer__social span{font-size:22px;line-height:1.32}.footer__bottom a,.footer__bottom span{font-size:14px}}@media only screen and (max-width:768px){.container{padding:0 16px}.btn{width:100%}.btn--small{width:auto}.hero{padding-top:108px}.hero h1{font-size:40px;max-width:100%}.hero p{font-size:16px;line-height:1.5;max-width:100%}.hero__tags li{white-space:normal}.hero__actions .btn--ghost{width:100%}.section__head h2{font-size:34px}.section__head p{font-size:20px;line-height:1.3}.booking__contacts,.footer__top,.gallery__grid,.highlights__grid,.infrastructure__grid,.reviews__grid,.services__grid,.stats{grid-template-columns:1fr}.booking h2,.feature-card h3,.object-card__content h3{font-size:24px}.booking input,.booking select{height:52px}.contacts-card h3{font-size:34px;margin-bottom:18px}.contacts-card__item-content span,.contacts-card__item-content strong{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__title{font-size:19px}.footer__brand p{font-size:16px;max-width:100%}.footer__contacts a,.footer__contacts h4,.footer__contacts span,.footer__nav a,.footer__nav h4,.footer__nav span,.footer__social a,.footer__social h4,.footer__social span{font-size:16px}.footer__bottom a,.footer__bottom span{font-size:14px}.stats strong{font-size:40px}.booking-modal__content{padding:28px 18px 22px}.booking-modal__status{border-radius:14px;font-size:24px;height:48px;margin-bottom:14px;width:48px}.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{gap:12px}.logo{height:24px;width:110px}.btn--small{font-size:13px;padding:10px 16px}.hero{padding-top:100px}.hero h1{font-size:34px}.hero__actions{gap:12px}.section{padding:64px 0}.section__head h2{font-size:32px}.section__head p{font-size:18px}.contacts-card,.feature-card,.hours-card,.info-card,.object-card__content,.review-card,.stats article{padding:24px}.object-card__image{min-height:260px}.service-card{min-height:142px;padding:16px}.service-card__title{font-size:18px}.service-card__description{font-size:14px;inset:0;opacity:1;padding:14px;transform:translateY(0)}.services__cta-btn{font-size:16px;width:100%}.footer__bottom .footer__legal{flex-direction:column;gap:12px}.footer__top{gap:20px}.footer__socials a{height:50px;width:50px}}@media (hover:none){.service-card{justify-content:center}.service-card__description{opacity:1;pointer-events:auto;position:absolute;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;scroll-behavior:auto!important;transition:none!important}.hero__content>*,.scroll-reveal{opacity:1!important}.scroll-reveal{transform:none!important}} \ No newline at end of file diff --git a/assets/images/other/_tmp_infra.png b/assets/images/other/_tmp_infra.png new file mode 100644 index 0000000..819729f Binary files /dev/null and b/assets/images/other/_tmp_infra.png differ diff --git a/assets/images/other/_tmp_services.png b/assets/images/other/_tmp_services.png new file mode 100644 index 0000000..b1b433f Binary files /dev/null and b/assets/images/other/_tmp_services.png differ diff --git a/assets/images/other/booking-section.webp b/assets/images/other/booking-section.webp new file mode 100644 index 0000000..9bcae98 Binary files /dev/null and b/assets/images/other/booking-section.webp differ diff --git a/assets/images/other/footer-section.webp b/assets/images/other/footer-section.webp new file mode 100644 index 0000000..c16beee Binary files /dev/null and b/assets/images/other/footer-section.webp differ diff --git a/assets/images/other/infrastructure-section.webp b/assets/images/other/infrastructure-section.webp new file mode 100644 index 0000000..4b5d627 Binary files /dev/null and b/assets/images/other/infrastructure-section.webp differ diff --git a/assets/images/other/services-section.webp b/assets/images/other/services-section.webp new file mode 100644 index 0000000..477d341 Binary files /dev/null and b/assets/images/other/services-section.webp differ diff --git a/assets/js/main.js b/assets/js/main.js index 7b5e773..f3828be 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -54,3 +54,107 @@ elements.forEach((element) => observer.observe(element)); })(); + +(() => { + const bookingForm = document.getElementById("booking-form"); + const successModal = document.getElementById("booking-success-modal"); + + if (!bookingForm || !successModal) return; + + const closeTriggers = Array.from(successModal.querySelectorAll("[data-modal-close]")); + + const openModal = () => { + successModal.classList.add("is-open"); + successModal.setAttribute("aria-hidden", "false"); + }; + + const closeModal = () => { + successModal.classList.remove("is-open"); + successModal.setAttribute("aria-hidden", "true"); + }; + + const triggerAnalytics = () => { + const eventName = "заявка"; + + const metrikaIdRaw = bookingForm.dataset.metrikaId || document.body.dataset.metrikaId || window.YANDEX_METRIKA_ID; + const metrikaId = Number(metrikaIdRaw); + + if (typeof window.ym === "function" && Number.isFinite(metrikaId) && metrikaId > 0) { + window.ym(metrikaId, "reachGoal", eventName); + } + + const legacyCounterKey = Object.keys(window).find((key) => { + return key.startsWith("yaCounter") && typeof window[key]?.reachGoal === "function"; + }); + + if (legacyCounterKey) { + window[legacyCounterKey].reachGoal(eventName); + } + + if (typeof window.gtag === "function") { + window.gtag("event", eventName, { + event_category: "lead", + event_label: "booking_form" + }); + } + + if (Array.isArray(window.dataLayer)) { + window.dataLayer.push({ + event: eventName, + event_category: "lead", + event_label: "booking_form" + }); + } + }; + + const triggerAutoReply = async (email) => { + if (!email) return; + + const autoReplyEndpoint = bookingForm.dataset.autoreplyEndpoint || window.BOOKING_AUTOREPLY_ENDPOINT; + if (!autoReplyEndpoint) return; + + try { + await fetch(autoReplyEndpoint, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ + email, + source: "booking-form" + }) + }); + } catch (error) { + // Auto-reply is optional and should not block form success. + console.error("Auto-reply request failed", error); + } + }; + + bookingForm.addEventListener("submit", async (event) => { + event.preventDefault(); + + if (!bookingForm.checkValidity()) { + bookingForm.reportValidity(); + return; + } + + const formData = new FormData(bookingForm); + const email = String(formData.get("email") || "").trim(); + + triggerAnalytics(); + await triggerAutoReply(email); + + bookingForm.reset(); + openModal(); + }); + + closeTriggers.forEach((trigger) => { + trigger.addEventListener("click", closeModal); + }); + + document.addEventListener("keydown", (event) => { + if (event.key === "Escape" && successModal.classList.contains("is-open")) { + closeModal(); + } + }); +})(); diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss index 9344f26..42ff7f2 100644 --- a/assets/scss/_base.scss +++ b/assets/scss/_base.scss @@ -14,6 +14,33 @@ body { body { line-height: 1; + font-weight: 400; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: $font-heading; + font-weight: 700; +} + +p, +li, +a, +input, +select, +textarea, +button, +span { + font-family: $font-main; +} + +strong, +b { + font-weight: 500; } a { @@ -134,7 +161,7 @@ img { 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; @@ -242,7 +269,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; @@ -350,7 +377,7 @@ img { h2 { font-size: 48px; - font-weight: 600; + font-weight: 700; line-height: 1.05; } @@ -563,24 +590,68 @@ 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: $radius-md; background: #1d252b; color: $color-text; - 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; - &:hover { + &__title { + display: block; + font-family: $font-heading; + font-size: 21px; + font-weight: 700; + line-height: 1.15; + position: relative; + z-index: 1; + transition: opacity 0.25s ease, transform 0.25s ease; + } + + &__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: $color-text-muted; + font-size: 15px; + font-weight: 500; + line-height: 1.45; + pointer-events: none; + transition: opacity 0.25s ease, transform 0.25s ease; + } + + &:hover, + &: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__title { + opacity: 0.25; + transform: scale(0.98); + } + + .service-card__description { + opacity: 1; + transform: translateY(0); + } } } @@ -757,46 +828,110 @@ img { h2 { margin-bottom: 24px; font-size: 48px; - font-weight: 600; + font-weight: 700; line-height: 1.02; } p { margin-bottom: 32px; color: $color-text-soft; - font-size: 16px; + font-size: 18px; + font-weight: 500; line-height: 1.4; } form { display: flex; flex-direction: column; - gap: 16px; + gap: 14px; + } - .btn { - width: 100%; - height: 60px; - margin-top: 4px; - padding: 0 24px; + &__field { + display: flex; + flex-direction: column; + gap: 8px; + + label { + color: rgba(255, 255, 255, 0.88); + font-size: 14px; + font-weight: 500; + line-height: 1.25; + } + + .required-mark { + color: $color-accent; } } - input { + &__submit { width: 100%; - height: 72px; + height: 64px; + margin-top: 10px; padding: 0 24px; + font-size: 19px; + font-weight: 500; + line-height: 1.2; + } + + &__consent { + display: flex; + align-items: flex-start; + gap: 10px; + margin-top: 2px; + color: $color-text-soft; + font-size: 14px; + font-weight: 400; + line-height: 1.45; + + input[type="checkbox"] { + width: 18px; + height: 18px; + margin-top: 2px; + accent-color: $color-accent; + flex: 0 0 18px; + } + + a { + color: #ffd2d2; + text-decoration: underline; + text-underline-offset: 2px; + } + } + + input, + select, + textarea { + width: 100%; + padding: 0 20px; border: 1px solid $color-border; border-radius: $radius-sm; background: rgba(18, 18, 18, 0.35); color: $color-text; 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; + + &:focus { + border-color: rgba(207, 23, 23, 0.85); + box-shadow: 0 0 0 3px rgba(207, 23, 23, 0.25); + } &::placeholder { color: rgba(255, 255, 255, 0.45); } + } - outline: none; + input, + select { + height: 56px; + } + + textarea { + min-height: 130px; + padding: 16px 20px; + resize: vertical; } } @@ -818,7 +953,7 @@ img { h3 { margin-bottom: 30px; font-size: 24px; - font-weight: 600; + font-weight: 700; line-height: 1.05; } @@ -852,7 +987,7 @@ img { display: block; margin-bottom: 8px; font-size: 16px; - font-weight: 600; + font-weight: 500; line-height: 1.1; } @@ -868,7 +1003,7 @@ img { h4 { margin-bottom: 16px; font-size: 16px; - font-weight: 600; + font-weight: 700; line-height: 1.2; } @@ -879,6 +1014,105 @@ img { } } +.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; + + &.is-open { + opacity: 1; + visibility: visible; + pointer-events: auto; + } + + &__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); + } + + &__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); + } + + &__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; + } + + &__title { + margin-bottom: 12px; + padding-right: 42px; + font-size: 32px; + font-weight: 700; + line-height: 1.1; + } + + &__text { + margin-bottom: 24px; + color: $color-text-soft; + font-size: 18px; + font-weight: 500; + line-height: 1.45; + } + + &__actions { + display: flex; + } + + &__btn { + min-width: 220px; + } + + &__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; + + &:hover { + background: rgba(207, 23, 23, 0.34); + transform: rotate(90deg); + } + } +} + .footer { border-top: 1px solid rgba(207, 23, 23, 0.1); background: #090a0f; @@ -907,7 +1141,7 @@ img { h4 { margin-bottom: 16px; font-size: 16px; - font-weight: 600; + font-weight: 700; line-height: 1.1; } @@ -986,7 +1220,7 @@ img { @include respond($bp-xxl) { .hero { &__content { - margin-left: 420px; + margin-left: auto; } h1 { @@ -1285,8 +1519,9 @@ img { } .booking { - input { - height: 60px; + input, + select { + height: 52px; } } @@ -1328,8 +1563,8 @@ img { font-size: 20px; } - .service-card { - font-size: 17px; + .service-card__title { + font-size: 19px; } .footer { @@ -1362,6 +1597,33 @@ img { .stats strong { font-size: 40px; } + + .booking-modal { + &__content { + padding: 28px 18px 22px; + } + + &__status { + width: 48px; + height: 48px; + border-radius: 14px; + font-size: 24px; + margin-bottom: 14px; + } + + &__title { + font-size: 26px; + } + + &__text { + font-size: 16px; + margin-bottom: 18px; + } + + &__btn { + min-width: 100%; + } + } } @include respond($bp-sm) { @@ -1422,8 +1684,20 @@ img { } .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 { @@ -1450,6 +1724,19 @@ img { } } +@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, diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss index c7cd92a..6659d57 100644 --- a/assets/scss/_fonts.scss +++ b/assets/scss/_fonts.scss @@ -1,3 +1,5 @@ -:root { +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@700&display=swap"); + +:root { color-scheme: dark; } diff --git a/assets/scss/_vars.scss b/assets/scss/_vars.scss index 4705b97..cc1f56e 100644 --- a/assets/scss/_vars.scss +++ b/assets/scss/_vars.scss @@ -7,7 +7,8 @@ $bp-lg: 1024px; $bp-md: 768px; $bp-sm: 520px; -$font-main: "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif; +$font-main: "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif; +$font-heading: "Montserrat", "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif; $color-bg: #121212; $color-surface: #293133; diff --git a/index.html b/index.html index 74257b1..96c5732 100644 --- a/index.html +++ b/index.html @@ -204,15 +204,33 @@

Широкий спектр возможностей для вашего спорта

- Аренда льда — почасовая или абонементом - Аренда залов — универсального, единоборств, хореографии, фитнес-зон - Сборы команд «под ключ» — лёд + зал + проживание + питание - Проведение турниров и соревнований - Корпоративные мероприятия и тимбилдинги - Фитнес — индивидуально, абонемент, групповые занятия + + Аренда льда + Почасовая аренда и абонементы. Подберём удобные слоты для тренировок и матчей. + + + Аренда залов + Универсальный, единоборств, хореографии и фитнес-зоны для команд и индивидуальных занятий. + + + Сборы команд под ключ + Лёд, зал, проживание и питание в одном комплексе без лишней логистики. + + + Турниры и соревнования + Подготовим площадки, организацию и инфраструктуру для событий любого уровня. + + + Корпоративные мероприятия + Спортивные тимбилдинги, активные форматы и сопровождение программы под задачи компании. + + + Фитнес + Индивидуальные тренировки, абонементы и групповые занятия с гибким расписанием. +
- Подобрать формат и время + Подобрать формат и время
@@ -300,22 +318,49 @@
-

Забронировать время

-

Заполните форму, и мы свяжемся с вами в ближайшее время для подтверждения заявки.

-
-
@@ -367,6 +412,19 @@
+ +