:root { --bg: #0C241A; --band: #0F2A1F; --panel: #123527; --text: #ECEFE6; --soft: #C9D3C9; --muted: #A7B7AA; --dim: #7E9384; --line: rgba(236,239,230,0.14); --line-strong: rgba(236,239,230,0.28); --green: #62B98A; --accent: #D8963A; --accent-hi: #E6A650; --on-accent: #17110A; --serif: "Spectral", Georgia, "Times New Roman", serif; --sans: "Onest", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", Menlo, Consolas, monospace; --pad: clamp(20px, 6.6vw, 96px); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; } h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; } ol, ul { list-style: none; } a { color: inherit; text-decoration: none; } a:hover { color: #F1C27D; } svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .serif { font-family: var(--serif); } .mono { font-family: var(--mono); } .muted { color: var(--muted); } .small { font-size: 12px; } .accent { color: var(--accent); } :target { scroll-margin-top: 90px; } /* наличие телефона: на класс no-phone или has-phone */ .no-phone .ph, .has-phone .nph { display: none !important; } .wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--pad); } section { padding-block: clamp(64px, 8.3vw, 120px); } .band { background: var(--band); border-top: 1px solid rgba(236,239,230,0.08); } .eyebrow { font-size: 12px; letter-spacing: 0.16em; color: var(--green); } /* кнопки */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; background: var(--accent); color: var(--on-accent); font: 600 16px/1.2 var(--sans); border: 0; border-radius: 2px; cursor: pointer; transition: background .2s; } .btn:hover { background: var(--accent-hi); color: var(--on-accent); } .btn svg { font-size: 19px; stroke-width: 1.8; } .btn--sm { padding: 13px 20px; font-size: 15px; } .btn--lg { padding: 20px 30px; font-size: 17px; } .btn--block { display: flex; width: 100%; } .btn[disabled] { opacity: .6; cursor: default; } .hero__actions .btn + .btn:not(.ph) { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); } .has-phone .hero__actions .btn + .btn:hover { background: rgba(236,239,230,0.06); } .no-phone .hero__actions .btn + .btn { background: var(--accent); color: var(--on-accent); box-shadow: none; } /* шапка */ .top { position: sticky; top: 0; z-index: 20; background: rgba(12,36,26,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(236,239,230,0.10); } .top__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 18px; } .brand { display: flex; flex-direction: column; gap: 3px; } .brand__name { font-size: 17px; font-weight: 500; } .brand__sub { font-size: 11px; letter-spacing: 0.18em; color: var(--muted); } .top__nav { display: flex; gap: 36px; font-size: 14px; color: var(--muted); } .top__cta { display: flex; align-items: center; gap: 22px; flex-shrink: 0; } .brand { min-width: 0; } .lbl-short { display: none; } .top__phone { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .top__num { font-size: 17px; font-weight: 500; } .top__phone .mono { font-size: 11px; } /* первый экран */ .hero { background: radial-gradient(55% 60% at 80% 30%, rgba(78,160,112,0.28), rgba(12,36,26,0) 70%), radial-gradient(30% 40% at 12% 90%, rgba(216,150,58,0.07), rgba(12,36,26,0) 70%); padding-block: clamp(40px, 6.6vw, 96px) clamp(56px, 7.8vw, 112px); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 80px; align-items: stretch; } .hero__text { display: flex; flex-direction: column; gap: 28px; padding-top: 12px; } .hero__title { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.04; font-weight: 300; letter-spacing: -0.015em; text-wrap: pretty; } .hero__title em { color: var(--muted); font-weight: 300; } .hero__lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--soft); max-width: 640px; text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; } .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); } .facts div { display: flex; flex-direction: column; gap: 6px; } .facts dt { font-size: 30px; line-height: 1.1; } .facts dd { font-size: 14px; color: var(--muted); } .portrait { position: relative; min-height: 600px; border: 1px solid rgba(236,239,230,0.16); background: repeating-linear-gradient(135deg, rgba(236,239,230,0.035) 0 1px, transparent 1px 14px), linear-gradient(180deg, #14392A, #0E2A1F); display: flex; align-items: center; justify-content: center; overflow: visible; } .portrait__mono { font-size: clamp(120px, 14vw, 220px); font-weight: 300; line-height: 1; color: rgba(236,239,230,0.10); letter-spacing: -0.04em; } .portrait__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .portrait__cap { position: absolute; left: -28px; bottom: 36px; display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; background: var(--bg); border: 1px solid rgba(236,239,230,0.16); } .portrait__cap span:first-child { font-size: 16px; font-weight: 500; } .portrait__cap .mono { font-size: 11px; letter-spacing: 0.06em; } /* заголовки разделов */ .head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 80px; align-items: end; margin-bottom: 64px; } .head > div, .head--single { display: flex; flex-direction: column; gap: 20px; } .head--single { margin-bottom: 64px; align-items: flex-start; } .head h2 { font-size: clamp(32px, 3.5vw, 50px); line-height: 1.08; font-weight: 300; text-wrap: pretty; } .head__note { font-size: 17px; color: var(--muted); text-wrap: pretty; } /* ситуации */ .cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(236,239,230,0.12); border: 1px solid rgba(236,239,230,0.12); } .case { display: flex; flex-direction: column; gap: 16px; padding: 40px 36px 36px; background: var(--band); } .case .idx { font-size: 12px; color: var(--green); } .case h3 { font-size: 27px; line-height: 1.18; font-weight: 400; } .case p:not(.mono) { font-size: 15.5px; line-height: 1.6; color: var(--muted); flex-grow: 1; } .case .tag { font-size: 11px; color: var(--dim); letter-spacing: 0.06em; } .price { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 48px; } .price p { font-size: 17px; color: var(--soft); max-width: 760px; } .price strong { color: var(--text); font-weight: 500; } /* шаги */ .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; } .step { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid rgba(236,239,230,0.22); } .step .mono { font-size: 12px; color: var(--green); } .step--free { border-top-color: var(--accent); } .step--free .mono { color: var(--accent); } .step h3 { font-size: 18px; font-weight: 500; line-height: 1.3; } .step p:not(.mono) { font-size: 14.5px; line-height: 1.6; color: var(--muted); } /* результаты */ .proof { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; } .card { display: flex; flex-direction: column; gap: 32px; padding: 44px; border: 1px solid var(--line); background: var(--bg); } .label { font-size: 11px; letter-spacing: 0.14em; color: var(--muted); } .stat { justify-content: space-between; } .stat__num { font-size: clamp(120px, 12.5vw, 180px); line-height: 0.85; font-weight: 300; color: var(--accent); } .stat__text { font-size: 18px; color: var(--soft); text-wrap: pretty; } .story__nums { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .story__nums div { display: flex; flex-direction: column; gap: 6px; } .story__nums .serif { font-size: clamp(44px, 4.4vw, 64px); line-height: 1; font-weight: 300; } .story__nums span { font-size: 14px; color: var(--muted); } .story__arrow { width: 72px; height: 24px; stroke: var(--green); stroke-width: 1.4; } .story__text { font-size: 16.5px; line-height: 1.65; color: var(--soft); text-wrap: pretty; } .media { display: flex; align-items: center; gap: 24px; margin-top: 24px; padding: 28px 44px; border: 1px solid var(--line); } .media .label { color: var(--green); } .media p:not(.label) { font-size: 17px; flex-grow: 1; } .media a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); white-space: nowrap; } /* обо мне */ .about { padding-block: clamp(72px, 9.7vw, 140px); } .about__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 80px; } .about__side { display: flex; flex-direction: column; gap: 20px; } .about__side h2 { font-size: clamp(32px, 3vw, 44px); line-height: 1.1; font-weight: 300; } .about__roles { font-size: 12px; line-height: 1.9; letter-spacing: 0.04em; } .about__main { display: flex; flex-direction: column; gap: 56px; } .about__quote { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.3; font-weight: 300; text-wrap: pretty; } .points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 56px; } .points li { display: flex; gap: 18px; } .points svg { font-size: 24px; stroke: var(--green); stroke-width: 1.5; margin-top: 2px; } .points div { display: flex; flex-direction: column; gap: 8px; } .points h3 { font-size: 18px; font-weight: 500; } .points p { font-size: 15.5px; line-height: 1.6; color: var(--muted); } /* заявка */ .contact { padding-top: 0; } .contact__box { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: start; padding: clamp(28px, 5.5vw, 80px); border: 1px solid rgba(236,239,230,0.16); background: radial-gradient(60% 80% at 90% 10%, rgba(78,160,112,0.30), rgba(19,64,49,0) 70%), var(--panel); } .contact__text { display: flex; flex-direction: column; gap: 24px; } .contact__text h2 { font-size: clamp(31px, 3.9vw, 56px); line-height: 1.06; font-weight: 300; text-wrap: pretty; } .contact__phone { display: flex; flex-direction: column; gap: 8px; } .contact__phone a { font-size: clamp(29px, 3.5vw, 50px); line-height: 1.05; } .contact__phone .mono { font-size: 12px; } .contact__hint { font-size: 17px; color: var(--soft); } .vkcard { display: flex; align-items: center; gap: 20px; margin-top: 8px; padding: 20px 20px 20px 24px; border: 1px solid var(--line-strong); background: rgba(12,36,26,0.45); transition: border-color .2s, background .2s; } .vkcard:hover { color: var(--text); border-color: var(--accent); background: rgba(12,36,26,0.7); } .vkcard__body { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; min-width: 0; } .vkcard__label { font-size: 11px; letter-spacing: 0.14em; color: var(--green); } .vkcard__title { font-size: 19px; font-weight: 500; } .vkcard__text { font-size: 14.5px; line-height: 1.5; color: var(--muted); } .vkcard__go { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--accent); color: var(--accent); flex-shrink: 0; transition: background .2s, color .2s; } .vkcard__go svg { font-size: 22px; stroke-width: 1.8; } .vkcard:hover .vkcard__go { background: var(--accent); color: var(--on-accent); } .lead { display: flex; flex-direction: column; gap: 18px; } .field { display: flex; flex-direction: column; gap: 8px; } .field span { font-size: 14px; color: var(--soft); } .field em { font-style: normal; color: var(--dim); } .field input, .field textarea { width: 100%; padding: 15px 16px; background: rgba(12,36,26,0.55); color: var(--text); border: 1px solid var(--line-strong); border-radius: 2px; font: 400 16px/1.4 var(--sans); outline: none; transition: border-color .2s; } .field textarea { resize: vertical; min-height: 104px; } .field input::placeholder, .field textarea::placeholder { color: var(--dim); } .field input:focus, .field textarea:focus { border-color: var(--accent); } .field.is-bad input { border-color: #E07A5F; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .check { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--muted); cursor: pointer; } .check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); flex-shrink: 0; } .check a { color: var(--soft); text-decoration: underline; text-underline-offset: 2px; } .check.is-bad span { color: #F0A18B; } .lead__status { min-height: 1.5em; font-size: 15px; color: var(--soft); } .lead__status.is-ok { color: var(--green); } .lead__status.is-err { color: #F0A18B; } .lead.is-sent .field, .lead.is-sent .check, .lead.is-sent button { display: none; } .lead.is-sent .lead__status { font-family: var(--serif); font-size: 26px; line-height: 1.3; font-weight: 300; } /* подвал */ .foot { border-top: 1px solid rgba(236,239,230,0.10); } .foot__row { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-block: 32px 40px; font-size: 12px; color: var(--dim); } .foot a:hover { color: var(--soft); } .dock { display: none; } /* планшет */ @media (max-width: 1180px) { .top__nav { display: none; } .hero__grid { gap: 48px; } .portrait { min-height: 520px; } .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; } .proof { grid-template-columns: minmax(0, 1fr); } .head { grid-template-columns: minmax(0, 1fr); gap: 20px; } .about__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .contact__box { grid-template-columns: minmax(0, 1fr); gap: 44px; } } /* телефон */ @media (max-width: 760px) { body { padding-bottom: 72px; } .top__row { padding-block: 12px; } .brand__name { font-size: 15px; } .brand__sub { font-size: 9.5px; } .top__phone { display: none; } .top .btn--sm { padding: 11px 14px; font-size: 14px; } .top .btn--sm span { display: none; } .no-phone .top .btn--sm .lbl-long { display: inline; } .top .btn--sm svg { font-size: 20px; } .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .hero__text { gap: 22px; padding-top: 0; } .eyebrow { font-size: 10.5px; line-height: 1.6; letter-spacing: 0.14em; } .hero__actions { flex-direction: column; } .hero__actions .btn { width: 100%; } .hero .small { text-align: center; } .facts { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; } .facts div { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 16px; border-bottom: 1px solid var(--line); } .facts dt { font-size: 24px; } .facts dd { font-size: 13.5px; text-align: right; } .portrait { min-height: 360px; order: 2; } .portrait__cap { left: 14px; bottom: 14px; padding: 12px 16px; } .head, .head--single { margin-bottom: 36px; } .head__note { font-size: 15.5px; } .cases { grid-template-columns: minmax(0, 1fr); background: none; border: 0; border-top: 1px solid var(--line); } .case { padding: 24px 0; gap: 10px; border-bottom: 1px solid var(--line); } .case h3 { font-size: 23px; } .case p:not(.mono) { font-size: 15px; } .price { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 32px; } .price p { font-size: 15.5px; } .steps { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 20px; border-left: 1px solid rgba(236,239,230,0.22); } .step { border-top: 0; padding: 4px 0 26px; gap: 8px; } .step:last-child { padding-bottom: 4px; } .card { padding: 28px 24px; gap: 20px; } .stat__text { font-size: 16px; } .story__nums { flex-direction: column; align-items: flex-start; gap: 14px; } .story__arrow { transform: rotate(90deg); width: 40px; margin-left: -8px; } .story__text { font-size: 15px; } .media { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 24px; } .media p:not(.label) { font-size: 15.5px; } .points { grid-template-columns: minmax(0, 1fr); gap: 26px; } .points p { font-size: 14.5px; } .about__main { gap: 32px; } .contact { padding-inline: 0; } .contact .wrap { padding-inline: 20px; } .contact__box { padding: 32px 22px; gap: 32px; } .contact__hint { font-size: 15.5px; } .vkcard { padding: 16px 14px 16px 18px; gap: 14px; } .vkcard__title { font-size: 17px; } .vkcard__text { font-size: 13.5px; } .vkcard__go { width: 44px; height: 44px; } .foot__row { flex-direction: column; gap: 10px; font-size: 11px; } .dock { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(12,36,26,0.94); backdrop-filter: blur(10px); border-top: 1px solid var(--line); transition: transform .25s; } .dock.is-hidden { transform: translateY(110%); } .dock .btn { padding-block: 15px; } } /* узкие экраны и крупный системный шрифт: короткая подпись кнопки */ @media (max-width: 420px) { .no-phone .top .btn--sm .lbl-long { display: none; } .no-phone .top .btn--sm .lbl-short { display: inline; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }