diff --git a/src/complete.html b/src/complete.html new file mode 100644 index 000000000..1fea46fa9 --- /dev/null +++ b/src/complete.html @@ -0,0 +1,95 @@ + + + + + + KatVR + + + + + + + + +
+
+ +
+

+ 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 + +
+
+
+ + + diff --git a/src/images/3.png b/src/images/3.png new file mode 100644 index 000000000..09481103c Binary files /dev/null and b/src/images/3.png differ diff --git a/src/images/about/img.png b/src/images/about/img.png new file mode 100644 index 000000000..210ab2eed Binary files /dev/null and b/src/images/about/img.png differ diff --git a/src/images/favicon.svg b/src/images/favicon.svg new file mode 100644 index 000000000..a42594520 --- /dev/null +++ b/src/images/favicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/buildings-icon.svg b/src/images/icons/buildings-icon.svg new file mode 100644 index 000000000..68a503781 --- /dev/null +++ b/src/images/icons/buildings-icon.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/facebook-icon.svg b/src/images/icons/facebook-icon.svg new file mode 100644 index 000000000..e4de883e6 --- /dev/null +++ b/src/images/icons/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/hat-icon.svg b/src/images/icons/hat-icon.svg new file mode 100644 index 000000000..ed2e4f006 --- /dev/null +++ b/src/images/icons/hat-icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/icons/network-icon.svg b/src/images/icons/network-icon.svg new file mode 100644 index 000000000..81f8ef946 --- /dev/null +++ b/src/images/icons/network-icon.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/reddit-icon.svg b/src/images/icons/reddit-icon.svg new file mode 100644 index 000000000..53bade5b8 --- /dev/null +++ b/src/images/icons/reddit-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/sport-icon.svg b/src/images/icons/sport-icon.svg new file mode 100644 index 000000000..b93107ada --- /dev/null +++ b/src/images/icons/sport-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/square-icon.svg b/src/images/icons/square-icon.svg new file mode 100644 index 000000000..37e8765f1 --- /dev/null +++ b/src/images/icons/square-icon.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/twitter-icon.svg b/src/images/icons/twitter-icon.svg new file mode 100644 index 000000000..084900b8e --- /dev/null +++ b/src/images/icons/twitter-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/vr-icon.svg b/src/images/icons/vr-icon.svg new file mode 100644 index 000000000..6188346d2 --- /dev/null +++ b/src/images/icons/vr-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icons/wifi-icon.svg b/src/images/icons/wifi-icon.svg new file mode 100644 index 000000000..7850ac025 --- /dev/null +++ b/src/images/icons/wifi-icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/icons/youtube-icon.svg b/src/images/icons/youtube-icon.svg new file mode 100644 index 000000000..d0756ed2d --- /dev/null +++ b/src/images/icons/youtube-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 000000000..105f9e7f1 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/mastercard-icon.svg b/src/images/mastercard-icon.svg new file mode 100644 index 000000000..67e199b82 --- /dev/null +++ b/src/images/mastercard-icon.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/order/img.png b/src/images/order/img.png new file mode 100644 index 000000000..decb6fb64 Binary files /dev/null and b/src/images/order/img.png differ diff --git a/src/images/pay/visa.svg b/src/images/pay/visa.svg new file mode 100644 index 000000000..dcba59054 --- /dev/null +++ b/src/images/pay/visa.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/play-button-bg.png b/src/images/play-button-bg.png new file mode 100644 index 000000000..136c4eb9a Binary files /dev/null and b/src/images/play-button-bg.png differ diff --git a/src/images/sprite1.svg b/src/images/sprite1.svg new file mode 100644 index 000000000..914bdc0e3 --- /dev/null +++ b/src/images/sprite1.svg @@ -0,0 +1 @@ + diff --git a/src/images/sprite2.svg b/src/images/sprite2.svg new file mode 100644 index 000000000..d64f12e10 --- /dev/null +++ b/src/images/sprite2.svg @@ -0,0 +1 @@ + diff --git a/src/images/tech/ellipse.svg b/src/images/tech/ellipse.svg new file mode 100644 index 000000000..86595c33e --- /dev/null +++ b/src/images/tech/ellipse.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/tech/img-line-1-large.svg b/src/images/tech/img-line-1-large.svg new file mode 100644 index 000000000..ef522dfa8 --- /dev/null +++ b/src/images/tech/img-line-1-large.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/tech/img-line-1-small.svg b/src/images/tech/img-line-1-small.svg new file mode 100644 index 000000000..dfc56f6dd --- /dev/null +++ b/src/images/tech/img-line-1-small.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/tech/img-line-2-large.svg b/src/images/tech/img-line-2-large.svg new file mode 100644 index 000000000..3caea26c8 --- /dev/null +++ b/src/images/tech/img-line-2-large.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech/img-line-2-small.svg b/src/images/tech/img-line-2-small.svg new file mode 100644 index 000000000..a1f024655 --- /dev/null +++ b/src/images/tech/img-line-2-small.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech/img-line-3-large.svg b/src/images/tech/img-line-3-large.svg new file mode 100644 index 000000000..fad6249e1 --- /dev/null +++ b/src/images/tech/img-line-3-large.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech/img-line-3-small.svg b/src/images/tech/img-line-3-small.svg new file mode 100644 index 000000000..f47de02d6 --- /dev/null +++ b/src/images/tech/img-line-3-small.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech/tech-bg.png b/src/images/tech/tech-bg.png new file mode 100644 index 000000000..608c501a3 Binary files /dev/null and b/src/images/tech/tech-bg.png differ diff --git a/src/images/visa-icon.svg b/src/images/visa-icon.svg new file mode 100644 index 000000000..0a97fb763 --- /dev/null +++ b/src/images/visa-icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/index.html b/src/index.html index 8019b83ec..37896d495 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,1425 @@ - + - Title + KatVR + + + + + - -

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$ + +
+
+ + × + + +
+
+
+
+
+
+ slide img +
+ +
+ slide img +
+ +
+ slide img +
+ +
+ slide img +
+ +
+ slide img +
+
+
+
+
+ + + + More + +
+
+
+
+
+
+
+
+ + + + + + + +
+
+
+

+ More Than + Gaming +

+

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

+
+
+
+ + + +
+

Education

+

+ 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 allowing visitors to freely walk around, and feel their vibe +

+
+ +
+
+ + + +
+

Fitness

+

+ 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 meet space requirements +

+
+
+
+
+ +
+
+
+
+
+
+
+ slide +
+ +
+ slide +
+ +
+ slide +
+ +
+ slide +
+ +
+ slide +
+
+
+
+
+
+
+
+
+

+ 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 +

+
+
+ About Us + + About Us + + About Us + + About Us + + About Us + + About Us + + About Us +
+
+
+
+ +
+
+

+ Tech + Specs +

+
+
+
+
+

Sensor

+

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

+
+ +
+ +
+
+

Connection

+

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

+
+ +
+ +
+
+

Batteries

+

+ 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 +

+
+ +
+ + + line + + + + + line + + + + + line + + ellipse +
+
+
+
+ +
+
+

+ Why + Kat Loco? +

+
+
+
+ + + +
+

Universally Compatible

+

+ 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 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 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 +

