/* ========================================================================= ux-enhance.css — UI/UX слой поверх существующего дизайна Nakrytka.by Подключается одной строкой в . Ничего из текущей вёрстки не ломает: только добавляет новые компоненты и мягко правит контраст. Палитра совпадает с сайтом: pink #ec4899, purple #8b5cf6, violet #7c3aed. ========================================================================= */ :root { --ux-pink: #ec4899; --ux-purple: #8b5cf6; --ux-violet: #7c3aed; --ux-bg: #0c0a09; } /* ---------- 8. Контраст: text-slate-500/600 на тёмном фоне читались слабо ---------- */ .text-slate-500 { color: #8b98ab !important; } .text-slate-600 { color: #717f93 !important; } /* ---------- 6. Полоса прогресса чтения (верх страницы) ---------- */ #ux-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; background: linear-gradient(90deg, var(--ux-purple), var(--ux-pink)); box-shadow: 0 0 10px rgba(236, 72, 153, 0.6); transition: width 0.08s linear; pointer-events: none; } /* ---------- 6. Подсветка активного пункта меню (scroll-spy) ---------- */ .ux-nav-active { color: #fff !important; text-shadow: 0 0 8px rgba(236, 72, 153, 0.8); } /* ---------- 1. Липкая мобильная панель CTA ---------- */ #ux-mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 0.6rem; padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom)); background: rgba(12, 10, 9, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, 0.08); transform: translateY(120%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } #ux-mobile-cta.ux-visible { transform: translateY(0); } #ux-mobile-cta a { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-weight: 700; border-radius: 0.85rem; padding: 0.85rem 1rem; transition: filter 0.2s, transform 0.2s; } #ux-mobile-cta a:active { transform: scale(0.97); } #ux-mobile-cta .ux-cta-order { flex: 1; color: #fff; background: linear-gradient(90deg, var(--ux-pink), var(--ux-purple)); box-shadow: 0 0 20px rgba(236, 72, 153, 0.4); } #ux-mobile-cta .ux-cta-tg { color: #cfe5ff; background: rgba(59, 130, 246, 0.16); border: 1px solid rgba(59, 130, 246, 0.35); } @media (min-width: 768px) { #ux-mobile-cta { display: none; } } /* ---------- Кнопка «Наверх» (glass-круг) ---------- */ #ux-to-top { position: fixed; right: 1rem; bottom: 1.25rem; z-index: 55; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; color: #e2e8f0; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.9); transition: opacity 0.3s, transform 0.3s, visibility 0.3s, color 0.2s, border-color 0.2s; cursor: pointer; } #ux-to-top.ux-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } #ux-to-top:hover { color: #fff; border-color: rgba(236, 72, 153, 0.5); } /* приподнимаем над мобильной CTA-панелью, когда она видна */ body.ux-cta-on #ux-to-top { bottom: 5.25rem; } /* ---------- 4. Тосты ---------- */ #ux-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 120; display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none; max-width: min(92vw, 360px); } @media (max-width: 640px) { #ux-toasts { top: auto; bottom: 5.5rem; left: 1rem; right: 1rem; max-width: none; align-items: center; } } .ux-toast { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-radius: 0.85rem; color: #f1f5f9; font-size: 0.9rem; font-weight: 600; background: rgba(12, 10, 9, 0.92); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); transform: translateY(-12px); opacity: 0; transition: opacity 0.25s, transform 0.25s; } .ux-toast.ux-show { opacity: 1; transform: translateY(0); } .ux-toast .ux-toast-dot { width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0; background: var(--ux-purple); } .ux-toast.ux-success .ux-toast-dot { background: #34d399; } .ux-toast.ux-info .ux-toast-dot { background: #60a5fa; } /* ---------- 5. Скелетоны карточек услуг ---------- */ .ux-skeleton-card { border-radius: 1rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); } .ux-sk-line { height: 14px; border-radius: 7px; margin-bottom: 0.85rem; background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.05) 63%); background-size: 400% 100%; animation: ux-shimmer 1.4s ease infinite; } .ux-sk-line.ux-w-60 { width: 60%; } .ux-sk-line.ux-w-40 { width: 40%; } .ux-sk-line.ux-h-32 { height: 32px; width: 50%; margin: 1rem 0; } .ux-sk-btn { height: 48px; border-radius: 0.75rem; margin-top: 1rem; } @keyframes ux-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ---------- 7. Tilt + подсветка курсора на карточках ---------- */ .ux-tilt { transform-style: preserve-3d; transition: transform 0.18s ease-out; will-change: transform; } .ux-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 0.25s; pointer-events: none; background: radial-gradient(220px circle at var(--ux-mx, 50%) var(--ux-my, 50%), rgba(236, 72, 153, 0.16), transparent 60%); } .ux-tilt.ux-tilt-active::after { opacity: 1; } /* ---------- Мини-таблица «что входит» при наведении на пакет (отключено) ---------- */ .package-card { position: relative; } /* Доп. текст при наведении на карточку отключён по требованию — не показываем. */ .ux-spec { display: none !important; } /* ---------- Доступность: уважение к prefers-reduced-motion ---------- */ @media (prefers-reduced-motion: reduce) { #ux-progress, .ux-toast, #ux-to-top, #ux-mobile-cta { transition: none !important; } .ux-sk-line { animation: none !important; } .ux-tilt { transition: none !important; transform: none !important; } html { scroll-behavior: auto !important; } } /* видимый фокус для клавиатурной навигации */ #ux-to-top:focus-visible, #ux-mobile-cta a:focus-visible { outline: 2px solid var(--ux-pink); outline-offset: 2px; } /* ========================================================================= ДОБАВЛЕНО В UX-АПГРЕЙДЕ 2026 (полоса доверия, прайс-хит, фокус, мобайл) ========================================================================= */ /* ---------- Верхняя статичная полоса доверия (замена кричащей ленты) ---------- */ .trust-bar { position: sticky; top: 0; z-index: 40; width: 100%; background: rgba(12, 10, 9, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .trust-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4em 0.9em; max-width: 1200px; margin: 0 auto; padding: 0.55em 1em; } .trust-bar__item { font-size: clamp(11px, 1.25vw, 13.5px); letter-spacing: 0.02em; color: #cbd5e1; white-space: nowrap; } .trust-bar__sep { color: var(--ux-pink); opacity: 0.7; font-size: 12px; } @media (max-width: 768px) { /* на мобильных полоса доверия выглядит коряво и дублирует контент — прячем полностью */ .trust-bar { display: none; } } /* ---------- Прайс: бейдж «Хит» и выделение популярного тарифа ---------- */ .package-card { position: relative; } .package-card--popular { border: 1.5px solid rgba(236, 72, 153, 0.55) !important; box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.25), 0 12px 40px -12px rgba(236, 72, 153, 0.45) !important; /* .holographic-hover ставит overflow:hidden и обрезает бейдж, выступающий сверху. Для выделенной карточки разрешаем переполнение, чтобы «Хит» был виден целиком. */ overflow: visible !important; } .pkg-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 0.3em; padding: 4px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.03em; color: #fff; background: linear-gradient(90deg, var(--ux-pink), var(--ux-violet)); box-shadow: 0 4px 14px -2px rgba(236, 72, 153, 0.6); white-space: nowrap; } /* ---------- Прайс: «старая» зачёркнутая цена ---------- */ .pkg-old-price { display: block; font-size: 14px; font-weight: 600; color: #94a3b8; text-decoration: line-through !important; text-decoration-color: #f472b6; text-decoration-thickness: 2px; margin-bottom: 2px; line-height: 1; } /* ---------- Доступность: видимый фокус для всех интерактивных элементов ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ux-pink); outline-offset: 2px; border-radius: 6px; } /* ---------- Мобайл: гарантируем комфортные тач-таргеты ---------- */ @media (max-width: 767px) { #platform-tabs button, #service-type-tabs button, .floating-nav button, .order-button, .cart-add-button { min-height: 44px; } /* прайс-табы — горизонтальная прокрутка вместо тесного переноса */ #platform-tabs, #service-type-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; scroll-snap-type: x mandatory; } #platform-tabs::-webkit-scrollbar, #service-type-tabs::-webkit-scrollbar { display: none; } #platform-tabs button, #service-type-tabs button { scroll-snap-align: start; flex: 0 0 auto; } } /* ---------- Мобайл: снимаем тяжёлые фоновые эффекты ради скорости ---------- */ @media (max-width: 767px) { .orb { display: none !important; } #stardust-bg, #stardust-hero-bg { background-image: none !important; opacity: 0.06 !important; } } /* ---------- Уважение prefers-reduced-motion для новых и старых анимаций ---------- */ @media (prefers-reduced-motion: reduce) { .kmarquee__track, .khero__reel, .animated-gradient-btn, .orb { animation: none !important; } .package-card, .pkg-badge, * { transition-duration: 0.001ms !important; } #stardust-bg, #stardust-hero-bg { background-image: none !important; } } /* SEO-абзац в hero: текст сохраняем, но на мобильном делаем компактным (2026-07-16) */ @media (max-width: 640px) { #lcp-text { font-size: 14px !important; line-height: 1.65 !important; color: #94a3b8 !important; } }