/* ========================================================================== ДНК — фитнес-лаборатория. Кастомная вёрстка (HTML/CSS/JS + Bootstrap 5). Дизайн-токены, база, общие компоненты, секции, адаптив. Дисплейный шрифт: 'Etude Noire' (из макета) с фолбэком на Montserrat, пока файлы Etude Noire не подключены в assets/fonts/fonts.css. ========================================================================== */ /* ------------------------------ Токены ---------------------------------- */ :root{ /* Палитра */ --bg:#000000; --ink:#f5f5f5; /* основной текст */ --ink-2:#d9d9d9; /* второстепенный светлый */ --muted:#939598; /* приглушённый */ --accent:#bbd043; /* лайм-акцент */ --accent-2:#6a7b15; /* оливковый (рамки/подписи) */ --accent-3:#4d5527; /* тёмно-оливковый (градиенты карточек) */ --on-accent:#0f0f0f; /* текст на лайме */ --panel-1:#141414; /* тёмная база панелей */ --panel-2:#1a232a; /* холодный тёмный (подложки инпутов) */ /* Градиенты */ --grad-card:linear-gradient(33.2deg,#4d5527 17%,#141414 81%); --grad-panel:radial-gradient(130% 130% at 2% 0%, #20250f 0%, #10120b 42%, #0b0b0b 100%); --grad-route:radial-gradient(120% 220% at 14% 120%, #4d5527 0%, #30341d 50%, #222418 75%, #141414 100%); /* Типографика */ --font-body:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-display:'Etude Noire','Montserrat',system-ui,sans-serif; /* Радиусы */ --r-lg:40px; --r-md:20px; --r-pill:100px; /* Раскладка: 1920-фрейм → поля 120px = 6.25vw, контент-бокс = 1680px (ширина hero-панели) */ --wrap:1920px; --gutter:clamp(16px,6.25vw,120px); --content-pad:clamp(20px,10.4vw,200px); /* внутренний отступ hero-контента (200px @1920) */ } /* Функция масштаба: px@1920 → vw = px/19.2. Значения задаём инлайном через clamp(). */ /* ------------------------------ Сброс ----------------------------------- */ *,*::before,*::after{box-sizing:border-box;} /* Фон отдан : слой просветов лежит на body с z-index:-1, и собственный фон body закрыл бы его (фон блока рисуется позже отрицательных слоёв). */ /* overflow-x:clip (а не hidden) — не делает скролл-контейнером, поэтому декор, выходящий за правый край на мобилке, не даёт горизонтальный скролл */ html{-webkit-text-size-adjust:100%;background:var(--bg);overflow-x:clip;} body{ position:relative; margin:0; font-family:var(--font-body); font-weight:300; color:var(--ink); background:transparent; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} p{margin:0;} h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:500;line-height:1.054;} button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;} ul{margin:0;padding:0;list-style:none;} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;} /* ------------------------------ Раскладка ------------------------------- */ .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); } /* --------------------- Фоновые просветы (Ellipse 3–10) ------------------- */ /* В макете чёрный фон не однотонный: под контентом лежат семь радиальных пятен (белые с прозрачностью 20% и одно лаймовое 10%). Градиент из Figma — цвет в центре → полная прозрачность на 85.58% радиуса. Координаты фрейма 130:1982 (1920×4657): Ellipse 9 -281;159 768 Ellipse 10 1452;-227 785 (#BBD043, 10%) Ellipse 4 1055;571 1579 Ellipse 3 -1179;1138 2261 Ellipse 5 1047;2605 1610 Ellipse 8 -444;2923 1066 Ellipse 6 109;4103 2394x969 По горизонтали и по размеру — vw (страница масштабируется по ширине), по вертикали — проценты высоты страницы, чтобы раскладка держалась и на мобилке. */ .bg-glows{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;} .glow{ position:absolute;border-radius:50%; background:radial-gradient(closest-side,rgba(255,255,255,.2),rgba(255,255,255,0) 85.58%); } .glow--e9 {left:-14.64vw;top:3.41%; width:40vw; aspect-ratio:1;} .glow--e10{left:75.63vw; top:-4.87%; width:40.89vw; aspect-ratio:1; background:radial-gradient(closest-side,rgba(187,208,67,.1),rgba(187,208,67,0) 85.58%);} .glow--e4 {left:54.95vw; top:12.26%; width:82.24vw; aspect-ratio:1;} .glow--e3 {left:-61.41vw;top:24.44%; width:117.76vw; aspect-ratio:1;} .glow--e5 {left:54.53vw; top:55.94%; width:83.85vw; aspect-ratio:1;} .glow--e8 {left:-23.13vw;top:62.77%; width:55.52vw; aspect-ratio:1;} .glow--e6 {left:5.68vw; top:88.1%; width:124.69vw; aspect-ratio:2394/969;} /* ------------------------------ Кнопки ---------------------------------- */ .btn-dnk{ display:inline-flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:500; font-size:clamp(15px,1.04vw,20px); line-height:1;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap; padding:clamp(18px,1.93vw,37px) clamp(22px,2.08vw,40px); border-radius:var(--r-md); background:var(--accent);color:var(--on-accent); transition:transform .25s ease, box-shadow .25s ease, background .25s ease; will-change:transform; } .btn-dnk:hover{transform:translateY(-3px);box-shadow:0 14px 34px -12px rgba(187,208,67,.55);} .btn-dnk:active{transform:translateY(-1px);} /* «Призрачные» кнопки в футере по макету ниже: 54px против 94px у основных. */ .btn-dnk--ghost{ background:var(--grad-route);color:var(--accent); border-radius:var(--r-lg); padding:clamp(12px,.885vw,17px) clamp(12px,1.04vw,20px); } .btn-dnk--ghost:hover{box-shadow:0 14px 34px -14px rgba(0,0,0,.6);} /* Акцентные подписи-теги (// ОСН. 2026 и т.п.) */ .tag{ font-family:var(--font-display);font-weight:400; font-size:clamp(14px,1.04vw,20px); color:var(--accent);white-space:nowrap; } /* ========================================================================= ШАПКА (desktop: НЕ фиксируется; лежит внутри hero-панели) ========================================================================= */ /* Логотип прижат к левому краю панели, соцсети — 60px от правого края (в макете шапка выходит за внутренние отступы панели). */ .topbar{ display:flex;align-items:center;gap:clamp(20px,2vw,56px); margin-left:calc(-1 * clamp(20px,4.17vw,80px)); margin-right:calc(-1 * clamp(0px,1.04vw,20px)); } .topbar__logo{width:clamp(150px,13.3vw,255px);height:auto;flex:none;margin-right:clamp(0px,4.4vw,84px);} .topbar__logo svg,.topbar__logo img{width:100%;height:auto;} .topbar__nav{display:flex;gap:clamp(18px,2.9vw,56px);} .topbar__nav a{ font-family:var(--font-display);font-weight:400; font-size:clamp(15px,1.04vw,20px); color:var(--ink);transition:color .2s ease;white-space:nowrap; } .topbar__nav a:hover{color:var(--accent);} .topbar__spacer{flex:1 1 auto;} .topbar__phone{ font-family:var(--font-display);font-weight:500; font-size:clamp(18px,1.67vw,32px); color:var(--accent);white-space:nowrap; } .topbar__phone b{color:#fff;font-weight:500;} .topbar__social{display:flex;align-items:center;gap:clamp(10px,.9vw,16px);flex:none;margin-left:clamp(0px,1.6vw,31px);} .topbar__social a{color:var(--accent);transition:transform .2s ease,opacity .2s ease;} .topbar__social a:hover{transform:translateY(-2px);opacity:.85;} .topbar__social{--soc-w:clamp(22px,1.6vw,30px);} /* Иконки соцсетей — ассет из макета (Figma Frame 66/67, группа 195x39). Высоты у знаков разные (WA 39x39, VK 53x31, TG 43x35), поэтому задаём ШИРИНУ в пропорции 39 : 53 : 43 от базовой --soc-w, высота — auto. */ .topbar__social a:nth-child(1) img, .footer__social a:nth-child(1) img, .mobile-menu__social a:nth-child(1) img{width:var(--soc-w);height:auto;} .topbar__social a:nth-child(2) img, .footer__social a:nth-child(2) img, .mobile-menu__social a:nth-child(2) img{width:calc(var(--soc-w) * 53 / 39);height:auto;} .topbar__social a:nth-child(3) img, .footer__social a:nth-child(3) img, .mobile-menu__social a:nth-child(3) img{width:calc(var(--soc-w) * 43 / 39);height:auto;} /* Мобильные элементы шапки скрыты на десктопе */ .mobile-only{display:none;} /* ========================================================================= HERO ========================================================================= */ .hero{position:relative;padding-top:clamp(24px,3.3vw,64px);} .hero__inner{position:relative;} .hero__panel{ position:relative; background:transparent; padding:clamp(20px,1.6vw,31px) clamp(20px,4.17vw,80px) clamp(28px,2.9vw,56px); min-height:clamp(420px,44.7vw,859px); overflow:visible; isolation:isolate; } /* Точная Subtract-форма панели из макета отдельным слоем-картинкой (вырез сверху-слева под шапку, приподнятая правая часть, зелёный радиальный градиент из левого-нижнего угла) */ .panel-bg{ position:absolute;inset:0;width:100%;height:100%; object-fit:fill;z-index:0;pointer-events:none; } /* Мобильный вариант формы панели (Figma 130:2223) — включается в @media ≤600px */ .panel-bg--m{display:none;} /* контент поверх молекул и фона */ .topbar,.hero__content,.hero__est,.hero__coords{position:relative;z-index:3;} .hero__content{ margin-top:clamp(40px,7.7vw,148px); max-width:clamp(320px,38vw,716px); } .hero__title{ font-size:clamp(38px,3.854vw,74px); text-transform:uppercase;color:var(--ink); letter-spacing:.005em; } .hero__lead{ margin-top:clamp(18px,1.7vw,33px); font-family:var(--font-display);font-weight:400; font-size:clamp(16px,1.25vw,24px);line-height:1.05; color:var(--ink);max-width:671px; } .hero__cta{margin-top:clamp(24px,5.99vw,115px);margin-left:clamp(0px,14.32vw,275px);} .hero__est{position:absolute;left:clamp(7px,.36vw,7px);bottom:0;} .hero__coords{ position:absolute;right:clamp(0px,.05vw,1px);bottom:0; display:flex;align-items:center;gap:10px; font-family:var(--font-display);font-weight:400; font-size:clamp(13px,1.04vw,20px);color:var(--ink-2);white-space:nowrap; } .hero__coords img{width:clamp(15px,1.2vw,23px);height:auto;} /* --- Декоративные молекулы --- */ /* Координаты сняты с макета (1920): px@1920 / 19.2 = vw. Точка отсчёта — левый верхний угол hero-панели (120; 64). */ .mol{position:absolute;z-index:1;pointer-events:none;user-select:none;height:auto;} .mol--green-big{left:49.88%;top:clamp(40px,10.16vw,195px);width:clamp(280px,43.23vw,830px);} .mol--green-sm{left:54.58%;top:clamp(180px,35.73vw,686px);width:clamp(90px,11.98vw,230px);z-index:2;} .mol--black-top{left:67.31%;top:clamp(50px,12.42vw,238px);width:clamp(150px,18.54vw,356px); transform:rotate(-15deg);} .mol--black-left{left:-22.38%;top:clamp(60px,12.76vw,245px);width:clamp(150px,21.67vw,416px);z-index:2;} /* ========================================================================= АНИМАЦИИ (появление блоков) — включаются только при наличии JS (класс .js) ========================================================================= */ .js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;} .js .reveal.is-visible{opacity:1;transform:none;} .js .reveal[data-delay="1"]{transition-delay:.08s;} .js .reveal[data-delay="2"]{transition-delay:.16s;} .js .reveal[data-delay="3"]{transition-delay:.24s;} .js .reveal[data-delay="4"]{transition-delay:.32s;} @media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1 !important;transform:none !important;transition:none;} .parallax{translate:none !important;} } /* ========================================================================= СТАТИСТИКА ========================================================================= */ /* Макет 1920: карточки 469×291 на y=1151, x=185/726/1267, зазор 72. Низ hero-панели = 923 → отступ сверху 228px. */ .stats{padding-top:clamp(40px,11.875vw,228px);} .stats__grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(16px,3.75vw,72px); max-width:1551px;margin-inline:auto; } .stats__card{ display:flex;flex-direction:column;justify-content:flex-start; gap:clamp(24px,3.1vw,60px); background:var(--grad-card); border-radius:var(--r-lg); padding:clamp(24px,2.08vw,40px); min-height:clamp(180px,15.2vw,291px); } .stats__num{ font-family:var(--font-display);font-weight:500; font-size:clamp(48px,5vw,96px);line-height:1.054;color:var(--ink); } .stats__label{ font-family:var(--font-display);font-weight:400; font-size:clamp(16px,1.25vw,24px);line-height:1.054;color:var(--ink); } /* ========================================================================= ИЗМЕНИ СВОЙ КОД ========================================================================= */ /* Макет 1920: левая колонка 683 c x=178, правая 825 c x=918, зазор 57, y=1619. */ .change{padding-top:clamp(56px,9.2vw,177px);} .change__grid{ display:grid; grid-template-columns:minmax(0,683fr) minmax(0,825fr); gap:clamp(24px,2.97vw,57px); align-items:start; width:min(1565px, calc(100% - 2 * var(--gutter))); margin-inline:auto; } .change__title{ font-size:clamp(40px,5vw,96px);text-transform:uppercase; color:var(--ink);max-width:11ch; } .change__text{ margin-top:clamp(20px,2.6vw,50px); font-weight:300;font-size:clamp(16px,1.25vw,24px);line-height:1.6;color:var(--ink); max-width:683px; } .change__list{display:flex;flex-direction:column;gap:clamp(16px,2.86vw,55px);list-style:none;margin:0;padding:0;} /* Декор мобильного макета между абзацем и аккордеоном — на десктопе не участвует в гриде (display:none), там та же пара молекул лежит в секции «Сильная генетика». */ .change__decor{display:none;} /* Аккордеон. Раскрытое состояние — Figma 164:5349 «Frame 76»: карточка padding 40, вертикальный gap 40, border 3px #6a7b15, radius 20. Свёрнутая карточка (130:2017) — 825x130: 40 + шапка 50 + 40. Шапка 745 шириной: заголовок 348 (2 строки по 24px/1.054) + шеврон 36.77x18.385. Тело: Montserrat Light 16/1.2. Кнопка — стандартная .btn-dnk (94px по макету). */ /* padding 37, а не 40: в Figma рамка 3px не входит в бокс 825x130, поэтому внутренний ряд там 745 при отступе 40. У нас рамка часть бокса, и чтобы получить те же 825x130 снаружи и 745 внутри, отступ = (825-6-745)/2 = 37. */ .change__item{ border:3px solid var(--accent-2);border-radius:var(--r-md); padding:clamp(16px,1.927vw,37px); transition:border-color .25s ease, background .25s ease; } /* В макете рамка раскрытой карточки такая же, как у свёрнутой (#6a7b15), поэтому подсветку лаймом оставляем только на ховере. */ .change__item:hover{border-color:var(--accent);} /* h3 нужен для семантики, но не должен приносить свои отступы и кегль */ .change__h{margin:0;font:inherit;} .change__q{ display:flex;align-items:center;justify-content:space-between;gap:24px; width:100%;min-height:clamp(28px,2.6vw,50px); margin:0;padding:0;border:0;background:none;color:inherit; font:inherit;text-align:left;cursor:pointer; -webkit-appearance:none;appearance:none; } .change__q:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px;} .change__q-text{ font-family:var(--font-display);font-weight:400; font-size:clamp(16px,1.25vw,24px);line-height:1.054;color:var(--ink); min-width:0;max-width:46.7%; /* 348 из 745 по макету — тот же перенос строк */ } .change__chev{ width:clamp(24px,1.915vw,37px);height:auto;flex:none; transition:transform .35s cubic-bezier(.4,0,.2,1); } .change__item.is-open .change__chev{transform:rotate(180deg);} /* Высоту задаёт JS (scrollHeight) — только так работает плавный переход от 0 к «авто». overflow:hidden обязателен, иначе текст вылезает из свёрнутой карточки. */ .change__a{height:0;overflow:hidden;transition:height .42s cubic-bezier(.4,0,.2,1);} .change__a-inner{padding-top:clamp(20px,2.08vw,40px);} /* gap 40 между шапкой и телом */ .change__a-text{ margin:0;font-weight:300; font-size:clamp(14px,.83vw,16px);line-height:1.2;color:var(--ink); } .change__cta{margin-top:clamp(20px,2.08vw,40px);} /* ========================================================================= СИЛЬНАЯ ГЕНЕТИКА ========================================================================= */ /* Макет 1920: заголовок на y=2657, низ предыдущего блока 2489 → отступ 168. */ .genetics{position:relative;padding-top:clamp(60px,8.75vw,168px);overflow:visible;} .genetics__inner{position:relative;} /* Декор (зелёная молекула + чёрная гантель) по макету стоит сразу под абзацем «Измени свой код»: зелёная 98,2154 502x323; чёрная 572.6,2131 354x346. Якорь .genetics__inner на 2656 → сдвиг группы вверх на 502px = 26.15vw. */ .genetics__decor{position:absolute;left:0;right:0;top:clamp(-502px,-26.15vw,-200px);height:0;z-index:1;} .genetics__decor .mol{position:absolute;} .mol--gen-green{left:5.1%;top:0;width:clamp(220px,26.15vw,502px);transform-origin:center;} .mol--gen-black{left:29.82%;top:clamp(-23px,-1.2vw,0px);width:clamp(150px,18.44vw,354px);} /* Большая гантель (Figma 130:1984 «Asset 4 3»): habbox 668.886x725.667 в точке 1394.613;2499 — это габарит ПОВЁРНУТОГО узла. Исходник 1100x690 (molecule-black-4.webp) повёрнут на 55.09° по часовой при масштабе 0.5596, т.е. до поворота 615.6x386.1. Центр bbox = 1729.06;2861.83, поворот вокруг центра его не двигает → левый верх неповёрнутого бокса 1421.26;2668.78. Проценты считаются от padding-box .genetics__inner, а это все 1920 макета (как и у соседних .mol--gen-*): left 1421.26/1920 = 74.02%, width 615.6/1920 = 32.06%, top 2668.78-2656 = 12.78px = 0.67vw. z-index:0 — ниже заголовка (z:2) и ниже секции формы (идёт позже в DOM). */ .genetics__dumbbell{position:absolute;left:0;right:0;top:0;height:0;z-index:0;} .mol--gen-dumbbell{ position:absolute;left:74.02%;top:.67vw;width:32.06%; transform:rotate(55.09deg);transform-origin:center; } .genetics__title{ position:relative;z-index:2; font-family:var(--font-display);font-weight:500; font-size:clamp(40px,5vw,96px);line-height:1.054;text-transform:uppercase;color:var(--ink); display:flex;flex-direction:column;gap:0; } .genetics__l2 .is-strike{ color:var(--accent);font-weight:300; position:relative;white-space:nowrap; } /* Перечёркивание в макете — не линия, а белый мазок кистью (Figma «Line 1», 120;2815, 798x18, экспортирован в assets/img/brush.svg, заливка white). Слово «ДОСТАЕТСЯ» рендерится 783px при font-size 96 → мазок шире на 15px (0.156em) и стоит на 0.49em от верха строчного бокса, толщина 18px = 0.19em. Все размеры в em — мазок сам масштабируется вместе с кеглем на мобилке. */ .genetics__l2 .is-strike::after{ content:"";position:absolute;left:0;right:-.156em;top:.49em;height:.19em; background:url("../assets/img/brush.svg") no-repeat center / 100% 100%; } /* ========================================================================= ФОРМА ЗАЯВКИ ========================================================================= */ /* Макет 1920: панель 1680×726 на y=2930; шапка формы на 202;2989 (внутр. 82;59), сама форма — 1525×408 на 202;3154 (внутр. 82;224). */ .lead-form{padding-top:clamp(56px,3.7vw,71px);} .lead-form__panel{ position:relative;overflow:visible;background:transparent; padding:clamp(28px,3.07vw,59px) clamp(24px,3.8vw,73px) clamp(36px,4.9vw,94px) clamp(24px,4.27vw,82px); } /* Шапка формы обязана помещаться в узкую часть панели: вырез начинается на 52.61vw (120+0.5298*1680 @1920), левый край шапки — на 10.52vw (6.25+4.27). Отсюда предел 41vw; на 1920 и шире работает жёсткий кап 715px из макета. */ .lead-form__head{position:relative;z-index:1;max-width:min(715px,41vw);margin-bottom:clamp(28px,2.45vw,47px);} .lead-form__title{ font-family:var(--font-display);font-weight:400; font-size:clamp(22px,1.67vw,32px);line-height:1.054;color:var(--ink); } .lead-form__sub{ margin-top:clamp(12px,1.04vw,20px); font-weight:300;font-size:clamp(15px,1.04vw,20px);line-height:1.6;color:var(--ink); } .lead-form__form{ position:relative;z-index:2; display:grid; grid-template-columns:minmax(0,398fr) minmax(0,357fr) minmax(0,193fr) minmax(0,397fr); gap:clamp(24px,3.125vw,60px); align-items:start; } .lead-form__col{min-width:0;border:0;margin:0;padding:0;} .lead-form__col--fields{display:flex;flex-direction:column;gap:clamp(16px,2.08vw,40px);} /* Текстовые поля */ .field{display:block;position:relative;} .field input,.field select{ width:100%; font-family:var(--font-body);font-weight:300; font-size:clamp(15px,1.04vw,20px);line-height:1.6;color:var(--ink); background:radial-gradient(140% 240% at -10% 140%, rgba(26,35,42,.85), rgba(26,35,42,0) 70%); border:1px solid var(--accent);border-radius:var(--r-md); padding:clamp(13px,.99vw,19px) clamp(16px,1.04vw,20px); /* высота поля 72px по макету */ outline:none;transition:border-color .2s ease, box-shadow .2s ease; } .field input::placeholder{color:var(--ink);opacity:1;} .field input:focus,.field select:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(187,208,67,.18);} .field--select{position:relative;} .field--select select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:52px;} .field--select select:required:invalid{color:var(--ink);} .field__chevron{position:absolute;right:clamp(16px,1.04vw,20px);top:50%;transform:translateY(-50%);width:clamp(18px,1.37vw,26px);height:auto;pointer-events:none;} /* Легенды групп */ .lead-form__legend{ font-family:var(--font-body);font-weight:400; font-size:clamp(15px,1.04vw,20px);line-height:1.054; text-transform:uppercase;color:var(--accent); margin-bottom:clamp(18px,1.2vw,23px);padding:0; } /* Кастомные выборы (чекбоксы-круги / радио) */ .lead-form__col--group{display:flex;flex-direction:column;} .lead-form__col--group .choice + .choice{margin-top:clamp(18px,2.08vw,40px);} .choice{display:flex;align-items:center;gap:clamp(16px,1.6vw,31px);cursor:pointer;} .choice input{position:absolute;opacity:0;width:0;height:0;} .choice__mark{ flex:none;width:clamp(28px,2.08vw,40px);height:clamp(28px,2.08vw,40px); border:1px solid var(--accent);border-radius:50%; display:grid;place-items:center;transition:box-shadow .2s ease, background .2s ease; background:radial-gradient(120% 120% at 30% 20%, rgba(187,208,67,.12), rgba(26,35,42,0) 70%); } .choice__mark::after{ content:"";width:45%;height:45%;border-radius:50%;background:var(--accent); transform:scale(0);transition:transform .18s ease; } .choice input:checked + .choice__mark::after{transform:scale(1);} .choice input:focus-visible + .choice__mark{box-shadow:0 0 0 3px rgba(187,208,67,.35);} .choice__text{ font-family:var(--font-body);font-weight:300; font-size:clamp(15px,1.04vw,20px);line-height:1.3;color:var(--ink); } /* Согласие — квадратный чекбокс */ .lead-form__col--submit{display:flex;flex-direction:column;gap:clamp(20px,2.08vw,40px);} .choice--consent{align-items:flex-start;gap:clamp(12px,1.04vw,20px);} .choice__mark--square{ width:19px;height:19px;border-radius:5px;border:1px solid var(--accent); margin-top:3px;background:none; } .choice__mark--square::after{ width:10px;height:6px;border-radius:0;background:none; border-left:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent); transform:rotate(-45deg) scale(0);margin-top:-2px; } .choice--consent input:checked + .choice__mark--square{background:var(--accent);} .choice--consent input:checked + .choice__mark--square::after{transform:rotate(-45deg) scale(1);} .choice--consent .choice__text{font-size:clamp(11px,.625vw,12px);line-height:1.5;} .lead-form__btn{align-self:flex-start;} /* Навигация по шагам мобильного визарда — на десктопе формы шагов нет */ .form-nav{display:none;} .lead-form__legal{ font-weight:300;font-size:clamp(11px,.625vw,12px);line-height:1.5;color:var(--muted); } /* декоративный ∞ */ .lead-form__wave{ /* Макет: группа 339×37.6 на 1330;3528, т.е. 131 от правого и 90 от нижнего края панели */ position:absolute;z-index:1;right:clamp(20px,6.82vw,131px);bottom:clamp(20px,4.7vw,90px); width:clamp(120px,17.66vw,339px);height:auto;aspect-ratio:339/37.5921; opacity:.9;pointer-events:none; } /* ========================================================================= ФУТЕР ========================================================================= */ /* Макет 1920: заголовок 124;3813 (722×201), карта 896;3811 (904×470), кнопка маршрута 123;4051, координаты 4151, нижняя панель с 4377. */ .footer{padding-top:clamp(60px,8.18vw,157px);padding-bottom:clamp(30px,5.05vw,97px);} .footer__top{ display:grid;grid-template-columns:minmax(0,776fr) minmax(0,904fr); column-gap:0;row-gap:clamp(24px,3vw,58px);align-items:start; margin-bottom:clamp(40px,2.08vw,40px); } .footer__headline{ font-family:var(--font-display);font-weight:500; font-size:clamp(34px,3.33vw,64px);line-height:1.054;text-transform:uppercase;color:var(--ink); max-width:722px; } .footer__headline span{color:var(--accent);} .footer__route{margin-top:clamp(24px,1.93vw,37px);} /* Макет: знак-«молекула» Group 3 на 124;4155 (109×25.58), текст координат — с 252;4151. Отсюда отступ слева 4px, зазор до текста 19px. */ .footer__coords{ display:flex;align-items:flex-start;gap:clamp(10px,.99vw,19px); margin-top:clamp(24px,2.4vw,46px); font-family:var(--font-display);font-weight:400; font-size:clamp(20px,1.875vw,36px);line-height:1.054;letter-spacing:.04em; text-transform:uppercase;color:var(--accent); } .footer__coords-mark{ flex:none; margin-left:clamp(0px,.21vw,4px);margin-top:clamp(1px,.1vw,2px); width:clamp(64px,5.68vw,109px);aspect-ratio:109/25.584;height:auto; } .footer__coords-val{display:block;} .footer__coords-val span{display:block;white-space:nowrap;} .footer__coords-val span:last-child{padding-left:2.2em;} .footer__map{position:relative;border-radius:clamp(24px,2.6vw,50px);overflow:hidden;aspect-ratio:904/470;} .footer__map-bg{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.15);} .footer__map-pin{ position:absolute;left:40%;top:44.5%; /* по макету: 1230;3975 в карте 896;3811 */ width:clamp(34px,3vw,57px);aspect-ratio:56.5684/89.9286;height:auto; transform:translate(-50%,-50%);filter:drop-shadow(0 8px 16px rgba(0,0,0,.55)); } /* нижняя панель */ .footer__bar{border-top:1px solid rgba(255,255,255,.08);padding-top:clamp(28px,2.92vw,56px);} /* Позиции элементов нижней строки сняты с макета (1920): лого 124, телефон 405, адрес 832, почта 1082, соцсети 1318, кнопка 1511. */ .footer__row--main{ display:grid; grid-template-columns:285fr 427fr 250fr 236fr 193fr 289fr; gap:0;align-items:center; margin-bottom:clamp(28px,3.49vw,67px); } .footer__logo{flex:none;} .footer__logo img{width:clamp(140px,9.2vw,177px);height:auto;} .footer__phone{ font-family:var(--font-display);font-weight:500; font-size:clamp(20px,1.67vw,32px);line-height:1.054;color:var(--ink);white-space:nowrap; } /* margin:0 обязателен: у
браузерный дефолт — margin-block:1em, из-за него grid центрировал адрес вместе с нижним отступом 16px и текст вставал на 8px выше телефона, почты и соцсетей. */ .footer__addr,.footer__email{ margin:0; font-family:var(--font-body);font-weight:400;font-style:normal; font-size:clamp(12px,.73vw,14px);line-height:1.4;letter-spacing:.02em; text-transform:uppercase;color:var(--ink);white-space:nowrap; } .footer__email:hover{color:var(--accent);} .footer__social{display:flex;align-items:center;gap:clamp(10px,.9vw,16px);} .footer__social a{color:var(--accent);transition:transform .2s ease,opacity .2s ease;} .footer__social a:hover{transform:translateY(-2px);opacity:.85;} .footer__social{--soc-w:clamp(22px,1.5vw,28px);} .footer__apply{margin-left:auto;border-radius:var(--r-pill);} .footer__row--legal{ display:grid;grid-template-columns:285fr 1097fr 298fr; gap:0;align-items:start; } .footer__hours p{ font-family:var(--font-body);font-size:clamp(12px,.73vw,14px);line-height:1.4; letter-spacing:.02em;text-transform:uppercase;color:var(--ink); } .footer__hours p:first-child{margin-bottom:clamp(6px,.54vw,10px);} .footer__hours-val{font-weight:300;} .footer__legal{ display:grid;grid-template-columns:403fr 505fr;grid-template-rows:auto auto; grid-auto-flow:column; /* по макету пункты идут колонками, а не строками */ gap:clamp(6px,.54vw,10px) clamp(16px,1.3vw,25px);max-width:933px; } .footer__legal a{ font-weight:300;font-size:clamp(11px,.68vw,13px);line-height:1.5; text-transform:uppercase;color:var(--muted); transition:color .2s ease; } .footer__legal a:hover{color:var(--ink);} /* Макет: подпись 1502 и логотип студии 1651 стоят в одну строку. */ .footer__studio{ display:flex;align-items:flex-start;justify-content:flex-end; gap:clamp(12px,1.04vw,20px);text-align:left; } .footer__studio span{ font-family:var(--font-body);font-weight:400; font-size:clamp(12px,.83vw,16px);text-transform:uppercase;color:var(--accent-2);line-height:1.3; } .footer__studio img{width:clamp(110px,7.4vw,143px);height:auto;} /* ========================================================================= БУРГЕР / МОБИЛЬНАЯ ФИКС-ШАПКА / ВЫЕЗЖАЮЩЕЕ МЕНЮ ========================================================================= */ .burger{ display:none;flex-direction:column;justify-content:center;gap:5px; width:36px;height:36px;padding:6px 4px;flex:none; } .mobile-header__bar .burger{display:flex;} .burger span{display:block;width:100%;height:2.5px;border-radius:2px;background:var(--accent);transition:.25s ease;} .mobile-header{ display:none;position:fixed;top:0;left:0;right:0;z-index:50; padding:10px clamp(12px,4vw,16px); transform:translateY(-115%);transition:transform .35s ease; pointer-events:none; } .mobile-header.is-shown{transform:translateY(0);pointer-events:auto;} .mobile-header__bar{ display:flex;align-items:center;gap:14px; background:linear-gradient(180deg,#1c1f10,#0d0e09); border:1px solid rgba(187,208,67,.14); border-radius:26px;padding:10px 14px; box-shadow:0 14px 34px -18px rgba(0,0,0,.8); } .mobile-header__logo{flex:1 1 auto;min-width:0;} .mobile-header__logo img{width:auto;height:26px;} .mobile-header__call{ flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:16px; background:var(--accent);color:var(--on-accent); } .mobile-header__call svg{width:22px;height:22px;} .menu-backdrop{ position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.55);backdrop-filter:blur(4px); opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease; } .menu-backdrop.is-open{opacity:1;visibility:visible;} .mobile-menu{ position:fixed;top:0;right:0;z-index:60;height:100%; width:min(86vw,380px); background:radial-gradient(120% 90% at 100% 0%, #20250f 0%, #14160d 45%, #0b0b0b 100%); border-radius:32px 0 0 32px; padding:clamp(20px,6vw,28px) clamp(20px,6vw,28px) clamp(24px,7vw,36px); display:flex;flex-direction:column;gap:clamp(20px,5vw,28px); transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1); overflow-y:auto;box-shadow:-30px 0 60px -30px rgba(0,0,0,.9); } .mobile-menu.is-open{transform:translateX(0);} /* Меню — флекс-колонка высотой во весь экран. Без flex-shrink:0 при низком вьюпорте (развёрнутая адресная строка Safari) браузер ужимал элементы с заданной высотой — кнопка «Позвонить» становилась узкой полоской. Теперь блоки сохраняют размеры, а лишнее уходит в скролл (overflow-y:auto). */ .mobile-menu > *{flex:0 0 auto;} .mobile-menu__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;} .mobile-menu__logo{width:clamp(140px,42vw,177px);height:auto;} .mobile-menu__close{color:var(--accent);width:34px;height:34px;flex:none;display:grid;place-items:center;} .mobile-menu__close svg{width:16px;height:26px;} .mobile-menu__nav{display:flex;flex-direction:column;gap:clamp(14px,4vw,20px);} .mobile-menu__nav a{ font-family:var(--font-display);font-weight:400;font-size:clamp(22px,7vw,28px); color:var(--ink);transition:color .2s ease; } .mobile-menu__nav a:hover,.mobile-menu__nav a:active{color:var(--accent);} .mobile-menu__phone{ font-family:var(--font-display);font-weight:500;font-size:clamp(24px,7.5vw,30px);color:var(--accent); } .mobile-menu__phone b{color:#fff;font-weight:500;} .mobile-menu__addr{ font-style:normal;text-transform:uppercase;color:var(--ink); font-size:clamp(14px,4vw,16px); } .mobile-menu__hours p{font-size:clamp(14px,4vw,16px);color:var(--ink);} .mobile-menu__hours p:first-child{text-transform:uppercase;margin-bottom:6px;font-family:var(--font-display);} .mobile-menu__hours-val{font-weight:300;color:var(--muted);} .mobile-menu__btn{align-self:stretch;margin-top:auto;} .mobile-menu__social{display:flex;gap:18px;} .mobile-menu__social a{color:var(--accent);} .mobile-menu__social{--soc-w:28px;} /* ========================================================================= АДАПТИВ (планшет/мобилка) ========================================================================= */ @media (max-width:900px){ .mobile-only{display:flex;} .mobile-header{display:block;} .topbar .burger{display:flex;width:38px;height:26px;padding:0;} /* В макете бургер — две скруглённые полосы 37×8.6 с зазором 7.8 (Vector 130:2228) */ .burger{gap:0;justify-content:space-between;height:26px;padding:0;width:38px;} .burger span{height:8.6px;border-radius:4.3px;} /* Шапка внутри hero: только лого + бургер */ .topbar__nav,.topbar__phone,.topbar__social{display:none;} .topbar{gap:16px;justify-content:space-between;} .topbar__logo{width:clamp(140px,40vw,200px);} /* Hero */ .hero{padding-top:16px;} .panel-bg{display:none;} .hero__panel{ padding:18px 20px 40px;min-height:auto;border-radius:28px; background:radial-gradient(130% 120% at 6% 100%, #4d5527 0%, #2c3119 42%, #141414 100%); } .hero__content{margin-top:clamp(40px,16vw,90px);max-width:none;} .hero__title{font-size:clamp(30px,8.2vw,52px);} /* На мобилке межстрочный интервал у Etude Noire чуть свободнее — иначе строки слипаются */ .hero__lead{font-size:clamp(14px,3.8vw,17px);line-height:1.32;max-width:none;} .hero__cta{margin-top:28px;margin-left:0;} .btn-dnk{ white-space:normal;text-align:center; font-size:clamp(13px,3.6vw,16px); padding:16px 18px; } .hero__cta{display:flex;width:100%;} .hero__est{position:static;margin-top:28px;display:inline-block;} .hero__coords{position:static;margin-top:14px;justify-content:flex-start;} .mol--green-big{left:auto;right:-6%;top:-4%;width:clamp(180px,52vw,280px);} .mol--black-top{right:2%;left:auto;top:-6%;width:clamp(90px,26vw,150px);} .mol--green-sm,.mol--black-left{display:none;} /* Статистика — колонка */ .stats{padding-top:48px;} .stats__grid{grid-template-columns:1fr;gap:16px;} .stats__card{min-height:auto;padding:24px;} .stats__num{font-size:clamp(44px,13vw,72px);} .stats__label{font-size:clamp(15px,4.4vw,20px);} /* Измени свой код — колонка */ .change{padding-top:56px;} .change__grid{grid-template-columns:1fr;gap:28px;} .change__title{font-size:clamp(38px,11vw,60px);max-width:none;} .change__text{font-size:clamp(14px,3.8vw,17px);margin-top:20px;} .change__list{gap:14px;} /* На мобилке заголовок пункта занимает всю доступную ширину — ограничение 46.7% (348 из 745 по макету) оставило бы 3-4 строки в узкой колонке */ .change__q-text{font-size:clamp(15px,4.2vw,19px);max-width:none;} .change__q{min-height:0;} .change__a-inner{padding-top:18px;} .change__a-text{font-size:clamp(13px,3.6vw,15px);line-height:1.35;} .change__cta{margin-top:18px;} .change__chev{width:clamp(22px,6vw,30px);} /* Сильная генетика */ /* Декор «гантели» на мобилке выносим в отдельный зазор между списком и заголовком, чтобы он ничего не перекрывал */ .genetics{padding-top:clamp(190px,48vw,432px);} .genetics__title{font-size:clamp(34px,10vw,56px);} .change{position:relative;z-index:2;} /* Пропорции композиции из макета сохранены, но группа вписана в экран целиком */ .genetics__decor{top:-40vw;opacity:.9;} .mol--gen-green{left:4%;top:0;width:53.3vw;} .mol--gen-black{left:54.3%;top:-1.1vw;width:37.6vw;} /* Большая гантель на мобилке: та же роль (фон под заголовком и под панелью формы), но уменьшена и сдвинута, чтобы не резалась краем экрана */ .mol--gen-dumbbell{left:30%;top:14vw;width:62vw;opacity:.9;} /* Форма — колонка */ .lead-form{padding-top:56px;} .lead-form__panel{ padding:28px 22px 40px;border-radius:28px; background:radial-gradient(130% 120% at 4% 100%, #4d5527 0%, #23271590 45%, #0f0f0f 100%); } .lead-form__form{grid-template-columns:1fr;gap:32px;} /* Ограничитель 41vw задуман под вырез десктопной панели; на мобилке он сжимал шапку формы до ~165px и рвал заголовок на четыре строки. */ .lead-form__head{max-width:none;} .lead-form__title{font-size:clamp(20px,5.6vw,26px);} .lead-form__sub{font-size:clamp(14px,3.9vw,17px);} .field input,.field select{padding:16px 18px;} .lead-form__btn{align-self:stretch;} .lead-form__wave{position:static;margin-top:24px;width:clamp(160px,55vw,300px);opacity:.85;} /* Футер — колонка */ .footer{padding-top:70px;} .footer__top{grid-template-columns:1fr;gap:32px;align-items:start;} .footer__headline{font-size:clamp(30px,9vw,52px);max-width:none;} .footer__map{order:2;} .footer__coords{font-size:clamp(18px,5.6vw,30px);gap:10px;} .footer__coords-mark{width:clamp(52px,16vw,86px);margin-left:0;} .footer__coords-val span:last-child{padding-left:1.6em;} /* Нижняя строка футера на мобилке — одна колонка */ .footer__row--main{grid-template-columns:1fr;gap:22px;justify-items:start;align-items:start;} .footer__addr,.footer__email{white-space:normal;} .footer__apply{margin-left:0;justify-self:stretch;text-align:center;} .footer__row--legal{grid-template-columns:1fr;gap:26px;} .footer__legal{grid-auto-flow:row;grid-template-rows:auto;grid-template-columns:1fr;max-width:none;} .footer__studio{justify-content:flex-start;align-items:flex-start;text-align:left;flex-wrap:wrap;} } /* ========================================================================= МОБИЛЬНЫЙ МАКЕТ (Figma 130:2189, фрейм 402×5187) — точная реплика ------------------------------------------------------------------------- Единица --u = 1px макета: ширина контента 370 при боковых полях 16, поэтому --u = (100vw - 32px) / 370. Сверху ограничена 1.16px, чтобы на 560-600px вёрстка не раздувалась; снизу НЕ ограничена — иначе контент стал бы шире панели на узких экранах. Кегли — clamp(min, N*--u, max). ========================================================================= */ @media (max-width:600px){ :root{ --u:min(calc((100vw - 32px) / 370), 1.16px); --gutter:calc(16 * var(--u)); /* боковые поля макета */ } /* Выше ~461px шкала --u упирается в потолок, поэтому колонку контента ограничиваем шириной макета и центрируем — иначе геометрия панелей растягивалась бы, а кегли оставались прежними */ .wrap{max-width:calc(402 * var(--u));padding-inline:var(--gutter);} /* ---------------------------- Кнопки ---------------------------------- */ /* В макете все кнопки одной высоты — 66px (Frame 2 / Frame 95 / Frame 96) */ /* padding 20 (как во Frame 2 макета) + без трекинга: иначе «НАЧАТЬ ТРАНСФОРМАЦИЮ» (281px при 16px) не влезает в 326-48 и рвётся на две строки */ .btn-dnk{ height:calc(66 * var(--u));padding:0 calc(20 * var(--u)); border-radius:calc(20 * var(--u)); font-size:clamp(12px,calc(16 * var(--u)),18px); line-height:1.1;letter-spacing:0;white-space:normal;text-align:center; } .hero__cta{white-space:nowrap;} .btn-dnk--ghost{border-radius:calc(20 * var(--u));padding:0 calc(20 * var(--u));} /* =========================== ФИКС-ШАПКА ============================== */ /* Figma 77:1403 / 77:1673: бар 370×77 с вырезами снизу; кнопка звонка — в выступающем табе по центру (x=157), логотип — только знак (x=27). */ .mobile-header{ padding:calc(22 * var(--u)) var(--gutter) 0; max-width:calc(402 * var(--u));margin-inline:auto; } .mobile-header__bar{ position:relative;display:block; width:100%;aspect-ratio:370/77; background:none;border:0;border-radius:0;box-shadow:none;padding:0; } .mobile-header__shape{position:absolute;inset:0;width:100%;height:100%;} .mobile-header__logo{ position:absolute;left:calc(27 * var(--u));top:calc(10 * var(--u)); width:calc(65.3 * var(--u));flex:none; } .mobile-header__call{ position:absolute;left:calc(157 * var(--u));top:calc(12 * var(--u)); width:calc(56 * var(--u));height:calc(56 * var(--u)); background:none;border-radius:0; } .mobile-header__call svg{width:100%;height:100%;} .mobile-header__bar .burger{ position:absolute;left:calc(315 * var(--u));top:calc(14 * var(--u)); width:calc(37 * var(--u));height:calc(25 * var(--u)); } .burger{height:calc(25 * var(--u));width:calc(37 * var(--u));} .burger span{height:calc(8.62 * var(--u));border-radius:calc(4.31 * var(--u));} /* =============================== HERO ================================= */ /* Панель 16;27 370×570 — Subtract-форма, лого стоит в верхнем вырезе */ .hero{padding-top:calc(27 * var(--u));} /* padding-top вместо margin-top у контента: у панели нет собственного верхнего отступа, и margin ребёнка схлопывался бы наружу, утаскивая панель вниз */ .hero__panel{ position:relative;padding:calc(136 * var(--u)) 0 0;min-height:0;border-radius:0; background:none;aspect-ratio:370/570; } .panel-bg{display:none;} .panel-bg--m{display:block;} .topbar{ position:absolute;left:0;right:0;top:0; height:calc(75 * var(--u));margin:0;gap:0;display:block; } .topbar__logo{ position:absolute;left:0;top:0; width:calc(161 * var(--u));margin:0; } .topbar .burger{ position:absolute;left:calc(312 * var(--u));top:calc(16 * var(--u)); background:none;backdrop-filter:none;border-radius:0; } .hero__content{ margin-top:0; padding-inline:calc(22 * var(--u));max-width:none; } /* Заголовок: Etude Noire Medium 35px, uppercase (нода 164:879) */ .hero__title{font-size:clamp(24px,calc(35 * var(--u)),40px);line-height:1.0503;} /* Абзац: Etude Noire Regular 14px / 1.3 (нода 130:2768) */ .hero__lead{ margin-top:calc(22 * var(--u)); font-size:clamp(11.5px,calc(14 * var(--u)),16px);line-height:1.3;max-width:none; } .hero__cta{margin-top:calc(27 * var(--u));display:flex;width:100%;margin-left:0;} /* Подписи в нижних вырезах панели — по макету в две строки */ .hero__est{ position:absolute;left:0;bottom:0; width:calc(82 * var(--u));white-space:normal; font-size:clamp(11px,calc(14 * var(--u)),16px);line-height:1.0503; } .hero__coords{ position:absolute;left:calc(203 * var(--u));right:auto;bottom:0; width:calc(167 * var(--u));align-items:flex-start; gap:calc(12 * var(--u));white-space:normal; font-size:clamp(11px,calc(14 * var(--u)),16px);line-height:1.0503; } .hero__coords img{width:calc(23 * var(--u));margin-top:calc(-6 * var(--u));} /* Молекулы hero (Asset 3 2, black (2) 1, black (8) 1 — координаты 130:2189) */ .mol--green-sm{display:none;} .mol--green-big{left:calc(250 * var(--u));right:auto;top:calc(50 * var(--u));width:calc(171 * var(--u));} .mol--black-top{left:calc(339 * var(--u));right:auto;top:calc(254 * var(--u));width:calc(123 * var(--u));transform:none;} .mol--black-left{display:block;left:calc(-94 * var(--u));top:calc(55 * var(--u));width:calc(157 * var(--u));} /* ============================ СТАТИСТИКА ============================== */ /* Карточки 370×110, число слева, подпись справа (Figma 154:100 «v2») */ .stats{padding-top:calc(50 * var(--u));} .stats__grid{grid-template-columns:1fr;gap:calc(29 * var(--u));} .stats__card{ flex-direction:row;align-items:center; gap:calc(20 * var(--u));padding:calc(30 * var(--u)); border-radius:calc(30 * var(--u));min-height:calc(110 * var(--u)); background:linear-gradient(17.41deg,#4d5527 17.24%,#141414 81.14%); } .stats__num{flex:none;white-space:nowrap;font-size:clamp(32px,calc(48 * var(--u)),56px);} .stats__label{flex:1 1 0;min-width:0;font-size:clamp(13px,calc(16 * var(--u)),19px);line-height:1.0503;} /* ========================== ИЗМЕНИ СВОЙ КОД =========================== */ /* В мобильном макете заголовок в обычном регистре, 40px, ширина 236 */ .change{padding-top:calc(56 * var(--u));} .change__grid{ grid-template-columns:1fr;gap:0; width:min(calc(370 * var(--u)), calc(100% - 2 * var(--gutter))); } .change__intro{padding-inline:calc(6 * var(--u));} .change__title{ font-size:clamp(28px,calc(40 * var(--u)),46px);line-height:1.0503; text-transform:none;max-width:calc(236 * var(--u)); } .change__text{margin-top:calc(24 * var(--u));font-size:clamp(13px,calc(16 * var(--u)),18px);line-height:1.6;} /* Зазор 271px между абзацем и аккордеоном занят молекулами макета */ .change__decor{display:block;position:relative;height:calc(271 * var(--u));} .change__decor .mol{position:absolute;} .mol--ch-green{left:calc(-44 * var(--u));top:calc(35 * var(--u));width:calc(304 * var(--u));} .mol--ch-black{left:calc(242 * var(--u));top:calc(16 * var(--u));width:calc(239 * var(--u));} /* Аккордеон: карточка 370×111, padding 30 (минус рамка 3), зазор 24 */ .change__list{gap:calc(24 * var(--u));} .change__item{border-radius:calc(20 * var(--u));padding:calc(27 * var(--u));} /* 34 = две строки заголовка (16px x 1.0503): карточки с двумя строками дают 94, с тремя — 111, как в макете */ .change__q{min-height:calc(34 * var(--u));gap:calc(20 * var(--u));} .change__q-text{ font-size:clamp(13px,calc(16 * var(--u)),18px);line-height:1.0503; max-width:calc(185 * var(--u)); } .change__chev{width:calc(36.77 * var(--u));} .change__a-inner{padding-top:calc(24 * var(--u));} .change__a-text{font-size:clamp(12px,calc(14 * var(--u)),16px);line-height:1.4;} .change__cta{margin-top:calc(24 * var(--u));} /* =========================== СИЛЬНАЯ ГЕНЕТИКА ========================= */ /* Заголовок 16;2357 327×168, 40px. Пара молекул уехала в .change__decor, здесь остаётся только большая гантель (130:2191, AABB 326;2273 294×319). */ .genetics{padding-top:calc(78 * var(--u));} .genetics__decor{display:none;} .genetics__title{font-size:clamp(28px,calc(40 * var(--u)),46px);} .mol--gen-dumbbell{left:calc(338 * var(--u));top:calc(-5 * var(--u));width:calc(271 * var(--u));opacity:.9;} /* ================================ ФОРМА =============================== */ /* Панель шага 370×666 (Figma 130:2329 / STEP_1…3) */ .lead-form{padding-top:calc(32 * var(--u));} .lead-form__panel{ display:flex;flex-direction:column; padding:calc(27 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u)) calc(21 * var(--u)); border-radius:calc(30 * var(--u)); min-height:calc(666 * var(--u)); background:radial-gradient(130% 120% at 8% 100%, #4d5527 0%, #30341d 50%, #222418 75%, #141414 100%); } .lead-form__head{width:calc(325 * var(--u));max-width:100%;margin-bottom:0;} .lead-form__title{font-size:clamp(18px,calc(24 * var(--u)),28px);line-height:1.0503;} .lead-form__sub{margin-top:calc(10 * var(--u));font-size:clamp(13px,calc(16 * var(--u)),18px);line-height:1.6;} .lead-form__wave{display:none;} .lead-form__form{ display:flex;flex-direction:column;flex:1 1 auto; gap:calc(24 * var(--u));margin-top:calc(24 * var(--u)); } /* Шаги: показываем только активную группу полей */ .lead-form__form[data-step] > *{display:none;} .lead-form__form[data-step="1"] > .lead-form__col--fields{display:flex;} .lead-form__form[data-step="2"] > .lead-form__col--group:not(.lead-form__col--time){display:flex;} .lead-form__form[data-step="3"] > .lead-form__col--time{display:flex;} /* display:contents — чтобы согласие, кнопка и правовой текст стали собственными флекс-элементами формы и их можно было расставить order'ом */ .lead-form__form[data-step="3"] > .lead-form__col--submit{display:contents;} .lead-form__form[data-step] > .form-nav{display:flex;} .lead-form__col--fields{gap:calc(20 * var(--u));width:calc(329 * var(--u));max-width:100%;} .field input,.field select{ padding:calc(20 * var(--u));border-radius:calc(20 * var(--u)); font-size:clamp(12px,calc(14 * var(--u)),16px);line-height:1.6; } .field--select select{padding-right:calc(56 * var(--u));} .field__chevron{right:calc(20 * var(--u));width:calc(26.35 * var(--u));} /* В макете зазор легенда→кружки 20, но там текст обрезан по cap-height. На живых line-box'ах он читается как «нет отступа», поэтому 40. */ .lead-form__legend{ font-weight:400;font-size:clamp(13px,calc(16 * var(--u)),18px); margin-bottom:calc(40 * var(--u)); } .lead-form__col--group .choice + .choice{margin-top:calc(20 * var(--u));} .choice{gap:calc(31 * var(--u));} .choice__mark{width:calc(40 * var(--u));height:calc(40 * var(--u));} .choice__text{font-size:clamp(13px,calc(16 * var(--u)),18px);line-height:1.6;} /* Время звонка — три кружка в строку, подпись под кружком */ .lead-form__col--time{ display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start; row-gap:calc(40 * var(--u));column-gap:calc(40 * var(--u)); } .lead-form__col--time .lead-form__legend{flex:0 0 100%;margin-bottom:0;} .lead-form__col--time .choice{ flex-direction:column;align-items:flex-start; gap:calc(10 * var(--u)); } .lead-form__col--time .choice + .choice{margin-top:0;} .choice--consent{order:1;gap:calc(20 * var(--u));align-items:flex-start;} .choice__mark--square{width:calc(19 * var(--u));height:calc(19 * var(--u));margin-top:calc(3 * var(--u));} .choice--consent .choice__text{font-size:clamp(11px,calc(13 * var(--u)),15px);line-height:1.45;} .lead-form__btn{display:none;} /* десктопная кнопка отправки */ .form-nav{order:2;margin-top:auto;} .lead-form__legal{order:3;font-size:clamp(10px,calc(12 * var(--u)),14px);line-height:1.5;} /* Навигация по шагам: НАЗАД 112×66 слева, ДАЛЕЕ/ОТПРАВИТЬ справа */ .form-nav{ align-items:center;justify-content:space-between; width:100%;gap:calc(20 * var(--u)); } .form-nav__btn{ display:inline-flex;align-items:center;justify-content:center; height:calc(66 * var(--u));min-width:calc(112 * var(--u)); padding:0 calc(20 * var(--u));border-radius:calc(20 * var(--u)); font-family:var(--font-display);font-weight:500; font-size:clamp(12px,calc(16 * var(--u)),18px);line-height:1; text-transform:uppercase;letter-spacing:.01em;white-space:nowrap; transition:opacity .2s ease, transform .2s ease; } .form-nav__back,.form-nav__next{flex:none;} .form-nav__back{background:var(--grad-route);color:var(--accent-2);} .form-nav__next,.form-nav__submit{background:var(--accent);color:var(--on-accent);} /* «Отправить заявку» в макете (Frame 98) — 165×66, текст в две строки */ .form-nav__submit{ flex:none;width:calc(165 * var(--u));min-width:0; padding:0 calc(18 * var(--u));white-space:normal;line-height:1.15; } .form-nav__btn:disabled{opacity:.5;cursor:default;} .lead-form__form[data-step="3"] .form-nav__next{display:none;} .lead-form__form:not([data-step="3"]) .form-nav__submit{display:none;} /* =============================== ФУТЕР ================================ */ .footer{padding-top:calc(60 * var(--u));padding-bottom:calc(40 * var(--u));} /* minmax(0,1fr): заголовок шире трека (373), но растягивать колонку и вместе с ней карту он не должен */ .footer__top{grid-template-columns:minmax(0,1fr);row-gap:calc(28 * var(--u));margin-bottom:0;} /* 373 из макета: при ровно 370 «ВАШЕЙ ЖИЗНИ» рвётся на две строки */ .footer__headline{font-size:clamp(28px,calc(40 * var(--u)),46px);max-width:none;width:calc(373 * var(--u));} .footer__route{margin-top:calc(24 * var(--u));display:flex;width:100%;} /* Координаты: знак 68×16 слева, текст 290 шириной в две строки */ .footer__coords{ margin-top:calc(28 * var(--u));gap:calc(15 * var(--u));align-items:flex-start; font-size:clamp(12px,calc(17 * var(--u)),20px);letter-spacing:.02em; } .footer__coords-mark{width:calc(68 * var(--u));margin:calc(4 * var(--u)) 0 0;} .footer__coords-val span:last-child{padding-left:1.2em;} .footer__map{aspect-ratio:1;border-radius:calc(30 * var(--u));} /* Нижний блок футера в макете — одна центрированная колонка с шагом 60. display:contents на строках позволяет расставить элементы order'ом в порядке макета: лого, телефон, режим работы, адрес, почта, соцсети… */ .footer__bar{ display:flex;flex-direction:column;align-items:center; gap:calc(60 * var(--u)); border-top:0;padding-top:calc(72 * var(--u));text-align:center; } .footer__row--main,.footer__row--legal{display:contents;} .footer__logo{order:1;} .footer__logo img{width:calc(177 * var(--u));} .footer__phone{order:2;font-size:clamp(22px,calc(32 * var(--u)),38px);} .footer__hours{ order:3;display:flex;flex-direction:column;align-items:center; gap:calc(19 * var(--u)); } /* «Ежедневно 7:00-23:00» в макете — одной строкой (нода 130:2312) */ .footer__hours p{white-space:nowrap;} .footer__hours p{font-size:clamp(12px,calc(16 * var(--u)),18px);line-height:1.6;} .footer__hours p:first-child{margin-bottom:0;font-weight:400;} /* В макете значение режима работы — без uppercase (нода 130:2312) */ .footer__hours p.footer__hours-val{text-transform:none;} .footer__addr{order:4;} .footer__email{order:5;} .footer__addr,.footer__email{ font-weight:400;font-size:clamp(12px,calc(16 * var(--u)),18px); line-height:1.6;white-space:normal; } .footer__social{order:6;gap:calc(30 * var(--u));--soc-w:calc(39 * var(--u));align-items:center;} .footer__social svg{width:calc(39 * var(--u));} .footer__apply{order:7;display:flex;width:calc(326 * var(--u));max-width:100%;margin:0;border-radius:calc(20 * var(--u));} .footer__legal{ order:8;display:flex;flex-direction:column;align-items:center; gap:calc(40 * var(--u));width:calc(289 * var(--u));max-width:100%; } /* В макете порядок ссылок иной, чем в разметке (2-я и 3-я меняются местами) */ .footer__legal li:nth-child(2){order:3;} .footer__legal li:nth-child(3){order:2;} .footer__legal a{ font-weight:300;font-size:clamp(12px,calc(16 * var(--u)),18px); line-height:1.6;text-transform:none;color:var(--muted); } .footer__studio{ order:9;flex-direction:column;align-items:center;justify-content:center; gap:calc(20 * var(--u));text-align:center; } .footer__studio span{font-size:clamp(12px,calc(16 * var(--u)),18px);} .footer__studio img{width:calc(143 * var(--u));} /* ========================= ВЫЕЗЖАЮЩЕЕ МЕНЮ ============================ */ /* Figma 77:1609: панель 305 (Rectangle 28), контент — колонка 223 с отступом 36 слева и сверху; лого 158x39 на 36;36, стрелка закрытия 33x53 на 243;21. Вертикальные зазоры между блоками — 50, внутри пар: телефон/адрес 30, режим работы 19. Все подписи в макете — в одну строку. */ .mobile-menu{ width:calc(305 * var(--u)); padding:calc(36 * var(--u)) calc(29 * var(--u)) calc(36 * var(--u)) calc(36 * var(--u)); gap:0; } .mobile-menu__head{margin-bottom:calc(45 * var(--u));align-items:flex-start;} .mobile-menu__logo{width:calc(158 * var(--u));} .mobile-menu__close{ width:calc(33 * var(--u));height:calc(53 * var(--u)); margin-top:calc(-15 * var(--u)); } .mobile-menu__close svg{width:calc(20 * var(--u));height:calc(33 * var(--u));} .mobile-menu__nav{gap:calc(50 * var(--u));margin-bottom:calc(50 * var(--u));} .mobile-menu__nav a{font-size:clamp(16px,calc(20 * var(--u)),24px);line-height:1.0503;} .mobile-menu__phone{ font-size:clamp(16px,calc(20 * var(--u)),24px);line-height:1.0503; margin-bottom:calc(30 * var(--u));white-space:nowrap; } .mobile-menu__addr{ font-size:clamp(12px,calc(16 * var(--u)),18px);line-height:1.6; margin-bottom:calc(50 * var(--u));white-space:nowrap; } .mobile-menu__hours{ display:flex;flex-direction:column;gap:calc(19 * var(--u)); margin-bottom:calc(50 * var(--u)); } .mobile-menu__hours p{white-space:nowrap;} .mobile-menu__hours p:first-child{ margin-bottom:0;font-size:clamp(16px,calc(20 * var(--u)),24px);line-height:1.0503; } .mobile-menu__hours-val{ font-family:var(--font-body);text-transform:none; font-size:clamp(12px,calc(16 * var(--u)),18px);line-height:1.6; } .mobile-menu__btn{ align-self:flex-start;margin:0 0 calc(50 * var(--u)); width:calc(223 * var(--u));max-width:100%; } .mobile-menu__social{gap:calc(30 * var(--u));align-items:center;} .mobile-menu__social{--soc-w:calc(39 * var(--u));} /* Перенос строк в заголовке «Сильная генетика» */ .genetics__l2{white-space:normal;} .genetics__l2 .is-strike{white-space:normal;} }