/* ============================================================ 3DGamBiT.ru — стили лендинга Шрифты подключены локально из папки ../fonts (woff2, вариативные). ============================================================ */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../fonts/jetbrains-mono-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ 3DGamBiT.ru — Landing ============================================================ */ :root{ --bg: #04060c; --bg-2: #070b14; --surface: rgba(16,22,36,.55); --surface-2: rgba(22,30,48,.42); --line: rgba(120,160,220,.14); --line-strong: rgba(140,190,255,.28); --ink: #eaf2ff; --ink-2: #a9b8d4; --ink-3: #6d7f9e; --cyan: #22e6ff; --violet: #8b5cff; --magenta: #ff4fd8; --lime: #6bffb8; --glow-cyan: 0 0 24px rgba(34,230,255,.45), 0 0 70px rgba(34,230,255,.18); --glow-violet: 0 0 24px rgba(139,92,255,.45), 0 0 80px rgba(139,92,255,.2); --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --maxw: 1200px; /* Вертикальный шаг между разделами и блоками — ОДНО число на весь сайт. Владелец (04.10, ночь): «Надо везде уменьшить вот это растояние между блоками и разделами на основной странице и на странице публикации и на новых страница что созданы будут. Чтобы был единый стиль по рамеру между ними. умень в половину сейчас». Здесь было clamp(72px,9vw,140px) — на окне 1440 это 129.6 точки С КАЖДОЙ стороны, то есть между двумя соседними разделами главной лежала полоса 259.2. Замер 04.10: `servicesPadT/B = 129.6px`, полосы между всеми разделами главной — 259.2; на публикации вокруг встроенного раздела — 151.6 (22 точки потока .wp-body плюс 129.6 поля самого раздела). Отсюда и красные рамки на пяти снимках владельца. Половина от прежнего — 64.8 точки: между разделами 129.6 вместо 259.2, вокруг встроенного раздела на публикации 86.8 вместо 151.6. Число ОДНО, и оно же достаётся всем будущим страницам: и главная, и публикация, и страница сайта берут шаг отсюда, а не задают свой. Правило `section{…}` ниже — единственный потребитель. Это не случайность: встроенный раздел на публикации — ТОЖЕ
, поэтому одно правило уменьшает шаг сразу везде, и разойтись страницам нечем. */ --gap-sec: clamp(36px,4.5vw,70px); --ease: cubic-bezier(.22,1,.36,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Manrope',-apple-system,'Segoe UI Variable','Segoe UI',system-ui,sans-serif; font-weight:400; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body.no-scroll{overflow:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit} ::selection{background:rgba(34,230,255,.28);color:#fff} /* scrollbar */ /* Полоса прокрутки сайта: 10px, дорожка под цвет фона, градиентная ручка. `height` здесь не для симметрии. Раньше стояла одна `width`, и ВЕРТИКАЛЬНАЯ полоса получала сайтовый вид, а ГОРИЗОНТАЛЬНАЯ — родную высоту браузера: одна и та же страница показывала две разные полосы. Владелец (06.10) обвёл полосу в окне товара и сказал: «прокрутка не соотвествует стилю сайта везде». В панели (`admin/admin.css`) `height` стояла с самого начала — здесь её просто забыли. Вторая половина той же правки — в правилах прокручиваемых блоков ниже: `scrollbar-width`/`scrollbar-color` заставляют Chrome ИГНОРИРОВАТЬ `::-webkit-scrollbar-*` целиком, и сайтовый вид там не применялся вовсе. */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:#05080f} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--cyan),var(--violet)); border-radius:10px;border:2px solid #05080f; } /* ---------- ambient background ---------- */ .ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .ambient .orb{ position:absolute;border-radius:50%;filter:blur(90px);opacity:.5; animation:drift 22s var(--ease) infinite alternate; } .orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(34,230,255,.55),transparent 68%);top:-140px;left:-120px} .orb-2{width:600px;height:600px;background:radial-gradient(circle,rgba(139,92,255,.5),transparent 68%);top:34%;right:-220px;animation-delay:-7s} .orb-3{width:460px;height:460px;background:radial-gradient(circle,rgba(255,79,216,.34),transparent 68%);bottom:-160px;left:28%;animation-delay:-13s} @keyframes drift{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(60px,-50px,0) scale(1.14)} 100%{transform:translate3d(-50px,60px,0) scale(.94)} } .grid-veil{ position:absolute;inset:0; background-image: linear-gradient(rgba(120,170,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(120,170,255,.055) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 78%); } .noise{ position:absolute;inset:0;opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* cursor glow */ .cursor-glow{ position:fixed;width:520px;height:520px;border-radius:50%; pointer-events:none;z-index:1; background:radial-gradient(circle,rgba(34,230,255,.10),rgba(139,92,255,.05) 42%,transparent 66%); transform:translate(-50%,-50%); transition:opacity .4s ease; will-change:transform; } @media (hover:none){.cursor-glow{display:none}} /* ---------- layout ---------- */ .wrap{width:min(var(--maxw),92vw);margin-inline:auto;position:relative;z-index:2} /* Шаг раздела — из переменной (см. --gap-sec в :root). Здесь стояло clamp(72px,9vw,140px) прямым числом, и то же число пришлось бы править в каждом новом месте; переменная одна на сайт, публикации и будущие страницы. */ section{position:relative;z-index:2;padding:var(--gap-sec) 0} /* Блок, вложенный в раздел как САМ раздел (на главной так стоят калькулятор и экспресс-оценка:
→
), своих полей не получает. Поля здесь ДВОЙНЫЕ: внешний раздел даёт 64.8 сверху и снизу, и вложенный
— ещё столько же. Замер до правки: #home-calc 1297 точек при содержимом 779 — 518 из них воздух. На публикации того же нет: .wp-body section.wp-block{padding:0}, и блок стоит вплотную к потоку. Одно и то же содержимое выглядело на главной и на публикации по-разному — ровно то, что владелец назвал «единый стиль по размеру». Бьём ТОЛЬКО по вложенному
: прямое правило `.wp-block {padding:0}` сняло бы СВОИ поля у цитаты (.wp-quote) и списка (.wp-list) — их владелец задавал не для этого. */ main > section > section.wp-block{padding-block:0} .sec-head{max-width:760px;margin-bottom:clamp(38px,5vw,64px)} .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-size:.74rem;letter-spacing:.24em;text-transform:uppercase; color:var(--cyan);font-weight:600; padding:7px 15px;border-radius:100px; border:1px solid rgba(34,230,255,.28); background:rgba(34,230,255,.06); box-shadow:0 0 22px rgba(34,230,255,.14) inset; } .eyebrow::before{ content:'';width:6px;height:6px;border-radius:50%;background:var(--cyan); box-shadow:0 0 12px var(--cyan);animation:pulse 2.4s infinite; } @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}} h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.025em;font-weight:800} h2{font-size:clamp(1.85rem,4vw,3.1rem);margin:22px 0 18px} h3{font-size:1.16rem;letter-spacing:-.015em;font-weight:700} .lead{color:var(--ink-2);font-size:clamp(1rem,1.35vw,1.12rem);font-weight:300;margin:0} .grad{ background:linear-gradient(100deg,var(--cyan),var(--violet) 42%,var(--magenta) 78%,var(--cyan)); background-size:260% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:flow 9s linear infinite; } @keyframes flow{to{background-position:260% 0}} /* Размер и цвет заголовка блока — настройки владельца. Владелец: «порой в таких блоках не видно что написано». Переменные ставит сервер (pubHeadStyle), и только когда он их задал: `--blk-title` и `--blk-head` по умолчанию НЕ выставлены, и тогда работает то, что написано в резервном значении, — то есть обычный вид сайта. Заголовок берёт цвет, но НЕ трогает цветную часть: у .grad стоит `color:transparent` (градиент режется по тексту), и он остаётся градиентным при любом выборе. Владелец выбирает цвет обычной части, а акцент — по-прежнему акцент. */ .sec-head h2{color:var(--blk-head,var(--ink)); font-size:var(--blk-title,clamp(1.85rem,4vw,3.1rem))} .sec-head .lead{color:var(--blk-head,var(--ink-2))} /* ---------- nav ---------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:60; transition:background .45s var(--ease),backdrop-filter .45s,border-color .45s; border-bottom:1px solid transparent; } .nav.solid{ background:rgba(5,8,15,.72); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border-bottom-color:var(--line); } .nav-in{ width:min(var(--maxw),92vw);margin-inline:auto; display:flex;align-items:center;justify-content:space-between; height:76px; } /* ---------- якорь не должен прятать цель под шапкой ---------- Владелец (05.10) просил, чтобы сайт отзывался на якоря («#services»), — он будет ставить их в кнопки, блоки и тексты. Замер до этой правки: шапка `.nav` закреплена (`position:fixed`), её высота 77 точек (76 из `.nav-in` плюс нижняя граница), а цель якоря встаёт в top:0 — то есть 77 точек раздела прячутся ЗА шапкой. Нажал «Услуги» — и не понял, что произошло. Так же вели себя и пункты меню: они якорные с самого начала. `scroll-padding-top` — отступ у САМОЙ прокрутки, поэтому он работает для ЛЮБОЙ цели, а не только для разделов главной: якорь, который владелец поставит внутри блока или страницы, получит тот же отступ. Отдельно расставлять `scroll-margin-top` по разделам не пришлось бы, но каждый новый раздел пришлось бы не забыть — а это и есть та работа, которую забывают. 89 = 76 (высота шапки) + 13 (зазор, чтобы заголовок раздела не липнул к границе). Правило под `:has(#nav)`: на странице БЕЗ шапки отступ не нужен вовсе — там цель встала бы ниже верха на пустом месте. */ html:has(#nav){scroll-padding-top:89px} .logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.12rem;letter-spacing:-.02em} .logo .mark{ width:34px;height:34px;border-radius:10px;flex:none; display:grid;place-items:center; background:linear-gradient(140deg,rgba(34,230,255,.2),rgba(139,92,255,.24)); border:1px solid rgba(34,230,255,.4); box-shadow:var(--glow-cyan); animation:markFloat 5s ease-in-out infinite; } @keyframes markFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-4deg)}} .logo .mark svg{width:19px;height:19px} .logo b{background:linear-gradient(90deg,#fff,#9fd8ff);-webkit-background-clip:text;background-clip:text;color:transparent} .logo span{color:var(--cyan);text-shadow:0 0 14px rgba(34,230,255,.8)} /* ПУНКТ МЕНЮ НЕ СЖИМАЕТСЯ И НЕ ПЕРЕНОСИТСЯ. Владелец (07.10) показал шапку на ширине около 920 точек и написал: «кнопка не ровная Услуги картинка сьехала надо все исправить и сделать как в обычном режиме окна чтобы все было ровно и в один ряд». На снимке «Услуги» разъехалось на три строки — снимок пункта сверху, подпись посередине, стрелочка снизу, — и налезло на логотип. Причина не в «Услугах», а в общем правиле: пункты меню — флекс-элементы, и когда полосы не хватает, браузер СЖИМАЕТ их ниже содержимого (`flex-shrink:1` по умолчанию), а содержимое переносится. Замер `_probe-nav-head.js`: высота первого пункта 53 при 26 у соседей, левый край подписи на 35 точек левее своей коробки — отсюда и налезание на логотип. `flex:none` запрещает сжатие, `white-space:nowrap` — перенос подписи. Что будет ВМЕСТО сжатия, решают ширина окна и правила ниже: тесная полоса жмёт отступы и кегль («Мёртвая зона шапки»), а с 820 точек приходит бургер. */ .nav-links{display:flex;gap:4px;align-items:center} .nav-links > a,.nav-links > .nav-item{flex:none} .nav-links a{white-space:nowrap} .nav-links a{ position:relative;padding:9px 15px;border-radius:100px; font-size:.9rem;font-weight:500;color:var(--ink-2); transition:color .3s,background .3s; } .nav-links a::after{ content:'';position:absolute;left:50%;bottom:4px;width:0;height:1.5px; background:linear-gradient(90deg,var(--cyan),var(--violet)); transform:translateX(-50%);transition:width .35s var(--ease); box-shadow:0 0 10px var(--cyan); } .nav-links a:hover{color:#fff;background:rgba(120,170,255,.07)} .nav-links a:hover::after{width:52%} .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 26px;border-radius:100px;border:1px solid transparent; font-size:.94rem;font-weight:700;letter-spacing:.01em;cursor:pointer; transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s; overflow:hidden;isolation:isolate; } .btn-primary{ color:#02121a; background:linear-gradient(115deg,var(--cyan),#6ee7ff 40%,var(--violet)); box-shadow:0 8px 30px rgba(34,230,255,.28),0 0 0 1px rgba(255,255,255,.16) inset; } .btn-primary::before{ content:'';position:absolute;inset:0;z-index:-1; background:linear-gradient(115deg,var(--magenta),var(--violet),var(--cyan)); opacity:0;transition:opacity .4s; } .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(34,230,255,.45),0 0 30px rgba(139,92,255,.5)} .btn-primary:hover::before{opacity:1} .btn-ghost{ color:var(--ink);background:rgba(255,255,255,.03); border-color:var(--line-strong);backdrop-filter:blur(8px); } .btn-ghost:hover{ transform:translateY(-3px); background:rgba(34,230,255,.08); border-color:rgba(34,230,255,.55); box-shadow:0 0 28px rgba(34,230,255,.3),0 0 60px rgba(34,230,255,.12) inset; } .btn-sm{padding:11px 20px;font-size:.86rem} .burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line); background:rgba(255,255,255,.03);color:var(--ink);cursor:pointer;place-items:center} .burger span{display:block;width:19px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:.3s} .burger span::before,.burger span::after{content:'';position:absolute;left:0;width:19px;height:2px;background:currentColor;border-radius:2px;transition:.3s} .burger span::before{top:-6px}.burger span::after{top:6px} /* progress bar */ .progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:70; background:linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta)); box-shadow:0 0 14px rgba(34,230,255,.9)} /* ---------- hero ---------- */ .hero{ /* Высота первого экрана — не ровно окно, а окно МИНУС 72px. Содержимое здесь выключено по центру (align-items:center), поэтому «пустые полосы» сверху и снизу — это не поля, а остаток высоты: поля лишь сдвигают центр, а сами полосы считаются от min-height. Замер на живом сайте (05.10, окно 900px): полоса под шапкой 109.63px, полоса над бегущей строкой 134.59px. Владелец показал на обе красным: «надо немного уменьшить растояние». Урезав min-height на 72px, снимаем по 36px с каждой полосы (74.61 и 99.61) — первый экран перестаёт «висеть» в пустоте, а лента поднимается ближе к плашкам. На узком экране (см. @media 1024px ниже) высоту возвращаем: там содержимое в одну колонку и оно выше, полоса под шапкой всего 27px — ещё 36px увели бы подпись под саму шапку. */ position:relative;min-height:calc(100vh - 72px);display:flex;align-items:center; padding-top:104px;padding-bottom:52px;overflow:hidden; } /* canvas — replaced-элемент: width/height обязательны, иначе он сожмётся до 150px */ #stage{ position:absolute;inset:0;width:100%;height:100%;z-index:1; pointer-events:none;opacity:0;transition:opacity 1.6s ease .3s; -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 46%,rgba(0,0,0,.35) 56%,rgba(0,0,0,.85) 66%,#000 76%); mask-image:linear-gradient(90deg,transparent 0%,transparent 46%,rgba(0,0,0,.35) 56%,rgba(0,0,0,.85) 66%,#000 76%); } #stage.on{opacity:1} .scanline{ position:absolute;left:0;right:0;height:170px;z-index:1;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(34,230,255,.055),transparent); animation:scan 7s linear infinite; } @keyframes scan{0%{top:-170px}100%{top:100%}} .hero-in{position:relative;z-index:3;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center} .hero h1{ font-size:clamp(2rem,4vw,3.5rem); margin:20px 0 22px; letter-spacing:-.035em; } .hero h1 .line{display:block;overflow:hidden} .hero h1 .line > span{display:block;transform:translateY(105%);opacity:0; animation:riseUp 1.05s var(--ease) forwards} .hero h1 .line:nth-child(1) > span{animation-delay:.15s} .hero h1 .line:nth-child(2) > span{animation-delay:.3s} .hero h1 .line:nth-child(3) > span{animation-delay:.45s} @keyframes riseUp{to{transform:translateY(0);opacity:1}} .hero .lead{max-width:530px;font-size:clamp(1rem,1.5vw,1.18rem);color:var(--ink-2)} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 36px} .fade-in{opacity:0;animation:fadeUp 1s var(--ease) forwards} .d1{animation-delay:.6s}.d2{animation-delay:.75s}.d3{animation-delay:.9s}.d4{animation-delay:1.05s} @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} .hero-stats{display:flex;gap:34px;flex-wrap:wrap;padding-top:30px;border-top:1px solid var(--line)} .hstat b{display:block;font-size:1.75rem;font-weight:800;letter-spacing:-.03em; background:linear-gradient(120deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent} .hstat small{color:var(--ink-3);font-size:.79rem;letter-spacing:.06em;text-transform:uppercase} /* floating spec cards */ .hero-visual{position:relative;height:440px} .float-card{ position:absolute;padding:16px 20px;border-radius:var(--r-md); background:linear-gradient(150deg,rgba(20,28,46,.72),rgba(12,17,30,.5)); border:1px solid var(--line-strong); backdrop-filter:blur(14px); box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 40px rgba(34,230,255,.07) inset; animation:floaty 7s ease-in-out infinite; } .float-card .k{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .float-card .v{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;margin-top:3px} .float-card .v em{font-style:normal;color:var(--cyan);text-shadow:0 0 16px rgba(34,230,255,.85)} /* Шесть позиций по краям фигуры: две колонки по три, ровными ярусами. Числа подобраны по замеру, а не на глаз: плашка занимает 88 px из 440 (20 % высоты), а покачивание уводит её на ±16 px. Поэтому между ярусами оставлено 14 % (≈62 px) — этого хватает, чтобы соседи не задели друг друга даже в крайних фазах, а верхний и нижний ярусы не выходят за пределы первого экрана. Плашек в панели может быть и больше шести — лишние повторяют эти позиции по кругу (см. renderers.heroCards в js/main.js), поэтому ни одна не остаётся без места. */ .fc-1{top:5%;left:0;animation-delay:-1s} .fc-2{top:5%;right:0;animation-delay:-3.4s} .fc-3{top:39%;left:2%;animation-delay:-5.2s} .fc-4{top:39%;right:2%;animation-delay:-2.2s} .fc-5{top:73%;left:0;animation-delay:-4.3s} .fc-6{top:73%;right:2%;animation-delay:-6.1s} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}} .fc-1 .v em{color:var(--violet);text-shadow:0 0 16px rgba(139,92,255,.9)} .fc-3 .v em{color:var(--lime);text-shadow:0 0 16px rgba(107,255,184,.9)} .fc-4 .v em{color:var(--violet);text-shadow:0 0 16px rgba(139,92,255,.9)} .fc-5 .v em{color:var(--lime);text-shadow:0 0 16px rgba(107,255,184,.9)} /* ---------- бегущая строка ---------- Полоска технологий под первым экраном. Слова и вид движения владелец правит в панели («Бегущая строка»). ЗАЗОР ЖИВЁТ В САМОМ СЛОВЕ, А НЕ В ДОРОЖКЕ. Раньше у дорожки был `gap`, а сдвиг задавался как `translateX(-50%)` — и на стыке двух копий оставался шов ровно в половину зазора: 24 слова дают 23 промежутка, а половина ширины — это 11.5 промежутка. Замер на живом сайте: −50% = 2380px, а до середины списка 2406px, разница 26px = 52/2. Полоска дёргалась каждый круг. Теперь у дорожки gap нет, а каждое слово несёт отступ справа. Ширина дорожки = слова × (слово + зазор), поэтому сдвиг на одну копию считается точно: calc(-100% / --marquee-copies). СКОЛЬКО КОПИЙ. Дорожка обязана быть шире экрана вдвое — иначе на последнем кадре анимации справа въезжает пустота, и это не теория: владелец прислал снимок с ней. Число копий считает js/main.js по ширине окна и кладёт в --marquee-copies. Здесь 2 — запасное значение для страницы без скрипта. Скорость в секундах тоже считает скрипт: она зависит от длины списка, а задана в пикселях в секунду, чтобы длинный список не уезжал быстрее короткого. Здесь 34s — запасное. */ /* Бегущая строка — самостоятельный раздел (`
`), но отступы и слой берём не у общего правила тега, а свои: `section{padding: clamp(72px,9vw,140px) 0}` добавило бы полосе 115px пустоты сверху и снизу, а `z-index:2` опустил бы её под декор первого экрана, который она раньше перекрывала (у самой полосы был `z-index:3`). Гасим ТОЧЕЧНО — этот раздел, а не «всем секциям». */ main > section#marquee{padding:0;z-index:3} .marquee{ position:relative;z-index:3;border-block:1px solid var(--line); background:rgba(7,11,20,.6);backdrop-filter:blur(10px); overflow:hidden;padding:18px 0; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .marquee-track{ display:flex;width:max-content; animation:marquee-slide var(--marquee-dur,34s) linear infinite; } .marquee:hover .marquee-track{animation-play-state:paused} @keyframes marquee-slide{ to{transform:translateX(calc(-100% / var(--marquee-copies,2)))} } @keyframes marquee-slide-right{ from{transform:translateX(calc(-100% / var(--marquee-copies,2)))} to{transform:translateX(0)} } .marquee-track>span{ display:flex;align-items:center;gap:var(--marquee-gap,52px); padding-right:var(--marquee-gap,52px); font-size:.86rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;font-weight:600; } .marquee-track>span::after{content:'';width:5px;height:5px;border-radius:50%; background:var(--cyan);box-shadow:0 0 10px var(--cyan);flex:none} /* Прокрутка вправо — та же дорожка, едет в другую сторону. */ .marquee[data-marquee-anim="scroll-right"] .marquee-track{ animation-name:marquee-slide-right; } /* Прокрутка, и при этом слова вспыхивают по очереди. Задержка по номеру слова (--i) — поэтому подсветка идёт волной вдоль полосы, а не мигает вся сразу. */ @keyframes marquee-word-pulse{ 0%,100%{color:var(--ink-3);text-shadow:none} 50%{color:var(--cyan);text-shadow:0 0 14px rgba(34,230,255,.8)} } .marquee[data-marquee-anim="pulse"] .marquee-track>span{ animation:marquee-word-pulse 3.4s ease-in-out infinite; animation-delay:calc(var(--i,0) * .3s); } /* Виды без прокрутки: слова стоят по центру и вспыхивают по очереди. Дорожка перестаёт быть лентой — переносится по строкам и центрируется. Точки-разделители у них лишние: между словами и так есть отступ. */ .marquee[data-marquee-anim="appear"] .marquee-track, .marquee[data-marquee-anim="rise"] .marquee-track, .marquee[data-marquee-anim="none"] .marquee-track{ width:auto;max-width:100%;margin:0 auto;flex-wrap:wrap;justify-content:center; row-gap:14px;animation:none; } .marquee[data-marquee-anim="appear"] .marquee-track>span::after, .marquee[data-marquee-anim="rise"] .marquee-track>span::after, .marquee[data-marquee-anim="none"] .marquee-track>span::after{display:none} @keyframes marquee-word-appear{ 0%{opacity:0;transform:translateY(10px);color:var(--ink-3);text-shadow:none} 35%{opacity:1;transform:translateY(0);color:var(--cyan);text-shadow:0 0 16px rgba(34,230,255,.85)} 70%{color:var(--ink-3);text-shadow:none} 100%{opacity:1;transform:translateY(0);color:var(--ink-3);text-shadow:none} } .marquee[data-marquee-anim="appear"] .marquee-track>span{ animation:marquee-word-appear 4.6s ease-out infinite; animation-delay:calc(var(--i,0) * .26s); } @keyframes marquee-word-rise{ 0%{opacity:0;transform:translateY(22px) scale(.92);color:var(--ink-3);text-shadow:none} 35%{opacity:1;transform:translateY(0) scale(1);color:var(--cyan);text-shadow:0 0 18px rgba(34,230,255,.85)} 70%{color:var(--ink-3);text-shadow:none} 100%{opacity:1;transform:translateY(0) scale(1);color:var(--ink-3);text-shadow:none} } .marquee[data-marquee-anim="rise"] .marquee-track>span{ animation:marquee-word-rise 5s cubic-bezier(.22,1,.36,1) infinite; animation-delay:calc(var(--i,0) * .3s); } /* Движение строки — украшение. Кому анимация мешает, тот должен увидеть ровный список слов, а не мельтешение. */ @media (prefers-reduced-motion:reduce){ .marquee-track, .marquee-track>span, .marquee-track>span::after{animation:none !important} } /* ---------- reveal ---------- */ .reveal{opacity:0;transform:translateY(38px);filter:blur(6px); transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)} .reveal.in{opacity:1;transform:none;filter:blur(0)} /* ---------- cards / services ---------- */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .card{ position:relative;padding:30px 28px 32px;border-radius:var(--r-lg); background:linear-gradient(160deg,rgba(18,25,42,.6),rgba(9,13,23,.42)); border:1px solid var(--line); isolation:isolate; transition:transform .55s var(--ease),border-color .5s,box-shadow .55s var(--ease); transform-style:preserve-3d; } .card::before{ content:'';position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .5s;border-radius:inherit; pointer-events:none;mix-blend-mode:screen; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(34,230,255,.13),transparent 62%); } .card::after{ content:'';position:absolute;inset:-1px;z-index:0;border-radius:inherit; padding:1px;pointer-events:none; background:linear-gradient(135deg,var(--cyan),var(--violet),var(--magenta),var(--cyan)); background-size:300% 300%;opacity:0;transition:opacity .5s;animation:flow 6s linear infinite; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; } .card:hover{transform:translateY(-8px);border-color:transparent;box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 44px rgba(34,230,255,.16)} .card:hover::before,.card:hover::after{opacity:1} .card .ico{ width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px; background:linear-gradient(145deg,rgba(34,230,255,.14),rgba(139,92,255,.16)); border:1px solid rgba(34,230,255,.3); box-shadow:0 0 26px rgba(34,230,255,.16),0 0 20px rgba(34,230,255,.1) inset; transition:transform .55s var(--ease),box-shadow .55s; } .card:hover .ico{transform:translateY(-4px) rotate(-6deg) scale(1.06);box-shadow:0 0 40px rgba(34,230,255,.4),0 0 24px rgba(139,92,255,.3) inset} .card .ico svg{width:25px;height:25px;stroke:var(--cyan);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 0 8px rgba(34,230,255,.9))} .card .tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);font-weight:700;margin-bottom:9px;display:block} .card p{color:var(--ink-2);font-size:.95rem;font-weight:300;margin:12px 0 0} .card .num{ position:absolute;top:18px;right:24px;font-family:'JetBrains Mono',monospace; font-size:.78rem;color:var(--ink-3);letter-spacing:.1em; } /* ---------- materials ---------- */ .mats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px} .mat{ position:relative;padding:24px 22px;border-radius:var(--r-md); border:1px solid var(--line);background:rgba(13,18,31,.5); transition:transform .45s var(--ease),border-color .45s,box-shadow .45s; overflow:hidden; } .mat::after{ content:'';position:absolute;top:0;left:-100%;width:60%;height:100%; background:linear-gradient(100deg,transparent,rgba(34,230,255,.14),transparent); transition:left .8s var(--ease); } .mat:hover{transform:translateY(-6px);border-color:rgba(34,230,255,.45);box-shadow:0 0 34px rgba(34,230,255,.16)} .mat:hover::after{left:130%} .mat h4{font-size:1.02rem;letter-spacing:-.01em;margin-bottom:6px} .mat h4 span{font-size:.74rem;color:var(--cyan);font-family:'JetBrains Mono',monospace;letter-spacing:.08em;display:block;margin-top:4px;font-weight:500} .mat p{font-size:.87rem;color:var(--ink-3);margin:8px 0 0;font-weight:300} .mat .bar{height:3px;border-radius:3px;margin-top:16px;background:rgba(255,255,255,.06);overflow:hidden} .mat .bar i{display:block;height:100%;border-radius:3px;width:0;background:linear-gradient(90deg,var(--cyan),var(--violet)); box-shadow:0 0 12px var(--cyan);transition:width 1.4s var(--ease)} .mat.in .bar i{width:var(--w)} /* ---------- process ---------- */ .steps{position:relative;display:grid;gap:0;margin-top:10px} .steps::before{ content:'';position:absolute;left:27px;top:14px;bottom:14px;width:1.5px; background:linear-gradient(180deg,transparent,var(--cyan) 8%,var(--violet) 55%,var(--magenta) 92%,transparent); opacity:.5; } .step{position:relative;display:grid;grid-template-columns:56px 1fr;gap:26px;padding:22px 0;align-items:start} .step .dot{ width:56px;height:56px;border-radius:50%;display:grid;place-items:center; background:radial-gradient(circle at 32% 28%,rgba(34,230,255,.22),rgba(9,13,23,.95)); border:1px solid rgba(34,230,255,.4); font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.9rem;color:var(--cyan); box-shadow:0 0 26px rgba(34,230,255,.28),0 0 22px rgba(34,230,255,.14) inset; transition:transform .5s var(--ease),box-shadow .5s;position:relative;z-index:2; } .step:hover .dot{transform:scale(1.1);box-shadow:0 0 44px rgba(34,230,255,.6),0 0 26px rgba(139,92,255,.4) inset} .step .body{padding-top:6px} .step h3{margin-bottom:7px} .step p{color:var(--ink-2);font-size:.95rem;font-weight:300;margin:0;max-width:640px} .step .body::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,var(--line),transparent 70%); } /* ---------- industries ---------- */ .ind{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px} .chip{ display:flex;align-items:center;gap:11px;padding:15px 17px;border-radius:14px; border:1px solid var(--line);background:rgba(12,17,29,.5); font-size:.9rem;font-weight:500;color:var(--ink-2); transition:transform .4s var(--ease),color .4s,border-color .4s,box-shadow .4s; } .chip i{ width:8px;height:8px;border-radius:50%;flex:none; background:linear-gradient(135deg,var(--cyan),var(--violet)); box-shadow:0 0 12px rgba(34,230,255,.85);transition:transform .4s } .chip:hover{transform:translateY(-4px) scale(1.02);color:#fff;border-color:rgba(34,230,255,.45); box-shadow:0 0 26px rgba(34,230,255,.2),0 14px 34px rgba(0,0,0,.4)} .chip:hover i{transform:scale(1.7)} /* ---------- pricing ---------- */ .price-wrap{ border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden; background:linear-gradient(165deg,rgba(16,23,39,.66),rgba(8,12,21,.5)); box-shadow:0 30px 80px rgba(0,0,0,.5); } .price-note{ display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between; padding:22px 28px;border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(34,230,255,.07),rgba(139,92,255,.07)); } .price-note b{font-size:1.05rem} .price-note span{color:var(--ink-2);font-size:.9rem} table{width:100%;border-collapse:collapse} th,td{padding:17px 28px;text-align:left;font-size:.94rem;border-bottom:1px solid rgba(120,160,220,.09)} th{font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600;background:rgba(255,255,255,.02)} tbody tr{transition:background .35s,box-shadow .35s} tbody tr:hover{background:rgba(34,230,255,.055);box-shadow:0 0 34px rgba(34,230,255,.1) inset} td:first-child{font-weight:600;color:var(--ink)} td .tech{display:inline-block;margin-left:9px;padding:2px 9px;border-radius:100px;font-size:.68rem;font-family:'JetBrains Mono',monospace; letter-spacing:.08em;color:var(--cyan);border:1px solid rgba(34,230,255,.3);background:rgba(34,230,255,.07)} td .p{font-weight:800;font-size:1.06rem;color:#fff;text-shadow:0 0 18px rgba(34,230,255,.6)} td.muted{color:var(--ink-3);font-size:.88rem} .price-foot{padding:20px 28px;color:var(--ink-3);font-size:.85rem;display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between} /* ---------- advantages ---------- */ .adv{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px} .adv-item{position:relative;padding-left:22px} .adv-item::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px; background:linear-gradient(180deg,var(--cyan),var(--violet));box-shadow:0 0 14px rgba(34,230,255,.8)} .adv-item b{display:block;font-size:2.5rem;font-weight:800;letter-spacing:-.04em;line-height:1; background:linear-gradient(120deg,#fff,var(--cyan) 60%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent} .adv-item h4{font-size:1rem;margin:10px 0 6px} .adv-item p{margin:0;color:var(--ink-3);font-size:.88rem;font-weight:300} /* ---------- faq ---------- */ /* Вопросы — нативные
/. Высоту считает сам браузер, поэтому ответ не может оказаться обрезанным; открытие работает даже с выключенными скриптами. Класс .open больше не нужен — состояние берём из атрибута [open], который ставит браузер. */ /* Колонка вопросов занимает всю ширину раздела — и левым, и правым краем вровень с блоками выше и ниже (ряд плиток «Почему», блок контактов). Раньше здесь стоял max-width:900px. Слева раздел от этого не страдал — колонка прижата влево, — а справа оставалась полоса пустоты в 300px: плашки выглядели обрезанными на фоне соседних блоков во всю ширину. Ограничение убрано намеренно. Правило .faq больше не нужно, класс в разметке остаётся как точка привязки для скрипта и проверок. */ .q{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:12px;background:rgba(13,18,31,.45); overflow:hidden;transition:border-color .4s,box-shadow .4s,background .4s} .q[open]{border-color:rgba(34,230,255,.4);box-shadow:0 0 34px rgba(34,230,255,.14);background:rgba(17,24,41,.6)} .q summary{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:21px 24px;background:none;border:0;color:var(--ink); font-size:1.01rem;font-weight:600;text-align:left;cursor:pointer;letter-spacing:-.01em; list-style:none; } /* убираем системный треугольник: свой значок — .plus */ .q summary::-webkit-details-marker{display:none} .q summary::marker{content:''} .q summary:hover{color:#fff} .q summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px;border-radius:var(--r-md)} .q .plus{width:26px;height:26px;flex:none;position:relative;border-radius:50%; border:1px solid rgba(34,230,255,.4);transition:transform .45s var(--ease),box-shadow .45s} .q .plus::before,.q .plus::after{content:'';position:absolute;top:50%;left:50%;background:var(--cyan); border-radius:2px;transform:translate(-50%,-50%);box-shadow:0 0 8px var(--cyan)} .q .plus::before{width:11px;height:1.6px} .q .plus::after{width:1.6px;height:11px} /* Значок: закрыт — «+», открыт — «×». Раньше круг поворачивался на 90° и вертикальная черта пряталась: в итоге оставалась одна вертикальная полоска, которая ничего не означала. Теперь поворот на 45°, а обе черты остаются — «+» чисто превращается в «×». */ .q[open] .plus{transform:rotate(45deg);box-shadow:0 0 20px rgba(34,230,255,.5)} /* ---------- плавное раскрытие ответа ---------- Высоту плашки анимирует САМ БРАУЗЕР, а не скрипт. Раньше здесь была только анимация появления содержимого (opacity + сдвиг), а сама плашка раскрывалась рывком: высоту никто не менял. Замерять её скриптом уже пробовали — max-height по замеру, — и отказались: стоило тексту переразбиться на строки (узкое окно, подгрузка шрифта, масштаб страницы), ответ обрезался. Теперь анимируем блок содержимого
— псевдоэлемент ::details-content. Ключевое слово auto в block-size разрешено через interpolate-size, поэтому высота едет от нуля до «сколько получилось». Замеров и запомненных чисел нет — обрезать нечего по построению. Свойство interpolate-size наследуется, поэтому задаём его на .q. Где ::details-content ещё не поддерживается, правила просто игнорируются: вопрос раскрывается мгновенно, как и раньше. Про закрытие. Содержимое закрытого
браузер убирает сразу, поэтому при закрытии текст пропадает в первый же момент, а плашка после этого плавно ужимается. Пробовал оставить текст видимым до конца ужимания (переход на content-visibility с задержкой) — вышло хуже: дискретное свойство переключается по своим правилам, и если вопрос закрывают вскоре после открытия, текст иногда оставался нарисованным. Мгновенное скрытие предсказуемо, а ужимание плашки всё равно плавное. */ .q{interpolate-size:allow-keywords; /* Кривая для раскрытия — своя. Общая --ease, cubic-bezier(.22,1,.36,1), отдаёт почти весь путь в первой четверти времени: на прозрачности и сдвиге это выглядит бодро, а на высоте читается как рывок с долгим доездом. Раскрытию нужна ровная кривая. */ --ease-faq:cubic-bezier(.4,0,.2,1)} .q::details-content{ block-size:0;overflow:hidden;content-visibility:hidden; transition:block-size .45s var(--ease-faq); } .q[open]::details-content{block-size:auto;content-visibility:visible} /* Отступ под вопросом растёт вместе с плашкой — иначе ответ «дёргается». */ .q summary{transition:padding-bottom .45s var(--ease-faq)} .q .ans{overflow:hidden} .q[open] summary{padding-bottom:12px} /* Внутренняя часть ответа проявляется, пока плашка раздвигается. */ .q[open] .ans{animation:ansIn .45s var(--ease-faq)} @keyframes ansIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .q .ans p{margin:0;padding:0 24px 22px;color:var(--ink-2);font-size:.95rem;font-weight:300} @media (prefers-reduced-motion:reduce){ .q::details-content{transition:none} .q summary{transition:none} .q[open] .ans{animation:none} } /* ---------- contact ---------- */ .contact{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start} .form{ padding:32px;border-radius:var(--r-lg);border:1px solid var(--line); background:linear-gradient(160deg,rgba(18,25,42,.62),rgba(9,13,23,.45)); box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(34,230,255,.05) inset; } .field{margin-bottom:16px;position:relative} .field label{display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;font-weight:600} .field input,.field textarea,.field select{ width:100%;padding:14px 16px;border-radius:13px; background:rgba(6,10,18,.75);border:1px solid var(--line);color:var(--ink); font-family:inherit;font-size:.95rem;transition:border-color .35s,box-shadow .35s,background .35s; } .field textarea{resize:vertical;min-height:104px} .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:rgba(34,230,255,.6);background:rgba(10,16,28,.9); box-shadow:0 0 0 3px rgba(34,230,255,.1),0 0 26px rgba(34,230,255,.2); } .field input::placeholder,.field textarea::placeholder{color:#4d5c76} /* iOS зумит страницу, когда фокус попадает в поле со шрифтом меньше 16px. На тач-устройствах поднимаем размер до 16px: иначе посетитель с телефона тапает по полю, страница прыгает по масштабу и вёрстка уезжает вбок. */ @media (hover:none),(max-width:820px){ .field input,.field textarea,.field select{font-size:16px} } .form-msg{ margin-top:14px;padding:13px 16px;border-radius:12px;font-size:.9rem;display:none; border:1px solid rgba(107,255,184,.35);background:rgba(107,255,184,.08);color:#b6ffdb; box-shadow:0 0 26px rgba(107,255,184,.16); } .form-msg.on{display:block;animation:fadeUp .6s var(--ease)} /* Отказ. Зелёная плашка на ошибке обманывает: «код отправлен» и «код не подошёл» должны различаться цветом, иначе человек читает цвет, а не текст, и уходит ждать письмо, которого не будет. */ .form-msg.bad{ border-color:rgba(255,79,216,.4);background:rgba(255,79,216,.09); color:#ffc0ee;box-shadow:0 0 26px rgba(255,79,216,.14); } /* Ловушка для роботов. Спрятана за краем экрана, а не через display:none: часть ботов пропускает невидимые поля, но заполняет «просто спрятанные». Для человека и для программ чтения с экрана поле недоступно. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .contacts-list{display:grid;gap:14px} .c-item{ display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-md); border:1px solid var(--line);background:rgba(12,17,29,.5); transition:transform .45s var(--ease),border-color .45s,box-shadow .45s; } .c-item:hover{transform:translateX(6px);border-color:rgba(34,230,255,.42);box-shadow:0 0 30px rgba(34,230,255,.16)} .c-item .ci{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center; background:linear-gradient(145deg,rgba(34,230,255,.13),rgba(139,92,255,.15));border:1px solid rgba(34,230,255,.28)} .c-item .ci svg{width:19px;height:19px;stroke:var(--cyan);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 0 7px rgba(34,230,255,.85))} .c-item .k{display:block;font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);font-weight:600} .c-item .v{display:block;font-size:1rem;font-weight:600;margin-top:3px;word-break:break-word} .c-item a.v:hover{color:var(--cyan);text-shadow:0 0 14px rgba(34,230,255,.8)} /* ---------- footer ---------- */ footer{ position:relative;z-index:2;border-top:1px solid var(--line); padding:52px 0 34px;background:linear-gradient(180deg,transparent,rgba(9,14,25,.7)); } .foot-in{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:center} .foot-links{display:flex;gap:22px;flex-wrap:wrap;font-size:.9rem;color:var(--ink-3)} .foot-links a:hover{color:var(--cyan);text-shadow:0 0 12px rgba(34,230,255,.7)} .copy{color:var(--ink-3);font-size:.84rem;margin-top:22px;padding-top:22px;border-top:1px solid rgba(120,160,220,.08); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} /* незаметный вход в панель управления — знак © в подвале */ .copy .admin-dot{color:inherit;text-decoration:none;cursor:default} .copy .admin-dot:hover{color:var(--ink-3)} /* Нижняя строка подвала: надписи и ссылки из панели («Подвал сайта» → «Нижняя строка подвала»). Одна надпись — как было раньше, без ссылки; их может быть и несколько. */ .copy-extra{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline} .copy-extra a:hover{color:var(--cyan);text-shadow:0 0 12px rgba(34,230,255,.7)} /* Надпись, открывающая окно с политикой. Выглядит ссылкой, но это кнопка: ссылкой «открыть окно» не выразить. display здесь не задаём намеренно — иначе перебил бы [hidden], и спрятанная кнопка осталась бы на экране. */ .copy-link{ padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer; text-decoration:underline;text-decoration-color:rgba(120,160,220,.4); text-underline-offset:3px;transition:color .3s,text-decoration-color .3s; } .copy-link:hover{color:var(--cyan);text-decoration-color:currentColor} /* Ссылка на окно, которое пока нечем открыть, спрятана. Два атрибута в селекторе — чтобы правило перебивало оформление .nav-btn и .copy-link: те задают свой цвет и отступы, а показать пустое окно всё равно нельзя. */ [data-modal][hidden]{display:none} /* ---------- bento: что мы изготавливаем ---------- */ .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .bento .b{ position:relative;grid-column:span 1;min-height:200px; padding:26px 24px;border-radius:var(--r-lg); border:1px solid var(--line); background:linear-gradient(155deg,rgba(17,24,40,.62),rgba(8,12,21,.44)); overflow:hidden;isolation:isolate; transition:transform .5s var(--ease),border-color .5s,box-shadow .5s; } .bento .b.b2{grid-column:span 2} .bento .b::before{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .55s; mix-blend-mode:screen; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(34,230,255,.16),transparent 64%); } .bento .b:hover{transform:translateY(-7px);border-color:rgba(34,230,255,.42); box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 42px rgba(34,230,255,.15)} .bento .b:hover::before{opacity:1} .bento .b .bi{ width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px; background:linear-gradient(145deg,rgba(34,230,255,.14),rgba(139,92,255,.16)); border:1px solid rgba(34,230,255,.28); box-shadow:0 0 24px rgba(34,230,255,.14),0 0 18px rgba(34,230,255,.09) inset; transition:transform .5s var(--ease),box-shadow .5s; } .bento .b:hover .bi{transform:translateY(-3px) rotate(-6deg) scale(1.07);box-shadow:0 0 38px rgba(34,230,255,.38)} .bento .b .bi svg{width:22px;height:22px;stroke:var(--cyan);fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(34,230,255,.85))} .bento .b h4{font-size:1.04rem;letter-spacing:-.015em;margin-bottom:7px} .bento .b p{margin:0;color:var(--ink-3);font-size:.88rem;font-weight:300;max-width:34ch} .bento .b .wm{ position:absolute;right:12px;bottom:-18px;line-height:.8;pointer-events:none; font-size:5.6rem;font-weight:800;letter-spacing:-.07em; color:transparent;-webkit-text-stroke:1px rgba(120,170,255,.13); transition:-webkit-text-stroke-color .55s,transform .55s var(--ease); } .bento .b:hover .wm{-webkit-text-stroke-color:rgba(34,230,255,.28);transform:translateY(-6px)} /* ---------- floating actions ---------- Значок связи. Свёрнут — одна круглая кнопка; развёрнут — столбик кнопок над ней. Раскрытие анимируется: каждая кнопка въезжает снизу со своей задержкой, поэтому веер «расходится», а не появляется рывком. Задержки задаёт --i (номер кнопки), его ставит main.js. Раскрытие работает и по наведению, и по нажатию. Наведение — для компьютера; на телефоне его нет, поэтому нажатие обязательно. */ .hub{ position:fixed;right:20px;bottom:20px;z-index:65; display:flex;flex-direction:column;align-items:flex-end;gap:12px; /* Уход в 3D по расписанию владельца: поворот вокруг правого нижнего угла. Прозрачность не трогаем — она схлопнула бы объём у значков. */ transform-origin:100% 100%; transition:transform .62s cubic-bezier(.32,.86,.28,1), visibility 0s; } .hub[data-show="off"]{ transform:perspective(760px) rotateY(74deg) rotateX(-8deg) translate3d(22px,8px,-40px) scale(.72); visibility:hidden; pointer-events:none; transition:transform .62s cubic-bezier(.5,.02,.62,1), visibility 0s .62s; } /* Выключено владельцем — значка на сайте нет совсем. Без этой строки display:flex перебивал бы служебный атрибут hidden, и выключенный значок оставался бы на странице: панель говорила «выключено», а посетитель видел кнопку. */ .hub[hidden]{display:none} /* Столбик способов связи. Свёрнут — нулевая высота и ширина, поэтому он ничего не сдвигает и не перехватывает нажатия. Раньше здесь были только opacity:0 и pointer-events:none. Прозрачные кнопки при этом продолжали занимать своё место: столбик высотой в четыре кнопки поднимал значок связи на 236 px над нижним краем, и он висел в середине экрана, а не в углу. Нулевые размеры убирают это надёжнее всего, потому что не зависят от числа кнопок. */ /* Поле под свечение. Кнопка при наведении светится на 46 px вокруг себя, и обрезка по границе списка срезала этот ореол сверху и слева: у верхней кнопки (Telegram) он упирался в рамку и обрывался по прямой линии. Замер показывал выход ровно 0 — она стоит вплотную к краю. Поэтому список получает прозрачные поля ровно под ореол: 52 px сверху (46 размытия + запас на подъём кнопки на 3 px) и 52 px слева. Поля внутри элемента, а не margin снаружи: они входят в область обрезки overflow:hidden, значит ореол рисуется, а не режется. Снаружи размеры не меняются — поля и max-height вычитаются друг из друга, и веер по-прежнему сворачивается в ноль. Снизу поле тоже нужно, и по той же причине. Раньше здесь стояло 4 px — «список и так прижат к нижнему краю, обрезать нечего». Это было неверно: нижняя кнопка в ряду последняя, её ореол уходит вниз ровно так же, как у верхней уходит вверх, и нижние 46 px срезались. Владелец показал это красной чертой под «Написать на почту». Но список стоит у нижней кромки экрана, и если просто добавить поле снизу, весь веер уедет вверх на те же 52 px. Поэтому список смещён вниз на величину поля (inset-bottom отрицательный) — видимое положение кнопок не меняется, а место под ореол появляется. Справа поля не нужны: подпись выровнена по правому краю, ореол идёт влево и вверх-вниз, и вправо ему выходить некуда. Поля анимируются вместе с размерами. Это не украшение: постоянные поля не давали списку схлопнуться в ноль — свёрнутый оставался 52 на 56 px. Само по себе это безвредно (pointer-events:none, значка не сдвигает), но ноль надёжнее: невидимая рамка ровно ничего не занимает и не может помешать ни при каком числе кнопок. */ .hub-list{ display:flex;flex-direction:column;align-items:flex-end;gap:0; pointer-events:none;overflow:hidden; padding:0; /* Смещение вниз на размер будущего поля. В покое ноль — свёрнутый список стоит ровно там же, где стоял. */ bottom:0; max-height:0;max-width:0; transition:max-height .42s var(--ease),max-width .42s var(--ease), gap .42s var(--ease),padding .42s var(--ease), bottom .42s var(--ease); } /* Потолки включают поля: 52 px сверху и 52 px снизу. Без этой прибавки поля съели бы часть полезной высоты, и на телефоне список обрезался бы на одну кнопку раньше. */ .hub[data-open="1"] .hub-list{ pointer-events:auto;gap:10px; padding:52px 0 52px 52px; /* Отрицательный inset-bottom: список опускается на нижнее поле и возвращает кнопки на прежнее место. Верх списка при этом уезжает вверх на 52 px — но там поле и нужно, оно под ореол верхней кнопки. */ bottom:-52px; max-height:calc(70vh + 104px);max-width:392px; } /* Кнопка способа связи. */ .hub-item{ display:flex;align-items:center;gap:10px; opacity:0;transform:translateY(14px) scale(.7);transform-origin:100% 50%; transition:opacity .32s var(--ease),transform .42s var(--ease); /* Задержка растёт с номером: нижняя кнопка стартует первой. */ transition-delay:calc(var(--i,0) * 45ms); text-decoration:none;color:inherit; /* «Заказать звонок» — это