/* ========================================================================== Штыковские двери — гибридная тема Та же структура и палитра, что в классической версии, но мягкая форма и живое движение. Включается атрибутом data-theme="hybrid" на . ========================================================================== */ html[data-theme="hybrid"] { --radius: 14px; --radius-lg: 22px; --shadow: 0 2px 6px rgba(22, 24, 26, .05), 0 10px 30px rgba(22, 24, 26, .07); --shadow-lg: 0 6px 18px rgba(22, 24, 26, .1), 0 30px 70px rgba(22, 24, 26, .16); --pill: 999px; --bounce: cubic-bezier(.34, 1.4, .64, 1); } /* ============================ Кнопки — пилюли ============================ */ [data-theme="hybrid"] .btn { border-radius: var(--pill); padding-left: 26px; padding-right: 26px; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .18s var(--bounce), box-shadow .2s var(--ease); } [data-theme="hybrid"] .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); } [data-theme="hybrid"] .btn:active { transform: translateY(0) scale(.97); } [data-theme="hybrid"] .btn--lg { padding-left: 34px; padding-right: 34px; } [data-theme="hybrid"] .ibtn { border-radius: 50%; transition: background .2s var(--ease), transform .18s var(--bounce); } [data-theme="hybrid"] .ibtn:hover { transform: scale(1.08); } [data-theme="hybrid"] .ibtn__count { border-radius: var(--pill); } [data-theme="hybrid"] .tag { transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--bounce); } [data-theme="hybrid"] .tag:hover { transform: translateY(-2px); } /* ============================ Карточки ============================ */ [data-theme="hybrid"] .card { border-radius: var(--radius-lg); border-color: transparent; box-shadow: var(--shadow); transition: transform .26s var(--ease), box-shadow .26s var(--ease); } [data-theme="hybrid"] .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } [data-theme="hybrid"] .card__media { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } [data-theme="hybrid"] .card__fav { border-radius: 50%; } [data-theme="hybrid"] .badge { border-radius: var(--pill); padding: 5px 11px; } [data-theme="hybrid"] .adv__item, [data-theme="hybrid"] .steps__item, [data-theme="hybrid"] .coll, [data-theme="hybrid"] .review, [data-theme="hybrid"] .proj, [data-theme="hybrid"] .promo-card, [data-theme="hybrid"] .cat, [data-theme="hybrid"] .note, [data-theme="hybrid"] .ask-block, [data-theme="hybrid"] .notfound, [data-theme="hybrid"] .qa__item, [data-theme="hybrid"] .revitem, [data-theme="hybrid"] .marquee__item { border-radius: var(--radius-lg); } [data-theme="hybrid"] .note { border-left-width: 4px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } [data-theme="hybrid"] .steps__n { transition: transform .3s var(--bounce); } [data-theme="hybrid"] .steps__item:hover .steps__n { transform: scale(1.12) rotate(-6deg); } [data-theme="hybrid"] .coll:hover, [data-theme="hybrid"] .adv__item:hover { transform: translateY(-4px); } [data-theme="hybrid"] .adv__item { transition: transform .26s var(--ease), background .26s var(--ease), box-shadow .26s var(--ease); } [data-theme="hybrid"] .coll { transition: transform .26s var(--ease), box-shadow .26s var(--ease); } /* ============================ Поля и формы ============================ */ [data-theme="hybrid"] .input, [data-theme="hybrid"] .select, [data-theme="hybrid"] .textarea { border-radius: var(--radius); background: var(--bg-2); border-color: transparent; transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); } [data-theme="hybrid"] .input:focus, [data-theme="hybrid"] .select:focus, [data-theme="hybrid"] .textarea:focus { background: var(--bg); } [data-theme="hybrid"] .check input { border-radius: 6px; } /* ============================ Шапка и меню ============================ */ [data-theme="hybrid"] .header { border-bottom-color: transparent; box-shadow: 0 1px 0 rgba(0, 0, 0, .05); } [data-theme="hybrid"] .nav__link { border-radius: var(--pill); } [data-theme="hybrid"] .vsw, [data-theme="hybrid"] .vsw__b { border-radius: var(--pill); } [data-theme="hybrid"] .mmenu__link { border-radius: var(--radius); padding-left: 12px; padding-right: 12px; margin: 0 -12px; border-bottom: 0; } [data-theme="hybrid"] .mmenu__link:hover { background: var(--bg-2); } [data-theme="hybrid"] .mmenu__vsw a { border-radius: var(--pill); } [data-theme="hybrid"] .bottombar__item { border-radius: var(--radius); } /* ============================ Окна и уведомления ============================ */ [data-theme="hybrid"] .modal__box { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } @media (min-width: 700px) { [data-theme="hybrid"] .modal__box { border-radius: 26px; } } [data-theme="hybrid"] .modal__close { border-radius: 50%; } [data-theme="hybrid"] .toast { border-radius: var(--pill); } [data-theme="hybrid"] .thanks__ico { animation: hyPop .5s var(--bounce); } @keyframes hyPop { from { transform: scale(.4); opacity: 0; } } /* ============================ Каталог ============================ */ [data-theme="hybrid"] .filters { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } @media (min-width: 1024px) { [data-theme="hybrid"] .filters { border-radius: var(--radius-lg); border-color: transparent; box-shadow: var(--shadow); } } [data-theme="hybrid"] .fswatch { border-radius: 50%; } [data-theme="hybrid"] .viewmode__btn { border-radius: var(--pill); } [data-theme="hybrid"] .toolbar__badge { border-radius: var(--pill); } [data-theme="hybrid"] .frange input { border-radius: var(--radius); background: var(--bg-2); border-color: transparent; } /* ============================ Карточка товара ============================ */ [data-theme="hybrid"] .gallery__main, [data-theme="hybrid"] .gallery__thumb, [data-theme="hybrid"] .config, [data-theme="hybrid"] .pfact, [data-theme="hybrid"] .doc, [data-theme="hybrid"] .swatch { border-radius: var(--radius); } [data-theme="hybrid"] .gallery__main { border-radius: var(--radius-lg); } [data-theme="hybrid"] .config { border-color: transparent; box-shadow: var(--shadow); overflow: hidden; } [data-theme="hybrid"] .opt { border-radius: var(--pill); transition: transform .16s var(--bounce), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } [data-theme="hybrid"] .opt:hover { transform: translateY(-2px); } [data-theme="hybrid"] .qty { border-radius: var(--pill); } [data-theme="hybrid"] .tabs__btn { border-radius: var(--pill) var(--pill) 0 0; } [data-theme="hybrid"] .buybar { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } [data-theme="hybrid"] .ar-btn { border-radius: var(--pill); } /* ============================ Движение ============================ */ /* Появление блоков — усиленный вариант штатного .reveal */ [data-theme="hybrid"] .reveal { transform: translateY(26px) scale(.985); transition: opacity .6s var(--ease), transform .6s var(--ease); } [data-theme="hybrid"] .reveal.is-in { transform: none; } /* Автоматическое появление секций и карточек, размечается скриптом */ [data-theme="hybrid"] .hy-in { opacity: 0; transform: translateY(22px); transition: opacity .55s var(--ease), transform .55s var(--ease); } [data-theme="hybrid"] .hy-in.hy-on { opacity: 1; transform: none; } /* Лесенка: карточки в сетке появляются одна за другой */ [data-theme="hybrid"] .hy-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); } [data-theme="hybrid"] .hy-stagger.hy-on > * { opacity: 1; transform: none; } [data-theme="hybrid"] .hy-stagger.hy-on > *:nth-child(1) { transition-delay: .02s; } [data-theme="hybrid"] .hy-stagger.hy-on > *:nth-child(2) { transition-delay: .07s; } [data-theme="hybrid"] .hy-stagger.hy-on > *:nth-child(3) { transition-delay: .12s; } [data-theme="hybrid"] .hy-stagger.hy-on > *:nth-child(4) { transition-delay: .17s; } [data-theme="hybrid"] .hy-stagger.hy-on > *:nth-child(5) { transition-delay: .22s; } [data-theme="hybrid"] .hy-stagger.hy-on > *:nth-child(6) { transition-delay: .27s; } [data-theme="hybrid"] .hy-stagger.hy-on > *:nth-child(7) { transition-delay: .32s; } [data-theme="hybrid"] .hy-stagger.hy-on > *:nth-child(8) { transition-delay: .36s; } /* Плавная смена темы */ [data-theme="hybrid"] body { transition: background .3s var(--ease); } @media (prefers-reduced-motion: reduce) { [data-theme="hybrid"] .hy-in, [data-theme="hybrid"] .hy-stagger > * { opacity: 1; transform: none; } } /* ============================ Переключатель на три версии ============================ */ .vsw3 { position: relative; flex-shrink: 0; } .vsw3__cur { display: none; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 100px; background: var(--bg-2); font-size: 12px; font-weight: 700; color: var(--ink-2); } .vsw3__cur::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); } .vsw3.open .vsw3__cur::after { transform: rotate(-135deg) translateY(-1px); } .vsw3__list { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 100px; font-size: 12px; font-weight: 700; } .vsw3__list button, .vsw3__list a { padding: 6px 12px; border: 0; background: none; border-radius: 100px; color: var(--muted); white-space: nowrap; line-height: 1.3; transition: background .2s var(--ease), color .2s var(--ease); } .vsw3__list button:hover, .vsw3__list a:hover { color: var(--ink); } .vsw3__list .on { background: var(--accent); color: #fff; } /* На телефоне в шапке остаётся одна кнопка с текущей версией, остальные раскрываются списком — иначе три слова не помещаются в 360 px */ @media (max-width: 899px) { .vsw3__cur { display: inline-flex; } .vsw3__list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; flex-direction: column; padding: 6px; gap: 2px; border-radius: 14px; background: var(--bg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; } .vsw3.open .vsw3__list { opacity: 1; visibility: visible; transform: none; } .vsw3__list button, .vsw3__list a { padding: 10px 16px; text-align: left; font-size: 14px; } }