diff --git a/.gitignore b/.gitignore index 1558091f..840269ec 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,6 @@ node_modules # Generated files backstop_data -dist +dist/ .cache .parcel-cache diff --git a/README.md b/README.md index 302783df..fc9f0dd5 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # KateVR landing page (HARD) -**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** +**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** Implement landing page according to [Figma design](https://www.figma.com/file/Blpg4iapsI7fRqJeSp6DvK/KatVR?node-id=1%3A370) - Use BEM and SCSS @@ -25,7 +25,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Bl 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/layout_KateVR/). + [DEMO LINK](https://Voloshynd.github.io/layout_KateVR/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/dist/Inter_18pt-Medium.ea41692f.ttf b/dist/Inter_18pt-Medium.ea41692f.ttf new file mode 100644 index 00000000..71d90172 Binary files /dev/null and b/dist/Inter_18pt-Medium.ea41692f.ttf differ diff --git a/dist/Inter_18pt-Regular.e30a6851.ttf b/dist/Inter_18pt-Regular.e30a6851.ttf new file mode 100644 index 00000000..ce097c82 Binary files /dev/null and b/dist/Inter_18pt-Regular.e30a6851.ttf differ diff --git a/dist/Inter_28pt-Black.8fcab2d8.ttf b/dist/Inter_28pt-Black.8fcab2d8.ttf new file mode 100644 index 00000000..66a252f8 Binary files /dev/null and b/dist/Inter_28pt-Black.8fcab2d8.ttf differ diff --git a/dist/about-product-bg-image.3dce1473.svg b/dist/about-product-bg-image.3dce1473.svg new file mode 100644 index 00000000..7748c09f --- /dev/null +++ b/dist/about-product-bg-image.3dce1473.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dist/drop-down-arrow.3261b894.svg b/dist/drop-down-arrow.3261b894.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/dist/drop-down-arrow.3261b894.svg @@ -0,0 +1,3 @@ + + + diff --git a/dist/favicon.f01f68d4.svg b/dist/favicon.f01f68d4.svg new file mode 100644 index 00000000..61cb0d54 --- /dev/null +++ b/dist/favicon.f01f68d4.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/dist/footer-icon-facebook.a3526200.svg b/dist/footer-icon-facebook.a3526200.svg new file mode 100644 index 00000000..e4de883e --- /dev/null +++ b/dist/footer-icon-facebook.a3526200.svg @@ -0,0 +1,3 @@ + + + diff --git a/dist/footer-icon-reddit.859e3c9b.svg b/dist/footer-icon-reddit.859e3c9b.svg new file mode 100644 index 00000000..53bade5b --- /dev/null +++ b/dist/footer-icon-reddit.859e3c9b.svg @@ -0,0 +1,3 @@ + + + diff --git a/dist/footer-icon-twitter.b948b1c3.svg b/dist/footer-icon-twitter.b948b1c3.svg new file mode 100644 index 00000000..084900b8 --- /dev/null +++ b/dist/footer-icon-twitter.b948b1c3.svg @@ -0,0 +1,3 @@ + + + diff --git a/dist/footer-icon-youtube.0ee6c45e.svg b/dist/footer-icon-youtube.0ee6c45e.svg new file mode 100644 index 00000000..d0756ed2 --- /dev/null +++ b/dist/footer-icon-youtube.0ee6c45e.svg @@ -0,0 +1,4 @@ + + + + diff --git a/dist/get-in-touch-arrow.1a065f46.svg b/dist/get-in-touch-arrow.1a065f46.svg new file mode 100644 index 00000000..2e498579 --- /dev/null +++ b/dist/get-in-touch-arrow.1a065f46.svg @@ -0,0 +1,3 @@ + + + diff --git a/dist/header-image.42f5bd61.svg b/dist/header-image.42f5bd61.svg new file mode 100644 index 00000000..6f7e7505 --- /dev/null +++ b/dist/header-image.42f5bd61.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/dist/header-play-button-hover.b306a26f.svg b/dist/header-play-button-hover.b306a26f.svg new file mode 100644 index 00000000..39b113b6 --- /dev/null +++ b/dist/header-play-button-hover.b306a26f.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dist/header-play-button.114571ec.svg b/dist/header-play-button.114571ec.svg new file mode 100644 index 00000000..d1769410 --- /dev/null +++ b/dist/header-play-button.114571ec.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 00000000..684a4b97 --- /dev/null +++ b/dist/index.html @@ -0,0 +1 @@ +KateVR
Buy Now

THE NEW START OF
VR LOCOMOTION

Discover the most comprehensive VR Locomotion system, and unlock infinite motion in any games on any platforms!

1200$
Buy Now
FAQ Help
Previous Next

FREQUENTLY ASKED QUESTIONS

What makes KAT loco different from other systems?

Despite being approached from many different angles, all traditional VR Locomotion systems including roomscale, teleportation, and free locomotion failed to provide an optimal solution capable of integrating high immersion with convenience. KAT loco does all of that without repeating their flaws. Our system offers a complete and versatile solution for an affordable price what makes it a perfect choice for home-use. It is also 100% user friendly, wireless, universally compatible, and more! It even offers decoupled head and body directions!

Last updated: Wed, June 12 2019 7:07 PM UTC +03:00

Will it decrease my motion sickness?

Despite being approached from many different angles, all traditional VR Locomotion systems including roomscale, teleportation, and free locomotion failed to provide an optimal solution capable of integrating high immersion with convenience. KAT loco does all of that without repeating their flaws. Our system offers a complete and versatile solution for an affordable price what makes it a perfect choice for home-use. It is also 100% user friendly, wireless, universally compatible, and more! It even offers decoupled head and body directions!

Last updated: Wed, June 12 2019 7:07 PM UTC +03:00

Which VR headsets is it compatible with?

Despite being approached from many different angles, all traditional VR Locomotion systems including roomscale, teleportation, and free locomotion failed to provide an optimal solution capable of integrating high immersion with convenience. KAT loco does all of that without repeating their flaws. Our system offers a complete and versatile solution for an affordable price what makes it a perfect choice for home-use. It is also 100% user friendly, wireless, universally compatible, and more! It even offers decoupled head and body directions!

Last updated: Wed, June 12 2019 7:07 PM UTC +03:00

Is it compatible with Oculus Quest?

Despite being approached from many different angles, all traditional VR Locomotion systems including roomscale, teleportation, and free locomotion failed to provide an optimal solution capable of integrating high immersion with convenience. KAT loco does all of that without repeating their flaws. Our system offers a complete and versatile solution for an affordable price what makes it a perfect choice for home-use. It is also 100% user friendly, wireless, universally compatible, and more! It even offers decoupled head and body directions!

Last updated: Wed, June 12 2019 7:07 PM UTC +03:00

HOW CAN WE HELP YOU?

Welcome to our help center. Our goal is to make the process of getting acquainted and purchase as easy and pleasant as possible. Need help with your KAT VR loco product? Many product questions can be resolved by reviewing our Product Support FAQs.

Please also feel free to Contact Us directly should you need anything further. We’re happy to help.

+86-0571-86105373

MORE THAN GAMING!

This also made for people who are interested in...

EDUCATION

Create aducational simulations, trainings and much more with...

Create aducational simulations, trainings and much more with unlimited virtual space and minimum physical space

REAL ESTATE

Desighn architectural projects in a deeply realistic environment...

Desighn architectural projects in a deeply realistic environment allowing visitors to freely walk around, and feel their vibe

FITNESS

Combine business with pleasure, and discover countless ways...

Combine business with pleasure, and discover countless ways to stay fit while playing your favorite VR Games!

SOCIAL INTERACTIONS

Hang out with your friends in the virtual world when you can’t...

Hang out with your friends in the virtual world when you can’t meet space requirements

Place Order Pay Complete

Quantity

1 2 3 4 5

Price

1200$

Country*
Germany Poland Ukraine Spain Italy United States France England
Purchase
/
Purchase

Thank you for
your order!

Your order has been placed and is being processed. You will recive an email with the order details

Back to homepage

ABOUT PRODUCT

KAT loco is a foot-based VR locomotion system that gives complete physical control over lower-body actions, allowing you to freely walk, run, and carry out just any other movement in virtual reality.

Hello,

NICE TO MEET YOU!

KAT VR is an independent company dedicated to the research, development, and sales of VR Locomotion products and solutions. Founded in 2013, we have quickly grown to become one of the world’s leading professional suppliers of VR games’ & simulations’ equipment

TECH SPECS

SENSOR

Weight: 35g/1.23oz each
Dimension: 50mm/1.97in
24mm/0.94in
Light: LED lights

BATTERRIES

Type: Lthium-lon polymer batteries
Capacity: 370mAh
Battery life: 10h of continuous use 150 hours on stand by
Charging: Fast charging - 1 hour
Charging voltage and current: 5V = 0.5A

CONNECTION

Wireless: Bluetooth 4.2
Signal range: 5m
Receiver: USB 2.0 and above

WHY KAT LOCO?

UNIVERSALLY COMPATIBLE

KAT Loco offers universal compatibility across all major VR headsets and platforms...

KAT Loco offers universal compatibility across all major VR headsets and platforms allowing you to play any VR game with support for Free Locomotion

VR/PC CONTROL PANEL

Our Multifunctional Software allows for quick access to KAT Loco’s control panel both from...

Our Multifunctional Software allows for quick access to KAT Loco’s control panel both from a computer desktop, and directly from your VR headset.

WIRELESS SENSORS

What makes it even more advanced, KAT Loco is entirely wireless, and comes with a...

What makes it even more advanced, KAT Loco is entirely wireless, and comes with a complete system of algorithms, super durable batteries and more!

Buy Now

Have any questions?

GET IN TOUCH

Our manager will reply you within 15 minutes

