/* Critical: inline first in ; frontend.min.css loads async. No @import. */ /* Base reset so layout is correct before frontend.min.css loads (CLS: no shift when full CSS loads) */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* ========================= Адаптация под все устройства: iPhone, Safari, Android, десктоп viewport-fit=cover в base.php, safe-area и 100dvh для полноэкранных панелей ========================= */ :root { --layout-gap: 24px; --layout-padding: 24px; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); --vh-dynamic: 100vh; --vh-fallback: 100dvh; } @supports (height: 100dvh) { :root { --vh-dynamic: 100dvh; } } /* Scroll model: one vertical scrollbar for the whole page (desktop and mobile). Prevents double scroll when both and would scroll. */ html { overflow-x: hidden; overflow-y: hidden; height: 100%; min-height: -webkit-fill-available; direction: ltr; } body { overflow-x: hidden; overflow-y: auto; height: 100%; min-height: 100%; min-height: -webkit-fill-available; direction: ltr; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; box-sizing: border-box; } /* Safari / iPhone: убрать серую подсветку тапа, оставить только для кнопок/ссылок при необходимости */ * { -webkit-tap-highlight-color: transparent; } button, a, [role="button"] { -webkit-tap-highlight-color: rgba(198, 9, 151, 0.2); } /* Avoid nested scroll: main wrappers don't create their own scroll on mobile */ @media (max-width: 1200px) { .main-content, .container { min-height: 0; overflow: visible; } } /* Шапка скроллится вместе со страницей, не липкая (перебиваем sticky из frontend.min.css). IMPORTANT: must NOT be position: static, otherwise z-index doesn't work and language dropdown can render under page content. */ /* Safari: изолируем blur в отдельный stacking context, логотип — без transform/filter и с height:auto */ .top-nav { position: relative !important; top: auto !important; z-index: 6000; isolation: isolate; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: linear-gradient(180deg, rgba(6, 13, 28, 0.98) 0%, rgba(6, 13, 28, 0.92) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .top-nav::before { content: ''; position: absolute; inset: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 0; pointer-events: none; transform: translateZ(0); will-change: transform; } .top-nav .nav-container { position: relative; z-index: 1; } .nav-container { position: relative; } @media (min-width: 769px) { /* Desktop CLS guard: stable nav height from first paint */ .top-nav .nav-container { min-height: 72px; display: flex; align-items: center; } } /* Логотип: без transform/filter, только ширина + height:auto — сохраняем aspect ratio SVG, меньше мыла в Safari */ .nav-logo, .nav-logo * { filter: none !important; transform: none !important; } .nav-logo .logo-link { text-decoration: none !important; } .nav-logo .logo-link::after { display: none !important; } .nav-logo .logo-image { display: block; width: 248px !important; height: auto !important; } @media (min-width: 1201px) { .nav-logo .logo-image { width: 248px !important; height: auto !important; } /* Desktop: anchor grid (logo/right), menu positioned between anchors */ .top-nav .nav-container { display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; position: relative !important; column-gap: 24px; } .top-nav .nav-container .nav-logo { grid-column: 1 !important; justify-self: start !important; position: relative !important; z-index: 2; margin: 0 !important; } .top-nav .nav-container .nav-menu { display: flex !important; visibility: visible !important; opacity: 1 !important; grid-column: 2 !important; justify-self: center !important; position: relative !important; left: auto !important; transform: none !important; margin: 0 auto !important; width: max-content !important; max-width: calc(100vw - 380px); justify-content: flex-start !important; overflow-x: auto !important; scrollbar-width: none; -ms-overflow-style: none; z-index: 1; } .top-nav .nav-container .nav-menu::-webkit-scrollbar { display: none; } .top-nav .nav-container .nav-right { display: flex !important; grid-column: 3 !important; justify-self: end !important; margin-left: 0 !important; position: relative !important; z-index: 2; } .top-nav .mobile-menu-toggle, .top-nav .account-mobile-menu-toggle, .top-nav .mobile-right-menu-toggle { display: none !important; } .top-nav .nav-menu-mobile { display: none !important; } } @media (max-width: 1200px) { .top-nav .mobile-menu-toggle { width: 40px !important; height: 40px !important; padding: 8px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; align-items: center !important; justify-content: center !important; } .top-nav .mobile-menu-toggle .menu-icon { display: block !important; } .top-nav .mobile-menu-toggle .menu-logo-icon { display: none !important; } .top-nav .mobile-menu-toggle .menu-icon path { stroke: #C60997 !important; filter: drop-shadow(0 0 6px rgba(198, 9, 151, 0.22)); } .main-content > header.header .eg-topfilters { display: none !important; } .top-nav .nav-container .nav-menu, .top-nav .nav-menu-mobile { display: none !important; visibility: hidden !important; } .top-nav .mobile-menu-toggle, .top-nav .account-mobile-menu-toggle, .top-nav .mobile-right-menu-toggle { display: flex !important; } .top-nav { padding-top: 6px; } .nav-logo picture { display: block !important; } .nav-logo .logo-text { display: none !important; } .nav-logo .logo-link { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 48px; } .nav-logo .logo-image { width: 132px !important; height: auto !important; display: block !important; } } @media (max-width: 768px) { .top-nav { position: relative !important; top: auto !important; z-index: 6000; } } /* Контейнер по высоте контента — футер сразу после, без лишнего скролла */ .container { padding: var(--layout-padding); box-sizing: border-box; min-height: auto !important; } @media (min-width: 769px) { /* Desktop CLS guard: keep top content offset stable */ .container { padding-top: var(--layout-padding); } } /* Language dropdown must stay above filter overlays */ .language-selector { z-index: 5000; } .lang-dropdown { z-index: 5001; } /* Fix: Windows/Chrome can "drop" text inside dropdowns when combined with backdrop-filter + transform transitions. Avoid transforms here. */ .lang-dropdown { transform: none !important; transition: opacity 0.2s ease, visibility 0.2s ease !important; will-change: opacity; backface-visibility: hidden; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } .lang-dropdown.active { transform: none !important; } @media (min-width: 769px) { .main-content { display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: var(--layout-gap); column-gap: var(--layout-gap); row-gap: var(--layout-gap); margin-top: 0; margin-bottom: 12px; align-items: start; width: 100%; max-width: none; min-width: 0; } .main-content > header.header { grid-column: 2; grid-row: 1; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--layout-gap); } .main-content > header.header > * { width: 100%; min-width: 0; box-sizing: border-box; } .main-content > .location-sidebar { grid-column: 1; grid-row: 1 / span 2; padding: 0; min-width: 0; } .main-content > .content-area { grid-column: 2; grid-row: 2; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: var(--layout-gap); } .main-content > .content-area > * { width: 100%; min-width: 0; box-sizing: border-box; } .location-sidebar { padding: 0; gap: var(--layout-gap); } /* Desktop: sidebar should scroll with content (no sticky/fixed feeling) */ .location-sidebar { position: relative !important; top: auto !important; } /* Desktop: avoid nested scrollbar in the left sidebar. Keep page scrolling on , sidebar stays sticky without its own scroll. */ .location-sidebar { height: auto !important; max-height: none !important; overflow: visible !important; overflow-y: visible !important; padding-bottom: 0; } } /* Desktop: prevent H1/SEO text "jump" on load (JS toggles should not change layout) */ @media (min-width: 769px) { .eg-h1text .eg-h1text__content { max-height: none !important; overflow: visible !important; } .eg-h1text .eg-h1text__toggle { display: none !important; } } /* Mobile: «читать дальше» — текст под H1 свёрнут, кнопка раскрывает (перебиваем ошибочные правила из min.css) */ @media (max-width: 768px) { .main-content > header.header .eg-h1text { --eg-h1text-max: 220px; padding-bottom: 8px; } .main-content > header.header .eg-h1text .eg-h1text__content { max-height: var(--eg-h1text-max) !important; overflow: hidden !important; position: relative; } .main-content > header.header .eg-h1text:not(.is-expanded) .eg-h1text__content::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, rgba(6, 13, 28, 0) 0%, rgba(6, 13, 28, 0.15) 40%, rgba(6, 13, 28, 0.5) 100%); pointer-events: none; } /* Mobile UX: при раскрытии текст растёт естественно (без внутреннего скролла) */ .main-content > header.header .eg-h1text.is-expanded .eg-h1text__content, .main-content > header.header .eg-h1text.eg-h1text--no-toggle .eg-h1text__content { max-height: none !important; overflow: visible !important; } .main-content > header.header .eg-h1text:not(.eg-h1text--no-toggle) .eg-h1text__toggle { display: inline-flex !important; align-items: center; margin-top: 14px; padding: 5px 0; border: none; border-radius: 0; background: transparent; color: rgba(255, 255, 255, 0.78); font-size: 12px; font-weight: 500; letter-spacing: 0.03em; text-decoration: underline; text-decoration-color: rgba(198, 9, 151, 0.4); text-underline-offset: 3px; cursor: pointer; transition: color 0.2s ease, text-decoration-color 0.2s ease; } .main-content > header.header .eg-h1text:not(.eg-h1text--no-toggle) .eg-h1text__toggle:hover { color: rgba(255, 255, 255, 0.95); text-decoration-color: rgba(198, 9, 151, 0.7); } .main-content > header.header .eg-h1text:not(.eg-h1text--no-toggle) .eg-h1text__toggle:focus-visible { outline: 2px solid rgba(198, 9, 151, 0.45); outline-offset: 2px; border-radius: 4px; } .main-content > header.header .eg-h1text.eg-h1text--no-toggle .eg-h1text__toggle { display: none !important; } .main-content > header.header .eg-h1text__toggle { position: relative; z-index: 4; } .main-content > header.header .header-copy-frame { min-height: 360px; height: auto; max-height: none; overflow: visible; } .eg-profiles-search.eg-profiles-search--always-open .eg-profiles-search__mobile-trigger { display: none !important; } .eg-profiles-search.eg-profiles-search--always-open .eg-profiles-search__controls { display: grid !important; visibility: visible !important; opacity: 1 !important; } } /* Mobile: container + header layout from first paint (CLS/LCP) — иначе при загрузке frontend.css padding/размеры меняются и контейнер сдвигается */ @media (max-width: 768px) { html { -webkit-text-size-adjust: 100%; } :root { --layout-padding-mobile: 16px; --layout-gap-mobile: 16px; } .container { padding: var(--layout-padding-mobile); padding-bottom: calc(var(--layout-padding-mobile) + env(safe-area-inset-bottom, 0px)); } .main-content > header.header { display: flex; flex-direction: column; gap: var(--layout-gap-mobile); margin-bottom: var(--layout-gap-mobile); } .header { margin-bottom: 0; } /* Mobile UX: поиск всегда открыт и в потоке */ .eg-profiles-search:not(.eg-profiles-search--expanded) .eg-profiles-search__controls { display: none !important; } .eg-profiles-search.eg-profiles-search--expanded .eg-profiles-search__controls { display: grid !important; visibility: visible !important; opacity: 1 !important; } .eg-profiles-search__input { font-size: 16px !important; } /* iOS: no focus zoom */ .eg-profiles-search { position: relative; min-height: 0; } .eg-profiles-search.eg-profiles-search--expanded .eg-profiles-search__frame { position: relative; top: auto; left: auto; right: auto; z-index: 2; box-shadow: 0 22px 70px rgba(0,0,0,0.5); } .eg-profiles-search.eg-profiles-search--typing .eg-profiles-search__frame, .eg-profiles-search:focus-within .eg-profiles-search__frame { position: relative !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; inset: auto !important; } .main-content > header.header .header-copy-frame { padding: 16px 18px; border-radius: 14px; /* Mobile: keep H1 glow visible from first paint */ background: radial-gradient(120% 120% at 18% 0%, rgba(198,9,151,0.14) 0%, rgba(124,58,237,0.08) 28%, rgba(7,7,21,1) 62%, rgba(7,7,21,1) 100%); box-shadow: 0 14px 42px rgba(0,0,0,0.44), 0 0 0 1px rgba(198,9,151,0.06) inset, inset 0 0 0 1px rgba(255,255,255,0.04); backdrop-filter: none; -webkit-backdrop-filter: none; } .main-content > header.header .header-copy-frame .header-title { font-size: 22px; line-height: 1.25; margin-bottom: 12px; } .main-content > header.header .header-copy-frame::before, .main-content > header.header .header-copy-frame::after { left: 12px; right: 12px; display: block; } .header-copy-divider { margin: 12px 0; } .header-description { font-size: 15px; line-height: 1.4; } } /* Верх блока фильтров в одну линию с верхом блока Location (без лишнего отступа) */ @media (min-width: 769px) { .main-content > header.header .eg-topfilters { margin: 0; } } /* Нижние блоки контента без разного margin — отступ только за счёт gap */ .main-content .content-area .seo-text2 { margin-top: 28px; margin-bottom: 0; } .main-content .content-area .profiles-section { margin-top: 0; } .leaflet-popup-content-wrapper { border-radius: 12px; padding: 0; overflow: hidden; } .leaflet-popup-content { margin: 0; min-width: 0; } /* Блок H1 — тот же стиль, что у блока фильтров и Location (цвет, тень, неон) */ .main-content > header.header .header-copy-frame { border-radius: 16px; margin-top: 0; width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.08); background: radial-gradient(120% 120% at 18% 0%, rgba(198,9,151,0.16) 0%, rgba(124,58,237,0.10) 28%, rgba(7,7,21,1) 62%, rgba(7,7,21,1) 100%); box-shadow: 0 22px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(198,9,151,0.08) inset, inset 0 0 0 1px rgba(255,255,255,0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .main-content > header.header .header-copy-frame::before, .main-content > header.header .header-copy-frame::after { content: ''; position: absolute; left: 16px; right: 16px; height: 2px; border-radius: 999px; pointer-events: none; z-index: 2; background: linear-gradient(90deg, rgba(198,9,151,0) 0%, rgba(198,9,151,0.55) 18%, rgba(124,58,237,0.38) 50%, rgba(198,9,151,0.55) 82%, rgba(198,9,151,0) 100%); box-shadow: 0 0 10px rgba(198,9,151,0.2), 0 0 14px rgba(124,58,237,0.12); opacity: 0.75; } .main-content > header.header .header-copy-frame::before { top: -1px; } .main-content > header.header .header-copy-frame::after { bottom: -1px; opacity: 0.55; } .main-content > header.header .header-copy-frame .header-title { font-size: 26px; } /* LCP: цвет текста в критическом CSS — первый экран виден до загрузки frontend.min.css */ .main-content > header.header .header-copy-frame .header-title, .main-content > header.header .header-copy-frame .header-description, .main-content > header.header .header-copy-frame .header-description p { color: rgba(255, 255, 255, 0.92); } /* Контент (H1, разделитель, описание) выше декоративных линий ::before/::after — текст не скрывается */ .main-content > header.header .header-copy-frame > * { position: relative; z-index: 3; } /* LCP: изоляция layout — блок можно отрисовать без перерасчёта остальной страницы */ .main-content > header.header .header-copy-frame { contain: layout; } /* Блок H2 (секция seo-text2) — тот же стиль, что H1 и остальные блоки */ .main-content .seo-text2 .header-copy-frame { border-radius: 16px; width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.08); background: radial-gradient(120% 120% at 18% 0%, rgba(198,9,151,0.16) 0%, rgba(124,58,237,0.10) 28%, rgba(7,7,21,1) 62%, rgba(7,7,21,1) 100%); box-shadow: 0 22px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(198,9,151,0.08) inset, inset 0 0 0 1px rgba(255,255,255,0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; } .main-content .seo-text2 .header-copy-frame::before, .main-content .seo-text2 .header-copy-frame::after { content: ''; position: absolute; left: 16px; right: 16px; height: 2px; border-radius: 999px; pointer-events: none; z-index: 2; background: linear-gradient(90deg, rgba(198,9,151,0) 0%, rgba(198,9,151,0.55) 18%, rgba(124,58,237,0.38) 50%, rgba(198,9,151,0.55) 82%, rgba(198,9,151,0) 100%); box-shadow: 0 0 10px rgba(198,9,151,0.2), 0 0 14px rgba(124,58,237,0.12); opacity: 0.75; } .main-content .seo-text2 .header-copy-frame::before { top: -1px; } .main-content .seo-text2 .header-copy-frame::after { bottom: -1px; opacity: 0.55; } /* ========================= EG Top Filters — современный блок: карточка + акцент + глубина Углы 16px — совпадают с .header-copy-frame для единой сетки. ========================= */ /* Цвет и оттенки как у блока Location в сайдбаре */ .eg-topfilters--panel .eg-topfilters__frame { position: relative; padding: 20px 18px; border-radius: 16px; width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.08); background: radial-gradient(120% 120% at 18% 0%, rgba(198,9,151,0.16) 0%, rgba(124,58,237,0.10) 28%, rgba(7,7,21,1) 62%, rgba(7,7,21,1) 100%); box-shadow: 0 22px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(198,9,151,0.08) inset, inset 0 0 0 1px rgba(255,255,255,0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: visible; } /* Ensure dropdown overlay is positioned relative to the component */ .eg-topfilters--panel { position: relative; } /* CLS: reserve space for card images before load (listing LCP) — перенесено из base.php inline */ .profile-image { aspect-ratio: 400 / 520; } /* Skip link (a11y) — перенесено из base.php inline, в critical чтобы работало до загрузки frontend.css */ .skip-to-main { position: absolute; left: -9999px; z-index: 9999; padding: 0.75rem 1rem; background: #1a1a1a; color: #fff; text-decoration: none; border-radius: 0 0 4px 0; font-weight: 600; } .skip-to-main:focus { left: 0; top: 0; outline: 2px solid #fff; outline-offset: 2px; }