+ +
+
+ + + + + + + + +
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/order.html b/src/order.html new file mode 100644 index 000000000..3d555adff --- /dev/null +++ b/src/order.html @@ -0,0 +1,323 @@ + + + + + + KatVR + + + + + + + + +
+
+ +
+
+ bg + +
+
Price
+ 1200$ +
+
+
+ + + + + + + + + +
+
+
+
+ + + diff --git a/src/pay.html b/src/pay.html new file mode 100644 index 000000000..344b78c12 --- /dev/null +++ b/src/pay.html @@ -0,0 +1,234 @@ + + + + + + KatVR + + + + + + + + +
+
+ +
+
+ bg + +
+
Price
+ 1200$ +
+
+
+ + + + + + + + +
+
+
+
+ + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..cd79426d6 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,251 @@ 'use strict'; + +// @import '../scripts/order'; + +const techItem = document.querySelectorAll('.tech__item'); +const contactsList = document.querySelector('.contacts__list'); +const footerContactsList = document.querySelector('.footer__contacts'); +const contactsLinks = document.querySelectorAll('.contacts__item'); +const menu = document.querySelector('.menu__content'); +const topBarMenu = document.querySelector('.top-bar__menu'); +const topBarNav = document.querySelector('.top-bar__nav'); +const topBarBtn = document.querySelector('.top-bar__btn'); +const headerBottom = document.querySelector('.header__bottom'); +const faqBtn = document.querySelector('.header__faq-btn'); +const helpBtn = document.querySelector('.header__help-btn'); + +techItem.forEach((item) => { + item.querySelector('.tech__item-btn').addEventListener('click', () => { + item.querySelector('.tech__item-btn').classList.toggle('tech__item-btn--active'); + item.querySelector('.tech__item-content').classList.toggle('tech__item-content--active'); + }); +}); + +function moveBtn() { + if (window.innerWidth < 768) { + contactsLinks.forEach((link) => { + footerContactsList.append(link); + }); + + } else { + contactsLinks.forEach((link) => { + contactsList.append(link); + }); + }; + + if (window.innerWidth < 1024) { + menu.append(faqBtn); + menu.append(helpBtn); + menu.prepend(topBarNav); + } else { + headerBottom.prepend(helpBtn); + headerBottom.prepend(faqBtn); + topBarMenu.append(topBarNav); + }; +}; + +window.addEventListener('load', moveBtn); +window.addEventListener('resize', moveBtn); + +document.querySelectorAll('.dropdown').forEach(function (dropDownWrapper) { + const dropDownBtn = dropDownWrapper.querySelector('.dropdown__button'); + const dropDownList = dropDownWrapper.querySelector('.dropdown__list'); + const dropDownListItems = dropDownList.querySelectorAll('.dropdown__item'); + const dropDownInput = dropDownWrapper.querySelector('.dropdown__input'); + + dropDownBtn.addEventListener('click', function () { + dropDownList.classList.toggle('dropdown__list--active'); + this.classList.add('dropdown__button--active'); + }); + dropDownListItems.forEach(function (listItem) { + listItem.addEventListener('click', function (e) { + e.stopPropagation(); + dropDownBtn.innerText = this.innerText; + dropDownBtn.focus(); + dropDownInput.value = this.dataset.value; + dropDownList.classList.remove('dropdown__list--active'); + }); + }); + + document.addEventListener('click', function (e) { + if (e.target !== dropDownBtn) { + dropDownBtn.classList.remove('dropdown__button--active'); + dropDownList.classList.remove('dropdown__list--active'); + } + }); + + document.addEventListener('keydown', function (e) { + if (e.key === 'Tab' || e.key == 'Escape') { + dropDownBtn.classList.remove('dropdown__button--active'); + dropDownList.classList.remove('dropdown__list--active'); + } + }); +}); + +const modal = document.getElementById("my-modal"); +const closeBtn = document.getElementById("close-modal-btn"); +const iframe = document.getElementById("youtube-video"); +const openButtons = document.querySelectorAll(".open-video-btn"); + +const videoURL = "https://www.youtube.com/embed/SvTbB19bvIw"; + +openButtons.forEach(button => { + button.addEventListener("click", () => { + iframe.src = videoURL + "?autoplay=1"; + modal.style.display = "block"; + }); +}); + +closeBtn.onclick = function () { + modal.style.display = "none"; + iframe.src = ""; +} + +window.onclick = function (event) { + if (event.target === modal) { + modal.style.display = "none"; + iframe.src = ""; + } +}; + +const button = document.getElementById('top-bar__btn'); +let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop; + +window.addEventListener('scroll', () => { + const scrollTop = window.pageYOffset || document.documentElement.scrollTop; + const windowHeight = window.innerHeight; + const documentHeight = document.documentElement.scrollHeight; + + const distanceFromBottom = documentHeight - (scrollTop + windowHeight); + + if (distanceFromBottom <= 100 && scrollTop > lastScrollTop) { + button.classList.add('top-bar__btn--hidden'); + } else if (scrollTop < lastScrollTop) { + button.classList.remove('top-bar__btn--hidden'); + } + + lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; +}); + +const faqCloseBtn = document.querySelector('.faq__close-btn'); +const faq = document.querySelector('.page__faq'); +const body = document.querySelector('.page__body'); + +faqBtn.addEventListener('click', () => { + faq.classList.add('page__faq-open'); + body.classList.add('page__body-lock'); +}); +faqCloseBtn.addEventListener('click', () => { + faq.classList.remove('page__faq-open'); + body.classList.remove('page__body-lock'); +}); + +const helpCloseBtn = document.querySelector('.help__close-btn'); +const help = document.querySelector('.page__help'); + +helpBtn.addEventListener('click', () => { + help.classList.add('page__help-open'); + body.classList.add('page__body-lock'); +}); +helpCloseBtn.addEventListener('click', () => { + help.classList.remove('page__help-open'); + body.classList.remove('page__body-lock'); +}); + +const langCloseBtn = document.querySelector('.lang__close-btn'); +const lang = document.querySelector('.page__lang'); +const langBtn = document.querySelector('.menu__lang-btn'); + +langBtn.addEventListener('click', () => { + lang.classList.add('page__lang-open'); + body.classList.add('page__body-lock'); +}); +langCloseBtn.addEventListener('click', (e) => { + lang.classList.remove('page__lang-open'); + body.classList.remove('page__body-lock'); +}); + +const headers = document.querySelectorAll('.faq__item-title'); + +headers.forEach(header => { + header.addEventListener('click', () => { + const content = header.nextElementSibling; + const isOpen = content.classList.contains('open'); + + document.querySelectorAll('.faq__item-content.open').forEach(openItem => { + openItem.style.maxHeight = null; + openItem.classList.remove('open'); + }); + + headers.forEach(h => h.classList.remove('faq__item-title--active')); + + if (!isOpen) { + content.classList.add('open'); + content.style.maxHeight = content.scrollHeight + "px"; + header.classList.add('faq__item-title--active'); + } + }); +}); + +let mySwiper = null; + +function initHeaderSwiper() { + const screenWidth = window.innerWidth; + + if (screenWidth > 1024 && !mySwiper) { + mySwiper = new Swiper('.header-swiper', { + navigation: { + nextEl: ".header-swiper__next-btn", + prevEl: ".header-swiper__previous-btn", + }, + scrollbar: { + el: ".header-swiper__scrollbar", + draggable: true, + } + }); + } else if (screenWidth <= 1024 && mySwiper) { + mySwiper.destroy(true, true); + mySwiper = null; + } +}; + +window.addEventListener('load', initHeaderSwiper); +window.addEventListener('resize', initHeaderSwiper); + +let swiperInstance; + +function initSwiper() { + + if (swiperInstance) swiperInstance.destroy(true, true); + + const isMobile = window.innerWidth <= 768; + + swiperInstance = new Swiper(".swiper", { + spaceBetween: 10, + pagination: { + el: ".swiper-pagination", + clickable: true, + type: isMobile ? "bullets" : "fraction", + }, + navigation: !isMobile + ? { + nextEl: ".swiper__button-next", + prevEl: ".swiper__button-prev", + } + : false, + scrollbar: !isMobile + ? { + el: ".swiper-scrollbar", + draggable: true, + } + : false, + }); + document.querySelector(".swiper__button-prev").style.display = isMobile ? "none" : "block"; + document.querySelector(".swiper__button-next").style.display = isMobile ? "none" : "block"; + document.querySelector(".swiper-scrollbar").style.display = isMobile ? "none" : "block"; +} + +window.addEventListener("load", initSwiper); +window.addEventListener("resize", () => { + initSwiper(); +}); diff --git a/src/scripts/order.js b/src/scripts/order.js new file mode 100644 index 000000000..c45967636 --- /dev/null +++ b/src/scripts/order.js @@ -0,0 +1,61 @@ +'use strict'; + +document.querySelectorAll('.dropdown').forEach(function (dropDownWrapper) { + const dropDownBtn = dropDownWrapper.querySelector('.dropdown__button'); + const dropDownList = dropDownWrapper.querySelector('.dropdown__list'); + const dropDownListItems = dropDownList.querySelectorAll('.dropdown__item'); + const dropDownInput = dropDownWrapper.querySelector('.dropdown__input'); + + dropDownBtn.addEventListener('click', function () { + dropDownList.classList.toggle('dropdown__list--active'); + this.classList.add('dropdown__button--active'); + }); + dropDownListItems.forEach(function (listItem) { + listItem.addEventListener('click', function (e) { + e.stopPropagation(); + dropDownBtn.innerText = this.innerText; + dropDownBtn.focus(); + dropDownInput.value = this.dataset.value; + dropDownList.classList.remove('dropdown__list--active'); + }); + }); + + document.addEventListener('click', function (e) { + if (e.target !== dropDownBtn) { + dropDownBtn.classList.remove('dropdown__button--active'); + dropDownList.classList.remove('dropdown__list--active'); + } + }); + + document.addEventListener('keydown', function (e) { + if (e.key === 'Tab' || e.key == 'Escape') { + dropDownBtn.classList.remove('dropdown__button--active'); + dropDownList.classList.remove('dropdown__list--active'); + } + }); +}); + +document.querySelectorAll('.order-quantity__item').forEach((item) => { + item.addEventListener('click', () => { + document.querySelector('.order__price-item').textContent = +item.textContent * 1200 + '$'; + }); +}); + +function changeLink () { + if (window.innerWidth < 1280) { + document.querySelectorAll('.order__top-link').forEach((link) => { + if (link.innerText == 'Order complete') { + link.textContent = 'Complete'; + } + }); +} else { + document.querySelectorAll('.order__top-link').forEach((link) => { + if (link.innerText == 'Complete') { + link.textContent = 'Order complete'; + } + }); +}; +}; + +window.addEventListener('load', changeLink); +window.addEventListener('resize', changeLink); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 619b8c52b..a32ca91ca 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,14 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/FontFont_FF.Mark.Pro.otf') format('otf'); - font-weight: normal; - font-style: normal; +%inter-400 { + font-family: Inter, sans-serif; + font-weight: 400; +} + +%inter-500 { + font-family: Inter, sans-serif; + font-weight: 500; +} + +%inter-900 { + font-family: Inter, sans-serif; + font-weight: 900; } diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 000000000..da8078616 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,195 @@ +@use 'sass:list'; + +.about { + padding: 147px 0 156px; + background-image: linear-gradient($secondary-bg-color, #000); + + @include on-large-desktop { + padding: 100px 0; + } + + @include on-small-desktop { + padding: 70px 0 50px; + } + + @include on-phone { + padding: 100px 0 50px; + } +} + +.about-product { + @include grid; + + margin-bottom: 175px; + + @include on-large-desktop { + margin-bottom: 180px; + } + + @include on-small-desktop { + margin-bottom: 80px; + } + + @include on-phone { + position: relative; + } + + &__swiper-wrapper { + grid-column: 4 / 11; + position: relative; + + @include on-large-desktop { + grid-column: 3 / 8; + } + + @include on-small-desktop { + grid-column: 1 / 4; + } + } + + &__content { + grid-column: -6 / -1; + + @include on-large-desktop { + grid-column: 9 / -1; + } + + @include on-small-desktop { + grid-column: 4 / -1; + } + + @include on-phone { + grid-column: 1 / -1; + } + } + + &__title { + @extend%h2; + + margin-bottom: 30px; + + @include on-phone { + position: absolute; + top: -50px; + left: 0; + } + } + + &__span { + @extend%span; + } + + &__description { + @extend%main-text; + + margin-bottom: 30px; + } +} + +.about-us { + @include grid; + + &__content { + padding: 45px 0 70px; + grid-column: 2 / 7; + + @include on-large-desktop { + grid-column: 1 / 6; + padding: 40px 0; + } + + @include on-small-desktop { + grid-column: 1 / 5; + padding: 25px 0; + } + } + + &__subtitle { + @extend%inter-400; + + display: block; + font-size: 14px; + line-height: 1; + color: $accent-color; + margin-bottom: 15px; + text-transform: capitalize; + } + + &__title { + @extend%h2; + + margin-bottom: 30px; + } + + &__title-span { + @extend%span; + } + + &__description { + @extend%main-text; + } + + &__text { + grid-column: 9 / -1; + display: flex; + gap: 17px; + overflow: hidden; + + @include on-large-desktop { + grid-column: 7 / -1; + } + + @include on-small-desktop { + grid-column: 5 / -1; + } + + @include on-phone { + display: none; + } + } + + &__item { + @extend%inter-900; + + font-size: 64px; + color: $bg-color; + line-height: 1.3; + text-transform: uppercase; + height: fit-content; + text-shadow: + 1px 1px $accent-color, + -1px -1px $accent-color, + -1px 1px $accent-color, + 1px -1px $accent-color; + + @include on-large-desktop { + &:nth-child(n + 6) { + display: none; + } + } + + @include on-small-desktop { + font-size: 48px; + + &:nth-child(n + 4) { + display: none; + } + } + + &:nth-child(odd) { + writing-mode: sideways-rl; + } + + &:nth-child(even) { + writing-mode: sideways-lr; + } + } +} + +$opacities: 100%, 50%, 20%, 10%, 5%, 3%, 2%; + +@for $i from 1 through length($opacities) { + .about-us__item:nth-child(#{$i}) { + opacity: list.nth($opacities, $i); + } +} diff --git a/src/styles/blocks/actions.scss b/src/styles/blocks/actions.scss new file mode 100644 index 000000000..0946aa4bc --- /dev/null +++ b/src/styles/blocks/actions.scss @@ -0,0 +1,131 @@ +.actions { + padding: 160px 0; + + @include on-large-desktop { + padding: 100px 0; + } + + @include on-small-desktop { + padding: 70px 0; + } + + @include on-phone { + padding: 50px 0; + } + + &__title { + @extend%h2; + + margin-bottom: 16px; + text-align: center; + + @include on-phone { + text-align: left; + } + } + + &__span { + @extend%span; + } + + &__text { + @extend%inter-400; + + font-size: 14px; + color: $accent-color; + line-height: 1; + text-align: center; + + margin: 0 0 70px; + + @include on-large-desktop { + margin-bottom: 80px; + } + + @include on-small-desktop { + margin-bottom: 50px; + font-size: 12px; + } + + @include on-phone { + text-align: left; + } + } + + &__content { + @include grid; + + @include on-small-desktop { + row-gap: 40px; + } + + @include on-phone { + row-gap: 20px; + } + } + + &__item { + grid-column: span 4; + justify-items: center; + text-align: center; + + @include on-large-desktop { + grid-column: span 3; + } + + @include on-phone { + grid-column: 1 / -1; + justify-items: flex-start; + } + } + + &__item-img { + width: 100px; + height: 80px; + margin-bottom: 30px; + + cursor: pointer; + + stroke: $accent-color; + + @include on-phone { + display: none; + } + + @include hover(stroke, $white-color); + } + + &__item-title { + @extend%inter-900; + + font-size: 16px; + text-align: center; + line-height: 1; + + margin: 0 0 20px; + color: $white-color; + text-transform: uppercase; + + @include on-phone { + margin-bottom: 10px; + text-align: left; + } + } + + &__item-text { + @extend%main-text; + + text-align: center; + + @include on-phone { + overflow: hidden; + text-align: left; + + display: -webkit-box; + + text-overflow: ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + } +} diff --git a/src/styles/blocks/benefits.scss b/src/styles/blocks/benefits.scss new file mode 100644 index 000000000..7c3cb225e --- /dev/null +++ b/src/styles/blocks/benefits.scss @@ -0,0 +1,141 @@ +.benefits { + padding: 160px 0; + background-image: linear-gradient(90deg, $secondary-bg-color, #000); + + @include on-large-desktop { + padding: 100px 0; + } + + @include on-small-desktop { + padding: 70px 0; + } + + @include on-phone { + padding: 50px 0; + } + + &__title { + @extend%h2; + + margin-bottom: 80px; + text-align: center; + + @include on-small-desktop { + text-align: left; + margin-bottom: 30px; + } + } + + &__title-span { + @extend%span; + } + + &__content { + @include grid; + + justify-content: space-between; + margin-bottom: 90px; + + @include on-small-desktop { + margin-bottom: 0; + } + + @include on-phone { + row-gap: 20px; + } + } + + &__item { + text-align: center; + + &:nth-child(1) { + grid-column: 1 / 5; + } + + &:nth-child(2) { + grid-column: 7 / 11; + + @include on-large-desktop { + grid-column: 5 / 9; + } + } + + &:nth-child(3) { + grid-column: 13 / -1; + + @include on-large-desktop { + grid-column: 9 / -1; + } + } + + &:nth-child(n) { + @include on-small-desktop { + grid-column: span 2; + } + + @include on-phone { + grid-column: 1 / -1; + text-align: left; + } + } + } + + &__item-img { + width: 100px; + height: 80px; + margin-bottom: 30px; + stroke: $accent-color; + cursor: pointer; + + @include on-small-desktop { + margin-bottom: 25px; + } + + @include on-phone { + display: none; + } + + @include hover(stroke, $white-color); + } + + &__item-title { + @extend%inter-900; + + font-size: 18px; + line-height: 1; + color: $white-color; + text-transform: uppercase; + margin: 0 0 18px; + white-space: nowrap; + + @include on-small-desktop { + font-size: 16px; + } + + @include on-phone { + margin-bottom: 10px; + } + } + + &__item-text { + @extend%main-text; + + @include on-small-desktop { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + } + } + + &__btn { + display: block; + margin: 0 auto; + width: fit-content; + + @include on-small-desktop { + display: none; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..1b982e369 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,24 @@ +.button { + @extend%link; + + box-sizing: border-box; + padding: 13px 55px; + text-decoration-line: none; + background-color: $accent-color; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + transition: + background-color 0.3s, + color 0.3s; + + @include on-phone { + padding: 10px 55px; + } + + &:hover { + background-color: $white-color; + color: $accent-color; + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 000000000..b9fe4a777 --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,169 @@ +.contacts { + padding: 155px 0 205px; + + @include on-large-desktop { + padding: 100px 0; + } + + @include on-small-desktop { + padding: 70px 0 130px; + } + + @include on-phone { + padding: 50px 0; + } + + &__content { + @include grid; + + position: relative; + } + + &__wrapper { + grid-column: 1 / 5; + + @include on-small-desktop { + grid-column: 1 / 4; + } + + @include on-phone { + grid-column: 1 / -1; + } + } + + &__title { + @extend%h2; + + margin-bottom: 26px; + + @include on-large-desktop { + margin-bottom: 50px; + } + + @include on-phone { + margin-bottom: 30px; + } + } + + &__subtitle { + display: block; + font-weight: 400; + font-size: 14px; + line-height: 1; + color: #05c2df; + margin-bottom: 15px; + text-transform: none; + } + + &__title-span { + @extend%span; + } + + &__text { + @extend%main-text; + + margin-bottom: 75px; + + @include on-phone { + position: absolute; + left: 0; + bottom: 0; + font-size: 12px; + margin-bottom: 0; + } + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 10px; + } + + &__item { + width: fit-content; + } + + &__link { + @extend%main-text; + + display: block; + text-decoration-line: none; + position: relative; + + @include on-phone { + font-size: 13px; + } + + &::after { + position: absolute; + content: ''; + width: 100%; + height: 1px; + background-color: $text-color; + transform: scaleX(0); + transition: transform 0.3s; + left: 0; + bottom: 0; + } + + &:hover::after { + transform: scaleX(1); + } + } + + &__form { + grid-column: 9 / -1; + + @include on-large-desktop { + grid-column: 7 / -1; + } + + @include on-small-desktop { + grid-column: 4 / -1; + } + + @include on-phone { + grid-column: 1 / -1; + margin-bottom: 50px; + } + } + + &__up-btn { + position: absolute; + width: 48px; + height: 48px; + right: 0; + bottom: 0; + border: 1px solid $accent-color; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: background-color 0.3s; + + &::before { + position: absolute; + content: ''; + border: solid $accent-color; + border-width: 0 1px 1px 0; + padding: 4px; + transform: rotate(-135deg) translate(-2px, -2px); + transition: border 0.3s; + } + + @include on-phone { + display: none; + } + + &:hover { + background-color: $accent-color; + + &::before { + border-color: $white-color; + } + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..5f5d4bfcd --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,17 @@ +.container { + max-width: 1452px; + margin: 0 auto; + padding: 0 234px; + + @include on-large-desktop { + padding: 0 110px; + } + + @include on-tablet { + padding: 0 34px; + } + + @include on-phone { + padding: 0 20px; + } +} diff --git a/src/styles/blocks/faq.scss b/src/styles/blocks/faq.scss new file mode 100644 index 000000000..6a24a11cc --- /dev/null +++ b/src/styles/blocks/faq.scss @@ -0,0 +1,179 @@ +.faq { + padding: 70px 90px 50px; + background-color: $secondary-bg-color; + + @include on-small-desktop { + padding: 100px 34px; + } + + @include on-phone { + padding: 70px 20px 20px; + } + + &__close-btn { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + width: 17px; + height: 17px; + top: 28px; + right: 28px; + background-color: transparent; + border: none; + cursor: pointer; + + &::before, + &::after { + position: absolute; + content: ''; + width: 24px; + height: 1px; + background-color: $white-color; + transition: background-color 0.3s; + } + + &::before { + transform: rotateZ(45deg); + } + + &::after { + transform: rotateZ(-45deg); + } + + @include on-small-desktop { + top: 34px; + right: 34px; + } + + @include on-phone { + top: 20px; + right: 20px; + } + + &:hover { + &::before, + &::after { + background-color: $accent-color; + } + } + } + + &__title { + @extend%h2; + + margin-bottom: 35px; + } + + &__title-span { + @extend%span; + } + + &__item { + border: 1px solid $accent-color; + border-radius: 4px; + + &:last-of-type { + margin-bottom: 50px; + } + + &:not(:last-of-type) { + margin-bottom: 13px; + } + } + + &__item-title { + @extend%main-text; + + padding: 20px 30px; + position: relative; + color: $accent-color; + display: flex; + align-items: center; + cursor: pointer; + user-select: none; + + &::after { + position: absolute; + content: ''; + width: 0; + height: 0; + border-style: solid; + border-width: 6px 5px 0; + border-color: #05c2df transparent transparent; + transform: rotateZ(-90deg); + right: 30px; + transition: transform 0.3s; + } + + &.faq__item-title--active::after { + transform: rotateZ(0); + } + + @include on-phone { + padding: 20px 10px; + + &::after { + display: none; + } + } + } + + &__item-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.4s ease; + } + + &__item-description { + @extend%main-text; + + padding: 0 30px; + margin-bottom: 20px; + + @include on-phone { + padding: 0 10px; + } + } + + &__item-time { + @extend%main-text; + + font-size: 14px; + color: #545454; + margin: 0 0 20px; + padding: 0 30px; + } + + &__more-btn { + @extend%link; + + position: relative; + margin: 0 auto; + height: 37px; + display: flex; + justify-content: center; + color: $accent-color; + width: fit-content; + transition: color 0.3s; + + &::before { + position: absolute; + content: ''; + width: 0; + height: 0; + border-style: solid; + border-width: 6px 5px 0; + border-color: $accent-color transparent transparent; + bottom: 0; + transition: border 0.3s; + } + + &:hover { + color: $white-color; + &::before { + border-color: $white-color transparent transparent; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..bf583b75c --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,91 @@ +.footer { + padding: 40px 0; + + &__content { + display: flex; + align-items: center; + justify-content: space-between; + + @include on-phone { + @include grid; + } + } + + &__logo { + @include on-phone { + grid-column: 1 / 2; + margin-bottom: 15px; + } + } + + &__contacts { + grid-column: 2 / -1; + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 12px; + justify-self: flex-end; + position: absolute; + + @include on-phone { + position: static; + } + } + + &__social-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + gap: 15px; + + @include on-phone { + grid-column: 2 / -1; + place-self: end; + } + } + + &__social-img { + display: block; + width: 17px; + height: 17px; + fill: $white-color; + transition: fill 0.3s; + } + + &__social-link { + display: flex; + align-items: center; + justify-content: center; + height: 24px; + width: 24px; + + &:hover { + .footer__social-img { + fill: $accent-color; + } + } + } +} + +.footer-nav { + @include on-phone { + grid-column: 1 / 2; + } + + &__list { + display: flex; + gap: 35px; + + @include on-phone { + flex-direction: column; + gap: 12px; + } + } + + &__link { + font-size: 13px; + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 000000000..ac3c88399 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,70 @@ +.form { + &__label { + @extend%main-text; + + display: block; + margin-bottom: 24px; + transition: color 0.3s; + + &:focus-within { + color: $accent-color; + } + } + + &__input { + @extend%main-text; + + color: $white-color; + box-sizing: border-box; + background-color: transparent; + width: 100%; + border: none; + outline: none; + border-bottom: 1px solid $dark-color; + transition: border 0.3s; + + &::placeholder { + @extend%main-text; + + font-size: 14px; + } + + &:focus, + &:hover { + border-bottom: 1px solid $accent-color; + } + + &:invalid { + color: #860404; + } + + &:-webkit-autofill { + -webkit-text-fill-color: $text-color; + transition: background-color 5000s ease-in-out 0s; + } + } + + &__textarea { + margin-bottom: 50px; + resize: none; + height: 75px; + + @include on-large-desktop { + margin-bottom: 90px; + } + + @include on-phone { + margin-bottom: 30px; + } + } + + &__btn { + display: block; + border: none; + max-width: 280px; + + @include on-phone { + margin: 0 auto; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..5095238c0 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,300 @@ +.header { + padding-bottom: 107px; + background-image: linear-gradient(90deg, $secondary-bg-color, #000); + + @include on-large-desktop { + padding-bottom: 85px; + } + + @include on-small-desktop { + padding-bottom: 0; + } + + &__top { + @include grid; + + padding: 200px 0; + + @include on-large-desktop { + padding: 45px 0 85px; + } + + @include on-small-desktop { + padding: 20px 0 70px; + } + + @include on-phone { + padding: 0 0 50px; + } + } + + &__content { + display: grid; + column-gap: 20px; + grid-template-columns: repeat(7, 1fr); + grid-column: 1 / 7; + + @include on-small-desktop { + grid-template-columns: repeat(3, 1fr); + grid-column: 1 / 4; + } + + @include on-phone { + grid-column: 1 / -1; + } + } + + &__title { + @extend%h1; + + grid-column: 1 / -1; + } + + &__title-span { + @extend%h1; + @extend%span; + + font-weight: 400; + grid-column: 1 / -1; + margin-bottom: 35px; + + @include on-large-desktop { + margin-bottom: 20px; + } + } + + &__description { + @extend%secondary-text; + + grid-column: 2 / -2; + margin-bottom: 30px; + + @include on-large-desktop { + grid-column: 2 / -3; + margin-bottom: 20px; + } + + @include on-small-desktop { + grid-column: 1 / -1; + } + } + + &__price { + @extend%link; + + font-size: 20px; + line-height: 1; + grid-column: 2 / 3; + margin-bottom: 45px; + + @include on-large-desktop { + margin-bottom: 30px; + } + + @include on-small-desktop { + grid-column: 1 / -1; + } + + @include on-phone { + justify-self: center; + } + } + + &__video-btn { + grid-column: 2 / 5; + + @include on-small-desktop { + grid-column: 1 / -1; + } + } + + &__bottom { + display: flex; + justify-content: space-between; + position: relative; + } + + &__faq-btn { + @extend%link; + + margin-right: 40px; + text-transform: uppercase; + border: none; + background-color: transparent; + cursor: pointer; + transition: background-color, 0.3s; + + @include on-tablet { + margin-right: 0; + display: block; + padding: 10px 0 10px 150px; + width: 100%; + text-align: left; + + &:hover { + background-color: #110e25; + } + } + + @include on-phone { + padding: 10px 0 10px 20px; + } + + @include hover(color, $accent-color); + } + + &__help-btn { + @extend%link; + + margin-right: auto; + border: none; + background-color: transparent; + cursor: pointer; + transition: background-color, 0.3s; + + @include on-tablet { + padding: 10px 0 10px 150px; + width: 100%; + text-align: left; + + &:hover { + background-color: #110e25; + } + } + + @include on-phone { + padding: 10px 0 10px 20px; + } + + @include hover(color, $accent-color); + } + + &__more-btn { + @extend%link; + + position: absolute; + margin: 0 auto; + height: 37px; + display: flex; + justify-content: center; + color: $accent-color; + left: 50%; + transition: color 0.3s; + + &::before { + position: absolute; + content: ''; + width: 0; + height: 0; + border-style: solid; + border-width: 6px 5px 0; + border-color: $accent-color transparent transparent; + bottom: 0; + transition: border 0.3s; + } + + @include on-tablet { + display: none; + } + + &:hover { + color: $white-color; + &::before { + border-color: $white-color transparent transparent transparent; + } + } + } + + &__previous-btn { + @extend%link; + + margin-right: 100px; + + @include on-tablet { + display: none; + } + } + + &__next-btn { + @extend%link; + + @include on-tablet { + display: none; + } + } +} + +.header-swiper { + grid-column: 8 / -1; + width: 100%; + overflow: hidden; + + @include on-large-desktop { + grid-column: 7 / -1; + align-self: center; + } + + @include on-small-desktop { + grid-column: 4 / -1; + } + + @include on-phone { + grid-column: 1 / -1; + order: -1; + } + + &__wrapper { + width: 100%; + } + + &__slide { + width: 100%; + } + + &__img { + display: block; + width: 100%; + object-fit: cover; + } + + &__control { + position: relative; + width: 200px; + } + + &__previous-btn { + @extend%link; + + color: $white-color; + width: fit-content; + height: 20px; + position: absolute; + cursor: pointer; + + &::after { + content: 'Previous'; + } + } + + &__next-btn { + @extend%link; + + color: $white-color; + width: fit-content; + height: 20px; + left: 160px; + position: absolute; + cursor: pointer; + + &::after { + content: 'Next'; + } + } + + &__scrollbar.swiper-scrollbar-horizontal { + bottom: -10px; + position: absolute; + width: 100%; + background-color: #212121; + } +} diff --git a/src/styles/blocks/help.scss b/src/styles/blocks/help.scss new file mode 100644 index 000000000..6ad5e8b3e --- /dev/null +++ b/src/styles/blocks/help.scss @@ -0,0 +1,220 @@ +.help { + @include grid; + + --columns: 12; + + padding: 60px 0 90px; + background-color: $secondary-bg-color; + + @include on-large-desktop { + --columns: 10; + } + + @include on-small-desktop { + --columns: 6; + + padding: 100px 34px; + } + + @include on-phone { + --columns: 2; + + padding: 70px 20px; + } + + &__close-btn { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + width: 17px; + height: 17px; + top: 28px; + right: 28px; + background-color: transparent; + border: none; + cursor: pointer; + + &::before, + &::after { + position: absolute; + content: ''; + width: 24px; + height: 1px; + background-color: $white-color; + transition: background-color 0.3s; + } + + &::before { + transform: rotateZ(45deg); + } + + &::after { + transform: rotateZ(-45deg); + } + + @include on-small-desktop { + top: 34px; + right: 34px; + } + + @include on-phone { + top: 20px; + right: 20px; + } + + &:hover { + &::before, + &::after { + background-color: $accent-color; + } + } + } + + &__title { + @extend%h2; + + margin-bottom: 50px; + grid-column: 2 / -2; + + @include on-small-desktop { + grid-column: 1 / -1; + margin-bottom: 30px; + } + } + + &__title-span { + @extend%span; + } + + &__description { + margin-bottom: 30px; + grid-column: 2 / -2; + + @include on-small-desktop { + grid-column: 1 / -1; + } + } + + &__text { + @extend%main-text; + + margin: 0; + + &:not(:last-of-type) { + margin-bottom: 20px; + } + } + + &__description-link { + color: $accent-color; + text-decoration-line: none; + position: relative; + + &::after { + position: absolute; + content: ''; + width: 100%; + height: 1px; + background-color: $accent-color; + transform: scaleX(0); + transition: transform 0.3s; + left: 0; + bottom: 0; + } + + &:hover::after { + transform: scaleX(1); + } + } + + &__list { + padding: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 20px; + grid-column: 2 / 5; + + @include on-small-desktop { + grid-column: 1 / 4; + } + + @include on-phone { + grid-column: 1 / -1; + margin-bottom: 30px; + } + } + + &__link { + @extend%main-text; + + color: $accent-color; + text-decoration-line: none; + position: relative; + padding-bottom: 5px; + + &::after { + position: absolute; + content: ''; + width: 100%; + height: 1px; + background-color: $accent-color; + transform: scaleX(0); + transition: transform 0.3s; + left: 0; + bottom: 0; + } + + &:hover::after { + transform: scaleX(1); + } + } + + &__contacts-list { + padding: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 20px; + grid-column: 5 / 8; + + @include on-small-desktop { + grid-column: 4 / -1; + } + + @include on-phone { + grid-column: 1 / -1; + } + } + + &__contacts-item { + width: fit-content; + } + + &__contacts-link { + @extend%main-text; + + display: block; + text-decoration-line: none; + position: relative; + + &::after { + position: absolute; + content: ''; + width: 100%; + height: 1px; + background-color: $text-color; + transform: scaleX(0); + transition: transform 0.3s; + left: 0; + bottom: 0; + } + + &:hover::after { + transform: scaleX(1); + } + } +} diff --git a/src/styles/blocks/lang.scss b/src/styles/blocks/lang.scss new file mode 100644 index 000000000..2e9db4a0a --- /dev/null +++ b/src/styles/blocks/lang.scss @@ -0,0 +1,60 @@ +.lang { + padding: 100px 0 25px; + background-color: $secondary-bg-color; + + @include on-phone { + padding: 50px 0 25px; + } + + &__close-btn { + position: absolute; + background-color: transparent; + border: none; + width: 9px; + height: 17px; + top: 34px; + left: 34px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + + &::before { + position: absolute; + content: ''; + padding: 5px; + border: solid $white-color; + border-width: 0 0 1px 1px; + transform: rotateZ(45deg); + } + + @include on-phone { + top: 20px; + left: 20px; + } + + @include hover(transform, translateX(-5px)); + } + + &__list { + list-style: none; + padding: 0; + margin: 0; + } + + &__link { + @extend%link; + + display: block; + padding: 10px 0 10px 150px; + + @include on-phone { + padding: 10px 20px; + } + + &:hover { + color: $accent-color; + background-color: #110e25; + } + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 000000000..74faf35a0 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,7 @@ +.logo { + &__img { + display: block; + } + + @include hover(opacity, 0.6); +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..718167f5e --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,76 @@ +.menu { + background-color: $secondary-bg-color; + + &__content { + padding: 100px 0; + position: relative; + } + + &__close-btn { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + width: 24px; + height: 24px; + top: 30px; + right: 34px; + + &::before, + &::after { + position: absolute; + content: ''; + height: 1px; + width: 24px; + background-color: $white-color; + transition: background-color 0.3s; + } + + &::before { + transform: rotateZ(45deg); + } + + &::after { + transform: rotateZ(-45deg); + } + + &:hover { + &::before, + &::after { + background-color: $accent-color; + } + } + + @include on-phone { + top: 20px; + right: 20px; + } + } + + &__lang-btn { + @extend%link; + + border: none; + background-color: transparent; + width: fit-content; + padding: 0; + cursor: pointer; + transition: background-color, 0.3s; + + @include on-small-desktop { + padding: 10px 0 10px 150px; + width: 100%; + text-align: left; + + &:hover { + background-color: #110e25; + } + } + + @include on-phone { + padding: 10px 0 10px 20px; + } + + @include hover(color, $accent-color); + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..c0d349a64 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,22 @@ +.nav { + &__list { + display: flex; + margin: 0; + padding: 0; + list-style: none; + } + + &__link { + @extend%link; + + transition: background-color, 0.3s; + + @include on-tablet { + &:hover { + background-color: #110e25; + } + } + + @include hover(color, $accent-color); + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..ccef6c8e7 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,124 @@ +.page { + scroll-behavior: smooth; + + &__body { + position: relative; + margin: 0; + background-color: $bg-color; + + &::before { + position: absolute; + content: ''; + inset: 0; + background-color: #000000b2; + opacity: 0; + pointer-events: none; + z-index: 4; + transition: opacity 0.3s; + } + + &.page__body-lock { + overflow: hidden; + } + + &.page__body-lock::before { + opacity: 1; + } + } + + &__menu { + position: fixed; + height: 100vh; + top: 0; + left: 0; + right: 0; + opacity: 0; + transform: translateX(110%); + transition: all 0.3s; + z-index: 3; + + &:target { + opacity: 1; + transform: translateX(0); + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__faq { + position: fixed; + inset: 140px 420px; + overflow-y: auto; + opacity: 0; + transform: translateX(150%); + transition: all 0.3s; + z-index: 4; + + @include on-large-desktop { + inset: 100px 200px; + } + + @include on-small-desktop { + inset: 0; + } + + &.page__faq-open { + opacity: 1; + transform: translateX(0); + } + } + + &__help { + position: fixed; + inset: 280px 420px; + overflow-y: auto; + opacity: 0; + transform: translateX(150%); + transition: all 0.3s; + z-index: 4; + + @include on-large-desktop { + inset: 100px 200px; + } + + @include on-small-desktop { + inset: 0 0 400px; + } + + @include on-phone { + inset: 0; + } + + &.page__help-open { + opacity: 1; + transform: translateX(0); + } + } + + &__lang { + position: fixed; + top: 0; + left: 0; + right: 0; + height: fit-content; + opacity: 0; + transform: translateX(150%); + transition: all 0.3s; + z-index: 4; + + @include on-phone { + height: 100vh; + } + + &.page__lang-open { + opacity: 1; + transform: translateX(0); + } + } + + &__svg { + display: none; + } +} diff --git a/src/styles/blocks/swiper.scss b/src/styles/blocks/swiper.scss new file mode 100644 index 000000000..3d2115fde --- /dev/null +++ b/src/styles/blocks/swiper.scss @@ -0,0 +1,89 @@ +.swiper { + height: 340px; + width: 100%; + + &__wrapper { + height: auto; + } + + &__slide { + height: 290px; + } + + &__img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + cursor: pointer; + } + + &-pagination-fraction { + position: absolute; + top: 0; + color: $accent-color; + height: 15px; + left: -8%; + width: fit-content; + } + + &__button-prev { + @extend%link; + + color: $white-color; + width: fit-content; + height: 20px; + bottom: 20px; + position: absolute; + cursor: pointer; + + &::after { + content: 'Previous'; + } + } + + &__button-next { + @extend%link; + + color: $white-color; + width: fit-content; + height: 20px; + bottom: 20px; + left: 175px; + position: absolute; + cursor: pointer; + + &::after { + content: 'Next'; + } + } + + &-button { + background-color: $white-color; + } + + &-button-disabled { + color: $text-color; + pointer-events: none; + } + + &__scrollbar.swiper-scrollbar { + background-color: #212121; + width: 200px; + height: 1px; + } + + &-scrollbar-drag { + background-color: $accent-color; + width: 70px; + height: 1px; + } + + &-pagination-bullet { + background-color: #484848; + } + + &-pagination-bullet-active { + background-color: #ababab; + } +} diff --git a/src/styles/blocks/tech.scss b/src/styles/blocks/tech.scss new file mode 100644 index 000000000..1e294e9b6 --- /dev/null +++ b/src/styles/blocks/tech.scss @@ -0,0 +1,279 @@ +.tech { + padding: 160px 0; + + @include on-large-desktop { + padding: 100px 0; + } + + @include on-small-desktop { + padding: 80px 0; + } + + @include on-phone { + padding: 50px 0; + } + + &__title { + @extend%h2; + + margin-bottom: 80px; + text-align: right; + + @include on-small-desktop { + margin-bottom: 60px; + text-align: left; + } + + @include on-phone { + margin-bottom: 40px; + } + } + + &__title-span { + @extend%span; + } + + &__wrapper { + box-sizing: border-box; + padding-top: 60px; + width: 1175px; + height: 354px; + margin: 0 auto; + + @include on-small-desktop { + width: auto; + height: auto; + padding-top: 0; + } + } + + &__content { + position: relative; + margin: 0 auto; + background-image: url(../images/tech/tech-bg.png); + background-repeat: no-repeat; + background-position: center; + background-size: 298px 294px; + width: 298px; + height: 294px; + + @include on-small-desktop { + width: 358px; + height: 354px; + background-size: 358px 354px; + } + + @include on-phone { + background-size: 197px 195px; + width: 197px; + height: 195px; + } + } + + &__item { + position: absolute; + + &--sensor { + left: -375px; + top: -57px; + + @include on-large-desktop { + left: -350px; + } + + @include on-small-desktop { + left: 60px; + top: -25px; + } + + @include on-phone { + top: -11px; + } + } + + &--connection { + left: -375px; + bottom: 20px; + + @include on-large-desktop { + left: -275px; + } + + @include on-small-desktop { + left: -60px; + bottom: 25px; + } + + @include on-phone { + left: -20px; + bottom: 5px; + } + } + + &--batteries { + right: -480px; + top: -58px; + + @include on-large-desktop { + right: -390px; + } + + @include on-small-desktop { + right: 50px; + top: 145px; + } + + @include on-phone { + right: 30px; + top: 80px; + } + } + } + + &__item-content { + @include on-small-desktop { + position: absolute; + width: max-content; + left: -70px; + bottom: 70px; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s; + + &.tech__item-content--active { + opacity: 1; + } + + &--sensor { + @include on-phone { + left: 36px; + bottom: -35px; + } + } + + &--connection { + @include on-phone { + left: -35px; + bottom: 45px; + } + } + + &--batteries { + @include on-phone { + left: -170px; + bottom: -144px; + } + } + } + } + + &__item-title { + @extend%inter-900; + + margin: 0 0 20px; + font-size: 18px; + line-height: 1; + color: $white-color; + text-transform: uppercase; + + @include on-small-desktop { + display: none; + } + } + + &__item-description { + @extend%main-text; + + @include on-small-desktop { + font-size: 12px; + background-color: $secondary-bg-color; + padding: 15px 10px; + border-radius: 4px; + } + } + + &__item-btn { + display: none; + padding: 0; + border: 2px solid #ffffff24; + background-color: $accent-color; + border-radius: 50%; + width: 62px; + height: 62px; + cursor: pointer; + justify-content: center; + align-items: center; + transition: background-color 0.3s; + + &::before, + &::after { + position: absolute; + content: ''; + width: 22px; + height: 1px; + background-color: $white-color; + } + + &::after { + transform: rotateZ(90deg); + transition: opacity 0.3s; + } + + @include on-small-desktop { + display: flex; + } + + @include on-phone { + width: 34px; + height: 34px; + + &::before, + &::after { + width: 12px; + } + } + + &.tech__item-btn--active { + background-color: #07798b; + + &::after { + opacity: 0; + } + } + } + + &__lines { + position: absolute; + margin: 0; + + @include on-small-desktop { + display: none; + } + + &--sensor { + right: 150px; + top: -50px; + } + + &--connection { + right: 295px; + top: 65px; + } + + &--batteries { + left: 150px; + bottom: 95px; + } + } + + &__ellipse-img { + position: absolute; + display: block; + left: -10px; + top: 40px; + + @include on-small-desktop { + display: none; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..7e22f626c --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,204 @@ +.top-bar { + display: flex; + padding: 47px 0; + align-items: center; + justify-content: space-between; + + @include on-small-desktop { + padding: 30px 0; + } + + @include on-phone { + padding: 20px 0; + } + + &__logo { + margin-right: 35px; + } + + &__menu { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + margin-right: 35px; + + @include on-tablet { + display: none; + } + } + + &__nav-list { + gap: 35px; + + @include on-tablet { + flex-direction: column; + gap: 0; + } + } + + &__nav-link { + @include on-tablet { + display: block; + padding: 10px 0 10px 150px; + } + + @include on-phone { + padding: 10px 0 10px 20px; + } + } + + &__btn { + white-space: nowrap; + box-sizing: border-box; + + @include on-tablet { + position: fixed; + bottom: 30px; + width: 87%; + max-width: 460px; + margin: 0 auto; + left: 0; + right: 0; + z-index: 2; + } + + &.top-bar__btn--hidden { + opacity: 0; + pointer-events: none; + } + } + + &__menu-btn-line { + position: absolute; + left: 0; + width: 18px; + height: 1px; + background-color: $white-color; + transition: background-color 0.3s; + } + + &__menu-btn { + position: relative; + display: none; + align-items: center; + justify-content: center; + width: 29px; + height: 13px; + background-color: transparent; + + &::before, + &::after { + position: absolute; + content: ''; + width: 24px; + height: 1px; + background-color: $white-color; + right: 0; + transition: background-color 0.3s; + } + + &::before { + top: 0; + } + + &::after { + bottom: 0; + } + + @include on-tablet { + display: flex; + } + + &:hover { + &::before, + &::after, + .top-bar__menu-btn-line { + background-color: $accent-color; + } + } + } +} + +.top-bar-lang { + &__dropdown { + display: inline-block; + width: 75px; + } + + &__wrapper { + width: 100%; + } + + &__button { + @extend%inter-400; + + font-size: 20px; + line-height: 1.3; + position: relative; + width: 100%; + background-color: transparent; + border: none; + color: $accent-color; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + cursor: pointer; + + &::after { + position: absolute; + content: ''; + width: 0; + height: 0; + border-style: solid; + border-width: 6px 5px 0; + border-color: $accent-color transparent transparent; + right: 10px; + } + + @include hover(color, $white-color); + } + + &__list { + margin: 0; + padding: 10px 0; + list-style: none; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + position: absolute; + transform: translateY(-20px); + opacity: 0; + background-color: $secondary-bg-color; + width: 75px; + transition: + transform 0.3s, + opacity 0.3s; + pointer-events: none; + z-index: 1; + + &.dropdown__list--active { + transform: translateY(0); + opacity: 1; + pointer-events: all; + } + } + + &__item { + @extend%inter-400; + + font-size: 16px; + line-height: 1.3; + color: $white-color; + cursor: pointer; + width: 100%; + display: flex; + justify-content: center; + } + + &__input { + display: none; + } +} diff --git a/src/styles/blocks/video-btn.scss b/src/styles/blocks/video-btn.scss new file mode 100644 index 000000000..5f38408f1 --- /dev/null +++ b/src/styles/blocks/video-btn.scss @@ -0,0 +1,34 @@ +.video-btn { + @extend%link; + + position: relative; + display: flex; + justify-content: center; + align-items: center; + height: 70px; + width: 180px; + border: none; + background-color: transparent; + background-image: url(../images/play-button-bg.png); + background-repeat: no-repeat; + padding-left: 60px; + cursor: pointer; + + &::before { + position: absolute; + content: ''; + width: 0; + height: 0; + border-style: solid; + border-width: 10px 0 10px 16px; + border-color: transparent transparent transparent $accent-color; + left: 28px; + transition: border-color 0.3s; + } + + &:hover { + &::before { + border-color: transparent transparent transparent $white-color; + } + } +} diff --git a/src/styles/blocks/video.scss b/src/styles/blocks/video.scss new file mode 100644 index 000000000..7b87c5952 --- /dev/null +++ b/src/styles/blocks/video.scss @@ -0,0 +1,33 @@ +.video { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100vh; + overflow: hidden; + background-color: rgba(0, 0, 0, 0.8); + + &__content { + position: relative; + margin: 10% auto; + width: 80%; + max-width: 800px; + } + + &__content iframe { + width: 100%; + height: 450px; + } + + &__close-btn { + position: absolute; + top: -30px; + right: 0; + color: white; + font-size: 30px; + font-weight: bold; + cursor: pointer; + } +} diff --git a/src/styles/components/card.scss b/src/styles/components/card.scss new file mode 100644 index 000000000..497fc2125 --- /dev/null +++ b/src/styles/components/card.scss @@ -0,0 +1,148 @@ +.card-form { + @include grid; + + --columns: 6; + + @include on-small-desktop { + --columns: 4; + } + + @include on-phone { + --columns: 2; + } + + &__label { + @extend%inter-400; + + font-size: 14px; + line-height: 1.3; + color: $text-color; + display: block; + transition: color 0.3s; + + &--number { + grid-column: 1 / -1; + margin-bottom: 70px; + + @include on-large-desktop { + margin-bottom: 40px; + } + } + + &--name { + grid-column: 1 / -1; + margin-bottom: 50px; + + @include on-large-desktop { + margin-bottom: 40px; + } + } + + &--date { + grid-column: 1 / 3; + + @include on-phone { + grid-column: 1 / 2; + } + } + + &--cvv { + grid-column: 3 / 5; + margin-bottom: 125px; + + @include on-large-desktop { + margin-bottom: 90px; + } + + @include on-phone { + grid-column: 2 / -1; + margin-bottom: 40px; + } + } + + &:focus-within { + color: $accent-color; + } + } + + &__number { + display: flex; + justify-content: space-between; + align-items: flex-end; + } + + &__input { + @extend%inter-400; + + box-sizing: border-box; + display: block; + font-size: 20px; + line-height: 1.3; + color: $white-color; + border: none; + outline: none; + width: 100%; + border-bottom: 1px solid $dark-color; + background-color: transparent; + transition: border 0.3s; + margin-top: 15px; + + &--date { + width: 95px; + } + + &--cvv { + width: 50px; + } + + &::placeholder { + color: $dark-color; + } + + &:focus, + &:hover { + border-bottom: 1px solid $accent-color; + } + + &:invalid { + color: #860404; + } + + @include on-phone { + font-size: 18px; + } + } + + &__input--num { + width: 70px; + letter-spacing: 0.2em; + padding: 0 3px; + + @include on-phone { + width: 63px; + } + } + + &__visa { + display: block; + background-image: url(../images/pay/visa.svg); + width: 54px; + height: 34px; + + @include on-phone { + display: none; + } + } + + &__btn { + grid-column: 1 / 4; + border: none; + width: 200px; + height: 48px; + + @include on-small-desktop { + grid-column: 1 / -1; + width: 100%; + } + } +} diff --git a/src/styles/components/order.scss b/src/styles/components/order.scss new file mode 100644 index 000000000..f4a18bad0 --- /dev/null +++ b/src/styles/components/order.scss @@ -0,0 +1,670 @@ +.order { + background-image: linear-gradient(135deg, $secondary-bg-color, #000); + height: 100vh; + + &__top { + @include grid; + + position: relative; + justify-items: flex-start; + padding: 60px 0; + + @include on-small-desktop { + padding: 30px 0; + row-gap: 30px; + justify-items: center; + } + + @include on-phone { + --columns: 3; + + padding: 20px 0; + } + } + + &__logo { + display: block; + grid-column: span 4; + + @include on-large-desktop { + grid-column: span 3; + } + + @include on-small-desktop { + justify-self: flex-start; + } + } + + &__top-link { + @extend%link; + + position: relative; + font-size: 14px; + color: #545454; + grid-column: span 4; + display: flex; + justify-content: center; + padding-bottom: 10px; + + &::after { + position: absolute; + content: ''; + width: 0; + height: 1px; + background-color: $dark-color; + bottom: 0; + } + + @include on-large-desktop { + grid-column: span 3; + } + + @include on-small-desktop { + width: -webkit-fill-available; + margin: 0 -20px; + + &::after { + width: 100%; + } + + &:nth-child(2) { + grid-column: 1 / 3; + margin-left: -34px; + + @include on-phone { + margin-right: -20px; + } + } + + &:nth-child(3) { + grid-column: 3 / 5; + } + + &:nth-child(4) { + grid-column: 5 / -1; + margin-right: -34px; + + @include on-phone { + margin-right: -20px; + } + } + } + + @include on-phone { + font-size: 12px; + margin: 0 -10px; + + &:nth-child(n) { + grid-column: span 1; + } + } + + &.order__top-link--active { + color: $accent-color; + pointer-events: none; + + &::after { + position: absolute; + content: ''; + width: 4px; + height: 4px; + background-color: $accent-color; + bottom: 0; + border-radius: 50%; + } + + @include on-small-desktop { + margin-left: -34px; + + &::after { + width: 100%; + height: 1px; + border-radius: 0; + } + } + + @include on-phone { + margin-left: -20px; + } + } + } + + &__close-btn { + display: none; + align-items: center; + justify-content: center; + position: absolute; + width: 24px; + height: 24px; + top: 30px; + right: 0; + + &::before, + &::after { + position: absolute; + content: ''; + height: 1px; + width: 24px; + background-color: $white-color; + transition: background-color 0.3s; + } + + &::before { + transform: rotateZ(45deg); + } + + &::after { + transform: rotateZ(-45deg); + } + + @include on-small-desktop { + display: flex; + } + + @include on-phone { + top: 20px; + } + + &:hover { + &::before, + &::after { + background-color: $accent-color; + } + } + } + + &__bottom { + @include grid; + + padding: 150px 0; + + @include on-large-desktop { + padding: 50px 0 90px; + } + + @include on-small-desktop { + padding: 40px 0; + } + + @include on-phone { + padding-top: 10px; + } + } + + &__wpapper { + @include grid; + + --columns: 7; + + grid-column: 1 / 9; + align-self: flex-end; + + @include on-large-desktop { + --columns: 5; + + grid-column: 1 / 6; + } + + @include on-small-desktop { + --columns: 6; + + grid-column: 1 / -1; + margin-bottom: 50px; + } + + @include on-phone { + --columns: 2; + + margin-bottom: 30px; + } + } + + &__bottom-img { + display: block; + width: 100%; + margin-left: -95px; + grid-column: 1 / -1; + + @include on-large-desktop { + margin: 0 0 40px -15px; + } + + @include on-small-desktop { + margin: 0 auto; + grid-column: 2 / -2; + } + + @include on-phone { + display: none; + } + + &--pay { + @include on-small-desktop { + grid-column: 1 / -1; + } + } + } + + &__price { + grid-column: 3 / 5; + + @include on-phone { + grid-column: 2 / -1; + text-align: center; + } + } + + &__price-item { + @extend%inter-500; + + display: inline-block; + font-size: 36px; + line-height: 1; + color: $accent-color; + } + + &__price-title { + @extend%main-text; + + line-height: 1.3; + margin: 0 0 20px; + } + + &__form { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 40px 20px; + grid-column: 9 / -1; + width: 100%; + + @include on-large-desktop { + grid-column: 7 / -1; + row-gap: 30px; + } + + @include on-small-desktop { + grid-column: 1 / -1; + } + } + + &__card-form { + grid-column: 9 / -3; + width: 100%; + + @include on-large-desktop { + grid-column: 7 / -2; + } + + @include on-small-desktop { + grid-column: 2 / -2; + } + + @include on-phone { + grid-column: 1 / -1; + } + } + + &__card-wrapper { + @include on-small-desktop { + --columns: 4; + + grid-column: 2 / -2; + } + + @include on-phone { + grid-column: 1 / -1; + } + } +} + +.order-quantity { + width: 90px; + grid-column: 1 / 3; + justify-self: center; + text-align: center; + + @include on-small-desktop { + grid-column: 1 / 2; + margin-right: 0; + } + + &__title { + @extend%main-text; + + line-height: 1.3; + margin: 0 0 20px; + } + + &__wrapper { + width: 100%; + } + + &__button { + @extend%inter-400; + + font-size: 20px; + line-height: 1.3; + position: relative; + width: 100%; + height: 47px; + background-color: $secondary-bg-color; + border: none; + color: $white-color; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin-bottom: 3px; + cursor: pointer; + + &::after { + position: absolute; + content: ''; + width: 0; + height: 0; + border-style: solid; + border-width: 6px 5px 0; + border-color: $accent-color transparent transparent; + right: 10px; + transition: transform 0.3s; + } + + &:hover::after { + transform: translateY(5px); + } + } + + &__list { + margin: 0; + padding: 10px 0; + list-style: none; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + position: absolute; + transform: translateY(-20px); + opacity: 0; + background-color: $secondary-bg-color; + width: 90px; + transition: + transform 0.3s, + opacity 0.3s; + pointer-events: none; + z-index: 1; + + &.dropdown__list--active { + transform: translateY(0); + opacity: 1; + pointer-events: all; + } + } + + &__item { + @extend%inter-400; + + font-size: 16px; + line-height: 1.3; + color: $white-color; + cursor: pointer; + width: 100%; + display: flex; + justify-content: center; + } + + &__input { + display: none; + } +} + +.order-form { + @include on-small-desktop { + @include grid; + } + + &__label { + @extend%inter-400; + + font-size: 14px; + line-height: 1.3; + color: $text-color; + display: block; + transition: color 0.3s; + + &:focus-within { + color: $accent-color; + } + + @include on-small-desktop { + grid-column: span 3; + } + + @include on-phone { + grid-column: 1 / -1; + } + + &--address { + margin-bottom: 90px; + + @include on-large-desktop { + margin-bottom: 50px; + } + + @include on-small-desktop { + margin-bottom: 20px; + } + } + } + + &__input { + @extend%main-text; + + display: block; + color: $white-color; + border: none; + outline: none; + width: 100%; + border-bottom: 1px solid $dark-color; + background-color: transparent; + transition: border 0.3s; + + &:focus, + &:hover { + border-bottom: 1px solid $accent-color; + } + + &:invalid { + color: #860404; + } + } + + &__btn { + width: 200px; + height: 48px; + border: none; + + @include on-small-desktop { + grid-column: 2 / -2; + width: auto; + } + + @include on-phone { + grid-column: 1 / -1; + } + } + + &__dropdown { + max-width: 348px; + + @include on-small-desktop { + grid-column: span 3; + } + + @include on-phone { + grid-column: 1 / -1; + max-width: none; + } + } + + &__dropdown-title { + @extend%inter-400; + + font-size: 14px; + line-height: 1.3; + color: $text-color; + margin: 0 0 10px; + } + + &__wrapper { + width: 100%; + position: relative; + } + + &__button { + @extend%inter-400; + + font-size: 20px; + line-height: 1.3; + position: relative; + width: 100%; + height: 47px; + background-color: $secondary-bg-color; + border: none; + color: $white-color; + display: flex; + align-items: center; + padding: 0 0 0 25px; + margin-bottom: 3px; + cursor: pointer; + + &::after { + position: absolute; + content: ''; + width: 0; + height: 0; + border-style: solid; + border-width: 6px 5px 0; + border-color: $accent-color transparent transparent; + right: 10px; + transition: transform 0.3s; + } + + &:hover::after { + transform: translateY(5px); + } + } + + &__list { + margin: 0; + padding: 20px 0 20px 25px; + list-style: none; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + position: absolute; + transform: translateY(-20px); + opacity: 0; + background-color: $secondary-bg-color; + width: 100%; + transition: + transform 0.3s, + opacity 0.3s; + pointer-events: none; + box-sizing: border-box; + + &.dropdown__list--active { + transform: translateY(0); + opacity: 1; + pointer-events: all; + z-index: 1; + } + } + + &__item { + @extend%inter-400; + + font-size: 16px; + line-height: 1.3; + color: $white-color; + cursor: pointer; + width: 100%; + } + + &__dropdown-input { + display: none; + } +} + +.order-page { + &__body { + background-color: $bg-color; + margin: 0; + } +} + +.order-complete { + background-image: linear-gradient(135deg, $secondary-bg-color, #000); + height: 100vh; + + &__top { + margin-bottom: 200px; + + @include on-large-desktop { + margin-bottom: 100px; + } + } + + &__bottom { + @include grid; + + justify-items: center; + } + + &__title { + @extend%h2; + + text-align: center; + grid-column: 1 / -1; + margin-bottom: 55px; + + @include on-large-desktop { + margin-bottom: 35px; + } + + @include on-small-desktop { + margin-bottom: 20px; + } + } + + &__span { + @extend%span; + } + + &__description { + @extend%main-text; + + text-align: center; + grid-column: 1 / -1; + margin-bottom: 70px; + + @include on-large-desktop { + margin-bottom: 50px; + } + } + + &__btn { + grid-column: 1 / -1; + height: 48px; + width: fit-content; + + @include on-tablet { + grid-column: 2 / -2; + width: 100%; + } + + @include on-phone { + grid-column: 1 / -1; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..0c4617afe 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,26 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/container'; +@import 'blocks/top-bar'; +@import 'blocks/logo'; +@import 'blocks/nav'; +@import 'blocks/button'; +@import 'blocks/video-btn'; +@import 'blocks/video'; +@import 'blocks/faq'; +@import 'blocks/menu'; +@import 'blocks/help'; +@import 'blocks/lang'; +@import 'blocks/actions'; +@import 'blocks/about'; +@import 'blocks/swiper'; +@import 'blocks/tech'; +@import 'blocks/benefits'; +@import 'blocks/contacts'; +@import 'blocks/form'; +@import 'blocks/footer'; +@import 'components/order'; +@import 'components/card'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..490bcc617 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,67 @@ %h1 { - font-family: Roboto, sans-serif; + @extend%inter-900; + + font-size: 54px; + color: $white-color; + line-height: 1.3; + text-transform: uppercase; + margin: 0; + + @include on-large-desktop { + font-size: 46px; + } + + @include on-tablet { + font-size: 26px; + } +} + +%span { + color: $accent-color; font-weight: 400; } + +%h2 { + @extend%inter-900; + + text-transform: uppercase; + font-size: 36px; + color: $white-color; + line-height: 1; + margin: 0; + + @include on-tablet { + font-size: 21px; + } +} + +%main-text { + @extend%inter-400; + + font-size: 16px; + color: $text-color; + line-height: 1.5; + margin: 0; +} + +%secondary-text { + @extend%inter-500; + + font-size: 20px; + color: $text-color; + line-height: 1.5; + margin: 0; + + @include on-large-desktop { + font-size: 16px; + } +} + +%link { + @extend%inter-500; + + font-size: 16px; + color: $white-color; + line-height: 1.3; + text-decoration-line: none; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..dcc5dbcdd 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,47 @@ #{$_property}: $_toValue; } } + +@mixin on-large-desktop { + @media (max-width: 1919.98px) { + @content; + } +} + +@mixin on-small-desktop { + @media (max-width: 1279.98px) { + @content; + } +} + +@mixin on-tablet { + @media (max-width: 1023.98px) { + @content; + } +} + +@mixin on-phone { + @media (max-width: 767.98px) { + @content; + } +} + +@mixin grid { + --columns: 16; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-large-desktop { + --columns: 12; + } + + @include on-small-desktop { + --columns: 6; + } + + @include on-phone { + --columns: 2; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..d7e860473 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,6 @@ -$c-gray: #eee; +$accent-color: #05c2df; +$text-color: #929292; +$bg-color: #05040b; +$white-color: #fff; +$dark-color: #2f2f2f; +$secondary-bg-color: #191536;