.elementor-9 .elementor-element.elementor-element-f2baf75{--display:flex;}.elementor-9 .elementor-element.elementor-element-7437100{--display:flex;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-9 .elementor-element.elementor-element-6689504 img{width:100px;height:100px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-9 .elementor-element.elementor-element-e827b83{margin:-15px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-9 .elementor-element.elementor-element-ee26616 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-9 .elementor-element.elementor-element-ee26616 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-9 .elementor-element.elementor-element-ee26616 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-9 .elementor-element.elementor-element-ee26616 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-9 .elementor-element.elementor-element-ee26616 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-9 .elementor-element.elementor-element-ee26616 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-9 .elementor-element.elementor-element-ee26616 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-9 .elementor-element.elementor-element-ee26616 .elementor-field-type-html{padding-bottom:0px;}.elementor-9 .elementor-element.elementor-element-ee26616 .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-9 .elementor-element.elementor-element-ee26616 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-9 .elementor-element.elementor-element-ee26616 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-9 .elementor-element.elementor-element-ee26616 .elementor-button[type="submit"]{color:#ffffff;}.elementor-9 .elementor-element.elementor-element-ee26616 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-9 .elementor-element.elementor-element-ee26616 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-9 .elementor-element.elementor-element-ee26616 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-9 .elementor-element.elementor-element-ee26616 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-9 .elementor-element.elementor-element-ee26616 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-9 .elementor-element.elementor-element-ee26616 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-9 .elementor-element.elementor-element-ee26616{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}/* Start custom CSS *//* =========================================================================
GYM24 / ДжиммИИ — стили лендинга
Куда вставлять: Elementor → Настройки страницы → Дополнительно →
«Пользовательский CSS». (Или Внешний вид → Настроить → Доп. стили.)
Всё внутри .gm — тема сайта не заденет и не будет задета.
Брейкпоинты Elementor: планшет ≤1024, мобильный ≤767.
========================================================================= */
.gm{
/* ---- палитра из макета ---- */
--y: #FFDA2A; /* фирменный жёлтый */
--y-dk: #F0C400; /* жёлтый на ховере */
--y-soft: #FDF2BE; /* подложка иконок */
--y-pale: #FDF7E0; /* бледная карточка */
--ink: #111214; /* основной текст */
--ink-2: #5F6169; /* вторичный текст */
--ink-3: #9A9DA5; /* подписи, время */
--bg: #F5F5F6; /* фон чётных секций */
--card: #FFFFFF;
--line: #ECECEF;
--in-bg: #F4F4F5; /* входящее сообщение */
--r: 28px; /* радиус крупных карточек */
--r-m: 18px;
--r-s: 12px;
--sh: 0 6px 28px rgba(17,18,20,.06);
--sh-l: 0 14px 44px rgba(17,18,20,.10);
--pad: 96px; /* вертикальные отступы секции */
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
color:var(--ink);
line-height:1.5;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* --- сброс внутри блока, чтобы тема не ломала вёрстку --- */
.gm *,.gm *::before,.gm *::after{box-sizing:border-box}
.gm h1,.gm h2,.gm h3,.gm p,.gm ul,.gm ol,.gm li,.gm figure,.gm figcaption{margin:0;padding:0}
.gm ul,.gm ol{list-style:none}
.gm img{display:block;max-width:100%;height:auto}
.gm a{color:inherit;text-decoration:none}
.gm .gm-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* Иконки рисуются штрихом текущим цветом.
ВАЖНО: здесь НЕ задаём width/height — иначе это правило (специфичность 0-1-1)
перебивает одноклассовые размеры иконок вроде .gm-apps__ic (0-1-0). */
.gm svg{display:block;fill:none;stroke:currentColor;stroke-width:3.2;
stroke-linecap:round;stroke-linejoin:round}
/* =========================================================================
КАРКАС
========================================================================= */
.gm-s{padding:var(--pad) 0;background:#fff}
/* на серой секции входящее сообщение делаем белым, иначе сливается с фоном */
.gm-s--alt{background:var(--bg);--in-bg:#FFFFFF}
.gm-s--hero{padding-top:56px}
.gm-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
/* Номера секций (01…07) убраны, в шапке остался только логотип.
flex-end держит его справа, как было в макете. Нужен слева — поменяйте
на flex-start. */
.gm-top{display:flex;align-items:center;justify-content:flex-end;margin-bottom:40px}
/* Плашка номера секции. Сейчас в разметке не используется — оставлена на случай,
если номера захотите вернуть: достаточно снова добавить 01. */
.gm-badge{
display:inline-flex;align-items:center;justify-content:center;
min-width:52px;height:32px;padding:0 14px;
background:var(--y);border-radius:999px;
font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;letter-spacing:.02em;
}
/* Логотип.
Файл cropped-Logo-gym24.jpg — квадрат 512×512 (обрезка иконки сайта),
сам знак это полоса 485×140 по центру, вокруг белое поле.
Поэтому не height:auto, а фиксированная рамка + object-fit:cover —
она отсекает пустоту сверху и снизу. 48.5% — реальный центр знака.
Если зальёте нормальный логотип (обрезанный по краям, лучше PNG
с прозрачностью) — замените блок на: height:34px;width:auto;object-fit:contain; */
.gm-logo{display:block;flex:0 0 auto;line-height:0}
.gm-logo img{
width:104px;height:34px;
object-fit:cover;object-position:center 48.5%;
}
/* --- типографика --- */
.gm-h1{
font-family:'Manrope',sans-serif;font-weight:800;
font-size:clamp(34px,4.4vw,60px);line-height:1.06;letter-spacing:-.025em;
}
.gm-h2{
font-family:'Manrope',sans-serif;font-weight:800;
font-size:clamp(28px,3.2vw,44px);line-height:1.1;letter-spacing:-.02em;
}
.gm .gm-h2sub{
font-family:'Manrope',sans-serif;font-weight:800;
font-size:clamp(22px,2.4vw,32px);line-height:1.15;letter-spacing:-.02em;margin-top:14px;
}
.gm-h3{
font-family:'Manrope',sans-serif;font-weight:700;
font-size:19px;line-height:1.25;letter-spacing:-.01em;
}
.gm-h3--c{text-align:center;font-size:21px}
.gm-y{color:var(--y)}
.gm-lead{font-size:17px;line-height:1.55;color:var(--ink);max-width:44ch}
.gm-txt{font-size:15px;line-height:1.55;color:var(--ink-2)}
.gm .gm-sub{font-family:'Manrope',sans-serif;font-weight:700;font-size:17px;margin-top:32px}
.gm-head{margin-bottom:44px}
.gm-head .gm-badge{margin-bottom:20px}
.gm-head .gm-h2{max-width:18ch}
.gm-head .gm-lead{margin-top:18px}
.gm-head--tight{margin-bottom:20px}
.gm-center{display:flex;justify-content:center;margin-top:56px}
/* --- жёлтая «маркерная» плашка --- */
.gm .gm-mark{
display:inline-block;margin:14px 0 8px;padding:3px 9px;
background:var(--y);border-radius:6px;
font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;line-height:1.3;
}
/* --- иконки в кружке --- */
.gm-ic{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:50%;
background:var(--y-soft);color:var(--ink);
}
.gm-ic svg{width:22px;height:22px}
.gm-ic--lg{width:52px;height:52px}
.gm-ic--lg svg{width:28px;height:28px}
.gm-ic--sm{width:28px;height:28px}
.gm-ic--sm svg{width:15px;height:15px;stroke-width:4.5}
/* --- кнопки --- */
.gm-btn{
display:inline-flex;align-items:center;justify-content:center;gap:14px;
padding:17px 30px;border-radius:999px;border:0;cursor:pointer;
background:var(--y);color:var(--ink);
font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;line-height:1;
transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.gm-btn:hover{background:var(--y-dk);transform:translateY(-1px);box-shadow:0 8px 22px rgba(240,196,0,.35)}
.gm .gm-btn__ic{width:22px;height:22px;flex:0 0 auto;stroke-width:3}
.gm-btn--lg{width:100%;max-width:420px;padding:22px 32px;font-size:17px;justify-content:space-between}
.gm-btn--sm{padding:11px 22px;font-size:14px;gap:0}
.gm-btn--ghost{background:#fff;border:1.5px solid var(--line)}
.gm-btn--ghost:hover{background:#fff;border-color:#DCDCE0;box-shadow:none}
/* --- карточка --- */
.gm-card{background:var(--card);border-radius:var(--r-m);box-shadow:var(--sh)}
/* --- заглушки под фото --- */
.gm-ph{
position:relative;overflow:hidden;border-radius:var(--r-m);
background:linear-gradient(135deg,#EDEDF0 0%,#F7F7F8 45%,#E4E4E8 100%);
}
.gm-ph::after{ /* «шум»/блик, чтобы пустая заглушка не была плоской */
content:"";position:absolute;inset:0;
background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.85),transparent 60%);
pointer-events:none;
}
.gm-ph img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
/* =========================================================================
01 — ГЕРОЙ
========================================================================= */
.gm-hero{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
grid-template-areas:"txt media" "cta media";
grid-template-rows:auto 1fr;
gap:36px 56px;align-items:start;
}
.gm-hero__txt{grid-area:txt}
.gm-hero__media{grid-area:media;position:relative;padding-bottom:0}
.gm-hero__cta{grid-area:cta;align-self:start}
.gm-hero .gm-lead{margin-top:22px}
.gm-ph--hero{
border-radius:var(--r);
aspect-ratio:5/6;
background:linear-gradient(160deg,#F2F2F3 0%,#E8E7E6 55%,#D9D6D2 100%);
}
.gm-ph--hero img{object-fit:contain;object-position:bottom center}
.gm-feats{
position:relative;z-index:2;
margin:-140px 0 0 0;padding:26px 24px;border-radius:var(--r);
box-shadow:var(--sh-l);
}
.gm-feats__list{display:flex;flex-direction:column;gap:18px}
.gm-feat{display:flex;align-items:flex-start;gap:14px}
.gm-feat p{font-size:14.5px;line-height:1.42;color:var(--ink-2)}
.gm-feat b{display:block;font-weight:600;color:var(--ink)}
/* =========================================================================
02 — ПРОБЛЕМЫ
========================================================================= */
.gm-grid{display:grid;gap:20px}
.gm-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gm-prob{padding:28px 26px 30px}
.gm-prob .gm-ic{margin-bottom:18px}
.gm-prob .gm-h3{margin-bottom:12px}
/* =========================================================================
03 / 06 — ДВУХКОЛОНОЧНЫЙ БЛОК
========================================================================= */
.gm-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.gm-split__l>.gm-lead{margin-bottom:8px}
/* --- чат --- */
.gm-dlg{display:flex;flex-direction:column;gap:14px}
.gm-msg{display:flex}
.gm-msg--out{justify-content:flex-end}
.gm-msg--in{justify-content:flex-start}
.gm-bub{
position:relative;max-width:82%;
padding:14px 18px 22px;border-radius:16px;
font-size:14.5px;line-height:1.45;
}
.gm-msg--out .gm-bub{background:var(--y);border-bottom-right-radius:4px;padding-bottom:14px}
.gm-msg--in .gm-bub{background:var(--in-bg);border-bottom-left-radius:4px}
/* хвостики (border-треугольники — работают везде) */
.gm-msg--out .gm-bub::after{
content:"";position:absolute;right:-7px;bottom:0;width:0;height:0;
border-left:13px solid var(--y);
border-bottom:9px solid transparent;
}
.gm-msg--in .gm-bub::after{
content:"";position:absolute;left:-7px;bottom:0;width:0;height:0;
border-right:13px solid var(--in-bg);
border-bottom:9px solid transparent;
}
.gm-time{
display:block;margin-top:8px;
font-size:11px;color:var(--ink-3);letter-spacing:.01em;
}
.gm-bub--media{display:flex;flex-direction:column;gap:12px;padding-bottom:16px}
.gm-bub--media .gm-bub__txt{display:block}
.gm-bub--media .gm-time{margin-top:0}
.gm-ph--dish{
align-self:flex-end;width:118px;height:118px;border-radius:50%;
margin:-52px -20px 0 0;box-shadow:0 8px 24px rgba(17,18,20,.14);
background:radial-gradient(circle at 35% 30%,#FFE9B8,#E8B76A 60%,#C98F3F 100%);
}
/* --- карточка подписки --- */
.gm-price{
display:block;margin-top:36px;padding:26px 30px;
background:var(--y);border-radius:var(--r);
text-align:center;transition:transform .18s ease,box-shadow .18s ease;
}
.gm-price:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(240,196,0,.4)}
.gm-price__t{display:block;font-family:'Manrope',sans-serif;font-weight:800;font-size:21px}
.gm-price__row{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:10px}
.gm-price__v{font-family:'Manrope',sans-serif;font-weight:800;font-size:40px;line-height:1;letter-spacing:-.02em}
.gm-price__cur{font-family:'Manrope',sans-serif;font-weight:700;font-size:19px}
.gm-price__per{font-size:17px;color:rgba(17,18,20,.55)}
.gm-price__old{display:inline-block;margin-top:6px;font-size:17px;color:rgba(17,18,20,.45)}
/* =========================================================================
04 — ВСЁ В ОДНОМ
========================================================================= */
.gm .gm-apps{margin-top:20px;display:flex;flex-direction:column;gap:2px}
.gm-apps li{display:flex;align-items:center;gap:16px;padding:9px 0;font-size:15.5px}
.gm .gm-apps__ic{width:24px;height:24px;flex:0 0 auto;color:var(--ink);stroke-width:3}
.gm-pale{background:var(--y-pale);border-radius:var(--r);padding:30px 26px 0;overflow:hidden}
.gm-pale .gm-h3--c{margin-bottom:26px}
/* --- макет телефона (чистый CSS) --- */
.gm-phone{
width:min(300px,100%);margin:0 auto;
background:#17181B;border-radius:34px 34px 0 0;
padding:16px 14px 0;
box-shadow:0 -2px 0 #303238 inset,0 18px 40px rgba(0,0,0,.22);
}
.gm-phone__scr{padding:8px 6px 0}
.gm-phone__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.gm-coin{
display:inline-flex;align-items:center;gap:6px;
padding:5px 12px 5px 8px;border-radius:999px;background:var(--y);
font-family:'Manrope',sans-serif;font-weight:800;font-size:13px;color:var(--ink);
}
.gm-coin svg{width:15px;height:15px;stroke-width:4}
.gm-bell{
position:relative;display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:50%;background:#26282D;color:#fff;
}
.gm-bell svg{width:17px;height:17px}
.gm-bell i{
position:absolute;top:-2px;right:-2px;
min-width:17px;height:17px;padding:0 4px;border-radius:999px;
background:#FF5A2B;color:#fff;font-size:10px;font-weight:700;font-style:normal;
display:flex;align-items:center;justify-content:center;
}
.gm-phone__hi{font-family:'Manrope',sans-serif;font-weight:800;font-size:17px;color:#fff}
.gm .gm-phone__sub{font-size:12px;color:#8C8F97;margin-top:2px;margin-bottom:14px}
.gm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gm-tile{background:#fff;border-radius:14px;padding:14px 14px 16px}
.gm .gm-tile__ic{width:26px;height:26px;color:var(--ink);margin-bottom:22px}
.gm-tile b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:13.5px}
.gm-tile span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
/* =========================================================================
05 — КАК ЭТО РАБОТАЕТ
========================================================================= */
.gm-steps{display:flex;flex-direction:column;gap:44px}
.gm-step{
display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:40px;align-items:center;
}
.gm-step__txt .gm-h3{margin:16px 0 10px;max-width:16ch}
.gm-step__vis{display:flex;flex-direction:column;gap:14px}
.gm-num{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:50%;background:var(--y);
font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;
}
.gm-mini{padding:20px 20px 22px}
.gm-mini__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.gm-mini__hd b,.gm-mini__t{font-family:'Manrope',sans-serif;font-weight:700;font-size:15px}
.gm .gm-mini__meta{font-size:12.5px;color:var(--ink-3);margin-top:4px;margin-bottom:14px}
.gm-ph--ava{width:36px;height:36px;border-radius:50%;flex:0 0 auto;
background:linear-gradient(150deg,#C9B79E,#8A6E52)}
.gm-kv{display:flex;flex-direction:column;gap:14px}
.gm-kv li{display:flex;align-items:flex-start;gap:11px}
.gm .gm-kv__ic{width:17px;height:17px;flex:0 0 auto;color:var(--ink-3);margin-top:2px}
.gm-kv span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.35}
.gm-kv b{display:block;font-weight:600;font-size:12.5px;color:var(--ink)}
.gm-exs{display:flex;flex-direction:column;gap:16px}
.gm-exs li{display:flex;align-items:flex-start;gap:14px}
.gm .gm-exs__ic{width:24px;height:26px;flex:0 0 auto;color:var(--ink);stroke-width:3}
.gm-exs span{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.4}
.gm-exs b{display:block;font-weight:600;font-size:13px;color:var(--ink)}
.gm-exs em{display:block;font-style:normal;font-size:12px;color:var(--ink-2)}
.gm-voice{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r-m);
background:#F7F7F8;box-shadow:none}
.gm-voice__play{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:var(--sh);
}
.gm-voice__play svg{width:15px;height:15px}
.gm-voice__t{font-size:12.5px;color:var(--ink-3);flex:0 0 auto}
.gm-wave{display:flex;align-items:center;gap:2.5px;flex:1 1 auto;height:26px;overflow:hidden}
.gm-wave i{
flex:1 1 auto;background:var(--ink-3);border-radius:2px;opacity:.55;
height:35%;
}
.gm-wave i:nth-child(3n){height:70%}
.gm-wave i:nth-child(4n){height:95%}
.gm-wave i:nth-child(5n){height:50%}
.gm-wave i:nth-child(7n){height:80%}
.gm-confirm{padding:20px}
.gm .gm-confirm__q{font-size:14.5px;line-height:1.4;margin-bottom:18px}
.gm-confirm__act{display:flex;gap:10px}
.gm-confirm__act .gm-btn{flex:1 1 auto}
.gm-prg{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0 20px}
.gm-chip{
display:inline-flex;align-items:center;gap:7px;
padding:7px 14px;border-radius:999px;background:#F4F4F5;
font-size:12.5px;font-weight:500;
}
.gm-chip i{width:11px;height:11px;border-radius:3px;background:var(--y)}
.gm-bars{display:flex;align-items:flex-end;gap:3px;height:26px}
.gm-bars i{width:5px;height:var(--h);background:var(--ink-3);opacity:.5;border-radius:2px}
.gm-bars i:last-child{background:var(--ink);opacity:1}
.gm-stats{display:flex;gap:28px;border-top:1px solid var(--line);padding-top:16px}
.gm-stats div{flex:1 1 0}
.gm-stats span{display:block;font-size:12px;color:var(--ink-3)}
.gm-stats b{display:block;font-family:'Manrope',sans-serif;font-weight:800;font-size:26px;margin-top:2px}
/* =========================================================================
06 — ВАШ КЛУБ
========================================================================= */
.gm-ph--gym{border-radius:var(--r);aspect-ratio:16/11;
background:linear-gradient(150deg,#3A3A3C,#1D1D1F 60%,#2B2A28)}
.gm-checks{position:relative;z-index:2;margin:-56px 20px 0;padding:24px 22px;border-radius:var(--r);
box-shadow:var(--sh-l)}
.gm-checks ul{display:flex;flex-direction:column;gap:16px}
.gm-checks li{display:flex;align-items:flex-start;gap:14px;font-size:15px;line-height:1.4}
.gm-machines{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.gm-mach{background:#fff;border-radius:var(--r-s);padding:8px 8px 10px;box-shadow:var(--sh)}
.gm-ph--mach{display:block;aspect-ratio:1/1;border-radius:8px;
background:linear-gradient(150deg,#4A4A4C,#212123 70%)}
.gm-mach figcaption{font-size:11.5px;line-height:1.3;color:var(--ink-2);margin-top:8px}
/* =========================================================================
ПЛАНШЕТ ≤1024
========================================================================= */
@media (max-width:1024px){
.gm{--pad:72px}
.gm-split{gap:40px}
.gm-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
.gm-hero{gap:28px 36px}
.gm-feats{margin-top:-110px;padding:22px 20px}
.gm-step{gap:28px}
.gm-phone{width:min(280px,100%)}
}
/* =========================================================================
МОБИЛЬНЫЙ ≤767
========================================================================= */
@media (max-width:767px){
.gm{--pad:56px;--r:22px;--r-m:16px}
.gm-wrap{padding:0 18px}
.gm-s--hero{padding-top:32px}
.gm-top{margin-bottom:28px}
.gm-logo img{width:88px;height:29px}
.gm-head{margin-bottom:30px}
.gm-head .gm-h2{max-width:none}
.gm-lead{font-size:16px;max-width:none}
/* герой: текст → картинка+карточка → кнопка */
.gm-hero{grid-template-columns:1fr;grid-template-areas:"txt" "media" "cta";gap:24px}
.gm-ph--hero{aspect-ratio:4/5}
.gm-feats{margin-top:-120px;padding:20px 18px}
.gm-feat p{font-size:14px}
.gm-btn--lg{max-width:none;padding:19px 26px;font-size:16px}
.gm-grid--3{grid-template-columns:1fr}
.gm-prob{padding:24px 20px 26px}
.gm-split{grid-template-columns:1fr;gap:32px}
.gm-bub{max-width:88%;font-size:14px}
.gm-ph--dish{width:96px;height:96px;margin-top:-36px}
.gm-price{margin-top:28px;padding:22px 20px}
.gm-price__t{font-size:19px}
.gm-price__v{font-size:34px}
.gm-apps li{font-size:15px;padding:8px 0;gap:14px}
.gm-pale{padding:24px 18px 0}
/* шаги: текст сверху, визуал снизу */
.gm-steps{gap:34px}
.gm-step{grid-template-columns:1fr;gap:18px}
.gm-step__txt .gm-h3{max-width:none}
.gm-center{margin-top:40px}
.gm-checks{margin:-44px 12px 0;padding:20px 18px}
.gm-checks li{font-size:14.5px;gap:12px}
.gm-machines{gap:8px}
.gm-mach figcaption{font-size:10.5px}
.gm-stats b{font-size:23px}
}
/* очень узкие экраны */
@media (max-width:380px){
.gm-tiles{gap:8px}
.gm-tile{padding:12px}
.gm-tile__ic{margin-bottom:16px}
.gm-btn--lg{gap:10px}
}
/* уважение к настройке «меньше движения» */
@media (prefers-reduced-motion:reduce){
.gm *{transition:none!important;animation:none!important}
}
/* =========================================================================
07 — ИНФОРМАЦИЯ ОБ УСЛУГЕ (аккордеон)
Построен на нативном /: без JS, доступно с клавиатуры,
текст всегда в DOM — индексируется и печатается даже в свёрнутом виде.
========================================================================= */
.gm-s--legal{background:var(--bg)}
.gm .gm-note{
max-width:78ch;
font-size:14.5px;line-height:1.55;color:var(--ink-2);
margin-bottom:28px;
}
.gm .gm-note--warn{
padding:18px 22px;
background:#fff;
border-left:4px solid var(--y);
border-radius:0 var(--r-s) var(--r-s) 0;
margin-bottom:48px; /* воздух перед аккордеоном */
}
.gm-acc{display:flex;flex-direction:column;gap:12px}
.gm-acc__item{
background:var(--card);
border-radius:var(--r-m);
box-shadow:var(--sh);
overflow:hidden;
}
.gm-acc__head{
display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:22px 24px;
cursor:pointer;
list-style:none; /* убираем стандартный треугольник */
font-family:'Manrope',sans-serif;font-weight:700;font-size:17px;line-height:1.3;
transition:background .15s ease;
}
.gm-acc__head::-webkit-details-marker{display:none} /* Safari */
.gm-acc__head:hover{background:#FAFAFB}
.gm-acc__head:focus-visible{outline:3px solid var(--y);outline-offset:-3px}
.gm .gm-acc__chev{
width:22px;height:22px;flex:0 0 auto;
color:var(--ink-3);stroke-width:4;
transition:transform .2s ease;
}
.gm-acc__item[open] .gm-acc__chev{transform:rotate(180deg)}
.gm-acc__body{
padding:0 24px 26px;
max-width:80ch;
}
.gm-acc__body p{font-size:15px;line-height:1.6;color:var(--ink-2);margin-bottom:12px}
.gm-acc__body p:last-child{margin-bottom:0}
.gm-acc__body b{color:var(--ink);font-weight:600}
.gm-acc__body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
text-decoration-color:var(--y);text-decoration-thickness:2px}
.gm-acc__body a:hover{background:var(--y-soft)}
.gm-acc__sub{
font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;
color:var(--ink);margin:22px 0 10px;
}
.gm-acc__sub:first-child{margin-top:0}
.gm .gm-list{margin:0 0 14px;display:flex;flex-direction:column;gap:7px}
.gm-list li{
position:relative;padding-left:20px;
font-size:15px;line-height:1.55;color:var(--ink-2);
}
.gm-list li::before{
content:"";position:absolute;left:2px;top:9px;
width:6px;height:6px;border-radius:50%;background:var(--y);
}
/* =========================================================================
ФУТЕР
========================================================================= */
.gm-foot{
background:var(--ink);
color:#fff;
padding:56px 0 32px;
}
.gm-foot__grid{
display:grid;
grid-template-columns:1.5fr 1fr 1.4fr;
gap:40px;
padding-bottom:36px;
border-bottom:1px solid rgba(255,255,255,.12);
}
/* Логотип: тот же квадрат 512×512, кадрируем как в шапке.
Селектор с .gm впереди (0-2-0) — иначе базовое .gm img{height:auto} (0-1-1)
перебивает высоту и логотип превращается в квадрат. */
.gm .gm-foot__logo{
width:104px;height:34px;
object-fit:cover;object-position:center 48.5%;
border-radius:6px;
margin-bottom:18px;
}
.gm .gm-foot__name{font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;margin-bottom:10px}
.gm-foot__addr{
font-style:normal;
font-size:13.5px;line-height:1.6;
color:rgba(255,255,255,.6);
}
.gm .gm-foot__h{
font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;
letter-spacing:.04em;text-transform:uppercase;
color:rgba(255,255,255,.45);
margin-bottom:16px;
}
.gm-foot__links{display:flex;flex-direction:column;gap:11px}
.gm-foot__links a{
font-size:14.5px;line-height:1.4;color:rgba(255,255,255,.85);
transition:color .15s ease;
}
.gm-foot__links a:hover{color:var(--y)}
.gm-foot__muted{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.55)}
/* метка PDF рядом со ссылкой на документ */
.gm-foot__ext{
display:inline-block;margin-left:6px;padding:1px 6px;
border:1px solid rgba(255,255,255,.28);border-radius:4px;
font-size:10px;font-weight:600;letter-spacing:.04em;
color:rgba(255,255,255,.6);vertical-align:1px;
}
/* =========================================================================
ПОЛОСА ОПЛАТЫ
Логотипы разной формы (от 1.5:1 у Apple Pay до 3.35:1 у связки Visa),
поэтому нормализуем по ВЫСОТЕ знака, а ширину отдаём пропорции.
26px — минимум, при котором читается мелкий текст в «VISA Secure»,
«ID Check» и «белкарт интернет пароль».
========================================================================= */
.gm-paybar{
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:20px 32px;
padding:28px 0;
border-bottom:1px solid rgba(255,255,255,.12);
}
.gm-paybar__t{
flex:1 1 260px;max-width:42ch;
font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.55);
}
.gm-pay{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gm-pay__i{
display:inline-flex;align-items:center;justify-content:center;
height:42px;padding:0 12px;
background:#fff;border-radius:8px;
}
/* .gm впереди — иначе базовое .gm img{height:auto} перебьёт высоту */
.gm .gm-pay__i img{height:26px;width:auto;max-width:none;display:block}
.gm .gm-foot__bottom{
padding-top:26px;
font-size:13px;line-height:1.5;color:rgba(255,255,255,.45);
}
/* --- планшет --- */
@media (max-width:1024px){
.gm-foot__grid{grid-template-columns:1fr 1fr;gap:32px}
.gm-foot__col--wide{grid-column:1 / -1}
.gm-paybar{gap:18px 24px}
}
/* --- мобильный --- */
@media (max-width:767px){
.gm .gm-note{font-size:14px;margin-bottom:22px}
.gm .gm-note--warn{padding:16px 18px;margin-bottom:34px}
.gm-acc__head{padding:18px 18px;font-size:15.5px;gap:14px}
.gm .gm-acc__chev{width:19px;height:19px}
.gm-acc__body{padding:0 18px 22px}
.gm-acc__body p,.gm-list li{font-size:14.5px}
.gm-foot{padding:40px 0 26px}
.gm-foot__grid{grid-template-columns:1fr;gap:28px;padding-bottom:26px}
.gm-foot__col--wide{grid-column:auto}
.gm .gm-foot__h{margin-bottom:12px}
.gm-paybar{padding:24px 0;gap:16px}
.gm-paybar__t{flex:1 1 100%;max-width:none}
.gm-pay{gap:6px}
.gm-pay__i{height:38px;padding:0 10px;border-radius:7px}
.gm .gm-pay__i img{height:22px}
}
/* =========================================================================
GYM24 / ДжиммИИ — модальное окно с формой заявки
Куда: Elementor → Настройки страницы → Дополнительно → «Пользовательский CSS»
ДОПИСАТЬ в конец, после стилей лендинга (gym24-landing.css).
-------------------------------------------------------------------------
ПРИНЦИП
Контейнер с формой (класс gm-form-src) НИКУДА не переносится — он остаётся
ровно там, где его отрисовал Elementor, внутри обёртки .elementor.
Это принципиально: Elementor обходит DOM внутри своей обёртки и вешает
обработчик submit на