/* ==========================================================================
ДНК — модальные окна заявок.
Отдельный слой: styles.css и main.js не тронуты.
Подключение — ровно две строки в index.html:
в после styles.css
перед после main.js
Откат: удалить эти две строки и блоки разметки
.
Окна:
.dnk-modal--lead Figma 159:831 «Popup_2», 826×602 — короткая форма.
.dnk-modal--trial Figma 159:776 «Popup_1», 1110×780 — полная форма
«Запишитесь на пробное занятие». Внутренности размечены
классами .lead-form__* секции формы, поэтому на ≤600
мобильные правила styles.css включают тот же визард
по шагам, что и у открытой формы на странице.
Опорные координаты Popup_2 (фрейм 826×602):
крестик Group 11 750;24 56×56
шапка Frame 93 55;53 715 шириной (заголовок 32 + лид 20/1.6, зазор 20)
форма Frame 99 40;216 746×226 (две колонки по 358, зазор 30)
поля Frame 78/79/80 358×62, зазор 20, рамка #bbd043, радиус 20, паддинг 20, текст 14
согласие Frame 94 чекбокс 19 + зазор 20 + текст 16/1.6
кнопка Frame 2 358×94, паддинг 40, радиус 20, Etude Noire Medium 20 uppercase
правовой текст 159:840 107;473 612 шириной, 14/1.6, #939598
правовой текст 159:839 92;528 642 шириной, 14/1.6, #939598
просветы Ellipse 4 -578;-509 1157 Ellipse 5 338;115 825 (белые, opacity .2)
Опорные координаты Popup_1 (фрейм 1110×780; снято с макета в 100% зуме,
Figma MCP на момент вёрстки был недоступен — допуск ±2px):
крестик 1034;24 56×56 (те же 24 сверху / 20 справа)
заголовок cap-top 56.5, по центру, Etude Noire 32 (строка 657 = 653 при 32)
подзаголовок 715 шириной, 20/1.6, две строки (cap-top 118.5)
колонки 106 | 495 | 854, ширины 329 / 299 / 150, зазор 60
поля шаг 82 (высота ~60 + зазор 22), текст 16/1.6, паддинг 16/20
кружки выбора 40, зазор до текста 31, шаг строк 60 (время — 80)
согласие чекбокс 19-20 на y=596, текст 16/1.6, ширина ~440
кнопка 345×94, правый край 992, верх 580
правовой текст 780 шириной по центру, 14/1.6, cap-top 707
========================================================================== */
/* ------------------------------ Оболочка -------------------------------- */
.dnk-modal{position:fixed;inset:0;z-index:100;}
.dnk-modal[hidden]{display:none;}
.dnk-modal__backdrop{
position:absolute;inset:0;
background:rgba(0,0,0,.72);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
opacity:0;transition:opacity .32s ease;
}
/* Скролл-контейнер: на низких экранах окно прокручивается целиком,
overscroll-behavior не даёт «протащить» скролл на страницу под подложкой */
.dnk-modal__viewport{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
padding:24px 16px;
overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
/* --s — единица масштаба окна: 1 px макета при его полной ширине.
По ней считаются просветы, отступы и сетка. Кегли — через max(пол, N*--s),
чтобы на узких экранах текст не уезжал в нечитаемые размеры. */
.dnk-modal__dialog{
position:relative;
width:var(--mw);
background:#000;
border-radius:var(--r-lg);
overflow:hidden;
opacity:0;translate:0 24px;scale:.985;
transition:opacity .32s ease, translate .32s ease, scale .32s ease;
}
.dnk-modal.is-open .dnk-modal__backdrop{opacity:1;}
.dnk-modal.is-open .dnk-modal__dialog{opacity:1;translate:0 0;scale:1;}
.dnk-modal__dialog:focus{outline:none;}
/* Просветы внутри окна — те же радиальные пятна, что и на фоне страницы:
белый в центре → полная прозрачность на 85.58% радиуса, opacity .2 */
.dnk-modal__glow{
position:absolute;border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(255,255,255,.2),rgba(255,255,255,0) 85.58%);
}
/* Содержимое — над просветами */
.dnk-modal__body,.dnk-modal__done{position:relative;z-index:1;}
/* ------------------------------ Крестик --------------------------------- */
.dnk-modal__close{
position:absolute;z-index:2;
top:24px;right:20px;width:56px;height:56px;padding:0;
border-radius:50%;line-height:0;
transition:transform .3s ease, box-shadow .3s ease;
}
.dnk-modal__close svg{width:100%;height:100%;}
.dnk-modal__close:hover{transform:rotate(90deg);box-shadow:0 12px 30px -12px rgba(187,208,67,.7);}
.dnk-modal__close:active{transform:rotate(90deg) scale(.94);}
/* ------------------------------- Шапка ---------------------------------- */
.dnk-modal__head{
margin:0 auto;text-align:center;
display:flex;flex-direction:column;gap:20px;
}
/* Etude Noire Regular, line-height normal (=1.054), белый */
.dnk-modal__title{
font-family:var(--font-display);font-weight:400;
line-height:1.054;color:var(--ink);
}
.dnk-modal__lead{font-weight:300;line-height:1.6;color:var(--ink);}
/* --------------------- Экран «заявка отправлена» ------------------------ */
/* В макете этого состояния нет — собрано на тех же токенах.
Реальной отправки пока нет: обработчик только показывает подтверждение. */
.dnk-modal__done{
display:flex;flex-direction:column;align-items:center;gap:24px;
text-align:center;padding:36px 0 24px;
}
.dnk-modal__done[hidden]{display:none;}
.dnk-modal__done-title{
font-family:var(--font-display);font-weight:400;
font-size:32px;line-height:1.054;color:var(--accent);
}
.dnk-modal__done-text{
max-width:612px;font-weight:300;font-size:18px;line-height:1.6;color:var(--ink);
}
/* =========================================================================
ОКНО 1 — «Узнать больше о ДНК» (Popup_2, 826×602)
========================================================================= */
.dnk-modal--lead .dnk-modal__dialog{
--mw:min(826px, calc(100vw - 32px));
--s:calc(var(--mw) / 826);
padding:53px 40px 42px;
}
.dnk-modal--lead .dnk-modal__glow--a{
width:calc(1157 * var(--s));height:calc(1157 * var(--s));
left:calc(-578 * var(--s));top:calc(-509 * var(--s));
}
.dnk-modal--lead .dnk-modal__glow--b{
width:calc(825 * var(--s));height:calc(825 * var(--s));
left:calc(338 * var(--s));top:calc(115 * var(--s));
}
.dnk-modal--lead .dnk-modal__head{max-width:715px;}
.dnk-modal--lead .dnk-modal__title{font-size:32px;}
.dnk-modal--lead .dnk-modal__lead{font-size:20px;}
.dnk-modal--lead .dnk-modal__form{display:flex;gap:30px;margin-top:45px;}
.dnk-modal--lead .dnk-modal__col{min-width:0;flex:1 1 358px;display:flex;flex-direction:column;}
.dnk-modal--lead .dnk-modal__col--fields{gap:20px;}
/* Правая колонка тянется до низа левой: согласие сверху, кнопка снизу */
.dnk-modal--lead .dnk-modal__col--side{justify-content:space-between;gap:20px;}
/* Правовые подписи под формой */
.dnk-modal--lead .dnk-modal__legal{
max-width:612px;margin:24px auto 0;text-align:center;
font-weight:300;font-size:14px;line-height:1.6;color:var(--muted);
}
.dnk-modal--lead .dnk-modal__legal--wide{max-width:642px;margin-top:8px;}
/* Десктоп: точные размеры. Вынесено в min-width, чтобы не спорить
с мобильными правилами .btn-dnk и .field из styles.css. */
@media (min-width:701px){
/* Поле 358×62: паддинг 19 + строка 22.4 + рамка 2 (в Figma рамка бокс не растит) */
.dnk-modal--lead .field input{font-size:14px;line-height:1.6;padding:19px 20px;}
/* Согласие: текст 16/1.6, квадрат 19 с зазором 20 — как во Frame 94 */
.dnk-modal--lead .choice--consent{gap:20px;}
.dnk-modal--lead .choice--consent .choice__text{font-size:16px;line-height:1.6;}
.dnk-modal--lead .dnk-modal__submit{width:100%;border-radius:var(--r-md);}
}
/* Кнопка 358×94: паддинг 40 по макету, минус трекинг строки (37×2 + 20 = 94) */
@media (min-width:901px){
.dnk-modal--lead .dnk-modal__submit{padding:37px 40px;font-size:20px;}
}
/* 701–900: колонка сужается до ~313px, и при кегле 20 «Отправить заявку»
рвётся на две строки (кнопка вырастала до 114 вместо 94) — уменьшаем кегль */
@media (min-width:701px) and (max-width:900px){
.dnk-modal--lead .dnk-modal__submit{padding:24px 20px;font-size:17px;white-space:nowrap;}
}
/* =========================================================================
ОКНО 2 — «Запишитесь на пробное занятие» (Popup_1, 1110×780)
========================================================================= */
.dnk-modal--trial .dnk-modal__dialog{
--mw:min(1110px, calc(100vw - 32px));
--s:calc(var(--mw) / 1110);
padding:calc(56 * var(--s)) calc(106 * var(--s)) calc(40 * var(--s));
}
/* Один просвет у левого края, центр примерно на трети высоты окна */
.dnk-modal--trial .dnk-modal__glow--a{
width:calc(1157 * var(--s));height:calc(1157 * var(--s));
left:calc(-578 * var(--s));top:calc(-259 * var(--s));
}
.dnk-modal--trial .dnk-modal__head{
max-width:calc(715 * var(--s));
margin-bottom:calc(44 * var(--s));
gap:calc(20 * var(--s));
}
.dnk-modal--trial .dnk-modal__title{font-size:max(20px, calc(32 * var(--s)));}
.dnk-modal--trial .dnk-modal__lead{font-size:max(14px, calc(20 * var(--s)));}
/* --- Десктопная сетка формы: три колонки + строка «согласие / кнопка» --- */
@media (min-width:901px){
.dnk-trial__form{
display:grid;
/* Колонки макета 329 / 300 / 150 при зазоре 60. Живые строки чуть шире
фигмовских: «Персональные тренировки» требует 301, «УДОБНОЕ ВРЕМЯ» — 155.
Ширины отданы колонкам, зазор ужат с 60 до 56.5 — иначе строки рвались
на две и правая колонка уезжала вниз. Смещение колонок ≤5px. */
grid-template-columns:329fr 301fr 155fr;
column-gap:calc(56.5 * var(--s));
row-gap:calc(42 * var(--s));
align-items:start;
}
/* Поля начинаются на 14px ниже легенд соседних колонок — как в макете */
.dnk-modal--trial .lead-form__col--fields{
gap:calc(22 * var(--s));padding-top:calc(14 * var(--s));
}
.dnk-modal--trial .field input,
.dnk-modal--trial .field select{
font-size:max(13px, calc(16 * var(--s)));line-height:1.6;
padding:calc(16 * var(--s)) calc(20 * var(--s));
border-radius:calc(20 * var(--s));
}
.dnk-modal--trial .field--select select{padding-right:calc(60 * var(--s));}
.dnk-modal--trial .field__chevron{right:calc(20 * var(--s));width:calc(26 * var(--s));}
/* Легенда — 16/1.6 (в styles.css у неё 1.054: в колонке «удобное время»
она переносится на две строки, и шаг строк обязан быть 26, как в макете) */
.dnk-modal--trial .lead-form__legend{
font-size:max(13px, calc(16 * var(--s)));line-height:1.6;
margin-bottom:calc(16 * var(--s));
}
.dnk-modal--trial .choice{gap:calc(31 * var(--s));}
.dnk-modal--trial .choice__mark{width:calc(40 * var(--s));height:calc(40 * var(--s));}
.dnk-modal--trial .choice__text{font-size:max(13px, calc(16 * var(--s)));line-height:1.6;}
.dnk-modal--trial .lead-form__col--group .choice + .choice{margin-top:calc(20 * var(--s));}
.dnk-modal--trial .lead-form__col--time .choice + .choice{margin-top:calc(40 * var(--s));}
/* Нижняя строка: согласие слева, кнопка справа, правовой текст по центру */
.dnk-modal--trial .lead-form__col--submit{
grid-column:1 / -1;
display:grid;grid-template-columns:minmax(0,1fr) auto;
align-items:center;
column-gap:calc(40 * var(--s));row-gap:calc(28 * var(--s));
}
.dnk-modal--trial .choice--consent{
gap:calc(20 * var(--s));max-width:calc(460 * var(--s));
}
.dnk-modal--trial .choice--consent .choice__text{
font-size:max(12px, calc(16 * var(--s)));line-height:1.6;
}
.dnk-modal--trial .lead-form__btn{
justify-self:end;align-self:center;
width:calc(345 * var(--s));height:calc(94 * var(--s));
padding:0 calc(20 * var(--s));border-radius:calc(20 * var(--s));
font-size:max(13px, calc(20 * var(--s)));
}
.dnk-modal--trial .lead-form__legal{
grid-column:1 / -1;justify-self:center;text-align:center;
max-width:calc(780 * var(--s));
font-size:max(11px, calc(14 * var(--s)));line-height:1.6;
}
}
/* --- 601–900: одна колонка, как у формы на странице на этих ширинах ------ */
/* Ниже 601 включается мобильный визард из styles.css — туда не лезем. */
@media (min-width:601px) and (max-width:900px){
.dnk-modal--trial .dnk-modal__dialog{padding:48px 28px 32px;}
.dnk-modal--trial .dnk-modal__head{max-width:none;margin-bottom:28px;}
.dnk-modal--trial .dnk-modal__title{font-size:clamp(20px,3.4vw,28px);}
.dnk-modal--trial .dnk-modal__lead{font-size:clamp(14px,2.2vw,18px);}
.dnk-trial__form{grid-template-columns:1fr;row-gap:28px;}
.dnk-modal--trial .lead-form__col--fields{gap:16px;}
.dnk-modal--trial .lead-form__col--submit{
grid-template-columns:1fr;row-gap:20px;justify-items:stretch;
}
.dnk-modal--trial .lead-form__btn{justify-self:stretch;width:100%;}
.dnk-modal--trial .lead-form__legal{text-align:center;}
}
/* ============================ Планшет/мобилка ============================ */
/* Мобильных фреймов попапов в макете нет — раскладка адаптирована:
одна колонка, поля и кнопка на всю ширину, окно прокручивается целиком. */
@media (max-width:700px){
.dnk-modal__viewport{align-items:flex-start;padding:12px;}
/* Верхний отступ: заголовок идёт во всю ширину и должен пройти
под крестиком (12 + 40), иначе строка заезжает ему под низ */
.dnk-modal__dialog{border-radius:28px;}
.dnk-modal--lead .dnk-modal__dialog{
--mw:min(826px, calc(100vw - 24px));
padding:64px 20px 28px;
}
.dnk-modal--trial .dnk-modal__dialog{
--mw:min(1110px, calc(100vw - 24px));
padding:64px 20px 28px;
}
.dnk-modal__close{top:12px;right:12px;width:40px;height:40px;}
.dnk-modal__head{gap:14px;}
.dnk-modal--lead .dnk-modal__title{font-size:clamp(21px,6.2vw,28px);}
.dnk-modal--lead .dnk-modal__lead{font-size:clamp(14px,3.9vw,17px);line-height:1.5;}
.dnk-modal--lead .dnk-modal__form{flex-direction:column;gap:18px;margin-top:26px;}
.dnk-modal--lead .dnk-modal__col{flex:0 0 auto;}
.dnk-modal--lead .dnk-modal__col--fields{gap:14px;}
.dnk-modal--lead .dnk-modal__col--side{gap:20px;}
.dnk-modal--lead .field input{font-size:clamp(14px,3.9vw,16px);padding:15px 18px;}
/* В styles.css у согласия на ≤600 стоит order:1 (в основной форме оно
уходит под кнопку) — в коротком окне порядок макетный: над кнопкой */
.dnk-modal--lead .choice--consent{order:0;gap:12px;}
.dnk-modal--lead .choice--consent .choice__text{font-size:clamp(12px,3.4vw,14px);line-height:1.45;}
.dnk-modal--lead .dnk-modal__submit{width:100%;}
.dnk-modal--lead .dnk-modal__legal{margin-top:18px;font-size:clamp(11px,3vw,13px);}
.dnk-modal--lead .dnk-modal__legal--wide{margin-top:8px;}
.dnk-modal__done{gap:18px;padding:20px 0 8px;}
.dnk-modal__done-title{font-size:clamp(21px,6.2vw,28px);}
.dnk-modal__done-text{font-size:clamp(14px,3.9vw,17px);}
}
/* --- ≤600: окно «пробное занятие» повторяет панель формы со страницы ----- */
/* Всё поведение (шаги, кнопки «назад/далее», раскладка групп) приходит
из мобильного блока styles.css — здесь только геометрия самого окна. */
@media (max-width:600px){
.dnk-modal--trial .dnk-modal__dialog{
padding:calc(56 * var(--u)) calc(20 * var(--u)) calc(32 * var(--u));
border-radius:calc(30 * var(--u));
}
/* Шаг занимает фиксированную высоту, кнопки «назад/далее» прижаты к низу —
как в панели формы на странице (там min-height 666u) */
.dnk-modal--trial .dnk-modal__body{
display:flex;flex-direction:column;
min-height:calc(500 * var(--u));
}
.dnk-modal--trial .dnk-modal__head{
text-align:left;margin:0;max-width:none;
gap:calc(10 * var(--u));
}
.dnk-modal--trial .dnk-modal__title{font-size:clamp(18px,calc(24 * var(--u)),28px);}
.dnk-modal--trial .dnk-modal__lead{font-size:clamp(13px,calc(16 * var(--u)),18px);}
}
/* ============================ Reduced motion ============================ */
@media (prefers-reduced-motion:reduce){
.dnk-modal__backdrop,.dnk-modal__dialog{transition:none;}
.dnk-modal__dialog{translate:0 0;scale:1;}
.dnk-modal__close{transition:none;}
.dnk-modal__close:hover,.dnk-modal__close:active{transform:none;}
}