/* ========================================================================== «Береста» — дизайн-система Bereza Exchange · v0.1 (прототип) -------------------------------------------------------------------------- Принципы бренда (из гайда заказчика): · 70% белого / 30% фирменного лилового #BDB4FF — цвет ценен своей редкостью · Liquid Glass в оттенке #BDB4FF — плашки под текст и объекты в сцене · Органика: берёза (кора, ветки, листья, серёжки) — как мох у Verdro · Архетипы Правитель + Творец: структура и авторитет + эстетика · Скрытая анимация мелких деталей: с первого взгляда — статика Моушен: правила Emil Kowalski (ease-out, < 300 мс для UI, только transform/opacity) ========================================================================== */ /* Lufga — только для английского «bereza exchange» в hero. Подмножество латиницы, ~10 КБ. Для продакшена нужна веб-лицензия Lufga (Adam Ladd). */ @font-face { font-family: 'Lufga'; font-style: normal; font-weight: 400; font-display: swap; src: local('Lufga Regular'), local('Lufga-Regular'), url('../fonts/lufga-regular-latin.woff2') format('woff2'); } /* Manrope — свой хостинг (OFL): без запросов к Google Fonts, текст рисуется сразу */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../fonts/manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- 1. Токены ---------- */ :root { /* поверхности */ --paper: #ffffff; --mist: #f7f7f9; --cloud: #f1f0f5; --cloud-2: #e7e5ee; --line: rgba(21, 18, 28, 0.08); --line-strong: rgba(21, 18, 28, 0.14); /* текст */ --ink: #15121c; --ink-2: #2a2633; --text-2: #5e5c6b; /* 6.5:1 на белом */ --text-3: #8b8a96; /* только крупный текст */ --stone: #a9a7b4; /* «серое продолжение» заголовка, как у Verdro */ /* фирменный лиловый */ --lilac-50: #f6f4ff; --lilac-100: #eeebff; --lilac-200: #dcd6ff; --lilac: #bdb4ff; /* фирменный, только заливки/стекло */ --lilac-400: #a79cf7; --lilac-ink: #7a6ee0; /* акцент в крупных заголовках, 4.1:1 */ --lilac-deep: #6457cc; /* акцентный мелкий текст, 5.6:1 */ /* органика */ --leaf: #86b04c; --leaf-ink: #4f7a2a; --bark: #24202a; --cream: #f4f1ea; --live: #4caf50; /* типографика */ --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-latin: 'Lufga', 'Manrope', ui-sans-serif, system-ui, sans-serif; /* только слово-знак в hero */ --fs-display: clamp(2.875rem, 1.55rem + 5.6vw, 6.25rem); --fs-h2: clamp(2.125rem, 1.45rem + 3.2vw, 4.25rem); --fs-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem); --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.78125rem; --fs-mega: clamp(7rem, 3.2rem + 17vw, 17rem); /* геометрия */ --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px; --gutter: 16px; --container: 1240px; --section-y: clamp(88px, 11vw, 168px); /* тени с лиловым подтоном */ --sh-1: 0 1px 2px rgba(21, 18, 28, 0.04), 0 1px 1px rgba(21, 18, 28, 0.03); --sh-2: 0 1px 2px rgba(21, 18, 28, 0.04), 0 14px 34px -16px rgba(64, 48, 150, 0.22); --sh-3: 0 2px 4px rgba(21, 18, 28, 0.04), 0 34px 70px -28px rgba(64, 48, 150, 0.32); /* моушен (Emil Kowalski) */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --d-press: 140ms; --d-fast: 180ms; --d-base: 240ms; --d-drawer: 480ms; --d-reveal: 900ms; } @media (min-width: 768px) { :root { --gutter: 28px; } } @media (min-width: 1100px) { :root { --gutter: 40px; } } /* ---------- 2. База ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.55; letter-spacing: -0.005em; font-feature-settings: 'ss01' on, 'cv11' on; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } img, video { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input { font: inherit; color: inherit; } ::selection { background: var(--lilac-200); color: var(--ink); } :focus-visible { outline: 2px solid var(--lilac-ink); outline-offset: 3px; border-radius: 8px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .num { font-variant-numeric: tabular-nums; } .lufga { font-family: var(--font-latin); letter-spacing: -0.02em; } /* ---------- 3. Типографика ---------- */ .display, .h2, .h3 { margin: 0; font-weight: 500; color: var(--ink); text-wrap: balance; } .display { font-size: var(--fs-display); line-height: 0.95; letter-spacing: -0.048em; } .h2 { font-size: var(--fs-h2); line-height: 0.98; letter-spacing: -0.042em; } .h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; } .lead { margin: 0; font-size: var(--fs-lead); line-height: 1.45; color: var(--text-2); letter-spacing: -0.012em; text-wrap: pretty; } .body { margin: 0; color: var(--text-2); text-wrap: pretty; } .small { font-size: var(--fs-sm); } .tone-lilac { color: var(--lilac-ink); } .tone-stone { color: var(--stone); } .ico-wa { color: #25D366; } .tone-leaf { color: var(--leaf-ink); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); letter-spacing: -0.005em; } .eyebrow__num { color: var(--lilac-deep); font-variant-numeric: tabular-nums; } /* ---------- 4. Раскладка ---------- */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } html { overflow-x: clip; } .section, main > section { padding-block: var(--section-y); position: relative; overflow-x: clip; } main > section#business { padding-block: clamp(16px, 2vw, 24px); } /* серые секции — панели со скруглением и своим отступом (как у Verdro); соседний контент не касается фона */ .section--mist { background: var(--mist); margin-inline: 8px; border-radius: var(--r-xl); } main > section.section--mist { padding-block: clamp(72px, 9vw, 136px); } @media (min-width: 1100px) { .section--mist { margin-inline: 16px; } } .section-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 880px; } .section-head--row { max-width: none; } @media (min-width: 1100px) { .section-head--row { grid-template-columns: 1fr auto; align-items: end; } } /* ---------- 5. Liquid Glass ---------- */ .glass { position: relative; isolation: isolate; background: linear-gradient(140deg, rgba(255, 255, 255, 0.74) 0%, rgba(246, 244, 255, 0.46) 55%, rgba(220, 214, 255, 0.34) 100%); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(150, 135, 240, 0.16), 0 12px 32px -14px rgba(70, 52, 170, 0.24); } .glass::before { /* стеклянная кромка: белый блик → лиловое преломление */ content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2; background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(189, 180, 255, 0.55) 38%, rgba(255, 255, 255, 0.25) 68%, rgba(189, 180, 255, 0.75)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .glass::after { /* мягкий спекулярный блик */ content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; z-index: -1; background: radial-gradient(120% 70% at 18% 0%, rgba(255, 255, 255, 0.7), transparent 55%); } .glass--dark { background: linear-gradient(140deg, rgba(255, 255, 255, 0.10), rgba(189, 180, 255, 0.06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 20px 40px -20px rgba(0, 0, 0, 0.6); } .glass--dark::before { background: linear-gradient(150deg, rgba(255, 255, 255, 0.35), rgba(189, 180, 255, 0.25) 40%, rgba(255, 255, 255, 0.05) 70%, rgba(189, 180, 255, 0.35)); } .glass--dark::after { background: radial-gradient(120% 70% at 18% 0%, rgba(255, 255, 255, 0.10), transparent 55%); } /* ---------- 6. Кнопки ---------- */ .btn { --h: 54px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 24px; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; letter-spacing: -0.012em; line-height: 1; white-space: nowrap; -webkit-tap-highlight-color: transparent; user-select: none; transition: transform var(--d-press) var(--ease-out), background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); } .btn:active { transform: scale(0.97); } .btn--ink { background: var(--ink); color: #fff; box-shadow: 0 10px 24px -12px rgba(21, 18, 28, 0.55); } .btn--glass { color: var(--ink); border-radius: var(--r-pill); } .btn--lilac { background: var(--lilac); color: var(--ink); } .btn--line { border: 1px solid var(--line-strong); color: var(--ink); background: transparent; } .btn--paper { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 22px -14px rgba(21, 18, 28, 0.35); } .btn--block { width: 100%; } .btn--sm { --h: 42px; padding: 0 16px; font-size: 14px; } .btn--thumb { padding-right: 6px; gap: 14px; } .btn__thumb { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; background: radial-gradient(circle at 50% 30%, #fff, var(--lilac-200)); } .btn__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; transform: scale(1.9) translateY(18%); } .btn__thumb--photo img { transform: none; object-position: 50% 50%; } .btn__thumb--logo { width: 46px; height: 46px; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #fff 0%, var(--lilac-100) 70%); } .btn__thumb--logo img { width: 34px; height: 34px; object-fit: contain; transform: rotate(-8deg); transition: transform 300ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .btn--thumb:hover .btn__thumb--logo img { transform: rotate(0deg) scale(1.08); } } /* стрелки: мягкий сдвиг вправо, 450 мс, плавное торможение — одинаково на всём сайте */ .btn__arrow { width: 18px; height: 18px; flex: none; transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) and (pointer: fine) { .btn--ink:hover { background: var(--ink-2); } .btn--lilac:hover { background: var(--lilac-400); } .btn--line:hover { background: var(--mist); } .btn--paper:hover { background: var(--mist); } .btn:hover .btn__arrow, .link:hover .btn__arrow, a:hover > .btn__arrow { transform: translateX(4px); } } /* текстовая ссылка: без подчёркивания, стрелка мягко сдвигается вправо при наведении */ .link { position: relative; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink); transition: color 300ms var(--ease); } @media (hover: hover) and (pointer: fine) { .link:hover { color: var(--lilac-deep); } } /* ---------- 7. Пилюли, бейджи, чипы ---------- */ .tag { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; } .tag--glass { border: 0; color: var(--ink); } .badge { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--ink-2); } .badge svg { width: 18px; height: 18px; color: var(--lilac-deep); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; position: relative; } .dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: var(--live); opacity: 0.25; animation: dot-pulse 2.4s var(--ease-out) infinite; } @keyframes dot-pulse { 0% { transform: scale(0.6); opacity: 0.35; } 70%, 100% { transform: scale(1.6); opacity: 0; } } .chip { display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--r-md); } .chip__label { font-size: 12px; font-weight: 500; color: var(--text-2); } .chip__value { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; } /* ---------- 8. Карточка с вырезом (signature Verdro) ---------- */ .card { --card-bg: var(--cloud); --notch-bg: var(--paper); --nw: 64px; --nh: 64px; --nr: 20px; position: relative; background: var(--card-bg); border-radius: var(--r-lg); } .notch { position: absolute; top: 0; right: 0; width: var(--nw); height: var(--nh); background: var(--notch-bg); border-bottom-left-radius: var(--nr); z-index: 3; } .notch::before, .notch::after { content: ''; position: absolute; width: var(--nr); height: var(--nr); background: radial-gradient(circle at 0 100%, transparent calc(var(--nr) - 0.5px), var(--notch-bg) var(--nr)); } .notch::before { top: 0; right: 100%; } .notch::after { top: 100%; right: 0; } .notch--top { left: 50%; right: auto; transform: translateX(-50%); border-radius: 0 0 var(--nr) var(--nr); } .notch--top::after { top: 0; right: auto; left: 100%; background: radial-gradient(circle at 100% 100%, transparent calc(var(--nr) - 0.5px), var(--notch-bg) var(--nr)); } .notch__btn { position: absolute; inset: 7px 7px auto auto; width: calc(var(--nw) - 14px); height: calc(var(--nh) - 14px); display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; transition: transform var(--d-base) var(--ease-out), background-color var(--d-fast) var(--ease); } .notch__btn svg { width: 18px; height: 18px; transition: transform var(--d-base) var(--ease-out); } .notch__btn--arrow { overflow: hidden; transition: background-color 500ms var(--ease), color 500ms var(--ease); } .notch__btn--arrow svg { grid-area: 1 / 1; transition: transform 640ms cubic-bezier(0.65, 0, 0.35, 1), opacity 420ms var(--ease); } .notch__btn--arrow svg + svg { transform: translate(-120%, 120%); opacity: 0; } /* стрелки в вырезах статичны: при наведении двигается 3D-объект карточки, этого достаточно */ .notch--top .notch__btn { inset: 7px auto auto 50%; transform: translateX(-50%); background: var(--paper); box-shadow: var(--sh-2); } /* ---------- 9. Навигация ---------- */ .nav { position: fixed; z-index: 60; top: 10px; left: 0; right: 0; padding-inline: var(--gutter); pointer-events: none; } /* ширина шапки = ширина контента секций (container) */ .nav__bar { pointer-events: auto; max-width: var(--container); margin-inline: auto; height: 60px; padding: 0 8px 0 14px; display: flex; align-items: center; gap: 12px; border-radius: var(--r-pill); } .nav__right { display: flex; align-items: center; gap: 8px; } .nav .lang-switch { display: none; } .nav__logo { display: flex; align-items: center; gap: 10px; margin-right: auto; } .nav__logo img.icon { width: 34px; height: 34px; } .nav__logo img.word { height: 22px; width: auto; } .nav__links { display: none; } .nav__status { display: none; } .nav__lang { display: none; } .nav__burger { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: var(--sh-1); transition: transform var(--d-press) var(--ease-out); } .nav__burger:active { transform: scale(0.94); } .nav__burger span { position: absolute; width: 16px; height: 1.6px; border-radius: 2px; background: var(--ink); transition: transform var(--d-base) var(--ease-out); } .nav__burger span:first-child { transform: translateY(-3.5px); } .nav__burger span:last-child { transform: translateY(3.5px); } .menu-open .nav__burger span:first-child { transform: rotate(45deg); } .menu-open .nav__burger span:last-child { transform: rotate(-45deg); } @media (min-width: 1100px) { .nav { top: 16px; } /* space-between: промежуток «лого → меню» равен промежутку «меню → кнопки» */ .nav__bar { height: 64px; padding: 0 8px 0 18px; gap: 12px; justify-content: space-between; } .nav__logo { margin-right: 0; } .nav__links { display: flex; align-items: center; gap: 2px; } .nav__right { gap: 14px; } .nav .lang-switch { display: inline-grid; } .nav__link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color var(--d-fast) var(--ease); } .nav__link svg { width: 12px; height: 12px; transition: transform var(--d-base) var(--ease-out); } .nav__link[aria-expanded='true'] svg { transform: rotate(180deg); } .nav__burger { display: none; } } @media (min-width: 1280px) { .nav__status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); } .nav__link { padding: 0 14px; } } /* шапка над тёмной панелью «Бизнесу»: тёмное стекло, светлый текст, лиловая кнопка */ .nav__bar, .nav__link, .nav__status, .lang-switch, .nav__logo img.word, .nav__cta, .nav__burger { transition: background-color 400ms var(--ease), color 300ms var(--ease), filter 300ms var(--ease), box-shadow 400ms var(--ease); } .nav--dark .nav__bar { background: linear-gradient(140deg, rgba(36, 32, 46, 0.78), rgba(28, 24, 38, 0.66)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 34px -16px rgba(0, 0, 0, 0.6); } .nav--dark .nav__bar::before { background: linear-gradient(150deg, rgba(255, 255, 255, 0.35), rgba(189, 180, 255, 0.28) 40%, rgba(255, 255, 255, 0.05) 70%, rgba(189, 180, 255, 0.4)); } .nav--dark .nav__bar::after { background: radial-gradient(120% 70% at 18% 0%, rgba(255, 255, 255, 0.08), transparent 55%); } .nav--dark .nav__logo img.word { filter: invert(1) brightness(1.6); } .nav--dark .nav__link { color: rgba(255, 255, 255, 0.88); } .nav--dark .nav__status { color: rgba(255, 255, 255, 0.66); } .nav--dark .lang-switch { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .nav--dark .lang-switch button { color: rgba(255, 255, 255, 0.7); } .nav--dark .lang-switch button[aria-pressed='true'] { color: var(--ink); } .nav--dark .lang-switch__thumb { background: #fff; } .nav--dark .nav__cta { background: var(--lilac); color: var(--ink); box-shadow: none; } .nav--dark .nav__burger { background: rgba(255, 255, 255, 0.12); } .nav--dark .nav__burger span { background: #fff; } @media (hover: hover) and (pointer: fine) { .nav--dark .nav__link:hover { background: rgba(255, 255, 255, 0.08); } .nav--dark .nav__cta:hover { background: var(--lilac-400); } } /* переключатель языка: двойной свитч, ползунок едет за 260 мс (ease-out, прерываемый transition) */ .lang-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--r-pill); background: rgba(21, 18, 28, 0.06); box-shadow: inset 0 0 0 1px rgba(21, 18, 28, 0.05); } .lang-switch button { position: relative; z-index: 1; width: 40px; height: 32px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-2); transition: color 200ms var(--ease), transform var(--d-press) var(--ease-out); } .lang-switch button:active { transform: scale(0.94); } .lang-switch button[aria-pressed='true'] { color: #fff; } .lang-switch__thumb { position: absolute; z-index: 0; top: 3px; left: 3px; width: 40px; height: 32px; border-radius: var(--r-pill); background: var(--ink); box-shadow: 0 6px 14px -6px rgba(21, 18, 28, 0.55); transition: transform 260ms var(--ease-out); } .lang-switch[data-active='en'] .lang-switch__thumb { transform: translateX(100%); } @media (hover: hover) and (pointer: fine) { .lang-switch button[aria-pressed='false']:hover { color: var(--ink); } } @media (hover: hover) and (pointer: fine) { .nav__link:hover { background: rgba(21, 18, 28, 0.05); } } .nav__link[aria-current='page'] { background: rgba(21, 18, 28, 0.06); color: var(--ink); } .nav--dark .nav__link[aria-current='page'] { background: rgba(255, 255, 255, 0.12); color: #fff; } /* мега-меню (desktop) — как у Платы: витрина + список */ .mega { display: none; } @media (min-width: 1100px) { .mega { display: grid; } } .mega { position: absolute; top: calc(100% + 10px); left: 50%; width: min(1060px, calc(100vw - 40px)); border-radius: var(--r-xl); padding: 10px; grid-template-columns: 320px 1fr; gap: 10px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 244, 255, 0.97) 55%, rgba(236, 232, 255, 0.97) 100%); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: var(--sh-3), inset 0 0 0 1px rgba(255, 255, 255, 0.8); transform-origin: var(--origin-x, 30%) 0; opacity: 0; transform: translateX(-50%) scale(0.97) translateY(-6px); pointer-events: none; transition: opacity var(--d-fast) var(--ease-out), transform var(--d-base) var(--ease-out); } .mega.is-open { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); pointer-events: auto; } .mega__feature { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 8px; min-height: 340px; background: #fff; box-shadow: inset 0 0 0 1px rgba(21, 18, 28, 0.05); display: grid; grid-template-rows: 1fr auto; gap: 4px; } .mega__photo { position: relative; display: block; overflow: hidden; border-radius: 20px; min-height: 150px; } .mega__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transition: transform 600ms var(--ease-out); } .mega__rate { position: absolute; left: 10px; bottom: 10px; height: 32px; padding: 0 14px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .mega__feature-body { display: grid; gap: 8px; padding: 14px 14px 12px; } .mega__feature .h3 { font-size: 22px; } .mega__list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 6px; padding: 4px; } .mega__item { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease); } .mega__item .obj { width: 64px; height: 64px; object-fit: contain; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) and (pointer: fine) { .mega__feature:hover .mega__photo img { transform: scale(1.04); } } .mega__item b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; } .mega__item span { display: block; font-size: 13px; color: var(--text-2); line-height: 1.4; } @media (hover: hover) and (pointer: fine) { .mega__item:hover { background: #fff; box-shadow: 0 1px 2px rgba(21, 18, 28, 0.04), 0 10px 26px -14px rgba(70, 52, 170, 0.32); } .mega__item:hover .obj { transform: translateY(-2px) scale(1.06); } } /* мобильное меню — лист сверху */ .sheet { position: fixed; inset: 0; z-index: 55; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; padding: 86px var(--gutter) 28px; clip-path: inset(0 0 100% 0 round 0 0 40px 40px); visibility: hidden; transition: clip-path 280ms var(--ease-out), visibility 0s linear 280ms; } .menu-open .sheet { clip-path: inset(0 0 0 0 round 0); visibility: visible; transition: clip-path var(--d-drawer) var(--ease-drawer), visibility 0s; } .sheet__group { display: grid; gap: 8px; } .sheet__label { font-size: 12px; font-weight: 600; color: var(--text-3); letter-spacing: 0.02em; margin: 18px 4px 4px; } .sheet__item { display: grid; grid-template-columns: 56px 1fr 20px; gap: 14px; align-items: center; padding: 12px 14px 12px 10px; border-radius: var(--r-md); background: var(--mist); } .sheet__item .obj { width: 56px; height: 56px; object-fit: contain; } .sheet__item b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; } .sheet__item span { display: block; font-size: 13px; color: var(--text-2); line-height: 1.35; } .sheet__item .chev { width: 18px; height: 18px; color: var(--text-3); } .sheet__links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sheet__links a { padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line); font-weight: 600; font-size: 15px; } .sheet__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; } .sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 4px 0; } .sheet__foot p { display: flex; gap: 10px; align-items: center; margin: 0; color: var(--text-2); } .sheet [data-stagger] { opacity: 0; transform: translateY(14px); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } .menu-open .sheet [data-stagger] { opacity: 1; transform: none; transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); transition-delay: calc(120ms + var(--i, 0) * 45ms); } body.menu-open { overflow: hidden; } /* ---------- 10. Берёзы ---------- */ .birch { position: relative; aspect-ratio: var(--birch-ratio); width: 100%; pointer-events: none; } .birch svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .birch__static { filter: drop-shadow(0 16px 14px rgba(60, 40, 90, 0.10)); } /* падающие листья: падение (линейно) → маятник (синус) → вращение; ближние крупнее и быстрее */ .leaves { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; } .leaves i { position: absolute; top: -40px; left: var(--x); width: var(--s, 18px); display: block; opacity: 0; animation: leaf-fall var(--d, 22s) linear var(--delay, 0s) infinite; will-change: transform, opacity; } .leaves i > b { display: block; animation: leaf-sway var(--sw, 5s) cubic-bezier(0.37, 0, 0.63, 1) var(--swd, 0s) infinite alternate; } .leaves i img { width: 100%; height: auto; animation: leaf-flip var(--sd, 7s) cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; } /* тихое покачивание фото-веток («газета из Гарри Поттера»: замечаешь не сразу) */ .sway { animation: sway 9s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; transform-origin: 100% 25%; } .sway--top { transform-origin: 50% 0; animation-duration: 12s; } @keyframes sway { from { transform: rotate(-0.7deg); } to { transform: rotate(0.7deg); } } @keyframes leaf-fall { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 7% { opacity: var(--o, 0.95); } 88% { opacity: var(--o, 0.95); } 100% { transform: translate3d(var(--drift, 0px), var(--fall, 900px), 0); opacity: 0; } } @keyframes leaf-sway { from { transform: translate3d(calc(var(--dx, 40px) * -1), 0, 0) rotate(-26deg); } to { transform: translate3d(var(--dx, 40px), 0, 0) rotate(26deg); } } @keyframes leaf-flip { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(42deg) rotateY(58deg); } } /* ---------- 11. Hero: кристально белый, ветка через весь экран ---------- Композиция по диагонали: bereza слева сверху → ветка от края до края → exchange справа под веткой. Ничего не заходит на бейдж лицензии и на карточку с кнопками: всё считается от кегля (--fs) и размеров ветки. */ /* снизу — такой же отступ, как у секций: серая панель «Обмена» не прилипает к фото офиса */ .hero { position: relative; padding: 8px 8px clamp(72px, 9vw, 140px); overflow-x: clip; } .hero__frame { --fs: 17vw; /* кегль bereza и exchange — одинаковый */ --exr: 1; /* exchange = bereza */ --wl: 14px; /* левый край bereza */ --wr: 14px; /* правый край exchange */ --wt: 160px; /* верх bereza — ниже бейджа лицензии */ --bw: 210vw; /* ширина ветки */ --bx: 55vw; /* насколько ветка уходит за левый край */ --ba: 5.824; /* пропорция ветки 5504×945 */ --brot: -4.5deg; /* наклон вверх слева направо: правый конец выше */ --btop: calc(var(--wt) + var(--fs) * 0.64); position: relative; isolation: isolate; margin-inline: auto; max-width: 1480px; min-height: max(700px, calc(100svh - 16px)); display: grid; grid-template-rows: 1fr auto; background: #fff; } /* фото-рощи по умолчанию нет (кристально белый); сравнить: ?sky=sides | blue | radial */ .hero__sky { display: none; position: absolute; inset: 0; z-index: 0; border-radius: 36px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.7) 10%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.7) 90%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.7) 10%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.7) 90%, #000 100%); } .sky-on .hero__sky { display: block; } .hero__sky picture, .hero__sky img { display: block; width: 100%; height: 100%; } .hero__sky picture { transform-origin: 50% 20%; will-change: transform; } .hero__sky img { object-fit: cover; object-position: 50% 35%; } .hero .leaves { z-index: 6; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 96%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 96%); } .hero__tag { position: absolute; z-index: 7; left: var(--wl); top: 88px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--mist); font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; } .hero__tag svg { width: 16px; height: 16px; color: var(--lilac-deep); } .hero__tag .lufga { font-weight: 400; color: var(--text-2); } .hero__wm { position: absolute; z-index: 2; left: var(--wl); top: var(--wt); margin: 0; font-family: var(--font-latin); font-weight: 400; font-size: var(--fs); line-height: 0.8; letter-spacing: -0.01em; font-feature-settings: normal; font-kerning: normal; color: var(--ink); white-space: nowrap; pointer-events: none; user-select: none; } .hero__wm > span { display: block; } /* весь текст — за веткой: она лишь чуть касается низа букв */ /* exchange: справа, под веткой */ .hero__wm--ex { z-index: 2; left: auto; right: var(--wr); font-size: calc(var(--fs) * var(--exr)); /* exchange под веткой: верх «h» лишь касается коры */ top: calc(var(--btop) + var(--bw) / var(--ba) - var(--fs) * var(--exr) * 0.2); } .hero__branch { position: absolute; z-index: 3; pointer-events: none; left: calc((100% - 100vw) / 2 - var(--bx)); width: var(--bw); top: var(--btop); rotate: var(--brot); } .hero__branch img { width: 100%; height: auto; } .sway--branch { transform-origin: 50% 50%; animation-name: sway-branch; animation-duration: 12s; } @keyframes sway-branch { from { transform: translateY(-2px) rotate(-0.2deg); } to { transform: translateY(2px) rotate(0.2deg); } } .hero__card { position: relative; z-index: 7; grid-row: 2; align-self: end; margin: 0 6px 6px; padding: 22px 18px 18px; border-radius: 24px; display: grid; gap: 14px; justify-items: start; } .hero__title { margin: 0; font-size: clamp(30px, 8.6vw, 54px); font-weight: 500; line-height: 0.98; letter-spacing: -0.048em; text-wrap: balance; } .hero__lead { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-2); letter-spacing: -0.01em; text-wrap: pretty; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .hero__ctas .btn { width: auto; padding: 0 16px; font-size: 14.5px; } .hero__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: 500; color: var(--text-2); } .hero__meta li { display: inline-flex; align-items: center; gap: 8px; } .hero__stats { display: none; } .mini { position: relative; display: grid; gap: 4px; padding: 16px 18px; border-radius: 22px; background: var(--paper); box-shadow: 0 1px 2px rgba(21, 18, 28, 0.04), 0 18px 40px -22px rgba(30, 40, 20, 0.3); } .mini__k { font-size: 12px; font-weight: 500; color: var(--text-2); line-height: 1.35; } .mini__v { font-size: 20px; color: var(--ink); line-height: 1.1; } .mini__v--big { font-size: 44px; font-weight: 500; line-height: 0.95; letter-spacing: -0.05em; } .mini--stat { padding-right: 104px; min-height: 124px; align-content: space-between; } .mini--stat img { position: absolute; right: 8px; bottom: 6px; width: 96px; height: auto; filter: drop-shadow(0 10px 12px rgba(80, 60, 170, 0.18)); } .hero__notch { display: none; } @media (min-width: 768px) { .hero { padding-inline: 12px; padding-top: 12px; } .hero__frame { --fs: 17vw; --exr: 1; --wl: 28px; --wr: 28px; --wt: 172px; --bw: 150vw; --bx: 25vw; --brot: -3deg; --btop: calc(var(--wt) + var(--fs) * 0.76); min-height: max(700px, min(calc(100svh - 24px), 980px)); } .hero__tag { top: 100px; } .hero__card { margin: 0 14px 14px; width: min(560px, calc(100% - 28px)); padding: 28px; } .hero__ctas .btn { padding: 0 24px; font-size: 15px; } } @media (min-width: 1100px) { .hero__frame { --fs: min(11.4vw, 166px); --exr: 1; --wl: 48px; --wr: 48px; --wt: 176px; --bw: 104vw; --bx: 2vw; --btop: calc(var(--wt) + var(--fs) * 0.53); min-height: max(900px, calc(100svh - 24px)); max-height: 1000px; } .hero__tag { top: 108px; } .hero__card { position: absolute; left: 32px; bottom: 28px; margin: 0; width: clamp(400px, 34vw, 500px); padding: 26px 28px; gap: 14px; } .hero__title { font-size: clamp(36px, 3vw, 44px); } .hero__card .hero__meta { display: none; } /* статус «На связи» уже есть в навигации */ .hero__stats { display: flex; align-items: flex-end; gap: 10px; position: absolute; z-index: 7; right: 32px; bottom: 28px; } .hero__stats .mini { width: 270px; } .hero__stats .mini:not(.mini--stat) { width: auto; padding-right: 26px; } } /* ---------- 12. Доверие (как «Discover the benefits» у Verdro) ---------- */ .pill { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92); font-size: 13px; font-weight: 500; color: var(--ink-2); } .trust { display: grid; gap: 28px; margin-top: clamp(72px, 9vw, 140px); } .trust__copy { display: grid; gap: 20px; align-content: start; } .trust__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1; } .trust__tags { display: flex; flex-wrap: wrap; gap: 8px; } .trust__tags .tag { height: 38px; padding: 0 16px; } .trust__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; } .trust__nums b { display: block; font-size: clamp(34px, 9vw, 54px); font-weight: 500; line-height: 1; letter-spacing: -0.05em; color: var(--ink); } .trust__nums span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.35; color: var(--text-2); } .trust__photo { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 4.4; } .trust__photo img { width: 100%; height: 100%; object-fit: cover; } .trust__photo .pill { position: absolute; top: 16px; right: 16px; } @media (min-width: 1100px) { .trust { grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: stretch; } .trust__copy { align-content: space-between; padding-block: 8px; } .trust__nums { margin-top: 40px; gap: 28px; } .trust__photo { aspect-ratio: auto; min-height: 520px; } } /* ---------- 13. Услуги ---------- */ .services__grid { display: grid; gap: 12px; } .svc { display: grid; align-content: start; gap: 10px; padding: 22px 22px 24px; min-height: 280px; overflow: visible; transition: transform var(--d-press) var(--ease-out); } .svc:active { transform: scale(0.985); } .svc__idx { font-size: 13px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; } .svc__title { max-width: 72%; } .svc__desc { max-width: 64%; font-size: 15px; } .svc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; max-width: 70%; } .svc__tags .tag { height: 30px; padding: 0 12px; font-size: 12px; background: rgba(255, 255, 255, 0.6); border-color: transparent; } .svc__obj { position: absolute; right: 6px; bottom: 8px; width: 50%; max-width: 230px; aspect-ratio: 1; transition: transform 520ms var(--ease-out); pointer-events: none; } .svc__obj svg, .svc__obj img { width: 100%; height: 100%; object-fit: contain; } .svc__obj img { filter: drop-shadow(0 18px 18px rgba(40, 36, 30, 0.14)); } .svc--feature { --card-bg: linear-gradient(160deg, #f4f2fb 0%, #ebe7fb 100%); min-height: 330px; } .svc--feature .svc__obj { width: 46%; max-width: 280px; bottom: 6px; } @media (max-width: 767px) { .svc__desc { max-width: 60%; } .svc__obj { width: 40%; right: 4px; bottom: 6px; } .svc--feature .svc__tags { max-width: 58%; } } @media (hover: hover) and (pointer: fine) { .svc:hover .svc__obj { transform: translateY(-8px) rotate(-3deg); } } @media (min-width: 768px) { .services__grid { grid-template-columns: 1fr 1fr; } .svc--feature { grid-column: span 2; min-height: 340px; } } @media (min-width: 1100px) { .services__grid { grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; } .svc { padding: 30px; min-height: 320px; } .svc:not(.svc--feature):not(:last-child) .svc__obj { width: 40%; max-width: 168px; right: 14px; bottom: 14px; } .svc:not(.svc--feature):not(:last-child) .svc__desc { max-width: 66%; } .svc--feature { grid-column: 1; grid-row: span 2; min-height: 620px; } .svc:last-child { grid-column: 2 / span 2; min-height: 290px; } .svc:last-child .svc__obj { width: 30%; right: 40px; bottom: 16px; } .svc:last-child .svc__desc { max-width: 52%; } .svc--feature .svc__obj { width: 66%; max-width: 340px; right: 24px; bottom: 28px; } .svc--feature .svc__title { max-width: 90%; } .svc--feature .svc__desc { max-width: 80%; } } /* ---------- 14. Обмен: калькулятор + способы ---------- */ .exchange__grid { display: grid; gap: 16px; } .calc-wrap { position: relative; isolation: isolate; } .calc-wrap__blob { position: absolute; inset: 10% -6% -4% 20%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(189, 180, 255, 0.85), rgba(189, 180, 255, 0)); filter: blur(8px); } .calc { border-radius: var(--r-xl); padding: 20px; display: flex; flex-direction: column; gap: 10px; height: 100%; } .calc-wrap { display: grid; } .calc__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 2px 4px 6px; } .calc__head b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; } .calc__rate { font-size: 12px; font-weight: 500; color: var(--text-2); } .calc__field { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1px rgba(21, 18, 28, 0.04); transition: box-shadow var(--d-fast) var(--ease); cursor: text; } .calc__field:focus-within { box-shadow: inset 0 0 0 1.5px var(--lilac-400), 0 0 0 4px rgba(189, 180, 255, 0.25); } .calc__field--out { background: rgba(238, 235, 255, 0.8); } .calc__label { font-size: 12px; font-weight: 600; color: var(--text-2); } .calc__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .calc__input { width: 100%; min-width: 0; border: 0; background: none; padding: 0; outline: none; font-size: clamp(30px, 8vw, 40px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; } .calc__cur { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--r-pill); background: var(--paper); font-size: 13px; font-weight: 700; flex: none; box-shadow: var(--sh-1); white-space: nowrap; } .calc__slot { display: contents; } /* выбор валюты — нативный select (доступен с клавиатуры и на телефоне), оформлен пилюлей */ /* флаги-кружки */ .flag { display: inline-block; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(21, 18, 28, 0.08); } .flag svg { display: block; width: 100%; height: 100%; } .calc__cur .flag { width: 18px; height: 18px; } /* дропдаун валют: открывается от кнопки (origin справа сверху), 200 мс ease-out; список с флагами и названиями */ .cur-dd { position: relative; flex: none; } .cur-dd__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 8px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 8px 18px -10px rgba(21, 18, 28, 0.6); transition: transform var(--d-press) var(--ease-out), background-color 240ms var(--ease); } .cur-dd__btn .flag { width: 24px; height: 24px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); } .cur-dd__btn:active { transform: scale(0.96); } .cur-dd__chev { width: 12px; height: 12px; opacity: 0.8; transition: transform 300ms var(--ease-out); } .cur-dd.is-open .cur-dd__chev { transform: rotate(180deg); } @media (hover: hover) and (pointer: fine) { .cur-dd__btn:hover { background: var(--ink-2); } } .cur-dd__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 250px; margin: 0; padding: 6px; list-style: none; border-radius: 20px; background: #fff; box-shadow: var(--sh-3), 0 0 0 1px rgba(21, 18, 28, 0.05); transform-origin: 100% 0; opacity: 0; transform: translateY(-4px) scale(0.97); pointer-events: none; visibility: hidden; transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s linear 220ms; } .cur-dd.is-open .cur-dd__list { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s; } .cur-dd__list li { display: grid; grid-template-columns: 26px 40px 1fr 18px; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; font-size: 14px; color: var(--ink); cursor: pointer; transition: background-color 200ms var(--ease); } .cur-dd__list li .flag { width: 26px; height: 26px; } .cur-dd__list li b { font-weight: 700; } .cur-dd__list li > span:not(.flag) { font-size: 13px; color: var(--text-2); white-space: nowrap; } .cur-dd__check { width: 18px; height: 18px; color: var(--lilac-deep); opacity: 0; transition: opacity 200ms var(--ease); } .cur-dd__list li[aria-selected='true'] .cur-dd__check { opacity: 1; } .cur-dd__list li.is-active, .cur-dd__list li[aria-selected='true'] { background: var(--lilac-50); } @media (hover: hover) and (pointer: fine) { .cur-dd__list li:hover { background: var(--lilac-50); } } .calc__swap-row { display: grid; place-items: center; height: 0; position: relative; z-index: 2; } .calc__swap { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85); transition: transform var(--d-base) var(--ease-out); } .calc__swap svg { width: 18px; height: 18px; } .calc__swap.is-flipped { transform: rotate(180deg); } .calc__swap:active { transform: scale(0.94); } .calc__swap.is-flipped:active { transform: rotate(180deg) scale(0.94); } .calc__quick { display: grid; gap: 8px; padding: 6px 2px 4px; } .calc__quick-label { font-size: 12px; font-weight: 600; color: var(--text-2); } .calc__chips { display: flex; gap: 6px; flex-wrap: wrap; } .calc__chips button { height: 36px; padding: 0 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--d-press) var(--ease-out), background-color var(--d-fast) var(--ease); } .calc__chips button:active { transform: scale(0.95); } .calc__chips button[aria-pressed='true'] { background: var(--ink); color: #fff; box-shadow: none; } .calc__foot { display: grid; gap: 10px; margin-top: auto; padding-top: 6px; } .calc__note { margin: 0 4px; font-size: 12px; color: var(--text-2); line-height: 1.45; } .methods { display: grid; gap: 12px; grid-template-rows: auto 1fr; } .seg { position: relative; display: block; padding: 5px; border-radius: var(--r-pill); background: var(--paper); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); } .exchange__grid > * { min-width: 0; } .seg__list { display: grid; grid-template-columns: 1.25fr 1fr 1fr 0.7fr; } .seg__list button { min-width: 0; height: 44px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; padding: 0 4px; } @media (min-width: 768px) { .seg__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .seg__list button { font-size: 14px; } } .seg__list--active { position: absolute; inset: 5px; pointer-events: none; transition: clip-path 260ms var(--ease-out); } .seg__list--active button { background: var(--ink); color: #fff; border-radius: 0; } .seg__list--active button:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); } .seg__list--active button:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; } .method-panel { --card-bg: var(--paper); --notch-bg: var(--mist); position: relative; min-height: 460px; padding: 26px; display: block; overflow: hidden; cursor: pointer; box-shadow: var(--sh-1); transition: box-shadow 500ms var(--ease); } /* невидимая ссылка на всю карточку: кликается любое место, фокус — по контуру карточки */ .method-panel__hit { position: absolute; inset: 0; z-index: 5; border-radius: inherit; } .method-panel__hit:focus-visible { outline: 2px solid var(--lilac-ink); outline-offset: -4px; } .method-panel__body { position: relative; z-index: 1; display: grid; gap: 8px; max-width: 34ch; padding-right: 48px; } .method-panel__art { position: absolute; z-index: 0; right: 14px; bottom: 12px; width: 54%; max-width: 300px; height: auto; object-fit: contain; pointer-events: none; filter: drop-shadow(0 18px 18px rgba(40, 36, 30, 0.14)); } .method-panel .swap-out { opacity: 0; filter: blur(4px); transform: translateY(6px); } .method-panel [data-swap] { transition: opacity 240ms var(--ease-out), filter 240ms var(--ease-out), transform 240ms var(--ease-out); } .method-panel .method-panel__art { transition: opacity 240ms var(--ease-out), filter 240ms var(--ease-out), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); } .method-panel .method-panel__art.swap-out { transform: translateY(10px) scale(0.96); filter: blur(4px) drop-shadow(0 18px 18px rgba(40, 36, 30, 0.14)); } @media (hover: hover) and (pointer: fine) { .method-panel:hover { box-shadow: var(--sh-2); } .method-panel:hover .method-panel__art:not(.swap-out) { transform: translateY(-6px) rotate(-2deg); } } @media (min-width: 768px) and (max-width: 1099px) { .method-panel { min-height: 0; padding: 22px; } .method-panel__body { padding-right: 40px; } .method-panel__art { width: 56%; right: 10px; bottom: 10px; } } @media (min-width: 1100px) { .method-panel { padding: 34px; } .method-panel__art { width: 48%; max-width: 330px; right: 26px; bottom: 22px; } } .method-list { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; } .method-list li { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 500; color: var(--ink-2); } .method-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lilac-400); flex: none; } /* планшет и десктоп: калькулятор и способ получения — одной высоты */ @media (min-width: 768px) { .exchange__grid { grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; } .method-panel { height: 100%; } } @media (min-width: 1100px) { .exchange__grid { grid-template-columns: 0.92fr 1.08fr; gap: 28px; } .calc { padding: 26px; } } /* ---------- 15. Шаги ---------- */ .steps { position: relative; display: grid; gap: 34px; padding-left: 58px; } .steps__line { position: absolute; left: 20px; top: 6px; bottom: 6px; width: 16px; } .steps__line svg { width: 100%; height: 100%; overflow: visible; } .step { position: relative; display: grid; gap: 8px; align-content: start; } .step__node { position: absolute; left: -62px; top: -12px; width: 64px; height: 64px; display: grid; place-items: center; opacity: 0.22; transform: scale(0.82) rotate(-10deg); transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out); } .step__node svg, .step__node img { width: 50px; height: auto; transform: rotate(-24deg); transform-origin: 50% 90%; } .step.is-reached .step__node { opacity: 1; transform: none; } .step.is-reached .step__node img { animation: node-sway 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } .step:nth-child(3) .step__node img { animation-delay: -1.6s; } .step:nth-child(4) .step__node img { animation-delay: -3.1s; } @keyframes node-sway { from { rotate: -5deg; } to { rotate: 5deg; } } .steps__line .line-h { display: none; } .step__num { font-size: 13px; font-weight: 700; color: var(--lilac-deep); font-variant-numeric: tabular-nums; } .step .h3 { font-size: 24px; } @media (min-width: 1100px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; padding-left: 0; padding-top: 78px; } .steps__line { left: 0; right: 0; top: 18px; bottom: auto; width: auto; height: 20px; } .steps__line .line-v { display: none; } .steps__line .line-h { display: block; } .step__node { left: -14px; top: -96px; width: 76px; height: 76px; } .step__node svg, .step__node img { width: 60px; } .step .h3 { font-size: 28px; } .steps--4 { grid-template-columns: repeat(4, 1fr); gap: 32px; } .steps--4 .step .h3 { font-size: 24px; } } /* ---------- 16. Недвижимость: роща, цифра стоит за стволами ---------- */ .realty { overflow: clip; } .grove { position: relative; isolation: isolate; margin-inline: calc(var(--gutter) * -1); display: grid; place-items: center; } .grove > .grove__trees { grid-area: 1 / 1; } .grove__trees { position: relative; z-index: 0; display: block; width: 150%; max-width: none; height: auto; pointer-events: none; /* стволы уходят вверх и растворяются в светлом фоне секции */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%); mask-image: linear-gradient(180deg, transparent 0%, #000 24%); } /* передний слой — та же роща, но видны только 2 ствола (маска по x в координатах картинки) */ .grove__trees--front { z-index: 2; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%), linear-gradient(90deg, transparent 42.3%, #000 42.3%, #000 46.1%, transparent 46.1%, transparent 72.5%, #000 72.5%, #000 77.3%, transparent 77.3%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, #000 24%), linear-gradient(90deg, transparent 42.3%, #000 42.3%, #000 46.1%, transparent 46.1%, transparent 72.5%, #000 72.5%, #000 77.3%, transparent 77.3%); mask-composite: intersect; } .grove__num { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -42%; font-size: clamp(7rem, 33vw, 30rem); font-weight: 500; line-height: 0.8; letter-spacing: -0.065em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; } .grove__caption { display: grid; justify-items: center; gap: 14px; text-align: center; margin: 20px 0 clamp(48px, 7vw, 96px); } .mega-num__caption { margin: 0; font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; max-width: 18ch; text-wrap: balance; } @media (min-width: 768px) { .grove__trees { width: 118%; } } @media (min-width: 1100px) { .grove { margin-inline: 0; } .grove__trees { width: 100%; } .grove__num { font-size: clamp(14rem, 26vw, 25rem); } } .realty__grid { display: grid; gap: 20px; } .checklist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .checklist li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; padding: 18px 2px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500; letter-spacing: -0.015em; } .checklist svg { width: 22px; height: 22px; color: var(--lilac-deep); } .realty__cta { border-radius: var(--r-xl); padding: 26px; display: grid; gap: 16px; align-content: start; } @media (min-width: 1100px) { .realty__grid { grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; } .realty__cta { padding: 34px; position: sticky; top: 110px; } } /* ---------- 17. Бизнес (тёмная секция) ---------- */ .ink-panel { position: relative; margin-inline: 8px; border-radius: var(--r-xl); background: var(--ink); color: #fff; overflow: hidden; padding-block: clamp(72px, 9vw, 140px); background: radial-gradient(70% 50% at 100% 0%, rgba(189, 180, 255, 0.18), transparent 60%), radial-gradient(60% 40% at 0% 100%, rgba(189, 180, 255, 0.10), transparent 60%), var(--ink); } .ink-panel .h2, .ink-panel .h3 { color: #fff; } .ink-panel .h2 { line-height: 1.08; letter-spacing: -0.035em; max-width: 16ch; } .ink-panel > .container { z-index: 1; } /* листья растут из краёв панели: целые, тихо качаются */ .biz-leaves { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .bl { position: absolute; width: clamp(64px, 8vw, 116px); height: auto; opacity: 0.95; animation: bl-sway 7s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } .bl--tr1 { right: -26px; top: 7%; --r: 214deg; width: clamp(80px, 9vw, 130px); } .bl--tr2 { right: 34px; top: -30px; --r: 168deg; animation-delay: -2.4s; } .bl--tr3 { right: -18px; top: calc(7% + clamp(70px, 8vw, 110px)); --r: 250deg; width: clamp(48px, 5vw, 72px); animation-delay: -4.1s; } .bl--bl1 { left: -30px; bottom: 9%; --r: 36deg; width: clamp(76px, 8.5vw, 120px); animation-delay: -1.2s; } .bl--bl2 { left: 30px; bottom: -34px; --r: -8deg; width: clamp(54px, 6vw, 86px); animation-delay: -3.3s; } @keyframes bl-sway { from { transform: rotate(calc(var(--r) - 4deg)); } to { transform: rotate(calc(var(--r) + 4deg)); } } @media (max-width: 767px) { .bl--tr2, .bl--tr3 { display: none; } } /* листик падает с карточки при наведении (декоративно, только мышь) */ .biz { position: relative; } .fall-leaf { position: absolute; z-index: 4; top: 8px; left: var(--x); width: var(--s); pointer-events: none; opacity: 0; animation: fall-leaf var(--d) cubic-bezier(0.33, 0, 0.45, 1) forwards; } @keyframes fall-leaf { 0% { opacity: 0; transform: translate3d(0, -4px, 0) rotate(var(--r0)); } 14% { opacity: 1; } 40% { transform: translate3d(calc(var(--dx) * -0.6), calc(var(--dy) * 0.4), 0) rotate(calc(var(--r0) + 40deg)); } 75% { opacity: 0.9; } 100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--r1)); } } .ink-panel .tone-lilac { color: var(--lilac); } .ink-panel .eyebrow { color: rgba(255, 255, 255, 0.6); } .ink-panel .eyebrow__num { color: var(--lilac); } .ink-panel .body, .ink-panel .lead { color: rgba(255, 255, 255, 0.62); } .biz__list { display: grid; gap: 10px; } .biz { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 20px; border-radius: var(--r-lg); transition: transform var(--d-press) var(--ease-out); } .biz:active { transform: scale(0.985); } .biz__num { grid-row: span 2; font-size: 13px; font-weight: 700; color: var(--lilac); font-variant-numeric: tabular-nums; padding-top: 4px; } .biz .h3 { font-size: 21px; } .biz .body { font-size: 14px; } .biz--accent { background: linear-gradient(140deg, rgba(189, 180, 255, 0.95), rgba(167, 156, 247, 0.85)); color: var(--ink); } .biz--accent .h3 { color: var(--ink); } .biz--accent .body { color: rgba(21, 18, 28, 0.72); } .biz--accent .biz__num { color: var(--ink); } .biz__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; } .biz__cta p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.6); max-width: 34ch; } @media (min-width: 768px) { .biz__list { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .ink-panel { margin-inline: 16px; } .biz__list { grid-template-columns: repeat(4, 1fr); gap: 12px; } .biz { grid-template-columns: 1fr; min-height: 260px; align-content: space-between; padding: 26px; } .biz__num { grid-row: auto; } } /* ---------- 18. Лояльность: растём как берёза ---------- */ .levels { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .levels::-webkit-scrollbar { display: none; } .level { scroll-snap-align: start; display: grid; grid-template-rows: 210px auto; border-radius: var(--r-lg); background: var(--mist); overflow: hidden; } .level__art { position: relative; display: grid; place-items: end center; background: linear-gradient(180deg, #fff, var(--mist)); } .level__art img.lv { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: auto; max-width: 90%; object-fit: contain; } .level__art img.lv1 { height: 46%; } .level__art img.lv2 { height: 84%; } .level__art img.lv3 { height: 90%; } .level__art img.lv4 { height: 90%; } section[id], [id='facts'] { scroll-margin-top: 84px; } .level__ground { position: absolute; left: 12%; right: 12%; bottom: 0; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 100, 80, 0.22), transparent); } .level__body { padding: 20px; display: grid; gap: 8px; } .level__name { font-size: 13px; font-weight: 700; color: var(--lilac-deep); } .level .h3 { font-size: 22px; } .ph { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 1px dashed var(--lilac-400); color: var(--lilac-deep); font-size: 13px; font-weight: 700; justify-self: start; } .level--top { background: linear-gradient(180deg, var(--lilac-100), var(--lilac-50)); } .level--top .level__art { background: linear-gradient(180deg, #fff, var(--lilac-100)); } /* общий холм разрезан на 4 кадра; у каждого убраны листья соседних деревьев */ /* кадр всегда квадратный: дерево по центру и целиком на любой ширине, края кадра чистые */ .levels--hills .level { grid-template-rows: auto 1fr; align-content: start; } .levels--hills .level__art { width: 100%; height: auto; aspect-ratio: 1 / 1; align-self: start; background: var(--lv) 50% 50% / cover no-repeat, #eef4fb; } .levels--hills .level:nth-child(1) .level__art { --lv: url(../img/gen/level-1.webp?v=23); } .levels--hills .level:nth-child(2) .level__art { --lv: url(../img/gen/level-2.webp?v=23); } .levels--hills .level:nth-child(3) .level__art { --lv: url(../img/gen/level-3.webp?v=23); } .levels--hills .level:nth-child(4) .level__art { --lv: url(../img/gen/level-4.webp?v=23); } @media (min-width: 540px) and (max-width: 767px) { .levels { grid-auto-columns: 52%; } } @media (min-width: 768px) and (max-width: 1099px) { .levels { grid-auto-columns: 40%; } } @media (min-width: 1100px) { .levels { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; gap: 12px; } .level { grid-template-rows: 300px auto; } .levels--hills { grid-template-columns: repeat(4, minmax(0, 1fr)); } .levels--hills .level { grid-template-rows: auto 1fr; } } /* реферальная программа: горизонтально — заголовок, три шага в ряд, кнопка внизу справа */ .referral { margin-top: 16px; border-radius: var(--r-xl); padding: 24px; display: grid; gap: 22px; background: linear-gradient(140deg, var(--lilac-50), #fff 70%); box-shadow: inset 0 0 0 1px var(--lilac-100); } .referral__head { display: grid; gap: 12px; } .referral__head .h3 { max-width: 30ch; line-height: 1.18; } .referral__steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: r; } .referral__steps li { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; row-gap: 2px; align-items: baseline; padding: 14px 16px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 0 0 1px var(--line); } .referral__steps li::before { counter-increment: r; content: counter(r, decimal-leading-zero); grid-row: span 2; font-size: 12px; font-weight: 700; color: var(--lilac-deep); } .referral__steps b { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; } .referral__steps span { font-size: 13px; color: var(--text-2); } .referral__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 4px; border-top: 1px solid var(--line); padding-top: 18px; } .referral__foot p { margin: 0; font-size: 14px; color: var(--text-2); } @media (min-width: 768px) { .referral { padding: 32px; } .referral__steps { grid-template-columns: repeat(3, 1fr); gap: 10px; } } @media (min-width: 1100px) { .referral { padding: 36px 40px; grid-template-columns: 1fr 1.25fr; column-gap: 48px; align-items: center; } .referral__head .h3 { max-width: 24ch; } .referral__foot { grid-column: 1 / -1; } } /* ---------- 19. Отзывы: сцена небо → холм → плитка с логотипом (слои с разной скоростью) ---------- */ .reviews-sec { position: relative; isolation: isolate; padding-top: 0; } .rev-scene { position: relative; z-index: 0; height: clamp(360px, 62vw, 560px); margin: 0 calc(var(--gutter) * -1) clamp(-140px, -10vw, -60px); border-radius: 0 0 var(--r-xl) var(--r-xl); overflow: hidden; background: #cfe3fb; } .rev-scene img { position: absolute; pointer-events: none; max-width: none; } .rev-scene__sky { inset: -12% 0 auto 0; width: 100%; height: 124%; object-fit: cover; object-position: 50% 30%; } .rev-scene__hill { left: 50%; bottom: 0; width: max(150%, 900px); height: auto; translate: -50% 46%; } .rev-scene__tile { position: absolute; left: 50%; bottom: 30%; width: clamp(118px, 24vw, 220px); translate: -50% 0; z-index: 1; pointer-events: none; } .rev-scene__tile img { position: relative; width: 100%; height: auto; animation: tile-float 5.2s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } .rev-scene__tile::after { /* мягкая тень на траве: плитка парит */ content: ''; position: absolute; left: 18%; right: 18%; bottom: -26%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 60, 30, 0.28), transparent); animation: tile-shadow 5.2s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } @keyframes tile-float { from { transform: translateY(-14px) rotate(-4deg); } to { transform: translateY(14px) rotate(3deg); } } @keyframes tile-shadow { from { transform: scale(0.78); opacity: 0.55; } to { transform: scale(1.04); opacity: 1; } } .rev-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .rev-rating { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 12px; border-radius: var(--r-pill); background: var(--mist); font-size: 12px; font-weight: 600; line-height: 1.15; color: var(--text-2); transition: background-color var(--d-fast) var(--ease); } .rev-rating b { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); } .rev-rating__stars, .review__stars { color: #f5b301; letter-spacing: 1px; font-size: 13px; } @media (hover: hover) and (pointer: fine) { .rev-rating:hover { background: var(--cloud); } } .rev-head { position: relative; z-index: 2; margin-top: -24px; padding: 26px 22px; border-radius: var(--r-xl); background: var(--paper); } .reviews-sec .reviews { position: relative; z-index: 2; } .reviews-sec .review { box-shadow: 0 1px 2px rgba(21, 18, 28, 0.04), 0 18px 40px -26px rgba(30, 40, 60, 0.35); } @media (min-width: 1100px) { .rev-scene { margin-inline: 0; border-radius: 40px; height: 600px; margin-top: 16px; margin-bottom: -170px; } .rev-scene__hill { width: 110%; translate: -50% 52%; } .rev-scene__tile { bottom: 34%; } .rev-head { margin-top: 0; margin-inline: 28px; padding: 30px 34px; } .reviews-sec .reviews { padding-inline: 28px; scroll-padding-inline: 28px; } } .reviews { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 8px; scrollbar-width: none; } .reviews::-webkit-scrollbar { display: none; } .review { scroll-snap-align: start; background: var(--paper); border-radius: var(--r-lg); padding: 22px; display: grid; gap: 18px; align-content: space-between; box-shadow: var(--sh-1); min-height: 260px; } .review__src { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-2); } .review__src svg { width: 22px; height: 22px; } .review__text { margin: 0; font-size: 17px; line-height: 1.45; letter-spacing: -0.015em; font-weight: 500; color: var(--ink); text-wrap: pretty; } .review__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; } .review__foot a { display: inline-flex; gap: 6px; align-items: center; color: var(--lilac-deep); font-size: 13px; } .review__foot a svg { width: 14px; height: 14px; } .review { position: relative; } .review__foot a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } .review__foot a:focus-visible { outline: none; } .review:has(a:focus-visible) { outline: 2px solid var(--lilac-ink); outline-offset: 3px; } /* подъём через translate, чтобы не спорить с transform появления; у hover нет задержки появления */ .reviews .review { transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out), translate 550ms var(--ease-out), box-shadow 550ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0ms, 0ms; } @media (hover: hover) and (pointer: fine) { .reviews .review:hover { translate: 0 -3px; } .reviews-sec .review:hover { box-shadow: 0 1px 2px rgba(21, 18, 28, 0.04), 0 26px 48px -26px rgba(30, 40, 60, 0.42); } .review:hover .btn__arrow { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .reviews .review:hover { translate: none; } } .arrows { display: none; } @media (min-width: 1100px) { .reviews { grid-auto-columns: calc((100% - 24px) / 3); gap: 12px; margin: 0; padding: 0 0 8px; } .arrows { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); height: 48px; } .arrows button { width: 54px; display: grid; place-items: center; transition: transform var(--d-press) var(--ease-out); } .arrows button:active { transform: scale(0.92); } .arrows button + button { border-left: 1px solid var(--line-strong); } .arrows svg { width: 18px; height: 18px; } } /* ---------- 20. Жизнь Пхукета ---------- */ .life { display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .life::-webkit-scrollbar { display: none; } .life__card { scroll-snap-align: start; display: grid; gap: 12px; align-content: start; } .life__photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(160deg, var(--cloud) 0%, var(--lilac-100) 100%); display: grid; place-items: center; color: var(--text-3); font-size: 13px; font-weight: 600; } .life__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .life__photo span { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: var(--r-pill); } .life__card b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; } .life__card p { margin: 0; font-size: 14px; color: var(--text-2); } @media (min-width: 1100px) { .life { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; gap: 14px; } } /* ---------- 21. Офис ---------- */ .office__photos { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1) 12px; padding-inline: var(--gutter); scrollbar-width: none; } .office__photos::-webkit-scrollbar { display: none; } /* горизонтальные ленты: после прилипания первая карточка держит отступ от края экрана */ .levels, .reviews, .life, .office__photos { scroll-padding-inline: var(--gutter); } .office__photos figure { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 4.6; scroll-snap-align: start; } .office__photos img { width: 100%; height: 100%; object-fit: cover; } .office__photos .pill { position: absolute; left: 14px; bottom: 14px; } @media (min-width: 1100px) { .office__photos { grid-auto-flow: row; grid-template-columns: 1.3fr 1fr 1fr; margin: 0 0 14px; padding: 0; overflow: visible; } .office__photos figure { aspect-ratio: auto; height: 420px; } } .office { display: grid; gap: 12px; } .office__map { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3.2; background: #f3f1fb; } .office__map svg { width: 100%; height: 100%; } .office__pin i { animation: pin-pulse 2.6s var(--ease-out) infinite; } @keyframes pin-pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(189, 180, 255, 0.6), 0 0 0 14px rgba(189, 180, 255, 0.22); } 50% { box-shadow: 0 0 0 7px rgba(189, 180, 255, 0.65), 0 0 0 22px rgba(189, 180, 255, 0); } } .office__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-100% + 8px)); display: grid; justify-items: center; gap: 6px; } .office__map .map-svg { display: block; width: 100%; height: 100%; } .office__attr { position: absolute; right: 12px; bottom: 10px; font-size: 10.5px; font-weight: 600; color: var(--text-3); } .office__pin b { padding: 8px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; white-space: nowrap; } .office__pin i { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 6px rgba(189, 180, 255, 0.6), 0 0 0 14px rgba(189, 180, 255, 0.22); } .office__card { border-radius: var(--r-xl); padding: 26px; background: var(--mist); display: grid; gap: 14px; align-content: start; } .office__status { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: var(--paper); font-size: 13px; font-weight: 600; justify-self: start; box-shadow: var(--sh-1); } .office__status.is-closed .dot { background: var(--text-3); } .office__status.is-closed .dot::after { display: none; } .office__addr { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.4; } @media (min-width: 1100px) { .office { grid-template-columns: 1.4fr 1fr; gap: 14px; } .office__map { aspect-ratio: auto; min-height: 460px; } .office__card { padding: 36px; align-content: space-between; } } /* ---------- 22. Финальный CTA ---------- */ .final { --card-bg: linear-gradient(170deg, var(--lilac-50) 0%, #ece8ff 100%); --notch-bg: var(--paper); --nw: 92px; --nh: 52px; --nr: 18px; position: relative; border-radius: var(--r-xl); padding: 86px 22px 0; overflow: visible; display: grid; gap: 22px; } /* круглая рамка вокруг круглого логотипа: диск цвета страницы + мягкие переходы в край карточки */ .final .notch--top { width: 88px; height: 88px; top: -32px; border-radius: 50%; } .final .notch--top::before { top: 32px; right: calc(100% - 2px); } .final .notch--top::after { top: 32px; left: calc(100% - 2px); } .final .notch--top .notch__btn { width: 64px; height: 64px; inset: 12px auto auto 50%; transform: translateX(-50%); padding: 0; overflow: hidden; background: transparent; box-shadow: none; border-radius: 50%; } .final .notch--top .notch__btn img { width: 64px; height: 64px; } .final__copy { display: grid; gap: 16px; justify-items: center; text-align: center; position: relative; z-index: 2; } .final__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; } /* маскот сидит на верхнем крае блока: бревно лежит ЗА блоком (бока спрятаны), ноги — отдельный слой поверх. Край блока проходит по линии 68.8% высоты картинки — там верх мха; оба слоя качаются синхронно. */ .final-wrap { --pw: min(80vw, 330px); position: relative; margin-top: calc(var(--pw) * 0.36); } .final-wrap > .final { position: relative; z-index: 1; } .perch-layer { position: absolute; z-index: 0; left: 50%; top: calc(var(--pw) * -0.3877); width: var(--pw); margin-left: calc(var(--pw) / -2); pointer-events: none; } .perch-layer--front { z-index: 2; } .perch-layer img { display: block; width: 100%; height: auto; transform-origin: 50% 69%; animation: perch-sway 7s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } @keyframes perch-sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } } .final { padding: calc(var(--pw) * 0.12 + 40px) 22px 48px; } @media (min-width: 768px) { .final-wrap { --pw: 500px; } } @media (min-width: 1100px) { .final-wrap { --pw: 600px; } .final { padding: calc(var(--pw) * 0.1 + 56px) 40px 72px; } } /* ---------- 23. Подвал ---------- */ .footer { padding-top: clamp(64px, 8vw, 120px); padding-bottom: 28px; overflow: clip; } .footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; } .footer__brand { grid-column: 1 / -1; display: grid; gap: 16px; } .footer__brand img { width: 190px; } .footer__h { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--text-2); } .footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .footer__col a { font-size: 15px; font-weight: 500; } .footer__mark { position: relative; margin-top: 56px; } .footer__word { display: block; font-family: var(--font); font-size: clamp(6rem, 29vw, 27rem); font-weight: 500; letter-spacing: -0.06em; line-height: 0.8; color: var(--cloud-2); user-select: none; text-align: center; padding-right: 0.04em; } .footer__word::before { content: attr(data-word); } .footer__mark { padding-bottom: 13vw; } .footer__branch { position: absolute; left: calc((100% - 100vw) / 2); width: 100vw; max-width: none; bottom: 0; rotate: -2deg; pointer-events: none; z-index: 1; } .footer__mark { margin-top: clamp(72px, 9vw, 140px); } .footer__legal { display: grid; gap: 8px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-2); } .footer__legal a { text-decoration: underline; text-underline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .footer__col a:hover { color: var(--lilac-deep); } } @media (min-width: 1100px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .footer__brand { grid-column: auto; } .footer__legal { grid-template-columns: 1fr auto auto; gap: 30px; } } /* ---------- 24. Появление при скролле ---------- */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); } [data-reveal].is-in { opacity: 1; transform: none; } /* заголовок по словам: blur-in */ .split .w { display: inline-block; white-space: pre; } .split .w > span { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(0.22em); transition: opacity 760ms var(--ease-out), filter 760ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--wi, 0) * 55ms + var(--base, 0ms)); } .split.is-in .w > span { opacity: 1; filter: blur(0); transform: none; } /* ---------- 25. Доступность: меньше движения ---------- */ @media (prefers-reduced-motion: reduce) { .hero [data-reveal], .page-hero [data-reveal], .split[data-split-auto] .w > span { animation: none; opacity: 1; transform: none; filter: none; } .page-hero__obj, .nf__leaf { animation: none; } [data-reveal] { transform: none; transition: opacity 300ms ease; } .split .w > span { transform: none; filter: none; transition: opacity 300ms ease; } .leaves { display: none; } .step.is-reached .step__node img, .bl, .rev-scene__tile img, .rev-scene__tile::after, .perch-layer img, .office__pin i { animation: none; } .fall-leaf { display: none; } .sway { animation: none; } .dot::after { animation: none; } .sheet, .menu-open .sheet { transition: visibility 0s, clip-path 0s; } .sheet [data-stagger], .menu-open .sheet [data-stagger] { transform: none; } .svc__obj, .step__node { transition: opacity 200ms ease; } } /* ========================================================================== 26. Первый экран без ожидания скрипта Раньше hero проявлялся, когда JS добавит .is-in, и LCP ждал скрипт. Теперь элементы первого экрана проявляются CSS-анимацией сразу после отрисовки. ========================================================================== */ @keyframes reveal-in { from { opacity: 0; transform: translateY(18px); } } @keyframes reveal-wm { from { opacity: 0; transform: translateY(0.14em); } } @keyframes reveal-branch { from { opacity: 0; transform: translate3d(-3%, 0, 0); } } @keyframes word-in { from { opacity: 0; filter: blur(8px); transform: translateY(0.22em); } } .hero [data-reveal], .page-hero [data-reveal] { opacity: 1; transform: none; transition: none; animation: reveal-in 900ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); } .hero__wm > span[data-reveal] { animation-name: reveal-wm; } .hero__branch [data-reveal] { animation-name: reveal-branch; animation-duration: 1300ms; } /* заголовок первого экрана делится на слова встроенным скриптом прямо в разметке — до первой отрисовки */ .split[data-split-auto] .w > span { opacity: 1; filter: none; transform: none; transition: none; animation: word-in 760ms var(--ease-out) both; animation-delay: calc(var(--wi, 0) * 55ms + 160ms); } /* ========================================================================== 27. Внутренние страницы ========================================================================== */ /* хлебные крошки */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 500; color: var(--text-2); } .crumbs li { display: inline-flex; align-items: center; gap: 6px; } .crumbs li + li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--cloud-2); } .crumbs a { transition: color 300ms var(--ease); } @media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--lilac-deep); } } /* hero внутренней страницы: текст слева, 3D-объект лежит на ветке, ветка уходит в правый край экрана */ .page-hero { position: relative; padding: 104px 0 clamp(48px, 6vw, 96px); overflow-x: clip; } .page-hero__grid { display: grid; gap: 8px; } .page-hero__copy { position: relative; z-index: 3; display: grid; gap: 18px; align-content: start; justify-items: start; } .page-hero__title { margin: 0; font-size: clamp(2.5rem, 1.55rem + 4.2vw, 5.25rem); font-weight: 500; line-height: 0.96; letter-spacing: -0.048em; text-wrap: balance; } .page-hero__copy .lead { max-width: 40ch; } .page-hero__ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .page-hero__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; } .page-hero__facts li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--mist); font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; } .page-hero__facts svg { width: 16px; height: 16px; color: var(--lilac-deep); } .page-hero__art { position: relative; z-index: 1; height: clamp(300px, 86vw, 420px); margin-inline: calc(var(--gutter) * -1); pointer-events: none; } .page-hero__blob { position: absolute; left: 50%; top: 46%; width: 92%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(189, 180, 255, 0.55), rgba(189, 180, 255, 0.14) 62%, rgba(189, 180, 255, 0)); } .page-hero__branch { position: absolute; z-index: 1; left: 2%; bottom: 4%; width: 190%; max-width: none; height: auto; rotate: -5deg; transform-origin: 0 50%; } .page-hero__obj { position: absolute; z-index: 2; left: 50%; bottom: calc(4% + 38vw * 0.17 + 22px); width: min(54vw, 250px); height: auto; translate: -50% 0; filter: drop-shadow(0 26px 22px rgba(60, 44, 150, 0.22)); animation: obj-float 7s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } @keyframes obj-float { from { transform: translateY(-5px) rotate(-1.5deg); } to { transform: translateY(5px) rotate(1.5deg); } } @media (min-width: 768px) { .page-hero { padding-top: 120px; } .page-hero__art { height: 440px; } .page-hero__obj { width: 300px; bottom: 150px; } .page-hero__branch { width: 150%; left: 8%; } } @media (min-width: 1100px) { .page-hero { padding-top: 150px; min-height: min(860px, 100svh); } .page-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 40px; align-items: center; min-height: 560px; } .page-hero__copy { gap: 22px; } .page-hero__art { height: 560px; margin: 0; } .page-hero__blob { width: 100%; top: 44%; } .page-hero__branch { left: 6%; bottom: 22%; width: calc(100% + (100vw - min(100vw, var(--container) + var(--gutter) * 2)) / 2 + var(--gutter) + 200px); rotate: -4deg; } .page-hero__obj { width: 330px; bottom: calc(22% + 92px); left: 48%; } } /* полоса фактов под hero */ .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding-top: 28px; border-top: 1px solid var(--line); } .facts b { display: block; font-size: clamp(32px, 8vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.05em; color: var(--ink); font-variant-numeric: tabular-nums; } .facts span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--text-2); } @media (min-width: 1100px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } } /* карточки возможностей: объект + заголовок + текст */ .feats { display: grid; gap: 12px; } .feat { position: relative; display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: var(--r-lg); background: var(--cloud); min-height: 220px; overflow: hidden; } .feat__obj { width: 96px; height: 96px; object-fit: contain; margin: -6px 0 6px -6px; filter: drop-shadow(0 12px 14px rgba(60, 44, 150, 0.16)); transition: transform 520ms var(--ease-out); } .feat__num { font-size: 13px; font-weight: 700; color: var(--lilac-deep); font-variant-numeric: tabular-nums; } .feat .h3 { font-size: 22px; } .feat .body { font-size: 15px; } .feat ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--text-2); } .feat ul li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; } .feat ul svg { width: 16px; height: 16px; margin-top: 3px; color: var(--lilac-deep); } .feat--accent { background: linear-gradient(160deg, #f4f2fb 0%, #ebe7fb 100%); } .feat--ink { background: var(--ink); color: #fff; } .feat--ink .h3 { color: #fff; } .feat--ink .body, .feat--ink ul { color: rgba(255, 255, 255, 0.66); } .feat--ink .feat__num, .feat--ink ul svg { color: var(--lilac); } a.feat { transition: transform var(--d-press) var(--ease-out); } a.feat:active { transform: scale(0.985); } a.feat .link { margin-top: auto; padding-top: 8px; } @media (hover: hover) and (pointer: fine) { a.feat:hover .feat__obj { transform: translateY(-6px) rotate(-3deg); } } @media (min-width: 768px) { .feats { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .feats { gap: 14px; } .feats--3 { grid-template-columns: repeat(3, 1fr); } .feats--4 { grid-template-columns: repeat(4, 1fr); } .feat { padding: 30px; min-height: 260px; } } /* двухколоночный блок: текст + список/карточка */ .duo { display: grid; gap: 28px; } .duo__copy { display: grid; gap: 18px; align-content: start; } @media (min-width: 1100px) { .duo { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .duo--wide { grid-template-columns: 1.2fr 0.8fr; } .duo__side { position: sticky; top: 110px; } } /* плашка-кейс с фото */ .case { display: grid; gap: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--mist); } .case__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .case__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .case__body { display: grid; gap: 14px; padding: 26px; align-content: center; } .case__quote { margin: 0; font-size: clamp(19px, 1.2rem + 0.5vw, 26px); font-weight: 500; line-height: 1.3; letter-spacing: -0.025em; color: var(--ink); text-wrap: pretty; } @media (min-width: 1100px) { .case { grid-template-columns: 0.9fr 1.1fr; } .case__photo { aspect-ratio: auto; min-height: 420px; } .case__body { padding: 48px; } } /* таблица условий: строки «параметр — значение» */ .terms { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .terms li { display: grid; gap: 4px; padding: 18px 2px; border-bottom: 1px solid var(--line); } .terms dt, .terms b { font-size: 13px; font-weight: 600; color: var(--text-2); } .terms span { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); } @media (min-width: 768px) { .terms li { grid-template-columns: 0.9fr 1.1fr; gap: 20px; align-items: baseline; } } /* FAQ: нативный details, мягкое раскрытие высоты там, где браузер умеет */ .faq { border-top: 1px solid var(--line); max-width: 900px; } .faq details { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; } .faq summary { display: grid; grid-template-columns: 1fr 36px; gap: 16px; align-items: center; padding: 22px 2px; cursor: pointer; list-style: none; font-size: clamp(17px, 1rem + 0.35vw, 20px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; } .faq summary::-webkit-details-marker { display: none; } .faq__icon { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--mist); transition: background-color 300ms var(--ease); } .faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -0.8px 0 0 -6px; border-radius: 2px; background: var(--ink); transition: transform 300ms var(--ease-out); } .faq__icon::after { transform: rotate(90deg); } .faq details[open] .faq__icon::after { transform: rotate(0deg); } .faq details[open] .faq__icon { background: var(--lilac-100); } .faq details::details-content { height: 0; overflow: clip; transition: height 320ms var(--ease-out), content-visibility 320ms allow-discrete; } .faq details[open]::details-content { height: auto; } .faq__a { padding: 0 52px 24px 2px; color: var(--text-2); font-size: 16px; line-height: 1.6; } .faq__a p { margin: 0 0 10px; } .faq__a p:last-child { margin: 0; } @media (hover: hover) and (pointer: fine) { .faq summary:hover .faq__icon { background: var(--cloud); } } /* фильтр отзывов */ .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .filters button { height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-size: 14px; font-weight: 600; color: var(--ink-2); transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease), transform var(--d-press) var(--ease-out); } .filters button:active { transform: scale(0.96); } .filters button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; } .filters button span { margin-left: 6px; color: var(--text-3); font-variant-numeric: tabular-nums; } .filters button[aria-pressed='true'] span { color: rgba(255, 255, 255, 0.6); } @media (hover: hover) and (pointer: fine) { .filters button[aria-pressed='false']:hover { background: var(--mist); } } .reviews-grid { columns: 1; column-gap: 12px; } .reviews-grid .review { break-inside: avoid; margin-bottom: 12px; min-height: 0; box-shadow: 0 1px 2px rgba(21, 18, 28, 0.04), 0 18px 40px -28px rgba(30, 40, 60, 0.35); border: 1px solid var(--line); } .reviews-grid .review[hidden] { display: none; } .reviews-grid .review__text { font-size: 16px; } @media (min-width: 768px) { .reviews-grid { columns: 2; } } @media (min-width: 1100px) { .reviews-grid { columns: 3; column-gap: 14px; } .reviews-grid .review { margin-bottom: 14px; } } @media (hover: hover) and (pointer: fine) { .reviews-grid .review { transition: translate 550ms var(--ease-out), box-shadow 550ms var(--ease-out); } .reviews-grid .review:hover { translate: 0 -3px; box-shadow: 0 1px 2px rgba(21, 18, 28, 0.04), 0 26px 48px -26px rgba(30, 40, 60, 0.42); } } .rev-summary { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* контакты */ .contacts { display: grid; gap: 10px; } .contact { position: relative; display: grid; grid-template-columns: 48px 1fr 20px; gap: 14px; align-items: center; padding: 18px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-1); border: 1px solid var(--line); transition: translate 550ms var(--ease-out), box-shadow 550ms var(--ease-out); } .contact__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--mist); } .contact__ico svg { width: 22px; height: 22px; } .contact b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; } .contact span { display: block; font-size: 13px; color: var(--text-2); line-height: 1.4; } .contact .chev { width: 18px; height: 18px; color: var(--text-3); transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1); } .contact--main { background: var(--ink); color: #fff; border-color: transparent; } .contact--main span { color: rgba(255, 255, 255, 0.66); } .contact--main .contact__ico { background: rgba(255, 255, 255, 0.1); } .contact--main .chev { color: rgba(255, 255, 255, 0.6); } @media (hover: hover) and (pointer: fine) { a.contact:hover { translate: 0 -2px; box-shadow: var(--sh-2); } a.contact:hover .chev { transform: translateX(4px); } } @media (min-width: 768px) { .contacts { grid-template-columns: 1fr 1fr; } .contact--main { grid-column: 1 / -1; } } .note { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); background: var(--lilac-50); font-size: 14px; line-height: 1.5; color: var(--ink-2); } .note svg { width: 20px; height: 20px; color: var(--lilac-deep); margin-top: 1px; } /* ========================================================================== 28. Заявка: форма и диалог ========================================================================== */ .req { display: grid; gap: 14px; } .req__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--lilac-50); font-size: 14px; font-weight: 600; color: var(--ink-2); } .req__summary[hidden] { display: none; } .req__summary b { font-size: 17px; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .req__summary svg { width: 16px; height: 16px; color: var(--lilac-deep); } .field { display: grid; gap: 6px; } .field__label { font-size: 13px; font-weight: 600; color: var(--ink-2); } .field__input { width: 100%; height: 52px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--paper); font-size: 16px; color: var(--ink); outline: none; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); } textarea.field__input { height: auto; min-height: 92px; padding: 14px 16px; resize: vertical; line-height: 1.45; font: inherit; font-size: 16px; } .field__input::placeholder { color: var(--text-3); } .field__input:focus { border-color: var(--lilac-400); box-shadow: 0 0 0 4px rgba(189, 180, 255, 0.28); } .field.is-invalid .field__input { border-color: #d14b6a; box-shadow: 0 0 0 4px rgba(209, 75, 106, 0.12); } .field__err { min-height: 0; font-size: 12.5px; font-weight: 600; color: #b3324f; } .field__err:empty { display: none; } .seg-mini { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--mist); justify-self: start; } .seg-mini button { height: 36px; padding: 0 14px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: background-color 240ms var(--ease-out), color 240ms var(--ease), box-shadow 240ms var(--ease); } .seg-mini button[aria-pressed='true'] { background: var(--paper); color: var(--ink); box-shadow: var(--sh-1); } .check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--text-2); cursor: pointer; } .check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); } .check a { text-decoration: underline; text-underline-offset: 3px; } .req__row { display: grid; gap: 14px; } @media (min-width: 768px) { .req__row { grid-template-columns: 1fr 1fr; } } .req__submit { position: relative; } .req__submit .spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: spin 700ms linear infinite; } .req.is-sending .req__submit .spin { display: block; } .req.is-sending .req__submit { pointer-events: none; opacity: 0.86; } @keyframes spin { to { transform: rotate(360deg); } } .req__state { display: grid; gap: 14px; justify-items: start; padding: 6px 0; } .req__state[hidden] { display: none; } .req__state-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac-100); color: var(--lilac-deep); } .req__state-ico svg { width: 26px; height: 26px; } .req__state--err .req__state-ico { background: #fde8ee; color: #b3324f; } .req__state .h3 { font-size: 24px; } .req__actions { display: flex; flex-wrap: wrap; gap: 8px; } .req-card { border-radius: var(--r-xl); padding: 24px; background: var(--paper); box-shadow: var(--sh-2); border: 1px solid var(--line); } @media (min-width: 1100px) { .req-card { padding: 36px; } } /* диалог заявки: на телефоне — лист снизу, на компьютере — карточка по центру */ .req-dialog { width: 100%; max-width: 100%; max-height: 92svh; margin: auto 0 0; padding: 0; border: 0; border-radius: 28px 28px 0 0; background: var(--paper); color: var(--ink); box-shadow: var(--sh-3); overflow: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(24px); transition: opacity 240ms var(--ease-out), transform 320ms var(--ease-drawer), overlay 320ms allow-discrete, display 320ms allow-discrete; } .req-dialog[open] { opacity: 1; transform: none; } @starting-style { .req-dialog[open] { opacity: 0; transform: translateY(24px); } } .req-dialog::backdrop { background: rgba(21, 18, 28, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background-color 280ms var(--ease-out), backdrop-filter 280ms var(--ease-out), overlay 280ms allow-discrete, display 280ms allow-discrete; } .req-dialog[open]::backdrop { background: rgba(21, 18, 28, 0.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } @starting-style { .req-dialog[open]::backdrop { background: rgba(21, 18, 28, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } } .req-dialog__in { position: relative; display: grid; gap: 18px; padding: 26px 20px calc(22px + env(safe-area-inset-bottom)); } .req-dialog__head { display: grid; gap: 6px; padding-right: 48px; } .req-dialog__head .h3 { font-size: 26px; } .req-dialog__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); transition: transform var(--d-press) var(--ease-out), background-color 300ms var(--ease); } .req-dialog__close:active { transform: scale(0.92); } .req-dialog__close svg { width: 16px; height: 16px; } @media (hover: hover) and (pointer: fine) { .req-dialog__close:hover { background: var(--cloud); } } @media (min-width: 768px) { .req-dialog { width: min(560px, calc(100vw - 48px)); margin: auto; border-radius: var(--r-xl); transform: translateY(12px) scale(0.98); } .req-dialog[open] { transform: none; } @starting-style { .req-dialog[open] { transform: translateY(12px) scale(0.98); } } .req-dialog__in { padding: 34px 34px 30px; } } @media (prefers-reduced-motion: reduce) { .req-dialog, .req-dialog::backdrop { transition: opacity 150ms ease, overlay 150ms allow-discrete, display 150ms allow-discrete; transform: none; } } html.dialog-open { overflow: hidden; } /* ========================================================================== 29. 404 ========================================================================== */ .nf { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 120px 0 72px; overflow: clip; text-align: center; } .nf__in { position: relative; z-index: 2; display: grid; justify-items: center; gap: 18px; } .nf__num { font-size: clamp(8rem, 5rem + 18vw, 18rem); font-weight: 500; line-height: 0.8; letter-spacing: -0.07em; color: var(--ink); } .nf__num span { color: var(--lilac-ink); } .nf__leaf { position: absolute; z-index: 1; width: clamp(54px, 7vw, 90px); animation: obj-float 6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } .nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; } /* hero страницы с фото вместо объекта (офис и контакты) */ .page-hero__photo { position: relative; z-index: 2; margin: 18px 0 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3.4; box-shadow: var(--sh-2); } .page-hero__photo img { width: 100%; height: 100%; object-fit: cover; } .page-hero__photo .pill { position: absolute; left: 14px; bottom: 14px; } @media (min-width: 1100px) { .page-hero__photo { margin: 0; aspect-ratio: 4 / 4.2; } } /* листья в hero внутренних страниц: растворяются к низу, не мешают тексту */ .page-hero .leaves { z-index: 2; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%); } /* обёртки анимации появления растянуты на всю сцену: ветка и объект позиционируются от сцены, а не от пустой обёртки */ .page-hero__art > [data-reveal] { position: absolute; inset: 0; } /* размер объекта задаём высотой: высокий банкомат и широкий дом выглядят соразмерно */ .page-hero__art { height: 360px; } .page-hero__obj { width: auto; height: 220px; max-width: 78%; bottom: 74px; } .page-hero__branch { bottom: 6%; } .page-hero__ctas .btn { padding: 0 18px; font-size: 14.5px; } @media (min-width: 768px) { .page-hero__art { height: 440px; } .page-hero__obj { height: 290px; bottom: 132px; } .page-hero__branch { bottom: 4%; } .page-hero__ctas .btn { padding: 0 24px; font-size: 15px; } } @media (min-width: 1100px) { .page-hero__art { height: 560px; } .page-hero__obj { height: 330px; bottom: calc(22% + 70px); } .page-hero__branch { bottom: 22%; } } /* hidden у формы сильнее display:grid; поля в строке выравниваются по верху, когда появляется ошибка */ .req[hidden] { display: none; } .req__row { align-items: start; } /* ========================================================================== 30. Пары кнопок: на телефоне и планшете — всегда в один ряд Не помещаются — сначала меньше кегль и поля, затем без стрелки, затем короче текст. ========================================================================== */ .btn-pair { display: flex; gap: 8px; } .btn-pair--fill > .btn { flex: 1 1 auto; } .hide-sm { display: inline; } @media (max-width: 1099px) { .btn-pair, .hero__ctas, .page-hero__ctas, .final__ctas, .req__actions, .rev-summary { display: flex; flex-wrap: nowrap; gap: 8px; } .btn-pair > *, .hero__ctas > *, .page-hero__ctas > *, .final__ctas > *, .req__actions > *, .rev-summary > * { flex: 0 1 auto; min-width: 0; } .btn-pair--fill > .btn { flex: 1 1 auto; } .page-hero__ctas:has(> .rev-summary) { width: 100%; } .rev-summary { width: 100%; } /* отзывы на главной: рейтинг отдельной строкой, две кнопки — рядом */ .rev-actions { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 10px 8px; } .rev-actions .rev-rating { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 767px) { .btn-pair > .btn, .hero__ctas > .btn, .page-hero__ctas > .btn, .final__ctas > .btn, .req__actions > .btn, .rev-summary > .btn, .rev-actions > .btn { --h: 48px; padding: 0 clamp(10px, 3.4vw, 16px); gap: 6px; font-size: clamp(13px, 3.65vw, 14.5px); letter-spacing: -0.02em; } .btn-pair > .btn .btn__arrow, .hero__ctas > .btn .btn__arrow, .page-hero__ctas > .btn .btn__arrow, .final__ctas > .btn .btn__arrow, .req__actions > .btn .btn__arrow, .rev-summary > .btn .btn__arrow, .rev-actions > .btn .btn__arrow { display: none; } .btn-pair > .btn svg, .final__ctas > .btn svg, .req__actions > .btn svg, .rev-summary > .btn svg, .rev-actions > .btn svg { width: 16px; height: 16px; } .rev-summary .rev-rating { height: 48px; padding: 0 12px 0 10px; gap: 8px; font-size: 11px; } .rev-summary .rev-rating b { font-size: 18px; } .hide-sm { display: none; } } /* ========================================================================== 31. Hero внутренних страниц без веток (правка 9.11): объект, мягкий круг, тень, листики по бокам ========================================================================== */ .page-hero__branch, .page-hero__blob { display: none; } .page-hero__art { height: 320px; } .page-hero__disc { position: absolute; left: 50%; top: 50%; width: min(82vw, 330px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #f6f4ff 0%, #eeebff 52%, #e7e2ff 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 30px 60px -40px rgba(70, 52, 170, 0.35); } .page-hero__obj { left: 50%; top: 50%; bottom: auto; height: 220px; translate: -50% -54%; } .page-hero__shadow { position: absolute; left: 50%; top: 50%; width: 46%; height: 26px; translate: -50% 96px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 44, 150, 0.26), rgba(60, 44, 150, 0)); animation: shadow-breathe 7s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } @keyframes shadow-breathe { from { transform: scale(1.04); opacity: 1; } to { transform: scale(0.9); opacity: 0.75; } } .page-hero__leaf { position: absolute; z-index: 3; height: auto; animation: bl-sway 7s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; filter: drop-shadow(0 8px 8px rgba(40, 60, 20, 0.12)); } .page-hero__leaf--1 { width: 46px; left: calc(50% - min(41vw, 165px) - 4px); top: 26%; --r: -28deg; } .page-hero__leaf--2 { width: 36px; right: calc(50% - min(41vw, 165px) + 6px); top: 18%; --r: 32deg; animation-delay: -2.6s; } .page-hero__leaf--3 { width: 30px; right: calc(50% - min(41vw, 165px) - 8px); top: 66%; --r: 140deg; animation-delay: -4.2s; } @media (min-width: 768px) { .page-hero__art { height: 420px; } .page-hero__disc { width: 380px; } .page-hero__obj { height: 270px; } .page-hero__shadow { translate: -50% 120px; } .page-hero__leaf--1 { width: 56px; left: calc(50% - 200px); } .page-hero__leaf--2 { width: 42px; right: calc(50% - 196px); } .page-hero__leaf--3 { width: 34px; right: calc(50% - 214px); } } @media (min-width: 1100px) { .page-hero__art { height: 540px; } .page-hero__disc { width: 460px; } .page-hero__obj { height: 330px; } .page-hero__shadow { translate: -50% 150px; } .page-hero__leaf--1 { width: 64px; left: calc(50% - 246px); top: 24%; } .page-hero__leaf--2 { width: 48px; right: calc(50% - 236px); top: 16%; } .page-hero__leaf--3 { width: 38px; right: calc(50% - 262px); top: 64%; } } @media (prefers-reduced-motion: reduce) { .page-hero__leaf, .page-hero__shadow { animation: none; } } /* счётчики в фильтре отзывов: контраст 4.5:1 */ .filters button span { color: var(--text-2); } /* ========================================================================== 32. Калькулятор: ползунок ◁▷, быстрые суммы в ряд, одинаковые плашки валют ========================================================================== */ .calc__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; } .calc__scrub { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: var(--r-pill); background: rgba(21, 18, 28, 0.05); color: var(--ink-2); font-size: 12px; font-weight: 600; letter-spacing: -0.005em; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color 240ms var(--ease), color 240ms var(--ease), transform var(--d-press) var(--ease-out); } .calc__scrub::before { content: ''; position: absolute; inset: -8px -6px; } /* палец попадает с запасом */ .calc__scrub svg { width: 22px; height: 12px; fill: currentColor; overflow: visible; } .calc__scrub path { transition: transform 300ms var(--ease-out); } .calc__scrub:active { transform: scale(0.97); } .calc__scrub.is-active { background: var(--lilac-100); color: var(--lilac-deep); } .calc__scrub.is-active .l { transform: translateX(-2.5px); } .calc__scrub.is-active .r { transform: translateX(2.5px); } .calc__field--out .calc__scrub { background: rgba(255, 255, 255, 0.8); } .calc__field.is-scrubbing { box-shadow: inset 0 0 0 1.5px var(--lilac-400), 0 0 0 4px rgba(189, 180, 255, 0.25); } html.is-scrubbing, html.is-scrubbing * { cursor: ew-resize !important; user-select: none !important; -webkit-user-select: none !important; } @media (hover: hover) and (pointer: fine) { .calc__scrub:hover { background: var(--lilac-100); color: var(--lilac-deep); } } /* подсказка: стрелки дважды расходятся, когда калькулятор впервые на экране */ .calc__scrub.is-hint .l { animation: scrub-l 1.1s var(--ease-in-out) 2; } .calc__scrub.is-hint .r { animation: scrub-r 1.1s var(--ease-in-out) 2; } @keyframes scrub-l { 0%, 100% { transform: none; } 50% { transform: translateX(-3px); } } @keyframes scrub-r { 0%, 100% { transform: none; } 50% { transform: translateX(3px); } } /* быстрые суммы: 5 штук ровно по ширине калькулятора */ .calc__chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .calc__chips button { min-width: 0; padding: 0 4px; font-size: clamp(11.5px, 3.3vw, 13px); letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; } .calc__chips i { font-style: normal; } @media (max-width: 479px) { .calc__chips i { display: none; } } /* «в батах» уже в подписи над суммами */ /* плашки валют сверху и снизу — одного размера */ .calc__cur, .cur-dd__btn { height: 40px; min-width: 104px; justify-content: center; gap: 8px; padding: 0 12px 0 8px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em; } .calc__cur .flag, .cur-dd__btn .flag { width: 24px; height: 24px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 2.5px rgba(21, 18, 28, 0.06); } /* способы получения: четыре объекта в карточке, видим один; смена — мгновенный кроссфейд, без загрузки */ .method-panel__arts { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .method-panel .method-panel__art { opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity 260ms var(--ease-out), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } .method-panel .method-panel__art.is-active { opacity: 1; transform: none; } @media (hover: hover) and (pointer: fine) { .method-panel:hover .method-panel__art.is-active { transform: translateY(-6px) rotate(-2deg); } } /* ========================================================================== 33. Шаги: росток растёт от шага к шагу (росток → побег → берёза → роща) ========================================================================== */ .steps { padding-left: 84px; } .steps__line { left: 26px; } .step__node.step__node--plant { left: -50px; top: -2px; width: auto; height: auto; display: block; opacity: 1; transform: translateX(-50%); } .step__node--plant img { display: block; width: auto; max-width: none; height: var(--ph, 56px); transform: none; transform-origin: 50% 100%; opacity: 0.3; scale: 0.62; filter: saturate(0.35); transition: scale 900ms var(--ease-out), opacity 700ms var(--ease-out), filter 700ms var(--ease-out); } .step.is-reached .step__node--plant img { opacity: 1; scale: 1; filter: none; animation: plant-sway 6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } @keyframes plant-sway { from { rotate: -1.5deg; } to { rotate: 1.5deg; } } .step__node--plant[data-plant='1'] { --ph: 40px; } .step__node--plant[data-plant='2'] { --ph: 58px; } .step__node--plant[data-plant='3'] { --ph: 72px; } .step__node--plant[data-plant='4'] { --ph: 72px; } @media (min-width: 1100px) { .steps { padding-left: 0; padding-top: 170px; } .steps__line { left: 0; top: 140px; } .step__node.step__node--plant { left: 0; top: -22px; transform: translateY(-100%); } .step__node--plant[data-plant='1'] { --ph: 64px; } .step__node--plant[data-plant='2'] { --ph: 96px; } .step__node--plant[data-plant='3'] { --ph: 130px; } .step__node--plant[data-plant='4'] { --ph: 130px; } .steps--4 .step__node--plant[data-plant='3'] { --ph: 112px; } } @media (prefers-reduced-motion: reduce) { .step__node--plant img { scale: 1; opacity: 1; filter: none; transition: none; } .step.is-reached .step__node--plant img, .calc__scrub.is-hint path { animation: none; } } /* смещение ростка — через translate: правило «шаг достигнут» сбрасывает transform */ .step__node.step__node--plant, .step.is-reached .step__node.step__node--plant { transform: none; translate: -50% 0; } @media (min-width: 1100px) { .step__node.step__node--plant, .step.is-reached .step__node.step__node--plant { translate: 0 -100%; } } /* быстрые суммы ровно по краям полей калькулятора */ .calc__quick { padding: 6px 0 4px; } .calc__quick-label { padding-inline: 2px; } /* калькулятор не шире своей колонки: на узких экранах — меньше поля и кегль кнопки */ .calc-wrap > .calc { min-width: 0; } @media (max-width: 479px) { .calc { padding: 16px; } .calc__foot .btn { padding: 0 16px; gap: 8px; font-size: clamp(13.5px, 3.9vw, 15px); } } /* знак ฿ у быстрых сумм — только когда сам калькулятор достаточно широкий (не по ширине экрана) */ .calc { container-type: inline-size; } @container (max-width: 470px) { .calc__chips i { display: none; } } /* ростки крупнее: росток → побег → берёза читаются издалека */ .steps { padding-left: 100px; } .steps__line { left: 34px; } .step__node.step__node--plant { left: -58px; } .step__node--plant[data-plant='1'] { --ph: 52px; } .step__node--plant[data-plant='2'] { --ph: 78px; } .step__node--plant[data-plant='3'] { --ph: 96px; } .step__node--plant[data-plant='4'] { --ph: 96px; } @media (min-width: 1100px) { .steps { padding-left: 0; padding-top: 236px; } .steps__line { left: 0; top: 206px; } .step__node.step__node--plant { left: 0; } .step__node--plant[data-plant='1'] { --ph: 84px; } .step__node--plant[data-plant='2'] { --ph: 140px; } .step__node--plant[data-plant='3'] { --ph: 196px; } .step__node--plant[data-plant='4'] { --ph: 196px; } .steps--4 .step__node--plant[data-plant='3'] { --ph: 170px; } } /* телефон и планшет: вертикальная линия протыкала ростки — убираем её, ростки стоят колонкой слева */ @media (max-width: 1099px) { .steps__line { display: none; } .steps { padding-left: 96px; gap: 40px; } .step { min-height: 96px; } .step__node.step__node--plant { left: -54px; } } /* ========================================================================== 34. Правки 9.11 (вечер): отзывы, подвал ========================================================================== */ /* отзывы: заголовок во всю ширину (2 строки на десктопе), под ним строка кнопок; стрелки — справа */ .rev-head { display: grid; gap: 24px; max-width: none; } .rev-head__title { display: grid; gap: 18px; } .rev-head .h2 { max-width: 20ch; } .rev-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; } .rev-actions__btns { min-width: 0; } @media (max-width: 1099px) { .rev-actions { display: flex; } .rev-actions__btns { flex: 1 1 auto; } } /* Google: логотип, рейтинг, число отзывов — такая же кнопка, как «Чат отзывов» */ .rev-g { gap: 8px; } .rev-g__logo { width: 18px; height: 18px; flex: none; } .rev-g b { font-weight: 700; letter-spacing: -0.01em; } .rev-g__star { color: #f5b301; font-size: 0.92em; margin-left: -4px; } .rev-g__count { color: var(--text-2); } .rev-g__count::before { content: '·'; margin-right: 6px; color: var(--text-3); } @media (max-width: 767px) { .rev-actions__btns > .btn svg.rev-g__logo { width: 17px; height: 17px; } } /* подвал: слово «bereza» — тем же Lufga, что и слово-знак в hero */ .footer__word { font-family: var(--font-latin); font-weight: 400; letter-spacing: -0.03em; font-size: clamp(5.4rem, 26.2vw, 24.4rem); } /* Lufga шире Manrope: кегль чуть меньше, ширина слова — прежняя */ /* ========================================================================== 35. Тени не обрезаются (правило 9.11). Карусель с overflow-x: auto режет всё, что выходит за её рамку, по обеим осям. Поэтому внутри карусели — поле под тень и подъём при наведении, а снаружи отрицательный отступ той же величины: раскладка не меняется. Проверка: scratchpad/shadow-audit.js. ========================================================================== */ .reviews { padding-top: 16px; margin-top: -16px; padding-bottom: 56px; margin-bottom: -56px; } @media (max-width: 1099px) { .life, .levels, .office__photos { padding-top: 16px; margin-top: -16px; padding-bottom: 40px; margin-bottom: -40px; } .office__photos { margin-bottom: -28px; } .levels { margin-bottom: -32px; } } /* ========================================================================== 36. Форма заявки без системных контролов (правило 9.11): свои выпадающие списки, код страны с флагом, маска номера, поле Telegram с @, комментарий растёт до 180 px, свой чекбокс ========================================================================== */ .req__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .dd { position: relative; } .dd__btn { width: 100%; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 16px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--paper); font-size: 16px; font-weight: 500; color: var(--ink); text-align: left; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease); } .dd__val { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dd__chev { width: 14px; height: 14px; flex: none; color: var(--text-2); transition: transform 240ms var(--ease-out); } .dd.is-open .dd__chev { transform: rotate(180deg); } .dd__btn:focus-visible, .dd.is-open .dd__btn { outline: none; border-color: var(--lilac-400); box-shadow: 0 0 0 4px rgba(189, 180, 255, 0.28); } @media (hover: hover) and (pointer: fine) { .dd--field .dd__btn:hover { border-color: var(--lilac-300, var(--lilac-400)); } } .dd__list { position: fixed; z-index: 1000; margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: 18px; background: #fff; box-shadow: var(--sh-3), 0 0 0 1px rgba(21, 18, 28, 0.05); opacity: 0; transform: translateY(-4px) scale(0.98); pointer-events: none; visibility: hidden; transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms; } .dd.is-open .dd__list { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s; } .dd__list li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; transition: background-color 160ms var(--ease); } .dd__text { flex: 1; min-width: 0; } .dd__aside { color: var(--text-2); font-size: 14px; font-variant-numeric: tabular-nums; } .dd__check { width: 18px; height: 18px; flex: none; color: var(--lilac-deep); opacity: 0; } .dd__list li[aria-selected='true'] .dd__check { opacity: 1; } .dd__list li.is-active { background: var(--lilac-50); } .dd .flag { width: 22px; height: 22px; } @media (prefers-reduced-motion: reduce) { .dd__list, .dd.is-open .dd__list { transform: none; } } /* поле-коробка: Telegram с @ и телефон с кодом страны */ .field__box { display: flex; align-items: center; height: 52px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--paper); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); } .field__box[hidden] { display: none; } .field__box:focus-within { border-color: var(--lilac-400); box-shadow: 0 0 0 4px rgba(189, 180, 255, 0.28); } .field.is-invalid .field__box { border-color: #d14b6a; box-shadow: 0 0 0 4px rgba(209, 75, 106, 0.12); } .field__box input { flex: 1; min-width: 0; height: 100%; padding: 0 16px 0 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); outline: none; } .field__box input::placeholder { color: var(--text-3); font-weight: 400; } .field__prefix { padding: 0 1px 0 16px; font-size: 16px; font-weight: 600; color: var(--text-2); } .field__box--phone { gap: 10px; padding-left: 6px; } .dd--code .dd__btn { width: auto; height: 40px; gap: 6px; padding: 0 10px 0 6px; border: 0; border-radius: var(--r-pill); background: var(--mist); font-size: 15px; font-weight: 700; } .dd--code .dd__btn:focus-visible, .dd--code.is-open .dd__btn { border: 0; box-shadow: 0 0 0 3px rgba(189, 180, 255, 0.55); } @media (hover: hover) and (pointer: fine) { .dd--code .dd__btn:hover { background: var(--cloud); } } .dd--code .dd__val b { font-weight: 700; font-variant-numeric: tabular-nums; } .dd--code .dd__chev { width: 12px; height: 12px; } /* комментарий: без «уголка» растягивания, растёт сам до 180 px */ textarea.field__input { resize: none; max-height: 180px; overflow-y: auto; } .field__label:has(.field__count) { display: flex; justify-content: space-between; gap: 12px; } .field__count { font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; } .field__count[hidden] { display: none; } /* чекбокс: настоящий input (клавиатура, скринридер) — но видна своя квадратная кнопка */ .check { position: relative; grid-template-columns: 22px 1fr; } .check input { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; } .check__box { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-strong); background: var(--paper); color: #fff; display: grid; place-items: center; transition: background-color 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease); } .check__box svg { width: 14px; height: 14px; opacity: 0; transform: scale(0.6); transition: opacity 160ms var(--ease-out), transform 220ms var(--ease-out); } .check input:checked + .check__box { background: var(--ink); border-color: var(--ink); } .check input:checked + .check__box svg { opacity: 1; transform: none; } .check input:focus-visible + .check__box { box-shadow: 0 0 0 4px rgba(189, 180, 255, 0.4); } .check.is-invalid .check__box { border-color: #d14b6a; } /* отзывы: «63 отзыва» прячем только на самых узких экранах; края карусели на десктопе — мягкие */ @media (max-width: 359px) { .rev-g__word { display: none; } } @media (min-width: 1100px) { .reviews-sec .reviews { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } } /* ========================================================================== 37. Сообщество: карусель из 8 последних постов, каждая карточка — ссылка на пост ========================================================================== */ .section-head__title { display: grid; gap: 18px; } .life { scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); } .life__card { position: relative; color: inherit; } .life__card b { display: block; } .life__src { position: absolute; left: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; } .life__src svg { width: 15px; height: 15px; } .life__go { position: absolute; right: 10px; top: 10px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; opacity: 0; transform: scale(0.9); transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); } .life__go svg { width: 16px; height: 16px; } .life__photo img { transition: transform 650ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .life__card:hover .life__photo img { transform: scale(1.03); } .life__card:hover .life__go { opacity: 1; transform: none; } } .life__card:focus-visible { outline: none; } .life__card:focus-visible .life__photo { outline: 2px solid var(--lilac-ink); outline-offset: 3px; } .life__photo .life__src { padding: 0 12px 0 9px; gap: 6px; } .life__photo .life__go { display: grid; padding: 0; } @media (max-width: 1099px) { .life__photo .life__go { display: none; } } @media (min-width: 1100px) { .life { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 3 * 14px) / 4); overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 0; } } .arrows button { transition: transform var(--d-press) var(--ease-out), opacity 300ms var(--ease); } .arrows button:disabled { opacity: 0.32; cursor: default; } .arrows button:disabled:active { transform: none; } /* ========================================================================== 38. Шаги на «рельсе» (правка 9.11 вместо ростков): линия идёт от центра первого кружка до центра последнего — не начинается из ниоткуда и не обрывается в воздухе. JS ставит её по факту раскладки. На главной рядом проигрывается переписка с менеджером, шаги загораются вместе с ней. ========================================================================== */ .rail { position: relative; } .rail__list { position: relative; z-index: 1; display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; } .rail__step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 18px; align-items: start; } .rail__node { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1.5px solid var(--line-strong); color: var(--lilac-deep); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color 500ms var(--ease), border-color 500ms var(--ease), color 500ms var(--ease), box-shadow 500ms var(--ease); } .rail__step.is-reached .rail__node { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 10px 20px -12px rgba(21, 18, 28, 0.7); } .rail__copy { display: grid; gap: 6px; padding-top: 9px; } .rail__copy .h3 { font-size: 22px; } .rail__copy .body { margin: 0; } .rail__line { position: absolute; z-index: 0; left: 21px; top: 22px; width: 2px; height: 0; border-radius: 2px; background: var(--cloud-2); pointer-events: none; } .rail__line i { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform-origin: 0 0; transform: scaleY(var(--p, 0)); transition: transform 900ms var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1)); } .rail--h .rail__line i { transform: scaleX(var(--p, 0)); } .rail[data-rail='scroll'] .rail__line i { transition: transform 140ms linear; } .section--mist .rail__node { background: var(--mist); } .section--mist .rail__step.is-reached .rail__node { background: var(--ink); } @media (min-width: 1100px) { .rail[data-rail='scroll'] .rail__list { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 40px; } .rail[data-rail='scroll'] .rail__step { grid-template-columns: 1fr; gap: 20px; } .rail[data-rail='scroll'] .rail__copy { padding-top: 0; } .rail[data-rail='scroll'] .rail__copy .h3 { font-size: 26px; } .rail[data-rail='scroll'] .rail__node { width: 52px; height: 52px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .rail__line i { transition: none; } } /* главная: шаги слева, переписка справа */ .how { display: grid; gap: 40px; } @media (min-width: 1100px) { .how { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; } .how .rail__list { gap: 64px; } .how .rail__copy .h3 { font-size: 28px; } } .how__stage { position: relative; padding: 28px 16px; border-radius: var(--r-xl); background: radial-gradient(120% 90% at 85% 0%, var(--lilac-100) 0%, var(--mist) 55%, var(--cloud) 100%); } @media (min-width: 768px) { .how__stage { padding: 48px 40px; } } .how__leaf { position: absolute; z-index: 0; height: auto; pointer-events: none; } .how__leaf--a { width: 58px; left: -12px; top: 18%; rotate: -32deg; } .how__leaf--b { width: 66px; right: -14px; bottom: 12%; rotate: 154deg; } .chat { position: relative; z-index: 1; max-width: 470px; margin-inline: auto; border-radius: 26px; background: #fff; box-shadow: var(--sh-2), 0 0 0 1px rgba(21, 18, 28, 0.04); } .chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .chat__head img { width: 40px; height: 40px; border-radius: 12px; flex: none; } .chat__who { display: grid; gap: 1px; line-height: 1.25; } .chat__who b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .chat__who small { font-size: 12.5px; color: var(--text-2); } .chat__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 18px; border-radius: 0 0 26px 26px; background: linear-gradient(180deg, #F8F6FE 0%, #F1EEFB 100%); } .chat__step { align-self: center; margin: 6px 0 2px; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(21, 18, 28, 0.06); font-size: 12px; font-weight: 700; color: var(--ink-2); } .chat__step:first-child { margin-top: 0; } .msg { position: relative; align-self: flex-start; max-width: 84%; margin: 0; padding: 9px 12px 8px; border-radius: 16px 16px 16px 6px; background: #fff; box-shadow: 0 1px 2px rgba(21, 18, 28, 0.07); font-size: 14.5px; line-height: 1.4; color: var(--ink); text-wrap: pretty; } .msg--me { align-self: flex-end; border-radius: 16px 16px 6px 16px; background: #E9E4FF; } .msg time { float: right; margin: 7px 0 -3px 10px; font-size: 11px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; } .msg b { font-weight: 700; letter-spacing: 0.02em; } .msg__att { display: flex; align-items: center; gap: 8px; margin: -2px -4px 7px; padding: 8px 10px; border-radius: 11px; background: rgba(255, 255, 255, 0.75); font-size: 13px; font-weight: 600; } .msg__att svg { width: 18px; height: 18px; color: var(--lilac-deep); flex: none; } @media (max-width: 479px) { .msg { font-size: 14px; max-width: 88%; } } /* появление сообщений: снизу, из «хвостика» пузыря; место под них занято заранее — блок не прыгает */ [data-chat] [data-msg] { opacity: 0; transform: translateY(10px) scale(0.97); transform-origin: 0 100%; transition: opacity 360ms var(--ease-out), transform 460ms var(--ease-out), background-color 300ms var(--ease), box-shadow 300ms var(--ease), color 300ms var(--ease); } [data-chat] .msg--me[data-msg] { transform-origin: 100% 100%; } [data-chat] .chat__step[data-msg] { transform-origin: 50% 50%; } [data-chat] [data-msg].is-in { opacity: 1; transform: none; } /* «менеджер печатает»: на месте будущего пузыря — три точки */ .msg.is-typing { opacity: 1; transform: none; background: transparent; box-shadow: none; color: transparent; } .msg.is-typing time, .msg.is-typing b { visibility: hidden; } .msg::after { content: ''; position: absolute; left: 0; top: 0; width: 58px; height: 34px; border-radius: 16px 16px 16px 6px; background-color: #fff; background-image: radial-gradient(circle, #A9A4BA 3px, transparent 3.5px), radial-gradient(circle, #A9A4BA 3px, transparent 3.5px), radial-gradient(circle, #A9A4BA 3px, transparent 3.5px); background-size: 10px 10px; background-repeat: no-repeat; background-position: 12px 12px, 24px 12px, 36px 12px; box-shadow: 0 1px 2px rgba(21, 18, 28, 0.07); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease); } .msg--me::after { content: none; } .msg.is-typing::after { opacity: 1; animation: typing 900ms ease-in-out infinite; } @keyframes typing { 0%, 100% { background-position: 12px 12px, 24px 12px, 36px 12px; } 25% { background-position: 12px 9px, 24px 12px, 36px 12px; } 50% { background-position: 12px 12px, 24px 9px, 36px 12px; } 75% { background-position: 12px 12px, 24px 12px, 36px 9px; } } @media (prefers-reduced-motion: reduce) { [data-chat] [data-msg] { transition: opacity 150ms ease; transform: none; } } /* ========================================================================== 39. Ритм секций (правило 9.11): между любыми двумя соседними блоками — один и тот же зазор --gap-y. Видимый блок — это контент белой секции или край цветной панели (сиреневой, тёмной, «неба» отзывов). Белая секция отдаёт по половине зазора сверху и снизу; панель снаружи держит такую же половину (margin), а внутри у неё свой отступ --panel-y. Две белые секции подряд = половина + половина = один зазор. Было (для отката) — docs/SPACING-audit.md. ========================================================================== */ :root { --gap-y: clamp(96px, 11vw, 168px); /* 390–768: 96 · 1100: 121 · 1440: 158 */ --section-y: calc(var(--gap-y) / 2); --panel-y: clamp(56px, 7vw, 112px); /* от края панели до её контента */ } main > section#business, main > section#services:has(> .ink-panel) { padding-block: var(--section-y); } main > section.section--mist { padding-block: var(--panel-y); margin-block: var(--section-y); } main > section.section--mist + section.section--mist { margin-top: var(--gap-y); } /* поля соседних панелей схлопываются — добираем */ .ink-panel { padding-block: var(--panel-y); } .hero { padding-bottom: var(--section-y); } .reviews-sec { padding-top: var(--section-y); } @media (min-width: 1100px) { .rev-scene { margin-top: 0; } } @media (max-width: 767px) { .how__leaf { display: none; } } #contact { padding-top: calc(var(--section-y) + 16px); } /* маскот на бревне торчит над карточкой — добираем его высоту */ .page-hero { padding-bottom: var(--section-y); } @media (min-width: 1100px) { .page-hero { min-height: 0; } } /* две кнопки — всегда в один ряд, и на десктопе тоже: на узком десктопе чуть меньше поля и кегль */ .hero__ctas, .page-hero__ctas, .final__ctas { flex-wrap: nowrap; } .hero__ctas > .btn, .page-hero__ctas > .btn, .final__ctas > .btn { flex: 0 1 auto; min-width: 0; } @media (min-width: 1100px) and (max-width: 1279px) { .hero__ctas .btn, .page-hero__ctas .btn { padding: 0 18px; font-size: 14.5px; } } /* ========================================================================== 40. Hero внутренних страниц: варианты подачи 3D-объекта (9.11, на выбор). ?art=meadow — луг до правого края экрана; ?art=window — окно-сцена с небом; ?art=floor — «пол» без фона; ?art=disc — прежний круг. По умолчанию meadow, у недвижимости — disc (её объект чуть крупнее). ========================================================================== */ .page-hero__art { --bleed: 0px; --oh: 250px; --ob: 26%; } @media (min-width: 768px) { .page-hero__art { --oh: 300px; } } @media (min-width: 1100px) { .page-hero__art { --bleed: calc((100vw - min(100vw, var(--container) + var(--gutter) * 2)) / 2 + var(--gutter)); --oh: 370px; } } .page-hero__scene, .page-hero__floor { display: none; } .page-hero[data-art]:not([data-art='disc']) .page-hero__disc { display: none; } /* объект стоит на земле, а не висит в центре круга */ .page-hero[data-art]:not([data-art='disc']) .page-hero__obj { top: auto; bottom: var(--ob); height: var(--oh); max-width: 88%; translate: -50% 0; } .page-hero[data-art]:not([data-art='disc']) .page-hero__shadow { top: auto; bottom: var(--ob); width: calc(var(--oh) * 0.62); height: 30px; translate: -50% 42%; background: radial-gradient(closest-side, rgba(38, 52, 24, 0.36), rgba(38, 52, 24, 0)); } .page-hero[data-art='meadow'] .page-hero__leaf, .page-hero[data-art='window'] .page-hero__leaf { display: none; } /* A. Луг: от объекта уходит за правый край экрана; слева и снизу мягко растворяется в белом */ .page-hero[data-art='meadow'] .page-hero__art { height: 360px; --ob: 25%; } .page-hero[data-art='meadow'] .page-hero__scene { display: block; position: absolute; inset: auto 0 0 0; height: 100%; pointer-events: none; } .page-hero[data-art='meadow'] .page-hero__meadow { position: absolute; right: 0; bottom: 0; width: 100%; height: auto; max-width: none; -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 68%, transparent 100%); } @media (min-width: 768px) { .page-hero[data-art='meadow'] .page-hero__art { height: 460px; } } @media (min-width: 1100px) { .page-hero[data-art='meadow'] .page-hero__art { height: 560px; --ob: 22%; } .page-hero[data-art='meadow'] .page-hero__scene { left: -14%; right: calc(var(--bleed) * -1); } .page-hero[data-art='meadow'] .page-hero__meadow { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, #000 66%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, #000 66%, transparent 100%); mask-composite: intersect; } } /* B. Окно-сцена: небо и луг в скруглённой панели; на десктопе панель уходит за правый край экрана */ .page-hero[data-art='window'] .page-hero__art { height: 380px; --ob: 17%; } .page-hero[data-art='window'] .page-hero__scene { display: block; position: absolute; left: 8px; right: 8px; top: 0; bottom: 0; border-radius: var(--r-xl); overflow: hidden; background: #cfe3fb; } .page-hero[data-art='window'] .page-hero__sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; } .page-hero[data-art='window'] .page-hero__meadow { position: absolute; left: 50%; bottom: -10%; width: max(150%, 620px); height: auto; max-width: none; translate: -50% 0; } @media (min-width: 768px) { .page-hero[data-art='window'] .page-hero__art { height: 480px; } } @media (min-width: 1100px) { .page-hero[data-art='window'] .page-hero__art { height: 580px; --oh: 350px; --ob: 15%; } .page-hero[data-art='window'] .page-hero__scene { left: 0; right: calc(var(--bleed) * -1); border-radius: 40px 0 0 40px; } .page-hero[data-art='window'] .page-hero__meadow { width: 125%; left: 46%; bottom: -16%; } } /* C. Пол: без фона, объект крупнее; под ним мягкое лиловое пятно-«пол», листики лежат на нём */ .page-hero[data-art='floor'] .page-hero__art { height: 360px; --oh: 270px; --ob: 18%; } .page-hero[data-art='floor'] .page-hero__floor { display: block; position: absolute; left: 50%; bottom: var(--ob); width: min(96%, 520px); height: 130px; translate: -50% 50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(189, 180, 255, 0.62), rgba(214, 208, 255, 0.28) 62%, rgba(255, 255, 255, 0)); } .page-hero[data-art='floor'] .page-hero__shadow { background: radial-gradient(closest-side, rgba(60, 44, 150, 0.34), rgba(60, 44, 150, 0)); } .page-hero[data-art='floor'] .page-hero__leaf { animation: none; top: auto; rotate: var(--r); } .page-hero[data-art='floor'] .page-hero__leaf--1 { left: 12%; bottom: calc(var(--ob) - 30px); --r: -64deg; width: 46px; } .page-hero[data-art='floor'] .page-hero__leaf--2 { left: auto; right: 14%; bottom: calc(var(--ob) - 6px); --r: 76deg; width: 38px; } .page-hero[data-art='floor'] .page-hero__leaf--3 { left: auto; right: 26%; bottom: calc(var(--ob) - 44px); --r: 164deg; width: 30px; } @media (min-width: 768px) { .page-hero[data-art='floor'] .page-hero__art { height: 460px; --oh: 330px; } } @media (min-width: 1100px) { .page-hero[data-art='floor'] .page-hero__art { height: 560px; --oh: 410px; --ob: 16%; } .page-hero[data-art='floor'] .page-hero__leaf--1 { width: 60px; } .page-hero[data-art='floor'] .page-hero__leaf--2 { width: 48px; } .page-hero[data-art='floor'] .page-hero__leaf--3 { width: 38px; } } /* недвижимость (круг): объект и круг — на ~9 % крупнее */ .page-hero__art--svc-house .page-hero__obj { height: 240px; } .page-hero__art--svc-house .page-hero__disc { width: min(88vw, 352px); } @media (min-width: 768px) { .page-hero__art--svc-house .page-hero__obj { height: 295px; } .page-hero__art--svc-house .page-hero__disc { width: 412px; } } @media (min-width: 1100px) { .page-hero__art--svc-house .page-hero__obj { height: 360px; } .page-hero__art--svc-house .page-hero__disc { width: 500px; } .page-hero__art--svc-house .page-hero__shadow { translate: -50% 166px; } .page-hero__art--svc-house .page-hero__leaf--1 { left: calc(50% - 266px); } .page-hero__art--svc-house .page-hero__leaf--2 { right: calc(50% - 256px); } .page-hero__art--svc-house .page-hero__leaf--3 { right: calc(50% - 282px); } } /* ========================================================================== 41. Способы получения: карточки-витрины. Объект стоит на мягком полу с тенью, без номеров; пункты — чипами ========================================================================== */ .ways { display: grid; gap: 12px; } @media (min-width: 768px) { .ways { grid-template-columns: 1fr 1fr; gap: 14px; } } .way { display: grid; align-content: start; padding: 8px; border-radius: var(--r-xl); background: var(--mist); } .way__stage { position: relative; height: 230px; border-radius: calc(var(--r-xl) - 6px); background: radial-gradient(120% 95% at 50% 0%, #fff 0%, #f7f5fd 52%, #ece8f9 100%); } .way__floor { position: absolute; left: 50%; bottom: 34px; width: 64%; height: 58px; translate: -50% 50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(189, 180, 255, 0.5), rgba(189, 180, 255, 0)); } .way__floor::after { content: ''; position: absolute; left: 24%; right: 24%; top: 36%; height: 30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(38, 52, 24, 0.32), rgba(38, 52, 24, 0)); } .way__obj { position: absolute; left: 50%; bottom: 34px; width: auto; height: 172px; max-width: 80%; translate: -50% 0; transition: transform 650ms var(--ease-out); } .way__copy { display: grid; align-content: start; gap: 10px; padding: 18px 14px 14px; } .way__copy .h3 { font-size: 24px; } .way__copy .body { margin: 0; font-size: 15.5px; } .way__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; } .way__chips li { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 13px 6px 9px; border-radius: var(--r-pill); background: var(--paper); font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ink-2); } .way__chips svg { width: 16px; height: 16px; flex: none; color: var(--lilac-deep); } @media (hover: hover) and (pointer: fine) { .way:hover .way__obj { transform: translateY(-5px); } } @media (min-width: 1100px) { .way { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); } .way__stage { height: auto; min-height: 330px; } .way__obj { height: 210px; bottom: 48px; } .way__floor { bottom: 48px; } .way__copy { align-content: center; padding: 26px 22px 26px 30px; } .way__copy .h3 { font-size: 28px; } } /* ========================================================================== 42. Условия обмена: «Отдаёте → Получаете» крупными карточками и три факта ========================================================================== */ .xflow { position: relative; display: grid; align-items: stretch; } .xflow__card { position: relative; display: grid; align-content: start; gap: 18px; padding: 24px 18px; border-radius: var(--r-xl); } .xflow__card--give { background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--sh-1); } .xflow__card--get { align-content: space-between; color: #fff; background: radial-gradient(70% 60% at 100% 0%, rgba(189, 180, 255, 0.26), transparent 62%), radial-gradient(60% 50% at 0% 100%, rgba(189, 180, 255, 0.12), transparent 60%), var(--ink); } .xflow__label { font-size: 13px; font-weight: 700; color: var(--lilac-deep); } .xflow__card--get .xflow__label { color: var(--lilac); } .xflow__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .xflow__list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--mist); } .xflow__flags { display: flex; align-items: center; } .xflow__flags .flag { width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--mist); } .xflow__flags .flag + .flag { margin-left: -9px; } .xflow__ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--lilac-deep); } .xflow__ico svg { width: 18px; height: 18px; } .xflow__txt { display: grid; gap: 2px; min-width: 0; } .xflow__txt b { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; } .xflow__txt small { font-size: 13.5px; color: var(--text-2); } .xflow__arrow { position: relative; z-index: 2; justify-self: center; width: 56px; height: 56px; margin-block: -14px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--ink); box-shadow: 0 0 0 6px var(--paper); rotate: 90deg; } .xflow__arrow svg { width: 22px; height: 22px; } .xflow__thb { display: flex; align-items: center; gap: 14px; } .xflow__thb .flag { width: 54px; height: 54px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); } .xflow__thb b { font-size: clamp(34px, 4.6vw, 60px); font-weight: 500; letter-spacing: -0.045em; line-height: 0.98; } .xflow__ways { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .xflow__ways li { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.09); font-size: 14.5px; font-weight: 600; } .xflow__ways svg { width: 18px; height: 18px; color: var(--lilac); } @media (min-width: 768px) { .xflow__card { padding: 30px; } } @media (min-width: 1100px) { .xflow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .xflow__card { padding: 36px; } .xflow__arrow { rotate: 0deg; margin: 0 -22px; align-self: center; } } .xfacts { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; } @media (min-width: 768px) { .xfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } } .xfacts li { display: grid; align-content: start; gap: 8px; padding: 22px; border-radius: var(--r-lg); background: var(--mist); } .xfacts__ico { width: 46px; height: 46px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--lilac-deep); box-shadow: var(--sh-1); } .xfacts__ico svg { width: 22px; height: 22px; } .xfacts__k { font-size: 13px; font-weight: 600; color: var(--text-2); } .xfacts b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; } .xfacts b.xfacts__big { font-size: clamp(32px, 3.4vw, 46px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; } .xfacts small { font-size: 14px; color: var(--text-2); } /* ========================================================================== 43. Отзывы на внутренних страницах: карусель как на главной, следующие карточки подгружаются по ходу ========================================================================== */ .rev-inner-actions { display: flex; align-items: center; gap: 10px; } @media (min-width: 1100px) { .reviews--inner { margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } } .reviews .review.is-new { animation: rev-in 520ms var(--ease-out) both; } @keyframes rev-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } } .review--all { display: grid; align-content: center; justify-items: start; gap: 12px; color: var(--ink); background: linear-gradient(160deg, #f5f3fd 0%, #e8e3ff 100%); box-shadow: none; } .review--all__n { font-size: 72px; font-weight: 500; letter-spacing: -0.06em; line-height: 0.9; } .review--all b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; } .review--all > span:not([class]) { font-size: 14px; color: var(--text-2); } .review--all__go { width: 50px; height: 50px; margin-top: 6px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; transition: transform 450ms var(--ease-out); } .review--all__go svg { width: 18px; height: 18px; } @media (hover: hover) and (pointer: fine) { .review--all:hover .review--all__go { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .reviews .review.is-new { animation: none; } } .page-hero:not([data-art='window']) .page-hero__sky { display: none; } @media (max-width: 1099px) { .page-hero[data-art='window'] .page-hero__scene { top: 16px; } } @media (min-width: 1100px) { .xflow__card--get { padding-left: 60px; } } .way__chips li { border-radius: 17px; } /* ========================================================================== 44. Условия (10.11): монеты вместо скучных значков, четыре способа получения в одну строку на десктопе ========================================================================== */ .xflow__flags .flag--coin { box-shadow: 0 0 0 2px var(--mist), 0 3px 8px rgba(100, 87, 204, 0.22); } .xflow__ways li { gap: 7px; padding: 0 14px 0 11px; } @media (min-width: 1280px) { .xflow__ways { flex-wrap: nowrap; gap: 6px; } .xflow__ways li { flex: none; font-size: 14px; } } .xfacts b.xfacts__big { white-space: nowrap; } /* ========================================================================== 45. Отзывы в каруселях (10.11): высота карточки не растёт при листании — длинный текст обрывается многоточием и мягко гаснет снизу; полностью — по «Открыть оригинал». Страница всех отзывов не трогается. ========================================================================== */ .reviews--inner .review__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; } @media (min-width: 1100px) { .reviews--inner .review__text { -webkit-line-clamp: 7; line-clamp: 7; } } .reviews--inner .review__text.is-clamped { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 3em), rgba(0, 0, 0, 0.22) 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 3em), rgba(0, 0, 0, 0.22) 100%); } /* ========================================================================== 46. Шаги-ростки (10.11): росток → побег → берёза (→ роща), между ними вьётся ветка с листиками. Ветка лежит за растениями: начинается за пятачком мха первого и уходит за пятачок последнего. ========================================================================== */ .grow { position: relative; } .grow__vine { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; } .grow__path { fill: none; stroke: #6f9f3e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .grow__leaf { transform-box: fill-box; transform-origin: 0% 50%; opacity: 0; scale: 0.5; transition: opacity 450ms var(--ease-out), scale 650ms var(--ease-out); } .grow__leaf.is-on { opacity: 1; scale: 1; } .grow__list { position: relative; z-index: 1; display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; } .grow__step { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; } .grow__plant { position: relative; display: grid; justify-items: center; align-items: end; height: 124px; } .grow__plant img { display: block; width: auto; max-width: none; height: var(--ph); transform-origin: 50% 100%; opacity: 0.5; scale: 0.94; filter: saturate(0.55); transition: opacity 650ms var(--ease-out), scale 750ms var(--ease-out), filter 650ms var(--ease-out); } .grow__step.is-reached .grow__plant img { opacity: 1; scale: 1; filter: none; animation: plant-sway 6s cubic-bezier(0.45, 0, 0.55, 1) 750ms infinite alternate; } .grow__step:nth-child(2).is-reached .grow__plant img { animation-delay: -2s; } .grow__step:nth-child(3).is-reached .grow__plant img { animation-delay: -3.6s; } .grow__plant[data-plant='1'] { --ph: 70px; } .grow__plant[data-plant='2'] { --ph: 98px; } .grow__plant[data-plant='3'] { --ph: 120px; } .grow__plant[data-plant='4'] { --ph: 112px; } .grow__copy { display: grid; gap: 8px; align-content: center; } .grow__num { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--lilac-deep); } .grow__copy .h3 { font-size: 22px; } .grow__copy .body { margin: 0; } @media (min-width: 1100px) { .grow__list { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 40px; } .grow__step { grid-template-columns: none; grid-template-rows: auto auto; align-items: start; gap: 26px; } .grow__plant { height: 214px; justify-items: start; } .grow__plant[data-plant='1'] { --ph: 120px; } .grow__plant[data-plant='2'] { --ph: 172px; } .grow__plant[data-plant='3'] { --ph: 212px; } .grow__plant[data-plant='4'] { --ph: 200px; } .grow__copy .h3 { font-size: 28px; } .grow__path { stroke-width: 3; } } @media (prefers-reduced-motion: reduce) { .grow__plant img, .grow__leaf { transition: none; } .grow__step.is-reached .grow__plant img { animation: none; } } .grow__tendril { fill: none; stroke: #6f9f3e; stroke-width: 1.5; stroke-linecap: round; } /* ========================================================================== 47. Главная, «Как это работает» (10.11): чат и шаги одной высоты, оба сразу под заголовком. Окно чата фиксированной высоты: сообщения приходят снизу, старые уезжают вверх под мягкую маску. ========================================================================== */ .how__stage { --chat-h: 430px; padding: 20px 12px; } .chat { display: flex; flex-direction: column; height: var(--chat-h); } .chat__body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; padding: 0 14px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px); mask-image: linear-gradient(180deg, transparent 0, #000 56px); } .chat__feed { display: flex; flex-direction: column; gap: 8px; padding: 18px 0 16px; } [data-chat] [data-msg]:not(.is-on) { display: none; } @media (min-width: 768px) { .how__stage { --chat-h: 470px; padding: 32px 40px; } } @media (min-width: 1100px) { .how { align-items: stretch; gap: 64px; } .how__stage { --chat-h: 480px; padding: 34px 44px; } .how .rail { display: flex; flex-direction: column; } .how .rail__list { flex: 1; align-content: space-between; gap: 24px; padding-block: 34px 30px; } .how .rail__copy .body { max-width: 34ch; } } /* ========================================================================== 48. Попап заявки (10.11): кнопка «Связаться в …» с иконкой мессенджера, экран перехода в чат с текстом сообщения и пятисекундной полосой (для Telegram-бота). ========================================================================== */ .req__submit { gap: 10px; } .req__submit-ico { flex: none; } .req__msg { margin: 4px 0 0; padding: 12px 14px; border-radius: 14px 14px 14px 6px; background: var(--mist); font-size: 14px; line-height: 1.45; color: var(--ink-2); white-space: pre-line; text-align: left; max-height: 9.5em; overflow: auto; user-select: text; } .req__timer { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--cloud-2, #ecebf2); overflow: hidden; opacity: 0; } .req__timer i { display: block; height: 100%; border-radius: inherit; background: var(--lilac-ink); transform-origin: 0 50%; transform: scaleX(1); } .req__go.is-counting .req__timer { opacity: 1; } .req__go.is-counting .req__timer i { transform: scaleX(0); transition: transform 5000ms linear; } @media (prefers-reduced-motion: reduce) { .req__go.is-counting .req__timer i { transition-duration: 0ms; } } /* «Получаете» на телефоне (10.11): флаг и «Тайские баты» спокойнее, блок не перегружен */ @media (max-width: 767px) { .xflow__thb { gap: 12px; } .xflow__thb .flag { width: 38px; height: 38px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); } .xflow__thb b { font-size: 27px; letter-spacing: -0.035em; } .xflow__card--get { gap: 16px; } } @media (min-width: 768px) and (max-width: 1099px) { .xflow__thb .flag { width: 46px; height: 46px; } .xflow__thb b { font-size: 40px; } } /* ========================================================================== 49. Хиро «Обмена» (10.11): окно-сцена, банкомат вписан в луг прямо в картинке (?fit=1|2|3). Банкомат всегда по центру колонки: x = (ширина панели − выступ за край экрана)/2 − x объекта × высота. ========================================================================== */ .page-hero__art--baked .page-hero__scene { container-type: size; } .page-hero__baked { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0% 100%; } /* выбран вариант 2: банкомат по центру картинки, картинка по центру панели */ .page-hero__baked { object-position: 50% 100%; } /* ========================================================================== 50. Правки 10.11 (вторая волна) ========================================================================== */ /* главная, «Как это работает»: линия шагов сразу целиком, без анимации */ .how .rail__line i { transform: none; transition: none; } .how .rail__node { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 10px 20px -12px rgba(21, 18, 28, 0.7); transition: none; } /* левый листик — другой лист и другой разворот, медленно «парит», будто падает */ .how__leaf--a { width: 70px; left: -22px; top: 14%; rotate: 0deg; animation: leaf-fall 7.5s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } @keyframes leaf-fall { from { transform: translate3d(0, -6px, 0) rotate(18deg) scaleX(-1); } to { transform: translate3d(8px, 12px, 0) rotate(-6deg) scaleX(-1); } } @media (prefers-reduced-motion: reduce) { .how__leaf--a { animation: none; transform: rotate(12deg) scaleX(-1); } } /* недвижимость на главной: «Подробнее» ведёт на страницу услуги, «Обсудить сделку» — заявка */ .realty__ctas { margin-top: 4px; } @media (max-width: 379px) { .realty__ctas .btn { padding: 0 14px; font-size: 14px; } } /* футер: заголовки колонок — фирменным лиловым, не сливаются со ссылками */ .footer__h { color: var(--lilac-deep); } /* ========================================================================== 51. Телефон (10.11): меню, хиро, способы получения, одиночные кнопки, ветка ========================================================================== */ /* меню: статус и язык — сразу сверху; пункты компактнее; снизу запас под панель браузера (iOS) */ .sheet { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); } .sheet__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 2px; } .sheet__top p { display: flex; gap: 10px; align-items: center; margin: 0; color: var(--text-2); } .sheet__top + .sheet__label { margin-top: 12px; } .sheet__item { grid-template-columns: 46px minmax(0, 1fr) 18px; gap: 12px; padding: 9px 12px 9px 8px; } .sheet__item .obj { width: 46px; height: 46px; } .sheet__item b { font-size: 16px; } .sheet__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sheet__links a { padding: 12px 14px; font-size: 14.5px; } .sheet__contact { margin-top: 14px; } .sheet__contact .btn { min-width: 0; } @media (max-width: 767px) { /* хиро главной: без строки «менеджер онлайн · офис» — блок спокойнее */ .hero__meta { display: none; } /* ветка — на пару пикселей ближе к «bereza» и дальше от «exchange» */ .hero__branch { translate: 0 -4px; } /* способы получения: четыре равные кнопки с одинаковыми полями */ .seg__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .seg__list button { padding: 0 6px; font-size: 13.5px; } /* одиночные кнопки секций — на всю ширину, как в блоке недвижимости */ .biz__cta > .btn, .referral__foot > .btn, .rev-inner-actions > .btn { flex: 1 1 100%; width: 100%; justify-content: center; } .section-head--row > div:last-child:has(.rev-inner-actions) { width: 100%; } } @media (max-width: 374px) { .seg__list button { padding: 0 4px; font-size: 12.5px; } } /* ========================================================================== 52. Третья волна 10.11 ========================================================================== */ /* бургер: у полосок своя точка отсчёта — в Safari на iOS абсолютные дети сетки не центрируются сами */ .nav__burger { position: relative; padding: 0; } .nav__burger span { left: 50%; top: 50%; margin: -0.8px 0 0 -8px; } /* «Бизнесу»: глобус в лиловом круге с листиками, как у недвижимости — чуть крупнее обычного */ .page-hero__art--svc-globe .page-hero__obj { height: 236px; } @media (min-width: 768px) { .page-hero__art--svc-globe .page-hero__obj { height: 290px; } } @media (min-width: 1100px) { .page-hero__art--svc-globe .page-hero__obj { height: 352px; } } /* луг в hero: край растворяется в белом мягче и длиннее — без заметной «ступеньки» */ .page-hero[data-art='meadow'] .page-hero__meadow { -webkit-mask-image: linear-gradient(180deg, #000 56%, rgba(0, 0, 0, 0.8) 67%, rgba(0, 0, 0, 0.48) 78%, rgba(0, 0, 0, 0.18) 89%, transparent 100%); mask-image: linear-gradient(180deg, #000 56%, rgba(0, 0, 0, 0.8) 67%, rgba(0, 0, 0, 0.48) 78%, rgba(0, 0, 0, 0.18) 89%, transparent 100%); } @media (min-width: 1100px) { .page-hero[data-art='meadow'] .page-hero__meadow { -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.06) 8%, rgba(0, 0, 0, 0.22) 16%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.7) 34%, rgba(0, 0, 0, 0.9) 43%, #000 52%), linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0.82) 68%, rgba(0, 0, 0, 0.5) 79%, rgba(0, 0, 0, 0.2) 89%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.06) 8%, rgba(0, 0, 0, 0.22) 16%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.7) 34%, rgba(0, 0, 0, 0.9) 43%, #000 52%), linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0.82) 68%, rgba(0, 0, 0, 0.5) 79%, rgba(0, 0, 0, 0.2) 89%, transparent 100%); } } /* ========================================================================== 53. Отзывы: «избранные» и путь ко всем отзывам; контакты: свои иконки на стеклянных плитках ========================================================================== */ .rev-head-btns { flex-wrap: wrap; } .rev-more { display: grid; gap: 16px; margin-top: 18px; padding: 24px; border-radius: var(--r-xl); background: linear-gradient(160deg, #f5f3fd 0%, #e8e3ff 100%); } .rev-more__copy { display: grid; gap: 6px; } .rev-more__copy b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; } .rev-more__copy span { font-size: 15px; color: var(--text-2); line-height: 1.5; max-width: 60ch; } .rev-more__btns > .btn { flex: 1 1 auto; justify-content: center; } @media (min-width: 1100px) { .rev-more { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 30px 34px; } .rev-more__btns > .btn { flex: 0 0 auto; } } @media (max-width: 767px) { .rev-head-btns { width: 100%; } .rev-head-btns > .btn { flex: 1 1 0; justify-content: center; } } /* иконки связи: общее правило «.contact span» больше не ломает плитку */ .contact .contact__ico { display: grid; place-items: center; color: #fff; border-radius: 15px; background: radial-gradient(120% 120% at 26% 14%, #e2ddff 0%, #b3a8ff 44%, #7d6ef0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 8px rgba(70, 50, 170, 0.22), 0 8px 16px -8px rgba(100, 87, 204, 0.6); } .contact .contact__ico svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(60, 40, 150, 0.25)); } .contact--main .contact__ico { background: radial-gradient(120% 120% at 26% 14%, #ffffff 0%, #d4ccff 46%, #9d90ff 100%); color: var(--ink); } .contact--main .contact__ico svg { filter: none; } /* ========================================================================== 54. Bereza Pay и офис (10.11): кейс без обрезки маскота; терминал в лугу; офис карточками с объектами ========================================================================== */ .case__photo img { object-position: 72% 50%; } /* запечённая сцена в варианте «луг»: без рамки, растворяется слева и снизу в белом, как прежний луг */ .page-hero[data-art='meadow'] .page-hero__art--baked { height: 360px; } @media (min-width: 768px) { .page-hero[data-art='meadow'] .page-hero__art--baked { height: 460px; } } @media (min-width: 1100px) { .page-hero[data-art='meadow'] .page-hero__art--baked { height: 560px; } } .page-hero[data-art='meadow'] .page-hero__art--baked .page-hero__scene { display: block; position: absolute; inset: 0; pointer-events: none; container-type: normal; } @media (min-width: 1100px) { .page-hero[data-art='meadow'] .page-hero__art--baked .page-hero__scene { left: -14%; right: calc(var(--bleed) * -1); } } .page-hero[data-art='meadow'] .page-hero__art--baked .page-hero__baked { object-position: 50% 100%; -webkit-mask-image: linear-gradient(180deg, #000 60%, rgba(0, 0, 0, 0.78) 72%, rgba(0, 0, 0, 0.42) 84%, rgba(0, 0, 0, 0.12) 94%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, rgba(0, 0, 0, 0.78) 72%, rgba(0, 0, 0, 0.42) 84%, rgba(0, 0, 0, 0.12) 94%, transparent 100%); } @media (min-width: 1100px) { .page-hero[data-art='meadow'] .page-hero__art--baked .page-hero__baked { -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.08) 7%, rgba(0, 0, 0, 0.3) 15%, rgba(0, 0, 0, 0.6) 24%, rgba(0, 0, 0, 0.88) 33%, #000 42%), linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0.78) 73%, rgba(0, 0, 0, 0.42) 85%, rgba(0, 0, 0, 0.12) 94%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.08) 7%, rgba(0, 0, 0, 0.3) 15%, rgba(0, 0, 0, 0.6) 24%, rgba(0, 0, 0, 0.88) 33%, #000 42%), linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0.78) 73%, rgba(0, 0, 0, 0.42) 85%, rgba(0, 0, 0, 0.12) 94%, transparent 100%); mask-composite: intersect; } } /* офис: четыре карточки с объектами; у часов — живой статус «открыто / закрыто» */ .feats.ops .feat { background: var(--mist); } .ops__status { justify-self: start; margin-top: 4px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--paper); box-shadow: var(--sh-1); font-size: 13px; font-weight: 600; } @media (min-width: 768px) { .feats.ops { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .feats.ops { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .case__photo img { object-position: 55% 40%; } /* ========================================================================== 55. Контакты и единый код hero (10.11) ========================================================================== */ /* «Где нас найти»: карточки связи прижаты к нижней границе — заканчиваются вровень с плашкой про бота */ @media (min-width: 1100px) { #channels .duo { align-items: end; } } /* хиро контактов: фото в скруглённой панели, на десктопе уходит за правый край экрана — как окно-сцена «Обмена» */ .page-hero__photo { --bleed: 0px; } @media (min-width: 1100px) { .page-hero:has(.page-hero__photo) .page-hero__grid { align-items: center; } .page-hero__photo { --bleed: calc((100vw - min(100vw, var(--container) + var(--gutter) * 2)) / 2 + var(--gutter)); aspect-ratio: auto; height: 580px; margin-right: calc(var(--bleed) * -1); border-radius: 40px 0 0 40px; box-shadow: none; } .page-hero__photo img { object-position: 50% 60%; } .page-hero__photo .pill { left: 22px; bottom: 22px; } } /* круги в хиро недвижимости и бизнеса — одного размера, объекты одного масштаба */ .page-hero__art--svc-globe .page-hero__disc { width: min(88vw, 352px); } .page-hero__art--svc-globe .page-hero__obj { height: 240px; } @media (min-width: 768px) { .page-hero__art--svc-globe .page-hero__obj { height: 295px; } .page-hero__art--svc-globe .page-hero__disc { width: 412px; } } @media (min-width: 1100px) { .page-hero__art--svc-globe .page-hero__obj { height: 360px; } .page-hero__art--svc-globe .page-hero__disc { width: 500px; } .page-hero__art--svc-globe .page-hero__shadow { translate: -50% 166px; } .page-hero__art--svc-globe .page-hero__leaf--1 { left: calc(50% - 266px); } .page-hero__art--svc-globe .page-hero__leaf--2 { right: calc(50% - 256px); } .page-hero__art--svc-globe .page-hero__leaf--3 { right: calc(50% - 282px); } } @media (min-width: 1100px) { #channels .note { margin-bottom: 0; } } /* ========================================================================== 56. Режим проверки для заказчика (?fill): заглушки и помеченные места — маркером ========================================================================== */ .fill-mark { color: var(--ink); background: #fff1a6; border-radius: 6px; padding: 0 4px; box-shadow: 0 0 0 2px #f2c200, 0 0 0 6px rgba(242, 194, 0, 0.22); } html.fill-mode [data-fill] { position: relative; outline: 3px dashed #f2c200; outline-offset: 5px; border-radius: 10px; } html.fill-mode [data-fill]::after { content: attr(data-fill-label); position: absolute; left: 0; top: calc(100% + 10px); z-index: 30; width: max-content; max-width: 280px; padding: 6px 10px; border-radius: 10px; background: #fff1a6; color: var(--ink); font: 600 13px/1.3 var(--font, inherit); letter-spacing: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } html.fill-mode .grove__num [data-fill]::after { top: auto; bottom: 100%; font-size: 13px; } .fill-bar { position: fixed; z-index: 90; left: 50%; bottom: 16px; translate: -50% 0; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5); white-space: nowrap; } .fill-bar span { color: rgba(255, 255, 255, 0.7); } .fill-bar a { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: #fff1a6; color: var(--ink); font-weight: 600; } @media (max-width: 479px) { .fill-bar span { display: none; } } html.fill-mode .calc__rate[data-fill]::after { left: auto; right: 0; } html.fill-mode .case[data-fill]::after { top: 14px; left: 14px; } html.fill-mode .case[data-fill] { overflow: visible; } /* ========================================================================== 57. Мобильная главная (11.11) ========================================================================== */ /* сообщения в чате появляются спокойнее: дольше проявляются и чуть дальше поднимаются */ [data-chat] [data-msg] { transform: translateY(14px) scale(0.97); transition: opacity 520ms var(--ease-out), transform 720ms var(--ease-out), background-color 300ms var(--ease), box-shadow 300ms var(--ease), color 300ms var(--ease); } [data-chat] [data-msg].is-in { transform: none; } .msg.is-typing { transform: none; } .msg.is-typing::after { animation-duration: 1100ms; } @media (max-width: 767px) { /* hero: весь посыл с кнопками — на первом экране телефона. Высота кадра = видимый экран (svh) без жёсткого минимума 700 px. Первая строка сетки не короче, чем от верха до низа «exchange» плюс зазор под хвостик «g», поэтому на низких экранах карточка не наезжает на слово, а кадр просто становится выше. */ .hero__frame { --wt: 144px; min-height: calc(100svh - 24px); grid-template-rows: minmax(calc(var(--wt) + var(--fs) * 1.24 + var(--bw) / var(--ba) + 20px), 1fr) auto; } .hero__card { padding: 20px 18px 18px; gap: 12px; } /* «Бизнесу»: подпись под кнопкой во всю ширину — по центру, как одно целое с кнопкой */ .biz__cta { justify-content: center; } .biz__cta p { width: 100%; max-width: none; text-align: center; text-wrap: balance; } } /* ========================================================================== 58. Страница обмена на телефоне (11.11) ========================================================================== */ /* белая кнопка заметна на белом: тонкая обводка и мягкая лиловая тень */ .btn--paper { box-shadow: 0 0 0 1px rgba(21, 18, 28, 0.07), 0 1px 2px rgba(21, 18, 28, 0.06), 0 12px 26px -12px rgba(76, 58, 170, 0.34); } /* факты hero: не больше двух, строго одна строка — не переносятся и не толкают сцену вниз; на телефоне компактнее и с короткой подписью. Не влезают целиком — скрываются полностью: на экранах уже 360 px и по проверке скрипта (main.js, 18) */ .page-hero__facts { flex-wrap: nowrap; } .page-hero__facts li { flex: none; } .page-hero__facts.is-overflow { display: none; } /* на телефоне фактов пока нет совсем: первый экран — заголовок, текст, кнопки и сцена */ @media (max-width: 767px) { .page-hero__facts { display: none; } } .page-hero__facts .f-short { display: none; } @media (max-width: 767px) { .page-hero__facts { gap: 6px; margin-top: 2px; } .page-hero__facts li { height: 30px; padding: 0 11px 0 9px; gap: 6px; font-size: 12px; } .page-hero__facts svg { width: 14px; height: 14px; } .page-hero__facts .f-long { display: none; } .page-hero__facts .f-short { display: inline; } } /* шаги на телефоне и планшете: лоза тоньше ростков, листья крошечные */ @media (max-width: 1099px) { .grow__path { stroke-width: 1.4; stroke: #79a845; } .grow__tendril { stroke-width: 1.1; stroke: #79a845; } } /* FAQ под управлением main.js (17): высоту ведёт скрипт, значок — по классу, который ставится в момент нажатия */ .faq--js details::details-content { height: auto; overflow: visible; transition: none; } .faq__icon { transition: background-color 280ms var(--ease); } .faq__icon::before, .faq__icon::after { transition: transform 280ms var(--ease-out); } .faq--js details[open] .faq__icon::after { transform: rotate(90deg); } .faq--js details[open] .faq__icon { background: var(--mist); } .faq--js details.is-open .faq__icon::after { transform: rotate(0deg); } .faq--js details.is-open .faq__icon { background: var(--lilac-100); } .faq summary { -webkit-tap-highlight-color: transparent; } /* FAQ: открытый ответ тоже нажимается — закрывает пункт */ .faq--js details.is-open .faq__a { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Bereza Pay: у сцены с терминалом сверху ~100 px белого неба — на телефоне и планшете поднимаем её, чтобы от кнопок до луга было столько же, сколько до картинки на других страницах (и терминал влез в первый экран) */ @media (max-width: 767px) { .page-hero[data-art='meadow'] .page-hero__art--baked { margin-top: -66px; } } @media (min-width: 768px) and (max-width: 1099px) { .page-hero[data-art='meadow'] .page-hero__art--baked { margin-top: -84px; } } /* hero с лиловым кругом («Недвижимость», «Бизнесу»), телефон и планшет: круг целиком внутри своего блока, с запасом 28 px сверху и снизу — не заходит под кнопки, факты и текст */ @media (max-width: 767px) { .page-hero[data-art='disc'] .page-hero__art { height: calc(min(88vw, 352px) + 56px); } } @media (min-width: 768px) and (max-width: 1099px) { .page-hero[data-art='disc'] .page-hero__art { height: calc(412px + 56px); } } /* ========================================================================== 59. Шапка над тёмной панелью (11.11): смена цвета плавная, без рывка. Градиент фона не анимируется, поэтому фон-стекло остаётся прежним, а темноту даёт внутренняя тень (она плавно перетекает); кромка и блик стекла притухают по прозрачности. Всё — 600 мс. Списки теней в обоих состояниях одинаковой длины и порядка — иначе браузер переключит их рывком. ========================================================================== */ .nav__bar.glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(150, 135, 240, 0.16), inset 0 0 0 80px rgba(30, 26, 42, 0), 0 12px 32px -14px rgba(70, 52, 170, 0.24); transition: box-shadow 600ms var(--ease); } .nav--dark .nav__bar.glass { background: linear-gradient(140deg, rgba(255, 255, 255, 0.74) 0%, rgba(246, 244, 255, 0.46) 55%, rgba(220, 214, 255, 0.34) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(150, 135, 240, 0), inset 0 0 0 80px rgba(30, 26, 42, 0.82), 0 14px 34px -16px rgba(0, 0, 0, 0.6); } .nav__bar.glass::before, .nav__bar.glass::after { transition: opacity 600ms var(--ease); } .nav--dark .nav__bar.glass::before { background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(189, 180, 255, 0.55) 38%, rgba(255, 255, 255, 0.25) 68%, rgba(189, 180, 255, 0.75)); opacity: 0.42; } .nav--dark .nav__bar.glass::after { background: radial-gradient(120% 70% at 18% 0%, rgba(255, 255, 255, 0.7), transparent 55%); opacity: 0.14; } .nav__link, .nav__status, .lang-switch, .nav__logo img.word, .nav__cta { transition: background-color 600ms var(--ease), color 600ms var(--ease), filter 600ms var(--ease), box-shadow 600ms var(--ease); } .nav__burger { transition: background-color 600ms var(--ease), box-shadow 600ms var(--ease), transform var(--d-press) var(--ease-out); } .nav__burger span { transition: transform var(--d-base) var(--ease-out), background-color 600ms var(--ease); }