+86-0571-86105373
\ No newline at end of file diff --git a/dist/kat-loco-first.16683935.svg b/dist/kat-loco-first.16683935.svg new file mode 100644 index 00000000..37e8765f --- /dev/null +++ b/dist/kat-loco-first.16683935.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/dist/kat-loco-second.143ba264.svg b/dist/kat-loco-second.143ba264.svg new file mode 100644 index 00000000..6188346d --- /dev/null +++ b/dist/kat-loco-second.143ba264.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/dist/kat-loco-third.f1f0852c.svg b/dist/kat-loco-third.f1f0852c.svg new file mode 100644 index 00000000..7850ac02 --- /dev/null +++ b/dist/kat-loco-third.f1f0852c.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/dist/main.a25c74b6.css b/dist/main.a25c74b6.css new file mode 100644 index 00000000..3bc173b1 --- /dev/null +++ b/dist/main.a25c74b6.css @@ -0,0 +1,2 @@ +.complete__title,.header__title{font-size:26px;line-height:130%;font-family:Inter,sans-serif}@media (min-width:1280px){.complete__title,.header__title{font-size:46px}}.faq__title,.get-in-touch__title,.help__title,.more-than__title,.nav__link,.product__company-title,.product__title,.tech-spec__title{font-size:21px;font-family:Inter,sans-serif}@media (min-width:1280px){.faq__title,.get-in-touch__title,.help__title,.more-than__title,.nav__link,.product__company-title,.product__title,.tech-spec__title{font-size:36px;line-height:100%}}.footer__logo,.top-bar__logo{display:block;background-position:50%;background-size:contain;background-repeat:no-repeat;cursor:pointer;transition:transform .5s ease}.get-in-touch__subtitle,.product__greeting{font-size:14px;font-family:Inter,sans-serif}.card__text,.faq__question-text--answer,.faq__question-text--question,.header__content,.header__footer,.help__description,.help__link,.more-than__description,.product__company-description,.product__description,.tech-spec__description{font-size:12px;font-family:Inter,sans-serif}@media (min-width:1280px){.card__text,.faq__question-text--answer,.faq__question-text--question,.header__content,.header__footer,.help__description,.help__link,.more-than__description,.product__company-description,.product__description,.tech-spec__description{font-size:14px}}@media (min-width:1920px){.card__text,.faq__question-text--answer,.faq__question-text--question,.header__content,.header__footer,.help__description,.help__link,.more-than__description,.product__company-description,.product__description,.tech-spec__description{font-size:16px;line-height:150%}}.footer__messengers-icon:hover,.top-bar__icon--arrow:hover,.top-bar__icon--close:hover,.top-bar__icon.top-bar__icon--menu:hover,.video-section__icon--close:hover{filter:brightness(0) saturate(100%) invert(64%) sepia(10%) saturate(3600%) hue-rotate(165deg) brightness(103%) contrast(103%)}.complete__title-part--bold,.faq__title-part--bold,.get-in-touch__title-part--bold,.header__title-part--bold,.help__title-part--bold,.kat-loco__title-part--bold,.more-than__title-part--bold,.product__company-title--bold,.product__title-part--bold,.tech-spec__title-part--bold{color:#fff;font-weight:900}.complete__title-part--light,.faq__title-part--light,.get-in-touch__title-part--light,.header__title-part--light,.help__title-part--light,.kat-loco__title-part--light,.more-than__title-part--light,.product__company-title--light,.product__title-part--light,.tech-spec__title-part--light{color:#05c2df;font-weight:400}.card__title:after,.kat-loco__feature-title:after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background-color:#fff;transition:width .3s ease}.card-data__input:-webkit-autofill,.get-in-touch__input:-webkit-autofill,.get-in-touch__textarea:-webkit-autofill,.purchase__input:-webkit-autofill{background-color:transparent!important;-webkit-text-fill-color:#fff;transition:background-color 5000s ease 0s;-webkit-box-shadow:0 0 0 1000px transparent inset}.card-data__input:-moz-autofill,.get-in-touch__input:-moz-autofill,.get-in-touch__textarea:-moz-autofill,.purchase__input:-moz-autofill{background-color:transparent!important;color:#fff!important}@font-face{font-family:Inter;src:url(Inter_18pt-Regular.e30a6851.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Inter;src:url(Inter_18pt-Medium.ea41692f.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:Inter;src:url(Inter_28pt-Black.8fcab2d8.ttf) format("truetype");font-weight:900;font-style:normal}.page{scroll-behavior:smooth}.page__body{margin:0;background:linear-gradient(90deg,#191536,#000);position:relative}.page__body:has(#complete:target),.page__body:has(#faq-section:target),.page__body:has(#help-section:target),.page__body:has(#pay:target),.page__body:has(#purchase:target),.page__body:has(#video-section:target){overflow:hidden}.page__body:has(#faq-section:target):after,.page__body:has(#help-section:target):after,.page__body:has(#video-section:target):after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);z-index:998}.page__card-data,.page__complete,.page__fixed-overlay,.page__menu,.page__purchase{position:fixed;top:0;right:0;left:0;opacity:0;pointer-events:none;transition:opacity .5s ease}.page__card-data:target,.page__complete:target,.page__fixed-overlay:target,.page__menu:target,.page__purchase:target{opacity:1;pointer-events:all}.page__menu--faq,.page__menu--help{overflow-y:auto}.btn{display:flex;align-items:center;justify-content:center;background-color:#05c2df;text-decoration:none;font-family:Inter,sans-serif;color:#fff;font-weight:500;font-size:14px;line-height:130%;width:100%;max-width:458px;height:40px;border-radius:4px;padding:0;cursor:pointer;transition:background-color .5s ease,color .5s ease;z-index:998}.btn:hover{color:#05c2df;background-color:#fff}.btn.disabled{background-color:#191536;color:#929292;cursor:not-allowed}.top-bar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:18px 20px}@media (min-width:1280px){.top-bar{padding:64px 110px}}@media (min-width:1920px){.top-bar{padding:60px 234px}}.top-bar__logo{width:58px;height:12px;background-image:url(top-bar-logo.41d137af.svg)}@media (min-width:768px){.top-bar__logo{width:67px;height:14px}}@media (min-width:1280px){.top-bar__logo{width:76px;height:16px}}.top-bar__logo:hover{transform:scale(1.2)}.top-bar__lang-choice{background-color:#191536;color:#05c2df;font-size:16px;line-height:130%;font-weight:500;font-family:Inter,sans-serif;border:none;outline:none;width:35px;overflow-y:auto;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(top-bar-arrow-down.3261b894.svg);background-repeat:no-repeat;background-position:right 10px;background-size:9px 6px;display:none}.top-bar__lang-choice:focus{outline:none}@media (min-width:1280px){.top-bar__lang-choice{display:block}}.top-bar__icon{width:20px;height:9px;background-image:url(top-bar-menu-icon.e1938ab6.svg);background-position:50%;background-size:contain;background-repeat:no-repeat}@media (min-width:768px){.top-bar__icon{width:30px;height:14px}}.top-bar__icon--close{width:17px;height:17px;background-image:url(top-bar-close-icon.4dbf2d62.svg);margin-left:auto;transition:.5s ease}.top-bar__icon--arrow{width:8.5px;height:17px;background-image:url(top-bar-arrow-icon.5b9c2a75.svg);margin-right:auto}.top-bar__icon.top-bar__icon--menu{display:block}@media (min-width:1280px){.top-bar__icon.top-bar__icon--menu{display:none}}.top-bar__short-nav ul:first-of-type{display:none}@media (min-width:1280px){.top-bar__short-nav ul:first-of-type{display:flex;flex-direction:row;column-gap:36px}}.top-bar__short-nav ul:first-of-type li a{font-size:16px;line-height:130%;font-weight:500}.top-bar__btn{display:none}@media (min-width:1280px){.top-bar__btn{display:flex;max-width:200px;height:48px}}@media (min-width:1280px){.top-bar__controls{width:100%;display:flex;justify-content:space-between;padding-inline:34px}}.short-nav__list{padding:0;margin:0;display:flex;flex-direction:column;row-gap:12px;font-family:Inter,sans-serif}@media (min-width:768px){.short-nav__list{display:flex;flex-direction:row;column-gap:45px}}.short-nav__item{list-style:none;position:relative;width:fit-content}.short-nav__link{font-size:13px;line-height:150%;font-weight:400;font-family:Inter,sans-serif;color:#fff;text-decoration:none;cursor:pointer}@media (min-width:768px){.short-nav__link{font-size:14px}}.short-nav__link:hover{color:#05c2df}.short-nav__link:after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background-color:#05c2df;transition:width .3s ease}.short-nav__link:hover:after{width:100%}@media (min-width:768px){.header__wrapper{display:flex;flex-direction:row;align-items:center}}.header__image{display:none;height:50vh;background-position:50%;background-size:100% 100%;background-repeat:no-repeat;transition:none}@media (min-width:768px){.header__image{order:2;flex-basis:65%}}.header__bottom{padding-inline:20px;display:flex;flex-direction:column;align-items:center}@media (min-width:768px){.header__bottom{align-items:start;flex-basis:35%;padding:55px 0 70px 30px}}@media (min-width:1280px){.header__bottom{padding:64px 0 93px 110px;flex-basis:45%}}@media (min-width:1920px){.header__bottom{padding:60px 0 212px 234px;flex-basis:45%}}.header__title{margin:0 0 17px;text-align:center}@media (min-width:768px){.header__title{text-align:left}}@media (min-width:1280px){.header__title{margin-bottom:35px}}.header__content{color:#929292;font-weight:500;margin:0 0 8px;text-align:center}@media (min-width:768px){.header__content{text-align:left;margin-bottom:10px}}@media (min-width:1280px){.header__content{width:336px;margin-bottom:30px;margin-left:92px}}@media (min-width:1920px){.header__content{font-size:20px}}.header__price{color:#fff;font-size:18px;font-weight:500;font-family:Inter,sans-serif;margin-bottom:16px;text-align:center}@media (min-width:768px){.header__price{margin-bottom:30px}}@media (min-width:1280px){.header__price{margin-bottom:45px;margin-left:92px}}@media (min-width:1920px){.header__price{font-size:20px}}.header__cta{display:inline-block;cursor:pointer;transition:transform .5s ease-in-out}.header__cta:hover{transform:scale(1.1)}.header__cta-image{height:auto;object-fit:contain;object-position:center;display:block}.header__btn{transform:translateY(50%)}@media (min-width:768px){.header__btn{position:fixed;width:458px;height:48px;opacity:0;bottom:40px;left:50%;z-index:1000;transform:translateX(-50%);animation:fadeInUp .8s ease-out .2s forwards;pointer-events:auto}}@media (min-width:1280px){.header__btn{display:none}}.header__footer{display:none}@media (min-width:1280px){.header__footer{display:flex;flex-direction:row;justify-content:space-between;padding:0 110px 84px}}@media (min-width:1920px){.header__footer{padding:0 234px 108px}}.header__footer-block--support{display:flex;flex-direction:row;column-gap:39px}.header__footer-block--support .header__footer-link{transition:color .5s ease}.header__footer-block--support .header__footer-link:hover{color:#05c2df}.header__footer-block--social{animation:moveUpDown 1.2s ease-in-out infinite}.header__footer-block--pagination{display:flex;flex-direction:row;column-gap:103px;border-bottom:1px solid #212121}.header__footer-block--pagination .header__footer-link{transition:color .3s ease,border-bottom .3s ease}.header__footer-block--pagination .header__footer-link:hover{color:#05c2df;border-bottom:1px solid #05c2df}.header__footer-block--pagination:has(.header__footer-link:target) .header__footer-link{color:inherit;border-bottom:none}.header__footer-link{color:#fff;text-decoration:none;cursor:pointer}.header__footer-icon{display:flex;flex-direction:column;align-items:center;text-decoration:none;padding-bottom:7px;color:#05c2df;position:relative;transition:color .5s ease}.header__footer-icon:after{content:"";position:absolute;bottom:0;width:9px;height:6px;background-image:url(top-bar-arrow-down.3261b894.svg);background-size:contain;background-repeat:no-repeat}.header__footer-icon:hover{color:#fff;filter:brightness(0) invert(1)}#prev{background-image:url(header-image.42f5bd61.svg)}#next{background-image:url(second-header-image.4f2be26c.svg)}body:not(:has(:target)) #prev{display:block}body:has(:target):not(:has(#next:target)) #prev{display:block;animation:fadeInImage .8s ease-out forwards}#next:target,#prev:target{display:block;animation:fadeInImage .8s ease-out forwards}#next:target~#prev,#prev:target~#next{display:none}@keyframes fadeInImage{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes moveUpDown{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}body:has(#next:target) .header__footer-link[href="#next"],body:has(#prev:target) .header__footer-link[href="#prev"]{color:#929292;border-bottom:1px solid #05c2df}.video-button__cta{cursor:pointer;transition:transform 1s ease;background-color:transparent;width:100%;height:66px;background-image:url(header-play-button.114571ec.svg);background-repeat:no-repeat;background-size:contain}@media (min-width:321px){.video-button__cta{background-position:50%}}@media (min-width:768px){.video-button__cta{background-position:0}}@media (min-width:1280px){.video-button__cta{margin-left:92px}}.video-button__cta:hover{transform:scale(1.1);background-image:url(header-play-button-hover.b306a26f.svg)}.more-than{background-color:#05040b;padding:50px 20px;transition:opacity .8s ease,transform .8s ease}@media (min-width:1280px){.more-than{display:none;padding:100px 110px}}@media (min-width:1920px){.more-than{padding:158px 234px}}.more-than:target{display:block;animation:fadeInSlideUp 1.2s ease forwards}.more-than__title{margin:0 0 12px;text-align:center}@media (min-width:1280px){.more-than__title{margin-bottom:16px}}.more-than__description{color:#05c2df;height:30px;margin:0 0 30px;text-align:center}@media (min-width:1280px){.more-than__description{margin-bottom:83px}}@media (min-width:1920px){.more-than__description{margin-bottom:70px}}.more-than__cards{display:flex;flex-direction:column;row-gap:20px}@media (min-width:768px){.more-than__cards{gap:40px 20px;flex-direction:row;flex-wrap:wrap}}@media (min-width:1280px){.more-than__cards{flex-wrap:nowrap;column-gap:20px;row-gap:unset}}@keyframes fadeInSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card{display:flex;flex-direction:column;cursor:pointer;transition:width .3s ease;align-items:start}@media (min-width:768px){.card{align-items:center;flex:0 1 calc(50% - 40px);min-width:calc(50% - 10px)}}@media (min-width:1280px){.card{flex:unset;min-width:250px}}.card__title{font-family:Inter,sans-serif;font-size:16px;font-weight:900;color:#fff;margin:0 0 11px;position:relative}@media (min-width:768px){.card__title{margin-bottom:18px;align-self:unset}}.card:hover .card__title:after{width:100%}.card__text{font-weight:400;color:#929292;margin:0}@media (min-width:768px){.card__text{text-align:center}}@media (min-width:768px){.card__text--short{display:none}}.card__text--full{display:none}@media (min-width:768px){.card__text--full{display:block}}.card__sign{display:none}@media (min-width:768px){.card__sign{display:block;width:100%;margin-bottom:22px;background-position:50%;background-size:contain;background-repeat:no-repeat}.card__sign--education{height:81px;background-image:url(more-than-education.4fa3d8d6.svg)}.card__sign--real-estate{height:84px;background-image:url(more-than-real-estate.2fa4e38f.svg)}.card__sign--fitness{height:81px;background-image:url(more-than-fitness.cb8f64d6.svg)}.card__sign--social-interactions{height:83px;background-image:url(more-than-social-interactions.7818222f.svg)}}.video-section{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;height:40vh;background-color:transparent;z-index:999;opacity:0;pointer-events:none;border-radius:8px;transition:opacity .3s ease;box-sizing:border-box}.video-section__wrapper{width:100%;height:100%;position:relative}.video-section__iframe{width:100%;height:100%;border:none}.video-section__icon{position:absolute;z-index:1000;display:block;width:20px;height:20px;margin:6px;background-size:contain;background-position:50%;background-repeat:no-repeat;cursor:pointer;right:0}.video-section__icon--close{background-image:url(top-bar-close-icon.4dbf2d62.svg)}#video-section:target{display:block;opacity:1;pointer-events:auto;animation:fadeInOverlay .4s ease forwards}.menu{height:100vh;background-color:#191536;z-index:1000;transform:translateX(-100%);transition:transform .5s ease-in-out,opacity .5s ease-in-out,visibility .5s}.menu:target{transform:translateX(0);opacity:1;visibility:visible}.menu__top-bar{padding-bottom:38px}.menu__top-bar--faq,.menu__top-bar--help{padding-bottom:20px}.nav{height:100%}.nav__list{margin:0;padding:0;list-style:none}.nav__item{cursor:pointer;padding-inline:20px}.nav__item:hover{background-color:#110e25}.nav__link{display:block;color:#fff;text-decoration:none;font-weight:500;padding-block:11px}.nav__link:hover{color:#05c2df}.faq{padding-inline:20px}.faq__title{margin:0 0 30px}.faq__wrapper{display:flex;flex-direction:column;row-gap:13px}.faq__question{border:1px solid #05c2df;border-radius:4px}.faq__question-text{margin:0;cursor:pointer}.faq__question-text--question{display:block;color:#05c2df;padding:18px 12px;text-decoration:none}.faq__question-text--answer{color:#929292;margin-bottom:10px;display:block;max-height:0;overflow:hidden;opacity:0;padding:0 12px;transition:max-height 1.2s ease,opacity 1.2s ease,padding 1.2s ease-in-out}.faq__question[open] .faq__question-text--answer{display:block;padding-inline:12px;opacity:1;max-height:100%}.faq__question[open] .faq__question-text--question{margin-bottom:18px;margin-top:2px}.faq__question-meta{margin:0;color:#545454;font-size:12px;line-height:150%}.faq-section{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-height:90vh;background-color:#191536;z-index:999;overflow-y:auto;padding-bottom:20px;opacity:0;pointer-events:none;border-radius:8px;transition:opacity .3s ease}.faq-section__top-bar{padding:18px 20px}#faq-section:target{display:block;opacity:1;pointer-events:auto;animation:fadeInOverlay .4s ease forwards}.help__wrapper{padding-inline:20px;padding-bottom:73px}.help__title{margin:0 0 30px}.help__description{color:#929292;margin:0 0 30px}.help__nav{margin-bottom:30px}.help__link{color:#05c2df;text-decoration:none;cursor:pointer}.help__list{list-style:none;padding:0;margin:0;row-gap:20px}.help__address,.help__list{display:flex;flex-direction:column}.help__address{font-family:Inter,sans-serif}.help__address :first-child{margin-bottom:11px}.help__address :nth-child(2){margin-bottom:8px}.help__email,.help__phone{color:#929292;text-decoration:none;font-size:16px}.help-section{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-height:90vh;background-color:#191536;z-index:999;opacity:0;pointer-events:none;border-radius:8px;transition:opacity .3s ease}.help-section__top-bar{padding:18px 20px}@keyframes fadeInOverlay{0%{opacity:0;transform:translate(-50%,calc(-50% + 20px))}to{opacity:1;transform:translate(-50%,-50%)}}#help-section:target{display:block;opacity:1;pointer-events:auto;animation:fadeInOverlay .4s ease forwards}.purchase{background:inherit;height:100vh;z-index:1000;transform:translateX(-100%);transition:transform .5s ease-in-out,opacity .5s ease-in-out,visibility .5s}.purchase:target{transform:translateX(0);opacity:1;visibility:visible;overflow:auto}.purchase__top-bar>:last-child{width:15px;height:15px}.purchase__steps{display:flex;flex-direction:row;height:33px;width:100%}.purchase__steps:not(:has(.purchase__step:target)) .purchase__step--place-order{border-bottom:1px solid #05c2df}.purchase__step{flex:1;text-align:center;display:flex;align-items:center;justify-content:center;display:block;list-style:none;color:#05c2df;text-decoration:none;font-size:12px;font-weight:500;line-height:130%;font-family:Inter,sans-serif;cursor:pointer;border-bottom:1px solid transparent;transition:border-bottom .5s ease}@media (min-width:768px){.purchase__step{font-size:14px;font-size:16px}}.purchase__step:hover,.purchase__step:target{border-bottom:1px solid #05c2df}.purchase__form{padding:30px 20px 37px}@media (min-width:768px){.purchase__form{padding-inline:34px}}@media (min-width:1280px){.purchase__form{display:flex;padding-block:60px;padding-inline:110px;flex-direction:row;column-gap:20px;padding-block:120px;padding-inline:234px}}.purchase__form-fields{display:flex;flex-direction:column;row-gap:30px;align-items:center}@media (min-width:1280px){.purchase__form-fields{width:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,1fr);column-gap:20px;row-gap:0}}.purchase__label,.purchase__select{line-height:130%;cursor:pointer}.purchase__select{margin-top:13px;height:47px;font-size:16px;color:#fff;margin-bottom:3px;background-color:#191536;padding-left:24px;font-family:Inter,sans-serif;display:flex;align-items:center;background-image:url(drop-down-arrow.3261b894.svg);background-repeat:no-repeat;background-position:right 10px center}.purchase__dropdown{background-color:#191536;display:flex;flex-direction:column;position:absolute;width:100%;height:160px;display:none;overflow-y:scroll}.purchase__dropdown.active{display:block;z-index:999}.purchase__dropdown::-webkit-scrollbar{width:1px}.purchase__dropdown::-webkit-scrollbar-track{background:#014954}.purchase__dropdown::-webkit-scrollbar-thumb{background-color:#05c2df;border-radius:1px}.purchase__dropdown--city{background-color:#191536;display:flex;flex-direction:column;position:absolute;width:100%;height:160px;display:none;overflow-y:scroll}.purchase__dropdown--city.active{display:block;z-index:999}.purchase__dropdown--city::-webkit-scrollbar{width:1px}.purchase__dropdown--city::-webkit-scrollbar-track{background:#014954}.purchase__dropdown--city::-webkit-scrollbar-thumb{background-color:#05c2df;border-radius:1px}.purchase__value{display:block;text-decoration:none;color:#fff;font-size:16px;line-height:130%;font-family:Inter,sans-serif;padding:4px 24px}.purchase__value:hover{background-color:#222}.purchase__value--empty{height:20px}@media (min-width:1280px){.purchase__btn{width:200px;height:48px}}.purchase__field,.purchase__group{position:relative;width:100%}.purchase__input{background-color:transparent;border:none;border-bottom:1px solid #929292;width:100%;box-sizing:border-box;font-size:14px;line-height:150%;font-weight:400;color:#fff;padding:0 0 6px;cursor:pointer}.purchase__input:focus{outline:none;border-bottom:1px solid #05c2df}.purchase__input:focus+.purchase__label{top:0;transform:translateY(-100%);color:#05c2df}.purchase__label{position:absolute;left:0;font-size:14px;line-height:150%;font-weight:400;color:#fff;font-family:Inter,sans-serif;box-sizing:border-box;transform:translateY(-70%);color:#929292;pointer-events:none;transition:all .3s ease}@media (min-width:1280px){.purchase__field{margin-top:16px}}.order__form{width:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:30px}@media (min-width:1280px){.order__form{padding-bottom:0}}.order__form-details{display:flex;flex-direction:row;column-gap:75px}.order__form-container{display:flex;flex-direction:row;justify-content:center;width:100%}.order__form-container__image{display:none}@media (min-width:768px){.order__form-container__image{display:block;width:100%;min-height:200px;background-image:url(header-image.42f5bd61.svg);background-position:50%;background-size:contain;background-repeat:no-repeat}}.order__label{color:#929292;font-size:16px;line-height:130%;font-family:Inter,sans-serif;font-weight:400;margin:0 0 10px}.order__quantity .order__label{margin-left:6px}.order__price .order__label{margin-left:16px}.order__quantity-wrapper{position:relative}.order__quantity-value{color:#fff;font-size:20px;line-height:130%;font-family:Inter,sans-serif;font-weight:400}.order__price-value{color:#05c2df;margin:0;font-size:26px;font-weight:500}.order__price-value,.order__quantity-select{font-family:Inter,sans-serif;text-align:center}.order__quantity-select{background-color:#191536;color:#fff;font-size:20px;line-height:130%;width:90px;height:47px;margin-bottom:3px;outline:none;border:none;caret-color:#05c2df;background-image:url(order-quantity-arrow-icon.3261b894.svg);background-repeat:no-repeat;background-position:right 10px center;background-size:9px 6px;cursor:pointer}.order__quantity-select::-webkit-inner-spin-button,.order__quantity-select::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.order__quantity-options{background-color:#191536;border-radius:4px;overflow-y:auto;height:109px;position:absolute;width:100%;display:none}.order__quantity-options.active{display:block}.order__quantity-options::-webkit-scrollbar{width:1px}.order__quantity-options::-webkit-scrollbar-track{background:#014954}.order__quantity-options::-webkit-scrollbar-thumb{background-color:#05c2df;border-radius:1px}.order__quantity-option{display:block;text-decoration:none;color:#fff;text-align:center;font-size:20px;line-height:130%;font-family:Inter,sans-serif;padding-block:4px;cursor:pointer}.order__quantity-option:hover{background-color:#222}.card-data{background:inherit;height:100vh;z-index:1000;transition:transform .5s ease-in-out,opacity .5s ease-in-out,visibility .5s}.card-data:target{transform:translateX(0);opacity:1;visibility:visible;overflow:auto}.card-data__content{display:flex;justify-content:center}.card-data__form{min-width:280px;padding-inline:20px;padding-bottom:37px}@media (min-width:1280px){.card-data__form{padding-top:60px}}.card-data__container{display:flex;flex-direction:column;row-gap:30px}.card-data__group{position:relative;width:100%;display:flex;flex-direction:row;top:0}.card-data__group--card-number{column-gap:2px}.card-data__group--card-owner .card-data__input:focus+.card-data__label{transform:translateY(-80%);color:#05c2df}.card-data__group--cvv .card-data__input:focus+.card-data__label{transform:translateY(-100%);color:#05c2df}.card-data__group--card-number:focus-within .card-data__label{transform:translateY(-100%);color:#05c2df}.card-data__group--EXP:focus-within .card-data__label{transform:translateY(-100%);color:#05c2df}.card-data__label{position:absolute;left:0;font-size:14px;line-height:150%;font-weight:400;color:#fff;font-family:Inter,sans-serif;box-sizing:border-box;color:#929292;pointer-events:none;transition:all .3s ease;transform:translateY(-90%)}.card-data__label--card-number{transform:translateY(-80%)}.card-data__label--card-owner{transform:translateY(-70%)}.card-data_inputs{display:flex;flex-direction:row;justify-content:space-between}.card-data__input{width:6ch;background-color:transparent;border:none;border-bottom:1px solid #929292;width:100%;box-sizing:border-box;font-size:14px;line-height:150%;font-weight:400;color:#fff;padding:0 0 6px;resize:none;cursor:pointer}.card-data__input::-webkit-inner-spin-button,.card-data__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.card-data__input:hover{outline:none;border-bottom:1px solid #05c2df}.card-data__input::placeholder{text-align:center}.card-data__extra{display:flex;flex-direction:row;margin-bottom:40px;column-gap:60px;font-family:Inter,sans-serif}.card-data__separator{font-size:18px;line-height:130%;color:#929292}.complete{padding:90px 20px;background:inherit;height:100vh;z-index:1000;transform:translateX(-100%);transition:transform .5s ease-in-out,opacity .5s ease-in-out,visibility .5s}@media (min-width:768px){.complete{padding-inline:34px}}@media (min-width:1280px){.complete{padding-inline:110px}}@media (min-width:1920px){.complete{padding-inline:234px}}.complete:target{transform:translateX(0);opacity:1;visibility:visible;overflow:auto}.complete__wrapper{display:flex;flex-direction:column;align-items:center}.complete__title{text-align:center;text-transform:uppercase;font-weight:900;margin:0 0 16px}.complete__message{font-size:16px;line-height:130%;font-family:Inter,sans-serif;text-align:center;color:#fff;margin:0 0 30px}.product{padding:50px 20px}@media (min-width:768px){.product{padding:70px 34px 50px}}@media (min-width:1280px){.product{padding:0}}.product__about{display:flex;flex-direction:column}@media (min-width:768px){.product__about{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:start}}@media (min-width:1280px){.product__about{padding:100px 118px 183px 246px;column-gap:109px}}@media (min-width:1920px){.product__about{padding:147px 234px 176px 466px;column-gap:117px}}.product__title{order:1;margin:0 0 20px;line-height:100%;font-family:Inter,sans-serif}@media (min-width:768px){.product__title{grid-column:2/-1;grid-row:1/2;margin-bottom:30px}}@media (min-width:1920px){.product__title{margin-bottom:32px}}.product__slider{order:2;margin-bottom:20px}@media (min-width:768px){.product__slider{grid-column:1/2;grid-row:1/4}}.product__slider-container{width:100%;height:189px;object-fit:cover;object-position:center;position:relative}.product__slider-container:has(.product__slider-video:first-of-type:not(:target)):not(:has(.product__slider-video:target)) .product__slider-video:first-of-type{opacity:1;pointer-events:auto;z-index:1}.product__slider-video{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;border:none;transition:opacity .5s ease-in-out}.product__slider-video:target{opacity:1;pointer-events:auto;z-index:1}.product__slider-nav{display:flex;flex-direction:row;justify-content:center;column-gap:6px;position:absolute;bottom:-14px;left:50%;transform:translateX(-50%)}.product__slider-dot{width:4px;height:4px;border-radius:50%;background-color:#484848}.product__slider:not(:has(:target)) .product__slider-dot[href="#img1"]{background-color:#ababab}.product__description{margin:0 0 24px;color:#929292;order:3}@media (min-width:768px){.product__description{grid-column:2/-1;grid-row:2/3;margin-bottom:30px}}@media (min-width:1280px){.product__description{margin-bottom:20px}}@media (min-width:1920px){.product__description{margin-bottom:32px}}.product__video-button{display:block;margin-bottom:79px;order:4}@media (min-width:768px){.product__video-button{grid-column:2/-1;grid-row:3/4;margin-bottom:84px}}@media (min-width:1280px){.product__video-button{margin:0}}.product__video-button:hover{transform:scale(1.06)}.product__greeting{display:block;color:#05c2df;margin-bottom:11px}@media (min-width:1280px){.product__greeting{margin-bottom:15px}}.product__company-wrapper{display:grid;grid-template-columns:1fr 1fr}@media (min-width:768px){.product__company-wrapper{grid-template-columns:1fr 1fr 1fr;column-gap:10px}}@media (min-width:1280px){.product__company-wrapper{padding:0 132px 98px 109px;column-gap:112px}}@media (min-width:1920px){.product__company-wrapper{padding:0 256px 156px 327px;column-gap:100px}}.product__company{grid-column:1/-1}@media (min-width:768px){.product__company{grid-column:1/3;grid-row:3/4}}@media (min-width:1280px){.product__company{grid-column:1/2;min-width:429px}}@media (min-width:1920px){.product__company{grid-column:1/2}}.product__company-description{margin:0;color:#929292}@media (min-width:1280px){.product__company-description{text-align:justify}}.product__company-title{margin:0 0 22px;line-height:100%;font-family:Inter,sans-serif}@media (min-width:1280px){.product__company-title{margin-bottom:32px}}.product__image-block{display:none}@media (min-width:768px){.product__image-block{display:block;width:100%;min-height:256px;background-image:url(about-product-bg-image.3dce1473.svg);background-size:contain;background-position:50%;background-repeat:no-repeat;grid-column:3/4;grid-row:1/4}}@media (min-width:1280px){.product__image-block{grid-column:2/4}}@media (min-width:1920px){.product__image-block{grid-column:2/4}}#img1:target~.product__slider-nav a[href="#img1"],#img2:target~.product__slider-nav a[href="#img2"],#img3:target~.product__slider-nav a[href="#img3"],#img4:target~.product__slider-nav a[href="#img4"],#img5:target~.product__slider-nav a[href="#img5"]{background-color:#ababab}.tech-spec{padding:50px 20px;background-color:#05040b}@media (min-width:1280px){.tech-spec{padding:100px 112px}}@media (min-width:1920px){.tech-spec{padding:160px 319px 160px 426px}}.tech-spec__title{margin:0 0 30px;line-height:100%}@media (min-width:1280px){.tech-spec__title{text-align:end;margin-right:73px;margin-bottom:80px}}.tech-spec__title-part{margin:0 0 30px;font-size:21px;font-family:Inter,sans-serif}.tech-spec__images-wrapper{display:grid;position:relative}@media (min-width:1280px){.tech-spec__images-wrapper{grid-template-columns:repeat(12,1fr);column-gap:20px;align-items:end;height:355px}}.tech-spec__container{display:block;width:197px;height:194px;background-image:url(tech-spec-bg.c98da7a2.svg);background-size:contain;background-position:50%;background-repeat:no-repeat;position:relative;margin:0 auto}@media (min-width:1280px){.tech-spec__container{width:297px;height:294px;grid-column:4/span 6}.tech-spec__container:before{display:block;content:"";background-repeat:no-repeat;background-size:contain;background-image:url(tech-spec-elips-line.2380478d.svg);width:48px;height:340px;position:absolute;top:35px;left:-10px}}@media (min-width:1280px) and (min-width:1920px){.tech-spec__container:before{width:40px;height:201px;top:80px;left:-15px}}@media (min-width:1920px){.tech-spec__container{width:312px;height:340px}}.tech-spec__button{display:block;width:34px;height:34px;background-image:url(tech-spec-button-plus.975962b0.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;cursor:pointer}@media (min-width:1280px){.tech-spec__button{display:none}}.tech-spec__button-plus.active{background-image:url(tech-spec-button-minus.0f373acb.svg)}.tech-spec__button-plus--1{position:absolute;top:-10px;left:60px}.tech-spec__button-plus--2{position:absolute;top:80px;left:140px}.tech-spec__button-plus--3{position:absolute;top:160px;left:-15px}.tech-spec__description{display:none;background-color:#191536;color:#929292;padding:17px 10px 22px;width:max-content;min-height:max-content;opacity:.9;position:absolute;z-index:999;top:50%;left:50%;transform:translate(-50%,-50%)}@media (min-width:1280px){.tech-spec__description{display:flex;flex-direction:column;flex-wrap:wrap;background-color:transparent;padding:0;text-align:left}}.tech-spec__description-title{display:none;color:#fff;margin:0}@media (min-width:1280px){.tech-spec__description-title{display:block;font-size:18px;font-weight:900;margin-bottom:21px}}.tech-spec__description-text{font-size:12px;line-height:150%;font-family:Inter,sans-serif;margin:0}@media (min-width:1280px){.tech-spec__description-text{font-size:16px}}.tech-spec__description.active{display:block}@media (min-width:1280px){.tech-spec__description--one{position:absolute;top:0;left:50%;transform:translateX(calc(-50% - 438px))}.tech-spec__description--one:before{display:block;content:"";background-repeat:no-repeat;background-size:contain;background-image:url(tech-spec-line1.a18c6ae8.svg);background-position:50%;width:403px;height:73px;position:absolute;top:10px;left:125px}}@media (min-width:1280px) and (min-width:1920px){.tech-spec__description--one:before{width:660px;height:50px;top:5px;left:50px}}@media (min-width:1280px){.tech-spec__description--two{position:absolute;top:0;transform:translateX(200px);width:338px}.tech-spec__description--two:after{display:block;content:"";background-repeat:no-repeat;background-size:contain;background-image:url(tech-spec-line2.5bbc2a2f.svg);width:191px;height:244px;position:absolute;bottom:-60px;left:-200px}.tech-spec__description--three{position:absolute;top:auto;bottom:0;left:50%;transform:translateX(-450px)}.tech-spec__description--three:before{display:block;content:"";background-repeat:no-repeat;background-size:contain;background-image:url(tech-spec-line3.819d7dd3.svg);width:134px;height:113px;position:absolute;bottom:100px;right:-60px}}.kat-loco{padding:50px 22px}@media (min-width:768px){.kat-loco{padding:70px 34px}}@media (min-width:1280px){.kat-loco{padding:100px 110px}}@media (min-width:1920px){.kat-loco{padding:160px 234px}}.kat-loco__title{margin:0 0 32px;font-size:21px;font-family:Inter,sans-serif;font-weight:900}@media (min-width:768px){.kat-loco__title{margin-bottom:30px}}@media (min-width:1280px){.kat-loco__title{font-size:36px;text-align:center;margin-bottom:82px}}.kat-loco__features{display:flex;flex-direction:column;row-gap:20px}@media (min-width:768px){.kat-loco__features{display:flex;flex-direction:row;column-gap:20px}}@media (min-width:1280px){.kat-loco__features{margin-bottom:90px}}@media (min-width:1920px){.kat-loco__features{column-gap:205px;margin-bottom:0}}.kat-loco__feature{display:flex;flex-direction:column;align-items:flex-start;cursor:pointer}@media (min-width:768px){.kat-loco__feature{align-items:center}}.kat-loco__feature:first-of-type .kat-loco__feature-title{font-size:16px}.kat-loco__feature-title{display:inline-block;color:#fff;margin:0 0 11px;font-size:16px;font-family:Inter,sans-serif;font-weight:900;position:relative}@media (min-width:768px){.kat-loco__feature-title{font-size:18px;margin-bottom:21px;white-space:nowrap}}@media (min-width:1280px){.kat-loco__feature-title{font-size:16px}}@media (min-width:1920px){.kat-loco__feature-title{font-size:18px;margin-bottom:16px}}.kat-loco__feature-desc{font-size:16px;line-height:150%;font-family:Inter,sans-serif;color:#929292;margin:0}@media (min-width:768px){.kat-loco__feature-desc{text-align:center}}@media (min-width:1280px){.kat-loco__feature-desc--short{display:none}}.kat-loco__feature-desc--full{display:none}@media (min-width:1280px){.kat-loco__feature-desc--full{display:block}}.kat-loco__feature:hover .kat-loco__feature-title:after{width:100%}.kat-loco__icon{display:none;width:85px;height:85px;background-position:50%;background-size:contain;background-repeat:no-repeat;margin-bottom:27px}@media (min-width:768px){.kat-loco__icon{display:block}}@media (min-width:1920px){.kat-loco__icon{margin-bottom:30px}}.kat-loco__icon--first{background-image:url(kat-loco-first.16683935.svg)}.kat-loco__icon--second{background-image:url(kat-loco-second.143ba264.svg)}.kat-loco__icon--third{background-image:url(kat-loco-third.f1f0852c.svg)}.kat-loco__btn{display:none}@media (min-width:1280px){.kat-loco__btn{margin:0 auto;display:flex;width:200px;height:48px}}@media (min-width:1920px){.kat-loco__btn{display:none}}.address{display:flex;flex-direction:column;row-gap:12px}.address__email,.address__phone{text-decoration:none;color:#929292;font-size:13px;font-family:Inter,sans-serif;font-weight:400;transition:.3s ease}.address__email:hover,.address__phone:hover{color:#05c2df}.get-in-touch{background-color:#05040b;padding:50px 22px}@media (min-width:768px){.get-in-touch{padding:70px 34px 130px}}@media (min-width:1280px){.get-in-touch{padding:100px 110px}}@media (min-width:1920px){.get-in-touch{padding:156px 234px 205px}}.get-in-touch__warpper{display:grid}@media (min-width:768px){.get-in-touch__warpper{column-gap:22px;grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,auto)}}@media (min-width:1280px){.get-in-touch__warpper{column-gap:200px}}@media (min-width:1920px){.get-in-touch__warpper{column-gap:290px}}@media (min-width:768px){.get-in-touch__header{grid-column:1/2;grid-row:1/span}}.get-in-touch__subtitle{color:#05c2df;font-weight:400;margin:0 0 11px}@media (min-width:1280px){.get-in-touch__subtitle{margin-bottom:13px}}.get-in-touch__title{margin:0 0 32px}@media (min-width:768px){.get-in-touch__title{margin-bottom:50px}}@media (min-width:1280px){.get-in-touch__title{margin-bottom:26px}}.get-in-touch__form{display:flex;flex-direction:column;row-gap:24px;margin-bottom:30px}@media (min-width:768px){.get-in-touch__form{grid-column:2/3;grid-row:1/-1;row-gap:0;margin-bottom:0}}.get-in-touch__button-wrapper{background-color:transparent;border:none;padding:0;cursor:pointer;width:100%;display:flex;justify-content:center}@media (min-width:768px){.get-in-touch__button-wrapper{width:200px;height:48px}}.get-in-touch__note{font-size:12px;line-height:150%;color:#929292;font-family:Inter,sans-serif;margin:0;order:1}@media (min-width:768px){.get-in-touch__note{font-size:16px;order:0;grid-row:2/span;margin-bottom:76px}}.get-in-touch__buttons{display:flex;flex-direction:row}@media (min-width:768px){.get-in-touch__buttons{justify-content:space-between}}.get-in-touch__back-wrapper{display:none;border:1px solid #05c2df;width:48px;height:48px;border-radius:50%;justify-content:center;align-items:center;cursor:pointer;transition:background-color .5s ease}.get-in-touch__back-wrapper:hover{background-color:#05c2df}.get-in-touch__back-wrapper:hover .get-in-touch__back-link{filter:brightness(0) saturate(100%) invert(100%)}@media (min-width:768px){.get-in-touch__back-wrapper{display:block}}.get-in-touch__back-link{display:block;width:100%;height:100%;background-image:url(get-in-touch-arrow.1a065f46.svg);background-position:50%;background-repeat:no-repeat;background-size:16px 8px}.get-in-touch__address{display:none}@media (min-width:768px){.get-in-touch__address{display:flex;font-size:16px;row-gap:11px;grid-column:1/2;grid-row:3/span}}@media (min-width:1280px){.get-in-touch__address{font-size:16px}}.get-in-touch__group{position:relative;padding-bottom:19px}@media (min-width:768px){.get-in-touch__group{margin-bottom:24px}}.get-in-touch__input,.get-in-touch__textarea{background-color:transparent;border:none;border-bottom:1px solid #929292;width:100%;box-sizing:border-box;font-size:14px;line-height:150%;font-weight:400;color:#fff;padding:0 0 6px;resize:none;cursor:pointer}.get-in-touch__input:focus,.get-in-touch__textarea:focus{outline:none;border-bottom:1px solid #05c2df}.get-in-touch__input:focus+.get-in-touch__label,.get-in-touch__textarea:focus+.get-in-touch__label{top:0;transform:translateY(-100%);color:#05c2df}.get-in-touch__label{position:absolute;left:0;font-size:14px;line-height:150%;font-weight:400;color:#fff;font-family:Inter,sans-serif;box-sizing:border-box;transform:translateY(-70%);color:#929292;pointer-events:none;transition:all .3s ease}@media (min-width:768px){.get-in-touch__textarea{margin-bottom:48px}}@media (min-width:768px){.get-in-touch__button{height:100%}}.footer{background-color:#05040b;padding:45px 20px 50px}@media (min-width:768px){.footer{padding:34px 25px}}@media (min-width:1280px){.footer{padding:43px 110px}}@media (min-width:1920px){.footer{padding-inline:234px}}.footer__wrapper{display:flex;flex-direction:row;justify-content:space-between}.footer__logo{width:58px;height:12px;background-image:url(top-bar-logo.41d137af.svg);margin-bottom:15px}@media (min-width:768px){.footer__logo{margin-bottom:0;width:69px;height:14px}}@media (min-width:1280px){.footer__logo{width:72px}}.footer__logo:hover{transform:scale(1.2)}.footer__address{padding-top:27px;margin-bottom:22px}@media (min-width:768px){.footer__address{display:none}}.footer__messengers{display:flex;flex-direction:row;column-gap:22px}@media (min-width:768px){.footer__messengers{padding-left:95px;align-content:center}}@media (min-width:1920px){.footer__messengers{padding-left:413px}}.footer__messengers-icon{display:flex;width:18px;height:18px;background-position:50%;background-repeat:no-repeat;background-size:contain;transition:transform .5s ease,filter .5s ease}@media (min-width:768px){.footer__messengers-icon{width:14px;height:14px}}@media (min-width:1920px){.footer__messengers-icon{width:18px;height:18px}}.footer__messengers-icon--facebook{background-image:url(footer-icon-facebook.a3526200.svg)}.footer__messengers-icon--twitter{background-image:url(footer-icon-twitter.b948b1c3.svg)}.footer__messengers-icon--youtube{background-image:url(footer-icon-youtube.0ee6c45e.svg)}.footer__messengers-icon--reddit{background-image:url(footer-icon-reddit.859e3c9b.svg)}.footer__messengers-icon:hover{transform:scale(1.2)}@media (min-width:768px){.footer__info{width:100%;justify-content:space-between}}@media (min-width:768px){.footer__contact,.footer__info{display:flex;flex-direction:row;align-items:center}} +/*# sourceMappingURL=main.a25c74b6.css.map */ \ No newline at end of file diff --git a/dist/main.a25c74b6.css.map b/dist/main.a25c74b6.css.map new file mode 100644 index 00000000..7223687a --- /dev/null +++ b/dist/main.a25c74b6.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["styles\\utils\\_extends.scss","styles\\utils\\_vars.scss","styles\\_fonts.scss","styles\\blocks\\_page.scss","styles\\blocks\\_btn.scss","styles\\blocks\\_top-bar.scss","styles\\blocks\\_short-nav.scss","styles\\blocks\\_header.scss","styles\\blocks\\_video-button.scss","styles\\blocks\\_more-than.scss","styles\\blocks\\_card.scss","styles\\blocks\\_video-section.scss","styles\\blocks\\_menu.scss","styles\\blocks\\_nav.scss","styles\\blocks\\_faq.scss","styles\\blocks\\_faq-section.scss","styles\\blocks\\_help.scss","styles\\blocks\\_help-section.scss","styles\\blocks\\_purchase.scss","styles\\blocks\\_order-form.scss","styles\\blocks\\_card-data.scss","styles\\blocks\\_complete.scss","styles\\blocks\\_product.scss","styles\\blocks\\_tech-spec.scss","styles\\blocks\\_kat-loco.scss","styles\\blocks\\_address.scss","styles\\blocks\\_get-in-touch.scss","styles\\blocks\\_footer.scss"],"names":[],"mappings":"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","file":"main.a25c74b6.css","sourceRoot":"..\\src","sourcesContent":["%headline-one {\n font-size: 26px;\n line-height: 130%;\n font-family: $text-style;\n\n @media (min-width: 1280px) {\n font-size: 46px;\n }\n}\n\n%headline-two {\n font-size: 21px;\n font-family: $text-style;\n\n @media (min-width: 1280px) {\n font-size: 36px;\n line-height: 100%;\n }\n}\n\n%subheading {\n font-size: 26px;\n line-height: 130%;\n font-family: $text-style;\n}\n\n%logo-base {\n display: block;\n background-position: center;\n background-size: contain;\n background-repeat: no-repeat;\n cursor: pointer;\n transition: transform 0.5s ease;\n}\n\n%text-two {\n font-size: 14px;\n font-family: $text-style;\n}\n\n%text-one {\n font-size: 12px;\n font-family: $text-style;\n\n @media (min-width: 1280px) {\n font-size: 14px;\n }\n\n @media (min-width: 1920px) {\n font-size: 16px;\n line-height: 150%;\n }\n}\n\n%hover-blue-icon {\n filter: brightness(0) saturate(100%) invert(64%) sepia(10%) saturate(3600%) hue-rotate(165deg) brightness(103%) contrast(103%);\n}\n\n%title-part-bold {\n color: $white-accent;\n font-weight: 900;\n}\n\n%title-part-light {\n color: $constant-color;\n font-weight: 400;\n}\n\n%title-underlined-effect {\n content: '';\n position: absolute;\n left: 0;\n bottom: -4px;\n width: 0;\n height: 1px;\n background-color: $white-accent;\n transition: width 0.3s ease;\n}\n\n%autofill-fix {\n &:-webkit-autofill {\n background-color: transparent !important;\n -webkit-text-fill-color: $white-accent;\n transition: background-color 5000s ease 0s;\n -webkit-box-shadow: 0 0 0px 1000px transparent inset; // extra fix\n }\n\n &:-moz-autofill {\n background-color: transparent !important;\n color: $white-accent !important;\n }\n}\n","$constant-color: #05C2DF;\n$background-black: #05040B;\n$dark-grey-accent: #2F2F2F;\n$text-color: #929292;\n$white-accent: #ffffff;\n$text-style: 'Inter', sans-serif;\n$menu-bg: #191536;\n$background-gradient: linear-gradient(to right, #191536, #000000);\n\n","@font-face {\n font-family: 'Inter';\n src: url('../fonts/Inter_18pt-Regular.ttf') format('truetype');\n font-weight: 400;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'Inter';\n src: url('../fonts/Inter_18pt-Medium.ttf') format('truetype');\n font-weight: 500;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'Inter';\n src: url('../fonts/Inter_28pt-Black.ttf') format('truetype');\n font-weight: 900;\n font-style: normal;\n}\n",".page {\n scroll-behavior: smooth;\n\n &__body {\n margin: 0;\n background: $background-gradient;\n position: relative;\n\n &:has(#video-section:target),\n &:has(#faq-section:target),\n &:has(#help-section:target),\n &:has(#purchase:target),\n &:has(#pay:target),\n &:has(#complete:target) {\n overflow: hidden;\n }\n\n &:has(#video-section:target),\n &:has(#faq-section:target),\n &:has(#help-section:target) {\n &::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 998;\n }\n }\n }\n\n &__fixed-overlay {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.5s ease;\n\n &:target {\n opacity: 1;\n pointer-events: all;\n }\n }\n\n &__menu {\n @extend .page__fixed-overlay;\n\n &--faq,\n &--help {\n overflow-y: auto;\n }\n }\n\n &__purchase {\n @extend .page__fixed-overlay;\n }\n\n &__card-data {\n @extend .page__fixed-overlay;\n }\n\n &__complete {\n @extend .page__fixed-overlay;\n }\n}\n",".btn {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: $constant-color;\n text-decoration: none;\n font-family: $text-style;\n color: $white-accent;\n font-weight: 500;\n font-size: 14px;\n line-height: 130%;\n width: 100%;\n max-width: 458px;\n height: 40px;\n border-radius: 4px;\n padding: 0;\n cursor: pointer;\n transition: background-color 0.5s ease, color 0.5s ease;\n z-index: 998;\n\n &:hover {\n color: $constant-color;\n background-color: $white-accent;\n }\n\n &.disabled {\n background-color: $menu-bg;\n color: $text-color;\n cursor: not-allowed;\n }\n}\n",".top-bar {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: 18px 20px;\n\n @media (min-width: 1280px) {\n padding: 64px 110px;\n }\n\n @media (min-width: 1920px) {\n padding: 60px 234px;\n }\n\n &__logo {\n width: 58px;\n height: 12px;\n background-image: url(../images/icons/top-bar-logo.svg);\n @extend %logo-base;\n\n @media (min-width: 768px) {\n width: 67px;\n height: 14px;\n }\n\n @media (min-width: 1280px) {\n width: 76px;\n height: 16px;\n }\n\n &:hover {\n transform: scale(1.2);\n }\n }\n\n &__lang-choice {\n background-color: $menu-bg;\n color: $constant-color;\n font-size: 16px;\n line-height: 130%;\n font-weight: 500;\n font-family: $text-style;\n border: none;\n outline: none;\n width: 35px;\n overflow-y: auto;\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background-image: url('../images/icons/top-bar-arrow-down.svg');\n background-repeat: no-repeat;\n background-position: right 10px;\n background-size: 9px 6px;\n display: none;\n\n &:focus {\n outline: none;\n }\n\n @media (min-width: 1280px) {\n display: block;\n }\n }\n\n &__icon {\n width: 20px;\n height: 9px;\n background-image: url(../images/icons/top-bar-menu-icon.svg);\n background-position: center;\n background-size: contain;\n background-repeat: no-repeat;\n\n @media (min-width: 768px) {\n width: 30px;\n height: 14px;\n }\n\n &--close {\n width: 17px;\n height: 17px;\n background-image: url(../images/icons/top-bar-close-icon.svg);\n margin-left: auto;\n transition: 0.5s ease;\n\n &:hover {\n @extend %hover-blue-icon\n }\n }\n\n &--arrow {\n width: 8.5px;\n height: 17px;\n background-image: url(../images/icons/top-bar-arrow-icon.svg);\n margin-right: auto;\n\n &:hover {\n @extend %hover-blue-icon;\n }\n }\n\n &.top-bar__icon--menu {\n display: block;\n\n &:hover {\n @extend %hover-blue-icon;\n }\n\n @media (min-width: 1280px) {\n display: none;\n }\n }\n }\n\n &__short-nav ul:first-of-type{\n display: none;\n\n @media (min-width: 1280px) {\n display: flex;\n flex-direction: row;\n column-gap: 36px;\n }\n\n & li a{\n font-size: 16px;\n line-height: 130%;\n font-weight: 500;\n }\n }\n\n &__btn {\n display: none;\n\n @media (min-width: 1280px) {\n display: flex;\n max-width: 200px;\n height: 48px;\n }\n }\n\n &__controls {\n @media (min-width: 1280px) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n padding-inline: 34px;\n }\n }\n}\n",".short-nav__list {\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n row-gap: 12px;\n font-family: $text-style;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: row;\n column-gap: 45px;\n }\n}\n\n.short-nav__item {\n list-style: none;\n position: relative;\n width: fit-content;\n}\n\n.short-nav__link {\n font-size: 13px;\n line-height: 150%;\n font-weight: 400;\n font-family: $text-style;\n color: $white-accent;\n text-decoration: none;\n cursor: pointer;\n\n @media (min-width: 768px) {\n font-size: 14px;\n }\n\n &:hover {\n color: $constant-color;\n }\n\n &::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: -4px;\n width: 0;\n height: 1px;\n background-color: $constant-color;\n transition: width 0.3s ease;\n }\n\n &:hover::after {\n width: 100%;\n }\n}\n",".header {\n &__wrapper {\n @media (min-width: 768px) {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n }\n\n &__image {\n display: none;\n height: 50vh;\n background-position: center;\n background-size: 100% 100%;\n background-repeat: no-repeat;\n transition: none;\n\n @media (min-width: 768px) {\n order: 2;\n flex-basis: 65%;\n }\n }\n\n &__bottom {\n padding-inline: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n @media (min-width: 768px) {\n align-items: start;\n flex-basis: 35%;\n padding: 55px 0 70px 30px;\n }\n\n @media (min-width: 1280px) {\n padding: 64px 0 93px 110px;\n flex-basis: 45%;\n }\n\n @media (min-width: 1920px) {\n padding: 60px 0 212px 234px;\n flex-basis:45%;\n }\n }\n\n &__title {\n @extend %headline-one;\n margin: 0;\n margin-bottom: 17px;\n text-align: center;\n\n @media (min-width: 768px) {\n text-align: left;\n }\n\n @media (min-width: 1280px) {\n margin-bottom: 35px;\n }\n\n &-part--bold {\n @extend %title-part-bold;\n }\n\n &-part--light {\n @extend %title-part-light\n }\n }\n\n &__content {\n color: $text-color;\n font-weight: 500;\n @extend %text-one;\n margin: 0;\n margin-bottom: 8px;\n text-align: center;\n\n @media (min-width: 768px) {\n text-align: left;\n margin-bottom: 10px;\n }\n\n @media (min-width: 1280px) {\n width: 336px;\n margin-bottom: 30px;\n margin-left: 92px;\n }\n\n @media (min-width: 1920px) {\n font-size: 20px;\n }\n }\n\n &__price {\n color: $white-accent;\n font-size: 18px;\n font-weight: 500;\n text-align: center;\n font-family: $text-style;\n margin-bottom: 16px;\n text-align: center;\n\n @media (min-width: 768px) {\n margin-bottom: 30px;\n }\n\n @media (min-width: 1280px) {\n margin-bottom: 45px;\n margin-left: 92px;\n }\n\n @media (min-width: 1920px) {\n font-size: 20px;\n }\n }\n\n &__cta {\n display: inline-block;\n cursor: pointer;\n transition: transform 0.5s ease-in-out;\n\n &:hover {\n transform: scale(1.1);\n }\n\n &-image {\n height: auto;\n object-fit: contain;\n object-position: center;\n display: block;\n }\n }\n\n &__btn {\n transform: translateY(50%);\n\n @media (min-width: 768px) {\n position: fixed;\n width: 458px;\n height: 48px;\n opacity: 0;\n bottom: 40px;\n left: 50%;\n z-index: 1000;\n transform: translateX(-50%);\n animation: fadeInUp 0.8s ease-out 0.2s forwards;\n pointer-events: auto;\n }\n\n @media (min-width: 1280px) {\n display: none;\n }\n }\n\n &__footer {\n display: none;\n @extend %text-one;\n\n @media (min-width: 1280px) {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: 0 110px 84px;\n }\n\n @media (min-width: 1920px) {\n padding: 0 234px 108px;\n }\n\n &-block--support {\n display: flex;\n flex-direction: row;\n column-gap: 39px;\n\n & .header__footer-link {\n transition: color 0.5s ease;\n }\n\n & .header__footer-link:hover {\n color: $constant-color;\n }\n }\n\n &-block--social {\n animation: moveUpDown 1.2s ease-in-out infinite;\n }\n\n &-block--pagination {\n display: flex;\n flex-direction: row;\n column-gap: 103px;\n border-bottom: 1px solid #212121;\n\n & .header__footer-link {\n transition: color 0.3s ease, border-bottom 0.3s ease;\n }\n\n & .header__footer-link:hover {\n color: $constant-color;\n border-bottom: 1px solid $constant-color;\n }\n\n &:has(.header__footer-link:target) .header__footer-link {\n color: inherit;\n border-bottom: none;\n }\n }\n\n &-link {\n color: $white-accent;\n text-decoration: none;\n cursor: pointer;\n }\n\n &-icon {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-decoration: none;\n padding-bottom: 7px;\n color: $constant-color;\n position: relative;\n transition: color 0.5s ease;\n\n &::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n width: 9px;\n height: 6px;\n background-image: url('../images/icons/top-bar-arrow-down.svg');\n background-size: contain;\n background-repeat: no-repeat;\n }\n\n &:hover {\n color: $white-accent;\n filter: brightness(0) invert(1);\n }\n }\n }\n}\n\n#prev {\n background-image: url('../images/header-image.svg');\n}\n\n#next {\n background-image: url('../images/second-header-image.svg');\n}\n\nbody:not(:has(:target)) #prev {\n display: block;\n}\n\nbody:has(:target):not(:has(#next:target)) #prev {\n display: block;\n animation: fadeInImage 0.8s ease-out forwards;\n}\n\n#prev:target {\n display: block;\n animation: fadeInImage 0.8s ease-out forwards;\n}\n\n#next:target {\n display: block;\n animation: fadeInImage 0.8s ease-out forwards;\n}\n\n#prev:target ~ #next,\n#next:target ~ #prev {\n display: none;\n}\n\n@keyframes fadeInImage {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateX(-50%) translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n}\n\n@keyframes moveUpDown {\n 0%, 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-8px);\n }\n}\n\nbody:has(#prev:target) .header__footer-link[href=\"#prev\"],\nbody:has(#next:target) .header__footer-link[href=\"#next\"] {\n color: $text-color;\n border-bottom: 1px solid $constant-color;\n}\n",".video-button__cta {\n cursor: pointer;\n transition: transform 1s ease;\n background-color: transparent;\n width: 100%;\n height: 66px;\n background-image: url('../images/icons/header-play-button.svg');\n background-repeat: no-repeat;\n background-size: contain;\n\n @media (min-width: 321px) {\n background-position: center;\n }\n\n @media (min-width: 768px) {\n background-position: left;\n }\n\n @media (min-width: 1280px) {\n margin-left: 92px;\n }\n\n &:hover {\n transform: scale(1.1);\n background-image: url('../images/icons/header-play-button-hover.svg');\n }\n}\n",".more-than {\n background-color: $background-black;\n padding: 50px 20px;\n transition: opacity 0.8s ease, transform 0.8s ease;\n\n @media (min-width: 1280px) {\n display: none;\n padding: 100px 110px;\n }\n\n @media (min-width: 1920px) {\n padding: 158px 234px;\n }\n\n &:target {\n display: block;\n animation: fadeInSlideUp 1.2s ease forwards;\n }\n\n &__title {\n @extend %headline-two;\n margin: 0;\n margin-bottom: 12px;\n text-align: center;\n\n @media (min-width: 1280px) {\n margin-bottom: 16px;\n }\n\n &-part--bold {\n @extend %title-part-bold;\n }\n\n &-part--light {\n @extend %title-part-light;\n }\n }\n\n &__description {\n margin: 0;\n color: $constant-color;\n @extend %text-one;\n height: 30px;\n margin-bottom: 30px;\n text-align: center;\n\n @media (min-width: 1280px) {\n margin-bottom: 83px;\n }\n\n @media (min-width: 1920px) {\n margin-bottom: 70px;\n }\n }\n\n &__cards {\n display: flex;\n flex-direction: column;\n row-gap: 20px;\n\n @media (min-width: 768px) {\n gap: 40px 20px;\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n @media (min-width: 1280px) {\n flex-wrap: nowrap;\n column-gap: 20px;\n row-gap: unset;\n }\n }\n}\n\n@keyframes fadeInSlideUp {\n 0% {\n opacity: 0;\n transform: translateY(20px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\n\n",".card {\n display: flex;\n flex-direction: column;\n cursor: pointer;\n transition: width 0.3s ease;\n align-items: start;\n\n @media (min-width: 768px) {\n align-items: center;\n flex: 0 1 calc(50% - 40px);\n min-width: calc(50% - 10px);\n }\n\n @media (min-width: 1280px) {\n flex: unset;\n min-width: 250px;\n }\n\n &__title {\n font-family: $text-style;\n font-size: 16px;\n font-weight: 900;\n color: $white-accent;\n margin: 0;\n margin-bottom: 11px;\n position: relative;\n\n @media (min-width: 768px) {\n margin-bottom: 18px;\n align-self: unset;\n }\n\n &::after {\n @extend %title-underlined-effect;\n }\n }\n\n &:hover .card__title::after {\n width: 100%;\n }\n\n &__text {\n @extend %text-one;\n font-weight: 400;\n color: $text-color;\n margin: 0;\n\n @media (min-width: 768px) {\n text-align: center;\n }\n\n &--short {\n @media (min-width: 768px) {\n display: none;\n }\n }\n\n &--full {\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n }\n }\n }\n\n &__sign {\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n width: 100%;\n margin-bottom: 22px;\n\n background-position: center;\n background-size: contain;\n background-repeat: no-repeat;\n\n &--education {\n height: 81px;\n background-image: url(../images/icons/more-than-education.svg);\n }\n\n &--real-estate {\n height: 84px;\n background-image: url(../images/icons/more-than-real-estate.svg);\n }\n\n &--fitness {\n height: 81px;\n background-image: url(../images/icons/more-than-fitness.svg);\n }\n\n &--social-interactions {\n height: 83px;\n background-image: url(../images/icons/more-than-social-interactions.svg);\n }\n }\n }\n}\n",".video-section {\n display: none;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 70%;\n height: 40vh;\n background-color: transparent;\n z-index: 999;\n opacity: 0;\n pointer-events: none;\n border-radius: 8px;\n transition: opacity 0.3s ease;\n box-sizing: border-box;\n\n &__wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n &__iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n\n &__icon {\n position: absolute;\n z-index: 1000;\n display: block;\n width: 20px;\n height: 20px;\n margin: 6px;\n background-size: contain;\n background-position: center;\n background-repeat: no-repeat;\n cursor: pointer;\n right: 0;\n\n &--close {\n background-image: url('../images/icons/top-bar-close-icon.svg');\n\n &:hover {\n @extend %hover-blue-icon;\n }\n }\n }\n}\n\n@keyframes fadeInOverlay {\n from {\n opacity: 0;\n transform: translate(-50%, calc(-50% + 20px));\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%);\n }\n}\n\n#video-section:target {\n display: block;\n opacity: 1;\n pointer-events: auto;\n animation: fadeInOverlay 0.4s ease forwards;\n}\n\n",".menu {\n height: 100vh;\n background-color: $menu-bg;\n z-index: 1000;\n transform: translateX(-100%);\n transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s;\n\n &:target {\n transform: translateX(0);\n opacity: 1;\n visibility: visible;\n }\n\n &__top-bar {\n padding-bottom: 38px;\n\n &--faq,\n &--help {\n padding-bottom: 20px;\n }\n }\n}\n",".nav {\n height: 100%;\n\n &__list {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n &__item {\n cursor: pointer;\n padding-inline: 20px;\n\n &:hover {\n background-color: #110E25;\n }\n }\n\n &__link {\n display: block;\n color: $white-accent;\n text-decoration: none;\n @extend %headline-two;\n font-weight: 500;\n padding-block: 11px;\n\n &:hover {\n color: $constant-color;\n }\n }\n}\n",".faq {\n padding-inline: 20px;\n\n &__title {\n @extend %headline-two;\n margin: 0;\n margin-bottom: 30px;\n\n &-part--bold {\n @extend %title-part-bold;\n }\n\n &-part--light {\n @extend %title-part-light;\n }\n }\n\n &__wrapper {\n display: flex;\n flex-direction: column;\n row-gap: 13px;\n }\n\n &__question {\n border: 1px solid $constant-color;\n border-radius: 4px;\n\n &-text {\n margin: 0;\n cursor: pointer;\n\n &--question {\n display: block;\n color: $constant-color;\n @extend %text-one;\n padding: 18px 12px;\n text-decoration: none;\n }\n\n &--answer {\n color: $text-color;\n @extend %text-one;\n margin-bottom: 10px;\n display: block;\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n padding: 0 12px;\n transition: max-height 1.2s ease, opacity 1.2s ease, padding 1.2s ease-in-out;\n }\n }\n\n &[open] .faq__question-text--answer {\n display: block;\n padding-inline: 12px;\n\n opacity: 1;\n max-height: 100%;\n }\n\n &[open] .faq__question-text--question {\n margin-bottom: 18px;\n margin-top: 2px;\n }\n\n &-meta {\n margin: 0;\n color: #545454;\n font-size: 12px;\n line-height: 150%;\n }\n }\n}\n",".faq-section {\n display: none;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 80%;\n max-height: 90vh;\n background-color: $menu-bg;\n z-index: 999;\n overflow-y: auto;\n padding-bottom: 20px;\n opacity: 0;\n pointer-events: none;\n border-radius: 8px;\n transition: opacity 0.3s ease;\n\n &__top-bar {\n padding: 18px 20px;\n }\n}\n\n@keyframes fadeInOverlay {\n from {\n opacity: 0;\n transform: translate(-50%, calc(-50% + 20px));\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%);\n }\n}\n\n#faq-section:target {\n display: block;\n opacity: 1;\n pointer-events: auto;\n animation: fadeInOverlay 0.4s ease forwards;\n}\n",".help {\n &__wrapper {\n padding-inline: 20px;\n padding-bottom: 73px;\n }\n\n &__title {\n @extend %headline-two;\n margin: 0;\n margin-bottom: 30px;\n\n &-part--bold {\n @extend %title-part-bold;\n }\n\n &-part--light {\n @extend %title-part-light;\n }\n }\n\n &__description {\n color: $text-color;\n @extend %text-one;\n margin: 0;\n margin-bottom: 30px;\n }\n\n &__nav {\n margin-bottom: 30px;\n }\n\n &__link {\n color: $constant-color;\n @extend %text-one;\n text-decoration: none;\n cursor: pointer;\n }\n\n &__list {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n row-gap: 20px;\n }\n\n &__address {\n display: flex;\n flex-direction: column;\n font-family: $text-style;\n\n & :nth-child(1) {\n margin-bottom: 11px;\n }\n\n & :nth-child(2) {\n margin-bottom: 8px;\n }\n }\n\n &__phone,\n &__email {\n color: $text-color;\n text-decoration: none;\n font-size: 16px;\n }\n}\n",".help-section {\n display: none;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 80%;\n max-height: 90vh;\n background-color: $menu-bg;\n z-index: 999;\n opacity: 0;\n pointer-events: none;\n border-radius: 8px;\n transition: opacity 0.3s ease;\n\n &__top-bar {\n padding: 18px 20px;\n }\n}\n\n@keyframes fadeInOverlay {\n from {\n opacity: 0;\n transform: translate(-50%, calc(-50% + 20px));\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%);\n }\n}\n\n#help-section:target {\n display: block;\n opacity: 1;\n pointer-events: auto;\n animation: fadeInOverlay 0.4s ease forwards;\n}\n\n",".purchase {\n background: inherit;\n height: 100vh;\n z-index: 1000;\n transform: translateX(-100%);\n transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s;\n\n &:target {\n transform: translateX(0);\n opacity: 1;\n visibility: visible;\n overflow: auto;\n }\n\n &__top-bar > :last-child {\n width: 15px;\n height: 15px;\n }\n\n &__steps {\n display: flex;\n flex-direction: row;\n height: 33px;\n width: 100%;\n\n &:not(:has(.purchase__step:target)) .purchase__step--place-order {\n border-bottom: 1px solid $constant-color;\n }\n }\n\n &__step {\n flex: 1;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n display: block;\n list-style: none;\n color: $constant-color;\n text-decoration: none;\n font-size: 12px;\n font-weight: 500;\n line-height: 130%;\n font-family: $text-style;\n cursor: pointer;\n border-bottom: 1px solid transparent;\n transition: border-bottom 0.5s ease;\n\n @media (min-width: 768px) {\n font-size: 14px;\n }\n\n @media (min-width: 768px) {\n font-size: 16px;\n }\n\n &:hover {\n border-bottom: 1px solid $constant-color;\n }\n\n &:target {\n border-bottom: 1px solid $constant-color;\n }\n }\n\n &__form {\n padding: 30px 20px 37px;\n\n @media (min-width: 768px) {\n padding-inline: 34px;\n }\n\n @media (min-width: 1280px) {\n display: flex;\n padding-block: 60px;\n padding-inline: 110px;\n flex-direction: row;\n column-gap: 20px;\n }\n\n @media (min-width: 1280px) {\n padding-block: 120px;\n padding-inline: 234px;\n }\n\n &-fields {\n display: flex;\n flex-direction: column;\n row-gap: 30px;\n align-items: center;\n\n @media (min-width: 1280px) {\n width: 100%;\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: repeat(5, 1fr);\n column-gap: 20px;\n row-gap: 0;\n }\n }\n }\n\n &__label {\n font-size: 14px;\n line-height: 130%;\n color: $text-color;\n font-family: $text-style;\n cursor: pointer;\n }\n\n &__select {\n margin-top: 13px;\n height: 47px;\n font-size: 16px;\n line-height: 130%;\n color: $white-accent;\n margin-bottom: 3px;\n background-color: $menu-bg;\n padding-left: 24px;\n font-family: $text-style;\n display: flex;\n align-items: center;\n background-image: url('../images/icons/drop-down-arrow.svg');\n background-repeat: no-repeat;\n background-position: right 10px center;\n cursor: pointer;\n }\n\n &__dropdown {\n background-color: $menu-bg;\n display: flex;\n flex-direction: column;\n position: absolute;\n width: 100%;\n height: 160px;\n display: none;\n overflow-y: scroll;\n\n &.active {\n display: block;\n z-index: 999;\n }\n\n &::-webkit-scrollbar {\n width: 1px;\n }\n\n &::-webkit-scrollbar-track {\n background: #014954;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: $constant-color;\n border-radius: 1px;\n }\n\n &--city {\n background-color: $menu-bg;\n display: flex;\n flex-direction: column;\n position: absolute;\n width: 100%;\n height: 160px;\n display: none;\n overflow-y: scroll;\n\n &.active {\n display: block;\n z-index: 999;\n }\n\n &::-webkit-scrollbar {\n width: 1px;\n }\n\n &::-webkit-scrollbar-track {\n background: #014954;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: $constant-color;\n border-radius: 1px;\n }\n }\n }\n\n &__value {\n display: block;\n text-decoration: none;\n color: $white-accent;\n font-size: 16px;\n line-height: 130%;\n font-family: $text-style;\n padding: 4px 24px;\n\n &:hover {\n background-color: #222;\n }\n\n &--empty {\n height: 20px;\n }\n }\n\n &__btn {\n @media (min-width: 1280px) {\n width: 200px;\n height: 48px;\n }\n }\n\n &__group,\n &__field {\n position: relative;\n width: 100%;\n }\n\n &__input {\n background-color: transparent;\n border: none;\n border-bottom: 1px solid $text-color;\n padding: 0;\n width: 100%;\n box-sizing: border-box;\n font-size: 14px;\n line-height: 150%;\n font-weight: 400;\n color: $white-accent;\n padding-bottom: 6px;\n cursor: pointer;\n @extend %autofill-fix;\n\n &:focus {\n outline: none;\n border-bottom: 1px solid $constant-color;\n }\n\n &:focus + .purchase__label {\n top: 0;\n transform: translateY(-100%);\n color: $constant-color;\n }\n }\n\n &__label {\n position: absolute;\n left: 0px;\n font-size: 14px;\n line-height: 150%;\n font-weight: 400;\n color: $white-accent;\n font-family: $text-style;\n box-sizing: border-box;\n transform: translateY(-70%);\n color: $text-color;\n pointer-events: none;\n transition: all 0.3s ease;\n }\n}\n\n@media (min-width: 1280px) {\n .purchase__field {\n margin-top: 16px;\n }\n}\n",".order__form {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-bottom: 30px;\n\n @media (min-width: 1280px) {\n padding-bottom: 0;\n }\n\n &-details {\n display: flex;\n flex-direction: row;\n column-gap: 75px;\n }\n\n &-container {\n display: flex;\n flex-direction: row;\n justify-content: center;\n width: 100%;\n\n &__image {\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n width: 100%;\n min-height: 200px;\n background-image: url('../images/header-image.svg');\n background-position: center;\n background-size: contain;\n background-repeat: no-repeat;\n }\n }\n }\n\n}\n\n\n.order__label {\n margin: 0;\n color: $text-color;\n font-size: 16px;\n line-height: 130%;\n font-family: $text-style;\n font-weight: 400;\n margin-bottom: 10px;\n}\n\n.order__quantity .order__label {\n margin-left: 6px;\n}\n\n.order__price .order__label {\n margin-left: 16px;\n}\n\n.order__quantity-wrapper {\n position: relative;\n}\n\n.order__quantity-value {\n color: $white-accent;\n font-size: 20px;\n line-height: 130%;\n font-family: $text-style;\n font-weight: 400;\n}\n\n.order__price-value {\n color: $constant-color;\n margin: 0;\n font-size: 26px;\n font-weight: 500;\n font-family: $text-style;\n text-align: center;\n}\n\n.order__quantity-select {\n background-color: $menu-bg;\n color: $white-accent;\n font-size: 20px;\n line-height: 130%;\n width: 90px;\n height: 47px;\n text-align: center;\n margin-bottom: 3px;\n font-family: $text-style;\n outline: none;\n border: none;\n caret-color: $constant-color;\n background-image: url('../images/icons/order-quantity-arrow-icon.svg');\n background-repeat: no-repeat;\n background-position: right 10px center;\n background-size: 9px 6px;\n cursor: pointer;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n}\n\n.order__quantity-options {\n background-color: $menu-bg;\n border-radius: 4px;\n overflow-y: auto;\n height: 109px;\n position: absolute;\n width: 100%;\n display: none;\n\n &.active {\n display: block;\n }\n\n &::-webkit-scrollbar {\n width: 1px;\n }\n\n &::-webkit-scrollbar-track {\n background: #014954;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: $constant-color;\n border-radius: 1px;\n }\n}\n\n.order__quantity-option {\n display: block;\n text-decoration: none;\n color: $white-accent;\n text-align: center;\n font-size: 20px;\n line-height: 130%;\n font-family: $text-style;\n padding-block: 4px;\n cursor: pointer;\n\n &:hover {\n background-color: #222;\n }\n}\n",".card-data {\n background: inherit;\n height: 100vh;\n z-index: 1000;\n transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s;\n\n &:target {\n transform: translateX(0);\n opacity: 1;\n visibility: visible;\n overflow: auto;\n }\n\n &__content {\n display: flex;\n justify-content: center;\n }\n\n &__form {\n min-width: 280px;\n padding-inline: 20px;\n padding-bottom: 37px;\n\n @media (min-width: 1280px) {\n padding-top: 60px;\n }\n }\n\n &__container {\n display: flex;\n flex-direction: column;\n row-gap: 30px;\n }\n\n &__group {\n position: relative;\n width: 100%;\n display: flex;\n flex-direction: row;\n top: 0;\n\n &--card-number {\n column-gap: 2px;\n }\n\n &--card-owner .card-data__input:focus + .card-data__label {\n transform: translateY(-80%);\n color: $constant-color;\n }\n\n &--cvv .card-data__input:focus + .card-data__label {\n transform: translateY(-100%);\n color: $constant-color;\n }\n\n &--card-number:focus-within .card-data__label {\n transform: translateY(-100%);\n color: $constant-color;\n }\n\n &--EXP:focus-within .card-data__label {\n transform: translateY(-100%);\n color: $constant-color;\n }\n }\n\n &__label {\n position: absolute;\n left: 0px;\n font-size: 14px;\n line-height: 150%;\n font-weight: 400;\n color: $white-accent;\n font-family: $text-style;\n box-sizing: border-box;\n color: $text-color;\n pointer-events: none;\n transition: all 0.3s ease;\n transform: translateY(-90%);\n\n &--card-number {\n transform: translateY(-80%);\n }\n\n &--card-owner {\n transform: translateY(-70%);\n }\n }\n\n &_inputs {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n }\n\n &__input {\n width: 6ch;\n background-color: transparent;\n border: none;\n border-bottom: 1px solid $text-color;\n padding: 0;\n width: 100%;\n box-sizing: border-box;\n font-size: 14px;\n line-height: 150%;\n font-weight: 400;\n color: $white-accent;\n padding-bottom: 6px;\n resize: none;\n cursor: pointer;\n @extend %autofill-fix;\n\n & {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n }\n\n &:hover {\n outline: none;\n border-bottom: 1px solid $constant-color;\n }\n\n &::placeholder {\n text-align: center;\n }\n }\n\n &__extra {\n display: flex;\n flex-direction: row;\n margin-bottom: 40px;\n column-gap: 60px;\n font-family: $text-style;\n }\n\n &__separator {\n font-size: 18px;\n line-height: 130%;\n color: $text-color;\n }\n}\n",".complete {\n padding: 90px 20px;\n background: inherit;\n height: 100vh;\n z-index: 1000;\n transform: translateX(-100%);\n transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s;\n\n @media (min-width: 768px) {\n padding-inline: 34px;\n }\n\n @media (min-width: 1280px) {\n padding-inline: 110px;\n }\n\n @media (min-width: 1920px) {\n padding-inline: 234px;\n }\n\n &:target {\n transform: translateX(0);\n opacity: 1;\n visibility: visible;\n overflow: auto;\n\n }\n\n &__wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n &__title {\n @extend %headline-one;\n text-align: center;\n text-transform: uppercase;\n margin: 0;\n font-weight: 900;\n margin-bottom: 16px;\n\n &-part--bold {\n @extend %title-part-bold;\n }\n\n &-part--light {\n @extend %title-part-light;\n }\n }\n\n &__message {\n font-size: 16px;\n line-height: 130%;\n font-family: $text-style;\n text-align: center;\n color: $white-accent;\n margin: 0;\n margin-bottom: 30px;\n }\n}\n",".product {\n padding: 50px 20px;\n\n @media (min-width: 768px) {\n padding: 70px 34px 50px;\n }\n\n @media (min-width: 1280px) {\n padding: 0;\n }\n\n &__about {\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n display: grid;\n grid-template-columns: 1fr 1fr;\n column-gap: 20px;\n align-items: start;\n }\n\n @media (min-width: 1280px) {\n padding: 100px 118px 183px 246px;\n column-gap: 109px;\n }\n\n @media (min-width: 1920px) {\n padding: 147px 234px 176px 466px;\n column-gap: 117px;\n }\n }\n\n &__title {\n order: 1;\n margin: 0;\n margin-bottom: 20px;\n @extend %headline-two ;\n line-height: 100%;\n font-family: $text-style;\n\n @media (min-width: 768px) {\n grid-column: 2 / -1;\n grid-row: 1 / 2;\n margin-bottom: 30px;\n }\n\n @media (min-width: 1920px) {\n margin-bottom: 32px;\n }\n\n &-part--bold {\n @extend %title-part-bold;\n }\n\n &-part--light {\n @extend %title-part-light;\n }\n }\n\n &__slider {\n order: 2;\n margin-bottom: 20px;\n\n @media (min-width: 768px) {\n grid-column: 1 / 2;\n grid-row: 1 / 4;\n }\n\n &-container {\n width: 100%;\n height: 189px;\n object-fit: cover;\n object-position: center;\n position: relative;\n\n &:has(.product__slider-video:first-of-type:not(:target)):not(:has(.product__slider-video:target)) .product__slider-video:first-of-type {\n opacity: 1;\n pointer-events: auto;\n z-index: 1;\n }\n }\n\n &-video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n pointer-events: none;\n border: none;\n transition: opacity 0.5s ease-in-out;\n\n &:target {\n opacity: 1;\n pointer-events: auto;\n z-index: 1;\n }\n }\n\n &-nav {\n display: flex;\n flex-direction: row;\n justify-content: center;\n column-gap: 6px;\n position: absolute;\n bottom: -14px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n &-dot {\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background-color: #484848;\n }\n\n &:not(:has(:target)) .product__slider-dot[href=\"#img1\"] {\n background-color: #ababab;\n }\n }\n\n &__description {\n margin: 0;\n margin-bottom: 24px;\n color: $text-color;\n @extend %text-one;\n order: 3;\n\n @media (min-width: 768px) {\n grid-column: 2 / -1;\n grid-row: 2 / 3;\n margin-bottom: 30px;\n }\n\n @media (min-width: 1280px) {\n margin-bottom: 20px;\n }\n\n @media (min-width: 1920px) {\n margin-bottom: 32px;\n }\n }\n\n &__video-button {\n display: block;\n margin-bottom: 79px;\n order: 4;\n\n @media (min-width: 768px) {\n grid-column: 2 / -1;\n grid-row: 3 / 4;\n margin-bottom: 84px;\n }\n\n @media (min-width: 1280px) {\n margin: 0;\n }\n\n &:hover {\n transform: scale(1.06);\n }\n }\n\n &__greeting {\n display: block;\n color: $constant-color;\n @extend %text-two;\n margin-bottom: 11px;\n\n @media (min-width: 1280px) {\n margin-bottom: 15px;\n }\n }\n\n &__company-wrapper {\n display: grid;\n grid-template-columns: 1fr 1fr;\n\n @media (min-width: 768px) {\n grid-template-columns: 1fr 1fr 1fr;\n column-gap: 10px;\n }\n\n @media (min-width: 1280px) {\n padding: 0 132px 98px 109px;\n column-gap: 112px;\n }\n\n @media (min-width: 1920px) {\n padding: 0 256px 156px 327px;\n column-gap: 100px;\n }\n }\n\n &__company {\n grid-column: 1 / -1;\n\n @media (min-width: 768px) {\n grid-column: 1 / 3;\n grid-row: 3 / 4;\n }\n\n @media (min-width: 1280px) {\n grid-column: 1 / 2;\n min-width: 429px;\n }\n\n @media (min-width: 1920px) {\n grid-column: 1 / 2;\n }\n\n &-description {\n margin: 0;\n color: $text-color;\n @extend %text-one;\n\n @media (min-width: 1280px) {\n text-align: justify;\n }\n }\n\n &-title {\n margin: 0;\n margin-bottom: 22px;\n @extend %headline-two ;\n line-height: 100%;\n font-family: $text-style;\n\n @media (min-width: 1280px) {\n margin-bottom: 32px;\n }\n\n &--bold {\n @extend %title-part-bold;\n }\n\n &--light {\n @extend %title-part-light;\n }\n }\n }\n\n &__image-block {\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n width: 100%;\n min-height: 256px;\n background-image: url('../images/about-product-bg-image.svg');\n background-size: contain;\n background-position: center;\n background-repeat: no-repeat;\n grid-column: 3 / 4;\n grid-row: 1 / 4;\n }\n\n @media (min-width: 1280px) {\n grid-column: 2 / 4;\n }\n\n @media (min-width: 1920px) {\n grid-column: 2 / 4;\n }\n }\n}\n\n#img1:target ~ .product__slider-nav a[href=\"#img1\"],\n#img2:target ~ .product__slider-nav a[href=\"#img2\"],\n#img3:target ~ .product__slider-nav a[href=\"#img3\"],\n#img4:target ~ .product__slider-nav a[href=\"#img4\"],\n#img5:target ~ .product__slider-nav a[href=\"#img5\"] {\n background-color: #ababab;\n}\n",".tech-spec {\n padding: 50px 20px;\n background-color: $background-black;\n\n @media (min-width: 1280px) {\n padding: 100px 112px;\n }\n\n @media (min-width: 1920px) {\n padding: 160px 319px 160px 426px;\n }\n\n &__title {\n margin: 0;\n margin-bottom: 30px;\n @extend %headline-two;\n line-height: 100%;\n\n @media (min-width: 1280px) {\n text-align: end;\n margin-right: 73px;\n margin-bottom: 80px;\n }\n\n &-part {\n margin: 0;\n margin-bottom: 30px;\n font-size: 21px;\n font-family: $text-style;\n\n &--bold {\n @extend %title-part-bold;\n }\n\n &--light {\n @extend %title-part-light;\n }\n }\n }\n\n &__images-wrapper {\n display: grid;\n position: relative;\n\n @media (min-width: 1280px) {\n grid-template-columns: repeat(12, 1fr);\n column-gap: 20px;\n align-items: end;\n height: 355px;\n }\n }\n\n &__container {\n display: block;\n width: 197px;\n height: 194px;\n background-image: url('../images/tech-spec-bg.svg');\n background-size: contain;\n background-position: center;\n background-repeat: no-repeat;\n position: relative;\n margin: 0 auto;\n\n @media (min-width: 1280px) {\n width: 297px;\n height: 294px;\n grid-column: 4 / span 6;\n\n &::before {\n display: block;\n content: \"\";\n background-repeat: no-repeat;\n background-size: contain;\n background-image: url('../images/tech-spec-elips-line.svg');\n width: 48px;\n height: 340px;\n position: absolute;\n top: 35px;\n left: -10px;\n\n @media (min-width: 1920px) {\n width: 40px;\n height: 201px;\n top: 80px;\n left: -15px;\n }\n }\n }\n\n @media (min-width: 1920px) {\n width: 312px;\n height: 340px;\n }\n }\n\n &__button {\n display: block;\n width: 34px;\n height: 34px;\n background-image: url('../images/icons/tech-spec-button-plus.svg');\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n cursor: pointer;\n\n @media (min-width: 1280px) {\n display: none;\n }\n\n &-plus.active {\n background-image: url('../images/icons/tech-spec-button-minus.svg');\n }\n\n &-plus--1 {\n position: absolute;\n top: -10px;\n left: 60px;\n }\n\n &-plus--2 {\n position: absolute;\n top: 80px;\n left: 140px;\n }\n\n &-plus--3 {\n position: absolute;\n top: 160px;\n left: -15px;\n }\n }\n\n &__description {\n display: none;\n background-color: $menu-bg;\n color: $text-color;\n padding: 17px 10px 22px;\n width: max-content;\n min-height: max-content;\n opacity: .9;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 999;\n @extend %text-one;\n\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n @media (min-width: 1280px) {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n background-color: transparent;\n padding: 0;\n text-align: left;\n }\n\n &-title {\n margin-bottom: 21px;\n display: none;\n color: $white-accent;\n margin: 0;\n\n @media (min-width: 1280px) {\n display: block;\n\n font-size: 18px;\n font-weight: 900;\n margin-bottom: 21px;\n }\n }\n\n &-text {\n font-size: 12px;\n line-height: 150%;\n font-family: $text-style;\n margin: 0;\n\n @media (min-width: 1280px) {\n font-size: 16px;\n }\n }\n\n &.active {\n display: block;\n }\n }\n}\n\n@media (min-width: 1280px) {\n .tech-spec__description--one {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(calc(-50% - 438px));\n\n &::before {\n display: block;\n content: \"\";\n background-repeat: no-repeat;\n background-size: contain;\n background-image: url('../images/tech-spec-line1.svg');\n background-position: 50% center;\n width: 403px;\n height: 73px;\n position: absolute;\n top: 10px;\n left: 125px;\n\n @media (min-width: 1920px) {\n width: 660px;\n height: 50px;\n top: 5px;\n left: 50px;\n }\n }\n }\n\n .tech-spec__description--two {\n position: absolute;\n top: 0;\n transform: translateX(200px);\n width: 338px;\n\n &::after {\n display: block;\n content: \"\";\n background-repeat: no-repeat;\n background-size: contain;\n background-image: url('../images/tech-spec-line2.svg');\n width: 191px;\n height: 244px;\n position: absolute;\n bottom: -60px;\n left: -200px;\n }\n }\n\n .tech-spec__description--three {\n position: absolute;\n top: auto;\n bottom: 0;\n left: 50%;\n transform: translateX(-450px);\n\n &::before {\n display: block;\n content: \"\";\n background-repeat: no-repeat;\n background-size: contain;\n background-image: url('../images/tech-spec-line3.svg');\n width: 134px;\n height: 113px;\n position: absolute;\n bottom: 100px;\n right: -60px;\n }\n }\n}\n\n",".kat-loco {\n padding: 50px 22px;\n\n @media (min-width: 768px) {\n padding: 70px 34px;\n }\n\n @media (min-width: 1280px) {\n padding: 100px 110px;\n }\n\n @media (min-width: 1920px) {\n padding: 160px 234px;\n }\n\n &__title {\n margin: 0;\n margin-bottom: 32px;\n font-size: 21px;\n font-family: $text-style;\n font-weight: 900;\n\n @media (min-width: 768px) {\n margin-bottom: 30px;\n }\n\n @media (min-width: 1280px) {\n font-size: 36px;\n text-align: center;\n margin-bottom: 82px;\n }\n\n &-part--bold {\n @extend %title-part-bold;\n }\n\n &-part--light {\n @extend %title-part-light;\n }\n }\n\n &__features {\n display: flex;\n flex-direction: column;\n row-gap: 20px;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: row;\n column-gap: 20px;\n }\n\n @media (min-width: 1280px) {\n margin-bottom: 90px;\n }\n\n @media (min-width: 1920px) {\n column-gap: 205px;\n margin-bottom: 0;\n }\n }\n\n &__feature {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n cursor: pointer;\n\n @media (min-width: 768px) {\n align-items: center;\n }\n\n &:first-of-type .kat-loco__feature-title {\n font-size: 16px;\n }\n\n &-title {\n display: inline-block;\n color: $white-accent;\n margin: 0;\n margin-bottom: 11px;\n font-size: 16px;\n font-family: $text-style;\n font-weight: 900;\n position: relative;\n\n @media (min-width: 768px) {\n font-size: 18px;\n margin-bottom: 21px;\n white-space: nowrap;\n }\n\n @media (min-width: 1280px) {\n font-size: 16px;\n }\n\n @media (min-width: 1920px) {\n font-size: 18px;\n margin-bottom: 16px;\n }\n\n &::after {\n @extend %title-underlined-effect;\n }\n }\n\n &-desc {\n font-size: 16px;\n line-height: 150%;\n font-family: $text-style;\n color: $text-color;\n margin: 0;\n\n @media (min-width: 768px) {\n text-align: center;\n }\n\n &--short {\n\n @media (min-width: 1280px) {\n display: none;\n }\n }\n\n &--full {\n display: none;\n\n @media (min-width: 1280px) {\n display: block;\n }\n }\n }\n\n &:hover &-title::after {\n width: 100%;\n }\n }\n\n &__icon {\n display: none;\n width: 85px;\n height: 85px;\n background-position: center;\n background-size: contain;\n background-repeat: no-repeat;\n margin-bottom: 27px;\n\n @media (min-width: 768px) {\n display: block\n }\n\n @media (min-width: 1920px) {\n margin-bottom: 30px;\n }\n\n &--first {\n background-image: url('../images/icons/kat-loco-first.svg');\n }\n\n &--second {\n background-image: url('../images/icons/kat-loco-second.svg');\n }\n\n &--third {\n background-image: url('../images/icons/kat-loco-third.svg');\n }\n }\n\n &__btn {\n display: none;\n\n @media (min-width: 1280px) {\n margin: 0 auto;\n display: flex;\n width: 200px;\n height: 48px;\n }\n\n @media (min-width: 1920px) {\n display: none;\n }\n }\n}\n",".address {\n display: flex;\n flex-direction: column;\n row-gap: 12px;\n\n &__phone,\n &__email {\n text-decoration: none;\n color: $text-color;\n font-size: 13px;\n font-family: $text-style;\n font-weight: 400;\n transition: 0.3s ease;\n\n &:hover,\n &:hover {\n color: $constant-color\n }\n }\n}\n\n\n\n\n",".get-in-touch {\n background-color: $background-black;\n padding: 50px 22px;\n\n @media (min-width: 768px) {\n padding: 70px 34px 130px;\n }\n\n @media (min-width: 1280px) {\n padding: 100px 110px;\n }\n\n @media (min-width: 1920px) {\n padding: 156px 234px 205px;\n }\n\n\n &__warpper {\n display: grid;\n\n @media (min-width: 768px) {\n column-gap: 22px;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: repeat(6, auto);\n }\n\n @media (min-width: 1280px) {\n column-gap: 200px;\n }\n\n @media (min-width: 1920px) {\n column-gap: 290px;\n }\n }\n\n &__header {\n @media (min-width: 768px) {\n grid-column: 1 / 2;\n grid-row: 1 / span;\n }\n }\n\n &__subtitle {\n @extend %text-two;\n color: $constant-color;\n font-weight: 400;\n margin: 0;\n margin-bottom: 11px;\n\n @media (min-width: 1280px) {\n margin-bottom: 13px;\n }\n }\n\n &__title {\n margin: 0;\n margin-bottom: 32px;\n @extend %headline-two;\n\n @media (min-width: 768px) {\n margin-bottom: 50px;\n }\n\n @media (min-width: 1280px) {\n margin-bottom: 26px;\n }\n\n &-part--bold {\n @extend %title-part-bold;\n }\n\n &-part--light {\n @extend %title-part-light;\n }\n }\n\n &__form {\n display: flex;\n flex-direction: column;\n row-gap: 24px;\n margin-bottom: 30px;\n\n @media (min-width: 768px) {\n grid-column: 2 / 3;\n grid-row: 1 / -1;\n row-gap: 0;\n margin-bottom: 0;\n }\n }\n\n &__button-wrapper {\n background-color: transparent;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 100%;\n display: flex;\n justify-content: center;\n\n @media (min-width: 768px) {\n width: 200px;\n height: 48px;\n }\n }\n\n &__note {\n font-size: 12px;\n line-height: 150%;\n color: $text-color;\n font-family: $text-style;\n margin: 0;\n order: 1;\n\n\n @media (min-width: 768px) {\n font-size: 16px;\n order: 0;\n grid-row: 2 / span;\n margin-bottom: 76px;\n }\n }\n\n &__buttons {\n display: flex;\n flex-direction: row;\n\n @media (min-width: 768px) {\n justify-content: space-between;\n }\n }\n\n &__back-wrapper {\n display: none;\n border: 1px solid $constant-color;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: background-color 0.5s ease;\n\n &:hover {\n background-color: $constant-color;\n\n .get-in-touch__back-link {\n filter: brightness(0) saturate(100%) invert(100%);\n }\n }\n\n @media (min-width: 768px) {\n display: block;\n }\n }\n\n &__back-link {\n display: block;\n width: 100%;\n height: 100%;\n background-image: url('../images/icons/get-in-touch-arrow.svg');\n background-position: center;\n background-repeat: no-repeat;\n background-size: 16px 8px;\n }\n\n &__address {\n display: none;\n\n @media (min-width: 768px) {\n display: flex;\n font-size: 16px;\n row-gap: 11px;\n grid-column: 1 / 2;\n grid-row: 3 / span;\n }\n\n @media (min-width: 1280px) {\n font-size: 16px;\n }\n }\n\n &__group {\n position: relative;\n padding-bottom: 19px;\n\n @media (min-width: 768px) {\n margin-bottom: 24px;\n }\n }\n\n &__input,\n &__textarea {\n background-color: transparent;\n border: none;\n border-bottom: 1px solid $text-color;\n padding: 0;\n width: 100%;\n box-sizing: border-box;\n font-size: 14px;\n line-height: 150%;\n font-weight: 400;\n color: $white-accent;\n padding-bottom: 6px;\n resize: none;\n cursor: pointer;\n @extend %autofill-fix;\n\n &:focus {\n outline: none;\n border-bottom: 1px solid $constant-color;\n }\n\n &:focus + .get-in-touch__label,\n &:focus + .get-in-touch__label {\n top: 0;\n transform: translateY(-100%);\n color: $constant-color;\n }\n\n }\n\n &__label {\n position: absolute;\n left: 0px;\n font-size: 14px;\n line-height: 150%;\n font-weight: 400;\n color: $white-accent;\n font-family: $text-style;\n box-sizing: border-box;\n transform: translateY(-70%);\n color: $text-color;\n pointer-events: none;\n transition: all 0.3s ease;\n }\n}\n\n@media (min-width: 768px) {\n .get-in-touch__textarea {\n margin-bottom: 48px;\n }\n}\n\n.get-in-touch__button {\n @media (min-width: 768px) {\n height: 100%;\n }\n}\n",".footer {\n background-color: $background-black;\n padding: 45px 20px 50px;\n\n @media (min-width: 768px) {\n padding: 34px 25px;\n }\n\n @media (min-width: 1280px) {\n padding: 43px 110px;\n }\n\n @media (min-width: 1920px) {\n padding-inline: 234px;\n }\n\n &__wrapper {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n }\n\n &__logo {\n width: 58px;\n height: 12px;\n background-image: url(../images/icons/top-bar-logo.svg);\n margin-bottom: 15px;\n @extend %logo-base;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n width: 69px;\n height: 14px;\n }\n\n @media (min-width: 1280px) {\n width: 72px;\n }\n\n &:hover {\n transform: scale(1.2);\n }\n }\n\n &__address {\n padding-top: 27px;\n margin-bottom: 22px;\n\n @media (min-width: 768px) {\n display: none;\n }\n }\n\n &__messengers {\n display: flex;\n flex-direction: row;\n column-gap: 22px;\n\n @media (min-width: 768px) {\n padding-left: 95px;\n align-content: center;\n }\n\n @media (min-width: 1920px) {\n padding-left: 413px;\n }\n\n &-icon {\n display: flex;\n width: 18px;\n height: 18px;\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n transition: transform 0.5s ease, filter 0.5s ease;\n\n @media (min-width: 768px) {\n width: 14px;\n height: 14px;\n }\n\n @media (min-width: 1920px) {\n width: 18px;\n height: 18px;\n }\n\n &--facebook{\n background-image: url('../images/icons/footer-icon-facebook.svg');\n }\n\n &--twitter {\n background-image: url('../images/icons/footer-icon-twitter.svg');\n }\n\n &--youtube {\n background-image: url('../images/icons/footer-icon-youtube.svg');\n }\n\n &--reddit {\n background-image: url('../images/icons/footer-icon-reddit.svg');\n }\n\n &:hover {\n transform: scale(1.2);\n @extend %hover-blue-icon;\n }\n }\n }\n\n &__info {\n @media (min-width: 768px) {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n }\n\n &__contact {\n @media (min-width: 768px) {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n }\n}\n"]} \ No newline at end of file diff --git a/dist/main.d9b901d7.js b/dist/main.d9b901d7.js new file mode 100644 index 00000000..6f0d0a88 --- /dev/null +++ b/dist/main.d9b901d7.js @@ -0,0 +1,6 @@ +parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c {\n const form = document.querySelector('.purchase__form');\n const inputs = form.querySelectorAll('input[required]');\n const purchaseBtn = form.querySelector('.purchase__btn');\n const quantitySelect = document.querySelector('.order__quantity-select');\n const dropBar = document.querySelector('.order__quantity-options');\n const priceDisplay = document.querySelector('.order__price-value');\n const unitPrice = 1200;\n const countrySelect = document.querySelector('.purchase__select');\n const countryBar = document.querySelector('.purchase__dropdown');\n const labelCountry = document.querySelector('.purchase__label');\n const citiesSelect = document.querySelector('.purchase__select--city');\n const citiesBar = document.querySelector('.purchase__dropdown--city');\n const labelCity = document.querySelector('.purchase__label--city');\n const closeBtn = document.querySelector('.video-section__icon--close');\n const plusBtns = document.querySelectorAll('.tech-spec__button-plus');\n const descriptions = document.querySelectorAll('.tech-spec__description');\n\n function toggleCountriesBar() {\n countryBar.classList.toggle('active');\n }\n\n [countrySelect, labelCountry].forEach(el => {\n el.addEventListener('click', toggleCountriesBar);\n });\n\n function toggleCitiesBar() {\n citiesBar.classList.toggle('active');\n }\n\n [citiesSelect, labelCity].forEach(el => {\n el.addEventListener('click', toggleCitiesBar);\n });\n\n function changePrice(amount) {\n if (!quantitySelect.value && !amount) {\n priceDisplay.textContent = `0$`;\n return;\n }\n\n if (amount) {\n quantitySelect.value = amount;\n }\n\n let qty = amount || quantitySelect.value;\n\n const total = unitPrice * parseInt(qty);\n priceDisplay.textContent = `${total}$`;\n }\n\n function choiceCountry(e) {\n e.preventDefault();\n const clickedCountry = e.target;\n\n if (clickedCountry) {\n\n const country = clickedCountry.textContent;\n countrySelect.textContent = country;\n citiesSelect.textContent = '';\n toggleCountriesBar();\n getCities(country);\n } else {\n countrySelect.textContent = '';\n toggleCountriesBar();\n choiceCity();\n }\n }\n\n function getCities(value) {\n const dropdown = document.querySelector('.purchase__dropdown--city');\n dropdown.textContent = '';\n\n if (!value) {\n citiesBar.classList.remove('active');\n };\n\n const selectedCountry = countries.find(country => country.name === value);\n if (!selectedCountry) return;\n\n selectedCountry.cities.forEach(city => {\n const cityLink = document.createElement('a');\n cityLink.className = 'purchase__value';\n cityLink.href = '#';\n cityLink.textContent = city;\n\n dropdown.appendChild(cityLink);\n });\n }\n\n document.addEventListener('click', (e) => {\n\n const isClickInside =\n countrySelect.contains(e.target) || countryBar.contains(e.target) || labelCountry.contains(e.target);\n\n if (!isClickInside) {\n countryBar.classList.remove('active');\n }\n });\n\n function choiceCity(e) {\n e.preventDefault();\n\n const city = e.target.textContent;\n\n citiesSelect.textContent = city;\n citiesBar.classList.remove('active');\n }\n\n document.addEventListener('click', (e) => {\n\n const isClickInsideCityBar =\n citiesSelect.contains(e.target) || citiesBar.contains(e.target) || labelCity.contains(e.target);\n\n if (!isClickInsideCityBar) {\n citiesBar.classList.remove('active');\n }\n });\n\n function toggleDropBar() {\n dropBar.classList.toggle('active');\n }\n\n quantitySelect.addEventListener('click', toggleDropBar);\n\n quantitySelect.addEventListener('keydown', (e) => {\n if (e.key === 'Enter') {\n toggleDropBar();\n changePrice();\n }\n });\n\n document.addEventListener('click', (e) => {\n const isClickInside =\n quantitySelect.contains(e.target) || dropBar.contains(e.target);\n\n if (!isClickInside) {\n dropBar.classList.remove('active');\n changePrice();\n }\n });\n\n function changeAmount(e) {\n e.preventDefault();\n\n const clickedOption = e.target;\n\n if (clickedOption.classList.contains('order__quantity-option')) {\n const value = +clickedOption.textContent;\n quantitySelect.value !== value;\n changePrice(value);\n dropBar.classList.remove('active');\n }\n }\n\n dropBar.addEventListener('click', changeAmount);\n countryBar.addEventListener('click', choiceCountry);\n citiesBar.addEventListener('click', choiceCity);\n\n function validateForm() {\n let isValid = true;\n\n inputs.forEach(input => {\n if (!input.value.trim()) {\n isValid = false;\n }\n });\n\n if (!countrySelect.textContent || !citiesSelect.textContent) {\n isValid = false;\n }\n\n\n if (isValid) {\n purchaseBtn.classList.remove('disabled');\n } else {\n purchaseBtn.classList.add('disabled');\n }\n }\n\n inputs.forEach(input => {\n input.addEventListener('input', validateForm);\n });\n\n\n countrySelect.addEventListener('DOMSubtreeModified', validateForm);\n citiesSelect.addEventListener('DOMSubtreeModified', validateForm);\n\n\n plusBtns.forEach(btn => {\n btn.addEventListener('click', (e) => {\n e.stopPropagation();\n\n const index = btn.dataset.index;\n btn.classList.toggle('active');\n\n descriptions.forEach(desc => {\n if (desc.dataset.index === index) {\n desc.classList.toggle('active');\n } else {\n desc.classList.remove('active');\n }\n });\n\n plusBtns.forEach((b) => {\n if (b !== btn) {\n b.classList.remove('active');\n }\n });\n });\n});\n\ndocument.addEventListener('click', (e) => {\n const isButton = e.target.closest('.plus-btn');\n const isDesc = e.target.closest('.tech-spec__description-text');\n\n if (!isButton && !isDesc) {\n descriptions.forEach(desc => desc.classList.remove('active'));\n plusBtns.forEach(btn => btn.classList.remove('active'));\n }\n});\n\nfunction stopVideo() {\n const iframe = document.getElementById('video-section__iframe');\n iframe.src = iframe.src;\n}\n\ncloseBtn.addEventListener('click', stopVideo);\n});\n"]} \ No newline at end of file diff --git a/dist/more-than-education.4fa3d8d6.svg b/dist/more-than-education.4fa3d8d6.svg new file mode 100644 index 00000000..ed2e4f00 --- /dev/null +++ b/dist/more-than-education.4fa3d8d6.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/dist/more-than-fitness.cb8f64d6.svg b/dist/more-than-fitness.cb8f64d6.svg new file mode 100644 index 00000000..76c2b086 --- /dev/null +++ b/dist/more-than-fitness.cb8f64d6.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/dist/more-than-real-estate.2fa4e38f.svg b/dist/more-than-real-estate.2fa4e38f.svg new file mode 100644 index 00000000..98b9f315 --- /dev/null +++ b/dist/more-than-real-estate.2fa4e38f.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dist/more-than-social-interactions.7818222f.svg b/dist/more-than-social-interactions.7818222f.svg new file mode 100644 index 00000000..c362f50e --- /dev/null +++ b/dist/more-than-social-interactions.7818222f.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dist/order-quantity-arrow-icon.3261b894.svg b/dist/order-quantity-arrow-icon.3261b894.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/dist/order-quantity-arrow-icon.3261b894.svg @@ -0,0 +1,3 @@ + + + diff --git a/dist/second-header-image.4f2be26c.svg b/dist/second-header-image.4f2be26c.svg new file mode 100644 index 00000000..a1b0a23c --- /dev/null +++ b/dist/second-header-image.4f2be26c.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/dist/tech-spec-bg.c98da7a2.svg b/dist/tech-spec-bg.c98da7a2.svg new file mode 100644 index 00000000..2e7d4581 --- /dev/null +++ b/dist/tech-spec-bg.c98da7a2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/dist/tech-spec-button-minus.0f373acb.svg b/dist/tech-spec-button-minus.0f373acb.svg new file mode 100644 index 00000000..f3e455cf --- /dev/null +++ b/dist/tech-spec-button-minus.0f373acb.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/dist/tech-spec-button-plus.975962b0.svg b/dist/tech-spec-button-plus.975962b0.svg new file mode 100644 index 00000000..c1c91e51 --- /dev/null +++ b/dist/tech-spec-button-plus.975962b0.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/dist/tech-spec-elips-line.2380478d.svg b/dist/tech-spec-elips-line.2380478d.svg new file mode 100644 index 00000000..b90496be --- /dev/null +++ b/dist/tech-spec-elips-line.2380478d.svg @@ -0,0 +1,3 @@ + + + diff --git a/dist/tech-spec-line1.a18c6ae8.svg b/dist/tech-spec-line1.a18c6ae8.svg new file mode 100644 index 00000000..0a169d2c --- /dev/null +++ b/dist/tech-spec-line1.a18c6ae8.svg @@ -0,0 +1,4 @@ + + + + diff --git a/dist/tech-spec-line2.5bbc2a2f.svg b/dist/tech-spec-line2.5bbc2a2f.svg new file mode 100644 index 00000000..f47de02d --- /dev/null +++ b/dist/tech-spec-line2.5bbc2a2f.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/dist/tech-spec-line3.819d7dd3.svg b/dist/tech-spec-line3.819d7dd3.svg new file mode 100644 index 00000000..a1f02465 --- /dev/null +++ b/dist/tech-spec-line3.819d7dd3.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/dist/top-bar-arrow-down.3261b894.svg b/dist/top-bar-arrow-down.3261b894.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/dist/top-bar-arrow-down.3261b894.svg @@ -0,0 +1,3 @@ + + + diff --git a/dist/top-bar-arrow-icon.5b9c2a75.svg b/dist/top-bar-arrow-icon.5b9c2a75.svg new file mode 100644 index 00000000..6d4ea073 --- /dev/null +++ b/dist/top-bar-arrow-icon.5b9c2a75.svg @@ -0,0 +1,3 @@ + + + diff --git a/dist/top-bar-close-icon.4dbf2d62.svg b/dist/top-bar-close-icon.4dbf2d62.svg new file mode 100644 index 00000000..77623147 --- /dev/null +++ b/dist/top-bar-close-icon.4dbf2d62.svg @@ -0,0 +1,4 @@ + + + + diff --git a/dist/top-bar-logo.41d137af.svg b/dist/top-bar-logo.41d137af.svg new file mode 100644 index 00000000..105f9e7f --- /dev/null +++ b/dist/top-bar-logo.41d137af.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dist/top-bar-menu-icon.e1938ab6.svg b/dist/top-bar-menu-icon.e1938ab6.svg new file mode 100644 index 00000000..31499720 --- /dev/null +++ b/dist/top-bar-menu-icon.e1938ab6.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/fonts/FontFont_FF.Mark.Pro.Heavy.otf b/src/fonts/FontFont_FF.Mark.Pro.Heavy.otf deleted file mode 100644 index c9caaccd..00000000 Binary files a/src/fonts/FontFont_FF.Mark.Pro.Heavy.otf and /dev/null differ diff --git a/src/fonts/FontFont_FF.Mark.Pro.Medium.otf b/src/fonts/FontFont_FF.Mark.Pro.Medium.otf deleted file mode 100644 index d5999d8c..00000000 Binary files a/src/fonts/FontFont_FF.Mark.Pro.Medium.otf and /dev/null differ diff --git a/src/fonts/FontFont_FF.Mark.Pro.otf b/src/fonts/FontFont_FF.Mark.Pro.otf deleted file mode 100644 index 3b72bc1f..00000000 Binary files a/src/fonts/FontFont_FF.Mark.Pro.otf and /dev/null differ diff --git a/src/fonts/Inter_18pt-Medium.ttf b/src/fonts/Inter_18pt-Medium.ttf new file mode 100644 index 00000000..71d90172 Binary files /dev/null and b/src/fonts/Inter_18pt-Medium.ttf differ diff --git a/src/fonts/Inter_18pt-Regular.ttf b/src/fonts/Inter_18pt-Regular.ttf new file mode 100644 index 00000000..ce097c82 Binary files /dev/null and b/src/fonts/Inter_18pt-Regular.ttf differ diff --git a/src/fonts/Inter_28pt-Black.ttf b/src/fonts/Inter_28pt-Black.ttf new file mode 100644 index 00000000..66a252f8 Binary files /dev/null and b/src/fonts/Inter_28pt-Black.ttf differ diff --git a/src/fonts/Quantum-400.otf b/src/fonts/Quantum-400.otf deleted file mode 100644 index b26c7892..00000000 Binary files a/src/fonts/Quantum-400.otf and /dev/null differ diff --git a/src/images/about-product-bg-image.svg b/src/images/about-product-bg-image.svg new file mode 100644 index 00000000..7748c09f --- /dev/null +++ b/src/images/about-product-bg-image.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/header-image.svg b/src/images/header-image.svg new file mode 100644 index 00000000..6f7e7505 --- /dev/null +++ b/src/images/header-image.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icons/drop-down-arrow.svg b/src/images/icons/drop-down-arrow.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/src/images/icons/drop-down-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/favicon.svg b/src/images/icons/favicon.svg new file mode 100644 index 00000000..61cb0d54 --- /dev/null +++ b/src/images/icons/favicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/footer-icon-facebook.svg b/src/images/icons/footer-icon-facebook.svg new file mode 100644 index 00000000..e4de883e --- /dev/null +++ b/src/images/icons/footer-icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/footer-icon-reddit.svg b/src/images/icons/footer-icon-reddit.svg new file mode 100644 index 00000000..53bade5b --- /dev/null +++ b/src/images/icons/footer-icon-reddit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/footer-icon-twitter.svg b/src/images/icons/footer-icon-twitter.svg new file mode 100644 index 00000000..084900b8 --- /dev/null +++ b/src/images/icons/footer-icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/footer-icon-youtube.svg b/src/images/icons/footer-icon-youtube.svg new file mode 100644 index 00000000..d0756ed2 --- /dev/null +++ b/src/images/icons/footer-icon-youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/get-in-touch-arrow.svg b/src/images/icons/get-in-touch-arrow.svg new file mode 100644 index 00000000..2e498579 --- /dev/null +++ b/src/images/icons/get-in-touch-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/header-play-button-hover.svg b/src/images/icons/header-play-button-hover.svg new file mode 100644 index 00000000..39b113b6 --- /dev/null +++ b/src/images/icons/header-play-button-hover.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/header-play-button.svg b/src/images/icons/header-play-button.svg new file mode 100644 index 00000000..d1769410 --- /dev/null +++ b/src/images/icons/header-play-button.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/kat-loco-first.svg b/src/images/icons/kat-loco-first.svg new file mode 100644 index 00000000..37e8765f --- /dev/null +++ b/src/images/icons/kat-loco-first.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/kat-loco-second.svg b/src/images/icons/kat-loco-second.svg new file mode 100644 index 00000000..6188346d --- /dev/null +++ b/src/images/icons/kat-loco-second.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icons/kat-loco-third.svg b/src/images/icons/kat-loco-third.svg new file mode 100644 index 00000000..7850ac02 --- /dev/null +++ b/src/images/icons/kat-loco-third.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/icons/more-than-education.svg b/src/images/icons/more-than-education.svg new file mode 100644 index 00000000..ed2e4f00 --- /dev/null +++ b/src/images/icons/more-than-education.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/icons/more-than-fitness.svg b/src/images/icons/more-than-fitness.svg new file mode 100644 index 00000000..76c2b086 --- /dev/null +++ b/src/images/icons/more-than-fitness.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/more-than-real-estate.svg b/src/images/icons/more-than-real-estate.svg new file mode 100644 index 00000000..98b9f315 --- /dev/null +++ b/src/images/icons/more-than-real-estate.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/more-than-social-interactions.svg b/src/images/icons/more-than-social-interactions.svg new file mode 100644 index 00000000..c362f50e --- /dev/null +++ b/src/images/icons/more-than-social-interactions.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/order-quantity-arrow-icon.svg b/src/images/icons/order-quantity-arrow-icon.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/src/images/icons/order-quantity-arrow-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/tech-spec-button-minus.svg b/src/images/icons/tech-spec-button-minus.svg new file mode 100644 index 00000000..f3e455cf --- /dev/null +++ b/src/images/icons/tech-spec-button-minus.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/tech-spec-button-plus.svg b/src/images/icons/tech-spec-button-plus.svg new file mode 100644 index 00000000..c1c91e51 --- /dev/null +++ b/src/images/icons/tech-spec-button-plus.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/top-bar-arrow-down.svg b/src/images/icons/top-bar-arrow-down.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/src/images/icons/top-bar-arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/top-bar-arrow-icon.svg b/src/images/icons/top-bar-arrow-icon.svg new file mode 100644 index 00000000..6d4ea073 --- /dev/null +++ b/src/images/icons/top-bar-arrow-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/top-bar-close-icon.svg b/src/images/icons/top-bar-close-icon.svg new file mode 100644 index 00000000..77623147 --- /dev/null +++ b/src/images/icons/top-bar-close-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/top-bar-logo.svg b/src/images/icons/top-bar-logo.svg new file mode 100644 index 00000000..105f9e7f --- /dev/null +++ b/src/images/icons/top-bar-logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/icons/top-bar-menu-icon.svg b/src/images/icons/top-bar-menu-icon.svg new file mode 100644 index 00000000..31499720 --- /dev/null +++ b/src/images/icons/top-bar-menu-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/second-header-image.svg b/src/images/second-header-image.svg new file mode 100644 index 00000000..a1b0a23c --- /dev/null +++ b/src/images/second-header-image.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/slider-img1.png b/src/images/slider-img1.png new file mode 100644 index 00000000..fa689a90 Binary files /dev/null and b/src/images/slider-img1.png differ diff --git a/src/images/tech-spec-bg.svg b/src/images/tech-spec-bg.svg new file mode 100644 index 00000000..2e7d4581 --- /dev/null +++ b/src/images/tech-spec-bg.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/tech-spec-elips-line.svg b/src/images/tech-spec-elips-line.svg new file mode 100644 index 00000000..b90496be --- /dev/null +++ b/src/images/tech-spec-elips-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/tech-spec-line1-1920.svg b/src/images/tech-spec-line1-1920.svg new file mode 100644 index 00000000..ef522dfa --- /dev/null +++ b/src/images/tech-spec-line1-1920.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/tech-spec-line1.svg b/src/images/tech-spec-line1.svg new file mode 100644 index 00000000..0a169d2c --- /dev/null +++ b/src/images/tech-spec-line1.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/tech-spec-line2.svg b/src/images/tech-spec-line2.svg new file mode 100644 index 00000000..f47de02d --- /dev/null +++ b/src/images/tech-spec-line2.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech-spec-line3.svg b/src/images/tech-spec-line3.svg new file mode 100644 index 00000000..a1f02465 --- /dev/null +++ b/src/images/tech-spec-line3.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/index.html b/src/index.html index 8019b83e..2fdf8232 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,960 @@ - + - Title + KateVR + - -

Hello Mate Academy

+ +
+
+ + +
+ + + +
+ Buy Now + +
+ +
+ + +
+

+ THE NEW START OF
+ VR LOCOMOTION +

+

+ Discover the most comprehensive VR Locomotion system, and unlock infinite motion in any games on any platforms! +

+
1200$
+ + + + Buy Now + +
+
+ + +
+
+ +
+
+ +
+
+ FAQ + Help +
+ + + +
+ Previous + Next +
+
+
+ +
+
+ +
+
+

+ FREQUENTLY ASKED + QUESTIONS +

+
+
+ What makes KAT loco different from other systems? +

+ Despite being approached from many different angles, all traditional VR Locomotion systems including roomscale, teleportation, and free locomotion failed to provide an optimal solution capable of integrating high immersion with convenience. KAT loco does all of that without repeating their flaws. Our system offers a complete and versatile solution for an affordable price what makes it a perfect choice for home-use. It is also 100% user friendly, wireless, universally compatible, and more! It even offers decoupled head and body directions! +
+
+ Last updated: Wed, June 12 2019 7:07 PM UTC +03:00 +

+
+ +
+ Will it decrease my motion sickness? +

+ Despite being approached from many different angles, all traditional VR Locomotion systems including roomscale, teleportation, and free locomotion failed to provide an optimal solution capable of integrating high immersion with convenience. KAT loco does all of that without repeating their flaws. Our system offers a complete and versatile solution for an affordable price what makes it a perfect choice for home-use. It is also 100% user friendly, wireless, universally compatible, and more! It even offers decoupled head and body directions! +
+
+ Last updated: Wed, June 12 2019 7:07 PM UTC +03:00 +

+
+ +
+ Which VR headsets is it compatible with? +

+ Despite being approached from many different angles, all traditional VR Locomotion systems including roomscale, teleportation, and free locomotion failed to provide an optimal solution capable of integrating high immersion with convenience. KAT loco does all of that without repeating their flaws. Our system offers a complete and versatile solution for an affordable price what makes it a perfect choice for home-use. It is also 100% user friendly, wireless, universally compatible, and more! It even offers decoupled head and body directions! +
+
+ Last updated: Wed, June 12 2019 7:07 PM UTC +03:00 +

+
+ +
+ Is it compatible with Oculus Quest? +

+ Despite being approached from many different angles, all traditional VR Locomotion systems including roomscale, teleportation, and free locomotion failed to provide an optimal solution capable of integrating high immersion with convenience. KAT loco does all of that without repeating their flaws. Our system offers a complete and versatile solution for an affordable price what makes it a perfect choice for home-use. It is also 100% user friendly, wireless, universally compatible, and more! It even offers decoupled head and body directions! +
+
+ Last updated: Wed, June 12 2019 7:07 PM UTC +03:00 +

+
+
+
+
+ +
+
+ +
+
+
+

+ HOW CAN WE + HELP + YOU? +

+

Welcome to our help center. Our goal is to make the process of + getting acquainted and purchase as easy and pleasant as possible. Need help with your KAT VR loco product? Many product questions can be resolved by reviewing our Product Support FAQs. +

+ Please also feel free to Contact Us directly should you need anything further. We’re happy to help. +

+ + + +
+ +86-0571-86105373 + + +
+
+
+
+ +
+

+ MORE THAN + GAMING! +

+

This also made for people who are interested in...

+
+ +
+ +

EDUCATION

+

+ Create aducational simulations, trainings and much more with... +

+

+ Create aducational simulations, trainings and much more with unlimited virtual space and minimum physical space +

+
+ +
+ +

REAL ESTATE

+

+ Desighn architectural projects in a deeply realistic environment... +

+

+ Desighn architectural projects in a deeply realistic environment allowing visitors to freely walk around, and feel their vibe +

+
+ +
+ +

FITNESS

+

+ Combine business with pleasure, and discover countless ways... +

+

+ Combine business with pleasure, and discover countless ways to stay fit while playing your favorite VR Games! +

+
+ +
+ +

SOCIAL INTERACTIONS

+

+ Hang out with your friends in the virtual world when you can’t... +

+

+ Hang out with your friends in the virtual world when you can’t meet space requirements +

+
+
+
+ + + + + + + +
+
+ + +
+ +
+ + Place Order + + + Pay + + + Complete + +
+ +
+ +
+
+
+
+ +
+
+

Quantity

+ +
+ +
+ 1 + 2 + 3 + 4 + 5 +
+
+
+
+

Price

+

1200$

+
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ Country* +
+
+ + Germany + Poland + Ukraine + Spain + Italy + United States + France + England +
+
+
+ +
+
+
+
+
+ + +
+ +
+ + +
+ + Purchase + +
+ +
+
+ +
+
+ + +
+ +
+
+
+ +
+ + + + + +
+
+ + +
+ +
+
+
+ + / + + +
+
+
+ + +
+ + +
+
+ + Purchase + +
+
+
+ +
+
+

+ Thank you for
+ your + order! +

+

Your order has been placed and is being processed. You will recive an email with the order details

+ Back to homepage +
+
+ + + +
+
+
+
+ + + + + + +
+ + + + + +
+
+
+ +

+ ABOUT + PRODUCT +

+

+ KAT loco is a foot-based VR locomotion system that gives complete physical control over lower-body actions, + allowing you to freely walk, run, and carry out just any other movement in virtual reality. +

+ + + +
+
+
+ Hello, +

+ NICE TO MEET + YOU! +

+

+ KAT VR is an independent company dedicated to the research, development, and sales of VR Locomotion products and solutions. Founded in 2013, we have quickly grown to become one of the world’s leading professional suppliers of VR games’ & simulations’ equipment +

+
+
+
+
+ +
+
+

+ TECH + SPECS +

+
+
+

SENSOR

+

+ Weight: 35g/1.23oz each
+ Dimension: 50mm/1.97in
+ 24mm/0.94in
+ Light: LED lights
+

+
+ +
+

BATTERRIES

+

+ Type: Lthium-lon polymer batteries
+ Capacity: 370mAh
+ Battery life: 10h of continuous use 150 hours on stand by
+ Charging: Fast charging - 1 hour
+ Charging voltage and current: 5V = 0.5A
+

+
+ +
+

CONNECTION

+

+ Wireless: Bluetooth 4.2
+ Signal range: 5m
+ Receiver: USB 2.0 and above
+

+
+
+
+
+
+
+
+
+
+ +
+
+

+ WHY + KAT LOCO? +

+
+
+
+

UNIVERSALLY COMPATIBLE

+

KAT Loco offers universal compatibility across all major VR headsets and platforms...

+

KAT Loco offers universal compatibility across all major VR headsets and platforms allowing you to play any VR game with support for Free Locomotion

+
+
+
+

VR/PC CONTROL PANEL

+

Our Multifunctional Software allows for quick access to KAT Loco’s control panel both from...

+

Our Multifunctional Software allows for quick access to KAT Loco’s control panel both from a computer desktop, and directly from your VR headset.

+
+
+
+

WIRELESS SENSORS

+

What makes it even more advanced, KAT Loco is entirely wireless, and comes with a...

+

What makes it even more advanced, KAT Loco is entirely wireless, and comes with a complete system of algorithms, super durable batteries and more!

+
+
+ + Buy Now + +
+
+ +
+
+
+

Have any questions?

+

+ GET IN + TOUCH +

+
+ +

Our manager will reply you within 15 minutes

+ +
+ +86-0571-86105373 + + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+ +
+
+
+
+
+ + diff --git a/src/scripts/countries.js b/src/scripts/countries.js new file mode 100644 index 00000000..8600713d --- /dev/null +++ b/src/scripts/countries.js @@ -0,0 +1,34 @@ +export const countries = [ + { + name: "Germany", + cities: ["Berlin", "Hamburg", "Munich", "Cologne", "Frankfurt"] + }, + { + name: "Poland", + cities: ["Warsaw", "Krakow", "Lodz", "Wroclaw", "Poznan"] + }, + { + name: "Ukraine", + cities: ["Kyiv", "Kharkiv", "Odesa", "Dnipro", "Lviv"] + }, + { + name: "Spain", + cities: ["Madrid", "Barcelona", "Valencia", "Seville", "Zaragoza"] + }, + { + name: "Italy", + cities: ["Rome", "Milan", "Naples", "Turin", "Palermo"] + }, + { + name: "United States", + cities: ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"] + }, + { + name: "France", + cities: ["Paris", "Marseille", "Lyon", "Toulouse", "Nice"] + }, + { + name: "England", + cities: ["London", "Birmingham", "Manchester", "Liverpool", "Leeds"] + } +]; diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7..2751e2d9 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,232 @@ 'use strict'; + +import { countries } from './countries.js'; + +document.addEventListener('DOMContentLoaded', () => { + const form = document.querySelector('.purchase__form'); + const inputs = form.querySelectorAll('input[required]'); + const purchaseBtn = form.querySelector('.purchase__btn'); + const quantitySelect = document.querySelector('.order__quantity-select'); + const dropBar = document.querySelector('.order__quantity-options'); + const priceDisplay = document.querySelector('.order__price-value'); + const unitPrice = 1200; + const countrySelect = document.querySelector('.purchase__select'); + const countryBar = document.querySelector('.purchase__dropdown'); + const labelCountry = document.querySelector('.purchase__label'); + const citiesSelect = document.querySelector('.purchase__select--city'); + const citiesBar = document.querySelector('.purchase__dropdown--city'); + const labelCity = document.querySelector('.purchase__label--city'); + const closeBtn = document.querySelector('.video-section__icon--close'); + const plusBtns = document.querySelectorAll('.tech-spec__button-plus'); + const descriptions = document.querySelectorAll('.tech-spec__description'); + + function toggleCountriesBar() { + countryBar.classList.toggle('active'); + } + + [countrySelect, labelCountry].forEach(el => { + el.addEventListener('click', toggleCountriesBar); + }); + + function toggleCitiesBar() { + citiesBar.classList.toggle('active'); + } + + [citiesSelect, labelCity].forEach(el => { + el.addEventListener('click', toggleCitiesBar); + }); + + function changePrice(amount) { + if (!quantitySelect.value && !amount) { + priceDisplay.textContent = `0$`; + return; + } + + if (amount) { + quantitySelect.value = amount; + } + + let qty = amount || quantitySelect.value; + + const total = unitPrice * parseInt(qty); + priceDisplay.textContent = `${total}$`; + } + + function choiceCountry(e) { + e.preventDefault(); + const clickedCountry = e.target; + + if (clickedCountry) { + + const country = clickedCountry.textContent; + countrySelect.textContent = country; + citiesSelect.textContent = ''; + toggleCountriesBar(); + getCities(country); + } else { + countrySelect.textContent = ''; + toggleCountriesBar(); + choiceCity(); + } + } + + function getCities(value) { + const dropdown = document.querySelector('.purchase__dropdown--city'); + dropdown.textContent = ''; + + if (!value) { + citiesBar.classList.remove('active'); + }; + + const selectedCountry = countries.find(country => country.name === value); + if (!selectedCountry) return; + + selectedCountry.cities.forEach(city => { + const cityLink = document.createElement('a'); + cityLink.className = 'purchase__value'; + cityLink.href = '#'; + cityLink.textContent = city; + + dropdown.appendChild(cityLink); + }); + } + + document.addEventListener('click', (e) => { + + const isClickInside = + countrySelect.contains(e.target) || countryBar.contains(e.target) || labelCountry.contains(e.target); + + if (!isClickInside) { + countryBar.classList.remove('active'); + } + }); + + function choiceCity(e) { + e.preventDefault(); + + const city = e.target.textContent; + + citiesSelect.textContent = city; + citiesBar.classList.remove('active'); + } + + document.addEventListener('click', (e) => { + + const isClickInsideCityBar = + citiesSelect.contains(e.target) || citiesBar.contains(e.target) || labelCity.contains(e.target); + + if (!isClickInsideCityBar) { + citiesBar.classList.remove('active'); + } + }); + + function toggleDropBar() { + dropBar.classList.toggle('active'); + } + + quantitySelect.addEventListener('click', toggleDropBar); + + quantitySelect.addEventListener('keydown', (e) => { + if (e.key === 'Enter') { + toggleDropBar(); + changePrice(); + } + }); + + document.addEventListener('click', (e) => { + const isClickInside = + quantitySelect.contains(e.target) || dropBar.contains(e.target); + + if (!isClickInside) { + dropBar.classList.remove('active'); + changePrice(); + } + }); + + function changeAmount(e) { + e.preventDefault(); + + const clickedOption = e.target; + + if (clickedOption.classList.contains('order__quantity-option')) { + const value = +clickedOption.textContent; + quantitySelect.value !== value; + changePrice(value); + dropBar.classList.remove('active'); + } + } + + dropBar.addEventListener('click', changeAmount); + countryBar.addEventListener('click', choiceCountry); + citiesBar.addEventListener('click', choiceCity); + + function validateForm() { + let isValid = true; + + inputs.forEach(input => { + if (!input.value.trim()) { + isValid = false; + } + }); + + if (!countrySelect.textContent || !citiesSelect.textContent) { + isValid = false; + } + + + if (isValid) { + purchaseBtn.classList.remove('disabled'); + } else { + purchaseBtn.classList.add('disabled'); + } + } + + inputs.forEach(input => { + input.addEventListener('input', validateForm); + }); + + + countrySelect.addEventListener('DOMSubtreeModified', validateForm); + citiesSelect.addEventListener('DOMSubtreeModified', validateForm); + + + plusBtns.forEach(btn => { + btn.addEventListener('click', (e) => { + e.stopPropagation(); + + const index = btn.dataset.index; + btn.classList.toggle('active'); + + descriptions.forEach(desc => { + if (desc.dataset.index === index) { + desc.classList.toggle('active'); + } else { + desc.classList.remove('active'); + } + }); + + plusBtns.forEach((b) => { + if (b !== btn) { + b.classList.remove('active'); + } + }); + }); +}); + +document.addEventListener('click', (e) => { + const isButton = e.target.closest('.plus-btn'); + const isDesc = e.target.closest('.tech-spec__description-text'); + + if (!isButton && !isDesc) { + descriptions.forEach(desc => desc.classList.remove('active')); + plusBtns.forEach(btn => btn.classList.remove('active')); + } +}); + +function stopVideo() { + const iframe = document.getElementById('video-section__iframe'); + iframe.src = iframe.src; +} + +closeBtn.addEventListener('click', stopVideo); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 619b8c52..3d2a7610 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,20 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/FontFont_FF.Mark.Pro.otf') format('otf'); - font-weight: normal; + font-family: 'Inter'; + src: url('../fonts/Inter_18pt-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Inter'; + src: url('../fonts/Inter_18pt-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Inter'; + src: url('../fonts/Inter_28pt-Black.ttf') format('truetype'); + font-weight: 900; font-style: normal; } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46..e69de29b 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/blocks/_address.scss b/src/styles/blocks/_address.scss new file mode 100644 index 00000000..f21ba8b5 --- /dev/null +++ b/src/styles/blocks/_address.scss @@ -0,0 +1,24 @@ +.address { + display: flex; + flex-direction: column; + row-gap: 12px; + + &__phone, + &__email { + text-decoration: none; + color: $text-color; + font-size: 13px; + font-family: $text-style; + font-weight: 400; + transition: 0.3s ease; + + &:hover, + &:hover { + color: $constant-color + } + } +} + + + + diff --git a/src/styles/blocks/_btn.scss b/src/styles/blocks/_btn.scss new file mode 100644 index 00000000..1504998a --- /dev/null +++ b/src/styles/blocks/_btn.scss @@ -0,0 +1,31 @@ +.btn { + display: flex; + align-items: center; + justify-content: center; + background-color: $constant-color; + text-decoration: none; + font-family: $text-style; + color: $white-accent; + font-weight: 500; + font-size: 14px; + line-height: 130%; + width: 100%; + max-width: 458px; + height: 40px; + border-radius: 4px; + padding: 0; + cursor: pointer; + transition: background-color 0.5s ease, color 0.5s ease; + z-index: 998; + + &:hover { + color: $constant-color; + background-color: $white-accent; + } + + &.disabled { + background-color: $menu-bg; + color: $text-color; + cursor: not-allowed; + } +} diff --git a/src/styles/blocks/_card-data.scss b/src/styles/blocks/_card-data.scss new file mode 100644 index 00000000..90bc7214 --- /dev/null +++ b/src/styles/blocks/_card-data.scss @@ -0,0 +1,144 @@ +.card-data { + background: inherit; + height: 100vh; + z-index: 1000; + transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s; + + &:target { + transform: translateX(0); + opacity: 1; + visibility: visible; + overflow: auto; + } + + &__content { + display: flex; + justify-content: center; + } + + &__form { + min-width: 280px; + padding-inline: 20px; + padding-bottom: 37px; + + @media (min-width: 1280px) { + padding-top: 60px; + } + } + + &__container { + display: flex; + flex-direction: column; + row-gap: 30px; + } + + &__group { + position: relative; + width: 100%; + display: flex; + flex-direction: row; + top: 0; + + &--card-number { + column-gap: 2px; + } + + &--card-owner .card-data__input:focus + .card-data__label { + transform: translateY(-80%); + color: $constant-color; + } + + &--cvv .card-data__input:focus + .card-data__label { + transform: translateY(-100%); + color: $constant-color; + } + + &--card-number:focus-within .card-data__label { + transform: translateY(-100%); + color: $constant-color; + } + + &--EXP:focus-within .card-data__label { + transform: translateY(-100%); + color: $constant-color; + } + } + + &__label { + position: absolute; + left: 0px; + font-size: 14px; + line-height: 150%; + font-weight: 400; + color: $white-accent; + font-family: $text-style; + box-sizing: border-box; + color: $text-color; + pointer-events: none; + transition: all 0.3s ease; + transform: translateY(-90%); + + &--card-number { + transform: translateY(-80%); + } + + &--card-owner { + transform: translateY(-70%); + } + } + + &_inputs { + display: flex; + flex-direction: row; + justify-content: space-between; + } + + &__input { + width: 6ch; + background-color: transparent; + border: none; + border-bottom: 1px solid $text-color; + padding: 0; + width: 100%; + box-sizing: border-box; + font-size: 14px; + line-height: 150%; + font-weight: 400; + color: $white-accent; + padding-bottom: 6px; + resize: none; + cursor: pointer; + @extend %autofill-fix; + + & { + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + } + + &:hover { + outline: none; + border-bottom: 1px solid $constant-color; + } + + &::placeholder { + text-align: center; + } + } + + &__extra { + display: flex; + flex-direction: row; + margin-bottom: 40px; + column-gap: 60px; + font-family: $text-style; + } + + &__separator { + font-size: 18px; + line-height: 130%; + color: $text-color; + } +} diff --git a/src/styles/blocks/_card.scss b/src/styles/blocks/_card.scss new file mode 100644 index 00000000..f5455e85 --- /dev/null +++ b/src/styles/blocks/_card.scss @@ -0,0 +1,100 @@ +.card { + display: flex; + flex-direction: column; + cursor: pointer; + transition: width 0.3s ease; + align-items: start; + + @media (min-width: 768px) { + align-items: center; + flex: 0 1 calc(50% - 40px); + min-width: calc(50% - 10px); + } + + @media (min-width: 1280px) { + flex: unset; + min-width: 250px; + } + + &__title { + font-family: $text-style; + font-size: 16px; + font-weight: 900; + color: $white-accent; + margin: 0; + margin-bottom: 11px; + position: relative; + + @media (min-width: 768px) { + margin-bottom: 18px; + align-self: unset; + } + + &::after { + @extend %title-underlined-effect; + } + } + + &:hover .card__title::after { + width: 100%; + } + + &__text { + @extend %text-one; + font-weight: 400; + color: $text-color; + margin: 0; + + @media (min-width: 768px) { + text-align: center; + } + + &--short { + @media (min-width: 768px) { + display: none; + } + } + + &--full { + display: none; + + @media (min-width: 768px) { + display: block; + } + } + } + + &__sign { + display: none; + + @media (min-width: 768px) { + display: block; + width: 100%; + margin-bottom: 22px; + + background-position: center; + background-size: contain; + background-repeat: no-repeat; + + &--education { + height: 81px; + background-image: url(../images/icons/more-than-education.svg); + } + + &--real-estate { + height: 84px; + background-image: url(../images/icons/more-than-real-estate.svg); + } + + &--fitness { + height: 81px; + background-image: url(../images/icons/more-than-fitness.svg); + } + + &--social-interactions { + height: 83px; + background-image: url(../images/icons/more-than-social-interactions.svg); + } + } + } +} diff --git a/src/styles/blocks/_complete.scss b/src/styles/blocks/_complete.scss new file mode 100644 index 00000000..8d8d4391 --- /dev/null +++ b/src/styles/blocks/_complete.scss @@ -0,0 +1,61 @@ +.complete { + padding: 90px 20px; + background: inherit; + height: 100vh; + z-index: 1000; + transform: translateX(-100%); + transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s; + + @media (min-width: 768px) { + padding-inline: 34px; + } + + @media (min-width: 1280px) { + padding-inline: 110px; + } + + @media (min-width: 1920px) { + padding-inline: 234px; + } + + &:target { + transform: translateX(0); + opacity: 1; + visibility: visible; + overflow: auto; + + } + + &__wrapper { + display: flex; + flex-direction: column; + align-items: center; + } + + &__title { + @extend %headline-one; + text-align: center; + text-transform: uppercase; + margin: 0; + font-weight: 900; + margin-bottom: 16px; + + &-part--bold { + @extend %title-part-bold; + } + + &-part--light { + @extend %title-part-light; + } + } + + &__message { + font-size: 16px; + line-height: 130%; + font-family: $text-style; + text-align: center; + color: $white-accent; + margin: 0; + margin-bottom: 30px; + } +} diff --git a/src/styles/blocks/_faq-section.scss b/src/styles/blocks/_faq-section.scss new file mode 100644 index 00000000..5e30439c --- /dev/null +++ b/src/styles/blocks/_faq-section.scss @@ -0,0 +1,39 @@ +.faq-section { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 80%; + max-height: 90vh; + background-color: $menu-bg; + z-index: 999; + overflow-y: auto; + padding-bottom: 20px; + opacity: 0; + pointer-events: none; + border-radius: 8px; + transition: opacity 0.3s ease; + + &__top-bar { + padding: 18px 20px; + } +} + +@keyframes fadeInOverlay { + from { + opacity: 0; + transform: translate(-50%, calc(-50% + 20px)); + } + to { + opacity: 1; + transform: translate(-50%, -50%); + } +} + +#faq-section:target { + display: block; + opacity: 1; + pointer-events: auto; + animation: fadeInOverlay 0.4s ease forwards; +} diff --git a/src/styles/blocks/_faq.scss b/src/styles/blocks/_faq.scss new file mode 100644 index 00000000..16352a21 --- /dev/null +++ b/src/styles/blocks/_faq.scss @@ -0,0 +1,73 @@ +.faq { + padding-inline: 20px; + + &__title { + @extend %headline-two; + margin: 0; + margin-bottom: 30px; + + &-part--bold { + @extend %title-part-bold; + } + + &-part--light { + @extend %title-part-light; + } + } + + &__wrapper { + display: flex; + flex-direction: column; + row-gap: 13px; + } + + &__question { + border: 1px solid $constant-color; + border-radius: 4px; + + &-text { + margin: 0; + cursor: pointer; + + &--question { + display: block; + color: $constant-color; + @extend %text-one; + padding: 18px 12px; + text-decoration: none; + } + + &--answer { + color: $text-color; + @extend %text-one; + margin-bottom: 10px; + display: block; + max-height: 0; + overflow: hidden; + opacity: 0; + padding: 0 12px; + transition: max-height 1.2s ease, opacity 1.2s ease, padding 1.2s ease-in-out; + } + } + + &[open] .faq__question-text--answer { + display: block; + padding-inline: 12px; + + opacity: 1; + max-height: 100%; + } + + &[open] .faq__question-text--question { + margin-bottom: 18px; + margin-top: 2px; + } + + &-meta { + margin: 0; + color: #545454; + font-size: 12px; + line-height: 150%; + } + } +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 00000000..c4b6d17e --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,127 @@ +.footer { + background-color: $background-black; + padding: 45px 20px 50px; + + @media (min-width: 768px) { + padding: 34px 25px; + } + + @media (min-width: 1280px) { + padding: 43px 110px; + } + + @media (min-width: 1920px) { + padding-inline: 234px; + } + + &__wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + } + + &__logo { + width: 58px; + height: 12px; + background-image: url(../images/icons/top-bar-logo.svg); + margin-bottom: 15px; + @extend %logo-base; + + @media (min-width: 768px) { + margin-bottom: 0; + width: 69px; + height: 14px; + } + + @media (min-width: 1280px) { + width: 72px; + } + + &:hover { + transform: scale(1.2); + } + } + + &__address { + padding-top: 27px; + margin-bottom: 22px; + + @media (min-width: 768px) { + display: none; + } + } + + &__messengers { + display: flex; + flex-direction: row; + column-gap: 22px; + + @media (min-width: 768px) { + padding-left: 95px; + align-content: center; + } + + @media (min-width: 1920px) { + padding-left: 413px; + } + + &-icon { + display: flex; + width: 18px; + height: 18px; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + transition: transform 0.5s ease, filter 0.5s ease; + + @media (min-width: 768px) { + width: 14px; + height: 14px; + } + + @media (min-width: 1920px) { + width: 18px; + height: 18px; + } + + &--facebook{ + background-image: url('../images/icons/footer-icon-facebook.svg'); + } + + &--twitter { + background-image: url('../images/icons/footer-icon-twitter.svg'); + } + + &--youtube { + background-image: url('../images/icons/footer-icon-youtube.svg'); + } + + &--reddit { + background-image: url('../images/icons/footer-icon-reddit.svg'); + } + + &:hover { + transform: scale(1.2); + @extend %hover-blue-icon; + } + } + } + + &__info { + @media (min-width: 768px) { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + } + } + + &__contact { + @media (min-width: 768px) { + display: flex; + flex-direction: row; + align-items: center; + } + } +} diff --git a/src/styles/blocks/_get-in-touch.scss b/src/styles/blocks/_get-in-touch.scss new file mode 100644 index 00000000..90571ef8 --- /dev/null +++ b/src/styles/blocks/_get-in-touch.scss @@ -0,0 +1,248 @@ +.get-in-touch { + background-color: $background-black; + padding: 50px 22px; + + @media (min-width: 768px) { + padding: 70px 34px 130px; + } + + @media (min-width: 1280px) { + padding: 100px 110px; + } + + @media (min-width: 1920px) { + padding: 156px 234px 205px; + } + + + &__warpper { + display: grid; + + @media (min-width: 768px) { + column-gap: 22px; + grid-template-columns: 1fr 1fr; + grid-template-rows: repeat(6, auto); + } + + @media (min-width: 1280px) { + column-gap: 200px; + } + + @media (min-width: 1920px) { + column-gap: 290px; + } + } + + &__header { + @media (min-width: 768px) { + grid-column: 1 / 2; + grid-row: 1 / span; + } + } + + &__subtitle { + @extend %text-two; + color: $constant-color; + font-weight: 400; + margin: 0; + margin-bottom: 11px; + + @media (min-width: 1280px) { + margin-bottom: 13px; + } + } + + &__title { + margin: 0; + margin-bottom: 32px; + @extend %headline-two; + + @media (min-width: 768px) { + margin-bottom: 50px; + } + + @media (min-width: 1280px) { + margin-bottom: 26px; + } + + &-part--bold { + @extend %title-part-bold; + } + + &-part--light { + @extend %title-part-light; + } + } + + &__form { + display: flex; + flex-direction: column; + row-gap: 24px; + margin-bottom: 30px; + + @media (min-width: 768px) { + grid-column: 2 / 3; + grid-row: 1 / -1; + row-gap: 0; + margin-bottom: 0; + } + } + + &__button-wrapper { + background-color: transparent; + border: none; + padding: 0; + cursor: pointer; + width: 100%; + display: flex; + justify-content: center; + + @media (min-width: 768px) { + width: 200px; + height: 48px; + } + } + + &__note { + font-size: 12px; + line-height: 150%; + color: $text-color; + font-family: $text-style; + margin: 0; + order: 1; + + + @media (min-width: 768px) { + font-size: 16px; + order: 0; + grid-row: 2 / span; + margin-bottom: 76px; + } + } + + &__buttons { + display: flex; + flex-direction: row; + + @media (min-width: 768px) { + justify-content: space-between; + } + } + + &__back-wrapper { + display: none; + border: 1px solid $constant-color; + width: 48px; + height: 48px; + border-radius: 50%; + justify-content: center; + align-items: center; + cursor: pointer; + transition: background-color 0.5s ease; + + &:hover { + background-color: $constant-color; + + .get-in-touch__back-link { + filter: brightness(0) saturate(100%) invert(100%); + } + } + + @media (min-width: 768px) { + display: block; + } + } + + &__back-link { + display: block; + width: 100%; + height: 100%; + background-image: url('../images/icons/get-in-touch-arrow.svg'); + background-position: center; + background-repeat: no-repeat; + background-size: 16px 8px; + } + + &__address { + display: none; + + @media (min-width: 768px) { + display: flex; + font-size: 16px; + row-gap: 11px; + grid-column: 1 / 2; + grid-row: 3 / span; + } + + @media (min-width: 1280px) { + font-size: 16px; + } + } + + &__group { + position: relative; + padding-bottom: 19px; + + @media (min-width: 768px) { + margin-bottom: 24px; + } + } + + &__input, + &__textarea { + background-color: transparent; + border: none; + border-bottom: 1px solid $text-color; + padding: 0; + width: 100%; + box-sizing: border-box; + font-size: 14px; + line-height: 150%; + font-weight: 400; + color: $white-accent; + padding-bottom: 6px; + resize: none; + cursor: pointer; + @extend %autofill-fix; + + &:focus { + outline: none; + border-bottom: 1px solid $constant-color; + } + + &:focus + .get-in-touch__label, + &:focus + .get-in-touch__label { + top: 0; + transform: translateY(-100%); + color: $constant-color; + } + + } + + &__label { + position: absolute; + left: 0px; + font-size: 14px; + line-height: 150%; + font-weight: 400; + color: $white-accent; + font-family: $text-style; + box-sizing: border-box; + transform: translateY(-70%); + color: $text-color; + pointer-events: none; + transition: all 0.3s ease; + } +} + +@media (min-width: 768px) { + .get-in-touch__textarea { + margin-bottom: 48px; + } +} + +.get-in-touch__button { + @media (min-width: 768px) { + height: 100%; + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 00000000..a41bd716 --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,309 @@ +.header { + &__wrapper { + @media (min-width: 768px) { + display: flex; + flex-direction: row; + align-items: center; + } + } + + &__image { + display: none; + height: 50vh; + background-position: center; + background-size: 100% 100%; + background-repeat: no-repeat; + transition: none; + + @media (min-width: 768px) { + order: 2; + flex-basis: 65%; + } + } + + &__bottom { + padding-inline: 20px; + display: flex; + flex-direction: column; + align-items: center; + + @media (min-width: 768px) { + align-items: start; + flex-basis: 35%; + padding: 55px 0 70px 30px; + } + + @media (min-width: 1280px) { + padding: 64px 0 93px 110px; + flex-basis: 45%; + } + + @media (min-width: 1920px) { + padding: 60px 0 212px 234px; + flex-basis:45%; + } + } + + &__title { + @extend %headline-one; + margin: 0; + margin-bottom: 17px; + text-align: center; + + @media (min-width: 768px) { + text-align: left; + } + + @media (min-width: 1280px) { + margin-bottom: 35px; + } + + &-part--bold { + @extend %title-part-bold; + } + + &-part--light { + @extend %title-part-light + } + } + + &__content { + color: $text-color; + font-weight: 500; + @extend %text-one; + margin: 0; + margin-bottom: 8px; + text-align: center; + + @media (min-width: 768px) { + text-align: left; + margin-bottom: 10px; + } + + @media (min-width: 1280px) { + width: 336px; + margin-bottom: 30px; + margin-left: 92px; + } + + @media (min-width: 1920px) { + font-size: 20px; + } + } + + &__price { + color: $white-accent; + font-size: 18px; + font-weight: 500; + text-align: center; + font-family: $text-style; + margin-bottom: 16px; + text-align: center; + + @media (min-width: 768px) { + margin-bottom: 30px; + } + + @media (min-width: 1280px) { + margin-bottom: 45px; + margin-left: 92px; + } + + @media (min-width: 1920px) { + font-size: 20px; + } + } + + &__cta { + display: inline-block; + cursor: pointer; + transition: transform 0.5s ease-in-out; + + &:hover { + transform: scale(1.1); + } + + &-image { + height: auto; + object-fit: contain; + object-position: center; + display: block; + } + } + + &__btn { + transform: translateY(50%); + + @media (min-width: 768px) { + position: fixed; + width: 458px; + height: 48px; + opacity: 0; + bottom: 40px; + left: 50%; + z-index: 1000; + transform: translateX(-50%); + animation: fadeInUp 0.8s ease-out 0.2s forwards; + pointer-events: auto; + } + + @media (min-width: 1280px) { + display: none; + } + } + + &__footer { + display: none; + @extend %text-one; + + @media (min-width: 1280px) { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0 110px 84px; + } + + @media (min-width: 1920px) { + padding: 0 234px 108px; + } + + &-block--support { + display: flex; + flex-direction: row; + column-gap: 39px; + + & .header__footer-link { + transition: color 0.5s ease; + } + + & .header__footer-link:hover { + color: $constant-color; + } + } + + &-block--social { + animation: moveUpDown 1.2s ease-in-out infinite; + } + + &-block--pagination { + display: flex; + flex-direction: row; + column-gap: 103px; + border-bottom: 1px solid #212121; + + & .header__footer-link { + transition: color 0.3s ease, border-bottom 0.3s ease; + } + + & .header__footer-link:hover { + color: $constant-color; + border-bottom: 1px solid $constant-color; + } + + &:has(.header__footer-link:target) .header__footer-link { + color: inherit; + border-bottom: none; + } + } + + &-link { + color: $white-accent; + text-decoration: none; + cursor: pointer; + } + + &-icon { + display: flex; + flex-direction: column; + align-items: center; + text-decoration: none; + padding-bottom: 7px; + color: $constant-color; + position: relative; + transition: color 0.5s ease; + + &::after { + content: ""; + position: absolute; + bottom: 0; + width: 9px; + height: 6px; + background-image: url('../images/icons/top-bar-arrow-down.svg'); + background-size: contain; + background-repeat: no-repeat; + } + + &:hover { + color: $white-accent; + filter: brightness(0) invert(1); + } + } + } +} + +#prev { + background-image: url('../images/header-image.svg'); +} + +#next { + background-image: url('../images/second-header-image.svg'); +} + +body:not(:has(:target)) #prev { + display: block; +} + +body:has(:target):not(:has(#next:target)) #prev { + display: block; + animation: fadeInImage 0.8s ease-out forwards; +} + +#prev:target { + display: block; + animation: fadeInImage 0.8s ease-out forwards; +} + +#next:target { + display: block; + animation: fadeInImage 0.8s ease-out forwards; +} + +#prev:target ~ #next, +#next:target ~ #prev { + display: none; +} + +@keyframes fadeInImage { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateX(-50%) translateY(20px); + } + to { + opacity: 1; + transform: translateX(-50%) translateY(0); + } +} + +@keyframes moveUpDown { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-8px); + } +} + +body:has(#prev:target) .header__footer-link[href="#prev"], +body:has(#next:target) .header__footer-link[href="#next"] { + color: $text-color; + border-bottom: 1px solid $constant-color; +} diff --git a/src/styles/blocks/_help-section.scss b/src/styles/blocks/_help-section.scss new file mode 100644 index 00000000..bea25de2 --- /dev/null +++ b/src/styles/blocks/_help-section.scss @@ -0,0 +1,38 @@ +.help-section { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 80%; + max-height: 90vh; + background-color: $menu-bg; + z-index: 999; + opacity: 0; + pointer-events: none; + border-radius: 8px; + transition: opacity 0.3s ease; + + &__top-bar { + padding: 18px 20px; + } +} + +@keyframes fadeInOverlay { + from { + opacity: 0; + transform: translate(-50%, calc(-50% + 20px)); + } + to { + opacity: 1; + transform: translate(-50%, -50%); + } +} + +#help-section:target { + display: block; + opacity: 1; + pointer-events: auto; + animation: fadeInOverlay 0.4s ease forwards; +} + diff --git a/src/styles/blocks/_help.scss b/src/styles/blocks/_help.scss new file mode 100644 index 00000000..9763c1c8 --- /dev/null +++ b/src/styles/blocks/_help.scss @@ -0,0 +1,68 @@ +.help { + &__wrapper { + padding-inline: 20px; + padding-bottom: 73px; + } + + &__title { + @extend %headline-two; + margin: 0; + margin-bottom: 30px; + + &-part--bold { + @extend %title-part-bold; + } + + &-part--light { + @extend %title-part-light; + } + } + + &__description { + color: $text-color; + @extend %text-one; + margin: 0; + margin-bottom: 30px; + } + + &__nav { + margin-bottom: 30px; + } + + &__link { + color: $constant-color; + @extend %text-one; + text-decoration: none; + cursor: pointer; + } + + &__list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + row-gap: 20px; + } + + &__address { + display: flex; + flex-direction: column; + font-family: $text-style; + + & :nth-child(1) { + margin-bottom: 11px; + } + + & :nth-child(2) { + margin-bottom: 8px; + } + } + + &__phone, + &__email { + color: $text-color; + text-decoration: none; + font-size: 16px; + } +} diff --git a/src/styles/blocks/_kat-loco.scss b/src/styles/blocks/_kat-loco.scss new file mode 100644 index 00000000..ac8f653b --- /dev/null +++ b/src/styles/blocks/_kat-loco.scss @@ -0,0 +1,183 @@ +.kat-loco { + padding: 50px 22px; + + @media (min-width: 768px) { + padding: 70px 34px; + } + + @media (min-width: 1280px) { + padding: 100px 110px; + } + + @media (min-width: 1920px) { + padding: 160px 234px; + } + + &__title { + margin: 0; + margin-bottom: 32px; + font-size: 21px; + font-family: $text-style; + font-weight: 900; + + @media (min-width: 768px) { + margin-bottom: 30px; + } + + @media (min-width: 1280px) { + font-size: 36px; + text-align: center; + margin-bottom: 82px; + } + + &-part--bold { + @extend %title-part-bold; + } + + &-part--light { + @extend %title-part-light; + } + } + + &__features { + display: flex; + flex-direction: column; + row-gap: 20px; + + @media (min-width: 768px) { + display: flex; + flex-direction: row; + column-gap: 20px; + } + + @media (min-width: 1280px) { + margin-bottom: 90px; + } + + @media (min-width: 1920px) { + column-gap: 205px; + margin-bottom: 0; + } + } + + &__feature { + display: flex; + flex-direction: column; + align-items: flex-start; + cursor: pointer; + + @media (min-width: 768px) { + align-items: center; + } + + &:first-of-type .kat-loco__feature-title { + font-size: 16px; + } + + &-title { + display: inline-block; + color: $white-accent; + margin: 0; + margin-bottom: 11px; + font-size: 16px; + font-family: $text-style; + font-weight: 900; + position: relative; + + @media (min-width: 768px) { + font-size: 18px; + margin-bottom: 21px; + white-space: nowrap; + } + + @media (min-width: 1280px) { + font-size: 16px; + } + + @media (min-width: 1920px) { + font-size: 18px; + margin-bottom: 16px; + } + + &::after { + @extend %title-underlined-effect; + } + } + + &-desc { + font-size: 16px; + line-height: 150%; + font-family: $text-style; + color: $text-color; + margin: 0; + + @media (min-width: 768px) { + text-align: center; + } + + &--short { + + @media (min-width: 1280px) { + display: none; + } + } + + &--full { + display: none; + + @media (min-width: 1280px) { + display: block; + } + } + } + + &:hover &-title::after { + width: 100%; + } + } + + &__icon { + display: none; + width: 85px; + height: 85px; + background-position: center; + background-size: contain; + background-repeat: no-repeat; + margin-bottom: 27px; + + @media (min-width: 768px) { + display: block + } + + @media (min-width: 1920px) { + margin-bottom: 30px; + } + + &--first { + background-image: url('../images/icons/kat-loco-first.svg'); + } + + &--second { + background-image: url('../images/icons/kat-loco-second.svg'); + } + + &--third { + background-image: url('../images/icons/kat-loco-third.svg'); + } + } + + &__btn { + display: none; + + @media (min-width: 1280px) { + margin: 0 auto; + display: flex; + width: 200px; + height: 48px; + } + + @media (min-width: 1920px) { + display: none; + } + } +} diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss new file mode 100644 index 00000000..3be4bf83 --- /dev/null +++ b/src/styles/blocks/_menu.scss @@ -0,0 +1,22 @@ +.menu { + height: 100vh; + background-color: $menu-bg; + z-index: 1000; + transform: translateX(-100%); + transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s; + + &:target { + transform: translateX(0); + opacity: 1; + visibility: visible; + } + + &__top-bar { + padding-bottom: 38px; + + &--faq, + &--help { + padding-bottom: 20px; + } + } +} diff --git a/src/styles/blocks/_more-than.scss b/src/styles/blocks/_more-than.scss new file mode 100644 index 00000000..c44d222e --- /dev/null +++ b/src/styles/blocks/_more-than.scss @@ -0,0 +1,87 @@ +.more-than { + background-color: $background-black; + padding: 50px 20px; + transition: opacity 0.8s ease, transform 0.8s ease; + + @media (min-width: 1280px) { + display: none; + padding: 100px 110px; + } + + @media (min-width: 1920px) { + padding: 158px 234px; + } + + &:target { + display: block; + animation: fadeInSlideUp 1.2s ease forwards; + } + + &__title { + @extend %headline-two; + margin: 0; + margin-bottom: 12px; + text-align: center; + + @media (min-width: 1280px) { + margin-bottom: 16px; + } + + &-part--bold { + @extend %title-part-bold; + } + + &-part--light { + @extend %title-part-light; + } + } + + &__description { + margin: 0; + color: $constant-color; + @extend %text-one; + height: 30px; + margin-bottom: 30px; + text-align: center; + + @media (min-width: 1280px) { + margin-bottom: 83px; + } + + @media (min-width: 1920px) { + margin-bottom: 70px; + } + } + + &__cards { + display: flex; + flex-direction: column; + row-gap: 20px; + + @media (min-width: 768px) { + gap: 40px 20px; + flex-direction: row; + flex-wrap: wrap; + } + + @media (min-width: 1280px) { + flex-wrap: nowrap; + column-gap: 20px; + row-gap: unset; + } + } +} + +@keyframes fadeInSlideUp { + 0% { + opacity: 0; + transform: translateY(20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + + + diff --git a/src/styles/blocks/_nav.scss b/src/styles/blocks/_nav.scss new file mode 100644 index 00000000..9bb444e9 --- /dev/null +++ b/src/styles/blocks/_nav.scss @@ -0,0 +1,31 @@ +.nav { + height: 100%; + + &__list { + margin: 0; + padding: 0; + list-style: none; + } + + &__item { + cursor: pointer; + padding-inline: 20px; + + &:hover { + background-color: #110E25; + } + } + + &__link { + display: block; + color: $white-accent; + text-decoration: none; + @extend %headline-two; + font-weight: 500; + padding-block: 11px; + + &:hover { + color: $constant-color; + } + } +} diff --git a/src/styles/blocks/_order-form.scss b/src/styles/blocks/_order-form.scss new file mode 100644 index 00000000..d78bc964 --- /dev/null +++ b/src/styles/blocks/_order-form.scss @@ -0,0 +1,148 @@ +.order__form { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 30px; + + @media (min-width: 1280px) { + padding-bottom: 0; + } + + &-details { + display: flex; + flex-direction: row; + column-gap: 75px; + } + + &-container { + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + + &__image { + display: none; + + @media (min-width: 768px) { + display: block; + width: 100%; + min-height: 200px; + background-image: url('../images/header-image.svg'); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + } + } + } + +} + + +.order__label { + margin: 0; + color: $text-color; + font-size: 16px; + line-height: 130%; + font-family: $text-style; + font-weight: 400; + margin-bottom: 10px; +} + +.order__quantity .order__label { + margin-left: 6px; +} + +.order__price .order__label { + margin-left: 16px; +} + +.order__quantity-wrapper { + position: relative; +} + +.order__quantity-value { + color: $white-accent; + font-size: 20px; + line-height: 130%; + font-family: $text-style; + font-weight: 400; +} + +.order__price-value { + color: $constant-color; + margin: 0; + font-size: 26px; + font-weight: 500; + font-family: $text-style; + text-align: center; +} + +.order__quantity-select { + background-color: $menu-bg; + color: $white-accent; + font-size: 20px; + line-height: 130%; + width: 90px; + height: 47px; + text-align: center; + margin-bottom: 3px; + font-family: $text-style; + outline: none; + border: none; + caret-color: $constant-color; + background-image: url('../images/icons/order-quantity-arrow-icon.svg'); + background-repeat: no-repeat; + background-position: right 10px center; + background-size: 9px 6px; + cursor: pointer; + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } +} + +.order__quantity-options { + background-color: $menu-bg; + border-radius: 4px; + overflow-y: auto; + height: 109px; + position: absolute; + width: 100%; + display: none; + + &.active { + display: block; + } + + &::-webkit-scrollbar { + width: 1px; + } + + &::-webkit-scrollbar-track { + background: #014954; + } + + &::-webkit-scrollbar-thumb { + background-color: $constant-color; + border-radius: 1px; + } +} + +.order__quantity-option { + display: block; + text-decoration: none; + color: $white-accent; + text-align: center; + font-size: 20px; + line-height: 130%; + font-family: $text-style; + padding-block: 4px; + cursor: pointer; + + &:hover { + background-color: #222; + } +} diff --git a/src/styles/blocks/_page.scss b/src/styles/blocks/_page.scss new file mode 100644 index 00000000..9f065191 --- /dev/null +++ b/src/styles/blocks/_page.scss @@ -0,0 +1,69 @@ +.page { + scroll-behavior: smooth; + + &__body { + margin: 0; + background: $background-gradient; + position: relative; + + &:has(#video-section:target), + &:has(#faq-section:target), + &:has(#help-section:target), + &:has(#purchase:target), + &:has(#pay:target), + &:has(#complete:target) { + overflow: hidden; + } + + &:has(#video-section:target), + &:has(#faq-section:target), + &:has(#help-section:target) { + &::after { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + z-index: 998; + } + } + } + + &__fixed-overlay { + position: fixed; + top: 0; + right: 0; + left: 0; + opacity: 0; + pointer-events: none; + transition: opacity 0.5s ease; + + &:target { + opacity: 1; + pointer-events: all; + } + } + + &__menu { + @extend .page__fixed-overlay; + + &--faq, + &--help { + overflow-y: auto; + } + } + + &__purchase { + @extend .page__fixed-overlay; + } + + &__card-data { + @extend .page__fixed-overlay; + } + + &__complete { + @extend .page__fixed-overlay; + } +} diff --git a/src/styles/blocks/_product.scss b/src/styles/blocks/_product.scss new file mode 100644 index 00000000..a879bed7 --- /dev/null +++ b/src/styles/blocks/_product.scss @@ -0,0 +1,277 @@ +.product { + padding: 50px 20px; + + @media (min-width: 768px) { + padding: 70px 34px 50px; + } + + @media (min-width: 1280px) { + padding: 0; + } + + &__about { + display: flex; + flex-direction: column; + + @media (min-width: 768px) { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 20px; + align-items: start; + } + + @media (min-width: 1280px) { + padding: 100px 118px 183px 246px; + column-gap: 109px; + } + + @media (min-width: 1920px) { + padding: 147px 234px 176px 466px; + column-gap: 117px; + } + } + + &__title { + order: 1; + margin: 0; + margin-bottom: 20px; + @extend %headline-two ; + line-height: 100%; + font-family: $text-style; + + @media (min-width: 768px) { + grid-column: 2 / -1; + grid-row: 1 / 2; + margin-bottom: 30px; + } + + @media (min-width: 1920px) { + margin-bottom: 32px; + } + + &-part--bold { + @extend %title-part-bold; + } + + &-part--light { + @extend %title-part-light; + } + } + + &__slider { + order: 2; + margin-bottom: 20px; + + @media (min-width: 768px) { + grid-column: 1 / 2; + grid-row: 1 / 4; + } + + &-container { + width: 100%; + height: 189px; + object-fit: cover; + object-position: center; + position: relative; + + &:has(.product__slider-video:first-of-type:not(:target)):not(:has(.product__slider-video:target)) .product__slider-video:first-of-type { + opacity: 1; + pointer-events: auto; + z-index: 1; + } + } + + &-video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + pointer-events: none; + border: none; + transition: opacity 0.5s ease-in-out; + + &:target { + opacity: 1; + pointer-events: auto; + z-index: 1; + } + } + + &-nav { + display: flex; + flex-direction: row; + justify-content: center; + column-gap: 6px; + position: absolute; + bottom: -14px; + left: 50%; + transform: translateX(-50%); + } + + &-dot { + width: 4px; + height: 4px; + border-radius: 50%; + background-color: #484848; + } + + &:not(:has(:target)) .product__slider-dot[href="#img1"] { + background-color: #ababab; + } + } + + &__description { + margin: 0; + margin-bottom: 24px; + color: $text-color; + @extend %text-one; + order: 3; + + @media (min-width: 768px) { + grid-column: 2 / -1; + grid-row: 2 / 3; + margin-bottom: 30px; + } + + @media (min-width: 1280px) { + margin-bottom: 20px; + } + + @media (min-width: 1920px) { + margin-bottom: 32px; + } + } + + &__video-button { + display: block; + margin-bottom: 79px; + order: 4; + + @media (min-width: 768px) { + grid-column: 2 / -1; + grid-row: 3 / 4; + margin-bottom: 84px; + } + + @media (min-width: 1280px) { + margin: 0; + } + + &:hover { + transform: scale(1.06); + } + } + + &__greeting { + display: block; + color: $constant-color; + @extend %text-two; + margin-bottom: 11px; + + @media (min-width: 1280px) { + margin-bottom: 15px; + } + } + + &__company-wrapper { + display: grid; + grid-template-columns: 1fr 1fr; + + @media (min-width: 768px) { + grid-template-columns: 1fr 1fr 1fr; + column-gap: 10px; + } + + @media (min-width: 1280px) { + padding: 0 132px 98px 109px; + column-gap: 112px; + } + + @media (min-width: 1920px) { + padding: 0 256px 156px 327px; + column-gap: 100px; + } + } + + &__company { + grid-column: 1 / -1; + + @media (min-width: 768px) { + grid-column: 1 / 3; + grid-row: 3 / 4; + } + + @media (min-width: 1280px) { + grid-column: 1 / 2; + min-width: 429px; + } + + @media (min-width: 1920px) { + grid-column: 1 / 2; + } + + &-description { + margin: 0; + color: $text-color; + @extend %text-one; + + @media (min-width: 1280px) { + text-align: justify; + } + } + + &-title { + margin: 0; + margin-bottom: 22px; + @extend %headline-two ; + line-height: 100%; + font-family: $text-style; + + @media (min-width: 1280px) { + margin-bottom: 32px; + } + + &--bold { + @extend %title-part-bold; + } + + &--light { + @extend %title-part-light; + } + } + } + + &__image-block { + display: none; + + @media (min-width: 768px) { + display: block; + width: 100%; + min-height: 256px; + background-image: url('../images/about-product-bg-image.svg'); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + grid-column: 3 / 4; + grid-row: 1 / 4; + } + + @media (min-width: 1280px) { + grid-column: 2 / 4; + } + + @media (min-width: 1920px) { + grid-column: 2 / 4; + } + } +} + +#img1:target ~ .product__slider-nav a[href="#img1"], +#img2:target ~ .product__slider-nav a[href="#img2"], +#img3:target ~ .product__slider-nav a[href="#img3"], +#img4:target ~ .product__slider-nav a[href="#img4"], +#img5:target ~ .product__slider-nav a[href="#img5"] { + background-color: #ababab; +} diff --git a/src/styles/blocks/_purchase.scss b/src/styles/blocks/_purchase.scss new file mode 100644 index 00000000..9cce9d6d --- /dev/null +++ b/src/styles/blocks/_purchase.scss @@ -0,0 +1,265 @@ +.purchase { + background: inherit; + height: 100vh; + z-index: 1000; + transform: translateX(-100%); + transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s; + + &:target { + transform: translateX(0); + opacity: 1; + visibility: visible; + overflow: auto; + } + + &__top-bar > :last-child { + width: 15px; + height: 15px; + } + + &__steps { + display: flex; + flex-direction: row; + height: 33px; + width: 100%; + + &:not(:has(.purchase__step:target)) .purchase__step--place-order { + border-bottom: 1px solid $constant-color; + } + } + + &__step { + flex: 1; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + display: block; + list-style: none; + color: $constant-color; + text-decoration: none; + font-size: 12px; + font-weight: 500; + line-height: 130%; + font-family: $text-style; + cursor: pointer; + border-bottom: 1px solid transparent; + transition: border-bottom 0.5s ease; + + @media (min-width: 768px) { + font-size: 14px; + } + + @media (min-width: 768px) { + font-size: 16px; + } + + &:hover { + border-bottom: 1px solid $constant-color; + } + + &:target { + border-bottom: 1px solid $constant-color; + } + } + + &__form { + padding: 30px 20px 37px; + + @media (min-width: 768px) { + padding-inline: 34px; + } + + @media (min-width: 1280px) { + display: flex; + padding-block: 60px; + padding-inline: 110px; + flex-direction: row; + column-gap: 20px; + } + + @media (min-width: 1280px) { + padding-block: 120px; + padding-inline: 234px; + } + + &-fields { + display: flex; + flex-direction: column; + row-gap: 30px; + align-items: center; + + @media (min-width: 1280px) { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: repeat(5, 1fr); + column-gap: 20px; + row-gap: 0; + } + } + } + + &__label { + font-size: 14px; + line-height: 130%; + color: $text-color; + font-family: $text-style; + cursor: pointer; + } + + &__select { + margin-top: 13px; + height: 47px; + font-size: 16px; + line-height: 130%; + color: $white-accent; + margin-bottom: 3px; + background-color: $menu-bg; + padding-left: 24px; + font-family: $text-style; + display: flex; + align-items: center; + background-image: url('../images/icons/drop-down-arrow.svg'); + background-repeat: no-repeat; + background-position: right 10px center; + cursor: pointer; + } + + &__dropdown { + background-color: $menu-bg; + display: flex; + flex-direction: column; + position: absolute; + width: 100%; + height: 160px; + display: none; + overflow-y: scroll; + + &.active { + display: block; + z-index: 999; + } + + &::-webkit-scrollbar { + width: 1px; + } + + &::-webkit-scrollbar-track { + background: #014954; + } + + &::-webkit-scrollbar-thumb { + background-color: $constant-color; + border-radius: 1px; + } + + &--city { + background-color: $menu-bg; + display: flex; + flex-direction: column; + position: absolute; + width: 100%; + height: 160px; + display: none; + overflow-y: scroll; + + &.active { + display: block; + z-index: 999; + } + + &::-webkit-scrollbar { + width: 1px; + } + + &::-webkit-scrollbar-track { + background: #014954; + } + + &::-webkit-scrollbar-thumb { + background-color: $constant-color; + border-radius: 1px; + } + } + } + + &__value { + display: block; + text-decoration: none; + color: $white-accent; + font-size: 16px; + line-height: 130%; + font-family: $text-style; + padding: 4px 24px; + + &:hover { + background-color: #222; + } + + &--empty { + height: 20px; + } + } + + &__btn { + @media (min-width: 1280px) { + width: 200px; + height: 48px; + } + } + + &__group, + &__field { + position: relative; + width: 100%; + } + + &__input { + background-color: transparent; + border: none; + border-bottom: 1px solid $text-color; + padding: 0; + width: 100%; + box-sizing: border-box; + font-size: 14px; + line-height: 150%; + font-weight: 400; + color: $white-accent; + padding-bottom: 6px; + cursor: pointer; + @extend %autofill-fix; + + &:focus { + outline: none; + border-bottom: 1px solid $constant-color; + } + + &:focus + .purchase__label { + top: 0; + transform: translateY(-100%); + color: $constant-color; + } + } + + &__label { + position: absolute; + left: 0px; + font-size: 14px; + line-height: 150%; + font-weight: 400; + color: $white-accent; + font-family: $text-style; + box-sizing: border-box; + transform: translateY(-70%); + color: $text-color; + pointer-events: none; + transition: all 0.3s ease; + } +} + +@media (min-width: 1280px) { + .purchase__field { + margin-top: 16px; + } +} diff --git a/src/styles/blocks/_short-nav.scss b/src/styles/blocks/_short-nav.scss new file mode 100644 index 00000000..cc558a32 --- /dev/null +++ b/src/styles/blocks/_short-nav.scss @@ -0,0 +1,53 @@ +.short-nav__list { + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + row-gap: 12px; + font-family: $text-style; + + @media (min-width: 768px) { + display: flex; + flex-direction: row; + column-gap: 45px; + } +} + +.short-nav__item { + list-style: none; + position: relative; + width: fit-content; +} + +.short-nav__link { + font-size: 13px; + line-height: 150%; + font-weight: 400; + font-family: $text-style; + color: $white-accent; + text-decoration: none; + cursor: pointer; + + @media (min-width: 768px) { + font-size: 14px; + } + + &:hover { + color: $constant-color; + } + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: -4px; + width: 0; + height: 1px; + background-color: $constant-color; + transition: width 0.3s ease; + } + + &:hover::after { + width: 100%; + } +} diff --git a/src/styles/blocks/_tech-spec.scss b/src/styles/blocks/_tech-spec.scss new file mode 100644 index 00000000..e69e5462 --- /dev/null +++ b/src/styles/blocks/_tech-spec.scss @@ -0,0 +1,263 @@ +.tech-spec { + padding: 50px 20px; + background-color: $background-black; + + @media (min-width: 1280px) { + padding: 100px 112px; + } + + @media (min-width: 1920px) { + padding: 160px 319px 160px 426px; + } + + &__title { + margin: 0; + margin-bottom: 30px; + @extend %headline-two; + line-height: 100%; + + @media (min-width: 1280px) { + text-align: end; + margin-right: 73px; + margin-bottom: 80px; + } + + &-part { + margin: 0; + margin-bottom: 30px; + font-size: 21px; + font-family: $text-style; + + &--bold { + @extend %title-part-bold; + } + + &--light { + @extend %title-part-light; + } + } + } + + &__images-wrapper { + display: grid; + position: relative; + + @media (min-width: 1280px) { + grid-template-columns: repeat(12, 1fr); + column-gap: 20px; + align-items: end; + height: 355px; + } + } + + &__container { + display: block; + width: 197px; + height: 194px; + background-image: url('../images/tech-spec-bg.svg'); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + position: relative; + margin: 0 auto; + + @media (min-width: 1280px) { + width: 297px; + height: 294px; + grid-column: 4 / span 6; + + &::before { + display: block; + content: ""; + background-repeat: no-repeat; + background-size: contain; + background-image: url('../images/tech-spec-elips-line.svg'); + width: 48px; + height: 340px; + position: absolute; + top: 35px; + left: -10px; + + @media (min-width: 1920px) { + width: 40px; + height: 201px; + top: 80px; + left: -15px; + } + } + } + + @media (min-width: 1920px) { + width: 312px; + height: 340px; + } + } + + &__button { + display: block; + width: 34px; + height: 34px; + background-image: url('../images/icons/tech-spec-button-plus.svg'); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + cursor: pointer; + + @media (min-width: 1280px) { + display: none; + } + + &-plus.active { + background-image: url('../images/icons/tech-spec-button-minus.svg'); + } + + &-plus--1 { + position: absolute; + top: -10px; + left: 60px; + } + + &-plus--2 { + position: absolute; + top: 80px; + left: 140px; + } + + &-plus--3 { + position: absolute; + top: 160px; + left: -15px; + } + } + + &__description { + display: none; + background-color: $menu-bg; + color: $text-color; + padding: 17px 10px 22px; + width: max-content; + min-height: max-content; + opacity: .9; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 999; + @extend %text-one; + + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + @media (min-width: 1280px) { + display: flex; + flex-direction: column; + flex-wrap: wrap; + background-color: transparent; + padding: 0; + text-align: left; + } + + &-title { + margin-bottom: 21px; + display: none; + color: $white-accent; + margin: 0; + + @media (min-width: 1280px) { + display: block; + + font-size: 18px; + font-weight: 900; + margin-bottom: 21px; + } + } + + &-text { + font-size: 12px; + line-height: 150%; + font-family: $text-style; + margin: 0; + + @media (min-width: 1280px) { + font-size: 16px; + } + } + + &.active { + display: block; + } + } +} + +@media (min-width: 1280px) { + .tech-spec__description--one { + position: absolute; + top: 0; + left: 50%; + transform: translateX(calc(-50% - 438px)); + + &::before { + display: block; + content: ""; + background-repeat: no-repeat; + background-size: contain; + background-image: url('../images/tech-spec-line1.svg'); + background-position: 50% center; + width: 403px; + height: 73px; + position: absolute; + top: 10px; + left: 125px; + + @media (min-width: 1920px) { + width: 660px; + height: 50px; + top: 5px; + left: 50px; + } + } + } + + .tech-spec__description--two { + position: absolute; + top: 0; + transform: translateX(200px); + width: 338px; + + &::after { + display: block; + content: ""; + background-repeat: no-repeat; + background-size: contain; + background-image: url('../images/tech-spec-line2.svg'); + width: 191px; + height: 244px; + position: absolute; + bottom: -60px; + left: -200px; + } + } + + .tech-spec__description--three { + position: absolute; + top: auto; + bottom: 0; + left: 50%; + transform: translateX(-450px); + + &::before { + display: block; + content: ""; + background-repeat: no-repeat; + background-size: contain; + background-image: url('../images/tech-spec-line3.svg'); + width: 134px; + height: 113px; + position: absolute; + bottom: 100px; + right: -60px; + } + } +} + diff --git a/src/styles/blocks/_top-bar.scss b/src/styles/blocks/_top-bar.scss new file mode 100644 index 00000000..2df43d18 --- /dev/null +++ b/src/styles/blocks/_top-bar.scss @@ -0,0 +1,150 @@ +.top-bar { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 18px 20px; + + @media (min-width: 1280px) { + padding: 64px 110px; + } + + @media (min-width: 1920px) { + padding: 60px 234px; + } + + &__logo { + width: 58px; + height: 12px; + background-image: url(../images/icons/top-bar-logo.svg); + @extend %logo-base; + + @media (min-width: 768px) { + width: 67px; + height: 14px; + } + + @media (min-width: 1280px) { + width: 76px; + height: 16px; + } + + &:hover { + transform: scale(1.2); + } + } + + &__lang-choice { + background-color: $menu-bg; + color: $constant-color; + font-size: 16px; + line-height: 130%; + font-weight: 500; + font-family: $text-style; + border: none; + outline: none; + width: 35px; + overflow-y: auto; + cursor: pointer; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background-image: url('../images/icons/top-bar-arrow-down.svg'); + background-repeat: no-repeat; + background-position: right 10px; + background-size: 9px 6px; + display: none; + + &:focus { + outline: none; + } + + @media (min-width: 1280px) { + display: block; + } + } + + &__icon { + width: 20px; + height: 9px; + background-image: url(../images/icons/top-bar-menu-icon.svg); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + + @media (min-width: 768px) { + width: 30px; + height: 14px; + } + + &--close { + width: 17px; + height: 17px; + background-image: url(../images/icons/top-bar-close-icon.svg); + margin-left: auto; + transition: 0.5s ease; + + &:hover { + @extend %hover-blue-icon + } + } + + &--arrow { + width: 8.5px; + height: 17px; + background-image: url(../images/icons/top-bar-arrow-icon.svg); + margin-right: auto; + + &:hover { + @extend %hover-blue-icon; + } + } + + &.top-bar__icon--menu { + display: block; + + &:hover { + @extend %hover-blue-icon; + } + + @media (min-width: 1280px) { + display: none; + } + } + } + + &__short-nav ul:first-of-type{ + display: none; + + @media (min-width: 1280px) { + display: flex; + flex-direction: row; + column-gap: 36px; + } + + & li a{ + font-size: 16px; + line-height: 130%; + font-weight: 500; + } + } + + &__btn { + display: none; + + @media (min-width: 1280px) { + display: flex; + max-width: 200px; + height: 48px; + } + } + + &__controls { + @media (min-width: 1280px) { + width: 100%; + display: flex; + justify-content: space-between; + padding-inline: 34px; + } + } +} diff --git a/src/styles/blocks/_video-button.scss b/src/styles/blocks/_video-button.scss new file mode 100644 index 00000000..d7a92fc5 --- /dev/null +++ b/src/styles/blocks/_video-button.scss @@ -0,0 +1,27 @@ +.video-button__cta { + cursor: pointer; + transition: transform 1s ease; + background-color: transparent; + width: 100%; + height: 66px; + background-image: url('../images/icons/header-play-button.svg'); + background-repeat: no-repeat; + background-size: contain; + + @media (min-width: 321px) { + background-position: center; + } + + @media (min-width: 768px) { + background-position: left; + } + + @media (min-width: 1280px) { + margin-left: 92px; + } + + &:hover { + transform: scale(1.1); + background-image: url('../images/icons/header-play-button-hover.svg'); + } +} diff --git a/src/styles/blocks/_video-section.scss b/src/styles/blocks/_video-section.scss new file mode 100644 index 00000000..131117fe --- /dev/null +++ b/src/styles/blocks/_video-section.scss @@ -0,0 +1,69 @@ +.video-section { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 70%; + height: 40vh; + background-color: transparent; + z-index: 999; + opacity: 0; + pointer-events: none; + border-radius: 8px; + transition: opacity 0.3s ease; + box-sizing: border-box; + + &__wrapper { + width: 100%; + height: 100%; + position: relative; + } + + &__iframe { + width: 100%; + height: 100%; + border: none; + } + + &__icon { + position: absolute; + z-index: 1000; + display: block; + width: 20px; + height: 20px; + margin: 6px; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + cursor: pointer; + right: 0; + + &--close { + background-image: url('../images/icons/top-bar-close-icon.svg'); + + &:hover { + @extend %hover-blue-icon; + } + } + } +} + +@keyframes fadeInOverlay { + from { + opacity: 0; + transform: translate(-50%, calc(-50% + 20px)); + } + to { + opacity: 1; + transform: translate(-50%, -50%); + } +} + +#video-section:target { + display: block; + opacity: 1; + pointer-events: auto; + animation: fadeInOverlay 0.4s ease forwards; +} + diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d1..5448259c 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,30 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'blocks/page'; +@import 'blocks/btn'; +@import 'blocks/top-bar'; +@import 'blocks/short-nav'; +@import 'blocks/header'; +@import 'blocks/video-button'; +@import 'blocks/more-than'; +@import 'blocks/card'; +@import 'blocks/video-section'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/faq'; +@import 'blocks/faq-section'; +@import 'blocks/help'; +@import 'blocks/help-section'; +@import 'blocks/purchase'; +@import 'blocks/order-form'; +@import 'blocks/card-data'; +@import 'blocks/complete'; +@import 'blocks/product'; +@import 'blocks/tech-spec'; +@import 'blocks/kat-loco'; +@import 'blocks/address'; +@import 'blocks/get-in-touch'; +@import 'blocks/footer'; + -body { - background: $c-gray; -} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b..4c8d141b 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,92 @@ -%h1 { - font-family: Roboto, sans-serif; +%headline-one { + font-size: 26px; + line-height: 130%; + font-family: $text-style; + + @media (min-width: 1280px) { + font-size: 46px; + } +} + +%headline-two { + font-size: 21px; + font-family: $text-style; + + @media (min-width: 1280px) { + font-size: 36px; + line-height: 100%; + } +} + +%subheading { + font-size: 26px; + line-height: 130%; + font-family: $text-style; +} + +%logo-base { + display: block; + background-position: center; + background-size: contain; + background-repeat: no-repeat; + cursor: pointer; + transition: transform 0.5s ease; +} + +%text-two { + font-size: 14px; + font-family: $text-style; +} + +%text-one { + font-size: 12px; + font-family: $text-style; + + @media (min-width: 1280px) { + font-size: 14px; + } + + @media (min-width: 1920px) { + font-size: 16px; + line-height: 150%; + } +} + +%hover-blue-icon { + filter: brightness(0) saturate(100%) invert(64%) sepia(10%) saturate(3600%) hue-rotate(165deg) brightness(103%) contrast(103%); +} + +%title-part-bold { + color: $white-accent; + font-weight: 900; +} + +%title-part-light { + color: $constant-color; font-weight: 400; } + +%title-underlined-effect { + content: ''; + position: absolute; + left: 0; + bottom: -4px; + width: 0; + height: 1px; + background-color: $white-accent; + transition: width 0.3s ease; +} + +%autofill-fix { + &:-webkit-autofill { + background-color: transparent !important; + -webkit-text-fill-color: $white-accent; + transition: background-color 5000s ease 0s; + -webkit-box-shadow: 0 0 0px 1000px transparent inset; // extra fix + } + + &:-moz-autofill { + background-color: transparent !important; + color: $white-accent !important; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..a9b0a937 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,9 @@ -$c-gray: #eee; +$constant-color: #05C2DF; +$background-black: #05040B; +$dark-grey-accent: #2F2F2F; +$text-color: #929292; +$white-accent: #ffffff; +$text-style: 'Inter', sans-serif; +$menu-bg: #191536; +$background-gradient: linear-gradient(to right, #191536, #000000); +