/* ============================================================ NEWWEB — ожившая айдентика N = дверь. Лиза создаёт. Гоша соединяет. Линии связывают. Скролл — путешествие внутри одного мира. Палитра зафиксирована брендбордом: графит + молочный + медь. ============================================================ */ :root { /* пространство — тёплый уголь, не нейтральный графит: подтон уведён в медь (R > B), поэтому рендеры и свечение садятся в фон, а не спорят с ним холодной синевой */ --void: #060404; /* глубина сцены */ --bg: #090706; /* базовый уголь */ --bg-2: #0F0C0A; /* приподнятая плоскость */ --bg-3: #150F0D; /* панель */ /* песочный — для светлых секций-пауз */ --sand: #F3EDE6; /* вертикальный ритм секций — один на весь сайт, эталон hero (80px) */ --pad-sec: clamp(56px, 7vw, 92px); --sand-2: #EBE2D8; --sand-panel: #FFFDFA; --sand-ink: #1A1310; --sand-ink-70: rgba(36, 28, 24, .72); --sand-line: rgba(138, 86, 72, .18); /* свет */ --ink: #F1ECE7; --ink-70: rgba(241, 236, 231, .70); --ink-45: rgba(241, 236, 231, .45); --ink-25: rgba(241, 236, 231, .25); /* медь — металл, отражение, внутреннее свечение */ --cu: #C98F86; --cu-hi: #E9BCA9; --cu-deep: #8A5648; --cu-line: rgba(201, 143, 134, .32); --cu-soft: rgba(201, 143, 134, .12); --glow: rgba(233, 188, 169, .55); --font-sans: 'Golos Text', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-hand: 'Caveat', cursive; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* режим «десктоп в масштабе» на телефоне (viewport 980 в index.html): без этого iOS Safari самовольно раздувает отдельные абзацы (font boosting) и ломает десктопную раскладку */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html { overflow-x: clip; } /* страница не ездит вбок: ауры .halo шире вьюпорта по замыслу (свет), но их выпуск за край не должен давать горизонтальный скролл — замер 27.08.2026: документ был 743px при вьюпорте 390 */ body { overflow-x: clip; /* базовый уголь; сам свет живёт в ::before отдельным слоем */ background: #090706; color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* не плоская чернота: крупные мягкие медные ауры + вертикальный градиент. ВАЖНО: раньше это был background-attachment: fixed на body — браузер перерисовывал весь градиент на каждом кадре прокрутки и сайт тормозил. Отдельный fixed-слой уезжает на GPU и рисуется один раз. */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(1400px 1000px at 15% 8%, rgba(201, 143, 134, .055), rgba(201, 143, 134, .04) 13.6%, rgba(201, 143, 134, .0295) 23.8%, rgba(201, 143, 134, .0211) 32.64%, rgba(201, 143, 134, .0144) 40.8%, rgba(201, 143, 134, .0092) 47.6%, rgba(201, 143, 134, .0055) 53.72%, rgba(201, 143, 134, .0029) 58.48%, rgba(201, 143, 134, .0013) 62.56%, rgba(201, 143, 134, .0004) 65.28%, rgba(201, 143, 134, 0) 68%), radial-gradient(1200px 1100px at 85% 42%, rgba(138, 86, 72, .05), rgba(138, 86, 72, .0364) 14%, rgba(138, 86, 72, .0269) 24.5%, rgba(138, 86, 72, .0192) 33.6%, rgba(138, 86, 72, .0131) 42%, rgba(138, 86, 72, .0084) 49%, rgba(138, 86, 72, .005) 55.3%, rgba(138, 86, 72, .0027) 60.2%, rgba(138, 86, 72, .0011) 64.4%, rgba(138, 86, 72, .0004) 67.2%, rgba(138, 86, 72, 0) 70%), radial-gradient(1100px 900px at 40% 88%, rgba(201, 143, 134, .04), rgba(201, 143, 134, .0291) 13.6%, rgba(201, 143, 134, .0215) 23.8%, rgba(201, 143, 134, .0153) 32.64%, rgba(201, 143, 134, .0104) 40.8%, rgba(201, 143, 134, .0067) 47.6%, rgba(201, 143, 134, .004) 53.72%, rgba(201, 143, 134, .0021) 58.48%, rgba(201, 143, 134, .0009) 62.56%, rgba(201, 143, 134, .0003) 65.28%, rgba(201, 143, 134, 0) 68%), /* низ страницы сведён к var(--void) #060404 — тем же цветом, что заливка .finale и футера. Раньше фон кончался на #090706 и под футером просвечивал светлее его на 1.6 пункта: футер читался вставленной плитой (26.08.2026) */ linear-gradient(180deg, #080605 0%, #0A0807 28%, #0C0908 58%, #0A0807 74%, #080605 88%, #070505 95%, #060404 100%); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } :focus-visible { outline: 2px solid var(--cu); outline-offset: 4px; border-radius: 2px; } ::selection { background: rgba(201, 143, 134, .3); color: var(--ink); } .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -130%); z-index: 300; background: var(--bg-3); color: var(--ink); border: 1px solid var(--cu-line); border-radius: 0 0 10px 10px; padding: .9em 1.7em; font-size: .9rem; transition: transform .25s; } .skip-link:focus-visible { transform: translate(-50%, 0); } .wrap { max-width: 1400px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 60px); } /* главы услуг идут от кромки экрана, как hero и «Процесс» (25.08.2026): в контейнере 1400px у них были поля ~200px, и они читались «вставкой» рядом с первыми двумя блоками, у которых текст стоит в 60px от края */ .wrap--full { max-width: none; width: 100%; } /* ============================================================ ТИПОГРАФИКА — крупная, с характером ============================================================ */ h1, h2, h3 { font-weight: 600; line-height: 1.05; letter-spacing: -.035em; } /* заголовок-плакат: занимает экран, а не строку */ .mega { /* плакатный масштаб: кегль крупный, интерлиньяж плотнее высоты букв — строки смыкаются в единый блок (приём с эталонного сайта 22.08.2026) */ font-size: clamp(2.9rem, 8.2vw, 8.4rem); font-weight: 800; line-height: .84; letter-spacing: -.05em; text-transform: uppercase; } .big { font-size: clamp(2.4rem, 7vw, 6.6rem); font-weight: 700; line-height: .88; letter-spacing: -.045em; } .mid { font-size: clamp(1.7rem, 3.6vw, 3.2rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; } .cu { color: var(--cu); } .outline { color: transparent; -webkit-text-stroke: 1.5px var(--cu); paint-order: stroke fill; } .tag { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; color: var(--cu); } /* спокойный вспомогательный текст: контраст с крупными заголовками строится на разнице масштабов, поэтому кегль держим скромным */ .body { color: var(--ink-70); font-size: clamp(.95rem, 1.05vw, 1.06rem); line-height: 1.62; max-width: 44ch; } /* ============================================================ КНОПКИ — физическое ощущение ============================================================ */ .btn { position: relative; display: inline-flex; align-items: center; gap: .7em; padding: 1.05em 2.1em; border-radius: 100px; font-weight: 500; font-size: .95rem; white-space: nowrap; min-height: 48px; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s; } .btn-main { background: linear-gradient(135deg, #F0CBB8 0%, var(--cu) 52%, var(--cu-deep) 100%); color: #180E0B; box-shadow: 0 0 0 1px rgba(240, 203, 184, .3), 0 10px 34px -14px var(--glow); } .btn-main:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 0 1px rgba(240,203,184,.5), 0 20px 46px -16px var(--glow); } .btn-main:active { transform: translateY(-1px) scale(.99); } .btn-line { color: var(--ink); border: 1px solid var(--cu-line); background: rgba(22, 24, 29, .5); backdrop-filter: blur(8px); } .btn-line:hover { border-color: var(--cu); transform: translateY(-3px); } .btn .ar { transition: transform .4s cubic-bezier(.22,1,.36,1); } .btn:hover .ar { transform: translateX(5px); } /* ============================================================ НАВИГАЦИЯ ============================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 200; transition: background .5s, border-color .5s; border-bottom: 1px solid transparent; } .nav.stuck { background: rgba(10, 11, 14, .78); backdrop-filter: blur(20px); border-bottom-color: rgba(241, 236, 231, .07); } /* ШАПКА — ТРИ ЗОНЫ НА ОДНОЙ ОСИ (26.08.2026, Георгий: «вся шапка криво стоит, сделай ровной»). Было: space-between + margin-left у nav — зазоры плясали от ширины экрана (77…96px), кнопка на 1600 вылезала за край. Стало: бренд | меню (растягивается, центрируется) | контакты. Все три зоны на одной вертикальной оси через align-items: center, а зазоры между зонами — один clamp, а не сумма разных margin */ .nav-in { display: flex; align-items: center; gap: clamp(1.6rem, 3vw, 3.4rem); height: 80px; /* ДЕФИЦИТ МЕСТА (замер 26.08.2026): меню требует 768px, а в контейнере .wrap 1400px после логотипа (122), контактов (385) и зазоров (109) остаётся 665 — не хватало 103px, и пункты выпирали на соседей. Шапка идёт от кромки окна, как hero: ширины хватает без ужимания */ max-width: none; padding-inline: clamp(18px, 3vw, 46px); } /* меню забирает свободное место и стоит по центру своей зоны */ /* ЗОНА МЕНЮ (26.08.2026, две ловушки подряд): 1) justify-content: center в сжатой зоне выталкивает содержимое за ОБА края — меню наезжало на логотип (gap -42); 2) margin-inline: auto у списка растягивал его в зону контактов — телефон оказывался поверх «СТОИМОСТЬ». Правильно: зона НЕ сжимается (flex-shrink 0) и просто отдаёт остаток места соседям, а список стоит по своему левому краю. */ /* ГЛАВНАЯ ЛОВУШКА (26.08.2026): элемент