+
+
+
+
+
+
-
-
-
diff --git a/source/js/main.js b/source/js/main.js
index 67efb03ee..11997e333 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,9 +1,88 @@
import {iosVhFix} from './utils/ios-vh-fix';
import {initModals} from './modules/modals/init-modals';
import {Form} from './modules/form-validate/form';
+import {initTabs} from './modules/tabs/init-tabs';
+import Swiper from '../js/vendor/swiper';
+import {initAccordions} from './modules/accordions/init-accordion';
// ---------------------------------
+export const trainerSwiper = new Swiper('.trainer__swiper', {
+ direction: 'horizontal',
+ loop: true,
+
+ navigation: {
+ nextEl: '.swiper-button-next',
+ prevEl: '.swiper-button-prev',
+ },
+
+ autoHeight: true,
+ slidesPerView: 4,
+
+ simulateTouch: true,
+ touchRatio: 1,
+
+ keyboard: {
+ enabled: true,
+ pageUpDown: true,
+ },
+
+ watchOverflow: true,
+
+ spaceBetween: 40,
+
+ // breakpoints: {
+ // 320: {
+ // slidesPerView: 1,
+ // },
+ // 768: {
+ // slidesPerView: 2,
+ // },
+ // 1200: {
+ // slidesPerView: 4,
+ // },
+ // },
+
+});
+
+export const reviewsSwiper = new Swiper('.reviews__swiper', {
+ direction: 'horizontal',
+ // loop: true,
+
+ navigation: {
+ nextEl: '.swiper-button-next',
+ prevEl: '.swiper-button-prev',
+ },
+
+ autoHeight: true,
+ slidesPerView: 1,
+
+ keyboard: {
+ enabled: true,
+ pageUpDown: true,
+ },
+
+ simulateTouch: true,
+ touchRatio: 1,
+
+
+ watchOverflow: true,
+
+
+ // breakpoints: {
+ // 320: {
+ // slidesPerView: 1,
+ // },
+ // 768: {
+ // slidesPerView: 2,
+ // },
+ // 1200: {
+ // slidesPerView: 4,
+ // },
+ // },
+
+});
+
window.addEventListener('DOMContentLoaded', () => {
// Utils
@@ -21,9 +100,24 @@ window.addEventListener('DOMContentLoaded', () => {
const form = new Form();
window.form = form;
form.init();
+ initAccordions();
});
+ initTabs();
+});
+
+const inputName = document.querySelector('#data-name');
+const labelName = document.querySelector('label[for="data-name"]');
+inputName.addEventListener('focus', () => {
+ labelName.style.visibility = 'hidden';
});
+const inputPhone = document.querySelector('#data-phone');
+const labelPhone = document.querySelector('label[for="data-phone"]');
+inputPhone.addEventListener('focus', () => {
+ labelPhone.style.visibility = 'hidden';
+});
+
+
// ---------------------------------
// ❗❗❗ обязательно установите плагины eslint, stylelint, editorconfig в редактор кода.
diff --git a/source/js/modules/accordions/accordions.js b/source/js/modules/accordions/accordions.js
new file mode 100644
index 000000000..72c09eab0
--- /dev/null
+++ b/source/js/modules/accordions/accordions.js
@@ -0,0 +1,155 @@
+export class Accordions {
+ constructor() {
+ this._openHeight = 0;
+ this._windowWidth = window.innerWidth;
+ this._documentClickHandler = this._documentClickHandler.bind(this);
+ this._windowResizeHandler = this._windowResizeHandler.bind(this);
+ this._init();
+ }
+
+ _init() {
+ this.fullUpdate();
+ document.addEventListener('click', this._documentClickHandler);
+ window.addEventListener('resize', this._windowResizeHandler);
+ }
+
+ _documentClickHandler(evt) {
+ const target = evt.target;
+ if (!target.closest('[data-accordion="button"]')) {
+ return;
+ }
+
+ evt.preventDefault();
+ const parent = target.closest('[data-accordion="parent"]');
+
+ if (parent.dataset.destroy && !window.matchMedia(parent.dataset.destroy).matches) {
+ return;
+ }
+
+ const element = target.closest('[data-accordion="element"]');
+ if (element.classList.contains('is-active')) {
+ this.closeAccordion(element);
+ return;
+ }
+ this.openAccordion(element);
+ }
+
+ _windowResizeHandler() {
+ if (this._windowWidth === window.innerWidth) {
+ return;
+ }
+ this._windowWidth = window.innerWidth;
+ this.updateAccordionsHeight();
+ }
+
+ closeAllAccordion(parent) {
+ const elements = parent.querySelectorAll('[data-accordion="element"]');
+ elements.forEach((element) => {
+ const currentParent = element.closest('[data-accordion="parent"]');
+ if (currentParent === parent) {
+ this.closeAccordion(element);
+ }
+ });
+ }
+
+ updateAccordionsHeight(element = null) {
+ if (element) {
+ const content = element.querySelector('[data-accordion="content"]');
+ content.style.transition = 'none';
+ content.style.maxHeight = `${content.scrollHeight}px`;
+ setTimeout(() => {
+ content.style.transition = null;
+ });
+ return;
+ }
+
+ const closeElements = document.querySelectorAll('[data-accordion="element"]:not(.is-active)');
+
+ closeElements.forEach((closeElement) => {
+ const parent = closeElement.closest('[data-accordion="parent"]');
+ const content = closeElement.querySelector('[data-accordion="content"]');
+ if (parent.dataset.destroy && !window.matchMedia(parent.dataset.destroy).matches) {
+ content.style.maxHeight = '100%';
+ return;
+ }
+ content.style.maxHeight = null;
+ });
+
+ const openElements = document.querySelectorAll('[data-accordion="element"].is-active');
+ openElements.forEach((openElement) => {
+ const content = openElement.querySelector('[data-accordion="content"]');
+ const parent = openElement.closest('[data-accordion="parent"]');
+ if (parent.dataset.destroy && !window.matchMedia(parent.dataset.destroy).matches) {
+ content.style.maxHeight = '100%';
+ return;
+ }
+ content.style.transition = 'none';
+ content.style.maxHeight = `${content.scrollHeight}px`;
+ setTimeout(() => {
+ content.style.transition = null;
+ });
+ });
+ }
+
+ fullUpdate(parent = null, transition = false) {
+ let openElements;
+ if (parent) {
+ openElements = parent.querySelectorAll('[data-accordion="element"].is-active');
+ } else {
+ openElements = document.querySelectorAll('[data-accordion="element"].is-active');
+ }
+ openElements.forEach((openElement) => {
+ const innerParent = openElement.querySelector('[data-accordion="parent"]');
+ if (innerParent) {
+ return;
+ }
+ this.openAccordion(openElement, transition);
+ });
+ this.updateAccordionsHeight();
+ }
+
+ openAccordion(element, transition = true) {
+ const parentElement = element.closest('[data-accordion="parent"]');
+ const contentElement = element.querySelector('[data-accordion="content"]');
+ this._openHeight += contentElement.scrollHeight;
+
+ if (parentElement.hasAttribute('data-single')) {
+ this.closeAllAccordion(parentElement);
+ }
+
+ element.classList.add('is-active');
+ if (transition) {
+ contentElement.style.maxHeight = `${this._openHeight}px`;
+ } else {
+ contentElement.style.transition = 'none';
+ contentElement.style.maxHeight = `${this._openHeight}px`;
+ setTimeout(() => {
+ contentElement.style.transition = null;
+ });
+ }
+
+ if (parentElement.closest('[data-accordion="element"]')) {
+ this.openAccordion(parentElement.closest('[data-accordion="element"]'), transition);
+ return;
+ }
+
+ this._openHeight = 0;
+ }
+
+ closeAccordion(element, transition = true) {
+ const contentElement = element.querySelector('[data-accordion="content"]');
+ if (!contentElement) {
+ return;
+ }
+ element.classList.remove('is-active');
+ if (transition) {
+ contentElement.style.maxHeight = '0';
+ } else {
+ contentElement.style.transition = 'none';
+ contentElement.style.maxHeight = '0';
+ setTimeout(() => {
+ contentElement.style.transition = null;
+ });
+ }
+ }
+}
diff --git a/source/js/modules/accordions/index.js b/source/js/modules/accordions/index.js
new file mode 100644
index 000000000..ee1b1cd64
--- /dev/null
+++ b/source/js/modules/accordions/index.js
@@ -0,0 +1,7 @@
+import {initAccordions} from './init-accordion';
+
+window.addEventListener('DOMContentLoaded', () => {
+ window.addEventListener('load', () => {
+ initAccordions();
+ });
+});
diff --git a/source/js/modules/accordions/init-accordion.js b/source/js/modules/accordions/init-accordion.js
new file mode 100644
index 000000000..68db57c60
--- /dev/null
+++ b/source/js/modules/accordions/init-accordion.js
@@ -0,0 +1,10 @@
+import {Accordions} from './accordions';
+let accordions;
+
+const initAccordions = () => {
+ accordions = new Accordions();
+ // Используйте в разработке экспортируемую переменную accordions, window сделан для бэкэнда
+ window.accordions = accordions;
+};
+
+export {initAccordions, accordions};
diff --git a/source/js/modules/tabs/index.js b/source/js/modules/tabs/index.js
new file mode 100644
index 000000000..fa845445b
--- /dev/null
+++ b/source/js/modules/tabs/index.js
@@ -0,0 +1,7 @@
+import {initTabs} from './init-tabs';
+
+window.addEventListener('DOMContentLoaded', () => {
+ window.addEventListener('load', () => {
+ initTabs();
+ });
+});
diff --git a/source/js/modules/tabs/init-tabs.js b/source/js/modules/tabs/init-tabs.js
new file mode 100644
index 000000000..c82d26071
--- /dev/null
+++ b/source/js/modules/tabs/init-tabs.js
@@ -0,0 +1,11 @@
+import {Tabs} from './tabs';
+
+let tabs;
+
+const initTabs = () => {
+ tabs = new Tabs();
+ // Используйте в разработке экспортируемую переменную tabs, window сделан для бэкэнда
+ window.tabs = tabs;
+};
+
+export {initTabs, tabs};
diff --git a/source/js/modules/tabs/tabs.js b/source/js/modules/tabs/tabs.js
new file mode 100644
index 000000000..478beb394
--- /dev/null
+++ b/source/js/modules/tabs/tabs.js
@@ -0,0 +1,220 @@
+export class Tabs {
+ constructor() {
+ this._windowWidth = window.innerWidth;
+ this._documentClickHandler = this._documentClickHandler.bind(this);
+ this._init();
+ }
+
+ _init() {
+ this._initAllTabs();
+ document.addEventListener('click', this._documentClickHandler);
+ }
+
+ _resizeObserver() {
+ return new ResizeObserver((entries) => {
+ for (let entry of entries) {
+ if (entry.target.classList.contains('is-active')) {
+ this._updateTabHeight();
+ }
+ }
+ });
+ }
+
+ _documentClickHandler(evt) {
+ const target = evt.target;
+ if (!target.closest('[data-tabs="control"]')) {
+ return;
+ }
+ evt.preventDefault();
+ const control = target.closest('[data-tabs="control"]');
+ this.openTab(control);
+ }
+
+ _initAllTabs() {
+ const tabs = document.querySelectorAll('[data-tabs="parent"]');
+ const forLoadTabs = document.querySelectorAll('[data-tabs="element"].for-load');
+ tabs.forEach((tab) => {
+ this._initTab(tab);
+ });
+ forLoadTabs.forEach((tab) => {
+ tab.classList.remove('for-load');
+ });
+ }
+
+ _removeAllActiveClasses(tabControlElements, tabElements) {
+ tabElements.forEach((tab) => {
+ tab.classList.remove('is-active');
+ });
+
+ tabControlElements.forEach((element, index) => {
+ element.classList.remove('is-active');
+ element.setAttribute('data-index', index);
+ });
+ }
+
+ _setTabStartState(tab, dataHeight, tabElements, tabContentElement, tabControlElements, dataDelay) {
+ const activeIndex = this._returnActiveIndex(tabControlElements);
+ const blockHeight = dataHeight === 'max' ? this._returnMaxHeight(tabElements) : tabElements[activeIndex].offsetHeight;
+ this._removeAllActiveClasses(tabControlElements, tabElements);
+ tab.classList.add('no-transition');
+ tabControlElements[activeIndex].classList.add('is-active');
+ tabElements[activeIndex].classList.add('is-active');
+ if (dataHeight !== 'unset') {
+ tabContentElement.style.height = `${blockHeight}px`;
+ }
+ setTimeout(() => {
+ if (dataDelay) {
+ tab.classList.remove('no-transition');
+ }
+ }, dataDelay);
+ }
+
+ _returnActiveIndex(tabControlElements) {
+ let activeIndex = 0;
+ let flag = true;
+ tabControlElements.forEach((control, index) => {
+ if (control.classList.contains('is-active') && flag) {
+ activeIndex = index;
+ flag = false;
+ }
+ });
+ return activeIndex;
+ }
+
+ _returnMaxHeight(tabElements) {
+ let height = [];
+ tabElements.forEach((element) => {
+ height.push(element.offsetHeight);
+ });
+ height.sort((a, b) => a - b);
+ return height[height.length - 1];
+ }
+
+ _returnScopeList(nodeList, parent) {
+ const array = [];
+ nodeList.forEach((element) => {
+ const elementParent = element.closest('[data-tabs="parent"]');
+ if (elementParent === parent) {
+ array.push(element);
+ }
+ });
+
+ return array;
+ }
+
+ _returnScopeChild(nodeList, parent) {
+ let currentChild;
+ nodeList.forEach((element) => {
+ const elementParent = element.closest('[data-tabs="parent"]');
+ if (elementParent === parent) {
+ currentChild = element;
+ }
+ });
+
+ return currentChild;
+ }
+
+ _updateTabHeight() {
+ const activeElements = document.querySelectorAll('[data-tabs="element"].is-active');
+ activeElements.forEach((element) => {
+ let transition = false;
+ const parent = element.closest('[data-tabs="parent"]');
+ if (parent.closest('[data-tabs="element"]')) {
+ transition = true;
+ }
+ this._setTabElementHeight(element, transition);
+ });
+ }
+
+ _setTabElementHeight(element, transition) {
+ const parentElement = element.closest('[data-tabs="parent"]');
+ const dataHeight = parentElement.dataset.height;
+ const contentElement = this._returnScopeChild(parentElement.querySelectorAll('[data-tabs="content"]'), parentElement);
+ const tabElements = this._returnScopeList(parentElement.querySelectorAll('[data-tabs="element"]'), parentElement);
+
+ if (!transition) {
+ parentElement.classList.add('no-transition');
+ }
+
+ if (dataHeight === 'max') {
+ contentElement.style.height = `${this._returnMaxHeight(tabElements)}px`;
+ } else if (dataHeight === 'unset') {
+ contentElement.style.height = null;
+ } else {
+ contentElement.style.height = `${this._returnScopeChild(parentElement.querySelectorAll('[data-tabs="element"].is-active'), parentElement).offsetHeight}px`;
+ }
+
+ setTimeout(() => parentElement.classList.remove('no-transition'));
+ }
+
+ _initTab(tab) {
+ const dataHeight = tab.dataset.height;
+ const dataDelay = tab.dataset.delay ? tab.dataset.delay : 0;
+ const tabContentElement = tab.querySelector('[data-tabs="content"]');
+ const tabControlElements = this._returnScopeList(tab.querySelectorAll('[data-tabs="control"]'), tab);
+ const tabElements = this._returnScopeList(tab.querySelectorAll('[data-tabs="element"]'), tab);
+ this._setTabStartState(tab, dataHeight, tabElements, tabContentElement, tabControlElements, dataDelay);
+ if (dataHeight !== 'unset') {
+ tabElements.forEach((element) => {
+ this._resizeObserver().observe(element);
+ });
+ }
+ setTimeout(() => {
+ tab.classList.remove('no-transition-global');
+ });
+ }
+
+ reInit() {
+ this._initAllTabs();
+ }
+
+ openTab(control) {
+ const currentIndex = control.dataset.index;
+ const parentElement = control.closest('[data-tabs="parent"]');
+
+ if (control.classList.contains('is-active') || parentElement.classList.contains('no-action')) {
+ return;
+ }
+
+ const dataDelay = parentElement.dataset.delay ? parentElement.dataset.delay : 0;
+ const dataHeight = parentElement.dataset.height;
+ const contentElement = parentElement.querySelector('[data-tabs="content"]');
+ const tabElements = this._returnScopeList(parentElement.querySelectorAll('[data-tabs="element"]'), parentElement);
+
+ const activeControl = this._returnScopeChild(parentElement.querySelectorAll('[data-tabs="control"].is-active'), parentElement);
+ const activeElement = this._returnScopeChild(parentElement.querySelectorAll('[data-tabs="element"].is-active'), parentElement);
+ const currentHeight = contentElement.offsetHeight;
+ const newHeight = tabElements[currentIndex].offsetHeight;
+
+ parentElement.classList.add('no-action');
+ document.activeElement.blur();
+
+ if (activeControl) {
+ activeControl.classList.remove('is-active');
+ }
+
+ if (activeElement) {
+ activeElement.classList.remove('is-active');
+ }
+
+ if (currentHeight > newHeight) {
+ setTimeout(() => {
+ if (dataHeight !== 'max' && dataHeight !== 'unset') {
+ contentElement.style.height = newHeight + 'px';
+ }
+ control.classList.add('is-active');
+ tabElements[currentIndex].classList.add('is-active');
+ parentElement.classList.remove('no-action');
+ }, dataDelay);
+ } else {
+ if (dataHeight !== 'max' && dataHeight !== 'unset') {
+ contentElement.style.height = newHeight + 'px';
+ }
+ setTimeout(() => {
+ control.classList.add('is-active');
+ tabElements[currentIndex].classList.add('is-active');
+ parentElement.classList.remove('no-action');
+ }, dataDelay);
+ }
+ }
+}
diff --git a/source/js/vendor.js b/source/js/vendor.js
index e7a8b1f96..b2e76f0a6 100644
--- a/source/js/vendor.js
+++ b/source/js/vendor.js
@@ -1,4 +1,3 @@
// Swiper 7.4.1
import './vendor/swiper';
import './vendor/focus-visible-polyfill';
-
diff --git a/source/js/vendor/swiper.js b/source/js/vendor/swiper.js
index 75385d0f8..95ce70310 100644
--- a/source/js/vendor/swiper.js
+++ b/source/js/vendor/swiper.js
@@ -1,4 +1,4 @@
-const swiper = () => {
+ const swiper = () => {
/**
* Swiper 7.4.1
* Most modern mobile touch slider and framework with hardware accelerated transitions
diff --git a/source/sass/blocks/accordion.scss b/source/sass/blocks/accordion.scss
new file mode 100644
index 000000000..b0e623b86
--- /dev/null
+++ b/source/sass/blocks/accordion.scss
@@ -0,0 +1,109 @@
+.accordion {
+ //max-width: 500px;
+ margin: 0 auto 50px auto;
+
+ & & {
+ width: 90%;
+ margin: 0 auto;
+ }
+
+ &__element:last-child {
+ position: relative;
+ margin-bottom: 0;
+
+ &::before{
+ position: absolute;
+ content: "";
+ left: 0;
+ right: 0;
+ bottom: -21px;
+ height: 1px;
+ background-color: $color-primary-light;
+ }
+ }
+
+ &__element {
+ position: relative;
+ margin-bottom: 18px;
+ padding-top: 24px;
+ border-top: 1px solid $color-primary-light;
+ }
+
+ &__element.is-active .accordion__toggle::after {
+ display: none;
+ }
+
+ &__button {
+ width: 100%;
+ padding: 10px;
+ cursor: pointer;
+ border: none;
+ background-color: $color-transparent;
+ }
+
+ &__wrapper {
+ padding: 5px 10px;
+ }
+}
+
+.accordion__toggle{
+ position: absolute;
+ right: 0;
+ top: 25px;
+ width: 42px;
+ height: 42px;
+ border: 1px solid $color-primary;
+ border-radius: 50%;
+
+ &::before{
+ position: absolute;
+ content: "";
+ width: 18px;
+ height: 1px;
+ left: 11px;
+ top: 21px;
+ background-color: $color-primary;
+ }
+ &::after{
+ position: absolute;
+ content: "";
+ width: 18px;
+ height: 1px;
+ left: 11px;
+ top: 21px;
+ background-color: $color-primary;
+ transform: rotate(90deg);
+ }
+
+ &:hover,
+ &:focus{
+ background-color: $color-primary;
+
+ &::before,
+ &::after{
+ background-color: $color-default-white;
+ }
+ }
+
+ &:disabled{
+ opacity: 0.3;
+ }
+}
+
+.accordion__title{
+ text-align: left;
+ font-family: $ff-placeholder;
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 1.2;
+ color: $color-primary;
+ letter-spacing: 0.2px;
+}
+
+.accordion__discription{
+ font-family: $ff-placeholder;
+ font-size: 18px;
+ font-weight: 300;
+ line-height: 1.4;
+ color: $color-primary;
+}
diff --git a/source/sass/blocks/advantage.scss b/source/sass/blocks/advantage.scss
new file mode 100644
index 000000000..0246d0705
--- /dev/null
+++ b/source/sass/blocks/advantage.scss
@@ -0,0 +1,96 @@
+.advantage {
+ position: relative;
+ display: flex;
+ gap: 32px;
+ padding-left: 6px;
+
+ &:not(:nth-last-child(-n + 3))::before {
+ position: absolute;
+ bottom: -76px;
+ right: 0;
+ left: 0;
+ height: 2px;
+ background-color: $color-line-red;
+ opacity: 0.2;
+ content: "";
+ }
+
+ &--center {
+ grid-column: 2/3;
+ grid-row: 1/3;
+ margin-top: 28px;
+ margin-bottom: 8px;
+ flex-direction: column;
+ background-color: $color-background-blue;
+ text-align: center;
+ padding-top: 42px;
+ padding-left: 0;
+ gap: 0;
+ }
+}
+
+.advantage__number-wrapper {
+ position: relative;
+}
+
+.advantage__number {
+ font-family: $ff-placeholder;
+ font-size: 71px;
+ font-weight: 700;
+ line-height: 1.5;
+ background-color: $color-blue-for-text;
+ background-image: $red-to-blue-for-text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+
+ &--center{
+ font-size: 76px;
+ line-height: 1.2;
+ background-image: none;
+ background-color: $color-default-white;
+ letter-spacing: 1px;
+ }
+}
+
+.advantage__number-text {
+ position: absolute;
+ bottom: 2px;
+ font-family: $ff-placeholder;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.5;
+ letter-spacing: -1px;
+ color: $color-blue-secondary;
+}
+
+.advantage__title{
+ padding-top: 20px;
+ padding-bottom: 5px;
+ font-family: $ff-placeholder;
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 1.5;
+ letter-spacing: -0.7px;
+ color: $color-primary;
+
+ &--center{
+ padding: 0;
+ color: $color-default-white;
+ font-size: 21px;
+ letter-spacing: 0.7px;
+ padding-bottom: 33px;
+ }
+}
+
+.advantage__description{
+ font-family: $ff-placeholder;
+ font-size: 16px;
+ font-weight: 300;
+ line-height: 1.4;
+ color: $color-primary;
+
+ &--center{
+ color: $color-default-white;
+ }
+}
+
diff --git a/source/sass/blocks/advantages.scss b/source/sass/blocks/advantages.scss
new file mode 100644
index 000000000..9241a5f99
--- /dev/null
+++ b/source/sass/blocks/advantages.scss
@@ -0,0 +1,32 @@
+.advantages{
+ margin: 0 auto;
+ background-color: $color-background-grey;
+}
+
+.advantages__wrapper{
+ padding-top: 110px;
+ padding-right: 172px;
+ padding-bottom: 129px;
+ padding-left: 172px;
+}
+
+.advantages__title{
+ font-family: $ff-Alumnisans;
+ font-size: 36px;
+ font-weight: 600;
+ line-height: normal;
+ letter-spacing: 1.62px;
+ color: $color-primary;
+ text-align: center;
+ margin-bottom: 29px;
+}
+
+.advantages__list{
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ display: grid;
+ grid-template-columns: 1fr 240px 1fr;
+ column-gap: 54px;
+ row-gap:130px;
+}
diff --git a/source/sass/blocks/appointment.scss b/source/sass/blocks/appointment.scss
new file mode 100644
index 000000000..b7cce0e9f
--- /dev/null
+++ b/source/sass/blocks/appointment.scss
@@ -0,0 +1,9 @@
+.appointment{
+ margin: 0 auto;
+ max-width: 1366px;
+}
+
+.appointment__wrapper{
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+}
diff --git a/source/sass/blocks/btn.scss b/source/sass/blocks/btn.scss
index 3a7bef947..03c90d14c 100644
--- a/source/sass/blocks/btn.scss
+++ b/source/sass/blocks/btn.scss
@@ -1,9 +1,7 @@
.btn {
display: inline-flex;
padding: 10px 20px;
-
color: $color-default-white;
-
background-color: $color-neon-blue;
border: none;
cursor: pointer;
@@ -20,7 +18,7 @@
pointer-events: none;
}
- @include hover-focus {
- opacity: 0.8;
- }
+ // @include hover-focus {
+ // opacity: 0.8;
+ // }
}
diff --git a/source/sass/blocks/button.scss b/source/sass/blocks/button.scss
new file mode 100644
index 000000000..d8b928ac1
--- /dev/null
+++ b/source/sass/blocks/button.scss
@@ -0,0 +1,15 @@
+.button {
+ box-sizing: border-box;
+ display: inline-block;
+ text-align: center;
+ text-decoration: none;
+ font-family: $ff-placeholder;
+ font-weight: 600;
+ font-size: 11px;
+ line-height: normal;
+ color: $color-default-white;
+ background-color: $color-transparent;
+ border: 4px solid $color-default-white;
+ text-transform: uppercase;
+ cursor: pointer;
+}
diff --git a/source/sass/blocks/cards.scss b/source/sass/blocks/cards.scss
new file mode 100644
index 000000000..a289e9897
--- /dev/null
+++ b/source/sass/blocks/cards.scss
@@ -0,0 +1,80 @@
+.cards__list {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 30px;
+ margin: 0 auto;
+ padding: 0 103px;
+ list-style-type: none;
+ width: 1366px;
+}
+
+.cards__item {
+ box-sizing: border-box;
+ border: 7px solid $color-transparent;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ align-items: center;
+ padding-top: 54px;
+ padding-bottom: 60px;
+ padding-right: 62px;
+ padding-left: 62px;
+ background-color: $color-default-white;
+
+ &--current{
+ border-image: $red-to-blue;
+ border-image-slice: 1;
+
+ & .cards__link-buy{
+ border: none;
+ background-image: $red-to-blue;
+ color: $color-default-white;
+ padding: 26px 43px;
+ }
+ }
+}
+
+.cards__title {
+ font-family: $ff-placeholder;
+ font-weight: 700;
+ font-size: 23px;
+ line-height: 1.1;
+ color: $color-primary;
+ margin-bottom: 10px;
+}
+
+.cards__description {
+ font-family: $ff-placeholder;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 1.5;
+ color: $color-primary;
+ margin-bottom: 12px;
+}
+
+.cards__price {
+ font-family: $ff-placeholder;
+ font-weight: 700;
+ font-size: 60px;
+ line-height: 1.5;
+ color: $color-blue;
+ margin-top: -97px;
+ margin-bottom: 35px;
+}
+
+.cards__price-shadow{
+ font-family: $ff-placeholder;
+ font-weight: 700;
+ font-size: 100px;
+ line-height: 1.5;
+ color: $color-light-grey;
+}
+//
+.cards__link-buy{
+ color: $color-primary;
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 1.3px;
+ border: 2px solid $color-primary;
+ padding: 24px 39px;
+}
diff --git a/source/sass/blocks/contacts.scss b/source/sass/blocks/contacts.scss
new file mode 100644
index 000000000..a709cff45
--- /dev/null
+++ b/source/sass/blocks/contacts.scss
@@ -0,0 +1,45 @@
+.contacts{
+ padding-top: 55px;
+ padding-right: 159px;
+ padding-bottom: 60px;
+ padding-left: 123px;
+ border-top: 1px solid $color-grey;
+}
+
+.contacts__title{
+ font-family: $ff-Alumnisans;
+ font-size: 36px;
+ font-weight: 600;
+ line-height: normal;
+ letter-spacing: 1.62px;
+ color: $color-primary;
+ padding-bottom:36px;
+}
+
+.contacts__address{
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+column-gap: 46px;
+row-gap: 14px;
+}
+
+.contacts__subtitle{
+ font-family: $ff-placeholder;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 1.5;
+ color: $color-primary;
+ font-style: normal;
+ padding-bottom: 3px;
+}
+
+.contacts__text{
+ font-family: $ff-placeholder;
+ font-size: 13px;
+ font-weight: 400;
+ line-height: 1.52;
+ color: $color-primary;
+ font-style: normal;
+ letter-spacing: -0.2px;
+}
+
diff --git a/source/sass/blocks/custom-input.scss b/source/sass/blocks/custom-input.scss
index 4d7f1aedf..73c36a475 100644
--- a/source/sass/blocks/custom-input.scss
+++ b/source/sass/blocks/custom-input.scss
@@ -1,65 +1,65 @@
.custom-input,
.custom-textarea {
- position: relative;
-
- display: flex;
- width: 530px;
- padding: 14px 0 28px;
-
- @media screen and (max-width: 767px) {
- padding: 4px 0 48px;
- width: 100%;
- }
-
- label {
- display: flex;
- align-items: center;
- width: 100%;
-
- @media screen and (max-width: 767px) {
- align-items: flex-start;
- flex-direction: column;
- }
-
- input,
- textarea {
- flex-grow: 1;
- max-width: 300px;
- min-height: 48px;
- margin-left: auto;
- padding: 10px;
-
- border: 2px solid rgba(#000000, 0.2);
- border-radius: 5px;
- outline: none;
-
- transition: border 0.3s ease;
-
- @media screen and (max-width: 767px) {
- max-width: unset;
- width: 100%;
- }
-
- &:hover {
- border: 2px solid rgba(#000000, 0.5);
- }
-
- &:focus {
- border: 2px solid rgba(#000000, 0.8);
- }
- }
- }
-
- &__label {
- @media screen and (max-width: 767px) {
- margin: 0 0 18px 0;
- }
- }
+ // position: relative;
+
+ // display: flex;
+ // width: 530px;
+ // padding: 14px 0 28px;
+
+ // @media screen and (max-width: 767px) {
+ // padding: 4px 0 48px;
+ // width: 100%;
+ // }
+
+ // label {
+ // display: flex;
+ // align-items: center;
+ // width: 100%;
+
+ // @media screen and (max-width: 767px) {
+ // align-items: flex-start;
+ // flex-direction: column;
+ // }
+
+ // input,
+ // textarea {
+ // flex-grow: 1;
+ // max-width: 300px;
+ // min-height: 48px;
+ // margin-left: auto;
+ // padding: 10px;
+
+ // border: 2px solid rgba(#000000, 0.2);
+ // border-radius: 5px;
+ // outline: none;
+
+ // transition: border 0.3s ease;
+
+ // @media screen and (max-width: 767px) {
+ // max-width: unset;
+ // width: 100%;
+ // }
+
+ // &:hover {
+ // border: 2px solid rgba(#000000, 0.5);
+ // }
+
+ // &:focus {
+ // border: 2px solid rgba(#000000, 0.8);
+ // }
+ // }
+ // }
+
+ // &__label {
+ // @media screen and (max-width: 767px) {
+ // margin: 0 0 18px 0;
+ // }
+ // }
&__error {
position: absolute;
right: 0;
- bottom: 35px;
+ // bottom: 35px;
color: #ff1553;
@@ -75,25 +75,26 @@
&.is-invalid {
input,
textarea {
- border: 2px solid #ff1553;
+ border-bottom: 2px solid #ff1553;
&:focus,
&:hover {
- border: 2px solid rgba(#ff1553, 0.5);
+ border: 2px solid $color-transparent;
+ border-bottom: 2px solid rgba(#ff1553, 0.5);
}
}
}
- &.is-valid {
- input {
- border: 2px solid #22b259;
+ // &.is-valid {
+ // input {
+ // border: 2px solid #22b259;
- &:focus,
- &:hover {
- border: 2px solid rgba(#22b259, 0.5);
- }
- }
- }
+ // &:focus,
+ // &:hover {
+ // border: 2px solid rgba(#22b259, 0.5);
+ // }
+ // }
+ // }
.input-message {
position: absolute;
@@ -104,8 +105,8 @@
color: #ff0000;
}
- &.is-valid {
- color: #15ab07;
- }
+ // &.is-valid {
+ // color: #15ab07;
+ // }
}
}
diff --git a/source/sass/blocks/data-accordion.scss b/source/sass/blocks/data-accordion.scss
new file mode 100644
index 000000000..21ebb2e0b
--- /dev/null
+++ b/source/sass/blocks/data-accordion.scss
@@ -0,0 +1,13 @@
+[data-accordion="element"].is-active > [data-accordion="content"] {
+ max-height: 100%;
+}
+
+[data-accordion="parent"].no-transition [data-accordion="content"] {
+ transition: none;
+}
+
+[data-accordion="content"] {
+ max-height: 0;
+ transition: max-height 0.3s;
+ overflow: hidden;
+}
diff --git a/source/sass/blocks/data-tabs.scss b/source/sass/blocks/data-tabs.scss
new file mode 100644
index 000000000..b09ac028f
--- /dev/null
+++ b/source/sass/blocks/data-tabs.scss
@@ -0,0 +1,47 @@
+[data-tabs="parent"] {
+ overflow: hidden;
+
+ &.no-transition {
+ > [data-tabs="control"],
+ > [data-tabs="content"],
+ > [data-tabs="element"] {
+ transition: none;
+ }
+ }
+
+ &.no-transition-global {
+ [data-tabs="control"],
+ [data-tabs="content"],
+ [data-tabs="element"] {
+ transition: none;
+ }
+ }
+}
+
+[data-tabs="parent"] [data-tabs="content"] {
+ position: relative;
+}
+
+[data-tabs="element"] {
+ position: absolute;
+
+ visibility: hidden;
+ opacity: 0;
+
+ transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
+}
+
+[data-tabs="element"].for-load {
+ position: static;
+ visibility: visible;
+ opacity: 1;
+
+ transition: none;
+}
+
+[data-tabs="element"].is-active {
+ z-index: 1;
+
+ visibility: visible;
+ opacity: 1;
+}
diff --git a/source/sass/blocks/faq.scss b/source/sass/blocks/faq.scss
new file mode 100644
index 000000000..5faa16e37
--- /dev/null
+++ b/source/sass/blocks/faq.scss
@@ -0,0 +1,21 @@
+.faq{
+ margin: 0 auto;
+ background-color: $color-background-grey;
+}
+
+.faq__wrapper{
+ padding-right: 103px;
+ padding-left: 103px;
+ padding-top: 120px;
+ padding-bottom: 54px;
+}
+
+.faq__title{
+ font-family: $ff-Alumnisans;
+ font-size: 36px;
+ font-weight: 600;
+ line-height: normal;
+ letter-spacing: 1.62px;
+ color: $color-primary;
+ padding-bottom: 40px;
+}
diff --git a/source/sass/blocks/form.scss b/source/sass/blocks/form.scss
new file mode 100644
index 000000000..b7cb353a8
--- /dev/null
+++ b/source/sass/blocks/form.scss
@@ -0,0 +1,59 @@
+.form__wrapper-data{
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 16px;
+}
+
+.form__input{
+ padding-right: 10px;
+ padding-left: 10px;
+ width: 192px;
+ height: 36px;
+ background-color: $color-primary;
+ border: 1px solid $color-transparent;
+ border-bottom: 1px solid $color-default-white;
+ color: $color-default-white;
+
+ &:hover{
+ border-bottom: 2px solid $color-default-white;
+ }
+
+ &:active,
+ &:focus{
+ outline: 2px solid $color-default-white;
+ border: none;
+ color: $color-default-white;
+ }
+
+ &:disabled{
+ opacity: 0.3;
+ }
+}
+
+.form__label{
+ position: absolute;
+ padding-top: 11px;
+ font-family: $ff-placeholder;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.57;
+ color: $color-default-white;
+ letter-spacing: -1.4px;
+}
+
+.form__button{
+ margin-top: 28px;
+ width: 410px;
+ padding-top: 13px;
+ padding-bottom: 13px;
+ font-family: $ff-placeholder;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 1.57;
+ color: $color-default-white;
+ letter-spacing: 0.7px;
+ text-transform: uppercase;
+}
+
+
+
diff --git a/source/sass/blocks/free-classe.scss b/source/sass/blocks/free-classe.scss
new file mode 100644
index 000000000..e3a90ec6d
--- /dev/null
+++ b/source/sass/blocks/free-classe.scss
@@ -0,0 +1,17 @@
+.free-classe{
+ padding-top: 54px;
+ padding-right: 156px;
+ padding-bottom: 70px;
+ padding-left: 103px;
+ background-color: $color-primary;
+}
+
+.free-classe__title{
+ font-family: $ff-Alumnisans;
+ font-size: 36px;
+ font-weight: 800;
+ line-height: 1.56;
+ letter-spacing: 2.32px;
+ color: $color-default-white;
+ padding-bottom: 11px;
+}
diff --git a/source/sass/blocks/gym-membership.scss b/source/sass/blocks/gym-membership.scss
new file mode 100644
index 000000000..2494dec2e
--- /dev/null
+++ b/source/sass/blocks/gym-membership.scss
@@ -0,0 +1,25 @@
+.gym-membership{
+ position: relative;
+ margin: 0 auto;
+ width: 1366px;
+ padding-top: 118px;
+ padding-bottom: 80px;
+ background-color: $color-background-grey;
+}
+
+.gym-membership__title{
+ font-family: $ff-Alumnisans;
+ font-size: 36px;
+ font-weight: 600;
+ line-height: normal;
+ letter-spacing: 1.62px;
+ color: $color-primary;
+ padding-bottom: 18px;
+ text-align: center;
+}
+
+.gym-membership__image{
+ position: absolute;
+ right: -10px;
+ bottom: -255px;
+}
diff --git a/source/sass/blocks/gym.scss b/source/sass/blocks/gym.scss
new file mode 100644
index 000000000..91d902505
--- /dev/null
+++ b/source/sass/blocks/gym.scss
@@ -0,0 +1,82 @@
+.gym {
+ margin: 0 auto;
+ width: 1366px;
+ padding: 80px 103px 166px 163px;
+}
+
+.gym__wrapper {
+ display: flex;
+ justify-content: space-between;
+}
+
+.gym__text {
+ display: flex;
+ flex-direction: column;
+ padding-top: 40px;
+ padding-right: 85px;
+}
+
+.gym__title {
+ font-family: $ff-Alumnisans;
+ font-size: 32px;
+ font-weight: 600;
+ line-height: normal;
+ letter-spacing: 1.44px;
+ color: $color-primary;
+ padding-bottom: 8px;
+}
+
+.gym__subtitle {
+ font-family: $ff-placeholder;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.5;
+ color: $color-primary;
+ padding-bottom: 40px;
+ letter-spacing: 0.7px;
+}
+
+.gym__description {
+ font-family: $ff-placeholder;
+ font-size: 16px;
+ font-weight: 300;
+ line-height: 1.5;
+ color: $color-primary;
+
+ &--supergym {
+ padding-bottom: 8px;
+ }
+}
+
+.gym__video-wrapper {
+ position: relative;
+}
+
+.gym__video {
+ margin-left: 378px;
+ margin-top: -112px;
+
+}
+
+.gym__video-button {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ top: 64px;
+ left: 518px;
+ background-color: transparent;
+ border-radius: 50%;
+ border: none;
+}
+
+.gym__button-image {
+ transform: rotate(150deg);
+}
+
+.gym__button-border {
+ position: absolute;
+ top: 0;
+ left: -9px;
+ width: 100px;
+ height: 100px;
+}
diff --git a/source/sass/blocks/header.scss b/source/sass/blocks/header.scss
new file mode 100644
index 000000000..23d394537
--- /dev/null
+++ b/source/sass/blocks/header.scss
@@ -0,0 +1,36 @@
+header {
+ position: relative;
+ margin: 0 auto;
+ width: 1366px;
+
+ &::before {
+ position: absolute;
+ background-image: $blue-to-red;
+
+ width: 1366px;
+ height: 642px;
+
+ content: "";
+ }
+}
+
+.header__logo {
+ position: absolute;
+ order: 1;
+ top: 25px;
+ left: 103px;
+}
+
+.header__contact-link {
+ position: absolute;
+ order: 1;
+ top: 16px;
+ right: 103px;
+ font-family: ff-Alumnisans;
+ font-size: 24px;
+ font-weight: 600;
+ line-height: normal;
+ letter-spacing: -0.6px;
+ font-style: normal;
+ color: $color-default-white;
+}
diff --git a/source/sass/blocks/intro.scss b/source/sass/blocks/intro.scss
new file mode 100644
index 000000000..ec70c904e
--- /dev/null
+++ b/source/sass/blocks/intro.scss
@@ -0,0 +1,60 @@
+.intro {
+ margin: 0 auto;
+ width: 1366px;
+ padding: 33px 240px 92px 250px;
+}
+
+.intro__wrapper {
+ display: flex;
+ justify-content: space-between;
+ padding-right: 64px;
+}
+
+.intro__text {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ text-align: right;
+
+}
+
+.intro__title {
+ font-family: $ff-Alumnisans;
+ font-size: 50px;
+ font-weight: 600;
+ line-height: 114px;
+ letter-spacing: 1.8px;
+ color: $color-default-white;
+ padding-bottom: 46px;
+}
+
+.intro__subtitle {
+ order: -1;
+ font-family: Alumni Sans;
+ font-size: 48px;
+ font-weight: 600;
+ line-height: normal;
+ letter-spacing: 1.44px;
+ color: $color-default-white;
+ text-align: right;
+ padding-top: 110px;
+ padding-bottom: 12px;
+ padding-right: 50px;
+}
+
+.intro__description{
+ position: absolute;
+ top: 305px;
+ left: -128px;
+ font-family: $ff-placeholder;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 1.5;
+ color: $color-default-white;
+ letter-spacing: -0.7px;
+}
+
+.intro__link-buy{
+ padding: 20px 56px;
+ letter-spacing: 0.9px;
+}
diff --git a/source/sass/blocks/promotion.scss b/source/sass/blocks/promotion.scss
new file mode 100644
index 000000000..7d7779eea
--- /dev/null
+++ b/source/sass/blocks/promotion.scss
@@ -0,0 +1,76 @@
+.promotion {
+ padding: 18px 28px;
+ box-sizing: border-box;
+ border: 7px solid $color-transparent;
+ border-image: $red-to-blue;
+ border-image-slice: 1;
+
+ &--big {
+ padding: 0;
+ grid-row: 1/3;
+ display: flex;
+ border: none;
+ }
+}
+
+.promotion__text {
+ padding: 37px 44px ;
+ background-color: $color-banner-red;
+}
+
+.promotion__title {
+ font-family: $ff-placeholder;
+ font-size: 22px;
+ font-weight: 700;
+ line-height: 1.5;
+ color: $color-background-blue;
+ padding-bottom: 5px;
+
+ &--big{
+ font-size: 23px;
+ color: $color-default-white;
+ }
+}
+
+.promotion__price{
+ font-family: $ff-placeholder;
+ font-size: 70px;
+ font-weight: 700;
+ line-height: 0.76;
+ color: $color-default-white;
+ padding-bottom: 26px;
+}
+
+.promotion__description{
+ font-family: $ff-placeholder;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 1.4;
+ color: $color-background-blue;
+ letter-spacing: -0.9px;
+ padding-bottom: 66px;
+
+ &--big{
+ padding-bottom: 183px;
+ color: $color-default-white;
+ font-size: 18px;
+ letter-spacing: -0.9px;
+ }
+}
+
+.promotion__link{
+ font-family: $ff-placeholder;
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 1.4;
+ color: $color-background-blue;
+ letter-spacing: 0.6px;
+ text-transform: uppercase;
+ border-bottom: 1px solid $color-background-blue;
+
+ &--big{
+ font-size: 14px;
+ color: $color-default-white;
+ border-bottom: 1px solid $color-default-white;
+ }
+}
diff --git a/source/sass/blocks/promotions.scss b/source/sass/blocks/promotions.scss
new file mode 100644
index 000000000..4f9224e93
--- /dev/null
+++ b/source/sass/blocks/promotions.scss
@@ -0,0 +1,30 @@
+.promotions{
+ margin: 0 auto;
+}
+
+.promotions__wrapper{
+ padding-top: 126px;
+ padding-right: 103px;
+ padding-bottom: 120px;
+ padding-left: 103px;
+}
+
+.promotions__title{
+ font-family: $ff-Alumnisans;
+ font-size: 54px;
+ font-weight: 600;
+ line-height: normal;
+ letter-spacing: 1.62px;
+ color: $color-primary;
+ text-align: center;
+ margin-bottom: 34px;
+}
+
+.promotions__list{
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 40px;
+}
diff --git a/source/sass/blocks/reviews.scss b/source/sass/blocks/reviews.scss
new file mode 100644
index 000000000..e1d24f5f2
--- /dev/null
+++ b/source/sass/blocks/reviews.scss
@@ -0,0 +1,98 @@
+.reviews{
+ margin: 0 auto;
+ width: 1366px;
+}
+
+.reviews__wrapper{
+ padding-top: 116px;
+ padding-left: 103px;
+ padding-bottom: 122px;
+ padding-right: 103px;
+}
+
+
+.reviews__title{
+ text-align: center;
+ font-family: $ff-Alumnisans;
+ font-size: 36px;
+ font-weight: 600;
+ line-height: normal;
+ letter-spacing: 1.62px;
+ color: $color-primary;
+ padding-bottom: 40px;
+}
+
+.reviews__slide-wrapper{
+ max-width: 560px;
+ margin: 0 auto;
+ padding: 54px 62px;
+ display: flex;
+ gap: 27px;
+ background-color: $color-background-blue;
+ filter: drop-shadow($color-shadow);
+}
+
+.reviews__swiper-button-prev{
+ left: 224px;
+}
+
+.reviews__swiper-button-next{
+ right: 224px;
+}
+
+.reviews__swiper-button-prev,
+.reviews__swiper-button-next {
+ width: 56px;
+ height: 56px;
+ background-color: $color-transparent;
+ border: 1px solid $color-transparent;
+ border-radius: 50%;
+
+ &:hover,
+ &:focus-visible{
+ border-color: $color-primary;
+ }
+
+ &:active{
+ background-color: $color-primary;
+ border-color: $color-primary;
+
+ &::after,
+ &::after{
+ color: $color-default-white;
+ }
+ }
+
+ &:disabled::after{
+ opacity: 0.3;
+ }
+}
+
+.reviews__swiper-button-prev::after,
+.reviews__swiper-button-next::after{
+ font-size: 32px;
+ color: $color-primary;
+}
+
+.reviews__images{
+ align-self: flex-start;
+ padding-top: 6px;
+}
+
+.reviews__slide-title{
+ font-family: $ff-placeholder;
+ font-size: 17px;
+ font-weight: 700;
+ line-height: 1.5;
+ color: $color-default-white;
+ padding-bottom: 10px;
+}
+
+.reviews__slide-description{
+ font-family: $ff-placeholder;
+ font-size: 15px;
+ font-weight: 400;
+ line-height: 1.5;
+ color: $color-default-white;
+ letter-spacing: -0.5px;
+}
diff --git a/source/sass/blocks/super-games.scss b/source/sass/blocks/super-games.scss
new file mode 100644
index 000000000..73f150430
--- /dev/null
+++ b/source/sass/blocks/super-games.scss
@@ -0,0 +1,104 @@
+.super-games{
+ margin: 0 auto;
+ width: 1160px;
+ padding-top: 118px;
+ padding-bottom: 106px;
+ }
+
+.super-games__wrapper{
+ display: grid;
+ grid-template-columns: 500px auto;
+}
+
+.super-games__images{
+ background-size: cover;
+}
+
+.super-games__text{
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ padding-top: 85px;
+ padding-right: 75px;
+ padding-bottom: 83px;
+ padding-left: 77px;
+ background-color: $color-banner-red;
+}
+
+.super-games__intro{
+ display: grid;
+ grid-template-columns: 201px auto;
+ gap: 50px;
+}
+
+.super-games__title{
+ font-family: $ff-Alumnisans;
+ font-weight: 600;
+ font-size: 56px;
+ line-height: 0.96;
+ color: $color-default-white;
+ letter-spacing: 2.46px;
+ text-transform: uppercase;
+ padding-bottom: 28px;
+ text-align: center;
+}
+
+.super-games__description{
+ font-family: $ff-placeholder;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 1.5;
+ letter-spacing: -1px;
+ color: $color-default-white;
+ padding-bottom: 43px;
+}
+
+.super-games__link-application{
+ padding: 25px 0;
+ font-size: 13px;
+}
+
+.super-games__date-time{
+display: flex;
+flex-direction: column;
+gap: 10px;
+}
+
+.super-games__time-table{
+ margin-top: -2px;
+ font-family: $ff-placeholder;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 1.5;
+ color: $color-default-white;
+ letter-spacing: 0.7px;
+}
+
+.super-games__date-wrapper{
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: 7px;
+
+ &::before {
+ position: absolute;
+ top: 4px;
+ right: 0;
+ left: 0;
+ height: 1px;
+ background-color: $color-default-white;
+ content: "";
+ }
+}
+
+.super-games__date{
+ font-family: $ff-placeholder;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 1.5;
+ color: $color-default-white;
+}
+
+.super-games__month-year{
+ font-size: 14px;
+}
diff --git a/source/sass/blocks/tabs.scss b/source/sass/blocks/tabs.scss
new file mode 100644
index 000000000..50054ad05
--- /dev/null
+++ b/source/sass/blocks/tabs.scss
@@ -0,0 +1,150 @@
+.tabs {
+ max-width: 100%;
+}
+
+.tabs__controls {
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ margin: 0 auto;
+ padding-bottom: 12px;
+ margin-bottom: 40px;
+ width: 342px;
+
+ &::before {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ height: 2px;
+ background-color: rgba(120, 120, 120, 0.20);
+ content: "";
+ }
+
+ @media screen and (max-width: 767px) {
+ flex-wrap: wrap;
+ }
+}
+
+.tabs__control {
+ position: relative;
+ display: flex;
+ text-transform: uppercase;
+ cursor: pointer;
+ opacity: 0.5;
+ min-width: auto;
+ justify-content: center;
+ padding: 0;
+
+ @media screen and (max-width: 1023px) {
+ margin: 0 10px;
+ padding: 15px;
+ }
+
+ @media screen and (max-width: 767px) {
+ margin: 10px 2% 0;
+ padding: 10px;
+ width: 45%;
+ }
+
+ &.is-active {
+ opacity: 1;
+ pointer-events: none;
+
+ &::before {
+ position: absolute;
+ bottom: -12px;
+ right: 0;
+ left: 0;
+ height: 2px;
+ background-color: $color-banner-red;
+ content: "";
+ }
+ }
+}
+
+.tabs__button {
+ font-family: $ff-placeholder;
+ font-size: 20px;
+ font-weight: 400;
+ line-height: 1.5;
+ color: $color-primary;
+ text-transform: none;
+ letter-spacing: -1.1px;
+ border: none;
+}
+
+.tabs__content {
+ margin-bottom: 40px;
+ transition: height 0.3s;
+}
+
+.tabs__element {
+ width: 100%;
+
+ @media screen and (max-width: 767px) {
+ padding: 15px;
+ }
+
+ p {
+ margin: 0;
+
+ &:not(:last-child) {
+ margin: 0 0 20px 0;
+ }
+ }
+}
+
+.tabs--unset .tabs__content {
+ height: 100px;
+}
+
+.tabs--unset .tabs__element {
+ height: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.tabs__faq {
+ display: grid;
+ grid-template-columns: 260px 1fr;
+ gap: 30px;
+}
+
+.tabs__categories {
+ display: flex;
+ flex-direction: column;
+
+ & .btn {
+ background-color: $color-transparent;
+ border: 1px solid $color-primary-light;
+ margin-bottom: 10px;
+ }
+}
+
+.tabs__category {
+ padding-top: 18px;
+ padding-bottom: 16px;
+ display: flex;
+ justify-content: center;
+ font-family: $ff-placeholder;
+ font-size: 18px;
+ font-weight: 600;
+ line-height: 1;
+ color: $color-primary;
+
+ &.is-active {
+ border: none;
+ background-image: $red-to-blue;
+ color: $color-default-white;
+ }
+
+ &:hover,
+ &:focus {
+ border-color: $color-primary;
+ }
+
+ &:default{
+ color: $color-primary-light;
+ }
+}
diff --git a/source/sass/blocks/trainer.scss b/source/sass/blocks/trainer.scss
new file mode 100644
index 000000000..e36b419ca
--- /dev/null
+++ b/source/sass/blocks/trainer.scss
@@ -0,0 +1,122 @@
+.trainer {
+ position: relative;
+ margin: 0 auto;
+ width: 1366px;
+ padding-bottom: 102px;
+}
+
+.trainer__title {
+ font-family: $ff-Alumnisans;
+ font-size: 36px;
+ font-weight: 600;
+ line-height: normal;
+ letter-spacing: 1.62px;
+ color: $color-primary;
+ padding-left: 103px;
+ padding-bottom: 48px;
+}
+
+.trainer__swiper {
+ width: 1160px;
+ margin: 0 auto;
+}
+
+.trainer__swiper-button-prev{
+ left: 28px;
+}
+
+.trainer__swiper-button-next {
+ right: 28px;
+}
+
+.trainer__swiper-button-prev,
+.trainer__swiper-button-next {
+ width: 56px;
+ height: 56px;
+ background-color: $color-transparent;
+ border: 1px solid $color-transparent;
+ border-radius: 50%;
+
+ &:hover,
+ &:focus-visible{
+ border-color: $color-primary;
+ }
+
+ &:active{
+ background-color: $color-primary;
+ border-color: $color-primary;
+
+ &::after,
+ &::after{
+ color: $color-default-white;
+ }
+ }
+
+ &:disabled::after{
+ opacity: 0.3;
+ }
+}
+
+.trainer__swiper-button-prev::after,
+.trainer__swiper-button-next::after {
+ color: $color-primary;
+ font-size: 32px;
+}
+
+.trainer__slide:hover .trainer__slide-title{
+ bottom: 216px;
+}
+
+.trainer__slide-title{
+ position: absolute;
+ left: 50%;
+ margin-left: -22%;
+ bottom: 23px;
+ color: $color-default-white;
+ letter-spacing: -0.4px;
+ z-index: 5;
+}
+
+.trainer__slide-description{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: $color-primary-dark;
+ opacity: 0;
+ transition: opacity .4s linear;
+
+ &:hover {
+ opacity: 1;
+ }
+}
+
+.trainer__slide-subtitle{
+ font-family: $ff-placeholder;
+ font-size: 15px;
+ font-weight: 400;
+ line-height: 1.5;
+ color: $color-dark-white;
+ padding-top: 76px;
+ padding-bottom: 34px;
+}
+
+.trainer__slide-list{
+ margin: 0;
+ padding: 0;
+ padding-left: 24px;
+}
+
+.trainer__slide-item{
+ font-family: $ff-placeholder;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.5;
+ color: $color-default-white;
+ letter-spacing: -0.8px;
+ padding-bottom: 13px;
+}
diff --git a/source/sass/global/container.scss b/source/sass/global/container.scss
index 7b71254a6..fa9390230 100644
--- a/source/sass/global/container.scss
+++ b/source/sass/global/container.scss
@@ -1,18 +1,23 @@
.container {
width: 100%;
- max-width: 1920px;
+ max-width: 1366px;
margin: 0 auto;
- padding: 0 40px;
+ // padding: 0 103px;
- @include vp-1439 {
- padding: 0 32px;
- }
- @include vp-1023 {
- padding: 0 24px;
+ // @include vp-1439 {
+ // padding: 0 32px;
+ // }
+
+ // @include vp-1023 {
+ // padding: 0 24px;
+ // }
+
+ @include vp-1199 {
+ // padding: 0 45px;
}
@include vp-767 {
- padding: 0 16px;
+ // padding: 0 15px;
}
}
diff --git a/source/sass/global/fonts.scss b/source/sass/global/fonts.scss
index ba889ef00..b8260bb29 100644
--- a/source/sass/global/fonts.scss
+++ b/source/sass/global/fonts.scss
@@ -1,8 +1,37 @@
+@font-face {
+ font-style: normal;
+ font-weight: 300;
+ font-family: "Roboto Condensed";
+
+ font-display: swap;
+ src: url("../fonts/RobotoCondensed-Light.woff2") format("woff2");
+}
+
@font-face {
font-style: normal;
font-weight: 400;
- font-family: "";
+ font-family: "Roboto Condensed";
+
+ font-display: swap;
+ src: url("../fonts/RobotoCondensed.woff2") format("woff2");
+}
+
+@font-face {
+ font-style: normal;
+ font-weight: 600;
+ font-family: "Roboto Condensed";
+
+ font-display: swap;
+ src: url("../fonts/RobotoCondensed-Bold.woff2") format("woff2");
+}
+
+@font-face {
+ font-style: normal;
+ font-weight: 600;
+ font-family: "Alumni Sans";
font-display: swap;
- src: url("../fonts/.woff2") format("woff2");
+ src: url("../fonts/AlumniSans-SemiBold.woff2") format("woff2");
}
+
+
diff --git a/source/sass/global/reboot.scss b/source/sass/global/reboot.scss
index 9ad1dce09..9d8ff834a 100644
--- a/source/sass/global/reboot.scss
+++ b/source/sass/global/reboot.scss
@@ -13,11 +13,11 @@ body {
html {
font-style: normal;
- font-weight: 400;
+ font-weight: 300;
font-size: $fz-default;
line-height: 24px;
font-family: $ff-placeholder;
- color: $color-default-black;
+ color: $color-primary;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
diff --git a/source/sass/global/utils.scss b/source/sass/global/utils.scss
index b7d6d7f3b..83410f6a8 100644
--- a/source/sass/global/utils.scss
+++ b/source/sass/global/utils.scss
@@ -3,9 +3,9 @@
display: flex;
flex-direction: column;
- min-height: 100vh;
+ // min-height: 100vh;
/* stylelint-disable-next-line */
- min-height: calc(100 * var(--vh, 1vh));
+ // min-height: calc(100 * var(--vh, 1vh));
.header,
.footer {
@@ -17,14 +17,29 @@
}
}
-.rouble {
- font-family: $ff-rouble;
- /* stylelint-disable */
- text-transform: lowercase !important;
- font-weight: 400 !important;
- /* stylelint-enable */
+h1, h2, h3, h4{
+ margin: 0;
+ padding: 0;
}
+p{
+ margin: 0;
+ padding: 0;
+}
+
+blockquote{
+ margin: 0;
+ padding: 0;
+}
+
+// .rouble {
+// font-family: $ff-rouble;
+// /* stylelint-disable */
+// text-transform: lowercase !important;
+// font-weight: 400 !important;
+// /* stylelint-enable */
+// }
+
.visually-hidden {
position: absolute;
@@ -42,30 +57,30 @@
clip-path: inset(100%);
}
-.scroll-lock-ios {
- position: fixed;
+// .scroll-lock-ios {
+// position: fixed;
- overflow: hidden;
-}
+// overflow: hidden;
+// }
-.scroll-lock {
- overflow: hidden;
-}
+// .scroll-lock {
+// overflow: hidden;
+// }
-.no-scrollbar {
- -ms-overflow-style: none;
- scrollbar-width: none;
+// .no-scrollbar {
+// -ms-overflow-style: none;
+// scrollbar-width: none;
- &::-webkit-scrollbar {
- display: none;
- }
-}
+// &::-webkit-scrollbar {
+// display: none;
+// }
+// }
-.no-transition {
- /* stylelint-disable-next-line */
- transition: none !important;
-}
+// .no-transition {
+// /* stylelint-disable-next-line */
+// transition: none !important;
+// }
-.js-focus-visible :focus:not(.focus-visible) {
- outline: none;
-}
+// .js-focus-visible :focus:not(.focus-visible) {
+// outline: none;
+// }
diff --git a/source/sass/mixins.scss b/source/sass/mixins.scss
index ecc2dcf18..ce20122cb 100644
--- a/source/sass/mixins.scss
+++ b/source/sass/mixins.scss
@@ -38,41 +38,47 @@
// Desktop first
-@mixin vp-1919 {
- @media (max-width: ($vp-1920 - 1px)) {
- @content;
- }
-}
+// @mixin vp-1919 {
+// @media (max-width: ($vp-1920 - 1px)) {
+// @content;
+// }
+// }
-@mixin vp-1439 {
- @media (max-width: ($vp-1440 - 1px)) {
- @content;
- }
-}
+// @mixin vp-1439 {
+// @media (max-width: ($vp-1440 - 1px)) {
+// @content;
+// }
+// }
-@mixin vp-1279 {
- @media (max-width: ($vp-1280 - 1px)) {
- @content;
- }
-}
+// @mixin vp-1279 {
+// @media (max-width: ($vp-1280 - 1px)) {
+// @content;
+// }
+// }
-@mixin vp-1023 {
- @media (max-width: ($vp-1024 - 1px)) {
+@mixin vp-1199 {
+ @media (max-width: ($vp-1200 - 1px)) {
@content;
}
}
+// @mixin vp-1023 {
+// @media (max-width: ($vp-1024 - 1px)) {
+// @content;
+// }
+// }
+
@mixin vp-767 {
@media (max-width: ($vp-768 - 1px)) {
@content;
}
}
-@mixin vp-374 {
- @media (max-width: ($vp-375 - 1px)) {
- @content;
- }
-}
+// @mixin vp-374 {
+// @media (max-width: ($vp-375 - 1px)) {
+// @content;
+// }
+// }
// Mobile first
diff --git a/source/sass/style.scss b/source/sass/style.scss
index 0a8290ae0..1028ba063 100644
--- a/source/sass/style.scss
+++ b/source/sass/style.scss
@@ -3,7 +3,7 @@
@import "vendor/normalize";
// Swiper 7.4.1
-// @import "vendor/swiper";
+@import "vendor/swiper";
// Global
// ---------------------------------
@@ -23,6 +23,28 @@
@import "blocks/custom-input";
@import "blocks/custom-toggle";
@import "blocks/custom-select";
+@import "blocks/header.scss";
+@import "blocks/intro.scss";
+@import "blocks/button.scss";
+@import "blocks/gym.scss";
+@import "blocks/data-tabs.scss";
+@import "blocks/tabs.scss";
+@import "blocks/gym-membership.scss";
+@import "blocks/cards.scss";
+@import "blocks/super-games.scss";
+@import "blocks/trainer.scss";
+@import "blocks/advantages.scss";
+@import "blocks/advantage.scss";
+@import "blocks/promotions.scss";
+@import "blocks/promotion.scss";
+@import "blocks/data-accordion.scss";
+@import "blocks/accordion.scss";
+@import "blocks/faq.scss";
+@import "blocks/reviews.scss";
+@import "blocks/appointment.scss";
+@import "blocks/free-classe.scss";
+@import "blocks/form.scss";
+@import "blocks/contacts.scss";
// ---------------------------------
diff --git a/source/sass/variables.scss b/source/sass/variables.scss
index b5a9ab283..ba9d326f7 100644
--- a/source/sass/variables.scss
+++ b/source/sass/variables.scss
@@ -12,10 +12,27 @@ $color-transparent: rgba(255, 255, 255, 0);
$color-neon-blue: #2c39f2;
$color-torch-red: #ff1553;
+$color-primary: #102654;
+$color-primary-light: rgba(16, 38, 84, 0.20);
+$color-primary-dark: rgba(16, 38, 84, 0.89);
+$color-banner-red: #ed0233;
+$color-blue: #103aae;
+$color-blue-secondary: #2e35ac;
+$color-light-grey: #e8e8e8;
+$color-dark-white: #b6bdcc;
+$color-background-grey: #f8f9fc;
+$color-blue-for-text: #0041ca;
+$color-background-blue: #1c3374;
+$color-line-red: #d10a42;
+$color-shadow: rgba(28, 51, 116, 0.20);
+$color-grey: #74819c;
// Gradient
$black-to-right: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 75%);
+$blue-to-red: conic-gradient(from 151deg at 16.03% 39.06%, #003D85 32.23633825778961deg, #B80027 313.3060026168823deg);
+$red-to-blue: linear-gradient(151deg, #ED0233 0%, #003EB7 100%);
+$red-to-blue-for-text: linear-gradient(129deg, #D10A42 0%, #0041CA 100%);
// Typography
// ---------------------------------
@@ -27,7 +44,8 @@ $fz-default: 16px;
// https://www.artlebedev.ru/kovodstvo/sections/159/#13
$ff-rouble: "Rouble", "Arial", sans-serif;
-$ff-placeholder: "Placeholder", "Arial", sans-serif;
+$ff-placeholder: "Roboto Condensed", "Arial", sans-serif;
+$ff-Alumnisans: "Alumni Sans", "Arial", sans-serif;
// Animation
// ---------------------------------
@@ -47,6 +65,7 @@ $vp-320: 320px;
$vp-375: 375px;
$vp-768: 768px;
$vp-1024: 1024px;
+$vp-1200: 1200px;
$vp-1280: 1280px;
$vp-1440: 1440px;
$vp-1920: 1920px;
diff --git a/source/sass/vendor/swiper.scss b/source/sass/vendor/swiper.scss
index 4696fb7cc..1579bb4ff 100644
--- a/source/sass/vendor/swiper.scss
+++ b/source/sass/vendor/swiper.scss
@@ -17,22 +17,27 @@
font-weight: 400;
font-style: normal;
}
+
:root {
- --swiper-theme-color: #007aff;
+ --swiper-theme-color: #afafaf;
}
+
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
+
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
}
-.swiper-vertical > .swiper-wrapper {
+
+.swiper-vertical>.swiper-wrapper {
flex-direction: column;
}
+
.swiper-wrapper {
position: relative;
width: 100%;
@@ -42,16 +47,20 @@
transition-property: transform;
box-sizing: content-box;
}
+
.swiper-android .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0);
}
+
.swiper-pointer-events {
touch-action: pan-y;
}
+
.swiper-pointer-events.swiper-vertical {
touch-action: pan-x;
}
+
.swiper-slide {
flex-shrink: 0;
width: 100%;
@@ -59,23 +68,28 @@
position: relative;
transition-property: transform;
}
+
.swiper-slide-invisible-blank {
visibility: hidden;
}
+
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
height: auto;
}
+
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
+
/* 3D Effects */
.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px;
}
+
.swiper-3d .swiper-wrapper,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
@@ -86,6 +100,7 @@
.swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d;
}
+
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
@@ -99,65 +114,82 @@
pointer-events: none;
z-index: 10;
}
+
.swiper-3d .swiper-slide-shadow {
background: rgba(0, 0, 0, 0.15);
}
+
.swiper-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
+
.swiper-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
+
.swiper-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
+
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
+
/* CSS Mode */
-.swiper-css-mode > .swiper-wrapper {
+.swiper-css-mode>.swiper-wrapper {
overflow: auto;
scrollbar-width: none;
/* For Firefox */
-ms-overflow-style: none;
/* For Internet Explorer and Edge */
}
-.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
+
+.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
display: none;
}
-.swiper-css-mode > .swiper-wrapper > .swiper-slide {
+
+.swiper-css-mode>.swiper-wrapper>.swiper-slide {
scroll-snap-align: start start;
}
-.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
+
+.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
scroll-snap-type: x mandatory;
}
-.swiper-vertical.swiper-css-mode > .swiper-wrapper {
+
+.swiper-vertical.swiper-css-mode>.swiper-wrapper {
scroll-snap-type: y mandatory;
}
-.swiper-centered > .swiper-wrapper::before {
+
+.swiper-centered>.swiper-wrapper::before {
content: '';
flex-shrink: 0;
order: 9999;
}
-.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
+
+.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before);
}
-.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
+
+.swiper-centered.swiper-horizontal>.swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after);
}
-.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
+
+.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before);
}
-.swiper-centered.swiper-vertical > .swiper-wrapper::before {
+
+.swiper-centered.swiper-vertical>.swiper-wrapper::before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after);
}
-.swiper-centered > .swiper-wrapper > .swiper-slide {
+
+.swiper-centered>.swiper-wrapper>.swiper-slide {
scroll-snap-align: center center;
}
+
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
content: '';
position: absolute;
@@ -165,25 +197,29 @@
top: 0;
pointer-events: none;
}
+
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
height: 1px;
width: var(--swiper-virtual-size);
}
+
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
width: 1px;
height: var(--swiper-virtual-size);
}
+
:root {
--swiper-navigation-size: 44px;
/*
--swiper-navigation-color: var(--swiper-theme-color);
*/
}
+
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
- width: calc(var(--swiper-navigation-size) / 44 * 27);
+ width: calc(var(--swiper-navigation-size) / 42 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
z-index: 10;
@@ -193,12 +229,14 @@
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
+
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
+
.swiper-button-prev:after,
.swiper-button-next:after {
font-family: swiper-icons;
@@ -209,29 +247,35 @@
font-variant: initial;
line-height: 1;
}
+
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: 10px;
right: auto;
}
+
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: 'prev';
}
+
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: 10px;
left: auto;
}
+
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
content: 'next';
}
+
.swiper-button-lock {
display: none;
}
-:root {
- /*
+
+// :root {
+/*
--swiper-pagination-color: var(--swiper-theme-color);
--swiper-pagination-bullet-size: 8px;
--swiper-pagination-bullet-width: 8px;
@@ -242,7 +286,7 @@
--swiper-pagination-bullet-horizontal-gap: 4px;
--swiper-pagination-bullet-vertical-gap: 6px;
*/
-}
+// }
.swiper-pagination {
position: absolute;
text-align: center;
@@ -250,45 +294,56 @@
transform: translate3d(0, 0, 0);
z-index: 10;
}
+
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
+
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
-.swiper-horizontal > .swiper-pagination-bullets,
+.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: 10px;
left: 0;
width: 100%;
}
+
/* Bullets */
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
+
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform: scale(0.33);
position: relative;
}
+
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1);
}
+
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform: scale(1);
}
+
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(0.66);
}
+
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33);
}
+
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(0.66);
}
+
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(0.33);
}
+
.swiper-pagination-bullet {
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
@@ -297,68 +352,82 @@
background: var(--swiper-pagination-bullet-inactive-color, #000);
opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
+
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-webkit-appearance: none;
- appearance: none;
+ appearance: none;
}
+
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
+
.swiper-pagination-bullet:only-child {
display: none !important;
}
+
.swiper-pagination-bullet-active {
opacity: var(--swiper-pagination-bullet-opacity, 1);
background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
-.swiper-vertical > .swiper-pagination-bullets,
+
+.swiper-vertical>.swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
right: 10px;
top: 50%;
transform: translate3d(0px, -50%, 0);
}
-.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
+
+.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
display: block;
}
-.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+
+.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
}
-.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
+
+.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: 200ms transform, 200ms top;
}
-.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
+
+.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
-.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+
+.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
-.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
+
+.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms left;
}
-.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+
+.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms right;
}
+
/* Progress */
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25);
position: absolute;
}
+
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color));
position: absolute;
@@ -369,38 +438,44 @@ button.swiper-pagination-bullet {
transform: scale(0);
transform-origin: left top;
}
+
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top;
}
-.swiper-horizontal > .swiper-pagination-progressbar,
+
+.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
-.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
+.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
-.swiper-vertical > .swiper-pagination-progressbar,
+
+.swiper-vertical>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
-.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
+.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
left: 0;
top: 0;
}
+
.swiper-pagination-lock {
display: none;
}
+
/* Scrollbar */
.swiper-scrollbar {
border-radius: 10px;
position: relative;
- -ms-touch-action: none;
+ // -ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
-.swiper-horizontal > .swiper-scrollbar {
+
+.swiper-horizontal>.swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
@@ -408,7 +483,8 @@ button.swiper-pagination-bullet {
height: 5px;
width: 98%;
}
-.swiper-vertical > .swiper-scrollbar {
+
+.swiper-vertical>.swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
@@ -416,6 +492,7 @@ button.swiper-pagination-bullet {
width: 5px;
height: 98%;
}
+
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
@@ -425,12 +502,15 @@ button.swiper-pagination-bullet {
left: 0;
top: 0;
}
+
.swiper-scrollbar-cursor-drag {
cursor: move;
}
+
.swiper-scrollbar-lock {
display: none;
}
+
.swiper-zoom-container {
width: 100%;
height: 100%;
@@ -439,22 +519,25 @@ button.swiper-pagination-bullet {
align-items: center;
text-align: center;
}
-.swiper-zoom-container > img,
-.swiper-zoom-container > svg,
-.swiper-zoom-container > canvas {
+
+.swiper-zoom-container>img,
+.swiper-zoom-container>svg,
+.swiper-zoom-container>canvas {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
+
.swiper-slide-zoomed {
cursor: move;
}
+
/* Preloader */
-:root {
- /*
+// :root {
+/*
--swiper-preloader-color: var(--swiper-theme-color);
*/
-}
+// }
.swiper-lazy-preloader {
width: 42px;
height: 42px;
@@ -471,17 +554,21 @@ button.swiper-pagination-bullet {
border-radius: 50%;
border-top-color: transparent;
}
+
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff;
}
+
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000;
}
+
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
}
}
+
/* a11y */
.swiper .swiper-notification {
position: absolute;
@@ -491,69 +578,84 @@ button.swiper-pagination-bullet {
opacity: 0;
z-index: -1000;
}
-.swiper-free-mode > .swiper-wrapper {
+
+.swiper-free-mode>.swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto;
}
-.swiper-grid > .swiper-wrapper {
+
+.swiper-grid>.swiper-wrapper {
flex-wrap: wrap;
}
-.swiper-grid-column > .swiper-wrapper {
+
+.swiper-grid-column>.swiper-wrapper {
flex-wrap: wrap;
flex-direction: column;
}
+
.swiper-fade.swiper-free-mode .swiper-slide {
transition-timing-function: ease-out;
}
+
.swiper-fade .swiper-slide {
pointer-events: none;
transition-property: opacity;
}
+
.swiper-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
+
.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
+
.swiper-cube {
overflow: visible;
}
+
.swiper-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
- backface-visibility: hidden;
+ backface-visibility: hidden;
z-index: 1;
visibility: hidden;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
+
.swiper-cube .swiper-slide .swiper-slide {
pointer-events: none;
}
+
.swiper-cube.swiper-rtl .swiper-slide {
transform-origin: 100% 0;
}
+
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
+
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev,
-.swiper-cube .swiper-slide-next + .swiper-slide {
+.swiper-cube .swiper-slide-next+.swiper-slide {
pointer-events: auto;
visibility: visible;
}
+
.swiper-cube .swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
- backface-visibility: hidden;
+ backface-visibility: hidden;
}
+
.swiper-cube .swiper-cube-shadow {
position: absolute;
left: 0;
@@ -563,6 +665,7 @@ button.swiper-pagination-bullet {
opacity: 0.6;
z-index: 0;
}
+
.swiper-cube .swiper-cube-shadow:before {
content: '';
background: #000;
@@ -573,42 +676,50 @@ button.swiper-pagination-bullet {
right: 0;
filter: blur(50px);
}
+
.swiper-flip {
overflow: visible;
}
+
.swiper-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
- backface-visibility: hidden;
+ backface-visibility: hidden;
z-index: 1;
}
+
.swiper-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
+
.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
+
.swiper-flip .swiper-slide-shadow-top,
.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
- backface-visibility: hidden;
+ backface-visibility: hidden;
}
+
.swiper-creative .swiper-slide {
-webkit-backface-visibility: hidden;
- backface-visibility: hidden;
+ backface-visibility: hidden;
overflow: hidden;
transition-property: transform, opacity, height;
}
+
.swiper-cards {
overflow: visible;
}
+
.swiper-cards .swiper-slide {
transform-origin: center bottom;
-webkit-backface-visibility: hidden;
- backface-visibility: hidden;
+ backface-visibility: hidden;
overflow: hidden;
}
diff --git a/source/sitemap.html b/source/sitemap.html
deleted file mode 100644
index 08982ad04..000000000
--- a/source/sitemap.html
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-
-
-
-
-
-
ProjectName
-
-
-
-
-
-
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+