/* ============================================================ SMARTBILD.PRO — addons.css v1.0 Переключатель языка · баннер cookie · правовые страницы. Подключается на всех страницах после основных стилей. Все цвета — только через токены брендбука. ============================================================ */ /* ---------- 1. Переключатель языка ---------- */ .lang{ display:inline-flex;align-items:center;gap:6px;flex-shrink:0; height:36px;padding:0 12px;border-radius:var(--r-pill); border:1px solid var(--sb-line); font-size:13px;font-weight:600;letter-spacing:.04em; color:var(--sb-muted);transition:var(--t-fast) var(--ease); } .lang:hover{color:var(--sb-green);border-color:var(--sb-green)} .lang b{color:var(--sb-white);font-weight:600} /* Флаг — целевой язык переключения: на русской версии показываем британский, на английской — российский. Управляется атрибутом . */ .lang .flag{ display:inline-flex;width:20px;height:14px;flex-shrink:0; border-radius:3px;overflow:hidden; box-shadow:0 0 0 1px rgba(230,232,235,.2); transition:transform var(--t-fast) var(--ease); } .lang .flag svg{display:block;width:100%;height:100%} .lang:hover .flag{transform:scale(1.08)} .lang .flag-ru{display:none} html[lang="en"] .lang .flag-en{display:none} html[lang="en"] .lang .flag-ru{display:inline-flex} .nav .lang{margin-left:12px} /* Шапка стала шире: знак 60 px (минимум по брендбуку) + переключатель языка. Раньше меню сворачивалось только на 720 px — теперь раньше, иначе строка переполняется на ноутбуках. */ .nav-links a{white-space:nowrap} @media (max-width:1320px){ .nav{gap:20px} .logo-tag{display:none} } @media (max-width:1200px){ .nav-links,.nav>.btn{display:none} .burger{display:flex} .nav .lang{margin-left:auto;margin-right:4px} .nav.open .nav-links{ display:flex;flex-direction:column; position:absolute;top:84px;left:0;right:0; background:var(--sb-black);border-bottom:1px solid var(--sb-line); padding:16px 24px 24px;margin:0; } } /* Подписи плиток: длинная русская строка не должна ломать метку тренда */ .tile small{gap:8px} .trend{white-space:nowrap} /* Двуязычные блоки: показываем только активный язык. До инициализации JS виден русский — язык оригинала. */ [data-lang-block="en"]{display:none} html[lang="en"] [data-lang-block="en"]{display:block} html[lang="en"] [data-lang-block="ru"]{display:none} /* Правовые ссылки в подвале: переносятся, не ломают строку */ .f-bottom .f-legal{ display:flex;gap:6px;flex-wrap:wrap; max-width:70ch;line-height:1.9; } /* ---------- 2. Баннер согласия на cookie ---------- */ .cc{ position:fixed;left:16px;right:16px;bottom:16px;z-index:900; max-width:760px;margin:0 auto; background:var(--sb-surface);border:1px solid var(--sb-line); border-radius:var(--r-l);padding:22px 24px; box-shadow:0 30px 80px rgba(0,0,0,.5); display:none;flex-direction:column;gap:14px; } .cc.show{display:flex} .cc h2{font-size:17px;font-weight:600;line-height:1.3;color:var(--sb-white)} .cc p{font-size:13.5px;line-height:1.55;color:var(--sb-muted)} .cc a{color:var(--sb-green)} .cc a:hover{text-decoration:underline} .cc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px} .cc .btn{height:42px;padding:0 20px;font-size:14px} .cc .btn[hidden]{display:none} /* [hidden] слабее inline-flex у .btn */ .cc-opts{ display:none;flex-direction:column;gap:10px; border-top:1px solid var(--sb-line);padding-top:14px; } .cc.open .cc-opts{display:flex} .cc-opt{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--sb-muted)} .cc-opt input{width:16px;height:16px;accent-color:var(--sb-green);margin-top:2px;flex-shrink:0} .cc-opt b{display:block;font-size:13.5px;color:var(--sb-gray);font-weight:600} .cc-opt input:disabled{opacity:.6} /* один зелёный акцент на блок (брендбук, раздел 04): в режиме настройки главное действие — «Сохранить выбор», «Принять все» становится вторичной */ .cc.open #ccAll{background:transparent;border:1.5px solid rgba(230,232,235,.24);color:var(--sb-gray)} .cc.open #ccAll:hover{border-color:var(--sb-green);color:var(--sb-green);box-shadow:none;transform:none} @media (max-width:720px){ .cc{left:12px;right:12px;bottom:12px;padding:18px} .cc-actions .btn{width:100%} } /* ---------- 3. Карта Яндекса ---------- Стилизованная подложка видна, пока грузится iframe: блок не «прыгает» и не мигает белым. Как только карта пришла — подложка убирается. */ .map-ph iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4} .map-ph.loaded .pin, .map-ph.loaded>svg{display:none} /* ============================================================ 4. МОТИВ-СЛОЙ (брендбук, раздел 07 и 14) Движение сигнала по линиям, появление узлов, отрисовка контура знака. Длительности переходов — 0.3–0.6 с; отсчёт чисел и прогресс-линия длиннее, это входные эффекты, а не микровзаимодействия. Всё отключается при prefers-reduced-motion (блок в конце файла). ============================================================ */ /* 4.1 Каскад появления: соседние карточки въезжают со сдвигом */ html.js .reveal{transition-delay:var(--d,0s)} /* 4.2 Отрисовка знака в шапке при загрузке (раздел 14) */ .logo-draw path,.logo-draw circle{opacity:0} .logo-draw.run path{ opacity:1; stroke-dasharray:var(--len);stroke-dashoffset:var(--len); animation:sb-draw .9s var(--ease) forwards; } .logo-draw.run path:nth-of-type(2){animation-delay:.28s} .logo-draw.run circle{animation:sb-node .5s var(--ease) forwards} .logo-draw.run circle:nth-of-type(1){animation-delay:.55s} .logo-draw.run circle:nth-of-type(2){animation-delay:.7s} .logo-draw.run circle:nth-of-type(3){animation-delay:.82s} @keyframes sb-draw{to{stroke-dashoffset:0}} @keyframes sb-node{ 0%{opacity:0;transform:scale(.2)} 60%{opacity:1;transform:scale(1.5)} 100%{opacity:1;transform:scale(1)} } .logo-draw circle{transform-box:fill-box;transform-origin:center} /* 4.2a Карточки направлений («О компании»). Вся раскадровка — в js/motion.js через Web Animations API: карточка появляется уменьшенной и не на своём месте, вырастает, печатает заголовок и только потом встаёт в строку. CSS держит лишь исходную невидимость; опишешь это переходами — они подерутся с покадровой анимацией. */ .dir-intro{will-change:transform,opacity} .dir-intro .type-caret{ display:inline-block;width:.06em;height:1em;margin-left:.06em; background:var(--sb-green);vertical-align:-.12em; animation:sb-caret .7s steps(1) infinite; } @keyframes sb-caret{0%,50%{opacity:1}51%,100%{opacity:0}} /* 4.2b «Полный цикл» в услугах: пунктир прочерчивается слева направо, по нему идёт сигнал, номера этапов встают следом. */ html.js .steps::before{ transform:scaleX(0);transform-origin:left; transition:transform 1.1s var(--ease); } html.js .steps.in::before{transform:scaleX(1)} .steps::after{ content:"";position:absolute;top:22px;left:6%;z-index:0; width:9px;height:9px;border-radius:50%; background:var(--sb-green);box-shadow:0 0 14px rgba(25,211,138,.9); opacity:0;pointer-events:none; } html.js .steps.in::after{animation:sb-run 3.4s var(--ease) 1.1s infinite} @keyframes sb-run{ 0%{left:6%;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{left:94%;opacity:0} } html.js .step.reveal .step-num{ opacity:0;transform:scale(.35); transition:opacity .4s var(--ease),transform .55s cubic-bezier(.2,1.6,.4,1); } html.js .step.reveal.in .step-num{ opacity:1;transform:none; transition-delay:calc(var(--d,0s) + .5s); } @media (max-width:1024px){ /* этапы становятся в две колонки — связующей линии там нет */ .steps::after,.steps-line{display:none} } /* 4.2c Наведение на этап: карточка просто чуть подрастает и поднимается. Подложку и заливку номера убрали — на четырёх этапах подряд это было слишком шумно. */ /* SVG-линия связи между этапами: рисуется скриптом и гнётся при наведении. Когда она есть, CSS-пунктир прячем, иначе линии задвоятся. */ .steps-line{ position:absolute;top:0;left:0;width:100%;height:70px; z-index:0;pointer-events:none;overflow:visible; } .steps-line path{ fill:none;stroke:var(--sb-green);stroke-width:2; stroke-dasharray:10 10;stroke-linecap:round;opacity:.42; } /* сигнал теперь едет по SVG-пути и повторяет его изгиб */ .steps-line .steps-dot{ fill:var(--sb-green); filter:drop-shadow(0 0 6px rgba(25,211,138,.9)); } html.js .steps.has-line::before{display:none} html.js .steps.has-line::after{display:none;animation:none} .step{transform-origin:50% 100%} /* кружок этапа подсвечивается при наведении — сдержанно, без заливки */ .step .step-num{ transition:border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), color var(--t-base) var(--ease); } .step:hover .step-num, html.js .step.reveal.in:hover .step-num{ border-color:var(--sb-green-2);color:var(--sb-green-2); box-shadow:0 0 0 4px rgba(25,211,138,.10), 0 0 20px rgba(25,211,138,.45); } .step:hover{transform:translateY(-10px) scale(1.05)} /* Этап — ещё и блок появления (.reveal.in), а то правило обнуляет transform и весит больше. Поэтому наведение описываем не слабее: класс + класс + псевдокласс перебивают «html.js .reveal.in». */ html.js .step.reveal.in{ transition:opacity var(--t-slow) var(--ease), transform var(--t-base) var(--ease); } /* значения продублированы в initStepLine (LIFT, SCALE) — линия по ним считает, насколько поднять точку изгиба */ html.js .step.reveal.in:hover{transform:translateY(-10px) scale(1.05)} @media (max-width:1024px){ .step:hover,html.js .step.reveal.in:hover{transform:none} } /* 4.3 Линия прогресса чтения в шапке */ .header{position:sticky} .scroll-line{ position:absolute;left:0;bottom:-1px;height:2px;width:100%; transform:scaleX(var(--p,0));transform-origin:left; background:linear-gradient(90deg,var(--sb-green),var(--sb-green-2)); box-shadow:0 0 12px rgba(25,211,138,.5); pointer-events:none; } /* 4.4 Вспышка значения при смене сценария или зоны */ @keyframes sb-flash{ 0%{transform:translateY(4px);opacity:.35} 100%{transform:none;opacity:1} } .tile .val.flash,.ctrl .num.flash{animation:sb-flash var(--t-base) var(--ease)} /* 4.5 Глубина при наведении: карточка отрывается от фона */ .dir,.work,.post,.dept,.pack{ transition:transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } .dir:hover,.work:hover,.post:hover,.dept:hover,.pack:hover{ box-shadow:0 22px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(25,211,138,.16); } /* узел-акцент проявляется в углу карточки — графязык, раздел 06 */ .dir::before,.dept::before{ content:"";position:absolute;top:16px;right:16px; width:6px;height:6px;border-radius:50%;background:var(--sb-green); opacity:0;transform:scale(.4); transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease); } .dir:hover::before,.dept:hover::before{opacity:1;transform:none} .dept{position:relative} /* 4.6 Параллакс фоновой трассы в hero */ .circuit-bg{will-change:transform} /* 4.7 Кнопка-призыв: мягкое дыхание свечения, пока элемент в поле зрения */ .hero-cta .btn-primary{position:relative} .hero-cta .btn-primary::after{ content:"";position:absolute;inset:0;border-radius:inherit; box-shadow:0 0 0 0 rgba(25,211,138,.45); animation:sb-halo 3.2s var(--ease) infinite; pointer-events:none; } @keyframes sb-halo{ 0%{box-shadow:0 0 0 0 rgba(25,211,138,.4)} 70%{box-shadow:0 0 0 14px rgba(25,211,138,0)} 100%{box-shadow:0 0 0 0 rgba(25,211,138,0)} } @media (prefers-reduced-motion:reduce){ .logo-draw path,.logo-draw circle{opacity:1;animation:none!important;stroke-dashoffset:0!important} .scroll-line{display:none} .hero-cta .btn-primary::after{animation:none} html.js .reveal{transition-delay:0s} } /* ============================================================ 5. ПЛАН КВАРТИРЫ («Решения по зонам», index.html) Комната — селектор зоны. Заливка показывает яркость, подпись — целевую температуру. Логика в скрипте страницы. ============================================================ */ /* План — самый тяжёлый узел страницы: сотни SVG-элементов, паттерн пола, градиентные ореолы. Пока секция ниже экрана, браузер вправе не тратить на неё раскладку и растр; высоту резервирует .plan-persp, поэтому прокрутка не скачет. */ .plan{ margin-bottom:26px;position:relative;width:100%;max-width:1150px; content-visibility:auto; contain-intrinsic-size:auto 480px; } /* max-width держит масштаб плана крупным, но не даёт подписям в SVG растянуться сверх меры на широких экранах */ .plan svg{width:100%;max-width:1150px;height:auto;display:block;margin:0 auto;overflow:visible} /* Пол светлее фона секции — комната читается как объём, а не как дыра. Секция идёт на --sb-surface, поэтому пол берём на ступень выше. */ .plan .room rect{ fill:var(--sb-surface-2);stroke:rgba(230,232,235,.28);stroke-width:1.5; transition:fill var(--t-base) var(--ease),stroke var(--t-base) var(--ease); } .plan .room{cursor:pointer} /* фактура пола — точечный паттерн из брендбука, раздел 06 */ .plan .room rect.room-floor{fill:url(#floorDots);stroke:none} /* Температурная подкраска: холодная зона уходит в Tech Blue, тёплая — в Orange. Цвет и прозрачность считает скрипт (не более 16%), поэтому акценты остаются в пределах 5% макета по разделу 04. */ .plan .room rect.room-temp{ stroke:none;opacity:0; transition:opacity var(--t-slow) var(--ease),fill var(--t-slow) var(--ease); } /* цифра температуры в панели и в сводке красится тем же цветом */ .ctrl .num,.zone-card-rows dd{transition:color var(--t-base) var(--ease)} /* Мебель, окна, двери — нейтральная графика: зелёный остаётся за интерактивом и статусами (брендбук, раздел 04). */ .plan .fur{fill:none;stroke:rgba(230,232,235,.40);stroke-width:1.3;stroke-linejoin:round} .plan .fur circle{fill:none} .plan .door{fill:none;stroke:rgba(230,232,235,.36);stroke-width:1.2} .plan .win{stroke:rgba(230,232,235,.6);stroke-width:3;stroke-linecap:round} .plan .curtain{fill:none;stroke:rgba(230,232,235,.45);stroke-width:1.3;stroke-linecap:round} /* Световая точка: ореол растёт и разгорается вместе с яркостью зоны. --lit (0…1) выставляет paintRoom() для каждой комнаты. */ .plan .lamp-glow{ fill:url(#lampGlow); opacity:calc(var(--lit,0) * .9); transform:scale(calc(.45 + var(--lit,0) * .75)); transform-box:fill-box;transform-origin:center; transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease); } .plan .lamp-dot{ fill:var(--sb-green); opacity:calc(.25 + var(--lit,0) * .75); transition:opacity var(--t-slow) var(--ease); } .plan .room.on .lamp-dot{filter:drop-shadow(0 0 4px rgba(25,211,138,.9))} /* специфичность выше, чем у «.plan .room rect», иначе заливку перебивает чёрный */ .plan .room rect.room-light{ fill:var(--sb-green);stroke:none;opacity:0; transition:opacity var(--t-slow) var(--ease); } /* Подписи лежат поверх мебели, поэтому получают ореол цвета пола: обводка рисуется под заливкой (paint-order) и разрывает линии под текстом. */ .plan text{ paint-order:stroke fill; stroke:var(--sb-surface-2);stroke-width:5;stroke-linejoin:round; } .plan .rn{ fill:var(--sb-muted);font-size:14px;font-weight:600; transition:fill var(--t-base) var(--ease); } .plan .rv{fill:var(--sb-muted);font-size:13px;font-weight:500;opacity:.75} .plan .room:hover rect:first-of-type, .plan .room:focus-visible rect:first-of-type{stroke:rgba(25,211,138,.55)} .plan .room:hover .rn,.plan .room:focus-visible .rn{fill:var(--sb-gray)} .plan .room:focus{outline:none} .plan .room:focus-visible rect:first-of-type{stroke-width:2} .plan .room.on rect:first-of-type{stroke:var(--sb-green);stroke-width:2} .plan .room.on .rn{fill:var(--sb-white)} .plan .room.on .rv{fill:var(--sb-green);opacity:1} /* Индикаторы состояния: каждый тумблер панели виден на плане. Лента — акцентный свет, штриховой контур — четвёртая система зоны (охрана, шторы, вытяжка, тёплый пол, СКУД). */ /* Акцентный свет — светодиодные ленты вдоль двух стен. Выключены — тусклый «профиль», включены — светятся и подсвечивают стену. */ /* Цвет ленты берётся из состояния зоны (--fx-acc): обычно фирменный зелёный, в сценарии «Вечеринка» у каждой комнаты свой. */ .plan .fx-strip{ fill:var(--fx-acc,var(--sb-green));stroke:none;opacity:.10; transition:opacity var(--t-base) var(--ease),filter var(--t-base) var(--ease), fill var(--t-base) var(--ease); } .plan .room.fx-accent .fx-strip{ opacity:.9;filter:drop-shadow(0 0 5px var(--fx-acc,var(--sb-green))); } .plan .room.on.fx-accent .fx-strip{ opacity:1;filter:drop-shadow(0 0 9px var(--fx-acc,var(--sb-green))); } /* Датчики зоны: в покое серые точки, при включённой системе мигают своим цветом — охрана и газ тревожным, бытовые системы спокойным. */ .plan .fx-dot{ fill:rgba(230,232,235,.30); transition:fill var(--t-base) var(--ease); } /* Мигание идёт через transform, а не через r: смена радиуса заставляет браузер каждый кадр пересчитывать геометрию SVG, масштаб же остаётся на композиции. Пятнадцать точек по всем зонам мигали и за экраном — анимации запускаются только у видимого плана (класс .live ставит скрипт). */ .plan .room.fx-on .fx-dot{ fill:var(--fx-dot,var(--sb-green)); transform-box:fill-box;transform-origin:center; animation:sb-blink 1.6s var(--ease) infinite; animation-play-state:paused; } .plan.live .room.fx-on .fx-dot{animation-play-state:running} .plan .room.fx-on .fx-dot.d2{animation-delay:.28s} .plan .room.fx-on .fx-dot.d3{animation-delay:.56s} @keyframes sb-blink{ 0%,100%{opacity:.22;transform:scale(1)} 50%{opacity:1;transform:scale(1.286)} } /* На узком экране план сжимается, а текст в SVG масштабируется вместе с ним. Поднимаем кегль в единицах viewBox, чтобы на экране осталось ≥13 px (брендбук, раздел 12). Блок обязан идти после базовых правил .rn/.rv. */ @media (max-width:720px){ .plan .rn{font-size:26px} .plan .rv{font-size:24px} /* линии мебели тоньше пикселя на телефоне — утолщаем в единицах viewBox */ .plan .fur{stroke-width:2.2} .plan .curtain{stroke-width:2.2} .plan .door{stroke-width:2} .plan .win{stroke-width:4.5} .plan text{stroke-width:8} } /* шина: линии идут по разрывам стен — графязык, раздел 06 */ .plan-bus path{ fill:none;stroke:var(--sb-green);stroke-width:1.4; opacity:.45;stroke-dasharray:6 8;stroke-linecap:round; } .plan-bus .signal{ opacity:.9;stroke:var(--sb-green-2);stroke-width:2; stroke-dasharray:40 620;animation:signal 4.6s linear infinite; animation-play-state:paused; } .plan.live .plan-bus .signal{animation-play-state:running} .plan-hint{margin-top:14px;font-size:13px;color:var(--sb-muted)} /* Цифровой двойник: план читается как объёмная модель квартиры — тот же изометрический язык, что в приложении SmartBild OS. */ .twin{ position:relative;overflow:hidden; background:radial-gradient(90% 120% at 60% 10%,rgba(25,211,138,.10),transparent 60%),var(--sb-black); border:1px solid var(--sb-line);border-radius:var(--r-l); padding:44px 24px 76px; } /* ---------- Сцена WebGPU ---------- Канвас лежит поверх плоского плана и включается вместо него в режиме 3D. Пока сцена не стартовала, виден обычный SVG-план — он же остаётся единственным видом там, где нет ни WebGPU, ни WebGL. */ .stage3d{position:absolute;inset:0;opacity:0;pointer-events:none; transition:opacity var(--t-slow) var(--ease)} .twin.is3d .stage3d{opacity:1;pointer-events:auto} .twin.is3d .plan-persp{opacity:0;pointer-events:none} .plan-persp{transition:opacity var(--t-base) var(--ease)} .stage3d canvas{display:block;width:100%;height:100%} .plan-view{position:absolute;top:16px;right:16px;margin:0;z-index:5} .plan-view[hidden]{display:none} /* экран загрузки сцены: сборка идёт по этапам, поэтому показываем и текст этапа, и полосу прогресса */ .loader3d{ position:absolute;inset:0;z-index:6; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; background:rgba(11,15,16,.82);backdrop-filter:blur(3px); font-size:13.5px;color:var(--sb-gray); } .loader3d[hidden]{display:none} .ring3d{ width:38px;height:38px;border-radius:50%; border:2px solid rgba(230,232,235,.16);border-top-color:var(--sb-green); animation:spin3d .8s linear infinite; } @keyframes spin3d{to{transform:rotate(360deg)}} .bar3d{width:190px;height:3px;border-radius:2px;background:rgba(230,232,235,.14);overflow:hidden} .bar3d i{display:block;height:100%;width:0;background:var(--sb-green); border-radius:2px;transition:width .3s var(--ease)} @media (prefers-reduced-motion:reduce){.ring3d{animation:none}} /* зум цифрового двойника: колесо и пинч работают и без кнопок, но кнопки делают возможность видимой и доступны с клавиатуры */ .zoomer{position:absolute;right:16px;bottom:52px;z-index:5; display:flex;flex-direction:column;gap:6px} .zoomer[hidden],.twin:not(.is3d) .zoomer{display:none} .zoomer button{ width:34px;height:34px;border-radius:var(--r-s); background:rgba(11,15,16,.72);border:1px solid var(--sb-line); color:var(--sb-gray);font-size:16px;line-height:1; display:grid;place-items:center;backdrop-filter:blur(6px); transition:var(--t-fast) var(--ease); } .zoomer button:hover{border-color:var(--sb-green);color:var(--sb-green)} .plan-persp{ width:100%;display:grid;place-items:center; min-height:clamp(414px,45vw,612px); } .twin-hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;margin:0} @media (max-width:720px){ .twin{padding:28px 20px 46px} .plan-persp{min-height:clamp(300px,64vw,414px)} } /* ---------- Раскладка блока «Решения по зонам» ---------- План и контролы стоят рядом, чтобы регулировка и её результат попадали в один экран: тянешь ползунок — сразу видишь комнату. */ .zone-wrap{display:block} .zone-head{max-width:660px;margin-bottom:38px} .zone-body{ display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.5fr); gap:32px;align-items:start; } .zone-body .plan{margin-bottom:0} .zone-body .plan-hint{margin-top:12px} .zone-body .controls{gap:12px} .zone-body .ctrl{padding:14px 16px;gap:10px} /* в узкой колонке подпись не должна ломаться: ползунок отдаёт ей место */ .zone-body .ctrl-name{flex:1 1 auto;min-width:112px} .zone-body .ctrl-name b{white-space:nowrap} /* сужаем только ползунок яркости: климатический занимает всю ширину строки */ .zone-body .range:not(.range-ac){flex:0 1 96px;width:auto;min-width:64px} .zone-body .ctrl .num{min-width:50px} @media (max-width:1024px){ .zone-body{grid-template-columns:1fr;gap:28px} } /* ---------- Шкала кондиционера ---------- Степпер даёт цифру, шкала — место этой цифры в диапазоне 16–28 °C. Климат стало видно так же ясно, как яркость на ползунке. */ .ctrl-ac{flex-wrap:wrap} .ac-scale{flex:1 0 100%;width:100%;min-width:0;margin-top:2px} /* Ползунок климата: дорожка окрашена от холодного к тёплому, бегунок берёт цвет текущей уставки из --ac-color. */ .range-ac{ -webkit-appearance:none;appearance:none; display:block;width:100%;height:6px;border-radius:3px;outline:none; background:linear-gradient(90deg, rgba(20,130,229,.65) 0%, var(--sb-surface-2) 50%, rgba(255,107,61,.65) 100%); } .range-ac::-webkit-slider-thumb{ -webkit-appearance:none;width:16px;height:16px;border-radius:50%; background:var(--ac-color,var(--sb-green)); border:2px solid var(--sb-surface);cursor:pointer; box-shadow:0 0 10px rgba(25,211,138,.45); } .range-ac::-moz-range-thumb{ width:16px;height:16px;border-radius:50%; background:var(--ac-color,var(--sb-green)); border:2px solid var(--sb-surface);cursor:pointer; } .ac-ends{ display:flex;justify-content:space-between; margin-top:7px;font-size:13px;color:var(--sb-muted); } .ac-ends em{font-style:normal} @media (prefers-reduced-motion:reduce){ .plan-bus .signal{animation:none} } /* ============================================================ 6. ЦИФРОВЫЕ БАРАБАНЫ в hero-статистике Разряд прокручивается до нужной цифры — эффект счётчика на щите. Собирается скриптом js/motion.js. ============================================================ */ /* line-height ровно 1: строчный бокс равен высоте барабана, поэтому цифры и суффикс в стоят на одной линии */ .hstat b.has-reels{line-height:1} /* правило .hstat span перебивает размер и цвет барабанов — возвращаем наследование */ .hstat b .reel,.hstat b .reel-track, .hstat b .reel-cell,.hstat b .reel-static{font:inherit;color:inherit} .reel{ display:inline-block;height:1em;overflow:hidden; vertical-align:bottom; } .reel-track{ display:block; will-change:transform; /* прокрутку задаёт js/motion.js через Web Animations API: CSS-переход на свежевставленном узле браузер схлопывает */ } .reel-cell{display:block;height:1em;line-height:1;text-align:center} .reel-static{display:inline-block;height:1em;line-height:1;vertical-align:bottom} /* значение для скринридеров, барабаны от них скрыты */ .sr{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ---------- 7. Правовые страницы ---------- */ .legal{padding:56px 0 96px} .legal .container{max-width:820px} .legal .doc-meta{ display:flex;gap:18px;flex-wrap:wrap; font-size:13px;color:var(--sb-muted); border-bottom:1px solid var(--sb-line);padding-bottom:20px;margin-bottom:36px; } .legal h2{ font-size:20px;font-weight:600;line-height:1.3;color:var(--sb-white); margin:40px 0 14px; } .legal h3{font-size:16px;font-weight:600;line-height:1.3;color:var(--sb-gray);margin:26px 0 10px} .legal p{font-size:15px;line-height:1.65;color:var(--sb-gray);margin-bottom:12px} .legal ul,.legal ol{margin:0 0 14px 20px;display:flex;flex-direction:column;gap:8px} .legal li{font-size:15px;line-height:1.6;color:var(--sb-gray)} .legal a{color:var(--sb-green)} .legal a:hover{text-decoration:underline} .legal .note{ background:var(--sb-surface);border:1px solid var(--sb-line); border-left:2px solid var(--sb-green); border-radius:var(--r-m);padding:18px 20px;margin:24px 0; } .legal .note p{margin:0;font-size:14px;color:var(--sb-muted)} .legal table{ width:100%;border-collapse:collapse;margin:16px 0 20px; font-size:14px; } .legal th,.legal td{ text-align:left;vertical-align:top; padding:12px 14px;border-bottom:1px solid var(--sb-line); } .legal th{ font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--sb-white); } .legal td{color:var(--sb-muted)} .legal td:first-child{color:var(--sb-gray)} .legal .tbl-wrap{overflow-x:auto} .legal .req-legal{ margin-top:40px;padding-top:24px;border-top:1px solid var(--sb-line); font-size:13.5px;color:var(--sb-muted);line-height:1.7; } /* ============================================================ 8. МОБИЛЬНАЯ АДАПТАЦИЯ Правки под палец и мелкий экран: ничего не обрезается, подписи читаются без прищура, а всё, что нажимается, имеет площадь ≥40 px. Блок идёт последним, поэтому перекрывает базовые правила страниц. ============================================================ */ /* План квартиры в ячейке грида раньше сжимался по контенту SVG и вылезал за карточку двойника — правый край плана просто обрезался. Растягиваем элемент по ширине ячейки: план целиком помещается на любом экране. */ .plan-persp{align-items:center;justify-items:stretch} .plan{max-width:100%} /* Кнопка заявки в шапке на телефоне прячется под бургер, поэтому в самом меню лежит её дубль: главное действие не должно пропадать на мобильном. */ .nav-cta-m{display:none} @media (max-width:720px){ /* цвет задаём явно: правило .nav-links a специфичнее, чем .btn-primary, и без этого подпись кнопки уходит в серый по зелёному */ .nav.open .nav-links .nav-cta-m{ display:inline-flex;justify-content:center; height:46px;margin-top:12px;font-size:15px;font-weight:600; color:var(--sb-black);background:var(--sb-green); } .nav.open .nav-links .nav-cta-m:hover{color:var(--sb-black);background:var(--sb-green-2,var(--sb-green))} /* Надзаголовки, теги и подписи под фото были 10,5–11,5 px — на телефоне это уже нечитаемо. Минимум по брендбуку (раздел 12) — 12 px. */ .eyebrow{font-size:12px;letter-spacing:.12em} .tag{font-size:12.5px;padding:6px 13px} .ph-label{font-size:12px;left:14px;bottom:12px} .trend{font-size:12px} .panel small,.tile small{font-size:12.5px} .zscene-txt em{font-size:12.5px} .crumbs{font-size:13.5px} /* Грид первого экрана: колонка 1fr берёт минимальную ширину контента, поэтому широкая демо-панель растягивала страницу за край экрана. minmax(0,1fr) разрешает колонке сжиматься, а панели — переносить внутренние строки. */ .hero-grid{grid-template-columns:minmax(0,1fr)} .panel,.tile,.zone-body,.controls,.twin{min-width:0} .panel .scenes{flex-wrap:wrap} /* Подпись плитки и метка тренда стоят в одной строке: на узком экране метка переезжает вниз, а не режет слово пополам. */ .tile small{flex-wrap:wrap;gap:2px 10px} .tile small,.panel small{overflow-wrap:break-word} /* Тройка цифр под первым экраном не влезала в 320 px: строка не переносилась и растягивала страницу — появлялась горизонтальная прокрутка на всю высоту сайта. Разрешаем перенос и делим ширину. */ .hero-stats,.ph-stats{flex-wrap:wrap;gap:16px 0} .hstat,.ph-stats .hstat{ flex:1 1 42%;min-width:0; padding-right:16px;margin-right:16px; } .hstat span{overflow-wrap:anywhere} /* Пальцу нужна площадь: ссылки-строки получают высоту ≥40 px, чекбокс согласия — 20 px, телефон в контактах — полноценную кнопку. */ .f-col a{padding:9px 0;min-height:40px;display:flex;align-items:center} .f-bottom .f-legal a,.f-bottom a{display:inline-flex;align-items:center;min-height:34px} .post-link{min-height:40px} .crumbs a{display:inline-flex;align-items:center;min-height:34px} .c-item a,.dept a{display:inline-flex;align-items:center;min-height:40px;font-size:15px} .consent input{width:22px;height:22px;margin-top:1px;flex-shrink:0} /* галочки в настройках cookie тоже под палец */ .cc input[type="checkbox"]{width:22px;height:22px;flex-shrink:0} .cc a{display:inline-block;padding:3px 0} .consent label,.consent span{font-size:13px;line-height:1.55} /* Ползунки: сам раньше был 5–6 px в высоту — попасть по нему пальцем почти невозможно. Поле поднимаем до 30 px (это зона нажатия), а видимую дорожку рисуем псевдоэлементом трека, поэтому внешне ползунок остаётся тонким. */ .range{height:30px;background:transparent} .range::-webkit-slider-runnable-track{ height:8px;border-radius:4px;background:var(--sb-surface-2); } .range::-webkit-slider-thumb{width:24px;height:24px;margin-top:-8px} .range::-moz-range-track{height:8px;border-radius:4px;background:var(--sb-surface-2)} .range::-moz-range-thumb{width:24px;height:24px} .range-ac{height:30px;background:transparent} .range-ac::-webkit-slider-runnable-track{ height:8px;border-radius:4px; background:linear-gradient(90deg, rgba(20,130,229,.65) 0%,var(--sb-surface-2) 50%,rgba(255,107,61,.65) 100%); } .range-ac::-webkit-slider-thumb{width:24px;height:24px;margin-top:-8px} .range-ac::-moz-range-track{ height:8px;border-radius:4px; background:linear-gradient(90deg, rgba(20,130,229,.65) 0%,var(--sb-surface-2) 50%,rgba(255,107,61,.65) 100%); } .range-ac::-moz-range-thumb{width:24px;height:24px} /* тумблеры — не меньше 32 px по высоте */ .toggle{width:56px;height:32px} .toggle::after{width:26px;height:26px} .toggle.on::after{left:27px} /* статус-бейдж демо-панели читался мельче остального текста */ .panel-top .live{font-size:12.5px} .zone-body .ctrl{padding:16px;gap:12px} .zone-body .range:not(.range-ac){flex:0 1 120px} } @media (max-width:420px){ /* Шапка: знак 60 px + слово + язык + бургер не помещались в 320 px и растягивали страницу — отсюда горизонтальная прокрутка на всём сайте. Ужимаем знак и переключатель языка, слово логотипа остаётся читаемым. */ .nav{gap:10px} .logo{gap:8px;min-width:0} .logo svg{width:44px;height:44px} .logo-word{font-size:17px} .lang{height:34px;padding:0 9px;gap:5px;font-size:12.5px} .nav .lang{margin-left:auto;margin-right:0} .burger{padding:10px 4px} } @media (max-width:560px){ /* Карточка двойника отдаёт плану почти всю ширину экрана */ .twin{padding:24px 12px 44px} /* В 3D сцене важна высота: на телефоне квартира иначе съёживается в полоску. Плоскому плану лишняя высота не нужна — он по ширине. */ .twin.is3d .plan-persp{min-height:clamp(360px,92vw,470px)} /* кнопки зума — под палец */ .zoomer{gap:10px} .zoomer button{width:42px;height:42px;font-size:18px} /* Пока план ниже экрана, его размер берётся из contain-intrinsic-size. Заводские 480 px шире телефона, и первый кадр после появления секции успевал показать обрезанный план — на мобильном резервируем по ширине экрана, а не по десктопной величине. */ .plan{contain-intrinsic-width:auto 320px;contain-intrinsic-height:auto 480px} .zone-body .ctrl{padding:14px 14px;gap:10px} /* Кольцевой индикатор на такой ширине не помещается, но значение скрывать нельзя — иначе у ползунка не видно ни процентов, ни градусов. Показываем то же число компактной подписью справа от ползунка. */ .ring{ display:flex;align-items:center;justify-content:flex-end; width:auto;height:auto;min-width:42px;order:3; background:none;border-radius:0; } .ring::before{display:none} .ring span{ position:static;font-size:14px;font-weight:700; color:var(--sb-green);white-space:nowrap; } /* климатическая шкала занимает всю строку, её значение — над шкалой */ .ctrl-ac .ring{order:0} /* Правовые таблицы: колонки с прозой на 375 px не ужать без переносов посреди слова, поэтому оставляем горизонтальную прокрутку внутри .tbl-wrap, но делаем её заметной — правый край затенён, пока таблица не прокручена до конца (тень «прилипает» к области прокрутки). */ .legal table{font-size:13.5px;min-width:440px} .legal th,.legal td{padding:10px 10px} .legal th{font-size:12px;letter-spacing:.04em} .legal .tbl-wrap{ background: linear-gradient(90deg,var(--sb-black),rgba(11,15,16,0)) 100% 0/26px 100% no-repeat local, linear-gradient(90deg,rgba(11,15,16,0),rgba(11,15,16,.85)) 100% 0/26px 100% no-repeat scroll; } } /* ============================================================ 9. ФОТО В КАРТОЧКАХ Заглушка .ph остаётся там, где своей съёмки ещё нет. Где фото есть — оно ложится в тот же прямоугольник, а слой .ph-tint приводит разные съёмки к тёмной гамме сайта (PHOTO_GUIDELINES). ============================================================ */ .ph img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block; transition:transform var(--t-slow) var(--ease); } /* тонирующий слой: тень к нижнему краю под подписи + фирменный зелёный подсвет в правом верхнем углу, как у заглушек */ /* Зелёный держим маленьким пятном в углу: на заглушке он занимает весь прямоугольник, но поверх фотографии тот же градиент красит интерьер целиком — комната становится зелёной. */ .ph-tint{ position:absolute;inset:0;pointer-events:none; background: radial-gradient(42% 46% at 96% 4%, rgba(25,211,138,.10), transparent 64%), linear-gradient(158deg, rgba(11,15,16,.26) 0%, rgba(11,15,16,.68) 88%); } /* карточка приподнимается — кадр слегка наезжает, как в галерее */ .work:hover .ph img,.post:hover .ph img{transform:scale(1.045)} @media (prefers-reduced-motion:reduce){ .work:hover .ph img,.post:hover .ph img{transform:none} }