diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 00000000..8b5743ec --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/README.md b/README.md index 302783df..193a9ade 100644 --- a/README.md +++ b/README.md @@ -24,8 +24,8 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Bl 10. `git add . && git commit -m 'solution'` to save your changes. 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/). -14. Copy `DEMO LINK` to the PR description. +13. Replace `wiliammunchen` with your Github username in the + [DEMO LINK](https://wiliammunchen.github.io/layout_KateVR/). +1. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/index.html b/index.html index d339e685..12b83862 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,1742 @@ - + - Title + + KatVR + - -

Hello Mate Academy

- + +
+
+
+ + +
+ + + + + +
+ + +
+ +
+
+

+ THE NEW START OF + VR Locomotion +

+ +
+

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

+

1200$

+ + +
+
+ +
+ + + KatVR locomotion system + +
+
+ +
+
+ + +
+ + + More + + + + +
+ + +
+
+ + + +
+
+
+
+

+ MORE THAN + GAMING! +

+

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

+
+ +
+
+
+ Education +
+

EDUCATION

+

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

+
+ +
+
+ Real estate +
+

REAL ESTATE

+

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

+
+ +
+
+ Fitness +
+

FITNESS

+

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

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

1/5

+ +
+
+ KAT loco product preview +
+ + +
+
+ +
+

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

+
+ +
+

CONNECTION

+

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

+
+ +
+

BATTERIES

+

+ Type: Lithium-Ion 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 +

+
+ + +
+
+ +
+
+

+ WHY + KAT LOCO? +

+ +
+
+
+ Universally compatible +
+

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 and PC control panel +
+

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

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

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

Have any questions?

+

+ Get In + Touch +

+

+ Our manager will reply you within 15 minutes +

+ +
+ + +86-0571-86105373 + + + global@katvr.com + + + overseas@katvr.com + +
+
+ +
+ + + + + + + + + +
+
+ + + + +
+
+
+ + + + + + + + + + + + + + + diff --git a/lint.json b/lint.json new file mode 100644 index 00000000..e69de29b diff --git a/lint.txt b/lint.txt new file mode 100644 index 00000000..d12cf228 Binary files /dev/null and b/lint.txt differ diff --git a/lint8.txt b/lint8.txt new file mode 100644 index 00000000..d1cfbc04 --- /dev/null +++ b/lint8.txt @@ -0,0 +1,139 @@ +node.exe : +No linha:1 caractere:1 ++ & "C:\Program +Files\nodejs/node.exe" +"C:\Program +Files\nodejs/node_mo ... ++ ~~~~~~~~~~~~~~~~~~~~~~~~~~~ +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +~~~~~~~~~~~~~ + + CategoryInfo + : NotSpecified: (:String + ) [], RemoteException + + FullyQualifiedErrorId + : NativeCommandError + +src/styles/main.scss + 6051:7 +ÔÜá Expected +"gap" to come before +"justify-content" or +der/properties-order + 6052:7 +ÔÜá Expected +an empty line before +property "min-height" or +der/properties-order + 6122:7 +ÔÜá Expected +"gap" to come before +"justify-content" or +der/properties-order + 6253:7 +ÔÜá Expected +an empty line before +property "padding" or +der/properties-order + 6254:7 +ÔÜá Expected +"margin-bottom" to come +before "padding" order +/properties-order + 6261:7 +ÔÜá Expected +an empty line before +property "grid-area" or +der/properties-order + 6271:7 +ÔÜá Expected +"position" to come before +"grid-area" order/p +roperties-order + 6271:7 +ÔÜá Expected +an empty line before +property "position" or +der/properties-order + 6272:7 +ÔÜá Expected +an empty line before +property "display" or +der/properties-order + 6275:7 +ÔÜá Expected +"gap" to come before +"justify-items" or +der/properties-order + 6276:7 +ÔÜá Expected +an empty line before +property "width" or +der/properties-order + 6282:9 +ÔÜá Expected +an empty line before +property "position" or +der/properties-order + 6285:9 +ÔÜá Expected +an empty line before +property "width" or +der/properties-order + 6290:9 +ÔÜá Expected +an empty line before +property "position" or +der/properties-order + 6293:9 +ÔÜá Expected +an empty line before +property "width" or +der/properties-order + 6293:16 +Ô£û Expected +"33.333" to be "33.33" + +number-max-precision + 6295:9 +ÔÜá Expected +an empty line before +property "transition" or +der/properties-order + 6301:7 +ÔÜá Expected +"padding" to come before +"font-size" order/ +properties-order + 6338:7 +ÔÜá Expected +"aspect-ratio" to come +before "height" orde +r/properties-order + 6350:7 +ÔÜá Expected +"gap" to come before +"justify-content" or +der/properties-order + 6376:13 +Ô£û Expected +"33.333" to be "33.33" + +number-max-precision + 6382:13 +Ô£û Expected +"66.666" to be "66.67" + +number-max-precision + +src/styles/blocks/mobile-nav. +scss + 90:5 +ÔÜá Expected +an empty line before +property "height" order/ +properties-order + +Ô£û 23 problems +(3 errors, 20 +warnings) + diff --git a/lint_output.txt b/lint_output.txt new file mode 100644 index 00000000..e69de29b diff --git a/package-lock.json b/package-lock.json index 87fcefd8..0c390264 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -1510,10 +1510,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", @@ -8721,20 +8722,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, - "node_modules/yaml": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", - "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", - "dev": true, - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/package.json b/package.json index 7149ff15..a9435647 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "kate_vr", "version": "1.0.0", "description": "KateVR", - "homepage": "layout_KateVR", + "homepage": "/layout_KateVR/", "scripts": { "init": "mate-scripts init", "start": "mate-scripts start", @@ -23,7 +23,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", diff --git a/src/images/KATvr_main-mobile.png b/src/images/KATvr_main-mobile.png new file mode 100644 index 00000000..1c30f70a Binary files /dev/null and b/src/images/KATvr_main-mobile.png differ diff --git a/src/images/KATvr_main.png b/src/images/KATvr_main.png new file mode 100644 index 00000000..f63ced28 Binary files /dev/null and b/src/images/KATvr_main.png differ diff --git a/src/images/about/1.png b/src/images/about/1.png new file mode 100644 index 00000000..210ab2ee Binary files /dev/null and b/src/images/about/1.png differ diff --git a/src/images/back.svg b/src/images/back.svg new file mode 100644 index 00000000..6d4ea073 --- /dev/null +++ b/src/images/back.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/biceps.svg b/src/images/biceps.svg new file mode 100644 index 00000000..5bc6e3b8 --- /dev/null +++ b/src/images/biceps.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/cross.svg b/src/images/cross.svg new file mode 100644 index 00000000..77623147 --- /dev/null +++ b/src/images/cross.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/faq-arrow.svg b/src/images/faq-arrow.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/src/images/faq-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/favicon.ico b/src/images/favicon.ico new file mode 100644 index 00000000..18446b25 Binary files /dev/null and b/src/images/favicon.ico differ diff --git a/src/images/footer/facebook.svg b/src/images/footer/facebook.svg new file mode 100644 index 00000000..390e3693 --- /dev/null +++ b/src/images/footer/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/reddit.svg b/src/images/footer/reddit.svg new file mode 100644 index 00000000..cf084739 --- /dev/null +++ b/src/images/footer/reddit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/twitter.svg b/src/images/footer/twitter.svg new file mode 100644 index 00000000..b89987d9 --- /dev/null +++ b/src/images/footer/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/youtube.svg b/src/images/footer/youtube.svg new file mode 100644 index 00000000..ad380dfe --- /dev/null +++ b/src/images/footer/youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/form/Polygon.svg b/src/images/form/Polygon.svg new file mode 100644 index 00000000..2976f680 --- /dev/null +++ b/src/images/form/Polygon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/hat.svg b/src/images/hat.svg new file mode 100644 index 00000000..ed2e4f00 --- /dev/null +++ b/src/images/hat.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 00000000..105f9e7f --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/menu.svg b/src/images/menu.svg new file mode 100644 index 00000000..12fad17f --- /dev/null +++ b/src/images/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/network.svg b/src/images/network.svg new file mode 100644 index 00000000..63434b25 --- /dev/null +++ b/src/images/network.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/personal-computer.svg b/src/images/personal-computer.svg new file mode 100644 index 00000000..0f09382d --- /dev/null +++ b/src/images/personal-computer.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/personal-computers.svg b/src/images/personal-computers.svg new file mode 100644 index 00000000..37e8765f --- /dev/null +++ b/src/images/personal-computers.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/play-button.svg b/src/images/play-button.svg new file mode 100644 index 00000000..fbdf596c --- /dev/null +++ b/src/images/play-button.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/play-triangle.svg b/src/images/play-triangle.svg new file mode 100644 index 00000000..d7e14469 --- /dev/null +++ b/src/images/play-triangle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/skyline.svg b/src/images/skyline.svg new file mode 100644 index 00000000..988d7f22 --- /dev/null +++ b/src/images/skyline.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/specs/side.png b/src/images/specs/side.png new file mode 100644 index 00000000..5f34e1ee Binary files /dev/null and b/src/images/specs/side.png differ diff --git a/src/images/specs/side_short.png b/src/images/specs/side_short.png new file mode 100644 index 00000000..83850a23 Binary files /dev/null and b/src/images/specs/side_short.png differ diff --git a/src/images/specs/side_wide.png b/src/images/specs/side_wide.png new file mode 100644 index 00000000..2d13033c Binary files /dev/null and b/src/images/specs/side_wide.png differ diff --git a/src/images/wireless.svg b/src/images/wireless.svg new file mode 100644 index 00000000..7850ac02 --- /dev/null +++ b/src/images/wireless.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7..ce1988ea 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,585 @@ 'use strict'; + +const body = document.querySelector('.page__body'); +const menuOpenButton = document.querySelector('[data-menu-open]'); +const mobileMenu = document.querySelector('[data-mobile-menu]'); +const mobileMenuNav = document.querySelector('.mobile-menu__nav'); +const mobileMenuBuyButton = document.querySelector('.mobile-menu__buy'); +const mobileMenuLanguageBackButton = document.querySelector( + '[data-menu-language-back]', +); +const mobileMenuLanguagePanel = document.querySelector('[data-menu-language-panel]'); +const mobileMenuPanelCloseButton = document.querySelector('[data-menu-panel-close]'); +const contactForm = document.querySelector('[data-contact-form]'); +const floatingBuyButton = document.querySelector('[data-floating-buy]'); +const headerMobileBuyButton = document.querySelector('.header__mobile-buy'); +const secondSection = document.querySelector('main > section:nth-of-type(1)'); +const modalTriggers = document.querySelectorAll('[data-modal-target]'); +const headerOrderButtons = document.querySelectorAll( + '.header__buy-button, .header__mobile-buy, .mobile-menu__buy', +); +const landingNavLinks = document.querySelectorAll( + '.header__nav .nav__link, .mobile-menu__link, .footer__nav .nav__link', +); +const faqItems = document.querySelectorAll('.faq-modal__item'); +const modalVideoFrame = document.querySelector('[data-video-frame]'); +const orderModal = document.querySelector('[data-modal="order"]'); +const orderDialog = document.querySelector('.order'); +const orderSteps = document.querySelectorAll('[data-order-step]'); +const orderIndicators = document.querySelectorAll('[data-order-indicator]'); +const orderNextButtons = document.querySelectorAll('[data-order-next]'); +const orderPrevButtons = document.querySelectorAll('[data-order-prev]'); +const orderResetButtons = document.querySelectorAll('[data-order-reset]'); +const orderForms = document.querySelectorAll('[data-order-form]'); +const orderShippingForm = document.querySelector('[data-order-form="shipping"]'); +const orderPaymentForm = document.querySelector('[data-order-form="payment"]'); +const orderQuantity = document.querySelector('[data-order-quantity]'); +const orderPrice = document.querySelector('[data-order-price]'); +const orderCardInputs = Array.from( + document.querySelectorAll('.order__pay-input--card'), +); + +let menuOpen = false; +let activeModal = null; +let currentOrderStep = 1; + +const ipadMiniMediaQuery = window.matchMedia( + '(min-width: 640px) and (max-width: 1023px)', +); +const iphoneSeMediaQuery = window.matchMedia('(max-width: 639px)'); +let headerMobileBuyFloating = false; +let headerMobileBuyAnimation = null; + +const syncPageLock = () => { + body.classList.toggle('page__body--locked', menuOpen || Boolean(activeModal)); +}; + +const setMobileMenuView = view => { + if (!mobileMenu) { + return; + } + + const isLanguageView = + view === 'language' && (ipadMiniMediaQuery.matches || iphoneSeMediaQuery.matches); + + mobileMenu.dataset.view = isLanguageView ? 'language' : 'main'; + + if (mobileMenuNav) { + mobileMenuNav.hidden = isLanguageView; + } + + if (mobileMenuBuyButton) { + mobileMenuBuyButton.hidden = isLanguageView; + } + + if (mobileMenuLanguageBackButton) { + mobileMenuLanguageBackButton.hidden = !isLanguageView; + } + + if (mobileMenuLanguagePanel) { + mobileMenuLanguagePanel.hidden = !isLanguageView; + } + + if (mobileMenuPanelCloseButton) { + mobileMenuPanelCloseButton.hidden = isLanguageView; + } +}; + +const openMenu = () => { + if (!mobileMenu || !menuOpenButton) { + return; + } + + setMobileMenuView('main'); + mobileMenu.hidden = false; + menuOpen = true; + menuOpenButton.setAttribute('aria-expanded', 'true'); + syncPageLock(); + syncHeaderMobileBuyVisibility(); +}; + +const closeMenu = () => { + if (!mobileMenu || !menuOpenButton) { + return; + } + + setMobileMenuView('main'); + mobileMenu.hidden = true; + menuOpen = false; + menuOpenButton.setAttribute('aria-expanded', 'false'); + syncPageLock(); + syncHeaderMobileBuyVisibility(); +}; + +const stopVideo = () => { + if (!modalVideoFrame) { + return; + } + + modalVideoFrame.src = ''; +}; + +const playVideo = () => { + if (!modalVideoFrame) { + return; + } + + modalVideoFrame.src = modalVideoFrame.dataset.videoSrc || ''; +}; + +const closeModal = (modal = activeModal) => { + if (!modal) { + return; + } + + if (modal === activeModal) { + activeModal = null; + } + + modal.hidden = true; + + if (modal.dataset.modal === 'video') { + stopVideo(); + } + + syncPageLock(); + syncHeaderMobileBuyVisibility(); +}; + +const setOrderStep = stepNumber => { + currentOrderStep = stepNumber; + + if (orderDialog) { + orderDialog.dataset.orderCurrentStep = String(stepNumber); + } + + for (const step of orderSteps) { + step.classList.toggle( + 'order__step--active', + Number(step.dataset.orderStep) === stepNumber, + ); + } + + for (const indicator of orderIndicators) { + const indicatorStep = Number(indicator.dataset.orderIndicator); + + indicator.classList.toggle( + 'order__indicator--active', + indicatorStep === stepNumber, + ); + indicator.classList.toggle( + 'order__indicator--done', + indicatorStep < stepNumber, + ); + } +}; + +const updateOrderPrice = () => { + if (!orderQuantity || !orderPrice) { + return; + } + + const total = 1200 * Number(orderQuantity.value); + + orderPrice.textContent = `${total}$`; +}; + +const focusOrderCardInput = input => { + input.focus(); + input.setSelectionRange(input.value.length, input.value.length); +}; + +const distributeOrderCardDigits = (startIndex, digits) => { + let currentIndex = startIndex; + let remainingDigits = digits; + + while (currentIndex < orderCardInputs.length) { + const input = orderCardInputs[currentIndex]; + const chunk = remainingDigits.slice(0, 4); + + input.value = chunk; + remainingDigits = remainingDigits.slice(4); + + if (!remainingDigits) { + return input; + } + + currentIndex += 1; + } + + return orderCardInputs.at(-1) || null; +}; + +const resetOrderFlow = () => { + for (const form of orderForms) { + form.reset(); + } + + if (orderQuantity) { + orderQuantity.value = '1'; + } + + updateOrderPrice(); + setOrderStep(1); +}; + +const openModal = modalName => { + const modal = document.querySelector(`[data-modal="${modalName}"]`); + + if (!modal) { + return; + } + + if (activeModal && activeModal !== modal) { + closeModal(activeModal); + } + + closeMenu(); + modal.hidden = false; + activeModal = modal; + + if (modalName === 'video') { + playVideo(); + } + + if (modalName === 'order') { + resetOrderFlow(); + } + + syncPageLock(); + syncHeaderMobileBuyVisibility(); +}; + +const scrollToSection = targetId => { + const targetSection = document.querySelector(targetId); + + if (!targetSection) { + return; + } + + closeMenu(); + targetSection.scrollIntoView({ + behavior: 'smooth', + block: 'start', + }); +}; + +const syncFloatingBuyVisibility = () => { + if (!floatingBuyButton || !secondSection) { + return; + } + + const shouldShowForViewport = ipadMiniMediaQuery.matches; + const reachedSecondSection = window.scrollY >= secondSection.offsetTop - 24; + + floatingBuyButton.hidden = !( + shouldShowForViewport && + reachedSecondSection && + !menuOpen && + !activeModal + ); +}; + +const animateHeaderMobileBuyState = shouldFloat => { + if (!headerMobileBuyButton || headerMobileBuyFloating === shouldFloat) { + return; + } + + headerMobileBuyAnimation?.cancel(); + + const startRect = headerMobileBuyButton.getBoundingClientRect(); + + headerMobileBuyButton.classList.toggle('header__mobile-buy--floating', shouldFloat); + headerMobileBuyFloating = shouldFloat; + + const endRect = headerMobileBuyButton.getBoundingClientRect(); + const deltaX = startRect.left - endRect.left; + const deltaY = startRect.top - endRect.top; + + headerMobileBuyAnimation = headerMobileBuyButton.animate( + [ + {transform: `translate(${deltaX}px, ${deltaY}px)`}, + {transform: 'translate(0, 0)'}, + ], + { + duration: 280, + easing: 'cubic-bezier(0.22, 1, 0.36, 1)', + }, + ); + + headerMobileBuyAnimation.addEventListener( + 'finish', + () => { + headerMobileBuyAnimation = null; + }, + {once: true}, + ); +}; + +const syncHeaderMobileBuyVisibility = () => { + if (!headerMobileBuyButton) { + return; + } + + if (!iphoneSeMediaQuery.matches || menuOpen || Boolean(activeModal)) { + animateHeaderMobileBuyState(false); + + return; + } + + animateHeaderMobileBuyState(window.scrollY > 0); +}; + +if (menuOpenButton) { + menuOpenButton.addEventListener('click', openMenu); +} + +window.addEventListener('scroll', syncFloatingBuyVisibility, {passive: true}); +window.addEventListener('scroll', syncHeaderMobileBuyVisibility, {passive: true}); +window.addEventListener('resize', syncFloatingBuyVisibility); +window.addEventListener('resize', syncHeaderMobileBuyVisibility); + +if (ipadMiniMediaQuery.addEventListener) { + ipadMiniMediaQuery.addEventListener('change', () => { + syncFloatingBuyVisibility(); + setMobileMenuView('main'); + }); +} + +if (iphoneSeMediaQuery.addEventListener) { + iphoneSeMediaQuery.addEventListener('change', () => { + syncHeaderMobileBuyVisibility(); + }); +} + +syncFloatingBuyVisibility(); +syncHeaderMobileBuyVisibility(); +setMobileMenuView('main'); + +document.addEventListener('click', event => { + const languageOpenTarget = event.target.closest('[data-menu-language-open]'); + + if ( + languageOpenTarget && + mobileMenu && + !mobileMenu.hidden && + (ipadMiniMediaQuery.matches || iphoneSeMediaQuery.matches) + ) { + setMobileMenuView('language'); + + return; + } + + const languageBackTarget = event.target.closest('[data-menu-language-back]'); + + if (languageBackTarget && mobileMenu && !mobileMenu.hidden) { + setMobileMenuView('main'); + + return; + } + + const menuCloseTarget = event.target.closest('[data-menu-close], [data-menu-link]'); + + if (menuCloseTarget && mobileMenu && !mobileMenu.hidden) { + closeMenu(); + } + + const modalTrigger = event.target.closest('[data-modal-target]'); + + if (modalTrigger) { + openModal(modalTrigger.dataset.modalTarget); + } + + const modalCloseTarget = event.target.closest('[data-modal-close]'); + + if (modalCloseTarget) { + const targetModal = modalCloseTarget.closest('[data-modal]'); + + if (targetModal) { + closeModal(targetModal); + } + } +}); + +document.addEventListener('keydown', event => { + if (event.key !== 'Escape') { + return; + } + + if (activeModal) { + closeModal(); + + return; + } + + if (menuOpen) { + closeMenu(); + } +}); + +for (const item of faqItems) { + item.addEventListener('toggle', () => { + if (!item.open) { + return; + } + + for (const otherItem of faqItems) { + if (otherItem !== item) { + otherItem.open = false; + } + } + }); +} + +if (contactForm) { + contactForm.addEventListener('submit', event => { + if (!contactForm.checkValidity()) { + contactForm.reportValidity(); + + return; + } + + event.preventDefault(); + contactForm.reset(); + + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }); +} + +for (const form of orderForms) { + form.addEventListener('submit', event => { + event.preventDefault(); + }); +} + +for (const button of orderNextButtons) { + button.addEventListener('click', () => { + const nextStep = Number(button.dataset.orderNext); + + if (nextStep === 2 && orderShippingForm && !orderShippingForm.checkValidity()) { + orderShippingForm.reportValidity(); + + return; + } + + if (nextStep === 3 && orderPaymentForm && !orderPaymentForm.checkValidity()) { + orderPaymentForm.reportValidity(); + + return; + } + + setOrderStep(nextStep); + }); +} + +for (const button of orderPrevButtons) { + button.addEventListener('click', () => { + setOrderStep(Number(button.dataset.orderPrev)); + }); +} + +for (const button of orderResetButtons) { + button.addEventListener('click', () => { + resetOrderFlow(); + }); +} + +for (const indicator of orderIndicators) { + indicator.addEventListener('click', () => { + const indicatorStep = Number(indicator.dataset.orderIndicator); + + if (indicatorStep < currentOrderStep) { + setOrderStep(indicatorStep); + } + }); +} + +if (orderQuantity) { + orderQuantity.addEventListener('change', updateOrderPrice); + updateOrderPrice(); +} + +for (const [index, input] of orderCardInputs.entries()) { + input.addEventListener('input', () => { + const digits = input.value.replace(/\D/g, ''); + + if (digits.length > 4) { + const lastFilledInput = distributeOrderCardDigits(index, digits); + + if (lastFilledInput) { + focusOrderCardInput(lastFilledInput); + } + + return; + } + + input.value = digits.slice(0, 4); + + if (input.value.length === 4 && index < orderCardInputs.length - 1) { + focusOrderCardInput(orderCardInputs[index + 1]); + } + }); + + input.addEventListener('keydown', event => { + if (event.key === 'Backspace' && input.value.length === 0 && index > 0) { + focusOrderCardInput(orderCardInputs[index - 1]); + } + }); + + input.addEventListener('paste', event => { + const pastedDigits = event.clipboardData?.getData('text')?.replace(/\D/g, ''); + + if (!pastedDigits) { + return; + } + + event.preventDefault(); + + const lastFilledInput = distributeOrderCardDigits(index, pastedDigits); + + if (lastFilledInput) { + focusOrderCardInput(lastFilledInput); + } + }); +} + +if (orderModal) { + orderModal.addEventListener('click', event => { + if (event.target === orderModal) { + closeModal(orderModal); + } + }); +} + +for (const trigger of modalTriggers) { + trigger.addEventListener('keydown', event => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + openModal(trigger.dataset.modalTarget); + } + }); +} + +for (const button of headerOrderButtons) { + button.addEventListener('click', event => { + event.preventDefault(); + event.stopPropagation(); + openModal('order'); + }); +} + +for (const link of landingNavLinks) { + link.addEventListener('click', event => { + const targetId = link.getAttribute('href'); + + if (!targetId || !targetId.startsWith('#')) { + return; + } + + event.preventDefault(); + scrollToSection(targetId); + }); +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 619b8c52..b3251a89 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,55 @@ @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; + font-weight: 400; font-style: normal; + font-display: swap; + src: local('Inter'); +} + +@font-face { + font-family: Inter; + font-weight: 500; + font-style: normal; + font-display: swap; + src: local('Inter Medium'); +} + +@font-face { + font-family: Inter; + font-weight: 900; + font-style: normal; + font-display: swap; + src: local('Inter Black'); +} + +@font-face { + font-family: 'Mark Pro'; + font-weight: 400; + font-style: normal; + font-display: swap; + src: url('../fonts/FontFont_FF.Mark.Pro.otf') format('opentype'); +} + +@font-face { + font-family: 'Mark Pro'; + font-weight: 500; + font-style: normal; + font-display: swap; + src: url('../fonts/FontFont_FF.Mark.Pro.Medium.otf') format('opentype'); +} + +@font-face { + font-family: 'Mark Pro'; + font-weight: 700; + font-style: normal; + font-display: swap; + src: url('../fonts/FontFont_FF.Mark.Pro.Heavy.otf') format('opentype'); +} + +@font-face { + font-family: Quantum; + font-weight: 400; + font-style: normal; + font-display: swap; + src: url('../fonts/Quantum-400.otf') format('opentype'); } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46..f1c5ab68 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,43 @@ -h1 { - @extend %h1; +@use 'utils' as *; + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + + font-family: $font-body; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: $c-text; + + background: $c-background; +} + +h1, +h2, +h3, +h4, +p, +ul, +ol, +figure { + margin: 0; +} + +button, +input, +textarea { + font: inherit; +} + +img { + display: block; + max-width: 100%; +} + +a, +button { + cursor: pointer; } diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe..70d9d7b5 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,4 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; +@forward 'utils/reset'; +@forward 'utils/vars'; +@forward 'utils/mixins'; +@forward 'utils/extends'; diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 00000000..5c9009be --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,119 @@ +.about { + &--desktop { + display: none; + + @include OnDesktop { + display: block; + text-align: end; + } + } + + &__grid { + row-gap: 85px; + + @include OnTablet { + row-gap: 100px; + } + + @include OnDesktop { + row-gap: 220px; + } + } + + &__img-counter { + font-size: 14px; + font-weight: 400; + line-height: 17px; + color: $c-contrast; + } + + &__image { + width: 100%; + height: 100%; + object-fit: cover; + object-position: left bottom; + } + + &__title { + margin-bottom: 20px; + + &--tablet { + display: none; + + @include OnTablet { + display: block; + margin-bottom: 32px; + } + } + + &--phone { + @include OnTablet { + display: none; + } + } + } + + &__text { + margin-bottom: 30px; + + @include OnDesktop { + margin-bottom: 30px; + + &:last-child { + margin-bottom: 225px; + } + } + } + + &__subtitle { + margin-top: 80px; + margin-bottom: 11px; + + font-size: 14px; + font-weight: 400; + line-height: 17px; + color: $c-contrast; + + @include OnDesktop { + margin-bottom: 15px; + } + } + + &__vertical { + overflow: hidden; + + &-wrap { + display: none; + + @include OnTablet { + display: flex; + width: max-content; + } + } + + &-text { + width: max-content; + + writing-mode: tb-rl; + font-family: sans-serif; + font-size: 64px; + font-weight: 900; + line-height: 130%; + color: transparent; + text-transform: uppercase; + white-space: nowrap; + + -webkit-text-stroke: 1px $c-contrast; + + @for $i from 0 through 7 { + &:nth-child(n + #{$i}) { + opacity: calc(1 - #{0.2 * $i}); + } + } + + &:nth-child(2n) { + transform: rotate(180deg); + } + } + } +} diff --git a/src/styles/blocks/advantages.scss b/src/styles/blocks/advantages.scss new file mode 100644 index 00000000..d784e0b9 --- /dev/null +++ b/src/styles/blocks/advantages.scss @@ -0,0 +1,34 @@ +.advantages { + &__title { + margin-bottom: 83px; + + @include OnDesktop { + text-align: center; + } + } + + &__grid { + align-items: baseline; + } + + &__buy { + display: none; + + width: 200px; + margin: 0 auto; + border-radius: 4px; + + line-height: 48px; + text-align: center; + + background-color: $c-contrast; + + @include OnDesign { + display: block; + } + + @include OnFullHd { + display: none; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 00000000..126aed62 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,14 @@ +.button { + cursor: pointer; + + padding: 0; + border: none; + + background-color: transparent; + + transition: color $transition; + + &:hover { + color: $c-contrast; + } +} diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 00000000..4a77bdad --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,48 @@ +.contact { + background-color: #05040b; + + &__link { + display: inline; + margin-right: 60%; + margin-bottom: 11px; + + &:last-child { + margin-bottom: 0; + } + } + + &__subtitle { + margin-bottom: 13px; + } + + &__title { + margin-bottom: 32px; + } + + &__text { + display: none; + + @include OnTablet { + display: block; + margin-bottom: 76px; + } + } + + &--tablet { + display: none; + + @include OnTablet { + display: flex; + flex-direction: column; + align-items: flex-start; + } + } + + &--phone { + display: block; + + @include OnTablet { + display: none; + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 00000000..34e32163 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,11 @@ +.container { + margin: 0 20px; + + @include OnTablet { + margin: 0 34px; + } + + @include OnDesktop { + margin: 0 110px; + } +} diff --git a/src/styles/blocks/faq.scss b/src/styles/blocks/faq.scss new file mode 100644 index 00000000..5893d585 --- /dev/null +++ b/src/styles/blocks/faq.scss @@ -0,0 +1,110 @@ +.faq { + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateY(-200%); + + overflow-y: scroll; + + height: 100vh; + + background-color: #191536; + + transition: transform 1s; + + @include OnDesktop { + max-width: 1100px; + height: auto; + margin: 0 auto; + } + + &__active { + transform: translateY(0%); + + @include OnDesktop { + transform: translateY(10%); + } + } + + &__container { + margin: 0 20px; + + @include OnTablet { + margin: 0 34px; + } + + @include OnDesktop { + margin: 0 93px; + } + } + + &__action { + display: flex; + justify-content: end; + + margin-right: 20px; + margin-bottom: 30px; + padding-top: 20px; + + @include OnTablet { + margin-right: 34px; + margin-bottom: 50px; + padding-top: 34px; + } + + @include OnDesktop { + margin-right: 28px; + margin-bottom: 25px; + padding-top: 28px; + } + } + + &__title { + margin-bottom: 30px; + + font-size: 21px; + font-weight: 900; + line-height: 130%; + color: $c-white; + + @include OnDesktop { + margin-bottom: 37px; + } + + &--color-part { + font-weight: 400; + color: $c-contrast; + } + + &--br { + @include OnDesktop { + display: none; + } + } + } + + &__questions { + margin-bottom: 15px; + + &:last-child { + margin-bottom: 50px; + } + } + + &__help { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 50px; + + &-text { + padding: 10px; + + font-size: 16px; + font-weight: 500; + line-height: 150%; + color: $c-contrast; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 00000000..14930fbc --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,40 @@ +.footer { + background-color: #000; + + &__container { + padding: 0; + } + + &__logo { + margin-bottom: 15px; + } + + &__links { + display: flex; + flex-direction: column; + gap: 12px; + + @include OnTablet { + flex-direction: row; + gap: 45px; + justify-content: center; + } + } + + &__media { + display: flex; + gap: 28px; + align-items: flex-end; + } + + &__contacts-mobile { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 12px; + + @include OnTablet { + display: none; + } + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 00000000..4dffea19 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,94 @@ +.form { + &__input { + display: block; + + width: 100%; + height: 24px; + margin: 0; + margin-bottom: 24px; + padding: 20px 0; + border: none; + border-bottom: 1px solid #2f2f2f; + + font-family: inherit; + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $c-white; + + background-color: transparent; + outline: none; + + &:last-child { + height: 67px; + margin-bottom: 0; + } + + &:focus { + border-color: $c-contrast; + color: $c-contrast; + + &::placeholder { + color: $c-contrast; + } + } + + &:invalid:not(:placeholder-shown, :focus) { + border-color: red; + } + } + + &__textarea { + resize: none; + height: 67px; + margin-bottom: 50px; + } + + &__button { + width: 100%; + border: none; + border-radius: 4px; + + line-height: 48px; + color: $c-white; + + background-color: $c-contrast; + + @include OnTablet { + width: 200px; + } + } + + &__footer { + display: flex; + justify-content: space-between; + margin-bottom: 27px; + + @include OnTablet { + margin-bottom: 0; + } + } + + &__link { + display: none; + align-items: center; + justify-content: center; + + width: 50px; + height: 50px; + border: 1px solid #05c2df; + border-radius: 50%; + + color: $c-contrast; + + transition: transform $transition; + + &:hover { + transform: scale(1.2); + } + + @include OnTablet { + display: flex; + } + } +} diff --git a/src/styles/blocks/grid.scss b/src/styles/blocks/grid.scss new file mode 100644 index 00000000..0357ceb5 --- /dev/null +++ b/src/styles/blocks/grid.scss @@ -0,0 +1,65 @@ +.grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; + + @include OnDesktop { + grid-template-columns: repeat(16, 1fr); + column-gap: 24px; + } + + @include OnTablet { + @media (max-width: 1259px) { + grid-template-columns: repeat(6, 1fr); + gap: 24px; + } + } + + &--tablet { + display: block; + + @include OnTablet { + display: grid; + } + } + + &--desktop { + display: block; + + @include OnDesktop { + display: grid; + } + } + + &--mobile { + @include OnTablet { + display: block; + } + } + + &__item { + @for $start from 1 through 16 { + @for $end from $start through 16 { + &--#{$start}-#{$end} { + @media (max-width: 743px) { + grid-column: #{$start} / #{$end + 1}; + } + } + + &--desktop-#{$start}-#{$end} { + @include OnDesktop { + grid-column: #{$start} / #{$end + 1}; + } + } + + &--tablet-#{$start}-#{$end} { + @include OnTablet { + @media (max-width: 1259px) { + grid-column: #{$start} / #{$end + 1}; + } + } + } + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 00000000..9f972077 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,191 @@ +.header { + position: relative; + + @include OnTablet { + background-image: url(../images/KATvr_main.png); + background-repeat: no-repeat; + background-position: right top; + background-size: 60%; + } + + &__logo-language { + display: flex; + gap: 34px; + } + + &__language { + display: none; + + @include OnDesktop { + display: block; + } + } + + &__content { + display: flex; + align-items: center; + justify-content: space-between; + } + + &__menu { + @include OnDesktop { + display: none; + } + } + + &__img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + + &-container { + overflow: hidden; + height: 190px; + + @include OnTablet { + display: none; + } + } + } + &__title { + padding-bottom: 17px; + + font-size: 26px; + font-weight: 900; + line-height: 130%; + color: $c-white; + + @include OnDesktop { + padding-bottom: 35px; + font-size: 54px; + } + } + + &__color { + font-size: 26px; + font-weight: 400; + line-height: 130%; + color: $c-contrast; + + @include OnDesktop { + font-size: 54px; + } + } + + &__p { + margin-bottom: 10px; + + font-size: 16px; + font-weight: 500; + line-height: 150%; + color: $c-text; + + @include OnDesktop { + margin-bottom: 30px; + font-size: 20px; + } + } + + &__price { + margin-bottom: 35px; + + font-size: 18px; + font-weight: 500; + line-height: 24px; + color: $c-white; + text-align: center; + + @include OnTablet { + font-size: 20px; + text-align: start; + } + } + + &__play { + position: relative; + transform-origin: left; + width: max-content; + transition: transform $transition; + + &-button { + position: absolute; + top: 24px; + left: 27px; + + opacity: 0; + + transition: opacity $transition; + } + + &:hover { + transform: scale(1.2); + + & .header__play-button { + opacity: 1; + } + } + } + + &__grid { + margin-bottom: 50px; + + @include OnTablet { + margin-bottom: 70px; + } + + @include OnDesktop { + margin-bottom: 200px; + } + } + + &__faq-help { + display: flex; + gap: 40px; + } + &__faq { + font-size: 16px; + font-weight: 500; + line-height: 150%; + color: $c-white; + } + + &__more { + font-size: 16px; + font-weight: 500; + line-height: 150%; + color: $c-contrast; + } + + &__img-buttons { + display: flex; + gap: 110px; + border-bottom: 1px solid #212121; + } + + &__img-button { + box-sizing: border-box; + padding-bottom: 10px; + border-bottom: 1px solid transparent; + + font-size: 16px; + font-weight: 500; + line-height: 150%; + color: $c-white; + + transition: border-color $transition; + + &:hover { + border-color: $c-contrast; + } + } + + &__footer { + display: none; + + @include OnDesktop { + display: flex; + justify-content: space-between; + } + } +} diff --git a/src/styles/blocks/help.scss b/src/styles/blocks/help.scss new file mode 100644 index 00000000..30825ef1 --- /dev/null +++ b/src/styles/blocks/help.scss @@ -0,0 +1,128 @@ +.help { + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateY(-200%); + + height: 100vh; + + background-color: #191536; + + transition: transform 1s; + + @include OnDesktop { + max-width: 1100px; + height: max-content; + margin: 0 auto; + } + + &__active { + transform: translateY(0%); + + @include OnDesktop { + transform: translateY(10%); + } + } + + &__container { + margin: 0 20px; + + @include OnTablet { + margin: 0 34px; + } + + @include OnDesktop { + margin: 0 93px; + } + } + + &__action { + display: flex; + justify-content: end; + + margin-right: 20px; + margin-bottom: 30px; + padding-top: 20px; + + @include OnTablet { + margin-right: 34px; + margin-bottom: 50px; + padding-top: 34px; + } + + @include OnDesktop { + margin-right: 28px; + margin-bottom: 25px; + padding-top: 28px; + } + } + + &__title { + margin-bottom: 30px; + + font-size: 36px; + font-weight: 900; + line-height: 130%; + color: #fff; + + @include OnDesktop { + margin-bottom: 50px; + } + + &-color { + font-weight: 400; + color: $c-contrast; + } + } + + &__text { + margin-bottom: 20px; + + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $c-text; + } + + &__grid { + @include OnTablet { + padding-bottom: 134px; + } + + @include OnDesktop { + padding-bottom: 82px; + } + } + + &__info, + &__contact { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + } + + &__info-link { + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $c-contrast; + } + + &__contact-link { + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $c-text; + } + + &__links { + margin-bottom: 30px; + + @include OnTablet { + margin-bottom: 0; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 00000000..1a1bbf3d --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,24 @@ +.icon { + width: 20px; + height: 20px; + + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + &__menu { + background-image: url('../images/menu.svg'); + } + + &__cross { + background-image: url('../images/cross.svg'); + } + + &__back { + background-image: url('../images/back.svg'); + } + + &__arrow { + background-image: url('../images/faq-arrow.svg'); + } +} diff --git a/src/styles/blocks/language.scss b/src/styles/blocks/language.scss new file mode 100644 index 00000000..3c838aa5 --- /dev/null +++ b/src/styles/blocks/language.scss @@ -0,0 +1,12 @@ +.language { + border: none; + border-radius: 4px; + color: $c-contrast; + background-color: transparent; +} + +.language__chooser { + border: none; + border-radius: 4px; + background-color: #191536; +} diff --git a/src/styles/blocks/link.scss b/src/styles/blocks/link.scss new file mode 100644 index 00000000..f6c32081 --- /dev/null +++ b/src/styles/blocks/link.scss @@ -0,0 +1,24 @@ +.link { + font-size: 16px; + font-weight: 500; + line-height: 150%; + color: $c-white; + text-decoration: none; + + transition: color $transition; + + &:hover { + color: $c-contrast; + } + + &__button { + transition: + color $transition, + background-color $transition; + + &:hover { + color: $c-contrast; + background-color: $c-white; + } + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 00000000..3e6cf66f --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,11 @@ +.logo { + text-decoration: none; + + &__img { + width: 76px; + transition: transform $transition; + &:hover { + transform: scale(1.2); + } + } +} diff --git a/src/styles/blocks/mobile-nav.scss b/src/styles/blocks/mobile-nav.scss new file mode 100644 index 00000000..09c5436a --- /dev/null +++ b/src/styles/blocks/mobile-nav.scss @@ -0,0 +1,109 @@ +.mobile { + &__link { + display: block; + font-size: 21px; + line-height: 49px; + } + + &__list-item { + padding-left: 22px; + transition: background-color $transition; + + @include OnTablet { + padding-left: 154px; + } + + &:hover { + background-color: #110e25; + } + } + + &__cross { + margin-top: 20px; + margin-right: 20px; + margin-bottom: 40px; + + @include OnTablet { + margin-top: 34px; + margin-right: 34px; + margin-bottom: 45px; + } + } + + &__back { + margin-top: 20px; + margin-bottom: 40px; + margin-left: 21px; + + @include OnTablet { + margin-top: 33px; + margin-bottom: 47px; + margin-left: 33px; + } + } + + &__nav { + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateX(0%); + + overflow-y: auto; + + height: 100vh; + + background-color: #191536; + + transition: transform $transition; + + @include OnTablet { + height: 570px; + } + + &--active { + transform: translateX(100%); + } + + &-actions { + display: flex; + justify-content: space-between; + } + + &-logo { + display: flex; + justify-content: center; + margin-left: 22px; + + @include OnTablet { + margin-left: 154px; + } + } + } + + &__language { + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translate(100%, -200%); + + height: 100vh; + + background-color: #191536; + + transition: transform ($transition * 2); + + @include OnTablet { + height: 600px; + } + + &:target { + transform: translate(100%, 0%); + } + + &-action { + display: flex; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 00000000..07224d1c --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,43 @@ +.nav { + $gap: 32px; + + display: none; + + &__list { + display: flex; + align-items: center; + padding-right: -($gap / 2); + } + + &__item { + &:last-child { + position: relative; + width: 200px; + height: 48px; + margin-left: ($gap / 2); + } + } + + &__link { + display: block; + padding: 0 ($gap / 2); + line-height: 48px; + + &--buy { + position: absolute; + inset: 0; + + display: flex; + align-items: center; + justify-content: center; + + border-radius: 4px; + + background-color: $c-contrast; + } + } + + @include OnDesktop { + display: block; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 00000000..00a9b488 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,138 @@ +.page { + scroll-behavior: smooth; + + &__body { + margin: 0; + font-family: Inter, sans-serif; + background-image: linear-gradient(100.83deg, #191536 0.67%, #000 100%); + } + + &__header { + margin-top: 20px; + + @include OnTablet { + margin-top: 30px; + } + + @include OnDesktop { + margin-top: 47px; + margin-bottom: 110px; + } + } + + &__mobile { + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + + transition: transform $transition; + + @include OnDesktop { + display: none; + } + + &:target { + transform: translateX(0%); + } + } + + &__section { + padding: 50px 0; + + @include OnTablet { + padding: 70px 0; + } + + @include OnDesktop { + padding: 100px 0; + } + + @include OnFullHd { + padding: 160px 0; + } + + &-title { + font-size: 21px; + font-weight: 900; + line-height: 25px; + color: $c-white; + + @include OnDesktop { + font-size: 36px; + line-height: 44px; + } + + &-colored { + font-weight: 400; + color: $c-contrast; + } + } + + &-subtitle { + font-size: 14px; + font-weight: 400; + line-height: 17px; + color: $c-contrast; + } + + &-text { + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $c-text; + } + } + + &__buy { + position: sticky; + bottom: 0; + + display: none; + + padding: 30px 20px; + + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0.21) 0%, + rgba(4, 4, 4, 0.59) 23.44%, + $c-background 100% + ); + + &--visible { + display: block; + + @include OnDesktop { + display: none; + } + } + + &--mobile { + display: block; + + max-width: 458px; + height: 40px; + margin: 0 auto; + border-radius: 4px; + + font-size: 14px; + font-weight: 500; + line-height: 40px; + color: $c-white; + text-align: center; + + background-color: $c-contrast; + } + } + + &__footer { + padding-top: 43px; + padding-bottom: 43px; + } + + &__stop-scroll { + overflow: hidden; + height: 100%; + } +} diff --git a/src/styles/blocks/player.scss b/src/styles/blocks/player.scss new file mode 100644 index 00000000..f83892df --- /dev/null +++ b/src/styles/blocks/player.scss @@ -0,0 +1,29 @@ +.player { + position: fixed; + z-index: 1; + top: 0; + right: 0; + left: 0; + transform: translateY(-200%); + + width: 876px; + height: 486px; + margin: 0 auto; + + transition: transform $transition; + + &__cross { + position: absolute; + top: 15px; + right: 15px; + } + + &__iframe { + width: 100%; + height: 100%; + } + + &__active { + transform: translateY(10%); + } +} diff --git a/src/styles/blocks/question.scss b/src/styles/blocks/question.scss new file mode 100644 index 00000000..85f06c56 --- /dev/null +++ b/src/styles/blocks/question.scss @@ -0,0 +1,87 @@ +.question { + height: max-content; + border: 1px solid #05c2df; + border-radius: 4px; + + &__container { + margin: 0 12px; + + @include OnTablet { + margin: 0 25px; + } + } + + &__action { + display: flex; + justify-content: space-between; + + width: 100%; + margin-bottom: 18px; + padding-top: 20px; + + @include OnDesktop { + padding-top: 18px; + } + } + + &__arrow { + transform: rotateZ(-90deg); + display: none; + transition: transform 0.4s; + + @include OnDesktop { + display: block; + } + + &--active { + transform: rotateZ(0deg); + } + } + + &__title { + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $c-contrast; + } + + &__answer { + margin-bottom: 10px; + + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $c-text; + + @include OnTablet { + margin-bottom: 15px; + } + + @include OnDesktop { + margin-bottom: 20px; + } + } + + &__time-updated { + margin-bottom: 12px; + + font-size: 12px; + font-weight: 400; + line-height: 150%; + color: $c-darkGrey; + + @include OnTablet { + margin-bottom: 23px; + } + } + + &__text { + overflow: hidden; + max-height: 0; + transition: max-height $transition; + + &--active { + max-height: 300px; + } + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 00000000..d0b1c285 --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,28 @@ +.slider { + overflow: hidden; + width: 700px; + + &__wrapper { + display: flex; + margin-bottom: 20px; + transition: transform $transition; + } + + &__buttons { + display: flex; + gap: 30px; + width: max-content; + border-bottom: 1px solid $c-background; + } + + &__button { + padding-bottom: 10px; + border-bottom: 1px solid transparent; + color: $c-white; + transition: border-color $transition; + + &:hover { + border-color: $c-contrast; + } + } +} diff --git a/src/styles/blocks/specs.scss b/src/styles/blocks/specs.scss new file mode 100644 index 00000000..9a9194f1 --- /dev/null +++ b/src/styles/blocks/specs.scss @@ -0,0 +1,164 @@ +.specs { + background-color: $c-background; + + &__header { + margin-bottom: 50px; + + @include OnDesktop { + margin-bottom: 0; + } + } + + &__content { + position: relative; + + height: 600px; + + background-image: url(../images/specs/side.png); + background-repeat: no-repeat; + background-position: 50%; + background-size: contain; + + @include OnDesktop { + background-image: url(../images/specs/side_short.png); + background-size: auto; + } + + @include OnDesign { + background-image: url(../images/specs/side_wide.png); + } + } + + &__name { + display: none; + + @include OnDesktop { + display: block; + + padding-bottom: 21px; + + font-size: 18px; + font-weight: 900; + line-height: 22px; + color: $c-white; + text-transform: uppercase; + } + } + + &__list { + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $c-text; + } + + &__1 { + display: none; + + @include OnDesktop { + display: flex; + justify-content: center; + margin-top: 110px; + margin-left: 40px; + } + + &--active { + position: absolute; + z-index: 1; + top: 15%; + left: 25%; + + display: block; + + padding: 10px; + border-radius: 4px; + + background-color: #191536; + } + } + + &__2 { + display: none; + + @include OnDesktop { + display: flex; + justify-content: center; + margin-top: 90px; + } + + &--active { + position: absolute; + z-index: 1; + top: 80%; + left: 20%; + + display: block; + + padding: 10px; + border-radius: 4px; + + background-color: #191536; + } + } + + &__3 { + display: none; + + @include OnDesktop { + display: flex; + justify-content: center; + margin-top: 100px; + white-space: nowrap; + } + + &--active { + position: absolute; + z-index: 1; + top: 60%; + left: 25%; + + display: block; + + padding: 10px; + border-radius: 4px; + + background-color: #191536; + } + } + + &__link { + position: absolute; + + display: inline-block; + + width: 62px; + padding: 0; + border: none; + border-radius: 50%; + + line-height: 62px; + color: $c-white; + text-align: center; + + background-color: $c-contrast; + + @include OnDesktop { + display: none; + } + + &-first { + top: 5%; + left: 25%; + } + + &-second { + top: 80%; + left: 10%; + } + + &-third { + top: 40%; + right: 10%; + } + } +} diff --git a/src/styles/blocks/using.scss b/src/styles/blocks/using.scss new file mode 100644 index 00000000..fbdb40ed --- /dev/null +++ b/src/styles/blocks/using.scss @@ -0,0 +1,84 @@ +.using { + background-color: $c-background; + + &__grid { + gap: 20px; + align-items: baseline; + } + + &__title { + margin-bottom: 12px; + + @include OnTablet { + margin-bottom: 12px; + text-align: center; + } + + @include OnDesktop { + margin-bottom: 16px; + } + } + + &__subtitle { + margin-bottom: 30px; + + @include OnTablet { + margin-bottom: 50px; + text-align: center; + } + + @include OnDesktop { + margin-bottom: 70px; + } + } +} + +.place { + cursor: pointer; + + &__photo { + grid-column: 2 / 4; + width: 100%; + transition: transform $transition; + } + + &:hover { + & .place__photo { + transform: scale(1.1); + } + } + &__photo--container { + display: none; + + @include OnTablet { + display: grid; + grid-template-columns: repeat(4, 1fr); + column-gap: 24px; + margin-bottom: 28px; + } + } + + &__title { + margin-bottom: 11px; + + font-size: 16px; + font-weight: 900; + line-height: 19px; + color: $c-white; + text-transform: uppercase; + + @include OnTablet { + margin-bottom: 20px; + text-align: center; + } + } + + &__description { + margin-bottom: 20px; + + @include OnTablet { + margin-bottom: 40px; + text-align: center; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d1..3b076ec3 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,6616 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@use 'utils' as *; +@use 'fonts'; +@use 'typography'; -body { - background: $c-gray; +.page { + overflow-x: hidden; + min-height: 100%; + background: $c-background; + + &__body { + min-width: 320px; + background: $c-background; + } + + &__body--locked { + overflow: hidden; + } +} + +.floating-buy { + position: fixed; + z-index: 40; + bottom: 16px; + left: 50%; + transform: translateX(-50%); + + width: 280px; + min-height: 32px; + padding: 7px 24px; + + font-size: 14px; + line-height: 18px; + + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); +} + +.container { + box-sizing: border-box; + width: min(100%, 1280px); + margin: 0 auto; + padding-inline: 20px; +} + +.button { + display: inline-flex; + align-items: center; + justify-content: center; + + min-height: 48px; + padding: 13px 24px; + border: 1px solid transparent; + border-radius: 4px; + + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: $c-white; + text-decoration: none; + + background: transparent; + + transition: + transform $transition-duration $transition-timing, + color $transition-duration $transition-timing, + background-color $transition-duration $transition-timing, + border-color $transition-duration $transition-timing, + box-shadow $transition-duration $transition-timing; + + &:disabled { + cursor: not-allowed; + opacity: 0.45; + } + + &:hover:not(:disabled) { + transform: translateY(-2px); + } + + &--accent { + color: $c-white; + background: $c-accent; + + &:hover:not(:disabled) { + background: #25d6f2; + } + } + + &--ghost { + border-color: $c-border-strong; + background: rgba(255, 255, 255, 0.03); + + &:hover:not(:disabled) { + border-color: $c-accent; + color: $c-accent; + background: rgba(5, 194, 223, 0.1); + } + } +} + +.icon-button { + display: inline-flex; + align-items: center; + justify-content: center; + + width: 45px; + height: 45px; + padding: 0; + border: 0; + border-radius: 4px; + + background: #2d2d2d; + + transition: + transform $transition-duration $transition-timing, + background-color $transition-duration $transition-timing; + + &:hover { + transform: translateY(-2px); + background: rgba(5, 194, 223, 0.2); + } + + &__icon { + width: 20px; + height: 20px; + + &--small { + width: 16px; + height: 16px; + } + } +} + +.logo { + --logo-width: 79px; + + display: inline-flex; + align-items: center; + + &__image { + width: var(--logo-width); + transition: transform $transition-duration $transition-timing; + } + + &:hover .logo__image { + transform: scale(1.05); + } +} + +.nav { + &__list { + display: flex; + flex-wrap: wrap; + gap: 18px 38px; + + margin: 0; + padding: 0; + + list-style: none; + } + + &__link { + position: relative; + + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: $c-white; + text-decoration: none; + + transition: color $transition-duration $transition-timing; + + &::after { + content: ''; + + position: absolute; + right: 0; + bottom: -8px; + left: 0; + transform-origin: center; + transform: scaleX(0); + + height: 2px; + border-radius: 999px; + + background: $c-accent; + + transition: transform $transition-duration $transition-timing; + } + + &:hover { + color: $c-accent; + } + + &:hover::after { + transform: scaleX(1); + } + } + + &--footer { + .nav__list { + gap: 14px 18px; + } + } +} + +.section-heading { + max-width: 640px; + margin-bottom: 42px; + + &--center { + margin-right: auto; + margin-left: auto; + text-align: center; + } + + &__eyebrow { + margin-bottom: 12px; + + font-size: 0.85rem; + font-weight: 500; + color: $c-accent; + text-transform: uppercase; + letter-spacing: 0.14em; + } + + &__title { + font-family: $font-heading; + font-size: clamp(2rem, 6vw, 4rem); + font-weight: 900; + line-height: 1.1; + color: $c-white; + text-transform: uppercase; + } + + &__accent { + color: $c-accent; + } + + &__text { + margin-top: 18px; + line-height: 1.75; + color: $c-text-muted; + } +} + +.header { + position: relative; + + overflow: hidden; + + box-sizing: border-box; + min-height: 740px; + padding: 24px 0 40px; + + background: linear-gradient(107.56deg, #191536 0%, #000 100%); + + &::before { + pointer-events: none; + content: ''; + + position: absolute; + inset: 0; + + background: + radial-gradient( + 64% 60% at 24% 6%, + rgba(25, 21, 54, 0.72) 0%, + rgba(25, 21, 54, 0) 100% + ), + radial-gradient( + 48% 54% at 74% 72%, + rgba(9, 7, 20, 0.78) 0%, + rgba(5, 4, 11, 0) 100% + ); + } + + &__container { + position: relative; + z-index: 1; + display: grid; + grid-template-rows: auto auto auto; + } + + &__top { + position: relative; + z-index: 3; + + display: flex; + gap: 18px; + align-items: center; + + margin-bottom: 48px; + } + + &__desktop { + display: none; + } + + &__menu-button { + margin-left: auto; + } + + &__hero { + position: relative; + display: grid; + gap: 32px; + } + + &__content { + position: relative; + z-index: 1; + max-width: 479px; + } + + &__title { + font-family: $font-heading; + font-size: clamp(2.55rem, 9vw, 46px); + font-weight: 900; + line-height: 1.3; + color: $c-white; + text-transform: uppercase; + } + + &__title-line { + display: block; + } + + &__title-accent { + display: block; + margin-top: 16px; + color: $c-accent; + } + + &__details { + display: grid; + gap: 24px; + margin-top: 19px; + } + + &__text { + max-width: 336px; + + font-size: 16px; + font-weight: 500; + line-height: 1.5; + color: $c-text-muted; + } + + &__price { + font-size: 18px; + font-weight: 500; + line-height: 1.22; + color: $c-white; + } + + &__visual { + pointer-events: none; + justify-self: center; + width: min(100%, 780px); + } + + &__image { + width: 100%; + } + + &__play { + position: relative; + + display: inline-flex; + gap: 18px; + align-items: center; + + width: 236px; + min-height: 48px; + padding: 0; + border: 0; + + color: $c-white; + text-align: left; + + background: transparent; + + transition: color $transition-duration $transition-timing; + + &::before, + &::after { + content: ''; + + position: absolute; + right: 0; + left: 74px; + + height: 1px; + + background: repeating-linear-gradient( + 90deg, + rgba(5, 194, 223, 0.45) 0 2px, + transparent 2px 10px + ); + } + + &::before { + top: 7px; + } + + &::after { + bottom: 7px; + } + + &:hover { + color: $c-accent; + } + } + + &__play-icon { + position: relative; + + display: inline-flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 48px; + height: 48px; + border: 2px solid $c-accent; + border-radius: 50%; + + box-shadow: 0 0 0 4px rgba(5, 194, 223, 0.12); + + &::before { + content: ''; + + position: absolute; + inset: 5px; + + border: 1px solid rgba(5, 194, 223, 0.65); + border-radius: 50%; + } + } + + &__play-triangle { + position: relative; + z-index: 1; + transform: translateX(2px); + + width: 0; + height: 0; + border-top: 9px solid transparent; + border-bottom: 9px solid transparent; + border-left: 14px solid $c-accent; + } + + &__play-label { + position: relative; + z-index: 1; + + font-size: 16px; + font-weight: 500; + line-height: 1.3; + } + + &__bottom { + display: grid; + gap: 20px; + margin-top: 32px; + } + + &__support { + display: flex; + flex-wrap: wrap; + gap: 18px 34px; + } + + &__support-link, + &__more-link { + display: inline-flex; + gap: 8px; + align-items: center; + + padding: 0; + border: 0; + + font-size: 16px; + font-weight: 500; + line-height: 1.5; + color: $c-white; + text-decoration: none; + + background: transparent; + + transition: color $transition-duration $transition-timing; + } + + &__more-link { + flex-direction: column; + gap: 8px; + align-items: center; + justify-self: start; + + color: $c-accent; + } + + &__support-link:hover { + color: $c-accent; + } + + &__more-link:hover { + color: $c-white; + } + + &__more-arrow, + &__language-arrow { + width: 0; + height: 0; + border-top: 6px solid currentColor; + border-right: 4.5px solid transparent; + border-left: 4.5px solid transparent; + } + + &__pager { + display: grid; + grid-template-columns: auto auto; + gap: 10px 72px; + justify-content: start; + + width: 207px; + } + + &__pager-item { + font-size: 16px; + font-weight: 500; + line-height: 1.5; + + &--active { + color: $c-white; + } + + &--muted { + color: $c-text-muted; + } + } + + &__pager-track { + position: relative; + + display: block; + grid-column: 1 / -1; + + width: 100%; + height: 1px; + + background: #212121; + } + + &__pager-progress { + position: absolute; + inset: 0 auto 0 0; + width: 69px; + background: $c-accent; + } + + &__mobile-buy { + width: 100%; + margin-top: 32px; + } + + &__buy-button { + position: relative; + z-index: 4; + width: 200px; + } + + &__language-button { + display: inline-flex; + gap: 8px; + align-items: center; + + padding: 0; + border: 0; + + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: $c-accent; + + background: transparent; + } +} + +.mobile-menu { + position: fixed; + z-index: 50; + inset: 0; + + display: grid; + justify-items: end; + + &__overlay { + position: absolute; + inset: 0; + border: 0; + background: rgba(5, 4, 11, 0.74); + } + + &__panel { + position: relative; + + display: flex; + flex-direction: column; + gap: 28px; + + width: min(100%, 360px); + height: 100%; + padding: 24px 20px 32px; + + background: $c-surface-strong; + box-shadow: -24px 0 60px rgba(0, 0, 0, 0.42); + } + + &__top { + display: flex; + gap: 16px; + align-items: center; + justify-content: space-between; + } + + &__nav { + flex: 1; + } + + &__list { + display: grid; + gap: 10px; + + margin: 0; + padding: 0; + + list-style: none; + } + + &__link, + &__button { + display: block; + + width: 100%; + padding: 16px 18px; + border: 0; + border-radius: $radius-s; + + font-size: 1.05rem; + color: $c-text; + text-align: left; + text-decoration: none; + + background: rgba(255, 255, 255, 0.03); + + transition: + transform $transition-duration $transition-timing, + color $transition-duration $transition-timing, + background-color $transition-duration $transition-timing; + + &:hover { + transform: translateX(6px); + color: $c-accent; + background: rgba(5, 194, 223, 0.08); + } + } + + &__buy { + width: 100%; + } +} + +.mobile-menu[hidden], +.modal[hidden] { + display: none; +} + +.about, +.tech, +.benefits, +.contact { + padding: 88px 0; +} + +.tech, +.contact { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent); +} + +.more { + min-height: 622px; + padding: 72px 0 88px; + background: $c-background; + + &__container { + display: flex; + flex-direction: column; + align-items: center; + } + + &__heading { + max-width: 386px; + text-align: center; + } + + &__title { + display: inline-flex; + flex-wrap: wrap; + gap: 10px; + align-items: baseline; + justify-content: center; + + font-family: $font-heading; + font-size: clamp(2.2rem, 6vw, 36px); + font-weight: 900; + line-height: 1.22; + color: $c-white; + text-transform: uppercase; + } + + &__title-accent { + color: $c-accent; + } + + &__subtitle { + max-width: 340px; + margin-top: 13px; + margin-inline: auto; + + font-size: 14px; + font-weight: 400; + line-height: 1.21; + color: $c-accent; + } + + &__grid { + display: grid; + gap: 20px; + width: 100%; + margin-top: 64px; + } +} + +.benefit-card { + display: grid; + align-content: start; + justify-items: center; + + padding: 0; + border: 0; + + text-align: center; + + background: transparent; + backdrop-filter: none; + box-shadow: none; + + transition: + transform $transition-duration $transition-timing, + color $transition-duration $transition-timing; + + &__icon-wrap { + display: grid; + place-items: center; + + width: 100%; + height: 112px; + margin-bottom: 34px; + } + + &__icon { + width: auto; + height: 80px; + transition: transform $transition-duration $transition-timing; + } + + &__title { + width: 100%; + margin-bottom: 16px; + + font-size: 18px; + font-weight: 900; + line-height: 1.22; + color: $c-white; + text-transform: uppercase; + } + + &__text { + width: 100%; + max-width: 340px; + + font-size: 16px; + line-height: 1.5; + color: $c-text-muted; + } + + &--compatible { + .benefit-card__icon { + width: 98px; + height: 81px; + } + + .benefit-card__title { + margin-bottom: 18px; + font-size: 16px; + line-height: 19px; + } + } + + &--control { + .benefit-card__icon { + width: 88px; + height: 80px; + } + } + + &--wireless { + .benefit-card__icon { + width: 111px; + height: 80px; + } + } + + &:hover { + transform: translateY(-4px); + } + + &:hover .benefit-card__icon { + transform: translateY(-4px); + } +} + +.feature-card { + display: grid; + place-items: center; + align-content: start; + + padding: 0; + border: 0; + + text-align: center; + + background: transparent; + backdrop-filter: none; + box-shadow: none; + + &__icon-wrap { + display: grid; + place-items: center; + + width: 100%; + height: 84px; + margin-bottom: 30px; + border-radius: 0; + + background: transparent; + } + + &__icon { + width: auto; + height: 84px; + transition: transform $transition-duration $transition-timing; + } + + &:hover { + transform: none; + border-color: transparent; + } + + &__title { + width: 100%; + margin-bottom: 18px; + + font-size: 18px; + font-weight: 900; + line-height: 1.22; + color: $c-white; + text-align: center; + text-transform: uppercase; + } + + &__text { + width: 100%; + max-width: 250px; + margin: 0 auto; + + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: $c-text-muted; + text-align: center; + } + + &--education { + .feature-card__icon { + width: 98px; + height: 81px; + } + + .feature-card__title { + font-size: 16px; + line-height: 1.19; + } + } + + &--real-estate { + .feature-card__icon { + width: 84px; + height: 84px; + } + } + + &--fitness { + .feature-card__icon { + width: 113px; + height: 83px; + } + } + + &--social { + .feature-card__icon { + width: 83px; + height: 83px; + } + } +} + +.about { + box-sizing: border-box; + background: linear-gradient(146.86deg, #191536 -0.5%, #000 99.5%); + + &__container { + position: relative; + } + + &__product, + &__company { + display: grid; + gap: 32px; + } + + &__visual-column { + display: grid; + gap: 12px; + } + + &__count { + font-size: 14px; + font-weight: 400; + line-height: 17px; + color: $c-accent; + } + + &__gallery { + display: grid; + gap: 12px; + } + + &__gallery-frame { + overflow: hidden; + aspect-ratio: 430 / 290; + width: 100%; + } + + &__gallery-image { + width: 100%; + height: 100%; + object-fit: cover; + } + + &__gallery-footer { + width: 207px; + } + + &__gallery-controls { + display: grid; + grid-template-columns: auto auto; + justify-content: space-between; + width: 207px; + } + + &__gallery-control { + font-size: 16px; + font-weight: 500; + line-height: 1.5; + + &--muted { + color: $c-text-muted; + } + + &--active { + color: $c-white; + } + } + + &__gallery-track { + position: relative; + + display: block; + + width: 207px; + height: 1px; + margin-top: 10px; + + background: #212121; + } + + &__gallery-progress { + position: absolute; + inset: 0 auto 0 0; + width: 69px; + background: $c-accent; + } + + &__product-title, + &__company-title { + font-family: $font-heading; + font-size: clamp(2rem, 6vw, 36px); + font-weight: 900; + line-height: 1.22; + color: $c-white; + text-transform: uppercase; + } + + &__product-accent, + &__company-accent { + color: $c-accent; + } + + &__product-text, + &__company-text { + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: $c-text-muted; + } + + &__product-text { + max-width: 332px; + margin-top: 30px; + } + + &__play { + position: relative; + + display: inline-flex; + gap: 18px; + align-items: center; + + width: 236px; + min-height: 48px; + margin-top: 30px; + padding: 0; + border: 0; + + color: $c-white; + text-align: left; + + background: transparent; + + transition: color $transition-duration $transition-timing; + + &::before, + &::after { + content: ''; + + position: absolute; + right: 0; + left: 74px; + + height: 1px; + + background: repeating-linear-gradient( + 90deg, + rgba(5, 194, 223, 0.45) 0 2px, + transparent 2px 10px + ); + } + + &::before { + top: 7px; + } + + &::after { + bottom: 7px; + } + + &:hover { + color: $c-accent; + } + } + + &__play-icon { + position: relative; + + display: inline-flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 48px; + height: 48px; + border: 2px solid $c-accent; + border-radius: 50%; + + box-shadow: 0 0 0 4px rgba(5, 194, 223, 0.12); + + &::before { + content: ''; + + position: absolute; + inset: 5px; + + border: 1px solid rgba(5, 194, 223, 0.65); + border-radius: 50%; + } + } + + &__play-triangle { + position: relative; + z-index: 1; + transform: translateX(2px); + + width: 0; + height: 0; + border-top: 9px solid transparent; + border-bottom: 9px solid transparent; + border-left: 14px solid $c-accent; + } + + &__play-label { + position: relative; + z-index: 1; + + font-size: 16px; + font-weight: 500; + line-height: 1.3; + } + + &__hello { + font-size: 14px; + font-weight: 400; + line-height: 17px; + color: $c-accent; + } + + &__company-text { + max-width: 429px; + } + + &__decor { + display: none; + } + + &__decor-text { + transform: rotate(180deg); + + flex-shrink: 0; + + writing-mode: vertical-rl; + font-family: $font-heading; + font-size: 64px; + font-weight: 900; + line-height: 1.3; + color: transparent; + text-transform: uppercase; + + -webkit-text-stroke: 1px rgba(5, 194, 223, 0.12); + + &--strong { + -webkit-text-stroke-color: rgba(5, 194, 223, 1); + } + + &--mid { + -webkit-text-stroke-color: rgba(5, 194, 223, 0.5); + } + + &--soft { + -webkit-text-stroke-color: rgba(5, 194, 223, 0.2); + } + + &--faint { + -webkit-text-stroke-color: rgba(5, 194, 223, 0.1); + } + + &--ghost { + -webkit-text-stroke-color: rgba(5, 194, 223, 0.05); + } + } +} + +.tech { + background: #05040b; + + &__container { + display: grid; + gap: 32px; + padding-top: 72px; + padding-bottom: 72px; + } + + &__title { + order: 0; + + margin: 0; + + font-size: clamp(2.3rem, 5vw, 2.75rem); + font-weight: 900; + line-height: 1.22; + color: $c-white; + text-transform: uppercase; + } + + &__title-accent { + color: $c-accent; + } + + &__spec { + order: 2; + max-width: 520px; + } + + &__spec-title { + margin: 0; + + font-size: 18px; + font-weight: 900; + line-height: 22px; + color: $c-white; + text-transform: uppercase; + } + + &__spec-text { + margin-top: 20px; + font-size: 16px; + line-height: 1.5; + color: $c-text-muted; + } + + &__visual { + position: relative; + + order: 1; + + width: min(100%, 600px); + height: 360px; + margin: 0 auto; + } + + &__image { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + width: min(100%, 320px); + + object-fit: contain; + } + + &__connector, + &__arc { + display: none; + } +} + +.benefits { + background: linear-gradient(108.62deg, #191536 0%, #000 77.34%); + + &__container { + display: grid; + justify-items: center; + } + + &__title { + margin: 0; + + font-size: clamp(2.25rem, 5vw, 2.75rem); + font-weight: 900; + line-height: 1.22; + color: $c-white; + text-align: center; + text-transform: uppercase; + } + + &__title-accent { + color: $c-accent; + } + + &__grid { + display: grid; + gap: 40px; + width: 100%; + margin-top: 56px; + } + + &__action { + display: flex; + justify-content: center; + width: 100%; + margin-top: 56px; + } + + &__button { + width: 200px; + min-height: 48px; + padding-inline: 24px; + } +} + +.contact { + background: #05040b; + + &__container { + position: relative; + display: grid; + } + + &__layout { + display: grid; + gap: 40px; + } + + &__eyebrow { + margin: 0 0 13px; + + font-size: 14px; + font-weight: 400; + line-height: 17px; + color: $c-accent; + } + + &__title { + display: flex; + flex-wrap: wrap; + gap: 0 10px; + + margin: 0; + + font-family: $font-heading; + font-size: clamp(2.2rem, 7vw, 36px); + font-weight: 900; + line-height: 1.22; + color: $c-white; + text-transform: uppercase; + } + + &__title-accent { + color: $c-accent; + } + + &__text { + max-width: 338px; + margin-top: 26px; + + font-size: 16px; + line-height: 1.5; + color: $c-text-muted; + } + + &__details { + display: grid; + gap: 11px; + margin-top: 76px; + } + + &__detail { + font-size: 16px; + font-weight: 400; + line-height: 19px; + color: $c-text-muted; + text-decoration: none; + + transition: color $transition-duration $transition-timing; + + &:hover { + color: $c-accent; + } + } + + &__form { + width: 100%; + min-width: 0; + max-width: 521px; + padding: 0; + border: 0; + + background: transparent; + backdrop-filter: none; + box-shadow: none; + } + + &__submit { + width: 200px; + margin-top: 90px; + } + + &__to-top { + display: inline-flex; + align-items: center; + justify-content: center; + justify-self: end; + + width: 74px; + height: 74px; + margin-top: 40px; + border: 1px solid $c-accent; + border-radius: 50%; + + background: transparent; + + transition: + transform $transition-duration $transition-timing, + background-color $transition-duration $transition-timing; + + &:hover { + transform: translateY(-3px); + background: rgba(5, 194, 223, 0.08); + } + } + + &__to-top-icon { + width: 16px; + height: 11px; + } +} + +.form-field { + display: grid; + gap: 8px; + + &:not(:last-child) { + margin-bottom: 18px; + } + + &__label { + font-size: 0.95rem; + font-weight: 500; + color: $c-text; + } + + &__input { + width: 100%; + min-width: 0; + padding: 16px 18px; + border: 1px solid $c-border; + border-radius: $radius-xs; + + color: $c-white; + + background: rgba(255, 255, 255, 0.03); + + transition: + border-color $transition-duration $transition-timing, + box-shadow $transition-duration $transition-timing, + background-color $transition-duration $transition-timing; + + &::placeholder { + color: $c-text-subtle; + } + + &:hover { + border-color: rgba(255, 255, 255, 0.2); + } + + &:focus { + border-color: $c-accent; + background: rgba(5, 194, 223, 0.04); + outline: none; + box-shadow: 0 0 0 4px rgba(5, 194, 223, 0.14); + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + border: 1px solid $c-border-strong; + + -webkit-box-shadow: 0 0 0 1000px rgba(9, 13, 28, 1) inset; + caret-color: $c-white; + + transition: background-color 9999s ease-out 0s; + + -webkit-text-fill-color: $c-white; + } + + &:invalid:not(:placeholder-shown) { + border-color: $c-danger; + } + + &--textarea { + resize: vertical; + min-height: 150px; + } + + &--select { + appearance: none; + background-image: + linear-gradient(45deg, transparent 50%, $c-accent 50%), + linear-gradient(135deg, $c-accent 50%, transparent 50%); + background-repeat: no-repeat; + background-position: + calc(100% - 22px) calc(50% - 4px), + calc(100% - 16px) calc(50% - 4px); + background-size: 6px 6px; + } + } + + &--compact { + margin-bottom: 0; + } + + &--full { + @include on-tablet { + grid-column: 1 / -1; + } + } +} + +.contact__field { + gap: 0; + + &:not(:last-of-type) { + margin-bottom: 24px; + } +} + +.contact__field-label { + margin-bottom: 18px; + + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: $c-text-muted; +} + +.contact__input { + padding: 0 0 14px; + border: 0; + border-bottom: 1px solid #2f2f2f; + border-radius: 0; + + line-height: 1.5; + color: $c-white; + + background: transparent; + + &::placeholder { + color: transparent; + } + + &:hover { + border-color: rgba(255, 255, 255, 0.2); + background: transparent; + } + + &:focus { + border-color: $c-accent; + background: transparent; + box-shadow: none; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + border: 0; + border-bottom: 1px solid $c-accent; + -webkit-box-shadow: 0 0 0 1000px rgba(5, 4, 11, 1) inset; + } + + &:invalid:not(:placeholder-shown) { + border-color: $c-danger; + } + + &--textarea { + resize: none; + min-height: 53px; + padding-bottom: 12px; + } +} + +.footer { + background: #000; + + &__container { + display: grid; + gap: 20px; + place-items: center; + min-height: 100px; + } + + &__contacts { + display: none; + } + + &__contact { + color: $c-text-muted; + text-decoration: none; + transition: color $transition-duration $transition-timing; + + &:hover { + color: $c-accent; + } + } + + &__socials { + display: flex; + gap: 16px; + align-items: center; + } + + &__social-link { + display: inline-flex; + align-items: center; + justify-content: center; + transition: + transform $transition-duration $transition-timing, + opacity $transition-duration $transition-timing; + + &:hover { + transform: translateY(-2px); + opacity: 0.72; + } + } + + &__social-icon { + display: block; + width: auto; + height: 18px; + } + + &__logo { + --logo-width: 72px; + + justify-self: start; + } + + &__nav { + justify-self: center; + } + + .nav__list { + gap: 16px 28px; + } + + .nav__link { + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #f2f2f2; + + &::after { + display: none; + } + + &:hover { + color: $c-accent; + } + } +} + +.modal { + --modal-space: clamp(12px, 3.5vw, 24px); + + position: fixed; + z-index: 70; + inset: 0; + + overflow-y: auto; + overscroll-behavior: contain; + display: grid; + place-items: center; + + padding: var(--modal-space); + + &__backdrop { + position: absolute; + inset: 0; + border: 0; + background: rgba(5, 4, 11, 0.84); + } + + &__dialog { + @extend %card-surface; + + scrollbar-gutter: stable; + + position: relative; + z-index: 1; + + overflow: auto; + + box-sizing: border-box; + width: min(100%, 1120px); + max-width: calc(100vw - (var(--modal-space) * 2)); + max-height: calc(100vh - (var(--modal-space) * 2)); + padding: clamp(18px, 3vw, 24px); + border-radius: clamp(20px, 3vw, 32px); + } + + &__close { + position: absolute; + top: clamp(12px, 2.5vw, 20px); + right: clamp(12px, 2.5vw, 20px); + } +} + +.modal[data-modal='faq'], +.modal[data-modal='help'] { + place-items: start center; + padding-top: clamp(24px, 9vh, 134px); + padding-bottom: clamp(24px, 5vh, 56px); + + .modal__backdrop { + background: rgba(0, 0, 0, 0.7); + } +} + +.video-modal { + width: min(100%, 1120px); + + &__title { + @extend %heading-quantum; + + margin-bottom: 20px; + padding-right: 56px; + font-size: clamp(1.5rem, 5vw, 2.6rem); + color: $c-white; + } + + &__frame { + overflow: hidden; + border-radius: clamp(16px, 3vw, 24px); + } + + &__iframe { + display: block; + aspect-ratio: 16 / 9; + width: 100%; + border: 0; + } +} + +.faq-modal, +.help-modal { + width: min(100%, 960px); + + &__title { + @extend %heading-quantum; + + max-width: 14ch; + margin-bottom: 28px; + padding-right: 56px; + + font-size: clamp(2rem, 6vw, 3.5rem); + line-height: 1; + color: $c-white; + } + + &__title-accent { + color: $c-accent; + } +} + +.faq-modal { + width: min(100%, 880px); + min-height: min(854px, calc(100vh - (var(--modal-space) * 2))); + padding: clamp(28px, 4vw, 54px) clamp(20px, 5vw, 90px) clamp(30px, 4vw, 42px); + border: 0; + border-radius: 4px; + + background: #191536; + backdrop-filter: none; + box-shadow: none; + + &__close { + top: clamp(14px, 2vw, 18px); + right: clamp(14px, 2vw, 18px); + + width: 24px; + height: 24px; + padding: 0; + border: 0; + border-radius: 0; + + background: transparent; + box-shadow: none; + + &:hover { + transform: none; + opacity: 0.75; + background: transparent; + } + + .icon-button__icon--small { + width: 17px; + height: 17px; + } + } + + &__title { + max-width: 520px; + margin-bottom: 46px; + padding-right: 56px; + + font-family: $font-heading; + font-size: clamp(2.25rem, 5vw, 3rem); + font-weight: 900; + line-height: 1.3; + text-transform: uppercase; + letter-spacing: 0; + } + + &__title-accent { + display: block; + color: $c-accent; + } + + &__list { + display: grid; + gap: 13px; + width: min(100%, 700px); + margin-inline: auto; + } + + &__question { + cursor: pointer; + + position: relative; + + display: block; + + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: $c-accent; + list-style: none; + + &::-webkit-details-marker { + display: none; + } + + &::after { + content: ''; + + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%) rotate(90deg); + + width: 9px; + height: 5px; + + background: url('../images/faq-arrow.svg') center / contain no-repeat; + + transition: transform $transition-duration $transition-timing; + } + } + + &__item { + padding: 18px 28px; + border: 1px solid $c-accent; + border-radius: 4px; + background: transparent; + + &[open] { + padding-top: 17px; + padding-bottom: 20px; + } + + &[open] .faq-modal__question::after { + transform: translateY(-50%) rotate(-180deg); + } + } + + &__answer { + margin-top: 18px; + font-size: 16px; + line-height: 1.5; + color: $c-text-muted; + } + + &__date { + margin-top: 28px; + font-size: 14px; + line-height: 1.5; + color: #545454; + } + + &__more { + display: grid; + gap: 8px; + justify-items: center; + margin-top: 53px; + } + + &__more-text { + font-size: 16px; + font-weight: 500; + line-height: 1.5; + color: $c-accent; + } + + &__more-arrow { + width: 9px; + height: 5px; + background: url('../images/faq-arrow.svg') center / contain no-repeat; + } +} + +.help-modal { + width: min(100%, 880px); + min-height: min(550px, calc(100vh - (var(--modal-space) * 2))); + padding: clamp(28px, 4vw, 58px) clamp(20px, 5vw, 90px); + border: 0; + border-radius: 4px; + + background: #191536; + backdrop-filter: none; + box-shadow: none; + + &__close { + top: clamp(14px, 2vw, 18px); + right: clamp(14px, 2vw, 18px); + + width: 24px; + height: 24px; + padding: 0; + border: 0; + border-radius: 0; + + background: transparent; + box-shadow: none; + + &:hover { + transform: none; + opacity: 0.75; + background: transparent; + } + + .icon-button__icon--small { + width: 17px; + height: 17px; + } + } + + &__title { + max-width: 720px; + margin-bottom: 72px; + padding-right: 56px; + + font-family: $font-heading; + font-size: clamp(2.25rem, 5vw, 3rem); + font-weight: 900; + line-height: 1.3; + text-transform: uppercase; + letter-spacing: 0; + } + + &__title-accent { + color: $c-accent; + } + + &__content { + width: min(100%, 702px); + } + + &__text { + font-size: 16px; + line-height: 1.5; + color: $c-text-muted; + + &:not(:last-child) { + margin-bottom: 28px; + } + } + + &__inline-link { + cursor: pointer; + + display: inline; + + padding: 0; + border: 0; + + font: inherit; + color: $c-accent; + text-decoration: none; + + background: transparent; + + transition: opacity $transition-duration $transition-timing; + + &:hover { + opacity: 0.75; + } + } + + &__grid { + display: grid; + gap: 14px 64px; + width: min(100%, 660px); + margin-top: 48px; + } + + &__resources, + &__contacts { + display: grid; + gap: 26px; + align-content: start; + } + + &__resource, + &__contact { + width: fit-content; + + font-size: 16px; + line-height: 1.5; + text-decoration: none; + + transition: color $transition-duration $transition-timing; + } + + &__resource { + color: $c-accent; + + &:hover { + color: rgba(5, 194, 223, 0.78); + } + } + + &__contact { + color: $c-text-muted; + + &:hover { + color: $c-accent; + } + } +} + +.order { + position: relative; + + width: min(100%, 1280px); + min-height: min(720px, calc(100vh - (var(--modal-space) * 2))); + padding: clamp(28px, 4vw, 56px) clamp(24px, 5vw, 40px) clamp(32px, 6vw, 48px); + border: 0; + + background: linear-gradient(107.56deg, #191536 0%, #000 100%); + box-shadow: 0 36px 90px rgba(0, 0, 0, 0.45); + + &__sr-title { + position: absolute; + + overflow: hidden; + + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + + white-space: nowrap; + + clip: rect(0, 0, 0, 0); + } + + &__logo { + --logo-width: 78px; + } + + &__close { + position: absolute; + z-index: 2; + top: clamp(16px, 2vw, 24px); + right: clamp(16px, 2vw, 24px); + + width: 40px; + height: 40px; + + background: rgba(25, 21, 54, 0.8); + } + + &__header { + position: relative; + + display: grid; + grid-template-columns: auto 1fr; + gap: 24px; + align-items: start; + + margin-bottom: 40px; + } + + &__indicators { + display: flex; + flex-wrap: nowrap; + gap: 16px 78px; + min-width: 0; + } + + &__indicator { + position: relative; + + padding: 0 0 12px; + border: 0; + + font-size: 14px; + font-weight: 500; + line-height: 1.3; + color: #545454; + + background: transparent; + + transition: + color $transition-duration $transition-timing, + opacity $transition-duration $transition-timing; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + + width: 4px; + height: 4px; + border-radius: 50%; + + background: transparent; + + transition: background-color $transition-duration $transition-timing; + } + + &--active { + color: $c-accent; + } + + &--active::after { + background: $c-accent; + } + + &--done { + color: $c-white; + } + } + + &__body { + display: grid; + gap: 40px; + min-width: 0; + } + + &__steps { + min-width: 0; + } + + &__summary { + min-width: 0; + padding: 0; + border: 0; + border-radius: 0; + + background: none; + backdrop-filter: none; + box-shadow: none; + } + + &__visual { + width: min(100%, 701px); + margin-inline: auto; + } + + &__visual-image { + display: block; + + aspect-ratio: 701 / 279; + width: 100%; + + object-fit: cover; + object-position: center; + } + + &__summary-footer { + display: grid; + grid-template-columns: repeat(2, minmax(0, max-content)); + gap: 24px 40px; + align-items: end; + + margin-top: 32px; + } + + &__summary-control { + display: grid; + gap: 16px; + } + + &__summary-label { + font-size: 16px; + font-weight: 400; + line-height: 1.3; + color: $c-text-subtle; + } + + &__summary-select { + width: 90px; + height: 47px; + padding: 0 34px 0 24px; + border: 0; + border-radius: 4px; + + font-size: 20px; + line-height: 1.3; + color: $c-white; + text-align: center; + text-align-last: center; + + appearance: none; + background-color: #191536; + background-image: + linear-gradient(45deg, transparent 50%, $c-accent 50%), + linear-gradient(135deg, $c-accent 50%, transparent 50%); + background-repeat: no-repeat; + background-position: + calc(100% - 20px) calc(50% - 3px), + calc(100% - 14px) calc(50% - 3px); + background-size: 6px 6px; + + &:focus { + outline: 1px solid rgba(5, 194, 223, 0.45); + box-shadow: 0 0 0 4px rgba(5, 194, 223, 0.12); + } + } + + &__price-value { + font-size: clamp(2rem, 5vw, 2.25rem); + font-weight: 500; + line-height: 1.22; + color: $c-accent; + } + + &__step { + display: none; + + &--active { + display: block; + } + } + + &__form { + @extend %card-surface; + + min-width: 0; + padding: clamp(18px, 3vw, 24px); + border-radius: clamp(18px, 3vw, 24px); + } + + &__form--place { + padding: 0; + border: 0; + border-radius: 0; + + background: none; + backdrop-filter: none; + box-shadow: none; + } + + &__form--pay { + width: 100%; + padding: 0; + border: 0; + border-radius: 0; + + background: none; + backdrop-filter: none; + box-shadow: none; + } + + &__grid { + display: grid; + gap: 18px; + } + + &__place-grid { + display: grid; + gap: 32px 20px; + } + + &__field { + display: grid; + gap: 12px; + min-width: 0; + } + + &__field-label { + font-size: 14px; + font-weight: 400; + line-height: 1.3; + color: $c-text-muted; + } + + &__field-input { + width: 100%; + min-width: 0; + + font-size: 16px; + line-height: 1.3; + color: $c-white; + + transition: + border-color $transition-duration $transition-timing, + box-shadow $transition-duration $transition-timing, + background-color $transition-duration $transition-timing; + + &::placeholder { + color: transparent; + } + + &:focus { + outline: none; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + caret-color: $c-white; + transition: background-color 9999s ease-out 0s; + + -webkit-text-fill-color: $c-white; + } + + &:invalid:not(:placeholder-shown) { + border-color: $c-danger; + } + + &--line { + padding: 0 0 14px; + border: 0; + border-bottom: 1px solid #2f2f2f; + border-radius: 0; + + background: transparent; + + &:hover { + border-color: rgba(255, 255, 255, 0.22); + } + + &:focus { + border-color: $c-accent; + box-shadow: none; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + border-bottom: 1px solid $c-accent; + -webkit-box-shadow: 0 0 0 1000px rgba(25, 21, 54, 0) inset; + } + } + + &--panel { + height: 47px; + padding: 0 44px 0 24px; + border: 0; + border-radius: 4px; + + background: #191536; + + &:hover { + background: rgba(25, 21, 54, 0.92); + } + + &:focus { + box-shadow: 0 0 0 4px rgba(5, 194, 223, 0.12); + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px rgba(25, 21, 54, 1) inset; + } + } + + &--select { + appearance: none; + background-image: + linear-gradient(45deg, transparent 50%, $c-accent 50%), + linear-gradient(135deg, $c-accent 50%, transparent 50%); + background-repeat: no-repeat; + background-position: + calc(100% - 24px) calc(50% - 4px), + calc(100% - 18px) calc(50% - 4px); + background-size: 6px 6px; + } + } + + &__actions { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 20px; + } + + &__actions--place { + margin-top: 40px; + } + + &__purchase { + min-width: 199px; + } + + &__pay-group { + display: grid; + gap: 18px; + min-width: 0; + + &--full { + width: 100%; + } + + &--cvv { + width: 70px; + } + } + + &__pay-label { + font-size: 14px; + font-weight: 400; + line-height: 1.3; + color: $c-text-muted; + + &--active { + color: $c-accent; + } + } + + &__card-row { + display: flex; + flex-wrap: wrap; + gap: 18px 20px; + align-items: end; + } + + &__pay-input { + min-width: 0; + border: 0; + + font-size: 20px; + font-weight: 400; + line-height: 1.3; + color: $c-white; + + background: transparent; + + transition: + border-color $transition-duration $transition-timing, + box-shadow $transition-duration $transition-timing, + color $transition-duration $transition-timing; + + &::placeholder { + color: #2f2f2f; + opacity: 1; + } + + &:focus { + border-color: $c-accent; + outline: none; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px rgba(25, 21, 54, 0) inset; + caret-color: $c-white; + transition: background-color 9999s ease-out 0s; + + -webkit-text-fill-color: $c-white; + } + + &:invalid:not(:placeholder-shown) { + border-color: $c-danger; + } + + &--card, + &--line { + padding: 0 0 12px; + border-bottom: 1px solid #2f2f2f; + border-radius: 0; + } + + &--card { + width: 70px; + letter-spacing: 0.2em; + + &:focus { + box-shadow: none; + } + } + + &--card-active { + border-bottom-color: $c-accent; + + &::placeholder { + color: $c-white; + } + } + + &--line { + width: 100%; + + &:hover { + border-bottom-color: rgba(255, 255, 255, 0.22); + } + } + + &--meta { + width: 90px; + font-size: 20px; + } + + &--cvv { + width: 49px; + letter-spacing: 0.2em; + } + } + + &__card-brand { + display: grid; + place-items: center; + + width: 86px; + height: 54px; + margin-left: auto; + border-radius: 4px; + + font-size: 1.9rem; + font-weight: 900; + font-style: italic; + line-height: 1; + color: #0066b2; + letter-spacing: -0.06em; + + background: #fff; + } + + &__pay-meta { + display: grid; + gap: 32px 20px; + margin-top: 70px; + } + + &__actions--pay { + margin-top: 84px; + } + + &__complete { + @extend %card-surface; + + display: grid; + gap: 18px; + place-items: center; + + min-height: 320px; + padding: clamp(24px, 4vw, 32px); + border-radius: clamp(18px, 3vw, 24px); + + text-align: center; + } + + &__complete-title { + @extend %heading-quantum; + + max-width: 10ch; + font-size: clamp(2rem, 5vw, 3.4rem); + line-height: 1; + color: $c-white; + } + + &__complete-accent { + color: $c-accent; + } + + &__complete-text { + max-width: 36ch; + line-height: 1.8; + color: $c-text-muted; + } + + &__complete-button { + min-width: 218px; + } +} + +.order[data-order-current-step='3'] { + .order__summary { + display: none; + } + + .order__body { + display: block; + } + + .order__steps { + width: 100%; + } + + .order__indicator--done { + color: #545454; + } + + .order__complete { + gap: 30px; + align-content: start; + justify-items: center; + + min-height: 0; + padding: 38px 0 0; + border: 0; + border-radius: 0; + + background: none; + backdrop-filter: none; + box-shadow: none; + } + + .order__complete-title { + max-width: 707px; + + font-size: clamp(2.4rem, 5vw, 2.88rem); + font-weight: 900; + line-height: 1.3; + text-align: center; + text-transform: uppercase; + letter-spacing: 0; + } + + .order__complete-text { + max-width: 880px; + + font-size: 18px; + line-height: 1.3; + color: $c-white; + text-align: center; + } + + .order__complete-button { + width: 218px; + margin-top: 20px; + } +} + +@media (max-width: 767px) { + .modal { + place-items: center; + } + + .video-modal__title, + .faq-modal__title, + .help-modal__title { + padding-right: 48px; + } + + .order { + &__header { + gap: 14px; + margin-bottom: 20px; + padding-right: 48px; + } + + &__indicators { + gap: 12px 20px; + justify-content: flex-start; + width: 100%; + } + + &__indicator { + padding-bottom: 10px; + } + + &__actions > * { + flex: 1 1 100%; + } + + &__card-row { + gap: 14px; + } + + &__card-brand { + margin-left: 0; + } + + &__pay-meta { + margin-top: 40px; + } + } + + .help-modal { + &__title { + margin-bottom: 52px; + } + + &__grid { + margin-top: 36px; + } + } + + .order[data-order-current-step='3'] { + .order__complete { + gap: 20px; + padding-top: 12px; + } + + .order__complete-text { + font-size: 16px; + } + } +} + +@media (max-width: 639px) { + :root { + --phone-copy-width: min(320px, 100%); + --phone-modal-width: min(var(--phone-copy-width), calc(100vw - 40px)); + } + + .floating-buy { + display: none !important; + } + + p:not(.header__price) { + width: var(--phone-copy-width); + max-width: none; + } + + .header { + min-height: 568px; + padding: 18px 0 0; + + &__container { + min-height: 568px; + } + + &__top { + margin-bottom: 6px; + } + + &__logo { + --logo-width: 58px; + } + + &__menu-button { + width: 20px; + height: 20px; + padding: 0; + border-radius: 0; + + background: transparent; + + &:hover { + transform: none; + background: transparent; + } + + .icon-button__icon { + width: 20px; + height: auto; + } + } + + &__hero { + display: flex; + flex-direction: column; + gap: 0; + align-items: flex-start; + } + + &__visual { + overflow: hidden; + order: -1; + + width: calc(100% + 40px); + height: 172px; + margin-right: -20px; + margin-left: -20px; + } + + &__image { + display: block; + + width: 100%; + height: 172px; + + object-fit: cover; + object-position: center top; + } + + &__content { + width: var(--phone-copy-width); + max-width: none; + } + + &__title { + width: var(--phone-copy-width); + font-size: 26px; + line-height: 1.31; + } + + &__title-accent { + margin-top: 0; + } + + &__details { + gap: 0; + margin-top: 17px; + } + + &__text { + max-width: none; + margin-bottom: 8px; + } + + &__price { + justify-self: center; + width: 100%; + margin-bottom: 25px; + text-align: center; + } + + &__play { + width: 209px; + margin-left: 12px; + + &::before, + &::after { + left: 72px; + height: 2px; + background: repeating-linear-gradient( + 90deg, + rgba(5, 194, 223, 0.45) 0 2px, + transparent 2px 8px + ); + } + + &::before { + top: 1px; + } + + &::after { + bottom: 1px; + } + } + + &__play-icon { + width: 54px; + height: 54px; + margin-block: -9px; + box-shadow: none; + + &::before { + inset: 6px; + border-color: $c-accent; + } + + &::after { + content: ''; + + position: absolute; + inset: -10px; + transform: rotate(15deg); + + border: 3px solid rgba(5, 194, 223, 0.45); + border-right-color: transparent; + border-radius: 50%; + } + } + + &__play-triangle { + border-top-width: 10px; + border-bottom-width: 10px; + border-left-width: 17px; + } + + &__play-label { + flex: 1; + font-size: 16px; + line-height: 21px; + text-align: center; + } + + &__bottom { + display: none; + } + + &__mobile-buy { + position: relative; + z-index: 3; + + box-sizing: border-box; + width: var(--phone-copy-width); + max-width: none; + min-height: 40px; + margin-top: 31px; + + font-size: 14px; + line-height: 1.3; + + box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.68); + + &--floating { + position: fixed; + z-index: 69; + right: 20px; + bottom: 16px; + left: 20px; + + width: auto; + margin-top: 0; + } + } + } + + .mobile-menu { + justify-items: stretch; + + &__overlay { + background: rgba(0, 0, 0, 0.7); + } + + &__panel { + gap: 0; + + box-sizing: border-box; + width: 100%; + max-width: none; + min-height: 100dvh; + padding: 75px 0 0; + + background: #191536; + box-shadow: none; + } + + &__top { + position: absolute; + top: 0; + right: 0; + left: 0; + + justify-content: flex-end; + + height: 75px; + padding: 20px 20px 0; + } + + &[data-view='language'] &__top { + justify-content: flex-start; + } + + &__top .logo { + display: none; + } + + &__top .icon-button { + --mobile-menu-icon-width: 17px; + --mobile-menu-icon-height: 17px; + + width: 17px; + height: 17px; + padding: 0; + border-radius: 0; + + background: transparent; + + &:hover { + transform: none; + background: transparent; + } + + .icon-button__icon { + width: var(--mobile-menu-icon-width); + height: var(--mobile-menu-icon-height); + } + } + + &__top [data-menu-language-back] { + display: none; + } + + &__top [data-menu-panel-close] { + display: inline-flex; + } + + &[data-view='language'] &__top [data-menu-language-back] { + display: inline-flex; + } + + &[data-view='language'] &__top [data-menu-panel-close] { + display: none; + } + + &__back { + --mobile-menu-icon-width: 8.5px; + --mobile-menu-icon-height: 17px; + } + + &__nav { + flex: none; + } + + &__language-view { + flex: none; + } + + &__list { + display: grid; + grid-auto-rows: 49px; + gap: 0; + align-content: start; + } + + &__item { + height: 49px; + min-height: 0; + } + + &__link, + &__button { + display: flex; + align-items: center; + + box-sizing: border-box; + width: 100%; + height: 49px; + min-height: 0; + padding: 0 20px; + border-radius: 0; + + font-size: 21px; + font-weight: 500; + line-height: 1.3; + color: $c-white; + + background: transparent; + + &:hover { + transform: none; + color: $c-accent; + background: transparent; + } + + &--active { + color: $c-accent; + background: #110e25; + } + } + + &__buy { + display: none; + } + } + + .more { + min-height: 586px; + margin-top: -14px; + padding: 50px 0; + + &__container { + align-items: flex-start; + } + + &__heading { + width: var(--phone-copy-width); + max-width: var(--phone-copy-width); + text-align: left; + } + + &__title { + display: flex; + flex-wrap: nowrap; + gap: 4px; + justify-content: flex-start; + + width: var(--phone-copy-width); + + font-size: 21px; + line-height: 25px; + white-space: nowrap; + } + + &__subtitle { + max-width: none; + margin-top: 12px; + margin-inline: 0; + + font-size: 11px; + line-height: 15px; + white-space: nowrap; + } + + &__grid { + margin-top: 30px; + } + } + + .about { + min-height: 1005px; + padding: 50px 0 40px; + + &__product { + display: flex; + flex-direction: column; + gap: 0; + } + + &__product-copy { + display: contents; + } + + &__product-title { + display: flex; + flex-wrap: nowrap; + gap: 8px; + align-items: flex-end; + order: 1; + + width: var(--phone-copy-width); + margin-bottom: 20px; + + font-size: 21px; + line-height: 25px; + white-space: nowrap; + } + + &__visual-column { + gap: 0; + order: 2; + } + + &__count { + display: none; + } + + &__gallery { + gap: 0; + } + + &__gallery-frame { + aspect-ratio: 280 / 189; + width: min(320px, 100%); + margin-inline: auto; + } + + &__gallery-footer { + width: 44px; + margin: 14px auto 0; + } + + &__gallery-controls, + &__gallery-progress { + display: none; + } + + &__gallery-track { + width: 4px; + height: 4px; + margin-top: 0; + border-radius: 50%; + + background: #ababab; + box-shadow: + 10px 0 0 #484848, + 20px 0 0 #484848, + 30px 0 0 #484848, + 40px 0 0 #484848; + } + + &__product-text { + order: 3; + + width: var(--phone-copy-width); + max-width: none; + min-height: 176px; + margin-top: 20px; + } + + &__play { + gap: 38px; + order: 4; + + width: 236px; + min-height: 48px; + margin-top: 24px; + margin-left: 13px; + + &::before, + &::after { + left: 74px; + height: 2px; + background: repeating-linear-gradient( + 90deg, + rgba(5, 194, 223, 0.45) 0 2px, + transparent 2px 8px + ); + } + + &::before { + top: 1px; + } + + &::after { + bottom: 1px; + } + } + + &__play-icon { + width: 54px; + height: 54px; + margin-block: -9px; + box-shadow: none; + + &::before { + inset: 6px; + border-color: $c-accent; + } + + &::after { + content: ''; + + position: absolute; + inset: -10px; + transform: rotate(15deg); + + border: 3px solid rgba(5, 194, 223, 0.45); + border-right-color: transparent; + border-radius: 50%; + } + } + + &__play-triangle { + border-top-width: 10px; + border-bottom-width: 10px; + border-left-width: 17px; + } + + &__play-label { + flex: 1; + font-size: 16px; + line-height: 21px; + text-align: center; + } + + &__company { + gap: 0; + margin-top: 88px; + } + + &__company-copy { + max-width: var(--phone-copy-width); + } + + &__hello { + margin-bottom: 11px; + } + + &__company-title { + display: flex; + flex-wrap: nowrap; + gap: 8px; + align-items: flex-end; + + width: var(--phone-copy-width); + + font-size: 21px; + line-height: 25px; + white-space: nowrap; + } + + &__company-text { + max-width: none; + margin-top: 22px; + } + } + + .tech { + overflow: hidden; + min-height: 365px; + padding: 50px 0 60px; + + &__container { + position: relative; + + display: block; + + min-height: 255px; + padding-top: 0; + padding-bottom: 0; + } + + &__title { + display: flex; + gap: 5px; + + width: var(--phone-copy-width); + + font-size: 21px; + line-height: 25px; + white-space: nowrap; + } + + &__spec { + display: none; + } + + &__visual { + position: relative; + width: 214px; + height: 206px; + margin: 30px auto 0; + + &::before { + content: ''; + + position: absolute; + z-index: 1; + top: 11px; + left: 17px; + + box-sizing: border-box; + width: 195px; + height: 195px; + border: 4px solid #0e0c1e; + border-radius: 50%; + } + } + + &__image { + z-index: 2; + top: 11px; + left: 17px; + transform: none; + + width: 197px; + height: 195px; + } + + &__connector { + position: absolute; + z-index: 3; + + display: block; + + box-sizing: border-box; + width: 34px; + height: 34px; + border: 2px solid rgba(255, 255, 255, 0.14); + border-radius: 50%; + + background: $c-accent; + + &::before, + &::after { + content: ''; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + width: 12px; + height: 1px; + + background: $c-white; + } + + &::after { + transform: translate(-50%, -50%) rotate(90deg); + } + + &--sensor { + top: 0; + left: 77px; + } + + &--connection { + top: 91px; + left: 151px; + } + + &--battery { + top: 164px; + left: 0; + } + } + + &__arc { + display: none; + } + } + + .feature-card { + place-items: start; + width: var(--phone-copy-width); + text-align: left; + + &__icon-wrap { + display: none; + } + + &__title { + width: var(--phone-copy-width); + margin-bottom: 11px; + text-align: left; + } + + &__text { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + + max-width: none; + margin: 0; + + text-align: left; + } + } + + .benefits { + min-height: 0; + padding: 50px 0 32px; + background: linear-gradient(146.86deg, #191536 -0.5%, #000 99.5%); + + &__container { + justify-items: start; + } + + &__title { + display: flex; + gap: 8px; + + width: var(--phone-copy-width); + + font-size: 21px; + line-height: 25px; + text-align: left; + white-space: nowrap; + } + + &__grid { + gap: 20px; + margin-top: 32px; + } + + &__action { + display: none; + } + } + + .benefit-card { + justify-items: start; + width: var(--phone-copy-width); + text-align: left; + + &__icon-wrap { + display: none; + } + + &__title { + width: var(--phone-copy-width); + margin-bottom: 11px; + text-align: left; + } + + &__text { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + + width: var(--phone-copy-width); + max-width: none; + margin: 0; + + text-align: left; + } + + &--compatible { + .benefit-card__title { + width: var(--phone-copy-width); + margin-bottom: 11px; + } + } + } + + .contact { + min-height: 580px; + padding: 50px 0 20px; + background: #05040b; + + &__container { + display: block; + } + + &__layout { + display: grid; + gap: 0; + } + + &__copy { + display: contents; + } + + &__eyebrow { + order: 1; + + width: var(--phone-copy-width); + margin: 0 0 11px; + + font-size: 14px; + line-height: 17px; + } + + &__title { + display: flex; + flex-wrap: nowrap; + gap: 8px; + order: 2; + + width: var(--phone-copy-width); + + font-size: 21px; + line-height: 25px; + } + + &__details, + &__to-top { + display: none; + } + + &__form { + order: 3; + width: var(--phone-copy-width); + max-width: none; + margin-top: 55px; + } + + &__field { + width: var(--phone-copy-width); + } + + &__field-label { + margin-bottom: 18px; + font-size: 14px; + line-height: 1.5; + } + + &__input { + width: var(--phone-copy-width); + padding-bottom: 18px; + + &--textarea { + min-height: 88px; + padding-bottom: 0; + } + } + + &__submit { + width: var(--phone-copy-width); + min-height: 37px; + margin-top: 30px; + + font-size: 14px; + line-height: 1.3; + } + + &__text { + order: 4; + + width: var(--phone-copy-width); + max-width: none; + margin-top: 32px; + + font-size: 12px; + line-height: 1.5; + } + } + + .modal[data-modal='faq'] { + inset: 0; + + overflow: hidden auto !important; + display: block; + place-items: start stretch; + + padding: 0 !important; + + background: #191536 !important; + + &[hidden] { + display: none !important; + } + + .modal__backdrop { + inset: 0; + background: transparent !important; + } + + .modal__dialog { + scrollbar-gutter: auto; + + position: relative !important; + inset: auto !important; + + overflow: visible !important; + display: block; + + width: 100% !important; + min-width: 0; + max-width: none !important; + height: auto !important; + min-height: 1167px !important; + max-height: none !important; + margin: 0 !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + + background: #191536 !important; + backdrop-filter: none !important; + box-shadow: none !important; + } + } + + .faq-modal { + overflow: visible !important; + + box-sizing: border-box; + width: 100% !important; + min-width: 0; + min-height: 1167px !important; + margin: 0 !important; + padding: 20px 0 122px !important; + border: 0 !important; + border-radius: 0 !important; + + background: #191536 !important; + backdrop-filter: none !important; + box-shadow: none !important; + + &__close { + position: absolute; + z-index: 2; + top: 20px; + right: 20px; + + width: 17px; + height: 17px; + padding: 0; + border-radius: 0 !important; + + background: transparent !important; + box-shadow: none !important; + + .icon-button__icon--small { + width: 17px; + height: 17px; + } + } + + &__title { + display: block; + + width: 280px !important; + max-width: 280px !important; + margin: 48px 0 30px 20px !important; + padding-right: 28px !important; + + font-size: 21px; + line-height: 1.3; + } + + &__list { + gap: 13px !important; + width: 280px !important; + max-width: 280px !important; + margin: 0 0 0 20px !important; + } + + &__item { + box-sizing: border-box; + width: 280px !important; + min-height: 84px !important; + padding: 18px 11px; + border-radius: 4px; + + &[open] { + min-height: 608px !important; + padding-top: 18px; + padding-bottom: 12px; + } + } + + &__question { + width: 257px; + max-width: 257px; + min-height: 48px; + padding-right: 0; + + font-size: 16px; + line-height: 1.5; + + &::after { + display: none; + } + } + + &__answer { + width: 257px; + max-width: 257px; + margin-top: 18px; + + font-size: 16px; + line-height: 1.5; + } + + &__date { + width: 254px; + max-width: 254px; + margin-top: 20px; + + font-size: 12px; + line-height: 1.5; + } + + &__more { + display: none; + } + } + + .modal[data-modal='help'] { + place-items: start stretch; + padding: 0; + + .modal__dialog { + overflow: visible; + + max-width: none; + min-height: 100dvh; + max-height: none; + padding: 20px 20px 32px; + border-radius: 0; + } + } + + .help-modal { + width: 100%; + min-height: 100dvh; + + &__close { + top: 20px; + right: 20px; + } + + &__title, + &__content, + &__grid { + width: var(--phone-modal-width); + max-width: none; + margin-inline: auto; + } + + &__title { + margin: 48px auto 36px; + padding-right: 28px; + font-size: 21px; + line-height: 1.3; + } + + &__grid { + gap: 26px; + margin-top: 36px; + } + + &__resources, + &__contacts { + gap: 20px; + } + + &__resource, + &__contact { + width: 100%; + } + } + + .modal[data-modal='order'] { + place-items: start stretch; + padding: 0; + + .modal__dialog { + overflow: visible; + + max-width: none; + min-height: 100dvh; + max-height: none; + padding: 0; + border-radius: 0; + } + } + + .order { + box-sizing: border-box; + width: 100%; + min-height: 100dvh; + padding: 24px 0 37px; + border-top: 14px solid #191536; + + box-shadow: none; + + &__logo { + --logo-width: 58px; + + grid-area: logo; + } + + &__close { + position: static; + z-index: auto; + + grid-area: close; + justify-self: end; + + width: 21px; + height: 21px; + padding: 0; + border-radius: 0; + + background: transparent; + + &:hover { + transform: none; + background: transparent; + } + + .icon-button__icon--small { + width: 17px; + height: 17px; + } + } + + &__header { + display: grid; + grid-template-areas: + 'logo . close' + 'indicators indicators indicators'; + grid-template-columns: 58px 1fr 21px; + row-gap: 33px; + + width: var(--phone-modal-width); + margin: 0 auto 30px; + padding-right: 0; + } + + &__indicators { + position: relative; + + display: flex; + grid-area: indicators; + gap: 0; + align-items: flex-start; + justify-content: space-between; + + width: var(--phone-modal-width); + margin-inline: 0; + padding-bottom: 17px; + + &::before { + content: ''; + + position: absolute; + bottom: 0; + left: -20px; + + width: calc(var(--phone-modal-width) + 40px); + border-bottom: 1px solid #2f2f2f; + } + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: -20px; + + width: 106px; + border-bottom: 2px solid $c-accent; + } + } + + &__indicator { + width: auto; + padding: 0; + font-size: 12px; + line-height: 16px; + + &::after { + display: none; + } + + &[data-order-indicator='1'] { + width: 68px; + text-align: left; + text-transform: capitalize; + } + + &[data-order-indicator='2'] { + width: 22px; + text-align: center; + } + + &[data-order-indicator='3'] { + width: 56px; + font-size: 0; + text-align: right; + + &::before { + content: 'Complete'; + font-size: 12px; + line-height: 16px; + } + } + } + + &__body { + display: block; + width: var(--phone-modal-width); + margin-inline: auto; + } + + &__summary { + width: var(--phone-modal-width); + margin: 0 auto 30px; + } + + &__visual { + display: none; + } + + &__summary-footer { + grid-template-columns: 90px 79px; + gap: 0; + justify-content: space-between; + + width: 100%; + margin-top: 0; + } + + &__summary-control { + gap: 10px; + + &:last-child { + justify-items: end; + } + } + + &__summary-label { + font-size: 16px; + line-height: 21px; + } + + &__summary-select { + height: 41px; + padding: 0 30px 0 24px; + + font-size: 20px; + line-height: 26px; + + background-position: + calc(100% - 19px) calc(50% - 3px), + calc(100% - 13px) calc(50% - 3px); + } + + &__price-value { + font-size: 26px; + line-height: 31px; + } + + &__steps, + &__form { + width: var(--phone-modal-width); + max-width: none; + margin-inline: auto; + } + + &__place-grid { + gap: 29px; + } + + &__field { + gap: 19px; + width: var(--phone-modal-width); + } + + &__field-label { + line-height: 18px; + } + + &__field-input { + width: var(--phone-modal-width); + + &--line { + padding-bottom: 18px; + } + + &--panel { + height: 47px; + } + } + + &__actions--place { + margin-top: 40px; + } + + &__purchase { + width: var(--phone-modal-width); + min-width: 0; + min-height: 40px; + + font-size: 14px; + line-height: 1.3; + } + } + + .order[data-order-current-step='2'] { + min-height: 600px; + + .order__summary { + margin-bottom: 53px; + } + + .order__form--pay { + width: var(--phone-modal-width); + max-width: none; + } + + .order__pay-label { + line-height: 18px; + } + + .order__form--pay > .order__pay-group--full:first-child { + gap: 17px; + margin-bottom: 16px; + } + + .order__card-row { + display: grid; + grid-template-columns: repeat(4, 54px); + gap: 14px 21px; + align-items: end; + + width: var(--phone-modal-width); + } + + .order__pay-input--card { + width: 54px; + padding-bottom: 9px; + font-size: 18px; + line-height: 23px; + } + + .order__card-brand { + display: none; + grid-column: 2 / span 2; + justify-self: center; + + width: 81px; + height: 50px; + margin-left: 0; + + font-size: 1.72rem; + } + + .order__form--pay > .order__pay-group--full:nth-of-type(2) { + gap: 19px; + margin-bottom: 30px; + } + + .order__pay-input--line { + padding-bottom: 12px; + } + + .order__pay-meta { + grid-template-columns: 90px 70px; + gap: 0 60px; + margin-top: 0; + } + + .order__pay-group { + gap: 17px; + } + + .order__pay-input--meta { + width: 90px; + font-size: 18px; + line-height: 23px; + } + + .order__pay-input--cvv { + width: 41px; + } + + .order__actions--pay { + margin-top: 40px; + } + + .order__indicators::after { + left: 86px; + width: 106px; + } + } + + .order[data-order-current-step='3'] { + min-height: 600px; + + .order__header { + width: 280px; + } + + .order__indicators { + width: 280px; + + &::before { + width: 320px; + } + + &::after { + left: 194px; + width: 106px; + } + } + + .order__indicator[data-order-indicator='1'] { + color: #545454; + } + + .order__indicator[data-order-indicator='2'] { + color: #2f2f2f; + } + + .order__indicator[data-order-indicator='3'] { + color: $c-accent; + } + + .order__body, + .order__steps, + .order__complete { + width: 280px; + max-width: none; + margin-inline: auto; + } + + .order__complete { + display: block; + padding-top: 60px; + text-align: center; + } + + .order__complete-title { + width: 218px; + max-width: none; + margin: 0 auto 16px; + + font-size: 26px; + line-height: 1.3; + } + + .order__complete-text { + width: 280px; + max-width: none; + margin: 0 auto 30px; + + font-size: 16px; + line-height: 1.3; + color: $c-white; + text-align: center; + } + + .order__complete-button { + width: 280px; + min-height: 40px; + margin: 0 auto; + + font-size: 14px; + line-height: 1.3; + } + } + + .footer { + min-height: 0; + padding: 40px 0 24px; + + &__container { + position: relative; + + display: block; + + width: 280px; + min-height: 145px; + margin-inline: auto; + } + + &__logo { + --logo-width: 69px; + + position: absolute; + top: 0; + left: 0; + } + + &__nav { + position: absolute; + top: 29px; + left: 0; + + width: 51px; + margin-top: 0; + } + + &__contacts { + position: absolute; + top: 29px; + left: 170px; + + display: grid; + gap: 12px; + + width: 130px; + margin-top: 0; + } + + &__contact { + display: block; + + width: 130px; + + font-size: 13px; + font-weight: 400; + line-height: 16px; + } + + &__socials { + position: absolute; + top: 123px; + left: 170px; + + gap: 0; + justify-content: space-between; + + width: 130px; + } + + &__social-link { + width: 18px; + height: 18px; + } + + &__social-icon { + height: 14px; + } + + .nav__list { + flex-direction: column; + gap: 12px; + align-items: flex-start; + } + + .nav__link { + font-size: 13px; + line-height: 20px; + } + } +} + +section[id], +.header[id] { + scroll-margin-top: 16px; +} + +@include on-tablet { + .container { + padding-inline: 40px; + } + + .header { + padding: 32px 0 56px; + + &__top { + margin-bottom: 42px; + } + + &__bottom { + grid-template-columns: repeat(3, auto); + align-items: end; + justify-content: space-between; + } + + &__more-link { + justify-self: center; + } + + &__mobile-buy { + width: auto; + } + } + + .about, + .tech, + .benefits, + .contact { + padding: 104px 0; + } + + .more { + padding: 88px 0 104px; + + &__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + justify-items: center; + margin-top: 96px; + } + } + + .benefits__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .order { + &__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + &__place-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + &__pay-meta { + grid-template-columns: max-content max-content; + align-items: start; + } + } + + .help-modal__grid { + grid-template-columns: auto auto; + justify-content: space-between; + } +} + +@media (min-width: 640px) and (max-width: 1023px) { + .floating-buy { + bottom: 40px; + display: inline-flex; + } + + .mobile-menu:not([hidden]) ~ .floating-buy { + display: none; + } + + .header { + min-height: 445px; + padding: 0; + + &__container { + grid-template-rows: auto 1fr; + min-height: 445px; + padding-top: 30px; + padding-inline: 34px; + } + + &__top { + align-items: flex-start; + margin-bottom: 55px; + } + + &__logo { + --logo-width: 67px; + } + + &__menu-button { + width: 29.25px; + height: 13px; + padding: 0; + border-radius: 0; + + background: transparent; + + &:hover { + transform: none; + background: transparent; + } + + .icon-button__icon { + width: 29.25px; + height: auto; + } + } + + &__hero { + position: static; + display: block; + min-height: 300px; + } + + &__content { + width: 479px; + max-width: none; + } + + &__title { + width: 479px; + font-size: 26px; + line-height: 1.3; + } + + &__title-accent { + margin-top: 0; + } + + &__details { + display: block; + margin-top: 17px; + } + + &__text { + width: 340px; + max-width: none; + margin: 0 0 10px; + } + + &__price { + display: block; + margin: 0 0 33px; + } + + &__play { + width: 236px; + margin-left: 12px; + } + + &__play-label { + flex: 1; + text-align: center; + } + + &__visual { + position: absolute; + top: 6px; + right: 0; + + justify-self: auto; + + width: 486px; + max-width: none; + height: 438.99px; + } + + &__image { + display: block; + width: 486px; + height: 438.99px; + } + + &__bottom, + &__mobile-buy { + display: none; + } + } + + .mobile-menu { + justify-items: stretch; + + &__overlay { + background: rgba(0, 0, 0, 0.7); + } + + &__panel { + gap: 0; + + box-sizing: border-box; + width: 100%; + max-width: none; + height: 568px; + min-height: 568px; + padding: 0; + + background: #191536; + box-shadow: none; + } + + &[data-view='language'] &__panel { + height: 596px; + min-height: 596px; + } + + &__top { + justify-content: flex-end; + height: 97px; + padding: 34px 34px 0; + } + + &[data-view='language'] &__top { + justify-content: flex-start; + } + + &__top .logo { + display: none; + } + + &__top .icon-button { + width: 17px; + height: 17px; + padding: 0; + border-radius: 0; + + background: transparent; + box-shadow: none; + + &:hover { + transform: none; + opacity: 0.75; + background: transparent; + } + + .icon-button__icon { + width: var(--mobile-menu-icon-width); + height: var(--mobile-menu-icon-height); + } + } + + &__top [data-menu-language-back] { + display: none; + } + + &__top [data-menu-panel-close] { + display: inline-flex; + } + + &[data-view='language'] &__top [data-menu-language-back] { + display: inline-flex; + } + + &[data-view='language'] &__top [data-menu-panel-close] { + display: none; + } + + &__back { + --mobile-menu-icon-width: 8.5px; + --mobile-menu-icon-height: 17px; + } + + &__nav { + flex: none; + } + + &__language-view { + flex: none; + } + + &__list { + gap: 0; + } + + &__item { + height: 49px; + } + + &__link, + &__button { + display: flex; + align-items: center; + + box-sizing: border-box; + width: 100%; + height: 49px; + padding: 0 34px 0 153px; + border-radius: 0; + + font-size: 21px; + font-weight: 500; + line-height: 1.3; + color: $c-white; + + background: transparent; + + &:hover { + transform: none; + color: $c-accent; + background: transparent; + } + } + + &__link--active, + &__button--active { + color: $c-accent; + background: #110e25; + } + + &__buy { + display: none; + } + } + + .more { + min-height: 743px; + padding: 70px 0; + + &__container { + align-items: center; + padding-inline: 34px; + } + + &__heading { + width: 460px; + max-width: none; + text-align: center; + } + + &__title { + gap: 6px; + justify-content: center; + + width: 460px; + + font-size: 21px; + line-height: 25px; + white-space: nowrap; + } + + &__subtitle { + width: 460px; + max-width: none; + margin-top: 12px; + + font-size: 12px; + line-height: 15px; + text-align: center; + } + + &__grid { + grid-template-columns: repeat(2, 340px); + gap: 41px 20px; + align-items: start; + justify-content: space-between; + + width: 700px; + margin-top: 30px; + } + } + + .feature-card { + width: 340px; + + &__icon-wrap { + height: 115px; + margin-bottom: 22px; + } + + &__title { + width: 340px; + margin-bottom: 20px; + white-space: nowrap; + } + + &__text { + max-width: 340px; + } + } + + .about { + min-height: 752px; + padding: 70px 0 73px; + + &__container { + padding-inline: 34px; + } + + &__product { + grid-template-columns: 340px 340px; + column-gap: 20px; + align-items: start; + } + + &__visual-column { + gap: 0; + width: 340px; + } + + &__count { + display: none; + } + + &__gallery { + gap: 0; + } + + &__gallery-frame { + aspect-ratio: auto; + width: 340px; + height: 270px; + } + + &__gallery-footer { + width: 44px; + margin: 15px auto 0; + } + + &__gallery-controls, + &__gallery-progress { + display: none; + } + + &__gallery-track { + width: 4px; + height: 4px; + margin-top: 0; + border-radius: 50%; + + background: #ababab; + box-shadow: + 10px 0 0 #484848, + 20px 0 0 #484848, + 30px 0 0 #484848, + 40px 0 0 #484848; + } + + &__product-copy { + width: 340px; + padding-top: 1px; + } + + &__product-title { + display: flex; + gap: 8px; + + width: 280px; + + font-size: 21px; + line-height: 25px; + white-space: nowrap; + } + + &__product-text { + width: 340px; + max-width: none; + margin-top: 34px; + } + + &__play { + gap: 38px; + + width: 236px; + min-height: 48px; + margin-top: 30px; + margin-left: 12px; + + &::before, + &::after { + left: 74px; + height: 2px; + background: repeating-linear-gradient( + 90deg, + rgba(5, 194, 223, 0.45) 0 2px, + transparent 2px 8px + ); + } + + &::before { + top: 1px; + } + + &::after { + bottom: 1px; + } + } + + &__play-icon { + width: 54px; + height: 54px; + margin-block: -9px; + box-shadow: none; + + &::before { + inset: 6px; + border-color: $c-accent; + } + + &::after { + content: ''; + + position: absolute; + inset: -10px; + transform: rotate(15deg); + + border: 3px solid rgba(5, 194, 223, 0.45); + border-right-color: transparent; + border-radius: 50%; + } + } + + &__play-triangle { + border-top-width: 10px; + border-bottom-width: 10px; + border-left-width: 17px; + } + + &__play-label { + flex: 1; + font-size: 16px; + line-height: 21px; + text-align: center; + } + + &__company { + grid-template-columns: 460px 232px; + column-gap: 11px; + align-items: start; + margin-top: 107px; + } + + &__company-copy { + width: 460px; + margin-left: -5px; + } + + &__hello { + margin-bottom: 11px; + } + + &__company-title { + display: flex; + gap: 8px; + + width: fit-content; + max-width: 340px; + + font-size: 21px; + line-height: 25px; + white-space: nowrap; + } + + &__company-text { + width: 460px; + max-width: none; + margin-top: 32px; + } + + &__decor { + display: flex; + gap: 24px; + justify-self: end; + + height: 259px; + margin-top: -24px; + } + + &__decor-text { + font-size: 48px; + line-height: 1.3; + + &--faint, + &--ghost { + display: none; + } + } + } + + .tech { + overflow: hidden; + min-height: 600px; + padding: 80px 0 60px; + + &__container { + position: relative; + + display: block; + + min-height: 460px; + padding-top: 0; + padding-bottom: 0; + padding-inline: 32px; + } + + &__title { + display: flex; + gap: 7px; + + width: 222px; + margin: 0; + + font-size: 21px; + line-height: 25px; + white-space: nowrap; + } + + &__spec { + display: none; + } + + &__visual { + position: relative; + + width: 415.95px; + height: 380.78px; + margin-top: 30px; + margin-left: 115px; + + &::before { + content: ''; + + position: absolute; + z-index: 1; + top: 27px; + left: 62px; + + box-sizing: border-box; + width: 352px; + height: 352px; + border: 6px solid #0e0c1e; + border-radius: 50%; + } + } + + &__image { + position: absolute; + z-index: 2; + top: 27px; + left: 58px; + transform: none; + + width: 357.95px; + height: 353.78px; + } + + &__connector { + pointer-events: none; + + position: absolute; + z-index: 3; + + display: block; + + box-sizing: border-box; + width: 61.68px; + height: 61.68px; + border: 2px solid rgba(255, 255, 255, 0.14); + border-radius: 50%; + + background: $c-accent; + + &::before, + &::after { + content: ''; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + width: 21.77px; + height: 1px; + + background: $c-white; + } + + &::after { + transform: translate(-50%, -50%) rotate(90deg); + } + + &--sensor { + top: 0; + left: 122.74px; + } + + &--connection { + top: 172px; + left: 305px; + } + + &--battery { + top: 300px; + left: 0; + } + } + + &__arc { + display: none; + } + } + + .benefits { + min-height: 432px; + padding: 70px 0; + background: linear-gradient(108.62deg, #191536 0%, #000 77.34%); + + &__container { + display: block; + padding-inline: 34px; + } + + &__title { + display: flex; + gap: 8px; + + width: fit-content; + margin: 0; + + font-size: 21px; + line-height: 25px; + text-align: left; + white-space: nowrap; + } + + &__grid { + grid-template-columns: 222px 223px 220px; + gap: 0; + align-items: start; + justify-content: space-between; + + width: 700px; + margin-top: 30px; + } + + &__action { + display: none; + } + } + + .benefit-card { + justify-items: center; + text-align: center; + + &__icon-wrap { + height: 104px; + margin-bottom: 0; + } + + &__title { + width: 100%; + margin-bottom: 27px; + + font-size: 18px; + line-height: 22px; + text-align: center; + white-space: nowrap; + } + + &__text { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + + width: 100%; + max-width: none; + margin: 0; + + text-align: center; + } + + &--compatible { + width: 222px; + + .benefit-card__icon-wrap { + height: 105px; + } + + .benefit-card__icon { + width: 80px; + height: 79px; + } + + .benefit-card__title { + margin-bottom: 37px; + font-size: 16px; + line-height: 19px; + } + + .benefit-card__text { + width: 220px; + } + } + + &--control { + width: 223px; + + .benefit-card__icon-wrap { + height: 104px; + } + + .benefit-card__icon { + width: 89px; + height: 81px; + } + + .benefit-card__title { + margin-bottom: 27px; + } + + .benefit-card__text { + width: 223px; + } + } + + &--wireless { + width: 220px; + + .benefit-card__icon-wrap { + height: 104px; + } + + .benefit-card__icon { + width: 105px; + height: 75px; + } + + .benefit-card__title { + margin-bottom: 21px; + } + + .benefit-card__text { + width: 220px; + } + } + } + + .contact { + min-height: 576px; + padding: 70px 0 130px; + background: #05040b; + + &__container { + position: relative; + display: block; + min-height: 376px; + padding-inline: 34px; + } + + &__layout { + display: grid; + grid-template-columns: 338px 339px; + column-gap: 23px; + align-items: start; + } + + &__copy { + width: 338px; + } + + &__eyebrow { + width: 220px; + margin: 0 0 11px; + font-size: 14px; + line-height: 17px; + } + + &__title { + flex-wrap: nowrap; + gap: 8px; + + width: 220px; + + font-size: 21px; + line-height: 25px; + white-space: nowrap; + } + + &__text { + width: 338px; + max-width: none; + margin-top: 50px; + + font-size: 16px; + line-height: 1.5; + } + + &__details { + display: grid; + gap: 8px; + width: 158px; + margin-top: 76px; + } + + &__detail { + font-size: 16px; + line-height: 19px; + } + + &__form { + width: 339px; + max-width: none; + margin-top: 0; + } + + &__field { + width: 339px; + + &:not(:last-of-type) { + margin-bottom: 24px; + } + } + + &__field-label { + margin-bottom: 18px; + font-size: 14px; + line-height: 1.5; + } + + &__input { + width: 339px; + padding-bottom: 18px; + + &--textarea { + min-height: 53px; + padding-bottom: 12px; + } + } + + &__submit { + width: 200px; + min-height: 48px; + margin-top: 48px; + + font-size: 16px; + line-height: 1.3; + } + + &__to-top { + position: absolute; + right: 34px; + bottom: 0; + + display: inline-flex; + align-items: center; + justify-content: center; + + width: 48px; + height: 48px; + margin-top: 0; + border-width: 1px; + } + + &__to-top-icon { + width: 15.36px; + height: 8.64px; + } + } + + .footer { + min-height: 64px; + padding: 0; + background: #000; + + &__container { + grid-template-columns: 69px minmax(0, 1fr) 103px; + gap: 0; + align-items: center; + + min-height: 64px; + padding-inline: 34px; + } + + &__logo { + --logo-width: 69px; + + justify-self: start; + } + + &__nav { + justify-self: center; + width: 306px; + } + + &__socials { + gap: 0; + justify-content: space-between; + justify-self: end; + width: 103px; + } + + &__social-icon { + height: 14px; + } + + .nav__list { + gap: 0; + justify-content: space-between; + } + + .nav__link { + font-size: 14px; + line-height: 1.5; + } + } +} + +@include on-desktop { + .floating-buy { + display: none; + } + + .container { + padding-inline: 110px; + } + + .header { + height: 740px; + padding: 47px 0 84px; + + &__container { + grid-template-rows: auto 1fr auto; + height: 100%; + min-height: 609px; + } + + &__top { + display: grid; + grid-template-columns: 79px 33px 1fr auto 200px; + column-gap: 34px; + align-items: center; + + margin-bottom: 101px; + } + + &__desktop { + display: contents; + } + + &__menu-button, + &__mobile-buy { + display: none; + } + + &__language-button { + grid-column: 2; + } + + &__nav { + transform: translateX(9px); + grid-column: 4; + } + + &__buy-button { + grid-column: 5; + } + + &__hero { + min-height: 392px; + } + + &__details { + margin-left: 92px; + } + + &__visual { + position: absolute; + top: -186px; + right: -110px; + + width: 810px; + max-width: none; + } + + &__bottom { + grid-template-columns: auto 1fr auto; + align-items: start; + margin-top: 16px; + } + + &__support { + gap: 33px; + } + + &__more-link { + transform: translateX(52px); + } + + &__pager { + transform: translateX(-5px); + gap: 10px 103px; + justify-self: end; + } + } + + .mobile-menu { + display: none; + } + + .about, + .tech, + .benefits, + .contact { + padding: 120px 0; + } + + .more { + box-sizing: border-box; + min-height: 622px; + padding: 100px 0; + + &__heading { + width: 386px; + } + + &__title { + flex-wrap: nowrap; + gap: 2px; + + font-size: 36px; + line-height: 44px; + white-space: nowrap; + } + + &__subtitle { + margin-top: 16px; + line-height: 17px; + } + + &__grid { + grid-template-columns: repeat(4, 250px); + place-items: start center; + justify-content: space-between; + + width: 1060px; + margin-top: 83px; + } + } + + .feature-card { + width: 250px; + + &__icon-wrap { + margin-bottom: 30px; + } + + &--social { + .feature-card__title { + white-space: nowrap; + } + } + } + + .about { + min-height: 1068px; + padding: 105px 0 58px; + + &__product { + grid-template-columns: 430px 333px; + column-gap: 109px; + align-items: start; + padding-left: 160px; + } + + &__visual-column { + position: relative; + width: 430px; + } + + &__count { + position: absolute; + top: -5px; + left: -44px; + } + + &__gallery-frame { + width: 430px; + height: 290px; + } + + &__product-copy { + width: 333px; + } + + &__product-title { + width: 332px; + font-size: 36px; + line-height: 44px; + white-space: nowrap; + } + + &__play { + margin-top: 39px; + margin-left: 13px; + } + + &__company { + position: relative; + min-height: 342px; + margin-top: 226px; + } + + &__company-copy { + width: 429px; + } + + &__hello { + margin-bottom: 15px; + } + + &__company-title { + width: 351px; + font-size: 36px; + line-height: 44px; + white-space: nowrap; + } + + &__company-text { + margin-top: 32px; + } + + &__decor { + position: absolute; + top: -43px; + left: 540px; + + display: flex; + gap: 20px; + + height: 346px; + } + } + + .tech { + overflow: hidden; + height: 681px; + min-height: 0; + padding: 100px 0 101px; + + &__container { + position: relative; + + display: block; + + min-height: 480px; + padding-top: 0; + padding-bottom: 0; + } + + &__title { + position: absolute; + z-index: 2; + top: 0; + left: 720px; + + display: flex; + gap: 8px; + + width: 265px; + + font-size: 36px; + line-height: 44px; + white-space: nowrap; + } + + &__spec { + position: absolute; + z-index: 2; + + &--sensor { + top: 125px; + left: 3px; + width: 250px; + } + + &--connection { + top: 342px; + left: 89px; + width: 241px; + } + + &--battery { + top: 125px; + left: 720px; + width: 338px; + } + } + + &__spec-title { + font-size: 18px; + line-height: 22px; + } + + &__spec-text { + margin-top: 21px; + } + + &__visual { + position: absolute; + z-index: 1; + top: 125px; + left: 3px; + + width: 1055px; + height: 355px; + margin: 0; + + &::before { + content: ''; + + position: absolute; + z-index: 1; + top: 61px; + left: 360px; + + box-sizing: border-box; + width: 294px; + height: 294px; + border: 4px solid #0e0c1e; + border-radius: 50%; + } + } + + &__image { + z-index: 2; + top: 61px; + left: 357px; + transform: none; + + width: 297.48px; + height: 294px; + } + + &__connector, + &__arc { + pointer-events: none; + position: absolute; + display: block; + box-sizing: border-box; + } + + &__connector { + z-index: 3; + + &--sensor { + top: 9px; + left: 101px; + + width: 399px; + height: 69px; + border-top: 1px solid $c-accent; + border-right: 1px solid $c-accent; + + &::before { + content: ''; + + position: absolute; + top: -3px; + left: -3px; + + width: 6px; + height: 6px; + border-radius: 50%; + + background: $c-accent; + } + } + + &--connection { + top: 119px; + left: 226px; + + width: 127px; + height: 107px; + border-top: 1px solid $c-accent; + border-left: 1px solid $c-accent; + + &::before, + &::after { + content: ''; + + position: absolute; + + width: 6px; + height: 6px; + border-radius: 50%; + + background: $c-accent; + } + + &::before { + bottom: -3px; + left: -3px; + } + + &::after { + top: -3px; + right: -3px; + } + } + + &--battery { + top: 8px; + left: 509px; + + width: 185px; + height: 239px; + border-right: 1px solid $c-accent; + border-bottom: 1px solid $c-accent; + + &::before, + &::after { + content: ''; + + position: absolute; + + width: 6px; + height: 6px; + border-radius: 50%; + + background: $c-accent; + } + + &::before { + top: -3px; + right: -3px; + } + + &::after { + bottom: -3px; + left: -3px; + } + } + } + + &__arc { + z-index: 1; + top: 48px; + left: 347px; + transform: none; + + width: 320px; + height: 320px; + border: 1px solid $c-accent; + border-radius: 50%; + + clip-path: inset(14% 56% 14% -2px); + } + } + + .benefits { + min-height: 714px; + padding: 0; + + &__container { + min-height: 714px; + padding-top: 100px; + padding-bottom: 102px; + } + + &__title { + width: 308px; + font-size: 36px; + line-height: 44px; + white-space: nowrap; + } + + &__grid { + grid-template-columns: repeat(3, 340px); + gap: 20px; + align-items: start; + justify-content: space-between; + + width: 1060px; + margin-top: 82px; + } + + &__action { + margin-top: 79px; + } + } + + .benefit-card { + width: 340px; + + &__icon-wrap { + align-items: start; + height: 112px; + margin-bottom: 1px; + } + + &__title { + white-space: nowrap; + } + + &__text { + max-width: 340px; + } + } + + .contact { + height: 618px; + min-height: 0; + padding: 100px 0; + + &__container { + min-height: 418px; + } + + &__layout { + grid-template-columns: 338px 521px; + column-gap: 201px; + align-items: start; + } + + &__copy { + width: 338px; + } + + &__title { + flex-wrap: nowrap; + + width: 338px; + + font-size: 36px; + line-height: 44px; + white-space: nowrap; + } + + &__text { + width: 338px; + } + + &__details { + width: 158px; + } + + &__form { + width: 521px; + max-width: none; + } + + &__to-top { + position: absolute; + right: 0; + bottom: 0; + margin-top: 0; + } + } + + .footer { + min-height: 100px; + padding: 0; + + &__container { + grid-template-columns: 72px minmax(0, 1fr) 103px; + gap: 0; + align-items: center; + min-height: 100px; + } + + &__nav { + width: 306px; + } + + &__socials { + gap: 0; + justify-content: space-between; + justify-self: end; + width: 103px; + } + + &__social-icon { + height: 14px; + } + + .nav__list { + gap: 0; + justify-content: space-between; + } + } + + .modal[data-modal='faq'] { + place-items: start stretch; + padding: 0; + background: linear-gradient(107.56deg, #191536 0%, #000 100%); + + .modal__backdrop { + background: transparent; + } + + .modal__dialog { + overflow: hidden auto; + + width: 100%; + max-width: none; + min-height: 100dvh; + max-height: none; + padding: 0; + border-radius: 0; + } + } + + .modal[data-modal='faq'] .faq-modal { + box-sizing: border-box; + width: 100%; + min-height: 100dvh; + padding: 34px 34px 40px; + + background: linear-gradient(107.56deg, #191536 0%, #000 100%); + + &__close { + top: 34px; + right: 34px; + + padding: 0; + border-radius: 0; + + background: transparent; + box-shadow: none; + + &:hover { + transform: none; + opacity: 0.75; + background: transparent; + } + } + + &__title { + width: 280px; + max-width: none; + margin: 68px 0 30px; + padding-right: 40px; + + font-size: 21px; + line-height: 1.3; + } + + &__list { + gap: 18px; + width: 700px; + max-width: none; + margin: 0 auto; + } + + &__item { + box-sizing: border-box; + width: 700px; + min-height: 54px; + padding: 11px 26px 12px; + + &[open] { + min-height: 300px; + padding: 19px 26px 26px; + } + } + + &__question { + min-height: 24px; + padding-right: 0; + font-size: 16px; + line-height: 1.5; + + &::after { + display: none; + } + } + + &__answer { + width: 658px; + max-width: none; + margin-top: 18px; + + font-size: 16px; + line-height: 1.5; + color: $c-text-muted; + } + + &__date { + width: 658px; + max-width: none; + margin-top: 41px; + + font-size: 12px; + line-height: 1.5; + color: #545454; + } + + &__more { + width: 40px; + margin: 46px auto 0; + opacity: 0.4; + } + + &__more-text { + font-size: 16px; + line-height: 1.5; + } + } + + .modal[data-modal='order'] { + --order-modal-scale: 0.9; + + place-items: start stretch; + padding: 0; + background: linear-gradient(107.56deg, #191536 0%, #000 100%); + + .modal__backdrop { + background: transparent; + } + + .modal__dialog { + overflow: visible; + + max-width: none; + min-height: 100dvh; + max-height: none; + padding: 0; + border-radius: 0; + } + } + + .order { + transform-origin: top center; + transform: scale(var(--order-modal-scale)); + + overflow: hidden; + + box-sizing: border-box; + width: 100%; + min-height: 100dvh; + padding: 30px 0 43px; + border-radius: 0; + + box-shadow: none; + + &__logo { + --logo-width: 67px; + + grid-column: 1; + grid-row: 1; + margin-left: var(--order-logo-start); + } + + &__close { + top: 70px; + right: 0; + + width: 24px; + height: 24px; + padding: 0; + border-radius: 0; + + background: transparent; + box-shadow: none; + + &:hover { + transform: none; + opacity: 0.75; + background: transparent; + } + + .icon-button__icon--small { + width: 17px; + height: 17px; + } + } + + &__header { + --order-logo-start: 100px; + --order-indicator-end: 1053px; + --order-indicator-step: calc( + (var(--order-indicator-end) - var(--order-logo-start)) / 3 + ); + --order-indicator-step-double: calc(var(--order-indicator-step) * 2); + + display: grid; + grid-template-columns: 684px 680px; + gap: 20px; + justify-content: center; + + width: 1384px; + max-width: calc(100vw - 260px); + min-height: 77px; + margin-bottom: 36px; + margin-inline: auto; + padding: 70px 0 0; + } + + &__indicators { + position: absolute; + top: 70px; + right: 0; + left: 0; + + display: block; + + margin: 0; + padding-bottom: 0; + } + + &__indicator { + position: absolute; + top: 0; + + padding: 0 0 11px; + + font-size: 14px; + line-height: 18px; + white-space: nowrap; + + &[data-order-indicator='1'] { + left: calc(var(--order-logo-start) + var(--order-indicator-step)); + font-size: 0; + text-align: left; + + &::before { + content: 'Place Order'; + font-size: 14px; + line-height: 18px; + } + } + + &[data-order-indicator='2'] { + left: calc( + var(--order-logo-start) + var(--order-indicator-step-double) + ); + text-align: left; + } + + &[data-order-indicator='3'] { + left: calc(var(--order-indicator-end) - 32px); + font-size: 0; + text-align: left; + + &::before { + content: 'Order complete'; + font-size: 14px; + line-height: 18px; + } + } + } + + &__form--pay { + width: 430px; + margin-top: 33px; + } + + &__actions--pay { + margin-top: 90px; + } + + &__pay-meta { + grid-template-columns: 160px 70px; + gap: 0 20px; + margin-top: 69px; + } + } + + .order[data-order-current-step='1'] { + .order__body { + display: grid; + grid-template-columns: 684px 680px; + gap: 20px; + justify-content: center; + + width: 1384px; + max-width: calc(100vw - 260px); + margin-inline: auto; + } + + .order__summary { + width: 684px; + margin: 0; + } + + .order__visual { + width: 734px; + max-width: none; + margin-left: -25px; + } + + .order__visual-image { + aspect-ratio: auto; + width: 734px; + height: 388px; + + object-fit: cover; + object-position: center 58%; + } + + .order__summary-footer { + grid-template-columns: 90px 109px; + gap: 0 148px; + align-items: start; + justify-content: center; + + width: 684px; + margin: 72px auto 0; + } + + .order__summary-control { + gap: 20px; + } + + .order__summary-label { + font-size: 16px; + line-height: 21px; + } + + .order__summary-select { + height: 47px; + padding: 0 34px 0 24px; + + font-size: 20px; + line-height: 26px; + + background-position: + calc(100% - 20px) calc(50% - 3px), + calc(100% - 14px) calc(50% - 3px); + } + + .order__price-value { + font-size: 36px; + line-height: 44px; + } + + .order__steps, + .order__form--place { + width: 680px; + max-width: none; + } + + .order__place-grid { + grid-template-columns: 330px 331px; + gap: 40px 19px; + } + + .order__field { + gap: 19px; + } + + .order__field-label { + line-height: 18px; + } + + .order__field-input--line { + padding-bottom: 18px; + } + + .order__field-input--panel { + height: 47px; + margin-top: -6px; + } + + .order__actions--place { + justify-content: flex-start; + margin-top: 58px; + } + + .order__purchase { + width: 320px; + min-width: 0; + min-height: 48px; + + font-size: 16px; + line-height: 21px; + } + } + + .order[data-order-current-step='3'] { + min-height: 100dvh; + + .order__complete { + gap: 36px; + padding-top: 67px; + } + + .order__complete-text { + width: 880px; + max-width: none; + } + + .order__complete-button { + margin-top: 14px; + } + } +} + +@media (min-width: 640px) and (max-width: 1279px) { + .order { + padding: 30px 40px; + + &__header { + display: grid; + grid-template-areas: + 'logo . close' + 'indicators indicators indicators'; + grid-template-columns: 80px 1fr 40px; + row-gap: 40px; + + margin-bottom: 40px; + padding: 0; + } + + &__close { + position: relative; + top: auto; + right: auto; + + grid-area: close; + justify-self: end; + } + + &__logo { + grid-area: logo; + } + + &__indicators { + position: relative; + + display: grid; + grid-area: indicators; + grid-template-columns: 1fr 1fr 1fr; + gap: 0; + justify-items: center; + + width: 100%; + margin: 0; + padding-bottom: 20px; + + &::before { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 100%; + border-bottom: 1px solid #2f2f2f; + } + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 33.33%; + border-bottom: 2px solid $c-accent; + + transition: left 0.3s; + } + } + + &__indicator { + padding: 0 0 11px; + font-size: 14px; + + &::after { + display: none; + } + + &[data-order-indicator='1'] { + font-size: 0; + &::before { + content: 'Place Order'; + font-size: 14px; + } + } + &[data-order-indicator='3'] { + font-size: 0; + &::before { + content: 'Complete'; + font-size: 14px; + } + } + } + + &__body { + display: block; + width: 100%; + margin-inline: auto; + } + + &__visual { + width: 100%; + max-width: 524px; + margin: 0 auto; + } + + &__visual-image { + aspect-ratio: auto; + width: 100%; + height: auto; + object-fit: contain; + } + + &__summary { + width: 100%; + margin: 0 0 40px; + } + + &__summary-footer { + display: flex; + gap: 80px; + justify-content: flex-start; + margin-top: 30px; + } + + &__steps { + width: 100%; + } + + &__place-grid { + grid-template-columns: 1fr 1fr; + gap: 30px 20px; + } + + &__actions--place { + justify-content: center; + margin-top: 40px; + } + + &__purchase { + width: 458px; + max-width: 100%; + } + } + + .order[data-order-current-step='2'] { + .order__indicators::after { + left: 33.33%; + } + } + + .order[data-order-current-step='3'] { + .order__indicators::after { + left: 66.67%; + } + } + .modal[data-modal='faq'] { + place-items: start stretch !important; + padding: 0 !important; + background: linear-gradient(107.56deg, #191536 0%, #000 100%); + + .modal__backdrop { + background: transparent !important; + } + + .modal__dialog { + overflow: hidden auto !important; + + width: 100% !important; + max-width: none !important; + min-height: 100dvh !important; + max-height: none !important; + padding: 0 !important; + border-radius: 0 !important; + + background: transparent !important; + } + } + + .modal[data-modal='faq'] .faq-modal { + box-sizing: border-box; + width: 100% !important; + min-height: 100dvh !important; + padding: 29px 34px 40px !important; + border: 0 !important; + border-radius: 0 !important; + + background: linear-gradient(107.56deg, #191536 0%, #000 100%) !important; + box-shadow: none !important; + + &__close { + top: 29px; + right: 34px; + + padding: 0; + border-radius: 0; + + background: transparent; + box-shadow: none; + + &:hover { + transform: none; + opacity: 0.75; + background: transparent; + } + + .icon-button__icon--small { + width: 17px; + height: 17px; + } + } + + &__title { + width: 280px; + max-width: none; + margin: 73px 0 30px; + padding-right: 40px; + + font-size: 21px; + line-height: 1.3; + } + + &__list { + gap: 18px; + width: 700px; + max-width: none; + margin: 0 auto; + } + + &__item { + box-sizing: border-box; + width: 700px; + min-height: 54px; + padding: 11px 26px 12px; + + &[open] { + min-height: 300px; + padding: 19px 26px 26px; + } + } + + &__question { + min-height: 24px; + padding-right: 0; + font-size: 16px; + line-height: 1.5; + + &::after { + display: none !important; + } + } + + &__answer { + width: 658px; + max-width: none; + margin-top: 18px; + + font-size: 16px; + line-height: 1.5; + color: $c-text-muted; + } + + &__date { + width: 658px; + max-width: none; + margin-top: 41px; + + font-size: 12px; + line-height: 1.5; + color: #545454; + } + + &__more { + width: 40px; + margin: 46px auto 0; + opacity: 0.4; + } + + &__more-text { + font-size: 16px; + line-height: 1.5; + } + } + + .modal[data-modal='help'] { + place-items: start stretch !important; + padding: 0 !important; + background: linear-gradient(107.56deg, #191536 0%, #000 100%); + + .modal__backdrop { + background: transparent !important; + } + + .modal__dialog { + overflow: hidden auto !important; + + width: 100% !important; + max-width: none !important; + min-height: 100dvh !important; + max-height: none !important; + padding: 0 !important; + border-radius: 0 !important; + + background: transparent !important; + } + } + + .modal[data-modal='help'] .help-modal { + box-sizing: border-box; + width: 100% !important; + min-height: 100dvh !important; + padding: 34px 34px 40px !important; + border: 0 !important; + border-radius: 0 !important; + + background: linear-gradient(107.56deg, #191536 0%, #000 100%) !important; + box-shadow: none !important; + + &__close { + top: 34px; + right: 34px; + + padding: 0; + border-radius: 0; + + background: transparent; + box-shadow: none; + + &:hover { + transform: none; + opacity: 0.75; + background: transparent; + } + } + } } diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b..1e288785 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,15 @@ -%h1 { - font-family: Roboto, sans-serif; +@use 'mixins' as *; +@use 'vars' as *; + +%heading-quantum { + font-family: $font-heading; font-weight: 400; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +%card-surface { + @include surface-card; + + border-radius: $radius-m; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..81436813 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,38 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; +@use 'vars' as *; + +@mixin hover($property, $to-value) { + transition: #{$property} $transition-duration $transition-timing; + &:hover { - #{$_property}: $_toValue; + #{$property}: $to-value; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-wide { + @media (min-width: $wide-min-width) { + @content; + } +} + +@mixin surface-card { + border: 1px solid $c-border; + background: linear-gradient( + 180deg, + rgba(24, 29, 60, 0.9) 0%, + rgba(11, 14, 31, 0.9) 100% + ); + backdrop-filter: blur(18px); + box-shadow: $shadow-surface; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..c477ed4f 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,26 @@ -$c-gray: #eee; +$c-background: #05040b; +$c-surface: #111328; +$c-surface-soft: rgba(24, 28, 56, 0.72); +$c-surface-strong: rgba(16, 19, 37, 0.92); +$c-border: rgba(255, 255, 255, 0.1); +$c-border-strong: rgba(5, 194, 223, 0.35); +$c-accent: #05c2df; +$c-accent-soft: rgba(5, 194, 223, 0.15); +$c-text: #f3f6fb; +$c-text-muted: #929292; +$c-text-subtle: #8b92ad; +$c-white: #fff; +$c-success: #8fffaa; +$c-danger: #ff6b81; +$font-heading: 'Inter', 'Mark Pro', 'Segoe UI', sans-serif; +$font-body: 'Inter', 'Mark Pro', 'Segoe UI', sans-serif; +$radius-l: 32px; +$radius-m: 24px; +$radius-s: 16px; +$radius-xs: 12px; +$shadow-surface: 0 24px 60px rgba(0, 0, 0, 0.28); +$transition-duration: 0.3s; +$transition-timing: ease; +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$wide-min-width: 1440px; diff --git a/src/styles/utils/reset.scss b/src/styles/utils/reset.scss new file mode 100644 index 00000000..8c3a4497 --- /dev/null +++ b/src/styles/utils/reset.scss @@ -0,0 +1,15 @@ +h3, +h2, +p, +ul { + margin: 0; + padding: 0; +} + +li { + list-style: none; +} + +a { + text-decoration: none; +} diff --git a/style_config.txt b/style_config.txt new file mode 100644 index 00000000..e69de29b