/* ============================================================ gp-gas.css — дополнение к gp-info.css для раздела «Газоаналитические системы» (/gas-system/ и …/askpv…/). Базовые компоненты (герой, рельс, секции, карточки, FAQ, CTA, мобпанель) — из gp-info.css без изменений. Здесь только новое: схема состава, дорожная карта, мастер-слайдер заявки, ленты «Новости» и «Хиты продаж». Внешние источники, на которые опирались: • kinetics.colorion.co — тайминги и кривые: вход 0.45s cubic-bezier(.16,1,.3,1), overshoot тоста cubic-bezier(.18,1.25,.4,1), pulse-ring, progress-ring (stroke-dashoffset .9s), magnetic hover .15s ease-out; • originkit.dev/sections, компонент shine-card — идея блика, следующего за курсором (у нас лёгкий CSS-вариант вместо WebGL); • checklist.design — правила форм: обязательное помечено явно, ошибка текстом рядом с полем, кнопка не «серая заглушка». Префикс gpg-, всё внутри .gpi. ============================================================ */ .gpi{ --gpg-ease:cubic-bezier(.16,1,.3,1); --gpg-spring:cubic-bezier(.18,1.25,.4,1); } /* ---- ФИКС «УКРАШАЛКИ» ЧЕКБОКСОВ ТЕМЫ ----------------------- insale.min.js оборачивает КАЖДЫЙ input[type=radio|checkbox] в
и дорисовывает свой кружок/квадрат, а в CSS темы висит `.in-checkbox{display:none}`: обёрнутый чекбокс выпадает из документа и клик по подписи его не переключает. Лечим display:contents и сносим маркер темы. ------------------------------------------------------------ */ .gpi .in-radio,.gpi .in-checkbox{display:contents} .gpi .in-radio__element,.gpi .in-checkbox__element{display:none} .gpi .gpg-agree input{position:static;opacity:1;z-index:auto;width:16px;height:16px; -webkit-appearance:checkbox;appearance:auto} /* ---- ФИКС МАРКЕРОВ ТЕМЫ ------------------------------------ insale.min.css: `.page ul li:before{content:"✓";position:absolute}`. Сброс в gp-info.css перебивает только content — position:absolute оставался и ронял номер шага поверх заголовка. ------------------------------------------------------------ */ .page .gpi :where(li)::before{position:static} .gpi .gpi-steps li::before{position:static;left:auto;top:auto;flex:none} /* Нумерованные карточки: цифра лежит абсолютом в правом верхнем углу, длинный заголовок заезжает под неё. */ .gpi .gpi-num .gpi-card h3{padding-right:46px} /* Мобильный герой: правило одной колонки для .gpi-hero__meta в gp-info.css слабее (0-1-0), чем база `.gpi .gpi-hero__meta` (0-2-0), и на телефоне список оставался двухколоночным. */ @media (max-width:760px){ .gpi .gpi-hero__meta{grid-template-columns:minmax(0,1fr)} } .gpi .gpi-hero__eyebrow{flex-wrap:wrap;white-space:normal} /* копирование почты на тёмном фоне (герой уже умеет, CTA — нет) */ .gpi-cta .gpi-copy,.gpg-out .gpi-copy{color:#c1cae4} .gpi-cta .gpi-copy:hover,.gpg-out .gpi-copy:hover{background:rgba(255,255,255,.12);color:#fff} .gpi-cta .gpi-copy.is-ok,.gpg-out .gpi-copy.is-ok{background:rgba(67,193,109,.22);color:#8fe0ac} .gpi-cta__mail{display:inline-flex;align-items:center;gap:2px} /* цепочка «Как строится работа» — пять шагов (в gp-info.css есть 3 и 4) */ .gpi .gpg-steps5{grid-template-columns:repeat(5,minmax(0,1fr))} @media (max-width:1200px){.gpi .gpg-steps5{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:760px){.gpi .gpg-steps5{grid-template-columns:minmax(0,1fr)}} /* ---- ВИДЖЕТЫ ЛЕВОЙ КОЛОНКИ: «Новости» и «Хиты продаж» ---- Живут под рельсом «Инженеру», в той же колонке, где стояли на исходных страницах. Блик за курсором у товара — лёгкая CSS-версия приёма из originkit/shine-card: позиция курсора приезжает в --mx/--my и рисует радиальный градиент. */ /* В gp-info.css липкий сам рельс (`.gpi-rail{position:sticky}`), и это работало, пока он был единственным в колонке. Теперь под ним виджеты: залипая, рельс выезжал за свой бокс и наползал на «Новости» и «Хиты продаж» — sticky-сдвиг не двигает соседей. Поэтому липкой делаем всю колонку, а рельс возвращаем в обычный поток. */ .gpi-railwrap{display:flex;flex-direction:column;gap:16px;align-self:start} .gpi .gpi-rail{position:static;top:auto;max-height:none;overflow:visible} /* липнет только когда колонка целиком помещается в экран — иначе нижние виджеты остались бы за кадром. Класс ставит gp-gas.js по высоте окна. */ .gpi-railwrap.is-sticky{position:sticky;top:80px} .gpg-side{background:var(--i-card);border:1px solid var(--i-line);border-radius:var(--i-radius); padding:8px;box-shadow:var(--i-shadow)} .gpg-side__t{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.05em; text-transform:uppercase;color:var(--i-muted);padding:12px 12px 8px} .gpg-side__t svg{width:15px;height:15px;stroke:#9aa3bd;fill:none;stroke-width:1.7} .gpg-side__all{display:block;padding:8px 12px 6px;font-size:13px;color:var(--i-blue)} .gpg-new{display:block;padding:10px 12px;border-radius:10px;color:var(--i-ink)!important; transition:background .2s var(--gpg-ease)} .gpg-new:hover{background:var(--i-soft)} .gpg-new + .gpg-new{border-top:1px solid var(--i-line-2)} .gpg-new__d{display:block;font-size:12px;color:var(--i-muted);margin-bottom:3px} .gpg-new b{display:block;font-size:13.6px;font-weight:500;line-height:1.4} .gpg-new:hover b{color:var(--i-blue-d)} .gpg-hit{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:11px;align-items:center; padding:10px 12px;border-radius:10px;overflow:hidden;color:var(--i-ink)!important; transition:background .2s var(--gpg-ease)} .gpg-hit::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(78,125,241,.16),transparent 70%); transition:opacity .3s var(--gpg-ease)} .gpg-hit:hover{background:var(--i-soft)} .gpg-hit:hover::after{opacity:1} .gpg-hit + .gpg-hit{border-top:1px solid var(--i-line-2)} .gpg-hit__img{width:48px;height:48px;display:grid;place-items:center;border-radius:8px;background:#fff; border:1px solid var(--i-line-2)} .gpg-hit__img img{max-width:44px;max-height:44px;width:auto;object-fit:contain} .gpg-hit b{font-size:13.2px;font-weight:500;line-height:1.35;display:block} .gpg-hit:hover b{color:var(--i-blue-d)} .gpg-hit__p{display:block;margin-top:4px;font-size:13.5px;font-weight:700;color:var(--i-ink)} .gpg-hit__p small{font-size:11.5px;font-weight:400;color:var(--i-muted)} /* на узких экранах колонка разворачивается: навигация остаётся сверху, виджеты уезжают под контент */ @media (max-width:1000px){ .gpi-railwrap{display:contents;position:static;max-height:none;overflow:visible} .gpi-layout > .gpi-main{order:1} .gpg-side{order:2} } /* ---- СХЕМА СОСТАВА СИСТЕМЫ ---- Две дорожки: слева пневматика (путь пробы), справа данные. Подписи объясняют, что именно бежит по линии. */ .gpg-scheme{border:1px solid var(--i-line);border-radius:var(--i-radius);background:var(--i-card); padding:20px;box-shadow:var(--i-shadow)} @media (max-width:560px){.gpg-scheme{padding:14px}} .gpg-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px;font-size:13px;color:var(--i-muted)} .gpg-legend span{display:inline-flex;align-items:center;gap:7px} .gpg-legend i{width:22px;height:3px;border-radius:2px;background:var(--i-blue);display:inline-block} .gpg-legend i.gpg-legend--data{background:var(--i-green)} .gpg-chain{display:grid;grid-template-columns:auto repeat(6,minmax(0,1fr));gap:8px;align-items:stretch} .gpg-src{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; padding:12px 10px;border-radius:var(--i-r-ctl);background:var(--i-soft);min-width:92px;text-align:center} .gpg-src svg{width:26px;height:26px;stroke:var(--i-muted);fill:none;stroke-width:1.6} .gpg-src span{font-size:12px;color:var(--i-muted);line-height:1.3} .gpi .gpg-node{position:relative;display:flex;flex-direction:column;gap:6px;align-items:center; padding:14px 10px 12px;border:1.5px solid var(--i-line);border-radius:var(--i-r-ctl);background:var(--i-card); text-align:center;cursor:pointer; transition:border-color .2s,background .2s,transform .45s var(--gpg-ease),box-shadow .45s var(--gpg-ease)} .gpi .gpg-node:hover{border-color:rgba(78,125,241,.45);transform:translateY(-2px);box-shadow:var(--i-lift)} .gpi .gpg-node[aria-selected="true"]{border-color:var(--i-blue);background:var(--i-blue-l)} .gpg-node__n{position:relative;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none; background:var(--i-soft);color:var(--i-muted);font-size:12px;font-weight:700} .gpi .gpg-node[aria-selected="true"] .gpg-node__n{background:var(--i-blue);color:#fff} /* pulse-ring вокруг активного узла (kinetics: attention/pulse badge) */ .gpi .gpg-node[aria-selected="true"] .gpg-node__n::after{content:"";position:absolute;inset:0;border-radius:50%; border:2px solid var(--i-blue);animation:gpgPulse 1.8s ease-out infinite} @keyframes gpgPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}} .gpg-node b{font-size:13.2px;font-weight:600;line-height:1.3} .gpg-node small{font-size:11.5px;color:var(--i-muted);line-height:1.25} /* дорожка потока: слева проба, справа данные */ .gpg-line{position:relative;grid-column:1/-1;height:30px;margin-top:4px} .gpg-line__t{position:absolute;top:16px;font-size:11.5px;color:var(--i-muted);white-space:nowrap} .gpg-line__t--gas{left:44px} .gpg-line__t--data{right:8px} .gpg-line::before{content:"";position:absolute;left:40px;right:16px;top:8px;height:3px;border-radius:2px; background:linear-gradient(90deg,var(--i-blue) 0 58%,var(--i-green) 62% 100%);opacity:.35} .gpg-line i{position:absolute;top:3px;left:40px;width:11px;height:11px;border-radius:50%; background:var(--i-blue);box-shadow:0 0 0 4px rgba(78,125,241,.18);animation:gpgFlow 4.2s linear infinite} .gpg-line i.gpg-flow--data{background:var(--i-green);box-shadow:0 0 0 4px rgba(67,193,109,.18); animation-delay:2.1s} @keyframes gpgFlow{0%{left:40px;opacity:0}6%{opacity:1}92%{opacity:1}100%{left:calc(100% - 26px);opacity:0}} @media (prefers-reduced-motion:reduce){ .gpg-line i{animation:none} .gpi .gpg-node[aria-selected="true"] .gpg-node__n::after{animation:none;opacity:.35} } .gpg-info{margin-top:14px;border-left:3px solid var(--i-blue);background:var(--i-soft); border-radius:var(--i-r-ctl);padding:16px 18px;min-height:96px} .gpg-info b{display:block;font-size:16px;margin-bottom:5px;color:var(--i-ink)} .gpg-info p{margin:0;font-size:14.5px;line-height:1.65;color:var(--i-text)} .gpg-info__tag{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:var(--i-blue-d);background:var(--i-blue-l);border-radius:999px;padding:3px 10px;margin-bottom:8px} .gpg-info__tag--data{color:var(--i-green-d);background:var(--i-green-l)} /* состав списком: страховка, если скрипт не отработал */ .gpi .gpg-plain{margin:16px 0 0} .gpg-scheme.is-ready .gpg-plain{display:none} .gpg-scheme:not(.is-ready) .gpg-chain, .gpg-scheme:not(.is-ready) .gpg-legend, .gpg-scheme:not(.is-ready) .gpg-info{display:none} .gpg-scheme:not(.is-ready) .gpg-plain{margin-top:0} @media (max-width:1000px){ .gpg-chain{grid-template-columns:repeat(3,minmax(0,1fr))} .gpg-src{grid-column:1/-1;flex-direction:row;justify-content:flex-start;min-width:0} .gpg-src span{font-size:13px} .gpg-line{display:none} } @media (max-width:560px){.gpg-chain{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ---- АКЦЕНТНАЯ СТРОКА (не второй blockquote подряд) ---- */ .gpg-claim{display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:var(--i-radius); background:linear-gradient(135deg,var(--i-navy) 0%,var(--i-navy-2) 100%);color:#fff; box-shadow:var(--i-lift);position:relative;overflow:hidden} .gpg-claim::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(78,125,241,.5),transparent 62%);pointer-events:none} .gpg-claim__ic{position:relative;flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center; background:rgba(255,255,255,.12)} .gpg-claim__ic svg{width:22px;height:22px;stroke:#a9c2ff;fill:none;stroke-width:1.8} .gpg-claim b{position:relative;font-size:18px;font-weight:600;line-height:1.35} @media (max-width:560px){.gpg-claim{flex-direction:column;align-items:flex-start;gap:12px;padding:18px}} /* ---- ПРИНЦИПЫ (блок «Подход ГИКПРОМ») ---- */ .gpg-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} @media (max-width:1000px){.gpg-principles{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:600px){.gpg-principles{grid-template-columns:minmax(0,1fr)}} .gpi .gpg-principle{display:flex;gap:13px;align-items:flex-start;padding:17px;border:1px solid var(--i-line); border-radius:var(--i-radius);background:var(--i-card);box-shadow:var(--i-shadow); transition:transform .45s var(--gpg-ease),box-shadow .45s var(--gpg-ease),border-color .2s} .gpi .gpg-principle:hover{transform:translateY(-2px);box-shadow:var(--i-lift);border-color:rgba(78,125,241,.35)} .gpg-principle__ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center; background:var(--i-blue-l)} .gpg-principle__ic svg{width:18px;height:18px;stroke:var(--i-blue-d);fill:none;stroke-width:1.9} /* цвета иконок чередуем, иначе плитка утопает в зелёном */ .gpg-principle:nth-child(2) .gpg-principle__ic{background:var(--i-accent-l)} .gpg-principle:nth-child(2) .gpg-principle__ic svg{stroke:var(--i-accent)} .gpg-principle:nth-child(3) .gpg-principle__ic{background:var(--i-green-l)} .gpg-principle:nth-child(3) .gpg-principle__ic svg{stroke:var(--i-green-d)} .gpg-principle:nth-child(4) .gpg-principle__ic{background:#f0ecfb} .gpg-principle:nth-child(4) .gpg-principle__ic svg{stroke:#6f56c8} .gpg-principle:nth-child(5) .gpg-principle__ic{background:var(--i-accent-l)} .gpg-principle:nth-child(5) .gpg-principle__ic svg{stroke:var(--i-accent)} .gpg-principle span{font-size:14.5px;line-height:1.55;color:var(--i-text)} /* ---- ДОРОЖНАЯ КАРТА ---- */ .gpg-road{border:1px solid var(--i-line);border-radius:var(--i-radius);background:var(--i-card); padding:22px;box-shadow:var(--i-shadow)} @media (max-width:560px){.gpg-road{padding:16px}} .gpg-track{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding-top:6px} .gpg-track::before{content:"";position:absolute;left:7%;right:7%;top:22px;height:3px;border-radius:2px; background:var(--i-line)} .gpg-track__fill{position:absolute;left:7%;top:22px;height:3px;border-radius:2px;background:var(--i-blue); width:0;transition:width .9s var(--gpg-ease)} .gpi .gpg-stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:0 2px 4px; background:none;border:0;cursor:pointer;text-align:center} .gpg-stop__n{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%; background:#fff;border:2px solid var(--i-line);color:var(--i-muted);font-size:14px;font-weight:700; transition:transform .15s ease-out,border-color .2s,background .2s,color .2s} .gpi .gpg-stop:hover .gpg-stop__n{transform:translateY(-2px);border-color:var(--i-blue);color:var(--i-blue-d)} .gpi .gpg-stop.is-done .gpg-stop__n{border-color:var(--i-blue);color:var(--i-blue-d)} .gpi .gpg-stop.is-cur .gpg-stop__n{background:var(--i-blue);border-color:var(--i-blue);color:#fff} .gpi .gpg-stop.is-cur .gpg-stop__n::after{content:"";position:absolute;inset:-2px;border-radius:50%; border:2px solid var(--i-blue);animation:gpgPulse 1.8s ease-out infinite} .gpg-stop__t{font-size:12.5px;line-height:1.35;color:var(--i-muted)} .gpi .gpg-stop.is-cur .gpg-stop__t{color:var(--i-ink);font-weight:600} .gpg-road__panel{margin-top:18px;border-radius:var(--i-r-ctl);background:var(--i-soft);padding:18px 20px; border-left:3px solid var(--i-blue);min-height:104px} .gpg-road__panel b{display:block;font-size:16.5px;margin-bottom:6px} .gpg-road__panel p{margin:0;font-size:14.5px;line-height:1.65;color:var(--i-text)} /* навигация карты — по центру фрейма, кнопки крупные, между ними счётчик */ .gpg-road__nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:18px} .gpi .gpg-road__nav .gpg-navb{flex:none;padding:13px 26px;font-size:15.5px;min-width:132px; justify-content:center} .gpg-road__nav span{font-size:13.5px;color:var(--i-muted);font-variant-numeric:tabular-nums; min-width:92px;text-align:center} @media (max-width:560px){ .gpg-road__nav{gap:12px} .gpi .gpg-road__nav .gpg-navb{min-width:0;padding:12px 18px} } @media (max-width:900px){ .gpg-track{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .gpg-track::before,.gpg-track__fill{display:none} .gpg-stop__t{font-size:12px} } @media (max-width:560px){.gpg-track{grid-template-columns:repeat(3,minmax(0,1fr))}} /* ---- МАСТЕР ЗАЯВКИ (слайдер, как в лендингах раздела «Решения») ---- */ /* обе колонки одной высоты и постоянного размера: карточка шагов не прыгает при листании, панель заявки не растягивается — длинный текст уходит в собственный скролл */ .gpg-builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:18px;align-items:start} @media (max-width:1000px){.gpg-builder{grid-template-columns:minmax(0,1fr)}} .gpg-wiz{padding:0!important;overflow:hidden;display:flex;flex-direction:column} .gpg-wiz__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px 20px; border-bottom:1px solid var(--i-line-2);background:var(--i-soft)} .gpg-wiz__head b{font-size:15px} .gpg-wiz__head span{font-size:13px;color:var(--i-muted);margin-left:auto;font-variant-numeric:tabular-nums} .gpg-view{overflow:hidden;transition:height .45s var(--gpg-ease)} .gpg-slides{display:flex;width:100%;transition:transform .45s var(--gpg-ease)} .gpg-slide{flex:0 0 100%;min-width:0;padding:20px;align-self:flex-start} @media (max-width:560px){.gpg-slide{padding:16px}} .gpg-slides.gpg-measure .gpg-slide{align-self:flex-start} /* три равные зоны: «Назад» слева, точки строго по центру, «Далее» справа */ .gpg-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px; padding:14px 20px;border-top:1px solid var(--i-line-2);background:var(--i-soft)} .gpi .gpg-navb{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--i-r-ctl); border:1px solid var(--i-line);background:#fff;font-size:14.5px;font-weight:500;color:var(--i-ink); cursor:pointer;transition:transform .15s ease-out,border-color .2s,background .2s,color .2s} .gpi .gpg-navb:hover{border-color:var(--i-blue);color:var(--i-blue-d);transform:translateY(-1px)} .gpi .gpg-navb[disabled]{opacity:.45;cursor:default;transform:none} .gpi .gpg-navb--next{justify-self:end;background:var(--i-blue);border-color:var(--i-blue);color:#fff} .gpi .gpg-navb--next:hover{background:var(--i-blue-d);border-color:var(--i-blue-d);color:#fff} .gpi .gpg-navb--prev{justify-self:start} .gpg-dots{display:flex;gap:7px;justify-content:center} .gpi .gpg-dot{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--i-line);cursor:pointer; transition:transform .15s ease-out,background .2s} .gpi .gpg-dot:hover{transform:scale(1.25)} .gpi .gpg-dot.is-on{background:var(--i-blue);transform:scale(1.15)} .gpi .gpg-dot.is-filled{background:#9fb6f7} .gpg-fg{margin-bottom:18px} .gpg-fg:last-child{margin-bottom:0} .gpg-fg > b{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; color:var(--i-muted);margin-bottom:9px} .gpg-fg > b em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;color:#9aa3bd; margin-left:8px;font-size:12.5px} .gpg-opts{display:flex;flex-wrap:wrap;gap:8px} .gpi .gpg-opt{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px; border:1px solid var(--i-line);background:var(--i-card);font-size:14px;color:var(--i-text); cursor:pointer;user-select:none;transition:transform .15s ease-out,border-color .2s,background .2s,color .2s} .gpi .gpg-opt:hover{border-color:rgba(78,125,241,.45);transform:translateY(-1px)} .gpi .gpg-opt input{position:absolute;opacity:0;width:0;height:0} .gpi .gpg-opt.is-on{border-color:rgba(78,125,241,.35);background:var(--i-blue-l);color:var(--i-blue-d);font-weight:600} .gpg-opt__x{flex:none;width:15px;height:15px;border-radius:5px;border:1.5px solid var(--i-line); display:grid;place-items:center} .gpi .gpg-opt.is-on .gpg-opt__x{border-color:var(--i-blue-d);background:var(--i-blue-d)} .gpg-opt__x svg{width:9px;height:9px;stroke:#fff;fill:none;stroke-width:3;opacity:0} .gpi .gpg-opt.is-on .gpg-opt__x svg{opacity:1} .gpg-in{width:100%;border:1px solid var(--i-line);border-radius:var(--i-r-ctl);padding:11px 14px; font:inherit;font-size:14.5px;color:var(--i-ink);background:var(--i-card); transition:border-color .2s,box-shadow .2s} .gpg-in:focus{outline:none;border-color:var(--i-blue);box-shadow:var(--i-ring)} .gpg-in::placeholder{color:#9aa3bd} textarea.gpg-in{min-height:84px;resize:vertical;line-height:1.55} .gpg-in.is-err{border-color:var(--i-accent);box-shadow:0 0 0 3px rgba(255,102,53,.16)} .gpg-err{display:none;margin-top:6px;font-size:12.5px;color:#c8431a} .gpg-err.is-on{display:block} .gpg-req{color:var(--i-accent);margin-left:3px} .gpg-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} @media (max-width:560px){.gpg-two{grid-template-columns:minmax(0,1fr)}} .gpg-lbl{display:block;font-size:13.5px;color:var(--i-text);margin-bottom:6px} /* правая колонка мастера */ .gpg-out{position:sticky;top:80px;border-radius:var(--i-radius);overflow:hidden; background:linear-gradient(135deg,var(--i-navy) 0%,var(--i-navy-2) 100%);color:#fff;padding:20px} @media (max-width:1000px){.gpg-out{position:static}} .gpg-out__top{display:flex;align-items:center;gap:14px;margin-bottom:14px} .gpg-out__t{font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#a9b6dd} .gpg-out__sub{font-size:12.5px;color:#9aa5c4;margin-top:2px} /* кольцо прогресса — kinetics: progress ring, stroke-dashoffset .9s */ .gpg-ring{position:relative;flex:none;width:52px;height:52px} .gpg-ring svg{width:52px;height:52px;transform:rotate(-90deg)} .gpg-ring circle{fill:none;stroke-width:5} .gpg-ring .gpg-ring__bg{stroke:rgba(255,255,255,.16)} .gpg-ring .gpg-ring__fg{stroke:#7fd8a0;stroke-linecap:round; transition:stroke-dashoffset .9s var(--gpg-ease)} .gpg-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:700; font-variant-numeric:tabular-nums} .gpg-out{display:flex;flex-direction:column;min-height:0} /* flex-basis 0: длинный текст заявки не раздувает панель, а уходит в скролл */ .gpg-pre{flex:1 1 0;min-height:150px;overflow:auto; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--i-r-ctl); padding:14px;font-size:13.2px;line-height:1.62;color:#dfe5f5;white-space:pre-wrap} .gpg-pre em{color:#9aa5c4;font-style:normal} .gpg-act{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px} .gpg-act .gpi-btn{flex:1 1 140px;justify-content:center;padding:11px 16px;font-size:14.5px; transition:transform .15s ease-out,background .2s,border-color .2s} .gpg-out__mail{margin-top:12px;font-size:12.8px;color:#9aa5c4;display:flex;align-items:center;gap:4px;flex-wrap:wrap} .gpg-out__mail a{color:#c1cae4;text-decoration:underline;text-underline-offset:2px} .gpg-agree{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--i-muted); line-height:1.45;margin:12px 0 0} .gpg-agree input{margin-top:2px;flex:none} .gpg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* тост — overshoot из kinetics */ .gpg-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,150%);z-index:200; background:var(--i-navy);color:#fff;font-size:14px;padding:12px 20px;border-radius:var(--i-r-ctl); box-shadow:0 12px 30px -12px rgba(35,43,70,.6);max-width:90vw;text-align:center; visibility:hidden;opacity:0; transition:transform .55s var(--gpg-spring),opacity .3s,visibility .3s} .gpg-toast.is-on{transform:translate(-50%,0);visibility:visible;opacity:1} /* ---- ВЕС ПРОТИВ КНОПОЧНЫХ ПРАВИЛ ТЕМЫ ---------------------- У темы есть правило для