/* TLS Leon shared styles */ /* ---------- Тема: светлая/тёмная ---------- Значения живут в переменных, а не в классах Tailwind — поэтому переключение темы мгновенно перекрашивает всё, что уже использует bg-surface/text-primary/ border-stroke-subtle и т.п., без единой правки в HTML. tw-config.js ссылается на эти же переменные. Атрибут data-theme на всегда выставляется инлайн-скриптом в ДО первой отрисовки — либо из сохранённого выбора (localStorage), либо из system prefers-color-scheme, если пользователь ещё не выбирал сам. Поэтому здесь достаточно :root (светлая, дефолт разметки) и [data-theme="dark"] — никакой отдельной prefers-color-scheme-ветки в CSS не нужно, JS уже решил. */ :root { --surface: #faf9f6; --surface-container: #efeeeb; --surface-container-low: #f4f3f1; --surface-container-high: #e9e8e5; --surface-container-lowest: #ffffff; --surface-dim: #dbdad7; --surface-variant: #e3e2e0; --primary: #000000; --on-primary: #ffffff; --on-surface: #1a1c1a; --text-muted: #6B6B6B; --stroke-subtle: #E5E4E0; --outline: #747878; --error: #ba1a1a; --error-container: #ffdad6; --grid-line: rgba(229, 228, 224, 0.25); /* админские бейджи-«таблетки»: пастельный фон + тёмный текст в светлой теме */ --badge-warn-bg: #FFE8A3; --badge-warn-fg: #6B4E00; --badge-bad-bg: #FFD5D5; --badge-bad-fg: #8A1616; --badge-info-bg: #D6E8FF; --badge-info-fg: #0B4A8A; } :root[data-theme="dark"] { --surface: #121212; --surface-container: #1c1c1c; --surface-container-low: #181818; --surface-container-high: #262626; --surface-container-lowest: #202020; --surface-dim: #3a3a3a; --surface-variant: #2e2e2e; --primary: #f5f5f0; --on-primary: #121212; --on-surface: #f0efec; --text-muted: #9a9a9a; --stroke-subtle: #2f2f2f; --outline: #8a8a8a; --error: #ff6b6b; --error-container: #4a1414; --grid-line: rgba(255, 255, 255, 0.06); --badge-warn-bg: #4a3a10; --badge-warn-fg: #ffd76a; --badge-bad-bg: #4a1a1a; --badge-bad-fg: #ff9a9a; --badge-info-bg: #12314a; --badge-info-fg: #8ec4ff; } /* ---------- Motion tokens ---------- Одна шкала длительностей и кривых на весь сайт: интерфейс ощущается цельным, только когда всё ускоряется и замедляется одинаково. - exit: короткое и линейное — уходящее не должно задерживать пользователя; - enter: длиннее и с сильным замедлением — приходящее «оседает» на месте; - spring: лёгкий перелёт, для того, что должно ощущаться физически (модалки). */ :root { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-standard: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.42, .64, 1); --dur-instant: .1s; --dur-fast: .16s; --dur-base: .24s; --dur-slow: .4s; --dur-slower: .6s; } /* Tailwind Forms otherwise uses a white field with a light inherited label colour in the dark admin interface, making entered values unreadable. */ #user-edit-form input, #user-edit-form select, #user-edit-form textarea, #warning-form input, #admin-listing-form input, #admin-listing-form select, #admin-listing-form textarea { background-color: var(--surface-container-lowest); color: var(--on-surface); } /* Form controls appear across the catalogue, dashboard and admin pages. The Tailwind Forms reset otherwise keeps a white background with light text in dark mode, particularly for native select menus. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { background-color: var(--surface-container-lowest) !important; color: var(--on-surface) !important; } input::placeholder, textarea::placeholder { color: var(--text-muted) !important; opacity: 1; } select option { background-color: var(--surface-container-lowest); color: var(--on-surface); } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--stroke-subtle); border-radius: 10px; } body { background: var(--surface); color: var(--on-surface); } .ticket-tag { clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0% 50%); } .map-pin-pulse { animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 0.2; } 100% { transform: scale(0.8); opacity: 0.5; } } @keyframes subtle-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-entrance { animation: subtle-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .snap-interaction:active { transform: scale(0.98); transition: transform 0.1s; } /* Tilted photo stack (home hero) */ .tilted-stack { perspective: 1000px; } .stack-card { transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .stack-card:nth-child(1) { transform: rotate(-4deg) translateX(-20px); z-index: 3; } .stack-card:nth-child(2) { transform: rotate(2deg) translateX(0); z-index: 2; } .stack-card:nth-child(3) { transform: rotate(6deg) translateX(20px); z-index: 1; } .stack-card:hover { transform: rotate(0) scale(1.05) translateZ(50px) !important; z-index: 50 !important; } /* Overlays / modals. Подложка и само окно анимируются раздельно: фон просто проявляется, а окно приезжает пружиной. Закрытие вдвое быстрее открытия — уходящее не тормозит. */ .gsa-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(18, 18, 18, 0.55); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: gsa-overlay-in var(--dur-base) ease both; } .gsa-modal { background: var(--surface-container-lowest); border: 1px solid var(--stroke-subtle); max-width: 480px; width: 100%; animation: gsa-modal-in var(--dur-slow) var(--ease-spring) both; max-height: 90vh; overflow-y: auto; } .gsa-overlay.is-closing { animation: gsa-overlay-in var(--dur-fast) ease reverse both; } .gsa-overlay.is-closing .gsa-modal { animation: gsa-modal-out var(--dur-fast) ease both; } @keyframes gsa-overlay-in { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(8px); } } @keyframes gsa-modal-in { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes gsa-modal-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(.985); } } .gsa-currency-modal { max-width:620px; } .currency-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .currency-choice { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:11px; min-height:66px; padding:12px 14px; border:1px solid var(--stroke-subtle); background:var(--surface-container-lowest); text-align:left; transition:border-color .2s,background-color .2s,transform .2s; } .currency-choice:hover { border-color:var(--primary); background:var(--surface-container-low); transform:translateY(-2px); } .currency-choice-flag { font-size:22px; } .currency-choice strong { display:block; font-family:'JetBrains Mono',monospace; font-size:13px; } .currency-choice small { display:block; margin-top:3px; overflow:hidden; color:var(--text-muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .currency-choice-symbol { color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:14px; } @media (max-width:520px) { .currency-choice-grid { grid-template-columns:1fr; } .currency-choice { min-height:58px; } } /* Toast — намеренно всегда тёмный, как обычный снэкбар: поверх любой темы читается одинаково */ #gsa-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(140%) scale(.96); background: #121212; color: #fff; padding: 12px 24px; font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.04em; z-index: 200; opacity: 0; transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-base) ease; border-left: 3px solid #D4FF00; max-width: 90vw; box-shadow: 0 12px 32px rgba(0,0,0,.35); } #gsa-toast.show { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; } /* Уходит быстрее и без пружины: возврат вниз не должен привлекать внимание. */ #gsa-toast:not(.show) { transition-duration: var(--dur-base), var(--dur-fast); transition-timing-function: var(--ease-in-out), ease; } /* Outgoing messages keep the same high-contrast ink appearance in both themes. */ .msg-me { background: #121212; color: #f5f5f0; border-radius: 8px 8px 2px 8px; } .msg-them { background: var(--surface-container); color: var(--on-surface); border-radius: 8px 8px 8px 2px; } /* Mobile menu. Раскрытие через grid-template-rows: 0fr → 1fr — единственный способ плавно анимировать высоту содержимого, которая заранее неизвестна (max-height с запасом даёт рваный тайминг: пустой ход в конце открытия). Обязательное условие приёма — ровно один потомок с overflow:hidden. */ /* Всё, что ниже — только для узких экранов. Правила по #id перебивают утилиту md:hidden (специфичность идентификатора выше класса), поэтому раскладку меню приходится включать медиазапросом вручную — иначе меню для телефона проступило бы под шапкой на десктопе. */ #mobile-menu { display: none; } @media (max-width: 767px) { #mobile-menu { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; border-bottom: 1px solid transparent; transition: grid-template-rows var(--dur-slow) var(--ease-out), opacity var(--dur-fast) ease, border-color var(--dur-slow) ease, visibility var(--dur-slow); } #mobile-menu.open { grid-template-rows: 1fr; visibility: visible; opacity: 1; border-bottom-color: var(--stroke-subtle); } /* min-height:0 обязателен: без него автоминимум грид-элемента не даёт треку схлопнуться в ноль и закрытое меню сохраняет высоту содержимого. Собственных отступов у этого узла быть не должно по той же причине — они живут на .gsa-menu-pad внутри. */ #mobile-menu > .gsa-menu-inner { min-height: 0; overflow: hidden; } /* Пункты подхватываются каскадом — меню «разворачивается», а не появляется целиком. */ #mobile-menu .gsa-menu-pad > * { opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out); } #mobile-menu.open .gsa-menu-pad > * { opacity: 1; transform: none; } #mobile-menu.open .gsa-menu-pad > :nth-child(1) { transition-delay: .06s; } #mobile-menu.open .gsa-menu-pad > :nth-child(2) { transition-delay: .1s; } #mobile-menu.open .gsa-menu-pad > :nth-child(3) { transition-delay: .14s; } #mobile-menu.open .gsa-menu-pad > :nth-child(4) { transition-delay: .18s; } #mobile-menu.open .gsa-menu-pad > :nth-child(n+5) { transition-delay: .22s; } } /* Бургер: иконка поворачивается на смене состояния, а не подменяется рывком. */ #gsa-burger { transition: transform var(--dur-base) var(--ease-out); } #gsa-burger.is-open { transform: rotate(90deg); } /* Grid background for dashboard */ .grid-bg { background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; } input[type="date"] { font-family: 'JetBrains Mono', monospace; font-size: 13px; } .lang-btn { transition: all 0.15s; } .lang-btn:hover { border-color: var(--primary); background: #D4FF00; } /* Крутилка на аватаре во время загрузки */ @keyframes gsa-spin { to { transform: rotate(360deg); } } .gsa-spin { animation: gsa-spin .9s linear infinite; } /* Micro-interactions: keep motion short and respect accessibility settings. */ /* Карточка объекта: фото сверху, под ним панель — цена, заголовок, адрес и сетка характеристик. Раскладка повторяет карточку renthai. */ .property-card { position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--stroke-subtle); border-radius:6px; background:var(--surface-container-lowest); transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out),border-color var(--dur-base) ease; } .property-card:hover { transform: translateY(-5px); border-color:var(--outline); box-shadow: 0 18px 32px rgba(0,0,0,.12); } .property-card::after { content:""; position:absolute; inset:auto 0 0; height:3px; background:#d4ff00; transform:scaleX(0); transform-origin:left; transition:transform var(--dur-slow) var(--ease-out); } .property-card:hover::after { transform:scaleX(1); } .property-card-media { position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--surface-container); } .property-card-track { display:flex; height:100%; transition:transform var(--dur-slow) var(--ease-out); } .property-card-slide { flex:0 0 100%; height:100%; background-size:cover; background-position:center; transition:transform var(--dur-slower) var(--ease-out); } /* Стрелки — только на устройствах с курсором и только при наведении */ .property-card-nav { position:absolute; top:50%; z-index:2; display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin-top:-17px; border-radius:999px; border:0; background:rgba(255,255,255,.92); color:#1c1c1c; font-size:22px; line-height:1; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.22); opacity:0; transition:opacity var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring); } .property-card-nav:active { transform:scale(.92); transition-duration:var(--dur-instant); } .property-card-nav.prev { left:10px; } .property-card-nav.next { right:10px; } .property-card-nav:hover { background:#fff; } .property-card-dots { position:absolute; z-index:2; left:0; right:0; bottom:9px; display:flex; justify-content:center; gap:5px; pointer-events:none; } .property-card-dots span { width:5px; height:5px; border-radius:999px; background:rgba(255,255,255,.55); transition:background-color .2s, width .2s; } .property-card-dots span.is-on { width:14px; background:#fff; } /* Плашки поверх фотографии («новое», 3D, video, продажа). Палитра здесь намеренно не зависит от светлой/тёмной схемы: фон под плашкой — это произвольный снимок, а не поверхность темы. Пока они красились в bg-surface/bg-primary, светлая плашка пропадала на светлом кадре, а в тёмной теме ровно так же пропадала плашка video. Тёмное стекло + обводка + тень читаются на любом кадре, лайм оставлен тому, что должно привлекать внимание. */ .property-card-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:5px; background:rgba(16,16,16,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.16); box-shadow:0 2px 10px rgba(0,0,0,.3); color:#fff; font-family:'JetBrains Mono',monospace; font-size:10px; line-height:1.1; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; } .property-card-badge .material-symbols-outlined { font-size:13px; font-variation-settings:'wght' 500; } .property-card-badge-dot { width:6px; height:6px; border-radius:50%; background:#d4ff00; box-shadow:0 0 0 2px rgba(212,255,0,.22); } .property-card-badge.is-accent { background:#d4ff00; border-color:rgba(0,0,0,.14); color:#121212; box-shadow:0 2px 10px rgba(0,0,0,.24); } /* Продажа — плотная плашка без прозрачности: отличает режим сделки от пометок. */ .property-card-badge.is-sale { background:#121212; border-color:rgba(255,255,255,.2); } .property-card-body { position:relative; display:flex; flex:1; flex-direction:column; gap:6px; padding:14px 15px 0; } .property-card-kicker { margin-bottom:-2px; color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:9px; line-height:1.2; letter-spacing:.08em; text-transform:uppercase; } .property-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; } /* Цена — главное число карточки, ради него её и просматривают: размер задан заметно крупнее заголовка, иначе взгляд цепляется за название объекта. */ .property-card-price { font-family:'JetBrains Mono',monospace; font-size:27px; font-weight:600; line-height:1.05; letter-spacing:-.04em; color:var(--on-surface); white-space:nowrap; } .property-card-fav { font-size:21px; line-height:1; background:none; border:0; padding:0; cursor:pointer; transition:color var(--dur-fast) ease, transform var(--dur-slow) var(--ease-spring); } .property-card-fav:hover { color:var(--primary); } /* Сердце «щёлкает» в момент добавления — единственный отклик на действие без перезагрузки. */ .property-card-fav:active { transform:scale(.85); transition-duration:var(--dur-instant); } @keyframes gsa-fav-pop { 0% { transform:scale(1); } 38% { transform:scale(1.35); } 100% { transform:scale(1); } } .gsa-fav-pop { animation:gsa-fav-pop .42s var(--ease-out); } .property-subprice { min-height:16px; font-size:12px !important; line-height:1.35; margin-top:-1px; } .property-card-title { margin-top:2px; font-size:18px !important; line-height:1.2 !important; color:var(--primary); } .property-card-location { display:flex; align-items:center; gap:4px; font-size:12px !important; line-height:1.4; letter-spacing:.01em; } .property-card-location .material-symbols-outlined { font-size:15px; } /* Характеристики в две колонки: спальни · санузлы / площадь · этаж */ .property-card-spec-wrap { display:flex; align-items:stretch; margin:auto -15px 0; padding-top:9px; } .property-card-specs { display:grid; flex:1; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--stroke-subtle); background:var(--surface-container-low); } .property-card-spec { display:inline-flex; align-items:center; gap:7px; min-width:0; min-height:38px; padding:9px 11px; border-right:1px solid var(--stroke-subtle); border-bottom:1px solid var(--stroke-subtle); background:var(--surface-container-lowest); font-family:'JetBrains Mono',monospace; font-size:11px; line-height:1.2; color:var(--on-surface); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .property-card-spec .material-symbols-outlined { flex:0 0 auto; font-size:17px; color:var(--text-muted); font-variation-settings:'wght' 300; } /* Круглая кнопка в углу панели — как контактная кнопка на renthai */ .property-card-action { display:flex; align-items:center; justify-content:center; flex:0 0 48px; width:48px; min-height:38px; border-radius:0; border:0; border-top:1px solid var(--stroke-subtle); background:var(--surface-container-low); color:var(--primary); font-size:19px; cursor:pointer; box-shadow:none; transition:background-color .18s ease, color .18s ease; } .property-card-action:hover { background:var(--primary); color:var(--on-primary); } /* лайм задан в tailwind-конфиге, а не переменной — берём значение напрямую */ .property-card-action.is-on { background:#d4ff00; color:#000; border-color:transparent; } @media (max-width: 767px) { .property-card-price { font-size:28px; } .property-card-fav { font-size:24px; } .property-subprice { font-size:12px !important; color:var(--on-surface) !important; opacity:.72; } .property-card-title { font-size:19px !important; line-height:1.2 !important; } .property-card-location { font-size:13px !important; line-height:1.45; } .property-card-location .material-symbols-outlined { font-size:17px; } .property-card-spec { font-size:12.5px; } .property-card-spec .material-symbols-outlined { font-size:18px; } /* На тач-экранах стрелки не по наведению — показываем всегда */ .property-card-nav { opacity:1; } } #gsa-compare-bar { animation: gsa-slide-up .28s cubic-bezier(.2,.8,.2,1); } .gsa-skeleton { background: linear-gradient(90deg, var(--surface-container) 25%, var(--surface-container-high) 50%, var(--surface-container) 75%); background-size: 200% 100%; animation: gsa-shimmer 1.25s infinite; } @keyframes gsa-shimmer { to { background-position: -200% 0; } } @keyframes gsa-slide-up { from { opacity: 0; transform: translate(-50%, 18px); } to { opacity: 1; transform: translate(-50%, 0); } } .hero-type-caret::after { content: ""; display: inline-block; width: .075em; height: .88em; margin-left: .06em; vertical-align: -.06em; background: currentColor; animation: gsa-caret .72s steps(1) infinite; } @keyframes gsa-caret { 50% { opacity: 0; } } /* Page motion system. Elements stay visible until JS opts the page in, so the layout remains usable when scripts are blocked or motion is reduced. */ .gsa-motion-ready .gsa-reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .72s cubic-bezier(.16, 1, .3, 1), transform .72s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--gsa-reveal-delay, 0ms); will-change: opacity, transform; } .gsa-motion-ready .gsa-reveal.gsa-reveal-left { transform: translate3d(-28px, 0, 0); } .gsa-motion-ready .gsa-reveal.gsa-reveal-scale { transform: translate3d(0, 18px, 0) scale(.975); } .gsa-motion-ready .gsa-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } header { animation: gsa-header-in .65s cubic-bezier(.16, 1, .3, 1) both; } @keyframes gsa-header-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } /* A small lift gives controls tactile feedback without making the UI jump. */ .gsa-interactive { transition-property: transform, box-shadow, filter, color, background-color, border-color; transition-duration: .24s; transition-timing-function: cubic-bezier(.2, .8, .2, 1); } /* Compact amenity switches. The native checkbox remains accessible while the visible track provides a clearer on/off state than a small square tick. */ .gsa-switch { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; user-select: none; } .gsa-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .gsa-switch-track { position: relative; flex: 0 0 auto; width: 34px; height: 19px; border: 1px solid var(--outline); border-radius: 999px; background: var(--surface-container-high); transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease; } .gsa-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--text-muted); transition: transform .22s cubic-bezier(.2,.8,.2,1), background-color .22s ease; } .gsa-switch-input:checked + .gsa-switch-track { border-color: #b6db00; background: #d4ff00; box-shadow: 0 0 0 3px rgba(212,255,0,.12); } .gsa-switch-input:checked + .gsa-switch-track::after { transform: translateX(15px); background: #121212; } .gsa-switch-input:focus-visible + .gsa-switch-track { outline: 2px solid var(--primary); outline-offset: 3px; } .gsa-switch:hover .gsa-switch-track { border-color: var(--primary); } /* Discover filters: compact inline toolbar on desktop, bottom sheet on mobile. */ .discover-filter-fields { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px; align-items:center; } /* Парные фильтры «мин — макс» и подпись слева от них */ .filter-group { display:inline-flex; align-items:stretch; gap:6px; min-height:38px; border:1px solid var(--stroke-subtle); background:var(--surface-container-lowest); padding:0 10px; } .filter-group > * { display:flex; align-items:center; } .filter-group:focus-within { border-color:var(--primary); } .filter-group-label, .filter-group-dash { font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; } .filter-group select { border:0; background:transparent; padding:8px 18px 8px 0; color:inherit; cursor:pointer; } .filter-group select:focus { outline:none; box-shadow:none; } .filter-number-input { width:82px; min-width:0; border:0; background:transparent; padding:8px 2px; font-family:'JetBrains Mono',monospace; font-size:10px; color:inherit; } .filter-number-input:focus { outline:none; box-shadow:none; } .filter-number-input::-webkit-inner-spin-button, .filter-number-input::-webkit-outer-spin-button { appearance:none; margin:0; } .filter-number-input { appearance:textfield; -moz-appearance:textfield; } .filter-beds { display:inline-flex; align-self:stretch; border-left:1px solid var(--stroke-subtle); } .filter-beds button { display:flex; align-items:center; justify-content:center; padding:0 11px; border-left:1px solid var(--stroke-subtle); font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; white-space:nowrap; transition:background-color .15s, color .15s; } .filter-beds button:first-child { border-left:0; } .filter-beds button.active { background:var(--primary); color:var(--on-primary); } .discover-mobile-search { display:flex; gap:10px; align-items:stretch; } .discover-filter-trigger { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:112px; padding:0 14px; border:1px solid var(--primary); background:var(--primary); color:var(--on-primary); font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; } .discover-filter-count { min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:#d4ff00; color:#121212; line-height:19px; text-align:center; } .discover-filter-chips { display:flex; gap:7px; overflow-x:auto; padding:0 0 14px; scrollbar-width:none; } .discover-filter-chips::-webkit-scrollbar { display:none; } .discover-filter-chip { flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:6px 9px; border:1px solid var(--stroke-subtle); background:var(--surface-container-lowest); font-family:'JetBrains Mono',monospace; font-size:9px; text-transform:uppercase; } .discover-filter-backdrop { display:none; } .gsa-motion-ready .discover-results-section.gsa-reveal { transform:none; will-change:opacity; } @media (max-width: 767px) { .discover-filter-panel { position:fixed; z-index:160; left:0; right:0; bottom:0; max-height:min(88vh,760px); display:flex; flex-direction:column; background:var(--surface); border-top:1px solid var(--stroke-subtle); border-radius:20px 20px 0 0; box-shadow:0 -20px 60px rgba(0,0,0,.35); transform:translateY(105%); visibility:hidden; transition:transform .38s cubic-bezier(.16,1,.3,1), visibility .38s; } .discover-filter-panel.is-open { transform:translateY(0); visibility:visible; } .discover-filter-backdrop { position:fixed; z-index:150; inset:0; background:rgba(0,0,0,.56); backdrop-filter:blur(4px); opacity:0; transition:opacity .25s; } .discover-filter-backdrop.is-open { display:block; opacity:1; } .discover-filter-sheet-head { display:flex; align-items:center; justify-content:space-between; padding:18px 18px 14px; border-bottom:1px solid var(--stroke-subtle); } .discover-filter-sheet-head::before { content:""; position:absolute; top:7px; left:50%; width:38px; height:4px; transform:translateX(-50%); border-radius:4px; background:var(--stroke-subtle); } .discover-filter-fields { display:grid; grid-template-columns:1fr; gap:10px; padding:16px 18px 24px; margin:0; overflow-y:auto; } .discover-filter-fields select, .discover-filter-fields .gsa-switch { width:100%; min-height:48px; } .discover-filter-fields .filter-group { width:100%; display:flex; min-height:48px; } .discover-filter-fields .filter-group select { width:auto; flex:1; min-height:0; } .discover-filter-fields .filter-group .filter-group-label { flex:0 0 auto; } .discover-filter-fields .filter-beds { flex:1; margin-left:6px; } .discover-filter-fields .filter-beds button { flex:1; padding:0 4px; } .discover-filter-fields #f-reset { display:none; } .discover-filter-fields #f-save-search { width:100%; min-height:46px; } .discover-filter-sheet-actions { display:flex; gap:10px; padding:12px 18px max(14px,env(safe-area-inset-bottom)); border-top:1px solid var(--stroke-subtle); background:var(--surface); } body.discover-sheet-open { overflow:hidden; } } @media (hover: hover) { .gsa-interactive:hover { transform: translateY(-2px); } .property-card:hover { transform: translateY(-7px) scale(1.008); box-shadow: 0 24px 48px rgba(0,0,0,.14); } /* Кадр наезжает медленнее, чем поднимается карточка: возникает ощущение глубины. */ .property-card:hover .property-card-slide { transform: scale(1.055); } .property-card:hover .property-card-nav, .property-card-nav:focus-visible { opacity: 1; } .property-card-nav:hover { transform: scale(1.1); } .property-card-fav:hover { transform: scale(1.15); } .stack-card:nth-child(1) { animation: gsa-stack-float-a 7s ease-in-out infinite; } .stack-card:nth-child(2) { animation: gsa-stack-float-b 8s ease-in-out -2s infinite; } .stack-card:nth-child(3) { animation: gsa-stack-float-c 7.5s ease-in-out -4s infinite; } .stack-card:hover { animation-play-state: paused; } } @keyframes gsa-stack-float-a { 0%,100% { transform: rotate(-4deg) translate(-20px, 0); } 50% { transform: rotate(-3deg) translate(-20px, -8px); } } @keyframes gsa-stack-float-b { 0%,100% { transform: rotate(2deg) translate(0, 0); } 50% { transform: rotate(1deg) translate(0, -10px); } } @keyframes gsa-stack-float-c { 0%,100% { transform: rotate(6deg) translate(20px, 0); } 50% { transform: rotate(5deg) translate(20px, -7px); } } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } .gsa-motion-ready .gsa-reveal { opacity:1!important; transform:none!important; } } /* Listing details: scan-friendly feature matrix in the TLS Leon visual language. */ .listing-details { border:1px solid var(--stroke-subtle); background:var(--surface-container-lowest); } .listing-rent-summary { padding:27px 30px 0; } .listing-rent-price { padding-bottom:24px; border-bottom:1px solid var(--stroke-subtle); } .listing-rent-price > span { display:block; margin-bottom:5px; color:var(--text-muted); font-size:14px; } .listing-rent-price strong { display:flex; align-items:baseline; gap:5px; font-family:Inter,sans-serif; font-size:30px; line-height:1; letter-spacing:-.035em; } .listing-rent-price small { color:var(--text-muted); font-family:Inter,sans-serif; font-size:15px; font-weight:500; letter-spacing:0; } .listing-rent-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:24px 0 27px; } .listing-rent-stat { display:flex; align-items:center; gap:12px; min-width:0; padding-right:12px; } .listing-rent-stat > .material-symbols-outlined { display:flex; flex:0 0 auto; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:var(--surface-container-low); color:var(--primary); font-size:23px; font-variation-settings:'wght' 300; } .listing-rent-stat div > span { display:block; margin-bottom:3px; color:var(--text-muted); font-size:12px; } .listing-rent-stat strong { display:block; font-size:14px; line-height:1.1; } .listing-detail-section { padding:28px 30px 30px; border-top:1px solid var(--stroke-subtle); } .listing-detail-section:first-child { border-top:0; } .listing-section-heading { display:flex; align-items:center; gap:13px; margin-bottom:24px; } .listing-section-heading h2 { font-family:Inter,sans-serif; font-size:22px; line-height:1.1; font-weight:700; letter-spacing:-.025em; } .listing-section-index { display:inline-flex; align-items:center; justify-content:center; width:30px; height:22px; background:#d4ff00; color:#121212; font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:600; clip-path:polygon(0 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,0 100%); } .listing-feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); border:1px solid var(--stroke-subtle); border-right:0; border-bottom:0; } .listing-feature-item { display:flex; align-items:center; gap:12px; min-height:66px; padding:14px 16px; border-right:1px solid var(--stroke-subtle); border-bottom:1px solid var(--stroke-subtle); background:var(--surface-container-lowest); font-size:14px; line-height:1.25; } .listing-feature-icon { color:var(--primary); font-size:23px; font-variation-settings:'wght' 300; } .listing-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:44px; } .listing-fact { display:grid; grid-template-columns:minmax(105px,.8fr) 1.2fr; gap:14px; align-items:baseline; min-height:48px; padding:13px 0; border-top:1px solid var(--stroke-subtle); } .listing-fact dt { color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.04em; } .listing-fact dd { font-size:14px; font-weight:600; overflow-wrap:anywhere; } @media (max-width:900px) { .listing-rent-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 10px; } .listing-feature-grid { grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); } .listing-facts { grid-template-columns:1fr; column-gap:0; } } @media (max-width:520px) { .listing-rent-summary { padding:22px 18px 0; } .listing-rent-stats { grid-template-columns:1fr 1fr; } .listing-rent-stat { gap:9px; padding-right:4px; } .listing-rent-stat > .material-symbols-outlined { width:40px; height:40px; font-size:20px; } .listing-detail-section { padding:22px 18px 24px; } .listing-feature-grid { grid-template-columns:1fr; } .listing-feature-item { min-height:58px; } .listing-fact { grid-template-columns:minmax(90px,.75fr) 1.25fr; } } /* Comparison matrix */ body[data-page="compare"] #gsa-compare-bar, body[data-page="terms"] #gsa-compare-bar { display:none; } .compare-mobile-list { display:none; } .compare-scroll { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-color:var(--outline) transparent; } .compare-grid { display:grid; grid-template-columns:var(--compare-cols); min-width:max-content; } .compare-corner, .compare-property { background:var(--surface-container-low); } .compare-property { padding:16px; min-width:0; } .compare-photo-link { display:block; } .compare-photo { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:16/10; object-fit:cover; margin-bottom:14px; background:var(--surface-container-high); } /* Legal documents */ .terms-copy section { scroll-margin-top:100px; } .terms-copy h2 { margin-bottom:18px; font-family:Inter,sans-serif; font-size:26px; line-height:1.15; font-weight:700; letter-spacing:-.025em; } .terms-copy p, .terms-copy li { font-size:16px; line-height:1.75; } .terms-copy p + p { margin-top:14px; } .terms-copy ul { display:grid; gap:10px; padding-left:22px; list-style:disc; } .terms-copy a { color:var(--primary); text-decoration:underline; text-underline-offset:3px; } .terms-note { margin-top:20px; padding:16px 18px; border-left:3px solid #d4ff00; background:var(--surface-container-low); font-size:14px; line-height:1.6; } @media (max-width:767px) { .terms-copy { gap:42px; } .terms-copy h2 { font-size:22px; } .terms-copy p,.terms-copy li { font-size:15px; line-height:1.7; } } /* Dashboard navigation: desktop toolbar, mobile sticky scroll rail. */ .dash-tabs-shell { position:relative; } .dash-tabs-rail { display:flex; gap:8px; overflow-x:auto; padding:0 0 8px; scrollbar-width:none; } .dash-tabs-rail::-webkit-scrollbar { display:none; } .dash-tab { display:inline-flex; flex:0 0 auto; align-items:center; gap:8px; min-height:40px; padding:8px 14px; border:1px solid var(--stroke-subtle); background:var(--surface-container-lowest); font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.035em; white-space:nowrap; transition:color .2s,background-color .2s,border-color .2s,transform .2s; } .dash-tab:hover { border-color:var(--primary); } .dash-tab.is-active { border-color:#d4ff00; background:#d4ff00; color:#121212; } .dash-tab-icon { font-size:18px; } .dash-tab-count { min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--surface-container-high); color:var(--on-surface); font-size:9px; line-height:19px; text-align:center; } .dash-tab.is-active .dash-tab-count { background:#121212; color:#d4ff00; } @media (max-width:767px) { .dash-tabs-shell { position:sticky; z-index:40; top:64px; margin-top:-8px; padding:10px 0 2px; background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(14px); border-top:1px solid var(--stroke-subtle); border-bottom:1px solid var(--stroke-subtle); } .dash-tabs-shell::after { content:""; position:absolute; z-index:3; top:0; right:0; bottom:0; width:34px; pointer-events:none; background:linear-gradient(90deg,transparent,var(--surface)); } .dash-tabs-rail { gap:9px; padding:0 38px 8px var(--margin-mobile,16px); scroll-snap-type:x proximity; overscroll-behavior-x:contain; } .dash-tab { min-height:46px; padding:9px 14px; scroll-snap-align:center; font-size:11px; border-radius:999px; } .dash-tab-icon { font-size:20px; } } .compare-photo-empty { color:var(--text-muted); } .compare-photo-empty .material-symbols-outlined { font-size:34px; } .compare-property-title { display:block; font-family:Inter,sans-serif; font-size:18px; font-weight:700; line-height:1.2; overflow-wrap:anywhere; } .compare-property-title:hover { text-decoration:underline; } .compare-remove { margin-top:9px; font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; color:var(--text-muted); } .compare-remove:hover { color:var(--error); } .compare-label, .compare-value { padding:15px 16px; border-top:1px solid var(--stroke-subtle); } .compare-label { position:sticky; left:0; z-index:2; background:var(--surface); font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; color:var(--text-muted); box-shadow:1px 0 0 var(--stroke-subtle); } .compare-corner { top:0; z-index:3; border-top:0; } .compare-value { font-size:15px; min-width:0; overflow-wrap:anywhere; } @media (max-width:767px) { .compare-page { padding-left:16px; padding-right:16px; padding-bottom:40px; } .compare-page h1 { max-width:190px; font-size:29px; line-height:1.08; } .compare-scroll { display:none; } .compare-mobile-list { display:grid; gap:18px; } .compare-mobile-card { overflow:hidden; border:1px solid var(--stroke-subtle); background:var(--surface-container-lowest); box-shadow:0 12px 32px rgba(0,0,0,.1); } .compare-mobile-card .compare-photo { aspect-ratio:16/10; margin:0; } .compare-mobile-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px; } .compare-mobile-card .compare-property-title { font-size:20px; min-height:0; } .compare-mobile-location { margin-top:5px; color:var(--text-muted); font-size:12px; } .compare-mobile-price { flex:0 0 auto; padding:8px 11px 8px 14px; background:var(--primary); color:var(--on-primary); clip-path:polygon(9px 0,100% 0,100% 100%,9px 100%,0 50%); font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:600; white-space:nowrap; } .compare-mobile-specs { border-top:1px solid var(--stroke-subtle); } .compare-mobile-spec { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:48px; padding:11px 16px; border-bottom:1px solid var(--stroke-subtle); } .compare-mobile-spec-label { color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.04em; } .compare-mobile-spec strong { text-align:right; font-size:14px; font-weight:600; } .compare-mobile-spec.is-different { background:rgba(212,255,0,.07); } .compare-mobile-spec.is-different strong { color:#b6db00; } :root:not([data-theme="dark"]) .compare-mobile-spec.is-different strong { color:#647800; } .compare-mobile-remove { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:13px 16px; color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:9px; text-transform:uppercase; } .compare-mobile-remove:hover { color:var(--error); } } /* ========================================================================== Переходы между страницами и общая шлифовка движения ========================================================================== */ /* Сайт многостраничный: каждый клик по ссылке — полная перезагрузка с белой вспышкой между документами. Cross-document view transitions убирают именно её: браузер сам снимает кадр уходящей страницы и сводит его с приходящей. Работает только при одинаковом правиле в обоих документах — оно здесь одно на весь сайт, потому что site.css подключён везде. Где API не поддержан, навигация остаётся прежней, ничего не ломается. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: gsa-page-out .18s var(--ease-in-out) both; } ::view-transition-new(root) { animation: gsa-page-in .34s var(--ease-out) both; } @keyframes gsa-page-out { to { opacity: 0; transform: translateY(-8px); } } @keyframes gsa-page-in { from { opacity: 0; transform: translateY(12px); } } /* Шапка одинакова на всех страницах — ей незачем участвовать в кроссфейде: собственная группа оставляет её неподвижной, пока содержимое сменяется. */ #app-header nav { view-transition-name: gsa-header; } ::view-transition-group(gsa-header) { animation-duration: .3s; } ::view-transition-old(gsa-header), ::view-transition-new(gsa-header) { animation: none; height: 100%; } /* Смена темы: круг из кнопки-переключателя вместо мгновенной перекраски. Класс вешает JS только на время перехода, иначе правила ниже перебили бы кроссфейд обычной навигации. */ .gsa-theme-vt::view-transition-old(root), .gsa-theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; } .gsa-theme-vt::view-transition-old(root) { z-index: 0; } .gsa-theme-vt::view-transition-new(root) { z-index: 1; } /* Шапка не должна вырезаться из круга отдельной группой. */ .gsa-theme-vt #app-header nav { view-transition-name: none; } /* Якорные ссылки (#messages в кабинете) доезжают плавно, а не телепортируются. scroll-padding — поправка на фиксированную шапку в 64px, иначе заголовок секции оказывается под ней. */ html { scroll-behavior: smooth; scroll-padding-top: 88px; } /* Тактильный отклик на нажатие. Отдельно от :hover — нужен и на тач-экранах, где наведения нет вовсе, а подтверждение нажатия важнее всего. */ .gsa-interactive:active { transform: translateY(0) scale(.972); transition-duration: var(--dur-instant); } /* Единая рамка фокуса вместо браузерной: одинаково читается в обеих темах. Скругление не задаём — обводка и так повторяет собственный радиус элемента, а явное значение поменяло бы форму скруглённых карточек в момент фокуса. */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Картинки проявляются вместо того, чтобы возникать построчно по мере загрузки. Класс ставит JS и снимает по событию load — до этого место уже занято разметкой, поэтому ничего не прыгает. */ .gsa-motion-ready img.gsa-img-fade { opacity: 0; transition: opacity var(--dur-slow) ease; } .gsa-motion-ready img.gsa-img-fade.is-loaded { opacity: 1; } /* Шапка «отрывается» от страницы при прокрутке — тень появляется только тогда, когда под шапкой действительно есть уехавшее содержимое. */ #app-header nav { transition: box-shadow var(--dur-slow) ease, background-color var(--dur-slow) ease; } #app-header nav.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.1); } :root[data-theme="dark"] #app-header nav.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.45); } /* Скелетоны и итоговое содержимое: мерцание помягче, чем линейный градиент. */ .gsa-skeleton { animation-timing-function: var(--ease-in-out); } /* Селекты и поля ввода в шапке/фильтрах — плавная граница на фокусе. */ select, input, textarea { transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease; } /* Перекраска при смене темы там, где view transitions недоступны: без этого десятки поверхностей меняют цвет одномоментно и это выглядит как сбой. Класс живёт ~400мс — ровно на время переключения. */ .gsa-theme-shift, .gsa-theme-shift *, .gsa-theme-shift *::before, .gsa-theme-shift *::after { transition-property: background-color, border-color, color, fill, stroke, box-shadow !important; transition-duration: var(--dur-slow) !important; transition-timing-function: var(--ease-in-out) !important; transition-delay: 0s !important; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } html { scroll-behavior: auto; } .gsa-interactive:active { transform: none; } .gsa-motion-ready img.gsa-img-fade { opacity: 1; } #mobile-menu { transition: none; } #mobile-menu .gsa-menu-pad > * { opacity: 1; transform: none; } } /* ========================================================================== Главная: навигатор по направлениям ========================================================================== */ /* Аналог «популярных регионов» на сайтах-агрегаторах: город — крупной плиткой с фотографией, районы под ним отдельными ссылками. Город и районы обязаны быть разными ссылками, поэтому карточка — не , а контейнер: вложенная ссылка внутри ссылки невалидна и ломает клавиатурную навигацию. */ .dest-card { display:flex; flex-direction:column; border:1px solid var(--stroke-subtle); background:var(--surface-container-lowest); border-radius:6px; overflow:hidden; transition:border-color var(--dur-base) ease, box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .dest-card:hover { border-color:var(--outline); box-shadow:0 18px 32px rgba(0,0,0,.12); } .dest-card-media { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--surface-container); } .dest-card-photo { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform var(--dur-slower) var(--ease-out); } .dest-card:hover .dest-card-photo { transform:scale(1.06); } /* Затемнение снизу: подпись лежит поверх произвольного снимка и должна читаться на светлом кадре так же, как на тёмном. */ .dest-card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,8,.82) 0%, rgba(8,8,8,.34) 42%, rgba(8,8,8,0) 72%); } .dest-card-label { position:absolute; z-index:1; left:18px; right:18px; bottom:15px; color:#fff; } .dest-card-country { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; opacity:.78; } .dest-card-name { margin-top:3px; font-family:Inter,sans-serif; font-size:27px; line-height:1.05; font-weight:700; letter-spacing:-.03em; } .dest-card-count { margin-top:5px; display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; } .dest-card-count::before { content:""; width:6px; height:6px; border-radius:50%; background:#d4ff00; } .dest-card-districts { display:flex; flex-wrap:wrap; gap:7px; padding:15px; } .dest-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid var(--stroke-subtle); border-radius:999px; background:var(--surface-container-low); color:var(--on-surface); font-family:'JetBrains Mono',monospace; font-size:11px; white-space:nowrap; transition:border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease; } .dest-chip b { color:var(--text-muted); font-weight:400; transition:color var(--dur-fast) ease; } .dest-chip:hover { border-color:var(--primary); background:var(--primary); color:var(--on-primary); } .dest-chip:hover b { color:var(--on-primary); opacity:.7; } .dest-card-more { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 15px; border-top:1px solid var(--stroke-subtle); background:var(--surface-container-low); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease; } .dest-card-more:hover { background:var(--primary); color:var(--on-primary); } .dest-card-more .material-symbols-outlined { font-size:17px; transition:transform var(--dur-base) var(--ease-out); } .dest-card-more:hover .material-symbols-outlined { transform:translateX(4px); } /* ========================================================================== Главная: доверие, отзывы и команда Содержимое — плейсхолдеры. Полоса-предупреждение существует специально, чтобы блок нельзя было случайно выкатить незаполненным: она исчезнет только вместе с атрибутом data-gsa-draft, который снимают вручную после замены. ========================================================================== */ [data-gsa-draft] { position:relative; } [data-gsa-draft]::before { content:"DRAFT · " attr(data-gsa-draft); position:absolute; z-index:3; top:-11px; left:0; padding:3px 9px; border-radius:3px; background:#ffb020; color:#1a1300; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.09em; text-transform:uppercase; } [data-gsa-draft] { outline:1px dashed rgba(255,176,32,.5); outline-offset:12px; } .stat-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); border:1px solid var(--stroke-subtle); background:var(--surface-container-lowest); } .stat-cell { padding:26px 22px; border-right:1px solid var(--stroke-subtle); border-bottom:1px solid var(--stroke-subtle); } .stat-value { font-family:'JetBrains Mono',monospace; font-size:34px; font-weight:600; line-height:1; letter-spacing:-.04em; } .stat-label { margin-top:9px; color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; } .review-card { display:flex; flex-direction:column; gap:16px; height:100%; padding:24px; border:1px solid var(--stroke-subtle); background:var(--surface-container-lowest); border-radius:6px; } .review-quote { flex:1; font-size:16px; line-height:1.55; } .review-stars { color:#d4ff00; font-size:15px; letter-spacing:.14em; } :root:not([data-theme="dark"]) .review-stars { color:#8a9c00; } .review-author { display:flex; align-items:center; gap:11px; } .review-avatar { width:38px; height:38px; border-radius:50%; flex:0 0 auto; background:var(--surface-container-high); } .review-name { font-size:14px; font-weight:600; } .review-meta { margin-top:2px; color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:10px; } .trust-card { min-height:230px; padding:28px; border:1px solid var(--stroke-subtle); background:var(--surface-container-lowest); display:flex; flex-direction:column; } .trust-card-number, .team-index { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-muted); letter-spacing:.08em; } .trust-card h3 { margin-top:auto; font-size:22px; font-weight:600; } .trust-card p { margin-top:10px; color:var(--text-muted); line-height:1.55; } .reviews-empty { display:flex; align-items:center; gap:14px; min-height:110px; padding:24px; border:1px solid var(--stroke-subtle); background:var(--surface-container-lowest); color:var(--text-muted); } .reviews-empty .material-symbols-outlined { color:var(--primary); font-size:30px; } .team-card { min-height:150px; padding:26px; text-align:left; border:1px solid var(--stroke-subtle); background:var(--surface-container-lowest); display:flex; flex-direction:column; } .team-photo { aspect-ratio:3/4; border:1px solid var(--stroke-subtle); border-radius:6px; background:var(--surface-container); margin-bottom:12px; } .team-name { margin-top:auto; font-size:19px; line-height:1.3; font-weight:600; } .team-role { margin-top:10px; color:var(--text-muted); font-family:'Inter',sans-serif; font-size:14px; line-height:1.5; } /* ========================================================================== Ритм главной страницы ========================================================================== Одинаковый отступ между всеми секциями и один кегль заголовка на всю страницу читаются как список, а не как композиция: глазу не за что зацепиться. Лечится группировкой — внутри смысловой «главы» разделы стоят плотно, между главами пауза заметно больше, — и сменой плотности: одна секция получает подложку во всю ширину окна и разрывает вертикальную ленту. */ .section-gap-tight { margin-top: 40px; } .section-gap { margin-top: 64px; } .section-gap-lead { margin-top: 96px; } @media (min-width: 768px) { .section-gap-tight { margin-top: 56px; } .section-gap { margin-top: 112px; } .section-gap-lead { margin-top: 168px; } } /* Подложка выходит за пределы центрированного контейнера, а содержимое остаётся в сетке: за край уезжает только фон, поэтому раскладка не может поехать. Отрицательный z-index не используем — под ним подложка провалилась бы за фон секции, если у той появится своя (а у .gsa-reveal он появляется: transform создаёт контекст наложения). Вместо этого поднимаем содержимое, сделав прямых потомков позиционированными: в DOM они идут после ::before. */ .section-band { position: relative; padding-top: 52px; padding-bottom: 52px; } .section-band > * { position: relative; } .section-band::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background: var(--surface-container-low); border-top: 1px solid var(--stroke-subtle); border-bottom: 1px solid var(--stroke-subtle); } @media (min-width: 768px) { .section-band { padding-top: 88px; padding-bottom: 88px; } } /* Заголовок раздела, открывающего главу: крупнее обычного h2 (32px), чтобы между «главным» и «вспомогательным» разделом была видимая разница. */ .section-title-lead { font-family: Inter, sans-serif; font-size: 40px; line-height: 1.06; letter-spacing: -.035em; font-weight: 700; } @media (min-width: 768px) { .section-title-lead { font-size: 54px; } }