/* ============================================================ ТеремСтрой — CINEMATIC DARK Полноэкранные кадры, near-black, scroll-snap, огромная типографика. Совершенно другой визуальный язык. Никакого бежевого. ============================================================ */ /* Шрифты самохостятся: /assets/fonts.css (woff2 в /assets/fonts/), подключается в . */ :root { --black: #0a0a0b; --black-2: #0f0f11; --near: #141417; --panel: #1a1a1e; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18); --white: #f4f2ee; --dim: #b3afa6; --dim-2: #6f6c65; --gold: #c9a86a; --gold-2: #b08d4f; --gold-dim: rgba(201,168,106,.16); --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Manrope', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --max: 1400px; --gut: clamp(22px, 5vw, 90px); } * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); background: var(--black); color: var(--white); line-height: 1.6; font-weight: 400; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--gold); color: #0a0a0b; } ::-webkit-scrollbar { width: 0; height: 0; } h1,h2,h3,h4 { font-family: var(--serif); font-weight: 300; line-height: 1.02; letter-spacing: -.01em; } .mega { font-size: clamp(2.6rem, min(8vw, 8.2vh), 7rem); font-weight: 300; } .big { font-size: clamp(2.4rem, 6vw, 5.4rem); font-weight: 300; } .med { font-size: clamp(1.8rem, 3.6vw, 3.2rem); font-weight: 300; } .ital { font-style: italic; color: var(--gold); } .kicker { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 14px; } .kicker::before { content: ""; width: 42px; height: 1px; background: var(--gold); opacity: .7; } .kicker.solo::before { display: none; } .kicker.center { justify-content: center; } .lede { font-size: clamp(1rem, 1.5vw, 1.35rem); color: var(--dim); font-weight: 300; line-height: 1.7; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); } /* ---------- КНОПКИ ---------- */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 17px 40px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--line-2); border-radius: 0; color: var(--white); background: transparent; transition: all .35s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; } .btn::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: translateY(101%); transition: transform .35s cubic-bezier(.4,0,.2,1); z-index: -1; } .btn:hover { color: #0a0a0b; border-color: var(--gold); } .btn:hover::after { transform: translateY(0); } .btn-solid { background: var(--gold); border-color: var(--gold); color: #0a0a0b; } .btn-solid::after { background: var(--white); } .btn-solid:hover { color: #0a0a0b; border-color: var(--white); } .btn-block { width: 100%; justify-content: center; } .btn-sm { padding: 13px 28px; font-size: 12px; } /* ---------- ШАПКА ---------- */ .hd { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .4s, backdrop-filter .4s, border-color .4s; border-bottom: 1px solid transparent; } .hd.solid { background: rgba(10,10,11,.72); backdrop-filter: blur(18px); border-color: var(--line); } .hd-in { max-width: 1600px; margin-inline: auto; padding: 0 clamp(22px,3.5vw,54px); height: 88px; display: flex; align-items: center; gap: 32px; } .brand { display: inline-flex; align-items: center; flex: 0 0 auto; } .brand-lockup { display: flex; align-items: center; white-space: nowrap; } .brand-sign { display: block; flex: 0 0 auto; object-fit: contain; } .brand-wordmark { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--sans); font-weight: 600; line-height: 1.05; letter-spacing: .01em; } .brand-wordmark-primary { color: var(--white); } .brand-wordmark-accent { color: var(--gold); font-weight: 700; } .brand--header .brand-lockup { height: 68px; gap: 12px; } .brand--header .brand-sign { width: 70px; height: 44px; } .brand--header .brand-wordmark { font-size: 15px; } .brand--header .brand-wordmark-accent { margin-top: 5px; } .brand--header .brand-wordmark-plus { margin-left: 1px; } .brand--footer .brand-lockup { height: 82px; gap: 14.4px; } .brand--footer .brand-sign { width: 84px; height: 52.8px; } .brand--footer .brand-wordmark { font-size: 18px; } .brand--footer .brand-wordmark-accent { margin-top: 6px; } .brand--footer .brand-wordmark-plus { margin-left: 1.2px; } .hd-nav { display: flex; gap: 30px; margin-left: auto; } .hd-nav a { font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: .04em; color: var(--dim); transition: color .25s; } .hd-nav a:hover, .hd-nav a.on { color: var(--white); } .hd-side { display: flex; align-items: center; gap: 22px; } .hd-phone { font-size: 15px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; } .burger { display: none; background: none; border: none; color: var(--white); font-size: 26px; cursor: pointer; } /* ---------- DOT-НАВИГАЦИЯ (главная) ---------- */ .dots { position: fixed; left: clamp(16px,2vw,34px); top: 50%; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; gap: 18px; } .dots a { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-2); transition: all .3s; position: relative; } .dots a.on { background: var(--gold); border-color: var(--gold); transform: scale(1.15); } .dots a::after { content: attr(data-label); position: absolute; left: 22px; top: 50%; transform: translateY(-50%); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; opacity: 0; transition: opacity .25s; pointer-events: none; } .dots a:hover::after { opacity: 1; } @media (max-width: 900px) { .dots { display: none; } } /* ============================================================ ПОЛНОЭКРАННЫЕ КАДРЫ (scroll-snap) ============================================================ */ .reel { scroll-snap-type: y proximity; } .frame { position: relative; min-height: 100svh; display: flex; align-items: center; scroll-snap-align: start; overflow: hidden; padding: clamp(96px,12vh,130px) 0 clamp(56px,8vh,80px); } .frame-bg { position: absolute; inset: 0; background: var(--img) center/cover no-repeat; z-index: 0; } .frame-bg::after { content: ""; position: absolute; inset: 0; background: var(--scrim, linear-gradient(90deg, rgba(8,8,9,.92) 0%, rgba(8,8,9,.7) 45%, rgba(8,8,9,.35) 100%)); } .frame-bg.vignette::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 240px 60px rgba(0,0,0,.7); z-index: 2; } .frame-in { position: relative; z-index: 3; width: 100%; } .frame-num { position: absolute; left: var(--gut); bottom: 46px; z-index: 4; font-family: var(--serif); font-size: 14px; letter-spacing: .3em; color: var(--dim-2); } .frame-num b { color: var(--gold); } .scroll-hint { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 4; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); display: flex; flex-direction: column; align-items: center; gap: 10px; } .scroll-hint::after { content: ""; width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); animation: sh 2s infinite; } @keyframes sh { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} } /* ГЕРОЙ */ #f1 .frame-in { max-width: 1600px; padding-right: clamp(20px,3.5vw,60px); } .hero-copy { max-width: 650px; margin-left: auto; } .hero-copy h1 { margin: clamp(14px,2.4vh,26px) 0 clamp(14px,2vh,24px); } .hero-copy .lede { max-width: 560px; margin-bottom: clamp(22px,3.4vh,40px); } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; } .hero-guarantee-slot { position: absolute; top: clamp(100px, 12vh, 120px); left: 50%; transform: translateX(-50%); width: 100%; max-width: 1600px; padding: 0 clamp(22px, 3.5vw, 54px); z-index: 5; pointer-events: auto; } .hero-guarantee { display: inline-flex; align-items: center; gap: 16px; width: fit-content; } .hero-guarantee img { width: clamp(52px, 5.2vw, 58px); height: clamp(52px, 5.2vw, 58px); object-fit: contain; flex-shrink: 0; } .hero-guarantee p { max-width: 270px; color: var(--white); font-size: clamp(12px, 1.15vw, 13.5px); font-weight: 500; line-height: 1.38; letter-spacing: .025em; text-shadow: 0 2px 8px rgba(0,0,0,.6); } .hero-meta { display: flex; gap: clamp(24px,3.4vw,42px); flex-wrap: wrap; margin-top: clamp(28px,5vh,58px); padding-top: clamp(20px,3vh,34px); border-top: 1px solid var(--line); } .hero-meta div b { font-family: var(--serif); font-size: clamp(1.7rem,2.6vh,2.4rem); font-weight: 300; color: var(--white); display: block; line-height: 1; } .hero-meta div span { font-size: 12.5px; letter-spacing: .05em; color: var(--dim); text-transform: uppercase; } @media (max-width: 900px) { #f1 .frame-in, #f4 .frame-in { padding-right: var(--gut); } .hero-copy, .figures-copy { margin-left: 0; max-width: 100%; } #f1.frame { display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(140px, 18vh, 168px); } .hero-guarantee-slot { top: clamp(88px, 11vh, 98px); } .hero-guarantee img { width: 44px; height: 44px; } .hero-guarantee p { max-width: 240px; font-size: 11.5px; line-height: 1.35; } } /* КАДР: split (текст + подпись) */ .frame-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,6vw,100px); align-items: center; } .frame-split .fs-copy h2 { margin: 20px 0 22px; } .frame-split .fs-copy p { color: var(--dim); font-weight: 300; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.75; } .fs-list { list-style: none; display: grid; gap: 16px; margin-top: 30px; } .fs-list li { display: flex; gap: 16px; align-items: baseline; font-size: 1.02rem; color: var(--white); font-weight: 300; } .fs-list li b { font-family: var(--serif); color: var(--gold); font-size: 1.2rem; font-weight: 400; min-width: 34px; } /* КАДР: цифры */ #f4 .frame-in { max-width: 1600px; padding-right: clamp(20px,3.5vw,60px); } .figures-copy { max-width: 680px; margin-left: auto; } .figures-copy .sect-head { margin-bottom: clamp(24px, 4vh, 38px); } .figures { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .figure { background: var(--black); padding: clamp(30px,5vh,64px) 30px; text-align: center; } .figure b { font-family: var(--serif); font-size: clamp(3rem,6vw,5.2rem); font-weight: 300; color: var(--white); display: block; line-height: 1; } .figure b .u { color: var(--gold); } .figure span { display: block; margin-top: 16px; font-size: 13px; letter-spacing: .06em; color: var(--dim); text-transform: uppercase; } /* ============================================================ ПРОЕКТЫ — кино-карточки ============================================================ */ .proj-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 46px; gap: 24px; flex-wrap: wrap; } .proj-reel { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .home-project-nav { display: flex; align-items: center; gap: 10px; } .home-project-arrow { width: 42px; height: 42px; border: 1px solid var(--line-2); background: rgba(10,10,11,.66); color: var(--white); display: grid; place-items: center; cursor: pointer; font-size: 18px; transition: color .2s, border-color .2s, background .2s, opacity .2s; } .home-project-arrow:hover:not(:disabled) { color: #0a0a0b; border-color: var(--gold); background: var(--gold); } .home-project-arrow:disabled { opacity: .35; cursor: default; } .home-project-count { min-width: 58px; text-align: center; color: var(--dim); font-size: 12px; letter-spacing: .08em; } #f2 .home-project-reel { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3); overflow-x: auto; overflow-y: hidden; padding: 2px 2px 12px; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } #f2 .home-project-reel .pcard { min-width: 0; scroll-snap-align: start; } @media (max-width: 1400px) { #f2 .home-project-reel { grid-auto-columns: calc((100% - 22px) / 2); } } .pcard { position: relative; overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; background: var(--black-2); transition: border-color .3s, transform .3s; } .pcard:hover { border-color: var(--line-2); transform: translateY(-4px); } .pcard-media { position: relative; aspect-ratio: 4/3; overflow: hidden; } .pcard-bg { position: absolute; inset: 0; background: var(--img) center/cover no-repeat; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .pcard:hover .pcard-bg { transform: scale(1.06); } .pcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(10,10,11,.85)); } .pcard-badges { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; gap: 8px; } .pcard-badge { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 11px; background: rgba(10,10,11,.75); color: var(--gold); border: 1px solid var(--line-2); } .pcard-badge.model { color: var(--white); background: rgba(10,10,11,.68); } .pcard-badge.hit { background: var(--gold); color: #0a0a0b; border-color: var(--gold); } .pcard-in { position: relative; z-index: 2; padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; } .pcard-type { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .pcard h3 { font-size: 1.7rem; margin: 8px 0 14px; } .pcard-specs { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); margin-bottom: 18px; } .pcard-specs span { border-left: 1px solid var(--line-2); padding-left: 10px; } .pcard-specs span:first-child { border: none; padding: 0; } .pcard-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--line); } .pcard-price small { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim-2); } .pcard-price b { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; } .pcard-arrow { width: 44px; height: 44px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--white); transition: all .3s; flex: none; } .pcard:hover .pcard-arrow { background: var(--gold); border-color: var(--gold); color: #0a0a0b; } /* В карточках визуализация заполняет рамку целиком; полный необрезанный кадр остаётся доступен в галерее детальной страницы. */ .pcard.is-render .pcard-media { background: #0d0d0f; } .pcard.is-render .pcard-bg { background-size: cover; background-repeat: no-repeat; background-color: #0d0d0f; filter: brightness(.86) saturate(.9); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .35s; } .pcard.is-render:hover .pcard-bg { transform: none; filter: brightness(.96) saturate(.96); } .pcard.is-render .pcard-media::after { background: linear-gradient(180deg,rgba(10,10,11,.05) 35%,rgba(10,10,11,.82) 100%); } .project-disclaimer { max-width: 720px; margin-top: 22px; padding: 14px 18px; border-left: 2px solid var(--gold); background: rgba(201,168,106,.06); color: var(--dim); font-size: 13px; line-height: 1.6; } .filter { display: flex; gap: 10px; flex-wrap: wrap; } .filter button { padding: 10px 22px; background: transparent; border: 1px solid var(--line); color: var(--dim); font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .05em; cursor: pointer; transition: all .25s; } .filter button:hover { color: var(--white); border-color: var(--line-2); } .filter button.on { background: var(--white); border-color: var(--white); color: #0a0a0b; } /* ============================================================ ЗАЯВКА-ФИНДЕР (в герое) ============================================================ */ .finder { background: rgba(20,20,23,.6); backdrop-filter: blur(16px); border: 1px solid var(--line-2); padding: 34px; max-width: 420px; } .finder h3 { font-size: 1.7rem; margin-bottom: 8px; } .finder p { font-size: 13px; color: var(--dim); margin-bottom: 26px; } .finder-row { margin-bottom: 22px; } .finder-row .ft { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .finder-row label { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .finder-row .fv { font-family: var(--serif); font-size: 1.2rem; color: var(--gold); } .fseg { display: flex; gap: 6px; } .fseg button { flex: 1; padding: 11px 4px; background: transparent; border: 1px solid var(--line); color: var(--dim); font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s; } .fseg button:hover { border-color: var(--line-2); color: var(--white); } .fseg button.on { background: var(--gold); border-color: var(--gold); color: #0a0a0b; } .fcount { text-align: center; font-size: 13px; color: var(--dim); margin: 6px 0 20px; } .fcount b { font-family: var(--serif); font-size: 1.3rem; color: var(--white); } .rng { -webkit-appearance: none; appearance: none; width: 100%; height: 1px; background: var(--line-2); outline: none; } .rng::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); cursor: pointer; } .rng::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: none; cursor: pointer; } /* ============================================================ АКЦИИ — тёмные карточки ============================================================ */ .promo-reel { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } .promo { border: 1px solid var(--line); padding: 40px 34px; min-height: 320px; display: flex; flex-direction: column; transition: border-color .3s, background .3s; } .promo:hover { border-color: var(--gold); background: rgba(201,168,106,.04); } .promo-tag { align-self: flex-start; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); padding: 6px 14px; margin-bottom: auto; } .promo h3 { font-size: 2rem; margin: 24px 0 12px; } .promo p { color: var(--dim); font-weight: 300; font-size: 15px; margin-bottom: 18px; } .promo-dl { font-size: 12px; letter-spacing: .06em; color: var(--gold); margin-bottom: 22px; } /* ============================================================ ИПОТЕКА ============================================================ */ .mort { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,6vw,90px); align-items: center; } .mort-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); } .mort-rate { background: var(--black); padding: 34px 28px; } .mort-rate b { font-family: var(--serif); font-size: 3rem; font-weight: 300; color: var(--gold); display: block; line-height: 1; } .mort-rate span { font-size: 13px; color: var(--dim); margin-top: 10px; display: block; } /* ============================================================ ОТЗЫВЫ ============================================================ */ .rev-reel { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .rev { border: 1px solid var(--line); padding: 36px; display: flex; flex-direction: column; } .rev-stars { color: var(--gold); display: flex; gap: 6px; margin-bottom: 20px; } .rev-stars svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); } .rev-txt { font-family: var(--serif); font-size: 1.3rem; font-weight: 300; font-style: italic; line-height: 1.5; color: var(--white); margin-bottom: 26px; flex: 1; } .rev-who { display: flex; align-items: center; gap: 14px; } .rev-av { width: 48px; height: 48px; border-radius: 50%; background: var(--img) center/cover; border: 1px solid var(--line-2); } .rev-who b { font-size: 15px; display: block; font-weight: 600; } .rev-who span { font-size: 12.5px; color: var(--dim); } /* ============================================================ ЭТАПЫ ============================================================ */ .steps { display: grid; grid-template-columns: repeat(4,1fr); } .step { padding: 0 clamp(18px,2.4vw,36px); border-left: 1px solid var(--line); } .step:first-child { border: none; padding-left: 0; } .step-n { font-family: var(--serif); font-size: 3.4rem; font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: 20px; } .step h3 { font-size: 1.3rem; font-weight: 400; margin-bottom: 12px; } .step p { color: var(--dim); font-weight: 300; font-size: 14.5px; } /* ============================================================ CTA финальный ============================================================ */ .cta-frame { text-align: center; } .cta-frame h2 { margin: 24px auto 30px; max-width: 900px; } .cta-frame .btn { margin: 0 6px; } /* ============================================================ ВНУТРЕННИЕ СТРАНИЦЫ (тёмный editorial-поток) ============================================================ */ .page-top { padding: 150px 0 60px; border-bottom: 1px solid var(--line); } .crumbs { font-size: 12.5px; letter-spacing: .04em; color: var(--dim-2); margin-bottom: 30px; } .crumbs a:hover { color: var(--white); } .crumbs span { margin: 0 8px; } .page-top h1 { margin: 20px 0 20px; } .page-top .lede { max-width: 680px; } .sect { padding: clamp(60px,9vh,120px) 0; } .sect-head { max-width: 720px; margin-bottom: 54px; } .sect-head.center { margin-inline: auto; text-align: center; } .sect-head h2 { margin: 18px 0 16px; } /* ============================================================ ПОСТРОЕННЫЕ ОБЪЕКТЫ — АРХИВНЫЕ ИСТОРИИ ============================================================ */ [data-built-tabs] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--black-2); } [data-built-tabs] > .wrap, [data-built-tabs] [data-built-tablist], [data-built-tabs] [role="tablist"] { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } [data-built-tab] { min-width: 0; min-height: 70px; padding: 17px clamp(16px,3vw,42px); display: flex; align-items: center; justify-content: center; gap: clamp(9px,1.2vw,18px); color: var(--dim); border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-align: center; text-transform: uppercase; transition: color .25s, background .25s, border-color .25s; } [data-built-tab] small { opacity: .7; font-size: 9px; letter-spacing: .12em; white-space: nowrap; } [data-built-tab] + [data-built-tab] { border-left: 0; } [data-built-tab]:hover { color: var(--white); } [data-built-tab][aria-selected="true"] { color: #0a0a0b; background: var(--gold); border-color: var(--gold); } [data-built-tab]:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--white); outline-offset: -5px; } [data-built-panel], .built-story[id] { scroll-margin-top: 100px; } [data-built-panel][hidden] { display: none !important; } .built-proof { border-bottom: 1px solid var(--line); background: var(--black-2); } .built-proof-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); } .built-proof-grid p { min-height: 142px; padding: 32px clamp(22px,3vw,46px); border-left: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 18px; align-content: center; } .built-proof-grid p:first-child { border-left: 0; } .built-proof-grid span { grid-row: 1 / 3; font-family: var(--serif); font-size: 1.65rem; line-height: 1; color: var(--gold); } .built-proof-grid b { font-size: 12px; line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; } .built-proof-grid small { margin-top: 7px; color: var(--dim); font-size: 12.5px; line-height: 1.55; } .built-stories { overflow: hidden; } .built-story { padding: clamp(58px,7vw,96px) 0; border-bottom: 1px solid var(--line); } .built-story-lead { display: grid; grid-template-columns: minmax(300px,.78fr) minmax(0,1.42fr); gap: clamp(38px,6vw,90px); align-items: center; } .built-story-flip .built-story-copy { order: 2; } .built-story-flip .built-story-media { order: 1; } .built-story-copy { padding-inline: clamp(0px,2.4vw,34px); } .built-story-index { display: grid; grid-template-columns: auto 42px minmax(0,1fr); align-items: center; gap: 13px; color: var(--gold); } .built-story-index span { font-family: var(--serif); font-size: 1.9rem; line-height: 1; } .built-story-index i { height: 1px; background: currentColor; opacity: .7; } .built-story-index small { font-size: 10.5px; font-style: normal; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; } .built-story-copy h2 { margin: 24px 0 22px; font-size: clamp(2.35rem,4.8vw,5rem); } .built-story-summary { color: var(--dim); font-size: clamp(.98rem,1.25vw,1.13rem); font-weight: 300; line-height: 1.75; } .built-story-status { margin-top: 26px; } .built-story-status span { display: inline-flex; padding: 9px 13px; border: 1px solid rgba(201,168,106,.34); color: var(--gold); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .built-story-note { margin-top: 18px; padding-left: 15px; border-left: 1px solid var(--line-2); color: var(--dim-2); font-size: 12.5px; line-height: 1.65; } .built-story-media { min-width: 0; } .built-photo { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; cursor: zoom-in; color: var(--white); background: #121214; border: 1px solid var(--line); text-align: left; } .built-photo picture { display: block; width: 100%; height: 100%; } .built-photo img { display: block; width: 100%; height: 100%; } .built-photo img { object-fit: cover; transition: transform .75s cubic-bezier(.2,.8,.2,1), filter .35s; } .built-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 58%,rgba(8,8,9,.72)); pointer-events: none; } .built-photo:hover img { transform: scale(1.025); filter: brightness(1.04); } .built-photo:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } .built-cover { aspect-ratio: 3/2; } .built-story .built-photo img { object-fit: cover; object-position: center; } .built-story .built-photo:hover img { transform: none; filter: brightness(1.04); } .built-cover.built-photo-wide { aspect-ratio: 16/9; } .built-cover.built-photo-portrait { width: min(100%,520px); margin-inline: auto; aspect-ratio: 3/4; } .built-photo-label { position: absolute; left: clamp(16px,2.2vw,30px); right: 58px; bottom: clamp(16px,2.2vw,28px); z-index: 2; font-family: var(--serif); font-size: clamp(1.35rem,2.3vw,2.15rem); line-height: 1.08; } .built-photo-label small { display: block; margin-bottom: 7px; color: var(--gold); font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; } .built-photo-zoom { position: absolute; right: 15px; bottom: 15px; z-index: 2; width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.32); background: rgba(8,8,9,.34); font-size: 14px; transition: all .25s; } .built-photo:hover .built-photo-zoom { color: #0a0a0b; background: var(--gold); border-color: var(--gold); } .built-timeline { list-style: none; display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 1px; align-items: stretch; margin-top: clamp(42px,6vw,76px); background: var(--line); border: 1px solid var(--line); } .built-stage { min-width: 0; background: var(--black); display: flex; flex-direction: column; } .built-timeline-single { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; } .built-stage .built-photo { width: 100%; aspect-ratio: 4/3; border: 0; } .built-stage .built-photo img { object-fit: cover; object-position: center; } .built-stage .built-photo::after { background: linear-gradient(180deg,transparent 72%,rgba(8,8,9,.42)); } .built-stage-copy { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; min-height: 152px; padding: 25px 24px 28px; flex: 1; } .built-stage-copy > span { font-family: var(--serif); font-size: 1.45rem; line-height: 1; color: var(--gold); } .built-stage-copy h3 { font-size: 1.45rem; line-height: 1.08; } .built-stage-copy p { margin-top: 10px; color: var(--dim); font-size: 12.5px; line-height: 1.65; } .built-video { margin: 0; border: 1px solid var(--line); background: #0c0c0e; } .built-video video { display: block; width: min(100%,480px); max-height: min(72vh,760px); margin-inline: auto; background: #080809; object-fit: contain; } .built-video figcaption { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--line); } .built-video figcaption span { display: grid; gap: 2px; color: var(--dim); font-size: 12px; } .built-video figcaption b { color: var(--white); font-size: 13px; } .built-video figcaption small { flex: none; color: var(--gold); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } .built-gallery, .built-gallery-section, #gallery[data-built-panel] { background: var(--black-2); border-bottom: 1px solid var(--line); } .built-gallery .sect-head, #gallery[data-built-panel] .sect-head { max-width: 820px; } .built-gallery-head { max-width: 820px; margin-bottom: clamp(34px,5vw,58px); } .built-gallery-head h2 { margin: 18px 0 16px; } .built-gallery-head p { color: var(--dim); font-size: clamp(1rem,1.5vw,1.25rem); font-weight: 300; line-height: 1.7; } .built-gallery-grid { list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(18px,2.4vw,34px); align-items: start; } .built-gallery-card { min-width: 0; margin: 0; background: var(--black); border: 1px solid var(--line); } .built-gallery-photo { min-width: 0; aspect-ratio: var(--gallery-ratio,4/3); background: #080809; } .built-gallery-photo .built-photo { height: 100%; border: 0; background: #080809; } .built-gallery-photo .built-photo picture { height: 100%; } .built-gallery-photo .built-photo img { width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center; transform: none; } .built-gallery-photo .built-photo::after { background: none; } .built-gallery-photo .built-photo:hover img { transform: none; filter: brightness(1.04); } .built-gallery-copy { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; min-height: 112px; padding: 22px clamp(18px,2.2vw,30px) 25px; border-top: 1px solid var(--line); } .built-gallery-copy > span { color: var(--gold); font-family: var(--serif); font-size: 1.35rem; line-height: 1; } .built-gallery-copy h3 { font-size: clamp(1.3rem,2vw,1.75rem); line-height: 1.1; } .built-gallery-copy p { margin-top: 8px; color: var(--dim); font-size: 12.5px; line-height: 1.65; } /* Expanded built archive */ .built-catalog { background: var(--black); border-bottom: 1px solid var(--line); } .built-catalog .sect-head { max-width: 840px; } .built-catalog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; padding: 0; background: transparent; } .built-catalog-card { min-width: 0; display: flex; flex-direction: column; background: var(--black-2); } .built-catalog-card[hidden] { display: none; } .built-catalog-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #080809; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } .built-catalog-media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transition: filter .3s ease, opacity .3s ease; } .built-catalog-media > span { position: absolute; top: 14px; left: 14px; min-width: 35px; height: 35px; padding-inline: 8px; display: grid; place-items: center; color: var(--gold); background: rgba(8,8,9,.82); border: 1px solid rgba(201,168,106,.42); font-family: var(--serif); font-size: 1.12rem; } .built-catalog-copy { flex: 1; display: flex; flex-direction: column; padding: clamp(22px,2.3vw,32px); } .built-catalog-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .built-catalog-meta span { color: var(--gold); font-size: 9.5px; font-weight: 600; line-height: 1.5; letter-spacing: .15em; text-transform: uppercase; } .built-catalog-meta small { flex: none; color: var(--dim-2); font-size: 10.5px; line-height: 1.5; } .built-catalog-copy h3 { margin: 18px 0 13px; font-size: clamp(1.65rem,2.35vw,2.25rem); line-height: 1.05; } .built-catalog-copy h3 a { transition: color .22s ease; } .built-catalog-copy h3 a:hover { color: var(--gold); } .built-catalog-copy h3 a:focus-visible, .built-catalog-foot a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } .built-catalog-copy > p { display: -webkit-box; overflow: hidden; color: var(--dim); font-size: 13px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .built-catalog-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-top: auto; padding-top: 25px; } .built-catalog-foot > span { color: var(--dim-2); font-size: 10px; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; } .built-catalog-foot a { flex: none; color: var(--white); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-align: right; text-transform: uppercase; transition: color .22s ease; } .built-catalog-foot a b { margin-left: 5px; color: var(--gold); font-size: 15px; font-weight: 400; } .built-catalog-foot a:hover { color: var(--gold); } .built-catalog-more { display: flex; justify-content: center; padding-top: clamp(30px,4vw,48px); } /* Individual archive object */ .built-detail-top { background: var(--black); } .built-detail-top .lede { max-width: 820px; } .built-detail-top .built-story-note { max-width: 820px; } .built-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 27px; } .built-detail-meta span, .built-detail-meta b { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 12px; border: 1px solid var(--line-2); font-size: 9.5px; line-height: 1.45; letter-spacing: .14em; text-transform: uppercase; } .built-detail-meta span { color: var(--dim); } .built-detail-meta b { color: var(--gold); border-color: rgba(201,168,106,.38); font-weight: 600; } .built-detail { background: var(--black-2); border-bottom: 1px solid var(--line); } .built-detail-heading { max-width: 720px; margin-bottom: clamp(34px,5vw,58px); } .built-detail-heading h2 { margin-top: 16px; } .built-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(18px,2.5vw,34px); align-items: start; } .built-detail-shot { min-width: 0; margin: 0; background: var(--black); border: 1px solid var(--line); } .built-detail-shot.is-final { grid-column: 1 / -1; } .built-detail-shot-portrait { width: min(100%,520px); justify-self: center; } .built-detail-shot .built-photo { border: 0; background: #080809; } .built-detail-shot-landscape .built-photo { aspect-ratio: 3 / 2; } .built-detail-shot-portrait .built-photo { aspect-ratio: 2 / 3; } .built-detail-shot .built-photo picture, .built-detail-shot .built-photo img { width: 100%; height: 100%; } .built-detail-shot .built-photo img { object-fit: contain; object-position: center; } .built-detail-shot .built-photo::after { background: none; } .built-detail-shot .built-photo:hover img { transform: none; filter: brightness(1.04); } .built-detail-shot figcaption { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 17px; min-height: 118px; padding: 23px clamp(20px,2.5vw,32px) 26px; border-top: 1px solid var(--line); } .built-detail-shot figcaption > span { color: var(--gold); font-family: var(--serif); font-size: 1.35rem; line-height: 1; } .built-detail-shot figcaption h3 { font-size: clamp(1.35rem,2vw,1.8rem); line-height: 1.1; } .built-detail-shot figcaption p { margin-top: 9px; color: var(--dim); font-size: 12.5px; line-height: 1.65; } .built-detail-back { display: inline-flex; margin-top: clamp(36px,5vw,62px); padding-bottom: 5px; color: var(--gold); border-bottom: 1px solid rgba(201,168,106,.42); font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; transition: color .22s ease, border-color .22s ease; } .built-detail-back:hover { color: var(--white); border-color: var(--white); } .built-detail-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; } .built-cta { position: relative; z-index: 1; isolation: isolate; text-align: center; background: var(--black); border-top: 1px solid var(--line); } .built-cta-in { max-width: 900px; margin-inline: auto; } .built-cta h2 { margin: 22px 0 20px; } .built-cta p { max-width: 670px; margin: 0 auto 30px; color: var(--dim); line-height: 1.75; } .built-cta-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } /* Полноэкранный просмотр реальных фотографий */ .phlb { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; width: 100%; height: 100vh; height: 100dvh; padding: clamp(12px,2vw,32px); overflow: hidden; } .phlb[hidden] { display: none; } .phlb-back { position: absolute; inset: 0; background: rgba(5,5,6,.94); backdrop-filter: blur(5px); animation: fadeIn .22s ease; } .phlb-box { position: relative; z-index: 1; width: 100%; height: 100%; max-height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; margin: 0; animation: popIn .28s cubic-bezier(.2,.8,.2,1); } .phlb-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; } .phlb-stage img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; } .phlb-box figcaption { display: grid; gap: 4px; justify-items: center; padding: 14px 60px 0; text-align: center; } .phlb-box figcaption h3 { font-size: clamp(1.2rem,2vw,1.7rem); } .phlb-box figcaption p { max-width: 680px; color: var(--dim); font-size: 12.5px; } .phlb-close { position: absolute; top: 0; right: 0; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--white); background: rgba(10,10,11,.72); border: 1px solid var(--line-2); font-size: 25px; transition: all .25s; } .phlb-close:hover { color: #0a0a0b; background: var(--gold); border-color: var(--gold); } @media (max-width: 960px) { .built-proof-grid { grid-template-columns: 1fr; } .built-proof-grid p { min-height: 100px; border-left: 0; border-top: 1px solid var(--line); } .built-proof-grid p:first-child { border-top: 0; } .built-story-lead { grid-template-columns: 1fr; } .built-story-flip .built-story-copy, .built-story-flip .built-story-media { order: initial; } .built-story-copy { max-width: 720px; } .built-story-media { width: 100%; } .built-video video { max-height: 72vh; } .built-catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 620px) { .built-proof-grid p { padding: 24px 0; } .built-story { padding: 66px 0; } .built-story-copy { padding-inline: 0; } .built-story-index { grid-template-columns: auto 28px minmax(0,1fr); } .built-story-index small { letter-spacing: .12em; } .built-story-copy h2 { font-size: clamp(2.25rem,12vw,3.3rem); } .built-cover { aspect-ratio: 4/3; } .built-timeline { grid-template-columns: 1fr; } .built-timeline-single { max-width: none; } .built-stage .built-photo { width: 100%; aspect-ratio: 4/3; } .built-stage-copy { min-height: 0; } .built-video figcaption { align-items: flex-start; } .built-video figcaption small { max-width: 92px; text-align: right; } [data-built-tabs] > .wrap, [data-built-tabs] [data-built-tablist], [data-built-tabs] [role="tablist"] { grid-template-columns: repeat(2,minmax(0,1fr)); } [data-built-tab] { min-height: 64px; padding: 10px 8px; flex-direction: column; gap: 3px; font-size: 9.5px; letter-spacing: .1em; } .built-gallery-grid { grid-template-columns: minmax(0,1fr); gap: 20px; } .built-gallery-copy { min-height: 0; padding: 20px 18px 23px; } .built-catalog-grid { grid-template-columns: 1fr; } .built-catalog-copy { padding: 22px 20px 25px; } .built-catalog-copy > p { -webkit-line-clamp: initial; } .built-catalog-foot { align-items: flex-start; flex-direction: column; gap: 13px; } .built-catalog-foot a { text-align: left; } .built-detail-grid { grid-template-columns: 1fr; gap: 20px; } .built-detail-shot, .built-detail-shot.is-final { grid-column: auto; } .built-detail-shot-portrait { width: min(100%,440px); } .built-detail-shot figcaption { min-height: 0; padding: 20px 18px 23px; } .built-cta-actions { display: grid; } .built-cta .btn { justify-content: center; width: 100%; } .phlb { padding: 8px; } .phlb-box figcaption { padding: 10px 48px 2px; } .phlb-box figcaption p { display: none; } .phlb-close { width: 40px; height: 40px; } } @media (max-height: 560px) { .phlb-box figcaption { padding-top: 6px; } .phlb-box figcaption p { display: none; } } /* калькулятор */ .calc { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.9fr); gap: 30px; align-items: start; } .calc-panel { min-width: 0; border: 1px solid var(--line); padding: clamp(20px,3vw,40px); background: var(--black-2); } .calc-steps { display: flex; gap: 8px; margin-bottom: 34px; } .calc-steps span { flex: 1; height: 2px; background: var(--line); } .calc-steps span.on { background: var(--gold); } .crow { margin-bottom: 30px; } .clabel { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); display: block; margin-bottom: 14px; } .clabel b { font-family: var(--serif); color: var(--gold); font-size: 1.2rem; letter-spacing: 0; font-weight: 400; } .chint { font-size: 12.5px; color: var(--dim-2); margin-top: 10px; } .seg { display: flex; flex-wrap: wrap; gap: 8px; } .seg button { flex: 1 1 auto; min-width: 76px; padding: 13px 14px; background: transparent; border: 1px solid var(--line); color: var(--dim); font-family: var(--sans); font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s; } .seg button:hover { color: var(--white); border-color: var(--line-2); } .seg button.on { background: var(--white); border-color: var(--white); color: #0a0a0b; } .seg.stack { flex-direction: column; } .seg.stack button { text-align: left; display: grid; gap: 3px; } .seg.stack button small { font-size: 12px; opacity: .7; font-weight: 400; } .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 1px; background: var(--line-2); outline: none; } .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); cursor: pointer; } .slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: none; cursor: pointer; } .sscale { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim-2); margin-top: 10px; } .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .check { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid var(--line); cursor: pointer; font-size: 14.5px; color: var(--dim); transition: all .2s; } .check:hover { border-color: var(--line-2); color: var(--white); } .check input { width: 17px; height: 17px; accent-color: var(--gold); } .calc-out { min-width: 0; position: sticky; top: 110px; border: 1px solid var(--line-2); background: var(--panel); padding: clamp(20px,3vw,38px); } .calc-out-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } .calc-price { font-family: var(--serif); font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 300; margin: 12px 0 4px; line-height: 1.1; } .calc-perm2 { color: var(--dim); font-size: 15px; margin-bottom: 24px; } .calc-sum { list-style: none; display: grid; gap: 11px; border-top: 1px solid var(--line); padding-top: 20px; margin-bottom: 26px; } .calc-sum li { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); font-size: 14.5px; gap: 12px; } .calc-sum span { color: var(--dim); } .calc-sum b { font-weight: 600; } .calc-sum li span small { display: block; font-size: 12px; color: var(--dim-2); font-weight: 400; line-height: 1.45; margin-top: 2px; } .calc-sum li > * { min-width: 0; } .calc-sum li b { text-align: right; } .calc-block { border-top: 1px solid var(--line); padding: 14px 0 4px; } .calc-block summary { cursor: pointer; font-size: 12.5px; color: var(--gold); list-style: none; } .calc-block summary::-webkit-details-marker { display: none; } .calc-block summary::after { content: ' +'; color: var(--dim-2); } .calc-block[open] summary::after { content: ' —'; } .calc-lines { list-style: none; display: grid; gap: 10px; margin: 12px 0 8px; padding: 0; } .calc-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; line-height: 1.45; } .calc-lines li span { color: var(--dim); min-width: 0; } .calc-lines li b { text-align: right; white-space: nowrap; font-weight: 600; } .check.is-off { opacity: .45; cursor: not-allowed; } .calc-note { font-size: 12.5px; color: var(--dim-2); margin-top: 14px; line-height: 1.6; } /* сетка карточек на внутренних */ .grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .grid2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; } /* форма */ .lead-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,64px); align-items: start; } .lead-form { border: 1px solid var(--line); background: var(--black-2); padding: 40px; } .lead-form label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 20px; } .lead-form input:not([type="checkbox"]):not([type="hidden"]):not([name="website"]), .lead-form select, .lead-form textarea { width: 100%; margin-top: 9px; padding: 14px 16px; background: var(--black); border: 1px solid var(--line); color: var(--white); font-family: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s, background-color .2s; } .lead-form input:not([type="checkbox"]):not([type="hidden"]):not([name="website"]):focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,106,.12); } .lead-form option { background: var(--black); } .lead-info { list-style: none; display: grid; gap: 18px; } .lead-info li { display: flex; flex-direction: column; gap: 4px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .lead-info li small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim-2); } .lead-info li b { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; } .lead-note { font-size: 12px; color: var(--dim-2); margin-top: 14px; text-align: center; } .lead-note a, .qz-note a, .form-consent a, .lead-consent a, .qz-consent a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; } .lead-note a:hover, .qz-note a:hover, .form-consent a:hover, .lead-consent a:hover, .qz-consent a:hover { color: var(--gold); } /* Скрытое поле-ловушка остаётся в DOM, но не занимает место и недоступно указателю. */ .form-honeypot, .lead-honeypot, .qz-honeypot, [data-lead-form] input[name="website"] { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } .form-consent, .lead-consent, .qz-consent, [data-lead-form] label:has(> input[type="checkbox"][name="consent"]) { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: start; gap: 10px; margin: 14px 0; color: var(--dim); font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 1.55; text-align: left; text-transform: none; cursor: pointer; } .form-consent input[type="checkbox"], .lead-consent input[type="checkbox"], .qz-consent input[type="checkbox"], [data-lead-form] input[type="checkbox"][name="consent"] { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 18px; height: 18px; margin: 2px 0 0; border: 1px solid var(--line-2); border-radius: 0; background: var(--black); color: #0a0a0b; cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; } .qz-form .form-consent input[type="checkbox"], .qz-form .qz-consent input[type="checkbox"], .qz-form input[type="checkbox"][name="consent"] { background: var(--near); } .form-consent input[type="checkbox"]::before, .lead-consent input[type="checkbox"]::before, .qz-consent input[type="checkbox"]::before, [data-lead-form] input[type="checkbox"][name="consent"]::before { content: ""; width: 8px; height: 5px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); transition: transform .16s ease; } .form-consent input[type="checkbox"]:checked, .lead-consent input[type="checkbox"]:checked, .qz-consent input[type="checkbox"]:checked, [data-lead-form] input[type="checkbox"][name="consent"]:checked { border-color: var(--gold); background: var(--gold); } .form-consent input[type="checkbox"]:checked::before, .lead-consent input[type="checkbox"]:checked::before, .qz-consent input[type="checkbox"]:checked::before, [data-lead-form] input[type="checkbox"][name="consent"]:checked::before { transform: rotate(-45deg) scale(1); } .form-consent:focus-within, .lead-consent:focus-within, .qz-consent:focus-within { color: var(--white); } .lead-form input:focus-visible, .lead-form select:focus-visible, .lead-form textarea:focus-visible, .qz-form input:focus-visible, .lead-note a:focus-visible, .qz-note a:focus-visible, .form-consent a:focus-visible, .lead-consent a:focus-visible, .qz-consent a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .lead-form input.invalid, .qz-form input.invalid, .lead-form [aria-invalid="true"], .qz-form [aria-invalid="true"] { border-color: #c0603a !important; box-shadow: 0 0 0 2px rgba(192,96,58,.12); } .form-consent:has(input[aria-invalid="true"]), .lead-consent:has(input[aria-invalid="true"]), .qz-consent:has(input[aria-invalid="true"]) { color: #e7a08a; } .form-err { margin: 0 0 12px; padding: 11px 14px; color: #e7a08a; border: 1px solid rgba(192,96,58,.45); border-left: 2px solid #c0603a; background: rgba(192,96,58,.08); font-size: 13px; line-height: 1.5; } .lead-success, .qz-success, .form-success { margin-top: 14px; padding: 13px 15px; color: var(--gold); border: 1px solid var(--gold-dim); background: var(--gold-dim); font-size: 13.5px; line-height: 1.5; text-align: center; } .lead-form button[type="submit"]:disabled, .qz-form button[type="submit"]:disabled, .lead-form button[type="submit"][aria-disabled="true"], .qz-form button[type="submit"][aria-disabled="true"] { cursor: not-allowed; filter: saturate(.65); opacity: .62; } .lead-form button[type="submit"]:disabled:hover::after, .qz-form button[type="submit"]:disabled:hover::after { transform: translateY(101%); } .lead-form .btn-solid[type="submit"]:disabled:hover, .qz-form .btn-solid[type="submit"]:disabled:hover { color: #0a0a0b; border-color: var(--gold); } .lead-form[aria-busy="true"], .qz-form[aria-busy="true"] { cursor: progress; } .lead-form[aria-busy="true"] button[type="submit"]::before, .qz-form[aria-busy="true"] button[type="submit"]::before, .lead-form button[type="submit"][aria-busy="true"]::before, .qz-form button[type="submit"][aria-busy="true"]::before, .lead-form button[type="submit"].is-loading::before, .qz-form button[type="submit"].is-loading::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: formSpin .65s linear infinite; } @keyframes formSpin { to { transform: rotate(360deg); } } /* статья */ .article { max-width: 760px; margin-inline: auto; padding: 150px 0 100px; } .article h1 { font-size: clamp(2.2rem,4.4vw,3.6rem); margin: 18px 0 20px; } .abody { font-size: 1.12rem; color: #d8d5ce; font-weight: 300; line-height: 1.85; } .abody h2 { font-size: 2rem; margin: 46px 0 18px; color: var(--white); } .abody h3 { font-size: 1.5rem; margin: 32px 0 12px; color: var(--white); } .abody p { margin-bottom: 22px; } .abody ul, .abody ol { margin: 0 0 22px 22px; } .abody li { margin-bottom: 9px; } .abody blockquote { border-left: 2px solid var(--gold); padding-left: 26px; margin: 30px 0; font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--white); } .abody a { color: var(--gold); text-decoration: underline; } .blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .bpost { border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: border-color .3s; } .bpost:hover { border-color: var(--line-2); } .bpost-media { aspect-ratio: 16/10; background: var(--img) center/cover no-repeat; } .bpost-body { padding: 26px; display: flex; flex-direction: column; flex: 1; } .bpost-cat { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .bpost h3 { font-size: 1.4rem; font-weight: 400; margin-bottom: 12px; line-height: 1.2; } .bpost p { color: var(--dim); font-weight: 300; font-size: 14.5px; flex: 1; margin-bottom: 16px; } .bpost-date { font-size: 12.5px; color: var(--dim-2); } /* ---------- ПОДВАЛ ---------- */ .ft { border-top: 1px solid var(--line); padding: clamp(56px,8vh,90px) 0 0; } .ft-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 44px; padding-bottom: 50px; } .ft-brand p { color: var(--dim); font-weight: 300; margin-top: 20px; max-width: 300px; font-size: 15px; } .ft h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 20px; } .ft ul { list-style: none; } .ft li { margin-bottom: 12px; } .ft a { color: var(--white); font-weight: 300; font-size: 15px; } .ft a:hover { color: var(--gold); } .ft-bottom { display: flex; justify-content: space-between; padding: 26px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim-2); flex-wrap: wrap; gap: 10px; } .ft-bottom a { color: var(--dim-2); transition: color .25s; } .ft-bottom a:hover { color: var(--dim); } /* FAB */ .fab { position: fixed; right: 22px; bottom: 22px; z-index: 90; background: var(--gold); color: #0a0a0b; padding: 15px 26px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; display: none; } /* ---------- ДЕТАЛЬНАЯ СТРАНИЦА ПРОЕКТА ---------- */ .pd-top { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px,4vw,48px); align-items: start; } .pd-photo { position: relative; aspect-ratio: 4/3; margin: 0; overflow: hidden; background: #0d0d0f; border: 1px solid var(--line); } .pd-photo picture { width: 100%; height: 100%; display: block; } .pd-photo img { width: 100%; height: 100%; object-fit: contain; display: block; filter: brightness(.98) saturate(.96); } .pd-render-mark { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 7px 11px; border: 1px solid rgba(255,255,255,.22); background: rgba(10,10,11,.74); color: var(--white); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(6px); } .pd-angle-toggle { position: absolute; top: 14px; right: 14px; z-index: 3; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.3); background: rgba(10,10,11,.82); color: var(--white); font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); transition: background .22s, color .22s, border-color .22s; } .pd-angle-toggle:hover { background: var(--gold); color: #0a0a0b; border-color: var(--gold); } .pd-angle-toggle[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); } .pd-angle-toggle[aria-pressed="true"]:hover { color: #0a0a0b; } .pd-angle-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .pd-side { border: 1px solid var(--line-2); background: var(--panel); padding: 32px; position: sticky; top: 100px; } .pd-price { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); } .pd-price small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim-2); } .pd-price b { font-family: var(--serif); font-size: 2.4rem; font-weight: 300; display: block; line-height: 1.1; margin: 4px 0; } .pd-price span { font-size: 13px; color: var(--dim); } .pd-specs { list-style: none; display: grid; gap: 12px; margin-bottom: 26px; } .pd-specs li { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .pd-specs li:last-child { border: none; padding: 0; } .pd-specs span { color: var(--dim); } .pd-specs b { font-weight: 600; text-align: right; } .pd-plan { border: 1px solid var(--line); background: #101013; padding: clamp(20px,3vw,40px); display: grid; place-items: center; } .pd-plan img { width: 100%; max-width: 760px; height: auto; } .pd-plan-note { font-size: 14px; color: var(--dim); margin-top: 18px; max-width: 640px; } .pd-kit-price { font-family: var(--serif); font-size: 1.6rem; color: var(--gold); margin: 14px 0 18px; } /* reveal */ .rv { opacity: 0; transform: translateY(30px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); } .rv.in { opacity: 1; transform: none; } html:not(.js) .rv { opacity: 1; transform: none; } /* На главной (полноэкранные кадры) контент виден всегда — кадр появляется целиком, поэлементный reveal внутри кадра прячет контент при быстром scroll-snap. */ .reel .rv { opacity: 1 !important; transform: none !important; } /* Карточки проектов — контент, а не декор: не прячем их reveal'ом (иначе пустые сетки на full-page и при быстром скролле). Fade остаётся только на заголовках/промо-блоках. */ .pcard.rv { opacity: 1 !important; transform: none !important; } /* ============================================================ ФИЧИ v3.1 — планировка на карточке, таб фото/план, лайтбокс, квиз-модалка, плавающий виджет связи, FAQ. ============================================================ */ /* --- Кнопка «Планировка» на карточке каталога --- */ .pcard-plan { position: absolute; bottom: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; background: rgba(10,10,11,.78); color: var(--white); border: 1px solid var(--line-2); backdrop-filter: blur(6px); transition: background .25s, color .25s, border-color .25s; } .pcard-plan svg { color: var(--gold); transition: color .25s; } .pcard-plan:hover { background: var(--gold); color: #0a0a0b; border-color: var(--gold); } .pcard-plan:hover svg { color: #0a0a0b; } .pcard-plan:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* --- Таб «Фото / План» на детальной странице --- */ .pd-gallery { display: flex; flex-direction: column; gap: 14px; } .pd-stage { position: relative; aspect-ratio: var(--stage-ratio,4/3); border: 1px solid var(--line); background: #101013; overflow: hidden; } .pd-gallery.is-render .pd-stage { aspect-ratio: var(--stage-ratio,1.598/1); } .pd-view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s; } .pd-view.on { opacity: 1; visibility: visible; } .pd-stage .pd-photo { position: absolute; inset: 0; aspect-ratio: auto; border: 0; } .pd-planview { display: grid; place-items: center; min-width: 0; min-height: 0; padding: clamp(10px,2vw,24px); background: #101013; } .pd-planview img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; } .pd-tabs { display: flex; gap: 8px; } .pd-tab { flex: 1; padding: 12px 18px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; color: var(--dim); background: transparent; border: 1px solid var(--line); transition: all .25s; } .pd-tab:hover { color: var(--white); border-color: var(--line-2); } .pd-tab.on { color: #0a0a0b; background: var(--gold); border-color: var(--gold); } .pd-tab.plan:not(.on) { color: var(--gold); } .pd-gallery.is-render .pd-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); } .pd-gallery.is-render .pd-tab { min-width: 0; padding-left: 10px; padding-right: 10px; } .pd-gallery-note { color: var(--dim); font-size: 12.5px; line-height: 1.55; } .pd-plan img[role=button] { cursor: zoom-in; } .pd-planview img[role=button] { cursor: zoom-in; } .estimate-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--black-2); } /* --- Лайтбокс планировки --- */ .lb, .qz { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px,4vw,50px); } .lb[hidden], .qz[hidden] { display: none; } .lb-back, .qz-back { position: absolute; inset: 0; background: rgba(6,6,7,.88); backdrop-filter: blur(4px); animation: fadeIn .25s ease; } .lb-box, .qz-box { position: relative; z-index: 1; width: 100%; background: var(--black-2); border: 1px solid var(--line-2); box-shadow: 0 40px 120px rgba(0,0,0,.6); animation: popIn .3s cubic-bezier(.2,.8,.2,1); } .lb { padding: clamp(8px,1.5vw,24px); } .lb-box { width: min(100%,1920px); max-width: none; height: calc(100vh - 48px); height: calc(100dvh - 48px); max-height: none; min-width: 0; min-height: 0; overflow: hidden; padding: clamp(14px,1.5vw,28px); display: grid; grid-template-rows: auto minmax(0,1fr) auto; } .lb-close, .qz-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; font-size: 24px; line-height: 1; cursor: pointer; background: transparent; border: 1px solid var(--line-2); color: var(--white); transition: all .25s; } .lb-close:hover, .qz-close:hover { background: var(--gold); color: #0a0a0b; border-color: var(--gold); } .lb-head { min-width: 0; margin-bottom: clamp(8px,1.2vh,16px); padding-right: 52px; } .lb-title { font-size: clamp(1.35rem,2vw,2rem); margin-top: 6px; } .lb-plan { --plan-pad: clamp(6px,1vw,16px); position: relative; min-width: 0; min-height: 0; overflow: hidden; overscroll-behavior: contain; border: 1px solid var(--line); background: #101013; scrollbar-color: var(--gold) #17171a; } .lb-plan img { position: absolute; left: var(--plan-pad); top: var(--plan-pad); display: block; width: calc(100% - var(--plan-pad) - var(--plan-pad)); height: calc(100% - var(--plan-pad) - var(--plan-pad)); min-width: 0; min-height: 0; max-width: none; max-height: none; object-fit: contain; cursor: zoom-in; user-select: none; } .lb-plan.is-zoomed { overflow: auto; } .lb-plan.is-zoomed img { position: relative; inset: auto; width: var(--plan-zoom-width,1600px); height: auto; min-width: var(--plan-zoom-width,1600px); max-width: none; max-height: none; margin: var(--plan-pad); object-fit: initial; cursor: zoom-out; } .lb-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(8px,1.2vh,16px); } .lb-note { font-size: 13.5px; color: var(--dim); max-width: 420px; } .lb-actions { display: flex; gap: 10px; flex: none; } .lb-zoom[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); } /* --- Квиз-модалка --- */ .qz-box { max-width: 560px; overflow: hidden; } .qz-prog { height: 3px; background: var(--line); } .qz-prog span { display: block; height: 100%; background: var(--gold); transition: width .4s cubic-bezier(.4,0,.2,1); } .qz-body { padding: clamp(28px,4vw,44px) clamp(24px,4vw,44px) 10px; min-height: 250px; } .qz-step { animation: fadeIn .3s ease; } .qz-h { font-size: clamp(1.6rem,3.4vw,2.2rem); margin: 14px 0 24px; } .qz-field { margin-bottom: 22px; } .qz-lab { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; } .qz-lab b { color: var(--gold); font-size: 15px; } .qz-opts { display: flex; flex-wrap: wrap; gap: 10px; } .qz-opts button { flex: 1; min-width: fit-content; padding: 13px 18px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; cursor: pointer; color: var(--white); background: transparent; border: 1px solid var(--line-2); transition: all .25s; text-align: center; } .qz-opts button:hover { border-color: var(--gold); color: var(--gold); } .qz-opts button.on { background: var(--gold); border-color: var(--gold); color: #0a0a0b; } .qz-cards { gap: 12px; } .qz-cards button, .qz-stack button { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 16px 18px; } .qz-cards { flex-direction: column; } .qz-cards button b, .qz-stack button b { font-size: 15px; } .qz-cards button small, .qz-stack button small { font-size: 12px; font-weight: 400; color: var(--dim); letter-spacing: 0; text-transform: none; } .qz-cards button.on small, .qz-stack button.on small { color: rgba(10,10,11,.7); } .qz-stack { flex-direction: column; } .qz-result { border: 1px solid var(--gold-dim); background: var(--gold-dim); padding: 22px 24px; margin-bottom: 20px; } .qz-price { font-family: var(--serif); font-size: clamp(1.9rem,4vw,2.6rem); font-weight: 300; color: var(--gold); line-height: 1.1; } .qz-perm2 { font-size: 13px; color: var(--dim); margin-top: 4px; } .qz-sum { list-style: none; margin-top: 16px; display: grid; gap: 8px; } .qz-sum li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .qz-sum span { color: var(--dim); } .qz-sum b { font-weight: 600; text-align: right; } .qz-form input:not([type="checkbox"]):not([type="hidden"]):not([name="website"]) { width: 100%; padding: 14px 16px; margin-bottom: 10px; font-family: var(--sans); font-size: 15px; color: var(--white); background: var(--near); border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s, background-color .2s; } .qz-form input:not([type="checkbox"]):not([type="hidden"]):not([name="website"]):focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,106,.12); } .qz-note { font-size: 11.5px; color: var(--dim-2); margin-top: 10px; line-height: 1.5; } .qz-nav { display: flex; justify-content: space-between; gap: 12px; padding: 16px clamp(24px,4vw,44px) clamp(24px,4vw,40px); } .qz-nav .btn { min-width: 120px; justify-content: center; } .qz-ghost { margin-right: auto; } /* --- FAQ-аккордеон --- */ .faq { max-width: 860px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--line); } .faq-item:first-child { border-top: 1px solid var(--line); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; font-family: var(--serif); font-size: clamp(1.15rem,2.2vw,1.5rem); font-weight: 400; text-align: left; color: var(--white); background: transparent; border: 0; cursor: pointer; transition: color .25s; } .faq-q:hover { color: var(--gold); } .faq-ic { position: relative; flex: none; width: 20px; height: 20px; } .faq-ic::before, .faq-ic::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.5px; background: var(--gold); transform: translate(-50%,-50%); transition: transform .3s; } .faq-ic::after { transform: translate(-50%,-50%) rotate(90deg); } .faq-item.open .faq-ic::after { transform: translate(-50%,-50%) rotate(0); } .faq-a { overflow: hidden; max-height: 0; transition: max-height .35s ease; } .faq-item.open .faq-a { max-height: 400px; } .faq-a p { padding: 0 4px 24px; color: var(--dim); font-size: 15px; max-width: 760px; } .faq-cta { text-align: center; margin-top: 46px; display: flex; flex-direction: column; align-items: center; gap: 20px; } .faq-cta .lede { margin: 0; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } } /* --- Этапы работы (таймлайн) --- */ .steps-flow { list-style: none; max-width: 860px; margin: 0 auto; position: relative; padding-left: 0; } .step-item { display: grid; grid-template-columns: 74px 1fr; gap: clamp(18px,3vw,32px); padding: 0 0 clamp(28px,4vh,44px); position: relative; } .step-item:not(:last-child) .step-num::after { content: ""; position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: 1px; height: calc(100% + clamp(28px,4vh,44px) - 56px); background: linear-gradient(var(--gold), var(--line)); } .step-num { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; font-family: var(--serif); font-size: 1.5rem; color: var(--gold); background: var(--black); } .step-body { padding-top: 8px; } .step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; } .step-head h3 { font-family: var(--serif); font-size: clamp(1.4rem,2.6vw,1.9rem); font-weight: 400; } .step-term { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); padding: 5px 12px; white-space: nowrap; } .step-body p { color: var(--dim); font-size: 15px; max-width: 620px; } .steps-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: clamp(30px,5vh,54px); } /* ============================================================ AI LAB — интерактивный шоурум ИИ-сценариев ============================================================ */ .ai-lab { --ai-bg: #090a0c; --ai-surface: rgba(18,19,22,.92); --ai-surface-2: rgba(25,26,30,.92); --ai-line: rgba(255,255,255,.105); --ai-line-strong: rgba(201,168,106,.34); --ai-cyan: #86b9b2; --ai-good: #91bd91; --ai-warn: #d0a25c; --ai-bad: #d77c72; position: relative; isolation: isolate; min-height: 100svh; overflow: clip; background: radial-gradient(circle at 78% 5%, rgba(201,168,106,.075), transparent 31rem), radial-gradient(circle at 10% 36%, rgba(83,111,109,.055), transparent 28rem), linear-gradient(180deg, #0b0b0d 0, var(--ai-bg) 38rem, #08090a 100%); } .ai-lab-glow { position: absolute; z-index: -1; top: 4rem; right: -18rem; width: 48rem; height: 48rem; border-radius: 50%; opacity: .5; background: radial-gradient(circle, rgba(201,168,106,.16), rgba(201,168,106,.025) 42%, transparent 70%); filter: blur(18px); pointer-events: none; } .ai-lab-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,310px); gap: clamp(34px,7vw,110px); align-items: end; padding-top: clamp(146px,17vh,190px); padding-bottom: clamp(48px,7vh,78px); } .ai-lab-hero h1 { max-width: 980px; margin: 20px 0 24px; font-size: clamp(2.65rem,5.8vw,5.7rem); } .ai-lab-hero .lede { max-width: 760px; } .ai-lab-meta { display: grid; border-top: 1px solid var(--ai-line); color: var(--dim); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .ai-lab-meta > span { display: flex; align-items: center; gap: 10px; padding: 13px 2px; border-bottom: 1px solid var(--ai-line); } .ai-lab-meta #aiApiStatus { color: var(--gold); } .ai-lab-meta #aiApiStatus.is-online { color: var(--ai-good); } .ai-lab-meta #aiApiStatus.is-loading { color: var(--ai-warn); } .ai-lab-meta #aiApiStatus.is-error, .ai-lab-meta #aiApiStatus.is-offline { color: var(--ai-bad); } .ai-lab-meta i, .ai-live-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201,168,106,.1), 0 0 16px rgba(201,168,106,.28); } .ai-lab-meta i.is-online, .ai-lab-meta .is-online i, .ai-live-dot.is-online, .ai-chat-top small.is-online i, .ai-chat-top small i.is-online { background: var(--ai-good); box-shadow: 0 0 0 4px rgba(145,189,145,.1), 0 0 16px rgba(145,189,145,.4); } .ai-lab-meta i.is-error, .ai-lab-meta i.is-offline, .ai-lab-meta .is-error i, .ai-live-dot.is-error, .ai-live-dot.is-offline, .ai-chat-top small.is-error i, .ai-chat-top small.is-offline i, .ai-chat-top small i.is-error, .ai-chat-top small i.is-offline { background: var(--ai-bad); box-shadow: 0 0 0 4px rgba(215,124,114,.08), 0 0 12px rgba(215,124,114,.25); } .ai-shell { display: grid; grid-template-columns: minmax(230px,285px) minmax(0,1fr); align-items: start; gap: clamp(18px,2vw,30px); padding-bottom: clamp(56px,8vh,100px); } .ai-nav { position: sticky; top: 108px; overflow: hidden; border: 1px solid var(--ai-line); background: linear-gradient(180deg, rgba(22,23,26,.97), rgba(13,14,16,.96)); box-shadow: 0 28px 70px rgba(0,0,0,.23); backdrop-filter: blur(18px); } .ai-nav-head { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--ai-line); color: var(--dim-2); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .ai-nav-head b { color: var(--gold); font-weight: 600; } .ai-nav-btn { position: relative; display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 10px; width: 100%; min-height: 68px; padding: 12px 16px; overflow: hidden; border: 0; border-bottom: 1px solid var(--ai-line); color: var(--dim); background: transparent; font-family: var(--sans); text-align: left; cursor: pointer; transition: color .25s, background .25s; } .ai-nav-btn:last-child { border-bottom: 0; } .ai-nav-btn::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--gold); transform: scaleY(0); transition: transform .25s; } .ai-nav-btn:hover { color: var(--white); background: rgba(255,255,255,.025); } .ai-nav-btn.is-active { color: var(--white); background: linear-gradient(90deg, rgba(201,168,106,.12), rgba(201,168,106,.025)); } .ai-nav-btn.is-active::before { transform: scaleY(1); } .ai-nav-num { font-family: var(--serif); font-size: 1.15rem; color: var(--gold); } .ai-nav-btn > span:last-child { min-width: 0; } .ai-nav-btn b { display: block; overflow: hidden; font-size: 12px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .ai-nav-btn small { display: block; overflow: hidden; margin-top: 3px; color: var(--dim-2); font-size: 9.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .ai-stage { position: relative; min-width: 0; min-height: 720px; overflow: hidden; border: 1px solid var(--ai-line); background: linear-gradient(135deg, rgba(255,255,255,.018), transparent 35%), rgba(13,14,16,.88); box-shadow: 0 36px 100px rgba(0,0,0,.3); } .ai-stage-bar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 18px; padding: 11px clamp(17px,2.2vw,28px); border-bottom: 1px solid var(--ai-line); background: rgba(255,255,255,.018); color: var(--dim); font-size: 9.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; } .ai-stage-bar > div { display: inline-flex; align-items: center; gap: 11px; } .ai-demo-mark { padding: 4px 8px; border: 1px solid rgba(201,168,106,.24); color: var(--gold); font-size: 8.5px; letter-spacing: .18em; } .ai-panel { padding: clamp(24px,3.5vw,48px); animation: aiPanelIn .42s cubic-bezier(.2,.8,.2,1); } .ai-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: clamp(25px,3.4vw,40px); } .ai-panel-head h2 { max-width: 780px; margin-top: 10px; font-size: clamp(1.75rem,3vw,2.75rem); line-height: 1.08; } .ai-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-size: 9.5px; font-weight: 700; letter-spacing: .17em; line-height: 1.4; text-transform: uppercase; } .ai-tag::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .65; } .ai-text-btn { flex: none; padding: 7px 0; border: 0; border-bottom: 1px solid var(--ai-line-strong); color: var(--dim); background: transparent; font: 600 10px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s; } .ai-text-btn:hover { color: var(--gold); border-color: var(--gold); } /* Общие карточки и элементы управления */ .ai-chat-card, .ai-lead-card, .ai-control-card, .ai-document, .ai-prompt-card, .ai-answer-card, .ai-call-card, .ai-call-summary, .ai-estimate-result, .ai-match-controls { border: 1px solid var(--ai-line); background: var(--ai-surface); } .ai-lab label { color: var(--dim); font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; } .ai-lab input:not([type=range]):not([type=checkbox]):not([type=radio]), .ai-lab select, .ai-lab textarea { width: 100%; border: 1px solid var(--ai-line); border-radius: 0; color: var(--white); background: #101115; font: 400 14px/1.6 var(--sans); caret-color: var(--gold); transition: border-color .2s, background .2s, box-shadow .2s; } .ai-lab input:not([type=range]):not([type=checkbox]):not([type=radio]), .ai-lab select { min-height: 48px; padding: 11px 14px; } .ai-lab textarea { min-height: 128px; padding: 14px 16px; resize: vertical; } .ai-lab select { appearance: none; padding-right: 42px; background-image: linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position: calc(100% - 18px) 21px,calc(100% - 13px) 21px; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; } .ai-lab select option { color: var(--white); background: #151619; } .ai-lab input::placeholder, .ai-lab textarea::placeholder { color: var(--dim-2); } .ai-lab input:hover, .ai-lab select:hover, .ai-lab textarea:hover { border-color: var(--line-2); } .ai-lab input:focus, .ai-lab select:focus, .ai-lab textarea:focus { outline: 0; border-color: var(--gold); background-color: #131419; box-shadow: 0 0 0 3px rgba(201,168,106,.09); } .ai-lab input[type=file] { padding: 6px; color: var(--dim); } .ai-lab input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 1px solid var(--ai-line-strong); color: var(--gold); background: transparent; font: 650 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .ai-lab input[type=range] { appearance: none; width: 100%; height: 2px; outline: none; background: linear-gradient(90deg,var(--gold),rgba(255,255,255,.15)); cursor: pointer; } .ai-lab input[type=range]::-webkit-slider-thumb { appearance: none; width: 17px; height: 17px; border: 3px solid #18191c; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px var(--gold); } .ai-lab input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid #18191c; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px var(--gold); } .ai-lab button:disabled, .ai-lab input:disabled, .ai-lab select:disabled, .ai-lab textarea:disabled { cursor: not-allowed; opacity: .48; } .ai-lab .btn { isolation: isolate; justify-content: center; } .ai-lab .btn:focus-visible, .ai-lab button:focus-visible, .ai-lab a:focus-visible, .ai-lab input:focus-visible, .ai-lab select:focus-visible, .ai-lab textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .ai-file-drop { display: grid; place-items: center; min-height: 150px; padding: 24px; border: 1px dashed var(--ai-line-strong); color: var(--dim); background: rgba(201,168,106,.025); text-align: center; } .ai-file-drop.is-dragging { border-color: var(--gold); color: var(--white); background: rgba(201,168,106,.08); } .ai-record-control { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--ai-line); background: rgba(255,255,255,.018); } .ai-record-btn { min-height: 46px; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 14px; border: 1px solid rgba(215,124,114,.45); color: var(--ai-bad); background: rgba(215,124,114,.08); font: 650 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .ai-record-btn > i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: currentColor; } .ai-record-btn.is-recording > i { border-radius: 2px; animation: aiRecord 1.2s ease-in-out infinite; } /* 01 — консультант */ .ai-consult-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(250px,.8fr); gap: 18px; } .ai-chat-card { display: flex; flex-direction: column; min-width: 0; min-height: 565px; overflow: hidden; } .ai-chat-top { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 12px 16px; border-bottom: 1px solid var(--ai-line); background: rgba(255,255,255,.018); } .ai-avatar { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font: 400 20px/1 var(--serif); } .ai-chat-top b { display: block; font-size: 12px; font-weight: 650; } .ai-chat-top small { display: flex; align-items: center; gap: 7px; margin-top: 2px; color: var(--dim-2); font-size: 9.5px; } .ai-chat-top small i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(201,168,106,.35); } .ai-chat { flex: 1; min-height: 360px; max-height: 440px; overflow: auto; padding: 22px 18px; scrollbar-width: thin; scrollbar-color: var(--ai-line-strong) transparent; } .ai-msg, .ai-message { width: fit-content; max-width: min(88%,570px); margin: 0 0 12px; padding: 11px 14px; border: 1px solid var(--ai-line); color: #ddd9d2; background: #17181c; font-size: 13px; line-height: 1.55; animation: aiMessageIn .3s ease both; } .ai-msg b, .ai-message b { color: var(--white); } .ai-msg.is-user, .ai-msg.user, .ai-msg.ai-user, .ai-message.is-user, .ai-message.user, .ai-message[data-role=user] { margin-left: auto; border-color: rgba(201,168,106,.28); color: #f2ede3; background: rgba(201,168,106,.13); } .ai-msg small, .ai-message small { display: block; margin-top: 5px; color: var(--dim-2); font-size: 9px; } .ai-typing { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 13px 15px; border: 1px solid var(--ai-line); background: #17181c; } .ai-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--dim); animation: aiTyping 1s ease-in-out infinite; } .ai-typing i:nth-child(2) { animation-delay: .14s; }.ai-typing i:nth-child(3) { animation-delay: .28s; } .ai-replies { display: flex; flex-wrap: wrap; gap: 8px; min-height: 64px; padding: 11px 14px 14px; border-top: 1px solid var(--ai-line); background: rgba(7,8,10,.48); } .ai-replies:empty { min-height: 0; padding-block: 0; border-top-color: transparent; } .ai-replies button, .ai-chip-row button { min-height: 36px; padding: 8px 12px; border: 1px solid var(--ai-line-strong); color: var(--gold); background: rgba(201,168,106,.035); font: 600 10.5px/1.35 var(--sans); cursor: pointer; transition: color .2s, border-color .2s, background .2s, transform .2s; } .ai-replies button:hover, .ai-chip-row button:hover { border-color: var(--gold); color: #0a0a0b; background: var(--gold); transform: translateY(-1px); } .ai-chat-compose { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: end; gap: 9px; padding: 12px 14px 14px; border-top: 1px solid var(--ai-line); background: rgba(7,8,10,.65); } .ai-lab .ai-chat-compose textarea { min-height: 44px; max-height: 116px; padding: 10px 13px; resize: none; line-height: 1.45; } .ai-chat-compose button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--gold); color: #0a0a0b; background: var(--gold); font: 500 20px/1 var(--sans); cursor: pointer; transition: background .2s, border-color .2s, transform .2s; } .ai-chat-compose button:hover { border-color: var(--white); background: var(--white); transform: translateY(-1px); } .ai-lead-card { min-width: 0; min-height: 565px; padding: 23px; background: linear-gradient(150deg, rgba(201,168,106,.065), transparent 42%), var(--ai-surface); } .ai-lead-card h3 { margin: 11px 0 22px; font-size: 1.65rem; } .ai-lead-empty { display: grid; min-height: 320px; place-content: center; padding: 26px; border: 1px dashed var(--ai-line); text-align: center; } .ai-lead-empty::before { content: "···"; color: var(--gold); font: 300 2.2rem/1 var(--serif); letter-spacing: .18em; } .ai-lead-empty span { margin-top: 12px; font-size: 12px; font-weight: 600; } .ai-lead-empty p { margin-top: 7px; color: var(--dim-2); font-size: 11px; line-height: 1.6; } .ai-lead-ready { animation: aiMessageIn .45s ease both; } .ai-score { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; border-bottom: 1px solid var(--ai-line); } .ai-score b { color: var(--gold); font: 300 3.25rem/.8 var(--serif); } .ai-score span { color: var(--dim); font-size: 9px; font-weight: 650; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; } .ai-lead-ready dl { display: grid; gap: 0; margin: 13px 0 18px; } .ai-lead-ready dl > div { display: grid; grid-template-columns: minmax(72px,.75fr) 1.25fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ai-line); } .ai-lead-ready dt { color: var(--dim-2); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; } .ai-lead-ready dd { color: var(--white); font-size: 11px; font-weight: 550; text-align: right; } .ai-lead-route { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid rgba(145,189,145,.22); background: rgba(145,189,145,.055); } .ai-lead-route > span { color: var(--ai-good); font-size: 20px; } .ai-lead-route b, .ai-lead-route small { display: block; } .ai-lead-route b { font-size: 10.5px; }.ai-lead-route small { margin-top: 2px; color: var(--dim-2); font-size: 8.5px; line-height: 1.35; } /* 02 — коммерческое предложение */ .ai-proposal-grid { display: grid; grid-template-columns: minmax(300px,.82fr) minmax(390px,1.18fr); align-items: start; gap: 22px; } .ai-control-card { display: grid; gap: 17px; padding: 22px; } .ai-control-card label { display: grid; gap: 8px; } .ai-control-card > p { color: var(--dim-2); font-size: 10.5px; line-height: 1.6; } .ai-proposal-source { padding: 14px 15px; border: 1px solid var(--ai-line-strong); border-left: 2px solid var(--gold); background: rgba(201,168,106,.045); } .ai-proposal-source b { display: block; margin-bottom: 6px; color: var(--gold); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; } .ai-proposal-source p { color: var(--dim); font-size: 10.5px; line-height: 1.65; } .ai-proposal-import { min-height: 44px; } .ai-proposal-lead-status { margin-top: -9px; padding: 0 2px; color: var(--dim) !important; font-size: 9.5px !important; } .ai-control-card #aiProposalBrief { min-height: 108px; } .ai-proposal-more { border-block: 1px solid var(--ai-line); } .ai-proposal-more summary { position: relative; padding: 13px 27px 13px 0; color: var(--gold); font-size: 9.5px; font-weight: 650; letter-spacing: .1em; list-style: none; text-transform: uppercase; cursor: pointer; } .ai-proposal-more summary::-webkit-details-marker { display: none; } .ai-proposal-more summary::after { content: "+"; position: absolute; top: 11px; right: 2px; color: var(--gold); font: 400 18px/1 var(--serif); } .ai-proposal-more[open] summary::after { content: "−"; } .ai-proposal-more summary span { display: block; margin-top: 4px; color: var(--dim-2); font-size: 8px; letter-spacing: .04em; text-transform: none; } .ai-proposal-more > div { display: grid; gap: 14px; padding: 2px 0 17px; } .ai-document { min-height: 650px; padding: clamp(22px,3vw,42px); color: #22201d; background: #e8e3d9; box-shadow: 0 25px 60px rgba(0,0,0,.28); } .ai-document > header { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding-bottom: 18px; border-bottom: 1px solid rgba(34,32,29,.18); } .ai-document .brand-mark { width: 38px; height: 38px; border-color: #8b6c37; color: #765724; } .ai-document > header b, .ai-document > header small { display: block; } .ai-document > header b { font: 500 14px/1.1 var(--serif); }.ai-document > header small { margin-top: 3px; color: #6e685f; font: 650 7px/1.2 var(--sans); letter-spacing: .15em; text-transform: uppercase; } .ai-document > header em { color: #777067; font: normal 9px/1 var(--sans); } .ai-doc-hero { padding: clamp(28px,4vw,50px) 0 25px; } .ai-doc-hero > span { color: #6e685f; font: 600 9px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; } .ai-doc-hero > span b { color: #8b6c37; } .ai-doc-hero h3 { max-width: 500px; margin-top: 11px; color: #25211c; font-size: clamp(2rem,3.5vw,3.2rem); } .ai-doc-project { display: grid; grid-template-columns: minmax(150px,1fr) 1fr; align-items: stretch; gap: 20px; } .ai-doc-photo { min-height: 180px; background-position: center; background-size: cover; } .ai-doc-project > div:last-child { display: flex; flex-direction: column; justify-content: center; padding: 15px 0; border-block: 1px solid rgba(34,32,29,.16); } .ai-doc-project small { color: #777067; font: 650 8px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; } .ai-doc-project h4 { margin: 10px 0 8px; color: #25211c; font-size: 1.7rem; } .ai-doc-project p { color: #625d55; font-size: 10px; line-height: 1.6; } .ai-doc-price { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 7px 22px; margin-top: 24px; padding: 19px 0; border-block: 1px solid rgba(34,32,29,.18); } .ai-doc-price > span { color: #6e685f; font: 650 8px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; } .ai-doc-price b { color: #765724; font: 400 clamp(1.65rem,3vw,2.35rem)/1 var(--serif); } .ai-doc-price small { grid-column: 1/-1; color: #777067; font-size: 8.5px; } .ai-document > footer { display: flex; justify-content: space-between; margin-top: 22px; color: #777067; font: 650 7.5px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; } .ai-document > footer b { color: #8b6c37; } .ai-doc-copy { display: grid; gap: 13px; margin-top: 22px; color: #514c45; font-size: 9.5px; line-height: 1.62; } .ai-doc-copy p + p { margin-top: 6px; } .ai-doc-copy h4 { margin-bottom: 5px; color: #29251f; font-size: 1.05rem; } .ai-doc-intro { padding: 13px 15px; border-left: 2px solid #9a783f; background: rgba(117,87,36,.055); color: #39352f; font-size: 10.5px; } .ai-doc-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; list-style: none; } .ai-doc-benefits li { position: relative; padding: 7px 0 7px 14px; border-bottom: 1px solid rgba(34,32,29,.12); } .ai-doc-benefits li::before { content: "✓"; position: absolute; left: 0; color: #85652f; font-weight: 700; } .ai-doc-scope, .ai-doc-questions, .ai-doc-disclaimer, .ai-doc-next, .ai-doc-price-note { padding-top: 11px; border-top: 1px solid rgba(34,32,29,.15); } .ai-doc-scope > b, .ai-doc-questions > b, .ai-doc-disclaimer > b, .ai-doc-next > b, .ai-doc-price-note > b { display: block; margin-bottom: 6px; color: #765724; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; } .ai-doc-scope ul, .ai-doc-questions ul, .ai-doc-disclaimer ul { display: grid; gap: 4px; padding-left: 16px; } .ai-doc-next { padding: 12px 14px; border: 1px solid rgba(117,87,36,.25); background: rgba(117,87,36,.065); } .ai-doc-disclaimer { color: #746d64; font-size: 8.5px; } .ai-document .ai-inline-notice { border-color: rgba(34,32,29,.18); color: #625d55; background: rgba(34,32,29,.035); } /* 03 — помощник руководителя */ .ai-copilot { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 18px; } .ai-prompt-card { padding: clamp(18px,2.4vw,28px); } .ai-prompt-card > label { display: block; margin-bottom: 10px; } .ai-chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 18px; } .ai-answer-card { min-height: 420px; overflow: hidden; } .ai-answer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 10px 16px; border-bottom: 1px solid var(--ai-line); color: var(--dim-2); font-size: 8.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; } .ai-answer-head button { padding: 5px 0; border: 0; border-bottom: 1px solid var(--ai-line-strong); color: var(--gold); background: transparent; font: inherit; cursor: pointer; } .ai-answer-text { min-height: 245px; padding: clamp(20px,2.8vw,32px); color: #ddd9d2; font-size: 13.5px; line-height: 1.8; white-space: pre-line; } .ai-answer-text:empty::before { content: "Ответ появится здесь"; color: var(--dim-2); } .ai-answer-text.is-loading, .ai-loading-lines { color: transparent; background: repeating-linear-gradient(180deg, transparent 0 14px, rgba(255,255,255,.055) 14px 23px, transparent 23px 31px); animation: aiShimmer 1.5s linear infinite; } .ai-sources { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 18px 18px; padding-top: 15px; border-top: 1px solid var(--ai-line); } .ai-sources b { width: 100%; margin-bottom: 2px; color: var(--dim-2); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; } .ai-sources span { padding: 5px 8px; border: 1px solid var(--ai-line); color: var(--dim); font-size: 8.5px; } /* 04 — разбор звонка */ .ai-call-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(240px,.65fr); gap: 18px; } .ai-call-card { min-height: 480px; overflow: hidden; } .ai-audio-controls { display: flex; align-items: center; gap: 10px; padding: 13px 17px; border-bottom: 1px solid var(--ai-line); background: rgba(255,255,255,.018); } .ai-audio-controls > span { color: var(--dim-2); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; } .ai-audio-file { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 46px; padding: 7px 12px; border: 1px dashed var(--ai-line-strong); color: var(--gold) !important; cursor: pointer; transition: border-color .2s, background .2s; } .ai-audio-file:hover { border-color: var(--gold); background: rgba(201,168,106,.05); } .ai-audio-file input { position: absolute; width: 1px !important; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .ai-audio-file > span { overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; } .ai-audio-file > small { overflow: hidden; margin-top: 3px; color: var(--dim-2); font-size: 8px; font-weight: 500; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; } .ai-audio-controls > .btn { min-height: 46px; padding: 11px 16px; font-size: 9.5px; } .ai-privacy-note { margin-top: 10px; color: var(--dim-2); font-size: 9.5px; line-height: 1.55; } .ai-call-player { display: flex; align-items: center; gap: 14px; min-height: 70px; padding: 13px 17px; border-bottom: 1px solid var(--ai-line); } .ai-call-player button { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding-left: 2px; border: 1px solid var(--gold); border-radius: 50%; color: #0a0a0b; background: var(--gold); cursor: pointer; } .ai-call-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--ai-line-strong); border-radius: 50%; color: var(--gold); background: rgba(201,168,106,.08); font-size: 17px; } .ai-call-player b, .ai-call-player small { display: block; }.ai-call-player b { font-size: 11.5px; }.ai-call-player small { margin-top: 3px; color: var(--dim-2); font-size: 9px; font-variant-numeric: tabular-nums; } .ai-wave { display: flex; align-items: center; gap: 3px; height: 76px; padding: 15px 18px; border-bottom: 1px solid var(--ai-line); } .ai-wave i { width: max(2px,calc((100% - 123px)/42)); height: var(--h); min-height: 3px; max-height: 45px; background: linear-gradient(var(--gold),rgba(201,168,106,.2)); transform-origin: center; opacity: .65; } .ai-call-card.is-playing .ai-wave i, .ai-wave.is-playing i { animation: aiWave .7s ease-in-out infinite alternate; animation-delay: calc(var(--h) * -10ms); } .ai-transcript { max-height: 330px; overflow: auto; padding: 18px; } .ai-transcript-line, .ai-transcript > p { display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ai-line); color: var(--dim); font-size: 11.5px; line-height: 1.55; } .ai-transcript-line time, .ai-transcript > p > b { color: var(--gold); font-size: 9px; font-weight: 650; letter-spacing: .04em; } .ai-transcript-line.is-current { color: var(--white); } .ai-call-summary { min-height: 480px; padding: 22px; } .ai-call-summary h3 { margin: 10px 0 22px; font-size: 1.65rem; } .ai-summary-placeholder { display: grid; gap: 10px; } .ai-summary-placeholder i { height: 44px; background: linear-gradient(90deg,rgba(255,255,255,.025),rgba(255,255,255,.07),rgba(255,255,255,.025)); background-size: 200% 100%; animation: aiShimmer 1.5s linear infinite; } .ai-call-summary-list, .ai-call-summary ul { display: grid; gap: 0; list-style: none; } .ai-call-summary-list li, .ai-call-summary ul li { padding: 11px 0 11px 17px; border-bottom: 1px solid var(--ai-line); color: var(--dim); font-size: 11.5px; line-height: 1.5; position: relative; } .ai-call-summary-list li::before, .ai-call-summary ul li::before { content: "→"; position: absolute; left: 0; color: var(--gold); } .ai-call-summary dl { margin-top: 16px; }.ai-call-summary dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ai-line); font-size: 10px; }.ai-call-summary dt { color: var(--dim-2); }.ai-call-summary dd { color: var(--white); text-align: right; } /* 05 — расчёт из фразы */ .ai-estimate-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.9fr); gap: 18px; } .ai-estimate-result { position: relative; min-height: 390px; padding: clamp(22px,3vw,34px); overflow: hidden; background: radial-gradient(circle at 100% 0,rgba(201,168,106,.1),transparent 45%),var(--ai-surface); } .ai-estimate-result h3 { margin: 13px 0 10px; font-size: 1.85rem; } .ai-estimate-result > p { max-width: 480px; color: var(--dim); font-size: 12px; line-height: 1.7; } .ai-param-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0; } .ai-param, .ai-param-list span { padding: 7px 10px; border: 1px solid var(--ai-line); color: #d8d4cd; background: rgba(255,255,255,.022); font-size: 10px; } .ai-param b, .ai-param-list span b { color: var(--gold); font-weight: 650; } .ai-estimate-price { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ai-line); } .ai-estimate-price small, .ai-estimate-price b, .ai-estimate-price span { display: block; } .ai-estimate-price small { color: var(--dim-2); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; } .ai-estimate-price b { margin: 7px 0; color: var(--gold); font: 300 clamp(2rem,4vw,3.2rem)/1 var(--serif); } .ai-estimate-price span { color: var(--dim); font-size: 10px; } .ai-estimate-fields { display: grid; margin-top: 19px; border-top: 1px solid var(--ai-line); } .ai-estimate-fields > div { display: grid; grid-template-columns: minmax(100px,.8fr) minmax(0,1.2fr); gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--ai-line); } .ai-estimate-fields dt { color: var(--dim-2); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; } .ai-estimate-fields dd { color: var(--white); font-size: 10.5px; font-weight: 600; text-align: right; } .ai-estimate-assumptions { margin-top: 13px; padding: 10px 12px; border-left: 2px solid var(--ai-warn); color: var(--dim) !important; background: rgba(208,162,92,.055); font-size: 9.5px !important; } .ai-estimate-notes { margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--ai-line); } .ai-estimate-notes > b { display: block; margin-bottom: 7px; color: var(--gold); font-size: 8.5px; letter-spacing: .11em; text-transform: uppercase; } .ai-estimate-notes > div { color: var(--dim); font-size: 10.5px; line-height: 1.65; } /* 06 — подбор проекта */ .ai-match-controls { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; align-items: end; gap: 20px; padding: 22px; } .ai-match-controls label { display: grid; gap: 13px; } .ai-match-controls label > span { display: flex; justify-content: space-between; gap: 10px; } .ai-match-controls label b { color: var(--gold); font-size: 11px; } .ai-match-controls .btn { min-height: 48px; padding-inline: 22px; } .ai-match-result { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-top: 18px; } .ai-match-result:empty { display: grid; grid-template-columns: 1fr; min-height: 210px; place-items: center; border: 1px dashed var(--ai-line); } .ai-match-result:empty::before { content: "Подходящие проекты появятся после подбора"; max-width: 250px; color: var(--dim-2); font-size: 11px; text-align: center; } .ai-match-overview, .ai-match-followup { grid-column: 1/-1; padding: 15px 17px; border: 1px solid var(--ai-line); color: var(--dim); background: rgba(255,255,255,.018); font-size: 10.5px; line-height: 1.65; } .ai-match-overview { border-left-color: var(--gold); } .ai-match-overview h4, .ai-match-followup h4 { margin-bottom: 7px; color: var(--white); font-size: 1.1rem; } .ai-match-followup > b { display: block; margin-bottom: 7px; color: var(--gold); font-size: 8.5px; letter-spacing: .11em; text-transform: uppercase; } .ai-match-followup ul { display: grid; gap: 5px; padding-left: 17px; } .ai-match-followup p { margin-top: 10px; color: var(--dim-2); font-size: 9.5px; } .ai-match-card { min-width: 0; overflow: hidden; border: 1px solid var(--ai-line); background: var(--ai-surface); animation: aiMessageIn .4s ease both; } .ai-match-card:nth-child(2) { animation-delay: .07s; }.ai-match-card:nth-child(3) { animation-delay: .14s; } .ai-match-card img, .ai-match-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; background-position: center; background-size: cover; filter: saturate(.78) contrast(1.04); } .ai-match-card > div:not(.ai-match-photo) { padding: 15px; } .ai-match-card h3 { overflow: hidden; margin: 6px 0 9px; font-size: 1.35rem; text-overflow: ellipsis; white-space: nowrap; } .ai-match-card p { color: var(--dim); font-size: 9.5px; line-height: 1.55; } .ai-match-card small { color: var(--gold); font-size: 8px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; } .ai-match-score { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--ai-line); color: var(--dim-2); font-size: 8.5px; } .ai-match-score b { color: var(--ai-good); font-size: 12px; } /* Статусы запросов: применяются к панели/сцене или отдельному блоку */ .ai-panel.is-loading, .ai-stage.is-loading { cursor: progress; } .ai-panel.is-loading::after, .ai-stage.is-loading::after { content: "ИИ готовит результат…"; position: absolute; z-index: 8; top: 64px; right: 18px; padding: 8px 11px 8px 28px; border: 1px solid var(--ai-line); color: var(--dim); background: rgba(10,11,13,.9); font-size: 8.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; } .ai-panel.is-loading::before, .ai-stage.is-loading::before { content: ""; position: absolute; z-index: 9; top: 75px; right: 122px; width: 8px; height: 8px; border: 1px solid var(--gold); border-top-color: transparent; border-radius: 50%; animation: aiSpin .7s linear infinite; } .ai-state, .ai-error, .ai-offline-banner { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border: 1px solid var(--ai-line); color: var(--dim); background: rgba(255,255,255,.02); font-size: 11px; line-height: 1.55; } .ai-state::before, .ai-error::before, .ai-offline-banner::before { content: "i"; width: 19px; height: 19px; flex: none; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 600 10px/1 var(--serif); } .ai-error, .is-error > .ai-state { border-color: rgba(215,124,114,.28); color: var(--ai-bad); background: rgba(215,124,114,.055); } .ai-error::before, .is-error > .ai-state::before { content: "!"; } .ai-offline-banner, .is-offline > .ai-state { border-color: rgba(208,162,92,.28); color: var(--ai-warn); background: rgba(208,162,92,.055); } .ai-offline-banner::before, .is-offline > .ai-state::before { content: "×"; } .ai-panel.is-offline .btn, .ai-panel.is-offline button[data-ai-send], .ai-stage.is-offline .btn { opacity: .5; pointer-events: none; } .ai-inline-notice { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--ai-line); color: var(--dim); background: rgba(255,255,255,.02); font-size: 10.5px; line-height: 1.5; } .ai-inline-notice::before { content: "i"; width: 18px; height: 18px; flex: none; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 600 9px/1 var(--sans); } .ai-inline-notice > p { margin: 0; color: inherit; } .ai-inline-notice--info { border-color: rgba(134,185,178,.27); color: var(--ai-cyan); background: rgba(134,185,178,.055); } .ai-inline-notice--loading { border-color: rgba(208,162,92,.27); color: var(--ai-warn); background: rgba(208,162,92,.055); } .ai-inline-notice--loading::before { content: ""; border-color: currentColor; border-top-color: transparent; animation: aiSpin .7s linear infinite; } .ai-inline-notice--success { border-color: rgba(145,189,145,.27); color: var(--ai-good); background: rgba(145,189,145,.055); } .ai-inline-notice--success::before { content: "✓"; } .ai-inline-notice--error { border-color: rgba(215,124,114,.3); color: var(--ai-bad); background: rgba(215,124,114,.06); } .ai-inline-notice--error::before { content: "!"; } .ai-form-status { min-height: 0; color: var(--dim); font-size: 10px; } .ai-form-status:not(:empty) { margin-top: 2px; } .ai-form-status .ai-inline-notice { padding: 10px 12px; } .ai-safe-list { display: grid; gap: 6px; margin: 8px 0; padding-left: 17px; color: inherit; } .ai-safe-list li { padding-left: 2px; } .ai-safe-list li::marker { color: var(--gold); } .ai-safe-list + p { margin-top: 9px; } .ai-chat-projects { display: grid; gap: 7px; margin-top: 11px; list-style: none; } .ai-chat-projects li { padding: 8px 10px; border-left: 2px solid var(--gold); color: var(--white); background: rgba(201,168,106,.055); } .ai-chat-projects strong, .ai-chat-projects small { display: block; } .ai-chat-projects strong { font-size: 10.5px; } .ai-chat-projects small { margin-top: 3px; color: var(--dim); font-size: 9px; line-height: 1.5; } .ai-chat-project-link { display: inline-flex; align-items: center; min-height: 28px; margin-top: 8px; padding: 5px 8px; border: 1px solid var(--ai-line-strong); color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: color .2s, border-color .2s, background .2s; } .ai-chat-project-link:hover { border-color: var(--gold); color: var(--white); background: rgba(201,168,106,.09); } .ai-utterance > p { color: var(--dim); font-size: 11.5px; line-height: 1.55; } .ai-transcript-text { margin-top: 12px; color: var(--dim); font-size: 11.5px; line-height: 1.65; } .ai-transcript-text p + p, .ai-call-summary-text p + p { margin-top: 9px; } .ai-call-summary-text { margin-top: 15px; color: var(--dim); font-size: 11px; line-height: 1.7; } .ai-call-summary-text h4 { margin: 14px 0 6px; color: var(--white); font-size: 1.1rem; } .ai-skeleton { position: relative; min-height: 12px; overflow: hidden; background: rgba(255,255,255,.045); } .ai-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); transform: translateX(-100%); animation: aiSkeleton 1.4s infinite; } .ai-lab-note { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 22px; padding-top: 28px; padding-bottom: clamp(60px,8vh,100px); border-top: 1px solid var(--ai-line); } .ai-lab-note p { max-width: 760px; color: var(--dim); font-size: 11px; line-height: 1.65; } @keyframes aiPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes aiMessageIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @keyframes aiTyping { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } @keyframes aiWave { from { transform: scaleY(.35); opacity: .38; } to { transform: scaleY(1); opacity: .9; } } @keyframes aiShimmer { to { background-position: -200% 0; } } @keyframes aiSkeleton { to { transform: translateX(100%); } } @keyframes aiSpin { to { transform: rotate(360deg); } } @keyframes aiRecord { 50% { opacity: .35; transform: scale(.82); } } @media (max-width: 1000px) { .ai-lab-hero { grid-template-columns: 1fr; gap: 30px; } .ai-lab-meta { grid-template-columns: repeat(3,1fr); } .ai-lab-meta > span { padding-inline: 12px; border-right: 1px solid var(--ai-line); } .ai-shell { grid-template-columns: 1fr; } .ai-nav { position: sticky; top: 88px; z-index: 20; display: flex; overflow-x: auto; scrollbar-width: none; backdrop-filter: blur(20px); } .ai-nav-head { display: none; } .ai-nav-btn { flex: 0 0 190px; min-height: 60px; border-right: 1px solid var(--ai-line); border-bottom: 0; } .ai-nav-btn::before { inset: auto 0 0; width: auto; height: 2px; transform: scaleX(0); } .ai-nav-btn.is-active::before { transform: scaleX(1); } .ai-consult-grid, .ai-call-grid { grid-template-columns: minmax(0,1.25fr) minmax(230px,.75fr); } .ai-match-controls { grid-template-columns: 1fr 1fr; } .ai-match-controls .btn { width: 100%; } } @media (max-width: 700px) { .ai-lab-hero { padding-top: 128px; padding-bottom: 40px; } .ai-lab-hero h1 br { display: block; } .ai-lab-meta { grid-template-columns: 1fr; } .ai-lab-meta > span { padding-inline: 2px; border-right: 0; } .ai-stage { min-height: 0; } .ai-stage-bar { min-height: 43px; } .ai-panel { padding: 24px 18px 28px; } .ai-panel-head { flex-direction: column; gap: 12px; } .ai-consult-grid, .ai-proposal-grid, .ai-copilot, .ai-call-grid, .ai-estimate-grid { grid-template-columns: 1fr; } .ai-chat-card, .ai-lead-card { min-height: auto; } .ai-chat { min-height: 330px; } .ai-lead-empty { min-height: 190px; } .ai-document { min-height: 590px; } .ai-doc-benefits { grid-template-columns: 1fr; } .ai-call-summary { min-height: 330px; } .ai-audio-controls { display: grid; grid-template-columns: 1fr auto; } .ai-audio-controls > .ai-audio-file { grid-column: 1/-1; } .ai-audio-controls > span { display: none; } .ai-match-result { grid-template-columns: 1fr; } .ai-match-card { display: grid; grid-template-columns: 140px minmax(0,1fr); } .ai-match-card img, .ai-match-photo { height: 100%; min-height: 160px; aspect-ratio: auto; } .ai-lab-note { grid-template-columns: 1fr; align-items: start; } .ai-lab-note .btn { justify-self: start; } } @media (max-width: 480px) { .ai-lab-hero { padding-top: 116px; } .ai-lab-hero h1 { font-size: clamp(2.35rem,12vw,3.5rem); } .ai-shell { padding-inline: 0; } .ai-nav { top: 88px; margin-inline: var(--gut); } .ai-nav-btn { flex-basis: 170px; grid-template-columns: 25px minmax(0,1fr); padding-inline: 12px; } .ai-stage { border-inline: 0; } .ai-stage-bar { padding-inline: var(--gut); } .ai-demo-mark { display: none; } .ai-panel { padding-inline: var(--gut); } .ai-panel-head h2 { font-size: 1.75rem; } .ai-replies { display: grid; grid-template-columns: 1fr; } .ai-replies button { width: 100%; } .ai-doc-project { grid-template-columns: 1fr; gap: 12px; } .ai-doc-photo { min-height: 150px; } .ai-doc-project > div:last-child { padding-block: 12px; } .ai-doc-price { grid-template-columns: 1fr; } .ai-doc-price b { margin-top: 0; } .ai-match-controls { grid-template-columns: 1fr; } .ai-match-card { grid-template-columns: 112px minmax(0,1fr); } .ai-transcript-line, .ai-transcript > p { grid-template-columns: 48px minmax(0,1fr); gap: 8px; } .ai-estimate-fields > div { grid-template-columns: 1fr; gap: 3px; } .ai-estimate-fields dd { text-align: left; } .ai-audio-controls { grid-template-columns: 1fr; } .ai-audio-controls > .btn, .ai-audio-controls > .ai-record-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .ai-panel, .ai-msg, .ai-message, .ai-match-card, .ai-lead-ready { animation: none !important; } .ai-wave i, .ai-typing i, .ai-skeleton::after, .ai-summary-placeholder i, .ai-record-btn > i { animation: none !important; } } @media print { body:has(.ai-document) { background: #fff !important; } body:has(.ai-document) * { visibility: hidden !important; } body:has(.ai-document) .ai-document, body:has(.ai-document) .ai-document * { visibility: visible !important; } body:has(.ai-document) .ai-document { position: absolute; inset: 0 auto auto 0; width: 100%; min-height: 0; border: 0; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; } body:has(.ai-document) .ai-doc-copy { break-inside: auto; } body:has(.ai-document) .ai-doc-intro, body:has(.ai-document) .ai-doc-benefits, body:has(.ai-document) .ai-doc-scope, body:has(.ai-document) .ai-doc-questions, body:has(.ai-document) .ai-doc-disclaimer, body:has(.ai-document) .ai-doc-next { break-inside: avoid; } } /* ============================================================ АДАПТИВ ============================================================ */ .lead-form { scroll-margin-top: 108px; } @media (max-width: 1000px) { .frame-split, .mort, .lead-split, .calc { grid-template-columns: 1fr; gap: 40px; } .pd-top { grid-template-columns: 1fr; gap: 28px; } .pd-side { position: static; } .proj-reel, .promo-reel, .rev-reel, .blog-grid, .grid3, .grid2 { grid-template-columns: 1fr 1fr; } #f2 .home-project-reel { grid-template-columns: none; grid-auto-columns: calc((100% - 22px) / 2); } .figures { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: 1fr 1fr; gap: 34px 0; } .calc-out { position: static; } .ft-top { grid-template-columns: repeat(2, minmax(0,1fr)); } .ft-top > * { min-width: 0; } } @media (min-width: 1001px) and (max-height: 820px) { #f2 .home-project-reel { grid-auto-columns: calc((100% - 44px) / 3); } #f2 .proj-head { margin-bottom: 24px; } #f2 .pcard-in { padding: 14px 20px 16px; } #f2 .pcard h3 { font-size: 1.42rem; margin: 5px 0 10px; } #f2 .pcard-specs { margin-bottom: 0; gap: 10px; font-size: 11.5px; } #f2 .pcard-foot { display: none; } #f2 .pcard-plan { bottom: 10px; right: 10px; padding: 7px 11px; } } @media (min-width: 1350px) and (max-width: 1399px) { .hd-nav { gap: 18px; } } @media (min-width: 1181px) and (max-width: 1349px) { .hd-nav { gap: 18px; } .hd-phone { display: none; } } @media (max-width: 1180px) { html.menu-open { overflow: hidden; } .hd-nav, .hd-phone { display: none; } .hd-side { margin-left: auto; } .burger { display: block; min-width: 44px; min-height: 44px; } .hd-nav.open { display: flex; flex-direction: column; position: absolute; top: 88px; left: 0; right: 0; max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; background: rgba(10,10,11,.97); padding: 16px var(--gut); gap: 4px; border-bottom: 1px solid var(--line); } .hd-nav.open a { display: flex; align-items: center; min-height: 44px; } .fab { display: block; } } @media (max-width: 620px) { .hd-side > .btn { display: none; } .hd-in { gap: 16px; } .frame-num { display: none; } #f3 .fs-list { gap: 0; margin-top: 16px; border-top: 1px solid var(--line); } #f3 .fs-list li { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .94rem; line-height: 1.5; } #f3 .fs-list li b { min-width: 0; font-size: 1.02rem; line-height: 1.45; } .ft-top { gap: 36px 22px; } .ft-brand { grid-column: 1 / -1; } .ft-brand p { max-width: 100%; } .ft a { overflow-wrap: anywhere; } .proj-reel, .promo-reel, .rev-reel, .blog-grid, .grid3, .grid2, .figures, .steps, .checks, .mort-rates { grid-template-columns: 1fr; } #f2 .home-project-reel { grid-template-columns: none; grid-auto-columns: 100%; } #f2 .home-project-reel { padding-bottom: 4px; } #f2 .proj-head { margin-bottom: 24px; } #f2 .home-project-nav { order: 3; width: 100%; justify-content: flex-end; } #f2 .pcard-arrow { display: none; } .step { border: none; padding-left: 0; } .frame { padding: 100px 0 80px; } .hero-meta { gap: 26px; } .hero-meta div b { font-size: 1.9rem; } .hero-guarantee p { max-width: 330px; } #f1 .scroll-hint { display: none; } .qz-opts:not(.qz-cards):not(.qz-stack) { display: grid; grid-template-columns: 1fr 1fr; } .lb { padding: 0; } .lb-box { width: 100%; height: 100vh; height: 100dvh; border: 0; padding: 10px; } .lb-close { top: 8px; right: 8px; width: 38px; height: 38px; } .lb-head { margin-bottom: 7px; padding-right: 44px; } .lb-head .kicker { display: none; } .lb-title { margin-top: 2px; font-size: clamp(1.12rem,5vw,1.42rem); } .lb-plan { --plan-pad: 4px; } .lb-foot { display: block; margin-top: 8px; } .lb-note { display: none; } .lb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lb-actions .btn { width: 100%; padding-inline: 8px; justify-content: center; } .pd-gallery.is-render .pd-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 620px) and (max-height: 700px) { #f1.frame { padding-top: 130px; padding-bottom: 40px; } #f1 .mega { font-size: clamp(2.1rem,9.5vw,2.5rem); } #f1 .hero-copy h1 { margin: 6px 0 8px; } #f1 .hero-copy .lede { margin-bottom: 10px; font-size: .88rem; line-height: 1.45; } #f1 .btn { padding-block: 11px; } #f1 .hero-guarantee-slot { top: 82px; } #f1 .hero-guarantee img { width: 36px; height: 36px; } #f1 .hero-guarantee p { font-size: 10.5px; max-width: 210px; } #f1 .hero-meta { gap: 10px 18px; margin-top: 14px; padding-top: 12px; } #f1 .hero-meta div b { font-size: 1.45rem; } #f1 .hero-meta div span { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .rv { opacity: 1; transform: none; } .reel { scroll-snap-type: none; } } .brand-neutral { font-family: var(--sans); font-size: 15px; line-height: 1.3; color: var(--white); max-width: 120px; display: block; } /* Временный знак ТеремСтрой: дерево, тёплый металл и читаемый текст. */ .brand { gap: 10px; } .terem-mark { flex: 0 0 auto; } .terem-wordmark { display: flex; flex-direction: column; max-width: 205px; text-align: left; font-family: var(--sans); } .terem-wordmark b { color: #f4f1e9; font-size: 21px; line-height: 1.15; font-weight: 600; letter-spacing: .01em; } .terem-wordmark small { color: #c4a46c; font-size: 10px; line-height: 1.4; margin-top: 4px; } @media(max-width: 700px) { .terem-mark { width: 30px; height: 34px; } .terem-wordmark { max-width: 154px; } .terem-wordmark b { font-size: 18px; } .terem-wordmark small { font-size: 9px; } }