html,body{overflow-anchor:auto}
body{font-family:Arial,sans-serif;background:#f3f7f3;margin:0}
/* =========================================================
МЕСТО ДЛЯ ФОТО #4 — ФОН ПО БОКАМ НА ДЕСКТОПЕ
(слева и справа от белых карточек формы, виден только на
широких экранах — на телефоне/планшете не показывается)
Сейчас здесь мягкий зелёный градиент + едва заметный узор.
Чтобы заменить/дополнить его своим фото — добавьте
url("../images/ИМЯ_ФАЙЛА.jpg") первым слоем в background-image
ниже, например:
background-image:
url("../images/side-bg.jpg"),
linear-gradient(135deg, #eef7f1 0%, #dcefe3 45%, #e6f3ea 100%),
url("data:image/svg+xml,...");
background-size: cover, auto, auto;
Не забудьте через запятую добавить cover/auto для
background-size и background-repeat под новый слой.
========================================================= */
@media (min-width:769px){
body{
background-color:#eef5f0;
background-image:
linear-gradient(135deg, #eef7f1 0%, #dcefe3 45%, #e6f3ea 100%),
url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22200%22%20height%3D%22200%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%231f6f3d%22%20stroke-width%3D%221.4%22%20opacity%3D%220.08%22%3E%0A%3Cpath%20d%3D%22M10%2010%20H70%20V50%20H130%22/%3E%0A%3Cpath%20d%3D%22M20%20140%20V90%20H80%20V180%22/%3E%0A%3Cpath%20d%3D%22M160%2020%20V80%20H100%22/%3E%0A%3Cpath%20d%3D%22M150%20150%20H90%20V110%22/%3E%0A%3Cpath%20d%3D%22M10%20170%20H50%20V130%22/%3E%0A%3Ccircle%20cx%3D%2270%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%231f6f3d%22%20stroke%3D%22none%22/%3E%0A%3Ccircle%20cx%3D%22130%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%231f6f3d%22%20stroke%3D%22none%22/%3E%0A%3Ccircle%20cx%3D%2280%22%20cy%3D%2290%22%20r%3D%222.8%22%20fill%3D%22%231f6f3d%22%20stroke%3D%22none%22/%3E%0A%3Ccircle%20cx%3D%22160%22%20cy%3D%2280%22%20r%3D%222.8%22%20fill%3D%22%231f6f3d%22%20stroke%3D%22none%22/%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%22130%22%20r%3D%222.8%22%20fill%3D%22%231f6f3d%22%20stroke%3D%22none%22/%3E%0A%3Crect%20x%3D%2228%22%20y%3D%2228%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22/%3E%0A%3Crect%20x%3D%22112%22%20y%3D%22112%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");
background-repeat:no-repeat, repeat;
background-attachment:fixed, fixed;
}
}
/* =========================================================
МЕСТО ДЛЯ ФОТО #1 — ШАПКА САЙТА (header)
За кнопками языка и надписями "Arduino / ESP32 Firmware
Studio" / "Заказ прошивки Arduino / ESP32".
Чтобы добавить фото — раскомментируйте строку background
ниже и укажите путь к файлу в папке images/. Полупрозрачная
зелёная заливка поверх фото оставлена, чтобы белый текст
шапки был читаем на любом фото.
========================================================= */
header{
background:#1f6f3d;
background:
linear-gradient(rgba(31, 111, 62, 0.479), rgba(31, 111, 62, 0.479)),
url("../images/photo1.jpg") center/cover no-repeat;
/* Чтобы добавить фото, замените строку выше на:
background:
linear-gradient(rgba(31,111,61,.82), rgba(31,111,61,.82)),
url("../images/header-bg.jpg") center/cover no-repeat;
*/
color:#fff;padding:20px;text-align:center;position:relative;z-index:1
}
.container{max-width:1000px;margin:auto;padding:20px;position:relative;z-index:1}
/* =========================
Компактный вид на десктопе:
поля ввода, кнопки и панель цены не растягиваются
на всю ширину широкого экрана
========================= */
@media (min-width:769px){
.container{
max-width:680px;
}
.total{
max-width:680px;
margin:0 auto;
}
input[type=text],
input[type=email],
textarea{
max-width:480px;
}
/* Телефон — короче остальных полей, чтобы номер
полностью помещался и был виден целиком */
.phone-field-wrap{
max-width:200px;
}
}
.card{background:#e9eff1;border-radius:10px;padding:15px;margin-bottom:15px;box-shadow:0 2px 6px rgba(0,0,0,.1)}/*Цвет выбора в меню кнопок*/
/* =========================================================
МЕСТО ДЛЯ ФОТО #3 — БЛОК "КОНТАКТЫ / ОБЪЯЗАТЕЛЬНЫЕ ПОЛЯ"
(только первая карточка формы, класс .card-contacts)
Чтобы добавить фото — раскомментируйте background ниже
и укажите путь к файлу в папке images/.
========================================================= */
.card-contacts{
background:
linear-gradient(rgba(255, 255, 255, 0.637), rgba(255, 255, 255, 0.658)),
url("../images/photo3.jpg") center/cover no-repeat;
/* Чтобы добавить фото, раскомментируйте:
background:
linear-gradient(rgba(255,255,255,.90), rgba(255,255,255,.90)),
url("../images/contacts-bg.jpg") center/cover no-repeat;
*/
}
h2{color:#da1111}/*Контакты*/
#espNetworkWrap h3{color:#1e0491;font-size:20px;margin:14px 0 6px 0;padding-top:10px;border-top:1px solid #43ec4c}/*Цвет в кнопке Работа с Esp*/
#espNetworkWrap #cardInternet h3{margin-top:0;padding-top:0;border-top:none}
#espNetworkWrap .card{background:transparent;box-shadow:none;padding:0;margin-bottom:0}
label{display:block;margin:6px 0}
input[type=text],input[type=email],textarea{width:100%;padding:10px;box-sizing:border-box}
/* По умолчанию у textarea resize:both — можно тянуть не только
по высоте, но и по ширине, из-за чего ломается вёрстка
(карточка/страница становится шире контейнера). Разрешаем
тянуть только по высоте. */
textarea{
resize:vertical;
max-width:100%;
}
.total{position:sticky;bottom:0;background:#1f6f3d;color:#fff;padding:15px;text-align:center;font-size:22px;z-index:1}
button{background:#2e9f55;color:#fff;border:none;padding:12px 20px;border-radius:8px;cursor:pointer}/*Кнопка переключатель arduino/esp*/
.sensor-item{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin:8px 0;
padding:6px;
border:1px solid #eee;
border-radius:8px;
}
/* =========================
СВЕТОДИОДЫ — ВЫБОР КОЛИЧЕСТВА Начало
========================= */
/* =========================
КОМПАКТНЫЕ СТРОКИ LED
========================= */
/* =========================
LED — СТРОГО ОДИН СТОЛБИК
========================= */
/* Единая рамка на весь .led-row: чекбокс+название+"Шт." сверху,
бейдж "Установлено в «Индикация состояния связи»" — ВНУТРИ той же
рамки, второй строкой (flex-basis:100% переносит именно ЕГО на
новую строку). Ширина рамки компактная — только по первой строке
(чекбокс+название+"Шт."), у бейджа width:0 — он не увеличивает
ширину рамки, а его текст (white-space:nowrap + overflow:visible)
визуально продолжается вправо поверх/за пределы рамки, оставаясь
в одну строку без переноса слов. Высота рамки растёт под вторую
строку как обычно. */
.led-row{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:flex-start;
gap:0;
row-gap:1px;
width:max-content;
max-width:100%;
min-height:34px;
margin:3px 0;
padding:4px 8px;
box-sizing:border-box;
border:1px solid transparent;
border-radius:6px;
transition:all .2s ease;
}
.led-row-main{
display:flex;
align-items:center;
gap:0;
order:-2;
}
/* Активная подпись (.qty-owner — последняя отмеченная, с оранжевыми
ℹ️) всегда первой под названием светодиода; .led-row — flex, порядок
меняем через order, разметку не трогаем */
.led-row .qty-owner,
.led-row .qty-owner-first{
order:-1;
}
/* Подписи под светодиодом кликабельны — клик делает подпись активной
(bindMonitorLedChoice → makeActive) */
.led-row .led-source-badge,
.led-row .feature-led-hint.hint-ok{
cursor:pointer;
}
.led-row .led-source-badge:hover,
.led-row .feature-led-hint.hint-ok:hover{
text-decoration:underline;
}
/* Название LED */
.led-name{
display:inline-block;
width:190px;
min-width:190px;
margin-right:8px;
font-weight:500;
}
/* Блок количества — до выбора невидим, но место под него занято
(visibility, а не display:none): ширина рамки строки одинакова
и у отмеченной (зелёной), и у неотмеченной (красной, например
"Выбор «Напряжение сети» — мин. N"), и подписи под ней не
выходят за пределы красной рамки */
.led-qty-wrap{
display:flex;
visibility:hidden;
align-items:center;
gap:6px;
white-space:nowrap;
flex-shrink:0;
}
/* Показываем количество только после выбора */
.led-row.selected .led-qty-wrap{
visibility:visible;
}
/* Поле количества */
.led-qty{
width:52px;
height:28px;
padding:3px 4px;
box-sizing:border-box;
text-align:center;
}
/* Компактный вид на телефонах, чтобы строка
не выходила за пределы экрана */
@media (max-width:480px){
.led-row{
width:100%;
row-gap:4px;
}
.led-name{
width:auto;
min-width:0;
flex:1 1 auto;
margin-right:6px;
font-size:14px;
white-space:normal;
}
.led-qty-wrap{
gap:4px;
font-size:13px;
margin-left:auto;
}
.led-qty{
width:44px;
}
/* На телефоне строка и так во всю ширину экрана — подписи под
светодиодом ("ℹ️ Установлено в «Индикация…»", "Выбор «Напряжение
сети» — мин. N" и т.п.) переносятся по словам внутри рамки, а не
уходят одной строкой за край экрана (иначе на узких экранах,
320px, появлялась горизонтальная прокрутка) */
/* .led-row перед классом — правило стоит выше основных
.led-source-badge/.feature-led-hint и без него проигрывало бы им */
.led-row .led-source-badge,
.led-row .feature-led-hint{
width:auto;
white-space:normal;
overflow-wrap:anywhere;
}
}
/* Красная строка — рамка на весь .led-row целиком, включая бейдж */
.led-row.led-error{
background:#fff0f0;
border:1px solid #e74c3c;
}
/* Зелёная строка */
.led-row.led-ok{
background:#f7fff8;
border:1px solid #2ecc71;
}
/* Красная рамка вокруг типов светодиодов — подсказывает,
какие именно нужно выбрать, в зависимости от того, какой
тип управления отмечен ("Только ВКЛ/ВЫКЛ" — все 4 типа,
"Частично/Полный PWM" — только PWM-совместимые типы).
Рамка уже зарезервирована в базовом .led-row (border:1px
solid transparent), поэтому подсветка не сдвигает макет.
*/
.led-row.led-type-opt.needs-selection{
background:#fff6f6;
border-color:#e74c3c;
}
/* Та же красная подсветка, но по другой причине: в "Мониторинг
параметров" у "Напряжение сети"/"Уровень батареи"/"Уровень заряда батареи" нажата кнопка
"Светодиод", а светодиод ещё не выбран (updateMonitorLedRequirements).
Независима от .needs-selection выше (та — про тип управления) */
.led-row.led-type-opt.feature-led-suggest{
background:#fff6f6;
border-color:#e74c3c;
}
/* Подсказки минимума/подтверждения для пунктов "Мониторинг параметров"
(по одной на пункт, data-feature) — так же,
как .led-source-badge выше, второй строкой внутри той же рамки,
без увеличения её ширины (flex-basis:100% + width:0 + overflow:
visible + white-space:nowrap) */
.feature-led-hint{
display:none;
flex-basis:100%;
width:0;
overflow:visible;
white-space:nowrap;
font-size:12px;
font-weight:600;
color:#c0392b;
margin-top:0;
}
.feature-led-hint.hint-ok{
color:#2e7d32;
font-weight:normal;
}
.feature-led-hint.visible{
display:block;
}
/* "⚠ «…» — мин. N" — попытка уменьшить количество
ниже минимума — "дышит", как остальные предупреждения (hintPulse) */
.feature-led-hint.visible.feature-min-warn{
animation:hintPulse 1.6s ease-in-out infinite;
}
/* Пометка: количество проставлено автоматически из "Индикация
состояния связи" — теперь ВНУТРИ той же рамки, второй строкой
(flex-basis:100% на самом бейдже переносит именно его на новую
строку), в одну строку без переноса слов внутри самого текста —
рамка расширяется по ширине, если этот текст длиннее первой строки */
.led-source-badge{
display:none;
flex-basis:100%;
width:0;
overflow:visible;
white-space:nowrap;
font-size:12px;
color:#2e7d32;
margin-top:0;
transition:color .15s ease;
}
/* "⚠ Выбери для «Индикация состояния связи»" — светодиод отмечен
там, но количество для него не выбрано (updateLedSourceBadges) —
красный и "дышит", как остальные предупреждения (hintPulse) */
.led-source-badge.badge-need-qty{
color:#c0392b;
font-weight:600;
animation:hintPulse 1.6s ease-in-out infinite;
}
/* "ℹ️ Полный PWM = « N »" / "ℹ️ Частично PWM = « N »" под "Светодиод
(PWM)" и "Светодиод RGB (PWM)" — как остальные подписи: строкой внутри
рамки, ширину рамки не увеличивает (updateLedSourceBadges) */
.pwm-mode-hint{
display:none;
flex-basis:100%;
width:0;
overflow:visible;
white-space:nowrap;
font-size:12px;
color:#2e7d32;
}
.pwm-mode-hint.visible{
display:block;
}
@media (max-width:480px){
.led-row .pwm-mode-hint{
width:auto;
white-space:normal;
overflow-wrap:anywhere;
}
}
/* Активная подпись под светодиодом — туда уходят штуки при увеличении
количества: ℹ️ другого (оранжевого) цвета в начале и в конце строки
(updateLedSourceBadges). Эмодзи перекрашиваем фильтром */
.qty-owner::before,
.qty-owner::after{
content:"\2139\FE0F";
display:inline-block;
filter:hue-rotate(185deg) saturate(1.8);
/* плавно "дышат" только значки по бокам, текст — ровный */
animation:qtyOwnerIconPulse 1.6s ease-in-out infinite;
}
/* Режим выбора: "Выбор «…» — мин. N" пункта, для которого будет
следующий клик по светодиоду, — первым в строке и с мигающей ▶;
нажатием на любую "Выбор «…»" можно переключить пункт */
.led-row .feature-led-hint.claim-target{
order:-1;
}
.feature-led-hint.claim-target::before{
content:"\25B6";
display:inline-block;
margin-right:.35em;
animation:qtyOwnerIconPulse 1.6s ease-in-out infinite;
}
/* Первая (активная) строка под светодиодом выделена спокойно, без
мигания: светло-жёлтый фон под текстом ("маркер") и жирный текст —
и у "▶ Выбор «…»", и у "ℹ️ Установлено … ℹ️". ::first-line — фон
только под самим текстом, ширина рамки не меняется */
.led-row .feature-led-hint.claim-target::first-line,
.led-row .qty-owner::first-line{
background:#fff3b0;
font-weight:700;
}
.led-row .feature-led-hint.visible{
cursor:pointer;
}
@keyframes qtyOwnerIconPulse{
0%, 100%{ opacity:1; }
50%{ opacity:.3; }
}
@media (prefers-reduced-motion: reduce){
.qty-owner::before,
.qty-owner::after{
animation:none;
}
}
.qty-owner::before{
margin-right:.3em;
}
.qty-owner::after{
margin-left:.2em;
}
/* Подсказка при попытке снять заблокированную галочку */
.led-source-badge.badge-flash{
color:#c0392b;
font-weight:bold;
}
/* =========================
СВЕТОДИОДЫ — ВЫБОР КОЛИЧЕСТВА Конец
========================= */
/* =========================
ПУНКТЫ ИНДИКАЦИИ НА ДИСПЛЕЕ начало
========================= */
.led-display-options{
margin-top:6px;
margin-left:0;
}
.led-display-options label{
display:flex;
align-items:center;
justify-content:flex-start;
width:100%;
min-height:32px;
margin:3px 0;
padding:4px 8px;
box-sizing:border-box;
}
.led-display-options label input{
flex:0 0 auto;
margin-right:8px;
}
/* =========================
ПУНКТЫ ИНДИКАЦИИ НА ДИСПЛЕЕ конец
========================= */
/* =========================
СИЛОВЫЕ КЛЮЧИ — ОДИН СТОЛБИК начало
========================= */
/* =========================
СИЛОВЫЕ КЛЮЧИ
СТРОГО ОДИН СТОЛБИК
========================= */
.powerkey-list{
display:flex;
flex-direction:column;
align-items:flex-start;
width:100%;
}
/* Одна строка силового ключа */
.powerkey-row{
display:flex;
width:max-content;
max-width:100%;
flex-wrap:wrap;
row-gap:4px;
align-items:center;
justify-content:flex-start;
gap:0;
min-height:34px;
margin:3px 0;
padding:4px 8px;
box-sizing:border-box;
border:1px solid transparent;
border-radius:6px;
transition:all .2s ease;
}
/* Название */
.powerkey-name{
display:inline-block;
width:190px;
min-width:190px;
margin-right:8px;
font-weight:500;
}
/* Количество скрыто,
пока ключ не выбран */
.powerkey-qty-wrap{
display:none;
align-items:center;
gap:6px;
white-space:nowrap;
flex-shrink:0;
}
/* Показываем количество
после установки галочки */
.powerkey-row.selected .powerkey-qty-wrap{
display:flex;
}
/* Поле количества */
.powerkey-qty{
width:52px;
height:28px;
padding:3px 4px;
box-sizing:border-box;
text-align:center;
}
/* Компактный вид на телефонах, чтобы строка
не выходила за пределы экрана */
@media (max-width:480px){
.powerkey-name{
width:auto;
min-width:0;
flex:1 1 auto;
margin-right:6px;
font-size:14px;
white-space:normal;
}
.powerkey-qty-wrap{
gap:4px;
font-size:13px;
margin-left:auto;
}
.powerkey-qty{
width:44px;
}
}
/* Выбран, но количество = 0 */
.powerkey-row.powerkey-error{
background:#fff0f0;
border:1px solid #e74c3c;
}
/* Выбран и количество указано */
.powerkey-row.powerkey-ok{
background:#f7fff8;
border:1px solid #2ecc71;
}
/* Не требуется */
.powerkey-none{
margin-top:6px;
}
.powerkey-none label{
display:flex;
align-items:center;
min-height:32px;
margin:3px 0;
padding:4px 8px;
box-sizing:border-box;
}
.powerkey-none input{
margin-right:8px;
}
/* =========================
СИЛОВЫЕ КЛЮЧИ — ОДИН СТОЛБИК конец
========================= */
.sensor-item input[type="number"]{
width:70px;
padding:5px;
}
/* =========================================================
МЕСТО ДЛЯ ФОТО #2 — БЛОК "УВАЖАЕМЫЙ ЗАКАЗЧИК!" (.intro)
Чтобы добавить фото — раскомментируйте background-image
ниже и укажите путь к файлу в папке images/.
========================================================= */
.intro{
text-align:center;
max-width:900px;
margin:30px auto;
padding:20px;
background:#fff;
background:
linear-gradient(rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.753)),
url("../images/photo2.jpg") center/cover no-repeat;
/* Чтобы добавить фото, замените строку выше на:
background:
linear-gradient(rgba(255,255,255,.90), rgba(255,255,255,.90)),
url("../images/intro-bg.jpg") center/cover no-repeat;
*/
border-radius:12px;
box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.intro h1{
color:#1f6f3d;
margin-bottom:15px;
}
.intro p{
margin:10px 0;
line-height:1.5;
}
/* =========================
Эффект "как молния ⚡" — заливка цветом + чёрная обводка
вокруг букв (двойной приём для совместимости: основной —
-webkit-text-stroke, работает в Chrome/Edge/Safari/новом
Firefox; text-shadow — запасной вариант для остальных).
========================= */
.text-outline-yellow{
color:#ffd400;
-webkit-text-stroke:1.6px #000;
text-wrap-style:1.6px #000;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
.text-outline-red{
color:#e63946;
-webkit-text-stroke:1.6px #000;
text-wrap-style:1.6px #000;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
/* Для обычного (не заголовочного) текста обводка чуть тоньше,
иначе мелкий текст становится нечитаемым */
p.text-outline-red{
-webkit-text-stroke:.8px #000;
text-wrap-style:.8px #000;
}
/* Заголовок сайта "Arduino / ESP32 Firmware Studio" /
"Заказ прошивки Arduino / ESP32" — жёлтый с чёрной обводкой,
как у самой молнии ⚡ в эмодзи-логотипе */
#titleMain,
#titleSub{
color:#ffd400;
-webkit-text-stroke:1.6px #000;
text-wrap-style:1.6px #000;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#titleSub{
-webkit-text-stroke:1px #00000000;
text-wrap-style:1px #00000000;
}
/* "Уважаемый заказчик!" и текст под ним — красный с чёрной
обводкой (та же идея, что и у заголовка, но другим цветом) */
#introTitle{
color:#e63946;
-webkit-text-stroke:1.6px #00000000;
text-wrap-style:1.6px #00000000;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#intro1,
#intro2,
#intro3{
color:#030303;
-webkit-text-stroke:.8px #00000000;
text-wrap-style:.8px #00000000;
text-shadow:
-1px -1px 0 #00000000,
1px -1px 0 #00000000,
-1px 1px 0 #00000000,
1px 1px 0 #00000000;
}
#h2{
color:#e63946;
-webkit-text-stroke:1.6px #00000000;
text-wrap-style:1.6px #00000000;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#h2{
color:#030303;
-webkit-text-stroke:.8px #00000000;
text-wrap-style:.8px #00000000;
text-shadow:
-1px -1px 0 #00000000,
1px -1px 0 #00000000,
-1px 1px 0 #00000000,
1px 1px 0 #00000000;
}
.control-item{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin:8px 0;
padding:6px;
border:1px solid #eee;
border-radius:8px;
}
.control-item input[type="number"]{
width:70px;
padding:5px;
}
/* Поле описания у модуля "Другой" в "Дополнительные модули" */
.module-description{
width:350px;
max-width:100%;
margin-top:8px;
}
/* Строка одного добавленного модуля (селект + количество +
кнопка удаления) — компактная ширина по содержимому, не
на всю ширину карточки */
.custom-module{
margin:8px 0;
width:max-content;
max-width:100%;
box-sizing:border-box;
}
.module-row{
display:flex;
gap:8px;
align-items:center;
}
/* =========================
Настроки Дополнительные модули стрка поиска
========================= */
.module-row input[type="number"]{
width: 45px;
}
/* =========================
Настроки Дополнительные модули стрка ввода колличесва
========================= */
/* Выпадающий список выбора модуля внутри "Дополнительные модули" */
.module-select{
width: 100%;
max-width: 135px;
}
/* Кнопка "✖" удаления добавленного модуля */
.custom-module button{
background:red;
}
/* Карточка одной категории модулей (Связь/Управление/Датчики/Система) */
.module-category{
margin-bottom:15px;
padding:10px;
border:1px solid #ddd;
border-radius:10px;
background:#fafafa;
}
.module-category h3{
margin:5px 0 10px 0;
color:#1f6f3d;
}
/* Категория заблокирована (например, до выбора Arduino/ESP) */
.module-category.disabled{
opacity:0.4;
pointer-events:none;
filter:grayscale(1);
}
/* Нижняя закреплённая панель с итоговой ценой (PLN/EUR) —
видна всегда внизу экрана поверх остального контента */
.total{
position:sticky;
bottom:0;
background:#1f6f3d;
color:#fff;
padding:15px;
text-align:center;
font-size:22px;
position: sticky;
}
.total{
position: sticky;
}
.total div{
top:10px;
}
.total{
border-radius: 14px;
overflow: hidden;
}
@media (max-width: 600px){
.total{
border-radius: 14px;
margin: 10px;
}
}
/* Текст с курсом валют в углу панели цены */
.rate-info{
position:absolute;
left:15px;
top:8px;
font-size:12px;
text-align:left;
opacity:0.95;
line-height:1.4;
}
.price-line{
font-size:22px;
}
/* Индикатор состояния сети (онлайн/офлайн) в панели цены */
#netStatus.online{
color:#7CFF7C;
}
#netStatus.offline{
color:#ff6b6b;
}
.total{
position:sticky;
bottom:0;
background:#1f6f3d;
color:#fff;
padding:15px;
text-align:center;
font-size:22px;
position:sticky;
overflow:hidden;
}
/* =========================
SEND BUTTON STATES
========================= */
.send-btn{
width:100%;
background:#2e9f55;
color:#fff;
border:none;
padding:14px 20px;
border-radius:10px;
font-size:16px;
cursor:pointer;
transition: all .2s ease;
position:relative;
overflow:hidden;
}
#sendBtn{
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}
.send-btn:disabled{
background:#9b9b9b;
color:#ddd;
cursor:not-allowed;
opacity:.7;
}
.send-btn:active{
transform: scale(0.97);
}
.send-btn.sending{
background:#888;
cursor:not-allowed;
}
.send-btn.success{
background:#5c7a99;
cursor:not-allowed;
}
.send-btn.error{
background:#c0392b;
}
/* маленький "loader" */
/* Крутящийся индикатор загрузки на кнопке "Отправить заявку"
во время отправки заявки на сервер */
.send-btn.loading::after{
content:"";
position:absolute;
right:15px;
top:50%;
width:14px;
height:14px;
margin-top:-7px;
border:2px solid #fff;
border-top:2px solid transparent;
border-radius:50%;
animation: spin .7s linear infinite;
}
@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@media (max-width: 600px){
.rate-info{
position: static;
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.total{
padding-top: 10px;
}
}
/* Заблокированная карточка (например, пока не выбран
Контроллер или не заполнены обязательные контакты) */
.card.disabled{
opacity:.45;
pointer-events:none;
filter:grayscale(1);
}
/* Текстовая подсказка-предупреждение под кнопками разделов
(например, "Сначала выберите Контроллер"). Место под неё
зарезервировано всегда (min-height + visibility), чтобы
при появлении/исчезновении текста страница не "прыгала" */
.controller-lock-hint{
display:block;
min-height:36px;
visibility:hidden;
color:#c0392b;
font-size:13px;
font-weight:600;
line-height:18px;
margin:0 0 8px;
padding:0 4px;
}
.controller-lock-hint.visible{
visibility:visible;
}
/* "Сначала укажите корректные Имя, Email, Телефон и способ связи"
(и её варианты, buildControllerLockHintText) и "Сначала выберите
Контроллер" — крупнее и жирнее остальных подсказок с этим классом */
#controllerLockHint,
#chooseControllerHint{
font-size:16px;
font-weight:700;
line-height:22px;
min-height:44px;
color:#c0392b;
}
/* "Дышит" (hintPulse), как остальные красные предупреждения */
#controllerLockHint.visible{
animation:hintPulse 1.6s ease-in-out infinite;
}
/* Подсказка в "Дисплей" между кнопкой и LCD1602 ("⚠ Вы выбрали
отображение на дисплее в «…» — выберите тип дисплея ниже") —
место не резервирует (пока скрыта, пробела нет), отступ до
первого чекбокса минимальный; две строки, если требование и
из "Индикация состояния связи", и из "Мониторинг параметров" */
/* "Зуммер": подсказка "ℹ️ Установлено автоматически…" — тоже без
зарезервированного места, иначе пустой промежуток между кнопкой и
"Требуется зуммер?" */
#zummerAutoHint{
display:none;
min-height:0;
margin:4px 0 2px;
}
#zummerAutoHint.visible{
display:block;
}
#displayIndicationHint{
display:none;
min-height:0;
margin:4px 0 2px;
white-space:pre-line;
}
#displayIndicationHint.visible{
display:block;
}
/* Компактная подсказка прямо под чекбоксом (На дисплее / На
дисплее плавной регулировки яркости) — в отличие от
.controller-lock-hint, места НЕ резервирует: полностью
схлопывается, пока не нужна, чтобы не было большого пустого
промежутка до следующего пункта */
.inline-display-hint{
display:none;
color:#c0392b;
font-size:13px;
font-weight:600;
line-height:18px;
margin:2px 0 6px;
padding:0 4px;
}
.inline-display-hint.visible{
display:block;
}
/* Подтверждающая подсказка (например, "Ок. Выбрано «Датчик
Температуры»") — тот же .inline-display-hint, но зелёная,
а не красная: выбор верный, это не предупреждение об ошибке */
.inline-display-hint.hint-ok{
color:#1f6f3d;
}
/* То же плавное "дыхание", что и у красных кнопок-разделов выше
(@keyframes toggleAlertPulse) — только для текста подсказки
пульсирует не рамка, а сама видимость (opacity). Только пока
это предупреждение (:not(.hint-ok)) — зелёные подтверждающие
подсказки ("Ок. Выбрано...", "Установлено...") не пульсируют. */
@keyframes hintPulse{
0%, 100%{ opacity:1; }
50%{ opacity:.5; }
}
.inline-display-hint.visible:not(.hint-ok){
animation:hintPulse 1.6s ease-in-out infinite;
}
/* "Напряжение сети" / "Уровень батареи" / "Уровень заряда батареи" —
пока нажата кнопка "Светодиод", в строке подсказки под пунктом
5 светодиодов, которые по очереди плавно загораются от
красного (20%) к зелёному (100%), затем гаснут — визуализация
уровня заряда. "Дышит" (hintPulse) только текст, а не светодиоды,
чтобы две анимации не накладывались. */
.battery-level-anim{
display:none;
align-items:center;
gap:4px;
margin-left:6px;
vertical-align:-1px;
}
.inline-display-hint.show-battery-anim .battery-level-anim{
display:inline-flex;
}
/* Специфичность выше, чем у .inline-display-hint.visible:not(.hint-ok)
(иначе "дышала" бы вся строка вместе со светодиодами) */
.inline-display-hint.visible.show-battery-anim:not(.hint-ok){
animation:none;
}
.inline-display-hint.show-battery-anim:not(.hint-ok) .hint-text{
animation:hintPulse 1.6s ease-in-out infinite;
}
.battery-level-anim i{
width:11px;
height:11px;
border-radius:50%;
background:#d9d9d9;
box-shadow:inset 0 -1px 2px rgba(0,0,0,.2);
animation:3.2s ease-in-out infinite;
}
.battery-level-anim i:nth-of-type(1){ --led:#e53935; animation-name:batteryLed1; }
.battery-level-anim i:nth-of-type(2){ --led:#fb8c00; animation-name:batteryLed2; }
.battery-level-anim i:nth-of-type(3){ --led:#fdd835; animation-name:batteryLed3; }
.battery-level-anim i:nth-of-type(4){ --led:#9ccc65; animation-name:batteryLed4; }
.battery-level-anim i:nth-of-type(5){ --led:#43a047; animation-name:batteryLed5; }
/* i-й светодиод загорается на своём шаге (20% → 100%), все держатся
до 85% цикла и вместе плавно гаснут */
@keyframes batteryLed1{
0%{ background:#d9d9d9; box-shadow:inset 0 -1px 2px rgba(0,0,0,.2); }
8%, 85%{ background:var(--led); box-shadow:0 0 6px var(--led); }
100%{ background:#d9d9d9; box-shadow:inset 0 -1px 2px rgba(0,0,0,.2); }
}
@keyframes batteryLed2{
0%, 15%{ background:#d9d9d9; box-shadow:inset 0 -1px 2px rgba(0,0,0,.2); }
23%, 85%{ background:var(--led); box-shadow:0 0 6px var(--led); }
100%{ background:#d9d9d9; box-shadow:inset 0 -1px 2px rgba(0,0,0,.2); }
}
@keyframes batteryLed3{
0%, 30%{ background:#d9d9d9; box-shadow:inset 0 -1px 2px rgba(0,0,0,.2); }
38%, 85%{ background:var(--led); box-shadow:0 0 6px var(--led); }
100%{ background:#d9d9d9; box-shadow:inset 0 -1px 2px rgba(0,0,0,.2); }
}
@keyframes batteryLed4{
0%, 45%{ background:#d9d9d9; box-shadow:inset 0 -1px 2px rgba(0,0,0,.2); }
53%, 85%{ background:var(--led); box-shadow:0 0 6px var(--led); }
100%{ background:#d9d9d9; box-shadow:inset 0 -1px 2px rgba(0,0,0,.2); }
}
@keyframes batteryLed5{
0%, 60%{ background:#d9d9d9; box-shadow:inset 0 -1px 2px rgba(0,0,0,.2); }
68%, 85%{ background:var(--led); box-shadow:0 0 6px var(--led); }
100%{ background:#d9d9d9; box-shadow:inset 0 -1px 2px rgba(0,0,0,.2); }
}
/* Процент справа от последнего светодиода: при загорании каждого
следующего 20% → 40% → 60% → 80% → 100% (цветом этого светодиода),
по кругу. Все 5 надписей лежат друг на друге в одной ячейке сетки
(ширина — по самой длинной, "100%", поэтому строка не прыгает),
видна только текущая — окна совпадают с keyframes batteryLed1..5 */
.battery-level-pct{
display:inline-grid;
margin-left:4px;
font-size:12px;
font-weight:700;
line-height:11px;
}
/* step-end — надпись меняется мгновенно, без наложения соседних */
.battery-level-pct b{
grid-area:1 / 1;
opacity:0;
animation:3.2s step-end infinite;
}
.battery-level-pct b:nth-child(1){ color:#e53935; animation-name:batteryPct1; }
.battery-level-pct b:nth-child(2){ color:#fb8c00; animation-name:batteryPct2; }
.battery-level-pct b:nth-child(3){ color:#e0b000; animation-name:batteryPct3; }
.battery-level-pct b:nth-child(4){ color:#7cb342; animation-name:batteryPct4; }
.battery-level-pct b:nth-child(5){ color:#43a047; animation-name:batteryPct5; }
/* Процент меняется посередине загорания очередного светодиода
(4 / 19 / 34 / 49 / 64% цикла), 100% держится, пока все горят */
@keyframes batteryPct1{ 0%{ opacity:0; } 4%{ opacity:1; } 19%, 100%{ opacity:0; } }
@keyframes batteryPct2{ 0%{ opacity:0; } 19%{ opacity:1; } 34%, 100%{ opacity:0; } }
@keyframes batteryPct3{ 0%{ opacity:0; } 34%{ opacity:1; } 49%, 100%{ opacity:0; } }
@keyframes batteryPct4{ 0%{ opacity:0; } 49%{ opacity:1; } 64%, 100%{ opacity:0; } }
@keyframes batteryPct5{ 0%{ opacity:0; } 64%{ opacity:1; } 93%, 100%{ opacity:0; } }
/* Пример "На дисплее" у пунктов "Мониторинг параметров" и "Диагностика
подключения" — мини-экран LCD (.ex-lcd-mini) со значком и значением:
⚡ 12.0V, батарея 80%, батарея с молнией 80%, WiFi OK, … Виден, пока
нажата "На дисплее"; если нажата и "Светодиод" — за ним индикатор
светодиодов. "Дышит" только текст предупреждения. */
.display-battery-anim{
display:none;
align-items:center;
margin-left:6px;
vertical-align:middle;
}
.inline-display-hint.show-display-anim .display-battery-anim{
display:inline-flex;
}
.inline-display-hint.visible.show-display-anim:not(.hint-ok){
animation:none;
}
.inline-display-hint.show-display-anim:not(.hint-ok) .hint-text{
animation:hintPulse 1.6s ease-in-out infinite;
}
/* Скорость светодиодов у пунктов: "Напряжение сети" 5.5 с, "Уровень
заряда батареи" 7.5 с, "Уровень батареи" (разряд) — самый медленный,
10 с. Все keyframes в % цикла — значения совпадают со светодиодами */
#voltDisplayHint .battery-level-anim i,
#voltDisplayHint .battery-level-pct b{
animation-duration:5.5s;
}
#uzarbatDisplayHint .battery-level-anim i,
#uzarbatDisplayHint .battery-level-pct b{
animation-duration:7.5s;
}
#ubatDisplayHint .battery-level-anim i,
#ubatDisplayHint .battery-level-pct b{
animation-duration:10s;
}
/* Без анимаций (настройка системы) — все 5 горят постоянно, 100% */
@media (prefers-reduced-motion: reduce){
.battery-level-anim i{
animation:none;
background:var(--led);
}
.battery-level-pct b{
animation:none;
}
.battery-level-pct b:nth-child(5){
opacity:1;
}
}
/* "⚠ Вы выбрали отображение на дисплее в «Индикация состояния
связи» — выберите тип дисплея ниже" — тот же эффект, но у неё
отдельный класс .controller-lock-hint (общий с другими
подсказками, которые не должны пульсировать — поэтому по id) */
#displayIndicationHint.visible{
animation:hintPulse 1.6s ease-in-out infinite;
}
/* Кнопки быстрого выбора "На дисплее" / "Светодиод" под
"Напряжение сети" — сразу ставят соответствующую галочку
в "Индикация состояния связи", без похода в другой раздел */
.linked-choice-buttons{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:2px 0 8px;
}
.linked-choice-btn{
background:#fff;
border:2px solid #1f6f3d;
color:#1f6f3d;
border-radius:8px;
padding:4px 12px;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:background .15s ease, color .15s ease;
}
.sensor-led-box{
margin:4px 0 8px 22px;
padding:8px 12px;
border-left:3px solid #1f6f3d;
background:rgba(31,111,61,.07);
border-radius:0 8px 8px 0;
}
.sensor-led-title{
margin:0 0 4px;
font-size:13px;
font-weight:600;
color:#1f6f3d;
}
/* Кнопки «Перейти» / «Выбрать» под подсказкой датчика
(Температура и Влажность) */
.sensor-hint-actions{
gap:10px;
margin:4px 0 10px;
}
.sensor-hint-actions .linked-choice-btn{
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 18px;
font-size:14px;
border-radius:999px;
box-shadow:0 2px 6px rgba(31,111,61,.25);
transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.sensor-hint-actions .linked-choice-btn[data-sensor-action="pick"]{
background:linear-gradient(135deg,#2e9e5b,#1f6f3d);
border-color:#1f6f3d;
color:#fff;
}
.sensor-hint-actions .linked-choice-btn:hover{
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(31,111,61,.4);
}
.sensor-hint-actions .linked-choice-btn[data-sensor-action="pick"]:hover{
background:linear-gradient(135deg,#35b068,#1f6f3d);
}
.sensor-hint-actions .linked-choice-btn:active{
transform:translateY(0);
box-shadow:0 1px 3px rgba(31,111,61,.3);
}
.sensors-modal-overlay{
position:fixed;
inset:0;
z-index:10000;
background:rgba(0,0,0,.55);
display:flex;
align-items:center;
justify-content:center;
padding:16px;
}
.sensors-modal{
position:relative;
background:#fff;
color:#222;
border-radius:12px;
padding:16px;
width:100%;
max-width:560px;
max-height:90vh;
overflow:auto;
box-shadow:0 10px 40px rgba(0,0,0,.4);
}
.sensors-modal-close{
position:absolute;
top:8px;
right:8px;
background:none;
border:none;
font-size:18px;
cursor:pointer;
}
.sensors-modal-ok{
margin-top:12px;
}
.linked-choice-btn:hover{
background:#1f6f3d;
color:#fff;
}
/* Вариант выбран — держится постоянно (не только при наведении),
независимо от соседней кнопки (можно включить обе сразу) */
.linked-choice-btn.active{
background:#1f6f3d;
color:#fff;
}
/* Вариант нажат, но выбор не завершён ("⚠ Выберите нужный
светодиод ниже:" / "⚠ Выберите нужный Дисплей:") — красная и
"дышит", как красные кнопки разделов (toggleAlertPulse) */
.linked-choice-btn.choice-alert,
.linked-choice-btn.choice-alert:hover{
background:linear-gradient(135deg,#e53935,#b71c1c);
border-color:#b71c1c;
color:#fff;
animation:toggleAlertPulse 1.6s ease-in-out infinite;
}
/* Общее сообщение об ошибке внизу формы, перед кнопкой отправки */
#formError{
margin-top:8px;
font-size:14px;
}
/* Красная рамка вокруг поля/блока с ошибкой — используется
по всему сайту как единый визуальный признак "заполните это" */
.error-field{
border:2px solid #e74c3c !important;
background:#fff6f6;
border-radius:6px;
}
/* Поля описания контроллера ("Опишите подробно, что должен делать
данный контроллер" и "Если контроллер уже куплен, укажите точную
модель" при выборе "Другой") — пока не заполнены, рамка толще и
с красным свечением, чтобы сразу бросалось в глаза */
#description.error-field,
#guideDescription.desc-short,
#guideHintDescription.desc-short,
#drugojcontroller.error-field{
border:3px solid #e74c3c !important;
box-shadow:0 0 0 4px rgba(231,76,60,.25), 0 0 12px rgba(231,76,60,.35);
background:#fff0f0;
border-radius:8px;
animation:requiredFieldPulse 1.5s ease-in-out infinite;
}
/* Пока описание контроллера / точная модель ("Другой") не заполнены,
красная рамка плавно "дышит" — чтобы пользователь точно видел, что
без этого остальные кнопки не откроются. Как только он кликнул в
поле и печатает — рамка перестаёт пульсировать и горит ровно */
@keyframes requiredFieldPulse{
0%, 100%{
box-shadow:0 0 0 4px rgba(231,76,60,.25), 0 0 10px rgba(231,76,60,.35);
background:#fff0f0;
animation-timing-function:steps(10, end);
}
50%{
box-shadow:0 0 0 9px rgba(231,76,60,.10), 0 0 14px rgba(231,76,60,.6);
background:#ffdede;
animation-timing-function:steps(10, end);
}
}
#description.error-field:focus,
#guideDescription.desc-short:focus,
#guideHintDescription.desc-short:focus,
#drugojcontroller.error-field:focus{
animation:none;
}
/* Счётчик символов под этими полями пульсирует вместе с рамкой */
#descriptionCounter.desc-counter-warning,
#guideDescriptionCounter.desc-counter-warning,
#guideHintDescriptionCounter.desc-counter-warning,
#drugojcontrollerCounter.desc-counter-warning{
animation:hintPulse 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
#description.error-field,
#guideDescription.desc-short,
#guideHintDescription.desc-short,
#drugojcontroller.error-field,
#descriptionCounter.desc-counter-warning,
#drugojcontrollerCounter.desc-counter-warning{
animation:none;
}
}
/* Подсказка под полем Email при вводе недопустимых символов —
тоже с зарезервированным местом, чтобы не сдвигать вёрстку */
.email-inline-error{
display:block;
min-height:18px;
visibility:hidden;
color:#c0392b;
font-size:13px;
font-weight:600;
margin:2px 0 8px;
}
.email-inline-error.visible{
visibility:visible;
}
/* Зелёное уведомление "заявка уже отправлена" — появляется
после успешной отправки, пока пользователь не изменит форму */
.send-again-notice{
display:none;
color:#1f6f3d;
background:#eaf7ee;
border:1px solid #2e9f55;
border-radius:8px;
padding:10px 12px;
margin-top:10px;
font-size:14px;
font-weight:600;
text-align:center;
}
.send-again-notice.visible{
display:block;
}
/* =========================
Телефон + Whatsapp/Viber/Telegram —
компактный блок чекбоксов под номером
========================= */
/* =========================
Телефон: код страны + номер
========================= */
.phone-row{ /*Расстояние между полями*/
display:flex;
gap:6px;
align-items:stretch;
position:relative;
}
/* Кастомный выпадающий список кода страны (с картинками
флагов вместо эмодзи — надёжно работает на всех ОС/браузерах) */
.country-select-wrap{
position:relative;
flex:0 0 auto;
}
.country-select-btn{
display:flex;
align-items:center;
gap:5px;
height:100%;
width:100px;
max-width:38vw;
padding:8px 6px;
border:1px solid #ccc;
border-radius:8px;
background:#fff;
color:#222;
font-size:16px;
font-weight:600;
cursor:pointer;
box-sizing:border-box;
white-space:nowrap;
}
.country-select-btn .country-flag-img{
width:22px;
height:16px;
object-fit:cover;
border-radius:2px;
flex-shrink:0;
background:#eee;
}
.country-select-arrow{
margin-left:auto;
font-size:10px;
color:#333;
flex-shrink:0;
}
.country-select-dropdown{
display:none;
position:absolute;
top:calc(100% + 4px);
left:0;
z-index:20;
width:260px;
max-width:80vw;
max-height:320px;
overflow-y:auto;
background:#fff;
border:1px solid #ccc;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,.18);
padding:4px;
}
.country-select-dropdown.open{
display:block;
}
.country-option{
display:flex;
align-items:center;
gap:8px;
padding:8px 10px;
border-radius:6px;
cursor:pointer;
font-size:14px;
}
.country-option:hover,
.country-option:focus{
background:#f1f7f2;
}
.country-option .country-flag-img{
width:22px;
height:16px;
object-fit:cover;
border-radius:2px;
flex-shrink:0;
background:#eee;
}
.country-option-code{
color:#1f6f3d;
font-weight:700;
flex-shrink:0;
min-width:48px;
}
.country-option-name{
color:#333;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.phone-field-wrap{
flex:0 1 200px;
min-width:0;
}
#phoneNumber{
font-size:20px;
font-weight:600;
letter-spacing:0.5px;
}
/* =========================
Галочка "поле заполнено верно" — Имя / Email / Телефон
========================= */
.field-with-check{
position:relative;
z-index:0;
}
.field-with-check input{
padding-right:34px;
position:relative;
z-index:1;
}
/* Приём для отслеживания автозаполнения браузером (Chrome и
другие Chromium-браузеры не всегда шлют событие "input" при
автозаполнении/восстановлении данных формы — без этого
галочка не узнаёт, что поле уже заполнено, пока не сработает
что-то ещё). Как только браузер помечает поле как автозаполненное,
запускается эта анимация — JS слушает её "animationstart" */
@keyframes onFieldAutofill{ from{} to{} }
.field-with-check input:-webkit-autofill{
animation-name:onFieldAutofill;
animation-duration:.001s;
}
/* Позиция left выставляется в JS (positionInlineCheck) сразу
после введённого текста; left ниже — просто безопасное
значение по умолчанию, пока JS ещё не сработал */
.field-valid-check{
position:absolute;
left:10px;
top:50%;
z-index:5;
transform:translateY(-50%) scale(.4);
color:#00e676;
font-size:24px;
font-weight:900;
line-height:1;
text-shadow:0 1px 1px rgba(0,0,0,.15);
opacity:0;
pointer-events:none;
transition:opacity .2s ease, transform .2s ease, left .1s ease;
}
.field-valid-check.visible{
opacity:1;
transform:translateY(-50%) scale(1);
}
/* Блок "Для обратной связи у этого номера есть:" —
появляется под телефоном только после того, как номер
прошёл проверку (см. .messenger-block.visible) */
.messenger-block{
margin:2px 0 12px;
display:none;
box-sizing:border-box;
}
.messenger-block.visible{
display:block;
}
.messenger-question-wrap{
display:inline-flex;
align-items:center;
gap:8px;
background:#ffd6d6;
padding:8px 12px;
border-radius:8px;
margin-bottom:8px;
max-width:100%;
}
.messenger-question{
font-size:17px;
font-weight:700;
color:#000;
}
.messenger-question-check{
color:#00e676;
font-size:20px;
font-weight:900;
line-height:1;
opacity:0;
transform:scale(.4);
transition:opacity .2s ease, transform .2s ease;
}
.messenger-question-check.visible{
opacity:1;
transform:scale(1);
}
.messenger-options{
display:flex;
flex-wrap:wrap;
gap:8px 14px;
align-items:center;
}
.messenger-opt{
display:flex;
align-items:center;
gap:7px;
font-size:15px;
cursor:pointer;
padding:8px 14px 8px 8px;
border-radius:24px;
border:1px solid #e0e0e0;
background:#fafafa;
transition:.2s;
}
.messenger-opt input[type="checkbox"]{
width:15px;
height:15px;
cursor:pointer;
}
/* Иконка — как у кнопок "Поделиться": цветной кружок с SVG,
но приглушённый (серый), пока не отмечен чекбокс */
.messenger-icon{
width:29px;
height:29px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
background:#bdbdbd;
transition:.2s;
}
.messenger-icon svg{
width:17px;
height:17px;
}
.messenger-opt-wa .messenger-icon{ background:#a9d9c0; }
.messenger-opt-vb .messenger-icon{ background:#d3aee0; }
.messenger-opt-tg .messenger-icon{ background:#a7d4ea; }
/* Когда чекбокс отмечен — строка и иконка "оживают" в фирменный цвет */
.messenger-opt:has(input:checked){
border-color:transparent;
color:#fff;
}
.messenger-opt-wa:has(input:checked){ background:#25D366; }
.messenger-opt-vb:has(input:checked){ background:#9a18c9; }
.messenger-opt-tg:has(input:checked){ background:#229ED9; }
.messenger-opt:has(input:checked) .messenger-icon{
background:rgba(255,255,255,.25);
}
/* Резервный вариант для браузеров без поддержки :has() —
дублируем классом через JS */
.messenger-opt.checked-visual{
border-color:transparent;
color:#fff;
}
.messenger-opt-wa.checked-visual{ background:#25D366; }
.messenger-opt-vb.checked-visual{ background:#9a18c9; }
.messenger-opt-tg.checked-visual{ background:#229ED9; }
.messenger-opt.checked-visual .messenger-icon{
background:rgba(255,255,255,.25);
}
/* "Нет" теперь выглядит так же, как Viber/Telegram/WhatsApp —
такая же скруглённая рамка-"таблетка" (раньше здесь были
свои переопределения без рамки и фона — убраны для
единообразия) */
.messenger-opt-none{
color:#777;
}
/* Иначе при отметке "Нет" текст становится белым (как у
WhatsApp/Viber/Telegram), а фон остаётся светлым — надпись
пропадает. Даём "Нет" собственный тёмный фон при отметке. */
.messenger-opt-none:has(input:checked){
background:#6b7280;
}
.messenger-opt-none.checked-visual{
background:#6b7280;
}
/* Пока не отмечен ни один мессенджер и не выбрано «Нет» — такая же
красная «дышащая» рамка, как у поля описания контроллера
(@keyframes requiredFieldPulse), только шире — под весь блок */
.messenger-block.error-field{
border:3px solid #e74c3c !important;
box-shadow:0 0 0 4px rgba(231,76,60,.25), 0 0 12px rgba(231,76,60,.35);
background:#fff0f0;
border-radius:10px;
padding:12px 14px;
animation:requiredFieldPulse 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
.messenger-block.error-field{
animation:none;
}
}
.error-scroll{
animation: shake .25s linear 2;
}
@keyframes shake{
0%{transform:translateX(0);}
25%{transform:translateX(-4px);}
50%{transform:translateX(4px);}
75%{transform:translateX(-4px);}
100%{transform:translateX(0);}
}
.share-box{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:15px;
}
.share-box button{
flex:1;
min-width:160px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:14px;
border:none;
border-radius:12px;
cursor:pointer;
font-size:15px;
font-weight:600;
color:#fff;
background:#2e9f55;
transition:
transform .15s ease,
box-shadow .2s ease,
filter .2s ease,
background .2s ease;
box-shadow:0 4px 12px rgba(0,0,0,.15);
user-select:none;
}
.share-box button:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,.20);
filter:brightness(1.05);
}
.share-box button:active{
transform:scale(.95);
box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.share-box button:focus{
outline:none;
}
.share-menu{
margin-top:12px;
display:flex;
flex-wrap:wrap;
gap:10px;
padding:12px;
background:#e9eff1;
border-radius:14px;
box-shadow:0 8px 24px rgba(0,0,0,.15);
animation:shareShow .25s ease;
}
@keyframes shareShow{
from{
opacity:0;
transform:translateY(-10px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.share-menu button:hover{
background:#e90fcc; /*цвет при выборе кнопок отправить*/
}
/* =========================
Кнопки "Поделиться" (Telegram/WhatsApp/Viber/Email) —
базовые стили + фирменные цвета каждого сервиса
========================= */
.share-btn{
display:flex;
align-items:center;
gap:10px;
flex:1;
min-width:160px;
padding:12px;
border:none;
border-radius:10px;
cursor:pointer;
color:#fff;
font-weight:500;
transition:
transform .15s ease,
box-shadow .2s ease,
filter .2s ease;
}
.share-btn .icon{
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
}
.share-btn svg{
width:20px;
height:20px;
}
/* цвета */
.share-btn.tg{ background:#229ED9; }
.share-btn.wa{ background:#25D366; }
.share-btn.vb{ background:#9a18c9; }
.share-btn.mail{ background:#c21b1b; }
.share-btn:hover{
transform:translateY(-2px);
filter:brightness(1.05);
box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.share-btn:active{
transform:scale(.94);
}
.share-btn:focus{
outline:none;
}
.share-btn{
all: unset;
display:flex;
align-items:center;
gap:10px;
flex:0 1 auto;
min-width:0;
min-width:160px;
padding:12px;
border-radius:10px;
cursor:pointer;
color:#fff;
font-weight:500;
}
.pressed{
transform:scale(.93) !important;
}
#modulesWrap{
transition: all .2s ease;
}
/* ===========================
Кнопка "Дополнительные модули"
=========================== */
.modules-toggle{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 18px;
border:none;
border-radius:12px;
background:linear-gradient(135deg,#2e9f55,#1f6f3d);
color:#fff;
font-size:18px;
font-weight:700;
cursor:pointer;
transition:.25s;
box-shadow:0 6px 18px rgba(0,0,0,.15);
margin-bottom:15px;
}
/* "Тип управления светодиодами" — отдельный (янтарный) цвет,
чтобы визуально отличаться от остальных зелёных кнопок,
так как это подпункт внутри "Светодиоды" */
.led-control-toggle{
background:linear-gradient(135deg,#f2a72e,#c9820f) !important;
}
.modules-toggle:hover{
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(0,0,0,.2);
}
.modules-toggle:active{
transform:scale(.98);
}
/* =========================
Кнопка "Светодиоды..." — красная подсветка,
пока выбран LED, но не указано количество
========================= */
#ledsToggle.toggle-alert,
#tipklychejToggle.toggle-alert,
#modulesToggle.toggle-alert,
#ledControlTypeToggle.toggle-alert,
#displayToggle.toggle-alert,
#controllerToggle.toggle-alert,
#monitoringToggle.toggle-alert,
#diagToggle.toggle-alert{
background:linear-gradient(135deg,#e53935,#b71c1c) !important;
}
#ledsToggle.toggle-alert:hover,
#tipklychejToggle.toggle-alert:hover,
#modulesToggle.toggle-alert:hover,
#ledControlTypeToggle.toggle-alert:hover,
#displayToggle.toggle-alert:hover,
#controllerToggle.toggle-alert:hover,
#monitoringToggle.toggle-alert:hover,
#diagToggle.toggle-alert:hover{
filter:brightness(1.05);
}
/* Плавная пульсация ("дыхание"), пока кнопка красная — вместо
того чтобы раскрываться сама, кнопка сама привлекает внимание,
а открыть раздел и отметить нужный чекбокс — дело пользователя.
Останавливается, как только раздел открыт (.open) — дальше не
мешает. Применяется к тем же 6 кнопкам, что и .toggle-alert выше. */
@keyframes toggleAlertPulse{
0%, 100%{
box-shadow:0 0 0 0 rgba(231,57,53,.55);
animation-timing-function:steps(10, end);
}
50%{
box-shadow:0 0 0 7px rgba(231,57,53,0);
animation-timing-function:steps(10, end);
}
}
#ledsToggle.toggle-alert,
#tipklychejToggle.toggle-alert,
#modulesToggle.toggle-alert,
#ledControlTypeToggle.toggle-alert,
#displayToggle.toggle-alert,
#controllerToggle.toggle-alert,
#monitoringToggle.toggle-alert,
#diagToggle.toggle-alert{
animation:toggleAlertPulse 1.6s ease-in-out infinite;
}
#ledsToggle.toggle-alert.open,
#tipklychejToggle.toggle-alert.open,
#modulesToggle.toggle-alert.open,
#ledControlTypeToggle.toggle-alert.open,
#displayToggle.toggle-alert.open,
#controllerToggle.toggle-alert.open,
#monitoringToggle.toggle-alert.open,
#diagToggle.toggle-alert.open{
animation:none;
}
/* =========================
Индикатор: в меню что-то выбрано
(кроме "Не требуется" / "Нет") — цветное свечение
вокруг кнопки, не конфликтует с красной ошибкой
========================= */
.modules-toggle.has-selection{
box-shadow: 0 0 0 3px #2196f3, 0 2px 6px rgba(33,150,243,.35);
}
.modules-toggle.has-selection.toggle-alert{
/* Ошибка важнее — но синее кольцо остаётся видно снаружи.
Анимация здесь не сработает (ниже те же ID+2 класса —
у ID-селектора выше специфичность больше, чем у трёх
классов тут, независимо от порядка в файле), поэтому
переопределение animation — отдельным ID-блоком ниже. */
box-shadow: 0 0 0 3px #2196f3;
}
/* ID-селекторы — специфичность выше, чем у .modules-toggle.has-
-selection.toggle-alert выше (тоже 3 класса) и выше, чем у общего
#ledsToggle.toggle-alert (ID + 1 класс) — эта пульсация с двумя
кольцами (синее статичное + красное затухающее) корректно
выигрывает у обычной toggleAlertPulse. ledControlTypeToggle и
controllerToggle сюда не входят — has-selection им не назначается. */
#ledsToggle.has-selection.toggle-alert,
#tipklychejToggle.has-selection.toggle-alert,
#modulesToggle.has-selection.toggle-alert,
#displayToggle.has-selection.toggle-alert,
#monitoringToggle.has-selection.toggle-alert{
animation:toggleAlertPulseWithSelection 1.6s ease-in-out infinite;
}
#ledsToggle.has-selection.toggle-alert.open,
#tipklychejToggle.has-selection.toggle-alert.open,
#modulesToggle.has-selection.toggle-alert.open,
#displayToggle.has-selection.toggle-alert.open,
#monitoringToggle.has-selection.toggle-alert.open{
animation:none;
}
@keyframes toggleAlertPulseWithSelection{
0%, 100%{
box-shadow:0 0 0 3px #2196f3, 0 0 0 3px rgba(231,57,53,.55);
animation-timing-function:steps(10, end);
}
50%{
box-shadow:0 0 0 3px #2196f3, 0 0 0 9px rgba(231,57,53,0);
animation-timing-function:steps(10, end);
}
}
/* =========================
"Тип управления светодиодами" — подсвечивается,
когда выбран хотя бы один светодиод с количеством > 0,
но тип управления ещё не указан.
Теперь это отдельная кнопка — подсветка (toggle-alert)
применяется к самой кнопке выше, здесь только компактные
отступы содержимого без сдвига макета.
========================= */
.led-control-opt{
margin:6px 0;
}
/* Кнопка "Пример" рядом с вариантом (bindExampleButtons) — маленькая,
показывает/прячет светодиод-пример справа от себя */
.example-btn{
margin-left:10px;
padding:2px 10px;
font-size:12px;
font-weight:600;
line-height:18px;
background:#fff;
color:#1f6f3d;
border:1.5px solid #1f6f3d;
border-radius:6px;
vertical-align:middle;
}
.example-btn:hover,
.example-btn.active{
background:#1f6f3d;
color:#fff;
}
.example-led{
display:inline-block;
width:14px;
height:14px;
margin-left:8px;
border-radius:50%;
vertical-align:middle;
background:#d9d9d9;
box-shadow:inset 0 -1px 2px rgba(0,0,0,.25);
}
/* "Только ВКЛ/ВЫКЛ" — по кнопке "Пример" оранжевый светодиод
включается (горит), при повторном нажатии выключается (серый) */
.example-led-onoff.on{
background:#fb8c00;
box-shadow:0 0 8px #fb8c00;
}
/* Пример "на дисплее" — мини-экран LCD (кнопка "Пример" у "На дисплее"
в "Индикация состояния связи" и у "На дисплее плавной регулировки
яркости"): появляется по нажатию, подсветка "включается" */
.example-led.example-screen{
display:none;
width:auto;
height:auto;
background:none;
box-shadow:none;
border-radius:0;
}
.example-led.example-screen.on{
display:inline-flex;
max-width:100%;
}
/* Строка "На дисплее плавной регулировки яркости" — flex: пусть кнопка
и экран-пример переносятся, если не помещаются (телефон) */
.led-display-options label{
flex-wrap:wrap;
row-gap:6px;
}
.ex-lcd{
/* цвет подсветки — для молнии поверх батарейки (.lcd-bolt-in) */
--lit:#9ccc3a;
display:inline-flex;
flex-direction:column;
gap:2px;
padding:4px 7px;
border:5px solid #1b1b1b;
border-radius:4px;
font-family:"Courier New", Consolas, monospace;
font-size:13px;
line-height:16px;
font-weight:700;
color:#1d2b0a;
white-space:nowrap;
animation:exLcdPowerOn .5s ease-out both;
}
@keyframes exLcdPowerOn{
from{ background:#2a2f24; }
to{ background:#9ccc3a; }
}
/* В "Дисплей" выбран OLED (updateExampleScreenStyle) — все мини-экраны
так, как на OLED: чёрный фон, голубые светящиеся символы */
body.display-oled .ex-lcd{
--lit:#050a14;
color:#6fd3ff;
text-shadow:0 0 4px rgba(111,211,255,.7);
animation-name:exOledPowerOn;
}
body.display-oled .ex-lcd-pwm{
animation-name:exOledPowerOn, exLcdPwm;
}
@keyframes exOledPowerOn{
from{ background:#000; color:transparent; }
to{ background:#050a14; }
}
body.display-oled .lcd-bolt-in,
body.display-oled .ex-lcd .lcd-bolt-in{
fill:#050a14;
}
.ex-row{
display:flex;
align-items:center;
gap:3px;
height:16px;
}
.ex-ico{
width:12px;
height:14px;
fill:currentColor;
flex-shrink:0;
}
/* Wi-Fi: палочки загораются по очереди — ищет/ловит сигнал */
.ex-wifi rect{
animation:exWifiBar 1.8s step-end infinite;
}
.ex-wifi .b1{ animation-name:exWifiBar1; }
.ex-wifi .b2{ animation-name:exWifiBar2; }
.ex-wifi .b3{ animation-name:exWifiBar3; }
@keyframes exWifiBar1{ 0%{ opacity:1; } }
@keyframes exWifiBar2{ 0%{ opacity:.2; } 33%{ opacity:1; } }
@keyframes exWifiBar3{ 0%{ opacity:.2; } 66%{ opacity:1; } }
/* Плавная регулировка яркости (PWM): подсветка плавно ярче/тусклее,
полоска яркости растёт */
.ex-lcd-pwm{
animation:exLcdPowerOn .5s ease-out both, exLcdPwm 3s ease-in-out .5s infinite alternate;
}
@keyframes exLcdPwm{
from{ filter:brightness(.45); }
to{ filter:brightness(1.05); }
}
.ex-bar{
display:block;
width:12ch;
height:9px;
border:1.5px solid currentColor;
border-radius:2px;
padding:1px;
box-sizing:border-box;
}
.ex-bar > span{
display:block;
height:100%;
width:20%;
background:currentColor;
animation:exBarFill 3s ease-in-out .5s infinite alternate;
}
@keyframes exBarFill{
from{ width:20%; }
to{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
.ex-lcd, .ex-lcd-pwm, .ex-wifi rect, .ex-bar > span{
animation:none;
}
.ex-lcd{ background:#9ccc3a; }
.ex-bar > span{ width:80%; }
}
/* "Диагностика подключения": пример "На дисплее" — маленький экран LCD
со значком пункта (Wi-Fi / MQTT / Virtuino / Internet) в строке
подсказки; пример "Светодиод" — зелёный светодиод состояния связи,
мигает (связь есть, идёт обмен). Перебивает правила 5 светодиодов
уровня заряда (.battery-level-anim i:nth-of-type(1)) */
.ex-lcd-mini{
padding:1px 6px;
border-width:3px;
font-size:12px;
line-height:14px;
vertical-align:middle;
}
.ex-lcd-mini .ex-row{
height:14px;
}
.inline-display-hint .display-battery-anim .ex-lcd-mini{
font-weight:700;
}
.battery-level-anim.diag-led-anim i:nth-of-type(1){
--led:#43a047;
/* Пример светодиода статуса: зелёный, горит ровно (не моргает) */
animation:none;
background:var(--led);
box-shadow:0 0 6px var(--led);
}
@keyframes diagLedBlink{
0%{ background:var(--led); box-shadow:0 0 6px var(--led); }
50%{ background:#d9d9d9; box-shadow:inset 0 -1px 2px rgba(0,0,0,.2); }
60%{ background:var(--led); box-shadow:0 0 6px var(--led); }
70%{ background:#d9d9d9; box-shadow:inset 0 -1px 2px rgba(0,0,0,.2); }
}
/* Пример из нескольких светодиодов — контейнер, сами светодиоды — i */
.example-led.example-group{
display:inline-flex;
flex-wrap:wrap;
align-items:center;
gap:3px;
width:auto;
height:auto;
background:none;
box-shadow:none;
border-radius:0;
}
.example-group i{
width:10px;
height:10px;
border-radius:50%;
background:#d9d9d9;
box-shadow:inset 0 -1px 2px rgba(0,0,0,.25);
}
/* "Частично PWM": 12 светодиодов — первые 4 (каналы с PWM) плавно
меняют яркость, остальные 8 (обычные) — только ВКЛ/ВЫКЛ; между
группами небольшой промежуток */
.example-partial-pwm i:nth-of-type(4){
margin-right:6px;
}
/* «Частично PWM»: 4 светодиода с PWM — тот же «бегущий хвост» туда и обратно (1 → 4 → 1), остальные 8 — только ВКЛ/ВЫКЛ */
@keyframes examplePwmPart1{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
0.00%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
7.05%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
27.27%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
62.50%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
69.55%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
89.77%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-partial-pwm.on i:nth-of-type(1){ animation:examplePwmPart1 4.4s ease-in-out infinite; }
@keyframes examplePwmPart2{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
5.68%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
12.73%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
32.95%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
56.82%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
63.86%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
84.09%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-partial-pwm.on i:nth-of-type(2){ animation:examplePwmPart2 4.4s ease-in-out infinite; }
@keyframes examplePwmPart3{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
11.36%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
18.41%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
38.64%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
51.14%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
58.18%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
78.41%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-partial-pwm.on i:nth-of-type(3){ animation:examplePwmPart3 4.4s ease-in-out infinite; }
@keyframes examplePwmPart4{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
17.05%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
24.09%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
44.32%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
45.45%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
52.50%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
72.73%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-partial-pwm.on i:nth-of-type(4){ animation:examplePwmPart4 4.4s ease-in-out infinite; }
.example-partial-pwm.on i:nth-of-type(n+5){
animation:exampleOnOffBlink 2s step-end infinite;
}
@keyframes examplePwmBreath{
0%, 100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
50%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
}
@keyframes exampleOnOffBlink{
0%{ background:#fb8c00; box-shadow:0 0 6px #fb8c00; }
50%{ background:#d9d9d9; box-shadow:inset 0 -1px 2px rgba(0,0,0,.25); }
}
/* "Полный PWM": 12 светодиодов, каждый на своём PWM-канале — яркость каждого плавно меняется независимо. Пример — «бегущий хвост»: яркий светодиод и за ним затухающий хвост бегут от 1 до 12 и обратно */
/* «Хвост» бежит туда и обратно: 1 → 12, затем 12 → 1 (цикл 5.2 с). Для каждого светодиода
свои keyframes: он разгорается, когда «голова» проходит мимо него вперёд, и ещё раз — назад */
@keyframes examplePwmPP1{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
0.00%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
5.96%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
23.08%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
71.15%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
77.12%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
94.23%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-full-pwm.on i:nth-of-type(1){ animation:examplePwmPP1 5.2s ease-in-out infinite; animation-delay:0s; }
@keyframes examplePwmPP2{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
1.92%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
7.88%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
25.00%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
69.23%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
75.19%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
92.31%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-full-pwm.on i:nth-of-type(2){ animation:examplePwmPP2 5.2s ease-in-out infinite; animation-delay:0s; }
@keyframes examplePwmPP3{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
3.85%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
9.81%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
26.92%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
67.31%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
73.27%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
90.38%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-full-pwm.on i:nth-of-type(3){ animation:examplePwmPP3 5.2s ease-in-out infinite; animation-delay:0s; }
@keyframes examplePwmPP4{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
5.77%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
11.73%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
28.85%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
65.38%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
71.35%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
88.46%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-full-pwm.on i:nth-of-type(4){ animation:examplePwmPP4 5.2s ease-in-out infinite; animation-delay:0s; }
@keyframes examplePwmPP5{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
7.69%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
13.65%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
30.77%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
63.46%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
69.42%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
86.54%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-full-pwm.on i:nth-of-type(5){ animation:examplePwmPP5 5.2s ease-in-out infinite; animation-delay:0s; }
@keyframes examplePwmPP6{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
9.62%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
15.58%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
32.69%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
61.54%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
67.50%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
84.62%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-full-pwm.on i:nth-of-type(6){ animation:examplePwmPP6 5.2s ease-in-out infinite; animation-delay:0s; }
@keyframes examplePwmPP7{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
11.54%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
17.50%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
34.62%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
59.62%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
65.58%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
82.69%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-full-pwm.on i:nth-of-type(7){ animation:examplePwmPP7 5.2s ease-in-out infinite; animation-delay:0s; }
@keyframes examplePwmPP8{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
13.46%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
19.42%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
36.54%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
57.69%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
63.65%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
80.77%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-full-pwm.on i:nth-of-type(8){ animation:examplePwmPP8 5.2s ease-in-out infinite; animation-delay:0s; }
@keyframes examplePwmPP9{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
15.38%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
21.35%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
38.46%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
55.77%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
61.73%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
78.85%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-full-pwm.on i:nth-of-type(9){ animation:examplePwmPP9 5.2s ease-in-out infinite; animation-delay:0s; }
@keyframes examplePwmPP10{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
17.31%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
23.27%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
40.38%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
53.85%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
59.81%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
76.92%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-full-pwm.on i:nth-of-type(10){ animation:examplePwmPP10 5.2s ease-in-out infinite; animation-delay:0s; }
@keyframes examplePwmPP11{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
19.23%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
25.19%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
42.31%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
51.92%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
57.88%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
75.00%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-full-pwm.on i:nth-of-type(11){ animation:examplePwmPP11 5.2s ease-in-out infinite; animation-delay:0s; }
@keyframes examplePwmPP12{
0%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
21.15%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
27.12%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
44.23%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
50.00%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
55.96%{ background:#fb8c00; box-shadow:0 0 7px #fb8c00; }
73.08%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
100%{ background:#fde0bf; box-shadow:0 0 0 rgba(251,140,0,0); }
}
.example-full-pwm.on i:nth-of-type(12){ animation:examplePwmPP12 5.2s ease-in-out infinite; animation-delay:0s; }
@media (prefers-reduced-motion: reduce){
.example-partial-pwm.on i,
.example-full-pwm.on i{
animation:none;
background:#fb8c00;
}
}
.led-pwm-explain{
font-size:12px;
color:#666;
background:#f7f9f7;
border-left:3px solid #cfe3d6;
border-radius:4px;
padding:6px 10px;
margin:0 0 10px 20px;
line-height:1.5;
}
/* =========================
Пункты типов дисплея (LCD1602, LCD1602 I2C, LCD2004,
LCD2004 I2C, OLED) — красная рамка, пока нужен выбор
дисплея. Рамка зарезервирована всегда (прозрачная по
умолчанию), меняется только цвет — без сдвига макета.
========================= */
.display-type-opt{
border:2px solid transparent;
border-radius:6px;
padding:2px 6px;
box-sizing:border-box;
margin:6px 0;
/* Рамка по ширине самого пункта, а не на всю строку */
width:max-content;
max-width:100%;
}
/* Подсказка под кнопкой "Дисплей": что выбрано для показа на дисплее,
можно посмотреть в предпросмотре — видна и при свёрнутой карточке;
нажатие раскрывает "Дисплей" (updateDisplayPreviewInfo) */
.display-preview-info{
display:none;
margin:-6px 0 10px;
padding:6px 10px;
font-size:13px;
line-height:18px;
color:#1f6f3d;
background:#eef8f0;
border:1px solid #b7dfc1;
border-radius:8px;
cursor:pointer;
}
.display-preview-info.visible{
display:block;
}
.display-preview-info:hover{
background:#e2f3e6;
}
/* Предпросмотр дисплея при наведении (initDisplayPreviews): окошко
справа от пункта — фото (если есть в images/) и нарисованный экран:
подсветка "включается", затем печатается приветствие */
.display-type-opt{
position:relative;
}
.display-preview{
display:none;
position:absolute;
left:calc(100% + 10px);
top:50%;
transform:translateY(-50%);
z-index:20;
padding:8px;
background:#fff;
border:1px solid #ccc;
border-radius:8px;
box-shadow:0 6px 18px rgba(0,0,0,.2);
pointer-events:none;
flex-direction:column;
align-items:center;
gap:6px;
}
.display-type-opt:hover .display-preview{
display:flex;
}
.display-preview img{
max-width:180px;
max-height:120px;
border-radius:4px;
}
.display-preview img[hidden]{
display:none;
}
.display-preview-screen{
display:flex;
flex-direction:column;
padding:6px 8px;
border:6px solid #1b1b1b;
border-radius:4px;
font-family:"Courier New", Consolas, monospace;
font-size:14px;
line-height:18px;
font-weight:700;
/* ширина экрана — ровно cols символов */
width:calc(var(--cols) * 1ch + 16px);
box-sizing:content-box;
animation:displayPowerOn .5s ease-out both;
}
/* LCD — зелёно-жёлтая подсветка, тёмные символы */
.display-preview-lcd .display-preview-screen{
--lit:#9ccc3a;
color:#1d2b0a;
}
/* OLED — чёрный экран, светящиеся голубые символы */
.display-preview-oled .display-preview-screen{
--lit:#050a14;
color:#6fd3ff;
text-shadow:0 0 4px rgba(111,211,255,.7);
}
@keyframes displayPowerOn{
from{ background:#2a2f24; }
to{ background:var(--lit); }
}
/* Строка "печатается" по символу (steps по числу символов --n) */
.display-preview-line{
display:block;
width:0;
height:18px;
overflow:hidden;
white-space:pre;
animation:displayTypeLine .9s steps(var(--n, 8)) forwards;
}
@keyframes displayTypeLine{
to{ width:calc(var(--n, 8) * 1ch); }
}
/* Вторая строка экрана — значки пунктов "Мониторинг параметров" с
"На дисплее" (⚡ 12.0V, батарея 80%, батарея с молнией 80%), цветом
символов этого экрана; появляются плавно, без "печати" */
/* Размер экрана не меняется: строка значков ровно на ширину экрана
(--cols символов), без переноса; не помещаются — бегущая строка
(.icons-scroll, --over-px измеряется при наведении) */
.display-preview-line.icons{
display:block;
width:calc(var(--cols) * 1ch);
height:18px;
overflow:hidden;
white-space:nowrap;
animation:displayIconsIn .6s ease-out both;
animation-delay:1.2s;
}
.icons-inner{
display:inline-flex;
align-items:center;
gap:1.2ch;
height:18px;
}
.display-preview-line.icons-scroll .icons-inner{
animation:displayMarqueePx linear infinite alternate both;
animation-delay:1.8s;
}
@keyframes displayMarqueePx{
0%, 15%{ transform:translateX(0); }
85%, 100%{ transform:translateX(calc(var(--over-px) * -1px)); }
}
@keyframes displayIconsIn{
from{ opacity:0; }
to{ opacity:1; }
}
.lcd-icon{
display:inline-flex;
align-items:center;
gap:.4ch;
}
.lcd-bolt{
width:9px;
height:14px;
fill:currentColor;
}
.lcd-battery{
position:relative;
display:inline-block;
width:20px;
height:10px;
padding:1px;
border:2px solid currentColor;
border-radius:2px;
box-sizing:border-box;
margin-right:3px;
}
.lcd-battery::after{
content:"";
position:absolute;
top:1px;
right:-4px;
width:2px;
height:4px;
background:currentColor;
}
.lcd-battery > span{
display:block;
width:80%;
height:100%;
background:currentColor;
opacity:.85;
}
/* Молния поверх батареи (заряд) — цветом фона экрана, чтобы была видна */
.lcd-bolt-in{
position:absolute;
left:50%;
top:50%;
width:7px;
height:11px;
transform:translate(-50%, -50%);
fill:var(--lit);
}
/* Строка длиннее экрана ("Привет! <длинное имя>"): после печати видимой
части плавно уезжает влево на лишние --over символов и обратно */
.display-preview-line.scroll span{
display:inline-block;
animation:displayMarquee linear infinite alternate both;
}
@keyframes displayMarquee{
0%, 15%{ transform:translateX(0); }
85%, 100%{ transform:translateX(calc(var(--over) * -1ch)); }
}
/* "Контроллер": в каждой строке — [радио] [фото] название + пояснение.
Нет фото — миниатюры нет, остальное на месте */
.controller-opt{
display:flex;
align-items:center;
gap:10px;
padding:6px 8px;
border-radius:8px;
cursor:pointer;
}
.controller-opt:hover{
background:rgba(0,0,0,.04);
}
.controller-opt input{
flex:0 0 auto;
margin:0;
}
.controller-thumb{
flex:0 0 auto;
width:64px;
height:64px;
object-fit:contain;
background:#fff;
border:1px solid #ddd;
border-radius:6px;
}
.controller-thumb[hidden]{
display:none;
}
.controller-text{
flex:1 1 auto;
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
}
.controller-name{
font-weight:600;
}
.controller-info{
font-size:.82em;
line-height:1.35;
color:#666;
overflow-wrap:anywhere;
}
.controller-info[hidden]{
display:none;
}
/* Объяснение для тех, кто не знает, какой контроллер нужен */
.controller-help{
margin:0 0 12px;
padding:10px 12px;
background:#eef6ff;
border:1px solid #b9d7f5;
border-radius:8px;
color:#1d3f63;
}
.controller-help summary{
cursor:pointer;
font-weight:700;
}
.controller-help-body p{
margin:8px 0 0;
font-size:.92em;
line-height:1.45;
}
/* На телефоне окошко — под пунктом, а не справа */
@media (max-width:480px){
.display-preview{
left:0;
top:calc(100% + 6px);
transform:none;
}
}
@media (prefers-reduced-motion: reduce){
.display-preview-screen{ animation:none; background:var(--lit); }
.display-preview-line{ animation:none; width:auto; }
.display-preview-line.scroll{ width:calc(var(--n) * 1ch); }
.display-preview-line.scroll span{ animation:none; }
}
.display-type-opt.needs-selection{
border-color:#e74c3c;
background:#fff6f6;
}
.display-type-opt:has(input:disabled){
opacity:.5;
}
#zummerWrap label:has(input:disabled){
opacity:.5;
}
/* =========================
"+Добавить модуль" и сама строка модуля —
красным, пока модуль не выбран из списка
========================= */
button[onclick*="addCustomModule"].module-add-alert{
background:linear-gradient(135deg,#e53935,#b71c1c) !important;
color:#fff;
}
.custom-module.module-error{
background:#fff0f0;
border:1px solid #e74c3c;
border-radius:6px;
padding:6px;
}
/* Счётчик символов для описания модуля "Другой" */
.module-desc-counter{
display:block;
font-size:12px;
color:#666;
margin:2px 0 6px;
}
.module-desc-counter.desc-counter-warning{
color:#c0392b;
font-weight:600;
}
/* =========================
Ховер как у кнопки "Копировать ссылку"
для: Переключатель Arduino⇄ESP,
Отправить заявку, +Добавить модуль
(размеры этих кнопок не меняются)
========================= */
#switchFamilyBtn:hover,
#sendBtn:not(:disabled):hover,
button[onclick*="addCustomModule"]:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,.20);
filter:brightness(1.05);
}
#switchFamilyBtn:active,
#sendBtn:not(:disabled):active,
button[onclick*="addCustomModule"]:active{
transform:scale(.95);
box-shadow:0 2px 8px rgba(0,0,0,.15);
}
#modulesArrow{
transition:.25s;
font-size:20px;
}
.modules-toggle.open #modulesArrow{
transform:rotate(180deg);
}
#ledsArrow{
transition:.25s;
font-size:20px;
}
.modules-toggle.open #ledsArrow{
transform:rotate(180deg);
}
#stateArrow{
transition:.25s;
font-size:20px;
}
.modules-toggle.open #stateArrow{
transform:rotate(180deg);
}
#modulesWrap{
display:none;
animation:showModules .25s ease;
}
#ledsWrap{
display:none;
animation:showModules .25s ease;
}
#stateWrap{
display:none;
animation:showModules .25s ease;
}
/* Универсальные стрелка / раскрытие для остальных
сворачиваемых карточек (Дисплей, Тип силовых ключей,
Мониторинг параметров, Зуммер, Автозапуск,
Расписание, RTC, Защита системы) */
.modules-toggle [id$="Arrow"]{
transition:.25s;
font-size:20px;
}
.modules-toggle.open [id$="Arrow"]{
transform:rotate(180deg);
}
[id$="Wrap"]{
display:none;
animation:showModules .25s ease;
}
@keyframes showModules{
from{
opacity:0;
transform:translateY(-10px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* =========================
ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКОВ
========================= */
.lang-switch{
display:flex;
justify-content:center;
gap:12px;
margin:15px auto 25px;
flex-wrap:wrap;
}
.lang-btn{
border:3px solid transparent;
padding:10px 18px;
border-radius:30px;
font-size:15px;
font-weight:700;
cursor:pointer;
transition:.25s;
color:#fff;
min-width:150px;
box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.lang-btn:hover{
transform:translateY(-2px);
}
.lang-btn:active{
transform:scale(.95);
}
/* Русский */
.lang-btn.ru{
background:#9bedf0 url("https://flagcdn.com/w40/ru.png") no-repeat 12px center;
background-size:28px;
color:#000;
padding-left:52px;
}
/* Polski */
.lang-btn.pl{
background:#9bedf0 url("https://flagcdn.com/w40/pl.png") no-repeat 12px center;
background-size:28px;
color:#000;
padding-left:52px;
}
/* English — флаг Великобритании (раньше здесь ошибочно
стоял флаг Евросоюза eu.png, а не Англии) */
.lang-btn.en{
background:#9bedf0 url("https://flagcdn.com/w40/gb.png") no-repeat 12px center;
background-size:28px;
color:#000;
padding-left:52px;
}
/* Deutsch */
.lang-btn.de{
background:#9bedf0 url("https://flagcdn.com/w40/de.png") no-repeat 12px center;
background-size:28px;
color:#000;
padding-left:52px;
}
.lang-btn.active{
transform:scale(1.08);
border:3px solid #ee0db6 !important;
box-shadow:
0 0 0 6px rgba(204, 46, 133, 0.4),
0 8px 20px rgba(0,0,0,.35);
filter:brightness(1.15);
}
/* =========================================================
ЭКРАН ВЫБОРА ЯЗЫКА (матовое стекло)
Пока язык не выбран, носит класс "lang-locked":
- весь сайт (шапка, интро, форма, итоговая панель) виден
сквозь блюр и не кликабелен;
- поверх всего — #langGate, полноэкранный оверлей с 4
кнопками языка сеткой 2×2 по центру экрана;
- постоянный переключатель языка в шапке (.lang-switch-header)
в это время скрыт — на экране только эти 4 кнопки.
После выбора языка (chooseLanguage() в js/script.js) класс
"lang-locked" снимается: оверлей прячется, сайт открывается,
а в шапке появляется постоянный переключатель — им можно
поменять язык в любой момент позже, в рамках этой же загрузки
страницы. Ничего не запоминается — при каждой новой загрузке
или перезагрузке страницы оверлей выбора языка появляется снова.
Всё на fixed-позиционировании и относительных величинах —
одинаково работает на телефоне, планшете, десктопе, на
большом и маленьком экране.
========================================================= */
body.lang-locked{
overflow:hidden;
}
body.lang-locked > header,
body.lang-locked > section.guide,
body.lang-locked > section.intro,
body.lang-locked > .container,
body.lang-locked > .total{
filter:blur(9px) saturate(1.05);
pointer-events:none;
user-select:none;
transition:filter .4s ease;
}
/* Постоянный переключатель в шапке — виден только когда сайт
уже открыт (язык выбран); пока идёт выбор, эти кнопки скрыты,
чтобы на экране были только 4 кнопки оверлея */
.lang-switch-header{
display:none;
}
body:not(.lang-locked) .lang-switch-header{
display:flex;
}
/* Полноэкранный оверлей выбора языка */
.lang-gate{
position:fixed;
inset:0;
z-index:10000;
display:flex;
align-items:center;
justify-content:center;
padding:24px 16px;
background:rgba(238,245,240,.6);
-webkit-backdrop-filter:blur(3px);
backdrop-filter:blur(3px);
box-sizing:border-box;
}
body:not(.lang-locked) .lang-gate{
display:none;
}
.lang-gate-card{
width:100%;
max-width:380px;
background:rgba(255,255,255,.94);
border-radius:24px;
padding:32px 28px;
text-align:center;
box-shadow:0 20px 60px rgba(0,0,0,.3);
box-sizing:border-box;
}
.lang-gate-hint{
color:#3a3a38;
font-size:15px;
font-weight:600;
margin:0 0 22px;
line-height:1.6;
}
/* 4 кнопки сеткой 2×2: две сверху, две снизу */
.lang-switch-gate{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:14px;
margin:0;
}
.lang-switch-gate .lang-btn{
min-width:0;
width:100%;
padding-left:44px;
box-sizing:border-box;
}
/* Очень маленький экран — сетка остаётся 2×2, но кнопки и
отступы компактнее, чтобы всё помещалось без прокрутки */
@media (max-width:360px){
.lang-gate-card{
padding:24px 16px;
border-radius:18px;
}
.lang-switch-gate{
gap:10px;
}
.lang-switch-gate .lang-btn{
font-size:13px;
padding:10px 8px 10px 40px;
background-size:22px;
background-position:8px center;
}
}
.required{
color:red;
font-weight:bold;
}
.send-info{
margin-top:10px;
min-height:22px;
text-align:center;
font-size:15px;
font-weight:600;
color:#d32f2f;
}
/* ==========================
Уведомление об обновлении цен
========================== */
.price-toast{
position:fixed;
right:25px;
bottom:25px;
background:#2ecc71;
color:#fff;
padding:14px 22px;
border-radius:12px;
font-size:15px;
font-weight:600;
box-shadow:0 10px 30px rgba(0,0,0,.25);
opacity:0;
transform:translateY(30px);
transition:.35s;
z-index:99999;
pointer-events:none;
}
.price-toast.show{
opacity:1;
transform:translateY(0);
}
/* Увеличение фото контроллера: наведение (компьютер) и просмотр на весь
экран (телефон / планшет) */
.controller-thumb{ cursor:zoom-in; }
.controller-zoom{
position:fixed;
z-index:1000;
padding:6px;
background:#fff;
border:1px solid #bbb;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,.35);
pointer-events:none;
}
.controller-zoom[hidden]{ display:none; }
.controller-zoom img{ display:block; border-radius:6px; }
.controller-lightbox{
position:fixed;
inset:0;
z-index:2000;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:12px;
padding:16px;
background:rgba(0,0,0,.82);
cursor:zoom-out;
}
.controller-lightbox[hidden]{ display:none; }
.controller-lightbox img{
max-width:94vw;
max-height:78vh;
background:#fff;
border-radius:10px;
object-fit:contain;
}
.controller-lightbox-caption{
color:#fff;
font-weight:700;
font-size:1.05em;
text-align:center;
}
/* Стартовый экран выбора языка: розовая рамка — вокруг призыва
«Выберите язык / Wybierz język / …», ни один язык заранее не
выбран. Нажатая кнопка получает такую же рамку (.picked), затем
экран плавно уходит и открывается сайт на этом языке */
.lang-gate-hint{
border:3px solid #ee0db6;
border-radius:16px;
padding:12px 14px;
box-shadow:0 0 0 6px rgba(204,46,133,.4);
margin:6px 6px 28px;
}
/* Пока идёт выбор, «активный» язык по умолчанию (ru) не подсвечиваем —
подсвечена только нажатая кнопка */
body.lang-locked .lang-switch-gate .lang-btn.active:not(.picked){
transform:none;
border:3px solid transparent !important;
box-shadow:0 4px 12px rgba(0,0,0,.15);
filter:none;
}
.lang-switch-gate .lang-btn.picked{
transform:scale(1.08);
border:3px solid #ee0db6 !important;
box-shadow:0 0 0 6px rgba(204,46,133,.4), 0 8px 20px rgba(0,0,0,.35);
filter:brightness(1.15);
}
/* Остальные кнопки после выбора притухают и не нажимаются */
.lang-gate.picking .lang-btn:not(.picked){
opacity:.45;
pointer-events:none;
}
.lang-gate.picking .lang-gate-hint{
opacity:.6;
transition:opacity .3s ease;
}
/* Плавное исчезновение экрана поверх уже открывшегося сайта */
body:not(.lang-locked) .lang-gate.leaving{
display:flex;
pointer-events:none;
animation:langGateFadeOut .45s ease forwards;
}
@keyframes langGateFadeOut{
from{ opacity:1; }
to{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
body:not(.lang-locked) .lang-gate.leaving{
animation-duration:.01s;
}
}
/* Все обязательные поля ввода (Имя, Email, Телефон, описания и т.д.) и
рамка карточки «Контроллер»: пока данные не введены правильно, красная
рамка такая же толстая, со свечением и «дышит» — как у поля описания
контроллера. Когда пользователь печатает в поле (фокус), пульсация
останавливается, и рамка горит ровно; исчезает она сама, как только
данные верные */
input.error-field:not([type="checkbox"]):not([type="radio"]),
textarea.error-field,
select.error-field{
border:3px solid #e74c3c !important;
box-shadow:0 0 0 4px rgba(231,76,60,.25), 0 0 12px rgba(231,76,60,.35);
background:#fff0f0;
border-radius:8px;
animation:requiredFieldPulse 1.5s ease-in-out infinite;
}
input.error-field:not([type="checkbox"]):not([type="radio"]):focus,
textarea.error-field:focus,
select.error-field:focus{
animation:none;
}
@keyframes requiredFrameGlow{
0%, 100%{
box-shadow:0 0 0 3px rgba(231,76,60,.25), 0 0 8px rgba(231,76,60,.35);
animation-timing-function:steps(10, end);
}
50%{
box-shadow:0 0 0 9px rgba(231,76,60,.10), 0 0 14px rgba(231,76,60,.65);
animation-timing-function:steps(10, end);
}
}
#cardController.error-field{
border:3px solid #e74c3c !important;
border-radius:12px;
box-shadow:0 0 0 3px rgba(231,76,60,.25), 0 0 10px rgba(231,76,60,.35);
animation:requiredFrameGlow 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
input.error-field:not([type="checkbox"]):not([type="radio"]),
textarea.error-field,
select.error-field,
#cardController.error-field{
animation:none;
}
}
/* ###################################################################
ГИД ДЛЯ НОВИЧКА + ЖИВЫЕ ПРИМЕРЫ (перенесено из проекта «Вам сюда, если»)
################################################################### */
/* =========================================================
ГИД ДЛЯ НОВИЧКА — вступительный блок перед формой: "вам
сюда, если...", подбор платы по простым вопросам, и живой
конструктор "отметьте функции — увидите, что получится".
Адаптивен: телефон/планшет — один столбец на всю ширину,
десктоп/широкий монитор — вписывается в тот же компактный
контейнер, что и остальная форма (680px, см. @media ниже).
========================================================= */
.guide{
max-width:900px;
margin:20px auto;
padding:20px;
background:#fff;
border-radius:12px;
box-shadow:0 2px 6px rgba(0,0,0,.1);
position:relative;
z-index:1;
}
.guide-block{
margin-bottom:24px;
}
.guide-block:last-of-type{
margin-bottom:0;
}
.guide-h{
color:#1f6f3d;
font-size:19px;
margin:0 0 10px;
}
.guide-h3{
color:#1f6f3d;
font-size:16px;
margin:16px 0 8px;
}
.guide-text{
font-size:14px;
line-height:1.6;
color:#333;
margin:0;
}
/* Три вопроса для подбора платы + блок с рекомендацией */
.guide-questions{
display:flex;
flex-direction:column;
gap:8px;
margin:10px 0;
}
.guide-question{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
cursor:pointer;
}
.guide-board-box{
display:flex;
gap:10px;
align-items:flex-start;
background:#eef5f0;
border-radius:8px;
padding:12px 14px;
margin-top:10px;
}
.guide-board-icon{
font-size:22px;
line-height:1;
}
.guide-board-name{
font-weight:700;
font-size:14px;
color:#1f6f3d;
}
.guide-board-reason{
font-size:13px;
color:#555;
margin-top:2px;
}
/* Сетка функций — компактные "таблетки" с чекбоксом, как в
остальной форме (messenger-opt). На телефоне — по одной
в ряд, на широком экране — несколько колонок */
.guide-parts{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
gap:8px;
margin:10px 0;
}
.guide-chip{
display:flex;
align-items:center;
gap:6px;
background:#fafafa;
border:1px solid #e0e0e0;
border-radius:20px;
padding:8px 12px;
font-size:13px;
cursor:pointer;
transition:.2s;
}
.guide-chip:has(input:checked){
background:#1f6f3d;
border-color:#1f6f3d;
color:#fff;
}
/* Появляется только при выборе "Реле / силовой выход" —
уточнение, какой именно прибор подключён (насос полива,
котёл, вентилятор, розетка) */
.guide-relay-pick{
margin-top:10px;
padding:10px 12px;
background:#eef5f0;
border-radius:8px;
}
.guide-relay-label{
font-weight:600;
color:#1f6f3d;
margin-bottom:8px !important;
}
.guide-relay-options{
margin:0;
}
/* Появляется только при выборе "Дисплей" — какой именно
экран ставим (LCD1602 / LCD2004 / OLED) */
.guide-display-pick{
margin-top:10px;
padding:10px 12px;
background:#eef5f0;
border-radius:8px;
}
/* =========================================================
Схема устройства: "Что запускает -> Плата -> Что делает",
ниже строка "Надёжность" и одно предложение-итог. Никакой
анимации и моргания — каждый отмеченный пункт просто
становится плиткой в своём столбце, поэтому даже если
отметить ВСЁ, картина остаётся спокойной и читаемой.
На телефоне столбцы встают друг под другом (стрелки вниз).
========================================================= */
.guide-scheme{
display:flex;
align-items:stretch;
gap:8px;
margin:14px 0 10px;
}
.guide-scheme-col{
flex:1 1 0;
min-width:0;
background:#eef5f0;
border-radius:12px;
padding:12px;
box-sizing:border-box;
}
/* Центральный столбец с платой выделен рамкой — это "сердце" схемы */
.guide-scheme-center{
background:#fff;
border:2px solid #1f6f3d;
}
.guide-scheme-arrow{
align-self:center;
flex:0 0 auto;
color:#1f6f3d;
font-size:20px;
}
.guide-scheme-title{
font-size:12px;
font-weight:700;
color:#1f6f3d;
}
.guide-scheme-subtitle{
margin-top:12px;
}
.guide-scheme-board{
margin-top:8px;
padding:8px;
border-radius:8px;
background:#eef5f0;
color:#1f6f3d;
font-weight:700;
font-size:14px;
text-align:center;
}
.guide-scheme-items{
display:flex;
flex-direction:column;
gap:6px;
margin-top:8px;
}
.guide-scheme-items-row{
flex-direction:row;
flex-wrap:wrap;
}
.guide-scheme-chip{
background:#fff;
border-radius:8px;
padding:6px 8px;
font-size:13px;
line-height:1.3;
box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.guide-scheme-center .guide-scheme-chip{
background:#eef5f0;
box-shadow:none;
}
.guide-scheme-empty{
font-size:13px;
color:#9aa59d;
}
/* Строка "Надёжность": автообновление, автозапуск, защита */
.guide-scheme-safe{
background:#eef5f0;
border-radius:12px;
padding:12px;
margin-bottom:10px;
}
.guide-scheme-safe .guide-scheme-chip{
background:#fff;
}
/* Одно предложение простыми словами — что получится в итоге */
.guide-summary{
font-size:14px;
line-height:1.6;
color:#1f4d2f;
background:#fff;
border:1px solid #cfe3d6;
border-radius:8px;
padding:10px 12px;
margin:0 0 10px;
}
.guide-details summary{
cursor:pointer;
font-size:13px;
font-weight:600;
color:#1f6f3d;
margin:8px 0;
}
/* Макет дисплея внутри столбца "Что делает". Внешний вид
зависит от типа: LCD1602/LCD2004 — зелёное ЖК-стекло,
OLED — чёрный экран. Показания статичные, без смены кадров. */
.guide-display-mini{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
background:#fff;
border-radius:8px;
padding:8px;
box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.guide-display-panel{
display:flex;
flex-direction:column;
gap:3px;
width:100%;
border-radius:3px;
padding:8px 10px;
box-sizing:border-box;
}
.guide-display-line{
white-space:pre;
overflow:hidden;
font-family:'Courier New',monospace;
font-size:12px;
letter-spacing:.5px;
}
/* LCD1602 / LCD2004 — зеленоватое подсвеченное стекло,
тёмно-зелёные буквы */
.guide-display-lcd{
background:#8fd48a;
box-shadow:inset 0 0 0 2px #5fa35b, inset 0 2px 6px rgba(0,0,0,.15);
}
.guide-display-lcd .guide-display-line{
color:#1b3d1a;
font-weight:700;
}
/* OLED — чёрный фон, чёткий голубой текст */
.guide-display-oled{
background:#0a0a0a;
box-shadow:inset 0 0 0 2px #2a2a2a;
}
.guide-display-oled .guide-display-line{
color:#6fe3ff;
}
.guide-display-hint{
font-size:11px;
color:#888;
}
/* На узких экранах столбцы встают друг под другом, стрелки — вниз */
@media (max-width:700px){
.guide-scheme{
flex-direction:column;
}
.guide-scheme-arrow{
transform:rotate(90deg);
}
}
/* Список "что умеет устройство" — заполняется по мере выбора */
.guide-capabilities{
display:flex;
flex-direction:column;
gap:6px;
}
.guide-cap-row{
display:flex;
align-items:center;
gap:8px;
background:#eef5f0;
border-radius:8px;
padding:8px 10px;
font-size:13px;
color:#1f6f3d;
}
.guide-cap-empty{
font-size:13px;
color:#888;
}
.guide-cta{
text-align:center;
font-weight:600;
color:#1f6f3d;
padding-top:4px;
border-top:1px solid #eee;
margin-top:20px !important;
padding-top:16px;
}
/* На узких экранах — чуть меньше внешних отступов, чтобы
карточка гида смотрелась так же компактно, как остальные */
@media (max-width:600px){
.guide{
margin:10px;
padding:15px;
}
.guide-parts{
grid-template-columns:1fr;
}
}
/* =========================================================
ГИД: ЖИВЫЕ ПРИМЕРЫ (ворота, котёл, полив, свет у двери)
Вкладки сверху; в каждой вкладке слева "сцена" (SVG), справа
панель управления: "У дома" (кнопки/ползунки) и "Телефон"
(сообщения + кнопка). Всё меняется только по нажатию —
никакого автозапуска и моргания. Ворота/лампа плавно
двигаются один раз (CSS-переход), потом стоят на месте.
На телефоне панель управления уходит под сцену.
========================================================= */
.demo-tabs{
display:flex;
flex-wrap:wrap;
gap:6px;
margin:12px 0;
}
.demo-tab{
background:#fafafa;
color:#333;
border:1px solid #e0e0e0;
border-radius:20px;
padding:8px 14px;
font-size:13px;
}
.demo-tab.active{
background:#1f6f3d;
border-color:#1f6f3d;
color:#fff;
}
.demo-panel{
display:grid;
grid-template-columns:minmax(0,1fr) 230px;
gap:12px;
align-items:start;
}
/* Атрибут hidden должен реально скрывать панель, несмотря на display:grid */
.demo-panel[hidden]{
display:none;
}
.demo-panel-own{
grid-template-columns:1fr;
}
.demo-stage{
background:#eef5f0;
border-radius:12px;
padding:10px;
}
.demo-svg{
display:block;
width:100%;
height:auto;
background:#f4faf6;
border-radius:10px;
font-family:Arial,sans-serif;
}
/* Текст "что сейчас происходит" под сценой */
.demo-status{
margin:10px 2px 2px;
min-height:42px;
font-size:14px;
font-weight:600;
line-height:1.4;
color:#1f4d2f;
}
.demo-side{
display:flex;
flex-direction:column;
gap:10px;
}
.demo-box{
background:#eef5f0;
border-radius:12px;
padding:10px;
}
.demo-box-title{
font-size:12px;
font-weight:700;
color:#1f6f3d;
margin-bottom:8px;
}
.demo-btn{
display:block;
width:100%;
background:#2e9f55;
color:#fff;
border:none;
border-radius:8px;
padding:10px 12px;
font-size:14px;
margin-top:8px;
cursor:pointer;
}
.demo-btn:hover{
background:#256f3e;
}
.demo-btn-inline{
width:auto;
margin-top:0;
}
.demo-field{
display:block;
font-size:13px;
margin:10px 0 2px;
}
.demo-hint{
color:#777;
font-size:11px;
}
.demo-box input[type="range"]{
width:100%;
}
.demo-check,
.demo-radio{
display:flex;
align-items:center;
gap:6px;
font-size:13px;
margin:6px 0;
}
/* "Телефон": рамка как у смартфона, внутри — последние сообщения */
.demo-phone{
background:#fff;
border:2px solid #333;
border-radius:18px;
}
.demo-phone-screen{
display:flex;
flex-direction:column;
gap:4px;
min-height:92px;
padding:6px;
background:#f1f5f2;
border-radius:8px;
}
.demo-msg{
background:#fff;
border-left:3px solid #2e9f55;
border-radius:4px;
padding:5px 7px;
font-size:12px;
line-height:1.35;
}
.demo-msg-empty{
border-left-color:#ccc;
color:#999;
}
/* Вкладка "Мой вариант": список других идей */
.demo-own-list{
display:flex;
flex-wrap:wrap;
gap:6px;
margin:10px 0;
}
.demo-own-chip{
background:#fff;
border:1px solid #cfe3d6;
border-radius:20px;
padding:6px 12px;
font-size:13px;
}
.demo-more{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:10px;
margin-top:12px;
padding:10px 12px;
background:#fff;
border:1px solid #cfe3d6;
border-radius:8px;
font-size:14px;
}
/* ---------- Общие части сцен: сигнальная лампа ---------- */
.demo-svg .lamp{
fill:#9aa59d;
stroke:#555;
stroke-width:1.5;
transition:fill .25s;
}
.demo-svg .lamp-halo{
fill:#f2a72e;
opacity:0;
transition:opacity .25s;
}
.demo-svg.lamp-on .lamp{ fill:#f2a72e; }
.demo-svg.lamp-on .lamp-halo{ opacity:.35; }
/* ---------- Ворота / шлагбаум ---------- */
.demo-svg.is-barrier .slide-only{ display:none; }
.demo-svg.is-slide .barrier-only{ display:none; }
.demo-svg .wall-dot{
fill:#c0392b;
transition:fill .2s;
}
.demo-svg .wall-dot.pressed{ fill:#27ae60; }
/* Стрела шлагбаума поворачивается вокруг левого края */
.demo-svg .arm{
transform-box:fill-box;
transform-origin:0 50%;
transition:transform .9s ease;
}
.demo-svg.is-open .arm{ transform:rotate(-70deg); }
/* Створка откатных ворот уезжает вправо к забору */
.demo-svg .panel{
transition:transform .9s ease;
}
.demo-svg.is-open .panel{ transform:translateX(75px); }
/* ---------- Котёл ---------- */
.demo-svg .rad{
fill:#e8efe9;
stroke:#8aa391;
transition:fill .3s;
}
.demo-svg .pipe{
fill:none;
stroke:#b8c4bb;
stroke-width:6;
transition:stroke .3s;
}
.demo-svg .flame{
opacity:0;
transition:opacity .25s;
}
.demo-svg.boiler-on .rad{ fill:#f5b78a; }
.demo-svg.boiler-on .pipe{ stroke:#e67e22; }
.demo-svg.boiler-on .flame{ opacity:1; }
/* ---------- Автополив ---------- */
.demo-svg .hose{
fill:none;
stroke:#9fb3c4;
stroke-width:5;
transition:stroke .3s;
}
.demo-svg .pump{ transition:fill .3s; }
.demo-svg .drops{
opacity:0;
transition:opacity .25s;
}
.demo-svg.water-on .hose{ stroke:#2874a6; }
.demo-svg.water-on .pump{ fill:#d6eaf8; }
.demo-svg.water-on .drops{ opacity:1; }
/* ---------- Свет у двери ---------- */
.demo-svg .night{
opacity:0;
transition:opacity .4s;
}
.demo-svg.is-night .night{ opacity:.6; }
.demo-svg .light-cone{
fill:#f2a72e;
opacity:0;
transition:opacity .25s;
}
.demo-svg.lamp-on .light-cone{ opacity:.28; }
.demo-svg .person{
transition:transform .8s ease;
}
.demo-svg.person-near .person{ transform:translateX(200px); }
@media (max-width:700px){
.demo-panel{
grid-template-columns:1fr;
}
}
/* =========================================================
ГИД: расширение живых примеров (вкладки по группам, гараж,
калитка, вентиляция, протечка, теплица, расписание) и
вкладка "Мой вариант" (разбор описания человека).
Всё меняется только по нажатию кнопок и движению ползунков.
========================================================= */
/* ---------- Вкладки по группам ---------- */
.demo-tabs{
display:block;
}
.demo-tab-row{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
margin-bottom:6px;
}
.demo-tab-group{
flex:0 0 104px;
font-size:11px;
font-weight:700;
color:#6b7d70;
}
@media (max-width:700px){
.demo-tab-group{
flex-basis:100%;
}
}
/* ---------- Гараж ---------- */
.demo-svg .gdoor{
transition:transform .9s ease;
}
.demo-svg.is-open .gdoor{
transform:translateY(-68px);
}
/* ---------- Калитка ---------- */
.demo-svg .wleaf{
transform-box:fill-box;
transform-origin:0 50%;
transition:transform .6s ease;
}
.demo-svg.is-open .wleaf{
transform:scaleX(.16);
}
.demo-svg .bell{
fill:#c0392b;
transition:fill .2s;
}
.demo-svg .bell.pressed{
fill:#27ae60;
}
/* ---------- Вентиляция ---------- */
@keyframes demoSpin{
to{ transform:rotate(360deg); }
}
.demo-svg .fan{
transform-box:fill-box;
transform-origin:center;
}
/* Вентилятор вращается только пока включён — состояние, а не мерцание */
.demo-svg.vent-on .fan{
animation:demoSpin 1.4s linear infinite;
}
.demo-svg .air{
opacity:0;
transition:opacity .25s;
}
.demo-svg.vent-on .air{
opacity:1;
}
/* ---------- Протечка ---------- */
.demo-svg .wpipe{
fill:none;
stroke:#2874a6;
stroke-width:8;
transition:stroke .3s;
}
.demo-svg.valve-closed .wpipe-out{
stroke:#b8c4bb;
}
.demo-svg .vhandle{
transform-box:fill-box;
transform-origin:50% 100%;
transition:transform .4s ease;
}
.demo-svg.valve-closed .vhandle{
transform:rotate(90deg);
}
.demo-svg .puddle{
opacity:0;
transform-box:fill-box;
transform-origin:center;
transform:scale(.2);
transition:opacity .4s, transform .6s ease;
}
.demo-svg.is-wet .puddle{
opacity:.8;
transform:scale(1);
}
.demo-svg .drip,
.demo-svg .alarm{
opacity:0;
transition:opacity .25s;
}
.demo-svg.is-wet .drip,
.demo-svg.is-wet .alarm{
opacity:1;
}
/* ---------- Теплица ---------- */
.demo-svg .snow{
opacity:0;
transition:opacity .3s;
}
.demo-svg.is-cold .snow{
opacity:1;
}
.demo-svg .gh-wall{
transition:fill .3s;
}
.demo-svg.is-cold .gh-wall{
fill:#d3e6f5;
}
.demo-svg .heater{
transition:fill .3s;
}
.demo-svg.boiler-on .heater{
fill:#f5b78a;
}
/* ---------- Расписание ---------- */
.demo-svg .tank{
fill:#fff;
stroke:#555;
transition:fill .3s;
}
.demo-svg.boiler-on .tank{
fill:#f5b78a;
}
.demo-box select{
width:100%;
margin-top:4px;
padding:6px;
border:1px solid #ccc;
border-radius:6px;
background:#fff;
font-size:13px;
}
/* ---------- Вкладка "Мой вариант" ---------- */
.demo-own-input{
width:100%;
box-sizing:border-box;
min-height:70px;
margin:6px 0 8px;
resize:vertical;
}
.demo-own-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
}
/* Примеры-подсказки: кликабельные "таблетки" (перебивают общий стиль button) */
button.demo-own-chip,
button.demo-link-btn{
background:#fff;
color:#333;
border:1px solid #cfe3d6;
border-radius:20px;
padding:6px 12px;
font-size:13px;
line-height:1.3;
cursor:pointer;
text-align:left;
}
button.demo-own-chip:hover,
button.demo-link-btn:hover{
background:#eef5f0;
}
button.demo-link-btn{
border-color:#1f6f3d;
color:#1f6f3d;
font-weight:600;
}
.own-msg{
min-height:16px;
margin:6px 2px;
font-size:13px;
}
.own-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 230px;
gap:12px;
align-items:start;
margin-top:10px;
}
.own-grid.no-phone{
grid-template-columns:minmax(0,1fr);
}
.own-understood{
margin:0 0 10px;
font-size:14px;
line-height:1.5;
color:#1f4d2f;
}
.own-tiles{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
gap:10px;
}
.own-tile{
background:#fff;
border:2px solid #cfe3d6;
border-radius:12px;
padding:12px;
text-align:center;
transition:border-color .25s, box-shadow .25s;
}
.own-tile.on{
border-color:#f2a72e;
box-shadow:0 0 0 3px rgba(242,167,46,.25);
}
.own-tile-icon{
font-size:42px;
line-height:1.1;
filter:grayscale(1) opacity(.45);
transition:filter .25s;
}
.own-tile.on .own-tile-icon{
filter:none;
}
.own-tile.on .own-tile-icon.spin{
display:inline-block;
animation:demoSpin 1.4s linear infinite;
}
.own-tile-name{
font-size:13px;
font-weight:700;
color:#1f4d2f;
margin-top:4px;
}
.own-pill{
display:inline-block;
margin-top:4px;
padding:2px 10px;
border-radius:12px;
background:#e8efe9;
color:#555;
font-size:12px;
}
.own-tile.on .own-pill{
background:#fde7bd;
color:#8a5a00;
}
.own-tile-ctrls{
display:flex;
flex-direction:column;
gap:6px;
margin-top:8px;
}
.own-tile-ctrls .demo-btn{
margin-top:0;
font-size:13px;
padding:8px 10px;
}
.own-block{
margin-top:12px;
}
.own-phone .demo-btn{
margin-top:8px;
}
@media (max-width:700px){
.own-grid{
grid-template-columns:minmax(0,1fr);
}
}
/* Людям, у кого в системе отключена анимация — вентилятор не крутим */
@media (prefers-reduced-motion:reduce){
.demo-svg.vent-on .fan,
.own-tile.on .own-tile-icon.spin{
animation:none;
}
}
/* Строка "сигнальная лампа" внутри карточки ворот/гаража/калитки */
.own-lamp{
margin-top:6px;
font-size:12px;
color:#8a8f8c;
transition:color .25s;
}
.own-lamp.on{
color:#8a5a00;
font-weight:700;
}
/* ---------- Бойлер и рециркуляция воды ---------- */
/* Та же раскладка "сцена + боковая панель", что у .demo-panel; нужна,
когда сцена вставлена внутрь вкладки "Мой вариант" */
.rc-panel{
display:grid;
grid-template-columns:minmax(0,1fr) 230px;
gap:12px;
align-items:start;
grid-column:1 / -1;
}
@media (max-width:700px){
.rc-panel{
grid-template-columns:minmax(0,1fr);
}
}
/* Труба: серая, пока вода стоит; цвет воды (по температуре) подставляет js */
.rc-svg .rc-pipe{
fill:none;
stroke:#b8c4bb;
stroke-width:8;
stroke-linejoin:round;
transition:stroke .3s;
}
/* Белые "бегущие" штрихи поверх трубы — показывают, что вода движется */
.rc-svg .rc-flow{
fill:none;
stroke:#fff;
stroke-width:3;
stroke-linejoin:round;
stroke-dasharray:6 12;
opacity:0;
transition:opacity .25s;
}
@keyframes demoFlow{
to{ stroke-dashoffset:-18; }
}
.rc-svg.pump-on .rc-flow{
opacity:.9;
animation:demoFlow .7s linear infinite;
}
.rc-svg .rc-rotor{
transform-box:fill-box;
transform-origin:center;
}
.rc-svg.pump-on .rc-rotor{
animation:demoSpin .8s linear infinite;
}
.rc-svg .rc-steam{
opacity:0;
transition:opacity .3s;
}
.rc-svg.pump-on .rc-steam{
opacity:1;
}
@media (prefers-reduced-motion:reduce){
.rc-svg.pump-on .rc-flow,
.rc-svg.pump-on .rc-rotor{
animation:none;
}
}
/* =========================================================
"Мой вариант": результат собирается из сцен (блоки с заголовком),
плюс универсальная сцена "держать значение по датчику".
========================================================= */
.own-module{
grid-column:1 / -1;
margin-bottom:12px;
}
.own-module-title{
font-size:13px;
font-weight:700;
color:#1f6f3d;
margin:4px 2px 6px;
}
/* Телефон в готовых сценах скрыт, если человек про телефон не говорил */
.own-nophone .demo-phone{
display:none;
}
/* ---------- Универсальная сцена: прибор по датчику ---------- */
.rg-svg .rg-dev-box{
fill:#fff;
stroke:#555;
stroke-width:2;
transition:fill .3s;
}
.rg-svg.dev-on.dev-heat .rg-dev-box{
fill:#f5b78a;
}
.rg-svg.dev-on.dev-cool .rg-dev-box,
.rg-svg.dev-on.dev-water .rg-dev-box{
fill:#d6eaf8;
}
/* Пока прибор выключен, его значок серый; включился — оживает */
.rg-svg .rg-icon{
filter:grayscale(1) opacity(.45);
transition:filter .25s;
}
.rg-svg.dev-on .rg-icon{
filter:none;
}
.rg-svg .rg-link{
fill:none;
stroke:#b8c4bb;
stroke-width:6;
transition:stroke .3s;
}
.rg-svg .rg-flow{
fill:none;
stroke:#fff;
stroke-width:2.5;
stroke-dasharray:5 9;
opacity:0;
transition:opacity .25s;
}
.rg-svg.dev-on .rg-flow{
opacity:.95;
animation:demoFlow .7s linear infinite;
}
.rg-svg .rg-blades{
transform-box:fill-box;
transform-origin:center;
}
.rg-svg.dev-on .rg-blades{
animation:demoSpin 1s linear infinite;
}
.rg-svg .rg-drops{
opacity:0;
transition:opacity .25s;
}
.rg-svg.dev-on .rg-drops{
opacity:1;
}
@media (prefers-reduced-motion:reduce){
.rg-svg.dev-on .rg-flow,
.rg-svg.dev-on .rg-blades{
animation:none;
}
}
/* ###################################################################
«Посмотрите, как это работает» — красивое оформление витрины
(поверх базовых стилей выше)
################################################################### */
#guideDemos{
position:relative;
padding:18px 16px 16px;
margin:18px 0;
border-radius:18px;
background:linear-gradient(180deg,#f3fbf6 0%,#ffffff 38%);
border:1px solid #d3e8da;
box-shadow:0 10px 30px rgba(31,111,61,.10);
}
#guideDemos > .guide-h{
display:flex;
align-items:center;
gap:10px;
font-size:22px;
margin:0 0 4px;
}
#guideDemos > .guide-h::before{
content:"▶";
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:50%;
background:linear-gradient(135deg,#2e9f55,#1f6f3d);
color:#fff;
font-size:14px;
box-shadow:0 4px 10px rgba(31,111,61,.35);
}
#guideDemos > .guide-text{
margin:0 0 14px 44px;
color:#4d6354;
}
/* ---------- Вкладки: группы-карточки и «таблетки» ---------- */
#guideDemos .demo-tabs{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
gap:10px;
margin:0 0 16px;
}
#guideDemos .demo-tab-row{
position:relative;
display:flex;
flex-wrap:wrap;
align-content:flex-start;
gap:7px;
margin:0;
padding:30px 10px 10px;
background:#fff;
border:1px solid #dcebe1;
border-radius:14px;
box-shadow:0 2px 8px rgba(0,0,0,.04);
}
#guideDemos .demo-tab-group{
position:absolute;
top:8px;
left:12px;
flex:none;
font-size:11px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
color:#2e9f55;
}
#guideDemos .demo-tab-row:nth-child(2) .demo-tab-group{ color:#d9822b; }
#guideDemos .demo-tab-row:nth-child(3) .demo-tab-group{ color:#2874a6; }
#guideDemos .demo-tab-row:nth-child(4) .demo-tab-group{ color:#8e44ad; }
#guideDemos .demo-tab{
background:#f4f8f5;
color:#264a33;
border:1px solid #d7e6dc;
border-radius:999px;
padding:7px 13px;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#guideDemos .demo-tab:hover{
transform:translateY(-2px);
background:#e8f5ec;
box-shadow:0 5px 12px rgba(31,111,61,.18);
}
#guideDemos .demo-tab.active{
background:linear-gradient(135deg,#2e9f55,#1f6f3d);
border-color:#1f6f3d;
color:#fff;
box-shadow:0 6px 16px rgba(31,111,61,.40);
transform:translateY(-1px);
}
/* ---------- Панель примера ---------- */
#guideDemos .demo-panel{
grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);
gap:16px;
padding:14px;
background:#fff;
border:1px solid #dcebe1;
border-radius:18px;
box-shadow:0 8px 24px rgba(0,0,0,.06);
animation:demoPanelIn .35s ease;
}
@keyframes demoPanelIn{
from{ opacity:0; transform:translateY(8px); }
to{ opacity:1; transform:none; }
}
/* Сцена — «окно» с небом */
#guideDemos .demo-stage{
padding:0;
background:none;
border-radius:14px;
overflow:hidden;
display:flex;
flex-direction:column;
border:1px solid #cfe3d6;
box-shadow:inset 0 0 0 4px #fff, 0 4px 14px rgba(31,111,61,.12);
}
#guideDemos .demo-svg{
border-radius:0;
background:linear-gradient(180deg,#bfe4f7 0%,#e4f5fb 55%,#f4faf6 100%);
}
/* Статус — «пузырь» под сценой */
#guideDemos .demo-status{
display:flex;
align-items:center;
gap:10px;
margin:0;
min-height:54px;
padding:10px 14px;
background:linear-gradient(180deg,#f5fbf7,#eaf6ee);
border-top:1px solid #d3e8da;
color:#1b4d2e;
font-size:14px;
font-weight:700;
line-height:1.35;
}
#guideDemos .demo-status::before{
content:"i";
flex:none;
display:inline-flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
border-radius:50%;
background:#2e9f55;
color:#fff;
font-size:14px;
font-style:italic;
font-weight:800;
}
/* ---------- Боковые панели ---------- */
#guideDemos .demo-side{
gap:12px;
}
#guideDemos .demo-box{
background:#fff;
border:1px solid #d9e9de;
border-radius:14px;
padding:0 12px 12px;
box-shadow:0 3px 10px rgba(0,0,0,.05);
overflow:hidden;
}
#guideDemos .demo-box-title{
margin:0 -12px 10px;
padding:9px 12px;
background:linear-gradient(135deg,#e7f5ec,#d6eddf);
border-bottom:1px solid #cfe3d6;
font-size:13px;
font-weight:800;
color:#1f6f3d;
}
#guideDemos .demo-btn{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
background:linear-gradient(135deg,#34ad5f,#237a45);
border-radius:10px;
padding:11px 12px;
font-weight:700;
box-shadow:0 4px 0 #1a5c34, 0 8px 14px rgba(31,111,61,.25);
transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#guideDemos .demo-btn:hover{
filter:brightness(1.08);
background:linear-gradient(135deg,#34ad5f,#237a45);
}
#guideDemos .demo-btn:active{
transform:translateY(3px);
box-shadow:0 1px 0 #1a5c34, 0 3px 6px rgba(31,111,61,.25);
}
#guideDemos .demo-btn-inline{
display:inline-flex;
width:auto;
}
#guideDemos .demo-check,
#guideDemos .demo-radio{
padding:6px 8px;
border-radius:8px;
cursor:pointer;
}
#guideDemos .demo-check:hover,
#guideDemos .demo-radio:hover{
background:#f0f8f3;
}
#guideDemos .demo-box input[type="range"]{
-webkit-appearance:none;
appearance:none;
height:8px;
border-radius:999px;
background:linear-gradient(90deg,#9ed5b0,#2e9f55);
outline:none;
margin:6px 0 4px;
}
#guideDemos .demo-box input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
width:22px;
height:22px;
border-radius:50%;
background:#fff;
border:3px solid #1f6f3d;
box-shadow:0 2px 6px rgba(0,0,0,.3);
cursor:grab;
}
#guideDemos .demo-box input[type="range"]::-moz-range-thumb{
width:16px;
height:16px;
border-radius:50%;
background:#fff;
border:3px solid #1f6f3d;
box-shadow:0 2px 6px rgba(0,0,0,.3);
cursor:grab;
}
#guideDemos .demo-box select{
padding:5px 8px;
border:1px solid #cfe3d6;
border-radius:8px;
background:#f7fbf8;
}
/* ---------- Телефон: настоящий смартфон ---------- */
#guideDemos .demo-box.demo-phone{
position:relative;
padding:26px 10px 12px;
background:linear-gradient(160deg,#2b2f33,#14171a);
border:none;
border-radius:26px;
box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 0 2px #3d4349;
}
#guideDemos .demo-phone::before{
content:"";
position:absolute;
top:9px;
left:50%;
transform:translateX(-50%);
width:54px;
height:7px;
border-radius:999px;
background:#0a0c0e;
box-shadow:inset 0 0 0 1px #3a4046;
}
#guideDemos .demo-phone .demo-box-title{
margin:0 0 8px;
padding:0 4px;
background:none;
border:none;
color:#a8e0bb;
font-size:12px;
}
#guideDemos .demo-phone-screen{
min-height:110px;
padding:8px;
gap:6px;
background:linear-gradient(180deg,#dbeee2,#eef6f0);
border-radius:14px;
box-shadow:inset 0 2px 6px rgba(0,0,0,.18);
}
#guideDemos .demo-msg{
position:relative;
background:#fff;
border-left:none;
border-radius:12px 12px 12px 3px;
padding:7px 10px;
font-size:12px;
box-shadow:0 1px 3px rgba(0,0,0,.15);
animation:demoMsgIn .3s ease;
}
#guideDemos .demo-msg-empty{
background:transparent;
box-shadow:none;
color:#7b8b80;
text-align:center;
}
@keyframes demoMsgIn{
from{ opacity:0; transform:translateY(6px) scale(.97); }
to{ opacity:1; transform:none; }
}
#guideDemos .demo-phone .demo-btn{
margin-top:10px;
background:linear-gradient(135deg,#3bb96a,#27854b);
box-shadow:0 3px 0 #1b6338;
}
/* ---------- Нижняя плашка «К заявке» ---------- */
#guideDemos .demo-more{
margin-top:16px;
padding:12px 16px;
background:linear-gradient(135deg,#eaf7ef,#dff1e6);
border:1px solid #c5e0cf;
border-radius:14px;
font-weight:600;
color:#1f4d2f;
}
/* ---------- Телефон / узкие экраны ---------- */
@media (max-width:700px){
#guideDemos{
padding:14px 10px 12px;
border-radius:14px;
}
#guideDemos > .guide-h{
font-size:19px;
}
#guideDemos > .guide-text{
margin-left:0;
}
#guideDemos .demo-tabs{
grid-template-columns:1fr;
}
#guideDemos .demo-panel{
grid-template-columns:minmax(0,1fr);
padding:10px;
gap:12px;
}
#guideDemos .demo-box.demo-phone{
max-width:320px;
width:100%;
margin:0 auto;
}
}
@media (prefers-reduced-motion:reduce){
#guideDemos .demo-panel,
#guideDemos .demo-msg{
animation:none;
}
#guideDemos .demo-tab,
#guideDemos .demo-btn{
transition:none;
}
}
/* ###################################################################
Красивее сами сцены: градиенты, тени, свет, детали.
Перекрашиваем нарисованные «плоские» фигуры по значению их fill —
разметка и логика примеров не меняются.
################################################################### */
#guideDemos .demo-svg{
filter:saturate(1.08);
}
/* Земля — трава */
#guideDemos .demo-svg rect[fill="#dfeee4"]{
fill:url(#gGrass);
}
/* Крыши — объёмные, с тенью */
#guideDemos .demo-svg polygon[fill="#1f6f3d"]{
fill:url(#gRoof);
stroke:#14502b;
stroke-width:1.5;
stroke-linejoin:round;
filter:drop-shadow(0 3px 2px rgba(0,0,0,.28));
}
/* Стены домов, гаража, стенка дома */
#guideDemos .demo-svg rect[fill="#fff"][stroke="#1f6f3d"]{
fill:url(#gWall);
filter:drop-shadow(0 4px 4px rgba(0,0,0,.20));
}
/* Двери */
#guideDemos .demo-svg rect[fill="#cfe3d6"]{
fill:url(#gDoor);
}
/* Столбы, стойки, трубы — металл */
#guideDemos .demo-svg rect[fill="#555"]{
fill:url(#gMetal);
filter:drop-shadow(2px 2px 2px rgba(0,0,0,.28));
}
/* Приборы (котёл, насос, бак, бойлер) — глянцевые */
#guideDemos .demo-svg rect[fill="#fff"][stroke="#555"]:not([class]){
fill:url(#gAppliance);
filter:drop-shadow(0 3px 3px rgba(0,0,0,.22));
}
/* Внутренность гаража */
#guideDemos .demo-svg rect[fill="#2b3a31"]{
fill:url(#gGarageIn);
}
/* Лампы — настоящее свечение */
#guideDemos .demo-svg .lamp{
fill:url(#gLampOff);
stroke:#4d5560;
}
#guideDemos .demo-svg.lamp-on .lamp{
fill:url(#gLampOn);
stroke:#c77b0d;
filter:drop-shadow(0 0 6px rgba(255,190,60,.95));
}
#guideDemos .demo-svg .lamp-halo{
fill:url(#gHalo);
}
#guideDemos .demo-svg.lamp-on .lamp-halo{
opacity:1;
}
/* Конус света у двери */
#guideDemos .demo-svg .light-cone{
fill:url(#gCone);
}
#guideDemos .demo-svg.lamp-on .light-cone{
opacity:.75;
}
/* Окна, которые добавляются скриптом: ночью светятся */
#guideDemos .demo-svg .deco-window rect{
fill:url(#gGlass);
stroke:#2c7a48;
stroke-width:1.5;
transition:fill .4s;
}
#guideDemos .demo-svg .deco-window path{
stroke:#2c7a48;
stroke-width:1.2;
}
#guideDemos .demo-svg.is-night .deco-window rect{
fill:#ffd98a;
}
/* Декор фона: небо, солнце, облака, холмы, трава */
#guideDemos .demo-svg .deco-bg{
pointer-events:none;
}
#guideDemos .demo-svg .deco-cloud{
fill:#fff;
opacity:.9;
}
#guideDemos .demo-svg .deco-hill{
fill:#c9e8d3;
}
#guideDemos .demo-svg .deco-hill2{
fill:#b3dcc1;
}
#guideDemos .demo-svg .deco-tuft{
fill:#7fbf94;
}
#guideDemos .demo-svg .deco-tuft2{
fill:#a6d8b6;
}
/* Пламя и пар — мягкое свечение */
#guideDemos .demo-svg .flame{
filter:drop-shadow(0 0 6px rgba(255,140,40,.85));
}
/* Шлагбаум и створки — тени */
#guideDemos .demo-svg .arm,
#guideDemos .demo-svg .panel,
#guideDemos .demo-svg .gdoor,
#guideDemos .demo-svg .wleaf{
filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));
}
/* Тёмное небо в сцене «Свет у двери» ночью */
#guideDemos .demo-svg .night{
fill:#0d1b3a;
}
/* Ночью солнца нет, облака еле видны */
#guideDemos .demo-svg.is-night .deco-bg circle{
opacity:0;
}
#guideDemos .demo-svg.is-night .deco-cloud{
opacity:.35;
}
/* ###################################################################
Оживление сцен: пока устройство «работает», это видно —
мигает лампа, пляшет пламя, течёт вода, дует воздух, падает снег.
Всё включается только состоянием примера (после нажатия кнопки или
движения ползунка) и выключается вместе с ним.
################################################################### */
@keyframes demoLampBlink{
0%, 49%{ opacity:1; }
50%, 100%{ opacity:.18; }
}
@keyframes demoHaloBlink{
0%, 49%{ opacity:1; transform:scale(1); }
50%, 100%{ opacity:0; transform:scale(.7); }
}
@keyframes demoFlame{
0% { transform:scale(1, 1) rotate(-2deg); }
35% { transform:scale(1.08, 1.18) rotate(2deg); }
70% { transform:scale(.95, 1.06) rotate(-1deg); }
100%{ transform:scale(1.1, 1.22) rotate(1deg); }
}
@keyframes demoHeat{
0%, 100%{ fill:#f5b78a; }
50%{ fill:#ef8a4c; }
}
@keyframes demoDropFall{
0% { transform:translateY(-4px); opacity:0; }
20% { opacity:1; }
100%{ transform:translateY(24px); opacity:0; }
}
@keyframes demoPumpShake{
0% { transform:translate(0, 0); }
25% { transform:translate(.8px, -.6px); }
50% { transform:translate(-.8px, .6px); }
75% { transform:translate(.6px, .8px); }
100%{ transform:translate(0, 0); }
}
@keyframes demoSway{
from{ transform:rotate(-3deg); }
to { transform:rotate(3deg); }
}
@keyframes demoAirBlow{
0% { transform:translateX(-8px); opacity:0; }
30% { opacity:1; }
100%{ transform:translateX(18px); opacity:0; }
}
@keyframes demoGlowBreath{
0%, 100%{ opacity:.55; }
50%{ opacity:.95; }
}
@keyframes demoSiren{
0%, 49%{ opacity:1; transform:scale(1.12) rotate(-6deg); }
50%, 100%{ opacity:.25; transform:scale(.92) rotate(6deg); }
}
@keyframes demoDripFall{
0% { transform:translateY(-14px); opacity:0; }
25% { opacity:1; }
100%{ transform:translateY(14px); opacity:0; }
}
@keyframes demoRipple{
0%, 100%{ transform:scaleX(1); opacity:.85; }
50%{ transform:scaleX(1.08); opacity:.6; }
}
@keyframes demoSnowFall{
0% { transform:translateY(-6px) rotate(0deg); }
50% { transform:translateY(8px) rotate(25deg); }
100%{ transform:translateY(-6px) rotate(0deg); }
}
@keyframes demoSmoke{
0% { transform:translate(0, 0) scale(.5); opacity:0; }
20% { opacity:.75; }
100%{ transform:translate(10px, -34px) scale(1.5); opacity:0; }
}
/* ---------- Лампа мигает, пока шлагбаум / ворота / гараж двигаются,
и пока калитка открыта ---------- */
#guideDemos .demo-svg.is-moving .lamp,
#guideDemos .demo-svg#demoWicketSvg.is-open .lamp{
animation:demoLampBlink .55s steps(1, end) infinite;
}
#guideDemos .demo-svg.is-moving .lamp-halo,
#guideDemos .demo-svg#demoWicketSvg.is-open .lamp-halo{
transform-box:fill-box;
transform-origin:center;
animation:demoHaloBlink .55s steps(1, end) infinite;
}
/* ---------- Огонь: котёл, обогреватель теплицы, бойлер по расписанию ---------- */
#guideDemos .demo-svg.boiler-on .flame{
transform-box:fill-box;
transform-origin:50% 100%;
animation:demoFlame .45s ease-in-out infinite alternate;
}
#guideDemos .demo-svg.boiler-on .rad{
animation:demoHeat 1.6s ease-in-out infinite;
}
#guideDemos .demo-svg.boiler-on .pipe{
stroke-dasharray:10 8;
animation:demoFlow .8s linear infinite;
}
/* Дым из трубы (труба с дымом добавляется скриптом в сцену котла) */
#guideDemos .demo-svg .deco-smoke{
fill:#cfd6dc;
opacity:0;
transform-box:fill-box;
transform-origin:center;
}
#guideDemos .demo-svg.boiler-on .deco-smoke{
animation:demoSmoke 2.2s ease-out infinite;
}
#guideDemos .demo-svg.boiler-on .deco-smoke:nth-of-type(2){ animation-delay:.7s; }
#guideDemos .demo-svg.boiler-on .deco-smoke:nth-of-type(3){ animation-delay:1.4s; }
/* ---------- Автополив: вода течёт, капает, насос вибрирует, растение качается ---------- */
#guideDemos .demo-svg.water-on .hose{
stroke-dasharray:9 6;
animation:demoFlow .55s linear infinite;
}
#guideDemos .demo-svg.water-on .drops{
animation:demoDropFall .9s ease-in infinite;
}
#guideDemos .demo-svg.water-on .pump{
animation:demoPumpShake .14s linear infinite;
}
#guideDemos .demo-svg.water-on .leaf{
transform-box:fill-box;
transform-origin:50% 100%;
animation:demoSway 1.8s ease-in-out infinite alternate;
}
/* ---------- Вентиляция: воздух идёт потоком ---------- */
#guideDemos .demo-svg.vent-on .air{
animation:demoAirBlow 1s ease-out infinite;
}
/* ---------- Свет у двери: свет «дышит» ---------- */
#guideDemos .demo-svg.lamp-on .light-cone{
animation:demoGlowBreath 2.4s ease-in-out infinite;
}
/* ---------- Протечка: сирена, капли, вода, течёт по трубе ---------- */
#guideDemos .demo-svg:not(.valve-closed) .wpipe{
stroke-dasharray:10 8;
animation:demoFlow .8s linear infinite;
}
#guideDemos .demo-svg.is-wet .alarm{
transform-box:fill-box;
transform-origin:center;
animation:demoSiren .5s steps(1, end) infinite;
}
#guideDemos .demo-svg.is-wet .drip{
animation:demoDripFall 1s ease-in infinite;
}
#guideDemos .demo-svg.is-wet .puddle{
transform-box:fill-box;
transform-origin:center;
animation:demoRipple 1.6s ease-in-out infinite;
}
/* ---------- Теплица: снег падает, когда холодно ---------- */
#guideDemos .demo-svg.is-cold .snow{
transform-box:fill-box;
transform-origin:center;
animation:demoSnowFall 3s ease-in-out infinite;
}
#guideDemos .demo-svg.is-cold .snow:nth-of-type(odd){
animation-delay:-1.2s;
}
@media (prefers-reduced-motion:reduce){
#guideDemos .demo-svg *{
animation:none !important;
}
}
/* ###################################################################
АВТОМАТИКА: курятник, аквариум, бак с водой, бассейн, инкубатор
################################################################### */
#guideDemos .demo-tab-row:nth-child(4) .demo-tab-group{ color:#c2417a; }
#guideDemos .demo-tab-row:nth-child(5) .demo-tab-group{ color:#8e44ad; }
#guideDemos .au-svg .au-rotor,
#guideDemos .au-svg .au-fan{
transform-box:fill-box;
transform-origin:center;
}
/* Вода по трубам идёт, пока насос или фильтр работают */
#guideDemos .au-svg .au-pipe,
#guideDemos .au-svg .au-ppipe,
#guideDemos .au-svg .au-tapwater{
fill:none;
stroke:#b8c4bb;
stroke-width:6;
stroke-linejoin:round;
transition:stroke .3s;
}
#guideDemos .au-svg.pump-on .au-pipe,
#guideDemos .au-svg.use-on .au-tapwater{
stroke:#2b86c4;
stroke-dasharray:10 7;
animation:demoFlow .6s linear infinite;
}
#guideDemos .au-svg.filter-on .au-ppipe{
stroke:#2b86c4;
stroke-dasharray:10 7;
animation:demoFlow .6s linear infinite;
}
#guideDemos .au-svg.pump-on .au-rotor,
#guideDemos .au-svg.filter-on .au-rotor{
animation:demoSpin .8s linear infinite;
}
#guideDemos .au-svg.is-run .au-fan{
animation:demoSpin 1.1s linear infinite;
}
/* ---------- Курятник ---------- */
@keyframes auHenWalk{
from{ transform:translateX(0); }
to{ transform:translateX(26px); }
}
#guideDemos .au-svg .au-door{
transition:transform .9s ease;
}
#guideDemos .au-svg.door-open .au-door{
transform:translateY(-44px);
}
#guideDemos .au-svg .au-hen{
opacity:0;
transition:opacity .6s ease .5s;
transform-box:fill-box;
}
#guideDemos .au-svg.door-open .au-hen{
opacity:1;
}
#guideDemos .au-svg.is-run.door-open .au-hen-a{ animation:auHenWalk 2.2s ease-in-out infinite alternate; }
#guideDemos .au-svg.is-run.door-open .au-hen-b{ animation:auHenWalk 3s ease-in-out infinite alternate-reverse; }
#guideDemos .au-svg.is-run.door-open .au-hen-c{ animation:auHenWalk 1.6s ease-in-out infinite alternate; }
#guideDemos .au-svg .au-heat,
#guideDemos .au-svg .au-heat-halo{
opacity:0;
transition:opacity .4s;
}
#guideDemos .au-svg.heater-on .au-heat{
opacity:1;
filter:drop-shadow(0 0 5px rgba(255,150,40,.95));
}
#guideDemos .au-svg.heater-on .au-heat-halo{
opacity:1;
animation:demoGlowBreath 1.6s ease-in-out infinite;
}
#guideDemos .au-svg .au-night{
transition:opacity .3s;
}
/* ---------- Аквариум ---------- */
@keyframes auSwimA{
0% { transform:translateX(0) scaleX(1); }
49% { transform:translateX(150px) scaleX(1); }
50% { transform:translateX(150px) scaleX(-1); }
99% { transform:translateX(0) scaleX(-1); }
100%{ transform:translateX(0) scaleX(1); }
}
@keyframes auSwimB{
0% { transform:translateX(0) translateY(0) scaleX(-1); }
49% { transform:translateX(-120px) translateY(10px) scaleX(-1); }
50% { transform:translateX(-120px) translateY(10px) scaleX(1); }
99% { transform:translateX(0) translateY(0) scaleX(1); }
100%{ transform:translateX(0) translateY(0) scaleX(-1); }
}
@keyframes auBubble{
0% { transform:translateY(0) scale(.6); opacity:0; }
15% { opacity:.85; }
100%{ transform:translateY(-78px) scale(1.2); opacity:0; }
}
@keyframes auFoodFall{
0% { transform:translateY(0); opacity:0; }
12% { opacity:1; }
100%{ transform:translateY(86px); opacity:0; }
}
@keyframes auFeederShake{
0%, 100%{ transform:rotate(0deg); }
25%{ transform:rotate(-6deg); }
75%{ transform:rotate(6deg); }
}
#guideDemos .au-svg .au-fish,
#guideDemos .au-svg .au-feeder{
transform-box:fill-box;
transform-origin:center;
}
#guideDemos .au-svg.is-run .au-fish.f1{ animation:auSwimA 9s linear infinite; }
#guideDemos .au-svg.is-run .au-fish.f2{ animation:auSwimB 12s linear infinite; }
#guideDemos .au-svg.is-run .au-fish.f3{ animation:auSwimA 7s linear infinite reverse; }
#guideDemos .au-svg .au-bar{
transition:fill .3s;
}
#guideDemos .au-svg.light-on .au-bar{
fill:#fff4b8;
stroke:#e0b43c;
filter:drop-shadow(0 0 6px rgba(255,220,100,.95));
}
#guideDemos .au-svg .au-beam{
transition:opacity .5s;
}
#guideDemos .au-svg.light-on .au-beam{
opacity:.55;
}
#guideDemos .au-svg .au-rodglow{
transition:opacity .4s;
}
#guideDemos .au-svg.heater-on .au-rodglow{
opacity:.95;
filter:drop-shadow(0 0 6px rgba(255,90,60,.9));
}
#guideDemos .au-svg.air-on.is-run .au-bub{ animation:auBubble 2.4s ease-in infinite; }
#guideDemos .au-svg.air-on.is-run .au-bub.b2{ animation-delay:.8s; }
#guideDemos .au-svg.air-on.is-run .au-bub.b3{ animation-delay:1.6s; }
#guideDemos .au-svg.feeding .au-food{ animation:auFoodFall 2.6s ease-in; }
#guideDemos .au-svg.feeding .au-food.fd2{ animation-delay:.25s; }
#guideDemos .au-svg.feeding .au-food.fd3{ animation-delay:.5s; }
#guideDemos .au-svg.feeding .au-food.fd4{ animation-delay:.75s; }
#guideDemos .au-svg.feeding .au-feeder{ animation:auFeederShake .5s ease-in-out 3; }
/* ---------- Бак с водой ---------- */
#guideDemos .au-svg .au-lvl{
transition:height .4s linear, y .4s linear;
}
#guideDemos .au-svg .au-float{
transition:cy .4s linear;
}
#guideDemos .au-svg .au-tapdrop{
opacity:0;
}
#guideDemos .au-svg.use-on .au-tapdrop{
animation:demoDropFall .8s ease-in infinite;
}
/* ---------- Бассейн ---------- */
@keyframes auLeafDrift{
from{ transform:translateX(-10px) rotate(-10deg); }
to{ transform:translateX(12px) rotate(14deg); }
}
@keyframes auLeafSwirl{
0% { transform:translateX(0) translateY(0) rotate(0deg); }
50% { transform:translateX(70px) translateY(-6px) rotate(180deg); }
100%{ transform:translateX(0) translateY(0) rotate(360deg); }
}
@keyframes auWaveShift{
from{ transform:translateX(0); }
to{ transform:translateX(-28px); }
}
#guideDemos .au-svg .au-leaf{
transform-box:fill-box;
transform-origin:center;
opacity:0;
transition:opacity .6s;
}
#guideDemos .au-svg.is-run .au-leaf{
animation:auLeafDrift 3s ease-in-out infinite alternate;
}
#guideDemos .au-svg.filter-on .au-leaf{
animation:auLeafSwirl 2.4s linear infinite;
}
#guideDemos .au-svg .au-swirl{
transition:opacity .4s;
}
#guideDemos .au-svg.filter-on .au-swirl{
opacity:.85;
animation:demoFlow .8s linear infinite;
}
#guideDemos .au-svg.is-run .au-wave{
animation:auWaveShift 1.6s linear infinite;
}
#guideDemos .au-svg .au-pwater{
transition:fill .6s;
}
/* ---------- Инкубатор ---------- */
#guideDemos .au-svg .au-tray{
transition:transform 1.2s ease;
}
#guideDemos .au-svg .au-warm{
transition:opacity .5s;
}
#guideDemos .au-svg .au-egg{
transform-box:fill-box;
transform-origin:center;
}
#guideDemos .au-svg .lamp-halo,
#guideDemos .au-svg .lamp{
transition:opacity .3s, fill .3s;
}
#guideDemos .au-svg.no-power .au-plug{
opacity:.4;
}
#guideDemos .au-svg .au-nopower{
filter:drop-shadow(0 0 4px rgba(255,200,0,.9));
}
#guideDemos .au-svg.no-power .au-nopower{
animation:demoSiren .6s steps(1, end) infinite;
}
@media (prefers-reduced-motion:reduce){
#guideDemos .au-svg *{
animation:none !important;
}
}
/* ###################################################################
Человек у двери с походкой, лампа мигает при открытых воротах,
морозная погода: серое небо, снег, снежные шапки, падающий снег
################################################################### */
@keyframes pLegF{ from{ transform:rotate(-32deg); } to{ transform:rotate(32deg); } }
@keyframes pLegB{ from{ transform:rotate(32deg); } to{ transform:rotate(-32deg); } }
@keyframes pArmF{ from{ transform:rotate(30deg); } to{ transform:rotate(-30deg); } }
@keyframes pArmB{ from{ transform:rotate(-30deg); } to{ transform:rotate(30deg); } }
@keyframes pBob{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-2.2px); } }
#guideDemos .demo-svg .person{
transition:transform 1.8s linear;
}
#guideDemos .demo-svg .p-flip{
transform-box:fill-box;
transform-origin:center;
}
#guideDemos .demo-svg.is-away .p-flip{
transform:scaleX(-1);
}
#guideDemos .demo-svg .p-leg,
#guideDemos .demo-svg .p-arm{
transform-box:fill-box;
transform-origin:50% 4%;
}
#guideDemos .demo-svg.is-walking .p-leg-f{ animation:pLegF .45s ease-in-out infinite alternate; }
#guideDemos .demo-svg.is-walking .p-leg-b{ animation:pLegB .45s ease-in-out infinite alternate; }
#guideDemos .demo-svg.is-walking .p-arm-f{ animation:pArmF .45s ease-in-out infinite alternate; }
#guideDemos .demo-svg.is-walking .p-arm-b{ animation:pArmB .45s ease-in-out infinite alternate; }
#guideDemos .demo-svg.is-walking .p-bob{ animation:pBob .45s ease-in-out infinite; }
/* Лампа шлагбаума / ворот / гаража продолжает мигать, пока они открыты */
#guideDemos .demo-svg#demoGateSvg.is-open .lamp,
#guideDemos .demo-svg#demoGarageSvg.is-open .lamp{
animation:demoLampBlink .55s steps(1, end) infinite;
}
#guideDemos .demo-svg#demoGateSvg.is-open .lamp-halo,
#guideDemos .demo-svg#demoGarageSvg.is-open .lamp-halo{
transform-box:fill-box;
transform-origin:center;
animation:demoHaloBlink .55s steps(1, end) infinite;
}
/* ---------- Мороз: холодная погода ---------- */
@keyframes demoSnowDrift{
from{ transform:translate(0, -8px); }
to{ transform:translate(16px, 205px); }
}
#guideDemos .demo-svg.is-freezing{
background:linear-gradient(180deg,#8fa3b6 0%,#c3d0dc 55%,#e4ecf2 100%);
filter:saturate(.7) brightness(.98);
}
#guideDemos .demo-svg.is-freezing rect[fill="#dfeee4"]{
fill:url(#gSnow);
}
#guideDemos .demo-svg.is-freezing .deco-hill{ fill:#e8f0f5; }
#guideDemos .demo-svg.is-freezing .deco-hill2{ fill:#d3e1eb; }
#guideDemos .demo-svg.is-freezing .deco-tuft{ fill:#ffffff; }
#guideDemos .demo-svg.is-freezing .deco-tuft2{ fill:#cfdde8; }
#guideDemos .demo-svg.is-freezing .deco-cloud{ fill:#aab7c3; opacity:.95; }
#guideDemos .demo-svg.is-freezing .deco-bg circle{ opacity:.12; }
#guideDemos .demo-svg.is-freezing .au-sun{ opacity:.18; }
#guideDemos .demo-svg .deco-snowcap{
fill:#fff;
stroke:#d5e2ec;
stroke-width:1;
opacity:0;
transition:opacity .5s;
}
#guideDemos .demo-svg.is-freezing .deco-snowcap{
opacity:1;
}
#guideDemos .demo-svg .deco-snow{
opacity:0;
pointer-events:none;
transition:opacity .5s;
}
#guideDemos .demo-svg.is-freezing .deco-snow{
opacity:1;
}
#guideDemos .demo-svg .deco-snow circle{
fill:#fff;
animation:demoSnowDrift 4s linear infinite;
}
@media (prefers-reduced-motion:reduce){
#guideDemos .demo-svg .deco-snow circle,
#guideDemos .demo-svg .person *{
animation:none !important;
}
}
/* ###################################################################
«Или соберите своё из функций» — понятный конструктор:
три шага, готовые наборы, функции по группам с подсказками,
наглядная схема «что запускает → плата → что делает»
################################################################### */
#guideBuilder{
padding:18px 16px 16px;
margin:18px 0;
border-radius:18px;
background:linear-gradient(180deg,#f6f3fd 0%,#ffffff 36%);
border:1px solid #ddd5f0;
box-shadow:0 10px 30px rgba(110,70,190,.08);
}
#guideBuilder > .guide-h{
display:flex;
align-items:center;
gap:10px;
font-size:22px;
margin:0 0 6px;
}
#guideBuilder > .guide-h::before{
content:"🧩";
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:50%;
background:linear-gradient(135deg,#8e5fd6,#5b3aa8);
font-size:16px;
box-shadow:0 4px 10px rgba(91,58,168,.35);
}
/* ---------- Три шага ---------- */
.gb-block .gb-steps{
list-style:none;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin:12px 0 14px;
padding:0;
}
.gb-block .gb-steps li{
position:relative;
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
background:#fff;
border:1px solid #e1daf1;
border-radius:14px;
font-size:14px;
font-weight:700;
color:#3b2a6b;
line-height:1.3;
}
.gb-block .gb-steps li:not(:last-child)::after{
content:"➜";
position:absolute;
right:-12px;
top:50%;
transform:translateY(-50%);
z-index:2;
color:#8e5fd6;
font-size:16px;
background:#fff;
border-radius:50%;
line-height:1;
}
.gb-block .gb-steps b{
flex:none;
display:inline-flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
border-radius:50%;
background:linear-gradient(135deg,#8e5fd6,#5b3aa8);
color:#fff;
font-size:14px;
}
.gb-block .gb-steps small{
font-weight:500;
color:#76709a;
font-size:12px;
}
/* ---------- Готовые наборы ---------- */
.gb-block .gb-presets{
margin:0 0 14px;
padding:12px;
background:#fff8e6;
border:1px dashed #e6c46a;
border-radius:14px;
}
.gb-block .gb-presets-title{
display:block;
margin-bottom:8px;
font-size:13px;
font-weight:700;
color:#7a5a07;
}
.gb-block .gb-presets-row{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.gb-block .gb-preset{
background:#fff;
color:#5a4308;
border:1px solid #e6c46a;
border-radius:999px;
padding:8px 14px;
font-size:13px;
font-weight:700;
cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.gb-block .gb-preset:hover{
transform:translateY(-2px);
background:#fff0c4;
box-shadow:0 5px 12px rgba(180,130,20,.25);
}
.gb-block .gb-preset.active{
background:linear-gradient(135deg,#f2b632,#d9951a);
border-color:#d9951a;
color:#fff;
box-shadow:0 5px 12px rgba(180,130,20,.4);
}
.gb-block .gb-clear{
background:#f3f3f3;
border-color:#d5d5d5;
color:#555;
}
/* ---------- Группы функций ---------- */
.gb-block .gb-groups{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin:0 0 6px;
}
.gb-block .gb-group{
padding:12px;
background:#fff;
border:1px solid #e3e3ea;
border-top:4px solid var(--gb, #8e5fd6);
border-radius:14px;
box-shadow:0 3px 10px rgba(0,0,0,.04);
}
.gb-block .gb-g-in{ --gb:#2874a6; }
.gb-block .gb-g-out{ --gb:#e08a1e; }
.gb-block .gb-g-link{ --gb:#2e9f55; }
.gb-block .gb-g-safe{ --gb:#c0392b; }
.gb-block .gb-group h3{
margin:0 0 2px;
font-size:15px;
color:var(--gb);
}
.gb-block .gb-group-hint{
margin:0 0 10px;
font-size:12px;
line-height:1.4;
color:#7b7f88;
}
.gb-block .gb-chip{
position:relative;
display:block;
margin:0 0 7px;
padding:9px 12px 9px 40px;
background:#f7f8fa;
border:1px solid #e2e5ea;
border-radius:12px;
cursor:pointer;
transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.gb-block .gb-chip:last-child{
margin-bottom:0;
}
.gb-block .gb-chip:hover{
background:#fff;
border-color:var(--gb);
}
.gb-block .gb-chip input{
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
width:18px;
height:18px;
margin:0;
accent-color:var(--gb);
cursor:pointer;
}
.gb-block .gb-chip-name{
display:block;
font-size:14px;
font-weight:700;
color:#2a2f3a;
}
.gb-block .gb-chip small{
display:block;
margin-top:1px;
font-size:12px;
line-height:1.35;
color:#7b7f88;
}
.gb-block .gb-chip:has(input:checked){
background:#fff;
border-color:var(--gb);
box-shadow:0 0 0 2px var(--gb), 0 6px 14px rgba(0,0,0,.08);
}
/* ---------- Схема ---------- */
#guideBuilder .guide-scheme{
position:relative;
margin:16px 0 12px;
padding:12px;
background:#fff;
border:1px solid #e1daf1;
border-radius:16px;
box-shadow:0 6px 18px rgba(91,58,168,.08);
transition:opacity .3s ease;
}
#guideBuilder .guide-scheme.gb-empty{
opacity:.55;
}
#guideBuilder .guide-scheme.gb-empty::after{
content:"👆 Отметьте функции — и здесь появится схема вашего устройства";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:12px;
text-align:center;
font-size:15px;
font-weight:700;
color:#5b3aa8;
background:rgba(255,255,255,.72);
border-radius:16px;
}
#guideBuilder .guide-scheme-col{
background:#f4f7fb;
border-top:4px solid #2874a6;
}
#guideBuilder .guide-scheme-col:last-of-type{
background:#fff6ea;
border-top-color:#e08a1e;
}
#guideBuilder .guide-scheme-center{
background:#f1faf4;
border:2px solid #2e9f55;
box-shadow:0 4px 14px rgba(46,159,85,.2);
}
#guideBuilder .guide-scheme-board{
background:linear-gradient(135deg,#2e9f55,#1f6f3d);
color:#fff;
font-size:15px;
box-shadow:0 4px 10px rgba(31,111,61,.3);
}
#guideBuilder .guide-scheme-title{
font-size:13px;
letter-spacing:.02em;
}
#guideBuilder .guide-scheme-arrow{
font-size:26px;
color:#8e5fd6;
}
#guideBuilder .guide-scheme:not(.gb-empty) .guide-scheme-arrow{
animation:gbArrow 1.4s ease-in-out infinite;
}
@keyframes gbArrow{
0%, 100%{ transform:translateX(-3px); opacity:.6; }
50%{ transform:translateX(4px); opacity:1; }
}
#guideBuilder .guide-scheme-chip{
font-size:14px;
padding:8px 10px;
border-radius:10px;
animation:demoMsgIn .3s ease;
}
#guideBuilder .guide-scheme-safe{
background:#fdf0ee;
border-top:4px solid #c0392b;
}
#guideBuilder .guide-summary{
position:relative;
padding:12px 14px 12px 48px;
background:linear-gradient(135deg,#f3ecff,#ebe4fb);
border:1px solid #d9cdf2;
border-radius:14px;
font-weight:600;
color:#3b2a6b;
}
#guideBuilder .guide-summary::before{
content:"💬";
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
font-size:22px;
}
/* ---------- Узкие экраны ---------- */
@media (max-width:760px){
#guideBuilder{
padding:14px 10px 12px;
border-radius:14px;
}
.gb-block .gb-steps{
grid-template-columns:1fr;
}
.gb-block .gb-steps li:not(:last-child)::after{
content:"⬇";
right:50%;
top:auto;
bottom:-14px;
transform:translateX(50%);
}
.gb-block .gb-groups{
grid-template-columns:1fr;
}
#guideBuilder .guide-scheme-arrow{
transform:rotate(90deg);
}
#guideBuilder .guide-scheme:not(.gb-empty) .guide-scheme-arrow{
animation:none;
}
}
@media (prefers-reduced-motion:reduce){
#guideBuilder .guide-scheme:not(.gb-empty) .guide-scheme-arrow,
#guideBuilder .guide-scheme-chip{
animation:none;
}
}
/* ###################################################################
«Какая плата мне подходит»: больше вопросов-галочек, фото платы,
причины выбора и альтернативы
################################################################### */
#guideBoardPick{
padding:18px 16px 16px;
margin:18px 0;
border-radius:18px;
background:linear-gradient(180deg,#eef9f1 0%,#ffffff 36%);
border:1px solid #cfe7d6;
box-shadow:0 10px 30px rgba(31,111,61,.08);
}
#guideBoardPick > .guide-h{
display:flex;
align-items:center;
gap:10px;
font-size:22px;
margin:0 0 6px;
}
#guideBoardPick > .guide-h::before{
content:"🔍";
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:50%;
background:linear-gradient(135deg,#34ad5f,#1f6f3d);
font-size:16px;
box-shadow:0 4px 10px rgba(31,111,61,.35);
}
#guideBoardPick .bp-presets{
margin:12px 0 14px;
}
/* Результат: фото + название + причины + альтернативы */
#guideBoardPick .bp-result{
display:flex;
gap:16px;
align-items:flex-start;
margin-top:14px;
padding:16px;
background:linear-gradient(135deg,#f1faf4,#e5f5ea);
border:2px solid #2e9f55;
border-radius:18px;
box-shadow:0 8px 22px rgba(46,159,85,.18);
}
#guideBoardPick .bp-photo{
flex:0 0 180px;
display:flex;
align-items:center;
justify-content:center;
min-height:130px;
padding:8px;
background:#fff;
border:1px solid #cfe3d6;
border-radius:14px;
box-shadow:inset 0 0 0 3px #fff;
}
#guideBoardPick .bp-photo img{
display:block;
max-width:100%;
max-height:160px;
object-fit:contain;
border-radius:8px;
}
#guideBoardPick .bp-photo img[hidden]{
display:none;
}
#guideBoardPick .bp-info{
flex:1 1 auto;
min-width:0;
}
#guideBoardPick .bp-label{
font-size:12px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
color:#2e9f55;
}
#guideBoardPick .bp-name{
margin:2px 0 4px;
font-size:22px;
font-weight:800;
color:#14502b;
}
#guideBoardPick .bp-reason{
font-size:14px;
line-height:1.4;
color:#2f4d3a;
}
#guideBoardPick .bp-why-title,
#guideBoardPick .bp-alt-title{
margin:12px 0 4px;
font-size:13px;
font-weight:800;
color:#1f6f3d;
}
#guideBoardPick .bp-why{
margin:0;
padding:0;
list-style:none;
}
#guideBoardPick .bp-why li{
position:relative;
margin:3px 0;
padding-left:22px;
font-size:13px;
line-height:1.4;
color:#2a2f3a;
}
#guideBoardPick .bp-why li::before{
content:"✔";
position:absolute;
left:2px;
top:0;
color:#2e9f55;
font-weight:800;
}
#guideBoardPick .bp-alt{
display:flex;
flex-wrap:wrap;
gap:6px;
}
#guideBoardPick .bp-alt span{
padding:5px 10px;
background:#fff;
border:1px solid #cfe3d6;
border-radius:999px;
font-size:12px;
line-height:1.3;
color:#2a2f3a;
}
#guideBoardPick .bp-alt b{
color:#14502b;
}
#guideBoardPick .bp-note{
margin:12px 0 0;
font-size:12px;
line-height:1.4;
color:#6a7b70;
}
@media (max-width:760px){
#guideBoardPick{
padding:14px 10px 12px;
border-radius:14px;
}
#guideBoardPick .bp-result{
flex-direction:column;
align-items:stretch;
}
#guideBoardPick .bp-photo{
flex:none;
width:100%;
box-sizing:border-box;
}
}
/* ###################################################################
САД И ДАЧА: дождь, брызги, фонтан, фонари, форточка
################################################################### */
@keyframes auRainFall{
0% { transform:translateY(0); opacity:0; }
15% { opacity:1; }
100%{ transform:translateY(96px); opacity:0; }
}
@keyframes auJet{
to{ stroke-dashoffset:-22; }
}
@keyframes auRippleGrow{
0%, 100%{ transform:scale(.92); opacity:.85; }
50%{ transform:scale(1.08); opacity:.35; }
}
/* Дождь: туча, капли, серое небо */
#guideDemos .au-svg .au-raincloud{
opacity:0;
transition:opacity .6s;
}
#guideDemos .au-svg.is-rain .au-raincloud{
opacity:1;
}
#guideDemos .au-svg .au-rdrop{
stroke:#4a90c2;
stroke-width:2;
stroke-linecap:round;
opacity:0;
}
#guideDemos .au-svg.is-rain .au-rdrop{
animation:auRainFall .7s linear infinite;
}
#guideDemos .demo-svg.is-rainy{
background:linear-gradient(180deg,#8fa2b4 0%,#c1cfdb 55%,#e1e9ef 100%);
filter:saturate(.75);
}
#guideDemos .demo-svg.is-rainy .deco-bg circle{ opacity:.15; }
#guideDemos .demo-svg.is-rainy .deco-cloud{ fill:#aebbc7; }
/* Разбрызгиватели (общий и по зонам) */
#guideDemos .au-svg .au-spray path{
fill:none;
stroke:#4aa3df;
stroke-width:3;
stroke-linecap:round;
stroke-dasharray:5 6;
opacity:0;
transition:opacity .3s;
}
#guideDemos .au-svg.pump-on .au-spray:not(.z0):not(.z1):not(.z2) path{
opacity:1;
animation:demoFlow .5s linear infinite;
}
#guideDemos .au-svg.z0-on .au-spray.z0 path,
#guideDemos .au-svg.z1-on .au-spray.z1 path,
#guideDemos .au-svg.z2-on .au-spray.z2 path{
opacity:1;
animation:demoFlow .5s linear infinite;
}
#guideDemos .au-svg .au-valve{
transition:fill .3s;
}
#guideDemos .au-svg.z0-on .au-valve.z0,
#guideDemos .au-svg.z1-on .au-valve.z1,
#guideDemos .au-svg.z2-on .au-valve.z2{
fill:#2e9f55;
}
#guideDemos .au-svg.z0-on .au-pipe.z0,
#guideDemos .au-svg.z1-on .au-pipe.z1,
#guideDemos .au-svg.z2-on .au-pipe.z2{
stroke:#2b86c4;
stroke-dasharray:10 7;
animation:demoFlow .6s linear infinite;
}
#guideDemos .au-svg .au-soil{
transition:fill .5s;
}
/* Фонари в саду */
#guideDemos .au-svg .au-hl{
transition:opacity .6s;
}
/* Пруд и фонтан */
#guideDemos .au-svg .au-jet{
fill:none;
stroke:#cdeefb;
stroke-width:3.2;
stroke-linecap:round;
stroke-dasharray:4 7;
opacity:0;
transition:opacity .4s;
}
#guideDemos .au-svg.pump-on .au-jet{
opacity:1;
animation:auJet .7s linear infinite;
}
#guideDemos .au-svg .au-ripple{
opacity:0;
transform-box:fill-box;
transform-origin:center;
}
#guideDemos .au-svg.pump-on .au-ripple{
opacity:1;
animation:auRippleGrow 1.6s ease-in-out infinite;
}
#guideDemos .au-svg .au-ulight{
transition:opacity .6s;
}
#guideDemos .au-svg .au-pw{
transition:ry .4s;
}
/* Форточка теплицы */
#guideDemos .au-svg .au-flap{
transform-box:fill-box;
transition:transform .9s ease;
}
#guideDemos .au-svg .au-flap-r{ transform-origin:0% 50%; }
#guideDemos .au-svg .au-flap-l{ transform-origin:100% 50%; }
#guideDemos .au-svg.win-open .au-flap-r{ transform:rotate(-42deg); }
#guideDemos .au-svg.win-open .au-flap-l{ transform:rotate(42deg); }
#guideDemos .au-svg .au-wind{
fill:none;
stroke:#fff;
stroke-width:2.5;
stroke-linecap:round;
stroke-dasharray:6 8;
opacity:0;
transition:opacity .4s;
}
#guideDemos .au-svg.win-open .au-wind{
opacity:.95;
animation:demoFlow .7s linear infinite;
}
#guideDemos .au-svg .au-hot{
transition:opacity .5s;
}
/* ###################################################################
КОМПАКТНЫЙ ГИД: три раздела раскрываются кнопками-карточками,
вкладки примеров на телефоне — горизонтальная прокрутка
################################################################### */
.guide-menu{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin:6px 0 14px;
}
.gm-tile{
position:relative;
display:flex;
align-items:center;
gap:12px;
width:100%;
box-sizing:border-box;
padding:14px 14px;
text-align:left;
background:#fff;
color:#1f2d1f;
border:2px solid var(--gm, #2e9f55);
border-radius:16px;
box-shadow:0 6px 16px rgba(0,0,0,.08);
cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.gm-tile:hover{
transform:translateY(-3px);
box-shadow:0 10px 22px rgba(0,0,0,.14);
background:#fff;
}
.gm-demos{ --gm:#2e9f55; }
.gm-board{ --gm:#e08a1e; }
.gm-builder{ --gm:#8e5fd6; }
.gm-icon{
flex:none;
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:50%;
background:var(--gm);
color:#fff;
font-size:20px;
box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.gm-text{
flex:1 1 auto;
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
}
.gm-text b{
font-size:15px;
line-height:1.25;
color:var(--gm);
}
.gm-text small{
font-size:12px;
line-height:1.35;
color:#6b7280;
font-weight:500;
}
.gm-arrow{
flex:none;
font-size:18px;
color:var(--gm);
transition:transform .2s ease;
}
.gm-tile.active{
background:var(--gm);
box-shadow:0 10px 24px rgba(0,0,0,.2);
}
.gm-tile.active .gm-text b,
.gm-tile.active .gm-text small,
.gm-tile.active .gm-arrow{
color:#fff;
}
.gm-tile.active .gm-icon{
background:#fff;
color:var(--gm);
}
.gm-tile.active .gm-arrow{
transform:rotate(180deg);
}
/* Раскрывшийся раздел плавно появляется */
.guide-block.gm-open{
animation:demoPanelIn .35s ease;
}
/* Кнопка «Свернуть» у раскрытого раздела */
.gm-close{
position:absolute;
top:12px;
right:12px;
z-index:5;
padding:6px 12px;
background:#fff;
color:#555;
border:1px solid #d5d5d5;
border-radius:999px;
font-size:12px;
font-weight:700;
cursor:pointer;
box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.gm-close:hover{
background:#f3f3f3;
}
#guideDemos, #guideBoardPick, #guideBuilder{
position:relative;
}
@media (max-width:900px){
.guide-menu{
grid-template-columns:1fr;
gap:10px;
}
.gm-close{
top:8px;
right:8px;
}
#guideDemos > .guide-h,
#guideBoardPick > .guide-h,
#guideBuilder > .guide-h{
padding-right:92px;
font-size:18px;
}
}
/* Вкладки примеров на телефоне: без горизонтальной прокрутки.
Группы свёрнуты в компактные заголовки (по нажатию раскрываются и
показывают кнопки-примеры, перенося их по строкам). Открыта та
группа, в которой выбран пример. */
@media (max-width:700px){
#guideDemos .demo-tabs{
gap:6px;
}
#guideDemos .demo-tab-row{
padding:0 10px;
gap:6px;
overflow:hidden;
}
#guideDemos .demo-tab-group{
position:static;
flex:0 0 100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:11px 2px;
font-size:12px;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
#guideDemos .demo-tab-group::after{
content:"▾";
font-size:14px;
transition:transform .2s ease;
}
#guideDemos .demo-tab-row.tg-open .demo-tab-group::after{
transform:rotate(180deg);
}
#guideDemos .demo-tab-row:not(.tg-open) .demo-tab{
display:none;
}
#guideDemos .demo-tab-row.tg-open{
padding-bottom:10px;
}
#guideDemos .demo-tab{
padding:6px 11px;
font-size:12.5px;
}
}
@media (prefers-reduced-motion:reduce){
.guide-block.gm-open{
animation:none;
}
.gm-tile{
transition:none;
}
}
/* ###################################################################
ДВОР И ВЪЕЗД + УМНАЯ АВТОМАТИКА: парковка, сигнализация, обогрев
въезда, почтовый ящик, ворота с защитой, кормушка, дым и газ,
жалюзи, погреб, вытяжка в ванной
################################################################### */
@keyframes auBeep{
0%, 100%{ opacity:.15; transform:scale(.9); }
50%{ opacity:1; transform:scale(1.12); }
}
@keyframes auWavesOut{
0% { opacity:.9; transform:translateX(0); }
100%{ opacity:0; transform:translateX(-14px); }
}
@keyframes auSirenFlash{
0%, 49%{ opacity:1; transform:scale(1.12); }
50%, 100%{ opacity:.35; transform:scale(.92); }
}
@keyframes auLetterDrop{
0% { opacity:0; transform:translateY(0); }
15% { opacity:1; }
80% { opacity:1; }
100%{ opacity:0; transform:translateY(78px); }
}
@keyframes auKibbleFall{
0% { opacity:0; transform:translateY(-4px); }
20% { opacity:1; }
100%{ opacity:0; transform:translateY(16px); }
}
@keyframes auSmokeRise{
0% { opacity:0; transform:translateY(8px) scale(.6); }
25% { opacity:.8; }
100%{ opacity:0; transform:translateY(-34px) scale(1.5); }
}
@keyframes auBellShake{
0%, 100%{ transform:rotate(0deg); }
25%{ transform:rotate(-14deg); }
75%{ transform:rotate(14deg); }
}
@keyframes auShower{
to{ stroke-dashoffset:-20; }
}
#guideDemos .au-svg.is-run .au-fan,
#guideDemos .au-svg.fan-on .au-fan{
animation:demoSpin 1s linear infinite;
}
#guideDemos .au-svg.fan-on .au-rotor{
animation:demoSpin .9s linear infinite;
}
/* ---------- Парковка ---------- */
#guideDemos .au-svg .au-carg{
transition:transform .25s linear;
}
#guideDemos .au-svg .au-waves path{
animation:auWavesOut 1.2s ease-out infinite;
}
#guideDemos .au-svg .au-waves path:nth-child(2){ animation-delay:.25s; }
#guideDemos .au-svg .au-waves path:nth-child(3){ animation-delay:.5s; }
#guideDemos .au-svg .au-beepw{
transform-box:fill-box;
transform-origin:center;
opacity:.25;
}
#guideDemos .au-svg.beep-1 .au-beepw{ animation:auBeep 1.1s ease-in-out infinite; }
#guideDemos .au-svg.beep-2 .au-beepw{ animation:auBeep .55s ease-in-out infinite; }
#guideDemos .au-svg.beep-3 .au-beepw{ animation:auBeep .22s ease-in-out infinite; }
/* ---------- Сигнализация двора ---------- */
#guideDemos .au-svg .au-intr{
transition:transform 1.8s linear;
}
#guideDemos .au-svg.intruder-in .au-intr{
transform:translateX(-148px);
}
#guideDemos .au-svg .au-siren,
#guideDemos .au-svg .au-sirenk{
transform-box:fill-box;
transform-origin:center;
}
#guideDemos .au-svg.alarm .au-siren,
#guideDemos .au-svg.alarm .au-sirenk{
animation:auSirenFlash .5s steps(1, end) infinite;
}
#guideDemos .au-svg.alarm .au-sirenw{
animation:demoSiren .5s steps(1, end) infinite;
}
#guideDemos .au-svg .au-eye{
transition:fill .3s;
}
#guideDemos .au-svg.armed .au-eye{
fill:#34c759;
}
#guideDemos .au-svg.alarm .au-eye{
fill:#ff3b30;
}
#guideDemos .au-svg .au-flood,
#guideDemos .au-svg .au-floodlamp,
#guideDemos .au-svg .au-beam{
transition:opacity .3s;
}
/* ---------- Обогрев въезда ---------- */
#guideDemos .au-svg .au-flakes circle{
opacity:0;
}
#guideDemos .au-svg.is-snowing .au-flakes circle{
animation:demoSnowDrift 3s linear infinite;
opacity:1;
}
#guideDemos .au-svg.is-snowing .au-flakes circle:nth-child(2n){ animation-duration:3.8s; animation-delay:-1s; }
#guideDemos .au-svg.is-snowing .au-flakes circle:nth-child(3n){ animation-duration:4.4s; animation-delay:-2s; }
#guideDemos .au-svg .au-cable{
transition:stroke .4s;
}
#guideDemos .au-svg.heater-on .au-cable{
stroke:#ff4d2e;
filter:drop-shadow(0 0 5px rgba(255,90,50,.95));
}
#guideDemos .au-svg .au-steam{
opacity:0;
}
#guideDemos .au-svg.heater-on .au-steam{
opacity:.9;
animation:auSmokeRise 2.2s ease-out infinite;
}
#guideDemos .au-svg .au-snow{
transition:y .4s, height .4s;
}
/* ---------- Почтовый ящик ---------- */
#guideDemos .au-svg .au-mflag{
transform-box:fill-box;
transform-origin:0% 100%;
transform:rotate(78deg);
transition:transform .6s ease;
}
#guideDemos .au-svg.has-mail .au-mflag{
transform:rotate(0deg);
}
#guideDemos .au-svg.dropping .au-letter{
animation:auLetterDrop 1.3s ease-in;
}
#guideDemos .au-svg.dropping .au-mflap{
animation:auBellShake .6s ease-in-out 2;
transform-box:fill-box;
transform-origin:left center;
}
/* ---------- Кормушка ---------- */
#guideDemos .au-svg.dispensing .au-rotor{
animation:demoSpin .5s linear infinite;
}
#guideDemos .au-svg.dispensing .au-kibble{
animation:auKibbleFall .9s ease-in infinite;
}
#guideDemos .au-svg.dispensing .au-kibble.k2{ animation-delay:.2s; }
#guideDemos .au-svg.dispensing .au-kibble.k3{ animation-delay:.4s; }
#guideDemos .au-svg .au-dog{
transition:transform 1.2s ease;
}
/* ---------- Дым и газ ---------- */
#guideDemos .au-svg .au-smoke circle{
opacity:0;
}
#guideDemos .au-svg.has-smoke .au-smoke circle{
animation:auSmokeRise 2s ease-out infinite;
transform-box:fill-box;
transform-origin:center;
}
#guideDemos .au-svg.has-smoke .au-smoke circle:nth-child(2){ animation-delay:.6s; }
#guideDemos .au-svg.has-smoke .au-smoke circle:nth-child(3){ animation-delay:1.2s; }
#guideDemos .au-svg .au-gasc{
opacity:0;
transition:opacity .4s;
}
#guideDemos .au-svg.has-gas .au-gasc{
opacity:.75;
}
#guideDemos .au-svg .au-fire{
transition:opacity .3s;
}
#guideDemos .au-svg.has-smoke .au-fire{
opacity:1;
}
/* ---------- Погреб ---------- */
#guideDemos .au-svg .au-cold{
transition:opacity .5s;
}
#guideDemos .au-svg.alarm .au-alarmc text{
animation:auBellShake .4s ease-in-out infinite;
transform-box:fill-box;
transform-origin:center top;
}
/* ---------- Ванная ---------- */
#guideDemos .au-svg.shower-on .au-shower{
animation:auShower .5s linear infinite;
}
#guideDemos .au-svg.fan-on .au-airout{
animation:demoFlow .6s linear infinite;
}
#guideDemos .au-svg .au-fog,
#guideDemos .au-svg .au-steamb{
transition:opacity .5s;
}
/* ---------- Жалюзи / комната ---------- */
#guideDemos .au-svg .au-lightbeam,
#guideDemos .au-svg .au-hotroom{
transition:opacity .5s;
}
@media (prefers-reduced-motion:reduce){
#guideDemos .au-svg .au-waves path,
#guideDemos .au-svg .au-smoke circle{
animation:none !important;
}
}
/* ###################################################################
Курятник: настоящие куры, петух и цыплята
################################################################### */
@keyframes haWalk{
0% { transform:translateX(0) scaleX(1); }
49% { transform:translateX(20px) scaleX(1); }
50% { transform:translateX(20px) scaleX(-1); }
99% { transform:translateX(0) scaleX(-1); }
100%{ transform:translateX(0) scaleX(1); }
}
@keyframes haPeck{
0%, 55%, 100%{ transform:rotate(0deg); }
65%{ transform:rotate(40deg); }
75%{ transform:rotate(2deg); }
85%{ transform:rotate(40deg); }
}
/* Пока дверца закрыта — птицы растворяются на месте, затем незаметно
возвращаются к дверце; открылась — выходят по двору */
#guideDemos .au-svg .ha-g{
opacity:0;
transform:translateX(0);
transition:opacity .6s ease, transform 0s linear .7s;
}
#guideDemos .au-svg.door-open .ha-g{
opacity:1;
transform:translateX(var(--dx));
transition:opacity .5s ease, transform 2.8s ease-out;
}
#guideDemos .au-svg .hen-walk,
#guideDemos .au-svg .hen-peck{
transform-box:fill-box;
}
#guideDemos .au-svg .hen-walk{ transform-origin:center; }
#guideDemos .au-svg .hen-peck{ transform-origin:0% 100%; }
#guideDemos .au-svg.is-run.door-open .hen-walk{
animation:haWalk 9s linear infinite;
}
#guideDemos .au-svg.is-run.door-open .hen-walk.hen-fast{
animation-duration:5.2s;
}
#guideDemos .au-svg.is-run.door-open .hen-peck{
animation:haPeck 2.6s ease-in-out infinite;
}
/* Спящая курица в окошке видна, пока дверца закрыта */
#guideDemos .au-svg .ha-win{
opacity:0;
transition:opacity .6s ease;
}
#guideDemos .au-svg:not(.door-open) .ha-win{
opacity:1;
}
@media (prefers-reduced-motion:reduce){
#guideDemos .au-svg .hen-walk,
#guideDemos .au-svg .hen-peck{
animation:none !important;
}
}
/* ---------- Тип силовых ключей: фото + короткое пояснение ---------- */
.powerkey-info{
display:flex;
gap:10px;
align-items:flex-start;
margin:0 0 12px 20px;
}
.powerkey-info img{
flex:0 0 auto;
width:96px;
height:72px;
object-fit:cover;
background:#fff;
border:1px solid #cfe3d6;
border-radius:6px;
transition:transform .2s ease, box-shadow .2s ease;
transform-origin:left center;
position:relative;
}
.powerkey-info img:hover{
transform:scale(2.2);
z-index:5;
box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.powerkey-info .led-pwm-explain{
flex:1;
margin:0;
}
@media (max-width:420px){
.powerkey-info{ margin-left:8px; }
.powerkey-info img{ width:80px; height:60px; }
}
/* ---------- Кнопка «Свернуть» внизу раскрытого раздела ---------- */
.collapse-close-row{
display:none;
justify-content:flex-end;
margin:10px 4px 2px;
}
[id$="Wrap"][style*="display: block"] + .collapse-close-row{
display:flex;
}
.collapse-close{
padding:6px 14px;
background:#fff;
color:#555;
border:1px solid #d5d5d5;
border-radius:999px;
font-size:12px;
font-weight:700;
cursor:pointer;
box-shadow:0 2px 6px rgba(0,0,0,.08);
width:auto;
margin:0;
}
.collapse-close:hover{
background:#f3f3f3;
}
/* ---------- «Какая плата мне подходит»: выбрать предложенную плату ---------- */
#guideBoardPick .bp-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:12px 0 0;
}
#guideBoardPick .bp-use,
#guideBoardPick .bp-self{
width:auto;
margin:0;
padding:9px 16px;
border-radius:999px;
font-size:14px;
font-weight:700;
cursor:pointer;
}
#guideBoardPick .bp-use{
background:#2e9b57;
color:#fff;
border:1px solid #23804a;
box-shadow:0 2px 6px rgba(35,128,74,.3);
}
#guideBoardPick .bp-use:hover{
background:#278a4c;
}
#guideBoardPick .bp-self{
background:#fff;
color:#444;
border:1px solid #c9d3cc;
}
#guideBoardPick .bp-self:hover{
background:#f3f6f4;
}
#guideBoardPick .bp-picked{
margin:10px 0 0;
padding:8px 12px;
background:#e8f6ed;
border-left:3px solid #2e9b57;
border-radius:6px;
font-size:13px;
line-height:1.45;
color:#1f5d38;
}
#guideBoardPick .bp-picked[hidden]{
display:none;
}
/* ---------- Описание под гидом (то же поле, что в разделе «Контроллер») ---------- */
.guide-desc-box{
margin:12px 0 4px;
}
.guide-desc-box textarea{
display:block;
width:100%;
min-height:96px;
box-sizing:border-box;
resize:vertical;
}
/* ---------- «Какая плата мне подходит»: кнопки «дышат» ---------- */
@keyframes bpBreathe{
0%, 100%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(245,124,0,.55), 0 3px 8px rgba(245,124,0,.30);
}
50%{
transform:scale(1.045);
box-shadow:0 0 0 9px rgba(245,124,0,0), 0 5px 16px rgba(245,124,0,.45);
}
}
#guideBoardPick .bp-use{
background:linear-gradient(180deg,#ffa726,#f57c00);
border:1px solid #e06c00;
color:#fff;
text-shadow:0 1px 1px rgba(0,0,0,.2);
animation:bpBreathe 2s ease-in-out infinite;
}
#guideBoardPick .bp-use:hover{
background:linear-gradient(180deg,#ffb74d,#ef6c00);
}
#guideBoardPick .bp-self{
background:#fff8ee;
color:#b45f00;
border:2px solid #f5a54a;
animation:bpBreathe 2s ease-in-out infinite;
animation-delay:.5s;
}
#guideBoardPick .bp-self:hover{
background:#ffeed6;
}
#guideBoardPick .bp-use:hover,
#guideBoardPick .bp-self:hover,
#guideBoardPick .bp-use:focus-visible,
#guideBoardPick .bp-self:focus-visible{
animation-play-state:paused;
transform:scale(1.045);
}
@media (prefers-reduced-motion:reduce){
#guideBoardPick .bp-use,
#guideBoardPick .bp-self{
animation:none;
}
}
.guide-cta[hidden],
.guide-desc-box[hidden]{
display:none !important;
}
/* Кнопка «Свернуть» внизу справа в разделах гида */
.gm-close-row{
display:flex;
justify-content:flex-end;
margin:14px 0 0;
}
.gm-close-row .gm-close{
position:static;
}
/* ---------- Пояснения под чекбоксами: крупнее, особенно на телефоне ---------- */
.led-pwm-explain{
font-size:13.5px;
line-height:1.55;
}
@media (max-width:700px){
.led-pwm-explain{
font-size:15.5px;
line-height:1.6;
padding:9px 12px;
margin-left:12px;
}
.powerkey-info img{
width:104px;
height:78px;
}
}
#guideBoardResult{
scroll-margin-top:10px;
}
/* ---------- Гид («Вам сюда, если…» и разделы): крупнее на телефоне ---------- */
@media (max-width:700px){
#beginnerGuide .guide-h{
font-size:22px;
}
#beginnerGuide .guide-text,
#guideDemos > .guide-text{
font-size:17px;
line-height:1.65;
}
#beginnerGuide .gm-text b{
font-size:18px;
}
#beginnerGuide .gm-text small{
font-size:15px;
line-height:1.4;
}
#beginnerGuide .gb-chip small,
#beginnerGuide .guide-chip small{
font-size:14.5px;
line-height:1.4;
}
#beginnerGuide .gb-chip-name{
font-size:16.5px;
}
#guideBoardPick .bp-reason,
#guideBoardPick .bp-why li,
#guideBoardPick .bp-alt span{
font-size:16px;
line-height:1.55;
}
#guideBoardPick .bp-note{
font-size:14px;
}
#beginnerGuide .gb-presets-title{
font-size:16px;
}
#beginnerGuide .gb-preset{
font-size:15.5px;
}
}
/* ---------- «Что значит красный цвет» (в блоке «Уважаемый заказчик!») ---------- */
.intro-red-note{
margin:16px 0 4px;
padding:14px 16px;
background:#fff3f3;
border:2px solid #e74c3c;
border-left-width:8px;
border-radius:10px;
text-align:left;
box-shadow:0 0 0 0 rgba(231,76,60,.35);
animation:introRedNotePulse 2.4s ease-in-out infinite;
}
.intro-red-title{
color:#c0392b;
font-size:18px;
font-weight:800;
margin:0 0 8px;
}
.intro-red-note ul{
margin:0;
padding-left:20px;
color:#222;
font-size:15px;
line-height:1.55;
}
.intro-red-note li{
margin:0 0 6px;
}
.intro-red-note li:last-child{
margin-bottom:0;
}
@keyframes introRedNotePulse{
0%, 100%{ box-shadow:0 0 0 0 rgba(231,76,60,.30); animation-timing-function:steps(10, end); }
50%{ box-shadow:0 0 0 8px rgba(231,76,60,0); animation-timing-function:steps(10, end); }
}
@media (max-width:700px){
.intro-red-title{ font-size:19px; }
.intro-red-note ul{ font-size:16.5px; line-height:1.6; }
}
@media (prefers-reduced-motion:reduce){
.intro-red-note{ animation:none; }
}
/* ---------- Выбор светодиода прямо под пунктом (Мониторинг / Диагностика) ---------- */
.feature-led-pick{
display:none;
flex-wrap:wrap;
gap:8px;
margin:8px 0 12px 20px;
padding:8px 10px;
background:#f7f9f7;
border:2px solid #cfe3d6;
border-radius:10px;
}
.feature-led-pick.pending{
border-color:#e74c3c;
background:#fff3f3;
animation:requiredFieldPulse 1.5s ease-in-out infinite;
}
.feature-led-opt{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
background:#fff;
border:1px solid #d5d5d5;
border-radius:8px;
font-size:14px;
cursor:pointer;
}
.feature-led-opt input{
margin:0;
}
@media (max-width:700px){
.feature-led-opt{ font-size:15.5px; padding:8px 12px; }
}
@media (prefers-reduced-motion:reduce){
.feature-led-pick.pending{ animation:none; }
}
/* ---------- Выбор светодиода под пунктом: количество и подписи ---------- */
.feature-led-item{
display:inline-flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.feature-led-qtywrap{
display:none;
align-items:center;
gap:4px;
font-size:14px;
color:#444;
}
.feature-led-qty{
width:58px;
padding:5px 6px;
font-size:14px;
text-align:center;
border:1px solid #bbb;
border-radius:6px;
}
.feature-led-note{
flex:1 1 100%;
margin:2px 0 0;
padding:6px 10px;
background:#e8f6ed;
border-left:3px solid #2e9b57;
border-radius:6px;
font-size:14px;
color:#1f5d38;
}
.led-lock-note{
pointer-events:none;
display:none;
margin:6px 0 0;
padding:6px 10px;
background:#fff3f3;
border-left:3px solid #e74c3c;
border-radius:6px;
font-size:13.5px;
color:#a93226;
}
.led-lock-note.visible{
display:block;
}
@media (max-width:700px){
.feature-led-qtywrap{ font-size:15.5px; }
.feature-led-qty{ width:64px; font-size:16px; padding:7px 6px; }
.feature-led-note{ font-size:15.5px; }
.led-lock-note{ font-size:15px; }
}
.feature-led-item.on .feature-led-qtywrap{
display:inline-flex;
}
/* Выбранный светодиод: галочка и «Шт.» — в одной общей рамке */
.feature-led-item{
border:2px solid transparent;
border-radius:10px;
padding:2px;
transition:border-color .15s, background .15s;
}
.feature-led-item.on{
border-color:#2e9b57;
background:#e8f6ed;
box-shadow:0 0 0 3px rgba(46,155,87,.15);
padding:2px 8px 2px 2px;
}
.feature-led-item.on .feature-led-opt{
background:transparent;
border-color:transparent;
font-weight:700;
color:#1f5d38;
}
.feature-led-item.on .feature-led-qty{
border-color:#2e9b57;
}
/* Варианты светодиодов — в столбик, как «Количество светодиодов на плате» */
.feature-led-pick{
flex-direction:column;
flex-wrap:nowrap;
align-items:stretch;
gap:6px;
}
.feature-led-item{
display:flex;
width:100%;
box-sizing:border-box;
align-items:center;
justify-content:space-between;
gap:8px;
flex-wrap:nowrap;
}
.feature-led-item .feature-led-opt{
flex:1 1 auto;
min-width:0;
}
.feature-led-item.on .feature-led-qtywrap{
flex:0 0 auto;
}
.feature-led-note{
flex:0 0 auto;
}
/* Выбранный светодиод: короткая рамка — «Шт.» вплотную к названию */
.feature-led-item.on{
width:fit-content;
max-width:100%;
align-self:flex-start;
justify-content:flex-start;
gap:2px;
}
.feature-led-item.on .feature-led-opt{
flex:0 0 auto;
}
/* Красная рамка выбора (пока светодиод не выбран) — тоже короткая, по ширине содержимого */
.feature-led-pick{
width:fit-content;
max-width:calc(100% - 20px);
box-sizing:border-box;
}
.feature-led-pick .feature-led-item{
width:auto;
}
.feature-led-pick .feature-led-note{
max-width:100%;
}
/* ---------- Пояснение под каждым вариантом светодиода ---------- */
.feature-led-item{
flex-wrap:wrap;
}
.feature-led-desc{
flex:1 1 100%;
display:flex;
align-items:center;
gap:10px;
margin:0 4px 2px 4px;
max-width:300px;
font-size:13px;
line-height:1.4;
color:#555;
}
.feature-led-item.on .feature-led-desc{
color:#1f5d38;
}
.led-sample{
flex:0 0 auto;
width:22px;
height:22px;
border-radius:50%;
background:#e53935;
box-shadow:0 0 8px 2px rgba(229,57,53,.55);
}
/* Светодиод — просто горит / не горит */
.led-sample.s-led33{
animation:ledSampleOnOff 1.8s steps(1, end) infinite;
}
/* RGB — меняет цвет (на полной яркости) */
.led-sample.s-ledRGB{
animation:ledSampleColors 3.6s steps(1, end) infinite;
}
/* PWM — один цвет, яркость меняется плавно */
.led-sample.s-LedPWM{
animation:ledSampleBreathe 2.4s ease-in-out infinite;
}
/* RGB (PWM) — цвет и яркость меняются плавно */
.led-sample.s-LedRGBPWM{
animation:ledSampleColorsSmooth 6s linear infinite, ledSampleBreathe 2.4s ease-in-out infinite;
}
@keyframes ledSampleOnOff{
0% { background:#e53935; box-shadow:0 0 8px 2px rgba(229,57,53,.55); }
50% { background:#5a5a5a; box-shadow:none; }
}
@keyframes ledSampleColors{
0% { background:#e53935; box-shadow:0 0 8px 2px rgba(229,57,53,.55); }
33% { background:#2e9b57; box-shadow:0 0 8px 2px rgba(46,155,87,.55); }
66% { background:#2f6fe4; box-shadow:0 0 8px 2px rgba(47,111,228,.55); }
}
@keyframes ledSampleBreathe{
0%, 100%{ opacity:.25; }
50%{ opacity:1; }
}
@keyframes ledSampleColorsSmooth{
0% { background:#e53935; box-shadow:0 0 8px 2px rgba(229,57,53,.55); }
33% { background:#2e9b57; box-shadow:0 0 8px 2px rgba(46,155,87,.55); }
66% { background:#2f6fe4; box-shadow:0 0 8px 2px rgba(47,111,228,.55); }
100% { background:#e53935; box-shadow:0 0 8px 2px rgba(229,57,53,.55); }
}
@media (max-width:700px){
.feature-led-desc{ font-size:14.5px; max-width:none; }
.led-sample{ width:26px; height:26px; }
}
@media (prefers-reduced-motion:reduce){
.led-sample{ animation:none !important; }
}
/* Предупреждение «занимает 3 пина» у RGB-светодиодов */
.feature-led-pins{
flex:1 1 100%;
margin:0 4px 4px 4px;
padding:5px 10px;
max-width:300px;
background:#fff4e0;
border-left:3px solid #f5a54a;
border-radius:6px;
font-size:13px;
line-height:1.4;
color:#8a5200;
}
@media (max-width:700px){
.feature-led-pins{ font-size:14.5px; max-width:none; }
}
/* «Занимает 3 пина» — компактная строка под описанием, без рамки */
.feature-led-pins{
flex:1 1 100%;
margin:-2px 4px 4px 40px;
padding:0;
max-width:300px;
background:none;
border:0;
border-radius:0;
font-size:12.5px;
line-height:1.3;
color:#8a5200;
}
@media (max-width:700px){
.feature-led-pins{ font-size:13.5px; max-width:none; margin-left:44px; }
}
/* «Занимает 3 пина» — сразу под галочкой светодиода, выше описания */
.feature-led-item .feature-led-opt,
.feature-led-item .feature-led-qtywrap{
order:0;
}
.feature-led-item .feature-led-pins{
order:1;
margin:-2px 4px 2px 30px;
}
.feature-led-item .feature-led-desc{
order:2;
}
@media (max-width:700px){
.feature-led-item .feature-led-pins{ margin-left:30px; }
}
/* «Занимает 3 пина» — аккуратная плашка сразу под галочкой */
.feature-led-item .feature-led-pins{
order:1;
flex:1 1 100%;
margin:2px 4px 4px 28px;
padding:0;
max-width:none;
background:none;
border:0;
color:inherit;
}
.pins-pill{
display:inline-flex;
align-items:center;
gap:7px;
padding:3px 11px 3px 9px;
background:#fff4e0;
border:1px solid #f1c27d;
border-radius:999px;
font-size:12.5px;
font-weight:600;
line-height:1.2;
color:#8a5200;
white-space:nowrap;
}
.pin-dots{
display:inline-flex;
gap:3px;
}
.pin-dots i{
display:block;
width:9px;
height:9px;
border-radius:50%;
}
.pin-dots .pin-r{ background:#e53935; }
.pin-dots .pin-g{ background:#2e9b57; }
.pin-dots .pin-b{ background:#2f6fe4; }
@media (max-width:700px){
.pins-pill{ font-size:14px; }
.pin-dots i{ width:10px; height:10px; }
}
/* Плашка «3 пина» и описание — под галочкой, по одной левой линии, описание как у обычного «Светодиод» */
.feature-led-item .feature-led-pins{
margin:0 4px 2px 8px;
}
.feature-led-item .feature-led-desc{
align-items:flex-start;
margin:0 4px 2px 8px;
}
.feature-led-desc .led-sample{
margin-top:1px;
}
/* Белая плашка с галочкой — по ширине названия, а не на всю рамку */
.feature-led-item .feature-led-opt{
flex:0 0 auto;
width:auto;
}
.feature-led-item{
justify-content:flex-start;
}
/* Плашка «3 пина» — в одной строке с галочкой (справа), а описание стоит точно так же, как у обычного «Светодиод» */
.feature-led-item .feature-led-pins{
order:1;
flex:0 0 auto;
margin:0 0 0 2px;
}
.feature-led-item .feature-led-desc{
order:2;
flex:1 1 100%;
}
/* Между плашкой «3 пина» и описанием — такой же просвет, как между галочкой и описанием у обычного светодиода */
.feature-led-item .feature-led-pins{
margin:0 0 10px 8px;
}
/* Порядок под галочкой: сначала описание (как у обычного светодиода), ниже плашка «3 пина» */
.feature-led-item .feature-led-desc{
order:1;
}
.feature-led-item .feature-led-pins{
order:2;
margin:2px 0 8px 8px;
}
/* Узкий экран: «Шт.» ложится под название ровно (по левой линии), плашка «3 пина» не вылезает из рамки */
.feature-led-item .feature-led-pins{
max-width:100%;
box-sizing:border-box;
}
.pins-pill{
max-width:100%;
box-sizing:border-box;
}
@media (max-width:700px){
.feature-led-item.on .feature-led-qtywrap{
margin-left:8px;
}
.pins-pill{
white-space:normal;
font-size:13px;
}
.feature-led-item .feature-led-pins{
margin-right:6px;
}
}
@media (max-width:700px){
.feature-led-item.on .feature-led-qtywrap{
margin:2px 0 8px 8px;
}
}
/* Выбранный светодиод: название и «Шт.» в одну строку и у длинного «RGB (PWM)» — плотнее */
.feature-led-item.on .feature-led-opt{
padding:4px 4px 4px 6px;
gap:5px;
font-size:15px;
}
.feature-led-item.on .feature-led-qtywrap{
gap:3px;
font-size:14px;
}
.feature-led-item.on .feature-led-qty{
width:48px;
padding:4px 3px;
}
@media (max-width:700px){
.feature-led-item.on .feature-led-opt{ font-size:15px; }
.feature-led-item.on .feature-led-qtywrap{
font-size:14.5px;
margin:0;
}
.feature-led-item.on .feature-led-qty{
width:50px;
font-size:15px;
}
}
/* Ещё плотнее, чтобы «Светодиод RGB (PWM)» вставал в одну строку с «Шт.» так же, как «Светодиод RGB» */
.feature-led-item.on .feature-led-opt,
.feature-led-item.on .feature-led-opt span{
font-size:14.5px;
}
.feature-led-item.on .feature-led-opt{
padding:4px 2px 4px 5px;
gap:4px;
}
.feature-led-item.on .feature-led-qtywrap{
gap:2px;
font-size:13.5px;
margin:0;
}
.feature-led-item.on .feature-led-qty{
width:42px;
font-size:14.5px;
padding:4px 2px;
}
/* Почему минимум больше 1 */
.feature-led-item .feature-led-min{
order:3;
flex:1 1 100%;
margin:0 4px 6px 8px;
padding:4px 10px;
max-width:300px;
background:#eef3fb;
border-left:3px solid #7a9bd6;
border-radius:6px;
font-size:12.5px;
line-height:1.4;
color:#2f4a7a;
}
.feature-led-item .feature-led-min::before{
content:"ℹ️ ";
}
@media (max-width:700px){
.feature-led-item .feature-led-min{ font-size:14px; max-width:none; margin-right:6px; }
}
/* ---------- «Диагностика подключения» — раскрывающаяся кнопка внутри «Работа с Esp» ---------- */
#cardDiag .sub-toggle{
width:100%;
margin:6px 0 8px;
}
#diagWrap{
padding-top:2px;
}
/* «Диагностика подключения» — вложенная кнопка: короче, с отступом и другим цветом (синий), чтобы было видно, что это подпункт «Работа с Esp» */
#cardDiag #diagToggle{
width:calc(100% - 28px);
margin:8px 0 8px 28px;
padding-top:9px;
padding-bottom:9px;
font-size:15.5px;
border-radius:12px;
}
#cardDiag #diagToggle:not(.toggle-alert){
background:linear-gradient(135deg,#2f80d1,#1b4f9c);
box-shadow:0 3px 8px rgba(27,79,156,.3);
}
#cardDiag #diagToggle:not(.toggle-alert):hover{
filter:brightness(1.07);
}
@media (max-width:700px){
#cardDiag #diagToggle{
width:calc(100% - 20px);
margin-left:20px;
font-size:16px;
}
}
/* «Диагностика подключения»: правильное место в последовательности (линия сверху, как у остальных подпунктов) и значок после названия */
#espNetworkWrap #cardDiag{
margin-top:14px;
padding-top:10px;
border-top:1px solid #43ec4c;
}
#cardDiag #diagToggle{
margin-top:2px;
}
.diag-badge{
display:inline-flex;
align-items:center;
gap:5px;
margin:0 auto 0 10px;
padding:2px 9px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.35);
border-radius:999px;
font-size:13px;
font-weight:700;
line-height:1.3;
color:#fff;
}
.diag-badge .diag-ico{
opacity:.8;
}
.diag-badge.active{
background:rgba(255,255,255,.3);
}
.diag-badge.active .diag-ico{
opacity:1;
animation:diagSignal 1.8s ease-in-out infinite;
}
.diag-count{
min-width:18px;
padding:0 5px;
background:#fff;
color:#1b4f9c;
border-radius:999px;
text-align:center;
}
#diagToggle.toggle-alert .diag-count{
color:#b71c1c;
}
@keyframes diagSignal{
0%, 100%{ transform:scale(1); opacity:1; }
50%{ transform:scale(1.2); opacity:.6; }
}
@media (prefers-reduced-motion:reduce){
.diag-badge.active .diag-ico{ animation:none; }
}
/* ---------- Подпункты «Работа с Esp» — раскрывающиеся кнопки (диагностика — синяя, остальные — бирюзовые) ---------- */
#espNetworkWrap .sub-toggle{
width:calc(100% - 28px);
margin:8px 0 8px 28px;
padding-top:9px;
padding-bottom:9px;
font-size:15.5px;
border-radius:12px;
}
#espNetworkWrap .sub-teal:not(.toggle-alert){
background:linear-gradient(135deg,#1aa39a,#0b6e68);
box-shadow:0 3px 8px rgba(11,110,104,.3);
}
#espNetworkWrap .sub-teal:not(.toggle-alert):hover{
filter:brightness(1.07);
}
#espNetworkWrap > .card + .card,
#espNetworkWrap > .card{
margin-top:14px;
padding-top:10px;
border-top:1px solid #43ec4c;
}
#espNetworkWrap > .card:first-child{
margin-top:0;
padding-top:0;
border-top:none;
}
.sub-count .diag-ico{ opacity:.9; }
.sub-count:not(.active){
background:rgba(255,255,255,.12);
}
.sub-count.active .diag-ico{ animation:none; }
@media (max-width:700px){
#espNetworkWrap .sub-toggle{
width:calc(100% - 20px);
margin-left:20px;
font-size:16px;
}
}
#espNetworkWrap > .card{
border-radius:0;
}
/* Кнопки подпунктов «Работа с Esp» — короче: по ширине содержимого */
#espNetworkWrap .sub-toggle,
#cardDiag #diagToggle{
width:fit-content;
min-width:230px;
max-width:calc(100% - 28px);
gap:10px;
justify-content:flex-start;
padding-left:16px;
padding-right:14px;
}
#espNetworkWrap .sub-toggle > span:last-child{
margin-left:auto;
}
@media (max-width:700px){
#espNetworkWrap .sub-toggle,
#cardDiag #diagToggle{
width:fit-content;
min-width:0;
max-width:calc(100% - 20px);
}
}
#espNetworkWrap .sub-toggle > span:first-child{
text-align:left;
}
/* ---------- Все кнопки подпунктов «Работа с Esp» — одной длины; под ними — что выбрано ---------- */
#espNetworkWrap .sub-toggle,
#cardDiag #diagToggle{
width:min(300px, calc(100% - 28px));
min-width:0;
max-width:none;
justify-content:flex-start;
}
@media (max-width:700px){
#espNetworkWrap .sub-toggle,
#cardDiag #diagToggle{
width:calc(100% - 20px);
max-width:none;
}
}
.sub-chosen{
display:none;
flex-wrap:wrap;
gap:6px;
margin:0 0 8px 28px;
}
.sub-chip{
display:inline-flex;
align-items:center;
gap:4px;
padding:3px 10px;
background:#e6f6f4;
border:1px solid #8fd0c9;
border-radius:999px;
font-size:13px;
font-weight:600;
color:#0b5a55;
white-space:nowrap;
}
.sub-chip-diag{
background:#e8f0fb;
border-color:#9bbbe6;
color:#1b4f9c;
}
@media (max-width:700px){
.sub-chosen{ margin-left:20px; }
.sub-chip{ font-size:14.5px; padding:4px 11px; }
}
/* Все пять кнопок — строго одинаковой ширины и с одинаковым отступом */
#espNetworkWrap .sub-toggle,
#espNetworkWrap #cardDiag #diagToggle{
box-sizing:border-box;
margin-left:28px;
margin-right:0;
}
@media (max-width:700px){
#espNetworkWrap .sub-toggle,
#espNetworkWrap #cardDiag #diagToggle{
margin-left:20px;
width:calc(100% - 20px);
}
}
.sub-chip-mode{
display:inline-flex;
align-items:center;
gap:3px;
margin-left:2px;
padding-left:8px;
border-left:1px solid currentColor;
font-weight:700;
}
/* Дублирующая кнопка «Переключатель Arduino ⇄ ESP» между семействами в списке контроллеров */
.switch-family-mid{
display:block;
margin:10px 0;
width:auto;
transition:transform .15s, box-shadow .15s, filter .15s;
}
.switch-family-mid:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,.20);
filter:brightness(1.05);
}
.switch-family-mid:active{
transform:translateY(0);
}
/* Выбранное сейчас семейство на кнопке «Arduino ⇄ ESP» — белая плашка, второе приглушено */
#switchFamilyBtn .fam,
.switch-family-mid .fam{
display:inline-block;
padding:1px 9px;
border-radius:999px;
opacity:.7;
transition:background .2s, color .2s, opacity .2s;
}
#switchFamilyBtn .fam.on,
.switch-family-mid .fam.on{
background:#fff;
color:#1f6f3d;
opacity:1;
font-weight:800;
box-shadow:0 1px 4px rgba(0,0,0,.25);
}
/* Выбранный контроллер: подсвечена вся строка (название, фото и описание), чтобы описание легко читалось */
.controller-opt:has(input[name="controller"]:checked){
background:#e8f6ec;
box-shadow:inset 0 0 0 2px #2e9e57;
}
.controller-opt:has(input[name="controller"]:checked) .controller-name{
color:#14532d;
}
.controller-opt:has(input[name="controller"]:checked) .controller-info{
color:#1f3d2b;
font-size:.9em;
}
/* Поля описания («что должен делать контроллер», «Другой» и описания в карточках) — выше, чтобы текст было удобно вводить и читать */
#description,
#drugojcontroller,
textarea[id$="Description"]{
min-height:130px;
line-height:1.4;
font-size:16px;
}
@media (max-width:700px){
#description,
#drugojcontroller,
textarea[id$="Description"]{
min-height:150px;
font-size:16px;
}
}
/* ---------- Кнопки языка: надёжное нажатие на телефоне и компьютере ---------- */
.lang-btn{
touch-action:manipulation;
-webkit-tap-highlight-color:rgba(238,13,182,.25);
user-select:none;
-webkit-user-select:none;
}
/* hover-подъём только там, где есть мышь: на телефоне после касания он «залипает» */
@media (hover:none){
.lang-btn:hover{ transform:none; }
.lang-btn.active:hover{ transform:scale(1.08); }
}
.lang-btn:active{
transform:scale(.94);
filter:brightness(1.1);
}
/* Подтверждение выбора языка */
.lang-toast{
position:fixed;
left:50%;
top:18px;
transform:translate(-50%,-30px);
z-index:10001;
max-width:calc(100% - 32px);
padding:12px 22px;
background:#1f6f3d;
color:#fff;
font-size:17px;
font-weight:700;
border-radius:999px;
box-shadow:0 8px 24px rgba(0,0,0,.35);
opacity:0;
pointer-events:none;
transition:opacity .2s, transform .2s;
text-align:center;
}
.lang-toast.show{
opacity:1;
transform:translate(-50%,0);
}
/* ---------- Выбранная плата в кнопке «Контроллер» ---------- */
.ctrl-chosen{
display:inline-block;
min-width:0;
max-width:55%;
margin:0 auto 0 10px;
padding:3px 12px;
background:#fff;
color:#1f6f3d;
border-radius:999px;
font-size:14px;
font-weight:800;
line-height:1.3;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.ctrl-chosen[hidden]{ display:none; }
/* Последний пункт «Что значит красный цвет» (кнопка «Отправить заявку» станет доступна…) — крупнее и жирно */
.intro-red-note li:last-child{
margin-top:10px;
font-size:1.2em;
font-weight:800;
line-height:1.4;
color:#b71c1c;
}
@media (max-width:700px){
.intro-red-note li:last-child{ font-size:1.18em; }
}
/* Выбран один светодиод — остальные варианты скрыты до снятия галочки */
.feature-led-item.led-hidden{
display:none !important;
}
/* ---------- Названия пунктов с чекбоксами выделены (не сливаются с описанием под ними) ---------- */
label:has(> input.calc[type="checkbox"]):has(+ .led-pwm-explain){
display:flex;
align-items:center;
gap:8px;
margin:12px 0 0;
padding:8px 12px;
background:#e3f3e8;
border:1px solid #b9dcc4;
border-left:5px solid #2e9f55;
border-radius:8px 8px 0 0;
font-size:16.5px;
font-weight:800;
color:#14532d;
cursor:pointer;
transition:background .15s, border-color .15s;
}
label:has(> input.calc[type="checkbox"]):has(+ .led-pwm-explain):hover{
background:#d8eedf;
}
/* Отмеченный пункт — ярче */
label:has(> input.calc[type="checkbox"]:checked):has(+ .led-pwm-explain){
background:#c9ecd4;
border-color:#2e9f55;
box-shadow:0 1px 4px rgba(46,159,85,.25);
}
label:has(> input.calc[type="checkbox"]):has(+ .led-pwm-explain) input{
flex:0 0 auto;
width:20px;
height:20px;
margin:0;
}
/* Описание сразу под названием — одним блоком с ним, светлее и тоньше */
label:has(> input.calc[type="checkbox"]) + .led-pwm-explain{
margin:0 0 6px;
border:1px solid #d6e6db;
border-top:none;
border-left:5px solid #cfe3d6;
border-radius:0 0 8px 8px;
font-weight:400;
color:#555;
}
@media (max-width:700px){
label:has(> input.calc[type="checkbox"]):has(+ .led-pwm-explain){
font-size:17.5px;
padding:10px 12px;
}
label:has(> input.calc[type="checkbox"]) + .led-pwm-explain{
margin-left:0;
}
}
/* ---------- «Не требуются» — тоже выделено, но нейтральной серо-синей плашкой (это отказ, а не выбор функции) ---------- */
label:has(> input.calc[type="checkbox"][data-id="none"]){
display:flex;
align-items:center;
gap:8px;
margin:12px 0 6px;
padding:8px 12px;
background:#eceff3;
border:1px dashed #9aa5b1;
border-left:5px solid #7b8794;
border-radius:8px;
font-size:16px;
font-weight:700;
color:#3e4c59;
cursor:pointer;
transition:background .15s, border-color .15s;
}
label:has(> input.calc[type="checkbox"][data-id="none"]):hover{
background:#e1e6ec;
}
label:has(> input.calc[type="checkbox"][data-id="none"]:checked){
background:#d5dce4;
border-style:solid;
border-color:#52606d;
color:#1f2933;
}
label:has(> input.calc[type="checkbox"][data-id="none"]) input{
flex:0 0 auto;
width:20px;
height:20px;
margin:0;
}
@media (max-width:700px){
label:has(> input.calc[type="checkbox"][data-id="none"]){
font-size:17px;
padding:10px 12px;
}
}
/* ---------- Выбор дисплея прямо под пунктом (на основе рамки выбора светодиода) ---------- */
.feature-display-pick{
flex-direction:column;
align-items:stretch;
}
.feature-display-item.on .feature-led-opt{
background:#e3f3e8;
}
/* экран выбранного дисплея — прямо в рамке, а не всплывающим окошком */
.feature-display-item .display-preview{
display:flex;
position:static;
transform:none;
margin:8px 0 2px 28px;
box-shadow:none;
max-width:calc(100% - 28px);
box-sizing:border-box;
overflow:hidden;
}
@media (max-width:700px){
.feature-display-item .display-preview{ margin-left:4px; max-width:100%; }
.feature-display-item .display-preview-screen{ font-size:12.5px; }
}
/* ---------- Тип управления светодиодами: красная рамка вокруг всех вариантов, пока кнопка красная ---------- */
.led-control-options{
border:3px solid transparent;
border-radius:12px;
padding:4px 8px 8px;
transition:border-color .2s, background .2s;
}
.led-control-options.needs-selection{
border-color:#e74c3c;
background:#fff0f0;
box-shadow:0 0 0 3px rgba(231,76,60,.25), 0 0 10px rgba(231,76,60,.35);
animation:requiredFrameGlow 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
.led-control-options.needs-selection{ animation:none; }
}
/* Тип управления светодиодами на узком экране: название — на всю ширину, «Пример» и образец — строкой ниже, а не в три строки названия */
label.led-control-opt:has(> input.calc[type="checkbox"]):has(+ .led-pwm-explain){
flex-wrap:wrap;
}
label.led-control-opt > input + span[data-lang]{
flex:1 1 150px;
min-width:0;
}
label.led-control-opt > .example-btn{
margin-left:28px;
}
@media (min-width:701px){
label.led-control-opt > .example-btn{ margin-left:0; }
}
/* Компьютер: образец светодиодов у всех трёх вариантов одной ширины — кнопки «Пример» стоят на одном уровне (колонкой) */
@media (min-width:701px){
label.led-control-opt > .example-led{
flex:0 0 200px;
justify-content:flex-start;
box-sizing:border-box;
}
}
@media (min-width:701px){
label.led-control-opt > .example-led.example-led-onoff{
flex:0 0 auto;
margin-right:151px;
}
label.led-control-opt > .example-led:not(.example-led-onoff){
flex:0 0 165px;
}
}
/* Подсказка перед «PWM (пояснение)»: кнопка «Тип управления светодиодами» красная и закрыта */
#ledControlTypeHint{
font-size:16px;
font-weight:700;
line-height:22px;
margin:4px 0 10px;
}
#ledControlTypeHint.visible{
display:block;
}
/* ---------- Вертикальный ползунок «Пункт для этого светодиода» (вместо нажатия на мелкие подписи) ---------- */
.led-row .led-item-slider-wrap{
order:-2;
flex:0 0 auto;
max-width:100%;
box-sizing:border-box;
margin:3px 0 4px;
padding:4px 8px;
background:#f1f8f3;
border:1px solid #b9dcc4;
border-radius:8px;
}
.led-item-slider-title{
margin-bottom:2px;
font-size:12px;
font-weight:700;
color:#3e4c59;
line-height:1.35;
}
.led-item-slider-body{
display:flex;
align-items:flex-start;
gap:6px;
}
/* вертикальный ползунок: обычный range, повёрнутый на 90° (работает везде) */
.led-item-vbox{
position:relative;
flex:0 0 30px;
width:30px;
}
.led-item-slider{
position:absolute;
top:0;
left:30px;
height:30px;
margin:0;
transform-origin:0 0;
transform:rotate(90deg);
accent-color:#2e9f55;
cursor:pointer;
touch-action:none;
}
/* названия напротив делений */
.led-item-names{
position:relative;
flex:1 1 auto;
min-width:0;
}
.led-item-name{
position:absolute;
left:0;
right:0;
transform:translateY(-50%);
display:block;
width:100%;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:1px 8px;
background:transparent;
color:#3e4c59;
text-align:left;
font-size:13px;
font-weight:600;
line-height:1.2;
border:1px solid transparent;
border-radius:999px;
white-space:nowrap;
overflow:hidden;
cursor:pointer;
}
.led-item-nm{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
}
.led-item-qty{
flex:0 0 auto;
font-size:12px;
font-weight:700;
color:#8a949e;
}
.led-item-qty.taken{
color:#1b7a3c;
font-weight:800;
}
.led-item-name.on{
background:#e3f3e8;
color:#14532d;
font-weight:800;
border-color:#2e9f55;
}
/* свой бегунок ровно THUMB (24px) — деления совпадают с названиями */
.led-item-slider{
-webkit-appearance:none;
appearance:none;
background:transparent;
}
.led-item-slider::-webkit-slider-runnable-track{
height:8px;
background:#cfe3d6;
border-radius:4px;
}
.led-item-slider::-webkit-slider-thumb{
-webkit-appearance:none;
appearance:none;
width:22px;
height:22px;
margin-top:-7px;
border-radius:50%;
background:#2e9f55;
border:3px solid #fff;
box-shadow:0 1px 4px rgba(0,0,0,.45);
}
.led-item-slider::-moz-range-track{
height:8px;
background:#cfe3d6;
border-radius:4px;
}
.led-item-slider::-moz-range-thumb{
width:16px;
height:16px;
border-radius:50%;
background:#2e9f55;
border:3px solid #fff;
box-shadow:0 1px 4px rgba(0,0,0,.45);
}
@media (max-width:700px){
.led-item-slider-title{ font-size:13px; }
.led-item-name{ font-size:14px; }
.led-item-qty{ font-size:13px; }
}
.led-row .led-item-slider-br{
order:-2;
flex:0 0 100%;
height:0;
}
/* «Всего: N шт.» после названия светодиода */
.led-total{
display:inline-block;
margin-left:8px;
padding:1px 10px;
font-size:13px;
font-weight:800;
color:#14532d;
background:#e3f3e8;
border:1px solid #b9dcc4;
border-radius:999px;
white-space:nowrap;
}
@media (max-width:480px){
.led-total{ margin-left:4px; padding:1px 8px; font-size:12px; }
}
/* «Всего: N шт.» — вплотную к названию светодиода (название по ширине текста, а не 190px) */
.led-row-main .led-name{
width:auto;
min-width:0;
margin-right:0;
flex:0 1 auto;
}
.led-row-main .led-total{
margin-left:6px;
}
.led-row-main .led-qty-wrap{
margin-left:12px;
}
@media (max-width:480px){
.led-row-main .led-qty-wrap{ margin-left:auto; }
}
/* «▶ «Wi-Fi» — установлено: 1 шт.» — сколько уже у активного пункта, под строкой светодиода */
.led-row .led-active-count{
order:-2;
flex:0 0 100%;
margin:2px 0 0;
padding:2px 8px;
font-size:13px;
font-weight:800;
color:#14532d;
background:#fff3b0;
border-radius:6px;
line-height:1.35;
}
@media (max-width:700px){
.led-row .led-active-count{ font-size:14px; }
}
.led-row .led-active-count{
flex:0 0 auto;
box-sizing:border-box;
max-width:100%;
}
.led-row .led-active-count.is-min{
color:#b71c1c;
background:#ffe0e0;
}
.led-row .led-active-count.is-min{
animation:hintPulse 1.6s ease-in-out infinite;
}
.led-qty-view{
width:52px;
height:28px;
padding:3px 4px;
box-sizing:border-box;
text-align:center;
}
@media (max-width:480px){ .led-qty-view{ width:44px; } }
/* «⚠ Выбери для «Индикация состояния связи»» — рамка прежней ширины, надпись переносится на 2 строки внутри неё */
.led-row .led-source-badge.badge-need-qty{
min-width:100%;
white-space:normal;
overflow-wrap:anywhere;
box-sizing:border-box;
}
/* Все четыре рамки светодиодов — одной ширины, как у самой широкой («Светодиод RGB (PWM)» с «Всего: N шт.») */
.led-row{
min-width:450px;
max-width:100%;
}
/* «Шт.:» — правым краем вровень с плашкой «Пункт для этого светодиода» */
.led-row .led-row-main{
width:var(--plate-w, auto);
min-width:max-content;
}
.led-row-main .led-qty-wrap{
margin-left:auto;
}
/* Вопрос при «Светодиоды не требуются», если светодиоды уже выбраны */
.led-none-confirm{
margin:6px 0 10px;
padding:10px 12px;
background:#fff3f3;
border:2px solid #e74c3c;
border-radius:10px;
}
.led-none-confirm-msg{
margin-bottom:8px;
font-size:15px;
font-weight:700;
color:#b71c1c;
line-height:1.4;
}
.led-none-confirm-btns{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.led-none-confirm-btns button{
padding:9px 14px;
font-size:15px;
font-weight:700;
border-radius:8px;
}
.led-none-yes{ background:#c62828; color:#fff; }
.led-none-no{ background:#e8eef0; color:#2f3b44; border:1px solid #b9c4ca; }
.led-row .led-row-main{
gap:12px;
}
.led-row .led-row-main{ gap:8px; }
.led-row-main .led-total{ margin-left:0; }
.led-qty-view{ width:46px; }
.led-row .led-row-main{ gap:6px; }
.led-row-main .led-total{ padding:1px 7px; font-size:12px; }
/* «Шт.:» у всех светодиодов — в одной колонке у правого края рамки (рамки одной ширины) */
.led-row .led-row-main{
width:100%;
}
.led-row-main .led-qty-wrap{
margin-left:auto;
}
/* Рамка не удлиняется, когда появляется «Пункт для этого светодиода» */
.led-row{
width:450px;
max-width:100%;
}
.led-row .led-item-slider-wrap{
max-width:100%;
box-sizing:border-box;
}
/* Место под подсказку зарезервировано (скрыта через visibility) — страница не прыгает, когда кнопка «Тип управления светодиодами» становится красной */
#ledControlTypeHint{
display:block;
visibility:hidden;
}
#ledControlTypeHint.visible{
visibility:visible;
}
/* Рамка зарезервирована (прозрачная) — кнопка не растёт, когда становится красной */
#ledControlTypeToggle{
border:2px solid transparent;
}
/* Подсказки под «На дисплее» / «На дисплее плавной регулировки яркости»: место зарезервировано — не прыгает при отметке */
#lcdSetDisplayHint,
#lcdPWMDisplayHint{
display:block;
visibility:hidden;
min-height:38px;
}
#lcdSetDisplayHint.visible,
#lcdPWMDisplayHint.visible{
visibility:visible;
}
/* Рамка кнопок разделов зарезервирована (прозрачная): кнопка не растёт на 4px, когда становится красной */
.modules-toggle{
border:2px solid transparent;
}
/* Поле описания появляется плавно (растёт и проявляется), а не скачком */
@keyframes descGrow{
from{ min-height:0; opacity:0; }
to{ opacity:1; }
}
@keyframes descFade{
from{ opacity:0; }
to{ opacity:1; }
}
textarea[id$="Description"]:not(#guideDescription):not(#guideHintDescription),
#description,
#drugojcontroller{
animation:descGrow .4s ease-out;
}
label[id$="DescriptionLabel"],
.module-desc-counter{
animation:descFade .4s ease-out;
}
@media (prefers-reduced-motion:reduce){
textarea[id$="Description"], #description, #drugojcontroller, label[id$="DescriptionLabel"], .module-desc-counter{ animation:none; }
}
/* Подсказка «Перейдите в меню «Дисплей»…» — без лишнего пустого места до «Светодиоды не требуются» */
#lcdPWMDisplayHint,
#lcdSetDisplayHint{
min-height:20px;
margin-bottom:2px;
}
/* Подсказка не занимает место, пока не нужна: «Светодиоды не требуются» — вплотную к «На дисплее плавной регулировки яркости» */
#lcdPWMDisplayHint:not(.visible){
display:none;
min-height:0;
}
#lcdPWMDisplayHint.visible{
display:block;
visibility:visible;
min-height:0;
margin:2px 0 2px;
}
#cardLeds label:has([data-lang="LcdPWMNone"]){
margin-top:0;
}
#cardLeds label:has([data-id="LcdPWM"]){
margin-bottom:2px;
}
/* Кнопки вопроса «Убрать все светодиоды?» — явно видно, что они нажимаются */
.led-none-confirm-btns button{
cursor:pointer;
padding:11px 18px;
font-size:15px;
font-weight:800;
border-radius:10px;
border:2px solid transparent;
box-shadow:0 3px 0 rgba(0,0,0,.25), 0 6px 12px rgba(0,0,0,.18);
transition:transform .12s, box-shadow .12s, filter .12s;
-webkit-tap-highlight-color:rgba(0,0,0,.15);
}
.led-none-yes{
background:linear-gradient(180deg,#e53935,#b71c1c);
color:#fff;
border-color:#8e1313;
}
.led-none-yes::before{ content:"🗑 "; }
.led-none-no{
background:linear-gradient(180deg,#ffffff,#dde6ea);
color:#1f2d36;
border-color:#7d8d96;
}
.led-none-no::before{ content:"↩ "; }
.led-none-confirm-btns button:hover{
transform:translateY(-2px);
filter:brightness(1.07);
box-shadow:0 5px 0 rgba(0,0,0,.25), 0 10px 16px rgba(0,0,0,.2);
}
.led-none-confirm-btns button:active{
transform:translateY(2px);
box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.led-none-confirm-btns button:focus-visible{
outline:3px solid #1b4f9c;
outline-offset:2px;
}
/* «На дисплее» в «Индикации состояния связи»: подсказка не занимает места, пока не нужна — «Звуковой сигнализацией» плотно */
#lcdSetDisplayHint:not(.visible){
display:none;
min-height:0;
margin:0;
}
#lcdSetDisplayHint.visible{
display:block;
visibility:visible;
min-height:0;
margin:2px 0 2px;
}
/* Пример «на дисплее» появляется поверх (под строкой), а не раздвигает список: «Звуковой сигнализацией» и «На дисплее» не смещаются */
label:has(> .example-led.example-screen){
position:relative;
}
label > .example-led.example-screen.on{
position:absolute;
left:205px;
top:50%;
transform:translateY(-50%);
z-index:30;
margin:0;
padding:6px;
background:#fff;
border:1px solid #c9d3d8;
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,.25);
}
/* «ℹ️ Установлено вручную = N шт.» — отдельной строкой в самом низу подписей, в пределах рамки */
.led-row .led-manual{
order:5;
flex:0 0 100%;
width:0;
min-width:100%;
max-width:100%;
box-sizing:border-box;
margin:2px 0 0;
font-size:12px;
font-weight:600;
color:#2e7d32;
white-space:normal;
overflow-wrap:anywhere;
}
@media (max-width:480px){ .led-row .led-manual{ font-size:13px; } }
.led-qty-view{
width:46px;
height:28px;
padding:3px 4px;
box-sizing:border-box;
text-align:center;
}
@media (max-width:480px){ .led-qty-view{ width:44px; } }
.led-row .led-manual{ cursor:pointer; }
/* Характеристики подобранной платы */
.bp-specs{
margin:10px 0 4px;
padding:10px 12px;
background:#f4f8fb;
border:1px solid #cddbe6;
border-radius:10px;
}
.bp-specs-title{
font-size:13px;
font-weight:800;
color:#1b4f9c;
margin-bottom:6px;
}
.bp-specs ul{
margin:0;
padding:0;
list-style:none;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:4px 14px;
font-size:14px;
color:#2f3b44;
}
.bp-specs li{ margin:0; }
@media (max-width:700px){ .bp-specs ul{ font-size:15px; } }
.gb-block .gb-g-arduino{ --gb:#7b4fb0; }
.gb-block .gb-g-ctrl{ --gb:#d35400; }
.gb-modules-hint{
margin:14px 0;
padding:12px 14px;
background:#fff6e5;
border:2px solid #f0b34a;
border-radius:12px;
}
.gb-modules-hint-title{ font-size:16px; font-weight:800; color:#8a4b00; margin-bottom:6px; }
.gb-modules-hint-text{ margin:0 0 8px; font-size:14.5px; line-height:1.5; color:#3b2f1c; }
.gb-modules-hint-list{ margin:0 0 10px; padding-left:20px; font-size:15px; line-height:1.6; }
.gb-modules-hint-list li b{ color:#14532d; }
.gb-modules-go{
padding:11px 18px;
font-size:15px;
font-weight:800;
background:linear-gradient(180deg,#f39c12,#c87f0a);
color:#fff;
border:none;
border-radius:10px;
box-shadow:0 3px 0 rgba(0,0,0,.25);
cursor:pointer;
}
.gb-modules-go:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.25); }
.gb-flash{ animation:gbFlash 2.2s ease-out; }
@keyframes gbFlash{ 0%,60%{ box-shadow:0 0 0 6px rgba(243,156,18,.7); } 100%{ box-shadow:0 0 0 0 rgba(243,156,18,0); } }
.gb-modules-lock{ margin:0 0 10px; padding:8px 10px; background:#fdecea; border-left:5px solid #c0392b; border-radius:6px; font-size:14.5px; font-weight:700; color:#8e1b12; line-height:1.45; }
.gb-modules-lock.ok{ background:#e8f6ec; border-left-color:#2e9f55; color:#14532d; }
.gb-modules-pick{ margin:0 0 12px; padding:10px 12px; background:#fff; border:1px solid #e6c98d; border-radius:10px; }
.gb-modules-pick-name{ font-size:15px; font-weight:800; color:#14532d; margin-bottom:8px; }
.gb-modules-pick-btns{ display:flex; flex-wrap:wrap; gap:8px; }
.gb-modules-use,.gb-modules-self{ padding:10px 16px; font-size:15px; font-weight:800; border-radius:10px; border:2px solid transparent; cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.22); }
.gb-modules-use{ background:linear-gradient(180deg,#2e9f55,#1f6f3d); color:#fff; }
.gb-modules-self{ background:linear-gradient(180deg,#fff,#dde6ea); color:#1f2d36; border-color:#7d8d96; }
.gb-modules-use:active,.gb-modules-self:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.22); }
.gb-modules-picked{ margin:8px 0 0; font-size:14px; font-weight:700; color:#14532d; }
/* «Раздел откроется после выбора контроллера» — дышит, чтобы бросалось в глаза */
.gb-modules-lock:not(.ok){ animation:hintPulse 1.6s ease-in-out infinite; }
.gb-find{ margin-left:6px; padding:3px 12px; font-size:13px; font-weight:800; background:#fff; color:#1b4f9c; border:2px solid #1b4f9c; border-radius:999px; cursor:pointer; }
.gb-find:hover{ background:#1b4f9c; color:#fff; }
@media (prefers-reduced-motion:reduce){ .gb-modules-lock:not(.ok){ animation:none; } }
.gb-find.locked,.gb-modules-go.locked{ background:#e3e7ea; color:#7a858c; border-color:#b5bec4; cursor:not-allowed; box-shadow:none; }
.gb-find.locked::before{ content:"🔒 "; }
.gb-find.locked:hover{ background:#e3e7ea; color:#7a858c; }
.gb-shake{ animation:gbShake .5s ease-in-out 2; }
@keyframes gbShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.gb-modules-lock.gb-shake{ animation:gbShake .5s ease-in-out 2, hintPulse 1.6s ease-in-out infinite; }
/* =========================
Живой экран дисплея перед "Контактами" (updateDisplayLive)
========================= */
.display-live-note{
margin:0 0 10px;
font-size:13px;
color:#666;
}
.display-live-tabs{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:12px;
}
.display-live-tab{
padding:6px 12px;
font-size:13px;
font-weight:600;
color:#264a33;
background:#f4f8f5;
border:1px solid #d7e6dc;
border-radius:999px;
}
.display-live-tab.active{
color:#fff;
background:linear-gradient(135deg,#2e9f55,#1f6f3d);
border-color:#1f6f3d;
}
.display-live-stage{
display:flex;
justify-content:center;
overflow-x:auto;
padding:4px 0;
}
/* Тот же нарисованный экран, что при наведении, но не всплывающий */
.display-live-preview{
display:flex;
position:static;
transform:none;
left:auto;
top:auto;
pointer-events:auto;
}
/* Пример «на дисплее» на узком экране (телефон): как на компьютере — не
в потоке (строки не сдвигаются), прижат к правому краю строки */
@media (max-width:700px){
label > .example-led.example-screen.on{
left:auto;
right:45px;
}
}
/* =========================
Счётчик свободных выводов платы (updatePinsMeter)
========================= */
.pins-meter{
margin:8px 0 12px;
padding:8px 10px;
font-size:14px;
color:#1f6f3d;
background:#eef8f0;
border:1px solid #b7dfc1;
border-radius:8px;
}
.pins-bar{
height:6px;
margin-top:6px;
background:#d6e9db;
border-radius:3px;
overflow:hidden;
}
.pins-bar > span{
display:block;
height:100%;
background:#2e9f55;
transition:width .25s ease;
}
.pins-meter.short{
color:#c0392b;
background:#fff3f3;
border-color:#e74c3c;
}
.pins-meter.short .pins-bar > span{
background:#e74c3c;
}
.pins-warn{
margin-top:6px;
font-weight:700;
animation:hintPulse 1.6s ease-in-out infinite;
}
.pins-mcp-btn{
margin-top:8px;
padding:8px 14px;
font-size:14px;
font-weight:600;
}
/* Свободных выводов больше нет — предупреждение жёлтым, ещё не ошибка */
.pins-meter.full{
color:#8a5a00;
background:#fff8e6;
border-color:#f0b43c;
}
.pins-meter.full .pins-bar > span{
background:#f0a020;
}
/* Плашка о нехватке выводов поверх страницы (showPinsToast) */
#pinsToast{
position:fixed;
left:50%;
top:14px;
z-index:10000;
width:min(92vw, 560px);
padding:12px 16px;
font-size:15px;
font-weight:600;
line-height:1.35;
color:#fff;
background:#c0392b;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,.35);
transform:translate(-50%, -140%);
opacity:0;
pointer-events:none;
transition:transform .3s ease, opacity .3s ease;
}
#pinsToast.show{
transform:translate(-50%, 0);
opacity:1;
pointer-events:auto;
cursor:pointer;
}
/* Платы другого семейства закрыты, пока не нажат «Переключатель Arduino ⇄ ESP» */
#controllerWrap label.ctrl-locked{
opacity:.5;
cursor:not-allowed;
}
#controllerWrap label.ctrl-locked::after{
content:" 🔒";
}
.family-lock-hint{
margin:10px 0 8px;
padding:8px 10px;
font-size:14px;
font-weight:600;
color:#8a5a00;
background:#fff8e6;
border:1px solid #f0b43c;
border-radius:8px;
}
/* Подсветка кнопки переключателя и подсказки после нажатия на закрытую плату */
@keyframes switchAttn{
0%, 100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(240,180,60,0); }
25%{ transform:scale(1.04); box-shadow:0 0 0 6px rgba(240,180,60,.55); }
50%{ transform:scale(1); box-shadow:0 0 0 0 rgba(240,180,60,0); }
75%{ transform:scale(1.04); box-shadow:0 0 0 6px rgba(240,180,60,.55); }
}
#switchFamilyBtn.switch-attn,
.family-lock-hint.switch-attn{
animation:switchAttn 1.2s ease-in-out 2;
}
@media (prefers-reduced-motion:reduce){
#switchFamilyBtn.switch-attn,
.family-lock-hint.switch-attn{ animation:none; outline:3px solid #f0b43c; }
}
/* 💡 на кнопках разделов, пункты которых можно показывать светодиодом
(«Индикация состояния связи» → «Какие датчики показывать светодиодом») */
.led-cap-badge{
display:inline-flex;
align-items:center;
margin:0 0 0 8px;
padding:1px 6px;
font-size:13px;
line-height:1.3;
background:rgba(255,255,255,.22);
border:1px solid rgba(255,255,255,.4);
border-radius:999px;
}
.led-cap-last{
margin-right:auto;
}
/* Значок светодиода (SVG) */
.led-ico{
width:11px;
height:16px;
vertical-align:-3px;
}
.led-cap-badge .led-ico{
width:10px;
height:15px;
vertical-align:middle;
color:#fff;
}
.sensor-led-empty .led-ico{
color:#555;
}
.led-cap-badge{
padding:2px 8px;
background:rgba(255,255,255,.85);
border-color:rgba(255,255,255,.95);
}
.led-cap-badge .led-ico{
width:12px;
height:19px;
color:#555;
}
.sensor-led-empty .led-ico{
width:12px;
height:18px;
}
/* Светодиод на кнопке раздела горит, когда для пункта выбрано количество */
.led-cap-badge.lit{
background:#fff3b0;
border-color:#ffd34d;
box-shadow:0 0 8px 2px rgba(255,211,77,.9), 0 0 16px 4px rgba(255,77,77,.55);
animation:ledCapGlow 1.6s ease-in-out infinite;
}
@keyframes ledCapGlow{
0%,100%{ box-shadow:0 0 6px 1px rgba(255,211,77,.8), 0 0 12px 3px rgba(255,77,77,.4); }
50%{ box-shadow:0 0 12px 3px rgba(255,211,77,1), 0 0 22px 7px rgba(255,77,77,.7); }
}
@media (prefers-reduced-motion: reduce){
.led-cap-badge.lit{ animation:none; }
}
/* «Какие датчики показывать светодиодом:» — красная и «дышит», пока не отмечен ни один пункт */
.sensor-led-title.need{
color:#c0392b;
font-weight:800;
animation:hintPulse 1.6s ease-in-out infinite;
}
/* «Индикация состояния связи»: значки того, чем можно показывать — светодиод, дисплей, звук */
.out-badge{
gap:5px;
padding:1px 8px;
}
.out-badge .out-ico{
width:15px;
height:12px;
color:#37474f;
vertical-align:middle;
}
/* Поле «что должен делать контроллер» не должно «прыгать» при вводе:
анимация роста descGrow запускалась заново при каждой смене рамки
(красная → обычная) и меняла высоту поля */
#description,
#drugojcontroller{
animation:none;
}
/* Окно «Датчики»: по ширине красной рамки выбора модуля, а не на всю ширину */
.sensors-modal{
width:fit-content;
min-width:min(340px, 100%);
max-width:100%;
}
.sensors-modal-body .module-category{
width:fit-content;
max-width:100%;
}
/* Кнопки окна «Датчики»: крупные, «Назад» и «OK» рядом */
.sensors-modal-actions{
display:flex;
gap:12px;
margin-top:14px;
}
.sensors-modal-actions .linked-choice-btn{
flex:1 1 0;
min-height:40px;
padding:9px 16px;
font-size:16px;
font-weight:700;
}
.sensors-modal-actions .sensors-modal-ok{
margin-top:0;
}
/* Значки на кнопке «Индикация состояния связи» загораются, когда выбраны */
.out-badge svg{
transition:filter .25s ease, color .25s ease;
}
.out-badge .led-ico.on{
filter:drop-shadow(0 0 3px #ff3b30) drop-shadow(0 0 7px rgba(255,59,48,.9));
}
.out-badge .out-disp.on{
color:#0d47a1;
filter:drop-shadow(0 0 3px #4fc3f7) drop-shadow(0 0 7px rgba(79,195,247,.9));
}
.out-badge .out-disp.on rect{
fill:#7fe3ff;
}
.out-badge .out-snd.on{
color:#e65100;
filter:drop-shadow(0 0 3px #ffb300) drop-shadow(0 0 7px rgba(255,179,0,.9));
}
/* «Что занимает выводы платы» */
.pins-summary-card h2{
margin:0 0 12px;
font-size:20px;
}
.pins-sum-board{
display:flex;
align-items:center;
gap:16px;
margin-bottom:12px;
}
.pins-sum-photo{
width:120px;
max-height:90px;
object-fit:contain;
border-radius:8px;
background:#fff;
border:1px solid rgba(0,0,0,.12);
padding:4px;
}
.pins-sum-board-info{
flex:1;
min-width:0;
}
.pins-sum-name{
font-weight:700;
font-size:18px;
margin-bottom:4px;
}
.pins-sum-count{
font-size:14px;
margin-bottom:6px;
}
.pins-sum-count.short{ color:#c0392b; font-weight:700; }
.pins-sum-count.full{ color:#b26a00; font-weight:700; }
.pins-sum-empty{
margin:6px 0 0;
color:#666;
}
.pins-sum-list{
list-style:none;
margin:0;
padding:0;
border-top:1px solid rgba(0,0,0,.1);
}
.pins-sum-list li{
display:grid;
grid-template-columns:28px 1fr auto auto;
align-items:center;
gap:8px;
padding:7px 2px;
border-bottom:1px solid rgba(0,0,0,.08);
font-size:15px;
}
.pins-sum-label{ min-width:0; overflow-wrap:anywhere; }
.pins-sum-qty{ color:#555; white-space:nowrap; }
.pins-sum-val{ font-weight:700; white-space:nowrap; min-width:64px; text-align:right; }
.pins-sum-val.plus{ color:#1f6f3d; }
@media (max-width:520px){
.pins-sum-board{ flex-direction:column; align-items:flex-start; }
.pins-sum-list li{ grid-template-columns:26px 1fr auto; }
.pins-sum-qty{ display:none; }
}
.pins-sum-ico .pk-ico{
width:20px;
height:20px;
vertical-align:middle;
color:#37474f;
}
/* Смайлик на экране — пользовательский символ 5×8 точек, какой реально можно
загрузить в память LCD (HD44780) */
.lcd-smile{
display:inline-block;
width:1ch;
height:1.15em;
vertical-align:-0.2em;
background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat;
mask:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat;
}
/* Подключение показанного дисплея к плате («Так это будет выглядеть на дисплее») */
/* Телефоны и узкие экраны: строки светодиодов не шире экрана, подписи переносятся */
@media (max-width:520px){
.led-row{
min-width:0;
width:100%;
}
.led-row .led-row-main{
width:100%;
min-width:0;
flex-wrap:wrap;
}
.led-row .led-source-badge,
.led-row .led-sens-line,
.led-row .feature-led-hint,
.led-row .led-manual,
.led-row .led-active-count{
width:auto;
max-width:100%;
white-space:normal;
overflow-wrap:anywhere;
}
}
/* Узкие экраны: длинные названия кнопок-разделов (особенно на немецком) переносятся,
значки и стрелка не выталкивают кнопку за край */
@media (max-width:420px){
.modules-toggle{
padding:14px 12px;
font-size:16px;
gap:6px;
}
.modules-toggle > span:first-child{
min-width:0;
overflow-wrap:anywhere;
text-align:left;
}
.modules-toggle .led-cap-badge,
.modules-toggle .diag-badge,
.modules-toggle [id$="Arrow"]{
flex:none;
}
.modules-toggle .led-cap-last{
margin-right:0;
margin-left:auto;
}
}
/* Образцы светодиодов в выборе «Светодиод» под пунктом: не мигают и не «дышат».
Не выбран — серый (выключен); выбран — просто меняет цвет:
Светодиод — зелёный, RGB — синий, PWM — оранжевый, RGB (PWM) — фиолетовый */
.feature-led-desc .led-sample,
.feature-led-desc .led-sample.s-led33,
.feature-led-desc .led-sample.s-ledRGB,
.feature-led-desc .led-sample.s-LedPWM,
.feature-led-desc .led-sample.s-LedRGBPWM{
animation:none !important;
opacity:1;
background:#b0b7bc;
box-shadow:inset 0 -1px 2px rgba(0,0,0,.25);
transition:background .2s ease, box-shadow .2s ease;
}
.feature-led-item.on .led-sample.s-led33{
background:#2e9b57;
box-shadow:0 0 8px 2px rgba(46,155,87,.55);
}
.feature-led-item.on .led-sample.s-ledRGB{
background:#2f6fe4;
box-shadow:0 0 8px 2px rgba(47,111,228,.55);
}
.feature-led-item.on .led-sample.s-LedPWM{
background:#fb8c00;
box-shadow:0 0 8px 2px rgba(251,140,0,.55);
}
.feature-led-item.on .led-sample.s-LedRGBPWM{
background:#8e24aa;
box-shadow:0 0 8px 2px rgba(142,36,170,.55);
}
/* Образец светодиода в выборе — маленький, как светодиод в подписях «Установлено …» */
.feature-led-desc .led-sample{
width:12px;
height:12px;
margin-top:4px;
}
@media (max-width:700px){
.feature-led-desc .led-sample{ width:12px; height:12px; }
}
/* Общий экран «Диагностики подключения» под надписью «Отображать состояние»:
один на все пункты, такой же, как в «Так это будет выглядеть на дисплее» */
.diag-shared-lcd{
margin:8px 0 12px;
justify-content:flex-start;
}
/* Значок светодиода (вместо эмодзи 💡) в плашках и значке «Диагностики подключения» */
.sub-chip-mode .pk-ico,
.diag-badge .diag-mode .pk-ico{
width:12px;
height:17px;
vertical-align:middle;
}
.diag-shared-caption{
margin:8px 0 0;
font-weight:700;
color:#1f3d2b;
}
/* ---------- Лёгкая анимация: меньше нагрузки на сайт, особенно на телефоне ---------- */
/* Светодиод выбран («Установлено: «Светодиод»») — каскад светодиодов не движется:
все 5 горят постоянно, число — «обычное» значение (4-е: 12.0V / 80%) */
.inline-display-hint.hint-ok .battery-level-anim i,
.inline-display-hint.led-chosen .battery-level-anim i{
animation:none;
background:var(--led);
box-shadow:0 0 6px var(--led);
}
.inline-display-hint.hint-ok .battery-level-pct b,
.inline-display-hint.led-chosen .battery-level-pct b{
animation:none;
opacity:0;
}
.inline-display-hint.hint-ok .battery-level-pct b:nth-child(4),
.inline-display-hint.led-chosen .battery-level-pct b:nth-child(4){
opacity:1;
}
/* Телефоны и планшеты (касание): декоративное движение выключено —
светодиоды горят, провода схемы не «бегут» */
@media (hover:none) and (pointer:coarse){
.battery-level-anim i{
animation:none;
background:var(--led);
box-shadow:0 0 6px var(--led);
}
.battery-level-pct b{
animation:none;
opacity:0;
}
.battery-level-pct b:nth-child(4){
opacity:1;
}
}
/* Карточка вне экрана — её анимации стоят на паузе (включает скрипт) */
.card[data-offscreen="1"] *{
animation-play-state:paused !important;
}
/* Пояснение внутри красной рамки светодиода: почему она выделена */
.led-row .led-need-hint{
display:none;
flex:1 1 100%;
margin:3px 4px 0 8px;
font-size:13px;
font-weight:600;
line-height:1.35;
color:#c0392b;
animation:hintPulse 1.6s ease-in-out infinite;
}
.led-row.needs-selection .led-need-hint{
display:block;
}
@media (prefers-reduced-motion: reduce){
.led-row .led-need-hint{ animation:none; }
}
/* Пояснение «⚠ Вы выбрали тип управления PWM…» стоит сразу под строкой с галкой,
выше остальных подписей (в том числе «Установлено вручную = N шт.», она — ниже) */
.led-row .led-row-main{ order:-2; }
.led-row .led-need-hint{ order:-1; }
/* Пример экрана у «На дисплее» на узком экране: под строкой, а не поверх кнопки
«Пример» и названия (кнопка остаётся видимой и нажимается) */
@media (max-width:700px){
label > .example-led.example-screen.on{
top:calc(100% + 4px);
left:24px;
right:auto;
transform:none;
}
}
/* Пример экрана у «На дисплее» на узком экране: над строкой (не перекрывает «Звуковой сигнал»
и «Не требуется» ниже; кнопка «Пример» остаётся видна) */
@media (max-width:700px){
label > .example-led.example-screen.on{
top:auto;
bottom:calc(100% + 4px);
left:24px;
right:auto;
transform:none;
}
}
/* «Так это будет выглядеть на дисплее»: слева от экрана — «Выбрать другой» и «Оставить этот»,
когда листаем не тот тип дисплея, что выбран */
.display-live-row{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
}
.display-live-actions{
display:flex;
flex-direction:column;
gap:8px;
flex:0 0 auto;
}
.display-live-actions .linked-choice-btn{
white-space:nowrap;
}
@media (max-width:520px){
.display-live-row{ flex-direction:column; align-items:stretch; }
.display-live-actions{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
}
/* «Выбираю этот» — у левого края карточки, экран дисплея — строго по центру */
.display-live-row{
position:relative;
}
.display-live-actions{
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
z-index:2;
}
@media (max-width:700px){
.display-live-row{ flex-direction:column; align-items:center; }
.display-live-actions{
position:static;
transform:none;
flex-direction:row;
margin-bottom:8px;
}
}
/* «Авто выбор» рядом с «Перейти в Дополнительные модули» */
.gb-modules-auto,.gb-modules-cancel{ margin-left:8px; background:linear-gradient(180deg,#2e9f55,#1f6f3d); }
.gb-modules-auto-note{ margin:8px 0 0; font-size:13.5px; line-height:1.45; color:#5a4a2c; }
.gb-modules-auto-miss{ margin:6px 0 0; font-size:13.5px; font-weight:700; line-height:1.45; color:#8a4b00; }
.gb-modules-auto.locked{ background:#e3e7ea; }
@media (max-width:700px){ .gb-modules-go,.gb-modules-auto{ width:100%; margin-left:0; } .gb-modules-auto{ margin-top:8px; } }
.gb-modules-cancel{ background:linear-gradient(180deg,#d9534f,#a52a2a); }
.gb-modules-cancel.locked{ background:#e3e7ea; }
@media (max-width:700px){ .gb-modules-cancel{ width:100%; margin-left:0; margin-top:8px; } }
.gb-modules-cancelpick{ padding:10px 16px; font-size:15px; font-weight:800; border-radius:10px; border:2px solid #a52a2a; background:linear-gradient(180deg,#fff,#f6dcda); color:#8e1b12; cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.22); }
.gb-modules-cancelpick:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.22); }
.gb-modules-cancelpick.idle{ opacity:.55; }
/* Рекомендованной платы нет в списке: красная «дышащая» надпись и другая кнопка */
.gb-pick-missing{ color:#c0392b; animation:hintPulse 1.6s ease-in-out infinite; }
.gb-modules-use.gb-modules-use-other{ background:linear-gradient(180deg,#3f8fe0,#1b4f9c); }
.gb-pick-check{ display:none; margin-left:8px; color:#00e676; font-size:22px; font-weight:900; line-height:1; text-shadow:0 1px 1px rgba(0,0,0,.15); vertical-align:middle; }
.gb-pick-check.visible{ display:inline-block; }
@media (prefers-reduced-motion:reduce){ .gb-pick-missing{ animation:none; } }
/* «Показать» у пункта, раздел которого ещё требует выбора (красная «дышащая» кнопка раздела) */
.gb-find.gb-find-alert:not(.locked){ background:#e53935; color:#fff; border-color:#b71c1c; animation:toggleAlertPulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .gb-find.gb-find-alert{ animation:none; } }
/* «Какие датчики показывать светодиодом:» — пока не отмечен ни один пункт, красная кнопка раздела и весь список */
.modules-toggle.toggle-alert:not(.open){ animation:toggleAlertPulse 1.6s ease-in-out infinite; }
#stateToggle.toggle-alert{ background:linear-gradient(135deg,#e53935,#b71c1c) !important; }
.sensor-led-box.need-list{
border-left-color:#c0392b;
background:rgba(231,76,60,.10);
box-shadow:0 0 0 2px rgba(231,76,60,.35);
animation:hintPulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .modules-toggle.toggle-alert, .sensor-led-box.need-list{ animation:none; } }
.gb-modules-todo{ margin:8px 0 0; }
.gb-modules-todo-title{ margin:0 0 4px; font-size:14.5px; font-weight:800; color:#c0392b; }
.gb-modules-todo .gb-modules-hint-list{ margin-bottom:6px; }
.sens-todo{ margin:10px 0 0; padding-top:8px; border-top:1px dashed rgba(192,57,43,.5); }
.sens-todo[hidden]{ display:none; }
/* «Перейдите для выбора из списка:» дышит, как остальные красные подсказки */
.gb-modules-todo-title{ animation:hintPulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .gb-modules-todo-title{ animation:none; } }
.sens-todo-back{ display:flex; justify-content:flex-end; margin-top:6px; }
.gb-todo-back{ padding:6px 14px; font-size:14px; font-weight:800; color:#1b4f9c; background:#fff; border:2px solid #1b4f9c; border-radius:999px; cursor:pointer; }
.gb-todo-back:hover{ background:#1b4f9c; color:#fff; }
/* Телефоны и старые устройства: новые красные «дышащие» подсказки — без тяжёлых теней и мерцания большого блока */
@media (hover:none) and (pointer:coarse){
.gb-find.gb-find-alert:not(.locked){ animation:hintPulse 1.6s steps(8, end) infinite; }
.modules-toggle.toggle-alert:not(.open){ animation:hintPulse 1.6s steps(8, end) infinite; }
.sensor-led-box.need-list{ animation:none; }
.gb-modules-todo-title, .gb-pick-missing{ animation-timing-function:steps(8, end); }
}
/* Сообщение «настройки выбора сброшены» — справа вверху на 10 секунд */
#guideResetToast{
position:fixed;
top:14px;
right:14px;
z-index:2147483000;
display:flex;
align-items:center;
gap:10px;
max-width:min(340px, calc(100vw - 28px));
padding:10px 14px;
background:#fff;
color:#1f2d36;
border:2px solid #2e9f55;
border-left-width:6px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,.28);
opacity:0;
transform:translateY(-12px);
pointer-events:none;
transition:opacity .25s ease, transform .25s ease;
}
#guideResetToast.show{ opacity:1; transform:none; }
#guideResetToast .grt-ico{ flex:none; font-size:28px; line-height:1; }
#guideResetToast .grt-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
#guideResetToast b{ font-size:14.5px; line-height:1.25; color:#14532d; }
#guideResetToast small{ font-size:13px; line-height:1.3; color:#3b4a52; }
#guideResetToast .grt-undo{ flex:none; font-size:20px; color:#2e9f55; font-weight:900; }
@media (prefers-reduced-motion:reduce){ #guideResetToast{ transition:none; } }
/* Предупреждение о сбросе ранее выбранного вручную */
#guideResetModal{
position:fixed; inset:0; z-index:2147483100;
display:none; align-items:center; justify-content:center;
padding:16px; box-sizing:border-box;
background:rgba(20,30,36,.55);
}
#guideResetModal.show{ display:flex; }
#guideResetModal .grm-box{
width:min(440px, 100%); max-height:100%; overflow:auto;
background:#fff; color:#1f2d36;
border-radius:16px; border-top:6px solid #e53935;
padding:18px 18px 16px; box-shadow:0 12px 34px rgba(0,0,0,.4);
text-align:center;
}
#guideResetModal .grm-ico{ font-size:34px; line-height:1; }
#guideResetModal .grm-title{ margin:8px 0 6px; font-size:19px; color:#b71c1c; }
#guideResetModal .grm-text{ margin:0 0 14px; font-size:15px; line-height:1.5; }
#guideResetModal .grm-btns{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
#guideResetModal .grm-btns button{ flex:1 1 150px; padding:12px 14px; font-size:15px; font-weight:800; border-radius:10px; cursor:pointer; border:2px solid transparent; }
#guideResetModal .grm-reset{ background:linear-gradient(180deg,#e53935,#b71c1c); color:#fff; }
#guideResetModal .grm-back{ background:#fff; color:#1b4f9c; border-color:#1b4f9c !important; }
/* Памятка «Как работают подсказки и ручной выбор» */
.guide-howto{ margin:10px 0 0; padding:8px 12px; background:#eef6ff; border:1px solid #b9d4f2; border-radius:10px; font-size:14.5px; line-height:1.5; color:#1f3a5a; }
.guide-howto summary{ cursor:pointer; font-weight:800; color:#1b4f9c; }
.guide-howto ul{ margin:8px 0 2px; padding-left:20px; }
.guide-howto li{ margin:4px 0; }
/* Блок «Перейдите для выбора из списка:» — в красной рамке (без анимации рамки, чтобы не нагружать страницу) */
.gb-modules-todo,
.sens-todo{
margin:10px 0 0;
padding:8px 12px 10px;
background:#fff4f3;
border:2px solid #e53935;
border-radius:12px;
box-sizing:border-box;
max-width:100%;
}
.sens-todo{ border-top:2px solid #e53935; }
.gb-modules-todo[hidden], .sens-todo[hidden]{ display:none; }
.gb-modules-todo .gb-modules-hint-list,
.sens-todo .gb-modules-hint-list{ margin:4px 0 4px; }
/* Шаг «выберите плату» в подсказке «Где это выбрать»: надпись про замок, описание и кнопки — в одной рамке */
.gb-step-box{
margin:10px 0 8px;
padding:10px 12px 12px;
border:2px solid #2e9f55;
border-radius:12px;
background:#f6fbf7;
box-sizing:border-box;
max-width:100%;
}
.gb-step-box.locked{ border-color:#e53935; background:#fff4f3; }
.gb-step-box > .gb-modules-lock{ margin-top:0; }
.gb-step-box > .gb-modules-pick{ margin-bottom:0; }
.gb-step-box.gb-step-flash{ animation:gbFlash 2.2s ease-out; }
/* «Авто выбор» — главное действие; «Перейти в Дополнительные модули» — второстепенное */
.gb-auto-reco{
margin:10px 0 8px; padding:9px 12px;
background:#e8f6ec; border:2px solid #2e9f55; border-radius:10px;
font-size:15px; font-weight:700; line-height:1.45; color:#14532d;
}
.gb-auto-reco[hidden]{ display:none; }
.gb-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:8px 0 0; }
.gb-actions .gb-modules-go{ margin:0; }
.gb-actions .gb-modules-auto{ flex:1 1 260px; padding:16px 26px; font-size:19px; border-radius:12px; }
.gb-actions .gb-modules-cancel{ flex:0 1 auto; }
.gb-actions .gb-modules-go-sec{
flex:0 1 auto; padding:9px 14px; font-size:13.5px; font-weight:700;
background:#fff; color:#6b5a3a; border:1.5px solid #cdbb94; box-shadow:none;
}
.gb-actions .gb-modules-go-sec.locked{ background:#e3e7ea; color:#7a858c; border-color:#b5bec4; }
/* пока «Авто выбор» не нажимали — мягкое кольцо привлекает взгляд (одна кнопка, без нагрузки) */
@keyframes autoRecoRing{
0%,100%{ box-shadow:0 0 0 0 rgba(46,159,85,.65), 0 3px 0 rgba(0,0,0,.25); }
50%{ box-shadow:0 0 0 9px rgba(46,159,85,0), 0 3px 0 rgba(0,0,0,.25); }
}
.gb-modules-auto.gb-reco:not(.locked){ animation:autoRecoRing 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .gb-modules-auto.gb-reco{ animation:none; } }
@media (max-width:700px){
.gb-actions{ flex-direction:column; align-items:stretch; }
.gb-actions .gb-modules-go, .gb-actions .gb-modules-auto{ width:100%; margin:0; }
.gb-actions .gb-modules-auto{ order:1; }
.gb-actions .gb-modules-cancel{ order:2; }
.gb-actions .gb-modules-go-sec{ order:3; }
}
#guideResetModal.grm-info .grm-box{ border-top-color:#2e9f55; }
#guideResetModal.grm-info .grm-title{ color:#1f6f3d; }
#guideResetModal.grm-info .grm-reset{ background:linear-gradient(180deg,#2e9f55,#1f6f3d); }
.gb-modules-hint-list li.gb-manual b{ color:#6b3f00; }
.gb-manual-tag{ display:inline-block; padding:1px 8px; font-size:12.5px; font-weight:800; color:#6b3f00; background:#fff1cf; border:1px solid #e6c98d; border-radius:999px; }
/* Значок светодиода рядом с названием пункта («Температура 💡»); горит, когда пункт отмечен */
.sens-led-row .sens-led-ico{ margin-left:8px; vertical-align:middle; }
.sens-led-row input:checked ~ .sens-led-ico{
background:#fff3b0;
border-color:#ffd34d;
box-shadow:0 0 8px 2px rgba(255,211,77,.9), 0 0 14px 4px rgba(255,77,77,.5);
}
/* Пояснение к значку светодиода на кнопках разделов */
.intro-led-note{ margin:10px 0 0; padding:10px 14px; background:#fffbe8; border:1px solid #ecd88a; border-radius:10px; color:#4a3b00; }
.intro-led-title{ font-weight:800; margin-bottom:4px; }
.intro-led-note p{ margin:0; font-size:14.5px; line-height:1.5; }
.led-cap-hint{ margin:6px 0 10px; padding:7px 10px; background:#fffbe8; border-left:4px solid #f0c040; border-radius:6px; font-size:14px; line-height:1.45; color:#4a3b00; }
.led-inline{ display:inline-block; vertical-align:middle; margin:0 2px; padding:1px 6px; background:rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.18); border-radius:999px; line-height:1; }
.led-inline .led-ico{ width:12px; height:19px; color:#555; vertical-align:middle; }
.gb-remove{ margin-left:6px; padding:3px 12px; font-size:13px; font-weight:800; color:#a52a2a; background:#fff; border:2px solid #a52a2a; border-radius:999px; cursor:pointer; }
.gb-remove:hover{ background:#a52a2a; color:#fff; }
/* Телефон: «Авто выбор» не такая огромная */
@media (max-width:700px){
.gb-actions{ gap:8px; }
.gb-actions .gb-modules-auto{ padding:10px 14px; font-size:16px; border-radius:10px; }
.gb-actions .gb-modules-cancel{ padding:8px 12px; font-size:14px; }
.gb-actions .gb-modules-go-sec{ padding:7px 12px; font-size:13px; }
.gb-auto-reco{ font-size:14px; padding:8px 10px; }
}
@media (max-width:700px){
/* в колонке flex-basis работал как высота (260px) — кнопка была огромной */
.gb-actions .gb-modules-auto,
.gb-actions .gb-modules-cancel,
.gb-actions .gb-modules-go-sec{ flex:0 0 auto; }
}
/* «Светодиоды…»: убираем лишние пробелы между счётчиком «📌 Выводов платы» и «PWM (пояснение)» */
#ledsWrap > .pins-meter{ margin-bottom:4px; }
#ledsWrap > #ledControlTypeHint{ margin:0 0 4px; }
#ledsWrap > #intro5{ margin-top:4px; }
/* «PWM (пояснение)»: абзацы идут плотно, без больших пробелов между ними */
#ledsWrap > #intro5,
#ledsWrap > #intro6,
#ledsWrap > #intro7,
#ledsWrap > #intro8{ margin-top:0; margin-bottom:4px; }
#ledsWrap > #intro5{ margin-top:4px; margin-bottom:2px; }
#ledsWrap > #intro8{ margin-bottom:10px; }
#ledsWrap > .pins-meter{ margin-bottom:0; }
#ledsWrap > #ledControlTypeHint{ margin:0; }
#ledsWrap > #intro5{ margin-top:0; }
/* «Светодиоды…»: компактнее между кнопкой раздела и блоком «PWM (пояснение)» */
#ledsWrap > .pins-meter{ margin-top:0; padding:5px 10px; }
#ledsWrap > .pins-meter .pins-bar{ margin-top:4px; }
#ledsToggle.open{ margin-bottom:6px; }
/* : , ( ) */
#ledControlTypeHint:not(.visible){ display:none; }