/* ========================================================= ШРИФТЫ — самостоятельно размещены в /landing/fonts/, без обращения к сторонним CDN как основной источник. Оба вариативных TTF-файла (Inter, Space Grotesk) содержат сразу все начертания — поэтому достаточно одного @font-face на семейство с диапазоном font-weight, конвертация в статичные .woff2 не нужна. Лицензия — SIL Open Font License, встраивать можно свободно. ЗАПАСНОЙ ВАРИАНТ: если файлов в /landing/fonts/ нет (или они называются иначе), используются одноимённые семейства 'Inter' / 'Space Grotesk' — их подключает на Google Fonts в (см. standalone.html / shortcode.php). Работает через обычный фолбэк по стеку font-family: если 'Inter Local' не подгрузилась — браузер просто переходит к следующему шрифту в списке. */ @font-face{ font-family:'Inter Local'; src:url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations'), url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:'Space Grotesk Local'; src:url('../fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'), url('../fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; } /* ========================================================= ROOTROUTER — FULL-SCREEN DESKTOP WIDGET Все селекторы вложены в .rootrouter-widget, чтобы не конфликтовать со стилями темы WordPress. ========================================================= */ .rootrouter-widget{ --deep-space: #0A0E27; --deep-space-2: #10152F; --charcoal: #14161C; --charcoal-2: #1B1E27; --ink-line: rgba(255,255,255,0.08); --white: #F5F6FA; --muted: #8B93A7; --gold: #E5A93C; --gold-soft: rgba(229,169,60,0.16); --gold-glow: rgba(229,169,60,0.55); --ok-blue: #4FA3D1; --font-display: 'Space Grotesk Local', 'Space Grotesk', sans-serif; --font-body: 'Inter Local', 'Inter', sans-serif; --radius-l: 22px; --radius-m: 14px; --radius-s: 9px; --ease: cubic-bezier(.22,1,.36,1); min-width:1024px; min-height:100vh; font-family:var(--font-body); background:var(--deep-space); color:var(--white); overflow-x:hidden; box-sizing:border-box; } .rootrouter-widget *, .rootrouter-widget *::before, .rootrouter-widget *::after{ box-sizing:border-box; } .rootrouter-widget ul{ list-style:none; margin:0; padding:0; } .rootrouter-widget button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; } .rootrouter-widget img{ display:block; max-width:100%; } .rootrouter-widget h1, .rootrouter-widget h2, .rootrouter-widget h3, .rootrouter-widget p{ margin:0; } .rootrouter-widget .rr-icon{ width:18px; height:18px; display:block; flex:none; } .rootrouter-widget .rr-nav-arrow .rr-icon{ width:18px; height:18px; } .rootrouter-widget .rr-ico .rr-icon{ width:13px; height:13px; } .rootrouter-widget .rr-addon-icon .rr-icon{ width:16px; height:16px; } .rootrouter-widget .rr-addon-module-icon .rr-icon{ width:19px; height:19px; } .rootrouter-widget .rr-addon-state .rr-icon{ width:11px; height:11px; } .rootrouter-widget .rr-gold-toggle-icon .rr-icon{ width:15px; height:15px; } .rootrouter-widget .rr-send-btn .rr-icon{ width:17px; height:17px; } /* ========================================================= SHELL ========================================================= */ .rootrouter-widget .rr-shell{ display:grid; grid-template-columns: 46% 54%; min-height:100vh; width:100%; } /* ========================================================= ЛЕВАЯ КОЛОНКА ========================================================= */ .rootrouter-widget .rr-col-left{ position:relative; overflow:hidden; background: radial-gradient(1200px 800px at 20% -10%, #161c3d 0%, transparent 60%), linear-gradient(180deg, var(--deep-space) 0%, var(--deep-space-2) 55%, #090C1F 100%); border-right:1px solid var(--ink-line); display:flex; flex-direction:column; justify-content:space-between; } /* LAYER 1: фон левой колонки — фото 00.png (инженер), задаётся инлайн через JS (background-image: url(...)) на основе data.leftBackground. Картинка добавлена с запасом неба сверху: ставим на всю ширину колонки с выравниванием к низу (background-size: 100% auto, position: bottom) — тогда при любой высоте экрана обрезается только верхнее небо, а не лицо/грудь человека. */ .rootrouter-widget .rr-layer-bg{ position:absolute; inset:0; background-image: linear-gradient(100deg, #0c1230 0%, #182452 38%, #223066 55%, #0c1230 100%); background-size: 100% auto; background-position: bottom center; background-repeat: no-repeat; } .rootrouter-widget .rr-layer-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,14,39,.15) 0%, rgba(10,14,39,0) 30%, rgba(10,14,39,.55) 100%); } /* LAYER 2: декор-анимация — перенесена в правую колонку, "парит" над роутером на фоне, а не поверх лица человека слева */ .rootrouter-widget .rr-layer-decor{ position:absolute; inset:0; pointer-events:none; z-index:1; } .rootrouter-widget .rr-signal-dot{ position:absolute; width:4px; height:4px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px 2px var(--gold-glow); opacity:0; animation: rr-pulse-rise 6s ease-in infinite; } .rootrouter-widget .rr-signal-dot:nth-child(1){ left:46%; bottom:22%; animation-delay:0s; } .rootrouter-widget .rr-signal-dot:nth-child(2){ left:58%; bottom:16%; animation-delay:1.3s; } .rootrouter-widget .rr-signal-dot:nth-child(3){ left:40%; bottom:32%; animation-delay:2.6s; } .rootrouter-widget .rr-signal-dot:nth-child(4){ left:53%; bottom:28%; animation-delay:4s; } @keyframes rr-pulse-rise{ 0%{ opacity:0; transform:translateY(0) scale(.6); } 15%{ opacity:1; } 100%{ opacity:0; transform:translateY(-140px) scale(1.2); } } .rootrouter-widget .rr-left-content{ position:relative; z-index:2; padding:64px 56px 0 56px; display:flex; flex-direction:column; gap:40px; flex:1; } .rootrouter-widget .rr-eyebrow{ display:inline-flex; align-items:center; font-family:var(--font-display); font-size:12px; letter-spacing:.08em; color:#1A1200 !important; font-weight:700; padding:8px 16px; border:none; border-radius:100px; background: linear-gradient(110deg, #C98A2A 0%, #F3CE7C 25%, #E5A93C 50%, #F3CE7C 75%, #C98A2A 100%); background-size:220% 100%; animation: rr-gold-shimmer 5s ease-in-out infinite; width:fit-content; text-decoration:none !important; box-shadow:0 6px 18px -6px rgba(229,169,60,.6); transition: transform .15s, box-shadow .2s; } .rootrouter-widget .rr-eyebrow:hover, .rootrouter-widget .rr-eyebrow:visited, .rootrouter-widget .rr-eyebrow:active{ text-decoration:none !important; color:#1A1200 !important; } .rootrouter-widget .rr-eyebrow:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -6px rgba(229,169,60,.75); } .rootrouter-widget .rr-left-copy h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px, 3vw, 42px); line-height:1.12; margin:18px 0 14px; letter-spacing:-.01em; max-width:none; hyphens:none; -webkit-hyphens:none; overflow-wrap:normal; word-break:normal; } .rootrouter-widget .rr-role-tag{ font-size:15px; color:var(--muted); letter-spacing:.02em; } .rootrouter-widget .rr-role-tag b{ color:var(--white); font-weight:600; } .rootrouter-widget .rr-trust-stack{ display:flex; flex-direction:column; gap:10px; align-self:flex-end; margin-top:8px; max-width:340px; } .rootrouter-widget .rr-trust-item{ cursor:pointer; background:rgba(20,24,48,.55); border:1px solid var(--ink-line); border-radius:100px; backdrop-filter: blur(6px); transform: translateX(28px); opacity:0; animation: rr-slide-in .6s var(--ease) forwards; transition: border-radius .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .rootrouter-widget .rr-trust-item:nth-child(1){ animation-delay:.05s; } .rootrouter-widget .rr-trust-item:nth-child(2){ animation-delay:.12s; } .rootrouter-widget .rr-trust-item:nth-child(3){ animation-delay:.19s; } .rootrouter-widget .rr-trust-item:nth-child(4){ animation-delay:.26s; } .rootrouter-widget .rr-trust-item:nth-child(5){ animation-delay:.33s; } .rootrouter-widget .rr-trust-item:nth-child(6){ animation-delay:.40s; } .rootrouter-widget .rr-trust-item:nth-child(7){ animation-delay:.47s; } @keyframes rr-slide-in{ to{ transform:translateX(0); opacity:1; } } .rootrouter-widget .rr-trust-head{ display:flex; align-items:center; gap:10px; padding:10px 16px 10px 12px; font-size:13.5px; color:var(--white); } .rootrouter-widget .rr-trust-label{ transition: color .2s; } .rootrouter-widget .rr-ico{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--gold-soft); color:var(--gold); font-size:12px; flex:none; } /* Описание — скрыто по умолчанию (grid-rows трюк для плавной высоты), раскрывается по наведению только у плашек с непустым description. */ .rootrouter-widget .rr-trust-desc-wrap{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); } .rootrouter-widget .rr-trust-desc-wrap .rr-trust-desc{ overflow:hidden; min-height:0; font-size:12px; line-height:1.45; color:var(--muted); padding:0 16px 0 44px; transition: padding .3s var(--ease); } .rootrouter-widget .rr-trust-item.has-desc:hover{ border-radius:16px; border-color: rgba(229,169,60,.6); background: var(--charcoal-2); } .rootrouter-widget .rr-trust-item.has-desc:hover .rr-trust-label{ color:var(--gold); } .rootrouter-widget .rr-trust-item.has-desc:hover .rr-trust-desc-wrap{ grid-template-rows: 1fr; } .rootrouter-widget .rr-trust-item.has-desc:hover .rr-trust-desc-wrap .rr-trust-desc{ padding-top:2px; padding-bottom:12px; } .rootrouter-widget .rr-result-plate{ position:relative; z-index:2; margin:24px 40px 40px; padding:20px 24px; border-radius:var(--radius-m); background:linear-gradient(135deg, rgba(229,169,60,.14), rgba(229,169,60,.02)); border:1px solid rgba(229,169,60,.3); font-size:14.5px; line-height:1.5; } .rootrouter-widget .rr-result-plate b{ color:var(--gold); font-family:var(--font-display); } /* ========================================================= ПРАВАЯ КОЛОНКА ========================================================= */ .rootrouter-widget .rr-col-right{ position:relative; background:var(--charcoal); overflow:hidden; } /* Фон правой колонки — роутер во всю правую половину, меняется вместе со слайдом. Два слоя-картинки крест-накрест кроссфейдят (JS переключает класс .is-visible), поверх — затемняющий градиент для читаемости карточек/текста. */ .rootrouter-widget .rr-col-right-bg{ position:absolute; inset:0; z-index:0; } .rootrouter-widget .rr-bg-layer{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .6s var(--ease); } .rootrouter-widget .rr-bg-layer.is-visible{ opacity:1; } .rootrouter-widget .rr-col-right-content{ position:relative; z-index:2; padding:48px 56px 40px; display:flex; flex-direction:column; gap:28px; min-height:100%; overflow-y:auto; } .rootrouter-widget .rr-router-switcher{ position:relative; } .rootrouter-widget .rr-nav-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid var(--ink-line); background:rgba(20,22,28,.72); backdrop-filter: blur(6px); color:var(--white); display:flex; align-items:center; justify-content:center; z-index:5; transition: border-color .2s, transform .15s, background .2s; } .rootrouter-widget .rr-nav-arrow[data-rr="prev"]{ left:4px; } .rootrouter-widget .rr-nav-arrow[data-rr="next"]{ right:4px; } .rootrouter-widget .rr-nav-arrow:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-52%); } .rootrouter-widget .rr-nav-arrow:active{ transform:translateY(-50%); } .rootrouter-widget .rr-router-thumb{ position:relative; } .rootrouter-widget .rr-nav-arrow-onphoto{ display:none; } .rootrouter-widget .rr-router-viewport{ position:relative; min-height:180px; overflow:hidden; } .rootrouter-widget .rr-router-slide{ opacity:0; transform:translateY(10px); transition: opacity .38s var(--ease), transform .38s var(--ease); position:absolute; inset:0; pointer-events:none; /* запас по бокам под плавающие стрелки, чтобы текст не заходил под них */ padding:0 56px; } .rootrouter-widget .rr-router-slide.is-active{ opacity:1; transform:translateY(0); position:relative; pointer-events:auto; } .rootrouter-widget .rr-router-top{ display:grid; grid-template-columns: 1fr; grid-template-areas: "name" "specs"; row-gap:8px; align-items:start; } .rootrouter-widget .rr-router-name{ grid-area:name; font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--gold); text-shadow: 0 2px 12px rgba(0,0,0,.6); } .rootrouter-widget .rr-router-specs{ grid-area:specs; display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; } .rootrouter-widget .rr-router-specs li{ font-size:12.5px; color:var(--white); padding:6px 11px; border-radius:100px; background:rgba(27,30,39,.7); border:1px solid var(--ink-line); backdrop-filter: blur(4px); } /* Квадратное превью роутера — на десктопе скрыто (роутер уже виден на фоне колонки, дублировать не нужно); показывается только в мобильной раскладке ниже. */ .rootrouter-widget .rr-router-thumb{ display:none; } .rootrouter-widget .rr-router-thumb img{ width:100%; height:100%; object-fit:cover; object-position: center bottom; } .rootrouter-widget .rr-router-desc{ margin-top:16px; font-size:13.5px; line-height:1.6; color:var(--white); max-width:46em; text-shadow: 0 2px 10px rgba(0,0,0,.55); } .rootrouter-widget .rr-router-desc-title{ display:block; font-family:var(--font-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; text-shadow: 0 2px 10px rgba(0,0,0,.55); } .rootrouter-widget .rr-dots{ display:flex; gap:6px; justify-content:center; margin-top:-14px; } .rootrouter-widget .rr-dots span{ width:6px; height:6px; border-radius:50%; background:var(--ink-line); transition:background .2s, width .2s; } .rootrouter-widget .rr-dots span.is-active{ background:var(--gold); width:18px; border-radius:4px; } .rootrouter-widget .rr-addons h3{ font-family:var(--font-display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; } /* Большая переливающаяся золотая кнопка — сворачивает/разворачивает весь блок допуслуг одним кликом */ /* Большая переливающаяся золотая кнопка — переиспользуется и для аккордеона допуслуг, и для кнопки "Итоговая стоимость" */ .rootrouter-widget .rr-gold-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:16px 22px; border-radius:var(--radius-m); background: linear-gradient(110deg, #C98A2A 0%, #F3CE7C 25%, #E5A93C 50%, #F3CE7C 75%, #C98A2A 100%); background-size:220% 100%; animation: rr-gold-shimmer 5s ease-in-out infinite; color:#1A1200; font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.02em; box-shadow:0 10px 28px -10px rgba(229,169,60,.6); transition: transform .15s, box-shadow .2s; } .rootrouter-widget .rr-gold-toggle:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -10px rgba(229,169,60,.75); } .rootrouter-widget .rr-gold-toggle-icon{ width:26px; height:26px; border-radius:50%; background:rgba(26,18,0,.16); display:flex; align-items:center; justify-content:center; flex:none; } @keyframes rr-gold-shimmer{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } } /* Спойлер со всем содержимым допуслуг (та же max-height техника, что и у текста заявки — надёжнее grid-rows на части мобильных браузеров) */ .rootrouter-widget .rr-addons-panel{ max-height:0; overflow:hidden; transition: max-height .5s var(--ease); } .rootrouter-widget .rr-addons-panel > .rr-addon-grid.is-settled{ overflow:visible; } .rootrouter-widget .rr-addons-panel.is-open{ max-height:4000px; margin-top:16px; } /* Затемнение фона правой колонки, пока спойлер допуслуг открыт */ .rootrouter-widget .rr-col-right-bg{ transition: filter .4s var(--ease); } .rootrouter-widget .rr-col-right-bg.is-dimmed{ filter: brightness(.35) saturate(.7); } .rootrouter-widget .rr-addon-grid{ display:flex; flex-direction:column; gap:26px; } .rootrouter-widget .rr-addon-module-title{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--gold); margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid rgba(229,169,60,.25); text-shadow: 0 2px 10px rgba(0,0,0,.5); } .rootrouter-widget .rr-addon-module-icon{ display:flex; align-items:center; color:var(--gold); } .rootrouter-widget .rr-addon-module-grid{ position:relative; display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; } /* Ячейка сетки — задаёт размер грид-трека (по компактной карточке), сама остаётся position:static, чтобы "разворот" мог всплыть в контейнере module-grid (position:relative) на всю его ширину. */ .rootrouter-widget .rr-addon-cell{ position:static; } .rootrouter-widget .rr-addon-card, .rootrouter-widget .rr-addon-expand{ text-align:left; padding:16px; border-radius:var(--radius-m); background:var(--charcoal-2); border:2px solid var(--ink-line); display:flex; flex-direction:column; } .rootrouter-widget .rr-addon-card{ position:relative; width:100%; transition: border-color .25s var(--ease), box-shadow .3s var(--ease), transform .2s, border-width .2s; } .rootrouter-widget .rr-addon-card:hover{ transform:translateY(-3px); border-color:rgba(229,169,60,.4); } .rootrouter-widget .rr-addon-head{ display:flex; align-items:center; gap:10px; } .rootrouter-widget .rr-addon-icon{ width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; flex:none; color:var(--white); transition: background .25s, color .25s; } .rootrouter-widget .rr-addon-name{ font-size:13.5px; font-weight:600; line-height:1.3; } .rootrouter-widget .rr-addon-bottom{ margin-top:14px; display:flex; align-items:center; justify-content:flex-end; gap:8px; } .rootrouter-widget .rr-addon-price{ font-family:var(--font-display); font-size:14.5px; font-weight:600; color:var(--gold); } .rootrouter-widget .rr-addon-state{ width:18px; height:18px; border-radius:50%; flex:none; border:1.5px solid var(--ink-line); display:flex; align-items:center; justify-content:center; color:transparent; transition: all .2s; } /* Выбранная карточка: та же непрозрачная подложка, только рамка толще и золотая + свечение — никакого "выцветания" фона. */ .rootrouter-widget .rr-addon-card.active, .rootrouter-widget .rr-addon-expand.active{ background:var(--charcoal-2); border-color:var(--gold); border-width:3px; box-shadow:0 0 0 1px rgba(229,169,60,.35), 0 14px 36px -12px rgba(229,169,60,.55); } .rootrouter-widget .rr-addon-card.active .rr-addon-icon, .rootrouter-widget .rr-addon-expand.active .rr-addon-icon{ background:var(--gold); color:#1a1200; } .rootrouter-widget .rr-addon-card.active .rr-addon-state, .rootrouter-widget .rr-addon-expand.active .rr-addon-state{ background:var(--gold); border-color:var(--gold); color:#1a1200; } /* "Разворот" карточки — отдельный слой поверх всей сетки модуля, всплывает по наведению на всю ширину блока, высота по контенту. Не влияет на размер module-grid (position:absolute), поэтому остальные карточки не двигаются и фон не скачет. */ .rootrouter-widget .rr-addon-expand{ position:absolute; left:0; width:100%; top:0; z-index:30; opacity:0; pointer-events:none; box-shadow:0 24px 60px -20px rgba(0,0,0,.7); transition: opacity .2s ease; cursor:pointer; } .rootrouter-widget .rr-addon-cell:hover .rr-addon-expand{ opacity:1; pointer-events:auto; } .rootrouter-widget .rr-addon-expand .rr-addon-name{ font-size:15px; } .rootrouter-widget .rr-addon-desc{ display:block; margin-top:10px; padding-left:42px; font-size:12.5px; color:var(--muted); line-height:1.5; } /* На компактной карточке описание не показываем вовсе — оно только в развороте по наведению */ .rootrouter-widget .rr-addon-card .rr-addon-desc{ display:none; } .rootrouter-widget .rr-checkout{ margin-top:auto; padding:22px 22px 24px; border:1px solid var(--ink-line); border-radius:var(--radius-l); background:rgba(20,22,28,.55); backdrop-filter: blur(6px); } .rootrouter-widget .rr-checkout-title{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--white); margin-bottom:14px; text-shadow: 0 2px 10px rgba(0,0,0,.5); } .rootrouter-widget .rr-checkout-title span{ color:var(--gold); } .rootrouter-widget .rr-total-toggle-label{ display:flex; align-items:baseline; gap:8px; } .rootrouter-widget .rr-total-value{ font-family:var(--font-display); font-weight:700; font-size:20px; } .rootrouter-widget .rr-total-value .rr-cur{ font-size:13px; font-weight:600; margin-left:2px; opacity:.75; } /* Спойлер с текстом заявки. Раньше был на grid-template-rows:0fr/1fr — на части мобильных браузеров эта техника вела себя нестабильно (текст "протекал" наружу в свёрнутом виде), поэтому переехали на max-height — надёжнее. */ .rootrouter-widget .rr-order-preview-wrap{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease); } .rootrouter-widget .rr-order-preview-wrap.is-open{ max-height:1200px; margin-top:14px; } .rootrouter-widget .rr-order-preview{ font-family:var(--font-body); font-size:12.5px; line-height:1.6; color:var(--white); white-space:pre-wrap; word-break:break-word; background:var(--charcoal-2); border:1px solid var(--ink-line); border-radius:var(--radius-m); padding:16px 18px; margin:0; } .rootrouter-widget .rr-checkout-buttons{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; } .rootrouter-widget .rr-send-btn{ padding:14px 10px; border-radius:var(--radius-s); font-size:13.5px; font-weight:600; border:1px solid var(--ink-line); display:flex; align-items:center; justify-content:center; gap:8px; transition: transform .15s, box-shadow .2s, border-color .2s; } .rootrouter-widget .rr-send-btn:hover{ transform:translateY(-2px); } .rootrouter-widget .rr-send-btn.rr-tg{ background:#1B87D6; border-color:#1B87D6; } .rootrouter-widget .rr-send-btn.rr-tg:hover{ box-shadow:0 10px 24px -8px rgba(27,135,214,.6); } .rootrouter-widget .rr-send-btn.rr-max{ background:linear-gradient(90deg, #4A90E2, #9B59D6); border-color:transparent; } .rootrouter-widget .rr-send-btn.rr-max:hover{ box-shadow:0 10px 24px -8px rgba(122,120,222,.6); } .rootrouter-widget .rr-send-btn.rr-mail{ background:var(--charcoal-2); } .rootrouter-widget .rr-send-btn.rr-mail:hover{ border-color:var(--gold); box-shadow:0 10px 24px -8px rgba(229,169,60,.4); } .rr-toast{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); background:#1B1E27; border:1px solid #E5A93C; color:#F5F6FA; padding:12px 20px; border-radius:100px; font-size:13px; font-family:'Inter Local','Inter',sans-serif; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:99999; } .rr-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } /* ========================================================= МОБИЛЬНАЯ ВЕРСИЯ (< 1024px) Экран 1 = левая колонка (презентация) на весь вьюпорт, экран 2 = правая колонка (конфигуратор) на весь вьюпорт, листаются вертикальным скроллом. Карточки — в один столбец. ========================================================= */ @media (max-width: 1023px){ .rootrouter-widget{ min-width:0; min-height:auto; } .rootrouter-widget .rr-shell{ grid-template-columns: 1fr; min-height:auto; } .rootrouter-widget .rr-col-left{ min-height:100svh; border-right:none; border-bottom:1px solid var(--ink-line); } .rootrouter-widget .rr-left-content{ padding:40px 24px 0; gap:28px; } .rootrouter-widget .rr-left-copy h1{ font-size:clamp(26px, 7vw, 34px); max-width:none; } .rootrouter-widget .rr-trust-stack{ align-self:flex-start; max-width:none; } /* на мобильном описания плашек и допуслуг не выводим вовсе */ .rootrouter-widget .rr-trust-desc-wrap{ display:none !important; } .rootrouter-widget .rr-result-plate{ margin:20px 24px 32px; } .rootrouter-widget .rr-col-right{ min-height:100svh; } .rootrouter-widget .rr-col-right-content{ padding:36px 16px 32px; gap:16px; } /* На узких экранах внешние (десктопные) стрелки скрываем — вместо них видны кнопки прямо на фото (см. .rr-nav-arrow-onphoto ниже), они рендерятся внутри .rr-router-thumb в JS. */ .rootrouter-widget .rr-router-switcher > .rr-nav-arrow{ display:none; } .rootrouter-widget .rr-router-viewport{ min-height:260px; } .rootrouter-widget .rr-dots{ margin-top:-6px; } .rootrouter-widget .rr-router-slide{ padding:0; } .rootrouter-widget .rr-router-top{ grid-template-columns: 1fr; grid-template-areas: "name" "thumb" "specs"; row-gap:12px; } .rootrouter-widget .rr-router-thumb{ display:block; width:100%; aspect-ratio:1 / 1; border-radius:var(--radius-m); overflow:hidden; background:linear-gradient(160deg, #202536, #14161c); border:1px solid var(--ink-line); } /* стрелки — прямо на фото, поверх картинки (z-index выше img) */ .rootrouter-widget .rr-nav-arrow-onphoto{ display:flex; align-items:center; justify-content:center; position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; border:1px solid var(--ink-line); background:rgba(20,22,28,.72); backdrop-filter: blur(6px); color:var(--white); z-index:5; } .rootrouter-widget .rr-nav-arrow-onphoto:hover, .rootrouter-widget .rr-nav-arrow-onphoto:active{ transform:translateY(-50%); } .rootrouter-widget .rr-nav-arrow-onphoto[data-nav="prev"]{ left:10px; } .rootrouter-widget .rr-nav-arrow-onphoto[data-nav="next"]{ right:10px; } /* на мобильном описание работ прячем — карточка и так длинная */ .rootrouter-widget .rr-router-desc{ display:none; } .rootrouter-widget .rr-addon-module-grid{ grid-template-columns: 1fr; } /* разворот по наведению — десктопная механика, на тач-экранах её не показываем вовсе (нет hover), чтобы не мешала тапам */ .rootrouter-widget .rr-addon-expand{ display:none; } .rootrouter-widget .rr-checkout{ padding:18px 16px 20px; } .rootrouter-widget .rr-total-toggle-label{ flex-direction:column; align-items:flex-start; gap:2px; } .rootrouter-widget .rr-total-value{ font-size:19px; } .rootrouter-widget .rr-checkout-buttons{ grid-template-columns: 1fr; } }