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/.gitignore b/.gitignore index 1558091f..1718e160 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,4 @@ backstop_data dist .cache .parcel-cache + diff --git a/README.md b/README.md index 302783df..e71fdcbe 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # KateVR landing page (HARD) -**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** +**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** Implement landing page according to [Figma design](https://www.figma.com/file/Blpg4iapsI7fRqJeSp6DvK/KatVR?node-id=1%3A370) - Use BEM and SCSS @@ -25,7 +25,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Bl 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/layout_KateVR/). + [DEMO LINK](https://kristinakovalchuk.github.io/layout_KateVR/). 14. 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..94b3206e 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,893 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + KatVR + + + + + -

Hello Mate Academy

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

FREQUENTLY ASKED

+

QUESTIONS

+
+ +
+
+ + +
+

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

+

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

+
+
+ +
+ +
+

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

+

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

+
+
+ +
+ + +
+

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

+

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

+
+
+ +
+ + + +
+

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

+

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

+
+
+
+
+ +
+ More + +
+ +
+
+ +
+ +
+ +
+ +
+ +
+
+

HOW CAN WE HELP YOU?

+
+ +
+

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

+ +

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

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

Quantity

+ +
+ +
+
+ +
+

Price

+

1200$

+
+
+ +
+ +
+

First Name*

+ +
+ +
+

Last Name*

+ +
+ +
+

Email*

+ +
+ +
+

Phone Number*

+ +
+ +
+

Country*

+
+ +
+
+ +
+

City*

+
+ +
+
+ +
+

Shipping Adress*

+ +
+ +
+

Shipping Adress 2

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

Quantity

+ +
+ +
+
+ +
+

Price

+

1200$

+
+
+ +
+
+

+ Card Number* +

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

Card Holder Name*

+ +
+ +
+
+

Expiration Date*

+ +
+ +
+

CVV*

+ +
+
+ +
+
+
+ +
+

Thank you for your order!

+

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

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

MORE THAN GAMING!

+

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

+ +
+
+
+

EDUCATION

+

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

+
+ +
+
+

REAL ESTATE

+

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

+
+ +
+
+

FITNESS

+

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

+
+ +
+
+

SOCIAL INTERACTIONS

+

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

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

ABOUT PRODUCT

+ +
+

1

+ / +

5

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

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

+ + photo-button + +
+
+ +
+
+

Hello,

+

NICE TO MEET YOU!

+

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

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

TECH SPECS

+ +
+ + +
+ +
+ +
+

SENSOR

+

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

+
+ + +
+ +
+ + + +
+

BATTERRIES

+

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

+
+ +
+ +
+ + + +
+

CONNECTION

+

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

+
+
+ +
+
+
+ +
+
+

WHY KAT LOCO?

+ +
+ +
+ photo +

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

+
+ +
+ photo +

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.

+
+ +
+ photo +

WIRELESS SENSORS

+

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

