/* ============================================ City Selector — Выбор города в хедере Подключите в functions.php: wp_enqueue_style('city-selector', get_template_directory_uri() . '/css/city-selector.css'); ============================================ */ /* ---------- Кнопка в хедере ---------- */ .city-modal--confirm .city-modal__box{ max-width: 400px; height: auto; } .city-selector { display: flex; align-items: center; } .city-selector__trigger { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: transparent; border: unset; border-radius: 8px; color: inherit; font-size: 14px; font-family: inherit; cursor: pointer; transition: border-color 0.2s, background 0.2s; white-space: nowrap; } /*.city-selector__trigger:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); } .city-selector__trigger:focus-visible { outline: 2px solid #E85B10; outline-offset: 2px; } */ .city-selector__chevron { transition: transform 0.2s; opacity: 0.7; } .city-selector__trigger--open .city-selector__chevron { transform: rotate(180deg); } .city-modal__overlay { display: none; /* СѓРґР°Р»РµРЅРѕ вЂ” РѕРІРµСЂР»РµР№ С‚РµРїРµСЂСЊ РѕС‚РґРµР»СЊРЅС‹Р№ */ } /* ---------- РћРІРµСЂР»РµР№ РІ ---------- */ .city-overlay { display: none; position: fixed; inset: 0; z-index: 8; background: rgba(0, 0, 0, 0.7); cursor: pointer; animation: city-fade-in 0.2s ease; } .city-overlay--visible { display: block; } /* На тёмном фоне хедера */ .header--dark .city-selector__trigger, .site-header .city-selector__trigger { color: #fff; } /* На светлом фоне хедера */ .header--light .city-selector__trigger { color: #1a1a1a; border-color: rgba(0,0,0,0.2); } .header--light .city-selector__trigger:hover { border-color: rgba(0,0,0,0.4); background: rgba(0,0,0,0.04); } /* ---------- Общие стили модалок ---------- */ .city-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; top: 250px; } .city-modal[hidden] { display: none !important; } .city-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); cursor: pointer; animation: city-fade-in 0.2s ease; } .city-modal__box { position: relative; background: #fff; border-radius: 20px; padding: 32px; width: 100%; animation: city-slide-up 0.25s cubic-bezier(0.34, 1.36, 0.64, 1); height: auto; overflow-y: auto; } /* ---------- Попап подтверждения ---------- */ .city-modal--confirm .city-modal__box { max-width: 400px; height: auto; } .city-modal__title { font-size: 24px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; line-height: 1.2; } .city-modal__desc { color: rgba(15, 15, 15, 0.5); font-family: 'Onest'; font-size: 16px; font-weight: 400; } .city-modal__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; } .city-modal__btn { flex: 1; min-width: 140px; padding: 14px 20px; border-radius: 12px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; transition: opacity 0.15s, transform 0.15s; border: none; } .city-modal__btn:hover { opacity: 0.88; } .city-modal__btn:active { transform: scale(0.98); } .city-modal__btn--primary { background: #E85B10; color: #fff; } .city-modal__btn--secondary { background: #f0f0f0; color: #1a1a1a; } .city-modal__btn:focus-visible { outline: 2px solid #E85B10; outline-offset: 2px; } /* ---------- Попап списка городов ---------- */ .city-modal--list .city-modal__box { max-width: 520px; } .city-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .city-modal__header .city-modal__title { margin: 0; } .city-modal__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: #f0f0f0; border-radius: 50%; cursor: pointer; color: #555; transition: background 0.15s; flex-shrink: 0; } .city-modal__close:hover { background: #e0e0e0; color: #1a1a1a; } .city-modal__close:focus-visible { outline: 2px solid #E85B10; outline-offset: 2px; } .city-modal__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; } .city-modal__list li { break-inside: avoid; } .city-modal__city-link { display: block; padding: 10px 0 0; font-size: 16px; color: rgba(15, 15, 15, 0.5); text-decoration: none; transition: color 0.15s; font-family: 'Onest'; } .city-modal__city-link:hover { color: #E85B10; } .city-modal__city-link--active { color: #E85B10; font-weight: 600; } /* ---------- Блокировка скролла при открытом попапе ---------- */ body.city-modal-open { overflow: hidden; } /* ---------- Анимации ---------- */ @keyframes city-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes city-slide-up { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- Адаптив ---------- */ @media (max-width: 600px) { .city-modal__box { padding: 24px 20px; border-radius: 16px; } .city-modal__list { columns: 1; } .city-modal__title { font-size: 20px; } .city-modal__actions { flex-direction: column; } .city-modal__btn { min-width: 0; } } @media (prefers-reduced-motion: reduce) { .city-modal__overlay, .city-modal__box { animation: none; } }