/* ============================================================ AZIYA TRADE — PREMIUM FX LAYER Загружается ПОВЕРХ styles.css. Прогрессивное улучшение: без JS контент полностью виден (классы .reveal и т.п. ставит JS). ============================================================ */ /* ---------- 0. Scroll progress bar ---------- */ .az-progress{ position:fixed;top:0;left:0;height:3px;width:0;z-index:200; background:linear-gradient(90deg,var(--coral),var(--teal)); box-shadow:0 0 14px rgba(255,2,76,.5); transition:width .1s linear;will-change:width; } /* ---------- 1. Cursor spotlight (fine pointer only) ---------- */ .az-cursor{ position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%; margin:-260px 0 0 -260px;pointer-events:none;z-index:60; background:radial-gradient(circle,rgba(24,169,153,.16),rgba(24,169,153,0) 62%); opacity:0;transition:opacity .4s ease;will-change:transform;mix-blend-mode:screen; } .az-cursor.on{opacity:1} /* ---------- 2. Hero aurora (animated mesh) ---------- */ .az-aurora{ position:absolute;inset:-30% -10% -10% -10%;z-index:0;pointer-events:none; filter:blur(60px);opacity:.9; } .az-aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform} .az-aurora .a1{width:46%;height:70%;left:58%;top:-18%;background:rgba(24,169,153,.55);animation:auroraA 18s ease-in-out infinite} .az-aurora .a2{width:42%;height:64%;left:-8%;top:38%;background:rgba(255,2,76,.40);animation:auroraB 22s ease-in-out infinite} .az-aurora .a3{width:34%;height:52%;left:30%;top:60%;background:rgba(43,108,176,.45);animation:auroraC 26s ease-in-out infinite} @keyframes auroraA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-9%,8%) scale(1.18)}} @keyframes auroraB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(11%,-7%) scale(1.22)}} @keyframes auroraC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7%,-11%) scale(1.12)}} .hero,.page-hero,.delivery,.cta-final,.calc-result{position:relative} .hero>.wrap,.hero>.marquee,.page-hero>.wrap{position:relative;z-index:2} /* floating grain/particles in hero */ .az-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.55); box-shadow:0 0 8px rgba(255,255,255,.6);z-index:1;pointer-events:none; animation:sparkRise linear infinite} @keyframes sparkRise{0%{transform:translateY(0);opacity:0}10%{opacity:.9}90%{opacity:.6}100%{transform:translateY(-160px);opacity:0}} /* ---------- 3. Scroll reveal ---------- Прячем по СПИСКУ селекторов (класс az-ready ставит ранний inline-скрипт в до отрисовки → нет мигания). Без JS класса нет → всё видно. Важно: не прячем одновременно родителя и его потомка из списка. */ html.az-ready :is( .sec-head,.step,.mode,.case,.feat,.val,.cmp,.rel-card,.ci,.tl-step,.qa, .split-text,.split-img,.calc-panel,.calc-result,.cust-img,.ptable, .lead-form,.stat,.foot-grid>div){ opacity:0;transform:translateY(30px); transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform} html.az-ready .in{opacity:1!important;transform:none!important} /* hero entrance on load */ html.az-ready .hero-copy>*{opacity:0;transform:translateY(26px);animation:heroIn .9s cubic-bezier(.2,.7,.2,1) forwards} html.az-ready .hero-copy>*:nth-child(1){animation-delay:.10s} html.az-ready .hero-copy>*:nth-child(2){animation-delay:.20s} html.az-ready .hero-copy>*:nth-child(3){animation-delay:.30s} html.az-ready .hero-copy>*:nth-child(4){animation-delay:.40s} html.az-ready .hero-copy>*:nth-child(5){animation-delay:.50s} html.az-ready .hero-visual{opacity:0;animation:heroVis 1.1s .25s cubic-bezier(.2,.7,.2,1) forwards} @keyframes heroIn{to{opacity:1;transform:none}} @keyframes heroVis{0%{opacity:0;transform:translateY(30px) scale(.97)}100%{opacity:1;transform:none}} html.az-ready .rate-card{animation:popIn .7s .7s both cubic-bezier(.3,1.4,.5,1)} html.az-ready .badge-float{animation:popIn .7s .9s both cubic-bezier(.3,1.4,.5,1)} @keyframes popIn{0%{opacity:0;transform:translateY(14px) scale(.8) rotate(0)}100%{opacity:1}} html.az-ready .badge-float{transform:rotate(3deg)} /* ---------- 4. Shimmer gradient text ---------- */ .hero h1 .accent,.page-hero h1 .accent,.stat .num{ background-size:220% auto;animation:shimmer 6s linear infinite} @keyframes shimmer{to{background-position:220% center}} /* ---------- 5. Premium buttons ---------- */ .btn{position:relative;overflow:hidden} .btn-primary::before{ content:"";position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg);transition:left .6s ease;pointer-events:none; } .btn-primary:hover::before{left:140%} .btn-primary{box-shadow:0 10px 26px rgba(255,2,76,.32),0 0 0 0 rgba(255,2,76,.5)} .btn-primary:hover{box-shadow:0 18px 40px rgba(255,2,76,.5)} /* ---------- 6. 3D tilt cards + glow ---------- */ .az-tilt{transform-style:preserve-3d;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease;will-change:transform} .az-tilt.lift{box-shadow:0 30px 70px rgba(11,42,74,.22)} .steps,.modes,.case-grid,.feat-row,.related{perspective:1200px} /* card top accent line draws on hover */ .step,.case,.feat,.rel-card{position:relative} .step::after,.case::after,.feat::after,.rel-card::after{ content:"";position:absolute;left:0;top:0;height:3px;width:100%; background:linear-gradient(90deg,var(--coral),var(--teal)); transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1); z-index:4;border-radius:3px 3px 0 0} .step:hover::after,.case:hover::after,.feat:hover::after,.rel-card:hover::after{transform:scaleX(1)} /* mode card icon float */ .mode:hover .m-ic{animation:floatIc 1.6s ease-in-out infinite} @keyframes floatIc{50%{transform:translateY(-5px)}} /* ---------- 7. Image hover zoom ---------- */ .s-img,.m-img,.c-img,.cust-img,.split-img,.hero-img-main{overflow:hidden} .s-img img,.c-img img,.cust-img img,.split-img img,.case .c-img img{transition:transform .7s cubic-bezier(.2,.7,.2,1)} .step:hover .s-img img,.case:hover .c-img img{transform:scale(1.06)} .cust-img:hover img,.split-img:hover img{transform:scale(1.04)} /* ---------- 8. Nav scrolled ---------- */ header.nav{transition:height .3s ease,background .3s ease,box-shadow .3s ease,border-color .3s ease} header.nav.scrolled{background:rgba(251,248,243,.94);box-shadow:0 6px 24px rgba(11,42,74,.08)} header.nav.scrolled .nav-inner{height:72px} .nav-links a{position:relative} .nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0; background:var(--teal);transition:width .28s cubic-bezier(.2,.7,.2,1)} .nav-links a:hover::after{width:100%} /* ---------- 9. Counter steady ---------- */ .az-count{font-variant-numeric:tabular-nums} /* ---------- 10. Calculator result pulse on change ---------- */ .rt-val{transition:transform .3s cubic-bezier(.3,1.5,.5,1),color .3s ease} .rt-val.bump{transform:scale(1.08);color:#6fdccd} /* ---------- 11. Stats strip glow ---------- */ .stats .stat .num{display:inline-block} .stats .stat:hover .num{filter:drop-shadow(0 6px 18px rgba(111,220,205,.5))} /* ---------- 12. FAQ smooth ---------- */ .qa{transition:box-shadow .3s ease,border-color .3s ease} .qa[open]{box-shadow:var(--shadow);border-color:transparent} .qa .qa-body{animation:fadeDown .35s ease} @keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ---------- 13. Marquee fade edges + hover pause ---------- */ .marquee{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee:hover .marquee-track{animation-play-state:paused} /* ---------- 14. Magnetic helper ---------- */ .az-mag{transition:transform .25s cubic-bezier(.2,.7,.2,1)} /* ---------- 15. Section heads underline accent ---------- */ .sec-head h2{position:relative;display:inline-block} /* ---------- Back-to-top ---------- */ .az-top{position:fixed;right:24px;bottom:24px;width:50px;height:50px;border-radius:50%; background:var(--navy);color:#fff;display:grid;place-items:center;z-index:90; box-shadow:var(--shadow);cursor:pointer;opacity:0;transform:translateY(20px) scale(.8); transition:opacity .3s ease,transform .3s cubic-bezier(.3,1.4,.5,1),background .25s ease; font-size:20px;border:none} .az-top.show{opacity:1;transform:none} .az-top:hover{background:var(--coral)} /* ---------- Reduced motion: disable all FX ---------- */ @media (prefers-reduced-motion: reduce){ html.az-ready .reveal, html.az-ready .hero-copy>*, html.az-ready .hero-visual, html.az-ready .img-reveal img{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important} .az-aurora,.az-spark,.az-cursor,.hero h1 .accent,.page-hero h1 .accent,.stat .num,.btn-primary::before{animation:none!important} .az-tilt{transform:none!important} } /* ---------- Mobile: lighten FX ---------- */ @media (max-width:680px){ .az-cursor{display:none} .az-aurora{filter:blur(46px)} .az-top{right:16px;bottom:16px;width:44px;height:44px} } /* ============================================================ CINEMATIC CORPORATE — финальная полировка (грузится последней, перекрывает styles.css и ранние правила premium.css) ============================================================ */ /* F1 — маркиза ниже контента героя, не наезжает на статистику. Зазор даём на .hero-grid: обе колонки поднимаются над маркизой, картинка ложится на navy-поле (её нижний градиент сливается с фоном). */ .hero-grid{padding-bottom:clamp(36px,5vw,60px)} /* #8-доп — тёмный герой заходит ПОД липкий хедер (высота 73px), чтобы прозрачная навигация лежала на navy, а не на песочном фоне body. Позиция контента сохранена: margin-top:-73 поднимает блок под хедер, padding-top компенсирует обратно. */ .hero{margin-top:-73px;padding-top:147px;padding-bottom:0} .page-hero{margin-top:-73px;padding-top:137px} /* F2 — сворачиваем навигацию ДО переполнения на 768px; карточку курса и бейдж держим внутри контейнера на всём stacked-диапазоне */ @media (max-width:980px){ .nav-links,.nav-rate{display:none} .burger{display:flex} } @media (max-width:980px){ .rate-card{left:50%;right:auto;transform:translateX(-50%);bottom:18px} .badge-float{right:10px} } /* #8 — прозрачный хедер над героем → плотный фон + тень после скролла (rAF в JS) */ header.nav{ background:transparent;backdrop-filter:none;border-bottom-color:transparent; transition:background .3s ease,box-shadow .3s ease,border-color .3s ease,height .3s ease; } header.nav .logo{color:#fff} header.nav .logo small{color:rgba(255,255,255,.72)} header.nav .nav-links a{color:#fff;opacity:.86} header.nav .nav-links a:hover{color:#9be7dc;opacity:1} header.nav .nav-rate{background:rgba(255,255,255,.12);color:#fff} header.nav .nav-rate b{color:#9be7dc} header.nav .burger span{background:#fff} header.nav .btn-dark{ background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.42); color:#fff;backdrop-filter:blur(6px); } header.nav .btn-dark:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.7);transform:translateY(-2px)} /* плотное состояние */ header.nav.scrolled{ background:rgba(251,248,243,.94);backdrop-filter:blur(14px); box-shadow:0 6px 24px rgba(11,42,74,.10);border-bottom-color:var(--line); } header.nav.scrolled .logo{color:var(--ink)} header.nav.scrolled .logo small{color:var(--muted)} header.nav.scrolled .nav-links a{color:var(--navy);opacity:.82} header.nav.scrolled .nav-links a:hover{color:var(--teal)} header.nav.scrolled .nav-rate{background:var(--teal-soft);color:var(--navy)} header.nav.scrolled .nav-rate b{color:var(--teal)} header.nav.scrolled .burger span{background:var(--navy)} header.nav.scrolled .btn-dark{background:var(--navy);border:none;color:#fff;backdrop-filter:none} header.nav.scrolled .btn-dark:hover{background:var(--navy-700)} header.nav.scrolled .nav-inner{height:72px} /* #4 — слой свечения ПОД фото порта (статичный, без анимации; parallax картинки — в JS) */ .hero-visual{position:relative} .hero-visual::before{ content:"";position:absolute;inset:-12% -10% -8% -10%;z-index:0;pointer-events:none; background: radial-gradient(46% 50% at 70% 28%,rgba(24,169,153,.55),transparent 70%), radial-gradient(44% 46% at 24% 82%,rgba(255,2,76,.32),transparent 72%); filter:blur(46px);opacity:.7; } .hero-img-main{z-index:1} .hero-visual .rate-card,.hero-visual .badge-float{z-index:3} .hero-img-main img{will-change:transform} /* спокойнее ауру — сдержанная «кинематографичная» глубина, без пляски */ .az-aurora{opacity:.55} /* #7 — пульсирует ТОЛЬКО точка «ЦБ live» в карточке курса; навигационная — статична */ .dot{animation:none} .rc-live .dot{animation:pulse 2s infinite} /* #10 — флюидная типографика + вертикальный ритм + табличные цифры */ section{padding:clamp(64px,8vw,104px) 0} .hero p.lead{font-size:clamp(16.5px,1.4vw,19px)} .sec-head p{font-size:clamp(16px,1.4vw,18px)} .hero-trust .t-num,.stat .num,.mode .m-price,.rate-card .rc-val, .res-line .rl-val,.res-total .rt-val,.case .c-row b,.ptable .price,.val .v-num, .nav-rate b,.m-time{ font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; } /* reduced-motion: гасим и новое свечение-движение (parallax уже отключён в JS) */ @media (prefers-reduced-motion: reduce){ .hero-img-main img{transform:none!important} } /* ============================================================ ИКОНКИ (inline-SVG, единый набор) + ШАПКА — дефекты, раунд 2 ============================================================ */ /* единый набор: размеры по контексту, цвет — бренд-teal, обводка 1.5 */ .feat .f-ic svg,.ci .ci-ic svg,.rel-card .rc-ic svg{display:block} .feat .f-ic{color:var(--teal)} .feat .f-ic svg{width:24px;height:24px} .ci .ci-ic{color:var(--teal)} .ci .ci-ic svg{width:22px;height:22px} .rel-card .rc-ic{color:var(--teal);line-height:0} .rel-card .rc-ic svg{width:26px;height:26px} /* иконки в таблице сравнения (dostavka) — в цвет текста ячейки */ .ptable .tico{width:17px;height:17px;vertical-align:-3px;margin-right:7px} /* D2 — карточки доставки: ПЛОТНЫЙ navy-блок + чёткая контрастная иконка (без полупрозрачной teal-мути; премиум = контраст, а не размытость) */ .mode .m-img{ height:128px;display:grid;place-items:center; background:linear-gradient(140deg,var(--navy-700) 0%,var(--navy-900) 100%); border-bottom:1px solid rgba(127,233,218,.30); } .mode .m-img::after{display:none} /* убираем старый фото-градиент */ .mode .m-ic{position:static;color:#7fe9da;line-height:0} .mode .m-ic svg{width:48px;height:48px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))} /* D3 — шапка: ничего не переносится и не липнет */ .nav-links a{white-space:nowrap;font-size:14.5px} .nav-links{gap:26px} .nav-rate{white-space:nowrap;flex-shrink:0} .nav-inner{gap:clamp(18px,2.4vw,44px)} /* ============================================================ ШАПКА v2 — лого 60px, жирное имя, подзаголовок в строку, красный CTA, дропдаун «Услуги», полноэкранное бургер-меню ============================================================ */ /* лого-эмблема 60px в высоту; имя — жирное; подзаголовок в одну строку */ header.nav .logo svg.mark{height:60px;width:auto;transition:none} /* без анимации иконки логотипа: лого не двигается и не вращается; при скролле меняется только фон шапки */ .logo svg.mark,.logo:hover svg.mark{transform:none;transition:none} header.nav .logo{font-weight:800} header.nav .logo>span{font-size:20px;font-weight:800;letter-spacing:-.01em} /* АЗИЯ — тонкая (400), ТРЕЙД — чёрная (900) */ .logo .lg-az{font-weight:400} .logo .lg-tr{font-weight:900} header.nav .logo small{white-space:nowrap;letter-spacing:.08em} @media(max-width:600px){header.nav .logo small{display:none}} /* CTA «Оставить заявку» — красная (coral) в обоих состояниях */ header.nav .btn-dark, header.nav.scrolled .btn-dark{ background:var(--coral);color:#fff;border:none;backdrop-filter:none; box-shadow:0 8px 22px rgba(255,2,76,.32); } header.nav .btn-dark:hover, header.nav.scrolled .btn-dark:hover{background:var(--coral-dark);transform:translateY(-2px)} /* дропдаун «Услуги» (десктоп: hover/focus) */ .nav-drop{position:relative;display:flex;align-items:center} .nav-drop-t{cursor:pointer;display:inline-flex;align-items:center;gap:7px} .nav-drop-t::after{content:"";width:6px;height:6px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .25s} .nav-drop:hover .nav-drop-t::after,.nav-drop:focus-within .nav-drop-t::after{transform:rotate(225deg);margin-top:1px} .nav-drop-menu{ position:absolute;top:100%;left:50%;margin-left:-110px;min-width:220px; background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow); padding:8px;display:flex;flex-direction:column;gap:2px; opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease;z-index:60; } .nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(7px)} header.nav .nav-drop-menu a{color:var(--navy);opacity:1;padding:9px 14px;border-radius:9px;font-size:14.5px;white-space:nowrap} header.nav .nav-drop-menu a:hover{background:var(--sand-2);color:var(--teal)} header.nav .nav-drop-menu a::after{content:none} /* полноэкранное бургер-меню (генерится premium.js) */ .az-menu{ position:fixed;inset:0;z-index:300;padding:84px 24px 40px; background:linear-gradient(160deg,var(--navy) 0%,var(--navy-900) 100%); display:flex;flex-direction:column;align-items:center;justify-content:center; opacity:0;visibility:hidden;transform:scale(1.03); transition:opacity .35s ease,transform .35s ease,visibility .35s; } .az-menu.open{opacity:1;visibility:visible;transform:none} .az-menu-close{position:absolute;top:18px;right:20px;width:48px;height:48px;border:none;cursor:pointer; background:rgba(255,255,255,.08);color:#fff;font-size:30px;line-height:1;border-radius:50%;transition:.2s} .az-menu-close:hover{background:var(--coral);transform:rotate(90deg)} .az-menu-nav{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center} .az-menu-nav a{color:#fff;font-weight:800;letter-spacing:-.02em;font-size:clamp(26px,7vw,40px);padding:5px 0;transition:.2s} .az-menu-nav a:hover{color:#6fdccd} .az-menu-group{color:#6fdccd;font-family:var(--data);font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-top:20px;margin-bottom:2px} .az-menu-sub{font-size:clamp(17px,4.5vw,22px)!important;font-weight:600!important;opacity:.82} .az-menu-cta{margin-top:30px;font-size:17px} .az-menu-rate{margin-top:20px;color:#9fb3c7;font-family:var(--data);font-size:14px;font-variant-numeric:tabular-nums} /* телефон отдела логистики в модальном меню */ .az-menu-phone{margin-top:26px;color:#fff;font-family:var(--data);font-size:22px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums} .az-menu-phone span{display:block;font-size:13px;font-weight:500;color:#9fb3c7;margin-top:3px} .az-menu-phone:hover{color:#6fdccd} /* телефон «Отдел логистики» в шапке (на месте бывшей кнопки) */ .nav-phone{display:flex;flex-direction:column;line-height:1.18;text-align:right;font-family:var(--data);white-space:nowrap} .nav-phone b{font-size:15.5px;font-weight:700;font-variant-numeric:tabular-nums} .nav-phone span{font-size:11px;font-weight:500;opacity:.72} header.nav .nav-phone{color:#fff} header.nav.scrolled .nav-phone{color:var(--navy)} .nav-phone:hover b{color:#9be7dc} header.nav.scrolled .nav-phone:hover b{color:var(--teal)} @media(max-width:980px){.nav-phone{display:none}} /* на мобиле в шапке скрыт — доступен в бургер-меню */ /* ============================================================ КАЛЬКУЛЯТОР ПОСТАВКИ — перестроенный ============================================================ */ .calc-toggle{display:flex;gap:8px;background:var(--sand-2);padding:5px;border-radius:12px;border:1.5px solid var(--line)} .calc-toggle button{flex:1;font-family:var(--font);font-weight:600;font-size:13.5px;padding:10px 6px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--muted);transition:.18s} .calc-toggle button.active{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm)} .dims-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .vol-computed{font-size:13.5px;color:var(--muted);margin:-4px 0 16px} .vol-computed b{color:var(--teal);font-variant-numeric:tabular-nums} /* объёмный вес */ .vw-box{background:var(--sand-2);border:1.5px solid var(--line);border-radius:12px;padding:10px;margin-bottom:18px} .vw-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:7px 10px;border-radius:8px;color:var(--muted);transition:background .2s ease,color .2s ease} .vw-row b{font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy)} .vw-row.applied{background:var(--teal-soft);color:var(--teal)} .vw-row.applied b{color:var(--teal)} .vw-hint{font-size:12px;color:var(--muted);margin-top:6px;padding:0 4px;line-height:1.45} /* доп. услуги */ .svc-list{display:grid;gap:8px} .svc-row{display:flex;align-items:center;gap:10px;background:var(--sand-2);border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer;font-size:14px;transition:border-color .18s ease} .svc-row:hover{border-color:var(--teal)} .svc-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--coral);flex-shrink:0;cursor:pointer;margin:0} .svc-name{flex:1;font-weight:600;color:var(--navy)} .svc-row .svc-val{width:74px;font-family:var(--font);font-size:14px;font-weight:500;padding:7px 9px;border:1.5px solid var(--line);border-radius:8px;background:#fff;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)} .svc-val:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)} .svc-unit{font-size:12.5px;color:var(--muted);min-width:50px} /* итог: табличные цифры на всех строках, появление новых строк */ #resBody .res-line .rl-val,#resBody .res-line .rl-lab{font-variant-numeric:tabular-nums} #resBody .res-line{animation:resIn .28s ease} @keyframes resIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @media(max-width:680px){ .dims-row{grid-template-columns:1fr 1fr} .svc-row .svc-val{width:64px} .svc-unit{min-width:42px} } @media (prefers-reduced-motion: reduce){ .calc-toggle button,.vw-row,.svc-row{transition:none} #resBody .res-line{animation:none} } /* БУРГЕР ВИДЕН ВСЕГДА — на всех ширинах, в самом конце шапки; открывает модальное меню */ header.nav .burger{display:flex} /* анимация бургера в «X» */ .burger span{transition:transform .25s ease,opacity .2s ease} .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (prefers-reduced-motion: reduce){ .az-menu{transition:opacity .2s ease,visibility .2s;transform:none} .az-menu.open{transform:none} }