/* MyCosmetic — редизайн (Claude Design). Шапка, подвал, система кнопок. Единый шрифт Jost. Палитра: синий #5B86D6 (CTA) + розовый акцент #C76A8A, near-black #16161A текст, серый #6B7186, тёплый белый #FBFAF9. Mobile-first. */ :root { --mc-ink: #16161A; --mc-gray: #6B7186; --mc-blue: #5B86D6; --mc-blue-dark: #4a72c0; --mc-pink: #C76A8A; --mc-pink-deep: #8A3A52; --mc-pink-1: #FCF0F5; --mc-pink-2: #FBEEF3; --mc-pink-3: #FCF4F7; --mc-lav: #F6F2FB; --mc-cream: #FBFAF9; --mc-line: #F0E6EC; --mc-orange: #E8A765; --mc-green: #6FB97F; --mc-tg: #229ED9; --mc-wrap: 1320px; --mc-font: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; --mc-radius: 24px; --mc-pill: 30px; --mc-shadow: 0 18px 50px rgba(22, 22, 26, 0.08); --mc-shadow-sm: 0 6px 22px rgba(22, 22, 26, 0.06); } body { font-family: var(--mc-font); color: var(--mc-ink); background: #fff; -webkit-font-smoothing: antialiased; } .mc-wrap { max-width: var(--mc-wrap); margin-inline: auto; padding-inline: 24px; } /* ── Система кнопок (pill) ───────────────────────────────────────────── */ .mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--mc-font); font-weight: 500; font-size: 15px; line-height: 1; padding: 15px 30px; border: 0; border-radius: var(--mc-pill); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .22s ease, transform .22s ease, box-shadow .22s ease, color .22s ease; } .mc-btn svg { width: 18px; height: 18px; } .mc-btn--blue { background: var(--mc-blue); color: #fff; } .mc-btn--blue:hover { background: var(--mc-blue-dark); transform: translateY(-1px); } .mc-btn--pink { background: var(--mc-pink-2); color: var(--mc-pink-deep); } .mc-btn--pink:hover { background: #f6dfe8; transform: translateY(-1px); } .mc-btn--outline{ background: transparent; color: var(--mc-ink); box-shadow: inset 0 0 0 1px rgba(22,22,26,.16); } .mc-btn--outline:hover{ box-shadow: inset 0 0 0 1px rgba(22,22,26,.32); } .mc-btn--tg { background: var(--mc-tg); color: #fff; } .mc-btn--tg:hover { background: #1b8dc4; transform: translateY(-1px); } .mc-btn--sm { padding: 12px 22px; font-size: 14px; } /* ── Шапка ───────────────────────────────────────────────────────────── */ .mc-header { position: sticky; top: 0; z-index: 80; } .mc-nav { background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(22, 22, 26, 0.05); } .mc-nav__inner { max-width: var(--mc-wrap); margin-inline: auto; padding: 15px 24px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } /* Логотип: аватар-кружок + словоформа */ .mc-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; } .mc-logo__mark { display: inline-flex; flex: 0 0 auto; line-height: 0; } .mc-logo__mark img { height: 42px; width: auto; display: block; } .mc-logo__word { font-weight: 600; font-size: 20px; letter-spacing: -.01em; color: var(--mc-ink); } .mc-logo__word b { font-weight: 600; } .mc-logo { order: 1; } .mc-nav__menu { order: 2; display: flex; align-items: center; gap: 30px; margin: 0 auto; } .mc-nav__menu a { font-weight: 500; font-size: 15px; color: var(--mc-ink); text-decoration: none; opacity: .85; transition: opacity .2s; } .mc-nav__menu a:hover { opacity: 1; color: var(--mc-pink); } /* Дропдаун «Каталог» */ .mc-nav__item--drop { position: relative; display: flex; align-items: center; } .mc-nav__toplink { display: inline-flex; align-items: center; gap: 6px; } .mc-nav__caret { flex: 0 0 auto; transition: transform .2s; opacity: .7; } .mc-nav__item--drop:hover .mc-nav__caret { transform: rotate(180deg); } .mc-nav__drop { position: absolute; top: 100%; left: 50%; margin-left: -130px; width: 470px; max-width: calc(100vw - 40px); background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(22,22,26,.16); padding: 12px; box-sizing: border-box; column-count: 2; column-gap: 14px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 60; } .mc-nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .mc-nav__item--drop:hover .mc-nav__drop, .mc-nav__item--drop:focus-within .mc-nav__drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(6px); } .mc-nav__drop > a, .mc-nav__group { break-inside: avoid; } .mc-nav__drop a { display: block; padding: 9px 13px; border-radius: 11px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--mc-ink); opacity: .85; transition: background .15s, color .15s, opacity .15s; } .mc-nav__drop a:hover { background: var(--mc-pink-1, #FCF0F5); color: var(--mc-pink); opacity: 1; } /* Вложенный уровень: «Уход для…» под «Уход за телом» */ .mc-nav__group { margin: 2px 0; } .mc-nav__grouplink { font-weight: 600; } .mc-nav__sub { margin: 0 0 4px 13px; padding-left: 10px; border-left: 1px solid rgba(22,22,26,.1); } .mc-nav__sub a { padding: 7px 12px; font-size: 13px; font-weight: 500; color: var(--mc-gray); } .mc-nav__sub a:hover { color: var(--mc-pink); } .mc-nav__tools { order: 3; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } .mc-nav__actions { order: 4; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } /* Иконки-инструменты (поиск, корзина) */ .mc-nav__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; position: relative; color: var(--mc-ink); cursor: pointer; transition: background .2s, color .2s; } /* Поиск и бургер —