*{box-sizing:border-box} html,body{margin:0;min-height:100%;font-family:Montserrat,Helvetica,sans-serif;color:#242720;background:#f5f4ef} a.logo img { max-width: 200px; }.map-section{padding:clamp(28px,5vw,72px) clamp(16px,4vw,64px);max-width:1600px;margin:0 auto} .map-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 auto 24px;max-width:1400px} .eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8c806e;margin-bottom:14px} h1{font-size:clamp(30px,4.3vw,58px);line-height:1.05;letter-spacing:-.045em;font-weight:300;margin:0} .map-note{max-width:310px;font-size:14px;line-height:1.65;color:#77786f;margin:0 0 4px} .map-frame{position:relative;max-width:1400px;margin:0 auto;border-radius:4px;overflow:hidden;background:#e8e8e3;box-shadow:0 24px 70px rgba(39,40,34,.10)} #map{width:100%;height:clamp(420px,62vw,720px)} .map-label{position:absolute;z-index:2;left:20px;top:20px;pointer-events:none;padding:12px 16px;background:rgba(250,249,245,.94);border:1px solid rgba(40,40,35,.08);backdrop-filter:blur(10px)} .map-label strong{display:block;font-size:12px;letter-spacing:.12em;font-weight:400} .map-label span{display:block;margin-top:5px;font-size:11px;color:#77786f} .map-error{display:none;padding:24px;background:#fff4ee;color:#8b3922;font-size:14px;line-height:1.6} @media(max-width:650px){.map-head{display:block}.map-note{margin-top:16px}.map-label{left:10px;top:10px;padding:10px 12px}#map{height:68vh;min-height:420px}} #loc .wrap { position: absolute; top: 25%; left: 10%; } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --navy:#052b5f; --navy2:#3d4f63; --gold:#052b5f; --gold2:#052b5f; --bg:#ffffff; --bg2:#f7f8fa; --bg3:#eef0f3; --text:#1a1f26; --muted:#5a6570; --dim:#8a95a0; --border:#e4e7eb; --ease:cubic-bezier(.16,1,.3,1); } html{scroll-behavior:smooth} body{ font-family:'Montserrat',system-ui,sans-serif; background:var(--bg);color:var(--text); line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} ::selection{background:var(--gold);color:#fff} /* HEADER */ .topbar{ background:var(--navy);color:rgba(255,255,255,.7); font-size:.78rem;padding:.45rem 0; } .topbar-in{ max-width:1280px;margin:0 auto;padding:0 2rem; display:flex;justify-content:flex-end;align-items:center;gap:1.5rem; } .topbar a{transition:color .25s} .topbar a:hover{color:#fff} .hdr{ position:sticky;top:0;z-index:100; background:#fff;border-bottom:1px solid var(--border); transition:box-shadow .3s; } .hdr.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.06)} .hdr-in{ max-width:1280px;margin:0 auto;padding:.9rem 2rem; display:flex;align-items:center;justify-content:space-between;gap:1.5rem; } .logo{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:.88rem;letter-spacing:.04em;color:var(--navy)} .logo-m{ width:36px;height:36px;border-radius:8px; background:linear-gradient(135deg,var(--gold2),var(--gold)); display:grid;place-items:center;font-weight:500;font-size:.9rem;color:#fff; } .nav{display:flex;gap:1.8rem} .nav a{font-size:.86rem;font-weight:500;color:var(--muted);transition:color .25s} .nav a:hover{color:var(--navy)} .hdr-r{display:flex;align-items:center;gap:1rem} .hdr-tel{font-size:.95rem;font-weight:700;color:var(--navy)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.4rem; padding:.7rem 1.5rem;font-size:.84rem;font-weight:400; border-radius:6px;transition:all .3s var(--ease);white-space:nowrap; } .btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:var(--navy2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(44,58,74,.25)} .btn-gold{background:var(--gold);color:#fff} .btn-gold:hover{background:var(--gold2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(184,151,62,.3)} .btn-out{ background:transparent;color:var(--navy); border:1.5px solid var(--border); } .btn-out:hover{border-color:var(--navy);background:var(--bg2)} .mob{display:none;padding:.3rem} /* HERO */ .hero{ position:relative; background:var(--bg2); padding:3.5rem 0 0; background: linear-gradient(290deg, rgba(26, 31, 38, .75) 0%, rgba(26, 31, 38, .35) 50%, transparent 100%), url(main.png) center / cover no-repeat; overflow:hidden; } .hero-in{max-width:1280px;margin:0 auto;padding:0 2rem} .hero-card{ position: relative; border-radius: 16px; overflow: hidden; min-height: 520px; /*background: linear-gradient(290deg, rgba(26, 31, 38, .75) 0%, rgba(26, 31, 38, .35) 50%, transparent 100%), url(Image-2.jpg) center / cover no-repeat;*/ display: flex; align-items: flex-end; /*box-shadow: 0 12px 48px rgba(0, 0, 0, .12);*/ justify-content: end; } .hero-body{padding:3.5rem;max-width:560px;color:#fff} .hero-tag{ display:inline-block;font-size:.72rem;font-weight:400; letter-spacing:.1em;text-transform:uppercase; color:#fff;margin-bottom:1rem; opacity:0;animation:fadeUp .7s .2s var(--ease) forwards; } .hero h1{ font-size:clamp(2.2rem,4.5vw,3.2rem);font-weight:400; line-height:1.15;letter-spacing:-.02em;margin-bottom:1rem; opacity:0;animation:fadeUp .7s .35s var(--ease) forwards; } .hero-sub{ font-size:1.05rem;color:rgba(255,255,255,.75);line-height:1.65; margin-bottom:2rem;max-width:40ch; opacity:0;animation:fadeUp .7s .5s var(--ease) forwards; } .hero-acts{ display:flex;flex-wrap:wrap;gap:.8rem; opacity:0;animation:fadeUp .7s .65s var(--ease) forwards; } .hero-acts .btn-navy{background:#fff;color:var(--navy)} .hero-acts .btn-navy:hover{background:var(--gold);color:#fff} .hero-acts .btn-out{border-color:rgba(255,255,255,.35);color:#fff} .hero-acts .btn-out:hover{background:rgba(255,255,255,.12);border-color:#fff} @keyframes fadeUp{to{opacity:1;transform:none}} .hero-tag,.hero h1,.hero-sub,.hero-acts{transform:translateY(20px)} .hero { position: relative; isolation: isolate; overflow: hidden; min-height: 650px; } /* Видео */ .hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Затемнение поверх видео */ .hero-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient( 90deg, rgba(10, 22, 38, 0.65) 0%, rgba(10, 22, 38, 0.35) 50%, rgba(10, 22, 38, 0.10) 100% ); } /* Контент поверх видео */ .hero-in { position: relative; z-index: 1; min-height: 650px; display: flex; align-items: center; } /* Мобильная версия */ @media (max-width: 768px) { .hero, .hero-in { min-height: 560px; } .hero-video { object-position: center; } .hero-overlay { background: rgba(10, 22, 38, 0.48); } } /* STATS */ .stats{ max-width:1280px;margin:-2.5rem auto 0;padding:0 2rem; position:relative;z-index:5; } .stats-row{ display:grid;grid-template-columns:repeat(4,1fr); background:#fff;border-radius:14px; box-shadow:0 8px 40px rgba(0,0,0,.08); border:1px solid var(--border);overflow:hidden; } .st{ padding:1.8rem 1.5rem;text-align:center; border-right:1px solid var(--border); } .st:last-child{border-right:none} .st-n{font-size:1.7rem;font-weight:500;color:var(--navy);line-height:1.2} .st-l{font-size:.8rem;color:var(--dim);margin-top:.25rem} /* SECTIONS */ section{padding:5.5rem 0} .wrap{max-width:1280px;margin:0 auto;padding:0 2rem} .lbl{ font-size:.72rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase; color:var(--gold);margin-bottom:.7rem; } .ttl{ font-size:clamp(1.7rem,3vw,2.3rem);font-weight:500; letter-spacing:-.02em;line-height:1.2;margin-bottom:.9rem;color:var(--navy); } .desc{font-size:1.02rem;color:var(--muted);line-height:1.7;max-width:55ch} /* ADV */ .adv-grid{ display:grid;gap:3.5rem;align-items:center;margin-top:3rem; } .adv-img{ border-radius:0px;overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.1); } .adv-img img{width:100%;height:100%;object-fit:cover} .feat-list{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2rem} .feat{ display:flex;gap:.9rem;padding:1.1rem; background:var(--bg2);border-radius:12px; border:1px solid transparent;transition:all .3s; } .feat:hover{border-color:var(--border);background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.04)} .feat-ic{ width:42px;height:42px;flex-shrink:0;border-radius:10px; background:rgba(184,151,62,.1);color:var(--gold); display:grid;place-items:center;font-size:1.1rem; } .feat h4{font-size:.9rem;font-weight:700;margin-bottom:.15rem;color:var(--navy)} .feat p{font-size:.8rem;color:var(--dim)} /* CATALOG */ .cat{background:var(--bg2)} .cat-hd{ display:flex;align-items:flex-end;justify-content:space-between; margin-bottom:2.5rem;flex-wrap:wrap;gap:1.5rem; } .filters{display:flex;gap:.6rem;flex-wrap:wrap} .sel{ appearance:none;font:inherit;font-size:.84rem;font-weight:500; background:#fff;color:var(--muted);border:1px solid var(--border); border-radius:6px;padding:.65rem 2.3rem .65rem 1rem;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%238a95a0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center; transition:border-color .25s; } .sel:focus{outline:none;border-color:var(--gold)} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} .card{ background:#fff;border-radius:0px;overflow:hidden; border:1px solid var(--border); transition:all .4s var(--ease); } .card:hover{ transform:translateY(-6px); box-shadow:0 16px 48px rgba(0,0,0,.1); border-color:transparent; } .card-img{position:relative;height:220px;overflow:hidden} .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .card:hover .card-img img{transform:scale(1.05)} .badge{ position: absolute; top: 1rem; right: 0; background: var(--gold); color: #fff; font-size: 1rem; font-weight: 500; letter-spacing: .04em; padding: .3rem .7rem; border-radius: 0px; } .card-bd{padding:1.3rem} .card-bd h3{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:.7rem} .card-meta{display:flex;gap:1rem;font-size:.8rem;color:var(--dim);margin-bottom:1rem} .card-link{font-size:.84rem;font-weight:400;color:var(--gold);transition:gap .3s;display:inline-flex;align-items:center;gap:.3rem} .card:hover .card-link{gap:.6rem} /* PLANS */ .plans-hd{ display:flex;align-items:flex-end;justify-content:space-between; margin-bottom:2.8rem;flex-wrap:wrap;gap:1.5rem; } .plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .plan{ background:var(--bg2);border-radius:0px;padding:1.8rem; text-align:center;border:1px solid var(--border); transition:all .35s; } .plan:hover{background:#fff;box-shadow:0 8px 32px rgba(0,0,0,.06);transform:translateY(-4px)} .plan-box{ background:#fff;border-radius:10px;height:240px; display:grid;place-items:center;margin-bottom:1.2rem; border:1px solid var(--border); } .plan h4{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:.2rem} .plan p{font-size:.84rem;color:var(--dim)} /* LOCATION */ .loc{background:var(--bg2)} .loc-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;align-items:center} .loc-feats{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:2rem} .loc-i{ display:flex;gap:.8rem;align-items:flex-start; padding:1rem;background:#fff;border-radius:10px; border:1px solid var(--border);transition:all .3s; } .loc-i:hover{box-shadow:0 4px 16px rgba(0,0,0,.05)} .loc-ic{ width:40px;height:40px;flex-shrink:0;border-radius:9px; background:rgba(184,151,62,.1);display:grid;place-items:center;font-size:1.05rem; } .loc-i h4{font-size:.88rem;font-weight:700;color:var(--navy);margin-bottom:.1rem} .loc-i p{font-size:.78rem;color:var(--dim)} .loc-map{ height:420px;border-radius:14px;overflow:hidden; border:1px solid var(--border);position:relative; background:url('https://images.unsplash.com/photo-1477959858617-67f85b6b1c4e?w=1000&q=80') center/cover no-repeat; box-shadow:0 8px 32px rgba(0,0,0,.08); } .map-pin{ position:absolute;top:42%;left:48%;transform:translate(-50%,-50%); } .map-pin .dot{ width:48px;height:48px; background:linear-gradient(135deg,var(--gold2),var(--gold)); border-radius:50% 50% 50% 0;transform:rotate(-45deg); display:grid;place-items:center; box-shadow:0 4px 20px rgba(184,151,62,.4); } .map-pin .dot span{transform:rotate(45deg);font-weight:500;font-size:.85rem;color:#fff} .map-tag{ position:absolute;bottom:1.2rem;right:1.2rem; background:#fff;padding:.55rem 1rem;border-radius:6px; font-size:.8rem;font-weight:400;color:var(--navy); box-shadow:0 4px 16px rgba(0,0,0,.1); display:flex;align-items:center;gap:.4rem; } /* CTA */ .cta{padding:5rem 0} .cta-box{ background:var(--navy);border-radius:16px;overflow:hidden; display:grid;grid-template-columns:1fr 1fr; box-shadow:0 12px 48px rgba(44,58,74,.2); } .cta-l{padding:3.5rem;color:#fff;display:flex;flex-direction:column;justify-content:center} .cta-l .lbl{color:var(--gold2)} .cta-l .ttl{color:#fff} .cta-l .desc{color:rgba(255,255,255,.65)} .cta-r{padding:2.5rem;background:rgba(255,255,255,.04);display:flex;align-items:center} .form{width:100%} .fg{margin-bottom:.85rem} .fg input,.fg select{ width:100%;padding:.9rem 1.1rem; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12); border-radius:8px;color:#fff;font:inherit;font-size:.9rem; transition:border-color .25s,background .25s; } .fg input::placeholder{color:rgba(255,255,255,.4)} .fg input:focus,.fg select:focus{ outline:none;border-color:var(--gold);background:rgba(255,255,255,.12); } .fg select{ appearance:none;cursor:pointer;color:rgba(255,255,255,.6); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%238a95a0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center; } .fcheck{ display:flex;gap:.55rem;align-items:flex-start; margin:1.1rem 0 1.3rem;font-size:.74rem;color:rgba(255,255,255,.45);line-height:1.4; } .fcheck input{margin-top:.15rem;accent-color:var(--gold);width:15px;height:15px} .form .btn{width:100%;padding:.95rem} /* FOOTER */ .ftr{background:var(--navy);color:rgba(255,255,255,.5);padding:2.5rem 0;font-size:.84rem} .ftr-in{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.2rem; } .ftr .logo{color:#fff} .ftr-nav{display:flex;gap:1.5rem} .ftr-nav a{transition:color .25s} .ftr-nav a:hover{color:#fff} .ftr-copy{ width:100%;text-align:center;font-size:.75rem; margin-top:1.5rem;padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.08); } /* REVEAL */ .rv{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .rv.show{opacity:1;transform:none} .d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s} /* RESPONSIVE */ @media(max-width:1024px){ .adv-grid,.loc-grid,.cta-box{grid-template-columns:1fr} .cards,.plans-grid{grid-template-columns:1fr 1fr} .stats-row{grid-template-columns:1fr 1fr} .st:nth-child(2){border-right:none} } @media(max-width:768px){ .nav,.hdr-tel{display:none} .mob{display:block} .cards,.plans-grid,.feat-list,.loc-feats{grid-template-columns:1fr} .stats-row{grid-template-columns:1fr 1fr} .hero-body{padding:2rem} .hero-card{min-height:420px} .hdr-in,.hero-in,.wrap,.topbar-in{padding-left:1.2rem;padding-right:1.2rem} .cta-l,.cta-r{padding:2rem} } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'); .gallery-section { max-width: 1440px; margin: 0 auto; padding: 100px 6%; } .gallery-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 42px; } .gallery-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--gallery-muted); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; } .gallery-eyebrow::before { content: ''; width: 28px; height: 1px; background: #052b5f; } .gallery-title { margin: 0; font-size: clamp(36px, 5vw, 45px); font-weight: 300; letter-spacing: -3px; line-height: 1.08; font-style: normal !important; margin-bottom: 42px; } .gallery-description { max-width: 280px; margin: 0 0 5px; color: var(--gallery-muted); font-size: 13px; line-height: 1.8; } /* Сетка фотографий */ .gallery-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 250px 250px; gap: 12px; } .gallery-item { position: relative; display: block; overflow: hidden; padding: 0; border: 0; background: #e5e2dc; cursor: pointer; text-align: left; isolation: isolate; } .gallery-item:first-child { grid-row: span 2; } .gallery-item img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .gallery-item::after { content: ''; position: absolute; inset: 35% 0 0; z-index: 1; background: linear-gradient( to bottom, transparent, rgba(0,0,0,.55) ); opacity: .85; transition: opacity .35s; } .gallery-item:hover img { transform: scale(1.06); } .gallery-item:hover::after { opacity: 1; } .gallery-caption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; color: #fff; font-size: 13px; font-weight: 500; } .gallery-caption small { display: block; margin-top: 6px; color: rgba(255,255,255,.7); font-size: 10px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; } .gallery-arrow { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font-size: 18px; transition: background .3s, color .3s; } .gallery-item:hover .gallery-arrow { background: white; color: #222; } /* Кнопка под галереей */ .gallery-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 25px; } .gallery-counter { color: var(--gallery-muted); font-size: 12px; letter-spacing: 1px; } .gallery-counter strong { color: var(--gallery-text); } .gallery-more { display: inline-flex; align-items: center; gap: 20px; padding: 15px 0; border: 0; border-bottom: 1px solid var(--gallery-accent); background: transparent; color: var(--gallery-text); font: inherit; font-size: 12px; cursor: pointer; } .gallery-more span { font-size: 19px; transition: transform .3s; } .gallery-more:hover span { transform: translateX(5px); } /* Полноэкранный просмотр */ .gallery-lightbox { position: fixed; inset: 0; z-index: 99999; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; grid-template-rows: 70px minmax(0, 1fr) 60px; align-items: center; justify-items: center; padding: 0 20px; background: rgba(15, 16, 15, .97); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .gallery-lightbox.is-open { opacity: 1; visibility: visible; } .lightbox-top { grid-column: 1 / -1; width: 100%; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 12px; letter-spacing: 1px; } .lightbox-close, .lightbox-nav { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; color: white; font-size: 24px; cursor: pointer; transition: background .2s; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.15); } .lightbox-image { display: block; max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; grid-column: 2; grid-row: 2; user-select: none; } .lightbox-nav { grid-row: 2; } .lightbox-prev { grid-column: 1; } .lightbox-next { grid-column: 3; } .lightbox-bottom { grid-column: 1 / -1; grid-row: 3; color: rgba(255,255,255,.65); font-size: 12px; } /* Адаптивность */ @media (max-width: 900px) { .gallery-section { padding: 70px 5%; } .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 360px 210px 210px; } .gallery-item:first-child { grid-column: span 2; grid-row: auto; } } @media (max-width: 560px) { .gallery-section { padding: 55px 18px; } .gallery-heading { display: block; margin-bottom: 25px; } .gallery-title { letter-spacing: -1.8px; } .gallery-description { margin-top: 18px; } .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 280px 165px 165px; gap: 7px; } .gallery-item:first-child { grid-column: span 2; } .gallery-caption { left: 12px; right: 10px; bottom: 12px; font-size: 11px; } .gallery-caption small { font-size: 8px; } .gallery-arrow { width: 29px; height: 29px; font-size: 15px; } .gallery-footer { align-items: flex-start; } .gallery-lightbox { grid-template-columns: 38px minmax(0, 1fr) 38px; padding: 0 6px; } .lightbox-nav { width: 34px; height: 34px; font-size: 19px; } .lightbox-image { max-width: 100%; max-height: calc(100vh - 150px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } } .box-cont{ box-shadow: 0 8px 32px rgba(0, 0, 0, .08); padding: 20px; background: #f7f8fa; } .payment-section { --payment-ink: #17182c; --payment-purple: #35108e; --payment-muted: #8589a1; --payment-border: #e0e0e5; --payment-dark: #052b5f; max-width: 100%; margin: 0 auto; padding: 32px 20px; color: var(--payment-ink); font-family: Montserrat, sans-serif; } .payment-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; } .payment-eyebrow { display: block; margin-bottom: 12px; font-size: 10px; letter-spacing: 1.4px; } .payment-heading h2 { margin: 0; font-size: clamp(23px, 3vw, 27px); line-height: 1.15; font-weight: 400; letter-spacing: .15px; } .payment-more { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 152px; padding: 0 0 13px; border-bottom: 1px solid var(--payment-border); color: var(--payment-ink); font-size: 12px; text-decoration: none; white-space: nowrap; } .payment-more span, .payment-link span { font-size: 17px; transition: transform .2s ease; } .payment-more:hover span, .payment-link:hover span { transform: translate(3px, -3px); } .payment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .payment-card { display: flex; flex-direction: column; min-width: 0; min-height: 180px; padding: 19px 17px 0; overflow: hidden; border: 1px solid var(--payment-border); border-radius: 0px; background: #fff; box-sizing: border-box; transition: border-color .2s ease, transform .2s ease; } .payment-card:hover { border-color: #b7b1ca; transform: translateY(-2px); } .payment-card--featured { color: #fff; background: var(--payment-dark); border-color: var(--payment-dark); } .payment-label { display: block; min-height: 15px; font-size: 9px; letter-spacing: .5px; line-height: 1.4; } .payment-value { display: flex; align-items: baseline; gap: 3px; margin: 19px 0 17px; color: var(--payment-purple); font-size: 34px; font-weight: 400; line-height: 1; white-space: nowrap; } .payment-card--featured .payment-value { color: #fff; } .payment-value small { font-size: 12px; font-weight: 400; } .payment-card h3 { margin: 0 0 9px; font-size: 12px; font-weight: 400; line-height: 1.55; } .payment-card p { margin: 0 0 18px; color: var(--payment-muted); font-size: 9px; line-height: 1.6; } .payment-card--featured p { color: #d0d1dc; } .payment-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 13px 0 17px; border-top: 1px solid var(--payment-border); color: var(--payment-ink); font-size: 9px; text-decoration: none; } .payment-card--featured .payment-link { border-color: rgba(255, 255, 255, .15); color: #fff; } .payment-note { max-width: 680px; margin: 15px 0 0; color: var(--payment-muted); font-size: 9px; line-height: 1.7; } @media (max-width: 760px) { .payment-section { padding: 28px 16px; } .payment-heading { align-items: flex-start; } .payment-more { min-width: auto; gap: 8px; margin-top: 25px; font-size: 10px; } .payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .payment-card { min-height: 225px; padding-right: 14px; padding-left: 14px; } } @media (max-width: 420px) { .payment-heading { flex-direction: column; gap: 15px; } .payment-more { margin-top: 0; } .payment-grid { grid-template-columns: 1fr; } .payment-card { min-height: 205px; padding: 20px 18px 0; } } .season-mosaic { --sm-green: #176052; --sm-orange: #052b5f; --sm-ink: #242821; padding: 80px 24px; background: #f5f5f2; color: var(--sm-ink); font-family: inherit; } .season-mosaic *, .season-mosaic *::before, .season-mosaic *::after { box-sizing: border-box; } .season-mosaic .sm-head, .season-mosaic .sm-grid { max-width: 1410px; margin-inline: auto; margin: 0 auto; padding: 0 6%; } .sm-head { margin-bottom: 32px; } /* Асимметричная мозаика */ .sm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 220px 220px 220px; gap: 14px; } .sm-tile { position: relative; overflow: hidden; min-width: 0; min-height: 0; isolation: isolate; border-radius: 0px; background: #d9ddd5; color: #fff; } .sm-tile > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); } .sm-tile:hover > img { transform: scale(1.045); } .sm-overlay { position: absolute; z-index: -1; inset: 0; background: linear-gradient( 180deg, rgba(0,0,0,.05) 15%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.66) 100% ); } .sm-caption { position: absolute; left: 25px; right: 20px; bottom: 24px; } .sm-caption > span { display: block; margin-bottom: 12px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; } .sm-caption h3 { margin: 0; font-size: clamp(24px, 2.5vw, 36px); line-height: .98; letter-spacing: -.045em; font-weight: 600; } .sm-spring { grid-column: 1 / 8; grid-row: 1 / 3; } .sm-spring .sm-caption { left: 32px; bottom: 32px; } .sm-spring .sm-caption h3 { font-size: clamp(38px, 4.3vw, 62px); } .sm-summer { grid-column: 8 / 13; grid-row: 1 / 3; } .sm-autumn { grid-column: 1 / 5; grid-row: 3; } .sm-winter { grid-column: 5 / 9; grid-row: 3; } .sm-note { position: relative; grid-column: 9 / 13; grid-row: 3; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; background: var(--sm-orange); color: #fff; } .sm-note__eyebrow { position: relative; z-index: 1; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; } .sm-note__big { position: absolute; right: -5px; bottom: 10px; color: #ffffff66; font-size: clamp(85px, 10vw, 150px); line-height: .8; font-weight: 800; letter-spacing: -.04em; } .sm-note h3 { position: relative; z-index: 1; margin: auto 0; font-size: clamp(21px, 2vw, 29px); line-height: 1.05; letter-spacing: -.045em; } .sm-note__bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; font-size: 9px; font-weight: 700; letter-spacing: 1px; } .sm-note__bottom span { font-size: 20px; } @media (min-width: 1500px) { .sm-grid { grid-template-rows: 260px 260px 250px; } } @media (max-width: 800px) { .season-mosaic { padding: 56px 16px; } .sm-grid { grid-template-rows: 300px 190px 190px; gap: 10px; } .sm-spring { grid-column: 1 / 8; grid-row: 1 / 3; } .sm-summer { grid-column: 8 / 13; grid-row: 1 / 3; } .sm-autumn { grid-column: 1 / 7; grid-row: 3; } .sm-winter { grid-column: 7 / 13; grid-row: 3; } .sm-note { display: none; } .sm-caption { left: 14px; right: 10px; bottom: 16px; } .sm-caption h3 { font-size: clamp(22px, 3.5vw, 30px); } .sm-spring .sm-caption { left: 18px; bottom: 20px; } .sm-spring .sm-caption h3 { font-size: clamp(30px, 5vw, 44px); } .sm-caption > span { font-size: 8px; letter-spacing: .8px; } } @media (max-width: 480px) { .sm-grid { grid-template-rows: 310px 175px 175px; } .sm-tile { border-radius: 14px; } .sm-caption h3 { font-size: 23px; } .sm-spring .sm-caption h3 { font-size: 35px; } } @media (prefers-reduced-motion: reduce) { .sm-tile > img { transition: none; } } /* Скрываем текст до наведения */ .season-mosaic .sm-spring .sm-caption, .season-mosaic .sm-summer .sm-caption, .season-mosaic .sm-autumn .sm-caption, .season-mosaic .sm-winter .sm-caption { opacity: 0; transform: translateY(18px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1); pointer-events: none; } /* Затемнение тоже проявляется постепенно */ .season-mosaic .sm-spring .sm-overlay, .season-mosaic .sm-summer .sm-overlay, .season-mosaic .sm-autumn .sm-overlay, .season-mosaic .sm-winter .sm-overlay { opacity: 0; transition: opacity .4s ease; } /* Наведение на карточку */ .season-mosaic .sm-tile:hover .sm-caption { opacity: 1; transform: translateY(0); } .season-mosaic .sm-tile:hover .sm-overlay { opacity: 1; } /* Лёгкое увеличение фото */ .season-mosaic .sm-tile > img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); } .season-mosaic .sm-tile:hover > img { transform: scale(1.045); } /* На устройствах без наведения текст всегда доступен */ @media (hover: none) { .season-mosaic .sm-caption { opacity: 1; transform: none; } .season-mosaic .sm-overlay { opacity: 1; } } /* Учитываем настройки уменьшения анимации */ @media (prefers-reduced-motion: reduce) { .season-mosaic .sm-caption, .season-mosaic .sm-overlay, .season-mosaic .sm-tile > img { transition: none; } .season-mosaic .sm-tile .sm-caption { transform: none; } } .before-after { width: 100%; padding: 20px 0; } .before-after__slider { --position: 50%; position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #e8e8e8; isolation: isolate; user-select: none; } .before-after__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } .before-after__image--before { position: absolute; inset: 0; } .before-after__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--position)); } .before-after__label { position: absolute; top: 18px; z-index: 3; padding: 9px 15px; color: #fff; background: rgba(18, 29, 39, 0.7); border-radius: 4px; font: 600 12px/1.2 Arial, sans-serif; letter-spacing: 1.5px; pointer-events: none; } .before-after__label--before { left: 18px; } .before-after__label--after { right: 18px; } .before-after__divider { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--position); width: 2px; background: rgba(255, 255, 255, 0.95); transform: translateX(-50%); pointer-events: none; } .before-after__handle { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #fff; color: #263746; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 50%; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); transform: translate(-50%, -50%); } .before-after__handle svg { width: 22px; height: 22px; } .before-after__range { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; } .before-after__range::-webkit-slider-runnable-track { height: 100%; background: transparent; } .before-after__range::-webkit-slider-thumb { width: 44px; height: 100%; appearance: none; -webkit-appearance: none; background: transparent; border: 0; } .before-after__range::-moz-range-track { height: 100%; background: transparent; } .before-after__range::-moz-range-thumb { width: 44px; height: 100%; background: transparent; border: 0; } .before-after__range:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: -4px; } @media (max-width: 600px) { .before-after { padding: 12px 0; } .before-after__label { top: 10px; padding: 7px 10px; font-size: 10px; } .before-after__label--before { left: 10px; } .before-after__label--after { right: 10px; } .before-after__handle { width: 40px; height: 40px; } }#rodny-plan { --rp-accent: #052b5f; --rp-dark: #052b5f; --rp-muted: #85877f; --rp-border: #e8e6df; width: 100%; color: var(--rp-dark); font-family: inherit; box-sizing: border-box; } #rodny-plan *, #rodny-plan *::before, #rodny-plan *::after { box-sizing: border-box; } #rodny-plan .rp-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 30px; } #rodny-plan .rp-eyebrow { display: block; font-size: 10px; letter-spacing: .18em; font-weight: 600; color: var(--rp-accent); margin-bottom: 12px; } #rodny-plan .rp-heading h2 { font-size: clamp(26px, 3vw, 42px); line-height: 1.15; letter-spacing: -.035em; font-weight: 500; margin: 0 0 12px; color: var(--rp-dark); } #rodny-plan .rp-heading p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--rp-muted); } #rodny-plan .rp-count { flex-shrink: 0; font-size: 12px; color: var(--rp-muted); border: 1px solid var(--rp-border); border-radius: 30px; padding: 10px 14px; } #rodny-plan .rp-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, .8fr); gap: 26px; align-items: stretch; } #rodny-plan .rp-map { min-width: 0; align-self: center; } #rodny-plan .rp-map-inner { position: relative; width: 100%; overflow: hidden; background: #fff; line-height: 0; } #rodny-plan .rp-plan-image { display: block; width: 100%; height: auto; margin: 0; } #rodny-plan .rp-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } #rodny-plan .rp-zone { fill: #052b5f; fill-opacity: 0; stroke: transparent; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; pointer-events: all; transition: fill-opacity .2s ease, stroke .2s ease; outline: none; } #rodny-plan .rp-zone:hover, #rodny-plan .rp-zone:focus-visible { fill-opacity: .34; stroke: var(--rp-accent); } #rodny-plan .rp-zone.is-active { fill-opacity: .24; stroke: var(--rp-accent); stroke-width: 2.5; } #rodny-plan .rp-map-legend { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; font-size: 11px; line-height: 1.5; color: var(--rp-muted); } #rodny-plan .rp-map-legend span { display: inline-flex; align-items: center; gap: 8px; } #rodny-plan .rp-dot { width: 9px; height: 9px; display: inline-block; background: var(--rp-accent); border-radius: 50%; } #rodny-plan .rp-card { display: flex; flex-direction: column; padding: clamp(22px, 2.5vw, 34px); border: 1px solid var(--rp-border); background: #fff; min-width: 0; } #rodny-plan .rp-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } #rodny-plan .rp-card-top .rp-eyebrow { margin: 0; } #rodny-plan .rp-status { color: #77786f; font-size: 10px; letter-spacing: .04em; } #rodny-plan .rp-card-number { margin: 36px 0 25px; display: flex; flex-direction: column; gap: 4px; } #rodny-plan .rp-card-number span { font-size: 10px; letter-spacing: .16em; color: var(--rp-muted); } #rodny-plan .rp-card-number strong { font-size: clamp(56px, 6vw, 84px); font-weight: 400; line-height: 1; letter-spacing: -.06em; color: var(--rp-dark); } #rodny-plan .rp-card-divider { height: 1px; width: 100%; background: var(--rp-border); } #rodny-plan .rp-description { font-size: 13px; line-height: 1.8; color: #73766e; margin: 22px 0; } #rodny-plan .rp-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-bottom: 28px; } #rodny-plan .rp-spec { display: flex; flex-direction: column; gap: 8px; padding: 15px 0; border-bottom: 1px solid var(--rp-border); } #rodny-plan .rp-spec span { color: var(--rp-muted); font-size: 11px; line-height: 1.4; } #rodny-plan .rp-spec strong { color: var(--rp-dark); font-size: 13px; font-weight: 500; line-height: 1.4; } #rodny-plan .rp-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 17px 19px; background: var(--rp-dark); color: #fff !important; text-decoration: none !important; font-size: 12px; line-height: 1.4; transition: background .2s ease; } #rodny-plan .rp-cta:hover { background: #2d2f41; color: #fff !important; } #rodny-plan .rp-cta span { font-size: 19px; } #rodny-plan .rp-note { font-size: 10px; line-height: 1.6; color: var(--rp-muted); margin: 14px 0 0; } @media (max-width: 900px) { #rodny-plan .rp-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } #rodny-plan .rp-card { padding: 26px; } #rodny-plan .rp-card-number { margin: 24px 0 20px; } #rodny-plan .rp-card-number strong { font-size: 64px; } #rodny-plan .rp-specs { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { #rodny-plan .rp-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 20px; } #rodny-plan .rp-heading h2 { font-size: 28px; } #rodny-plan .rp-map-legend { font-size: 10px; } #rodny-plan .rp-card { padding: 22px; } } @media (prefers-reduced-motion: reduce) { #rodny-plan .rp-zone, #rodny-plan .rp-cta { transition: none; } }
.level__up {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    flex-direction: column;
}

.level__up span {
    width: 50px;
    height: 50px;
    border: 2px solid #c2c4d2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    font-size: 20px;
    font-weight: 600;
    color: #c2c4d2;
    transition: .3s;
    cursor: pointer;
}
.level__up .active {
       transition: .3s;
 
     border: 2px solid #4b5269;
    color: #4b5269;
}

.level__up span:hover {
       transition: .3s;
 
     border: 2px solid #4b5269;
    color: #4b5269;
}

.level__up div {
    display: flex;
}


/* Переключение этажей */
#level_1,
#level_2,
#level_3 {
    display: none;
}

