/* ========================================================================== МКА «Партнер Групп» — тема «Приёмная» Тёмный премиум: ночной фон, латунь, антиква Cormorant Garamond в заголовках и Manrope в тексте. Порядок разделов: 1. Токены 6. Секции и заголовки 11. Формы 2. Основа 7. Карточки 12. Подвал 3. Шапка и меню 8. Практика и фильтр 13. Липкая панель 4. Первый экран 9. Стоимость 14. Кнопка «наверх» 5. Кнопки 10. Текстовые страницы 15. Документы и окно просмотра 16. Служебное ========================================================================== */ /* 1. Токены ------------------------------------------------------------- */ /* Расцветка «Бумага» — выбрана заказчиком 6 сентября 2026 на витрине mka-color.renewweb.site из четырёх вариантов, ответом на замечание «в глазах рябит». Тёплый белый фон, графитовый текст, приглушённая бронза в надписях и прежняя латунь сайта в заливках. Полупрозрачные замесы собираются из «сырых» токенов --*-rgb: одно значение правит и сам цвет, и всё, что на нём замешано. */ :root { --night: #f7f5f0; --night-2: #f0ede5; --navy: #ffffff; --navy-2: #fbf9f5; --brass: #7d6226; --brass-l: #63501e; --brass-d: #4e3f16; --cream: #1b2029; --text: #3c4350; --dim: #6a7180; --line: rgb(var(--cream-rgb) / .14); --line-strong: rgb(var(--cream-rgb) / .28); --night-rgb: 247 245 240; --night-2-rgb: 240 237 229; --navy-rgb: 255 255 255; --brass-rgb: 125 98 38; --cream-rgb: 27 32 41; --dim-rgb: 106 113 128; --hi-rgb: 255 255 255; --shadow-rgb: 40 34 24; --scrim-rgb: 30 26 20; --err: #b3323c; --err-l: #93202a; --err-rgb: 179 50 60; /* Латунь сайта остаётся заливкой: кнопки, рамка телефона в шапке, полоса прокрутки. Тем же цветом набранный текст на светлом фоне даёт контраст 2:1 и не читается — поэтому надписи и линии берут бронзу выше. */ --gold: #c9a227; --gold-l: #e6cc74; --gold-d: #a8861d; --gold-rgb: 201 162 39; /* надпись на бронзовой заливке — светлая, на латунной — тёмная */ --on-accent: #fbf7ec; --on-gold: #20180a; /* Первый экран остаётся тёмным при светлой странице: фотография коллегии снята в контровом свете, текст лежит прямо на ней — осветлить кадр значит потерять и лица, и надписи. Вуаль, растворение низа кадра и цвета первого экрана живут своими токенами. */ --veil-rgb: 21 19 17; --hero-fade: rgb(var(--veil-rgb) / .86); --hero-ink: #f7f3ea; --hero-lead: #ded8ca; --hero-dim: #bab3a4; --hero-accent: #d9bd77; --hero-accent-l: #eed9a1; /* Зерно поверх страницы снято вместе с ночным фоном: на белом это просто шум поверх текста. Знак коллегии тёмно-синий сам по себе — на светлой шапке его не перекрашивают. */ --grain: 0; --logo-filter: none; --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --wrap: 1280px; --gutter: 1.25rem; --radius: 2px; /* Размеры набраны владельцем ползунками на витрине 6 сентября 2026 (окно 1536 px), мобильные — в рамке 390 px. */ --space-section: 1rem; --header-h: 4.75rem; /* две тени: ближняя держит край, дальняя отрывает от фона; на светлом фоне обе мягче — ночные пятна под карточками читались бы грязью */ --lift-1: 0 1px 2px rgb(var(--shadow-rgb) / .08), 0 14px 28px rgb(var(--shadow-rgb) / .07); --lift-2: 0 2px 4px rgb(var(--shadow-rgb) / .1), 0 22px 44px rgb(var(--shadow-rgb) / .1); --edge: inset 0 1px 0 rgb(var(--hi-rgb) / .7); --ease: cubic-bezier(.22, .61, .36, 1); } /* 2. Основа ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Плавная прокрутка (Lenis). Классы вешает сам скрипт на ; без него ни одно из этих правил не срабатывает и страница ведёт себя как обычно. */ html.lenis, html.lenis body { height: auto; } html.lenis { /* Прокрутку ведёт скрипт: браузерное сглаживание якорей здесь только спорит с ним за одну и ту же позицию. */ scroll-behavior: auto; /* Скрипт пишет позицию сам, и браузерная компенсация вставленного контента спорит с ним за те же пиксели: раскрытая шторка меню раздвигала документ, компенсация запоминала сдвиг — и по закрытии страница уезжала вверх ровно на высоту шторки. */ overflow-anchor: none; } /* Внутренние прокручиваемые блоки прокручиваются сами. */ .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } body { margin: 0; background: var(--night); color: var(--cream); font-family: var(--sans); font-size: 1.125rem; line-height: 1.4; font-weight: 300; overflow-x: clip; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } /* инлайновый SVG без размеров растягивается на всю ячейку flex */ svg { flex: none; } a, button, select, [role="button"] { touch-action: manipulation; } a { color: inherit; } button { font: inherit; color: inherit; } [hidden] { display: none !important; } ::selection { background: var(--brass); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--brass-l); outline-offset: 3px; } .wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; } .wrap--narrow { width: min(52rem, 100% - var(--gutter) * 2); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; top: 0; translate: -50% -120%; z-index: 100; padding: .7rem 1.2rem; background: var(--brass); color: var(--on-accent); font-weight: 600; text-decoration: none; transition: translate .2s var(--ease); } .skip-link:focus { translate: -50% 0; } /* мелкая надстрочная метка раздела */ .eyebrow { display: inline-block; font-size: .75rem; letter-spacing: .28em; text-transform: uppercase; color: var(--brass); font-weight: 600; } /* зерно поверх страницы: даёт тёмной заливке фактуру. Только на широких экранах — фиксированный слой перерисовывается на каждом кадре прокрутки. */ @media (min-width: 48em) { body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--grain, .35); background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); } } /* 3. Шапка и меню ------------------------------------------------------- */ .hdr { position: fixed; inset: 0 0 auto 0; z-index: 60; transition: background .3s var(--ease), backdrop-filter .3s, border-color .3s; border-bottom: 1px solid transparent; } /* Пока главная не прокручена, шапка стоит прямо на фотографии первого экрана и остаётся прозрачной — так было на тёмной теме, так остаётся и на светлой. Тёмные буквы на кадре пропадают, поэтому знак, название, подпись, меню и номер здесь белые; стоит шапке прилипнуть и получить светлый фон — цвета возвращаются к обычным, поэтому переход идёт плавно вместе с фоном. Только на главной: у внутренних страниц под шапкой светлый заголовок. */ .home .hdr:not(.is-stuck):not(.is-menu) { color: #fff; } /* Номер и пункты меню свой переход цвета уже имеют — здесь только те, у кого его не было. */ .hdr__logo b, .hdr__logo span { transition: color .3s var(--ease); } .hdr__logo img { transition: filter .3s var(--ease); } .home .hdr:not(.is-stuck):not(.is-menu) .hdr__logo b, .home .hdr:not(.is-stuck):not(.is-menu) .hdr__logo span, .home .hdr:not(.is-stuck):not(.is-menu) .menu > li > a, .home .hdr:not(.is-stuck):not(.is-menu) .hdr__tel { color: #fff; } /* Бургер на телефоне держит свой цвет и рамку — на кадре обе тёмные линии пропадают вместе с полосками. */ .home .hdr:not(.is-stuck):not(.is-menu) .burger { color: #fff; border-color: rgb(255 255 255 / .45); transition: color .3s var(--ease), border-color .3s var(--ease); } /* Знак коллегии сам по себе тёмно-синий: на кадре его перекрашиваем в белый, на светлой шапке он остаётся своего цвета. */ .home .hdr:not(.is-stuck):not(.is-menu) .hdr__logo img { filter: brightness(0) invert(1); } /* Текущий раздел и наведение на кадре — светлой латунью: бронза, которой они набраны на светлом фоне, на фотографии не видна. */ .home .hdr:not(.is-stuck):not(.is-menu) .menu > li > a:hover, .home .hdr:not(.is-stuck):not(.is-menu) .menu > li.current-menu-item > a, .home .hdr:not(.is-stuck):not(.is-menu) .menu > li.current-menu-ancestor > a, .home .hdr:not(.is-stuck):not(.is-menu) .menu > li > a:hover .mi::after, .home .hdr:not(.is-stuck):not(.is-menu) .menu > li.current-menu-item > a .mi::after, .home .hdr:not(.is-stuck):not(.is-menu) .menu > li.current-menu-ancestor > a .mi::after { color: var(--hero-accent); } /* Выпадающий список стоит на своём светлом фоне и живёт по цветам страницы, даже когда сама шапка прозрачна: белые буквы на нём пропадали. */ .home .hdr:not(.is-stuck):not(.is-menu) .menu .sub-menu a { color: var(--cream); } .home .hdr:not(.is-stuck):not(.is-menu) .menu .sub-menu .current-menu-item > a, .home .hdr:not(.is-stuck):not(.is-menu) .menu .sub-menu a:hover { color: var(--brass); } .hdr.is-stuck { background: rgb(var(--night-rgb) / .9); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: rgb(var(--brass-rgb) / .28); } /* Пока шторка открыта, шапка стоит на сплошном фоне. Полупрозрачного мало: страница под шторкой не прокручивается, класс is-stuck сам не появится, а пункты меню при прокрутке самой шторки едут прямо под шапкой. */ .hdr.is-menu, .hdr.is-menu.is-stuck { background: var(--night); backdrop-filter: none; border-bottom-color: rgb(var(--brass-rgb) / .28); } .hdr__in { display: flex; align-items: center; gap: 1.2rem; padding: .188rem 0; min-width: 0; } /* Полоса прокрутки под меню. Растёт масштабированием, а не шириной: ширина заставляет браузер считать раскладку на каждом кадре, transform уходит на видеокарту. Без скрипта полоса остаётся нулевой и не мозолит глаза. */ .hdr__progress { position: absolute; inset: auto 0 -1px 0; height: 3px; pointer-events: none; overflow: hidden; } .hdr__progress span { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--gold-d) 0%, var(--gold) 45%, var(--gold-l) 100%); box-shadow: 0 0 10px rgb(var(--gold-rgb) / .5); } .hdr__logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; min-width: 0; } .hdr__logo img { width: 50px; height: auto; flex: none; /* исходный знак тёмно-синий: на тёмной шапке его почти не видно. Перекрашиваем в кремовый — цвет заголовков темы. */ filter: var(--logo-filter, brightness(0) invert(1) sepia(.18) saturate(1.35) hue-rotate(3deg)); } .hdr__logo b { font-family: var(--serif); font-size: 1.656rem; font-weight: 600; letter-spacing: .03em; line-height: 1.1; display: block; } .hdr__logo span { display: block; font-size: .969rem; letter-spacing: 0; text-transform: uppercase; color: var(--dim); font-weight: 600; margin-top: .531rem; } .hdr__nav { display: none; margin-left: auto; min-width: 0; } /* Меню набрано полужирным. Полужирные буквы шире: семь пунктов прибавили 17 px и отняли их у логотипа — подпись тут же сломалась надвое. Место возвращено просветом между пунктами и разрядкой. */ .hdr__nav .menu { font-size: 1.063rem; font-weight: 600; letter-spacing: .008em; gap: 1.188rem; } .hdr__acts { display: flex; align-items: center; gap: .6rem; margin-left: auto; } .hdr__tel { font-size: 1.06rem; letter-spacing: .03em; text-decoration: none; font-weight: 500; /* рамка и пульс — латунью: бронза на светлом фоне гаснет */ border: 1px solid rgb(var(--gold-rgb) / .75); padding: .5rem .95rem; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; transition: background .25s var(--ease), color .25s; } .hdr__tel:hover { background: var(--gold); color: var(--on-gold); border-color: var(--gold); } /* пульс рамки телефона в шапке: и у номера на десктопе, и у иконки на мобильном */ @media (prefers-reduced-motion: no-preference) { .hdr__tel { animation: mka-tel-glow 3.2s var(--ease) infinite; } .hdr__tel:hover, .hdr__tel:focus-visible { animation: none; } @keyframes mka-tel-glow { 0%, 100% { border-color: rgb(var(--gold-rgb) / .75); box-shadow: 0 0 0 0 rgb(var(--gold-rgb) / .45); } 55% { border-color: rgb(var(--gold-rgb) / 1); box-shadow: 0 0 18px 4px rgb(var(--gold-rgb) / .4), inset 0 0 12px rgb(var(--gold-rgb) / .22); } } } /* бургер */ .burger { display: inline-flex; flex-direction: column; /* Safari на iOS держит в своей UA-таблице `align-items: center` для