КОЛЛАБОРАЦИЯ CFMOTO Х ДЕНИС СИМАЧЁВ
13.07.2026
CFMOTO Х ДЕНИС СИМАЧЁВ
CFMOTO Х ДЕНИС СИМАЧЁВ
КОГДА СОВРЕМЕННЫЙ ДИЗАЙН ВСТРЕЧАЕТСЯ С ДУХОМ СВОБОДЫ!
ДЕНИС СИМАЧЕВ – КУЛЬТОВАЯ ФИГУРА РОССИЙСКОГО ДИЗАЙНА
Денис Симачёв — один из самых узнаваемых российских дизайнеров, сумевший превратить национальные культурные коды в язык современной моды. Его работы стали символом эпохи, в которой традиционные русские орнаменты, хохлома, гжель и советская эстетика впервые обрели новое прочтение в мире высокой моды и стритвира. На протяжении многих лет Симачёв остается фигурой, определяющей визуальную идентичность современной российской дизайнерской сцены, а его проекты неизменно становятся заметными культурными событиями.
О ПРОЕКТЕ
Совместный проект CFMOTO × Денис Симачёв — это встреча двух миров, объединенных смелостью, характером и стремлением создавать уникальные вещи. Специально для коллаборации Денис Симачёв разработал три эксклюзивные графические концепции в своем фирменном стиле. В их основе — переосмысленная хохломская роспись, выполненная в фирменных цветах CFMOTO. Так классический русский художественный мотив получает современное звучание и становится частью эстетики бренда.
ТРИ УНИКАЛЬНЫХ ДИЗАЙНА. ТРИ ЗНАКОВЫЕ МОДЕЛИ ТЕХНИКИ
Авторские ливреи украсят три знаковые модели техники CFMOTO:
Багги ZFORCE Z10 EPS
Квадроцикл CFORCE 1000 EPS LTD
Мотоцикл CFMOTO 750SR-S
Каждая из моделей существует как самостоятельный арт-объект, демонстрирующий, что современная техника может быть не только воплощением инженерной мысли, но и предметом дизайнерского искусства. Премьера проекта состоится 1 августа в Москве в легендарном клубе «СИМАЧ».
ПРЕМЬЕРА – 1 АВГУСТА В МОСКВЕ, КЛУБ «СИМАЧ»
Пространство на один вечер превратится в выставку, где техника CFMOTO будет представлена как объект современного дизайна. Гостей ждет торжественный запуск коллаборации, презентация уникальных моделей и мероприятие, объединяющее представителей индустрии, медиа, дизайнерского сообщества и поклонников бренда. CFMOTO × Денис Симачёв — это больше, чем коллаборация. Это проект о том, как культурное наследие, современный дизайн и мир мототехники могут объединиться, создавая новый визуальный язык, одинаково понятный ценителям искусства и тем, кто привык выбирать свободу движения.
CFMOTO Х ДЕНИС СИМАЧЁВ – ЭТО ДИАЛОГ КУЛЬТУРЫ И ТЕХНОЛОГИЙ, ТРАДИЦИЙ И СКОРОСТИ, РЕМЕСЛА И СОВРЕМЕННОГО ДИЗАЙНА.
ПРОЕКТ, КОТОРЫЙ НАПОМИНАЕТ: САМЫЕ ИНТЕРЕСНЫЕ ВЕЩИ РОЖДАЮТСЯ ТАМ, ГДЕ СМЕЛЫЕ ИДЕИ ВСТРЕЧАЮТСЯ С БЕЗУПРЕЧНЫМ ИСПОЛНЕНИЕМ.
×
Денис Симачёв
Денис Симачёв — российский дизайнер, основатель бренда SIMACHЁV, ставший одним из самых узнаваемых представителей отечественной моды на мировой сцене. Его коллекции были представлены на New York Fashion Week, Paris Fashion Week и Milan Fashion Week, где Симачёв продемонстрировал смелое сочетание современной моды, русского культурного кода и иронии. За годы работы он создал культовый бренд, оказавший заметное влияние на российскую fashion-индустрию, сотрудничал с крупнейшими международными компаниями и стал одним из дизайнеров, сформировавших образ современной российской моды начала XXI века.
×
О проекте
‹
›
×
Премьера проекта
body { margin: 0; }
.cfs-page {
--cfs-pink: #d4147a;
--cfs-cyan: #2ec4c9;
--cfs-black: #1a1a1a;
--cfs-text: #2a2a2a;
--cfs-bg: #e8e4df;
--cfs-hero-bg: #d4147a;
--cfs-hero-bg-image: none; /* подставьте: url('https://.../hero.jpg') */
--cfs-font: 'Oswald', 'Arial Narrow', Arial, sans-serif;
font-family: var(--cfs-font);
color: var(--cfs-text);
line-height: 1.55;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: hidden;
position: relative;
container-type: inline-size;
container-name: cfs-page;
}
.cfs-page *, .cfs-page *::before, .cfs-page *::after { box-sizing: inherit; }
.cfs-page img { max-width: 100%; height: auto; display: block; }
.cfs-layout {
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
max-width: 100%;
overflow-x: hidden;
}
.cfs-visual {
order: 1;
}
.cfs-content {
order: 2;
}
/* Визуальная колонка */
.cfs-visual {
display: flex;
flex-direction: column;
background: #000;
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.cfs-hero {
flex-shrink: 0;
}
.cfs-hero__img {
width: 100%;
aspect-ratio: 576 / 554;
background-color: var(--cfs-hero-bg);
background-image: var(--cfs-hero-bg-image);
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
}
.cfs-vehicles--desktop {
display: none;
}
.cfs-vehicles--mobile {
display: block;
background: #000;
padding-bottom: 12px;
--cfs-slider-visible: 2.25;
min-width: 0;
max-width: 100%;
overflow-x: hidden;
}
.cfs-vehicles-slider__track {
display: flex;
gap: 0;
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.cfs-vehicles-slider__track::-webkit-scrollbar { display: none; }
.cfs-vehicles-slider__slide {
flex: 0 0 calc(100% / var(--cfs-slider-visible));
min-width: 0;
scroll-snap-align: start;
aspect-ratio: 1 / 1;
overflow: hidden;
display: block;
position: relative;
pointer-events: none;
}
.cfs-content__inner {
padding: 32px 20px 40px;
max-width: 720px;
}
.cfs-vehicles__item {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
position: relative;
pointer-events: none;
}
.cfs-vehicles__item--zforce,
.cfs-vehicles__item--cforce,
.cfs-vehicles__item--sr {
background-color: #111;
}
.cfs-vehicles__item--zforce::before,
.cfs-vehicles__item--cforce::before,
.cfs-vehicles__item--sr::before {
content: '';
position: absolute;
inset: 0;
background-color: #111;
background-image: var(--cfs-vehicle-bg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(0px);
transform: scale(1.03);
transition: transform 0.45s ease;
will-change: transform;
}
/* Контент */
.cfs-content {
background: var(--cfs-bg);
position: relative;
min-width: 0;
max-width: 100%;
overflow-wrap: break-word;
}
.cfs-title {
font-size: clamp(28px, 7cqw, 42px);
font-weight: 700;
line-height: 1.1;
text-transform: uppercase;
margin: 0 0 12px;
letter-spacing: 0.02em;
}
.cfs-title__x { font-weight: 400; }
.cfs-title__name { color: var(--cfs-pink); }
.cfs-subtitle {
font-size: clamp(14px, 3.5cqw, 18px);
font-weight: 500;
text-transform: uppercase;
margin: 0 0 32px;
letter-spacing: 0.03em;
}
.cfs-section { margin-bottom: 24px; }
.cfs-link {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0;
margin: 0 0 12px;
font-family: inherit;
font-size: clamp(15px, 3.8cqw, 19px);
font-weight: 700;
text-transform: uppercase;
color: var(--cfs-pink);
cursor: pointer;
letter-spacing: 0.02em;
line-height: 1.25;
transition: opacity 0.2s, text-decoration-color 0.2s;
text-decoration: underline;
text-decoration-color: rgba(212, 20, 122, 0.3);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.cfs-link:hover {
opacity: 0.75;
text-decoration-color: var(--cfs-pink);
}
.cfs-heading {
font-size: clamp(15px, 3.8cqw, 19px);
font-weight: 700;
text-transform: uppercase;
color: var(--cfs-pink);
margin: 0 0 12px;
letter-spacing: 0.02em;
line-height: 1.25;
}
.cfs-text {
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(13px, 3.2cqw, 15px);
font-weight: 400;
margin: 0 0 12px;
line-height: 1.6;
}
.cfs-divider {
height: 2px;
background: linear-gradient(90deg, transparent, var(--cfs-pink) 10%, var(--cfs-pink) 90%, transparent);
margin: 28px 0;
opacity: 0.6;
}
.cfs-models {
list-style: none;
margin: 0 0 16px;
padding: 0;
}
.cfs-models li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 8px;
font-size: clamp(13px, 3.2cqw, 15px);
}
.cfs-models__icon {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
background: radial-gradient(circle at 30% 30%, var(--cfs-cyan), var(--cfs-pink));
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
}
.cfs-models__link {
color: var(--cfs-text);
text-decoration: underline;
text-underline-offset: 3px;
}
.cfs-models__link:hover { color: var(--cfs-pink); }
.cfs-quote {
background: var(--cfs-black);
color: #fff;
padding: 24px 28px;
margin: 32px 0 24px;
font-size: clamp(13px, 3.5cqw, 16px);
font-weight: 500;
text-transform: uppercase;
line-height: 1.45;
letter-spacing: 0.03em;
}
.cfs-quote__x { font-weight: 400; }
.cfs-quote__accent { color: var(--cfs-cyan); }
.cfs-footer-text {
font-size: clamp(12px, 3cqw, 14px);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.5;
margin: 0;
}
/* Модальные окна — mobile-first: без белой рамки */
.cfs-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.cfs-modal[hidden] { display: none !important; }
.cfs-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75);
cursor: pointer;
}
.cfs-modal__dialog {
position: relative;
background: transparent;
max-width: 100%;
width: 100%;
max-height: 100dvh;
overflow: auto;
border-radius: 0;
box-shadow: none;
animation: cfsModalIn 0.25s ease;
}
@keyframes cfsModalIn {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
.cfs-modal__close {
position: absolute;
top: 8px;
right: 12px;
z-index: 2;
width: 40px;
height: 40px;
border: none;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 28px;
line-height: 1;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.cfs-modal__close:hover { background: var(--cfs-pink); }
.cfs-modal__title {
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 16px;
color: var(--cfs-pink);
}
.cfs-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* Био */
.cfs-modal__dialog--bio {
padding: 48px 16px 24px;
background: #fff;
}
.cfs-modal__dialog--bio .cfs-modal__title {
color: var(--cfs-pink);
}
.cfs-modal__bio {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-items: start;
}
.cfs-modal__bio-img {
max-width: 280px;
margin: 0 auto;
}
.cfs-modal__bio-img img {
width: 100%;
height: auto;
object-fit: cover;
}
.cfs-modal__bio-text p {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.65;
margin: 0;
color: #333;
}
/* Галерея */
.cfs-modal__dialog--gallery {
padding: 0;
max-width: 100%;
width: 100%;
}
.cfs-gallery { position: relative; }
.cfs-gallery__main {
position: relative;
display: block;
background: #111;
margin-bottom: 12px;
line-height: 0;
}
.cfs-gallery__main img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: min(72vh, calc(100dvh - 88px));
margin: 0 auto;
object-fit: contain;
}
.cfs-gallery__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
width: 36px;
height: 36px;
border: none;
background: rgba(212, 20, 122, 0.85);
color: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: background 0.2s;
}
.cfs-gallery__nav:hover { background: var(--cfs-pink); }
.cfs-gallery__nav--prev { left: 8px; }
.cfs-gallery__nav--next { right: 8px; }
.cfs-gallery__thumbs {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 4px 8px 8px;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.cfs-gallery__thumb {
flex-shrink: 0;
width: 56px;
height: 42px;
border: 2px solid transparent;
padding: 0;
cursor: pointer;
background: none;
opacity: 0.55;
transition: opacity 0.2s, border-color 0.2s;
}
.cfs-gallery__thumb.is-active {
border-color: var(--cfs-pink);
opacity: 1;
}
.cfs-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Видео */
.cfs-modal__dialog--video {
padding: 0;
max-width: 100%;
}
.cfs-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
background: #000;
}
.cfs-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
body.cfs-modal-open { overflow: hidden; }
/* Десктоп: левая колонка fixed, справа скроллится текст */
@container cfs-page (min-width: 901px) {
.cfs-layout {
display: block;
}
.cfs-visual {
height: 100vh;
height: 100dvh;
min-height: 0;
z-index: 10;
background: #000;
overflow: hidden;
}
.cfs-content {
width: 50%;
max-width: 50%;
margin-left: 50%;
box-sizing: border-box;
}
.cfs-hero {
flex: 1 1 auto;
min-height: 0;
display: flex;
}
.cfs-hero__img {
flex: 1 1 auto;
min-height: 0;
height: 100%;
aspect-ratio: auto;
}
.cfs-vehicles--desktop {
display: grid;
grid-template-columns: repeat(3, 1fr);
flex-shrink: 0;
}
.cfs-vehicles--desktop .cfs-vehicles__item {
pointer-events: auto;
}
.cfs-vehicles--desktop .cfs-vehicles__item:hover::before {
transform: scale(1.07);
}
.cfs-vehicles--mobile {
display: none;
}
.cfs-content__inner {
padding: 48px 40px 56px;
}
.cfs-modal {
padding: 20px;
}
.cfs-modal__dialog {
background: #fff;
max-width: 900px;
width: calc(100% - 40px);
max-height: calc(100dvh - 40px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.cfs-modal__dialog--bio {
max-width: 900px;
padding: 32px;
}
.cfs-modal__dialog--bio .cfs-modal__title {
color: var(--cfs-pink);
}
.cfs-modal__bio-text p {
color: #333;
}
.cfs-modal__dialog--gallery {
padding: 16px 16px 12px;
max-width: 1100px;
width: calc(100% - 40px);
}
.cfs-gallery__main img {
max-height: min(72vh, calc(100dvh - 160px));
}
.cfs-modal__dialog--video {
padding: 24px;
max-width: 900px;
}
.cfs-modal__bio {
grid-template-columns: 280px 1fr;
gap: 28px;
}
.cfs-modal__bio-img {
max-width: none;
margin: 0;
}
.cfs-gallery__nav {
width: 44px;
height: 44px;
font-size: 28px;
}
.cfs-gallery__thumb {
width: 72px;
height: 54px;
}
}
/* Fallback для браузеров без container queries */
@supports not (container-type: inline-size) {
@media (min-width: 901px) {
.cfs-layout { display: block; }
.cfs-visual {
height: 100vh;
height: 100dvh;
min-height: 0;
z-index: 10;
background: #000;
overflow: hidden;
}
.cfs-content {
width: 50%;
max-width: 50%;
margin-left: 50%;
box-sizing: border-box;
}
.cfs-hero {
flex: 1 1 auto;
min-height: 0;
display: flex;
}
.cfs-hero__img {
flex: 1 1 auto;
min-height: 0;
height: 100%;
aspect-ratio: auto;
}
.cfs-vehicles--desktop {
display: grid;
grid-template-columns: repeat(3, 1fr);
flex-shrink: 0;
}
.cfs-vehicles--desktop .cfs-vehicles__item {
pointer-events: auto;
}
.cfs-vehicles--desktop .cfs-vehicles__item:hover::before {
transform: scale(1.07);
}
.cfs-vehicles--mobile { display: none; }
.cfs-content__inner { padding: 48px 40px 56px; }
.cfs-modal {
padding: 20px;
}
.cfs-modal__dialog {
background: #fff;
max-width: 900px;
width: calc(100% - 40px);
max-height: calc(100dvh - 40px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.cfs-modal__dialog--bio {
max-width: 900px;
padding: 32px;
}
.cfs-modal__dialog--bio .cfs-modal__title {
color: var(--cfs-pink);
}
.cfs-modal__bio-text p {
color: #333;
}
.cfs-modal__dialog--gallery {
padding: 16px 16px 12px;
max-width: 1100px;
width: calc(100% - 40px);
}
.cfs-gallery__main img {
max-height: min(72vh, calc(100dvh - 160px));
}
.cfs-modal__dialog--video {
padding: 24px;
max-width: 900px;
}
.cfs-modal__bio {
grid-template-columns: 280px 1fr;
gap: 28px;
}
.cfs-modal__bio-img {
max-width: none;
margin: 0;
}
.cfs-gallery__nav {
width: 44px;
height: 44px;
font-size: 28px;
}
.cfs-gallery__thumb {
width: 72px;
height: 54px;
}
}
}
(function () {
'use strict';
// ⚙️ Настройки — замените перед публикацией в WordPress
var CONFIG = {
rootUrl: 'https://awm-trade.ru/simach',
baseUrl: 'https://awm-trade.ru/simach/assets/images',
galleryPath: 'gallery',
// Фон hero-блока (оставьте пустым для цветной заглушки)
heroBgImage: 'simach-1.jpg',
vehicleImages: {
zforce: 'simach-2.jpg',
cforce: 'simach-3.jpg',
'750sr': 'simach-4.jpg'
},
// Ссылки на модели (замените на реальные)
modelLinks: {
zforce: 'https://awm-trade.ru/kvadrocikly/cfmoto-zforce-z10-eps/',
cforce: 'https://awm-trade.ru/kvadrocikly/cfmoto-cforce-1000-eps-ltd/',
'750sr': 'https://cfmoto-moto.ru/product/cfmoto-750sr-s-abs/'
},
// Видео премьеры
videoEmbedUrl: 'https://www.youtube.com/embed/38oSDUmy3pI?rel=0',
galleryImages: [
'kaseone-9042.jpg','kaseone-9021.jpg','kaseone-9012.jpg','kaseone-8987.jpg',
'kaseone-8976.jpg','kaseone-8940.jpg','kaseone-8926.jpg','kaseone-8913.jpg',
'kaseone-8900.jpg','kaseone-8896.jpg','kaseone-8894.jpg','kaseone-8863.jpg',
'kaseone-8851.jpg','kaseone-8832.jpg','kaseone-8813.jpg','kaseone-8797.jpg',
'kaseone-8783.jpg','kaseone-8768.jpg','kaseone-8758.jpg','kaseone-8754.jpg',
'kaseone-8739.jpg','kaseone-8727.jpg','kaseone-8722.jpg','kaseone-8708.jpg',
'kaseone-8703.jpg','kaseone-8696.jpg','kaseone-8682.jpg','kaseone-8655.jpg',
'kaseone-8649.jpg','kaseone-8631.jpg','kaseone-8610.jpg','kaseone-8600.jpg',
'kaseone-8576.jpg','kaseone-8564.jpg','kaseone-8559.jpg','kaseone-8546.jpg',
'kaseone-8531.jpg','kaseone-8508.jpg','kaseone-8501.jpg','kaseone-8454.jpg',
'kaseone-8445.jpg','kaseone-8435.jpg','kaseone-8431.jpg','kaseone-8418.jpg',
'kaseone-8411.jpg','kaseone-8410.jpg','kaseone-8397.jpg','kaseone-8370.jpg',
'kaseone-8367.jpg','kaseone-8364.jpg','kaseone-8362.jpg','kaseone-8359.jpg',
'kaseone-8357.jpg','kaseone-8344.jpg','kaseone-8333.jpg','kaseone-8324.jpg',
'kaseone-8303.jpg','kaseone-8282.jpg','kaseone-8281.jpg','kaseone-8276.jpg',
'kaseone-8271.jpg'
]
};
var root = document.getElementById('cfs-simachev');
if (!root) return;
// Неразрывные пробелы после висячих союзов и предлогов
(function applyTypograph() {
var glueWords = [
'и', 'а', 'но', 'да', 'ли', 'бы', 'же', 'то', 'что', 'как', 'или', 'чем', 'если',
'в', 'во', 'с', 'со', 'к', 'ко', 'у', 'о', 'об', 'обо',
'на', 'по', 'не', 'ни', 'до', 'от', 'из', 'за', 'для', 'при', 'без', 'над', 'под', 'про'
];
var glueRe = new RegExp(
'([\\s\\(\\[\\{«"\'—–,.:;!?]|^)(' + glueWords.join('|') + ') (?!\\u00A0)',
'gi'
);
var dateRe = /(\d) (?=[а-яА-ЯёЁ])/g;
root.querySelectorAll(
'.cfs-text, .cfs-subtitle, .cfs-heading, .cfs-footer-text, .cfs-quote p, .cfs-link, .cfs-modal__bio-text p'
).forEach(function (el) {
var walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
var node;
while ((node = walker.nextNode())) {
node.textContent = node.textContent
.replace(glueRe, function (_, before, word) { return before + word + '\u00A0'; })
.replace(dateRe, '$1\u00A0');
}
});
})();
function asset(path) {
return CONFIG.baseUrl + '/' + path;
}
function galleryAsset(filename) {
return CONFIG.baseUrl + '/' + CONFIG.galleryPath + '/' + filename;
}
// Подставляем пути к изображениям
root.querySelectorAll('[data-cfs]').forEach(function (el) {
el.src = asset(el.getAttribute('data-cfs'));
});
if (CONFIG.heroBgImage) {
root.style.setProperty('--cfs-hero-bg-image', "url('" + asset(CONFIG.heroBgImage) + "')");
}
if (CONFIG.vehicleImages) {
var vehicleClassMap = { zforce: 'zforce', cforce: 'cforce', '750sr': 'sr' };
Object.keys(CONFIG.vehicleImages).forEach(function (key) {
var cls = vehicleClassMap[key];
var url = asset(CONFIG.vehicleImages[key]);
root.querySelectorAll('.cfs-vehicles__item--' + cls).forEach(function (el) {
el.style.setProperty('--cfs-vehicle-bg', "url('" + url + "')");
});
});
}
// Ссылки на модели (только в тексте списка)
root.querySelectorAll('.cfs-models__link[data-model-link]').forEach(function (a) {
var key = a.getAttribute('data-model-link');
if (CONFIG.modelLinks[key]) a.href = CONFIG.modelLinks[key];
a.target = '_blank';
a.rel = 'noopener noreferrer';
});
// ——— Модальные окна ———
var modals = {
designer: document.getElementById('cfs-modal-designer'),
project: document.getElementById('cfs-modal-project'),
premiere: document.getElementById('cfs-modal-premiere')
};
var videoIframe = document.getElementById('cfs-video-iframe');
var activeModal = null;
function openModal(name) {
var modal = modals[name];
if (!modal) return;
modal.hidden = false;
activeModal = modal;
document.body.classList.add('cfs-modal-open');
if (name === 'premiere' && videoIframe) {
videoIframe.src = CONFIG.videoEmbedUrl;
}
if (name === 'project') galleryGoTo(galleryIndex);
}
function closeModal(modal) {
if (!modal) return;
modal.hidden = true;
document.body.classList.remove('cfs-modal-open');
if (modal === modals.premiere && videoIframe) {
videoIframe.src = '';
}
activeModal = null;
}
function closeAllModals() {
Object.keys(modals).forEach(function (k) { closeModal(modals[k]); });
}
root.querySelectorAll('[data-modal]').forEach(function (btn) {
btn.addEventListener('click', function () {
openModal(btn.getAttribute('data-modal'));
});
});
root.querySelectorAll('[data-close]').forEach(function (el) {
el.addEventListener('click', function () {
closeModal(el.closest('.cfs-modal'));
});
});
document.addEventListener('keydown', function (e) {
if (!activeModal) return;
if (e.key === 'Escape') {
closeModal(activeModal);
return;
}
if (activeModal === modals.project && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
e.preventDefault();
galleryGoTo(galleryIndex + (e.key === 'ArrowRight' ? 1 : -1));
}
});
// ——— Галерея ———
var galleryIndex = 0;
var mainImg = document.getElementById('cfs-gallery-main-img');
var thumbsContainer = document.getElementById('cfs-gallery-thumbs');
function galleryGoTo(index) {
var total = CONFIG.galleryImages.length;
galleryIndex = ((index % total) + total) % total;
var file = CONFIG.galleryImages[galleryIndex];
if (mainImg) {
mainImg.src = galleryAsset(file);
mainImg.alt = 'Фото проекта ' + (galleryIndex + 1);
}
if (thumbsContainer) {
thumbsContainer.querySelectorAll('.cfs-gallery__thumb').forEach(function (btn, i) {
btn.classList.toggle('is-active', i === galleryIndex);
if (i === galleryIndex) btn.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
});
}
}
if (thumbsContainer) {
CONFIG.galleryImages.forEach(function (file, i) {
var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'cfs-gallery__thumb' + (i === 0 ? ' is-active' : '');
btn.setAttribute('aria-label', 'Фото ' + (i + 1));
var img = document.createElement('img');
img.src = galleryAsset(file);
img.alt = '';
img.loading = 'lazy';
btn.appendChild(img);
btn.addEventListener('click', function () { galleryGoTo(i); });
thumbsContainer.appendChild(btn);
});
}
var prevBtn = root.querySelector('.cfs-gallery__nav--prev');
var nextBtn = root.querySelector('.cfs-gallery__nav--next');
if (prevBtn) prevBtn.addEventListener('click', function () { galleryGoTo(galleryIndex - 1); });
if (nextBtn) nextBtn.addEventListener('click', function () { galleryGoTo(galleryIndex + 1); });
// Свайп в галерее
var galleryMain = root.querySelector('.cfs-gallery__main');
if (galleryMain) {
var touchStartX = 0;
galleryMain.addEventListener('touchstart', function (e) {
touchStartX = e.changedTouches[0].screenX;
}, { passive: true });
galleryMain.addEventListener('touchend', function (e) {
var diff = e.changedTouches[0].screenX - touchStartX;
if (Math.abs(diff) > 50) galleryGoTo(galleryIndex + (diff < 0 ? 1 : -1));
}, { passive: true });
}
galleryGoTo(0);
// ——— Десктоп: фиксированная левая колонка ———
var visualEl = root.querySelector('.cfs-visual');
var contentEl = root.querySelector('.cfs-content');
function isDesktopLayout() {
return root.offsetWidth >= 901;
}
function resetFixedVisual() {
if (!visualEl) return;
visualEl.style.position = '';
visualEl.style.top = '';
visualEl.style.left = '';
visualEl.style.width = '';
if (contentEl) {
contentEl.style.marginLeft = '';
contentEl.style.width = '';
contentEl.style.maxWidth = '';
}
}
function updateFixedVisual() {
if (!visualEl || !isDesktopLayout()) {
resetFixedVisual();
return;
}
var pageRect = root.getBoundingClientRect();
var scrollY = window.pageYOffset || document.documentElement.scrollTop;
var pageTop = scrollY + pageRect.top;
var pageHeight = root.offsetHeight;
var viewportH = window.innerHeight;
var viewportW = window.innerWidth;
var maxScrollY = pageTop + pageHeight - viewportH;
var halfW = Math.floor(root.offsetWidth * 0.5);
var panelLeft = Math.max(0, pageRect.left);
var panelW = Math.min(halfW, viewportW - panelLeft);
visualEl.style.width = panelW + 'px';
visualEl.style.left = panelLeft + 'px';
if (contentEl) {
contentEl.style.marginLeft = '50%';
contentEl.style.width = '50%';
contentEl.style.maxWidth = '50%';
}
if (scrollY = maxScrollY) {
visualEl.style.position = 'absolute';
visualEl.style.top = Math.max(0, pageHeight - viewportH) + 'px';
} else {
visualEl.style.position = 'fixed';
visualEl.style.top = '0';
}
}
window.addEventListener('scroll', updateFixedVisual, { passive: true });
window.addEventListener('resize', updateFixedVisual);
if (typeof ResizeObserver !== 'undefined') {
new ResizeObserver(updateFixedVisual).observe(root);
}
updateFixedVisual();
})();