/* ============================================================ BRIZ · Полный редизайн страницы по макету Figma «САЙТ БРИЗ» Электрик-блю · большие числа · жирные заглавные · свечение Заменяет styles.css. Конфигуратор — в configurator.css. ============================================================ */ :root{ --max:1240px; --n0:#02102a;--n1:#061a37;--n2:#0a2550; --navy:#03112a; --blue:#1e74ff;--elec:#1e74ff;--elec2:#3b8cff; --cyan:#4fb6ff;--green:#37d98a;--grn:#37d98a; --white:#eef5ff;--muted:#93abcf; --stroke:rgba(122,170,235,.16);--stroke2:rgba(130,180,255,.34); --radius:22px; --shadow:0 34px 90px -34px rgba(0,10,32,.9); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--navy);color:var(--white);font-family:Inter,'Segoe UI',Arial,sans-serif;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased} body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(60% 40% at 85% 4%,rgba(20,74,168,.22),transparent 60%), radial-gradient(50% 40% at 10% 30%,rgba(30,44,120,.16),transparent 60%)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block;height:auto} h1,h2,h3{margin:0} /* ---------- Утилиты ---------- */ .wrap{max-width:var(--max);margin:auto;padding-inline:28px} .section{position:relative;max-width:var(--max);margin:auto;padding:110px 28px} .full{max-width:none;padding-inline:max(28px,calc((100vw - var(--max))/2 + 28px))} .kicker{display:inline-block;color:var(--cyan);text-transform:uppercase;letter-spacing:.2em;font-weight:800;font-size:12px} .btitle{font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;font-size:clamp(34px,5vw,62px)} .btitle .accent{color:transparent;background:linear-gradient(100deg,var(--elec),#5fa8ff);-webkit-background-clip:text;background-clip:text} .section-heading{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:46px} .section-heading h2{font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;font-size:clamp(34px,5vw,60px)} .section-heading>p{color:var(--muted);max-width:440px;margin:0} .section h2{font-size:clamp(34px,5vw,60px)} .watermark{position:absolute;font-weight:900;line-height:.8;color:rgba(90,150,255,.06);letter-spacing:-.04em;z-index:0;pointer-events:none;user-select:none} .button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:999px;padding:16px 26px;font-weight:800;font-size:15px;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s} .button.primary{color:#fff;background:linear-gradient(110deg,#0a74ff,#2f9bff 60%,#38b6ff);box-shadow:0 16px 40px -12px rgba(30,116,255,.7)} .button.primary:hover{transform:translateY(-2px);box-shadow:0 24px 52px -12px rgba(30,116,255,.85)} .button.ghost{color:#cfe0f7;border-color:var(--stroke2);background:rgba(10,34,72,.5)} .button.ghost:hover{transform:translateY(-2px);border-color:var(--cyan);color:#fff} .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.3,1,.3,1)} .reveal.visible{opacity:1;transform:none} .delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s} /* грид-текстура для секций */ .grid-bg{background-image:linear-gradient(rgba(90,150,230,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(90,150,230,.045) 1px,transparent 1px);background-size:56px 56px} /* ---------- Хедер: базовый layout (хаб-навигация, toggle, scrim — из navigation.css) ---------- */ .header{height:82px;padding:0 max(28px,calc((100vw - var(--max))/2 + 28px));display:flex;align-items:center;gap:36px;position:sticky;top:0;z-index:50;background:rgba(6,22,48,.86);backdrop-filter:blur(20px);border-bottom:1px solid rgba(112,166,226,.16)} .brand img{width:96px;height:42px;object-fit:contain;object-position:left center} .phone{font-weight:800} /* ---------- Лёгкая анимация воды (ненавязчивый слой пузырьков) ---------- */ .water-fx{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden} .water-fx span{position:absolute;bottom:-6vh;border-radius:50%;opacity:0; background:radial-gradient(circle at 30% 24%,rgba(228,244,255,.95),rgba(130,195,255,.42) 42%,rgba(38,118,228,.2) 70%,transparent 80%); box-shadow:inset 0 -3px 7px rgba(24,84,178,.45),inset 3px 3px 5px rgba(255,255,255,.55),0 0 12px rgba(80,165,255,.3); animation-name:bubbleUp;animation-timing-function:cubic-bezier(.4,.1,.6,.9);animation-iteration-count:infinite} @keyframes bubbleUp{0%{transform:translateY(0) translateX(0) scale(.55);opacity:0}14%{opacity:.55}50%{transform:translateY(-56vh) translateX(14px) scale(.9)}85%{opacity:.42}100%{transform:translateY(-116vh) translateX(-6px) scale(1.05);opacity:0}} /* ---------- Hero ---------- */ .hero{position:relative;max-width:none;min-height:calc(100vh - 76px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:24px;overflow:hidden; padding:60px max(28px,calc((100vw - var(--max))/2 + 28px))} .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-bg .glow{position:absolute;border-radius:50%;filter:blur(90px);mix-blend-mode:screen} .hero-bg .g1{width:620px;height:620px;right:-120px;top:-120px;background:radial-gradient(circle,rgba(30,116,255,.5),transparent 65%);animation:floatA 26s ease-in-out infinite} .hero-bg .g2{width:560px;height:560px;left:-160px;bottom:-160px;background:radial-gradient(circle,rgba(40,60,160,.42),transparent 65%);animation:floatB 30s ease-in-out infinite} .hero-bg .lines{position:absolute;inset:0;opacity:.5; background-image:linear-gradient(rgba(90,150,230,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(90,150,230,.05) 1px,transparent 1px);background-size:60px 60px; -webkit-mask-image:radial-gradient(120% 90% at 70% 30%,#000,transparent 80%);mask-image:radial-gradient(120% 90% at 70% 30%,#000,transparent 80%)} .hero-copy{position:relative;z-index:2} .hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:20px} .hero-eyebrow i{width:26px;height:1px;background:var(--cyan)} .hero h1{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;font-size:clamp(42px,5.6vw,80px)} .hero h1 .accent{color:transparent;background:linear-gradient(100deg,var(--elec),#5fa8ff);-webkit-background-clip:text;background-clip:text} .hero h1 .low{text-transform:none;display:block} .hero-punch{margin:18px 0 0;max-width:600px;font-size:clamp(17px,2.1vw,23px);font-weight:800;line-height:1.3;letter-spacing:-.01em;color:#eaf2ff} .hero-punch b{color:#fff} .hero-punch em{font-style:normal;color:var(--elec)} .hero-lead{color:var(--muted);font-size:19px;max-width:560px;margin:16px 0 30px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px} .hero-chips{display:flex;gap:12px;flex-wrap:wrap} .hero-chip{display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:14px;border:1px solid var(--stroke);background:rgba(9,28,60,.55);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#c3d6f2;transition:.25s} .hero-chip:hover{transform:translateY(-3px);border-color:var(--cyan);background:rgba(16,44,90,.7)} .hero-chip b{color:var(--cyan);font-size:15px} .hero-visual{position:relative;z-index:1;display:grid;place-items:center;min-height:560px} .hero-visual .orb{position:absolute;width:460px;height:460px;border-radius:50%;border:1px solid rgba(78,171,255,.22);box-shadow:0 0 120px rgba(30,116,255,.2),inset 0 0 80px rgba(30,116,255,.1)} .hero-visual .orb::before{content:"";position:absolute;inset:13%;border:1px solid rgba(78,171,255,.14);border-radius:50%} .hero-visual img{position:relative;z-index:2;width:min(640px,100%);height:620px;object-fit:contain;filter:drop-shadow(0 34px 46px rgba(0,0,0,.6));animation:floatImg 6s ease-in-out infinite} .hero-badge{position:absolute;z-index:3;background:rgba(10,32,66,.9);border:1px solid var(--stroke2);border-radius:16px;padding:14px 18px;backdrop-filter:blur(8px);box-shadow:0 16px 34px rgba(0,0,0,.35)} .hero-badge.price{left:-6px;bottom:96px} .hero-badge.price small{display:block;color:var(--muted);font-size:11px} .hero-badge.price strong{font-size:22px} .hero-badge.bar{right:0;top:56px;display:flex;align-items:center;gap:8px;padding:11px 15px} .hero-badge.bar strong{font-size:26px;color:var(--cyan);line-height:1} .hero-badge.bar span{font-size:10px;color:var(--muted);line-height:1.25} @keyframes floatImg{50%{transform:translateY(-14px)}} @keyframes floatA{50%{transform:translate(-50px,50px) scale(1.1)}} @keyframes floatB{50%{transform:translate(50px,-40px) scale(1.08)}} /* ---------- ЧТО ТАКОЕ БРИЗ ---------- */ .about{position:relative;overflow:hidden} .about .watermark{font-size:clamp(160px,26vw,360px);top:6%;left:50%;transform:translateX(-50%)} .about-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr 1fr;gap:22px;margin-top:14px} .about-card{border-radius:var(--radius);padding:34px;border:1px solid transparent; background:linear-gradient(150deg,rgba(14,42,86,.85),rgba(6,22,50,.9)) padding-box,linear-gradient(130deg,rgba(120,180,255,.4),rgba(40,90,220,.08) 50%,rgba(70,120,255,.3)) border-box} .about-card .logo-briz{width:120px;margin-bottom:20px} .about-card p{color:#c2d5ef;font-size:15px;margin:0 0 14px} .about-card p b{color:#fff} .about-card .geizer{display:flex;align-items:center;gap:10px;margin-top:22px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em} .about-card .geizer img{width:120px} .about-side{display:grid;gap:22px} .about-mini{border-radius:var(--radius);padding:26px;border:1px solid var(--stroke);background:rgba(9,26,56,.6)} .about-mini b{display:block;color:var(--cyan);font-size:34px;font-weight:900} .about-mini span{color:var(--muted);font-size:14px} /* ---------- Секция-заголовок с водяным числом ---------- */ .head-num{position:relative} .head-num .watermark{font-size:clamp(120px,20vw,280px);right:0;top:-40px} /* ---------- ЗАПЧАСТИ: скроллящаяся галерея инфографик ---------- */ .parts-rail{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:smooth; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)} .parts-rail::-webkit-scrollbar{display:none} .parts-rail.is-dragging{scroll-behavior:auto;cursor:grabbing} .parts-track{display:flex;gap:16px;padding:6px 2px 10px} .part-tile{flex:0 0 300px;scroll-snap-align:center;position:relative;overflow:hidden;padding:0;cursor:pointer; border-radius:20px;border:1px solid var(--stroke);background:linear-gradient(160deg,rgba(12,36,74,.7),rgba(6,20,44,.8)); transition:transform .35s cubic-bezier(.4,1.2,.4,1),border-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none;text-align:left;font:inherit;color:inherit} .part-tile:hover{transform:translateY(-6px);border-color:var(--stroke2);box-shadow:0 26px 50px -22px rgba(0,26,72,.95)} .part-tile:focus-visible{outline:2px solid var(--elec);outline-offset:3px} .part-tile.is-wide{flex-basis:360px;border-color:var(--stroke2)} /* лайтбокс таблицы ассортимента — шире, чтобы читались характеристики */ .part-dialog.is-wide{width:min(1040px,calc(100% - 32px))} .part-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .5s ease} .part-tile:hover img{transform:scale(1.05)} .part-cap{display:block;padding:14px 16px 16px;border-top:1px solid var(--stroke);background:rgba(4,16,38,.65)} .part-cap b{display:block;font-size:14px;margin-bottom:3px} .part-cap em{display:block;font-style:normal;font-size:11px;color:var(--muted)} .parts-nav{display:flex;align-items:center;gap:14px;margin-top:18px} .parts-arrow{width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:1px solid var(--stroke2);background:rgba(10,32,68,.6);color:#cfe0f7;font-size:16px;cursor:pointer;transition:.25s} .parts-arrow:hover{background:var(--elec);border-color:transparent;color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(30,116,255,.8)} .parts-arrow:active{transform:scale(.92)} .parts-progress{flex:1;height:3px;border-radius:999px;background:rgba(90,150,230,.16);overflow:hidden;max-width:340px} .parts-progress span{display:block;height:100%;width:12%;border-radius:999px;background:linear-gradient(90deg,var(--elec),var(--cyan));transition:width .2s ease,transform .2s ease} .parts-hint{color:#6f89ad;font-size:11px;margin-left:auto} /* лайтбокс запчасти */ .part-dialog{width:min(720px,calc(100% - 32px));padding:14px;background:#081d3d;border:1px solid var(--stroke2);border-radius:22px} .part-dialog img{width:100%;border-radius:14px;display:block} .part-dialog .modal-close{right:22px;top:18px;z-index:2;text-shadow:0 2px 10px #000} .parts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .part-card{position:relative;overflow:hidden;border-radius:var(--radius);padding:28px;border:1px solid var(--stroke);background:linear-gradient(160deg,rgba(12,36,74,.7),rgba(6,20,44,.8));transition:transform .3s,border-color .3s} .part-card:hover{transform:translateY(-5px);border-color:var(--stroke2)} .part-card .pnum{font-size:56px;font-weight:900;color:transparent;-webkit-text-stroke:1px rgba(90,160,255,.5);letter-spacing:-.04em;line-height:1} .part-card h3{font-size:19px;text-transform:uppercase;margin:12px 0 8px} .part-card p{color:var(--muted);font-size:13px;margin:0} .part-card .picon{position:absolute;right:22px;top:26px;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#bfe0ff;background:rgba(30,80,160,.4);border:1px solid var(--stroke)} .part-card .picon svg{width:22px;height:22px} /* ---------- ПРЕИМУЩЕСТВА ---------- */ .adv{position:relative;overflow:hidden} .adv-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:center} .adv-photo{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--stroke);min-height:360px;background:radial-gradient(circle at 50% 40%,rgba(30,116,255,.25),transparent 60%),#061a37;display:grid;place-items:center} .adv-photo img{width:78%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))} .adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .adv-card{border-radius:16px;padding:22px;border:1px solid var(--stroke);background:linear-gradient(160deg,rgba(10,30,66,.7),rgba(6,20,44,.8));transition:transform .3s,box-shadow .3s} .adv-card:hover{transform:translateY(-4px)} .adv-card.hot{border-color:transparent;background:linear-gradient(150deg,var(--elec),#1a5fe0);box-shadow:0 22px 44px -18px rgba(30,116,255,.7)} .adv-card .anum{font-size:34px;font-weight:900;letter-spacing:-.03em;color:var(--cyan)} .adv-card.hot .anum{color:#fff} .adv-card p{margin:6px 0 0;font-size:13px;color:var(--muted)} .adv-card.hot p{color:rgba(255,255,255,.9)} /* ---------- УПРАВЛЕНИЕ + ПУЛЬТ: слайдер ---------- */ .ctrl{position:relative;overflow:hidden} .ctrl-slider{position:relative} .ctrl-viewport{overflow:hidden;border-radius:26px} .ctrl-track{display:flex;transition:transform .7s cubic-bezier(.5,1.1,.3,1);will-change:transform} .ctrl-slide{flex:0 0 100%;min-width:100%;display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center; padding:38px 40px;border-radius:26px;border:1px solid transparent; background:linear-gradient(150deg,rgba(12,40,84,.72),rgba(6,20,46,.82)) padding-box,linear-gradient(130deg,rgba(120,180,255,.36),rgba(40,90,220,.06) 52%,rgba(70,120,255,.3)) border-box; opacity:.25;transform:scale(.97);transition:opacity .6s ease,transform .6s cubic-bezier(.4,1,.3,1)} .ctrl-slide.is-active{opacity:1;transform:none} .ctrl-media{position:relative;display:grid;place-items:center;min-height:440px; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s cubic-bezier(.3,1,.3,1)} .ctrl-halo{position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(30,116,255,.3),transparent 62%)} .ctrl-ring{position:absolute;width:330px;height:330px;border-radius:50%;border:1px solid rgba(90,170,255,.22); box-shadow:0 0 70px rgba(30,116,255,.16) inset;animation:ctrlSpin 26s linear infinite} .ctrl-ring::before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)} @keyframes ctrlSpin{to{transform:rotate(360deg)}} .ctrl-media img{position:relative;z-index:2;max-height:430px;max-width:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));animation:floatImg 6.5s ease-in-out infinite} .ctrl-tag{position:absolute;right:2%;bottom:8%;z-index:3;text-align:center;padding:12px 16px;border-radius:14px; background:rgba(10,32,66,.92);border:1px solid var(--stroke2);backdrop-filter:blur(8px);box-shadow:0 16px 32px rgba(0,0,0,.4)} .ctrl-tag b{display:block;font-size:28px;line-height:1;color:var(--cyan)} .ctrl-tag span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em} .ctrl-tag.alt b{color:var(--grn)} .ctrl-num{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--cyan);margin-bottom:12px} .ctrl-copy h3{font-size:clamp(26px,3vw,38px);font-weight:900;letter-spacing:-.02em;line-height:1.02;margin-bottom:12px} .ctrl-copy>p{color:var(--muted);margin:0} .ctrl-copy .check-list{list-style:none;padding:0;margin:24px 0 0} /* навигация слайдера */ .ctrl-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px} .ctrl-arrow{width:46px;height:46px;flex:0 0 auto;border-radius:50%;border:1px solid var(--stroke2);background:rgba(10,32,68,.6);color:#cfe0f7;font-size:17px;cursor:pointer;transition:.25s} .ctrl-arrow:hover{background:var(--elec);border-color:transparent;color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(30,116,255,.8)} .ctrl-arrow:active{transform:scale(.92)} .ctrl-dots{display:flex;gap:10px} .ctrl-dot{position:relative;overflow:hidden;display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;cursor:pointer; border:1px solid var(--stroke);background:rgba(8,26,56,.6);color:#9fb6d6;font:800 12px/1 Inter,Arial,sans-serif;transition:.3s} .ctrl-dot i{width:7px;height:7px;border-radius:50%;background:#33507d;transition:.3s;flex:0 0 auto} .ctrl-dot:hover{color:#dbe8ff;border-color:var(--stroke2)} .ctrl-dot.is-active{color:#fff;border-color:transparent;background:linear-gradient(120deg,rgba(30,116,255,.9),rgba(49,169,255,.9));box-shadow:0 12px 28px -10px rgba(30,116,255,.9)} .ctrl-dot.is-active i{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.9)} /* полоса автопрокрутки на активной точке */ .ctrl-dot .bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:rgba(255,255,255,.85)} .ctrl-dot.is-active .bar{animation:ctrlBar var(--dur,7s) linear forwards} @keyframes ctrlBar{to{width:100%}} .ctrl-slider.is-paused .ctrl-dot.is-active .bar{animation-play-state:paused} /* старый двухколоночный блок (не используется, оставлен для совместимости) */ .control{display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:center;position:relative} .control-copy .check-list{list-style:none;padding:0;margin:26px 0 0} .check-list li{position:relative;padding:0 0 22px 40px} .check-list li::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,var(--grn),#22b06e);box-shadow:0 6px 16px rgba(45,200,120,.4)} .check-list li::after{content:"";position:absolute;left:8px;top:5px;width:6px;height:11px;border:2.4px solid #04241a;border-top:0;border-left:0;transform:rotate(42deg)} .check-list b{display:block} .check-list span{display:block;color:var(--muted);font-size:14px} .control-visual{position:relative;display:grid;place-items:center;min-height:520px} .control-visual .halo{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(30,116,255,.28),transparent 62%)} .control-visual img{position:relative;z-index:2;max-height:500px;filter:drop-shadow(0 32px 40px rgba(0,0,0,.5))} .control-visual .tag{position:absolute;right:6%;bottom:12%;z-index:3;background:rgba(10,32,66,.9);border:1px solid var(--stroke2);border-radius:14px;padding:12px 16px;text-align:center} .control-visual .tag b{font-size:30px;color:var(--cyan);display:block;line-height:1} .control-visual .tag span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em} /* ---------- РЕШЕНИЯ ---------- */ .solutions{position:relative;overflow:hidden} .sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .sol-card{position:relative;overflow:hidden;border-radius:var(--radius);padding:28px;border:1px solid var(--stroke);background:linear-gradient(160deg,rgba(12,34,72,.72),rgba(6,20,44,.82));transition:transform .3s,border-color .3s} .sol-card:hover{transform:translateY(-5px);border-color:var(--stroke2)} .sol-card .sicon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;color:#fff;background:linear-gradient(150deg,var(--elec),#2f8fff);box-shadow:0 12px 26px rgba(30,116,255,.45)} .sol-card .sicon svg{width:26px;height:26px} .sol-card h3{font-size:18px;text-transform:uppercase;margin:0 0 8px} .sol-card>span{color:var(--cyan);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em} .sol-card p{color:var(--muted);font-size:13px;margin:8px 0 0} .sol-card ul{list-style:none;padding:0;margin:14px 0 0} .sol-card ul li{position:relative;padding-left:20px;color:#c2d5ef;font-size:13px;margin-bottom:7px} .sol-card ul li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%;background:var(--elec);box-shadow:0 0 8px var(--elec)} /* ---------- ГЕОГРАФИЯ / 400 ---------- */ .geo{position:relative;overflow:hidden;text-align:center;padding-block:120px} .geo .big{font-size:clamp(120px,20vw,240px);font-weight:900;line-height:.85;letter-spacing:-.05em; background:linear-gradient(180deg,#bfe0ff,var(--elec) 70%,#1150c9);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 20px 60px rgba(30,116,255,.5))} .geo h2{font-weight:900;text-transform:uppercase;font-size:clamp(26px,4vw,44px);letter-spacing:-.01em;margin-top:6px} .geo p{color:var(--muted);max-width:640px;margin:22px auto 0} /* карта после блока «400+» — лаконично, с мягким растворением краёв */ .geo-map{margin:46px auto 0;max-width:1120px;position:relative} .geo-map img{width:100%;height:auto;display:block;opacity:.95; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 96%,transparent 100%),linear-gradient(to right,transparent 0,#000 4%,#000 97%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 96%,transparent 100%),linear-gradient(to right,transparent 0,#000 4%,#000 97%,transparent 100%); -webkit-mask-composite:source-in;mask-composite:intersect} /* ---- интерактивные точки поверх маркеров макета ---- */ .geo-pins{position:absolute;inset:0;z-index:2} .geo-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%); width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none} /* пульсирующее кольцо */ .geo-pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--cyan);opacity:0; animation:geoPulse 2.8s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:var(--d,0s)} @keyframes geoPulse{0%{transform:scale(.45);opacity:.75}70%{transform:scale(2.2);opacity:0}100%{transform:scale(2.2);opacity:0}} /* подсветка при наведении */ .geo-pin::before{content:"";position:absolute;inset:-3px;border-radius:50%;opacity:0;transform:scale(.7);transition:.3s cubic-bezier(.4,1.3,.4,1); background:radial-gradient(circle,rgba(79,182,255,.45),transparent 70%);box-shadow:0 0 0 2px rgba(79,182,255,.9),0 0 24px rgba(79,182,255,.8)} .geo-pin:hover::before,.geo-pin:focus-visible::before{opacity:1;transform:scale(1)} .geo-pin:hover,.geo-pin:focus-visible{z-index:5} .geo-pin:focus-visible{outline:none} /* крупные точки — ярче */ .geo-pin.is-big::after{border-color:var(--grn);border-width:2.5px} .geo-pin.is-big::before{background:radial-gradient(circle,rgba(55,217,138,.5),transparent 70%);box-shadow:0 0 0 2px rgba(55,217,138,.95),0 0 26px rgba(55,217,138,.85)} /* тултип */ .geo-tip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,7px);opacity:0;visibility:hidden;pointer-events:none; white-space:nowrap;padding:9px 13px;border-radius:11px;text-align:center; background:rgba(5,20,44,.97);border:1px solid var(--stroke2);box-shadow:0 16px 34px rgba(0,0,0,.6); transition:opacity .25s,transform .25s cubic-bezier(.4,1.3,.4,1),visibility .25s} .geo-tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--stroke2)} .geo-pin:hover .geo-tip,.geo-pin:focus-visible .geo-tip{opacity:1;visibility:visible;transform:translate(-50%,0)} .geo-tip b{display:block;font-size:13px;color:#fff;line-height:1.2} .geo-tip em{font-style:normal;font-size:11px;font-weight:800;color:var(--cyan)} .geo-pin.is-big .geo-tip em{color:var(--grn)} .geo-hint{margin-top:14px;color:#6f89ad;font-size:11px} @media (max-width:760px){.geo-pin{width:22px;height:22px}.geo-tip{padding:6px 9px}.geo-tip b{font-size:11px}} @media (prefers-reduced-motion:reduce){.geo-pin::after{animation:none;opacity:.35}} /* ---------- ОТЗЫВЫ КЛИЕНТОВ ---------- */ .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .trust-card{position:relative;display:block;color:inherit;text-decoration:none;border-radius:var(--radius);padding:26px;border:1px solid var(--stroke);background:linear-gradient(160deg,rgba(12,34,72,.72),rgba(6,20,44,.82));transition:transform .3s,border-color .3s} .trust-card:hover{transform:translateY(-5px);border-color:var(--stroke2)} .trust-card p{color:#c2d5ef;font-size:14.5px;line-height:1.55;margin:0 0 18px} .trust-card footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .trust-ava{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(150deg,var(--elec),#2f8fff)} .trust-card footer b{font-size:13.5px;color:#fff;font-weight:700} .trust-stars{margin-left:auto;color:var(--cyan);font-size:12px;letter-spacing:1px} .trust-more{display:inline-block;margin-top:26px;color:var(--cyan);font-weight:700;font-size:14px;text-decoration:none;border-bottom:1px solid transparent;transition:.25s} .trust-more:hover{border-color:var(--cyan)} @media (max-width:900px){.trust-grid{grid-template-columns:1fr}} .geo-cities{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px} .geo-cities span{padding:8px 15px;border-radius:999px;border:1px solid var(--stroke);background:rgba(9,28,60,.5);font-size:12px;font-weight:700;color:#c2d5ef} .geo-cities span b{color:var(--cyan)} .geo-countries{display:flex;justify-content:center;gap:36px;margin-top:34px;flex-wrap:wrap} .geo-countries div b{display:block;font-size:26px;font-weight:900;color:var(--cyan)} .geo-countries div span{color:var(--muted);font-size:13px} /* ---------- ПОКУПАТЬ / ЭТАПЫ ---------- */ .pay{position:relative;overflow:hidden} .pay-block{margin-bottom:46px} .pay-block>h3{font-size:clamp(40px,6vw,72px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.4px rgba(120,180,255,.45);margin-bottom:20px} .pay-stages{display:flex;gap:16px;flex-wrap:wrap} .pay-stage{flex:1;min-width:180px;border-radius:18px;padding:24px;border:1px solid var(--stroke);background:linear-gradient(150deg,rgba(10,30,66,.7),rgba(6,20,44,.8));position:relative;overflow:hidden} .pay-stage.hot{border-color:transparent;background:linear-gradient(150deg,var(--elec),#1a5fe0);box-shadow:0 20px 44px -18px rgba(30,116,255,.7)} .pay-stage b{font-size:40px;font-weight:900;letter-spacing:-.03em;color:var(--cyan)} .pay-stage.hot b{color:#fff} .pay-stage span{display:block;color:var(--muted);font-size:12px;margin-top:6px} .pay-stage.hot span{color:rgba(255,255,255,.85)} .pay-gift{display:flex;align-items:center;gap:22px;border-radius:var(--radius);padding:26px 30px;border:1px solid var(--stroke2);background:linear-gradient(120deg,rgba(11,32,68,.9),rgba(8,22,50,.9));position:relative;overflow:hidden} .pay-gift .gift-ic{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(150deg,var(--elec),#2f8fff);color:#fff;box-shadow:0 14px 30px rgba(30,116,255,.5);flex:0 0 auto} .pay-gift .gift-ic svg{width:34px;height:34px} .pay-gift b{font-size:20px} .pay-gift b em{font-style:normal;color:var(--cyan)} .pay-gift p{margin:4px 0 0;color:var(--muted);font-size:13px} .pay-gift .p100{margin-left:auto;font-size:44px;font-weight:900;color:var(--cyan);letter-spacing:-.03em;white-space:nowrap} /* ---------- СПЕЦПРЕДЛОЖЕНИЕ ---------- */ .special{position:relative;overflow:hidden} .spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .spec-card{border-radius:16px;padding:22px;border:1px solid var(--stroke);background:linear-gradient(160deg,rgba(10,30,66,.7),rgba(6,20,44,.8))} .spec-card.hot{border-color:transparent;background:linear-gradient(150deg,var(--elec),#1a5fe0);box-shadow:0 20px 44px -18px rgba(30,116,255,.7)} .spec-card small{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em} .spec-card.hot small{color:rgba(255,255,255,.8)} .spec-card b{display:block;font-size:24px;font-weight:900;margin-top:6px} .spec-perks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px} .spec-perk{display:flex;align-items:center;gap:14px;border-radius:16px;padding:20px 24px;border:1px dashed var(--stroke2);background:rgba(9,28,60,.5)} .spec-perk .pk-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--cyan);background:rgba(30,80,160,.4);flex:0 0 auto} .spec-perk .pk-ic svg{width:22px;height:22px} .spec-perk>div>b{display:block;color:#fff;margin-bottom:4px;line-height:1.25} .spec-perk>div>span{display:block;color:var(--muted);font-size:13px;line-height:1.45} /* ---------- Финальный CTA ---------- */ .final{position:relative;overflow:hidden} .final .watermark{font-size:clamp(120px,22vw,320px);left:50%;top:-30px;transform:translateX(-50%)} .final-card{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;border-radius:26px;padding:40px;border:1px solid transparent; background:linear-gradient(150deg,rgba(14,44,90,.9),rgba(6,20,46,.94)) padding-box,linear-gradient(130deg,rgba(120,180,255,.5),rgba(40,90,220,.08) 50%,rgba(70,120,255,.4)) border-box; box-shadow:var(--shadow)} .final-card p{color:#c2d5ef;margin:0 0 12px} .final-card p b{color:#fff} .final-card img{width:330px;filter:drop-shadow(0 26px 36px rgba(0,0,0,.6))} .final-note{margin:12px 0 0!important;color:#6f89ad;font-size:11.5px} /* ---------- Футер ---------- */ .foot{border-top:1px solid var(--stroke);background:#02102a;padding:46px max(28px,calc((100vw - var(--max))/2 + 28px)) 40px} .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px} .foot img{width:104px;margin-bottom:14px} .foot-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 14px} .foot-col a,.foot-col p{display:block;color:#c2d5ef;font-size:14px;margin:0 0 10px;transition:.2s} .foot-col a:hover{color:#fff} .foot-copy{margin-top:34px;padding-top:20px;border-top:1px solid var(--stroke);color:#6f89ad;font-size:12px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} /* ---------- Модалка + тост ---------- */ dialog{width:min(520px,calc(100% - 32px));max-height:calc(100vh - 40px);overflow:auto;background:#081d3d;color:#fff;border:1px solid var(--stroke2);border-radius:24px;padding:34px;box-shadow:0 30px 100px #000} dialog::backdrop{background:rgba(0,8,20,.78);backdrop-filter:blur(7px)} dialog h2{font-size:32px;margin:12px 0} /* Шапка формы: станция уходит вправо, слева остаётся воздух под заголовок. Картинка с прозрачным фоном — подложку даёт градиент, а не сама png. */ .lead-visual{position:relative;margin:-34px -34px 20px;height:150px;overflow:hidden;border-radius:23px 23px 0 0; background:radial-gradient(120% 150% at 76% 46%,rgba(23,96,190,.5),transparent 62%),linear-gradient(150deg,#0a2450,#061632)} /* высота от строки, а не фикс — станция целиком в полосе, с полями сверху и снизу */ .lead-visual img{position:absolute;right:26px;top:9px;height:calc(100% - 18px);width:auto; filter:drop-shadow(0 18px 34px rgba(0,6,20,.8))} .lead-visual::after{content:"";position:absolute;inset:auto 0 0 0;height:34px; background:linear-gradient(transparent,#081d3d)} dialog>p{color:var(--muted)} /* z-index обязателен: баннер формы идёт следом по разметке и иначе накрывает крестик */ .modal-close{position:absolute;z-index:3;right:18px;top:14px;background:transparent;border:0;color:#fff;font-size:28px;cursor:pointer;text-shadow:0 2px 10px rgba(0,6,20,.9)} /* выбранная комплектация внутри формы заявки */ .lead-config{margin:16px 0 6px;padding:14px 16px;border-radius:14px;border:1px solid var(--stroke);background:rgba(10,32,68,.6)} .lead-config[hidden]{display:none} .lead-config-title{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px} .lead-config b{display:block;font-size:14px;margin-bottom:8px} .lead-config ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px} .lead-config li{font-size:11px;color:#c2d5ef;border:1px solid var(--stroke);border-radius:999px;padding:4px 9px;background:rgba(6,20,44,.5)} .lead-config p{margin:0;font-size:12px;color:var(--muted)} form{display:grid;gap:12px} form[hidden]{display:none} form label{font-size:12px;color:#b4c7df} /* font:inherit тут наследовал 12 px от label — а iOS Safari зумит страницу на каждом тапе по полю мельче 16 px и обратно сам не отъезжает. Размер задаём явно после font:inherit, иначе сокращённое свойство его затрёт. */ form input:not([type=checkbox]){display:block;width:100%;margin-top:6px;background:#04142e;border:1px solid var(--stroke2);border-radius:12px;padding:14px;color:#fff;font:inherit;font-size:16px;outline:none} form input:focus{border-color:var(--elec)} .consent{display:flex;gap:8px;align-items:center} .button.full{width:100%} .success{padding:26px 0;text-align:center} .success strong{font-size:26px;color:var(--grn)} .toast{position:fixed;right:25px;bottom:25px;background:#0d315f;border:1px solid var(--stroke);border-radius:12px;padding:14px 20px;z-index:100;opacity:0;visibility:hidden;transform:translateY(120%);transition:opacity .25s,visibility .25s,transform .3s} .toast.show{opacity:1;visibility:visible;transform:none} /* ---------- Адаптив ---------- */ @media (max-width:1000px){ .hdr-nav{display:none} .hdr-burger{display:flex} .hdr.open .hdr-nav{display:flex;position:absolute;left:0;right:0;top:76px;flex-direction:column;gap:0;padding:14px 24px;background:#04142e;border-bottom:1px solid var(--stroke)} .hdr.open .hdr-nav a{padding:12px 0} .hero{grid-template-columns:1fr;padding-top:40px} .hero-visual{min-height:440px}.hero-visual img{height:440px} .about-grid,.adv-layout,.control{grid-template-columns:1fr;gap:24px} .ctrl-slide{grid-template-columns:1fr;gap:26px;padding:26px 22px} .ctrl-media{min-height:320px} .ctrl-media img{max-height:300px} .ctrl-halo{width:280px;height:280px} .ctrl-ring{width:250px;height:250px} .ctrl-dot span{display:none} .ctrl-dot{padding:12px} .parts-grid,.sol-grid{grid-template-columns:1fr} .adv-grid{grid-template-columns:1fr 1fr} .spec-grid{grid-template-columns:1fr 1fr} .final-card{grid-template-columns:1fr}.final-card img{margin:0 auto} .foot-top{grid-template-columns:1fr 1fr} } @media (max-width:600px){ .section{padding:72px 18px} .hero{padding-inline:18px} .hero h1{font-size:40px} .hero-lead{font-size:16px} .section-heading{display:block} .section-heading>p{margin-top:14px} .adv-grid,.spec-grid,.spec-perks,.foot-top,.geo-text{grid-template-columns:1fr} .geo-map{margin-top:28px} .pay-gift{flex-direction:column;align-items:flex-start}.pay-gift .p100{margin-left:0} .foot-copy{flex-direction:column} } /* ---------- prefers-reduced-motion ---------- */ @media (prefers-reduced-motion:reduce){ *{animation:none!important} .reveal{opacity:1;transform:none} } /* ============================================================ Бегущая бренд-строка в футере (ПРОИЗВОДСТВО · ОБОРУДОВАНИЕ БРИЗ · …) убрана по правке владельца: страница целиком про оборудование БРИЗ, и уводить внимание перечислением остальных разделов здесь не нужно. На остальных страницах её гасит shared/theme-cohesion.css. В navigation.css у строки стоит display:block !important, и он грузится ПОСЛЕ briz.css — поэтому здесь нужна более высокая специфичность (body …), иначе правило проигрывает по порядку подключения. ============================================================ */ body .global-footer .footer-runner{display:none !important} /* ============================================================ Футер — в цвет страницы. Свой фон #041126 был чуть темнее и «серее» фона body (#03112a), из-за чего подвал читался отдельной плашкой. Делаем прозрачным: сквозь него виден фон самой страницы. ============================================================ */ body .global-footer{background:transparent !important} /* ============================================================ ГЕРОЙ НА ТЕЛЕФОНЕ. Было: колонка грида раздувалась до 404px при ширине контента 354px, поэтому заголовок, текст, кнопки и фото обрезались справа. Причина — min-width:auto у элементов грида: дорожка не может стать уже «минимального содержимого» картинки. Лечим по-канонически — minmax(0,1fr) + min-width:0, и картинку делаем по ширине экрана. ============================================================ */ @media (max-width:1000px){ .hero{grid-template-columns:minmax(0,1fr) !important} .hero>*{min-width:0} .hero-visual{min-height:0} .hero-visual img{width:100% !important;max-width:100% !important;height:auto !important; max-height:62vh;object-fit:contain} .hero-visual .orb{max-width:88vw;max-height:88vw} } /* Заголовок героя: то же длинное слово «САМООБСЛУЖИВАНИЯ» не влезало в ширину экрана и обрезалось справа. Кегль по ширине + перенос. */ @media (max-width:560px){ .hero h1{font-size:clamp(24px,7.4vw,34px) !important;line-height:1.06} .hero h1,.hero h1 .low{overflow-wrap:break-word;hyphens:auto} .ctrl-copy h3,.ctrl-copy p,.ctrl-copy b,.ctrl-copy span{overflow-wrap:break-word} /* строки городов — комфортная высота для пальца */ .city-list a,.city-list li,.geo-city{padding-block:9px} } h1,h2,h3{overflow-wrap:break-word} /* Метки городов на карте и ссылка на отзывы — увеличиваем область нажатия на телефоне, сами метки визуально не меняются. */ @media (max-width:760px){ .geo-pin{padding-block:9px} .trust-more{padding-block:10px} } /* Подписи конфигуратора и подсказки — читаемый контраст. */ .section-heading>p,.hero-lead{color:#a9c0e0;font-size:16px;line-height:1.6} .cfg-empty,.cfg-note,.parts-hint,.callback-note{color:#9db3d2} /* Подсказка у метки города: .geo-pin — это