+
+ + Buy Now +
+
+
+
+ + + + diff --git a/package-lock.json b/package-lock.json index 87fcefd8..66096135 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,12 +13,12 @@ "@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", "prettier": "^3.3.2", - "sass": "^1.93.2", + "sass": "^1.98.0", "stylelint": "^16.7.0", "stylelint-scss": "^6.4.1", "vite": "^6.3.6" @@ -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", @@ -4819,10 +4820,11 @@ } }, "node_modules/immutable": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz", - "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==", - "dev": true + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz", + "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==", + "dev": true, + "license": "MIT" }, "node_modules/import-fresh": { "version": "3.3.1", @@ -7308,13 +7310,14 @@ "dev": true }, "node_modules/sass": { - "version": "1.94.2", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.2.tgz", - "integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==", + "version": "1.98.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.98.0.tgz", + "integrity": "sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A==", "dev": true, + "license": "MIT", "dependencies": { "chokidar": "^4.0.0", - "immutable": "^5.0.2", + "immutable": "^5.1.5", "source-map-js": ">=0.6.2 <2.0.0" }, "bin": { diff --git a/package.json b/package.json index 7149ff15..069484cb 100644 --- a/package.json +++ b/package.json @@ -23,12 +23,12 @@ "@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", "prettier": "^3.3.2", - "sass": "^1.93.2", + "sass": "^1.98.0", "stylelint": "^16.7.0", "stylelint-scss": "^6.4.1", "vite": "^6.3.6" diff --git a/src/images/Layer 1.1.svg b/src/images/Layer 1.1.svg new file mode 100644 index 00000000..66975d2e --- /dev/null +++ b/src/images/Layer 1.1.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/about/kat-about-img.svg b/src/images/about/kat-about-img.svg new file mode 100644 index 00000000..15360283 --- /dev/null +++ b/src/images/about/kat-about-img.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/about/kat-about-text.svg b/src/images/about/kat-about-text.svg new file mode 100644 index 00000000..803908c7 --- /dev/null +++ b/src/images/about/kat-about-text.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/benefits/ben-card-1-kat.svg b/src/images/benefits/ben-card-1-kat.svg new file mode 100644 index 00000000..bdeab25a --- /dev/null +++ b/src/images/benefits/ben-card-1-kat.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/benefits/ben-card-2-kat.svg b/src/images/benefits/ben-card-2-kat.svg new file mode 100644 index 00000000..a5798b8d --- /dev/null +++ b/src/images/benefits/ben-card-2-kat.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/benefits/ben-card-3-kat..svg b/src/images/benefits/ben-card-3-kat..svg new file mode 100644 index 00000000..67677d44 --- /dev/null +++ b/src/images/benefits/ben-card-3-kat..svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/bg-img/kat-header-img.svg b/src/images/bg-img/kat-header-img.svg new file mode 100644 index 00000000..141668cf --- /dev/null +++ b/src/images/bg-img/kat-header-img.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/bg-img/video-play.svg b/src/images/bg-img/video-play.svg new file mode 100644 index 00000000..02b521dd --- /dev/null +++ b/src/images/bg-img/video-play.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/contact/arrow-white.svg b/src/images/contact/arrow-white.svg new file mode 100644 index 00000000..01f85f73 --- /dev/null +++ b/src/images/contact/arrow-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/contact/arrow.svg b/src/images/contact/arrow.svg new file mode 100644 index 00000000..2a9904e5 --- /dev/null +++ b/src/images/contact/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/contact/facebook-kat.svg b/src/images/contact/facebook-kat.svg new file mode 100644 index 00000000..c5ce9201 --- /dev/null +++ b/src/images/contact/facebook-kat.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/contact/redit-kat.svg b/src/images/contact/redit-kat.svg new file mode 100644 index 00000000..2ec59738 --- /dev/null +++ b/src/images/contact/redit-kat.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/contact/twitter-kat.svg b/src/images/contact/twitter-kat.svg new file mode 100644 index 00000000..cd292e38 --- /dev/null +++ b/src/images/contact/twitter-kat.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/contact/youtube-kat.svg b/src/images/contact/youtube-kat.svg new file mode 100644 index 00000000..bd0387c5 --- /dev/null +++ b/src/images/contact/youtube-kat.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/arrow-turn-back-kat.svg b/src/images/icon/arrow-turn-back-kat.svg new file mode 100644 index 00000000..1a2fbd8a --- /dev/null +++ b/src/images/icon/arrow-turn-back-kat.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-close-kat.svg b/src/images/icon/icon-close-kat.svg new file mode 100644 index 00000000..5e35784f --- /dev/null +++ b/src/images/icon/icon-close-kat.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/kate-lang_arrow.svg b/src/images/icon/kate-lang_arrow.svg new file mode 100644 index 00000000..4456bcdc --- /dev/null +++ b/src/images/icon/kate-lang_arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/kate-menu.svg b/src/images/icon/kate-menu.svg new file mode 100644 index 00000000..31499720 --- /dev/null +++ b/src/images/icon/kate-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/kate-fav.svg b/src/images/kate-fav.svg new file mode 100644 index 00000000..61cb0d54 --- /dev/null +++ b/src/images/kate-fav.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/kate-log.svg b/src/images/kate-log.svg new file mode 100644 index 00000000..9a3e6e74 --- /dev/null +++ b/src/images/kate-log.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/more-icon/kat-building.svg b/src/images/more-icon/kat-building.svg new file mode 100644 index 00000000..e44baa3f --- /dev/null +++ b/src/images/more-icon/kat-building.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/more-icon/kat-fitnes.svg b/src/images/more-icon/kat-fitnes.svg new file mode 100644 index 00000000..148862d2 --- /dev/null +++ b/src/images/more-icon/kat-fitnes.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/more-icon/ket-education.svg b/src/images/more-icon/ket-education.svg new file mode 100644 index 00000000..890e94ae --- /dev/null +++ b/src/images/more-icon/ket-education.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/more-icon/network.svg b/src/images/more-icon/network.svg new file mode 100644 index 00000000..5acbd30e --- /dev/null +++ b/src/images/more-icon/network.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/tech/Ellipse-kat.svg b/src/images/tech/Ellipse-kat.svg new file mode 100644 index 00000000..2d162854 --- /dev/null +++ b/src/images/tech/Ellipse-kat.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/tech/block-1-kat.svg b/src/images/tech/block-1-kat.svg new file mode 100644 index 00000000..dfc56f6d --- /dev/null +++ b/src/images/tech/block-1-kat.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/tech/block-2-kat.svg b/src/images/tech/block-2-kat.svg new file mode 100644 index 00000000..c1533eae --- /dev/null +++ b/src/images/tech/block-2-kat.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech/block-3-kat.svg b/src/images/tech/block-3-kat.svg new file mode 100644 index 00000000..e2961ab5 --- /dev/null +++ b/src/images/tech/block-3-kat.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech/tech-bg-img-kat.svg b/src/images/tech/tech-bg-img-kat.svg new file mode 100644 index 00000000..cf082aab --- /dev/null +++ b/src/images/tech/tech-bg-img-kat.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/tech/tech-minus.svg b/src/images/tech/tech-minus.svg new file mode 100644 index 00000000..d563a830 --- /dev/null +++ b/src/images/tech/tech-minus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/tech/tech-plus-kat.svg b/src/images/tech/tech-plus-kat.svg new file mode 100644 index 00000000..4a37bb8e --- /dev/null +++ b/src/images/tech/tech-plus-kat.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7..9badc801 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,62 @@ 'use strict'; + +document.addEventListener("DOMContentLoaded", function () { + + const switches = document.querySelectorAll(".header__bottom__switch"); + + switches.forEach((switchBlock) => { + const slides = switchBlock.querySelectorAll( + ".header__bottom__switch-progress-1, .header__bottom__switch-progress-2, .header__bottom__switch-progress-3" + ); + + const btnLeft = switchBlock.querySelector(".header__bottom__switch-btn-left"); + const btnRight = switchBlock.querySelector(".header__bottom__switch-btn-right"); + + let currentIndex = 0; + const totalSlides = slides.length; + + function showSlide(index) { + slides.forEach((slide) => { + slide.classList.remove("active"); + }); + + slides[index].classList.add("active"); + + btnLeft.disabled = index === 0; + btnRight.disabled = index === totalSlides - 1; + } + + btnRight.addEventListener("click", function (e) { + e.preventDefault(); + + if (currentIndex < totalSlides - 1) { + currentIndex++; + showSlide(currentIndex); + } + }); + + btnLeft.addEventListener("click", function (e) { + e.preventDefault(); + + if (currentIndex > 0) { + currentIndex--; + showSlide(currentIndex); + } + }); + + showSlide(currentIndex); + }); + + + const questions = document.querySelectorAll(".faq__question"); + + questions.forEach((question) => { + question.addEventListener("click", () => { + question.classList.toggle("active"); + + const icon = question.querySelector(".faq__question__title__icon"); + icon.classList.toggle("active"); + }); + }); + +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 619b8c52..e54998b6 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,6 @@ @font-face { font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/FontFont_FF.Mark.Pro.otf') format('otf'); font-weight: normal; font-style: normal; + src: url('../fonts/FontFont_FF.Mark.Pro.otf') format('otf'); } diff --git a/src/styles/about.scss b/src/styles/about.scss new file mode 100644 index 00000000..e9ddac07 --- /dev/null +++ b/src/styles/about.scss @@ -0,0 +1,252 @@ +.about { + overflow: hidden; + padding-block: 50px; + background: $bg-gradient; + + &__content { + display: flex; + flex-direction: column; + gap: 79px; + + @include on-tablet { + gap: 84px; + } + + @include on-tablet { + gap: 183px; + } + } + + @include on-tablet { + padding-block: 70px 51px; + } + + @include on-tablet { + padding-block: 100px; + } + + &__first { + @include page-grid; + + &__left { + grid-column: 1 / -1; + grid-row: 1 /4; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 3/8; + } + } + + &__right { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / -1; + } + + @include on-desktop { + grid-column: 9/-1; + } + } + + &__title { + grid-column: 1 / -1; + + margin: 0 0 20px; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 1; + color: $white-color; + + @include on-tablet { + grid-column: 4 / -1; + margin: 0 0 30px; + } + + @include on-desktop { + grid-column: 9/-1; + margin: 0 0 30px; + font-size: 36px; + } + } + + &__description { + margin: 0 0 15px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: $greu-header-color; + + @include on-tablet { + margin: 0 0 21px; + } + + @include on-desktop { + margin: 0 0 24px; + } + } + + &__numder { + display: none; + grid-column: span 2; + grid-row: 1/4; + justify-self: end; + + margin: 0; + + @include on-desktop { + display: flex; + } + + &__item { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1; + color: $main-blue-color; + } + } + + &__img { + display: flex; + flex-direction: column; + gap: 14px; + + width: 100%; + margin-bottom: 20px; + + &__photo { + height: 189px; + object-fit: cover; + + @include on-tablet { + height: 270px; + } + + @include on-desktop { + height: 290px; + } + } + } + + &__button { + &-big { + display: none; + justify-content: center; + + @include on-desktop { + display: flex; + } + } + + &-small { + display: flex; + gap: 6px; + justify-content: center; + + @include on-desktop { + display: none; + } + + &__round { + width: 4px; + height: 4px; + border-radius: 50px; + background-color: $small-button-gray-color; + + &--active { + background-color: #ababab; + } + } + } + } + } + + &__second { + @include page-grid; + + &__left { + grid-column: 1 / -1; + align-self: center; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1/6; + } + } + + &__right { + grid-column: 1 / -1; + grid-row: 1 /4; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 8/-1; + } + } + + &__img { + display: none; + + @include on-tablet { + display: flex; + height: 257px; + } + + @include on-desktop { + height: 342px; + } + } + + &__title { + margin-bottom: 22px; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 1; + color: $white-color; + + &__blue { + font-weight: 400; + color: $main-blue-color; + } + + &-small { + margin: 0 0 11px; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1; + color: $main-blue-color; + } + } + + &__description { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: $white-color; + } + } +} diff --git a/src/styles/benefits.scss b/src/styles/benefits.scss new file mode 100644 index 00000000..01f8aa97 --- /dev/null +++ b/src/styles/benefits.scss @@ -0,0 +1,159 @@ +.benefits { + padding-block: 50px; + background: $bg-gradient; + + @include on-tablet { + padding-block: 70px; + } + + @include on-desktop { + padding-block: 100px 102px; + } + + &__title { + margin: 0 0 32px; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 1; + color: $white-color; + + @include on-desktop { + margin: 0 0 84px; + font-size: 36px; + text-align: center; + } + + &__blue { + font-weight: 400; + color: $main-blue-color; + } + } + + &__content { + row-gap: 20px; + + @include page-grid; + + @include on-tablet { + row-gap: 0; + } + } + + &__card { + grid-column: 1 / -1; + + @include hover(transform, scale(1.03)); + + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + grid-column: span 4; + } + + &__img { + display: none; + margin-inline: auto; + + @include on-tablet { + display: flex; + margin-bottom: 25.5px; + } + + @include on-desktop { + margin-bottom: 34px; + } + + &-1 { + width: 80px; + height: 80px; + } + + &-2 { + width: 89px; + height: 81px; + } + + &-3 { + width: 105px; + height: 75px; + + @include on-desktop { + width: 111px; + height: 79px; + } + } + } + + &__title { + margin: 0 0 11px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 900; + line-height: 1; + color: $white-color; + + @include on-tablet { + margin: 0 0 37px; + text-align: center; + } + + @include on-desktop { + margin: 0 0 18px; + } + } + + &__description { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: $greu-header-color; + + @include on-tablet { + text-align: center; + } + } + } + + &__button { + display: none; + grid-column: 3 /5; + align-items: center; + justify-content: center; + + width: 200px; + height: 48px; + margin-top: 90px; + margin-inline: auto; + border-radius: 4px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: $white-color; + text-decoration: none; + + background-color: $main-blue-color; + + transition: all 0.3s; + + &:hover { + color: $main-blue-color; + background-color: $white-color; + } + + @include on-desktop { + display: flex; + grid-column: 5 / 9; + justify-content: center; + } + } +} diff --git a/src/styles/byu-main.scss b/src/styles/byu-main.scss new file mode 100644 index 00000000..1549e38b --- /dev/null +++ b/src/styles/byu-main.scss @@ -0,0 +1,449 @@ +.buy { + &-main { + width: 100%; + min-height: 100vh; + background: $bg-gradient; + } + + &__html { + background: $bg-gradient; + } + + &-top-bar { + display: flex; + justify-content: space-between; + width: 100%; + padding-block: 20px 33px; + + @include on-tablet { + padding-block: 30px; + } + + @include on-desktop { + padding-block: 40px; + } + } + + &-header { + display: flex; + flex-direction: column; + width: 100%; + + &__bottom { + display: flex; + justify-content: space-between; + margin: 0; + margin-inline: -20px; + + @include on-tablet { + margin-inline: -34px; + } + + &__pages { + position: relative; + + display: flex; + justify-content: center; + + width: 37%; + margin-bottom: 30px; + + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 500; + line-height: 1.3; + color: #fff; + + opacity: 0.4; + + transition: 0.3s; + + &::after { + content: ''; + + position: absolute; + bottom: -32px; + left: 0; + + width: 100%; + height: 1px; + + background-color: $main-blue-color; + + @include on-tablet { + bottom: -10px; + } + + @include on-desktop { + left: 50%; + transform: translateX(-50%); + + width: 4px; + height: 4px; + border-radius: 50%; + + background-color: currentColor; + } + } + + @include on-tablet { + font-size: 14px; + } + } + } + } + + &-content { + &__block-1 { + &__content { + @include on-desktop { + @include page-grid; + + overflow: hidden; + } + } + + &__photo { + display: none; + grid-column: 1 / 7; + + width: 100%; + max-width: 820px; + height: 277px; + margin-bottom: 30px; + margin-inline: auto; + + object-fit: cover; + + @include on-tablet { + display: flex; + } + + @include on-desktop { + position: absolute; + display: flex; + height: 279px; + margin-left: -150px; + } + } + + &__right { + display: flex; + grid-column: 7/ -1; + grid-row: 1 / 3; + flex-direction: column; + gap: 30px; + + @include on-tablet { + --columns: 6; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + gap: 30px 20px; + + @include on-desktop { + row-gap: 40px; + } + } + } + + &__amount-prise { + display: flex; + grid-column: 1 / -1; + grid-row: 2; + gap: 75px; + align-self: start; + justify-content: center; + + margin-bottom: 30px; + + @include on-tablet { + justify-content: left; + } + + &__text { + margin: 0 0 10px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.3; + color: $greu-header-color; + } + + &__number { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 26px; + font-weight: 500; + line-height: 1; + color: $main-blue-color; + } + } + + &__quantity { + position: relative; + width: 90px; + height: 41px; + + &::after { + pointer-events: none; + content: ''; + + position: absolute; + top: 50%; + right: 12px; + transform: translateY(-50%); + + width: 0; + height: 0; + border-top: 7px solid $main-blue-color; + border-right: 6px solid transparent; + border-left: 6px solid transparent; + } + + &__select { + cursor: pointer; + + width: 90px; + height: 41px; + padding-right: 24px; + border: none; + + font-family: Inter, sans-serif; + font-size: 18px; + color: $white-color; + text-align: center; + + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: $auxiliary-windows-color; + background-image: none; + outline: none; + } + + &__select::-ms-expand { + display: none; + } + } + + &__choises { + display: flex; + flex-direction: column; + column-gap: 30px; + width: 100%; + + @include on-tablet { + flex-direction: row; + } + } + + &__region { + width: 100%; + + &__select { + width: 100%; + + @include on-tablet { + min-width: 100%; + } + } + + &__text { + margin: 0 0 17px; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1.3; + color: $greu-header-color; + } + } + + &__group { + margin-bottom: 0; + + &--left { + grid-column: 1 / 4; + } + + &--right { + grid-column: 4 / -1; + } + } + } + + &__block-2 { + &__card-img { + display: none; + + @include on-tablet { + display: flex; + } + } + + &__amount-prise { + display: flex; + justify-content: center; + + @include on-desktop { + justify-content: start; + } + } + + &__right { + display: flex; + grid-column: 7 / 12; + flex-direction: column; + gap: 30px; + justify-content: center; + + max-width: 560px; + margin-inline: auto; + + @include on-desktop { + row-gap: 40px; + } + } + + &__card-inputs { + display: flex; + gap: 15px; + + @include on-tablet{ + gap: 30px; + } + } + + &__card-row { + display: flex; + gap: 30px; + } + + &__card-number { + width: 57px; + border: none; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + + font-size: 18px; + font-weight: 400; + line-height: 1; + color: $white-color; + text-align: center; + letter-spacing: 0.25em; + + background: transparent; + outline: none; + + &::placeholder { + color: rgba(255, 255, 255, 0.28); + } + + &:focus { + border-bottom-color: $main-blue-color; + } + + @include on-tablet { + width: 80px; + font-size: 21px; + } + } + + &__label { + display: block; + + margin: 0 0 17px; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + color: $main-blue-color; + } + + &__input { + width: 100%; + border: none; + border-bottom: 1px solid $input-border-color; + + font-family: Inter, sans-serif; + font-size: 20px; + font-weight: 400; + line-height: 1.3; + color: $main-blue-color; + + background-color: transparent; + outline: none; + + &-1 { + width: 90px; + } + + &-2 { + width: 50px; + } + } + + &__bottom { + --columns: 6; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + gap: 30px 20px; + } + + &__group { + grid-column: span 3; + } + } + + &__block-3 { + &__title { + width: 100%; + margin: 0 0 20px; + + font-family: Inter, sans-serif; + font-size: 26px; + font-weight: 900; + line-height: 1.3; + color: $white-color; + text-align: center; + text-transform: uppercase; + + &__blue { + font-weight: 400; + color: $main-blue-color; + } + + @include on-tablet { + font-size: 46px; + } + } + + &__description { + margin: 0 0 50px; + + font-family: Inter, sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 1.3; + color: $white-color; + text-align: center; + } + + &__button { + width: 100%; + height: 40px; + + @include button; + + @include on-tablet { + width: 458px; + height: 48px; + margin-inline: auto; + } + } + } + } +} diff --git a/src/styles/contact.scss b/src/styles/contact.scss new file mode 100644 index 00000000..acdf04a5 --- /dev/null +++ b/src/styles/contact.scss @@ -0,0 +1,264 @@ +.contact { + padding-block: 50px; + + @include on-tablet { + padding-block: 70px 90px; + } + + @include on-desktop { + padding-block: 100px 0; + } + + &__content { + position: relative; + align-self: start; + + @include page-grid; + } + + &__question { + margin: 0 0 11px; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1; + color: $main-blue-color; + letter-spacing: 0%; + } + + &__text { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 1; + color: $white-color; + letter-spacing: 0%; + + @include on-tablet { + font-size: 36px; + } + + &__blue { + color: $main-blue-color; + } + } + + &__group { + margin-bottom: 24px; + } + + &__input { + width: 100%; + border: none; + border-bottom: 1px solid $input-border-color; + + color: $main-blue-color; + + background-color: transparent; + outline: none; + + &__text { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: $greu-header-color; + letter-spacing: 0%; + } + + &__massage { + min-width: 100%; + max-width: 100%; + height: 68px; + min-height: 68px; + max-height: 68px; + } + } + + &__button { + width: 100%; + margin-bottom: 30px; + border: none; + + @include button; + + @include on-tablet { + width: 200px; + margin-bottom: 0; + } + } + + &__buttons { + display: flex; + justify-content: space-between; + width: 100%; + margin-top: 30px; + + @include on-tablet { + margin-top: 48px; + } + + @include on-desktop { + margin-top: 90px; + } + } + + &__arrow { + display: none; + + @include on-tablet { + display: flex; + } + } + + &__title { + grid-column: 1 /-1; + margin-bottom: 32px; + + @include on-tablet { + grid-column: 1 /3; + margin-bottom: 50px; + } + + @include on-desktop { + grid-column: 1 /7; + margin-bottom: 26px; + } + } + + &__right { + grid-column: 1 /-1; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 1 / 5; + margin-bottom: 130px; + } + + @include on-desktop { + grid-column: 7/ -1; + margin-bottom: 100px; + } + } + + &__link { + --columns: 2; + + display: grid; + grid-column: 1 / -1; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + padding-top: 50px; + + @include on-tablet { + display: flex; + grid-row: 5; + flex-direction: row; + align-items: center; + justify-content: space-between; + + margin: 0; + padding-top: 0; + padding-block: 21px; + } + + @include on-desktop { + padding-block: 39px; + } + } + + &__data { + position: absolute; + + display: flex; + grid-column: 2 / -1; + grid-row: 4; + flex-direction: column; + gap: 12px; + + padding-top: 74px; + + @include on-tablet { + position: static; + grid-column: 1 /3; + grid-row: 3; + padding-top: 0; + } + + &__text { + font-family: Inter, sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 1; + color: $greu-header-color; + text-decoration: none; + } + } + + &__description { + grid-column: 1 / -1; + + margin: 0 0 50px; + + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 400; + line-height: 1.5; + color: $greu-header-color; + letter-spacing: 0%; + + @include on-tablet { + grid-column: 1 /4; + margin-bottom: 76px; + } + } + + &__icons { + display: flex; + grid-column: 2 /-1; + gap: 22.5px; + align-items: center; + align-self: end; + + @include on-tablet { + margin-bottom: 0; + } + } + + &__logo { + width: 69px; + height: 14px; + margin-bottom: 15px; + + @include on-tablet { + width: 72px; + margin-bottom: 0; + } + } + + &__list { + display: flex; + grid-column: 1 /2; + flex-direction: column; + gap: 12px; + + @include on-tablet { + flex-direction: row; + gap: 45px; + } + } + + &__item { + font-size: 13px; + + @include on-tablet { + font-size: 14px; + } + } +} diff --git a/src/styles/faq.scss b/src/styles/faq.scss new file mode 100644 index 00000000..d03d94d4 --- /dev/null +++ b/src/styles/faq.scss @@ -0,0 +1,194 @@ +.faq { + pointer-events: none; + + position: fixed; + z-index: 60; + top: 0; + left: 0; + transform: translateX(-100%); + + overflow-y: auto; + display: flex; + flex-direction: column; + place-items: start center; + + width: 100%; + height: 100%; + + opacity: 0; + background-color: rgba($color: #000, $alpha: 0.7); + + transition: all 0.5s; + + @include page-grid; + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + + @include on-desktop { + overflow: hidden; + place-items: center; + } + + &__content { + display: flex; + grid-column: 1 /-1; + flex-direction: column; + + width: 100%; + max-width: 1440px; + margin-inline: auto; + + background-color: $auxiliary-windows-color; + + @include on-desktop { + overflow-y: auto; + grid-column: 2 /-2; + max-height: 670px; // не більше екрану + } + } + + &__wrapper { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 33px; + } + + @include on-desktop { + padding-inline: 95px 92px; + } + } + + &__title { + display: flex; + grid-column: 1 /-1; + flex-direction: column; + margin-bottom: 17px; + + @include on-tablet { + grid-column: 1 /4; + } + + @include on-desktop { + grid-column: 1 /7; + margin-bottom: 19px; + } + + &-white { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 1.3; + color: $white-color; + + @include on-desktop { + font-size: 36px; + } + } + + &-blue { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 400; + line-height: 1.3; + color: $main-blue-color; + + @include on-desktop { + font-size: 36px; + } + } + } + + &__questions { + display: flex; + flex-direction: column; + gap: 13px; + margin-bottom: 50px; + } + + &__question { + padding-inline: 27px; + border: 1px solid $main-blue-color; + border-radius: 4px; + outline: none; + + &:focus { + outline: none; + } + + &__content { + overflow: hidden; + max-height: 0; + transition: max-height 0.5s ease; + } + + &.active &__content { + max-height: 400px; + } + + &__title { + display: flex; + gap: 10px; + align-items: center; + justify-content: space-between; + + width: 100%; + border: none; + + background-color: $auxiliary-windows-color; + + &__text { + margin-block: 18px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: $main-blue-color; + text-decoration: none; + } + + &__icon { + transform: rotate(-90deg); + transition: transform 0.5s ease; + + &.active { + transform: rotate(0deg); + border: none; + } + } + } + + &__description { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: $greu-header-color; + } + + &__footer-text { + margin-block: 20px 23px; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: $dark-gray-color; + } + } + + &__more { + padding-bottom: 50px; + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 00000000..f5458860 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,321 @@ +.header { + display: flex; + flex-direction: column; + background: $bg-gradient; + + @include on-tablet { + padding-bottom: 70px; + } + + @include on-desktop { + padding-bottom: 84px; + } + + &__bottom { + position: relative; + width: 100%; + + @include page-grid; + + @include on-tablet { + padding-top: 55px; + } + + &__img { + display: flex; + grid-column: 1 /-1; + + width: 100vw; + max-height: 155px; + margin-left: calc(-50vw + 45%); + + object-fit: cover; + + @media (min-width: 430px) { + max-height: 200px; + } + + @media (min-width: 530px) { + max-height: 250px; + } + + @include on-tablet { + position: absolute; + transform: translateX(0); + + grid-column: 3 /-1; + + width: 100%; + max-height: 100%; + margin-left: 40px; + } + + @include on-desktop { + grid-column: 5 /-1; + } + } + + &__title { + position: relative; + grid-column: 1 /-1; + margin-bottom: 17px; + + @include on-tablet { + grid-column: 1 /4; + } + + @include on-desktop { + grid-column: 1 /7; + margin-bottom: 19px; + } + + &-white { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 26px; + font-weight: 900; + line-height: 1.3; + color: $white-color; + + @include on-desktop { + font-size: 46px; + } + } + + &-blue { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 26px; + font-weight: 400; + line-height: 1.3; + color: $main-blue-color; + + @include on-desktop { + font-size: 46px; + } + } + } + + &__description { + position: relative; + grid-column: 1 /-1; + width: 100%; + margin-bottom: 43px; + + @include on-tablet { + grid-column: 1 /4; + max-width: 468px; + margin: 0; + } + + @include on-desktop { + grid-column: 2 /6; + } + } + + &__desc-text { + margin: 0 0 10px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.5; + color: $greu-header-color; + + @include on-tablet { + margin: 0 0 20px; + } + + @include on-desktop { + margin: 0 0 15px; + } + } + + &__prise { + margin: 0 0 16px; + + font-family: Inter, sans-serif; + font-size: 18px; + font-weight: 500; + line-height: 1; + color: $white-color; + text-align: center; + + @include on-tablet { + margin: 0 0 24px; + text-align: left; + } + + @include on-desktop { + margin: 0 0 20px; + } + } + + &__play { + width: auto; + height: 66.05px; + + &-link { + display: flex; + width: 100%; + text-decoration: none; + } + } + + &__button { + position: absolute; + bottom: -20px; + + width: 100%; + height: 40px; + + box-shadow: 4px 4px 4px 0 #000000ad; + + @include button; + + @include on-tablet { + position: static; + bottom: 0; + + display: flex; + + width: 458px; + height: 48px; + } + + &-wrapper { + @include on-tablet { + position: fixed; + z-index: 50; + bottom: 0; + left: 0; + + display: flex; + flex-direction: column; + align-items: center; + + width: 100%; + padding-block: 40px 30px; + + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0.01) 0%, + rgba(0, 0, 0, 0.4) 20%, + rgba(0, 0, 0, 0.7) 75%, + rgba(0, 0, 0, 0.9) 100% + ); + } + + @include on-desktop { + display: none; + } + } + } + + &__hidden { + z-index: 3; + + display: none; + grid-column: 1 /-1; + align-items: center; + justify-content: space-between; + + width: 100%; + margin-top: 84px; + + @include on-desktop { + display: flex; + } + } + + &__page { + &-links { + display: flex; + gap: 39px; + margin: 0; + } + + &-link { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.5; + color: $white-color; + text-decoration: none; + + @include hover(color, $main-blue-color); + } + } + + &__more { + display: flex; + flex-direction: column; + gap: 7px; + align-items: center; + + &-link { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.5; + color: $white-color; + text-decoration: none; + + @include hover(color, $main-blue-color); + } + } + + &__switch { + display: flex; + flex-direction: column; + gap: 10px; + width: 207px; + + &__text { + display: flex; + justify-content: space-between; + } + + &-btn { + padding: 0; + border: none; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.5; + color: $white-color; + text-decoration: none; + + background-color: transparent; + + @include hover(color, $main-blue-color); + + &:disabled { + pointer-events: none; + cursor: default; + opacity: 0.4; + } + } + + &-line { + display: flex; + width: 100%; + } + } + } +} + +.header__bottom__switch-progress-1, +.header__bottom__switch-progress-2, +.header__bottom__switch-progress-3 { + width: 69px; + border: 1px solid #212121; + transition: all 0.3s; +} + +.active { + border: 1px solid $main-blue-color; +} diff --git a/src/styles/help.scss b/src/styles/help.scss new file mode 100644 index 00000000..c02780cf --- /dev/null +++ b/src/styles/help.scss @@ -0,0 +1,111 @@ +.help { + &__content { + padding-bottom: 73px; + + @include page-grid; + + @include on-tablet { + padding-bottom: 124px; + } + + @include on-desktop { + padding-bottom: 82px; + } + } + + &__title { + grid-column: 1 /-1; + margin-block: 0 30px; + } + + &__description { + grid-column: 1 /-1; + + margin: 0 0 20px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: $greu-header-color; + } + + &__blue { + margin: 0; + color: $main-blue-color; + } + + &__link { + grid-column: 1 /-1; + margin-bottom: 30px; + + @include on-tablet { + grid-column: 1 /3; + margin: 0; + } + + @include on-desktop { + grid-column: 1 /4; + } + + &__list { + display: flex; + flex-direction: column; + gap: 20px; + + margin: 0; + padding: 0; + + list-style: none; + } + + &__item { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + text-decoration: none; + } + } + + &__date { + grid-column: 1 /-1; + margin: 0; + + @include on-tablet { + grid-column: 3 / -1; + } + + @include on-desktop { + grid-column: 4 / -1; + } + + &__list { + display: flex; + flex-direction: column; + gap: 10px; + + margin: 0; + padding: 0; + + list-style: none; + + @include on-tablet { + gap: 24px; + } + } + + &__item { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: $greu-header-color; + text-decoration: none; + } + } +} diff --git a/src/styles/icon.scss b/src/styles/icon.scss new file mode 100644 index 00000000..0932287b --- /dev/null +++ b/src/styles/icon.scss @@ -0,0 +1,160 @@ +.icon { + display: flex; + width: 10px; + height: 10px; + background-repeat: no-repeat; + + &--lang-arrow { + background-image: url('../images/icon/kate-lang_arrow.svg'); + } + + &--menu { + width: 20px; + height: 10px; + background-image: url('../images/icon/kate-menu.svg'); + + @include hover(transform, scale(1.2)); + + @include on-tablet { + width: 29.25px; + height: 13px; + } + + @include on-desktop { + display: none; + } + } + + &--close { + width: 17px; + height: 17px; + background-image: url('../images/icon/icon-close-kat.svg'); + + @include hover(transform, scale(1.2)); + } + + &--arrow-turn-back { + width: 8.5px; + height: 17px; + padding-inline: 5px; + background-image: url('../images/icon/arrow-turn-back-kat.svg'); + } + + &--education { + width: 98px; + height: 81px; + background-image: url('../images/more-icon/ket-education.svg'); + } + + &--building { + width: 84px; + height: 84px; + background-image: url('../images/more-icon/kat-building.svg'); + } + + &--fitnes { + width: 110px; + height: 80px; + background-image: url('../images/more-icon/kat-fitnes.svg'); + } + + &--network { + width: 83px; + height: 83px; + background-image: url('../images/more-icon/network.svg'); + } + + &--tech-plus { + cursor: pointer; + + width: 12px; + height: 12px; + border: none; + + background-color: $main-blue-color; + background-image: url('../images/tech/tech-plus-kat.svg'); + outline: none; + + @include on-tablet { + width: 16px; + height: 16px; + } + + &:focus { + height: 1px; + background-image: url('../images/tech/tech-minus.svg'); + } + + @include on-tablet { + width: 22px; + height: 22px; + background-size: 22px; + } + + @include on-desktop { + display: none; + } + } + + &--facebook { + width: 8px; + height: 15px; + background-image: url('../images/contact/facebook-kat.svg'); + + @include hover(transform, scale(1.2)); + } + + &--twitter { + width: 19px; + height: 14px; + background-image: url('../images/contact/twitter-kat.svg'); + + @include hover(transform, scale(1.2)); + } + + &--youtube { + width: 18px; + height: 14px; + background-image: url('../images/contact/youtube-kat.svg'); + + @include hover(transform, scale(1.2)); + } + + &--redit { + width: 18px; + height: 18px; + background-image: url('../images/contact/redit-kat.svg'); + + @include hover(transform, scale(1.2)); + } + + &--arrow { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + width: 48px; + height: 48px; + border: 1px solid $main-blue-color; + border-radius: 50%; + + background-image: url('../images/contact/arrow.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: 15.3px 8.6px; + + transition: all 0.3s; + + &:hover { + transform: scale(1.2); + + width: 48px; + height: 48px; + + background-color: $main-blue-color; + background-image: url('../images/contact/arrow-white.svg'); + } + } +} diff --git a/src/styles/lang.scss b/src/styles/lang.scss new file mode 100644 index 00000000..02cfa3d1 --- /dev/null +++ b/src/styles/lang.scss @@ -0,0 +1,86 @@ +.lang-switcher { + display: inline-block; + .lang-switcher__details { + position: relative; + } + + &__summary { + cursor: pointer; + display: flex; + align-items: center; + list-style: none; + } + + &__summary::-webkit-details-marker { + display: none; + } + + &__current { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: $main-blue-color; + } + + &__arrow { + position: absolute; + top: 50%; + left: 25px; + + width: 0; + height: 0; + border-top: 6px solid $main-blue-color; + border-right: 4.5px solid transparent; + border-left: 4.5px solid transparent; + } + + &__dropdown { + position: absolute; + z-index: 10; + top: calc(100% + 8px); + left: 0; + + box-sizing: border-box; + width: 50px; + padding-block: 12px; + border: none; + border-radius: 4px; + + background-color: #1c1740; + } + + &__option { + display: flex; + align-items: center; + justify-content: center; + + padding: 12px; + border: none; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1; + color: $main-blue-color; + text-decoration: none; + + background-color: transparent; + outline: none; + box-shadow: none; + } + + &__option:hover, + &__option:focus, + &__option:active { + color: #fff; + background-color: transparent; + outline: none; + box-shadow: none; + } + + &__option--active { + color: #fff; + } +} + diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 00000000..551ba98c --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,3728 @@ +@charset "UTF-8"; + +h1 { + font-family: Roboto, sans-serif; + font-weight: 400; +} + +@font-face { + font-family: Roboto, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; + src: url("../fonts/FontFont_FF.Mark.Pro.otf") format("otf"); +} + +.header { + display: flex; + flex-direction: column; + background: linear-gradient(107.56deg, #191536 0%, #000 100%); +} + +@media (min-width: 640px) { + .header { + padding-bottom: 70px; + } +} + +@media (min-width: 1440px) { + .header { + padding-bottom: 84px; + } +} + +.header__bottom { + --columns: 2; + + position: relative; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + width: 100%; +} + +@media (min-width: 640px) { + .header__bottom { + --columns: 6; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) { + .header__bottom { + --columns: 12; + + column-gap: 30px; + } +} + +@media (min-width: 640px) { + .header__bottom { + padding-top: 55px; + } +} + +.header__bottom__img { + display: flex; + grid-column: 1/-1; + + width: 100vw; + max-height: 155px; + margin-left: calc(-50vw + 45%); + + object-fit: cover; +} + +@media (min-width: 430px) { + .header__bottom__img { + max-height: 200px; + } +} + +@media (min-width: 530px) { + .header__bottom__img { + max-height: 250px; + } +} + +@media (min-width: 640px) { + .header__bottom__img { + position: absolute; + transform: translateX(0); + + grid-column: 3/-1; + + width: 100%; + max-height: 100%; + margin-left: 40px; + } +} + +@media (min-width: 1440px) { + .header__bottom__img { + grid-column: 5/-1; + } +} + +.header__bottom__title { + position: relative; + grid-column: 1/-1; + margin-bottom: 17px; +} + +@media (min-width: 640px) { + .header__bottom__title { + grid-column: 1/4; + } +} + +@media (min-width: 1440px) { + .header__bottom__title { + grid-column: 1/7; + margin-bottom: 19px; + } +} + +.header__bottom__title-white { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 26px; + font-weight: 900; + line-height: 1.3; + color: #fff; +} + +@media (min-width: 1440px) { + .header__bottom__title-white { + font-size: 46px; + } +} + +.header__bottom__title-blue { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 26px; + font-weight: 400; + line-height: 1.3; + color: #05c2df; +} + +@media (min-width: 1440px) { + .header__bottom__title-blue { + font-size: 46px; + } +} + +.header__bottom__description { + position: relative; + grid-column: 1/-1; + width: 100%; + margin-bottom: 43px; +} + +@media (min-width: 640px) { + .header__bottom__description { + grid-column: 1/4; + max-width: 468px; + margin: 0; + } +} + +@media (min-width: 1440px) { + .header__bottom__description { + grid-column: 2/6; + } +} + +.header__bottom__desc-text { + margin: 0 0 10px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.5; + color: #929292; +} + +@media (min-width: 640px) { + .header__bottom__desc-text { + margin: 0 0 20px; + } +} + +@media (min-width: 1440px) { + .header__bottom__desc-text { + margin: 0 0 15px; + } +} + +.header__bottom__prise { + margin: 0 0 16px; + + font-family: Inter, sans-serif; + font-size: 18px; + font-weight: 500; + line-height: 1; + color: #fff; + text-align: center; +} + +@media (min-width: 640px) { + .header__bottom__prise { + margin: 0 0 24px; + text-align: left; + } +} + +@media (min-width: 1440px) { + .header__bottom__prise { + margin: 0 0 20px; + } +} + +.header__bottom__play { + width: auto; + height: 66.05px; +} + +.header__bottom__play-link { + display: flex; + width: 100%; + text-decoration: none; +} + +.header__bottom__button { + position: absolute; + bottom: -20px; + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 48px; + border-radius: 4px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: #fff; + text-decoration: none; + + background-color: #05c2df; + box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.68); + + transition: all 0.3s; +} + +.header__bottom__button:hover { + color: #05c2df; + background-color: #fff; +} + +@media (min-width: 640px) { + .header__bottom__button { + position: static; + bottom: 0; + + display: flex; + + width: 458px; + height: 48px; + } +} + +@media (min-width: 640px) { + .header__bottom__button-wrapper { + position: fixed; + z-index: 50; + bottom: 0; + left: 0; + + display: flex; + flex-direction: column; + align-items: center; + + width: 100%; + padding-block: 40px 30px; + + background: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0.9) 100%); + } +} + +@media (min-width: 1440px) { + .header__bottom__button-wrapper { + display: none; + } +} + +.header__bottom__hidden { + z-index: 3; + + display: none; + grid-column: 1/-1; + align-items: center; + justify-content: space-between; + + width: 100%; + margin-top: 84px; +} + +@media (min-width: 1440px) { + .header__bottom__hidden { + display: flex; + } +} + +.header__bottom__page-links { + display: flex; + gap: 39px; + margin: 0; +} + +.header__bottom__page-link { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.5; + color: #fff; + text-decoration: none; + + transition: color 0.3s; +} + +.header__bottom__page-link:hover { + color: #05c2df; +} + +.header__bottom__more { + display: flex; + flex-direction: column; + gap: 7px; + align-items: center; +} + +.header__bottom__more-link { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.5; + color: #fff; + text-decoration: none; + + transition: color 0.3s; +} + +.header__bottom__more-link:hover { + color: #05c2df; +} + +.header__bottom__switch { + display: flex; + flex-direction: column; + gap: 10px; + width: 207px; +} + +.header__bottom__switch__text { + display: flex; + justify-content: space-between; +} + +.header__bottom__switch-btn { + padding: 0; + border: none; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.5; + color: #fff; + text-decoration: none; + + background-color: transparent; + + transition: color 0.3s; +} + +.header__bottom__switch-btn:hover { + color: #05c2df; +} + +.header__bottom__switch-btn:disabled { + pointer-events: none; + cursor: default; + opacity: 0.4; +} + +.header__bottom__switch-line { + display: flex; + width: 100%; +} + +.header__bottom__switch-progress-1, +.header__bottom__switch-progress-2, +.header__bottom__switch-progress-3 { + width: 69px; + border: 1px solid #212121; + transition: all 0.3s; +} + +.active { + border: 1px solid #05c2df; +} + +.icon { + display: flex; + width: 10px; + height: 10px; + background-repeat: no-repeat; +} + +.icon--lang-arrow { + background-image: url("../images/icon/kate-lang_arrow.svg"); +} + +.icon--menu { + width: 20px; + height: 10px; + background-image: url("../images/icon/kate-menu.svg"); + transition: transform 0.3s; +} + +.icon--menu:hover { + transform: scale(1.2); +} + +@media (min-width: 640px) { + .icon--menu { + width: 29.25px; + height: 13px; + } +} + +@media (min-width: 1440px) { + .icon--menu { + display: none; + } +} + +.icon--close { + width: 17px; + height: 17px; + background-image: url("../images/icon/icon-close-kat.svg"); + transition: transform 0.3s; +} + +.icon--close:hover { + transform: scale(1.2); +} + +.icon--arrow-turn-back { + width: 8.5px; + height: 17px; + padding-inline: 5px; + background-image: url("../images/icon/arrow-turn-back-kat.svg"); +} + +.icon--education { + width: 98px; + height: 81px; + background-image: url("../images/more-icon/ket-education.svg"); +} + +.icon--building { + width: 84px; + height: 84px; + background-image: url("../images/more-icon/kat-building.svg"); +} + +.icon--fitnes { + width: 110px; + height: 80px; + background-image: url("../images/more-icon/kat-fitnes.svg"); +} + +.icon--network { + width: 83px; + height: 83px; + background-image: url("../images/more-icon/network.svg"); +} + +.icon--tech-plus { + cursor: pointer; + + width: 12px; + height: 12px; + border: none; + + background-color: #05c2df; + background-image: url("../images/tech/tech-plus-kat.svg"); + outline: none; +} + +@media (min-width: 640px) { + .icon--tech-plus { + width: 16px; + height: 16px; + } +} + +.icon--tech-plus:focus { + height: 1px; + background-image: url("../images/tech/tech-minus.svg"); +} + +@media (min-width: 640px) { + .icon--tech-plus { + width: 22px; + height: 22px; + background-size: 22px; + } +} + +@media (min-width: 1440px) { + .icon--tech-plus { + display: none; + } +} + +.icon--facebook { + width: 8px; + height: 15px; + background-image: url("../images/contact/facebook-kat.svg"); + transition: transform 0.3s; +} + +.icon--facebook:hover { + transform: scale(1.2); +} + +.icon--twitter { + width: 19px; + height: 14px; + background-image: url("../images/contact/twitter-kat.svg"); + transition: transform 0.3s; +} + +.icon--twitter:hover { + transform: scale(1.2); +} + +.icon--youtube { + width: 18px; + height: 14px; + background-image: url("../images/contact/youtube-kat.svg"); + transition: transform 0.3s; +} + +.icon--youtube:hover { + transform: scale(1.2); +} + +.icon--redit { + width: 18px; + height: 18px; + background-image: url("../images/contact/redit-kat.svg"); + transition: transform 0.3s; +} + +.icon--redit:hover { + transform: scale(1.2); +} + +.icon--arrow { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + width: 48px; + height: 48px; + border: 1px solid #05c2df; + border-radius: 50%; + + background-image: url("../images/contact/arrow.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: 15.3px 8.6px; + + transition: all 0.3s; +} + +.icon--arrow:hover { + transform: scale(1.2); + + width: 48px; + height: 48px; + + background-color: #05c2df; + background-image: url("../images/contact/arrow-white.svg"); +} + +.nav__menu { + display: flex; + flex-direction: row; + gap: 37px; + align-items: center; + + margin: 0; +} + +.nav__list { + display: flex; + gap: 36px; + + margin: 0; + padding: 0; + + list-style: none; +} + +.nav__link { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: #fff; + text-decoration: none; + + transition: color 0.3s; +} + +.nav__link:hover { + color: #05c2df; +} + +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + padding-block: 20px 15px; +} + +@media (min-width: 640px) { + .top-bar { + padding-block: 32px 0; + } +} + +@media (min-width: 1440px) { + .top-bar { + justify-content: left; + padding-block: 47px 0; + } +} + +.top-bar__logo { + width: 58px; + height: 12px; +} + +@media (min-width: 640px) { + .top-bar__logo { + width: 67px; + height: 14px; + } +} + +@media (min-width: 1440px) { + .top-bar__logo { + width: 77px; + height: 16px; + } +} + +.top-bar__logo-link { + padding-right: 34.5px; +} + +.top-bar__hidden { + display: none; + align-items: center; + justify-content: space-between; + width: 100%; +} + +@media (min-width: 1440px) { + .top-bar__hidden { + display: flex; + } +} + +.top-bar__lang-switcher { + position: relative; + + display: inline-block; + display: flex; + gap: 4px; + align-items: end; +} + +.top-bar__lang-switcher__text { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: #fff; + text-decoration: none; + + transition: color 0.3s; +} + +.top-bar__lang-switcher__text:hover { + color: #05c2df; +} + +.top-bar__button { + display: flex; + align-items: center; + justify-content: center; + + width: 200px; + height: 48px; + border-radius: 4px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: #fff; + text-decoration: none; + + background-color: #05c2df; + + transition: all 0.3s; +} + +.top-bar__button:hover { + color: #05c2df; + background-color: #fff; +} + +.top-bar__menu { + display: flex; + justify-content: end; + padding-block: 20px 38px; + padding-inline: 20px; +} + +@media (min-width: 640px) { + .top-bar__menu { + padding-inline: 34px; + } +} + +@media (min-width: 1440px) { + .top-bar__menu { + padding-inline: 110px; + } +} + +@media (min-width: 640px) { + .top-bar__menu { + padding-block: 34px 46px; + } +} + +.top-bar__language { + display: flex; + justify-content: start; + padding-block: 20px 38px; + padding-inline: 20px; +} + +@media (min-width: 640px) { + .top-bar__language { + padding-inline: 34px; + } +} + +@media (min-width: 1440px) { + .top-bar__language { + padding-inline: 110px; + } +} + +@media (min-width: 640px) { + .top-bar__language { + padding-block: 34px 46px; + } +} + +.top-bar__faq { + padding-block: 20px 31px; +} + +@media (min-width: 640px) { + .top-bar__faq { + padding-block: 34px 51px; + } +} + +@media (min-width: 1440px) { + .top-bar__faq { + padding-block: 28px 25px; + padding-inline: 26px; + } +} + +.top-bar__help { + padding-block: 20px 31px; +} + +@media (min-width: 640px) { + .top-bar__help { + padding-block: 34px 51px; + } +} + +@media (min-width: 1440px) { + .top-bar__help { + padding-block: 26px 17px; + padding-inline: 26px; + } +} + +/* dropdown */ +.top-bar__lang-switcher__select option { + color: #05c2df; + background: #191536; +} + +.top-bar__lang-switcher__select option:hover { + outline: none; + box-shadow: none; +} + +.menu { + pointer-events: none; + + position: fixed; + z-index: 100; + top: 0; + right: 0; + left: 0; + transform: translateY(-100%); + + overflow: auto; + display: flex; + flex-direction: column; + + width: 100%; + height: 100%; + + opacity: 0; + background-color: rgba(0, 0, 0, 0.7); + + transition: all 0.5s; +} + +.menu:target { + pointer-events: all; + transform: translateY(0); + opacity: 1; +} + +@media (min-width: 1440px) { + .menu { + display: none; + } +} + +.menu__content { + width: 100%; + max-width: 1440px; + height: 100%; + margin-inline: auto; + padding-bottom: 139px; + + background-color: #191536; +} + +@media (min-width: 640px) { + .menu__content { + height: auto; + } +} + +.menu__nav__item { + display: flex; + align-items: center; + width: 100%; + color: #fff; +} + +.menu__nav__item:hover { + color: #05c2df; + background-color: #110e25; +} + +.menu__nav__list { + display: flex; + flex-direction: column; + + margin: 0; + padding: 0; + + list-style: none; +} + +.menu__nav__link { + display: flex; + align-items: center; + + width: 100%; + height: 49px; + padding-inline: 20px; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 500; + line-height: 1.3; + text-decoration: none; +} + +@media (min-width: 640px) { + .menu__nav__link { + padding-inline: 152px; + } +} + +.menu__nav__link:hover { + color: #05c2df; + background-color: #110e25; +} + +@media (min-width: 1440px) { + .menu__language { + display: flex; + } +} + +.menu__language__content { + padding-bottom: 26px; +} + +.faq { + --columns: 2; + + pointer-events: none; + + position: fixed; + z-index: 60; + top: 0; + left: 0; + transform: translateX(-100%); + + overflow-y: auto; + display: flex; + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + flex-direction: column; + column-gap: 20px; + place-items: start center; + + width: 100%; + height: 100%; + + opacity: 0; + background-color: rgba(0, 0, 0, 0.7); + + transition: all 0.5s; +} + +@media (min-width: 640px) { + .faq { + --columns: 6; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) { + .faq { + --columns: 12; + + column-gap: 30px; + } +} + +.faq:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; +} + +@media (min-width: 1440px) { + .faq { + overflow: hidden; + place-items: center; + } +} + +.faq__content { + display: flex; + grid-column: 1/-1; + flex-direction: column; + + width: 100%; + max-width: 1440px; + margin-inline: auto; + + background-color: #191536; +} + +@media (min-width: 1440px) { + .faq__content { + overflow-y: auto; + grid-column: 2/-2; + max-height: 670px; + } +} + +.faq__wrapper { + padding-inline: 20px; +} + +@media (min-width: 640px) { + .faq__wrapper { + padding-inline: 33px; + } +} + +@media (min-width: 1440px) { + .faq__wrapper { + padding-inline: 95px 92px; + } +} + +.faq__title { + display: flex; + grid-column: 1/-1; + flex-direction: column; + margin-bottom: 17px; +} + +@media (min-width: 640px) { + .faq__title { + grid-column: 1/4; + } +} + +@media (min-width: 1440px) { + .faq__title { + grid-column: 1/7; + margin-bottom: 19px; + } +} + +.faq__title-white { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 1.3; + color: #fff; +} + +@media (min-width: 1440px) { + .faq__title-white { + font-size: 36px; + } +} + +.faq__title-blue { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 400; + line-height: 1.3; + color: #05c2df; +} + +@media (min-width: 1440px) { + .faq__title-blue { + font-size: 36px; + } +} + +.faq__questions { + display: flex; + flex-direction: column; + gap: 13px; + margin-bottom: 50px; +} + +.faq__question { + padding-inline: 27px; + border: 1px solid #05c2df; + border-radius: 4px; + outline: none; +} + +.faq__question:focus { + outline: none; +} + +.faq__question__content { + overflow: hidden; + max-height: 0; + transition: max-height 0.5s ease; +} + +.faq__question.active .faq__question__content { + max-height: 400px; +} + +.faq__question__title { + display: flex; + gap: 10px; + align-items: center; + justify-content: space-between; + + width: 100%; + border: none; + + background-color: #191536; +} + +.faq__question__title__text { + margin-block: 18px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #05c2df; + text-decoration: none; +} + +.faq__question__title__icon { + transform: rotate(-90deg); + transition: transform 0.5s ease; +} + +.faq__question__title__icon.active { + transform: rotate(0deg); + border: none; +} + +.faq__question__description { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #929292; +} + +.faq__question__footer-text { + margin-block: 20px 23px; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #545454; +} + +.faq__more { + padding-bottom: 50px; +} + +.help__content { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + padding-bottom: 73px; +} + +@media (min-width: 640px) { + .help__content { + --columns: 6; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) { + .help__content { + --columns: 12; + + column-gap: 30px; + } +} + +@media (min-width: 640px) { + .help__content { + padding-bottom: 124px; + } +} + +@media (min-width: 1440px) { + .help__content { + padding-bottom: 82px; + } +} + +.help__title { + grid-column: 1/-1; + margin-block: 0 30px; +} + +.help__description { + grid-column: 1/-1; + + margin: 0 0 20px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #929292; +} + +.help__blue { + margin: 0; + color: #05c2df; +} + +.help__link { + grid-column: 1/-1; + margin-bottom: 30px; +} + +@media (min-width: 640px) { + .help__link { + grid-column: 1/3; + margin: 0; + } +} + +@media (min-width: 1440px) { + .help__link { + grid-column: 1/4; + } +} + +.help__link__list { + display: flex; + flex-direction: column; + gap: 20px; + + margin: 0; + padding: 0; + + list-style: none; +} + +.help__link__item { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + text-decoration: none; +} + +.help__date { + grid-column: 1/-1; + margin: 0; +} + +@media (min-width: 640px) { + .help__date { + grid-column: 3/-1; + } +} + +@media (min-width: 1440px) { + .help__date { + grid-column: 4/-1; + } +} + +.help__date__list { + display: flex; + flex-direction: column; + gap: 10px; + + margin: 0; + padding: 0; + + list-style: none; +} + +@media (min-width: 640px) { + .help__date__list { + gap: 24px; + } +} + +.help__date__item { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #929292; + text-decoration: none; +} + +.more { + padding-block: 70px 50px; +} + +@media (min-width: 640px) { + .more { + padding-block: 70px; + } +} + +@media (min-width: 640px) { + .more { + padding-block: 100px; + } +} + +.more__title { + margin: 0 0 12px; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 1; + color: #fff; + text-align: center; +} + +@media (min-width: 640px) { + .more__title { + font-size: 25px; + } +} + +@media (min-width: 1440px) { + .more__title { + margin: 0 0 16px; + font-size: 36px; + } +} + +.more__description { + height: 36px; + margin: 0; + + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 400; + line-height: 1; + color: #05c2df; + text-align: center; +} + +@media (min-width: 1440px) { + .more__description { + font-size: 14px; + } +} + +.more__cards { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + gap: 20px; + + margin-top: 30px; +} + +@media (min-width: 640px) { + .more__cards { + --columns: 6; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) { + .more__cards { + --columns: 12; + + column-gap: 30px; + } +} + +@media (min-width: 640px) { + .more__cards { + row-gap: 40px; + } +} + +@media (min-width: 1440px) { + .more__cards { + margin-top: 83px; + } +} + +.more__card { + display: flex; + grid-column: 1/-1; + flex-direction: column; + align-self: start; + justify-content: center; + + width: 100%; + + transition: transform 0.3s; +} + +.more__card:hover { + transform: scale(1.03); +} + +@media (min-width: 640px) { + .more__card { + grid-column: span 3; + } +} + +.more__card__icon { + display: none; + margin-bottom: 22px; + margin-inline: auto; +} + +@media (min-width: 640px) { + .more__card__icon { + display: flex; + } +} + +@media (min-width: 1440px) { + .more__card__icon { + margin-bottom: 22px; + } +} + +.more__card__title { + margin: 0 0 11px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 900; + line-height: 1; + color: #fff; +} + +@media (min-width: 640px) { + .more__card__title { + margin: 0 0 20px; + text-align: center; + } +} + +@media (min-width: 1440px) { + .more__card__title { + margin: 0 0 18px; + } +} + +.more__card__description { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #929292; +} + +@media (min-width: 640px) { + .more__card__description { + margin: 0 0 20px; + text-align: center; + } +} + +.about { + overflow: hidden; + padding-block: 50px; + background: linear-gradient(107.56deg, #191536 0%, #000 100%); +} + +.about__content { + display: flex; + flex-direction: column; + gap: 79px; +} + +@media (min-width: 640px) { + .about__content { + gap: 84px; + } +} + +@media (min-width: 640px) { + .about__content { + gap: 183px; + } +} + +@media (min-width: 640px) { + .about { + padding-block: 70px 51px; + } +} + +@media (min-width: 640px) { + .about { + padding-block: 100px; + } +} + +.about__first { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; +} + +@media (min-width: 640px) { + .about__first { + --columns: 6; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) { + .about__first { + --columns: 12; + + column-gap: 30px; + } +} + +.about__first__left { + grid-column: 1/-1; + grid-row: 1/4; +} + +@media (min-width: 640px) { + .about__first__left { + grid-column: 1/4; + } +} + +@media (min-width: 1440px) { + .about__first__left { + grid-column: 3/8; + } +} + +.about__first__right { + grid-column: 1/-1; +} + +@media (min-width: 640px) { + .about__first__right { + grid-column: 4/-1; + } +} + +@media (min-width: 1440px) { + .about__first__right { + grid-column: 9/-1; + } +} + +.about__first__title { + grid-column: 1/-1; + + margin: 0 0 20px; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 1; + color: #fff; +} + +@media (min-width: 640px) { + .about__first__title { + grid-column: 4/-1; + margin: 0 0 30px; + } +} + +@media (min-width: 1440px) { + .about__first__title { + grid-column: 9/-1; + margin: 0 0 30px; + font-size: 36px; + } +} + +.about__first__description { + margin: 0 0 15px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #929292; +} + +@media (min-width: 640px) { + .about__first__description { + margin: 0 0 21px; + } +} + +@media (min-width: 1440px) { + .about__first__description { + margin: 0 0 24px; + } +} + +.about__first__numder { + display: none; + grid-column: span 2; + grid-row: 1/4; + justify-self: end; + + margin: 0; +} + +@media (min-width: 1440px) { + .about__first__numder { + display: flex; + } +} + +.about__first__numder__item { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1; + color: #05c2df; +} + +.about__first__img { + display: flex; + flex-direction: column; + gap: 14px; + + width: 100%; + margin-bottom: 20px; +} + +.about__first__img__photo { + height: 189px; + object-fit: cover; +} + +@media (min-width: 640px) { + .about__first__img__photo { + height: 270px; + } +} + +@media (min-width: 1440px) { + .about__first__img__photo { + height: 290px; + } +} + +.about__first__button-big { + display: none; + justify-content: center; +} + +@media (min-width: 1440px) { + .about__first__button-big { + display: flex; + } +} + +.about__first__button-small { + display: flex; + gap: 6px; + justify-content: center; +} + +@media (min-width: 1440px) { + .about__first__button-small { + display: none; + } +} + +.about__first__button-small__round { + width: 4px; + height: 4px; + border-radius: 50px; + background-color: #484848; +} + +.about__first__button-small__round--active { + background-color: #ababab; +} + +.about__second { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; +} + +@media (min-width: 640px) { + .about__second { + --columns: 6; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) { + .about__second { + --columns: 12; + + column-gap: 30px; + } +} + +.about__second__left { + grid-column: 1/-1; + align-self: center; +} + +@media (min-width: 640px) { + .about__second__left { + grid-column: 1/5; + } +} + +@media (min-width: 1440px) { + .about__second__left { + grid-column: 1/6; + } +} + +.about__second__right { + grid-column: 1/-1; + grid-row: 1/4; +} + +@media (min-width: 640px) { + .about__second__right { + grid-column: 5/-1; + } +} + +@media (min-width: 1440px) { + .about__second__right { + grid-column: 8/-1; + } +} + +.about__second__img { + display: none; +} + +@media (min-width: 640px) { + .about__second__img { + display: flex; + height: 257px; + } +} + +@media (min-width: 1440px) { + .about__second__img { + height: 342px; + } +} + +.about__second__title { + margin-bottom: 22px; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 1; + color: #fff; +} + +.about__second__title__blue { + font-weight: 400; + color: #05c2df; +} + +.about__second__title-small { + margin: 0 0 11px; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1; + color: #05c2df; +} + +.about__second__description { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #fff; +} + +.tech { + max-width: 1440px; + margin-inline: auto; + padding-block: 50px; +} + +@media (min-width: 640px) { + .tech { + padding-block: 80px; + } +} + +@media (min-width: 1440px) { + .tech { + height: 481px; + padding-block: 100px; + } +} + +.tech__content { + --columns: 2; + + position: relative; + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; +} + +@media (min-width: 640px) { + .tech__content { + --columns: 6; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) { + .tech__content { + --columns: 12; + + column-gap: 30px; + } +} + +.tech__title { + display: flex; + grid-column: 1/-1; + grid-row: 1; + + margin: 0 0 30px; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 1; + color: #fff; +} + +@media (min-width: 640px) { + .tech__title { + margin: 0 0 80px; + } +} + +@media (min-width: 1440px) { + .tech__title { + grid-column: 9/-1; + margin: 0 0 80px; + font-size: 36px; + } +} + +.tech__title-blue { + margin: 0; + padding-left: 10px; + font-weight: 400; + color: #05c2df; +} + +.tech__photo { + display: flex; + grid-column: 1/-1; + margin-inline: auto; +} + +@media (min-width: 640px) { + .tech__photo { + grid-column: 2/6; + } +} + +@media (min-width: 1440px) { + .tech__photo { + position: absolute; + z-index: -5; + + grid-column: 5/9; + grid-row: 2; + + margin-top: 61px; + } +} + +.tech__photo__img { + width: 197px; + height: 195px; +} + +@media (min-width: 640px) { + .tech__photo__img { + width: 358px; + height: 354px; + } +} + +@media (min-width: 1440px) { + .tech__photo__img { + width: 297px; + height: 294px; + } +} + +.tech__photo__ellips { + position: absolute; + top: 38px; + left: -15px; + transform: rotate(2deg); + + display: none; + + width: 50px; + height: 201px; +} + +@media (min-width: 1440px) { + .tech__photo__ellips { + display: flex; + } +} + +.tech__blok-1 { + position: absolute; + top: 40px; + right: 0; + + display: flex; + grid-column: 1/2; + align-items: center; + justify-content: center; + + width: 34px; + height: 34px; + border-radius: 50px; + + background-color: #05c2df; +} + +@media (min-width: 640px) { + .tech__blok-1 { + top: 80px; + right: 50px; + + grid-column: 3/4; + + width: 61px; + height: 61px; + } +} + +@media (min-width: 1440px) { + .tech__blok-1 { + position: relative; + top: 0; + right: 0; + + display: flex; + grid-column: 1/7; + grid-row: 2; + align-items: flex-start; + + width: auto; + height: auto; + } +} + +@media (min-width: 1440px) { + .tech__blok-1__text { + position: absolute; + left: 50px; + } +} + +.tech__blok-1__img { + width: 197px; + height: 195px; +} + +@media (min-width: 1440px) { + .tech__blok-1__img { + position: absolute; + top: 5px; + left: 65px; + + display: flex; + + width: 100%; + height: 72px; + } +} + +.tech__blok-2 { + position: absolute; + top: 130px; + left: 20px; + + display: flex; + grid-column: 2/-1; + align-items: center; + justify-content: center; + + width: 34px; + height: 34px; + border-radius: 50px; + + background-color: #05c2df; +} + +@media (min-width: 640px) { + .tech__blok-2 { + top: 250px; + left: 60px; + + grid-column: 4/5; + + width: 61px; + height: 61px; + } +} + +@media (min-width: 1440px) { + .tech__blok-2 { + position: relative; + top: 0; + left: 0; + + display: flex; + grid-column: 7/-1; + grid-row: 2; + align-items: flex-start; + + width: auto; + height: auto; + } +} + +@media (min-width: 1440px) { + .tech__blok-2__text { + position: absolute; + left: 160px; + } +} + +@media (min-width: 1440px) { + .tech__blok-2__img { + position: absolute; + top: 5px; + left: -55px; + } +} + +.tech__blok-3 { + position: absolute; + top: 195px; + right: 80px; + + display: flex; + grid-column: 1/2; + align-items: center; + justify-content: center; + + width: 34px; + height: 34px; + border-radius: 50px; + + background-color: #05c2df; +} + +@media (min-width: 640px) { + .tech__blok-3 { + top: 360px; + left: -130px; + + grid-column: 3/4; + + width: 61px; + height: 61px; + } +} + +@media (min-width: 1440px) { + .tech__blok-3 { + position: relative; + top: 220px; + left: 0; + + display: flex; + grid-column: 1/7; + grid-row: 3; + align-items: normal; + + width: auto; + + background-color: transparent; + } +} + +@media (min-width: 1440px) { + .tech__blok-3__text { + position: absolute; + left: 130px; + } +} + +@media (min-width: 1440px) { + .tech__blok-3__img { + position: absolute; + top: -100px; + right: 180px; + } +} + +.tech__blok__title { + display: none; + + margin: 0 0 21px; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 900; + line-height: 1; + color: #fff; +} + +@media (min-width: 1440px) { + .tech__blok__title { + display: flex; + font-size: 18px; + } +} + +.tech__blok__description { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 11px; + font-weight: 400; + line-height: 1.5; + color: #929292; +} + +@media (min-width: 640px) { + .tech__blok__description { + font-size: 13px; + } +} + +@media (min-width: 1440px) { + .tech__blok__description { + font-size: 16px; + } +} + +.tech__blok__img { + display: none; +} + +@media (min-width: 1440px) { + .tech__blok__img { + display: flex; + } +} + +.tech__blok__text { + display: none; +} + +@media (min-width: 1440px) { + .tech__blok__text { + display: flex; + flex-direction: column; + } +} + +@media (max-width: 1440px) { + .tech__blok-1, + .tech__blok-2, + .tech__blok-3 { + cursor: pointer; + box-sizing: border-box; + outline: none; + } + .tech__blok-1:focus-within, + .tech__blok-2:focus-within, + .tech__blok-3:focus-within { + border: 3px solid rgba(255, 255, 255, 0.14); + background-color: #07798b; + } + .tech__blok-1__text { + position: absolute; + z-index: 10; + top: 40px; + right: -30px; + + display: none; + + width: 138px; + padding: 15px 10px; + border-radius: 4px; + + background: #191536; + } +} + +@media (max-width: 1440px) and (min-width: 640px) { + .tech__blok-1__text { + top: 80px; + right: 10px; + width: 168px; + padding: 17px 10px; + } +} + +@media (max-width: 1440px) { + .tech__blok-2__text { + position: absolute; + z-index: 10; + top: 35px; + left: -110px; + + display: none; + + width: 210px; + padding: 13px 10px; + border-radius: 4px; + + background: #191536; + } +} + +@media (max-width: 1440px) and (min-width: 640px) { + .tech__blok-2__text { + top: 75px; + left: -110px; + width: 260px; + padding: 17px 10px; + } +} + +@media (max-width: 1440px) { + .tech__blok-3__text { + position: absolute; + z-index: 10; + top: -20px; + left: 40px; + + display: none; + + width: 130px; + padding: 15px 10px; + border-radius: 4px; + + background: #191536; + } +} + +@media (max-width: 1440px) and (min-width: 640px) { + .tech__blok-3__text { + top: 10px; + left: 80px; + width: 180px; + padding: 17px 10px; + } +} + +@media (max-width: 1440px) { + .tech__blok-1:focus-within .tech__blok-1__text, + .tech__blok-2:focus-within .tech__blok-2__text, + .tech__blok-3:focus-within .tech__blok-3__text { + display: flex; + flex-direction: column; + } +} + +.benefits { + padding-block: 50px; + background: linear-gradient(107.56deg, #191536 0%, #000 100%); +} + +@media (min-width: 640px) { + .benefits { + padding-block: 70px; + } +} + +@media (min-width: 1440px) { + .benefits { + padding-block: 100px 102px; + } +} + +.benefits__title { + margin: 0 0 32px; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 1; + color: #fff; +} + +@media (min-width: 1440px) { + .benefits__title { + margin: 0 0 84px; + font-size: 36px; + text-align: center; + } +} + +.benefits__title__blue { + font-weight: 400; + color: #05c2df; +} + +.benefits__content { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + gap: 20px; +} + +@media (min-width: 640px) { + .benefits__content { + --columns: 6; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) { + .benefits__content { + --columns: 12; + + column-gap: 30px; + } +} + +@media (min-width: 640px) { + .benefits__content { + row-gap: 0; + } +} + +.benefits__card { + grid-column: 1/-1; + transition: transform 0.3s; +} + +.benefits__card:hover { + transform: scale(1.03); +} + +@media (min-width: 640px) { + .benefits__card { + grid-column: span 2; + } +} + +@media (min-width: 1440px) { + .benefits__card { + grid-column: span 4; + } +} + +.benefits__card__img { + display: none; + margin-inline: auto; +} + +@media (min-width: 640px) { + .benefits__card__img { + display: flex; + margin-bottom: 25.5px; + } +} + +@media (min-width: 1440px) { + .benefits__card__img { + margin-bottom: 34px; + } +} + +.benefits__card__img-1 { + width: 80px; + height: 80px; +} + +.benefits__card__img-2 { + width: 89px; + height: 81px; +} + +.benefits__card__img-3 { + width: 105px; + height: 75px; +} + +@media (min-width: 1440px) { + .benefits__card__img-3 { + width: 111px; + height: 79px; + } +} + +.benefits__card__title { + margin: 0 0 11px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 900; + line-height: 1; + color: #fff; +} + +@media (min-width: 640px) { + .benefits__card__title { + margin: 0 0 37px; + text-align: center; + } +} + +@media (min-width: 1440px) { + .benefits__card__title { + margin: 0 0 18px; + } +} + +.benefits__card__description { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #929292; +} + +@media (min-width: 640px) { + .benefits__card__description { + text-align: center; + } +} + +.benefits__button { + display: none; + grid-column: 3/5; + align-items: center; + justify-content: center; + + width: 200px; + height: 48px; + margin-top: 90px; + margin-inline: auto; + border-radius: 4px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: #fff; + text-decoration: none; + + background-color: #05c2df; + + transition: all 0.3s; +} + +.benefits__button:hover { + color: #05c2df; + background-color: #fff; +} + +@media (min-width: 1440px) { + .benefits__button { + display: flex; + grid-column: 5/9; + justify-content: center; + } +} + +.contact { + padding-block: 50px; +} + +@media (min-width: 640px) { + .contact { + padding-block: 70px 90px; + } +} + +@media (min-width: 1440px) { + .contact { + padding-block: 100px 0; + } +} + +.contact__content { + --columns: 2; + + position: relative; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + align-self: start; +} + +@media (min-width: 640px) { + .contact__content { + --columns: 6; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) { + .contact__content { + --columns: 12; + + column-gap: 30px; + } +} + +.contact__question { + margin: 0 0 11px; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1; + color: #05c2df; + letter-spacing: 0%; +} + +.contact__text { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 1; + color: #fff; + letter-spacing: 0%; +} + +@media (min-width: 640px) { + .contact__text { + font-size: 36px; + } +} + +.contact__text__blue { + color: #05c2df; +} + +.contact__group { + margin-bottom: 24px; +} + +.contact__input { + width: 100%; + border: none; + border-bottom: 1px solid #2f2f2f; + + color: #05c2df; + + background-color: transparent; + outline: none; +} + +.contact__input__text { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #929292; + letter-spacing: 0%; +} + +.contact__input__massage { + min-width: 100%; + max-width: 100%; + height: 68px; + min-height: 68px; + max-height: 68px; +} + +.contact__button { + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 48px; + margin-bottom: 30px; + border: none; + border-radius: 4px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: #fff; + text-decoration: none; + + background-color: #05c2df; + + transition: all 0.3s; +} + +.contact__button:hover { + color: #05c2df; + background-color: #fff; +} + +@media (min-width: 640px) { + .contact__button { + width: 200px; + margin-bottom: 0; + } +} + +.contact__buttons { + display: flex; + justify-content: space-between; + width: 100%; + margin-top: 30px; +} + +@media (min-width: 640px) { + .contact__buttons { + margin-top: 48px; + } +} + +@media (min-width: 1440px) { + .contact__buttons { + margin-top: 90px; + } +} + +.contact__arrow { + display: none; +} + +@media (min-width: 640px) { + .contact__arrow { + display: flex; + } +} + +.contact__title { + grid-column: 1/-1; + margin-bottom: 32px; +} + +@media (min-width: 640px) { + .contact__title { + grid-column: 1/3; + margin-bottom: 50px; + } +} + +@media (min-width: 1440px) { + .contact__title { + grid-column: 1/7; + margin-bottom: 26px; + } +} + +.contact__right { + grid-column: 1/-1; +} + +@media (min-width: 640px) { + .contact__right { + grid-column: 4/-1; + grid-row: 1/5; + margin-bottom: 130px; + } +} + +@media (min-width: 1440px) { + .contact__right { + grid-column: 7/-1; + margin-bottom: 100px; + } +} + +.contact__link { + --columns: 2; + + display: grid; + grid-column: 1/-1; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + padding-top: 50px; +} + +@media (min-width: 640px) { + .contact__link { + display: flex; + grid-row: 5; + flex-direction: row; + align-items: center; + justify-content: space-between; + + margin: 0; + padding-top: 0; + padding-block: 21px; + } +} + +@media (min-width: 1440px) { + .contact__link { + padding-block: 39px; + } +} + +.contact__data { + position: absolute; + + display: flex; + grid-column: 2/-1; + grid-row: 4; + flex-direction: column; + gap: 12px; + + padding-top: 74px; +} + +@media (min-width: 640px) { + .contact__data { + position: static; + grid-column: 1/3; + grid-row: 3; + padding-top: 0; + } +} + +.contact__data__text { + font-family: Inter, sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 1; + color: #929292; + text-decoration: none; +} + +.contact__description { + grid-column: 1/-1; + + margin: 0 0 50px; + + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 400; + line-height: 1.5; + color: #929292; + letter-spacing: 0%; +} + +@media (min-width: 640px) { + .contact__description { + grid-column: 1/4; + margin-bottom: 76px; + } +} + +.contact__icons { + display: flex; + grid-column: 2/-1; + gap: 22.5px; + align-items: center; + align-self: end; +} + +@media (min-width: 640px) { + .contact__icons { + margin-bottom: 0; + } +} + +.contact__logo { + width: 69px; + height: 14px; + margin-bottom: 15px; +} + +@media (min-width: 640px) { + .contact__logo { + width: 72px; + margin-bottom: 0; + } +} + +.contact__list { + display: flex; + grid-column: 1/2; + flex-direction: column; + gap: 12px; +} + +@media (min-width: 640px) { + .contact__list { + flex-direction: row; + gap: 45px; + } +} + +.contact__item { + font-size: 13px; +} + +@media (min-width: 640px) { + .contact__item { + font-size: 14px; + } +} + +/* Приховане модальне вікно за замовчуванням */ +.modal { + pointer-events: none; + + position: fixed; + z-index: 5; + top: 0; + left: 0; + + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; + + opacity: 0; + background-color: rgba(0, 0, 0, 0.7); + + transition: all 0.5s; + transition: transform 0.3s ease, opacity 0.3s ease; +} + +.modal:target { + pointer-events: all; + transform: scale(1); + opacity: 1; +} + +.modal:active { + display: flex; +} + +.modal-content { + position: relative; + + width: 100%; + max-width: 900px; + border-radius: 12px; + + background: #000; +} + +.modal__video-wrapper { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; +} + +.modal__video-wrapper iframe { + position: absolute; + inset: 0; + + width: 100%; + height: 100%; + border: none; +} + +.modal__close { + cursor: pointer; + + position: absolute; + top: -40px; + right: 0; + + border: none; + + font-size: 40px; + color: white; + text-decoration: none; + + background: none; +} + +.buy-main { + width: 100%; + min-height: 100vh; + background: linear-gradient(107.56deg, #191536 0%, #000 100%); +} + +.buy__html { + background: linear-gradient(107.56deg, #191536 0%, #000 100%); +} + +.buy-top-bar { + display: flex; + justify-content: space-between; + width: 100%; + padding-block: 20px 33px; +} + +@media (min-width: 640px) { + .buy-top-bar { + padding-block: 30px; + } +} + +@media (min-width: 1440px) { + .buy-top-bar { + padding-block: 40px; + } +} + +.buy-header { + display: flex; + flex-direction: column; + width: 100%; +} + +.buy-header__bottom { + display: flex; + justify-content: space-between; + margin: 0; + margin-inline: -20px; +} + +@media (min-width: 640px) { + .buy-header__bottom { + margin-inline: -34px; + } +} + +.buy-header__bottom__pages { + position: relative; + + display: flex; + justify-content: center; + + width: 37%; + margin-bottom: 30px; + + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 500; + line-height: 1.3; + color: #fff; + + opacity: 0.4; + + transition: 0.3s; +} + +.buy-header__bottom__pages::after { + content: ""; + + position: absolute; + bottom: -32px; + left: 0; + + width: 100%; + height: 1px; + + background-color: #05c2df; +} + +@media (min-width: 640px) { + .buy-header__bottom__pages::after { + bottom: -10px; + } +} + +@media (min-width: 1440px) { + .buy-header__bottom__pages::after { + left: 50%; + transform: translateX(-50%); + + width: 4px; + height: 4px; + border-radius: 50%; + + background-color: currentColor; + } +} + +@media (min-width: 640px) { + .buy-header__bottom__pages { + font-size: 14px; + } +} + +@media (min-width: 1440px) { + .buy-content__block-1__content { + --columns: 2; + + overflow: hidden; + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + } +} + +@media (min-width: 1440px) and (min-width: 640px) { + .buy-content__block-1__content { + --columns: 6; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) and (min-width: 1440px) { + .buy-content__block-1__content { + --columns: 12; + + column-gap: 30px; + } +} + +.buy-content__block-1__photo { + display: none; + grid-column: 1/7; + + width: 100%; + max-width: 820px; + height: 277px; + margin-bottom: 30px; + margin-inline: auto; + + object-fit: cover; +} + +@media (min-width: 640px) { + .buy-content__block-1__photo { + display: flex; + } +} + +@media (min-width: 1440px) { + .buy-content__block-1__photo { + position: absolute; + display: flex; + height: 279px; + margin-left: -150px; + } +} + +.buy-content__block-1__right { + display: flex; + grid-column: 7/-1; + grid-row: 1/3; + flex-direction: column; + gap: 30px; +} + +@media (min-width: 640px) { + .buy-content__block-1__right { + --columns: 6; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + gap: 30px 20px; + } +} + +@media (min-width: 640px) and (min-width: 1440px) { + .buy-content__block-1__right { + row-gap: 40px; + } +} + +.buy-content__block-1__amount-prise { + display: flex; + grid-column: 1/-1; + grid-row: 2; + gap: 75px; + align-self: start; + justify-content: center; + + margin-bottom: 30px; +} + +@media (min-width: 640px) { + .buy-content__block-1__amount-prise { + justify-content: left; + } +} + +.buy-content__block-1__amount-prise__text { + margin: 0 0 10px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.3; + color: #929292; +} + +.buy-content__block-1__amount-prise__number { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 26px; + font-weight: 500; + line-height: 1; + color: #05c2df; +} + +.buy-content__block-1__quantity { + position: relative; + width: 90px; + height: 41px; +} + +.buy-content__block-1__quantity::after { + pointer-events: none; + content: ""; + + position: absolute; + top: 50%; + right: 12px; + transform: translateY(-50%); + + width: 0; + height: 0; + border-top: 7px solid #05c2df; + border-right: 6px solid transparent; + border-left: 6px solid transparent; +} + +.buy-content__block-1__quantity__select { + cursor: pointer; + + width: 90px; + height: 41px; + padding-right: 24px; + border: none; + + font-family: Inter, sans-serif; + font-size: 18px; + color: #fff; + text-align: center; + + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: #191536; + background-image: none; + outline: none; +} + +.buy-content__block-1__quantity__select::-ms-expand { + display: none; +} + +.buy-content__block-1__choises { + display: flex; + flex-direction: column; + column-gap: 30px; + width: 100%; +} + +@media (min-width: 640px) { + .buy-content__block-1__choises { + flex-direction: row; + } +} + +.buy-content__block-1__region { + width: 100%; +} + +.buy-content__block-1__region__select { + width: 100%; +} + +@media (min-width: 640px) { + .buy-content__block-1__region__select { + min-width: 100%; + } +} + +.buy-content__block-1__region__text { + margin: 0 0 17px; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1.3; + color: #929292; +} + +.buy-content__block-1__group { + margin-bottom: 0; +} + +.buy-content__block-1__group--left { + grid-column: 1/4; +} + +.buy-content__block-1__group--right { + grid-column: 4/-1; +} + +.buy-content__block-2__card-img { + display: none; +} + +@media (min-width: 640px) { + .buy-content__block-2__card-img { + display: flex; + } +} + +.buy-content__block-2__amount-prise { + display: flex; + justify-content: center; +} + +@media (min-width: 1440px) { + .buy-content__block-2__amount-prise { + justify-content: start; + } +} + +.buy-content__block-2__right { + display: flex; + grid-column: 7/12; + flex-direction: column; + gap: 30px; + justify-content: center; + + max-width: 560px; + margin-inline: auto; +} + +@media (min-width: 1440px) { + .buy-content__block-2__right { + row-gap: 40px; + } +} + +.buy-content__block-2__card-inputs { + display: flex; + gap: 15px; +} + +@media (min-width: 640px) { + .buy-content__block-2__card-inputs { + gap: 30px; + } +} + +.buy-content__block-2__card-row { + display: flex; + gap: 30px; +} + +.buy-content__block-2__card-number { + width: 57px; + border: none; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + + font-size: 18px; + font-weight: 400; + line-height: 1; + color: #fff; + text-align: center; + letter-spacing: 0.25em; + + background: transparent; + outline: none; +} + +.buy-content__block-2__card-number::placeholder { + color: rgba(255, 255, 255, 0.28); +} + +.buy-content__block-2__card-number:focus { + border-bottom-color: #05c2df; +} + +@media (min-width: 640px) { + .buy-content__block-2__card-number { + width: 80px; + font-size: 21px; + } +} + +.buy-content__block-2__label { + display: block; + + margin: 0 0 17px; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + color: #05c2df; +} + +.buy-content__block-2__input { + width: 100%; + border: none; + border-bottom: 1px solid #2f2f2f; + + font-family: Inter, sans-serif; + font-size: 20px; + font-weight: 400; + line-height: 1.3; + color: #05c2df; + + background-color: transparent; + outline: none; +} + +.buy-content__block-2__input-1 { + width: 90px; +} + +.buy-content__block-2__input-2 { + width: 50px; +} + +.buy-content__block-2__bottom { + --columns: 6; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + gap: 30px 20px; +} + +.buy-content__block-2__group { + grid-column: span 3; +} + +.buy-content__block-3__title { + width: 100%; + margin: 0 0 20px; + + font-family: Inter, sans-serif; + font-size: 26px; + font-weight: 900; + line-height: 1.3; + color: #fff; + text-align: center; + text-transform: uppercase; +} + +.buy-content__block-3__title__blue { + font-weight: 400; + color: #05c2df; +} + +@media (min-width: 640px) { + .buy-content__block-3__title { + font-size: 46px; + } +} + +.buy-content__block-3__description { + margin: 0 0 50px; + + font-family: Inter, sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 1.3; + color: #fff; + text-align: center; +} + +.buy-content__block-3__button { + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 48px; + border-radius: 4px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: #fff; + text-decoration: none; + + background-color: #05c2df; + + transition: all 0.3s; +} + +.buy-content__block-3__button:hover { + color: #05c2df; + background-color: #fff; +} + +@media (min-width: 640px) { + .buy-content__block-3__button { + width: 458px; + height: 48px; + margin-inline: auto; + } +} + +.checkout { + position: relative; +} + +.checkout input[type="radio"] { + display: none; +} + +[id="step1"]:checked ~ .buy-header .buy-header__bottom .buy-header__bottom__pages:nth-child(1), +[id="step2"]:checked ~ .buy-header .buy-header__bottom .buy-header__bottom__pages:nth-child(2), +[id="step3"]:checked ~ .buy-header .buy-header__bottom .buy-header__bottom__pages:nth-child(3) { + color: #05c2df; + opacity: 1; +} + +.buy-content { + position: relative; +} + +.page { + display: none; +} + +[id="step1"]:checked ~ .buy-content .page--1 { + display: block; + margin-top: 30px; +} + +@media (min-width: 640px) { + [id="step1"]:checked ~ .buy-content .page--1 { + margin-top: 40px; + } +} + +@media (min-width: 1440px) { + [id="step1"]:checked ~ .buy-content .page--1 { + margin-top: 102px; + } +} + +[id="step2"]:checked ~ .buy-content .page--2 { + display: block; + margin-top: 30px; +} + +@media (min-width: 640px) { + [id="step2"]:checked ~ .buy-content .page--2 { + margin-top: 40px; + } +} + +@media (min-width: 1440px) { + [id="step2"]:checked ~ .buy-content .page--2 { + margin-top: 102px; + } +} + +[id="step3"]:checked ~ .buy-content .page--3 { + display: block; + margin-top: 90px; +} + +@media (min-width: 640px) { + [id="step3"]:checked ~ .buy-content .page--3 { + margin-top: 180px; + } +} + +@media (min-width: 1440px) { + [id="step3"]:checked ~ .buy-content .page--3 { + margin-top: 140px; + } +} + +.btn-next { + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 48px; + margin-block: 40px; + border-radius: 4px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: #fff; + text-decoration: none; + + background-color: #05c2df; + + transition: all 0.3s; +} + +.btn-next:hover { + color: #05c2df; + background-color: #fff; +} + +@media (min-width: 640px) { + .btn-next { + grid-column: 2/6; + width: 458px; + height: 48px; + margin-inline: auto; + } +} + +@media (min-width: 1440px) { + .btn-next { + grid-column: 1/4; + width: 200px; + margin-top: 28px; + margin-inline: 0; + } +} + +.lang-switcher { + display: inline-block; +} + +.lang-switcher .lang-switcher__details { + position: relative; +} + +.lang-switcher__summary { + cursor: pointer; + display: flex; + align-items: center; + list-style: none; +} + +.lang-switcher__summary::-webkit-details-marker { + display: none; +} + +.lang-switcher__current { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: #05c2df; +} + +.lang-switcher__arrow { + position: absolute; + top: 50%; + left: 25px; + + width: 0; + height: 0; + border-top: 6px solid #05c2df; + border-right: 4.5px solid transparent; + border-left: 4.5px solid transparent; +} + +.lang-switcher__dropdown { + position: absolute; + z-index: 10; + top: calc(100% + 8px); + left: 0; + + box-sizing: border-box; + width: 50px; + padding-block: 12px; + border: none; + border-radius: 4px; + + background-color: #1c1740; +} + +.lang-switcher__option { + display: flex; + align-items: center; + justify-content: center; + + padding: 12px; + border: none; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1; + color: #05c2df; + text-decoration: none; + + background-color: transparent; + outline: none; + box-shadow: none; +} + +.lang-switcher__option:hover, .lang-switcher__option:focus, .lang-switcher__option:active { + color: #fff; + background-color: transparent; + outline: none; + box-shadow: none; +} + +.lang-switcher__option--active { + color: #fff; +} + +body { + overflow-x: hidden; + min-width: 320px; + margin: 0; + background: #05040b; +} + +body:has(.menu:target) { + overflow: hidden; +} + +body:has(.faq:target) { + overflow: hidden; +} + +body:has(.modal:target) { + overflow: hidden; +} + +html { + scroll-behavior: smooth; + scrollbar-color: #110e25 transparent; + scrollbar-width: thin; +} + +.container { + max-width: 1440px; + margin-inline: auto; + padding-inline: 20px; +} + +@media (min-width: 640px) { + .container { + padding-inline: 34px; + } +} + +@media (min-width: 1440px) { + .container { + padding-inline: 110px; + } +} diff --git a/src/styles/main.css.map b/src/styles/main.css.map new file mode 100644 index 00000000..19ae13e7 --- /dev/null +++ b/src/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["utils/_extends.scss","_fonts.scss","header.scss","utils/_mixins.scss","utils/_vars.scss","icon.scss","nav.scss","top-bar.scss","menu.scss","faq.scss","help.scss","more.scss","about.scss","tech.scss","benefits.scss","contact.scss","video.scss","byu-main.scss","radio.scss","lang.scss","main.scss"],"names":[],"mappings":";AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA;EACA;;ACJF;EACE;EACA;EACA;;ACKA;EDRF;IAMI;;;ACQF;EDdF;IAUI;;;AAGF;EACE;EACA;ECiBF;EAEA;EACA;EACA;;AA5BA;EDKA;IC0BE;IAEA;;;AA3BF;EDDA;ICgCE;IAEA;;;AAvCF;EDKA;IAOI;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EAEA;;AAEA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;AC9BN;EDeE;IAmBI;IACA;IAEA;IAEA;IACA;IACA;;;ACnCN;EDSE;IA8BI;;;AAIJ;EACE;EACA;EACA;;ACpDJ;EDiDE;IAMI;;;ACjDN;ED2CE;IAUI;IACA;;;AAGF;EACE;EAEA;EACA;EACA;EACA;EACA,OE1EM;;ADUZ;EDyDI;IAUI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;EACA,OEvFU;;ADShB;EDuEI;IAUI;;;AAKN;EACE;EACA;EACA;EACA;;AChGJ;ED4FE;IAOI;IACA;IACA;;;AC/FN;EDsFE;IAaI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;EACA,OErHc;;ADClB;ED6GE;IAUI;;;ACjHN;EDuGE;IAcI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;EACA,OE1IQ;EF2IR;;ACvIJ;ED+HE;IAWI;IACA;;;ACrIN;EDyHE;IAgBI;;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EAEA;EACA;EAEA;ECzHJ;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA,OC3DY;ED4DZ;EAEA,kBC7DgB;ED+DhB;;AAEA;EACE,OClEc;EDmEd,kBCpEU;;ADIZ;ED8JE;IAYI;IACA;IAEA;IAEA;IACA;;;AChLN;EDmLI;IAEI;IACA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IAEA;;;AC3LR;ED6KI;IAwBI;;;AAKN;EACE;EAEA;EACA;EACA;EACA;EAEA;EACA;;ACnNJ;ED0ME;IAYI;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA,OEhPM;EFiPN;ECpPN;;AACA;EACE,OCEc;;AFsPd;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA,OElQM;EFmQN;ECtQN;;AACA;EACE,OCEc;;AFwQd;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA,OE5RM;EF6RN;EAEA;EClSN;;AACA;EACE,OCEc;;AFkSV;EACE;EACA;EACA;;AAIJ;EACE;EACA;;;AAMR;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;;;AG/TF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EFZF;;AACA;EACE,WEY0B;;AFP5B;EEEA;IAQI;IACA;;;AFLJ;EEJA;IAaI;;;AAIJ;EACE;EACA;EACA;EF7BF;;AACA;EACE,WE6B0B;;AAG5B;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EAEA;EACA;EACA;EAEA,kBDpEc;ECqEd;EACA;;AFnEF;EE0DA;IAYI;IACA;;;AAGF;EACE;EACA;;AF5EJ;EE0DA;IAsBI;IACA;IACA;;;AF5EJ;EEoDA;IA4BI;;;AAIJ;EACE;EACA;EACA;EFpGF;;AACA;EACE,WEoG0B;;AAG5B;EACE;EACA;EACA;EF5GF;;AACA;EACE,WE4G0B;;AAG5B;EACE;EACA;EACA;EFpHF;;AACA;EACE,WEoH0B;;AAG5B;EACE;EACA;EACA;EF5HF;;AACA;EACE,WE4H0B;;AAG5B;EACE;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;AAEA;EACE;EAEA;EACA;EAEA,kBDtJY;ECuJZ;;;AC3JJ;EACE;EACA;EACA;EACA;EAEA;;AAGF;EACE;EACA;EAEA;EACA;EAEA;;AAGF;EACE;EAEA;EACA;EACA;EACA;EACA,OFvBU;EEwBV;EH3BF;;AACA;EACE,OCEc;;;AGLlB;EACE;EACA;EACA;EAEA;EACA;;AJEA;EIRF;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","file":"main.css"} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d1..66e2410a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,54 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import './header'; +@import './icon'; +@import './nav'; +@import './top-bar'; +@import './menu'; +@import './faq'; +@import './help'; +@import './more'; +@import './about'; +@import './tech'; +@import './benefits'; +@import './contact'; +@import './video'; +@import './byu-main'; +@import './radio'; +@import './lang'; body { - background: $c-gray; + overflow-x: hidden; + min-width: 320px; + margin: 0; + background: $bg-black-color; + + &:has(.menu:target) { + overflow: hidden; + } + + &:has(.faq:target) { + overflow: hidden; + } + + &:has(.modal:target) { + overflow: hidden; + } + &:has(.modal__buy:target) { + overflow: hidden; + } +} + +html { + scroll-behavior: smooth; + scrollbar-color: $bg-line-color transparent; + scrollbar-width: thin; +} + +.container { + max-width: 1440px; + margin-inline: auto; + + @include padding-inline; } diff --git a/src/styles/menu.scss b/src/styles/menu.scss new file mode 100644 index 00000000..f250ae3e --- /dev/null +++ b/src/styles/menu.scss @@ -0,0 +1,104 @@ +.menu { + pointer-events: none; + + position: fixed; + z-index: 100; + top: 0; + right: 0; + left: 0; + transform: translateY(-100%); + + overflow: auto; + display: flex; + flex-direction: column; + + width: 100%; + height: 100%; + + opacity: 0; + background-color: rgba($color: #000, $alpha: 0.7); + + transition: all 0.5s; + + &:target { + pointer-events: all; + transform: translateY(0); + opacity: 1; + } + + @include on-desktop { + display: none; + } + + &__content { + width: 100%; + max-width: 1440px; + height: 100%; + margin-inline: auto; + padding-bottom: 139px; + + background-color: $auxiliary-windows-color; + + @include on-tablet { + height: auto; + } + } + + &__nav { + &__item { + display: flex; + align-items: center; + width: 100%; + color: $white-color; + + &:hover { + color: $main-blue-color; + background-color: $bg-line-color; + } + } + + &__list { + display: flex; + flex-direction: column; + + margin: 0; + padding: 0; + + list-style: none; + } + + &__link { + display: flex; + align-items: center; + + width: 100%; + height: 49px; + padding-inline: 20px; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 500; + line-height: 1.3; + text-decoration: none; + + @include on-tablet { + padding-inline: 152px; + } + + &:hover { + color: $main-blue-color; + background-color: $bg-line-color; + } + } + } + + &__language { + @include on-desktop { + display: flex; + } + + &__content { + padding-bottom: 26px; + } + } +} diff --git a/src/styles/more.scss b/src/styles/more.scss new file mode 100644 index 00000000..652ce966 --- /dev/null +++ b/src/styles/more.scss @@ -0,0 +1,126 @@ +.more { + padding-block: 70px 50px; + + @include on-tablet { + padding-block: 70px; + } + + @include on-tablet { + padding-block: 100px; + } + + &__title { + margin: 0 0 12px; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 1; + color: $white-color; + text-align: center; + + @include on-tablet { + font-size: 25px; + } + + @include on-desktop { + margin: 0 0 16px; + font-size: 36px; + } + } + + &__description { + height: 36px; + margin: 0; + + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 400; + line-height: 1; + color: $main-blue-color; + text-align: center; + + @include on-desktop { + font-size: 14px; + } + } + + &__cards { + row-gap: 20px; + margin-top: 30px; + + @include page-grid; + + @include on-tablet { + row-gap: 40px; + } + + @include on-desktop { + margin-top: 83px; + } + } + + &__card { + display: flex; + grid-column: 1 /-1; + flex-direction: column; + align-self: start; + justify-content: center; + + width: 100%; + + @include hover(transform, scale(1.03)); + + @include on-tablet { + grid-column: span 3; + } + + &__icon { + display: none; + margin-bottom: 22px; + margin-inline: auto; + + @include on-tablet { + display: flex; + } + + @include on-desktop { + margin-bottom: 22px; + } + } + + &__title { + margin: 0 0 11px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 900; + line-height: 1; + color: $white-color; + + @include on-tablet { + margin: 0 0 20px; + text-align: center; + } + + @include on-desktop { + margin: 0 0 18px; + } + } + + &__description { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: $greu-header-color; + + @include on-tablet { + margin: 0 0 20px; + text-align: center; + } + } + } +} diff --git a/src/styles/nav.scss b/src/styles/nav.scss new file mode 100644 index 00000000..27fffdd3 --- /dev/null +++ b/src/styles/nav.scss @@ -0,0 +1,33 @@ +.nav { + &__menu { + display: flex; + flex-direction: row; + gap: 37px; + align-items: center; + + margin: 0; + } + + &__list { + display: flex; + gap: 36px; + + margin: 0; + padding: 0; + + list-style: none; + } + + &__link { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: $white-color; + text-decoration: none; + + @include hover(color, $main-blue-color); + } +} diff --git a/src/styles/radio.scss b/src/styles/radio.scss new file mode 100644 index 00000000..8f9d4276 --- /dev/null +++ b/src/styles/radio.scss @@ -0,0 +1,92 @@ +.checkout { + position: relative; + + input[type='radio'] { + display: none; + } +} + +[id='step1']:checked + ~ .buy-header + .buy-header__bottom + .buy-header__bottom__pages:nth-child(1), +[id='step2']:checked + ~ .buy-header + .buy-header__bottom + .buy-header__bottom__pages:nth-child(2), +[id='step3']:checked + ~ .buy-header + .buy-header__bottom + .buy-header__bottom__pages:nth-child(3) { + color: $main-blue-color; + opacity: 1; +} + +.buy-content { + position: relative; +} + +.page { + display: none; +} + +[id='step1']:checked ~ .buy-content .page--1 { + display: block; + margin-top: 30px; + + @include on-tablet { + margin-top: 40px; + } + + @include on-desktop { + margin-top: 102px; + } +} + +[id='step2']:checked ~ .buy-content .page--2 { + display: block; + margin-top: 30px; + + @include on-tablet { + margin-top: 40px; + } + + @include on-desktop { + margin-top: 102px; + } +} + +[id='step3']:checked ~ .buy-content .page--3 { + display: block; + margin-top: 90px; + + @include on-tablet { + margin-top: 180px; + } + + @include on-desktop { + margin-top: 140px; + } +} + +.btn-next { + width: 100%; + height: 40px; + margin-block: 40px; + + @include button; + + @include on-tablet { + grid-column: 2 / 6; + width: 458px; + height: 48px; + margin-inline: auto; + } + + @include on-desktop { + grid-column: 1 / 4; + width: 200px; + margin-top: 28px; + margin-inline: 0; + } +} diff --git a/src/styles/tech.scss b/src/styles/tech.scss new file mode 100644 index 00000000..b87fbff7 --- /dev/null +++ b/src/styles/tech.scss @@ -0,0 +1,421 @@ +.tech { + max-width: 1440px; + margin-inline: auto; + padding-block: 50px; + + @include on-tablet { + padding-block: 80px; + } + + @include on-desktop { + height: 481px; + padding-block: 100px; + } + + &__content { + position: relative; + + @include page-grid; + } + + &__title { + display: flex; + grid-column: 1 /-1; + grid-row: 1; + + margin: 0 0 30px; + + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 1; + color: $white-color; + + @include on-tablet { + margin: 0 0 80px; + } + + @include on-desktop { + grid-column: 9 /-1; + margin: 0 0 80px; + font-size: 36px; + } + + &-blue { + margin: 0; + padding-left: 10px; + font-weight: 400; + color: $main-blue-color; + } + } + + &__photo { + display: flex; + grid-column: 1 /-1; + margin-inline: auto; + + @include on-tablet { + grid-column: 2 /6; + } + + @include on-desktop { + position: absolute; + z-index: -5; + + grid-column: 5 /9; + grid-row: 2; + + margin-top: 61px; + } + + &__img { + width: 197px; + height: 195px; + + @include on-tablet { + width: 358px; + height: 354px; + } + + @include on-desktop { + width: 297px; + height: 294px; + } + } + + &__ellips { + position: absolute; + top: 38px; + left: -15px; + transform: rotate(2deg); + + display: none; + + width: 50px; + height: 201px; + + @include on-desktop { + display: flex; + } + } + } + + &__blok { + &-1 { + position: absolute; + top: 40px; + right: 0; + + display: flex; + grid-column: 1 /2; + align-items: center; + justify-content: center; + + width: 34px; + height: 34px; + border-radius: 50px; + + background-color: $main-blue-color; + + @include on-tablet { + top: 80px; + right: 50px; + + grid-column: 3 /4; + + width: 61px; + height: 61px; + } + + @include on-desktop { + position: relative; + top: 0; + right: 0; + + display: flex; + grid-column: 1 /7; + grid-row: 2; + align-items: flex-start; + + width: auto; + height: auto; + } + + &__text { + @include on-desktop { + position: absolute; + left: 50px; + } + } + + &__img { + width: 197px; + height: 195px; + + @include on-desktop { + position: absolute; + top: 5px; + left: 65px; + + display: flex; + + width: 100%; + height: 72px; + } + } + } + + &-2 { + position: absolute; + top: 130px; + left: 20px; + + display: flex; + grid-column: 2 /-1; + align-items: center; + justify-content: center; + + width: 34px; + height: 34px; + border-radius: 50px; + + background-color: $main-blue-color; + + @include on-tablet { + top: 250px; + left: 60px; + + grid-column: 4 /5; + + width: 61px; + height: 61px; + } + + @include on-desktop { + position: relative; + top: 0; + left: 0; + + display: flex; + grid-column: 7 /-1; + grid-row: 2; + align-items: flex-start; + + width: auto; + height: auto; + } + + &__text { + @include on-desktop { + position: absolute; + left: 160px; + } + } + + &__img { + @include on-desktop { + position: absolute; + top: 5px; + left: -55px; + } + } + } + + &-3 { + position: absolute; + top: 195px; + right: 80px; + + display: flex; + grid-column: 1 /2; + align-items: center; + justify-content: center; + + width: 34px; + height: 34px; + border-radius: 50px; + + background-color: $main-blue-color; + + @include on-tablet { + top: 360px; + left: -130px; + + grid-column: 3 /4; + + width: 61px; + height: 61px; + } + + @include on-desktop { + position: relative; + top: 220px; + left: 0; + + display: flex; + grid-column: 1 /7; + grid-row: 3; + align-items: normal; + + width: auto; + + background-color: transparent; + } + + &__text { + @include on-desktop { + position: absolute; + left: 130px; + } + } + + &__img { + @include on-desktop { + position: absolute; + top: -100px; + right: 180px; + } + } + } + + &__title { + display: none; + + margin: 0 0 21px; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 900; + line-height: 1; + color: $white-color; + + @include on-desktop { + display: flex; + font-size: 18px; + } + } + + &__description { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 11px; + font-weight: 400; + line-height: 1.5; + color: $greu-header-color; + + @include on-tablet { + font-size: 13px; + } + + @include on-desktop { + font-size: 16px; + } + } + + &__img { + display: none; + + @include on-desktop { + display: flex; + } + } + + &__text { + display: none; + + @include on-desktop { + display: flex; + flex-direction: column; + } + } + } +} + +@media (max-width: 1440px) { + .tech__blok-1, + .tech__blok-2, + .tech__blok-3 { + cursor: pointer; + box-sizing: border-box; + outline: none; + + &:focus-within { + border: 3px solid rgba(#fff, 0.14); + background-color: #07798b; + } + } + + .tech__blok-1__text { + position: absolute; + z-index: 10; + top: 40px; + right: -30px; + + display: none; + + width: 138px; + padding: 15px 10px; + border-radius: 4px; + + background: $auxiliary-windows-color; + + @include on-tablet { + top: 80px; + right: 10px; + width: 168px; + padding: 17px 10px; + } + } + + .tech__blok-2__text { + position: absolute; + z-index: 10; + top: 35px; + left: -110px; + + display: none; + + width: 210px; + padding: 13px 10px; + border-radius: 4px; + + background: $auxiliary-windows-color; + + @include on-tablet { + top: 75px; + left: -110px; + width: 260px; + padding: 17px 10px; + } + } + + .tech__blok-3__text { + position: absolute; + z-index: 10; + top: -20px; + left: 40px; + + display: none; + + width: 130px; + padding: 15px 10px; + border-radius: 4px; + + background: $auxiliary-windows-color; + + @include on-tablet { + top: 10px; + left: 80px; + width: 180px; + padding: 17px 10px; + } + } + + .tech__blok-1:focus-within .tech__blok-1__text, + .tech__blok-2:focus-within .tech__blok-2__text, + .tech__blok-3:focus-within .tech__blok-3__text { + display: flex; + flex-direction: column; + } +} diff --git a/src/styles/top-bar.scss b/src/styles/top-bar.scss new file mode 100644 index 00000000..e5908969 --- /dev/null +++ b/src/styles/top-bar.scss @@ -0,0 +1,136 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + padding-block: 20px 15px; + + @include on-tablet { + padding-block: 32px 0; + } + + @include on-desktop { + justify-content: left; + padding-block: 47px 0; + } + + &__logo { + width: 58px; + height: 12px; + + @include on-tablet { + width: 67px; + height: 14px; + } + + @include on-desktop { + width: 77px; + height: 16px; + } + + &-link { + padding-right: 34.5px; + } + } + + &__hidden { + display: none; + align-items: center; + justify-content: space-between; + width: 100%; + + @include on-desktop { + display: flex; + } + } + + &__lang-switcher { + position: relative; + + display: inline-block; + display: flex; + gap: 4px; + align-items: end; + + &__text { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: $white-color; + text-decoration: none; + + @include hover(color, $main-blue-color); + } + } + + &__button { + width: 200px; + + @include button; + } + + &__menu { + display: flex; + justify-content: end; + padding-block: 20px 38px; + + @include padding-inline; + + @include on-tablet { + padding-block: 34px 46px; + } + } + + &__language { + display: flex; + justify-content: start; + padding-block: 20px 38px; + + @include padding-inline; + + @include on-tablet { + padding-block: 34px 46px; + } + } + + &__faq { + padding-block: 20px 31px; + + @include on-tablet { + padding-block: 34px 51px; + } + + @include on-desktop { + padding-block: 28px 25px; + padding-inline: 26px; + } + } + + &__help { + padding-block: 20px 31px; + + @include on-tablet { + padding-block: 34px 51px; + } + + @include on-desktop { + padding-block: 26px 17px; + padding-inline: 26px; + } + } +} + +/* dropdown */ +.top-bar__lang-switcher__select option { + color: $main-blue-color; + background: $auxiliary-windows-color; + + &:hover{ + outline: none; + box-shadow: none; + } +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..16ed3c4e 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,108 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-widtx) { + @content; + } +} + +@mixin padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 110px; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 20px; + } + + @include on-desktop { + --columns: 12; + + column-gap: 30px; + } +} + +@mixin button { + display: flex; + align-items: center; + justify-content: center; + + height: 48px; + border-radius: 4px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + color: $white-color; + text-decoration: none; + + background-color: $main-blue-color; + + transition: all 0.3s; + + &:hover { + color: $main-blue-color; + background-color: $white-color; + } +} + +@mixin select { + cursor: pointer; + + height: 41px; + padding-right: 24px; + border: none; + + font-family: Inter, sans-serif; + font-size: 18px; + color: $white-color; + text-align: center; + + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: $auxiliary-windows-color; + background-image: none; + outline: none; + + &::after { + pointer-events: none; + content: ''; + + position: absolute; + top: 50%; + right: 12px; + transform: translateY(-50%); + + width: 0; + height: 0; + border-top: 7px solid $main-blue-color; + border-right: 6px solid transparent; + border-left: 6px solid transparent; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..60d3e0ec 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,13 @@ $c-gray: #eee; +$tablet-min-width: 640px; +$desktop-min-widtx: 1440px; +$bg-gradient: linear-gradient(107.56deg, #191536 0%, #000 100%); +$white-color: #fff; +$main-blue-color: #05c2df; +$bg-black-color: #05040b; +$greu-header-color: #929292; +$auxiliary-windows-color: #191536; +$bg-line-color: #110e25; +$dark-gray-color: #545454; +$small-button-gray-color: #484848; +$input-border-color: #2f2f2f; diff --git a/src/styles/video.scss b/src/styles/video.scss new file mode 100644 index 00000000..ab661c90 --- /dev/null +++ b/src/styles/video.scss @@ -0,0 +1,114 @@ +/* Приховане модальне вікно за замовчуванням */ +.modal { + pointer-events: none; + + position: fixed; + z-index: 5; + top: 0; + left: 0; + + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; + + opacity: 0; + background-color: rgba($color: #000, $alpha: 0.7); + + transition: all 0.5s; + transition: + transform 0.3s ease, + opacity 0.3s ease; + + &:target { + pointer-events: all; + transform: scale(1); + opacity: 1; + } + + &:active { + display: flex; + } + + &-content { + position: relative; + + width: 100%; + max-width: 900px; + border-radius: 12px; + + background: #000; + } + + &__video-wrapper { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; + } + + &__video-wrapper iframe { + position: absolute; + inset: 0; + + width: 100%; + height: 100%; + border: none; + } + + &__close { + cursor: pointer; + + position: absolute; + top: -40px; + right: 0; + + border: none; + + font-size: 40px; + color: white; + text-decoration: none; + + background: none; + } + + &__buy{ + pointer-events: none; + + position: fixed; + z-index: 5; + top: 0; + left: 0; + + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; + + opacity: 0; + background-color: rgba($color: #000, $alpha: 0.7); + + transition: all 0.5s; + transition: + transform 0.3s ease, + opacity 0.3s ease; + + &:target { + pointer-events: all; + transform: scale(1); + opacity: 1; + } + + &:active { + display: flex; + } + } +}