/* =========================================================
BUY PAGE — buy.html
Matches Figma: 1920 / 1200 / 768 / 360
========================================================= */
/* ---------- Grid frame: vertical side lines as real borders on .wrapper ---------- */
.wrapper {
max-width: 1920px;
margin: 0 auto;
border-left: 1.5px solid #E1E1E1;
border-right: 1.5px solid #E1E1E1;
box-sizing: border-box;
}
.big_block_home--buy .top_header_group {
margin-left: -96px;
margin-right: -96px;
padding-left: 96px;
padding-right: 96px;
box-sizing: border-box;
}
/* ---------- Neutralize index.html "big_block_home" 400vh sticky hero; white bg ---------- */
.big_block_home.big_block_home--buy {
position: relative;
height: auto;
background: #FFFFFF;
}
.big_block_home.big_block_home--buy > .container {
height: auto;
max-width: 1920px;
padding: 0 96px;
}
.big_block_home.big_block_home--buy header {
position: relative;
top: auto;
left: auto;
right: auto;
z-index: 10;
padding-top: 25px;
}
/* Header color overrides — match / exceed specificity of style.css (which sets
color:#FFFFFF on these selectors for index.html's dark hero). On buy.html the
header sits on a white background, so every text / icon / border is recoloured
to #010101. */
.big_block_home--buy header .about_block .top_header_group .menu ul li a,
.big_block_home--buy header .about_block .top_header_group .menu_burger .lang_select select,
.big_block_home--buy header .about_block .top_header_group .right_contacts .phone_number,
.big_block_home--buy header .about_block .top_header_group .right_contacts .lang_select select,
.big_block_home--buy header .about_block .top_header_group .right_contacts .consultation,
.big_block_home--buy header .about_block .top_header_group .right_contacts .lang-dropdown .lang-dropdown-btn,
.big_block_home--buy header .about_block .top_header_group .right_contacts .lang-dropdown .lang-arrow,
.big_block_home--buy header .about_block .bottom_header .menu ul li a,
.big_block_home--buy header .about_block .bottom_header .menu_burger,
.big_block_home--buy header .about_block .bottom_header .menu_burger span {
color: #010101;
}
/* Burger bars */
.big_block_home--buy header .about_block .top_header_group .menu_burger .burger span,
.big_block_home--buy header .about_block .bottom_header .menu_burger .burger span {
background: #010101;
}
/* Consultation button + border-bottom of top group */
.big_block_home--buy header .about_block .top_header_group .right_contacts .consultation {
border-color: #010101;
}
.big_block_home--buy header .about_block .top_header_group {
border-bottom-color: #010101;
}
.big_block_home--buy header .about_block .top_header_group .right_contacts .whatsapp svg path {
stroke: #010101;
}
/* Hover states stay visible */
.big_block_home--buy header .about_block .top_header_group .menu ul li a:hover,
.big_block_home--buy header .about_block .bottom_header .menu ul li a:hover { opacity: 0.7; color: #010101; }
/* Logo */
.big_block_home--buy header .logo img { filter: brightness(0); }
.big_block_home--buy header .mega-menu .logo img { filter: none; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: "Inter", sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 120%;
letter-spacing: 0.02em;
padding: 18px 36px;
border: 1px solid transparent;
border-radius: 0;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn--primary { background: #FFFFFF; color: #010101; border-color: #FFFFFF; }
.btn--primary:hover { background: transparent; color: #FFFFFF; }
.btn--ghost { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.btn--ghost:hover { background: #FFFFFF; color: #41545C; }
.btn--outline { background: transparent; color: #010101; border-color: #010101; }
.btn--outline:hover { background: #010101; color: #FFFFFF; }
.btn--dark { background: #41545C; color: #FFFFFF; border-color: #41545C; }
.btn--dark:hover { background: transparent; color: #41545C; }
/* =========================================================
1. HERO (white bg) — pixel-accurate to Figma 1920 frame
========================================================= */
.buy_hero {
padding: 117px 0 0;
color: #010101;
}
.buy_hero__breadcrumbs {
display: flex;
align-items: center;
gap: 8px;
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #C4C4C4;
margin-bottom: 33px;
}
.buy_hero__breadcrumbs a { color: #C4C4C4; text-decoration: none; }
.buy_hero__breadcrumbs a:hover { color: #010101; }
.buy_hero__breadcrumbs span { color: #C4C4C4; }
.buy_hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 573px;
gap: 0;
align-items: start;
position: relative;
}
.buy_hero__text { padding-top: 0; }
.buy_hero__text h1 {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 80px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
margin-bottom: 32px;
max-width: 1157px;
text-transform: uppercase;
}
.buy_hero__text p {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
max-width: 846px;
margin-bottom: 141px;
}
.buy_hero__cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1085px;
max-width: 100%;
height: 80px;
padding: 0 52px;
background: transparent;
color: #010101;
border: 1px solid #010101;
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 25px;
line-height: 150%;
letter-spacing: 0.05em;
text-transform: none;
text-decoration: none;
transition: background .25s, color .25s;
}
.buy_hero__cta:hover { background: #010101; color: #FFFFFF; }
.buy_hero__photo {
position: absolute;
top: -72px;
right: 0;
width: 573px;
height: 685px;
overflow: hidden;
}
.buy_hero__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =========================================================
2. STATS (white bg)
========================================================= */
.buy_stats {
padding: 0;
color: #010101;
margin-top: 80px;
}
.buy_stats__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border-top: 1.6px solid #E1E1E1;
border-bottom: 1.6px solid #E1E1E1;
padding: 41px 0 35px;
}
.buy_stat {
display: flex;
flex-direction: column;
gap: 0;
padding: 0 36px;
border-right: 1.6px solid #E1E1E1;
}
.buy_stat:first-child { padding-left: 36px; }
.buy_stat:last-child { border-right: 0; }
.buy_stat b {
display: flex;
align-items: baseline;
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 80px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
margin-bottom: 193px;
}
.buy_stat b em {
font-family: "Inter", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 80px;
}
.buy_stat span {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #3C3C3B;
max-width: 500px;
}
/* =========================================================
3. BIG DARK CTA (persistent 1730x96 button)
========================================================= */
.buy_bigcta {
display: flex;
justify-content: center;
padding: 32px 0 0;
}
.buy_bigcta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1730px;
height: 96px;
padding: 0 35px;
background: #41545C;
color: #FFFFFF;
border: 0;
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 25px;
line-height: 150%;
letter-spacing: 0.05em;
text-transform: none;
text-decoration: none;
transition: background .25s, color .25s;
}
.buy_bigcta__btn:hover { background: #010101; color: #FFFFFF; }
/* =========================================================
4. SEARCH (white bg)
========================================================= */
.buy_search {
padding: 200px 0 80px;
background: #FFFFFF;
color: #010101;
}
.buy_search .container {
max-width: 1920px;
padding: 0 96px;
}
.buy_search__header {
text-align: center;
margin: 0 auto 82px;
max-width: 1482px;
}
.buy_search__header h2 {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 80px;
line-height: 100%;
letter-spacing: 0.02em;
color: #010101;
margin-bottom: 32px;
text-transform: uppercase;
}
.buy_search__header p {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
letter-spacing: 0.02em;
color: #3C3C3B;
text-transform: none;
}
.buy_search__form {
width: 100%;
}
.buy_search__row {
display: grid;
grid-template-columns: 213px 125px 126px 240px 264px 272px 264px;
justify-content: space-between;
align-items: end;
gap: 0;
padding: 0 48px 34px;
border-bottom: 1.6px solid #E1E1E1;
margin-bottom: 34px;
}
.buy_search__field {
display: flex;
align-items: center;
gap: 8px;
height: 64px;
padding: 16px 19px;
min-width: 0;
position: relative;
}
.buy_search__field > span {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #B9B9B9;
}
.buy_search__field > em {
font-family: "Inter", sans-serif;
font-weight: 200;
font-style: normal;
font-size: 32px;
color: #010101;
flex-shrink: 0;
}
.buy_search__field--price select {
width: auto;
min-width: 0;
flex: 1 1 auto;
padding-right: 22px;
background-position: right 2px center;
}
.buy_search__field select {
width: 100%;
height: 32px;
padding: 0 20px 0 0;
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #B9B9B9;
background: transparent;
border: 0;
outline: none;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0 center;
cursor: pointer;
}
.buy_search__field select option { background: #FFFFFF; color: #010101; }
.buy_search__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 48px;
}
.buy_search__more {
display: inline-flex;
align-items: center;
gap: 16px;
background: transparent;
border: 0;
padding: 0;
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
letter-spacing: 0.02em;
color: #B9B9B9;
cursor: pointer;
transition: color .25s;
}
.buy_search__more:hover { color: #010101; }
.buy_search__more::after {
content: "";
width: 37px;
height: 37px;
border: 1px solid #B9B9B9;
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), border-color .25s, background-image .25s;
}
/* Open state — switch + to × via rotation (transform-only, no image swap repaint) */
.buy_search__more.is-open::after {
transform: rotate(45deg);
}
/* =========================================================
4b. EXPANDABLE FILTERS PANEL
Reveal mechanic: grid-template-rows 0fr → 1fr (smooth, native)
Chips stagger : per-chip --i delay, transform + opacity only
========================================================= */
.buy_search__more-panel {
max-height: 0;
overflow: hidden;
opacity: 0;
transition:
max-height 0.65s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
will-change: max-height, opacity;
}
.buy_search__more-panel.is-open {
opacity: 1;
}
.buy_search__more-inner {
overflow: hidden;
}
.buy_search__more-content {
padding: 32px 48px 34px;
border-bottom: 1.6px solid #E1E1E1;
}
/* Top row: input + 2 right chips */
.buy_search__more-top {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 80px;
align-items: end;
padding-bottom: 28px;
border-bottom: 1px solid #E1E1E1;
}
.buy_search__more-input {
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid #B9B9B9;
padding: 0 6px 10px;
max-width: 720px;
}
.buy_search__more-input input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
outline: none;
padding: 0;
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #010101;
}
.buy_search__more-input input::placeholder {
color: #B9B9B9;
}
.buy_search__more-input em {
font-family: "Inter", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 25px;
line-height: 130%;
color: #010101;
flex-shrink: 0;
}
.buy_search__more-toprow {
display: flex;
align-items: center;
gap: 56px;
padding-bottom: 8px;
}
/* 4×3 chip grid */
.buy_search__more-grid {
padding-top: 32px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 26px 40px;
}
/* Chip itself */
.buy_chip {
display: inline-flex;
align-items: center;
gap: 14px;
cursor: pointer;
user-select: none;
position: relative;
/* Stagger reveal: hidden until panel opens */
opacity: 0;
transform: translate3d(0, 12px, 0);
transition:
opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
/* Delay grows with --i so chips cascade in */
transition-delay: 0ms;
}
.buy_search__more-panel.is-open .buy_chip {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: calc(180ms + var(--i, 0) * 35ms);
}
.buy_chip__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
margin: 0;
}
.buy_chip__dot {
position: relative;
width: 16px;
height: 16px;
flex-shrink: 0;
border: 1px solid #41545C;
border-radius: 50%;
box-sizing: border-box;
}
.buy_chip__dot::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background: #41545C;
border-radius: 50%;
transform: translate3d(-50%, -50%, 0) scale(0);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.buy_chip__input:checked ~ .buy_chip__dot::after {
transform: translate3d(-50%, -50%, 0) scale(1);
}
.buy_chip__label {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #3C3C3B;
transition: color 0.2s ease;
}
.buy_chip:hover .buy_chip__label {
color: #010101;
}
@media (prefers-reduced-motion: reduce) {
.buy_search__more-panel,
.buy_chip,
.buy_search__more::after {
transition: none;
}
}
.buy_search__submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 317px;
height: 64px;
padding: 0 24px;
background: #41545C;
color: #FFFFFF;
border: 0;
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 25px;
line-height: 130%;
letter-spacing: 0.05em;
text-transform: none;
cursor: pointer;
transition: background .25s, color .25s;
}
.buy_search__submit:hover { background: #010101; }
/* =========================================================
5. PROPERTY LISTINGS (2 alternating full-width cards)
========================================================= */
.buy_listings {
padding: 0 0 0;
background: #FFFFFF;
}
.buy_listings .container {
max-width: 1920px;
padding: 0 96px;
}
.buy_listing {
display: grid;
grid-template-columns: 760px 869px;
gap: 54px;
align-items: stretch;
justify-content: space-between;
padding: 48px 45px 0;
margin-bottom: 96px;
}
.buy_listing--text-right {
grid-template-columns: 869px 760px;
gap: 41px;
padding: 48px 0 0 0;
justify-content: flex-start;
}
.buy_listing:last-of-type { margin-bottom: 0; }
.buy_listing__text {
display: flex;
flex-direction: column;
padding: 0;
}
.buy_listing__head {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 36px;
}
.buy_listing__title {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
text-transform: none;
}
.buy_listing__ref {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 32px;
line-height: 120%;
color: #B9B9B9;
letter-spacing: 0;
}
.buy_listing__desc {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #3C3C3B;
margin-bottom: 40px;
max-width: 736px;
}
.buy_listing__specs {
display: flex;
flex-direction: column;
gap: 16px;
padding: 0;
border: 0;
margin: 0 0 auto;
}
.buy_listing__specs li {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #B9B9B9;
display: flex;
align-items: baseline;
gap: 8px;
}
.buy_listing__specs li span { color: #B9B9B9; }
.buy_listing__specs li b { font-weight: 300; color: #B9B9B9; }
.buy_listing__foot {
margin-top: 48px;
display: flex;
flex-direction: column;
gap: 48px;
}
.buy_listing__price {
display: flex;
align-items: baseline;
gap: 12px;
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
color: #010101;
letter-spacing: 0.02em;
}
.buy_listing__price em {
font-family: "Inter", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 44px;
color: #010101;
}
.buy_listing__price b { font-weight: 400; }
.buy_listing__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 80px;
padding: 0 24px;
background: transparent;
color: #232323;
border: 1px solid #232323;
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 25px;
line-height: 130%;
letter-spacing: 0.05em;
text-transform: none;
text-decoration: none;
transition: background .25s, color .25s;
}
.buy_listing__btn:hover { background: #232323; color: #FFFFFF; }
.buy_listing__photo {
width: 100%;
aspect-ratio: 869 / 854;
overflow: hidden;
}
.buy_listing__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Dark full-width CTA "Смотреть больше проектов" */
.buy_listings__more {
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 192px);
max-width: 1730px;
height: 96px;
margin: 97px auto 0;
background: #41545C;
color: #FFFFFF;
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 25px;
line-height: 130%;
letter-spacing: 0.05em;
text-decoration: none;
transition: background .25s;
}
.buy_listings__more:hover { background: #010101; color: #FFFFFF; }
/* =========================================================
6. STEPS (exact Figma match)
========================================================= */
.buy_steps {
padding: 248px 0 0;
background: #FFFFFF;
}
.buy_steps .container {
max-width: 1920px;
padding: 0 96px;
}
.buy_steps__title {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 80px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
text-align: center;
margin: 0 auto 80px;
max-width: 1456px;
text-transform: uppercase;
}
.buy_steps__grid {
display: grid;
grid-template-columns: 832px 1fr;
gap: 16px;
align-items: stretch;
min-height: 778px;
}
.buy_steps__left {
background: #FAFAFA;
padding: 147px 51px 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: left;
}
.buy_steps__photo {
width: 243px;
height: 235px;
overflow: hidden;
margin-bottom: 48px;
}
.buy_steps__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.buy_steps__desc1 {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 32px;
line-height: 120%;
color: #010101;
width: 100%;
margin-bottom: 16px;
text-transform: uppercase;
text-align: center;
}
.buy_steps__desc2 {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #3C3C3B;
width: 100%;
max-width: 565px;
text-align: center;
align-self: center;
margin-top: 12px;
padding-left: 0;
}
.buy_steps__desc2:empty {
display: none;
}
.buy_steps__list {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
border-top: 1.6px solid #E1E1E1;
}
.buy_step {
display: grid;
grid-template-columns: auto 1fr 37px;
align-items: center;
gap: 20px;
padding: 14px 16px 14px 16px;
border-bottom: 1.6px solid #E1E1E1;
cursor: pointer;
transition: color .25s;
min-height: 98px;
}
.buy_step__num {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
color: #C4C4C4;
letter-spacing: 0.02em;
}
.buy_step__title {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
letter-spacing: 0.02em;
color: #C4C4C4;
}
.buy_step__ico {
display: inline-block;
width: 37px;
height: 37px;
border: 1px solid #C4C4C4;
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
transition: border-color .25s, background-image .25s;
}
.buy_step.is-active { min-height: 144px; }
.buy_step.is-active .buy_step__num,
.buy_step.is-active .buy_step__title { color: #010101; }
.buy_step.is-active .buy_step__ico {
border-color: #010101;
background-image: url("data:image/svg+xml;utf8,");
}
.buy_steps__outro {
font-family: "Inter", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 25px;
line-height: 130%;
color: #3C3C3B;
text-align: center;
margin: 64px 0 32px;
padding: 0;
border: 0;
}
.buy_steps__cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1730px;
height: 96px;
margin: 0 auto;
background: #41545C;
color: #FFFFFF;
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 25px;
line-height: 150%;
letter-spacing: 1.25px;
text-transform: uppercase;
text-decoration: none;
transition: background .25s;
}
.buy_steps__cta:hover { background: #010101; }
/* =========================================================
7. LIFESTYLE — staggered photos (exact Figma)
========================================================= */
.buy_lifestyle {
position: relative;
background: #FAFAFA;
padding: 208px 0 223px;
margin-top: 40px;
}
.buy_lifestyle__header {
text-align: center;
margin: 0 auto 80px;
max-width: 1634px;
padding: 0 20px;
}
.buy_lifestyle__header h2 {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 80px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
margin-bottom: 32px;
text-transform: uppercase;
}
.buy_lifestyle__sub {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
}
.buy_lifestyle__photos {
position: relative;
width: 1114px;
max-width: calc(100% - 40px);
height: 499px;
margin: 0 auto 80px;
}
.buy_lifestyle__photo {
position: absolute;
overflow: hidden;
}
.buy_lifestyle__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.buy_lifestyle__photo--left {
left: 0;
top: 93px;
width: 293px;
height: 313px;
}
.buy_lifestyle__photo--center {
left: 325px;
top: 0;
width: 464px;
height: 499px;
}
.buy_lifestyle__photo--right {
left: 821px;
top: 93px;
width: 293px;
height: 313px;
}
.buy_lifestyle__intro {
max-width: 1006px;
margin: 0 auto;
padding: 0 20px;
text-align: center;
}
.buy_lifestyle__intro1 {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 32px;
line-height: 120%;
color: #3C3C3B;
margin: 0 auto 16px;
max-width: 891px;
text-transform: uppercase;
}
.buy_lifestyle__intro2 {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #3C3C3B;
margin: 0 auto;
max-width: 1006px;
}
/* =========================================================
8. DISTRICTS (exact Figma match)
========================================================= */
.buy_districts {
padding: 0;
background: #FFFFFF;
}
.buy_districts__header {
max-width: 1704px;
margin: 0 auto;
padding: 0 108px;
}
.buy_districts__title {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 80px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
text-align: center;
margin: 0 auto 48px;
max-width: 1634px;
text-transform: uppercase;
}
.buy_districts__tabs {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 29px;
padding: 0;
border: 0;
margin-bottom: 0;
position: relative;
user-select: none;
-webkit-user-select: none;
}
/* Grab cursor only when tabs are actually scrollable (JS toggles .is-scrollable) */
.buy_districts__tabs.is-scrollable {
cursor: grab;
}
.buy_districts__tabs.is-grabbing,
.buy_districts__tabs.is-grabbing .buy_tab {
cursor: grabbing !important;
}
/* While dragging, suppress hover transitions to keep movement crisp */
.buy_districts__tabs.is-grabbing .buy_tab {
transition: none !important;
}
.buy_tab {
display: inline-flex;
align-items: center;
background: transparent;
border: 0;
padding: 0 0 0 32px;
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
letter-spacing: 0.02em;
color: #C4C4C4;
cursor: pointer;
transition: color .25s;
white-space: nowrap;
flex-shrink: 0;
position: relative;
}
.buy_tab__sep {
position: absolute;
left: 0;
top: 50%;
width: 22px;
height: 1em;
display: flex;
align-items: center;
justify-content: center;
color: #C4C4C4;
transform: translateY(-50%);
transition: opacity 0.35s ease;
pointer-events: none;
}
.buy_tab__sep::before {
content: "/";
}
.buy_tab:first-of-type .buy_tab__sep::before {
content: "";
}
.buy_tab.is-active .buy_tab__sep {
opacity: 0;
}
.buy_tab.is-active { color: #010101; }
.buy_tab:hover { color: #010101; }
/* Sliding cursor — single dot that moves between tabs */
.buy_tab__cursor {
position: absolute;
width: 11px;
height: 11px;
background: #232323;
border-radius: 50%;
top: 50%;
left: 0;
margin-top: -5.5px;
transform: translate3d(0, 0, 0);
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
z-index: 1;
opacity: 0;
}
.buy_tab__cursor.is-ready {
opacity: 1;
}
/* Swap fade between district contents */
.buy_districts__info,
.buy_districts__gallery {
transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.buy_districts__info.is-swap-fading,
.buy_districts__gallery.is-swap-fading {
opacity: 0;
}
.buy_districts__info {
display: grid;
grid-template-columns: 410px 1fr;
gap: 163px;
max-width: 1706px;
margin: 0 auto;
padding: 64px 108px 0;
border-top: 1.6px solid #E1E1E1;
margin-top: 96px;
align-items: end;
}
.buy_districts__left {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.buy_districts__left h3 {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
margin-bottom: 0;
text-transform: none;
}
.buy_districts__tagline {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #3C3C3B;
max-width: 410px;
margin-top: auto;
}
.buy_districts__summary {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 32px;
line-height: 120%;
color: #010101;
margin-bottom: 16px;
max-width: 1133px;
text-transform: uppercase;
}
.buy_districts__desc {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #3C3C3B;
margin-bottom: 40px;
max-width: 821px;
}
.buy_districts__features {
display: grid;
grid-template-columns: 494px 539px;
grid-template-rows: auto auto;
grid-auto-flow: column;
gap: 24px 50px;
margin: 0;
padding: 0;
list-style: none;
}
.buy_districts__features li {
position: relative;
padding-left: 22px;
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #3C3C3B;
margin-bottom: 24px;
}
.buy_districts__features li:last-child { margin-bottom: 0; }
.buy_districts__features li::before {
content: "";
position: absolute;
left: 0;
top: 14px;
width: 6px;
height: 6px;
background: #010101;
border-radius: 50%;
}
.buy_districts__gallery {
max-width: 1920px;
margin: 64px auto 0;
padding: 0 96px;
display: grid;
grid-template-columns: 538px 1fr;
grid-template-rows: auto auto;
gap: 32px;
border-bottom: 1.6px solid #E1E1E1;
padding-bottom: 0;
}
.buy_districts__big {
grid-column: 1 / -1;
width: 100%;
aspect-ratio: 1728 / 803;
overflow: hidden;
}
.buy_districts__small {
aspect-ratio: 538 / 640;
overflow: hidden;
}
.buy_districts__wide {
aspect-ratio: 1155 / 640;
overflow: hidden;
}
.buy_districts__big img,
.buy_districts__small img,
.buy_districts__wide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =========================================================
9. STORIES (exact Figma match)
========================================================= */
.buy_stories {
padding: 200px 0 0;
background: #FFFFFF;
}
.buy_stories__title {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 80px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
text-align: center;
margin: 0 auto 80px;
max-width: 1376px;
padding: 0 20px;
text-transform: uppercase;
}
.buy_stories__grid {
display: grid;
grid-template-columns: repeat(3, 554px);
justify-content: center;
gap: 32px;
max-width: 1728px;
margin: 0 auto;
padding: 19px 96px 19px;
border-top: 1.6px solid #E1E1E1;
border-bottom: 1.6px solid #E1E1E1;
}
.buy_story {
background: #FAFAFA;
padding: 32px;
display: flex;
flex-direction: column;
height: 653px;
gap: 0;
}
.buy_story__head {
display: flex;
align-items: flex-start;
gap: 24px;
margin-bottom: 32px;
}
.buy_story__avatar {
width: 117px;
height: 120px;
overflow: hidden;
flex-shrink: 0;
background: #D9D9D9;
}
.buy_story__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.buy_story__name-block {
display: flex;
flex-direction: column;
gap: 14px;
}
.buy_story__name {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
margin: 0;
}
.buy_story__age {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #3C3C3B;
}
.buy_story__req {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 32px;
line-height: 120%;
color: #3C3C3B;
margin-bottom: 17px;
max-width: 445px;
}
.buy_story__text {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #3C3C3B;
margin: 0;
}
.buy_story__date {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 32px;
line-height: 120%;
color: #CDCDCD;
margin-top: auto;
letter-spacing: 0;
}
.buy_stories__more {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1730px;
height: 96px;
margin: 16px auto 0;
background: #41545C;
color: #FFFFFF;
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 25px;
line-height: 150%;
letter-spacing: 0.05em;
text-decoration: none;
transition: background .25s;
text-transform: uppercase;
}
.buy_stories__more:hover { background: #010101; color: #FFFFFF; }
/* =========================================================
10. AFTER-SALE (mosaic grid 3x4, exact Figma match)
========================================================= */
.buy_after {
padding: 200px 0 0;
background: #FFFFFF;
}
.buy_after__header {
text-align: center;
margin: 0 auto 80px;
max-width: 1629px;
padding: 0 20px;
}
.buy_after__title {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 80px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
margin-bottom: 32px;
text-transform: uppercase;
}
.buy_after__lead {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
margin: 0 auto 16px;
max-width: 966px;
}
.buy_after__desc {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #3C3C3B;
max-width: 1114px;
margin: 0 auto;
}
.buy_after__grid {
display: grid;
grid-template-columns: 668px 585px 1fr;
grid-template-rows: 417px 416px 416px 415px;
max-width: 1920px;
margin: 0 auto;
border-top: 1.6px solid #E1E1E1;
border-bottom: 1.6px solid #E1E1E1;
grid-template-areas:
"photoSM care repair"
"cleaning photoLG photoLG"
"logistics photoLG photoLG"
"moving events own";
}
.buy_after__cell {
position: relative;
padding: 35px 35px 35px 94px;
border-right: 1.6px solid #E1E1E1;
}
.buy_after__cell:nth-child(3n) { border-right: 0; }
.buy_after__photo-sm {
grid-area: photoSM;
padding: 0;
border: 0;
border-right: 1.6px solid #E1E1E1;
}
.buy_after__photo-sm img {
width: 573px;
height: 416px;
object-fit: cover;
display: block;
margin-left: 94px;
margin-top: 0;
}
.buy_after__photo-lg {
grid-area: photoLG;
padding: 0;
border: 0;
}
.buy_after__photo-lg img {
width: 1155px;
height: 832px;
max-width: 100%;
object-fit: cover;
display: block;
}
.buy_after__svc--care { grid-area: care; padding-left: 35px; }
.buy_after__svc--repair { grid-area: repair; }
.buy_after__svc--cleaning { grid-area: cleaning; }
.buy_after__svc--logistics { grid-area: logistics; border-top: 1.6px solid #E1E1E1; }
.buy_after__svc--moving { grid-area: moving; border-top: 1.6px solid #E1E1E1; }
.buy_after__svc--events { grid-area: events; padding-left: 35px; }
.buy_after__svc--own { grid-area: own; }
.buy_after__cell h4 {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
letter-spacing: 0.02em;
color: #3C3C3B;
margin-bottom: 40px;
}
.buy_after__cell p {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #3C3C3B;
max-width: 514px;
}
.buy_after__svc--own p { max-width: 486px; }
.buy_after__svc--own h4 { margin-bottom: 72px; }
/* =========================================================
11. FAQ (exact Figma match)
========================================================= */
.buy_faq {
padding: 0;
background: #FFFFFF;
margin-top: 200px;
}
.buy_faq__title {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 80px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
text-align: center;
margin: 0 auto 80px;
max-width: 1474px;
padding: 0 20px;
text-transform: uppercase;
}
.buy_faq__list {
max-width: 1746px;
margin: 0 auto;
padding: 0 96px;
list-style: none;
}
.buy_faq__item {
border-top: 1.6px solid #E1E1E1;
}
.buy_faq__item:last-child {
border-bottom: 1.6px solid #E1E1E1;
}
.buy_faq__head {
width: 100%;
background: transparent;
border: 0;
padding: 64px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
text-align: left;
cursor: pointer;
min-height: 166px;
}
.buy_faq__head span {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 32px;
line-height: 120%;
color: #010101;
max-width: 1177px;
}
.buy_faq__head i {
position: relative;
width: 37px;
height: 37px;
flex-shrink: 0;
border: 1px solid #010101;
border-radius: 50%;
transition: border-color .3s;
}
.buy_faq__head i::before,
.buy_faq__head i::after {
content: "";
position: absolute;
background: #010101;
transition: transform .3s ease;
}
.buy_faq__head i::before {
top: 50%;
left: 50%;
width: 18px;
height: 1.5px;
transform: translate(-50%, -50%);
}
.buy_faq__head i::after {
top: 50%;
left: 50%;
width: 1.5px;
height: 18px;
transform: translate(-50%, -50%);
}
.buy_faq__item.is-open .buy_faq__head i::after { transform: translate(-50%, -50%) scaleY(0); }
.buy_faq__body {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease;
padding: 0 16px;
}
.buy_faq__item.is-open .buy_faq__body { max-height: 600px; }
.buy_faq__body p {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 22px;
line-height: 150%;
color: #3C3C3B;
padding: 0 0 48px;
max-width: 1400px;
}
/* =========================================================
12. FINAL CTA (photo bg + light card)
========================================================= */
.buy_cta {
position: relative;
padding: 0;
background: #F0EFEB;
background-image: url('../images/buy/cta_bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 1342px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 200px;
}
.buy_cta::before { content: none; }
.buy_cta .container {
max-width: 1920px;
padding: 0 96px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.buy_cta__inner {
text-align: center;
width: 100%;
max-width: 1349px;
background: #FAFAFA;
padding: 130px 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.buy_cta__inner h2 {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 80px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
margin-bottom: 32px;
text-transform: uppercase;
max-width: 1261px;
text-align: center;
}
.buy_cta__sub {
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
letter-spacing: 0.02em;
color: #010101;
margin-bottom: 197px;
max-width: 920px;
}
.buy_cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 699px;
max-width: 100%;
height: 80px;
padding: 0 52px;
background: transparent;
color: #232323;
border: 1px solid #232323;
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 25px;
line-height: 150%;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
margin: 0 auto 29px;
transition: background .25s, color .25s;
text-align: center;
}
.buy_cta__btn:hover { background: #232323; color: #FFFFFF; }
.buy_cta__micro {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #3C3C3B;
letter-spacing: 0;
}
/* =========================================================
MEDIA QUERIES
========================================================= */
/* ≤1500 — light scale-down */
@media (max-width: 1500px) {
.big_block_home.big_block_home--buy > .container,
.buy_listings .container { padding: 0 50px; }
.big_block_home--buy .top_header_group {
margin-left: -50px;
margin-right: -50px;
padding-left: 50px;
padding-right: 50px;
}
.buy_hero__text h1 { font-size: 56px; }
.buy_search__header h2,
.buy_lifestyle__header h2 { font-size: 40px; }
.buy_steps__title,
.buy_districts__title,
.buy_stories__title,
.buy_after__header h2,
.buy_faq__title { font-size: 34px; }
.buy_stat b { font-size: 52px; }
.buy_framed { padding: 46px; }
/* 7-col single-row search filter clips dropdown labels at ≤1500.
Wrap to 4×2 grid so each cell has enough room. */
.buy_search__row {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px 16px;
row-gap: 12px;
justify-content: stretch;
}
}
/* ≤1200 — Figma 1200 frame (pixel-perfect) */
@media (min-width: 769px) and (max-width: 1200px) {
/* ---------- Container / Header frame ---------- */
.big_block_home.big_block_home--buy > .container,
.buy_listings .container,
.buy_search .container,
.buy_steps .container,
.buy_cta .container { padding: 0 60px; }
.big_block_home--buy .top_header_group {
margin-left: -60px;
margin-right: -60px;
padding-left: 60px;
padding-right: 60px;
}
/* ---------- 1. HERO ---------- */
.buy_hero { padding: 56px 0 0; }
.buy_hero__breadcrumbs {
font-size: 16px;
gap: 6px;
margin-bottom: 24px;
}
.buy_hero__grid {
display: block;
position: relative;
}
.buy_hero__text h1 {
font-size: 50px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 20px;
max-width: calc(100% - 312px);
}
.buy_hero__text p {
font-size: 18px;
line-height: 130%;
max-width: 460px;
margin-bottom: 0;
}
.buy_hero__photo {
position: absolute;
top: 0;
right: 0;
width: 280px;
height: 320px;
}
.buy_hero__cta {
width: 100%;
height: 64px;
font-size: 16px;
line-height: 150%;
padding: 0 24px;
margin-top: 130px;
}
/* ---------- 2. STATS ---------- */
.buy_stats { margin-top: 50px; }
.buy_stats__grid {
padding: 32px 0 28px;
}
.buy_stat {
padding: 0 24px;
}
.buy_stat:first-child { padding-left: 24px; }
.buy_stat b {
font-size: 50px;
line-height: 110%;
margin-bottom: 80px;
}
.buy_stat b em { font-size: 50px; }
.buy_stat span {
font-size: 16px;
line-height: 130%;
}
/* ---------- 3. BIG CTA ---------- */
.buy_bigcta { padding: 28px 0 0; }
.buy_bigcta__btn {
height: 64px;
font-size: 16px;
padding: 0 24px;
}
/* ---------- 4. SEARCH ---------- */
.buy_search { padding: 100px 0 60px; }
.buy_search__header {
margin: 0 auto 48px;
max-width: 900px;
}
.buy_search__header h2 {
font-size: 50px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.buy_search__header p {
font-size: 22px;
line-height: 110%;
}
/* 7-col single-row was clipping dropdown labels at 769-1200.
Wrap into 4×2 grid: row 1 = 4 fields, row 2 = remaining 3 + room. */
.buy_search__row {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px 14px;
row-gap: 12px;
padding: 0 24px 24px;
margin-bottom: 24px;
justify-content: stretch;
}
.buy_search__field {
height: 50px;
padding: 12px 10px;
gap: 6px;
}
.buy_search__field > em { font-size: 20px; }
.buy_search__field select { font-size: 16px; padding-right: 18px; }
.buy_search__field .lux-select { font-size: 16px; height: 28px; }
.buy_search__bottom { padding: 0 24px; }
.buy_search__more {
font-size: 22px;
gap: 12px;
}
.buy_search__more::after {
width: 28px;
height: 28px;
background-size: 14px 14px;
}
.buy_search__submit {
width: 200px;
height: 50px;
font-size: 16px;
padding: 0 18px;
}
/* ---------- 5. LISTINGS ---------- */
.buy_listings { padding: 0; }
.buy_listing {
grid-template-columns: minmax(0, 1fr) 470px;
gap: 30px;
padding: 40px 0 0;
margin-bottom: 60px;
}
.buy_listing--text-right {
grid-template-columns: 470px minmax(0, 1fr);
padding: 40px 0 0;
}
.buy_listing__head {
gap: 14px;
margin-bottom: 24px;
}
.buy_listing__title { font-size: 28px; }
.buy_listing__ref { font-size: 18px; }
.buy_listing__desc {
font-size: 16px;
margin-bottom: 28px;
max-width: 100%;
}
.buy_listing__specs { gap: 12px; }
.buy_listing__specs li { font-size: 16px; }
.buy_listing__foot {
margin-top: 28px;
gap: 28px;
}
.buy_listing__price { font-size: 28px; gap: 8px; }
.buy_listing__price em { font-size: 28px; }
.buy_listing__btn {
height: 56px;
font-size: 16px;
}
.buy_listing__photo {
aspect-ratio: 470 / 470;
}
.buy_listings__more {
width: calc(100% - 120px);
height: 64px;
font-size: 16px;
margin: 60px auto 0;
}
/* ---------- 6. STEPS ---------- */
.buy_steps { padding: 100px 0 0; }
.buy_steps__title {
font-size: 50px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 48px;
max-width: 800px;
}
.buy_steps__grid {
grid-template-columns: 380px minmax(0, 1fr);
gap: 16px;
min-height: 0;
}
.buy_steps__left {
padding: 70px 30px 40px;
}
.buy_steps__photo {
width: 220px;
height: 215px;
margin-bottom: 32px;
}
.buy_steps__desc1 {
font-size: 18px;
line-height: 120%;
margin-bottom: 12px;
}
.buy_steps__desc2 {
font-size: 15px;
line-height: 130%;
text-align: center;
align-self: center;
padding-left: 0;
max-width: 360px;
}
.buy_step {
padding: 12px 12px;
min-height: 64px;
grid-template-columns: auto 1fr 28px;
gap: 12px;
}
.buy_step.is-active { min-height: 96px; }
.buy_step__num { font-size: 28px; }
.buy_step__title { font-size: 22px; }
.buy_step__ico {
width: 28px;
height: 28px;
background-size: 14px 14px;
}
.buy_steps__outro {
font-size: 16px;
margin: 40px 0 24px;
}
.buy_steps__cta {
height: 64px;
font-size: 16px;
}
/* ---------- 7. LIFESTYLE ---------- */
.buy_lifestyle {
padding: 100px 0;
margin-top: 24px;
}
.buy_lifestyle__header {
margin: 0 auto 48px;
padding: 0 60px;
}
.buy_lifestyle__header h2 {
font-size: 50px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.buy_lifestyle__sub {
font-size: 22px;
line-height: 110%;
}
.buy_lifestyle__photos {
width: 760px;
height: 340px;
margin: 0 auto 48px;
max-width: calc(100% - 60px);
}
.buy_lifestyle__photo--left {
width: 200px;
height: 213px;
top: 64px;
left: 0;
}
.buy_lifestyle__photo--center {
width: 316px;
height: 340px;
left: 222px;
top: 0;
}
.buy_lifestyle__photo--right {
width: 200px;
height: 213px;
top: 64px;
left: 560px;
}
.buy_lifestyle__intro {
max-width: 760px;
padding: 0 60px;
}
.buy_lifestyle__intro1 {
font-size: 18px;
line-height: 120%;
max-width: 600px;
}
.buy_lifestyle__intro2 {
font-size: 15px;
line-height: 130%;
max-width: 700px;
}
/* ---------- 8. DISTRICTS ---------- */
.buy_districts__header {
padding: 0 60px;
}
.buy_districts__title {
font-size: 50px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 32px;
}
.buy_districts__tabs {
gap: 14px;
flex-wrap: wrap;
}
.buy_tab {
font-size: 22px;
padding: 0 0 0 20px;
}
.buy_tab__sep {
width: 14px;
}
.buy_tab__cursor {
width: 8px;
height: 8px;
margin-top: -4px;
}
.buy_districts__info {
grid-template-columns: 280px minmax(0, 1fr);
gap: 40px;
padding: 40px 60px 0;
margin-top: 48px;
}
.buy_districts__left h3 {
font-size: 28px;
line-height: 110%;
}
.buy_districts__tagline {
font-size: 15px;
max-width: 280px;
margin-top: 16px;
}
.buy_districts__summary {
font-size: 18px;
line-height: 120%;
margin-bottom: 12px;
max-width: 100%;
}
.buy_districts__desc {
font-size: 15px;
line-height: 130%;
margin-bottom: 24px;
max-width: 100%;
}
.buy_districts__features {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 14px 30px;
}
.buy_districts__features li {
font-size: 15px;
margin-bottom: 0;
padding-left: 18px;
}
.buy_districts__features li::before {
width: 5px;
height: 5px;
top: 9px;
}
.buy_districts__gallery {
width: 100%;
box-sizing: border-box;
grid-template-columns: minmax(0, 538fr) minmax(0, 1155fr);
padding: 0 60px;
gap: 16px;
margin: 32px auto 0;
}
/* ---------- 9. STORIES ---------- */
.buy_stories { padding: 100px 0 0; }
.buy_stories__title {
font-size: 50px;
line-height: 110%;
letter-spacing: 0.02em;
margin: 0 auto 48px;
padding: 0 60px;
}
.buy_stories__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
padding: 16px 60px;
max-width: 100%;
}
.buy_story {
padding: 24px 20px;
height: auto;
min-height: 380px;
}
.buy_story__head {
gap: 16px;
margin-bottom: 20px;
}
.buy_story__avatar {
width: 70px;
height: 72px;
}
.buy_story__name { font-size: 22px; }
.buy_story__age { font-size: 14px; }
.buy_story__name-block { gap: 6px; }
.buy_story__req {
font-size: 18px;
margin-bottom: 12px;
max-width: 100%;
}
.buy_story__text { font-size: 15px; }
.buy_story__date {
font-size: 18px;
margin-top: 24px;
}
.buy_stories__more {
margin: 16px 60px 0;
width: calc(100% - 120px);
height: 64px;
font-size: 16px;
}
/* ---------- 10. AFTER-SALE ---------- */
.buy_after { padding: 100px 0 0; }
.buy_after__header {
padding: 0 60px;
margin: 0 auto 48px;
}
.buy_after__header .buy_after__title,
.buy_after__header h2 {
font-size: 50px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.buy_after__lead {
font-size: 22px;
line-height: 110%;
max-width: 700px;
}
.buy_after__desc {
font-size: 15px;
max-width: 800px;
}
.buy_after__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: 220px auto auto auto;
}
.buy_after__cell {
padding: 24px 20px 24px 30px;
}
.buy_after__photo-sm img {
width: 100%;
height: 100%;
margin-left: 0;
}
.buy_after__photo-lg img {
width: 100%;
height: 100%;
}
.buy_after__svc--care { padding-left: 20px; }
.buy_after__svc--events { padding-left: 20px; }
.buy_after__cell h4 {
font-size: 22px;
line-height: 110%;
margin-bottom: 24px;
}
.buy_after__cell p {
font-size: 15px;
max-width: 100%;
}
.buy_after__svc--own h4 { margin-bottom: 32px; }
.buy_after__svc--own p { max-width: 100%; }
/* ---------- 11. FAQ ---------- */
.buy_faq { margin-top: 100px; }
.buy_faq__title {
font-size: 50px;
line-height: 110%;
letter-spacing: 0.02em;
margin: 0 auto 48px;
max-width: 800px;
padding: 0 60px;
}
.buy_faq__list {
padding: 0 60px;
}
.buy_faq__head {
padding: 32px 12px;
min-height: 96px;
gap: 16px;
}
.buy_faq__head span {
font-size: 18px;
line-height: 120%;
max-width: 800px;
color: #010101;
}
.buy_faq__head i {
width: 28px;
height: 28px;
}
.buy_faq__head i::before { width: 14px; }
.buy_faq__head i::after { height: 14px; }
.buy_faq__body p {
font-size: 15px;
padding-bottom: 28px;
max-width: 100%;
}
/* ---------- 12. FINAL CTA ---------- */
.buy_cta {
min-height: 700px;
margin-top: 100px;
}
.buy_cta__inner {
max-width: 760px;
padding: 80px 40px 60px;
}
.buy_cta__inner h2 {
font-size: 50px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 20px;
max-width: 100%;
}
.buy_cta__sub {
font-size: 22px;
line-height: 110%;
margin-bottom: 80px;
}
.buy_cta__btn {
width: 480px;
height: 64px;
font-size: 16px;
margin-bottom: 24px;
}
.buy_cta__micro {
font-size: 14px;
}
}
/* ≤768 — Figma 768 frame (pixel-perfect) */
@media (min-width: 361px) and (max-width: 768px) {
/* ---------- Container / Header frame ---------- */
.wrapper {
max-width: none;
border-left: 0;
border-right: 0;
}
.big_block_home--buy .top_header_group {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.big_block_home.big_block_home--buy > .container,
.buy_listings .container,
.buy_search .container,
.buy_steps .container,
.buy_cta .container { padding: 0 24px; }
/* ---------- 1. HERO ---------- */
.buy_hero { padding: 32px 0 0; }
.buy_hero__breadcrumbs {
font-size: 14px;
gap: 6px;
margin-bottom: 20px;
}
.buy_hero__grid {
display: block;
position: relative;
}
.buy_hero__text h1 {
font-size: 32px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 16px;
max-width: 100%;
}
.buy_hero__text p {
font-size: 15px;
line-height: 130%;
max-width: 380px;
margin-bottom: 24px;
}
.buy_hero__photo {
position: relative;
top: 0;
right: 0;
width: 100%;
height: 320px;
margin-top: 24px;
margin-bottom: 24px;
}
.buy_hero__cta {
width: 100%;
height: 56px;
font-size: 14px;
line-height: 150%;
padding: 0 16px;
margin-top: 0;
}
/* ---------- 2. STATS ---------- */
.buy_stats { margin-top: 40px; }
.buy_stats__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
padding: 24px 0;
gap: 0;
}
.buy_stat {
padding: 0 12px;
border-right: 1.6px solid #E1E1E1;
text-align: left;
align-items: flex-start;
}
.buy_stat:first-child { padding-left: 12px; }
.buy_stat:last-child { border-right: 0; }
.buy_stat b {
font-size: 32px;
line-height: 110%;
margin-bottom: 40px;
}
.buy_stat b em { font-size: 32px; }
.buy_stat span {
font-size: 12px;
line-height: 130%;
max-width: none;
}
/* ---------- 3. BIG CTA ---------- */
.buy_bigcta { padding: 24px 0 0; }
.buy_bigcta__btn {
width: 100%;
height: 56px;
font-size: 14px;
padding: 0 16px;
}
/* ---------- 4. SEARCH ---------- */
.buy_search { padding: 60px 0 40px; }
.buy_search__header {
margin: 0 auto 32px;
max-width: 100%;
}
.buy_search__header h2 {
font-size: 32px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 12px;
}
.buy_search__header p {
font-size: 16px;
line-height: 110%;
}
.buy_search__row {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 0 12px 16px;
margin-bottom: 16px;
justify-content: stretch;
row-gap: 8px;
column-gap: 8px;
}
.buy_search__field {
height: 44px;
padding: 10px 8px;
gap: 6px;
}
.buy_search__field > em { font-size: 16px; }
.buy_search__field select {
font-size: 14px;
padding-right: 16px;
background-position: right 0 center;
background-size: 10px 7px;
}
.buy_search__field .lux-select { font-size: 14px; height: 28px; }
.buy_search__bottom { padding: 0 12px; }
.buy_search__more {
font-size: 14px;
gap: 8px;
}
.buy_search__more::after {
width: 22px;
height: 22px;
background-size: 10px 10px;
}
.buy_search__submit {
width: 140px;
height: 40px;
font-size: 14px;
padding: 0 12px;
}
/* Expanded filter panel */
.buy_search__more-content {
padding: 16px 12px 20px;
}
.buy_search__more-top {
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
padding-bottom: 16px;
align-items: end;
}
.buy_search__more-input {
gap: 6px;
padding: 0 4px 6px;
max-width: 100%;
}
.buy_search__more-input input {
font-size: 14px;
}
.buy_search__more-input em {
font-size: 14px;
}
.buy_search__more-toprow {
gap: 12px;
padding-bottom: 4px;
}
.buy_search__more-grid {
padding-top: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
}
.buy_chip { gap: 8px; }
.buy_chip__dot { width: 12px; height: 12px; }
.buy_chip__dot::after { width: 6px; height: 6px; }
.buy_chip__label { font-size: 13px; line-height: 130%; }
/* ---------- 5. LISTINGS ---------- */
.buy_listings { padding: 0; }
.buy_listing {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
padding: 24px 0 0;
margin-bottom: 32px;
}
.buy_listing--text-right {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 24px 0 0;
}
.buy_listing--text-right .buy_listing__photo { order: 0; }
.buy_listing__head { gap: 8px; margin-bottom: 16px; }
.buy_listing__title { font-size: 20px; }
.buy_listing__ref { font-size: 14px; }
.buy_listing__desc {
font-size: 13px;
margin-bottom: 16px;
max-width: 100%;
}
.buy_listing__specs { gap: 8px; }
.buy_listing__specs li { font-size: 13px; }
.buy_listing__foot {
margin-top: 16px;
gap: 16px;
}
.buy_listing__price { font-size: 22px; gap: 6px; }
.buy_listing__price em { font-size: 22px; }
.buy_listing__btn {
height: 44px;
font-size: 13px;
}
.buy_listing__photo {
aspect-ratio: 1 / 1.4;
}
.buy_listings__more {
width: calc(100% - 48px);
height: 56px;
font-size: 14px;
margin: 32px auto 0;
}
/* ---------- 6. STEPS ---------- */
.buy_steps { padding: 60px 0 0; }
.buy_steps__title {
font-size: 32px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 32px;
max-width: 100%;
}
.buy_steps__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
gap: 8px;
min-height: 0;
}
.buy_steps__left {
padding: 24px 12px 16px;
}
.buy_steps__photo {
width: 140px;
height: 140px;
margin-bottom: 16px;
}
.buy_steps__desc1 {
font-size: 13px;
line-height: 120%;
margin-bottom: 8px;
}
.buy_steps__desc2 {
font-size: 11px;
line-height: 130%;
padding-left: 0;
max-width: 100%;
}
.buy_step {
padding: 8px 8px;
min-height: 48px;
grid-template-columns: auto 1fr 20px;
gap: 8px;
}
.buy_step.is-active { min-height: 64px; }
.buy_step__num { font-size: 18px; }
.buy_step__title { font-size: 14px; }
.buy_step__ico {
width: 20px;
height: 20px;
background-size: 10px 10px;
}
.buy_steps__outro {
font-size: 13px;
margin: 24px 0 16px;
}
.buy_steps__cta {
height: 56px;
font-size: 14px;
}
/* ---------- 7. LIFESTYLE ---------- */
.buy_lifestyle {
padding: 60px 0;
margin-top: 16px;
}
.buy_lifestyle__header {
margin: 0 auto 32px;
padding: 0 24px;
}
.buy_lifestyle__header h2 {
font-size: 32px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 12px;
}
.buy_lifestyle__sub {
font-size: 16px;
line-height: 110%;
}
.buy_lifestyle__photos {
width: calc(100% - 48px);
max-width: 720px;
height: 220px;
margin: 0 auto 32px;
}
.buy_lifestyle__photo--left {
width: 28%;
height: 75%;
top: 12.5%;
left: 0;
}
.buy_lifestyle__photo--center {
width: 40%;
height: 100%;
left: 30%;
top: 0;
}
.buy_lifestyle__photo--right {
width: 28%;
height: 75%;
top: 12.5%;
left: 72%;
}
.buy_lifestyle__intro {
max-width: 100%;
padding: 0 24px;
}
.buy_lifestyle__intro1 {
font-size: 14px;
line-height: 120%;
max-width: 480px;
margin: 0 auto 12px;
}
.buy_lifestyle__intro2 {
font-size: 13px;
line-height: 130%;
max-width: 100%;
margin: 0 auto;
}
/* ---------- 8. DISTRICTS ---------- */
.buy_districts__header {
padding: 0 24px;
}
.buy_districts__title {
font-size: 32px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 24px;
}
.buy_districts__tabs {
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.buy_tab {
font-size: 14px;
padding: 0 0 0 14px;
}
.buy_tab__sep {
width: 10px;
}
.buy_tab__cursor {
width: 6px;
height: 6px;
margin-top: -3px;
}
.buy_districts__info {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
gap: 16px;
padding: 24px 24px 0;
margin-top: 32px;
}
.buy_districts__left h3 {
font-size: 22px;
line-height: 110%;
}
.buy_districts__tagline {
font-size: 12px;
max-width: 100%;
margin-top: 8px;
}
.buy_districts__summary {
font-size: 14px;
line-height: 120%;
margin-bottom: 8px;
max-width: 100%;
}
.buy_districts__desc {
font-size: 12px;
line-height: 130%;
margin-bottom: 16px;
max-width: 100%;
}
.buy_districts__features {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8px 16px;
}
.buy_districts__features li {
font-size: 12px;
margin-bottom: 0;
padding-left: 12px;
}
.buy_districts__features li::before {
width: 4px;
height: 4px;
top: 7px;
}
.buy_districts__gallery {
width: 100%;
box-sizing: border-box;
grid-template-columns: minmax(0, 538fr) minmax(0, 1155fr);
padding: 0 24px;
gap: 8px;
margin: 24px auto 0;
}
/* ---------- 9. STORIES ---------- */
.buy_stories { padding: 60px 0 0; }
.buy_stories__title {
font-size: 32px;
line-height: 110%;
letter-spacing: 0.02em;
margin: 0 auto 32px;
padding: 0 24px;
max-width: 100%;
}
.buy_stories__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 8px 24px;
max-width: 100%;
}
.buy_story {
padding: 14px 10px;
height: auto;
min-height: 280px;
}
.buy_story__head {
gap: 8px;
margin-bottom: 12px;
}
.buy_story__avatar {
width: 40px;
height: 42px;
}
.buy_story__name { font-size: 14px; }
.buy_story__age { font-size: 10px; }
.buy_story__name-block { gap: 4px; }
.buy_story__req {
font-size: 12px;
margin-bottom: 8px;
max-width: 100%;
}
.buy_story__text { font-size: 11px; }
.buy_story__date {
font-size: 12px;
margin-top: 16px;
}
.buy_stories__more {
margin: 8px 24px 0;
width: calc(100% - 48px);
height: 56px;
font-size: 14px;
}
/* ---------- 10. AFTER-SALE ---------- */
.buy_after { padding: 60px 0 0; }
.buy_after__header {
padding: 0 24px;
margin: 0 auto 32px;
}
.buy_after__header .buy_after__title,
.buy_after__header h2 {
font-size: 32px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 12px;
}
.buy_after__lead {
font-size: 16px;
line-height: 110%;
max-width: 100%;
}
.buy_after__desc {
font-size: 13px;
max-width: 100%;
}
.buy_after__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: 130px auto auto auto;
}
.buy_after__cell {
padding: 12px 10px 12px 14px;
}
.buy_after__photo-sm img {
width: 100%;
height: 100%;
margin-left: 0;
}
.buy_after__photo-lg img {
width: 100%;
height: 100%;
}
.buy_after__svc--care { padding-left: 10px; }
.buy_after__svc--events { padding-left: 10px; }
.buy_after__cell h4 {
font-size: 14px;
line-height: 110%;
margin-bottom: 12px;
}
.buy_after__cell p {
font-size: 11px;
max-width: 100%;
}
.buy_after__svc--own h4 { margin-bottom: 16px; }
.buy_after__svc--own p { max-width: 100%; }
/* ---------- 11. FAQ ---------- */
.buy_faq { margin-top: 60px; }
.buy_faq__title {
font-size: 32px;
line-height: 110%;
letter-spacing: 0.02em;
margin: 0 auto 32px;
max-width: 100%;
padding: 0 24px;
}
.buy_faq__list {
padding: 0 24px;
}
.buy_faq__head {
padding: 20px 8px;
min-height: 64px;
gap: 12px;
}
.buy_faq__head span {
font-size: 13px;
line-height: 120%;
max-width: 100%;
color: #010101;
}
.buy_faq__head i {
width: 22px;
height: 22px;
}
.buy_faq__head i::before { width: 11px; }
.buy_faq__head i::after { height: 11px; }
.buy_faq__body p {
font-size: 12px;
padding-bottom: 20px;
max-width: 100%;
}
/* ---------- 12. FINAL CTA ---------- */
.buy_cta {
min-height: 480px;
margin-top: 60px;
}
.buy_cta__inner {
max-width: calc(100% - 48px);
padding: 48px 24px 36px;
}
.buy_cta__inner h2 {
font-size: 32px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 16px;
max-width: 100%;
}
.buy_cta__sub {
font-size: 16px;
line-height: 110%;
margin-bottom: 56px;
}
.buy_cta__btn {
width: 100%;
max-width: 100%;
height: 56px;
font-size: 14px;
margin-bottom: 16px;
}
.buy_cta__micro {
font-size: 12px;
}
}
/* ≤360 — Figma 360 frame (pixel-perfect) */
@media (max-width: 360px) {
/* ---------- Container / Header frame ---------- */
.wrapper {
max-width: none;
border-left: 0;
border-right: 0;
}
.big_block_home--buy .top_header_group {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.big_block_home.big_block_home--buy > .container,
.buy_listings .container,
.buy_search .container,
.buy_steps .container,
.buy_cta .container { padding: 0 16px; }
/* ---------- 1. HERO ---------- */
.buy_hero { padding: 24px 0 0; }
.buy_hero__breadcrumbs {
font-size: 12px;
gap: 4px;
margin-bottom: 16px;
}
.buy_hero__grid {
display: block;
position: relative;
}
.buy_hero__text h1 {
font-size: 26px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 12px;
max-width: 100%;
}
.buy_hero__text p {
font-size: 13px;
line-height: 130%;
max-width: 100%;
margin-bottom: 16px;
}
.buy_hero__photo {
position: relative;
top: 0;
right: 0;
width: 100%;
height: 200px;
margin-top: 16px;
margin-bottom: 16px;
}
.buy_hero__cta {
width: 100%;
height: 48px;
font-size: 12px;
line-height: 150%;
padding: 0 12px;
margin-top: 0;
}
/* ---------- 2. STATS ---------- */
.buy_stats { margin-top: 24px; }
.buy_stats__grid {
grid-template-columns: 1fr;
padding: 16px 0;
gap: 0;
border-top: 1.6px solid #E1E1E1;
border-bottom: 1.6px solid #E1E1E1;
}
.buy_stat {
padding: 12px 0;
border-right: 0;
border-bottom: 1px solid #E1E1E1;
text-align: left;
align-items: flex-start;
}
.buy_stat:first-child { padding-top: 0; padding-left: 0; }
.buy_stat:last-child { border-bottom: 0; padding-bottom: 0; }
.buy_stat b {
font-size: 28px;
line-height: 110%;
margin-bottom: 8px;
}
.buy_stat b em { font-size: 28px; }
.buy_stat span {
font-size: 12px;
line-height: 130%;
max-width: none;
}
/* ---------- 3. BIG CTA ---------- */
.buy_bigcta { padding: 16px 0 0; }
.buy_bigcta__btn {
width: 100%;
height: 48px;
font-size: 12px;
padding: 0 12px;
}
/* ---------- 4. SEARCH ---------- */
.buy_search { padding: 40px 0 32px; }
.buy_search__header {
margin: 0 auto 24px;
max-width: 100%;
}
.buy_search__header h2 {
font-size: 26px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.buy_search__header p {
font-size: 13px;
line-height: 130%;
}
.buy_search__row {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 0 8px 12px;
margin-bottom: 12px;
row-gap: 6px;
column-gap: 8px;
}
.buy_search__field {
height: 40px;
padding: 8px 6px;
gap: 6px;
}
.buy_search__field > em { font-size: 14px; }
.buy_search__field select {
font-size: 13px;
padding-right: 14px;
background-position: right 0 center;
background-size: 9px 6px;
}
.buy_search__field .lux-select { font-size: 13px; height: 24px; }
.buy_search__bottom {
padding: 0 8px;
flex-direction: column;
gap: 12px;
align-items: stretch;
}
.buy_search__more {
font-size: 13px;
gap: 8px;
justify-content: flex-start;
}
.buy_search__more::after {
width: 20px;
height: 20px;
background-size: 9px 9px;
}
.buy_search__submit {
width: 100%;
height: 44px;
font-size: 13px;
padding: 0 12px;
}
/* Expanded filter panel */
.buy_search__more-content {
padding: 12px 8px 16px;
}
.buy_search__more-top {
grid-template-columns: 1fr;
gap: 12px;
padding-bottom: 12px;
}
.buy_search__more-input { gap: 6px; padding: 0 4px 6px; max-width: 100%; }
.buy_search__more-input input { font-size: 13px; }
.buy_search__more-input em { font-size: 13px; }
.buy_search__more-toprow { gap: 8px; padding-bottom: 0; flex-wrap: wrap; }
.buy_search__more-grid {
padding-top: 12px;
grid-template-columns: 1fr;
gap: 10px;
}
.buy_chip { gap: 8px; }
.buy_chip__dot { width: 12px; height: 12px; }
.buy_chip__dot::after { width: 6px; height: 6px; }
.buy_chip__label { font-size: 13px; line-height: 130%; }
/* ---------- 5. LISTINGS ---------- */
.buy_listings { padding: 0; }
.buy_listing,
.buy_listing--text-right {
grid-template-columns: 1fr;
gap: 16px;
padding: 24px 0 0;
margin-bottom: 32px;
}
.buy_listing--text-right .buy_listing__photo { order: -1; }
.buy_listing__head { gap: 6px; margin-bottom: 12px; }
.buy_listing__title { font-size: 18px; }
.buy_listing__ref { font-size: 12px; }
.buy_listing__desc {
font-size: 12px;
margin-bottom: 14px;
max-width: 100%;
}
.buy_listing__specs {
gap: 6px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 12px;
}
.buy_listing__specs li { font-size: 12px; }
.buy_listing__foot {
margin-top: 16px;
gap: 14px;
}
.buy_listing__price { font-size: 20px; gap: 6px; }
.buy_listing__price em { font-size: 20px; }
.buy_listing__btn {
height: 44px;
font-size: 12px;
}
.buy_listing__photo {
aspect-ratio: 16 / 11;
}
.buy_listings__more {
width: calc(100% - 32px);
height: 48px;
font-size: 12px;
margin: 24px auto 0;
}
/* ---------- 6. STEPS ---------- */
.buy_steps { padding: 40px 0 0; }
.buy_steps__title {
font-size: 26px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 24px;
max-width: 100%;
}
.buy_steps__grid {
grid-template-columns: 1fr;
gap: 8px;
min-height: 0;
}
.buy_steps__left {
padding: 16px 16px 16px;
order: 2;
}
.buy_steps__photo {
width: 140px;
height: 140px;
margin-bottom: 16px;
}
.buy_steps__desc1 {
font-size: 13px;
line-height: 120%;
margin-bottom: 8px;
text-align: center;
}
.buy_steps__desc2 {
font-size: 12px;
line-height: 130%;
padding-left: 0;
max-width: 100%;
text-align: center;
}
.buy_steps__list { order: 1; }
.buy_step {
padding: 8px 8px;
min-height: 44px;
grid-template-columns: auto 1fr 18px;
gap: 8px;
}
.buy_step.is-active { min-height: 56px; }
.buy_step__num { font-size: 16px; }
.buy_step__title { font-size: 13px; }
.buy_step__ico {
width: 18px;
height: 18px;
background-size: 9px 9px;
}
.buy_steps__outro {
font-size: 12px;
margin: 16px 0 12px;
}
.buy_steps__cta {
height: 48px;
font-size: 12px;
}
/* ---------- 7. LIFESTYLE ---------- */
.buy_lifestyle {
padding: 40px 0;
margin-top: 12px;
}
.buy_lifestyle__header {
margin: 0 auto 24px;
padding: 0 16px;
}
.buy_lifestyle__header h2 {
font-size: 26px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.buy_lifestyle__sub {
font-size: 13px;
line-height: 130%;
}
.buy_lifestyle__photos {
width: calc(100% - 32px);
max-width: 320px;
height: 160px;
margin: 0 auto 24px;
}
.buy_lifestyle__photo--left {
width: 28%;
height: 75%;
top: 12.5%;
left: 0;
}
.buy_lifestyle__photo--center {
width: 40%;
height: 100%;
left: 30%;
top: 0;
}
.buy_lifestyle__photo--right {
width: 28%;
height: 75%;
top: 12.5%;
left: 72%;
}
.buy_lifestyle__intro {
max-width: 100%;
padding: 0 16px;
}
.buy_lifestyle__intro1 {
font-size: 13px;
line-height: 120%;
max-width: 100%;
margin: 0 auto 8px;
}
.buy_lifestyle__intro2 {
font-size: 12px;
line-height: 130%;
max-width: 100%;
margin: 0 auto;
}
/* ---------- 8. DISTRICTS ---------- */
.buy_districts__header {
padding: 0 16px;
}
.buy_districts__title {
font-size: 26px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.buy_districts__tabs {
gap: 6px;
flex-wrap: wrap;
justify-content: flex-start;
}
.buy_tab {
font-size: 12px;
padding: 0 0 0 12px;
}
.buy_tab__sep {
width: 8px;
}
.buy_tab__cursor {
width: 5px;
height: 5px;
margin-top: -2.5px;
}
.buy_districts__info {
grid-template-columns: 1fr;
gap: 12px;
padding: 16px 16px 0;
margin-top: 24px;
}
.buy_districts__left h3 {
font-size: 18px;
line-height: 110%;
}
.buy_districts__tagline {
font-size: 12px;
max-width: 100%;
margin-top: 6px;
}
.buy_districts__summary {
font-size: 13px;
line-height: 120%;
margin-bottom: 6px;
max-width: 100%;
}
.buy_districts__desc {
font-size: 12px;
line-height: 130%;
margin-bottom: 12px;
max-width: 100%;
}
.buy_districts__features {
grid-template-columns: 1fr;
gap: 6px;
}
.buy_districts__features li {
font-size: 12px;
margin-bottom: 0;
padding-left: 10px;
}
.buy_districts__features li::before {
width: 4px;
height: 4px;
top: 6px;
}
.buy_districts__gallery {
width: 100%;
box-sizing: border-box;
grid-template-columns: 1fr;
padding: 0 16px;
gap: 8px;
margin: 16px auto 0;
}
.buy_districts__big {
grid-column: 1;
aspect-ratio: 16 / 11;
}
.buy_districts__small {
aspect-ratio: 16 / 11;
}
.buy_districts__wide {
aspect-ratio: 16 / 11;
}
/* ---------- 9. STORIES ---------- */
.buy_stories { padding: 40px 0 0; }
.buy_stories__title {
font-size: 26px;
line-height: 110%;
letter-spacing: 0.02em;
margin: 0 auto 24px;
padding: 0 16px;
max-width: 100%;
}
.buy_stories__grid {
grid-template-columns: 1fr;
gap: 12px;
padding: 8px 16px;
max-width: 100%;
}
.buy_story {
padding: 16px 14px;
height: auto;
min-height: 0;
}
.buy_story__head {
gap: 12px;
margin-bottom: 14px;
}
.buy_story__avatar {
width: 48px;
height: 50px;
}
.buy_story__name { font-size: 16px; }
.buy_story__age { font-size: 11px; }
.buy_story__name-block { gap: 4px; }
.buy_story__req {
font-size: 13px;
margin-bottom: 8px;
max-width: 100%;
}
.buy_story__text { font-size: 12px; }
.buy_story__date {
font-size: 13px;
margin-top: 14px;
}
.buy_stories__more {
margin: 8px 16px 0;
width: calc(100% - 32px);
height: 48px;
font-size: 12px;
}
/* ---------- 10. AFTER-SALE ---------- */
.buy_after { padding: 40px 0 0; }
.buy_after__header {
padding: 0 16px;
margin: 0 auto 24px;
}
.buy_after__header .buy_after__title,
.buy_after__header h2 {
font-size: 26px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.buy_after__lead {
font-size: 13px;
line-height: 130%;
max-width: 100%;
}
.buy_after__desc {
font-size: 12px;
max-width: 100%;
}
.buy_after__grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"photoSM"
"care"
"repair"
"cleaning"
"logistics"
"photoLG"
"moving"
"events"
"own";
}
.buy_after__cell {
padding: 16px 16px;
border-right: 0;
border-bottom: 1.6px solid #E1E1E1;
}
.buy_after__cell:nth-child(3n) { border-right: 0; }
.buy_after__cell:last-child { border-bottom: 0; }
.buy_after__photo-sm {
border-right: 0;
aspect-ratio: 16 / 10;
}
.buy_after__photo-sm img {
width: 100%;
height: 100%;
margin-left: 0;
}
.buy_after__photo-lg {
aspect-ratio: 16 / 10;
}
.buy_after__photo-lg img {
width: 100%;
height: 100%;
}
.buy_after__svc--care,
.buy_after__svc--events { padding-left: 16px; }
.buy_after__svc--logistics,
.buy_after__svc--moving { border-top: 0; }
.buy_after__cell h4 {
font-size: 14px;
line-height: 110%;
margin-bottom: 10px;
}
.buy_after__cell p {
font-size: 12px;
max-width: 100%;
}
.buy_after__svc--own h4 { margin-bottom: 12px; }
.buy_after__svc--own p { max-width: 100%; }
/* ---------- 11. FAQ ---------- */
.buy_faq { margin-top: 40px; }
.buy_faq__title {
font-size: 26px;
line-height: 110%;
letter-spacing: 0.02em;
margin: 0 auto 24px;
max-width: 100%;
padding: 0 16px;
}
.buy_faq__list {
padding: 0 16px;
}
.buy_faq__head {
padding: 14px 4px;
min-height: 48px;
gap: 8px;
}
.buy_faq__head span {
font-size: 12px;
line-height: 120%;
max-width: 100%;
color: #010101;
}
.buy_faq__head i {
width: 18px;
height: 18px;
}
.buy_faq__head i::before { width: 9px; }
.buy_faq__head i::after { height: 9px; }
.buy_faq__body p {
font-size: 12px;
padding-bottom: 14px;
max-width: 100%;
}
/* ---------- 12. FINAL CTA ---------- */
.buy_cta {
min-height: 360px;
margin-top: 40px;
}
.buy_cta__inner {
max-width: calc(100% - 32px);
padding: 32px 16px 24px;
}
.buy_cta__inner h2 {
font-size: 26px;
line-height: 110%;
letter-spacing: 0.02em;
margin-bottom: 12px;
max-width: 100%;
}
.buy_cta__sub {
font-size: 13px;
line-height: 130%;
margin-bottom: 32px;
}
.buy_cta__btn {
width: 100%;
max-width: 100%;
height: 48px;
font-size: 12px;
margin-bottom: 12px;
}
.buy_cta__micro {
font-size: 11px;
}
}
/* =========================================================
ANIMATIONS — Reveal on scroll
Only transform / opacity (60 FPS, no layout thrashing)
Final state matches static layout — pixel-perfect preserved
========================================================= */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-fade,
.reveal-zoom {
opacity: 0;
transition:
opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1),
transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
.reveal-up { transform: translate3d(0, 70px, 0); }
.reveal-left { transform: translate3d(-70px, 0, 0); }
.reveal-right { transform: translate3d(70px, 0, 0); }
.reveal-zoom { transform: scale(1.08); }
/* .reveal-fade — opacity only */
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-fade.is-visible,
.reveal-zoom.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-fade,
.reveal-zoom {
opacity: 1;
transform: none;
transition: none;
}
}
/* =========================================================
HERO HOVER IMAGE REVEAL
Cursor-following preview triggered by CTA / stats hover.
Mechanic: horizonte-village "in numbers"
Visual : slavinskaia.ru — rectangular soft scale + fade
========================================================= */
.hero-reveal-img {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 420px;
margin: -210px 0 0 -160px; /* center anchor on cursor */
pointer-events: none;
z-index: 9999;
transform: translate3d(-50vw, -50vh, 0);
will-change: transform;
}
.hero-reveal-img__inner {
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
transform: scale(0.92);
transition:
opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.hero-reveal-img__inner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.08);
transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-reveal-img.is-shown .hero-reveal-img__inner {
opacity: 1;
transform: scale(1);
}
.hero-reveal-img.is-shown .hero-reveal-img__inner img {
transform: scale(1);
}
/* Triggers — keep their natural cursor; floating image is offset from cursor */
.buy_stat[data-reveal-img] { cursor: pointer; }
/* Touch devices: skip the floating image entirely */
.touch-device .hero-reveal-img { display: none; }
.touch-device .buy_stat[data-reveal-img] { cursor: auto; }
@media (max-width: 991px) {
.hero-reveal-img { display: none; }
}
/* =========================================================
BUY-SEARCH dropdown overrides — sets the typography for
the global .lux-select trigger inside .buy_search__field.
The dropdown UI itself (panel/options) lives in style.css.
========================================================= */
.buy_search__field .lux-select {
width: 100%;
height: 32px;
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 25px;
line-height: 130%;
color: #010101;
}
.buy_search__field--price .lux-select {
flex: 1 1 auto;
min-width: 0;
width: auto;
}
/* Buy-search field-specific spacing for the global .lux-select trigger */
.buy_search__field--price .lux-select__trigger {
padding-right: 22px;
}
/* =========================================================
PREMIUM HOVER MICRO-INTERACTIONS (mirrors index.html)
GPU-only properties: box-shadow + transform on inner img.
No transform on the card itself → no conflict with .reveal-*
========================================================= */
/* Smooth scroll for in-page anchors (matches index "keep scrolling") */
html { scroll-behavior: smooth; }
/* --- Card lift via shadow only (no transform conflict with reveal) ---
Includes opacity + transform for .reveal-* compatibility. Delay only
applies to those two; box-shadow stays instant on hover. */
.buy_listing,
.buy_story,
.buy_after__cell,
.buy_faq__item,
.buy_districts__big,
.buy_districts__small,
.buy_districts__wide {
transition:
opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--reveal-delay, 0ms),
transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--reveal-delay, 0ms),
box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.buy_listing:hover,
.buy_story:hover,
.buy_after__cell:hover,
.buy_faq__item:hover {
box-shadow: 0 18px 40px rgba(16, 24, 40, 0.06);
}
.buy_districts__big:hover,
.buy_districts__small:hover,
.buy_districts__wide:hover {
box-shadow: 0 22px 48px rgba(16, 24, 40, 0.10);
}
/* --- Photo containers: subtle zoom-in on hover (transform on inner img) --- */
.buy_listing__photo,
.buy_lifestyle__photo,
.buy_districts__big,
.buy_districts__small,
.buy_districts__wide,
.buy_after__photo-sm,
.buy_after__photo-lg,
.buy_steps__photo,
.buy_hero__photo {
overflow: hidden;
}
.buy_listing__photo img,
.buy_lifestyle__photo img,
.buy_districts__big img,
.buy_districts__small img,
.buy_districts__wide img,
.buy_after__photo-sm img,
.buy_after__photo-lg img,
.buy_steps__photo img,
.buy_hero__photo img {
transition:
opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--reveal-delay, 0ms),
transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--reveal-delay, 0ms);
will-change: transform;
}
.buy_listing__photo:hover img,
.buy_lifestyle__photo:hover img,
.buy_districts__big:hover img,
.buy_districts__small:hover img,
.buy_districts__wide:hover img,
.buy_after__photo-sm:hover img,
.buy_after__photo-lg:hover img,
.buy_steps__photo:hover img,
.buy_hero__photo:hover img {
transform: scale(1.045);
}
/* --- Buttons & links: gentle scale on press (matches index button feel) ---
Opacity + transform also listed so .reveal-* still fades them in. */
.buy_hero__cta,
.buy_steps__cta,
.buy_cta__btn,
.buy_listing__btn,
.buy_listings__more,
.buy_stories__more,
.buy_search__submit,
.buy_bigcta__btn {
transition:
opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--reveal-delay, 0ms),
transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--reveal-delay, 0ms),
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
.buy_hero__cta:active,
.buy_steps__cta:active,
.buy_cta__btn:active,
.buy_listing__btn:active,
.buy_listings__more:active,
.buy_stories__more:active,
.buy_search__submit:active,
.buy_bigcta__btn:active {
transition: transform 0.15s ease;
transform: scale(0.985);
}
/* District tabs — keep simple color-only hover, no underline */
.buy_tab {
position: relative;
transition: color 0.25s ease;
}
/* FAQ +/− toggle is already handled by existing pseudo-element CSS (~line 1505) */
/* =========================================================
AFTER-SALE PHOTOS — clip-mask entrance + scroll parallax
Myrthapools-style: image rises into view + drifts on scroll
========================================================= */
.buy_after__photo-sm.parallax-img,
.buy_after__photo-lg.parallax-img {
overflow: hidden;
position: relative;
clip-path: inset(100% 0 0 0);
-webkit-clip-path: inset(100% 0 0 0);
transition:
clip-path 1.5s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
-webkit-clip-path 1.5s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
will-change: clip-path;
}
.buy_after__photo-sm.parallax-img.is-visible,
.buy_after__photo-lg.parallax-img.is-visible {
clip-path: inset(0 0 0 0);
-webkit-clip-path: inset(0 0 0 0);
}
/* Inner image: bigger than container so we can drift it without revealing edges */
.buy_after__photo-sm.parallax-img img,
.buy_after__photo-lg.parallax-img img {
transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.18);
transition: none !important; /* override generic photo transition rules */
will-change: transform;
}
/* Hover-zoom would replace parallax transform — keep parallax on hover too.
Slight extra zoom on hover via scale only (composed via translate3d still). */
.buy_after__photo-sm.parallax-img:hover img,
.buy_after__photo-lg.parallax-img:hover img {
transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.22);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@media (prefers-reduced-motion: reduce) {
.buy_after__photo-sm.parallax-img,
.buy_after__photo-lg.parallax-img {
clip-path: none !important;
-webkit-clip-path: none !important;
transition: none !important;
}
.buy_after__photo-sm.parallax-img img,
.buy_after__photo-lg.parallax-img img {
transform: none !important;
}
}
/* =========================================================
.reveal-rise — Myrthapools-style line-rise reveal
Wrapper has overflow:hidden; inner span starts below the
visible area and slides up on .is-visible. Use for headings
and paragraphs that should "emerge" from the bottom.
========================================================= */
.reveal-rise {
display: block;
overflow: hidden;
/* Tiny bottom padding so descenders aren't visually clipped at rest */
padding-bottom: 0.08em;
}
.reveal-rise__inner {
display: block;
transform: translate3d(0, 110%, 0);
transition: transform 1.05s cubic-bezier(0.215, 0.61, 0.355, 1) var(--reveal-delay, 0ms);
will-change: transform;
}
.reveal-rise.is-visible .reveal-rise__inner {
transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
.reveal-rise__inner { transform: none !important; transition: none !important; }
}
/* =========================================================
.reveal-mask — Slavinskaia.ru-style entrance reveal
Wrapper: clip-path mask rises from bottom up
Inner img : scales down + slides up (parallax-like)
Driven by IntersectionObserver (.is-visible)
========================================================= */
.reveal-mask {
clip-path: inset(100% 0 0 0);
-webkit-clip-path: inset(100% 0 0 0);
transition:
clip-path 1.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
-webkit-clip-path 1.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
will-change: clip-path;
}
.reveal-mask.is-visible {
clip-path: inset(0 0 0 0);
-webkit-clip-path: inset(0 0 0 0);
}
.reveal-mask > img,
.reveal-mask img {
transform: translate3d(0, 80px, 0) scale(1.18);
transition: transform 1.9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
will-change: transform;
}
.reveal-mask.is-visible > img,
.reveal-mask.is-visible img {
transform: translate3d(0, 0, 0) scale(1);
}
/* Hover-zoom kept after reveal — higher specificity wins over .is-visible state */
.reveal-mask.is-visible:hover > img,
.reveal-mask.is-visible:hover img {
transform: translate3d(0, 0, 0) scale(1.05);
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
.reveal-mask,
.reveal-mask img {
clip-path: none !important;
-webkit-clip-path: none !important;
transform: none !important;
transition: none !important;
}
}
/* Fallback: if JS doesn't run (script blocked / disabled), don't leave the
reveal-mask images permanently invisible. .no-js is set by inline script
in by default; main.js removes it once running so the animation
takes over. */
.no-js .reveal-mask {
clip-path: none !important;
-webkit-clip-path: none !important;
}
.no-js .reveal-mask > img,
.no-js .reveal-mask img {
transform: none !important;
}
/* --- 5 Steps interactive: smooth content swap on hover/click ---
.is-swap-fading is added briefly during the 280ms swap. */
.buy_steps__photo img,
.buy_steps__desc1,
.buy_steps__desc2 {
transition:
opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}
.buy_steps__photo img.is-swap-fading,
.buy_steps__desc1.is-swap-fading,
.buy_steps__desc2.is-swap-fading {
opacity: 0;
}
.buy_step .buy_step__num,
.buy_step .buy_step__title {
transition: color 0.3s ease;
}
.buy_step:hover .buy_step__num,
.buy_step:hover .buy_step__title {
color: #010101;
}
/* --- Listing image carousel (Swiper) --- */
.buy_listing__photo .buy_listing__swiper {
width: 100%;
height: 100%;
position: relative;
}
.buy_listing__swiper .swiper-wrapper { height: 100%; }
.buy_listing__swiper .swiper-slide {
height: 100%;
overflow: hidden;
}
.buy_listing__swiper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: none !important; /* override generic hover-zoom rule, Swiper handles motion */
transition: none !important;
}
/* Bottom controls bar — matches Figma layout: arrows | progress | counter */
.buy_listing__controls {
position: absolute;
left: 32px;
right: 32px;
bottom: 32px;
z-index: 5;
display: flex;
align-items: center;
gap: 28px;
}
/* Arrows — small chevrons, side-by-side */
.buy_listing__nav {
display: flex;
align-items: center;
gap: 26px;
flex-shrink: 0;
position: static;
}
.buy_listing__nav-btn {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: #FFFFFF;
position: relative;
margin: 0;
top: auto;
left: auto;
right: auto;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.buy_listing__nav-btn::after {
content: "";
width: 22px;
height: 11px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
font-size: 0;
display: block;
color: transparent;
}
.buy_listing__nav-btn--prev::after {
background-image: url("data:image/svg+xml;utf8,");
transform: rotate(90deg);
}
.buy_listing__nav-btn--next::after {
background-image: url("data:image/svg+xml;utf8,");
transform: rotate(-90deg);
}
.buy_listing__nav-btn--prev:hover { transform: translateX(-3px); }
.buy_listing__nav-btn--next:hover { transform: translateX(3px); }
.buy_listing__nav-btn.swiper-button-disabled { opacity: 0.35; cursor: default; }
/* Hide Swiper's auto-injected SVG icon — мы используем кастомный ::after chevron */
.buy_listing__nav-btn .swiper-navigation-icon,
.buy_listing__nav-btn > svg {
display: none !important;
}
/* Progress track + fill — replaces Swiper's default scrollbar */
.buy_listing__progress {
flex: 1 1 auto;
height: 1.6px;
background: rgba(255, 255, 255, 0.4);
position: relative;
min-width: 0;
}
.buy_listing__progress-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0%;
background: #FFFFFF;
transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
will-change: width;
}
/* Counter "01/10" — Felidae 44px white, right side */
.buy_listing__counter {
position: static;
width: auto;
flex-shrink: 0;
font-family: "Felidae", "Cormorant Garamond", serif;
font-weight: 400;
font-size: 44px;
line-height: 110%;
letter-spacing: 0.02em;
color: #FFFFFF;
background: transparent;
bottom: auto;
top: auto;
left: auto;
right: auto;
}
.buy_listing__counter .swiper-pagination-current,
.buy_listing__counter .swiper-pagination-total {
display: inline-block;
}
/* Always-on subtle bottom gradient → counter & arrows stay readable on bright photos */
.buy_listing__photo { position: relative; }
.buy_listing__photo::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 110px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 100%);
pointer-events: none;
z-index: 2;
}
/* Nav + counter need to sit above the gradient */
.buy_listing__nav,
.buy_listing__counter { z-index: 3; }
/* Touch/reduced-motion */
.touch-device .buy_listing__nav-btn:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
.buy_listing__nav-btn { transition: none; }
}
/* --- Search submit "Найти": shimmer on hover --- */
.buy_search__submit { position: relative; overflow: hidden; }
.buy_search__submit::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
transform: skewX(-18deg);
pointer-events: none;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.buy_search__submit:hover::before {
left: 130%;
}
/* --- Story avatar: ring-in on hover --- */
.buy_story__avatar {
position: relative;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.buy_story:hover .buy_story__avatar {
transform: scale(1.06);
}
/* --- Touch devices: drop hover effects to avoid sticky states --- */
.touch-device .buy_listing:hover,
.touch-device .buy_story:hover,
.touch-device .buy_after__cell:hover,
.touch-device .buy_faq__item:hover,
.touch-device .buy_districts__big:hover,
.touch-device .buy_districts__small:hover,
.touch-device .buy_districts__wide:hover {
box-shadow: none;
}
.touch-device .buy_listing__photo:hover img,
.touch-device .buy_lifestyle__photo:hover img,
.touch-device .buy_districts__big:hover img,
.touch-device .buy_districts__small:hover img,
.touch-device .buy_districts__wide:hover img,
.touch-device .buy_after__photo-sm:hover img,
.touch-device .buy_after__photo-lg:hover img,
.touch-device .buy_steps__photo:hover img,
.touch-device .buy_hero__photo:hover img {
transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.buy_listing__photo img,
.buy_lifestyle__photo img,
.buy_districts__big img,
.buy_districts__small img,
.buy_districts__wide img,
.buy_after__photo-sm img,
.buy_after__photo-lg img,
.buy_steps__photo img,
.buy_hero__photo img,
.buy_search__submit::before,
.buy_story__avatar {
transition: none;
}
}
/* ===== Pixel-perfect mobile (≤767px): Buy page per Figma ===== */
@media (max-width: 767px) {
/* All section headers: 30px Felidae, centered, UPPERCASE for main */
.buy_search h2,
.buy_steps h2,
.buy_lifestyle h2,
.buy_districts h2,
.buy_stories h2,
.buy_after h2,
.buy_faq h2,
.buy_cta h2 {
font-size: 30px !important;
line-height: 110% !important;
letter-spacing: 0.02em !important;
font-family: "Felidae", "Cormorant Garamond", serif !important;
text-align: center !important;
text-transform: uppercase;
}
/* Headers and subtitles centered */
.buy_search__header,
.buy_steps__header,
.buy_lifestyle__header,
.buy_districts__header,
.buy_stories__header,
.buy_after__header,
.buy_faq__header,
.buy_cta__inner {
text-align: center;
}
.buy_search__header p,
.buy_steps__header p,
.buy_lifestyle__header p,
.buy_lifestyle__sub,
.buy_districts__header p,
.buy_stories__header p,
.buy_after__header p,
.buy_after__lead,
.buy_after__desc,
.buy_faq__header p,
.buy_cta__sub,
.buy_cta__micro {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Pre-spans (small intros) keep their case (sentence case, not upper) */
.buy_lifestyle h2 .title-pre,
.buy_stories h2 .title-pre,
.buy_hero h1 .title-pre {
text-transform: none !important;
}
.buy_cta h2 .title-post {
text-transform: none !important;
}
/* All primary buttons → dark teal #41545C with white UPPERCASE Felidae text */
.buy_listings__more,
.buy_steps__cta,
.buy_stories__more,
.buy_search__submit,
.buy_bigcta__btn {
background: #41545C !important;
color: #FFFFFF !important;
border: 1px solid #41545C !important;
text-transform: uppercase !important;
font-family: "Felidae", "Cormorant Garamond", serif !important;
font-weight: 400 !important;
letter-spacing: 0.05em !important;
text-decoration: none;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: calc(100% - 32px) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
/* Containers center the inline-flex buttons */
.buy_bigcta,
.buy_listings,
.buy_steps .container,
.buy_stories,
.buy_search__form {
text-align: center;
}
.buy_listings__more:hover,
.buy_steps__cta:hover,
.buy_stories__more:hover,
.buy_search__submit:hover,
.buy_bigcta__btn:hover {
background: #2f3e44 !important;
color: #FFFFFF !important;
}
/* ===== LISTINGS: photo first, text after — consistent on mobile per Figma ===== */
.buy_listing,
.buy_listing--text-right {
display: flex !important;
flex-direction: column !important;
}
.buy_listing__photo { order: -1 !important; }
.buy_listing__text { order: 1 !important; }
/* ===== SEARCH FORM: show only 4 fields in 2x2 grid per Figma mobile =====
HTML DOM order: 1.Город 2.От 3.До 4.Формат 5.Все типы 6.Все зоны 7.Спальни
Visible on mobile: От, До (row1) / Город, Спальни (row2). Others hidden. */
.buy_search__row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
.buy_search__row .buy_search__field:nth-child(1) { order: 3; } /* Город → row 2, col 1 */
.buy_search__row .buy_search__field:nth-child(2) { order: 1; } /* От → row 1, col 1 */
.buy_search__row .buy_search__field:nth-child(3) { order: 2; } /* До → row 1, col 2 */
.buy_search__row .buy_search__field:nth-child(7) { order: 4; } /* Спальни → row 2, col 2 */
.buy_search__row .buy_search__field:nth-child(4),
.buy_search__row .buy_search__field:nth-child(5),
.buy_search__row .buy_search__field:nth-child(6) { display: none !important; }
/* Hide standalone submit button on mobile — user uses "Больше фильтров" expand */
.buy_search__bottom .buy_search__submit { display: none !important; }
/* ===== LISTING CARDS — match Figma mobile compact layout =====
• "ВИЛЛА" label above title via ::before
• Hide REF number, description, last 2 specs, "Подробнее" button
• Replace bottom row with: price + circle arrow icon
• Counter "01/10" smaller, single chevron arrows */
.buy_listing__head { position: relative; }
.buy_listing__head::before {
content: "ВИЛЛА";
display: block;
font-family: "Inter", sans-serif;
font-size: 12px;
font-weight: 300;
color: #A6A6A6;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
.buy_listing__ref,
.buy_listing__desc {
display: none !important;
}
/* Show all 6 specs in 3-row × 2-col grid per Figma */
.buy_listing__specs {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 4px 16px !important;
}
.buy_listing__btn {
display: none !important;
}
.buy_listing__foot {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 16px 0 !important;
border-top: 1px solid #E1E1E1;
width: 100%;
}
.buy_listing__foot::after {
content: "→";
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid #C4C4C4;
border-radius: 50%;
color: #C4C4C4;
font-size: 14px;
line-height: 1;
flex-shrink: 0;
cursor: pointer;
}
.buy_listing__price {
margin: 0 !important;
}
/* Photo overlays per Figma mobile — single bottom row:
[<] [>] ━━━━━━━━━━━━━ 01/10
• controls: absolute bottom row, flex layout
• arrows: small side-by-side
• progress bar: flex-1
• counter: 14px white right */
.buy_listing__photo { position: relative; }
.buy_listing__controls {
position: absolute !important;
top: auto !important;
bottom: 10px !important;
left: 12px !important;
right: 12px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
z-index: 4;
}
.buy_listing__nav {
position: static !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
flex-shrink: 0 !important;
}
.buy_listing__nav-btn {
position: static !important;
width: 14px !important;
height: 14px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
transform: none !important;
top: auto !important;
left: auto !important;
right: auto !important;
}
/* Single chevron via SVG, override Swiper default text-icon */
.buy_listing__nav-btn::after,
.buy_listing__nav-btn.swiper-button-prev::after,
.buy_listing__nav-btn.swiper-button-next::after {
content: "" !important;
width: 14px !important;
height: 14px !important;
flex-shrink: 0 !important;
font-family: inherit !important;
font-size: 0 !important;
color: transparent !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
transform: none !important;
display: block !important;
}
.buy_listing__nav-btn--next::after,
.buy_listing__nav-btn.swiper-button-next::after {
transform: scaleX(-1) !important;
}
/* Progress bar — flex-1 between arrows and counter
position: relative so fill stays within 1.5px parent */
.buy_listing__progress {
display: block !important;
position: relative !important;
flex: 1 1 auto !important;
height: 1.5px !important;
background: rgba(255, 255, 255, 0.4) !important;
width: auto !important;
min-width: 0;
overflow: hidden;
}
.buy_listing__progress-fill {
background: #FFFFFF !important;
height: 1.5px !important;
}
/* Counter "01 / 10" — bottom-right of controls bar */
.buy_listing__counter {
position: static !important;
font-size: 14px !important;
line-height: 100% !important;
letter-spacing: 0.02em !important;
background: transparent !important;
width: auto !important;
flex-shrink: 0 !important;
color: #FFFFFF !important;
}
/* ===== HERO — centered, uppercase main, filled dark teal CTA ===== */
.buy_hero__breadcrumbs { text-align: center; justify-content: center; }
.buy_hero__text { text-align: center; }
.buy_hero__text h1 {
font-size: 30px !important;
font-family: "Felidae", "Cormorant Garamond", serif !important;
line-height: 110% !important;
letter-spacing: 0.02em !important;
text-align: center;
margin: 0 auto 12px;
}
.buy_hero h1 .title-pre {
display: block;
font-size: 20px !important;
line-height: 110% !important;
letter-spacing: 0.02em !important;
font-family: "Felidae", "Cormorant Garamond", serif !important;
font-weight: 400;
margin-bottom: 4px;
text-transform: none;
text-align: center;
}
.buy_hero h1 .title-main {
display: block;
font-size: 30px !important;
line-height: 110% !important;
letter-spacing: 0.02em !important;
font-family: "Felidae", "Cormorant Garamond", serif !important;
font-weight: 400;
text-transform: uppercase;
text-align: center;
}
.buy_hero__text p {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.buy_hero__cta {
background: #41545C !important;
color: #FFFFFF !important;
border: 1px solid #41545C !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
font-family: "Felidae", "Cormorant Garamond", serif !important;
font-weight: 400;
width: auto !important;
max-width: calc(100% - 32px) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
.buy_hero__cta:hover {
background: #2f3e44 !important;
color: #FFFFFF !important;
}
/* Center the hero CTA inside its column container */
.buy_hero__text {
text-align: center !important;
}
/* ===== STATS — single combined centered text block per Figma ===== */
.buy_stats { margin-top: 24px !important; }
.buy_stats__grid {
display: block !important;
border: 0 !important;
padding: 24px 16px !important;
text-align: center;
}
.buy_stat {
display: inline !important;
border: 0 !important;
padding: 0 !important;
margin: 0;
text-align: center;
}
.buy_stat::after {
content: " / ";
color: #3C3C3B;
}
.buy_stat:last-child::after { content: ""; }
.buy_stat b {
display: inline !important;
font-size: 14px !important;
font-family: "Inter", sans-serif !important;
font-weight: 300 !important;
color: #3C3C3B !important;
margin: 0 !important;
text-transform: lowercase;
}
.buy_stat b em { font-size: 14px !important; font-style: normal; }
.buy_stat span {
display: inline !important;
font-size: 14px !important;
font-family: "Inter", sans-serif !important;
font-weight: 300 !important;
color: #3C3C3B !important;
margin-left: 4px;
}
/* Two-level title splits for non-hero sections */
.buy_lifestyle h2 .title-pre,
.buy_stories h2 .title-pre {
display: block;
font-size: 20px !important;
line-height: 110% !important;
letter-spacing: 0.02em !important;
font-family: "Felidae", "Cormorant Garamond", serif !important;
font-weight: 400;
margin-bottom: 4px;
text-transform: none;
}
.buy_cta h2 .title-post,
.buy_districts h2 .title-post {
display: block;
font-size: 14px !important;
line-height: 130% !important;
letter-spacing: 0 !important;
font-family: "Inter", sans-serif !important;
font-weight: 300 !important;
margin-top: 8px;
color: #010101;
text-transform: none !important;
}
/* "After" section lead — 20px Felidae per Figma */
.buy_after .buy_after__lead {
font-size: 20px !important;
line-height: 120% !important;
letter-spacing: 0.02em !important;
font-family: "Felidae", "Cormorant Garamond", serif !important;
font-weight: 400;
color: #010101;
}
/* ===== STEPS — order per Figma accordion:
Item1 title → PHOTO → desc1 → desc2 → Items 2-5 ===== */
.buy_steps__grid {
display: flex !important;
flex-direction: column !important;
}
.buy_steps__left { display: contents !important; }
.buy_steps__list { display: contents !important; }
.buy_step:nth-child(1) { order: 1 !important; } /* «1. Формируем задачу...» */
.buy_steps__photo { order: 2 !important; } /* Фото */
.buy_steps__desc1 { order: 3 !important; } /* «НА ПЕРВОМ СОЗВОНЕ...» */
.buy_steps__desc2 { order: 4 !important; } /* «Вы сразу понимаете...» */
.buy_step:nth-child(2) { order: 5 !important; }
.buy_step:nth-child(3) { order: 6 !important; }
.buy_step:nth-child(4) { order: 7 !important; }
.buy_step:nth-child(5) { order: 8 !important; }
/* ===== DISTRICTS — order per Figma:
header → h3 → tagline → BIG photo → summary → desc → features → WIDE photo ===== */
.buy_districts {
display: flex !important;
flex-direction: column !important;
padding: 0 24px !important;
box-sizing: border-box !important;
}
.buy_districts__info,
.buy_districts__left,
.buy_districts__right,
.buy_districts__gallery {
display: contents !important;
}
.buy_districts__header { order: 1 !important; }
#districtTitle { order: 2 !important; margin-top: 24px !important; }
.buy_districts__tagline { order: 3 !important; margin-top: 8px !important; }
.buy_districts__big { order: 4 !important; margin-top: 16px !important; }
.buy_districts__summary { order: 5 !important; margin-top: 20px !important; }
.buy_districts__desc { order: 6 !important; margin-top: 8px !important; }
.buy_districts__features { order: 7 !important; margin-top: 12px !important; }
.buy_districts__wide { order: 8 !important; margin-top: 24px !important; margin-bottom: 24px !important; }
/* Show big + wide photos on mobile (small is hidden) */
.buy_districts__gallery .buy_districts__small {
display: none !important;
}
.buy_districts__big,
.buy_districts__wide {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
aspect-ratio: 310 / 297 !important;
}
.buy_districts__big img,
.buy_districts__wide img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}
/* Features list: single column on mobile, keep existing ::before dot
(no list-style — would render second bullet on top of ::before) */
.buy_districts__features {
display: block !important;
grid-template-columns: none !important;
margin-bottom: 0 !important;
}
.buy_districts__features li {
display: list-item !important;
list-style: none !important;
padding-left: 13px !important;
margin-bottom: 8px !important;
position: relative !important;
font-size: 14px !important;
line-height: 130% !important;
color: #3C3C3B !important;
}
.buy_districts__features li::before {
width: 4px !important;
height: 4px !important;
top: 7px !important;
left: 0 !important;
}
/* Text-element typography per Figma (mobile 360 frame) */
#districtTitle {
font-size: 20px !important;
line-height: 110% !important;
letter-spacing: 0.02em !important;
color: #010101 !important;
}
.buy_districts__tagline {
font-size: 14px !important;
line-height: 150% !important;
color: #3C3C3B !important;
max-width: 100% !important;
}
.buy_districts__summary {
font-size: 14px !important;
line-height: 120% !important;
letter-spacing: 0.02em !important;
color: #010101 !important;
margin-bottom: 0 !important;
max-width: 100% !important;
}
.buy_districts__desc {
font-size: 14px !important;
line-height: 130% !important;
color: #3C3C3B !important;
margin-bottom: 0 !important;
max-width: 100% !important;
}
/* Active tab indicator is already provided by .buy_tab__cursor (the moving dot).
No extra ::before bullet needed — it would create a doubled marker. */
/* Tabs: scroll horizontally; readable size + colors per Figma */
.buy_districts__header {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
padding: 0 !important;
}
.buy_districts__tabs {
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
white-space: nowrap;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin-top: 16px !important;
padding: 4px 0 !important;
}
.buy_districts__tabs::-webkit-scrollbar { display: none; }
.buy_districts__tabs .buy_tab {
flex-shrink: 0 !important;
white-space: nowrap !important;
font-size: 14px !important;
color: #A6A6A6 !important;
padding: 0 0 0 14px !important;
}
.buy_districts__tabs .buy_tab.is-active {
color: #010101 !important;
}
.buy_districts__tabs .buy_tab__sep {
color: #A6A6A6 !important;
}
}