/* ============================================================ TOKENS — primitive → semantic Light warm-minimal editorial luxury ============================================================ */ :root{ /* -- primitive: warm neutrals -- */ --bone-0:#FDFBF6; /* paper / lightest surface */ --bone-1:#F6F1E8; /* canvas / page background */ --bone-2:#EFE7D9; /* alternate section */ --bone-3:#E7DCCB; /* raised / card */ --bone-line:#DCCFB9;/* warm hairline */ --ink-900:#1F1B15; /* near-black warm ink */ --ink-700:#3A342B; /* strong body */ --ink-500:#5E564A; /* muted / secondary */ --ink-300:#8C8272; /* декоративный: плейсхолдеры, хайрлайны — НЕ для текста (3.4:1) */ --ink-250:#6A6051; /* тихий, но читаемый: 5.49:1 на bone-1 и 4.59:1 даже на самом глубоком bone-3 */ /* -- primitive: clay accent (single earthy) -- */ --clay-700:#8E4526; /* deep accent (accent text on light) */ --clay-600:#A9522F; /* accent */ --clay-500:#BE6A45; /* accent hover / lighter */ --clay-100:#EFDDCF; /* accent wash */ --white:#FFFFFF; /* -- semantic -- */ --bg:var(--bone-1); --surface:var(--bone-0); --surface-alt:var(--bone-2); --surface-raised:var(--bone-3); --text:var(--ink-700); --text-strong:var(--ink-900); --text-muted:var(--ink-500); --text-faint:var(--ink-250); --text-decor:var(--ink-300); --line:var(--bone-line); --line-strong:rgba(31,27,21,.16); --accent:var(--clay-600); --accent-strong:var(--clay-700); --accent-hover:var(--clay-700); /* hover ТЕМНЕЕ базового: контраст растёт 5.17→6.82, а не падает */ --accent-wash:var(--clay-100); --on-accent:var(--bone-0); --focus:var(--clay-700); /* -- scale -- */ --maxw:1280px; --gutter:clamp(20px,5vw,72px); --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px; --sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px; --fs-display:clamp(3.1rem,7.2vw,6.4rem); --fs-h1:clamp(2.5rem,5.4vw,4.6rem); --fs-h2:clamp(2rem,3.8vw,3.35rem); --fs-h3:clamp(1.35rem,2.1vw,1.85rem); --fs-lede:clamp(1.06rem,1.45vw,1.32rem); --fs-body:clamp(1rem,.5vw + .9rem,1.075rem); --fs-sm:.9rem; --fs-xs:.78rem; --r-xs:2px;--r-sm:4px;--r-md:8px; /* тень тёплая, а не нейтральная: на кремовой бумаге серая тень уходит в грязно-голубой */ --shadow-soft:0 1px 2px rgba(90,62,38,.06),0 22px 48px -30px rgba(90,62,38,.30); --shadow-card:0 1px 1px rgba(90,62,38,.05),0 3px 8px -3px rgba(90,62,38,.09), 0 32px 62px -36px rgba(90,62,38,.34); --ease:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.4,0,.2,1); --dur:.55s; /* длинные: reveal, затвердевание навбара */ --dur-hover:.18s; /* отклик на курсор: 550 мс ощущались киселём */ --dur-press:.12s; /* нажатие должно отвечать мгновенно */ --z-nav:100;--z-menu:200;--z-toast:300; --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* текст поверх заведомо тёмного (стекло на фото, чернильные панели) — одинаков в обеих темах */ --on-dark:#FDFBF6;--on-dark-muted:rgba(253,251,246,.72);--ink-fixed:#1F1B15; color-scheme:light; } /* -- Тёмный режим «Чернила и золото» (решение 56, владелец 13.09.2026): те же семантические токены, бумага становится чернилами, терракота — золотом. Включается системной настройкой, переключатель в подвале (data-theme на ) имеет приоритет. Слои со стеклом/бликами остаются, фото — как есть. -- */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bone-0:#1E1A16;--bone-1:#141210;--bone-2:#191613;--bone-3:#262119;--bone-line:rgba(253,251,246,.12); --ink-900:#F6F1E8;--ink-700:#E8E1D5;--ink-500:#B8AE9E;--ink-300:#7A7062;--ink-250:#A69C8C; --clay-700:#D6BB8C;--clay-600:#C9A55E;--clay-500:#E0C88A;--clay-100:rgba(201,165,94,.16);--white:#1E1A16; --bg:var(--bone-1);--surface:var(--bone-0);--surface-alt:var(--bone-2);--surface-raised:var(--bone-3); --text:var(--ink-700);--text-strong:var(--ink-900);--text-muted:var(--ink-500);--text-faint:var(--ink-250);--text-decor:var(--ink-300); --line:var(--bone-line);--line-strong:rgba(253,251,246,.22); --accent:var(--clay-600);--accent-strong:var(--clay-700);--accent-hover:var(--clay-500);--accent-wash:var(--clay-100); --on-accent:#141210;--focus:var(--clay-700); --shadow-soft:0 1px 2px rgba(0,0,0,.3),0 22px 48px -30px rgba(0,0,0,.7); --shadow-card:0 1px 1px rgba(0,0,0,.3),0 3px 8px -3px rgba(0,0,0,.5); color-scheme:dark; } } :root[data-theme="dark"]{ --bone-0:#1E1A16;--bone-1:#141210;--bone-2:#191613;--bone-3:#262119;--bone-line:rgba(253,251,246,.12); --ink-900:#F6F1E8;--ink-700:#E8E1D5;--ink-500:#B8AE9E;--ink-300:#7A7062;--ink-250:#A69C8C; --clay-700:#D6BB8C;--clay-600:#C9A55E;--clay-500:#E0C88A;--clay-100:rgba(201,165,94,.16);--white:#1E1A16; --bg:var(--bone-1);--surface:var(--bone-0);--surface-alt:var(--bone-2);--surface-raised:var(--bone-3); --text:var(--ink-700);--text-strong:var(--ink-900);--text-muted:var(--ink-500);--text-faint:var(--ink-250);--text-decor:var(--ink-300); --line:var(--bone-line);--line-strong:rgba(253,251,246,.22); --accent:var(--clay-600);--accent-strong:var(--clay-700);--accent-hover:var(--clay-500);--accent-wash:var(--clay-100); --on-accent:#141210;--focus:var(--clay-700); --shadow-soft:0 1px 2px rgba(0,0,0,.3),0 22px 48px -30px rgba(0,0,0,.7); --shadow-card:0 1px 1px rgba(0,0,0,.3),0 3px 8px -3px rgba(0,0,0,.5); color-scheme:dark; } /* светлые кромки «бумаги» в темноте гаснут */ :root[data-theme="dark"] .foot-emboss svg:nth-child(3),:root[data-theme="dark"] .foot-emboss{--fe-hi:rgba(255,255,255,.08)} :root[data-theme="dark"] .foot-emboss svg:nth-child(3){fill:rgba(255,255,255,.08)} :root[data-theme="dark"] .foot-emboss,:root[data-theme="dark"] .foot-emboss .fe-ring{box-shadow:inset 0 1px 2px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.07)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .foot-emboss svg:nth-child(3){fill:rgba(255,255,255,.08)} :root:not([data-theme="light"]) .foot-emboss,:root:not([data-theme="light"]) .foot-emboss .fe-ring{box-shadow:inset 0 1px 2px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.07)} } /* ============================================================ RESET / BASE */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--sans);font-size:var(--fs-body);line-height:1.68;font-weight:400; letter-spacing:.002em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;color:var(--text-strong); letter-spacing:-.006em;line-height:1.05;text-wrap:balance; font-optical-sizing:auto;font-feature-settings:"liga" 1,"clig" 1,"calt" 1} /* Оптическая лестница: крупное — легче и плотнее, мелкое — тяжелее и свободнее. Одна межстрочная 1.05 на все кегли слепляла двухстрочные h3. */ .section-head h2,.approach-lead h2,.access-copy h2,.about-copy h2,.contact-copy h2{ font-weight:400;line-height:1.06;letter-spacing:-.014em} .svc h3,.partners-title,.form-done h3{font-weight:500;line-height:1.16;letter-spacing:-.003em} .step h3{font-weight:500;line-height:1.22;letter-spacing:0} p{margin:0;text-wrap:pretty} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} ul{margin:0;padding:0;list-style:none} /* браузерный дефолт figure — margin:1em 40px — незаметно съедал по 80px ширины у .hero-figure и обеих карточек «Доступа»; сбрасываем в общем блоке, а не точечно */ figure{margin:0} ::selection{background:var(--accent-wash);color:var(--ink-900)} /* viewport-fit=cover объявлен в meta — компенсируем вырез и home-indicator, иначе в альбомной ориентации контент уезжает под «чёлку» */ .wrap{max-width:var(--maxw);margin-inline:auto; padding-left:calc(var(--gutter) + env(safe-area-inset-left,0px)); padding-right:calc(var(--gutter) + env(safe-area-inset-right,0px))} .pad{padding-block:clamp(72px,10vw,148px)} .on-alt{background:var(--surface-alt);border-block:1px solid var(--line)} /* самый глубокий bone: bone-1 и bone-2 различаются лишь на ~3% светлоты, поэтому чередование секций без этого шага визуально не читается */ .on-deep{background:var(--surface-raised);border-block:1px solid var(--line)} /* Бумажное зерно: bone-палитра просит лист, а не заливку. ~400 байт, без зависимостей. */ body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.038; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")} .serif{font-family:var(--serif)} /* focus visibility (accessibility) */ :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-xs)} .btn:focus-visible,.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline-offset:2px} /* ============================================================ TYPO HELPERS */ .eyebrow{display:inline-flex;align-items:center;gap:.7em;font-family:var(--sans); font-size:var(--fs-xs);font-weight:600;letter-spacing:.26em;text-transform:uppercase; color:var(--accent-strong)} .eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.7} .eyebrow.center::before{display:none} .lede{font-size:var(--fs-lede);line-height:1.55;color:var(--text);max-width:52ch} .muted{color:var(--text-muted)} .section-head{max-width:60ch} .section-head h2{font-size:var(--fs-h2);margin-top:var(--sp-5)} .section-head p{margin-top:var(--sp-5);color:var(--text-muted);max-width:48ch} /* ============================================================ BUTTONS / LINKS */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em; font-family:var(--sans);font-weight:600;font-size:.92rem;letter-spacing:.01em;white-space:nowrap; padding:15px 28px;border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent; background:none;color:inherit; transition:background var(--dur-hover) var(--ease-soft),color var(--dur-hover) var(--ease-soft), border-color var(--dur-hover) var(--ease-soft),box-shadow var(--dur-hover) var(--ease-soft), transform var(--dur-press) cubic-bezier(.23,1,.32,1)} /* стрелка в собственном круге у главной кнопки + магнит (сдвиг к курсору пишет скрипт в --tx/--ty) */ .btn-arrow{gap:12px;padding-right:12px} .btn-arrow::after{content:"→";display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%; background:rgba(253,251,246,.16);font-size:.95rem;line-height:1; transition:transform var(--dur-hover) var(--ease-soft),background var(--dur-hover) var(--ease-soft)} .btn-arrow:hover::after{transform:translate(2px,-1px) scale(1.06);background:rgba(253,251,246,.26)} .btn-line.btn-arrow::after{background:rgba(31,27,21,.06)} .btn-line.btn-arrow:hover::after{background:rgba(253,251,246,.16)} .btn-arrow:active{transform:scale(.975)} .nav .btn-arrow{padding:12px 12px 12px 20px} @media (max-width:640px){.nav .btn-arrow{padding:12px 16px;gap:0}.nav .btn-arrow::after{display:none}} @media (prefers-reduced-motion:reduce){.btn-arrow,.btn-arrow::after{transition:none}.btn-arrow:hover::after{transform:none}} .btn .ar{transition:transform .26s var(--ease)} .btn:hover .ar{transform:translateX(4px)} .btn:active{transform:scale(.975)} .btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none} /* «отправляем» — занят, а не выключен: полная непрозрачность и курсор ожидания */ .btn[aria-busy="true"][disabled]{opacity:1;cursor:progress;pointer-events:none} .btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 14px 30px -16px rgba(142,69,38,.6)} .btn-line{background:transparent;color:var(--text-strong);border-color:var(--line-strong)} .btn-line:hover{background:var(--ink-900);color:var(--bone-0);border-color:var(--ink-900)} .btn-ghost{background:transparent;color:var(--text-strong);border-color:transparent;padding-inline:6px} .btn-ghost:hover{color:var(--accent-strong)} .ulink{position:relative;font-weight:600;font-size:.92rem;letter-spacing:.01em;padding-bottom:2px; color:var(--text-strong)} .ulink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor; transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)} .ulink:hover{color:var(--accent-strong)} .ulink:hover::after{transform:scaleX(1);transform-origin:left} /* ============================================================ LOGO */ .logo{display:inline-flex;align-items:center;color:var(--text-strong);transition:color .4s var(--ease)} .logo:hover{color:var(--accent-strong)} .logo .lg{height:30px;width:auto;flex:none;display:block;color:currentColor} .foot-brand .lg{height:40px} /* 5-й шаг — широкая финальная карточка: 4 в ряд + итог во всю ширину, иначе при 5 колонках текст сжимается до ~150px и рвётся на три слова */ .step:nth-child(5){grid-column:1/-1;min-height:auto;flex-direction:row;flex-wrap:wrap; align-items:baseline;gap:var(--sp-5) clamp(20px,3vw,44px)} .step:nth-child(5) h3{flex:none} .step:nth-child(5) p{flex:1 1 340px;max-width:64ch} .step:nth-child(5) .tl{margin-left:auto} /* ============================================================ NAV */ /* skip-link: виден только с клавиатуры, иначе не мешает */ .skip{position:fixed;top:10px;left:10px;z-index:calc(var(--z-nav) + 1); transform:translateY(-160%);transition:transform .2s var(--ease); background:var(--ink-900);color:var(--bone-0);padding:12px 18px;border-radius:var(--r-sm); font-family:var(--sans);font-size:var(--fs-sm);font-weight:600} .skip:focus-visible{transform:translateY(0)} main:focus{outline:none} /* ============================================================ МОБИЛЬНЫЙ ПАРИТЕТ АНИМАЦИИ На телефоне мыши нет, поэтому восемь hover-состояний были невидимы вообще. На грубом указателе те же состояния наступают по появлению элемента в кадре (.seen). */ @media (hover:none),(pointer:coarse){ /* лента — одно целое: темнеет вся (иначе копии набора светлее настоящих логотипов и мигают по кругу) */ .mq-track.seen .mq-item img{opacity:.72;filter:grayscale(1) sepia(.12) brightness(.56)} .svc.seen::before{opacity:1} .svc.seen{background:var(--white)} .figure.seen img{transform:scale(1.04)} .step.seen{background:var(--white)} .step.seen .n{color:var(--accent-strong);opacity:1} .dist-row.on{background:var(--surface)} } @media (prefers-reduced-motion:reduce){ .figure.seen img{transform:none} } /* физика нажатия: у крупных тап-целей не было никакого отклика, кроме .btn */ .svc,.mmenu a,.direct a,.foot .col a{-webkit-tap-highlight-color:transparent;touch-action:manipulation} .svc:active{transform:scale(.995)} .mmenu a:active,.direct a:active,.foot .col a:active{opacity:.62} .svc{transition:background var(--dur-hover) var(--ease-soft),transform var(--dur-press) cubic-bezier(.23,1,.32,1)} @media (prefers-reduced-motion:reduce){.svc:active{transform:none}} /* .nav / .nav-links / .nav-cta / .burger — шапка-остров живёт в assets/nav.css (раунд 5, 13.09.2026) */ /* ============================================================ REVEAL */ /* было 1s/1.1s + задержки до .32s — последний элемент доезжал через 1.4 с, пользователь уже проскроллил мимо. Теперь укладываемся в ~.62 с. */ html.js [data-reveal]{opacity:0;transform:translateY(14px);filter:blur(6px)} html.js [data-reveal].in{opacity:1;transform:none;filter:blur(0); transition:opacity .5s var(--ease-soft),transform .62s cubic-bezier(.23,1,.32,1),filter .55s var(--ease-soft)} html.js [data-reveal].d1{transition-delay:.06s} html.js [data-reveal].d2{transition-delay:.12s} html.js [data-reveal].d3{transition-delay:.18s} html.js [data-reveal].d4{transition-delay:.24s} /* кадры не едут, а проявляются шторкой — два разных жеста вместо одного на всё */ html.js .figure[data-reveal]{ opacity:1;transform:none;clip-path:inset(0 0 100% 0)} html.js .figure[data-reveal].in{ clip-path:inset(0 0 0 0);transition:clip-path .95s cubic-bezier(.32,.72,0,1)} @media (prefers-reduced-motion:reduce){ html.js .figure[data-reveal]{clip-path:none} } /* ============================================================ FOOTER */ .foot{background:var(--surface-alt);border-top:1px solid var(--line);padding-top:clamp(56px,7vw,88px)} .foot .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-8);padding-bottom:var(--sp-8);border-bottom:1px solid var(--line)} .foot .addr{font-size:var(--fs-sm);color:var(--text-faint);margin-top:var(--sp-4)} .foot .about{max-width:34ch;font-size:var(--fs-sm);line-height:1.66;color:var(--text-muted);margin-top:var(--sp-5)} .foot h3{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase; color:var(--text-faint);font-weight:600;margin-bottom:var(--sp-4)} .foot .col a,.foot .col p{display:block;color:var(--text);font-size:var(--fs-sm);margin-bottom:11px;transition:color .35s var(--ease)} .foot .col a:hover,.foot .col a[aria-current]{color:var(--accent-strong)} .foot .bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-3); padding-block:var(--sp-6);font-size:var(--fs-xs);color:var(--text-faint)} .theme-toggle{appearance:none;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px; border:1px solid var(--line);background:var(--surface);color:var(--text-muted);font:inherit;font-size:var(--fs-xs); letter-spacing:.04em;cursor:pointer;transition:border-color var(--dur-hover) var(--ease-soft),color var(--dur-hover) var(--ease-soft)} .theme-toggle svg{width:15px;height:15px} .theme-toggle:hover{border-color:var(--text-strong);color:var(--text-strong)} .theme-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* Тиснёный знак в бумаге (решение 55): три слоя одного знака — тень, блик и тело со смещением в 1px */ /* Слепой оттиск (решение 55): круглая печать, вдавленная в бумагу, — те же пропорции, что у метки на карте: контур на отступе и знак 56% диаметра; три слоя знака дают тень, блик и тело бумаги */ .foot-emboss{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%; box-shadow:inset 0 1px 2px rgba(31,27,21,.22),inset 0 -1px 0 rgba(255,255,255,.9),0 1px 0 rgba(255,255,255,.8)} .foot-emboss .fe-ring{position:absolute;inset:5px;border-radius:50%; box-shadow:inset 0 1px 1px rgba(31,27,21,.2),inset 0 -1px 0 rgba(255,255,255,.85)} .foot-emboss svg{position:absolute;left:50%;top:50%;width:22px;height:36px;margin:-18px 0 0 -11px} .foot-emboss svg:nth-child(2){fill:rgba(31,27,21,.30);transform:translate(0,1.5px)} .foot-emboss svg:nth-child(3){fill:#fff;transform:translate(0,-1.5px)} .foot-emboss svg:nth-child(4){fill:var(--surface-alt)} /* ============================================================ MOBILE MENU */ /* Полноэкранное меню (разметка build_pages.mmenu_html) — стили в assets/nav.css вместе с шапкой-островом. */ /* ============================================================ TOAST */ .toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,18px);z-index:var(--z-toast); background:var(--ink-900);color:var(--bone-0);border-radius:var(--r-sm);padding:13px 22px;font-size:var(--fs-sm); box-shadow:var(--shadow-card);opacity:0;pointer-events:none; transition:opacity .22s var(--ease-soft),transform .28s cubic-bezier(.23,1,.32,1)} .toast:not(.show){transition-duration:.14s} /* уход быстрее прихода */ .toast.show{opacity:1;transform:translate(-50%,0)} /* ============================================================ RESPONSIVE */ @media (max-width:1000px){ .nav-links,.nav-cta .ulink{display:none} .burger{display:block} .hero-grid,.approach-grid,.access-grid,.about-grid,.contact-grid{grid-template-columns:1fr} .hero-figure{aspect-ratio:16/11;order:-1;max-height:52vh} .hero .lede{max-width:56ch} .svc-grid,.steps{grid-template-columns:1fr 1fr} .foot .top{grid-template-columns:1fr 1fr} .foot .foot-brand{grid-column:1/-1} } @media (max-width:640px){ .hero-meta{grid-template-columns:1fr;gap:var(--sp-4)} .hero-meta div{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:baseline} .hero-meta div .mk{margin-bottom:0} .svc-grid,.steps{grid-template-columns:1fr} /* две колонки на узком экране давили кадры до ~90px, а подписи ломались на три строки и вылезали за карточку — на телефоне это одна колонка с нормальным горизонтальным кадром */ .access-figs{grid-template-columns:1fr;gap:var(--sp-4)} .access-figs .figure:first-child,.access-figs .figure:last-child{aspect-ratio:16/10;transform:none} .figure .cap{left:14px;bottom:14px;padding:7px 13px} .form .row2{grid-template-columns:1fr} .foot .top{grid-template-columns:1fr} .band-card{margin-top:-56px} .direct .lb{min-width:84px} .hero-actions .btn{flex:1 1 auto} /* кнопка шапки упиралась в логотип без зазора и ломалась на две строки (81px при шапке 88px) */ .nav-cta{gap:12px} .nav-cta .btn{font-size:.82rem;padding:11px 16px;margin-left:14px} /* «Агентство премиальной недвижимости» рядом с риской не влезает в строку (315px против 391px), трекинг ради этого не жмём — балансируем перенос и держим риску у первой строки, иначе при align-items:center она повисает по центру двух строк */ .eyebrow{align-items:flex-start;text-wrap:balance} .eyebrow::before{flex:none;margin-top:.62em} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} html.js [data-reveal]{opacity:1;transform:none;transition:none} .hero-figure img{animation:none;transform:none} .mmenu .mm-g > a,.mmenu .mfoot{opacity:1;transform:none} /* каскад меню выключен */ *{transition-duration:.001ms!important;animation-duration:.001ms!important; transition-delay:0s!important;animation-iteration-count:1!important} } /* ============================================================ СТРАНИЦЫ РАЗДЕЛОВ — надстройка над обвязкой главной. Только то, чего на главной нет: хлебные крошки, тело статьи, карточка фактов, вопросы-ответы, соседние разделы, форма. ============================================================ */ /* шапка страницы */ .ph{padding-top:clamp(104px,12vw,152px);padding-bottom:clamp(40px,5vw,64px)} .ph .eyebrow{margin-bottom:var(--sp-5)} .ph h1{font-size:var(--fs-h1);max-width:18ch;margin-bottom:var(--sp-5)} .ph .lede{max-width:58ch} /* хлебные крошки — путь, а не украшение: показывают, где вы в структуре сайта */ .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.55em; font-size:var(--fs-xs);color:var(--text-faint);margin-bottom:var(--sp-6)} .crumbs a{color:var(--text-faint);border-bottom:1px solid transparent; padding:10px 0 3px;margin:-10px 0 -3px; /* тач-цель 44px без сдвига строки */ transition:color var(--dur-hover) var(--ease-soft),border-color var(--dur-hover) var(--ease-soft)} .crumbs a:hover{color:var(--accent-strong);border-bottom-color:var(--accent)} .crumbs span[aria-current]{color:var(--text-muted)} .crumbs .sep{opacity:.5} /* фотография раздела */ .pfig{margin:0 0 clamp(40px,5vw,72px)} .pfig{position:relative} .pfig img{width:100%;height:clamp(260px,42vw,520px);object-fit:cover;border-radius:12px; animation:pfken 14s var(--ease-soft) both} .pfig::after{content:"";position:absolute;inset:0 0 auto 0;height:clamp(260px,42vw,520px);border-radius:12px; pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(31,27,21,.07)} @keyframes pfken{from{transform:scale(1.04)}to{transform:scale(1)}} .pfig{overflow:hidden;border-radius:12px} @media (prefers-reduced-motion:reduce){.pfig img{animation:none}} .pfig figcaption{margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--text-faint)} /* ряд фотографий района внутри текста: 2–3 кадра, у каждого короткая подпись */ .dphotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4);margin:0 0 clamp(36px,4vw,56px)} .dphotos figure{position:relative;margin:0;min-width:0} .dphotos img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--surface-raised)} .dphotos figure:nth-child(3):last-child{grid-column:1/-1} .dphotos figure:nth-child(3):last-child img{aspect-ratio:2/1} .dphotos figure:nth-child(3):last-child::before{aspect-ratio:2/1} .dphotos figcaption{margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--text-faint)} .dphotos figure::before{content:"";position:absolute;inset:0 0 auto;aspect-ratio:4/3;border-radius:12px;pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(31,27,21,.07)} @media (max-width:640px){.dphotos{grid-template-columns:1fr 1fr;gap:var(--sp-3)}} /* тело: текст слева, карточка фактов справа и липкая на десктопе */ .pbody{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(40px,6vw,88px); align-items:start} .prose h2{font-size:var(--fs-h3);margin:0 0 var(--sp-4)} .prose section{margin-bottom:clamp(36px,4.5vw,56px)} .prose section:last-child{margin-bottom:0} .prose p{max-width:62ch;color:var(--text);margin-bottom:var(--sp-4)} .prose p:last-child{margin-bottom:0} .facts{position:sticky;top:104px;background:var(--bone-0);border:1px solid var(--line); border-radius:12px;padding:var(--sp-6); box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(90,62,38,.05),0 6px 8px -6px rgba(90,62,38,.12)} .facts h2{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.18em; text-transform:uppercase;color:var(--text-faint);font-weight:600;margin:0 0 var(--sp-5)} .facts dl{margin:0;display:flex;flex-direction:column;gap:var(--sp-4)} .facts dt{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase; color:var(--text-faint);margin-bottom:4px} .facts dd{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--text)} .facts .fv{display:inline-flex;align-items:center;min-height:32px;color:var(--accent-strong); border-bottom:1px solid var(--accent-wash); transition:border-color var(--dur-hover) var(--ease-soft)} .facts .fv:hover{border-bottom-color:var(--accent)} .facts .cta{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line)} .facts .cta .btn{width:100%} .facts .tel{display:flex;align-items:center;justify-content:center;min-height:44px; margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--text-muted)} .facts .tel:hover{color:var(--accent-strong)} /* вопросы-ответы: раскрывающиеся, чтобы страница не превращалась в стену текста */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:var(--sp-5) 44px var(--sp-5) 0; position:relative;font-weight:500;color:var(--text-strong); transition:color var(--dur-hover) var(--ease-soft)} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--accent-strong)} .faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px; margin-top:-7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor; transform:rotate(45deg);transition:transform var(--dur-hover) var(--ease-soft);opacity:.55} .faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px} .faq details p{max-width:64ch;padding:0 44px var(--sp-5) 0;color:var(--text-muted)} /* соседние разделы — внутренние ссылки, без них страницы остаются сиротами */ .rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px; background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} .rel a{background:var(--surface);padding:var(--sp-5) var(--sp-5) var(--sp-6); display:flex;flex-direction:column;gap:6px; transition:background var(--dur-hover) var(--ease-soft)} .rel a:hover{background:var(--surface-alt)} .rel .k{font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)} .rel .t{font-family:var(--serif);font-size:1.25rem;color:var(--text-strong);line-height:1.2} .rel a:hover .t{color:var(--accent-strong)} /* карточки районов на хабе */ .dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--sp-5)} .dcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); overflow:hidden;display:flex;flex-direction:column; transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)} .dcard:hover{box-shadow:var(--shadow-card);transform:translateY(-3px)} @media (prefers-reduced-motion:reduce){.dcard:hover{transform:none}} .dcard img{width:100%;height:200px;object-fit:cover} .dcard .dc{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);flex:1} .dcard h3{font-size:1.4rem} .dcard p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6} .dcard .go{margin-top:auto;font-size:var(--fs-sm);font-weight:600;color:var(--accent-strong)} /* Районов семь — в сетке по три последний оставался в ряду один. Отдаём ему всю ширину и разворачиваем горизонтально: ряды заполнены, а карточка читается как намеренный акцент, а не как остаток. */ @media (min-width:721px){ .dcard:last-child{grid-column:1/-1;flex-direction:row;align-items:stretch} .dcard:last-child img{width:42%;height:auto;min-height:220px;flex:none} .dcard:last-child .dc{justify-content:center;padding:var(--sp-6) var(--sp-7)} .dcard:last-child p{max-width:62ch} } /* .btn-arrow (стрелка в круге + магнит) — в блоке BUTTONS главной, общий для всех страниц */ [data-count]{font-variant-numeric:tabular-nums lining-nums} /* компактная форма заявки на подстраницах */ .pform{background:var(--surface-alt);border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ── «Обсудить задачу» открывает форму окном ── Секция остаётся в потоке страницы (без JS форма просто внизу и работает), а по кнопке та же секция становится окном: одна форма, один обработчик, никакого второго кода. Окно — десктопное, двухпанельное: слева контекст (фото проекта, факты, что дальше), справа форма. Вход — подложка проявляется, панель поднимается из лёгкого размытия. */ .zf-modal{position:fixed;inset:0;z-index:120;overflow:auto;overscroll-behavior:contain; background:rgba(20,16,12,.58);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1); border:0;display:flex;align-items:flex-start;justify-content:center;padding:clamp(12px,3vh,40px) 16px; animation:zfin .28s var(--ease-soft) both} .zf-modal.zf-out{animation:zfout .22s var(--ease-soft) both;pointer-events:none} @keyframes zfin{from{opacity:0}to{opacity:1}} @keyframes zfout{from{opacity:1}to{opacity:0}} .pform.zf-modal .pf{position:relative;background:var(--bone-0);border:0;border-radius:16px;overflow:hidden; box-shadow:0 40px 90px -40px rgba(20,16,12,.7),inset 0 1px 0 rgba(255,255,255,.7); padding:0;max-width:980px;width:100%;margin:auto; grid-template-columns:minmax(280px,.42fr) minmax(0,1fr);gap:0;align-items:stretch; animation:zfpanel .46s var(--ease) both} .pform.zf-modal.zf-out .pf{animation:zfpanel-out .22s var(--ease-soft) both} @keyframes zfpanel{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(8px)} to{opacity:1;transform:none;filter:blur(0)}} @keyframes zfpanel-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px) scale(.99)}} /* панель контекста: в потоке — левая колонка, в окне — тёмная фотопанель */ .zf-ctx{position:relative;display:flex;flex-direction:column;min-width:0} .zf-photo{display:none} .zf-ctxb{display:flex;flex-direction:column;gap:var(--sp-4)} .pform .zf-ctx h2{margin:0} .zf-facts{display:grid;gap:0;margin:var(--sp-2) 0 0;border-top:1px solid var(--line)} .zf-facts div{display:flex;flex-direction:column;gap:2px;padding:9px 0;border-bottom:1px solid var(--line)} .zf-facts dt{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)} .zf-facts dd{margin:0;color:var(--text-strong);font-weight:500;font-size:1.02rem;line-height:1.3; font-variant-numeric:tabular-nums lining-nums} .zf-next{margin:0;padding:0;list-style:none;counter-reset:zf;display:grid;gap:8px;max-width:38ch} .zf-next li{position:relative;padding-left:26px;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5; counter-increment:zf} .zf-next li::before{content:counter(zf);position:absolute;left:0;top:.15em;width:17px;height:17px; border:1px solid var(--line-strong);border-radius:50%;font-size:.66rem;line-height:15px;text-align:center; color:var(--text-faint);font-variant-numeric:lining-nums} .zf-tel{margin:0;font-size:var(--fs-sm);color:var(--text-muted)} .zf-tel a{color:var(--text-strong);text-decoration:none;border-bottom:1px solid var(--line-strong); transition:border-color var(--dur-hover) var(--ease-soft),color var(--dur-hover) var(--ease-soft)} .zf-tel a:hover{color:var(--accent-strong);border-color:currentColor} .zf-modal .zf-ctx{--zf-bg:#1F1B15;--zf-fg:#FDFBF6; /* панель тёмная в обеих темах — свои токены, не семантические */ background:var(--zf-bg);color:var(--zf-fg);justify-content:flex-end; padding:clamp(24px,3vw,36px);min-height:100%} .zf-modal .zf-photo{display:block;position:absolute;inset:0;overflow:hidden} .zf-modal .zf-photo img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92; transform:scale(1.04);animation:zfken 14s var(--ease-soft) both} @keyframes zfken{from{transform:scale(1.04)}to{transform:scale(1.0)}} .zf-modal .zf-photo::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,16,12,.12) 0%,rgba(20,16,12,.34) 30%,rgba(20,16,12,.84) 56%,rgba(20,16,12,.95) 100%)} .zf-modal .zf-ctxb{position:relative;z-index:1} .zf-mark{display:none} .zf-modal .zf-ctx:not(.has-photo) .zf-mark{display:block;position:absolute;top:32px;left:clamp(24px,3vw,36px); height:40px;width:auto;color:#A8884E} .zf-modal .zf-ctx h2,.zf-modal .zf-ctx .note{color:var(--zf-fg)} .zf-modal .zf-ctx.has-photo .note{display:none} /* над фото суть говорят чип, факты и шаги — абзац освобождает кадр */ .zf-modal .zf-ctx .note{color:rgba(253,251,246,.78);max-width:36ch} .zf-modal .zf-src{border-color:rgba(253,251,246,.28);color:rgba(253,251,246,.78);background:rgba(20,16,12,.32); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .zf-modal .zf-src b{color:var(--zf-fg)} .zf-modal .zf-facts{border-color:rgba(253,251,246,.18)} .zf-modal .zf-facts div{border-color:rgba(253,251,246,.18)} .zf-modal .zf-facts dt{color:rgba(253,251,246,.62)} .zf-modal .zf-facts dd{color:var(--zf-fg)} .zf-modal .zf-next li{color:rgba(253,251,246,.8)} .zf-modal .zf-next li::before{border-color:rgba(253,251,246,.35);color:rgba(253,251,246,.7)} .zf-modal .zf-tel{color:rgba(253,251,246,.7)} .zf-modal .zf-tel a{color:var(--zf-fg);border-color:rgba(253,251,246,.35)} .zf-modal .zf-tel a:hover{color:var(--zf-fg);border-color:var(--zf-fg)} .zf-modal .zf-col{padding:clamp(24px,3.2vw,40px) clamp(22px,3.2vw,44px) clamp(22px,3vw,36px)} .zf-close{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;display:none; align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%; background:var(--surface);color:var(--text);font-size:18px;line-height:1;cursor:pointer; transition:transform var(--dur-hover) var(--ease-soft),border-color var(--dur-hover) var(--ease-soft), color var(--dur-hover) var(--ease-soft)} .zf-modal .zf-close{display:flex} .zf-close:hover{border-color:var(--text-strong);color:var(--text-strong);transform:rotate(90deg)} .zf-close:active{transform:rotate(90deg) scale(.94)} .zf-close:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* телефон: «призрачный» шаблон разделителей под вводом */ .zf-telw{position:relative} .pform .zf-telw input{position:relative;background:transparent;z-index:1;letter-spacing:0; font-variant-numeric:tabular-nums lining-nums} /* цифры той же ширины, что у шаблона под полем */ .pform .zf-telw:has(input[aria-invalid="true"]) ~ .err{display:block} .zf-telw:focus-within{border-radius:var(--r-sm)} .zf-ghost{position:absolute;inset:0;display:flex;align-items:center;padding:14px 16px; font:inherit;font-size:1rem;color:var(--text-decor);pointer-events:none;white-space:pre; letter-spacing:0;background:var(--surface);border:1px solid transparent;border-radius:var(--r-sm); font-variant-numeric:tabular-nums lining-nums;overflow:hidden} .zf-ghost[hidden]{display:none} .zf-ghost i{font-style:normal;visibility:hidden} .zf-telw input:focus + .zf-ghost{color:var(--ink-300)} /* кнопка отправки — .btn-arrow главной (стрелка в круге, магнит, нажатие) */ @media (max-width:820px){ .zf-modal{align-items:flex-start;padding:0} .pform.zf-modal .pf{grid-template-columns:1fr;border-radius:0;min-height:100%;max-width:none} .zf-modal .zf-ctx{padding:clamp(18px,4vw,28px) 20px 18px;justify-content:flex-start;min-height:0} .zf-modal .zf-photo::after{background:linear-gradient(180deg,rgba(20,16,12,.55) 0%,rgba(20,16,12,.9) 100%)} .zf-modal .zf-ctx .note,.zf-modal .zf-facts,.zf-modal .zf-next{display:none} .zf-modal .zf-ctx h2{font-size:1.5rem;padding-right:44px} .zf-modal .zf-col{padding:20px 20px 28px} } @media (prefers-reduced-motion:reduce){ .zf-modal,.pform.zf-modal .pf,.zf-modal .zf-photo img{animation:none} .zf-close:hover,.zf-close:active{transform:none} } .zf-src{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-size:var(--fs-sm); color:var(--text-muted);border:1px solid var(--line);border-radius:999px;padding:5px 13px; margin-bottom:var(--sp-3)} .zf-src b{font-weight:500;color:var(--text-strong)} .zf-goal{border:0;padding:0;margin:0} .zf-goal legend{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase; color:var(--text-faint);padding:0;margin-bottom:8px} .zf-chips{display:flex;flex-wrap:wrap;gap:8px} /* Специфичность нарочно выше .pform label: иначе чипы задачи печатались КАПСОМ с разрядкой и кеглем подписи (каскад побеждал по порядку правил). */ .pform .zf-chips label{display:inline-flex;margin:0;text-transform:none;letter-spacing:0;font-size:inherit} .zf-chips input{position:absolute;opacity:0;width:0;height:0} .zf-chips span{display:inline-block;border:1px solid var(--line);border-radius:999px; padding:8px 15px;font-size:var(--fs-sm);cursor:pointer;color:var(--text); transition:border-color var(--dur-hover,.2s) ease,background var(--dur-hover,.2s) ease, box-shadow var(--dur-hover,.2s) ease,transform var(--dur-press,.12s) var(--ease)} .zf-chips input:checked + span{background:var(--text-strong);border-color:var(--text-strong); color:var(--bg)} .zf-chips input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px} .pform .opt{text-transform:none;letter-spacing:0;color:var(--text-faint);font-size:.92em} /* Бюджет ступенями — тот же разговор, что на главной: пресет как вход, своя сумма рядом. */ /* Бургер (группы, две колонки, каскад по --i) живёт в базовом CSS главной (блок MOBILE MENU index.html) — один компонент на все поверхности, сюда ничего не дублируем. */ /* Ритм длинных разделов: ведущий абзац крупнее, мера строки — комфортные ~62 знака, между разделами — воздух и волосяная линия. Стена превращается в читаемый текст. */ .pblock + .pblock{margin-top:clamp(30px,4.4vw,54px);padding-top:clamp(26px,3.6vw,44px); border-top:1px solid var(--line)} .pblock h2{margin-bottom:var(--sp-4)} .pblock p{max-width:62ch;line-height:1.62} .pblock p + p{margin-top:var(--sp-4)} .pblock .plead{font-size:clamp(1.02rem,1.5vw,1.14rem);color:var(--text-strong);line-height:1.55} .zf-bud{border:0;padding:0;margin:0} .zf-bud legend{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase; color:var(--text-faint);padding:0;margin-bottom:8px} .zf-step{font:inherit;font-size:var(--fs-sm);color:var(--text);background:var(--surface); border:1px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer; transition:border-color var(--dur-hover,.2s) ease,background var(--dur-hover,.2s) ease, transform var(--dur-press,.12s) var(--ease)} .zf-step:hover{border-color:var(--accent)} .zf-step.on{background:var(--text-strong);border-color:var(--text-strong);color:var(--bg)} .zf-step:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .zf-own-b{border-style:dashed} .zf-own{margin-top:12px} .zf-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .zf-val{flex:1 1 130px;min-width:0;font:inherit;color:var(--text);background:var(--surface); border:1px solid var(--line);border-radius:12px;padding:11px 14px; font-variant-numeric:tabular-nums lining-nums} .zf-val:focus-visible{outline:2px solid var(--focus);outline-offset:1px} .zf-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden; background:var(--surface)} .zf-segb{font:inherit;font-size:var(--fs-sm);color:var(--text-muted);background:none;border:0; padding:9px 13px;cursor:pointer} .zf-segb.on{background:var(--text-strong);color:var(--bg)} .zf-segb:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .zf-echo{margin:8px 0 0;font-size:var(--fs-sm);color:var(--text-muted); font-variant-numeric:tabular-nums lining-nums;min-height:1.2em} .pform textarea{width:100%;font:inherit;color:var(--text);background:var(--surface); border:1px solid var(--line);border-radius:12px;padding:12px 14px;resize:vertical} .pform textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px} .pform .pf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start} .zf-col,.zf-ctx{min-width:0} /* длинное слово в пузыре не раздвигает колонку (minmax(0,…) + min-width:0) */ .pform h2{font-size:var(--fs-h3);margin-bottom:var(--sp-4)} .pform .note{color:var(--text-muted);max-width:44ch;font-size:var(--fs-sm)} .pform form{display:flex;flex-direction:column;gap:var(--sp-4)} .pform label{display:block;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase; color:var(--text-faint);margin-bottom:8px} .pform input{width:100%;font:inherit;font-size:1rem;color:var(--text-strong); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm); padding:14px 16px;transition:border-color var(--dur-hover) var(--ease-soft), box-shadow var(--dur-hover) var(--ease-soft)} .pform input:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px rgba(169,82,47,.14);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)} .pform input[aria-invalid="true"]{border-color:var(--clay-700)} .pform .err{display:none;margin-top:6px;font-size:var(--fs-xs);color:var(--clay-700)} .pform input[aria-invalid="true"] ~ .err{display:block} /* Ловушка для ботов — display:none, БЕЗ подписи «Компания»: смещённое за экран поле с подписью браузер владельца заполнил его фирмой (автозаполнение по label), и заявки молча отбрасывались (13.09.2026). */ .pform .hp{display:none!important} .pform .fine{font-size:var(--fs-xs);color:var(--text-faint);max-width:40ch} .pform .ok{display:none} .pform.done form{display:none} .pform.done .ok{display:block} .pform .ok h3{font-size:var(--fs-h3);margin-bottom:var(--sp-3)} .pform .ok p{color:var(--text-muted)} /* ── Разговор консьержа: окно «Обсудим задачу» = диалог шагами (строится JS-ом поверх анкеты) ── Вопросы агентства — тихие пузыри слева, ответы человека — чернильные справа и остаются редактируемыми; настоящие поля анкеты приезжают в «композер» шага. Без JS — прежняя анкета. */ .zc-park{display:none!important} .zc-path{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0;padding:0;list-style:none} .zc-path button{display:flex;flex-direction:column;gap:8px;width:100%;padding:0;border:0;background:none;font:inherit; font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);text-align:left;cursor:default; transition:color var(--dur-hover) var(--ease-soft)} .zc-path i{display:block;height:2px;background:var(--line);border-radius:2px;overflow:hidden;position:relative} .zc-path i::after{content:"";position:absolute;inset:0;background:var(--text-strong);transform:scaleX(0);transform-origin:left; transition:transform .5s var(--ease)} .zc-path .on button,.zc-path .done button{color:var(--text-strong)} .zc-path .on i::after,.zc-path .done i::after{transform:scaleX(1)} .zc-path button:disabled{cursor:default;opacity:1} .zc-path .done button{cursor:pointer} .zc-path .done button:hover{color:var(--accent-strong)} .zc-path .done button:hover i::after{background:var(--accent)} .zc-path button:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:2px} .zc-log{display:flex;flex-direction:column;gap:10px;min-height:120px;min-width:0} .zc-m{animation:zcin .26s cubic-bezier(.23,1,.32,1) both} @keyframes zcin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .zc-q{align-self:flex-start;max-width:min(100%,420px);overflow-wrap:anywhere;background:var(--zc-q,var(--bone-0));color:var(--text); border-radius:12px 12px 12px 3px;padding:12px 16px;font-size:1.02rem;line-height:1.45;box-shadow:0 1px 2px rgba(90,62,38,.06)} .zc-a{align-self:flex-end;width:100%;max-width:min(100%,460px);min-width:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px} .zc-opts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px} .zc-chip,.zc .zf-step{appearance:none;font:inherit;font-size:var(--fs-sm);border:1px solid var(--text-strong);background:transparent; color:var(--text-strong);border-radius:999px;padding:9px 16px;cursor:pointer; transition:background var(--dur-hover) var(--ease-soft),color var(--dur-hover) var(--ease-soft), border-color var(--dur-hover) var(--ease-soft),box-shadow var(--dur-hover) var(--ease-soft),transform var(--dur-press) var(--ease)} .zc .zf-own-b{border-style:dashed} .zc-chip[aria-pressed="true"],.zc .zf-step.on{background:var(--text-strong);border-color:var(--text-strong);color:var(--bone-0); box-shadow:inset 0 1px 3px rgba(0,0,0,.28)} .zc-chip:focus-visible,.zc .zf-step:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .zc-bub{appearance:none;font:inherit;border:0;background:var(--text-strong);color:var(--bone-0);border-radius:12px 12px 3px 12px; padding:11px 16px;font-size:1.02rem;line-height:1.45;text-align:left;cursor:pointer;max-width:100%;overflow-wrap:anywhere; transition:background var(--dur-hover) var(--ease-soft),transform var(--dur-press) var(--ease)} .zc-bub:hover{background:var(--ink-700)} .zc-bub:active{transform:scale(.985)} .zc-bub:focus-visible{outline:2px solid var(--focus);outline-offset:3px} .zc-edit{font-size:var(--fs-xs);color:var(--text-faint);opacity:0;transition:opacity var(--dur-hover) var(--ease-soft)} .zc-a:hover .zc-edit,.zc-bub:focus-visible + .zc-edit{opacity:1} @media (hover:none){.zc-edit{opacity:1}} .zc-bub{white-space:pre-line} .zc-comp{width:100%;background:var(--bone-0);border:1px solid var(--line);border-radius:12px 12px 3px 12px;padding:14px 16px 12px; display:flex;flex-direction:column;gap:12px;text-align:left} .zc-comp-bud{background:none;border:0;padding:0;align-items:flex-end;gap:10px} .zc-comp-bud .zf-bud{width:100%;display:flex;flex-direction:column;align-items:flex-end} .zc-comp-bud .zf-bud legend{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)} .zc-comp-bud .zf-chips{justify-content:flex-end} .zc-comp-bud .zf-own{width:min(100%,440px);margin-top:10px;background:var(--bone-0);border:1px solid var(--line); border-radius:12px 12px 3px 12px;padding:14px 16px 12px} .zc-comp-bud .zc-act{justify-content:flex-end} /* шаг «Объект»: тип → где (несколько + район/улица) → спальни, ряды раскрываются по мере ответов */ .zc-comp-obj{gap:14px} .zc-comp-obj .zc-opts{justify-content:flex-start} .zc-row{display:flex;flex-direction:column;gap:8px} .zc-row[hidden]{display:none} .zc-lab{display:block;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:2px} .zc-field{display:flex;flex-direction:column;gap:2px;max-width:320px;margin-top:4px} .zc-err{margin:0;font-size:var(--fs-xs);color:var(--clay-700)} .zc-err:empty{display:none} .pform .zc-comp label{margin-bottom:2px} .pform .zc-comp input,.pform .zc-comp textarea{border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:transparent; padding:8px 0;font-size:1.05rem;line-height:1.45;box-shadow:none} .pform .zc-comp input:focus,.pform .zc-comp textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 1px 0 var(--accent);background:transparent} .pform .zc-comp input[aria-invalid="true"]{border-color:var(--clay-700);box-shadow:0 1px 0 var(--clay-700)} .pform .zc-comp .zf-ghost{padding:8px 0;background:transparent;border:0;border-radius:0;font-size:1.05rem;line-height:1.45} .pform .zc-comp textarea{resize:none;min-height:0;overflow:hidden} .pform .zc-comp .err{margin-top:4px} .zc-rows{display:flex;flex-direction:column;gap:14px} .zc-rows:empty{display:none} /* комментарий в контактах — тихая ссылка, раскрывает поле без вопроса */ .zc-more{appearance:none;font:inherit;font-size:var(--fs-sm);border:0;background:none;color:var(--text-faint);padding:4px 0; cursor:pointer;align-self:flex-start;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px; transition:color var(--dur-hover) var(--ease-soft)} .zc-more:hover{color:var(--text-strong)} .zc-more:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px} .zc-more[hidden]{display:none} .zc-note{display:flex;flex-direction:column;gap:2px} .zc-note[hidden]{display:none} .zc-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:2px} .zc-go{appearance:none;font:inherit;font-size:var(--fs-sm);font-weight:600;border:1px solid var(--text-strong);background:var(--text-strong); color:var(--bone-0);border-radius:999px;padding:9px 18px;cursor:pointer; transition:background var(--dur-hover) var(--ease-soft),border-color var(--dur-hover) var(--ease-soft),transform var(--dur-press) var(--ease)} .zc-go:hover{background:var(--accent-hover);border-color:var(--accent-hover)} .zc-go:active{transform:scale(.97)} .zc-go:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .zc-skip{appearance:none;font:inherit;font-size:var(--fs-sm);border:0;background:none;color:var(--text-faint);padding:6px 2px;cursor:pointer; transition:color var(--dur-hover) var(--ease-soft)} .zc-skip:hover{color:var(--text-strong)} .zc-skip:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px} .zc-fin{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)} .zc-fin .zc-q2{margin:0;color:var(--text-muted);font-size:var(--fs-sm)} .zc-sum{margin:0;font-family:var(--serif);font-size:1.4rem;line-height:1.25;color:var(--text-strong);font-variant-numeric:tabular-nums lining-nums; overflow-wrap:anywhere} .zc-fin .zf-send{align-self:flex-start} .zc-fin .fine{margin:0} /* Тактильные чипы (у задачи и бюджета): наведённый — чернилами, соседи — мягко, выбранный — «вдавлен» */ @media (hover:hover) and (pointer:fine){ .zc-chip:hover,.zc .zf-step:hover{background:var(--text-strong);color:var(--bone-0);border-color:var(--text-strong)} .zc-chip.zc-near,.zc .zf-step.zc-near,.zf-chips label.zc-near span{background:var(--bone-2);border-color:var(--line-strong)} /* без transform: чип под курсором не должен смещаться (владелец 13.09: «кнопки скачут») */ .zf-chips label:hover span{border-color:var(--text-strong)} } .zc-chip:active,.zc .zf-step:active,.zf-chips label:active span{box-shadow:inset 0 1px 3px rgba(0,0,0,.18)} .zc-chip,.zc .zf-step{flex:0 0 auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent} .zf-chips input:checked + span{box-shadow:inset 0 1px 3px rgba(0,0,0,.28)} /* Окно: устойчивая рамка (растёт не окно, а лента внутри), правая колонка ограничена высотой экрана, лента разговора листается внутри; знак над текстом панели без фото получает свой воздух */ .zf-modal{--zc-q:var(--bone-2);--zc-q:color-mix(in srgb,var(--text-strong) 7%,var(--surface))} .pform.zf-modal .pf{height:min(640px,calc(100vh - 2*clamp(12px,3vh,40px)));height:min(640px,calc(100dvh - 2*clamp(12px,3vh,40px)))} .zf-modal .zf-ctx:not(.has-photo) .zf-ctxb{padding-top:64px} .zf-modal .zf-col{display:flex;flex-direction:column;min-height:0; max-height:calc(100vh - 2*clamp(12px,3vh,40px));max-height:calc(100dvh - 2*clamp(12px,3vh,40px))} .zf-modal .zc{flex:1;min-height:0} .zf-modal .zc .zc-log{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin; padding:4px 14px 8px 4px;margin:-4px -14px -8px -4px} .zf-modal .zc-path{padding-right:40px} @media (max-width:820px){ .pform.zf-modal .pf{height:auto;grid-template-rows:auto minmax(0,1fr)} /* свободное место — разговору, а не фотопанели */ .zf-modal .zf-col{max-height:none} .zf-modal .zc .zc-log{overflow:visible;padding:0;margin:0} .zf-modal .zc-path{padding-right:0} .zc-path{gap:6px} .zc-path button{font-size:.6rem;letter-spacing:.04em;gap:6px} .zc-path button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .zc-a{max-width:100%} .zc-q{max-width:92%} } @media (pointer:coarse){ .zc-chip,.zc .zf-step,.zc-go{min-height:44px} .zc-skip{min-height:44px;padding:6px 8px} .zc-more{min-height:40px} .zc-path button{min-height:36px;justify-content:flex-start} .cb-x{width:40px;height:40px} .cb-more{min-height:40px} } @media (prefers-reduced-motion:reduce){ .zc-m{animation:zcfade .16s ease-out both} @keyframes zcfade{from{opacity:0}to{opacity:1}} .zc-path i::after{transition:none} .zc-chip.zc-near,.zc .zf-step.zc-near,.zf-chips label.zc-near span,.zc-chip:active,.zc .zf-step:active,.zf-chips label:active span, .zc-bub:active,.zc-go:active{transform:none} } /* ── «Один тап — перезвоним»: плавающая полоса (строится JS-ом; десктоп — угол, телефон — низ) ── Стекло — только здесь, это фиксированный слой; без рамки, тень тёплая. Уход быстрее прихода. */ .cb{position:fixed;z-index:110;right:24px;bottom:24px;width:380px;max-width:calc(100vw - 48px);margin:0; display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t x" "row row" "more more" "msg msg" "ok ok"; column-gap:12px;row-gap:10px;align-items:center; background:rgba(253,251,246,.88);background:color-mix(in srgb,var(--bone-0) 88%,transparent); /* стекло от токена — переживёт тёмный режим */ -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1); border-radius:12px;padding:18px 20px 14px; box-shadow:0 1px 2px rgba(90,62,38,.08),0 24px 40px -24px rgba(90,62,38,.42),inset 0 1px 0 rgba(255,255,255,.7); box-shadow:0 1px 2px rgba(90,62,38,.08),0 24px 40px -24px rgba(90,62,38,.42),inset 0 1px 0 light-dark(rgba(255,255,255,.7),rgba(255,255,255,.08)); opacity:0;visibility:hidden;transform:translateY(14px); transition:opacity .18s var(--ease-soft),transform .18s var(--ease-soft),visibility 0s .18s} .cb.on{opacity:1;visibility:visible;transform:none; transition:opacity .32s cubic-bezier(.23,1,.32,1),transform .32s cubic-bezier(.23,1,.32,1),visibility 0s} .cb-t{grid-area:t;margin:0;font-family:var(--serif);font-size:1.32rem;font-weight:500;line-height:1.1;color:var(--text-strong)} .cb-x{grid-area:x;width:32px;height:32px;margin:-4px -8px 0 0;display:grid;place-items:center;border:0;background:none; color:var(--text-faint);font-size:15px;line-height:1;cursor:pointer;border-radius:50%; transition:color var(--dur-hover) var(--ease-soft),background var(--dur-hover) var(--ease-soft)} .cb-x:hover{color:var(--text-strong);background:rgba(31,27,21,.06);background:color-mix(in srgb,var(--text-strong) 8%,transparent)} .cb-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .cb-row{grid-area:row;display:flex;gap:8px} .cb-telw{position:relative;flex:1;min-width:0} .cb input[type=tel]{width:100%;height:46px;font:inherit;font-size:1rem;color:var(--text-strong);background:transparent;position:relative;z-index:1; border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:0 13px;letter-spacing:0;font-variant-numeric:tabular-nums lining-nums; transition:border-color var(--dur-hover) var(--ease-soft),box-shadow var(--dur-hover) var(--ease-soft)} .cb input[type=tel]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(169,82,47,.14); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)} .cb input[aria-invalid="true"]{border-color:var(--clay-700)} .cb-ghost{position:absolute;inset:0;display:flex;align-items:center;padding:0 13px;border:1px solid transparent;border-radius:var(--r-sm); background:var(--bone-0);font-size:1rem;color:var(--text-decor);white-space:pre;pointer-events:none;overflow:hidden; font-variant-numeric:tabular-nums lining-nums} .cb-ghost[hidden]{display:none} .cb-ghost i{font-style:normal;visibility:hidden} .cb input[type=tel]:focus + .cb-ghost{color:var(--ink-300)} .cb-go{flex:none;height:46px;padding:0 16px;font-size:.86rem} .cb-more{grid-area:more;justify-self:start;appearance:none;border:0;background:none;padding:4px 0;font:inherit;font-size:var(--fs-sm); font-weight:600;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:8px; transition:color var(--dur-hover) var(--ease-soft)} .cb-more::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-top:1px solid currentColor; transform:rotate(45deg);opacity:.7;transition:transform var(--dur-hover) var(--ease-soft)} .cb-more:hover{color:var(--accent-strong)} .cb-more:hover::after{transform:translateX(2px) rotate(45deg)} .cb-more:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px} .cb-msg{grid-area:msg;margin:-4px 0 0;font-size:var(--fs-xs);line-height:1.4;color:var(--text-faint)} .cb-msg:empty{display:none} .cb-msg.is-err{color:var(--clay-700)} .cb-ok{grid-area:ok;display:none;align-items:center;gap:10px;margin:0;font-size:var(--fs-sm);color:var(--text)} .cb-ok i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent-wash);color:var(--accent-strong); display:grid;place-items:center;font-size:.8rem;font-style:normal} .cb[data-state="sent"] .cb-row,.cb[data-state="sent"] .cb-more,.cb[data-state="sent"] .cb-msg{display:none} .cb[data-state="sent"] .cb-ok{display:flex} .cb .hp{display:none!important} @media (max-width:820px){ .cb{right:0;left:0;bottom:0;width:auto;max-width:none;border-radius:12px 12px 0 0; grid-template-columns:1fr auto auto;grid-template-areas:"t more x" "row row row" "msg msg msg" "ok ok ok";row-gap:8px; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));transform:translateY(100%); box-shadow:0 -1px 0 rgba(90,62,38,.08),0 -20px 40px -24px rgba(90,62,38,.35)} .cb-t{font-size:1.06rem} .cb-x{margin:0 -6px 0 0} @media (max-width:480px){.cb-t2{display:none}} .cb-more{font-size:var(--fs-xs)} .cb-go{padding:0 14px} } @media (prefers-reduced-motion:reduce){ .cb{transition:opacity .2s ease-out,visibility 0s .2s;transform:none} .cb.on{transition:opacity .2s ease-out,visibility 0s} .cb-more:hover::after{transform:rotate(45deg)} } @media (max-width:1000px){ .pbody{grid-template-columns:1fr} .facts{position:static;order:-1} .pform .pf{grid-template-columns:minmax(0,1fr)} } @media (max-width:640px){ .ph h1{max-width:none} .pfig img{height:min(60vw,340px)} .facts{padding:var(--sp-5)} }