/* ============================================================ PAGES.CSS — визуальный слой страниц по макету Figma («Страницы», раздел 6.6–6.7 ТЗ). Логика и разметка страниц не меняются: файл подключается ПОСЛЕДНИМ и перекрывает прежнее оформление. Что здесь: 1. Тема раздела — body[data-cm-page] 2. Фон страницы — .ambient-bg 3. Стеклянные карточки — .glass-panel / .liquid-glass 4. Чипы и сегменты — .quick-pill / .seg-pill / .lang-pill 5. Парящее нижнее меню «жидкое стекло» — nav.cm-nav (6.5) 6. Десктопная сетка — .cm-shell / .cm-grid (6.7) Кривая движения везде одна: cubic-bezier(0.32,0.72,0,1). ============================================================ */ :root{ --cm-ease: cubic-bezier(0.32, 0.72, 0, 1); --cm-r-card: 22px; --cm-r-pill: 999px; --cm-glass-line: rgba(255,255,255,.16); --cm-glass-top: rgba(255,255,255,.10); --cm-glass-bot: rgba(255,255,255,.03); --cm-glass-ink: rgba(6,16,20,.34); --cm-shadow: 0 18px 40px -22px rgba(0,0,0,.75); } /* ---------- 1. ТЕМЫ РАЗДЕЛОВ (ТЗ 6.2) ---------- */ body[data-cm-page]{ --cm-acc:#FF9C01; --cm-acc2:#FFC46B; --cm-nav:#12545F; --cm-nav-soft:rgba(18,84,95,.14); } body[data-cm-page="menu"]{ --cm-b1:#4FA5A1; --cm-b2:#3C8894; --cm-b3:#2B617A; --cm-acc:#FF9C01; --cm-acc2:#FFC46B; --cm-nav:#126E73; --cm-nav-soft:rgba(18,110,115,.16); } body[data-cm-page="bookings"]{ --cm-b1:#4A4560; --cm-b2:#7E6C6C; --cm-b3:#C0A484; --cm-acc:#FF9C01; --cm-acc2:#FFC46B; --cm-nav:#6B4C7A; --cm-nav-soft:rgba(107,76,122,.16); } body[data-cm-page="spa"]{ --cm-b1:#061417; --cm-b2:#0A2F31; --cm-b3:#05343A; --cm-acc:#F39C12; --cm-acc2:#F7C169; --cm-nav:#0E6B5C; --cm-nav-soft:rgba(14,107,92,.16); } body[data-cm-page="events"]{ --cm-b1:#091629; --cm-b2:#0E2A40; --cm-b3:#14435A; --cm-acc:#FF9C01; --cm-acc2:#FFC46B; --cm-nav:#1B4E7A; --cm-nav-soft:rgba(27,78,122,.16); } body[data-cm-page="feedback"]{ --cm-b1:#061C21; --cm-b2:#0A2C2F; --cm-b3:#07414A; --cm-acc:#FF9C01; --cm-acc2:#FFC46B; --cm-nav:#0B6A63; --cm-nav-soft:rgba(11,106,99,.16); } /* ---------- 2. ФОН СТРАНИЦЫ ---------- */ body.ambient-bg, .ambient-bg{ background: radial-gradient(120% 60% at 100% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%), radial-gradient(90% 50% at 0% 100%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 65%), linear-gradient(180deg, var(--cm-b1,#0b2b33) 0%, var(--cm-b2,#0d3a45) 48%, var(--cm-b3,#082630) 100%) !important; background-attachment: fixed !important; background-size: auto !important; animation: none !important; } /* ---------- 3. СТЕКЛЯННЫЕ КАРТОЧКИ ---------- */ .glass-panel{ background: linear-gradient(180deg, var(--cm-glass-top), var(--cm-glass-bot)), var(--cm-glass-ink) !important; backdrop-filter: blur(18px) saturate(140%) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; border: 1px solid var(--cm-glass-line) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--cm-shadow) !important; } .liquid-glass{ background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)), rgba(255,255,255,.05) !important; backdrop-filter: blur(26px) saturate(160%) !important; -webkit-backdrop-filter: blur(26px) saturate(160%) !important; border: 1px solid rgba(255,255,255,.28) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 12px 34px -18px rgba(0,0,0,.6) !important; } .glass-panel-hover{ transition: transform .3s var(--cm-ease), box-shadow .3s var(--cm-ease); } .glass-panel-hover:hover{ transform: translateY(-2px); } /* фото-блоки: скругление и мягкая тень (ТЗ 6.6) */ .cm-photo, .glass-panel > .relative:first-child > img{ border-radius: 18px; } .glass-panel img{ display:block; } /* ---------- 4. ЧИПЫ, СЕГМЕНТЫ, ЯЗЫК ---------- */ .quick-pill, .ord-chip, .ask-chip, .cm-chip{ background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.18) !important; color: rgba(255,255,255,.86) !important; border-radius: var(--cm-r-pill) !important; transition: background .2s var(--cm-ease), border-color .2s var(--cm-ease), transform .2s var(--cm-ease); } .quick-pill:active, .ord-chip:active, .ask-chip:active, .cm-chip:active{ transform: scale(.97); } .ord-chip.active, .cm-chip.active{ background: linear-gradient(135deg, var(--cm-acc), var(--cm-acc2)) !important; border-color: transparent !important; color:#fff !important; } .seg-pill{ border-radius: var(--cm-r-pill); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); transition: background .2s var(--cm-ease), color .2s var(--cm-ease), transform .2s var(--cm-ease); } .seg-pill.active{ background: linear-gradient(135deg, var(--cm-acc), var(--cm-acc2)); border-color: transparent; color:#fff; box-shadow: 0 10px 24px -12px rgba(255,156,1,.75); } .lang-pill{ transition: background .2s var(--cm-ease), color .2s var(--cm-ease); } .lang-pill.active{ background: rgba(255,255,255,.92); color:#05323F; } /* акцентные кнопки страниц */ .bg-primary-container{ background: linear-gradient(135deg, var(--cm-acc), var(--cm-acc2)) !important; box-shadow: 0 14px 30px -16px rgba(255,156,1,.85); } /* строка позиции с ценой: цена слева от кнопки, «+» справа (ТЗ 6.6) */ .cm-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; background: linear-gradient(180deg, var(--cm-glass-top), var(--cm-glass-bot)), var(--cm-glass-ink); border:1px solid var(--cm-glass-line); } .cm-row .cm-row-t{ flex:1 1 auto; min-width:0; } .cm-row .cm-row-p{ color:var(--cm-acc); font-weight:700; white-space:nowrap; } .cm-plus{ flex:none; width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center; background: rgba(255,156,1,.18); border:1px solid rgba(255,156,1,.45); color: var(--cm-acc); transition: transform .2s var(--cm-ease), background .2s var(--cm-ease); } .cm-plus:active{ transform: scale(.9); } /* ---------- 5. ПАРЯЩЕЕ НИЖНЕЕ МЕНЮ (ТЗ 6.5) ---------- ВЫСОТА МЕНЮ ПОСТОЯННА — это важно. Раньше во внутренний отступ подставлялась env(safe-area-inset-bottom). В Safari на айфоне эта величина меняется на ходу: строка адреса прячется при прокрутке вниз и возвращается при прокрутке вверх, и вместе с ней прыгала высота меню — на глаз оно «расширялось» и наезжало на плавающие кнопки. Теперь отступ внутри меню фиксированный, а безопасная зона учтена ТОЛЬКО в положении от нижнего края. Ту же самую env() используют слоты плавающих кнопок ниже, поэтому меню и кнопки двигаются вместе и наложиться не могут. Цвет — светлое «жидкое стекло» iOS 26: полупрозрачная белая подложка, сильное размытие с подмешиванием цвета фона, тонкий светлый кант и блик по верхней кромке. */ :root{ --cm-nav-h: 72px; /* высота меню, постоянная */ --cm-nav-gap: 10px; /* зазор до нижнего края */ --cm-safe: env(safe-area-inset-bottom, 0px); } /* Селектор намеренно длинный: в скелете страниц лежит правило nav.fixed.bottom-0 с !important — оно и красило меню в тёмный, и добавляло padding-bottom с env(). Перебиваем его точнее. */ nav.cm-nav.fixed.bottom-0{ box-sizing: border-box !important; left: 12px !important; right: 12px !important; width:auto !important; bottom: calc(var(--cm-nav-gap) + var(--cm-safe)) !important; height: var(--cm-nav-h) !important; padding: 6px !important; /* без env() — высота не пляшет */ padding-bottom: 6px !important; /* перебиваем env() из скелета */ border-radius: 26px !important; border: 1px solid rgba(255,255,255,.42) !important; /* Панель слегка перенимает цвет раздела: под ней просвечивает фон страницы, поэтому чистое белое стекло било контрастом. */ background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.44)), var(--cm-nav-soft, rgba(18,84,95,.14)) !important; backdrop-filter: blur(30px) saturate(150%) !important; -webkit-backdrop-filter: blur(30px) saturate(150%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(255,255,255,.22), 0 10px 28px -18px rgba(0,0,0,.4) !important; transition: opacity .3s var(--cm-ease), transform .3s var(--cm-ease) !important; } /* «хвост» вниз на 140px нужен был меню, прижатому к краю: он закрывал «дыру» под адресной строкой Safari. Парящему меню он не нужен, а вот расти вниз и наезжать на кнопки мешал именно он. */ nav.cm-nav.fixed.bottom-0::after{ content:none !important; display:none !important; } nav.cm-nav.fixed.bottom-0 > div{ padding: 0 !important; height: 100% !important; align-items: center !important; } /* на десктопе навигация живёт в шапке — парящее меню прячем (прежний скелет ставил display:flex !important и перебивал md:hidden) */ @media (min-width: 768px){ nav.cm-nav.fixed.bottom-0{ display:none !important; } } nav.cm-nav.fixed.bottom-0 a{ border-radius: 18px !important; padding: 6px 6px !important; color: rgba(9,42,52,.56) !important; /* тёмные подписи на светлом стекле */ transition: background .25s var(--cm-ease), color .25s var(--cm-ease); } nav.cm-nav.fixed.bottom-0 a span{ color: inherit !important; } /* Активный раздел подсвечивается тоном самого раздела: меню — морской бирюзой, бронь — закатным, SPA — изумрудным и так далее. Раньше он всегда был оранжевым и спорил с гаммой страницы. */ nav.cm-nav.fixed.bottom-0 a.text-primary{ background: var(--cm-nav-soft, rgba(18,84,95,.14)); box-shadow: inset 0 0 0 1px var(--cm-nav-soft, rgba(18,84,95,.14)); color: var(--cm-nav, #12545F) !important; } /* при открытом окне ассистента меню уходит (ТЗ 6.5) */ body.cmx-open nav.cm-nav, body.cm-sheet nav.cm-nav, body.kb-open nav.cm-nav{ opacity:0 !important; transform: translateY(120%) !important; pointer-events:none !important; } /* Слоты плавающих кнопок отсчитываются от верхней кромки меню: кромка = зазор 10 + высота 72 + безопасная зона корзина = кромка + 16 ассистент= корзина + 56 + 12 «наверх» = ассистент + 56 + 12 Безопасная зона здесь та же самая, что и у меню, поэтому при прокрутке они смещаются синхронно. */ body[data-cm-page]{ --cm-nav-top: calc(var(--cm-nav-gap) + var(--cm-nav-h) + var(--cm-safe)); --cm-slot-1: calc(var(--cm-nav-top) + 16px); --cm-slot-2: calc(var(--cm-nav-top) + 84px); --cm-slot-3: calc(var(--cm-nav-top) + 152px); } body[data-cm-page].cm-nocart{ --cm-slot-2: calc(var(--cm-nav-top) + 16px); --cm-slot-3: calc(var(--cm-nav-top) + 84px); } /* ---------- 6. ДЕСКТОП (ТЗ 6.7) ---------- */ @media (min-width: 900px){ .cm-shell{ max-width: 1200px; margin-inline: auto; padding-inline: 32px; } /* карточки — в сетку 2–3 колонки, а не узкой лентой */ .cm-grid{ display: grid !important; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; align-items: start; } .cm-grid > *{ margin:0 !important; } /* hero и широкие блоки занимают всю ширину контейнера */ .cm-wide{ grid-column: 1 / -1; } } @media (min-width: 1400px){ .cm-grid{ grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } } /* ---------- мелочи ---------- */ @media (prefers-reduced-motion: reduce){ .glass-panel-hover, nav.cm-nav, .seg-pill, .quick-pill{ transition:none !important; } } /* ============================================================ 7. КНОПКА АССИСТЕНТА — ОДНА НА ВСЕ РАЗДЕЛЫ ------------------------------------------------------------ Было: в меню поднос, в брони и SPA лампочки, в афише облако, на странице бранча вообще белый квадрат — стиль кнопки жил на каждой странице отдельно и до бранча просто не доехал. Гость по такому набору не понимает, что это одно и то же: живой разговор с ассистентом. Стало: везде облако разговора с искоркой — знак «здесь отвечают, и отвечает ИИ». Кнопка круглая, в акценте раздела, с мягким свечением; иконку задаём в CSS, поэтому она не зависит от того, что вписано в разметку страницы. ============================================================ */ .wtr-fab{ width:56px !important; height:56px !important; border-radius:999px !important; display:flex !important; align-items:center; justify-content:center; border:0; cursor:pointer; padding:0; background:linear-gradient(135deg, var(--cm-acc,#FF9C01), var(--cm-acc2,#FFC46B)) !important; color:#fff !important; box-shadow:0 10px 26px -8px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.22) inset !important; transition:transform .3s var(--cm-ease), box-shadow .3s var(--cm-ease); } .wtr-fab:active{ transform:scale(.94); } /* прежнюю картинку убираем и рисуем свою — одинаковую везде */ .wtr-fab > svg, .wtr-fab > img{ display:none !important; } .wtr-fab::before{ content:''; width:28px; height:28px; display:block; background:currentColor; -webkit-mask:var(--cm-ai-icon) center/contain no-repeat; mask:var(--cm-ai-icon) center/contain no-repeat; } :root{ /* облако разговора с искоркой */ --cm-ai-icon:url("data:image/svg+xml;utf8,\ \ \ \ "); } /* «живой» пульс, чтобы кнопка читалась как чат, а не как ссылка */ .wtr-fab::after{ content:''; position:absolute; inset:0; border-radius:999px; box-shadow:0 0 0 0 var(--cm-acc,#FF9C01); animation:cmFabPulse 3.4s var(--cm-ease) infinite; } .wtr-fab{ position:fixed; } @keyframes cmFabPulse{ 0% { box-shadow:0 0 0 0 rgba(255,156,1,.45); } 55% { box-shadow:0 0 0 14px rgba(255,156,1,0); } 100% { box-shadow:0 0 0 0 rgba(255,156,1,0); } } @media (prefers-reduced-motion: reduce){ .wtr-fab::after{ animation:none; } }