#level_1 {
    display: inline;
}

/* Навигация */
.level__up span {
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}

.level__up span.active {
    background: #333868;
    color: #fff;
}

.st0 {
    opacity: 0.3;
    fill: #333868;
    transition: .3s;
}

.st0:hover{
    opacity: 0.5;
    fill: #333868;
       transition: .3s;
       cursor: pointer;
}

polygon.st0.sale {
    fill: #000000;
}
polygon.st0.sale:hover {
	cursor: no-drop;
    fill: #000000;
        opacity: 0.3;
}
.level__up text {
    color: #393f46;
}






/**/

.adv-img {
    position: relative;
}

polygon.st0 {
    cursor: pointer;
    pointer-events: all;
}

.townhouse-tooltip {
    position: absolute;
    z-index: 20;
    display: none;
    min-width: 190px;
    padding: 16px 18px;
    background: #fff;
    color: #33383d;
    border: 1px solid rgba(51, 56, 104, .12);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    pointer-events: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
}

.townhouse-tooltip__title {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
}

.townhouse-tooltip__area {
    margin-bottom: 4px;
    color: #666;
}

.townhouse-tooltip__price {
    font-size: 16px;
    font-weight: 600;
    color: #333868;
}

@media (max-width: 767px) {
    .townhouse-tooltip {
        display: none !important;
    }
}

.townhouse-tooltip.is-reserved .townhouse-tooltip__area {
    color: #a15c38;
    font-weight: 600;
}

.townhouse-tooltip.is-reserved .townhouse-tooltip__price {
    display: none;
}

@font-face {
    font-family: "nbrb";
    src: url("/assets/fonts/nbrb/nbrb.woff2") format("woff2"), /* Укажите путь к файлу nbrb.woff2 */
         url("/assets/fonts/nbrb/nbrb.ttf") format("truetype"), /* Укажите путь к файлу nbrb.ttf */
         url("/assets/fonts/nbrb/nbrb.woff") format("woff");    /* Укажите путь к файлу nbrb.woff */
    unicode-range: U+E901, U+42, U+59, U+4E;
}

.nbrb-icon {
    font-family: "nbrb" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: normal;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    font-feature-settings: "liga";
    -webkit-font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: discretionary-ligatures;
}

.nbrb-icon-byn:before {
    content: "\e901"; /* Юникод для знака */
}