.hero{min-height:100svh;position:relative;isolation:isolate;overflow:hidden;padding:0 5.5vw;background:radial-gradient(ellipse at 83% 40%,#270914 0%,#10080d 37%,#090608 72%)}.ambient{position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 67% 68%,#6d0a253d,transparent 42%);pointer-events:none}.header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{font-size:39px;font-weight:700;letter-spacing:-2px;display:flex;align-items:center;gap:25px}.brand span{font-size:13px;font-weight:500;letter-spacing:2px;border-left:1px solid #73505a;padding-left:23px}.header-note{font-size:12px;letter-spacing:2.4px;color:#b59ca5}.header-link{font-size:13px;display:flex;gap:21px;align-items:center}.header-link span{font-size:22px;color:#ef748f}.stage{position:relative;min-height:650px;height:calc(100svh - 253px);max-height:1000px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center}.copy{position:relative;z-index:3;padding:45px 0 60px}.eyebrow{font-size:12px;letter-spacing:3px;font-weight:600;display:flex;align-items:center;gap:14px;margin:0 0 32px;color:#dfbcc7}.eyebrow span{width:28px;height:1px;background:#e94e73}h1{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(72px,7.8vw,128px);line-height:.89;letter-spacing:-.045em;margin:0 0 30px}h1 em{font-weight:400;background:linear-gradient(110deg,#f29eae 5%,#e66282 48%,#a62249 95%);-webkit-background-clip:text;background-clip:text;color:transparent}.intro{font-size:16px;line-height:1.85;color:var(--muted);margin:0 0 35px;max-width:430px}.cta{display:inline-flex;align-items:center;gap:36px;font-size:14px;font-weight:600;padding:19px 25px;border:1px solid #ed527376;border-radius:3px;background:linear-gradient(120deg,#ac1738,#700c28);box-shadow:0 7px 35px #ac073226,inset 0 1px 0 #ffb7c328;transition:background .2s,box-shadow .2s,transform .2s}.cta:hover{background:linear-gradient(120deg,#cd2148,#900e33);box-shadow:0 8px 45px #ac073247;transform:translateY(-2px)}.cta span{font-size:22px;line-height:1}.quiet{font-size:12px;letter-spacing:.25px;color:#8f777f;margin:19px 0 0}.product-scene{position:relative;min-width:0;height:100%;display:flex;align-items:center;justify-content:center}.model-name{position:absolute;top:13%;left:-2%;font-size:clamp(130px,19vw,290px);letter-spacing:-.06em;font-weight:600;line-height:1;color:#9c325719;white-space:nowrap}.halo{position:absolute;left:-13%;top:43%;width:124%;height:31%;border-radius:50%;border:1px solid #fc496f80;transform:rotate(-17deg);box-shadow:0 0 6px #ff567577,0 0 28px #d4114b77,inset 0 0 28px #d4114b33;background:radial-gradient(ellipse,#a5193944,transparent 65%)}.router{position:relative;z-index:2;width:125%;max-width:850px;height:auto;object-fit:contain;filter:drop-shadow(0 38px 28px #000b);transform:translate(-1%,0)}.product-caption{position:absolute;bottom:10%;right:0;display:flex;align-items:center;gap:15px;font-size:12px;letter-spacing:2px;line-height:1.8;color:#efcbd5}.caption-line{width:44px;height:1px;background:#94415b}.product-caption small{font-size:12px;letter-spacing:0;color:#947d87}.hero-bottom{position:relative;z-index:4;min-height:140px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr .9fr;align-items:center;gap:25px}.spec{display:flex;flex-direction:column;gap:8px;padding-left:30px;border-left:1px solid var(--line)}.spec:first-child{padding-left:0;border:0}.spec strong{font-weight:500;font-size:25px;letter-spacing:-1px}.spec span{font-size:12px;color:#a08c94}.endnote{text-align:right;font-size:12px;line-height:1.8;letter-spacing:2px;color:#967c87} @media(min-width:1800px){.hero{padding:0 max(5.5vw,calc((100vw - 1680px)/2))}.stage{height:800px}} @media(max-width:1000px){.header-note{display:none}.stage{min-height:620px}.router{width:150%;transform:translateX(0)}.product-caption{bottom:9%}h1{font-size:86px}.intro{max-width:340px}.desktop-break{display:none}.spec span{font-size:12px}.endnote{letter-spacing:1px}} @media(max-width:700px){.hero{padding:0 24px}.header{height:83px}.brand{font-size:33px;gap:16px}.brand span{padding-left:16px;font-size:12px}.header-link{font-size:12px;gap:8px}.stage{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none;align-items:stretch}.copy{padding:48px 0 0}.eyebrow{font-size:12px;letter-spacing:2px;margin-bottom:28px}h1{font-size:clamp(65px,13vw,92px);margin-bottom:23px}.intro{font-size:16px;line-height:1.8;max-width:330px;margin-bottom:27px}.cta{font-size:13px;padding:17px 21px;gap:35px}.quiet{font-size:12px}.product-scene{height:355px;margin:0 -8px}.router{width:110%;max-width:470px;max-height:350px;transform:translateY(-3px)}.model-name{font-size:150px;left:10%;top:8%}.halo{left:0;width:100%;top:45%;height:30%}.product-caption{bottom:5%;right:6px;font-size:10px}.product-caption small{font-size:12px}.hero-bottom{grid-template-columns:repeat(3,1fr);gap:8px;min-height:112px}.spec{padding-left:12px;gap:6px}.spec strong{font-size:20px}.spec span{font-size:12px;line-height:1.5;max-width:100px}.endnote{display:none}} @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} /* A bounded product stage keeps the image and its caption above the specifications. */ .stage{height:auto;min-height:650px;max-height:none;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px} .product-scene{height:620px;min-height:0;max-height:none;margin:0;background:none;isolation:isolate;display:grid;grid-template-rows:minmax(0,1fr) auto;align-self:center;overflow:hidden;padding:20px 0 26px} .product-scene::before{content:"";position:absolute;inset:12% 0 12%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 52% 62%,#bf124974 0%,#6d0a304a 36%,transparent 69%);opacity:.65} .router-frame{position:relative;z-index:2;width:100%;height:100%;min-height:0;overflow:hidden;mix-blend-mode:screen} .router{display:block;position:static;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;transform:none;filter:none;mix-blend-mode:normal} .halo{z-index:1;left:8%;top:65%;width:84%;height:17%;transform:rotate(-12deg);opacity:.6;pointer-events:none} .model-name{z-index:0;left:3%;top:7%;font-size:clamp(100px,16vw,250px)} .product-caption{position:relative;bottom:auto;right:auto;z-index:3;justify-self:end;padding:12px 18px 0;min-height:55px;font-size:12px} .hero-bottom{clear:both;margin-top:20px} @media(min-width:1800px){.stage{height:auto;min-height:740px}.product-scene{height:700px}} @media(max-width:1000px){.stage{min-height:620px;gap:0}.product-scene{height:540px}h1{font-size:clamp(64px,8.6vw,86px)}} @media(max-width:700px){.stage{min-height:0;gap:12px}.product-scene{height:420px;width:100%;padding:0 0 22px;margin:0;flex:none}.router-frame{width:100%;height:100%}.router{width:100%;height:100%;max-width:100%;max-height:100%;transform:none}.model-name{font-size:140px}.product-caption{font-size:12px;padding-right:0}.hero-bottom{margin-top:0}h1{font-size:clamp(65px,13vw,92px)}} @media(prefers-reduced-motion:reduce){.product-scene::before,.halo{animation:none;opacity:.75}} /* Desktop hero shares one browser viewport between header, product and specs. */ @media(min-width:1001px){ .hero{height:100svh;min-height:700px;display:grid;grid-template-rows:clamp(76px,9svh,96px) minmax(0,1fr) 116px} .header{height:auto;min-height:0} .stage{height:100%;min-height:0;max-height:100%;align-items:center} .copy{padding:16px 0;min-width:0} h1{font-size:clamp(72px,min(7vw,12svh),112px)} .eyebrow{margin-bottom:24px} .intro{margin-bottom:26px} .product-scene{height:100%;max-height:100%;min-height:0;padding:12px 0 18px;align-self:stretch} .hero-bottom{height:116px;min-height:0;margin-top:0;padding:20px 0} } .brand{display:inline-flex;gap:0;line-height:1;flex-shrink:0}.brand-logo{display:block;width:216px;height:auto;max-width:100%}@media(max-width:700px){.brand-logo{width:166px}.header-link{font-size:12px}} /* Brand statement behind the router. */ .model-name{inset:6% 3% auto;width:94%;font-family:"Cormorant Garamond",serif;font-size:clamp(38px,4.4vw,76px);font-weight:500;line-height:1.04;letter-spacing:-.025em;white-space:normal;color:rgba(182,83,113,.22);user-select:none;pointer-events:none}.model-name span{display:block;white-space:nowrap}@media(max-width:700px){.model-name{top:5%;font-size:clamp(30px,8.5vw,54px)}} /* Four deliberate lines preserve the full slogan within the desktop hero. */ .freedom-title{font-size:clamp(36px,4.2vw,70px);line-height:1.02;letter-spacing:-.035em}.freedom-title span{display:block;white-space:nowrap}.freedom-title em{display:block}@media(min-width:1001px){.freedom-title{font-size:clamp(36px,min(4.2vw,7.3svh),70px);margin-bottom:24px}}@media(max-width:700px){.freedom-title{font-size:clamp(27px,7.8vw,52px);line-height:1.06;letter-spacing:-.04em}} /* Readable slogan: identical lowercase starts and one shared left edge. */ .model-name{z-index:3;inset:5% 3% auto;width:94%;color:#c98d9e;opacity:1;text-align:left;font-style:normal;font-weight:500;letter-spacing:-.025em;line-height:1.08;text-shadow:0 2px 12px #090608,0 0 4px #090608} .model-name span{display:block;margin:0;padding:0;text-indent:0;text-align:left} /* Ruby service cabinet: independent reveal layers and the original brand mark. */ .service-scene{display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;isolation:isolate} .service-scene::before{display:none} .service-table{position:relative;flex:none;width:151%;aspect-ratio:1626/967;isolation:isolate;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse at center,#000 38%,transparent 72%);mask-image:radial-gradient(ellipse at center,#000 38%,transparent 72%)} .service-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:.65;filter:brightness(.68);user-select:none} .service-window{--reveal:0;position:absolute;left:calc(21.5% + var(--col)*19%);top:calc(19% + var(--row)*31%);width:19%;height:31%;overflow:hidden;opacity:calc(.32 + var(--reveal)*.68);filter:blur(var(--mist-blur,3.6px));-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);will-change:opacity,filter} .service-window img{position:absolute;width:526.315789%;height:322.580645%;max-width:none;left:calc(-113.157895% - var(--col)*100%);top:calc(-61.290323% - var(--row)*100%);user-select:none} /* An opaque dim layer conceals the baked-in icon before its sharp layer reveals it. */ .service-backdrop{filter:brightness(.42) blur(2.5px)} .floating-n{position:absolute;z-index:10;left:50%;top:50%;width:5.8%;aspect-ratio:82/84;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 3px #080307) drop-shadow(0 0 9px #f22e6780);will-change:left,top} .floating-n img{display:block;width:100%;height:100%} .floating-n::before{content:"";position:absolute;inset:-60%;z-index:-1;background:radial-gradient(ellipse,#ed38633b,transparent 67%);border-radius:50%} @media(min-width:1001px){.service-scene{height:100%;min-height:0}.service-table{max-height:100%;width:min(151%,calc((100svh - 230px)*1.6815))}} @media(min-width:701px) and (max-width:1000px){.service-scene{height:480px}} @media(max-width:700px){.service-scene{height:auto;aspect-ratio:1.12;margin:0;padding:0;width:100%}.service-table{width:151%}} @media(prefers-reduced-motion:reduce){.floating-n{will-change:auto}} /* Full-width frontal router silhouette, below every content layer. */ .router-silhouette{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none;transform:translate(-30%,15%);background:url('../images/router-front-silhouette.png') center center / calc(100% / 3) auto no-repeat;opacity:.28;mix-blend-mode:screen;filter:brightness(.65);-webkit-mask-image:linear-gradient(transparent 2%,#000 20%,#000 78%,transparent 98%);mask-image:linear-gradient(transparent 2%,#000 20%,#000 78%,transparent 98%)} .header,.stage{position:relative;z-index:1} @media(max-width:700px){.router-silhouette{background-position:center center;opacity:.22}} /* Pointer-directed only; the mark never intercepts input. */ .service-scene{touch-action:pan-y;outline-offset:-4px} .service-scene:focus-visible{outline:1px solid #ed547b} .floating-n{pointer-events:none} /* On desktop N replaces the system cursor within its interactive area. */ @media(hover:hover) and (pointer:fine){.service-scene,.service-scene *{cursor:none}} /* Blend the cabinet's black pixels into the hero, then feather its actual clipped viewport on all four sides (the oversized table alone cannot do this). */ .stage{z-index:auto} .service-scene{mix-blend-mode:screen; -webkit-mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.16) 2%,rgba(0,0,0,.55) 5%,#000 10%,#000 90%,rgba(0,0,0,.55) 95%,rgba(0,0,0,.16) 98%,transparent),linear-gradient(to bottom,transparent,rgba(0,0,0,.16) 3%,rgba(0,0,0,.55) 7%,#000 14%,#000 86%,rgba(0,0,0,.55) 93%,rgba(0,0,0,.16) 97%,transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.16) 2%,rgba(0,0,0,.55) 5%,#000 10%,#000 90%,rgba(0,0,0,.55) 95%,rgba(0,0,0,.16) 98%,transparent),linear-gradient(to bottom,transparent,rgba(0,0,0,.16) 3%,rgba(0,0,0,.55) 7%,#000 14%,#000 86%,rgba(0,0,0,.55) 93%,rgba(0,0,0,.16) 97%,transparent); mask-composite:intersect} /* Keep the original cabinet perimeter; its baked-in central logos are masked out. */ .service-backdrop{-webkit-mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);-webkit-mask-size:100% 100%,57% 62%;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:xor;mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);mask-size:100% 100%,57% 62%;mask-position:center;mask-repeat:no-repeat;mask-composite:exclude} /* Source cell and displayed position are independent, preserving the original artwork. */ .service-window{opacity:1;filter:none;will-change:auto} .service-window img{left:calc(-113.157895% - var(--source-col,var(--col))*100%);opacity:calc(.32 + var(--reveal)*.68);filter:blur(var(--mist-blur,3.6px));will-change:opacity,filter} /* Two soft ruby-grey mist layers share the icon's exact proximity value. */ .service-window::before,.service-window::after{content:"";position:absolute;z-index:1;inset:8% -18%;pointer-events:none;opacity:calc((1 - var(--reveal))*.36);filter:blur(9px);background:radial-gradient(ellipse at 24% 36%,#caa8b780,transparent 46%),radial-gradient(ellipse at 72% 64%,#bc788e80,transparent 48%),radial-gradient(ellipse at 48% 76%,#d2b9c060,transparent 40%);-webkit-mask-image:radial-gradient(ellipse,#000 25%,transparent 70%);mask-image:radial-gradient(ellipse,#000 25%,transparent 70%);animation:service-mist-drift 13s ease-in-out infinite alternate;animation-delay:var(--phase,0s);will-change:transform,opacity} .service-window::after{background:radial-gradient(ellipse at 35% 62%,#dac9cf70,transparent 45%),radial-gradient(ellipse at 78% 30%,#b47c9370,transparent 48%);animation-duration:17s;animation-direction:alternate-reverse} @keyframes service-mist-drift{from{transform:translate(-5%,-6%) scale(1.04)}to{transform:translate(5%,7%) scale(1.15)}} @media(prefers-reduced-motion:reduce){.service-window::before,.service-window::after{animation:none;will-change:auto}} /* ========================================================================== Адаптация под WordPress. Выше — hero-часть keenetis-v17/style.css дословно, включая исторические переопределения и мёртвые правила (.halo, .model-name, .router, .router-frame, .product-caption — элементов нет в разметке v17). Единственная правка выше: путь фона .router-silhouette переписан на '../images/…' относительно этого файла, чтобы не зависеть от домена. ========================================================================== */ /* Блок keenetis/hero не должен получать ни отступов, ни ширины от раскладки ядра. */ .wp-block-keenetis-hero{margin:0} /* Классический
— самостоятельный элемент над первым экраном (inc/header.php, хук wp_body_open), одинаковый на всех страницах. В образце v17 шапка была первым рядом грид-раскладки .hero; здесь она вынесена наружу, поэтому: (1) горизонтальный отступ — padding по колонкам 5.5vw (как у .hero и .page-gutter). Фон и рамка-подчёркивание при этом во всю ширину — так и нужно для липкой шапки (см. ниже); (2) на десктопе высота шапки — ровно бывший первый ряд грида (clamp(76px,9svh,96px)), а .hero ужимаем на эту высоту: «шапка + hero» по-прежнему занимают ровно один экран; (3) силуэт роутера рисуется внутри .hero (position:absolute;inset:0). Раз .hero теперь ниже на высоту шапки, поднимаем верх силуэта на ту же высоту — он снова закрывает весь первый экран, включая зону шапки, как в образце. */ .header{padding:0 5.5vw} @media(min-width:1800px){ .header{padding:0 max(5.5vw,calc((100vw - 1680px)/2))} } @media(max-width:700px){ .header{padding:0 24px} } @media(min-width:1001px){ .header{height:clamp(76px,9svh,96px)} .hero{ grid-template-rows:minmax(0,1fr) 116px; height:calc(100svh - clamp(76px,9svh,96px)); min-height:624px; } .router-silhouette{top:calc(-1 * clamp(76px,9svh,96px))} } @media(min-width:701px) and (max-width:1000px){ .hero{min-height:calc(100svh - 112px)} .router-silhouette{top:-112px} } @media(max-width:700px){ .router-silhouette{top:-83px} } /* Липкая шапка: закреплена у верхнего края и остаётся на месте при прокрутке. position:sticky не выносит элемент из потока — геометрия первого экрана («шапка + hero = один вьюпорт») сохраняется, шапка лишь «прилипает» к верху. Фон — тёмный полупрозрачный с размытием: в покое (scroll 0) почти неотличим от радиального фона первого экрана, при прокрутке даёт читаемую подложку над контентом. z-index ниже окон (.keenetis-modal — 9999). */ .header{ position:sticky; top:0; z-index:100; background:rgba(9,6,8,.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } /* Компенсируем высоту липкой шапки при переходах по якорям (кнопка «Ключевые преимущества» → #keenetis-modes и любые ссылки-якори). */ html{scroll-padding-top:112px} @media(min-width:1001px){ html{scroll-padding-top:clamp(76px,9svh,96px)} } @media(max-width:700px){ html{scroll-padding-top:83px} } /* У образца имеет line-height:normal. theme.json задаёт styles.typography.lineHeight:1.7 для статейного текста — на первом экране это удлиняет строчные боксы у .eyebrow, .quiet, .cta, .header-link, .header-note, .spec strong (свой line-height они не задают). Возвращаем normal в пределах hero, не трогая остальной сайт. */ .hero{line-height:normal} /* Отступление от v17: вместо надписи «СВЯЗЬ, КОТОРАЯ ОБЪЕДИНЯЕТ.» в правом нижнем углу полосы характеристик — ссылка «Аппаратная база», открывающая окно «12 преимуществ». Класс .header-link даёт тот же вид (13px, розовая стрелка, фокус); прижимаем к правому краю. В отличие от v17-надписи .endnote, на мобильном ссылку НЕ прячем — это единственный способ открыть окно; на ≤700px кладём её отдельной строкой под тремя характеристиками. */ .endnote-link{justify-self:end;text-decoration:none;cursor:pointer} @media(max-width:700px){ .endnote-link{grid-column:1 / -1;margin-top:6px} } /* Отступление от v17: ссылка «Аппаратная база» в шапке заменена на кнопку покупки. Стиль — производный от .cta образца (рубиновый градиент, рамка, радиус, hover), но: (1) компактнее, чтобы не увеличивать высоту шапки (≈35px против ≈76px ряда шапки на десктопе), (2) меньше внутренних отступов и gap, (3) кегль крупнее (.cta — 14px, здесь 15px/600), (4) рубиновое свечение (несколько слоёв box-shadow с 0 0). Стрелку размерит только span[aria-hidden], поэтому текст RichText в редакторе не задевается — отдельная правка editor.css не нужна. */ .header-cta{ display:inline-flex;align-items:center;gap:9px;flex-shrink:0; font-family:Manrope,sans-serif;font-size:15px;font-weight:600;letter-spacing:.01em;line-height:1; padding:9px 16px;border:1px solid #ed527376;border-radius:3px; color:var(--text);text-decoration:none;white-space:nowrap; background:linear-gradient(120deg,#ac1738,#700c28); box-shadow:0 0 14px #e94e7359,0 0 34px #ba123d47,0 6px 22px #ac073333,inset 0 1px 0 #ffb7c33d; transition:background .2s,box-shadow .2s,transform .2s; } .header-cta:hover{ background:linear-gradient(120deg,#cd2148,#900e33); box-shadow:0 0 18px #ff5f86b3,0 0 48px #e94e736e,0 8px 26px #ac073347,inset 0 1px 0 #ffb7c355; transform:translateY(-1px); } .header-cta span[aria-hidden]{font-size:18px;line-height:1;color:#ffd3dd} @media(max-width:700px){ .header-cta{font-size:14px;padding:8px 13px;gap:7px} .header-cta span[aria-hidden]{font-size:16px} } /* На узких телефонах логотип + кнопка не помещаются в шапку по ширине и стрелка ↗ уходила за край экрана. Раньше её обрезал .hero{overflow:hidden}; теперь шапка вынесена из .hero, поэтому клип нужен на самой шапке — иначе на ~320px кнопка вылезает за вьюпорт и появляется горизонтальная прокрутка. Стрелку на таких ширинах убираем совсем, а на самых узких ещё немного ужимаем кнопку. */ @media(max-width:430px){ .header{overflow:hidden} .header-cta span[aria-hidden]{display:none} .header-cta{gap:0} } @media(max-width:360px){ .header-cta{font-size:13px;padding:7px 11px} } /* Опция «Только чистые иконки» (атрибут cleanIcons блока keenetis/hero, панель «Сцена сервисов» в редакторе): отключает дымку и подвижную букву N — остаются только сами иконки без затемнения и размытия. .floating-n при включённой опции вообще не выводится в разметке (render.php), поэтому здесь только формула прозрачности иконки и мист-слои. Формула на .service-window img (эффективная прозрачность иконки, см. выше) и мист (.service-window::before/::after) завязаны на --reveal, которую без буквы N двигать нечем — оставили бы иконки затемнёнными и размытыми, поэтому обе переопределяем явно. Курсор внутри сцены возвращаем обычный: прятать его (как в образце — «N вместо курсора») больше незачем. */ .service-scene.is-clean .service-window img{opacity:1;filter:none} .service-scene.is-clean .service-window::before, .service-scene.is-clean .service-window::after{display:none} .service-scene.is-clean, .service-scene.is-clean *{cursor:auto}