/* ============================================================ YPONTON.RU — мегаменю «Каталог» Префикс yp-mm- во всех классах. Цвета: синий #11233f, оранжевый #f78e1f. Шрифт: Onest (подключается в ). ============================================================ */ .yp-mm-root, .yp-mm-root *, .yp-mm-root *::before, .yp-mm-root *::after { box-sizing: border-box; } .yp-mm-root { position: relative; font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #11233f; -webkit-font-smoothing: antialiased; display: inline-block; } .yp-mm-root a { text-decoration: none; color: inherit; } /* ---------- Кнопка-триггер ---------- */ .yp-mm-trigger { display: inline-flex; align-items: center; gap: 11px; background: #f78e1f; color: #fff; border: none; border-radius: 12px; padding: 0 22px; height: 46px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s; } .yp-mm-trigger:hover { background: #e67d0c; } .yp-mm-trigger__grid { width: 18px; height: 18px; } .yp-mm-trigger__chev { width: 13px; height: 13px; transition: transform .2s ease; } .yp-mm-root.is-open .yp-mm-trigger__chev { transform: rotate(180deg); } /* ---------- Контейнер меню ---------- */ .yp-mm { position: absolute; top: calc(100% + 14px); left: 0; z-index: 80; width: min(1180px, 92vw); opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility .22s; } .yp-mm-root.is-open .yp-mm { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .yp-mm__inner { display: flex; background: #fff; border: 1px solid #e6e9ef; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(13,28,51,.22); } /* ---------- Левый рейл ---------- */ .yp-mm-rail { width: 280px; flex: none; background: #f7f9fc; border-right: 1px solid #edf0f4; padding: 14px; } .yp-mm-rail__item { display: flex; align-items: center; gap: 12px; width: 100%; border: none; border-radius: 12px; padding: 12px 14px; margin-bottom: 2px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; color: #3a4658; background: transparent; transition: background .15s, color .15s, box-shadow .15s; } .yp-mm-rail__item:hover { background: #eef2f7; } .yp-mm-rail__hover { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .yp-mm-rail__item.is-active { background: #ffffff; color: #11233f; font-weight: 700; box-shadow: 0 6px 18px rgba(17,35,63,.10); } .yp-mm-rail__ico { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; background: #eef2f7; color: #11233f; transition: .15s; } .yp-mm-rail__ico svg { width: 20px; height: 20px; } .yp-mm-rail__item.is-active .yp-mm-rail__ico { background: #f78e1f; color: #fff; } .yp-mm-rail__name { flex: 1; text-align: left; } .yp-mm-rail__chev { width: 15px; height: 15px; opacity: .5; flex: none; margin-left: 10px; pointer-events: none; } /* Промо-блок под рейлом */ .yp-mm-promo { margin-top: 14px; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, #16294a, #11233f); color: #fff; } .yp-mm-promo__title { font-size: 14px; font-weight: 800; margin-bottom: 4px; } .yp-mm-promo__text { font-size: 12.5px; line-height: 1.45; color: #aab6c8; margin-bottom: 12px; } .yp-mm-promo__link { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #f9a94f; transition: color .18s; } .yp-mm-promo__link:hover { color: #fff; } .yp-mm-promo__link .yp-mm-arr { width: 14px; height: 14px; } /* ---------- Панели разделов ---------- */ .yp-mm-panels { flex: 1; min-width: 0; } .yp-mm-panel { display: none; padding: 26px 30px 30px; max-height: 600px; overflow-y: auto; } .yp-mm-panel.is-active { display: block; } .yp-mm-panel::-webkit-scrollbar { width: 8px; } .yp-mm-panel::-webkit-scrollbar-thumb { background: #d6dbe5; border-radius: 8px; } .yp-mm-panel::-webkit-scrollbar-track { background: transparent; } .yp-mm-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; } .yp-mm-panel__title { margin: 0; font-size: 25px; font-weight: 800; color: #11233f; } .yp-mm-seeall { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 14px; font-weight: 700; color: #11233f; padding: 9px 16px; border: 1.5px solid #e1e5ec; border-radius: 11px; transition: .2s; } .yp-mm-seeall .yp-mm-arr { width: 15px; height: 15px; } .yp-mm-seeall:hover { border-color: #f78e1f; color: #f78e1f; gap: 11px; } /* Группа подкатегорий */ .yp-mm-group { margin-bottom: 24px; } .yp-mm-group:last-child { margin-bottom: 0; } .yp-mm-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #8b94a3; text-transform: uppercase; } .yp-mm-eyebrow__dot { width: 10px; height: 10px; border-radius: 3px; background: #f78e1f; } /* Сетка карточек */ .yp-mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 16px; } /* Карточка категории — фото на всю плитку с подписью поверх (внизу слева) */ .yp-mm-card { position: relative; display: block; height: 150px; border-radius: 14px; overflow: hidden; border: 1px solid #e9ecf2; background: #1f2c44 center / cover no-repeat; transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s; } .yp-mm-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(17,35,63,.18); border-color: #d6dbe5; } /* затемнение снизу — для читаемости подписи поверх фото */ .yp-mm-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,16,30,.85) 0%, rgba(8,16,30,.35) 38%, rgba(8,16,30,0) 62%); } /* подпись категории поверх фото */ .yp-mm-card__label { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 5px rgba(0,0,0,.45); } /* ---------- Адаптив ---------- */ @media (max-width: 1024px) { .yp-mm { width: min(720px, 94vw); } .yp-mm-rail { width: 230px; } } @media (max-width: 720px) { .yp-mm { position: fixed; left: 0; right: 0; top: auto; width: 100vw; } .yp-mm__inner { flex-direction: column; border-radius: 14px 14px 0 0; max-height: 80vh; } .yp-mm-rail { width: 100%; display: flex; gap: 8px; overflow-x: auto; border-right: none; border-bottom: 1px solid #edf0f4; } .yp-mm-rail__item { width: auto; white-space: nowrap; margin-bottom: 0; } .yp-mm-rail__chev, .yp-mm-promo { display: none; } .yp-mm-panel { max-height: 60vh; } }