/* Лендинг ЖК «РЕПАБЛИК». Палитра и типографика — из раздела 2 PLAN.md (инженерная антиква + моноширинные цифры + шильдики-таблички + тёмное табло депо). Каркас общих механизмов (TOC, виджет заявки, reveal) — по образцу портфеля, палитра и вся вёрстка секций — свои. Агентство не упоминается нигде, включая комментарии, — правило №8 CLAUDE.md. Шрифты подключены только через в (никогда @import). */ :root{ --cream: #F1ECE3; /* база светлая — известь */ --iron: #201A18; /* база тёмная — чугун (табло, интермедии) */ --accent: #3E5C41; /* парковая зелень — CTA, активные элементы */ --accent-deep: #324A34; /* акцент, затемнён для hover */ --stone: #9C8574; /* тёплый камень — тонкие линии, рамки шильдиков */ --stone-text: #6B5847; /* тот же камень, затемнён для контраста 4.5 на извести */ --ink: #2B2320; /* текст на светлом */ --paper-text: #EFE9DE; /* текст на тёмном */ --line: rgba(43,35,32,0.14); --line-dark: rgba(239,233,222,0.16); --t-reds: #6E352B; --t-platinum: #B4AC9E; --t-green: #5E7B52; --t-gold: #A9834C; --radius: 4px; --radius-card: 18px; --shadow: 0 8px 30px rgba(32,26,24,0.06); --ease: cubic-bezier(.22,.61,.36,1); --maxw: 1360px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--cream); color:var(--ink); font-family:'IBM Plex Sans', sans-serif; font-weight:400; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,video{max-width:100%;height:auto;display:block;} figure{margin:0;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} h1,h2,h3,h4{ font-family:'IBM Plex Serif', serif; font-weight:400; margin:0; line-height:1.1; color:var(--ink); } .on-dark, .on-dark h2, .on-dark h3, .on-dark p{color:var(--paper-text);} .mono{font-family:'IBM Plex Mono', monospace;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px);} section{position:relative;} /* ---------- шильдик — заводская табличка, графический мотив сайта ---------- */ .plate{ display:inline-flex;align-items:center; font-family:'IBM Plex Mono', monospace;font-weight:500;font-size:12px; letter-spacing:0.14em;text-transform:uppercase; border:1px solid var(--stone);border-radius:6px; padding:6px 14px;color:var(--stone-text); } .on-dark .plate{color:var(--paper-text);border-color:rgba(239,233,222,0.5);} .section-head{max-width:720px;margin-bottom:clamp(36px,5vh,56px);} .section-head h2{font-size:clamp(30px,4.5vw,54px);margin-top:16px;} .section-head p{margin-top:18px;font-size:16px;line-height:1.75;color:var(--ink);max-width:640px;} .section-head.on-dark p{color:rgba(239,233,222,0.82);} figcaption{font-family:'IBM Plex Mono', monospace;font-size:12.5px;color:var(--stone-text);margin-top:12px;line-height:1.5;} .on-dark figcaption,.strip-cap.on-dark{color:rgba(239,233,222,0.68);} .cap-overlay{ position:absolute;left:0;right:0;bottom:0;padding:16px 20px;margin:0; background:linear-gradient(0deg, rgba(20,17,15,0.82) 0%, rgba(20,17,15,0) 100%); color:var(--paper-text);font-size:12.5px;line-height:1.5; } /* ---------- кнопки ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:46px; font-family:'IBM Plex Sans', sans-serif;font-weight:600;font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase; padding:13px 26px;border:1px solid currentColor;border-radius:var(--radius); cursor:pointer;background:transparent;color:inherit; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); white-space:normal;text-align:center; } .btn-solid{background:var(--accent);border-color:var(--accent);color:var(--cream);} .btn-solid:hover{background:var(--accent-deep);border-color:var(--accent-deep);} .btn-ghost-light{color:var(--accent);border-color:rgba(62,92,65,0.5);} .btn-ghost-light:hover{background:var(--accent);color:var(--cream);border-color:var(--accent);} .btn-ghost-dark{color:var(--paper-text);border-color:rgba(239,233,222,0.4);} .btn-ghost-dark:hover{background:var(--paper-text);color:var(--iron);border-color:var(--paper-text);} .btn-small{min-height:40px;padding:10px 20px;font-size:11.5px;} /* ---------- nav ---------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:500; display:flex;align-items:center;justify-content:space-between; padding:20px clamp(20px,5vw,64px); transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); } .nav .logo{font-family:'IBM Plex Serif', serif;font-size:20px;letter-spacing:0.04em;color:var(--paper-text);} .nav-actions{display:flex;align-items:center;gap:14px;} .nav .btn{color:var(--paper-text);border-color:rgba(239,233,222,0.5);} .nav .btn:hover{background:var(--paper-text);color:var(--iron);border-color:var(--paper-text);} .nav.scrolled{ padding:12px clamp(20px,5vw,64px); background:rgba(32,26,24,0.94); backdrop-filter:blur(10px); box-shadow:0 6px 30px rgba(0,0,0,0.18); } @media (pointer:coarse){ .nav.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(32,26,24,0.97);} } .nav-toggle{ display:flex;align-items:center;gap:10px; background:none;border:none;color:var(--paper-text);cursor:pointer;padding:6px; font-family:'IBM Plex Sans',sans-serif; } .nav-toggle-icon{display:flex;flex-direction:column;gap:4px;width:22px;flex:0 0 auto;} .nav-toggle-icon i{display:block;height:1px;background:currentColor;} .nav-toggle-icon i:nth-child(1){width:100%;} .nav-toggle-icon i:nth-child(2){width:72%;} .nav-toggle-icon i:nth-child(3){width:86%;} .nav-toggle-label{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;} @media (max-width:640px){.nav-toggle-label{display:none;}} /* ---------- hero ---------- */ .hero{ height:100vh;height:100svh;min-height:600px;position:relative;overflow:hidden; display:flex;align-items:flex-end; } .hero-media{position:absolute;inset:0;z-index:0;} .hero-media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; } .hero-media::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(20,17,15,0.05) 0%, rgba(20,17,15,0.12) 32%, rgba(20,17,15,0.40) 50%, rgba(20,17,15,0.70) 68%, rgba(20,17,15,0.88) 100%); } .hero-content{position:relative;z-index:2;width:100%;padding:0 0 clamp(44px,7vh,88px);color:var(--paper-text);} .hero-content .inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px);} .hero-content .plate{margin-bottom:22px;background:rgba(20,17,15,0.6);} .hero-title{ font-size:clamp(42px,6.5vw,84px);line-height:1.1;font-weight:400; color:var(--paper-text);text-shadow:0 2px 40px rgba(20,17,15,0.5); } .hero-sub{ margin-top:22px;font-family:'IBM Plex Sans',sans-serif;font-weight:400;font-size:clamp(15px,1.5vw,19px); max-width:580px;color:rgba(239,233,222,0.94);line-height:1.6; text-shadow:0 1px 16px rgba(20,17,15,0.4); } .hero-facts{ margin-top:20px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase; color:rgba(239,233,222,0.82); } .hero-facts-short{display:none;} .hero-cta{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;} /* ---------- цифры (общий компонент .val/.lbl — паспорт квартала и локация) ---------- */ .num-item{border-top:1px solid var(--line);padding-top:20px;} .num-item .val{font-family:'IBM Plex Mono', monospace;font-weight:300;font-size:clamp(34px,4vw,64px);color:var(--accent);line-height:1.05;} .num-item .lbl{margin-top:10px;font-size:13.5px;color:var(--ink);line-height:1.5;} .on-dark .num-item{border-top-color:var(--line-dark);} .on-dark .num-item .val{color:var(--paper-text);} .on-dark .num-item .lbl{color:rgba(239,233,222,0.72);} /* ---------- паспорт квартала (3.2) ---------- */ .quarter{padding:clamp(90px,13vh,150px) 0;background:var(--cream);} .quarter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px;margin-top:44px;} .quarter-note{margin-top:44px;font-size:15px;color:var(--ink);max-width:640px;line-height:1.75;} /* ---------- башни и статусы (3.3) ---------- */ .board{background:var(--iron);padding:clamp(90px,13vh,150px) 0 clamp(60px,9vh,90px);} .board-list{margin-top:44px;border-top:1px solid var(--line-dark);} .board-row{ display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px; padding:18px 0;border-bottom:1px solid var(--line-dark); font-family:'IBM Plex Mono', monospace;font-weight:500; } .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;align-self:center;} .dot-reds{background:var(--t-reds);} .dot-platinum{background:var(--t-platinum);} .dot-green{background:var(--t-green);} .dot-gold{background:var(--t-gold);} .dot-neutral{background:var(--stone);} .board-name{color:var(--paper-text);font-size:16px;letter-spacing:0.02em;} .board-status{margin-left:auto;color:rgba(239,233,222,0.82);font-size:14.5px;letter-spacing:0.02em;} .board-note{margin-top:28px;font-size:13.5px;line-height:1.65;color:rgba(239,233,222,0.72);max-width:640px;} .board-date{margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.06em;color:rgba(239,233,222,0.55);} .towers-cards{padding:clamp(60px,9vh,90px) 0 clamp(90px,13vh,150px);background:var(--cream);} .group-label{ font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.14em;text-transform:uppercase; color:var(--stone-text);margin:0 0 24px; } .towers-cards .group-label:not(:first-child){margin-top:56px;} .tower-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;} .tower-card{display:flex;flex-direction:column;} .tower-media{position:relative;overflow:hidden;border-radius:var(--radius-card);border-top:3px solid var(--stone);box-shadow:var(--shadow);} .tower-media img{width:100%;height:100%;object-fit:cover;} .tower-reds .tower-media{border-top-color:var(--t-reds);} .tower-platinum .tower-media{border-top-color:var(--t-platinum);} .tower-green .tower-media{border-top-color:var(--t-green);} .tower-gold .tower-media{border-top-color:var(--t-gold);} .tower-media-capped{max-width:1140px;} .tower-body{margin-top:18px;} .tower-name{font-size:26px;} .badge{ display:inline-block;margin-top:10px; font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase; border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--ink); } .tower-copy{margin-top:16px;font-size:15px;line-height:1.7;color:var(--ink);} .tower-cta{margin-top:18px;} .strip{width:100%;overflow:hidden;margin-top:52px;} .strip img{width:100%;height:100%;object-fit:cover;} .strip-towers{height:56vw;} .strip-cap{margin-top:12px;} .towers-cards .strip{margin-top:0;} .towers-closing{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);max-width:640px;} .towers-closing p{font-size:16px;line-height:1.7;color:var(--ink);} .towers-closing .btn{margin-top:20px;} /* ---------- квартиры и планировки (3.4) ---------- */ .apartments{padding:clamp(90px,13vh,150px) 0;background:var(--cream);} .apt-note{margin-top:-12px;margin-bottom:36px;font-size:15px;color:var(--stone-text);line-height:1.6;max-width:640px;} .apt-list{margin:0 0 0;padding:0;} .apt-row{ display:grid;grid-template-columns:1.3fr 1.4fr 1fr;gap:18px;align-items:center; padding:20px 4px;border-top:1px solid var(--line); } .apt-list li:last-child .apt-row{border-bottom:1px solid var(--line);} .apt-type{font-family:'IBM Plex Serif',serif;font-size:20px;color:var(--ink);} .apt-area{font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--ink);} .apt-count{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.02em;color:var(--stone-text);} .apt-line{margin-top:36px;max-width:720px;font-size:15.5px;line-height:1.75;color:var(--ink);} .apt-cta{margin-top:26px;} .floorplans{margin-top:80px;padding-top:56px;border-top:1px solid var(--line);max-width:760px;} .floorplans h3{font-size:clamp(24px,3vw,32px);} .floorplans > p{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--ink);} .fp-tabs{display:flex;gap:10px;margin-top:32px;} .fp-tab{ font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase; padding:11px 22px;border:1px solid var(--line);border-radius:999px;color:var(--stone-text); background:transparent;appearance:none;cursor:pointer; } .fp-tab.is-active{background:var(--iron);border-color:var(--iron);color:var(--paper-text);} .fp-panels{margin-top:24px;} .fp-panel{padding:22px 0;border-top:1px solid var(--line);} .fp-stats{display:flex;gap:28px;flex-wrap:wrap;} .fp-stats .n{display:block;font-family:'IBM Plex Mono',monospace;font-weight:300;font-size:clamp(26px,3vw,38px);color:var(--accent);} .fp-stats .l{display:block;margin-top:6px;font-size:13px;color:var(--stone-text);} .fp-note{margin-top:14px;font-size:14px;color:var(--ink);} .floorplans > .btn{margin-top:30px;} /* карточки типов планировок — крупные цифры площадей + кнопка открытия чертежа */ .fp-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 18px;margin-top:32px;} .fp-plan-card{border-top:1px solid var(--line);padding-top:16px;} .fp-plan-area{font-family:'IBM Plex Mono',monospace;font-weight:300;font-size:clamp(20px,2.2vw,26px);color:var(--accent);line-height:1.15;} .fp-plan-type{margin-top:6px;font-size:12.5px;color:var(--stone-text);} .fp-plan-btn{margin-top:14px;width:100%;} /* ---------- оверлей чертежа планировки ---------- */ .fp-overlay{ position:fixed;inset:0;z-index:930;background:var(--iron); display:flex;flex-direction:column; opacity:0;pointer-events:none;transition:opacity .3s var(--ease); } .fp-overlay.fp-overlay--show{opacity:1;pointer-events:auto;} .fp-overlay-close{ position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px; display:flex;align-items:center;justify-content:center; background:rgba(36,30,27,0.85);border:1px solid rgba(239,233,222,0.25);border-radius:50%; color:var(--paper-text);font-size:16px;cursor:pointer;transition:background .2s; } .fp-overlay-close:hover{background:#2b2320;} .fp-overlay-scroll{ flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch; display:flex;align-items:flex-start;justify-content:flex-start; padding:70px 20px 24px; } .fp-overlay-scroll img{display:block;width:auto;max-width:none;height:auto;margin:auto;border-radius:8px;background:#fff;} .fp-overlay-note{ flex:0 0 auto;margin:0;padding:14px 20px calc(14px + env(safe-area-inset-bottom)); background:rgba(20,17,15,0.92);border-top:1px solid rgba(239,233,222,0.14); font-family:'IBM Plex Mono',monospace;font-size:11.5px;line-height:1.5;color:rgba(239,233,222,0.7); } @media (prefers-reduced-motion: reduce){ .fp-overlay{transition:none !important;} } /* ---------- отделка (3.5) ---------- */ .finish{padding:clamp(90px,13vh,150px) 0;background:var(--cream);} .finish-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} .finish-copy p{margin-top:18px;font-size:16px;line-height:1.75;color:var(--ink);} .finish-interiors{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px;} .finish-note{margin-top:20px;font-size:13px;color:var(--stone-text);line-height:1.6;max-width:640px;} /* ---------- пространства башен (3.6) ---------- */ .inside{padding:clamp(90px,13vh,150px) 0;background:var(--cream);} .inside-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;} /* ---------- ratio-хелперы ---------- */ .ratio-16-9{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-card);position:relative;box-shadow:var(--shadow);} .ratio-16-9 img{width:100%;height:100%;object-fit:cover;} .ratio-4-3{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-card);position:relative;box-shadow:var(--shadow);} .ratio-4-3 img{width:100%;height:100%;object-fit:cover;} .ratio-5-4{aspect-ratio:5/4;overflow:hidden;border-radius:var(--radius-card);position:relative;box-shadow:var(--shadow);} .ratio-5-4 img{width:100%;height:100%;object-fit:cover;} /* ---------- депо и сборная площадь (3.7) ---------- */ .depot-top{background:var(--iron);padding-bottom:clamp(70px,10vh,110px);} .strip-depot{height:52vw;margin-top:0;} .depot-top .wrap{padding-top:clamp(40px,6vh,56px);} .depot-top .section-head{max-width:720px;} .depot-bottom{background:var(--cream);padding:clamp(90px,13vh,150px) 0;} .depot-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:0;} .depot-split + .depot-split{margin-top:64px;} .depot-split p{font-size:15.5px;line-height:1.75;color:var(--ink);} /* ---------- парк и бульвары (3.8) ---------- */ .park{padding:clamp(90px,13vh,150px) 0;background:var(--cream);} .park-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} .park-split p{margin-top:18px;font-size:16px;line-height:1.75;color:var(--ink);} .park-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px;} /* ---------- гимназия и термы (3.9) ---------- */ .school{padding:clamp(90px,13vh,150px) 0;background:var(--cream);} .school-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px;} /* ---------- локация (3.10) ---------- */ .location{padding:clamp(90px,13vh,150px) 0;background:var(--cream);} .loc-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;margin-top:44px;} .loc-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 28px;} .loc-text{margin-top:36px;font-size:15.5px;line-height:1.75;color:var(--ink);} .loc-media{margin-top:0;} /* ---------- хроника квартала (3.11) ---------- */ .chronicle{padding:clamp(90px,13vh,150px) 0;background:var(--iron);} .timeline{margin-top:44px;border-top:1px solid var(--line-dark);} .tl-row{ display:grid;grid-template-columns:160px 1fr;gap:20px;align-items:baseline; padding:20px 0;border-bottom:1px solid var(--line-dark); } .tl-year{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:18px;color:var(--paper-text);} .tl-desc{font-size:15px;color:rgba(239,233,222,0.8);line-height:1.6;} .chronicle-note{margin-top:36px;max-width:640px;font-size:14.5px;line-height:1.65;color:rgba(239,233,222,0.72);} .chronicle-cta{margin-top:24px;} /* ---------- кто строит (3.12) ---------- */ .developer{padding:clamp(90px,13vh,150px) 0;background:var(--cream);} .dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;} .dev-col p{font-size:14.5px;color:var(--ink);line-height:1.75;} .dev-col p + p{margin-top:22px;padding-top:22px;border-top:1px solid var(--line);} /* ---------- вопросы и ответы (3.13) ---------- */ .faq{padding:clamp(90px,13vh,150px) 0;background:var(--cream);} .faq-list{margin-top:44px;max-width:720px;} .faq-item{border-top:1px solid var(--line);padding:6px 0;} .faq-list .faq-item:last-child{border-bottom:1px solid var(--line);} .faq-item summary{ list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative; font-family:'IBM Plex Serif',serif;font-size:19px;color:var(--ink); } .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{ content:"+";position:absolute;right:2px;top:14px;font-family:'IBM Plex Sans',sans-serif; font-size:20px;color:var(--accent);transition:transform .25s var(--ease); } .faq-item[open] summary::after{transform:rotate(135deg);} .faq-item .a{padding:0 34px 22px 0;font-size:15px;line-height:1.7;color:var(--ink);} /* ---------- финал: форма (3.14) ---------- */ .lead{position:relative;overflow:hidden;padding:clamp(90px,13vh,150px) 0;background:var(--iron);} @media (min-width:601px){ /* фон facade-light-detail держим в пропорции ~16:9 (раздел 8 постановки: слот 100vw×100svh, допуск 1.6–1.9) — иначе короткая по контенту секция даёт слишком широкий кроп и режет кадр по вертикали */ .lead{min-height:100vh;min-height:100svh;display:flex;align-items:center;} } .lead-bg{position:absolute;inset:0;z-index:0;} .lead-bg img{width:100%;height:100%;object-fit:cover;} .lead-bg::after{content:"";position:absolute;inset:0;background:rgba(20,17,15,0.55);} .lead > .wrap{position:relative;z-index:1;} .lead h2{color:var(--paper-text);} .lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;} .lead-copy p{margin-top:18px;font-size:15.5px;line-height:1.75;color:rgba(239,233,222,0.85);max-width:460px;} .lead-card{background:rgba(24,20,18,0.86);padding:clamp(30px,4vw,44px);border-radius:var(--radius-card);box-shadow:var(--shadow);} .field{margin-bottom:18px;} .field label{display:block;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(239,233,222,0.6);margin-bottom:8px;} .field input{ width:100%;background:transparent;border:none;border-bottom:1px solid rgba(239,233,222,0.32); color:var(--paper-text);font-family:'IBM Plex Sans',sans-serif;font-size:16px;padding:10px 2px;outline:none; transition:border-color .25s; } .field input:focus{border-color:var(--stone);} .field input::placeholder{color:rgba(239,233,222,0.35);} .hp{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;} .lead-submit{width:100%;margin-top:6px;} .lead-note{font-size:11.5px;color:rgba(239,233,222,0.5);margin-top:16px;line-height:1.6;} .lead-status{margin-top:16px;font-size:13.5px;padding:12px 14px;border-radius:var(--radius);display:none;} .lead-status.ok{display:block;background:rgba(94,123,82,0.18);color:#bcd3b3;border:1px solid rgba(94,123,82,0.4);} .lead-status.err{display:block;background:rgba(110,53,43,0.2);color:#e3b3a9;border:1px solid rgba(110,53,43,0.45);} /* ---------- подвал ---------- */ footer{background:#171310;color:rgba(239,233,222,0.62);padding:48px 0 26px;} .footer-line{font-size:13.5px;line-height:1.7;max-width:820px;} .footer-legal{margin-top:20px;padding-top:20px;border-top:1px solid rgba(239,233,222,0.12);font-size:11.5px;line-height:1.7;color:rgba(239,233,222,0.6);max-width:820px;} /* ================================================================== ПОЯВЛЕНИЕ БЛОКОВ ПРИ СКРОЛЛЕ (общий класс .reveal / .stagger). Блок раскрывается заранее (start:"top 99%" в main.js), страховка — видимое сразу получает .in при загрузке. Никогда не оставлять opacity:0 без страховки. ================================================================== */ .reveal{opacity:0;transform:translateY(22px);} .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease), transform .7s var(--ease);} .stagger > *{opacity:0;transform:translateY(20px);} .stagger.in > *{opacity:1;transform:none;transition:opacity .6s var(--ease), transform .6s var(--ease);} .stagger.in > *:nth-child(1){transition-delay:.02s;} .stagger.in > *:nth-child(2){transition-delay:.1s;} .stagger.in > *:nth-child(3){transition-delay:.18s;} .stagger.in > *:nth-child(4){transition-delay:.26s;} .stagger.in > *:nth-child(5){transition-delay:.34s;} .stagger.in > *:nth-child(6){transition-delay:.42s;} @media (prefers-reduced-motion: reduce){ .reveal,.stagger > *{opacity:1 !important;transform:none !important;} html{scroll-behavior:auto;} } /* ================================================================== ОГЛАВЛЕНИЕ (TOC) — боковая панель-книга, выезжает справа. Открывается кнопкой .nav-toggle. Выпадающего меню сверху нет — явное требование постановки. ================================================================== */ .toc-overlay{ position:fixed;inset:0;z-index:900;background:rgba(20,17,15,0.55); opacity:0;pointer-events:none;transition:opacity .34s var(--ease); } .toc-overlay.toc-overlay--show{opacity:1;pointer-events:auto;} .toc-panel{ position:fixed;top:0;right:0;bottom:0;z-index:910; width:320px;max-width:86vw; background:#241E1B;color:var(--paper-text); display:flex;flex-direction:column; box-shadow:-24px 0 60px rgba(0,0,0,0.35); transform:translateX(100%); transition:transform .36s var(--ease); } .toc-panel.toc-panel--show{transform:translateX(0);} @media (min-width:768px){.toc-panel{width:340px;}} .toc-progress{position:relative;height:2px;background:rgba(239,233,222,0.12);flex:0 0 auto;} .toc-progress i{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--accent);display:block;transition:width .15s linear;} .toc-head{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 16px;flex:0 0 auto;} .toc-head-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(239,233,222,0.5);} .toc-close{ width:30px;height:30px;display:flex;align-items:center;justify-content:center; background:transparent;border:none;color:rgba(239,233,222,0.6);font-size:15px;cursor:pointer;transition:color .2s; } .toc-close:hover{color:var(--paper-text);} .toc-list{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;padding:2px 0 20px;} .toc-item{ display:flex;align-items:baseline;gap:14px; padding:14px 24px;border-top:1px solid rgba(239,233,222,0.1); transition:background .2s, color .2s; } .toc-list > .toc-item:first-child{border-top:none;} .toc-num{font-family:'IBM Plex Mono',monospace;font-size:14px;color:rgba(239,233,222,0.4);flex:0 0 auto;min-width:22px;transition:color .2s;} .toc-label{font-family:'IBM Plex Sans',sans-serif;font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(239,233,222,0.82);line-height:1.4;transition:color .2s;} .toc-item:hover{background:rgba(239,233,222,0.06);} .toc-item:hover .toc-label,.toc-item:hover .toc-num{color:var(--paper-text);} .toc-item.active{background:rgba(239,233,222,0.07);} .toc-item.active .toc-num{color:var(--stone);} .toc-item.active .toc-label{color:var(--paper-text);} .toc-item--accent{margin-top:auto;} .toc-item--accent .toc-num,.toc-item--accent .toc-label{color:#8FAE86;} .toc-item--accent:hover{background:rgba(62,92,65,0.18);} .toc-item--accent:hover .toc-num,.toc-item--accent:hover .toc-label{color:var(--paper-text);} .toc-item--accent.active{background:rgba(62,92,65,0.24);} @media (prefers-reduced-motion: reduce){ .toc-panel,.toc-overlay,.toc-progress i{transition:none !important;} } html.toc-scrolling{scroll-snap-type:none;} /* ================================================================== ВИДЖЕТ ЗАЯВКИ — постоянный лид-магнит: нижний бар на мобиле, пилюля на десктопе. ================================================================== */ .lw-bar{ position:fixed;left:0;right:0;bottom:0;z-index:610; height:56px;display:none;align-items:center;justify-content:space-between;gap:14px; padding:0 16px;background:rgba(32,26,24,0.97);backdrop-filter:blur(8px); border-top:1px solid rgba(239,233,222,0.14); transform:translateY(100%);transition:transform .35s var(--ease); } @media (pointer:coarse){.lw-bar{-webkit-backdrop-filter:none;backdrop-filter:none;}} .lw-bar.lw-bar--show{transform:translateY(0);} .lw-bar-text{color:var(--paper-text);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.02em;line-height:1.3;} .lw-bar-btn{padding:11px 20px;font-size:11px;flex:0 0 auto;min-height:38px;} .lw[data-state="submitted"] .lw-bar-btn{display:none;} .lw-pill{ display:none;position:fixed;right:28px;bottom:28px;z-index:610; align-items:center;gap:10px;padding:14px 24px;min-height:56px; background:var(--iron);color:var(--paper-text);border:1px solid rgba(239,233,222,0.18); border-radius:999px;font-family:'IBM Plex Sans', sans-serif;font-size:12px;letter-spacing:0.06em; text-transform:uppercase;cursor:pointer;box-shadow:0 12px 34px rgba(0,0,0,0.28); transition:background .25s, transform .25s; } .lw-pill:hover{background:#2b2320;} .lw-pill-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto;display:block;} .lw-pill[aria-expanded="true"]{transform:scale(0.97);} .lw-overlay{ position:fixed;inset:0;z-index:615;background:rgba(20,17,15,0.55); opacity:0;pointer-events:none;transition:opacity .3s var(--ease); } .lw-overlay.lw-overlay--show{opacity:1;pointer-events:auto;} .lw-panel{position:fixed;z-index:620;background:#241E1B;color:var(--paper-text);border-radius:var(--radius-card);} .lw-handle{display:none;} .lw-close{ position:absolute;top:14px;right:14px;width:30px;height:30px; display:flex;align-items:center;justify-content:center; background:transparent;border:none;color:rgba(239,233,222,0.6);font-size:15px;cursor:pointer;transition:color .2s; } .lw-close:hover{color:var(--paper-text);} .lw-body{padding:26px 24px 24px;} .lw-title{font-family:'IBM Plex Serif', serif;font-weight:400;font-size:19px;line-height:1.35;color:var(--paper-text);padding-right:26px;} .lw-subtitle{margin-top:10px;font-size:13.5px;line-height:1.55;color:rgba(239,233,222,0.7);} .lw-panel .field{margin:18px 0 14px;} .lw-panel .field label{display:block;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(239,233,222,0.55);margin-bottom:7px;} .lw-panel .field input{ width:100%;background:transparent;border:none;border-bottom:1px solid rgba(239,233,222,0.3); color:var(--paper-text);font-family:'IBM Plex Sans',sans-serif;font-size:16px;padding:9px 2px;outline:none; transition:border-color .25s; } .lw-panel .field input:focus{border-color:var(--stone);} .lw-panel .field input::placeholder{color:rgba(239,233,222,0.35);} .lw-submit{width:100%;margin-top:6px;} .lw-status{margin:0 24px 20px;font-size:13px;padding:10px 12px;border-radius:var(--radius);display:none;} .lw-status.ok{display:block;background:rgba(94,123,82,0.18);color:#bcd3b3;border:1px solid rgba(94,123,82,0.4);} .lw-status.err{display:block;background:rgba(110,53,43,0.2);color:#e3b3a9;border:1px solid rgba(110,53,43,0.45);} .lw-note{margin:14px 0 0;font-size:11px;line-height:1.5;color:rgba(239,233,222,0.45);} .lw-success{padding:34px 24px 30px;} .lw-success p{font-family:'IBM Plex Serif', serif;font-size:17px;line-height:1.5;color:var(--paper-text);margin:0;} @media (min-width:601px){ .lw-pill{display:flex;} .lw-panel{ right:28px;bottom:92px;width:340px;max-width:calc(100vw - 40px); box-shadow:0 20px 60px rgba(0,0,0,0.35); opacity:0;transform:translateY(12px);pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); } .lw-panel.lw-panel--show{opacity:1;transform:none;pointer-events:auto;} } @media (max-width:600px){ .lw-bar{display:flex;} .lw-panel{ left:0;right:0;bottom:0;width:100%;border-radius:16px 16px 0 0; max-height:82vh;overflow-y:auto; transform:translateY(100%);transition:transform .32s var(--ease); } .lw-panel.lw-panel--show{transform:translateY(0);} .lw-handle{display:block;width:36px;height:4px;border-radius:2px;background:rgba(239,233,222,0.3);margin:12px auto 0;} } @media (prefers-reduced-motion: reduce){ .lw-bar,.lw-panel,.lw-overlay{transition:none !important;} } /* виджет заявки прячется на секции формы и в футере — состояние переключает main.js; здесь только сама возможность спрятать/показать без прыжка раскладки */ .lw-pill.is-hidden,.lw-bar.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);} .lw-pill,.lw-bar{transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);} /* ================================================================== RESPONSIVE ================================================================== */ @media (max-width:980px){ .quarter-grid{grid-template-columns:repeat(3,1fr);} .tower-card-grid,.finish-split,.finish-interiors,.inside-cards,.depot-split, .park-split,.park-cards,.school-cards,.loc-grid,.dev-grid,.lead-grid{grid-template-columns:1fr;gap:28px;} .loc-numbers{grid-template-columns:repeat(3,1fr);} } @media (max-width:820px){ /* десктопные отступы секций превращаются в экраны пустоты на телефоне */ .quarter,.towers-cards,.apartments,.finish,.inside,.depot-bottom,.park,.school, .location,.chronicle,.developer,.faq,.lead{ padding-top:clamp(48px,7vh,72px); padding-bottom:clamp(48px,7vh,72px); } .board{padding-top:clamp(48px,7vh,72px);padding-bottom:clamp(36px,5vh,52px);} .depot-top{padding-bottom:clamp(36px,5vh,52px);} .depot-top .wrap{padding-top:clamp(28px,4vh,44px);} .section-head{margin-bottom:clamp(28px,4vh,40px);} .quarter-grid,.tower-card-grid,.finish-split,.finish-interiors,.inside-cards, .depot-split,.park-split,.park-cards,.school-cards,.dev-grid,.lead-grid{gap:22px;} .apt-row{grid-template-columns:1fr;gap:6px;text-align:left;} .apt-area{font-size:20px;} .tl-row{grid-template-columns:1fr;gap:4px;} .towers-cards .group-label:not(:first-child){margin-top:40px;} } @media (max-width:760px){ .hero-media img{object-position:center 68%;} } @media (max-width:600px){ .hero-cta{flex-direction:column;align-items:stretch;} .hero-facts-full{display:none;} .hero-facts-short{display:block;} .quarter-grid{grid-template-columns:1fr 1fr;gap:26px;} .loc-numbers{grid-template-columns:1fr 1fr;} /* полосы во всю ширину — правила из раздела 8 постановки */ .strip-towers{height:220px;} .strip-depot{height:auto;} .strip-depot img{height:auto;object-fit:initial;} /* карточки — вертикальный столбик, кадр сверху, факты списком */ .ratio-16-9,.ratio-4-3,.ratio-5-4{max-height:62vh;} /* лента интерьеров отделки — нативный свайп */ .finish-interiors{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;} .finish-interiors .ratio-16-9{flex:0 0 82vw;scroll-snap-align:center;max-height:none;} /* лента карточек парка — нативный свайп */ .park-cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;} .park-cards .ratio-16-9{flex:0 0 82vw;scroll-snap-align:center;max-height:none;} /* финальная секция: кадр родной пропорции сверху, форма ниже на тёмном фоне */ .lead-bg{position:relative;inset:auto;aspect-ratio:1.77;} .lead > .wrap{padding-top:28px;} .fp-tabs{gap:8px;} .fp-tab{padding:10px 18px;font-size:12px;} } @media (max-width:390px){ .quarter-grid,.loc-numbers{grid-template-columns:1fr 1fr;} }