/* ===================================================================== zvk-map.css — единый блок «Показать карту» (28.10.2026): главная, /kontakty, /master-class, /arenda. Карта Яндекса грузится только по клику (до клика сайт ничего не передаёт Яндексу) — assets/js/zvk-map.js. Разметка (одинаковая на всех страницах):
г. Майкоп, ул. Гагарина, 32 Офис 111 · зал для аренды — офис 109 Открыть в Яндекс Картах Карта загружается с сервиса «Яндекс Карты» только после нажатия — до этого сайт ничего не передаёт Яндексу.
Высота: занимает высоту родителя (если она задана), но не меньше 340 px. ===================================================================== */ .zvk-map { position: relative; overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; min-height: 340px; border-radius: 28px; border: 1px solid #e6eaf0; background-color: #f8f9fc; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #0a0a0a; --zvk-tex-mask: radial-gradient(ellipse 80% 80% at 50% 45%, #000 20%, transparent 80%); } .zvk-map::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(45% 55% at 50% 42%, rgba(0, 229, 164, .16), rgba(0, 229, 164, 0) 70%); } .zvk-map__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 24px; text-align: center; cursor: pointer; } .zvk-map__pin { position: relative; width: 56px; height: 56px; margin-bottom: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #0a0a0a; display: grid; place-items: center; box-shadow: 0 18px 30px -12px rgba(10, 10, 10, .5); } .zvk-map__pin::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #00E5A4; } .zvk-map__addr { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; } .zvk-map__sub { display: block; font-size: 14.5px; line-height: 1.45; color: #5a6a7a; } .zvk-map__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin: 12px 0 4px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer; background: #0a0a0a; color: #fff; font: 600 15px/1 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; transition: background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease; } .zvk-map__btn::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; } .zvk-map__ph:hover .zvk-map__btn, .zvk-map__btn:hover { background: #00E5A4; color: #0a0a0a; box-shadow: 0 12px 28px -12px rgba(0, 184, 132, .7); } .zvk-map__btn:active { transform: scale(.98); } .zvk-map__note { display: block; max-width: 420px; font-size: 12.5px; line-height: 1.5; color: #5a6a7a; } /* 28.10.2026: запасной путь — ссылка в Яндекс Карты (работает и без JS) и сообщение, если рамка не загрузилась */ .zvk-map__ext { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; padding: 4px 2px; font-size: 14px; font-weight: 600; color: #0a0a0a; text-decoration: underline; text-decoration-color: rgba(0, 184, 132, .55); text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: color .2s ease, text-decoration-color .2s ease; } .zvk-map__ext::after { content: "↗"; font-size: 13px; text-decoration: none; color: #00B884; } .zvk-map__ext:hover { color: #00B884; text-decoration-color: #00B884; } .zvk-map__ext:focus-visible, .zvk-map__btn:focus-visible { outline: 2px solid #00B884; outline-offset: 3px; } .zvk-map__err { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 24px; text-align: center; background: #f8f9fc; } .zvk-map__err b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; } .zvk-map__err span { font-size: 14.5px; line-height: 1.45; color: #5a6a7a; } .zvk-map__btn--ext { text-decoration: none; } /* подпись к метке (метку ставит виджет параметром pt) — плашка в левом верхнем углу карты */ .zvk-map__label { position: absolute; z-index: 1; left: 12px; top: 12px; max-width: calc(100% - 140px); pointer-events: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .96); color: #0a0a0a; font-size: 14px; font-weight: 600; line-height: 1.2; box-shadow: 0 6px 18px -6px rgba(10, 10, 10, .28), 0 0 0 1px rgba(10, 10, 10, .06); } .zvk-map__label::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: radial-gradient(circle at 50% 50%, #fff 0 2.5px, #1e98ff 3px); } .zvk-map.is-err .zvk-map__label { display: none; } @media (max-width: 480px) { .zvk-map__label { font-size: 13px; left: 10px; top: 10px; max-width: calc(100% - 120px); padding: 7px 12px 7px 9px; } } .zvk-map__btn--ext:hover { background: #00E5A4; color: #0a0a0a; } .zvk-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .zvk-map.is-on .zvk-map__ph { display: none; } .zvk-map.is-on::after, .zvk-map.is-on::before { display: none; } @media (max-width: 480px) { .zvk-map { border-radius: 22px; } .zvk-map__addr { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .zvk-map__btn { transition: none; } }