/* ========================================================================== Finess Party — афиша мероприятий Тёмная тема с неоновыми акцентами (фиолетовый / электрик-блю / циан) ========================================================================== */ /* ---------- 1. CSS-переменные (дизайн-токены) ---------- */ :root { color-scheme: dark; /* нативные контролы (select, month, range) в тёмной гамме */ /* Фон и поверхности */ --bg: #0b0d17; /* основной фон */ --bg-soft: #10131f; /* чуть светлее фон (панели) */ --surface: #171b2e; /* карточки / блоки */ --surface-hover: #202640; /* ховер карточек */ --border: rgba(255, 255, 255, 0.08); /* Текст */ --text: #eef0ff; --text-muted: #a6aac6; --text-faint: #6d7195; /* Акценты (неон) */ --accent: #8b5cf6; /* фиолетовый */ --accent-2: #3b82f6; /* электрик-блю */ --accent-3: #22d3ee; /* циан */ --gradient: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%); --glow: 0 8px 30px rgba(139, 92, 246, 0.35); --danger: #f43f5e; --success: #34d399; /* Служебные (переопределяются светлой темой) */ --nav-bg: rgba(11, 13, 23, 0.82); /* фон липкой шапки и панели фильтров */ --glow-tint: rgba(139, 92, 246, 0.12); /* радиальный блик на фоне страницы */ /* Геометрия */ --radius: 18px; --radius-sm: 12px; --shadow: 0 24px 50px rgba(0, 0, 0, 0.5); --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.35); /* Шрифт */ --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Сетка контейнера */ --container: 1200px; } /* ---------- 1.1 Светлая тема (переопределение токенов) ---------- Включается атрибутом data-theme="light" на . */ [data-theme="light"] { color-scheme: light; --bg: #f5f7fb; --bg-soft: #eef1f7; --surface: #ffffff; --surface-hover: #eef1f8; --border: rgba(15, 23, 42, 0.10); --text: #0f172a; --text-muted: #475569; --text-faint: #8a93a6; --accent: #4f46e5; /* глубокий индиго */ --accent-2: #2563eb; /* синий */ --accent-3: #0d9488; /* бирюзовый */ --gradient: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%); --glow: 0 8px 24px rgba(79, 70, 229, 0.25); --danger: #e11d48; --success: #059669; --nav-bg: rgba(255, 255, 255, 0.85); --glow-tint: rgba(79, 70, 229, 0.07); --shadow: 0 20px 40px rgba(15, 23, 42, 0.12); --shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.08); } /* ---------- 2. Сброс и база ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Атрибут hidden всегда скрывает элемент, даже если у него задан display */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; /* Лёгкий радиальный блик сверху для глубины тёмной темы */ background-image: radial-gradient(1200px 600px at 50% -10%, var(--glow-tint), transparent 60%); } img, svg { display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select { font-family: inherit; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ---------- 3. Кнопки ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--gradient); color: #fff; box-shadow: var(--glow); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(139, 92, 246, 0.5); } .btn--ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text); } .btn--ghost:hover { background: var(--surface-hover); border-color: rgba(139, 92, 246, 0.5); } .btn--text { color: var(--accent-3); font-weight: 600; padding: 8px 12px; } .btn--text:hover { text-decoration: underline; } /* ---------- 4. Шапка ---------- */ .header { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .header__inner { display: flex; align-items: center; gap: 20px; height: 72px; } .header__burger { display: none; /* показывается только на мобильных */ padding: 8px; border-radius: 8px; color: var(--text); } .header__burger:hover { background: var(--surface); } .header__logo { display: inline-flex; align-items: center; gap: 9px; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; } .header__logo span { color: var(--accent); } .header__logo-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--gradient); color: #fff; box-shadow: var(--glow); } /* --- Выпадающий список (город) --- */ .dropdown { position: relative; } .dropdown__toggle { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: 14px; color: var(--text); transition: border-color .18s ease, background .18s ease; } .dropdown__toggle:hover { border-color: rgba(139, 92, 246, 0.5); background: var(--surface-hover); } .dropdown__chevron { transition: transform .2s ease; color: var(--text-faint); } .dropdown.is-open .dropdown__chevron { transform: rotate(180deg); } .dropdown__menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); list-style: none; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .dropdown.is-open .dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown__item { padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--text-muted); cursor: pointer; transition: background .15s ease, color .15s ease; } .dropdown__item:hover { background: var(--surface-hover); color: var(--text); } .dropdown__item.is-selected { color: var(--accent-3); font-weight: 600; } /* --- Поиск --- */ .search { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 46px; max-width: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: 100px; transition: border-color .18s ease, box-shadow .18s ease; } .search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15); } .search__icon { color: var(--text-faint); flex-shrink: 0; } .search__input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 15px; } .search__input::placeholder { color: var(--text-faint); } /* --- Действия справа --- */ .header__actions { display: flex; align-items: center; gap: 16px; } .header__phone { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 600; font-size: 14px; transition: color .18s ease; } .header__phone:hover { color: var(--accent-3); } /* Переключатель темы */ .theme-toggle { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); transition: color .18s ease, border-color .18s ease, background .18s ease; } .theme-toggle:hover { color: var(--text); border-color: var(--accent); background: var(--surface-hover); } .theme-toggle__moon { display: none; } [data-theme="light"] .theme-toggle__sun { display: none; } [data-theme="light"] .theme-toggle__moon { display: block; } /* --- Мобильное меню (разворачивается под шапкой на узких экранах) --- */ .header__mobile { display: none; /* на десктопе всегда скрыто */ flex-direction: column; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--border); background: var(--bg-soft); } /* ---------- 5. Панель навигации и фильтров ---------- */ .toolbar { position: sticky; top: 72px; z-index: 40; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .toolbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 12px 18px; font-weight: 600; font-size: 15px; color: var(--text-muted); border-radius: 100px; white-space: nowrap; transition: color .18s ease, background .18s ease; } .tab:hover { color: var(--text); background: var(--surface); } .tab.is-active { color: #fff; background: var(--gradient); box-shadow: var(--glow); } /* --- Блок фильтров --- */ .filter { position: relative; } .filter__toggle { position: relative; } .filter__badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; } .filter__panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(640px, calc(100vw - 32px)); padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); animation: panelIn .2s ease; } @keyframes panelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .filter__row { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-end; padding: 10px 0; } .filter__row + .filter__row { border-top: 1px solid var(--border); } .filter__group { display: flex; flex-direction: column; gap: 10px; } .filter__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); } /* Чипы возраста / даты */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 8px 16px; border-radius: 100px; background: var(--bg-soft); border: 1px solid var(--border); font-weight: 600; font-size: 14px; color: var(--text-muted); transition: all .18s ease; } .chip:hover { border-color: var(--accent); color: var(--text); } .chip.is-active { background: var(--gradient); color: #fff; border-color: transparent; box-shadow: var(--glow); } /* Поле сортировки */ .select { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--bg-soft); border: 1px solid var(--border); color: var(--text); font-size: 14px; outline: none; cursor: pointer; } .select:focus { border-color: var(--accent); } /* --- Двухползунковый слайдер диапазона цены --- */ .range { position: relative; width: 220px; height: 36px; } .range__track { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); height: 5px; border-radius: 100px; background: var(--bg-soft); } .range__fill { position: absolute; top: 50%; transform: translateY(-50%); height: 5px; border-radius: 100px; background: var(--gradient); } .range__input { position: absolute; top: 0; width: 100%; height: 36px; margin: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; /* клики обрабатывают только «бегунки» */ } .range__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; /* бегунок снова кликабелен */ width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,.5); transition: transform .15s ease; } .range__input::-webkit-slider-thumb:hover { transform: scale(1.15); } .range__input::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,.5); } .range__values { display: flex; justify-content: space-between; width: 220px; font-size: 14px; font-weight: 700; color: var(--accent-3); } /* Кнопка «Выбрать месяц» (обёртка вокруг ) */ .date-month { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 100px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted); font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color .18s ease; } .date-month:hover { border-color: var(--accent); } .date-month input[type="month"] { background: none; border: none; outline: none; color: var(--text); font-size: 14px; color-scheme: dark; } /* ---------- 6. Сетка карточек ---------- */ .results { display: flex; align-items: baseline; gap: 14px; margin: 30px 0 20px; } .results__title { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; } .results__count { color: var(--text-faint); font-size: 15px; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); /* десктоп: 4 в ряд */ gap: 24px; padding-bottom: 60px; } /* ---------- 7. Карточка мероприятия ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease; } /* Современный ховер: плавное увеличение + тень + подсветка рамки */ .card:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow); border-color: rgba(139, 92, 246, 0.45); } /* Постер — вертикальная «обложка» */ .card__poster { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; } .card__glyph { font-size: 72px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.4)); transition: transform .3s ease; } .card:hover .card__glyph { transform: scale(1.12) rotate(-4deg); } /* Возрастной ценз — бейдж поверх постера */ .card__age { position: absolute; top: 12px; left: 12px; min-width: 34px; height: 26px; padding: 0 8px; display: grid; place-items: center; border-radius: 8px; background: rgba(11, 13, 23, 0.7); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.2); font-weight: 700; font-size: 13px; color: #fff; } /* Категория — чип в углу постера (подложка всегда тёмная, текст — белый) */ .card__category { position: absolute; top: 12px; right: 12px; padding: 5px 10px; border-radius: 100px; background: rgba(11, 13, 23, 0.7); backdrop-filter: blur(6px); font-size: 11px; font-weight: 600; color: #fff; } /* Реальное фото постера: перекрывает градиент; при ошибке — удаляется (onerror) */ .card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .4s ease; } .card:hover .card__img { transform: scale(1.06); } .card__age, .card__category { z-index: 2; } /* бейджи поверх фото */ /* Градиенты постеров по категориям */ .poster--theater { background: linear-gradient(160deg, #7c3aed 0%, #db2777 100%); } .poster--concert { background: linear-gradient(160deg, #2563eb 0%, #06b6d4 100%); } .poster--kids { background: linear-gradient(160deg, #f59e0b 0%, #f43f5e 100%); } .poster--sport { background: linear-gradient(160deg, #10b981 0%, #0ea5e9 100%); } /* Тело карточки */ .card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px; flex: 1; } .card__date { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--accent-3); text-transform: capitalize; } .card__title { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.25; } .card__desc { font-size: 14px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card__venue { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-faint); margin-top: auto; /* прижимает площадку и низ к общему низу */ } /* Нижняя строка: цена + кнопка покупки */ .card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; } .card__price { font-size: 13px; color: var(--text-muted); } .card__price b { display: block; font-size: 21px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; } .card__buy { padding: 11px 18px; border-radius: var(--radius-sm); background: var(--gradient); color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: var(--glow); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .card__buy:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(139, 92, 246, 0.55); filter: brightness(1.08); } /* ---------- 8. Пустое состояние ---------- */ .empty { grid-column: 1 / -1; text-align: center; padding: 70px 20px; color: var(--text-muted); } .empty__icon { font-size: 48px; margin-bottom: 14px; } .empty__title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .empty__text { font-size: 15px; max-width: 360px; margin: 0 auto 20px; } /* ---------- 8.5 Модальное окно покупки билета ---------- */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(5px); } .modal__dialog { position: relative; display: grid; grid-template-columns: 300px 1fr; width: min(780px, 100%); max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); animation: modalIn .25s ease; } @keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal__close { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; transition: background .18s ease, transform .18s ease; } .modal__close:hover { background: rgba(0, 0, 0, 0.6); transform: rotate(90deg); } .modal__poster { position: relative; min-height: 340px; display: grid; place-items: center; overflow: hidden; } .modal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .modal__content { display: flex; flex-direction: column; gap: 12px; padding: 30px 30px 28px; } .modal__category { align-self: flex-start; padding: 5px 12px; border-radius: 100px; background: var(--bg-soft); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--accent-3); } .modal__title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; } .modal__meta { font-size: 14px; color: var(--text-muted); } .modal__desc { font-size: 14px; color: var(--text-muted); } .modal__row { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--border); margin-top: 4px; } .modal__price-label { font-size: 14px; color: var(--text-faint); } .modal__price { font-size: 20px; font-weight: 800; color: var(--text); } .modal__qty { display: flex; align-items: center; justify-content: space-between; } .modal__qty-label { font-size: 14px; color: var(--text-faint); } .qty { display: flex; align-items: center; gap: 6px; } .qty__btn { width: 38px; height: 38px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--border); font-size: 20px; font-weight: 700; color: var(--text); transition: border-color .18s ease, background .18s ease; } .qty__btn:hover { border-color: var(--accent); background: var(--surface-hover); } .qty__value { min-width: 44px; text-align: center; font-size: 18px; font-weight: 700; } .modal__total { display: flex; align-items: center; justify-content: space-between; font-size: 16px; color: var(--text-muted); } .modal__total b { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; } .modal__submit { justify-content: center; padding: 14px; font-size: 16px; } .modal__submit:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; pointer-events: none; } .modal__success { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--radius-sm); background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.4); color: var(--success); font-weight: 600; font-size: 14px; } @media (max-width: 640px) { .modal__dialog { grid-template-columns: 1fr; } .modal__poster { min-height: 200px; } .modal__content { padding: 22px 20px 20px; } } /* ---------- 8.6 Шаги модалки и мок-оплата ---------- */ .modal__step { display: flex; flex-direction: column; gap: 12px; } .pay__summary { display: flex; align-items: baseline; justify-content: space-between; font-size: 15px; color: var(--text-muted); padding-bottom: 14px; border-bottom: 1px solid var(--border); } .pay__summary b { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; } .pay__form { display: flex; flex-direction: column; gap: 14px; } .pay__row { display: flex; gap: 14px; } .pay__row .field { flex: 1; } .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); } .field__input { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-soft); border: 1px solid var(--border); color: var(--text); font-size: 15px; outline: none; transition: border-color .18s ease, box-shadow .18s ease; } .field__input::placeholder { color: var(--text-faint); } .field__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); } .pay__error { padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(244, 63, 94, 0.12); border: 1px solid rgba(244, 63, 94, 0.4); color: var(--danger); font-size: 13px; font-weight: 600; } .pay__note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-faint); } .pay__actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; } .pay__submit { justify-content: center; min-width: 160px; } .pay__submit:disabled { opacity: .6; cursor: default; pointer-events: none; } /* Спиннер загрузки */ .spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Встряска диалога при ошибке валидации */ .shake { animation: shake .4s ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } } /* Успех: иконка + текст в две строки */ .modal__success { align-items: flex-start; } .modal__success-icon { font-size: 24px; line-height: 1; } .modal__success-body { display: flex; flex-direction: column; gap: 2px; } .modal__success-body b { color: var(--success); font-size: 15px; } .modal__success-body span { font-size: 13px; opacity: .9; } /* ---------- 9. Подвал ---------- */ .footer { margin-top: 40px; border-top: 1px solid var(--border); background: var(--bg-soft); } .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 36px; padding: 56px 24px 40px; } .footer__note { margin-top: 16px; color: var(--text-faint); font-size: 14px; max-width: 280px; } .footer__col { display: flex; flex-direction: column; gap: 12px; } .footer__heading { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 6px; } .footer__link { color: var(--text-faint); font-size: 14px; transition: color .18s ease; } .footer__link:hover { color: var(--accent-3); } .footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 20px 24px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 13px; } /* ---------- 10. Адаптивность ---------- */ @media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, 1fr); } /* ноутбуки: 3 в ряд */ .header__phone-text { display: none; } /* на средних экранах — только иконка телефона */ } @media (max-width: 820px) { .grid { grid-template-columns: repeat(2, 1fr); } /* планшеты: 2 в ряд */ .footer__grid { grid-template-columns: 1fr 1fr; } .header__phone { display: none; } } @media (max-width: 560px) { .container { padding: 0 16px; } .grid { grid-template-columns: 1fr; gap: 18px; } /* смартфоны: 1 в ряд */ .header__inner { gap: 12px; height: 64px; } .header__burger { display: block; } .header__mobile { display: flex; } /* показываем меню на мобильных */ .header__logo { font-size: 19px; } .dropdown, .header__actions { display: none; } /* город/телефон/вход прячем в мобильное меню */ /* Поиск занимает всю оставшуюся ширину */ .search { flex: 1; max-width: none; height: 42px; } .toolbar .container { flex-wrap: wrap; padding: 10px 16px; } .tabs { flex: 1 1 100%; } .filter { margin-left: auto; } .filter__panel { left: 0; right: 0; width: 100%; } .results__title { font-size: 22px; } .footer__grid { grid-template-columns: 1fr; gap: 28px; padding: 40px 16px 28px; } .footer__bottom { justify-content: center; text-align: center; } }