/* ========================================================= STOLIK.ONLINE — дизайн-система сайта. Палитра унаследована от фирменного стиля: тёмный графит, тёплый акцент #ff904e, Inter во всех начертаниях. ========================================================= */ :root { /* Светлая гамма макетов: тёплая бумага, чистый чёрный в заголовках, единственный акцент #FD4D01. Она основная — тёмная ниже, вариантом. */ --bg: #f9f7f4; --bg-deep: #f2efe9; --surface: #ffffff; --surface-2: #f6f4f0; --surface-3: #ede9e2; --border: rgba(20, 18, 15, 0.10); --border-strong: rgba(20, 18, 15, 0.20); --text: #000000; --text-dim: #34322e; /* Макетный #888787 даёт на бумаге контраст 3.35 — для мелкого текста мало. Взят ближайший оттенок, проходящий норму: 4.82. */ --text-muted: #706d68; --accent: #fd4d01; --accent-2: #e04200; /* Заливка под белым текстом: на самом #fd4d01 контраст 3.37, здесь 4.84. */ --accent-strong: #d13b00; /* Оранжевый текст по светлому фону. */ --accent-ink: #b23a00; --accent-soft: #fef2e9; --accent-tint: #fceadf; --grad: linear-gradient(120deg, #ff6a26, #e04200); --ok: #2a7340; --ok-soft: #eaf3eb; --warn: #8a5a00; --warn-soft: #feecce; --danger: #c8362a; --danger-soft: #fceae8; --info: #2a63bd; --info-soft: #e9eff9; --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --maxw: 1200px; --header-h: 68px; --shadow: 0 10px 30px -18px rgba(20, 18, 15, 0.22); --shadow-lg: 0 26px 60px -30px rgba(20, 18, 15, 0.28); --page-glow: rgba(253, 77, 1, 0.07); --page-top: #fbfaf8; --page-bottom: #f2efe9; --header-bg: rgba(249, 247, 244, 0.9); --footer-bg: rgba(242, 239, 233, 0.6); --row-hover: rgba(20, 18, 15, 0.035); --ambient-brightness: 1.1; --ambient-opacity: .17; --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color-scheme: light; } /* ============ ТЁМНАЯ ТЕМА ============ В макетах её нет — это продолжение той же гаммы: тёплый уголь вместо бумаги, тот же единственный акцент. Значение ставит скрипт в , до первой отрисовки, иначе страница мигает светлой и перекрашивается. Выбор человека лежит в localStorage, без выбора берётся системная настройка. */ :root[data-theme="dark"] { --bg: #171614; --bg-deep: #100f0e; --surface: #201e1b; --surface-2: #2a2724; --surface-3: #35312c; --border: rgba(247, 244, 239, 0.12); --border-strong: rgba(247, 244, 239, 0.24); --text: #f7f4ef; --text-dim: #d4cfc6; --text-muted: #a8a29a; --accent: #ff6a26; --accent-2: #ff8348; --accent-strong: #e64200; --accent-ink: #ff8f5c; --accent-soft: rgba(255, 106, 38, 0.14); --accent-tint: rgba(255, 106, 38, 0.20); --grad: linear-gradient(120deg, #ff8348, #ef5410); --ok: #6ad598; --ok-soft: rgba(106, 213, 152, 0.14); --warn: #ffc663; --warn-soft: rgba(255, 198, 99, 0.14); --danger: #ff8478; --danger-soft: rgba(255, 132, 120, 0.14); --info: #8cbcff; --info-soft: rgba(140, 188, 255, 0.14); --shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6); --shadow-lg: 0 26px 60px -26px rgba(0, 0, 0, 0.7); --page-glow: rgba(255, 106, 38, 0.10); --page-top: #1b1a17; --page-bottom: #100f0e; --header-bg: rgba(23, 22, 20, 0.9); --footer-bg: rgba(16, 15, 14, 0.55); --row-hover: rgba(255, 255, 255, 0.03); --ambient-brightness: .5; --ambient-opacity: .5; color-scheme: dark; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Фон задан и на html: без этого при прокрутке длинной страницы низ документа оставался белым — body-фон не растягивается на весь холст, когда страница выше окна. */ html { scroll-behavior: smooth; background: var(--bg-deep); } body { font-family: var(--font); background: radial-gradient(1100px 520px at 82% -8%, var(--page-glow), transparent 62%) no-repeat, linear-gradient(180deg, var(--page-top) 0%, var(--page-bottom) 900px); background-color: var(--bg-deep); color: var(--text); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .main { flex: 1; padding-bottom: 72px; position: relative; } /* ============ ПОДЛОЖКА ВНУТРЕННИХ СТРАНИЦ ============ Тот же кадр, что на главной, размытый до состояния цветового пятна. Не fixed, а в потоке: так он не спорит с фоном body и не всплывает поверх выпадающих списков. */ .ambient { position: absolute; top: 0; left: 0; right: 0; height: 480px; overflow: hidden; pointer-events: none; z-index: 0; } .ambient__img { position: absolute; inset: -20%; background-size: cover; background-position: 50% 42%; filter: blur(46px) saturate(130%) brightness(var(--ambient-brightness)); opacity: var(--ambient-opacity); } /* Растворение в фон. На светлой теме тянем его от самого верха: резкая нижняя граница размытого кадра читалась как грязная полоса поперёк страницы, а не как тёплая подложка. */ .ambient__fade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 45%, var(--bg) 100%); } :root[data-theme="dark"] .ambient__fade { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, var(--bg-deep) 100%); } /* Контент поднимаем над подложкой. */ .main > .container, .main > section { position: relative; z-index: 1; } /* ============ ШАПКА ============ */ .header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } /* ---- Переключатель темы ---- */ .theme-toggle { width: 36px; height: 36px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text-dim); cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; } .theme-toggle:hover { background: var(--surface-3); color: var(--text); } .theme-toggle svg { width: 17px; height: 17px; } /* В тёмной теме предлагаем солнце, в светлой — луну: иконка показывает, куда переключишься, а не где находишься. */ .theme-toggle__sun { display: none; } :root[data-theme="dark"] .theme-toggle__sun { display: block; } :root[data-theme="dark"] .theme-toggle__moon { display: none; } .header__inner { height: var(--header-h); display: flex; align-items: center; gap: 24px; } .logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .logo__mark { display: block; width: 110px; height: 40px; } /* Надпись внутри знака рисуется шрифтом страницы: встроенный SVG наследует шрифты документа, поэтому логотип совпадает по начертанию с остальным сайтом. */ .logo__word { font-family: var(--font); font-size: 34px; font-weight: 700; letter-spacing: -1px; fill: #FFF7EB; } .logo__word-accent { fill: #FF8A3D; } .logo--sm .logo__mark { width: 88px; height: 32px; } .nav { display: flex; gap: 4px; margin-right: auto; } .nav__link { padding: 8px 13px; border-radius: 9px; color: var(--text-dim); font-size: 14px; font-weight: 500; transition: background .15s, color .15s; } .nav__link:hover { background: var(--surface); color: var(--text); } .nav__link.is-active { background: var(--accent-soft); color: var(--accent); } .header__actions { display: flex; align-items: center; gap: 8px; } .inline-form { display: inline; } .burger { display: none; width: 38px; height: 38px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; padding: 10px 9px; flex-direction: column; justify-content: space-between; } .burger span { display: block; height: 2px; background: var(--text); border-radius: 2px; } .mobile-menu { display: none; flex-direction: column; padding: 8px 20px 16px; border-bottom: 1px solid var(--border); } .mobile-menu a { padding: 11px 0; color: var(--text-dim); border-bottom: 1px solid var(--border); font-size: 15px; } .mobile-menu a:last-child { border-bottom: none; } .mobile-menu.is-open { display: flex; } .dot-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #241304; font-size: 11px; font-weight: 700; } /* ============ КНОПКИ ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border: 1px solid transparent; border-radius: 11px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: transform .12s, background .15s, border-color .15s, opacity .15s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn--primary { background: var(--grad); color: #241304; } .btn--primary:hover { filter: brightness(1.06); } .btn--ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); } .btn--ghost:hover { background: var(--surface-3); } .btn--quiet { background: transparent; color: var(--text-dim); } .btn--quiet:hover { background: var(--surface); color: var(--text); } .btn--ok { background: var(--ok-soft); color: var(--ok); border-color: rgba(95, 207, 142, .3); } .btn--ok:hover { background: rgba(95, 207, 142, .22); } .btn--danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(255, 122, 112, .3); } .btn--danger:hover { background: rgba(255, 122, 112, .22); } .btn--sm { padding: 8px 14px; font-size: 13px; border-radius: 9px; } .btn--lg { padding: 15px 28px; font-size: 15px; border-radius: 13px; } .btn--block { width: 100%; } /* ============ ТИПОГРАФИКА ============ */ h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; } h1 { font-size: clamp(28px, 4vw, 44px); } h2 { font-size: clamp(22px, 2.6vw, 30px); } h3 { font-size: 18px; } h4 { font-size: 15px; } .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Градиентному тексту нельзя дать text-shadow: он рисуется поверх фона и закрасил бы буквы. drop-shadow работает по контуру. */ .grad { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); } /* В герое акцент светлее общего: тёмно-оранжевый на подсвеченном окне читался как пятно на пятне. */ .hero__title .grad { /* Светлый тёплый, а не насыщенно-оранжевый: тёмный конец градиента приходился на подсвеченное окно и пропадал совсем. */ background: linear-gradient(120deg, #ffe0bb, #ffab5e); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .8)); } .lead { color: var(--text-dim); font-size: 16px; } .muted { color: var(--text-muted); } .small { font-size: 13px; } .tiny { font-size: 12px; } .center { text-align: center; } .nowrap { white-space: nowrap; } .section { padding: 56px 0; } .section--tight { padding: 32px 0; } .section__head { margin-bottom: 28px; } .section__head h2 { margin-bottom: 8px; } .eyebrow { display: inline-block; padding: 5px 12px; border-radius: 100px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; } /* ============ ГЛАВНАЯ: АТМОСФЕРНАЯ СЦЕНА ============ */ .hero { position: relative; padding: 104px 0 84px; /* Сцена нарисована в пропорции 16:9. Если секция ниже, slice срезает края и от композиции остаётся узкая полоса посередине. */ min-height: 740px; display: flex; align-items: center; overflow: hidden; isolation: isolate; } .hero__inner { position: relative; z-index: 2; } /* Мягкая тёмная подложка под текстовой колонкой. Общего затемнения слева мало: окно на фотографии — самое светлое пятно кадра, и акцентное слово в тёплом градиенте на нём просто пропадало. Подложка даёт тексту собственный фон, не превращая герой в чёрный прямоугольник. */ .hero__inner::before { content: ""; position: absolute; inset: -56px -120px -40px -48px; z-index: -1; pointer-events: none; background: /* Радиальный — мягкая органичная форма, чтобы подложка не читалась прямоугольником. */ radial-gradient(80% 96% at 26% 48%, rgba(3, 7, 18, .74) 0%, rgba(3, 7, 18, .46) 52%, transparent 82%), /* Линейный тянется дальше вправо: заголовок длинный, и его хвост попадал ровно на окно — самое светлое место кадра. */ linear-gradient(100deg, rgba(3, 7, 18, .92) 0%, rgba(3, 7, 18, .84) 42%, rgba(3, 7, 18, .62) 64%, rgba(3, 7, 18, .26) 82%, transparent 97%); } /* Векторная сцена (или своя фотография) во всю ширину экрана. */ .scene { position: absolute; inset: -1px; z-index: 0; pointer-events: none; } .scene__svg { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- Фотографический фон ---- */ .scene--photo { background: #050914; } /* Отдельный слой под параллакс: наезд кадра живёт на .scene__img, и обе трансформации на одном элементе перебивали бы друг друга. */ .scene__pan { position: absolute; inset: 0; transform: translate3d(calc(var(--px, 0) * .05px), calc(var(--py, 0) * .05px), 0); transition: transform .6s cubic-bezier(.22, 1, .36, 1); will-change: transform; } /* Передний план движется втрое быстрее заднего. Разная скорость слоёв — то самое, что глаз читает как расстояние между ними. */ .scene__fg { position: absolute; inset: -14%; /* Слой заведомо расфокусирован, поэтому берёт лёгкую версию кадра: тянуть ради него полноразмерный файл незачем. */ background-image: var(--hero-blur, var(--hero)); background-size: cover; background-position: 50% 88%; filter: blur(26px) brightness(.7) saturate(120%); opacity: .32; transform: scale(1.5) translate3d(calc(var(--px, 0) * .16px), calc(var(--py, 0) * .12px), 0); transition: transform .55s cubic-bezier(.22, 1, .36, 1); /* Только нижняя кромка и углы. Раньше маска доставала до середины кадра и накрывала как раз столик — ради глубины пропадало главное. */ -webkit-mask-image: radial-gradient(150% 52% at 50% 132%, #000 26%, transparent 74%); mask-image: radial-gradient(150% 52% at 50% 132%, #000 26%, transparent 74%); will-change: transform; } .scene__img { position: absolute; /* Запас по краям: наезд и параллакс не должны обнажать край кадра, а размытие иначе даёт светлую кайму по периметру. Держим минимальным: каждый лишний процент — это ещё немного срезанной композиции. */ inset: -5%; /* Портретный кадр — для узких экранов, там он показывается целиком. */ background-image: var(--hero); background-size: cover; /* Кадрируем по паре и столику: выше уходит потолок, ниже — пустой пол. */ background-position: 50% 66%; /* Лёгкий расфокус, а не матовое стекло: двое и столик должны читаться. */ filter: blur(1px) saturate(118%) contrast(108%); animation: kenburns 44s ease-in-out infinite alternate; will-change: transform; } /* На широком экране берём заранее обрезанный кадр 16:9. Портретный пришлось бы растягивать вдвое, и вся резкость уходила в мыло. */ @media (min-width: 900px) { .scene__img { background-image: var(--hero-wide, var(--hero)); background-position: 50% 52%; } } /* Медленный наезд: кадр дышит, а не стоит наклейкой. */ /* Наезд намеренно короткий: на большом зуме из кадра выпадает столик. */ @keyframes kenburns { from { transform: scale(1.01) translate3d(-.6%, .4%, 0); } to { transform: scale(1.06) translate3d(.8%, -.6%, 0); } } /* Свечение окна — то самое золото контрового света. */ .scene__bloom { position: absolute; inset: 0; background: radial-gradient(46% 42% at 53% 32%, rgba(255, 198, 128, .50), rgba(255, 150, 80, .16) 46%, transparent 74%), radial-gradient(30% 28% at 26% 76%, rgba(255, 168, 96, .18), transparent 72%); mix-blend-mode: screen; animation: bloom 11s ease-in-out infinite alternate; } @keyframes bloom { from { opacity: .7; } to { opacity: 1; } } /* Пылинки в луче света. Рисуются на canvas: полсотни div-ов с анимацией стоили бы кадров на слабых машинах. */ .scene__dust { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; opacity: .8; } /* Плёночное зерно: даёт фактуру и заодно убирает полосы на градиентах. */ .scene__grain { position: absolute; inset: 0; opacity: .06; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; } /* Затемнение слева и снизу: текст должен читаться поверх сцены, а низ секции — незаметно переходить в фон страницы. */ .scene__fade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(3, 7, 18, .82) 0%, rgba(3, 7, 18, .58) 24%, rgba(3, 7, 18, .14) 50%, transparent 72%), linear-gradient(180deg, rgba(16, 9, 7, .48) 0%, transparent 22%, transparent 62%, rgba(24, 18, 16, .55) 84%, var(--bg-deep) 100%); } .hero__title { margin-bottom: 18px; font-size: clamp(32px, 5vw, 56px); letter-spacing: -0.03em; text-shadow: 0 2px 4px rgba(0, 0, 0, .72), 0 5px 38px rgba(0, 0, 0, .72); } .hero__sub { color: var(--text-dim); font-size: 17px; max-width: 520px; margin-bottom: 30px; /* Затемнение слева намеренно слабое, чтобы за текстом читалась пара. Читаемость держит тень под самими буквами, а не залитый фон. */ text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 2px 22px rgba(0, 0, 0, .6); } /* Форма поиска встречается и в герое поверх фотографии, и в каталоге на обычном фоне. База берёт цвета из палитры, «стеклянный» вариант включается только внутри героя. */ .searchbox { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-lg); max-width: 720px; } .hero .searchbox { background: rgba(7, 13, 29, .72); backdrop-filter: blur(18px) saturate(140%); border-color: rgba(255, 211, 154, .32); box-shadow: var(--shadow-lg), 0 0 70px -30px rgba(255, 166, 85, .58); } .searchbox__row { display: flex; gap: 10px; } .searchbox input[type="text"] { flex: 1; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 13px; padding: 14px 16px; color: var(--text); font-family: inherit; font-size: 15px; width: 100%; } .searchbox input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .searchbox__hint { margin-top: 12px; color: var(--text-muted); font-size: 13px; } .searchbox__hint b { color: var(--text-dim); font-weight: 500; } /* Слои сцены разъезжаются за курсором — плоская картинка читается как глубина. Смещение задаёт JS через --px/--py. */ .scene__svg [data-depth] { transform: translate3d( calc(var(--px, 0) * var(--depth, 0) * 1px), calc(var(--py, 0) * var(--depth, 0) * 1px), 0); transition: transform .5s cubic-bezier(.22, 1, .36, 1); will-change: transform; } /* Свеча живая: без движения сцена выглядит наклейкой. */ .scene__flame { transform-origin: 800px 600px; animation: flicker 3.4s ease-in-out infinite; } .scene__glow { animation: breathe 3.4s ease-in-out infinite; } @keyframes flicker { 0%, 100% { transform: scale(1) translateY(0); opacity: 1; } 28% { transform: scale(1.06) translateY(-2px); opacity: .92; } 55% { transform: scale(.96) translateY(1px); opacity: 1; } 78% { transform: scale(1.03) translateY(-1px); opacity: .95; } } @keyframes breathe { 0%, 100% { opacity: 1; } 40% { opacity: .82; } 70% { opacity: 1.0; } } .hero__stats { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 34px; } .hero__stats div strong { display: block; font-size: 28px; text-shadow: 0 2px 20px rgba(0, 0, 0, .5); } .hero__stats div span { color: var(--text-dim); font-size: 13px; } /* Герой всегда «ночной». Под ним фотография вечернего зала, и в светлой теме тёмный текст по ней не прочитать — поэтому цвета здесь свои, не из палитры страницы. */ .hero { color: #f4efe9; } .hero .eyebrow { background: rgba(255, 154, 82, .22); color: #ffc590; } .hero__sub { color: rgba(244, 239, 233, .85); } .hero__stats div span { color: rgba(244, 239, 233, .72); } .hero .searchbox input[type="text"] { background: rgba(2, 7, 18, .76); border-color: rgba(255, 214, 176, .32); color: #fffaf4; } .hero .searchbox input[type="text"]::placeholder { color: rgba(246, 241, 235, .68); } .hero .searchbox__hint { color: rgba(244, 239, 233, .78); } .hero .searchbox__hint b { color: rgba(244, 239, 233, .9); } /* ============ ПОМОЩНИК ПО БРОНИРОВАНИЮ ============ */ .booking-assistant { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 20; } .booking-assistant__launcher { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 7px 17px 7px 8px; border: 1px solid rgba(255, 224, 187, .38); border-radius: 999px; background: linear-gradient(135deg, #ff9a52, #e95d11); color: #201007; box-shadow: 0 16px 35px rgba(0, 0, 0, .35), 0 0 0 5px rgba(255, 144, 78, .12); font: 700 14px/1 var(--font); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; } .booking-assistant__launcher:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0, 0, 0, .42), 0 0 0 7px rgba(255, 144, 78, .16); } .booking-assistant__launcher:focus-visible, .booking-assistant__close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .booking-assistant__avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #1d1420; color: #ffd0a5; box-shadow: inset 0 0 0 1px rgba(255, 228, 201, .16); } .booking-assistant__avatar svg { width: 25px; height: 25px; } .booking-assistant__spark { position: absolute; top: -7px; left: 31px; color: #fff5df; font-size: 17px; text-shadow: 0 1px 8px rgba(255, 255, 255, .8); } .booking-assistant__panel { position: absolute; right: 0; bottom: 72px; width: min(390px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); } .booking-assistant__panel[hidden] { display: none; } .booking-assistant__head { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; } .booking-assistant__eyebrow { color: var(--accent-ink); font-size: 10px; font-weight: 700; letter-spacing: .1em; } .booking-assistant__head h2 { margin-top: 3px; font-size: 21px; } .booking-assistant__close { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 25px; line-height: 1; cursor: pointer; } .booking-assistant__panel > p { margin: 12px 0 16px; color: var(--text-dim); font-size: 14px; line-height: 1.45; } .booking-assistant__messages { display: grid; gap: 8px; max-height: 185px; overflow: auto; margin: 0 0 14px; padding-right: 3px; } .assistant-message { width: fit-content; max-width: 92%; padding: 9px 11px; border-radius: 13px; font-size: 13px; line-height: 1.4; } .assistant-message--assistant { background: var(--surface-2); color: var(--text); border-top-left-radius: 4px; } .assistant-message--user { justify-self: end; background: var(--accent-soft); color: var(--text); border-top-right-radius: 4px; } .booking-assistant__form { display: grid; gap: 9px; } .booking-assistant__form label { font-size: 13px; font-weight: 600; } .booking-assistant__form textarea { width: 100%; resize: vertical; min-height: 76px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font: inherit; line-height: 1.35; } .booking-assistant__form textarea::placeholder { color: var(--text-muted); } .booking-assistant__form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .booking-assistant__form .btn { width: 100%; justify-content: center; } .booking-assistant__form .btn:disabled { opacity: .7; cursor: wait; } .booking-assistant__examples { display: flex; gap: 7px; flex-wrap: wrap; } .booking-assistant__examples button { border: 1px solid var(--border); border-radius: 999px; padding: 5px 9px; background: var(--surface-2); color: var(--text-dim); font: 600 12px/1 var(--font); cursor: pointer; } .booking-assistant__examples button:hover { background: var(--accent-soft); } .booking-assistant__note { display: block; margin-top: 12px; color: var(--text-muted); font-size: 11px; line-height: 1.35; } .booking-assistant__search { display: block; margin-top: 11px; padding: 10px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 700; text-align: center; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 7px 14px; border-radius: 100px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; font-weight: 500; transition: background .15s, color .15s; } .chip:hover { background: var(--surface-3); color: var(--text); } .chip.is-active { background: var(--accent); border-color: var(--accent); color: #241304; } /* ============ СЕТКА КАРТОЧЕК ============ */ .grid { display: grid; gap: 16px; } .grid--places { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* ============ КАРТОЧКА ЗАВЕДЕНИЯ ============ */ .pcard { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; /* Наклон за курсором задаёт JS через --rx/--ry: карточка приподнимается к указателю, и плоская сетка получает объём. */ transform: perspective(900px) translateY(0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .22s cubic-bezier(.22, 1, .36, 1), border-color .2s, box-shadow .2s; } .pcard:hover { transform: perspective(900px) translateY(-5px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); border-color: rgba(255, 154, 82, .38); box-shadow: var(--shadow), 0 22px 60px -30px rgba(255, 144, 78, .6); } /* Тёплый блик, скользящий за курсором. */ .pcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(240px 180px at var(--mx, 50%) var(--my, 50%), rgba(255, 205, 155, .16), transparent 68%); opacity: 0; transition: opacity .2s; } .pcard:hover::after { opacity: 1; } .pcard__media { position: relative; aspect-ratio: 16 / 10; /* Тёплая заглушка вместо серого прямоугольника: у большинства заведений из открытых данных фотографии нет, и сетка не должна выглядеть пустой. */ background: radial-gradient(120% 90% at 30% 15%, rgba(255, 154, 82, .22), transparent 62%), linear-gradient(150deg, #4a3428, #2f2119); display: grid; place-items: center; overflow: hidden; } .pcard__media img { width: 100%; height: 100%; object-fit: cover; } .pcard__letter { font-size: 52px; font-weight: 700; color: rgba(255, 178, 118, .55); letter-spacing: -0.04em; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); } /* ============ ОФОРМЛЕНИЕ БЕЗ ФОТОГРАФИИ ============ У большинства заведений каталога снимка нет. Вместо серой заглушки — рисованный фон по типу кухни: тёплый градиент, мягкие пятна света и знак. Намеренно не похоже на фотографию: чужой снимок на карточке «Токио» гость прочитал бы как снимок «Токио». */ .mood { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; /* Шаблон отдаёт обе гаммы, светлую и тёмную. Здесь выбирается нужная — поэтому переключение темы не требует перезагрузки страницы. */ --mood-from: var(--mood-from-light, #f2ede6); --mood-to: var(--mood-to-light, #e6ddd2); --mood-accent: var(--mood-accent-light, rgba(255, 255, 255, .55)); --mood-sheen: rgba(255, 255, 255, .5); background: radial-gradient(58% 54% at var(--mood-light, 26% 22%), var(--mood-accent), transparent 62%), radial-gradient(46% 44% at var(--mood-shade, 82% 88%), var(--mood-sheen), transparent 64%), linear-gradient(var(--mood-angle, 150deg), var(--mood-from), var(--mood-to)); } :root[data-theme="dark"] .mood { --mood-from: var(--mood-from-dark, #2a211b); --mood-to: var(--mood-to-dark, #171310); --mood-accent: var(--mood-accent-dark, rgba(255, 197, 144, .32)); --mood-sheen: rgba(255, 255, 255, .07); } /* Своя фотография для типа заведения, если её положили в static/img/mood. Ложится под градиент и приглушается — карточка остаётся оформлением, а не выдаёт себя за снимок конкретного зала. */ .mood__photo { position: absolute; inset: 0; background-image: var(--mood-photo); background-size: cover; background-position: center; opacity: .42; filter: saturate(108%) brightness(1.02); } .mood__glyph { position: relative; width: 42%; max-width: 96px; aspect-ratio: 1; /* На светлой подложке знак рисуется тёплым коричневым, на тёмной — кремовым: и там, и там он остаётся приглушённым, но различимым. */ color: rgba(120, 84, 56, .38); filter: none; } :root[data-theme="dark"] .mood__glyph { color: rgba(255, 226, 196, .34); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); } /* Четыре композиции на палитру. Кафе в каталоге две тысячи, и без вариаций сетка выглядела бы обоями. */ .mood--v0 { --mood-angle: 150deg; --mood-light: 24% 20%; --mood-shade: 84% 86%; } .mood--v1 { --mood-angle: 205deg; --mood-light: 76% 24%; --mood-shade: 18% 82%; } .mood--v2 { --mood-angle: 118deg; --mood-light: 50% 12%; --mood-shade: 88% 62%; } .mood--v3 { --mood-angle: 236deg; --mood-light: 18% 74%; --mood-shade: 78% 20%; } .pcard:hover .mood__glyph { color: rgba(120, 84, 56, .52); } :root[data-theme="dark"] .pcard:hover .mood__glyph { color: rgba(255, 226, 196, .46); } /* Подпись под большой картинкой на странице заведения. */ .media-note { margin-top: 10px; color: var(--text-muted); font-size: 12px; line-height: 1.5; } .pcard__flag { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 100px; background: rgba(42, 42, 46, .82); backdrop-filter: blur(6px); font-size: 11px; font-weight: 600; color: var(--accent); } .pcard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .pcard__title { font-size: 16px; font-weight: 600; } .pcard__meta { color: var(--text-muted); font-size: 13px; } .pcard__addr { color: var(--text-dim); font-size: 13px; } .pcard__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rating { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-size: 13px; font-weight: 600; } /* ============ ПАНЕЛИ И КАРТЫ ============ */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .panel--flush { padding: 0; overflow: hidden; } .panel__head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .panel__body { padding: 22px; } .panel + .panel { margin-top: 16px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; } .stat__value { font-size: 30px; font-weight: 700; line-height: 1.1; } .stat__label { color: var(--text-muted); font-size: 13px; margin-top: 4px; } .stat--accent .stat__value { color: var(--accent); } .stat--ok .stat__value { color: var(--ok); } .stat--warn .stat__value { color: var(--warn); } /* ============ ФОРМЫ ============ */ .form { display: flex; flex-direction: column; gap: 16px; } .form__row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .field { display: flex; flex-direction: column; gap: 6px; } .field > label { font-size: 13px; font-weight: 600; color: var(--text-dim); } .field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="password"], .field input[type="date"], .field input[type="time"], .field input[type="number"], .field input[type="search"], .field select, .field textarea { width: 100%; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; color: var(--text); font-family: inherit; font-size: 14px; } .field textarea { resize: vertical; min-height: 92px; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .field--bad input, .field--bad select, .field--bad textarea { border-color: var(--danger); } .field__error { color: var(--danger); font-size: 12px; } .field__hint { color: var(--text-muted); font-size: 12px; } .check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-dim); } .check input { margin-top: 3px; accent-color: var(--accent); } .form__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ============ БЕЙДЖИ И ФЛЕШИ ============ */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; white-space: nowrap; } .badge--new { background: var(--warn-soft); color: var(--warn); } .badge--confirmed { background: var(--ok-soft); color: var(--ok); } .badge--rejected { background: var(--danger-soft); color: var(--danger); } .badge--cancelled { background: rgba(152, 151, 143, .16); color: var(--text-muted); } .badge--pending { background: var(--warn-soft); color: var(--warn); } .badge--approved { background: var(--ok-soft); color: var(--ok); } .badge--partner { background: var(--accent-soft); color: var(--accent); } .badge--info { background: var(--info-soft); color: var(--info); } .flash-stack { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; } .flash { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 14px; } .flash--ok { background: var(--ok-soft); border-color: rgba(95, 207, 142, .3); color: var(--ok); } .flash--warn { background: var(--warn-soft); border-color: rgba(255, 198, 99, .3); color: var(--warn); } .flash--error { background: var(--danger-soft); border-color: rgba(255, 122, 112, .3); color: var(--danger); } .notice { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--info-soft); border: 1px solid rgba(125, 180, 255, .25); color: var(--text-dim); font-size: 14px; } .notice--warn { background: var(--warn-soft); border-color: rgba(255, 198, 99, .25); } /* ============ ТАБЛИЦЫ ============ */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; } table.data th { text-align: left; padding: 12px 16px; color: var(--text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; } table.data td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: top; } table.data tr:last-child td { border-bottom: none; } table.data tbody tr:hover { background: var(--row-hover); } /* ============ БРОНИ ============ */ .blist { display: flex; flex-direction: column; gap: 12px; } .bcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: grid; gap: 14px; grid-template-columns: 1fr auto; align-items: start; } .bcard--new { border-left: 3px solid var(--warn); } .bcard--confirmed { border-left: 3px solid var(--ok); } .bcard--rejected, .bcard--cancelled { border-left: 3px solid rgba(152, 151, 143, .4); opacity: .8; } .bcard__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .bcard__title { font-size: 16px; font-weight: 600; } .bcard__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--text-dim); font-size: 14px; } .bcard__fact b { color: var(--text); font-weight: 600; } .bcard__actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; } .code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 7px; padding: 2px 8px; font-size: 13px; letter-spacing: .08em; } /* ============ КАРТОЧКА ЗАВЕДЕНИЯ (СТРАНИЦА) ============ */ .place-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: start; padding: 32px 0; } .place-hero__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(140deg, #4a3428, #2f2119); display: grid; place-items: center; } .place-hero__media .mood__glyph { max-width: 150px; } .place-hero__media img { width: 100%; height: 100%; object-fit: cover; } .place-hero__letter { font-size: 96px; font-weight: 700; color: rgba(255, 144, 78, .45); } .place-facts { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; } .place-fact { display: flex; gap: 10px; color: var(--text-dim); font-size: 14px; } .place-fact__key { color: var(--text-muted); min-width: 92px; flex-shrink: 0; } .booking-form { position: sticky; top: calc(var(--header-h) + 16px); } .slots { display: flex; flex-wrap: wrap; gap: 7px; } .slot { padding: 8px 13px; border-radius: 9px; background: var(--bg-deep); border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .slot:hover { border-color: var(--accent); color: var(--text); } .slot.is-active { background: var(--accent); border-color: var(--accent); color: #241304; } /* ============ ШАГИ / ПРЕИМУЩЕСТВА ============ */ .steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: step; } .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .step__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 700; margin-bottom: 12px; } .step h3 { margin-bottom: 6px; } .step p { color: var(--text-dim); font-size: 14px; } /* ============ ПАГИНАЦИЯ ============ */ .pager { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 28px; flex-wrap: wrap; } .pager a, .pager span { min-width: 38px; height: 38px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); font-size: 14px; font-weight: 600; } .pager a:hover { background: var(--surface-3); color: var(--text); } .pager .is-current { background: var(--accent); border-color: var(--accent); color: #241304; } .pager .is-gap { background: transparent; border-color: transparent; } /* ============ ВКЛАДКИ ============ */ .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; } .tab { padding: 8px 15px; border-radius: 100px; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; font-weight: 600; } .tab:hover { background: var(--surface-3); color: var(--text); } .tab.is-active { background: var(--accent); border-color: var(--accent); color: #241304; } .tab__count { opacity: .7; margin-left: 4px; } /* ============ ПУСТЫЕ СОСТОЯНИЯ ============ */ .empty { text-align: center; padding: 56px 20px; color: var(--text-muted); } .empty__icon { font-size: 42px; margin-bottom: 12px; } .empty h3 { color: var(--text-dim); margin-bottom: 6px; } .empty p { margin-bottom: 18px; font-size: 14px; } /* ============ КАБИНЕТ ============ */ .layout { display: grid; grid-template-columns: 232px 1fr; gap: 24px; padding-top: 28px; } .side { display: flex; flex-direction: column; gap: 4px; align-self: start; position: sticky; top: calc(var(--header-h) + 16px); } .side__link { padding: 10px 14px; border-radius: 10px; color: var(--text-dim); font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; gap: 8px; align-items: center; } .side__link:hover { background: var(--surface); color: var(--text); } .side__link.is-active { background: var(--accent-soft); color: var(--accent); } .side__title { padding: 12px 14px 6px; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .page-head h1 { font-size: 26px; } .page-head p { color: var(--text-muted); font-size: 14px; } /* ============ ПОДСКАЗКИ ПОИСКА ============ */ .suggest-wrap { position: relative; flex: 1; } .suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, .06); overflow: hidden; z-index: 30; display: none; /* Цвет задаём явно. Внутри героя текст пришпилен к светлому — под ним фотография вечернего зала. Выпадающий список рисуется на своей подложке, и унаследованный светлый цвет делал названия невидимыми. */ color: var(--text); } .suggest.is-open { display: block; } .suggest__item { display: block; padding: 11px 14px; font-size: 14px; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--border); transition: background .12s; } .suggest__item:last-child { border-bottom: none; } .suggest__item:hover, .suggest__item.is-hl { background: var(--accent-soft); color: var(--accent); } .suggest__meta { color: var(--text-muted); font-size: 12px; font-weight: 400; margin-top: 2px; } .suggest__item:hover .suggest__meta, .suggest__item.is-hl .suggest__meta { color: var(--text-dim); } /* ============ ПОДВАЛ ============ */ .footer { border-top: 1px solid var(--border); background: var(--footer-bg); padding: 40px 0 24px; } .footer__grid { display: grid; gap: 28px; grid-template-columns: 1.6fr repeat(3, 1fr); } .footer__note { color: var(--text-muted); font-size: 13px; margin-top: 12px; max-width: 300px; } .footer__col { display: flex; flex-direction: column; gap: 8px; } .footer__col h4 { color: var(--text); margin-bottom: 4px; } .footer__col a { color: var(--text-muted); font-size: 14px; } .footer__col a:hover { color: var(--accent); } .footer__bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--text-muted); font-size: 13px; } /* ============ ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ ============ Блоки всплывают снизу, когда до них доходит экран. Прячем только при работающем скрипте: без JS контент обязан быть виден сразу, иначе страница окажется пустой. Задержку внутри группы ставит JS. */ html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease var(--reveal-delay, 0s), transform .6s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0s); } html.js .reveal.is-in { opacity: 1; transform: none; } /* ============ АДАПТИВ ============ */ @media (max-width: 980px) { .nav { display: none; } .burger { display: flex; } .place-hero { grid-template-columns: 1fr; } .booking-form { position: static; } .layout { grid-template-columns: 1fr; } .side { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; } .side__title { display: none; } .side__link { white-space: nowrap; } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 980px) { /* На узком экране сцена уходит в подложку: текст важнее картинки. */ .scene__fade { background: linear-gradient(180deg, rgba(16, 9, 7, .62) 0%, rgba(16, 9, 7, .46) 40%, rgba(28, 22, 20, .72) 80%, var(--bg-deep) 100%); } } @media (max-width: 640px) { .header__actions .btn--ghost, .header__actions .inline-form { display: none; } .hero { padding: 56px 0 44px; min-height: 520px; } .booking-assistant { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); } .booking-assistant__label { display: none; } .booking-assistant__launcher { width: 58px; padding: 8px; justify-content: center; } .booking-assistant__panel { right: 0; bottom: 70px; } .searchbox__row { flex-direction: column; } .bcard { grid-template-columns: 1fr; } .bcard__actions { flex-direction: row; flex-wrap: wrap; } .footer__grid { grid-template-columns: 1fr; } .section { padding: 40px 0; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } /* Без анимации «появление» превратилось бы в невидимый контент. */ html.js .reveal { opacity: 1; transform: none; } } /* ============ КАРТА ============ */ .map-page { position: relative; height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; } .map-controls { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 20px; z-index: 1000; } .map-controls__inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .map-controls h1 { font-size: 20px; margin: 0; white-space: nowrap; } .map-filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .map-filter { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; } .map-filter input[type="checkbox"] { accent-color: var(--accent); } .map-filter__icon { width: 14px; height: 14px; border-radius: 50%; display: inline-block; } .map-filter__icon--venue { background: #e74c3c; } .map-filter__icon--attraction { background: #3498db; } .map-select { min-height: 44px; max-width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-deep); color: var(--text); font-size: 13px; font-family: inherit; } .map-search { flex: 1; min-width: 180px; } .map-search input { width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-deep); color: var(--text); font-size: 14px; font-family: inherit; } .map-search input:focus { outline: 2px solid var(--accent); border-color: transparent; } .map-container { flex: 1; min-height: 0; z-index: 1; } .map-marker { background: none; border: none; } .map-marker--venue, .map-marker--attraction { filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); } @media (max-width: 640px) { .map-controls__inner { flex-direction: column; align-items: stretch; gap: 8px; } .map-controls h1 { font-size: 16px; } .map-filters { gap: 8px; } .map-search { min-width: 0; } }