:root{ --bg:#14161a; --panel:rgba(255,255,255,0.04); --panel-line:rgba(255,255,255,0.14); --text:#FFF; --text-2:#9BA3A8; --text-3:#7C858B; /* 4.8:1 к фону — проходит WCAG AA (было #6E767C = 3.9:1) */ --green:#a6e08a; --blue:#4bb7ff; --aqua:#0affff; --violet:#7f3aef; --purple:#9b7bd9; --orange:#FF9F00; } *{box-sizing:border-box; margin:0; padding:0;} /* Прокрутка "Наверх" анимируется вручную через JS (см. script.js) — CSS scroll-behavior здесь не нужен и мог бы конфликтовать с ней. */ /* overflow-x:clip, не hidden — hidden превращает html/body в scroll-контейнер и ломает position:sticky у .top-contact-bar (сама sticky-панель отменяется, т.к. её ближайший скролл-контейнер — body — не является вьюпортом). clip даёт то же обрезание горизонтального переполнения без этого побочного эффекта. */ html{overflow-x: clip;} html,body{background:var(--bg);} body{min-height:100vh; overflow-x: clip;} .stage{ position:relative; width:100%; /* Раньше здесь был ещё один слой — radial-gradient(ellipse 900px 500px at 85% -5%, ...) — тот же приём, что и у .hero-bg. Процент позиции в radial-gradient считается от РАЗМЕРА САМОГО БОКСА, а .stage — это весь остаток страницы (тысячи px высотой), поэтому "-5%" — это сотни px выше видимого верха .stage, и в кадр попадала только нижняя кромка большого блюра: тонкая светлая полоса поперёк всей ширины. Раньше её не было видно — герой (старый .header-wrap) начинался прямо в .stage и перекрывал эту кромку своим содержимым. После переноса героя за пределы .stage (см. .hero/.hero-spacer выше) верх .stage — это уже "Профиль" на пустом фоне, и полоса читалась как шов между блоками. У героя давно есть свой, куда более богатый (три градиента, курсор- реактивный) вариант этого же эффекта — .hero-bg — так что здесь он просто лишний, а не потерянный. */ background:var(--bg); overflow:hidden; font-family:'Inter', sans-serif; color:var(--text); padding:48px 0 0 0; /* Без fill-mode (был both) — без задержки перед стартом (animation- delay не задан) fill-mode:backwards тут ничего и не давал, а fill-mode:forwards держал бы анимацию "присоединённой" к .stage НАВСЕГДА после конца, даже к её собственному to{}. Проверено экспериментально: пока Animation-объект присоединён (в т.ч. только за счёт fill), браузер отдаёт transform из getComputedStyle как РАЗРЕШЁННУЮ МАТРИЦУ, а не буквальный none, даже когда конечный кадр — to{transform:none}, — то есть сам keyframe тут ни при чём, дело именно в fill. Любая матрица, отличная от "none", делает элемент containing block для position:fixed потомков — тот же баг, что чинили у .hero (см. его комментарий про "Скролл-пин"), только здесь он не проявлялся, пока внутри .stage не было ни одного fixed-элемента. Раз .page-glow (курсорное свечение по всему сайту, ниже) — как раз такой потомок, анимация обязана полностью отвязаться от .stage по завершении: без fill-mode Animation сама открепляется через 0.5s, и transform возвращается к обычному каскадному значению — здесь оно нигде больше не задано, то есть initial, то есть буквально none. Видимо идентично: opacity/transform в момент окончания и так совпадают с тем, что .stage имел бы без анимации вовсе (opacity:1 — initial, transform:none — initial), поэтому открепление незаметно глазу. */ animation:stageIn 0.5s ease-out; } @keyframes stageIn{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} } @keyframes glowPulse{ 0% {opacity:.75; transform:scale(1);} 100%{opacity:1; transform:scale(1.04);} } /* ---- Единый фон всей страницы: блики + свечение под курсором ---- Один слой на весь сайт, а не два по разные стороны первого экрана. Раньше их было два — .hero-bg (три градиента, курсорный на 0.09) в герое и .page-glow (один градиент на 0.05) в .stage — и на границе фон менялся и по насыщенности, и по составу: визуально это читалось как "включился другой фон". Теперь набор градиентов ровно тот, что был у героя, и он же действует до самого низа страницы, поэтому переключаться нечему. Первый градиент — курсорный: --gx/--gy пишет скрипт (см. "Параллакс карточек + курсорное свечение" в script.js) на :root, поэтому слой видит их независимо от того, где сам лежит в DOM. Дефолт 50%/50% — на тач-устройствах и при prefers-reduced-motion (там слушатель mousemove не вешается вовсе) пятно просто стоит по центру, что и было раньше поведением .hero-bg в тех же условиях. Два остальных — статичные декоративные блики, координаты те же, что были у героя. position:fixed + z-index:1: и у .hero, и у .stage непрозрачный background:var(--bg), поэтому слой обязан рисоваться ПОВЕРХ их заливок, но ПОД контентом (у .content и внутренностей героя z-index от 2). Лежит на уровне body — так он не зависит ни от overflow:hidden у .stage, ни от того, создаёт ли она containing block. */ .page-glow{ position:fixed; inset:0; z-index:1; pointer-events:none; background: radial-gradient(700px 700px at var(--gx, 50%) var(--gy, 50%), rgba(75,183,255,0.09), transparent 60%), radial-gradient(ellipse 900px 500px at 85% -5%, rgba(75,183,255,0.10), transparent 60%), radial-gradient(ellipse 820px 480px at 99% 66%, rgba(75,183,255,0.06), transparent 60%); } .content{ position:relative; z-index:2; display:flex; flex-direction:column; max-width:1440px; margin:0 auto; padding:0; } /* === TOP-CONTACT-BAR: липкая панель навигации над всем контентом === Место под меню разделов оставлено в HTML закомментированным — пока его нет, .top-contact-bar__menu не рендерится вовсе. .top-contact-bar__inner переиспользует .content ради общего max-width/padding-каскада; чтобы padding-top/bottom панели не затирались padding-шорткодами .content на отдельных тирах, селектор составной (.top-contact-bar__inner.content) — две специфичности перебивают одну независимо от порядка в файле. */ .top-contact-bar{ position:sticky; top:0; z-index:95; width:100%; background:rgba(20,22,26,0.4); /* rgba-версия --bg (#14161a) — у самой переменной нет полупрозрачного варианта. Было 0.8 — вдвое темнее, чем нужно (панель читалась как полностью залитая, особенно в статике на старте, когда за ней ещё нет проскроленного контента для blur) */ backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--panel-line); } .top-contact-bar__inner.content{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; padding-top:8px; padding-bottom:8px; } .top-contact-bar__brand{ display:flex; align-items:center; gap:12px; } /* Исходник 1118×1722 — без ограничения высоты рендерился в полный пиксельный размер. Ограничиваем только height, width:auto держит пропорции; object-fit:contain страхует на случай, если у файла когда-нибудь появятся встроенные width/height атрибуты. */ .top-contact-bar__logo{ height:60px; width:auto; display:block; object-fit:contain; flex-shrink:0; } .top-contact-bar__name{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:16px; line-height:1.2; text-transform:uppercase; color:var(--text); } .top-contact-bar__contacts{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 4px; } /* Кнопка в шапке компактнее своей базовой версии (.cta-contacts__button — 12px 20px, задумана как крупный самостоятельный CTA в футере "Спасибо за внимание"): в узкой строке навигации рядом с контактами такой же padding делал её непропорционально высокой на фоне соседних 36–44px элементов. Только padding — размер шрифта, цвет, hover остаются от базового правила. */ .top-contact-bar__contacts .cta-contacts__button{ padding:8px 16px; } /* Не .meta-chip — по запросу это просто слова без фона/рамки в покое, подложка (--panel/--panel-line) появляется только по hover/focus, padding не меняется, чтобы не было сдвига контента. */ .top-contact-bar__contact{ display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono', monospace; font-size:16px; line-height:1.4; color:var(--text); text-decoration:none; padding:6px 10px; border-radius:8px; background:transparent; transition:background .2s, border-color .2s, color .2s; } .top-contact-bar__contact:hover, .top-contact-bar__contact:focus-visible{ background:var(--panel); border-color:var(--panel-line); color:var(--text); } .top-contact-bar__contact:focus-visible{ outline:2px solid var(--green); outline-offset:2px; } .top-contact-bar__contact-icon{ display:block; width:16px; height:16px; flex-shrink:0; } .block{margin:48px 0 32px 0;} .block:first-of-type{margin-top:8px;} h2.section{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:28px; line-height:1.2; margin-bottom:40px; margin-top: 20px; color:var(--text); text-transform:uppercase; } /* "Мой опыт" + общий диапазон дат (первая работа — последняя) в одну строку. Тот же приём nowrap+min-width:0, что у .exp-header ниже (там название роли/год) — если места не хватает, сжимается название заголовка, а диапазон дат остаётся компактным и на месте. */ .exp-section-head{ display:flex; flex-wrap:nowrap; align-items:baseline; justify-content:space-between; gap:16px; } .exp-section-head .exp-section-title{ min-width:0; } /* Без чипа (без border/background/padding) — тот же шрифт, что и у самого заголовка (наследуется: family/weight/size/line-height/ uppercase у h2.section заданы на родителе), просто приглушённый цвет вместо белого. Тот же приём, что у "ЕВГЕНИЙ" в hero (.hero-name-2 — та же типографика, что у "БАКАЛА", только color:var(--text-3) вместо var(--text)) — читается как более "прозрачная"/второстепенная версия того же текста на любом разрешении, а не жёстко заданная по брейкпоинтам прозрачность. */ .exp-section-head .exp-range{ flex-shrink:0; color:var(--text-3); } .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; margin-bottom:16px; } .stat{ background:var(--panel); border:1px solid var(--panel-line); border-radius:8px; padding:12px 12px; transition:border-color .25s, background .25s, transform .25s; } .stat:hover{ border-color:rgba(166,224,138,0.35); background:rgba(166,224,138,0.06); transform:translateY(-2px); } .stat:hover .num{color:var(--green);} .stat .num{ font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:28px; color:var(--green); line-height:1.2; transition:color .25s; } .stat .lbl{margin-top:4px; font-size:16px; color:var(--text-2); line-height:1.4;} .exp-list{display:flex; flex-direction:column; gap:12px;} .exp-row{ padding:20px; border:1px solid rgba(255,255,255,0.16); transition:background .3s, border-color .3s; border-radius:8px; position: relative; overflow: hidden; } .exp-row:hover{ background:rgba(255,255,255,0.015); border-color:rgba(255,255,255,0.13); } .exp-row:has(.spoiler-body.open){ border-color: rgba(166,224,138,0.35); } .exp-row:has(.spoiler-body.open)::before{ content:''; position:absolute; inset:0; /* Та же цветовая гамма, что у .photo-glow (бело-голубой → синий → фиолетовый), но на порядок слабее по opacity — там это яркое свечение под фото, здесь только слегка заметный акцент в углу открытой карточки. Радиус вдвое меньше исходного (0/35/55/70 → 0/17/27/35) — на весь размах он перекрывал почти весь блок карточки. */ background: radial-gradient(circle at 0% 0%, rgba(210,225,255,0.10) 0%, rgba(75,183,255,0.06) 17%, rgba(120,100,200,0.05) 27%, transparent 35%); pointer-events:none; z-index:-1; } .exp-top{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; } .exp-info{justify-content:flex-start; gap:12px;} .exp-company{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:21px; line-height:1.2; transition:color .2s; } /* Тот же визуальный рецепт, что у .lvl-wrapper.show .dot.active ("Профессиональные навыки"), но без gate-класса .show — здесь это постоянный маркер, а не reveal-анимация по скроллу. .dot базово задаёт только форму/transition (opacity:0.4, приглушённый фон) — здесь эти значения намеренно перебиваются. */ .exp-company .dot.active{ opacity:1; transform:scale(1); flex-shrink:0; background:var(--green); box-shadow:0 0 6px rgba(166,224,138,0.5); } .exp-years{ font-family:'IBM Plex Mono', monospace; font-size:16px; line-height:1.4; color:var(--text-2); border:1px solid var(--panel-line); border-radius:8px; padding:8px 12px; white-space:nowrap; transition:border-color .2s, color .2s; } .exp-row:hover .exp-years{border-color:var(--green); color:var(--green);} .exp-niche{font-size:16px; line-height:1.4; color:var(--green); margin-top:8px; font-weight:400;} .exp-sub{font-size:18px; color:var(--text-2); margin:12px 0 12px 0; line-height:1.45;} .spoiler-toggle{ display:inline-flex; align-items:center; gap:4px; font-family:'IBM Plex Mono', monospace; font-size:16px; line-height:1.4; color:var(--blue); margin-top:12px; cursor:pointer; border:none; background:none; /* минимальная область нажатия 24px по высоте (WCAG 2.2 Target Size) */ padding:4px 0; min-height:24px; transition:color .2s, gap .2s; user-select:none; } .spoiler-toggle:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; } .spoiler-toggle:hover{color:var(--blue);} .spoiler-toggle svg{ width:14px; height:14px; transition:transform .3s ease; flex-shrink:0; } .spoiler-toggle.open svg{transform:rotate(180deg);} .spoiler-toggle.open{color:var(--blue);} .exp-list-toggle{ display:flex; width:100%; justify-content:center; padding: 16px; margin-bottom: 20px; border-radius: 8px; font-size: 16px; line-height: 1.4; border: 1px solid var(--panel-line); background: rgba(255,255,255,0.02); transition: background .2s, border-color .2s, color .2s; } .exp-list-toggle:hover{ background: rgba(75,183,255,0.06); border-color: rgba(75,183,255,0.35); color: var(--blue); } .spoiler-body{ max-height:0; overflow:hidden; transition:max-height .4s ease, opacity .3s ease; opacity:0; } /* Раньше было 400px — при длинном списке (особенно с переносом строк на узких экранах) контент выше 400px просто обрезался overflow:hidden. Ставим заведомо большой потолок вместо точной высоты по контенту — у этой техники анимации max-height нет способа анимировать к "auto" */ .spoiler-body.open{max-height:3000px; opacity:1;} .spoiler-body-wide.open{max-height:5000px; opacity:1;} .exp-list .spoiler-body .spoiler-inner { border-top: 1px solid var(--panel-line); margin-top: 12px; padding-top: 16px; } .spoiler-list-container{ position: relative; padding-top: 24px; margin-top: 20px; border-top: 1px dashed rgba(255,255,255,0.15); } .spoiler-list-container::before { content: 'Предыдущий опыт'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--bg); padding: 0 16px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; line-height: 1.4; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } .spoiler-inner{padding-top:12px; font-size:16px; color:var(--text-2); line-height:1.45;} .spoiler-inner ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:0;} .exp-list .spoiler-inner ul li{ position:relative; padding-left:20px; padding-bottom:12px; margin-bottom:12px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .exp-list .spoiler-inner ul li:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .exp-list .spoiler-inner ul li::before{ content:''; position:absolute; left:0; top:0.3em; width:14px; height:14px; background-color:var(--green); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E"); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; } .exp-list .spoiler-inner .stack-row { display: grid; grid-template-columns: 400px 1fr; grid-template-areas: "label list"; gap: 16px; } .exp-list .spoiler-inner .stack-label { grid-area: label; max-width: 100%; line-height: 1.4; color: var(--green); } .exp-list .spoiler-inner ul { grid-area: list; min-width: min(300px, 100%); } /* Ключевые показатели и описание направления теперь живут в закрытой карточке — видны сразу, до раскрытия "Подробнее", а не только внутри спойлера "Достижения и результаты" */ .exp-list .stack-proof { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--panel-line); display: flex; flex-direction: column; gap: 12px; } /* Описание направления/продуктов — отдельно от жёстких метрик: стиль взят из .cta-contacts__label (моноширинный, приглушённый, letter-spacing .05em), чтобы не спорить визуально с зелёными цифрами пруфа ниже. Живёт внутри спойлера (видно только по клику "Подробнее"), а не в закрытой карточке — там остаются только метрики */ .exp-list .proof-scope { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--text-3); letter-spacing: .05em; line-height: 1.4; } .exp-list .spoiler-inner > .proof-scope { margin-top: 20px; margin-bottom: 16px; } .exp-list .proof-caption { font-family: 'IBM Plex Mono', monospace; font-size: 16px; line-height: 1.4; margin-bottom: 12px; color: var(--text-3); letter-spacing: .05em; } .exp-list .proof-chips { display: flex; flex-wrap: wrap; margin-bottom: 4px; } /* Без тега-бейджа: значение крупным моноширинным шрифтом + мелкая подпись снизу (как .stat в "Профиле"), пункты разделяет тонкая вертикальная черта — ни фона, ни обводки, ни скругления в пилюлю */ .exp-list .proof-chip { display: flex; flex-direction: column; gap: 4px; padding: 0 20px; border-left: 2px solid rgba(166,224,138,0.35); } .exp-list .proof-chip:first-child { padding-left: 0; border-left: none; } .exp-list .proof-chip .proof-num { font-size: 21px; font-weight: 700; color: var(--green); line-height: 1.2; white-space: nowrap; } .exp-list .proof-chip .proof-lbl { font-size: 14px; color: var(--text-3); line-height: 1.4; white-space: nowrap; } .body-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:32px;} .bar-item{margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--panel-line);} .bar-top{ display:flex; justify-content:space-between; align-items:center; font-size:21px; line-height:1.2; gap:16px; } .lvl-wrapper{ display:flex; align-items:center; flex-shrink:0; } .dot-bar{ display:flex; gap:12px; align-items:center; } .dot{ width:10px; height:10px; border-radius:50%; background:var(--panel-line); opacity:0.4; transform:scale(0.8); transition:opacity .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease; } .lvl-wrapper.show .dot{opacity:1; transform:scale(1);} .lvl-wrapper.show .dot.active{ background: var(--green); box-shadow: 0 0 6px rgba(166,224,138,0.5); } .tag-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; margin-bottom:16px;} .tag{ font-family:'IBM Plex Mono', monospace; font-size:18px; padding:8px 12px; border-radius:16px; background:rgba(155,123,217,0.16); border:1px solid rgba(155,123,217,0.35); color:var(--purple); line-height:1.4; transition:background .2s, border-color .2s, transform .2s, box-shadow .2s; cursor:default; } .tag:hover{ background:rgba(155,123,217,0.28); border-color:rgba(155,123,217,0.55); transform:translateY(-1px); box-shadow:0 2px 8px rgba(155,123,217,0.15); } .tag.niche{background:rgba(166,224,138,0.14); border:1px solid rgba(166,224,138,0.4); color:var(--green);} .tag.niche:hover{ background:rgba(166,224,138,0.26); border-color:rgba(166,224,138,0.6); box-shadow:0 2px 8px rgba(166,224,138,0.15); } .tag.soft{color:var(--text);} .roles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .role-card { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 20px; text-decoration: none; color: var(--text); transition: border-color .25s, background .25s, transform .25s, box-shadow .25s; position: relative; overflow: hidden; } .role-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green); transition: width .25s; } .role-card:hover { transform: translateY(-3px); background: rgba(166,224,138,0.03); border-color: rgba(166,224,138,0.4); box-shadow: 0 8px 20px rgba(166,224,138,0.08); } .role-card:hover::before { width: 5px; } .role-card-top { display: flex; align-items: flex-start; gap: 16px; } .role-icon-wrap { width: 44px; height: 44px; border-radius: 8px; background: rgba(166,224,138,0.1); border: 1px solid rgba(166,224,138,0.3); display: flex; align-items: center; justify-content: center; color: var(--green); flex-shrink: 0; } .role-icon-wrap svg { width: 22px; height: 22px; } .role-text { flex: 1; } .role-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--text); margin-bottom: 8px; } .role-subtitle { font-family: 'IBM Plex Mono', monospace; font-size: 16px; line-height: 1.45; color: var(--text-2); } .role-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--panel-line); font-family: 'IBM Plex Mono', monospace; font-size: 16px; line-height: 1.4; color: var(--green); display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .role-footer svg { width: 16px; height: 16px; transition: transform .2s; } .role-card:hover .role-footer svg { transform: translate(2px,-2px) scale(1.1); } .stack-panel{ background:var(--panel); border:1px solid var(--panel-line); border-radius:12px; padding: 12px 20px; margin-bottom: 20px; } .stack-row{ display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--panel-line); align-items:baseline; flex-wrap:wrap; } .stack-row:last-child{border-bottom:none;} .stack-label{ font-size:16px; line-height:1.4; color:var(--text-2); text-transform:uppercase; letter-spacing:.05em; width:400px; max-width:100%; /* иначе на узких экранах фикс. 400px выходит за пределы карточки */ flex-shrink:0; } .stack-items{ font-size:16px; color:var(--text); line-height:1.45; flex:1; min-width:min(300px, 100%); } /* На планшете и уже — метка и список в колонку, иначе строка ломается */ @media (max-width:899px){ .stack-row{ flex-direction:column; gap:8px; } .stack-label{ width:100%; } } .tool4-block{ position: relative; width: 100%; margin: 48px 0 0 0; box-sizing: border-box; } .tool4-header{ display:flex; justify-content:space-between; align-items:center; margin: 0 0 40px 0; padding-bottom: 12px; border-bottom: 1px solid var(--panel-line); box-sizing: border-box; } .tool4-subtitle{ font-size:18px; line-height:1.45; color:var(--text-2); max-width:700px; margin:0 0 32px 0; } .tool4-header .section { margin-bottom: 0; } .tool4-nav{ display:flex; gap:12px; } .tool4-nav-btn{ width: 40px; height: 40px; border-radius: 8px; background: var(--panel); border: 1px solid var(--panel-line); color: var(--text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .tool4-nav-btn:hover{ border-color: rgba(75,183,255,0.5); color: var(--blue); box-shadow: 0 0 12px rgba(75,183,255,0.2); } .tool4-nav-btn svg{ width: 18px; height: 18px; } .tool4-row{ display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 16px; padding-top: 4px; padding-bottom: 20px; width: 100vw; margin-left: calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); align-items: flex-start; -webkit-overflow-scrolling: touch; /* Было touch-action:pan-x (потом pan-x pan-y) — на части мобильных браузеров даже комбинация двух значений не отпускала вертикальный скролл страницы пальцем поверх карточек. touch-action тут вообще не нужен: overflow-x:auto у самого ряда — это ровно тот случай, который браузер по умолчанию (auto) прекрасно разруливает сам, как с любой другой горизонтально скроллящейся областью на странице. */ touch-action: auto; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; } .tool4-row::-webkit-scrollbar { display: none; } .tool4-row.dragging{ cursor: grabbing; scroll-snap-type: none; } .tool4-row.dragging .tool4-card{ pointer-events: none; } .tool4-card{ flex: 0 0 470px !important; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .3s, background .3s, transform .3s, box-shadow .3s; cursor: pointer; } .tool4-card.tapped .tool4-extra{ /* Было 250px — под однострочный текст. Список из пунктов с отступами и разделителями занимает заметно больше места по высоте, поэтому потолок с большим запасом, как и у "Достижения и результаты" */ max-height: 1000px; opacity: 1; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--panel-line); } .tool4-card.tapped{transform: translateY(-3px);} .tool4-card.c-green.tapped{border-color: rgba(166,224,138,0.4); box-shadow: 0 8px 20px rgba(166,224,138,0.08); background: rgba(166,224,138,0.02);} .tool4-card.c-blue.tapped{border-color: rgba(75,183,255,0.4); box-shadow: 0 8px 20px rgba(75,183,255,0.08); background: rgba(75,183,255,0.02);} .tool4-card.c-purple.tapped{border-color: rgba(155,123,217,0.45); box-shadow: 0 8px 20px rgba(155,123,217,0.08); background: rgba(155,123,217,0.02);} .tool4-card.c-green.tapped .tool4-icon-wrap{background: rgba(166,224,138,0.1); border-color: rgba(166,224,138,0.3); box-shadow: 0 0 12px rgba(166,224,138,0.15);} .tool4-card.c-blue.tapped .tool4-icon-wrap{background: rgba(75,183,255,0.1); border-color: rgba(75,183,255,0.3); box-shadow: 0 0 12px rgba(75,183,255,0.15);} .tool4-card.c-purple.tapped .tool4-icon-wrap{background: rgba(155,123,217,0.1); border-color: rgba(155,123,217,0.35); box-shadow: 0 0 12px rgba(155,123,217,0.15);} .tool4-card.tapped .tool4-img{ filter: grayscale(0.1) brightness(0.85) contrast(1.15); } .tool4-img{ width: 100%; height: 120px; object-fit: cover; filter: grayscale(0.6) brightness(0.65) contrast(1.1); border-bottom: 1px solid var(--panel-line); transition: filter .3s ease; } .tool4-icon-wrap{ width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: -22px 0 0 20px; position: relative; z-index: 2; background: var(--bg); border: 1px solid var(--panel-line); transition: background .3s, border-color .3s, box-shadow .3s; } .tool4-icon-wrap svg{ width: 22px; height: 22px; } .tool4-content{ padding: 12px 20px 20px; flex: 1; display: flex; flex-direction: column; position: relative; } .tool4-card.c-green .tool4-icon-wrap svg{color: var(--green);} .tool4-card.c-blue .tool4-icon-wrap svg{color: var(--blue);} .tool4-card.c-purple .tool4-icon-wrap svg{color: var(--purple);} .tool4-card:focus-visible{ outline: 2px solid var(--green); outline-offset: 3px; } .tool4-card:hover{transform: translateY(-3px);} .tool4-card.c-green:hover{border-color: rgba(166,224,138,0.4); box-shadow: 0 8px 20px rgba(166,224,138,0.08); background: rgba(166,224,138,0.02);} .tool4-card.c-blue:hover{border-color: rgba(75,183,255,0.4); box-shadow: 0 8px 20px rgba(75,183,255,0.08); background: rgba(75,183,255,0.02);} .tool4-card.c-purple:hover{border-color: rgba(155,123,217,0.45); box-shadow: 0 8px 20px rgba(155,123,217,0.08); background: rgba(155,123,217,0.02);} .tool4-card.c-green:hover .tool4-icon-wrap{background: rgba(166,224,138,0.1); border-color: rgba(166,224,138,0.3); box-shadow: 0 0 12px rgba(166,224,138,0.15);} .tool4-card.c-blue:hover .tool4-icon-wrap{background: rgba(75,183,255,0.1); border-color: rgba(75,183,255,0.3); box-shadow: 0 0 12px rgba(75,183,255,0.15);} .tool4-card.c-purple:hover .tool4-icon-wrap{background: rgba(155,123,217,0.1); border-color: rgba(155,123,217,0.35); box-shadow: 0 0 12px rgba(155,123,217,0.15);} .tool4-title-row{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 12px 0 8px; } .tool4-title{ font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 21px; line-height: 1.2; margin: 0; } .tool4-card.c-green .tool4-title{color: var(--green);} .tool4-card.c-blue .tool4-title{color: var(--blue);} .tool4-card.c-purple .tool4-title{color: var(--purple);} .tool4-chevron{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; color: var(--text-2); transition: transform .3s ease, color .3s ease; } .tool4-card.tapped .tool4-chevron{ transform: rotate(180deg); color: var(--text); } .tool4-short{ font-size: 16px; color: var(--text-2); line-height: 1.45; } .tool4-extra{ max-height: 0; opacity: 0; overflow: hidden; font-size: 16px; color: var(--text-2); line-height: 1.45; transition: max-height .4s ease, opacity .3s ease, margin-top .3s ease, padding-top .3s ease; border-top: 1px solid transparent; } /* Список внутри раскрытой карточки — тот же паттерн, что у "Достижения и результаты" в Опыте: без точек-маркеров, разделитель снизу вместо них, последний пункт без отступа/линии */ .tool4-extra ul{ list-style: none; display: flex; flex-direction: column; gap: 0; } .tool4-extra ul li{ padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); } .tool4-extra ul li:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* Смысловая часть пункта ("что делаю для бизнеса") ярче обычного текста карточки — так можно просканировать только её, а конкретные инструменты после двоеточия читать по необходимости */ .tool4-extra ul li strong{ color: var(--text); font-weight: 600; } /* === КОНТАКТЫ === */ .footer-contacts { position: relative; display: flex; flex-direction: column; overflow: visible; /* Тот же верхний отступ, что у .stage в начале страницы */ margin: 48px 0 0 0; min-height: 450px; } .contacts__qr { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; flex: 0 0 auto; } .contacts__qr-code { width: 80px; height: 80px; background: #fff; padding: 4px; border-radius: 8px; } .contacts__qr-code svg { width: 100%; height: 100%; display: block; } .contacts__qr-label { font-family: 'IBM Plex Mono', monospace; font-size: 16px; line-height: 1.4; color: var(--text-3); } /* === ВТОРОЙ CTA-БЛОК КОНТАКТОВ === */ .cta-contacts{ margin: 20px 0 0 0; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 16px; overflow: hidden; } .cta-contacts__top{ display: grid; grid-template-columns: 1fr 1fr; } .cta-contacts__photo-wrap{ position: relative; min-height: 320px; } .cta-contacts__glow{ position: absolute; inset: -20px; background: radial-gradient( circle closest-corner at 50% 30%, rgba(210,225,255,0.5) 0%, rgba(75,183,255,0.18) 40%, rgba(120,100,200,0.35) 65%, transparent 75% ); filter: blur(40px); z-index: 0; pointer-events: none; animation: glowPulse 6s ease-in-out infinite alternate; } .cta-contacts__photo{ position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(.4) contrast(.95) brightness(1); -webkit-mask-image: linear-gradient(180deg, black 30%, transparent 100%), linear-gradient(to bottom, black 40%, transparent 70%); mask-image: linear-gradient(180deg, black 60%, transparent 100%), linear-gradient(to bottom, black 35%, transparent 70%); } .cta-contacts__body{ padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 24px; } .cta-contacts__blurb{ font-size: 18px; line-height: 1.45; color: var(--text-2); } .cta-contacts__actions{ display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .cta-contacts__button{ display: inline-flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--bg); background: var(--green); padding: 12px 20px; border-radius: 8px; text-decoration: none; transition: transform .2s, box-shadow .2s; } .cta-contacts__button:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(166,224,138,0.25); } .cta-contacts__row{ display: flex; flex-wrap: wrap; border-top: 1px solid var(--panel-line); } .cta-contacts__tile{ flex: 1 1 200px; padding: 24px 32px; border-left: 1px solid var(--panel-line); text-decoration: none; display: flex; flex-direction: column; justify-content: center; transition: background .2s; } .cta-contacts__tile:first-child{ border-left: none; } a.cta-contacts__tile:hover{ background: rgba(255,255,255,0.03); } .cta-contacts__name{ font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--text); } .cta-contacts__role{ font-family: 'IBM Plex Mono', monospace; font-size: 16px; line-height: 1.4; color: var(--green); margin-top: 4px; } .cta-contacts__label{ font-family: 'IBM Plex Mono', monospace; font-size: 14px; line-height: 1.4; letter-spacing: .05em; color: var(--text-3); } .cta-contacts__value{ font-family: 'IBM Plex Mono', monospace; font-size: 18px; line-height: 1.45; color: var(--text); margin-top: 4px; word-break: break-word; } /* === БЛОК С ПАДАЮЩИМИ ТЕГАМИ (matter.js) === Базовые правила ОБЯЗАТЕЛЬНО должны стоять выше медиазапросов: у них одинаковая специфичность, и раньше этот блок лежал в конце файла — поэтому все адаптивные значения ниже перебивались базовыми и высота с размером шрифта оставались 450px/18px на любом экране. */ .mjs-app-wrapper { position: relative; top: 0; left: 0; margin: 0; padding: 0; background: var(--bg); color: transparent; font-family: 'IBM Plex Mono', monospace; width: 100%; height: 450px; overflow: hidden; /* вертикальный скролл страницы пальцем по блоку должен работать; горизонтальные жесты остаются перетаскиванию тегов */ touch-action: pan-y; } .mjs-app-wrapper * { user-select: none; } .mjs-app-wrapper canvas{ position: absolute; top: 0; left: 0; } .mjs-word { position: absolute; cursor: grab; font-size: 21px; color: var(--green); /* Зеленый текст */ touch-action: none; } .mjs-word.mjs-highlighted { font-weight: bold; color: var(--purple); /* Фиолетовый текст для выделения */ } /* Теги, не поместившиеся в контейнер по плотности, гасит JS */ .mjs-word.mjs-dropped { display: none; } .mjs-main { position: relative; z-index: 2; } @media (min-width:1920px){ /* Вся типографика этого тира сдвинута на один шаг вверх по шкале (12→14→16→18→21→24→28...→56), а не только "залатан" пол 12px — иначе на таком широком экране 14px-пол упирался бы в соседний "обычный" размер и разница между уровнями стиралась бы. */ .content{max-width:1640px; padding:0;} .stage{padding-top:48px; padding-bottom:20px;} .top-contact-bar__logo{height:60px;} .top-contact-bar__name{font-size:18px;} .top-contact-bar__contact{font-size:16px;} h2.section{font-size:28px; margin-top: 20px;} .stat .num{font-size:40px;} .stat .lbl{font-size:18px;} .stat{padding:10px 12px;} .exp-company{font-size:28px;} .exp-years{font-size:21px;} .exp-niche{font-size:18px;} .exp-sub{font-size:21px;} .tool4-subtitle{font-size:21px;} .spoiler-toggle{font-size:18px;} .exp-list-toggle{font-size:18px;} .spoiler-list-container::before{font-size:18px;} .spoiler-inner{font-size:18px;} .exp-list .proof-caption{font-size:18px;} .exp-list .proof-chip .proof-num{font-size:28px;} .exp-list .proof-chip .proof-lbl{font-size:18px;} .bar-top{font-size:24px;} .tag{font-size:21px; padding:8px 18px;} .role-title { font-size: 24px; } .role-subtitle{font-size:21px;} .role-footer{font-size:18px;} .stack-label{font-size:16px; width: 500px;} .stack-items{font-size:18px;} .tool4-title{font-size:21px;} .tool4-short{font-size:18px;} .tool4-extra{font-size:18px;} .contacts__qr-label{font-size:18px;} .cta-contacts__blurb{font-size:21px;} .cta-contacts__button{font-size:18px;} .cta-contacts__name{font-size:24px;} .cta-contacts__role{font-size:21px;} .cta-contacts__label{font-size:18px;} .cta-contacts__value{font-size:21px;} .resume-actions__btn{font-size:18px;} .block{margin:48px 0 32px 0;} .role-card { padding: 32px; gap: 24px; } .role-icon-wrap { width: 48px; height: 48px; } .role-icon-wrap svg { width: 24px; height: 24px; } .mjs-app-wrapper { height: 440px; } .mjs-word { font-size: 24px; } .footer-contacts { min-height: 520px; margin-top: 48px; } } @media (max-width:1439px){ .content{max-width:1080px; padding:0;} .stage{padding-top:32px;} .footer-contacts{margin-top:32px;} h2.section{font-size:24px; margin-bottom:20px; margin-top:16px;} .stat .num{font-size:24px;} .stat .lbl{font-size:14px;} .stat{padding:8px 8px;} .exp-company{font-size:18px;} .exp-years{font-size:14px;} .exp-sub{font-size:18px;} .exp-niche{font-size:14px;} .bar-top{font-size:18px;} .tag{font-size:16px; padding:8px 12px;} .role-title{font-size:18px;} .exp-list .proof-scope{font-size:14px;} .exp-list .proof-caption{font-size:14px;} .exp-list .proof-chip .proof-num{font-size:18px;} .contacts__qr-label{font-size:14px;} .cta-contacts__name{font-size:16px;} .cta-contacts__label{font-size:14px;} .cta-contacts__value{font-size:16px;} .mjs-word{font-size:18px;} .body-grid{gap:32px;} .block{margin:48px 0 24px 0;} .tool4-card { flex: 0 0 360px !important; } .tool4-title { font-size: 18px; } .tool4-short { font-size: 16px; } .tool4-extra { font-size: 16px; } .tool4-content { padding: 12px 20px 20px; } } @media (max-width:1219px){ .content{max-width:980px; padding:0;} .stage{padding-top:32px;} h2.section{font-size:21px; margin-bottom:20px; margin-top:12px;} .stats{gap:8px;} .stat .num{font-size:21px;} .stat .lbl{font-size:14px; margin-top:4px;} .stat{padding:4px 8px; border-radius:8px;} .exp-company{font-size:16px;} .exp-years{font-size:14px; padding:4px 8px;} .exp-sub{font-size:16px; margin-top:8px;} .exp-niche{font-size:14px; margin-top:8px;} .exp-row{padding:16px;} .bar-top{font-size:16px; margin-bottom:8px;} .bar-item{margin-bottom: 8px; padding-bottom: 8px;} .tag{font-size:14px; padding:4px 8px; border-radius:16px;} .tag-row{gap:8px; margin-top:8px; margin-bottom:12px;} .exp-list .proof-scope{font-size:14px;} .exp-list .proof-caption{font-size:14px;} .exp-list .proof-chip .proof-num{font-size:16px;} .cta-contacts__name{font-size:16px;} .cta-contacts__label{font-size:14px;} .cta-contacts__value{font-size:16px;} .mjs-word{font-size:16px;} .body-grid{gap:24px;} .block{margin:40px 0 24px 0;} .spoiler-toggle{font-size:16px;} .spoiler-inner{font-size:16px;} .tool4-card { flex: 0 0 320px !important; } .tool4-title { font-size: 16px; } .tool4-short { font-size: 16px; } .tool4-extra { font-size: 16px; } .tool4-content { padding: 12px 16px 16px;} .tool4-img { height: 110px; } .tool4-header { margin-bottom: 16px; padding-bottom: 8px; } .role-card { padding: 20px; gap: 16px; } .role-title { font-size: 16px; } /* На 1219px и ниже заголовок и список встают в одну колонку */ .exp-list .spoiler-inner .stack-row { grid-template-columns: 1fr; grid-template-areas: "label" "list"; gap: 12px; } .exp-list .spoiler-inner .stack-label { width: 100%; } .exp-list .spoiler-inner ul { width: 100%; } /* Контакты: компактно в одну строку, без переноса */ .footer-contacts{min-height:360px; margin-top:32px;} .contacts__qr-code{width:50px; height:50px;} .contacts__qr-label{font-size:14px;} .contacts__qr{gap:8px;} .cta-contacts__photo-wrap{min-height:280px;} .cta-contacts__body{padding:32px;} .cta-contacts__blurb{font-size:16px;} .cta-contacts__tile{padding:20px 24px;} } @media (max-width:1079px){ .content{max-width:none; padding:0 20px;} .stage{padding-top:24px;} .top-contact-bar__logo{height:40px;} .top-contact-bar__name{font-size:14px;} .top-contact-bar__contact{padding:4px 8px;} h2.section{font-size:16px; margin-bottom:16px; margin-top:12px;} .stats{grid-template-columns:repeat(4,1fr); gap:4px;} .stat .num{font-size:21px;} .stat .lbl{font-size:14px; margin-top:8px;} .stat{padding:8px 8px; border-radius:8px;} .exp-company{font-size:14px;} .exp-years{font-size:12px; padding:4px 8px;} .exp-sub{font-size:14px; margin-top:8px;} .exp-niche{font-size:12px; margin-top:4px;} .exp-row{padding:16px;} .body-grid{gap:20px;} .bar-top{font-size:14px; margin-bottom:8px;} .bar-item{margin-bottom:12px;} .tag{font-size:14px; padding:4px 8px; border-radius:12px;} .tag-row{gap:6px; margin-top:8px; margin-bottom:12px;} .block{margin:32px 0 20px 0;} .spoiler-toggle{font-size:14px; margin-top:8px;} .spoiler-inner{font-size:12px; padding-top:8px;} .tool4-card { flex: 0 0 300px !important; } .tool4-title { font-size: 16px; } .tool4-short { font-size: 12px; } .tool4-extra { font-size: 12px; } .tool4-content { padding: 12px 16px 16px;} .tool4-img { height: 100px; } .tool4-icon-wrap { width: 40px; height: 40px; margin: -20px 0 0 16px; } .tool4-header { margin-bottom: 16px; padding-bottom: 8px; } .role-card { padding: 20px; gap: 16px; } .role-title { font-size: 14px; } .role-subtitle { font-size: 12px; } .role-icon-wrap { width: 40px; height: 40px; } .role-icon-wrap svg { width: 20px; height: 20px; } /* Контакты: ещё компактнее, всё ещё в одну строку */ .footer-contacts{min-height:310px; margin-top:24px;} .contacts__qr-code{width:42px; height:42px; padding:4px;} .contacts__qr-label{font-size:12px;} .contacts__qr{gap:4px;} .cta-contacts__photo-wrap{min-height:240px;} .cta-contacts__body{padding:24px;} .cta-contacts__blurb{font-size:14px;} /* высота не ниже 44px — это основной CTA и на тач-устройствах он должен быть удобным */ .cta-contacts__button{font-size:14px; padding:12px 16px; min-height:44px;} .cta-contacts__tile{padding:20px 16px; flex-basis:150px;} .cta-contacts__name{font-size:14px;} .cta-contacts__value{font-size:14px;} } @media (max-width:899px){ .stage{padding-top:24px; padding-bottom:16px;} h2.section{font-size:16px; margin-bottom:20px; margin-top:16px;} .stats{grid-template-columns:repeat(2,1fr); gap:4px; margin-bottom:12px;} .stat .num{font-size:18px;} .stat .lbl{font-size:12px;} .stat{padding:4px 8px;} .exp-top{gap:8px;} .exp-info{flex-direction:column; align-items:flex-start; gap:4px;} .exp-company{font-size:14px;} .exp-years{font-size:12px; padding:4px 8px;} .exp-sub{font-size:14px; margin-top:8px;} .exp-niche{font-size:12px; margin-top:8px;} .exp-row{padding:12px;} .bar-top{font-size:12px; margin-bottom:4px;} .bar-item{margin-bottom:12px;} .tag{font-size:12px; padding:4px 8px; border-radius:12px;} .tag-row{gap:8px; margin-top:8px; margin-bottom:8px;} .body-grid{grid-template-columns:1fr; gap:16px;} .block{margin:24px 0 16px 0;} .spoiler-toggle{font-size:12px; margin-top:8px;} .spoiler-inner{font-size:12px; padding-top:8px;} .tool4-card { flex: 0 0 260px !important; } .tool4-img { height: 90px; } .tool4-icon-wrap { width: 36px; height: 36px; margin: -18px 0 0 12px; } .tool4-icon-wrap svg { width: 18px; height: 18px; } .tool4-content { padding: 12px 12px 12px;} .tool4-title { font-size: 14px; } .tool4-short { font-size: 12px; } .tool4-extra { font-size: 12px; } /* на тач-экранах стрелки карусели не уменьшаем ниже 40px */ .tool4-nav-btn svg { width: 16px; height: 16px; } .tool4-header { margin-bottom: 12px; padding-bottom: 4px; } .roles-grid { grid-template-columns: 1fr; } .mjs-app-wrapper { height: 340px; } .mjs-word { font-size: 16px; } /* Контакты: максимально плотно, всё ещё в одну строку (до 680px) */ .footer-contacts{min-height:280px; margin-top:24px;} .contacts__qr-code{width:36px; height:36px; padding:4px;} .contacts__qr-label{font-size:12px;} .contacts__qr{gap:4px;} .cta-contacts__role{font-size:14px;} /* 480–899px: фото и текст остаются рядом (Вариант A — равные колонки), не в столбик */ .cta-contacts__photo-wrap{min-height:260px;} } @media (max-width: 679px){ /* Ключевые показатели (proof-chips) при переносе на 2-ю строку прилипали друг к другу — у flex-wrap не было row-gap, только горизонтальный интервал (padding+border-left у .proof-chip). */ .exp-list .proof-chips{ row-gap:16px; } .exp-list .proof-scope{ font-size:12px; } .tool4-subtitle{ font-size:14px; } /* На мобильных 3 контакта в строку то и дело переносились вразнобой (2+1). Вместо этого — по образцу референса «1a» (icon-badge из .contacts-mini, не большая сетка label+value) — контакты становятся компактными квадратными плитками только с иконкой, без текста; текст остаётся в DOM для доступности (sr-only + aria-label на самой ссылке — избыточно, но надёжно). */ .top-contact-bar__contact{ width:36px; height:36px; padding:0; justify-content:center; background:var(--panel); border-color:var(--panel-line); } .top-contact-bar__contact-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } /* Точечное исключение из правила "line-height задаётся один раз на базовом тире и не переопределяется по брейкпоинтам" (см. design- system.md) — по запросу именно этот список должен стать плотнее на узких экранах, а не просто унаследовать общий Main/body-role 1.45. */ .exp-list .spoiler-inner li{ line-height:1.3; } /* Теги: шрифт ~в 1.5 раза меньше базовых 18px, но не ниже 13px — ниже этого их уже неудобно и читать, и хватать пальцем */ .mjs-app-wrapper { height: 330px; } .mjs-word { font-size: 14px; } .exp-company{ font-size: 16px; } /* Год раньше уходил на новую строку, как только название роли не помещалось (flex-wrap:wrap у .exp-top по умолчанию переносит ЦЕЛЫЕ элементы). Теперь ряд не переносится сам (flex-wrap:nowrap), а название роли — единственное, что сжимается и переносит СВОЙ текст внутри себя (min-width:0 разрешает это), год остаётся компактным и на месте; если места хватает — оба на одной строке. */ .exp-header{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: 8px; } .exp-header .exp-company{ min-width: 0; flex: 1 1 auto; } .exp-header .exp-years{ flex-shrink: 0; } /* Пол читаемости для основного текста на мобильных экранах — не ниже 14px (теги/года/лейблы-подписи вроде .exp-niche, .tag, .proof-lbl сюда не входят, им можно оставаться мельче как вспомогательным). Без этого часть контента проседала до 12px в диапазоне 480-679px, унаследовав размер от планшетного тира (900-1079px). .spoiler-inner (единственное применение — "Достижения и результаты") сюда больше НЕ входит: по запросу список должен остаться на 12px во всём диапазоне ≤679px, а не подскакивать обратно на 14px — намеренное исключение из этого пола. .stack-label/.stack-items ("Инструменты и стек", таблица технологий) добавлены сюда отдельно — их вообще не было ни в одном полу до сих пор, они держали фиксированные 16px на всех тирах ≤899px. По фидбэку на узких экранах это делало их визуально самым крупным текстом на странице — крупнее заголовков разделов рядом. */ .role-subtitle, .tool4-short, .tool4-extra, .cta-contacts__role, .cta-contacts__button, .cta-contacts__value, .stack-label, .stack-items{ font-size: 14px; } .footer-contacts { min-height: auto;} .contacts__qr { flex-shrink: 0; } .contacts__qr-code { width: 46px; height: 46px; } .contacts__qr-label { display: none; } .cta-contacts{ margin-top: 32px; border-radius: 12px; } /* Всё ещё рядом (фото+текст) вплоть до 480px — только столбец с контактами ниже становится вертикальным */ .cta-contacts__photo-wrap{ min-height: 230px; } .cta-contacts__body{ padding: 24px; gap: 16px; } .cta-contacts__blurb{ font-size: 14px; max-width: 100%; } .cta-contacts__row{ flex-direction: column; } .cta-contacts__tile{ flex-basis: auto; border-left: none; border-top: 1px solid var(--panel-line); padding: 16px 24px; } .cta-contacts__tile:first-child{ border-top: none; } } /* ≤479px — самые узкие телефоны. Раньше этот порог стоял на 539px, и 480-539px получали урезанные значения без реальной необходимости — 470px "лишней" ширины хватает на то, чтобы выглядеть как 540-679px (see тир ниже). Пересчитано отдельно от 480-679, а не просто скопировано с 539px: там разброс уже не помещался. */ @media (max-width:479px){ .top-contact-bar__logo{height:32px;} .top-contact-bar__contact{font-size:12px;} /* Ниже 480px даже 12-13px читается с трудом — держим пол 14px для содержательного текста и 12px для плашек/сносок/уточнений */ .exp-company{ font-size: 16px; } .exp-sub, .bar-top span, .role-subtitle, .cta-contacts__role, .cta-contacts__value, .cta-contacts__button, .cta-contacts__blurb, .stack-label, .stack-items{ font-size: 14px; } /* .exp-list .spoiler-inner li сюда намеренно НЕ входит: по запросу список "Достижения и результаты" должен оставаться на 12px и ниже 680px, а не подскакивать обратно к полу 14px — исключение из правила выше специально для этого элемента. Работает через каскад .spoiler-inner{font-size:12px} (≤1079px), а не через отдельное правило здесь. */ .stat .lbl, .tag, .exp-years, .exp-niche{ font-size: 14px; } .tool4-card { flex: 0 0 85% !important; } .tool4-img { height: 80px; } .tool4-title { font-size: 16px; } /* По запросу убран ≤479px — падающие теги на Matter.js грузили мобильный CPU/батарею сильнее, чем оправдано для декоративного виджета. Прячем через :has() саму обёртку .block (не только .mjs-app-wrapper внутри неё) — иначе пустой .block с одним только margin остался бы висеть как пустой зазор. JS-часть (checkSize() в script.js) отдельно проверяет window.innerWidth и гасит уже запущенный движок (destroyScene()), если пользователя ресайзнуло через границу 480px после старта — CSS-скрытия самого по себе для этого недостаточно, т.к. видимость и вычисления физики у Matter.js не связаны напрямую. */ .block:has(.mjs-app-wrapper){ display: none; } /* Ниже 480px фото и текст уже не помещаются рядом — переходят в столбик */ .cta-contacts__top{ grid-template-columns: 1fr; } .cta-contacts__photo-wrap{ min-height: 200px; } .exp-list .proof-chip .proof-num{ font-size: 16px; } } /* ≤399 — "Ключевые показатели" (proof-chips), по запросу. Раньше каждая плашка была колонкой (num над lbl), а плашки сами шли в ряд через flex-wrap — на узких телефонах это давало то шаткую раскладку "то 2, то 3 в ряд" (что и лечил отдельный частный случай на ≤340 ниже — replaced целиком этим правилом, а не рядом с ним: иначе два блока конкурировали бы за одни и те же селекторы на самых узких экранах, где оба диапазона пересекаются), то просто тесно. Теперь каждый показатель — ОДНА строка (num и lbl рядом через gap), а сами показатели идут по одному в столбик, никогда не пытаясь встать по несколько в ряд. */ @media (max-width:399px){ .exp-list .proof-chips{ display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; } .exp-list .proof-chip{ flex-direction: row; align-items: baseline; gap: 8px; padding: 0; border-left: none; } /* min-width:0 — иначе flex-item по умолчанию не сжимается ниже ширины своего контента, и длинная подпись (напр. "органический тарфик") вытолкнула бы строку за край контейнера вместо переноса. */ .exp-list .proof-chip .proof-lbl{ white-space: normal; min-width: 0; } } @media (max-width:340px){ .role-footer{font-size: 14px;} } /* === RESUMEACTIONS: PDF / ПЕЧАТЬ / ПОДЕЛИТЬСЯ (плавающая панель) === Наследует шрифты, цвета (CSS-переменные) и радиусы скругления страницы — собственной палитры/шрифтов у виджета нет. */ .resume-actions{ --fab-gap: 24px; position: fixed; left: 50%; right: auto; bottom: 10px; transform: translateX(-50%); /* 96, не 90 — выше .top-contact-bar (95). На ≥1220px недокнутое положение панели (top:24px; right:20px, см. ниже) физически лежит под липкой навигацией; раньше панель пряталась за ней до скролла >500px (когда JS переводит её вниз). Поверх — проще и надёжнее, чем сдвигать стартовую позицию под высоту бара. */ z-index: 96; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 0; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(0,0,0,0.35); } .resume-actions__btn{ display: inline-flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--text); background: transparent; border: 1px solid transparent; padding: 12px 16px; border-radius: 8px; cursor: pointer; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease; } .resume-actions__btn svg{ width: 17px; height: 17px; flex-shrink: 0; } .resume-actions__btn:hover{ transform: translateY(-2px); border-color: rgba(166,224,138,0.4); background: rgba(166,224,138,0.06); color: var(--green); } .resume-actions__btn:active{ transform: translateY(0); } .resume-actions__btn:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; } .resume-actions__btn--copied{ border-color: rgba(166,224,138,0.5); background: rgba(166,224,138,0.1); color: var(--green); } /* Ниже 1080px — панель без подписей, только иконки (title показывает подсказку при наведении) */ @media (max-width:1079px){ .resume-actions{ --fab-gap: 16px; gap: 4px; padding: 4px; bottom: 8px;} .resume-actions__btn{ padding: 12px; } .resume-actions__label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } } @media (min-width:480px) and (max-width:679px){ .resume-actions{ bottom: 10px;} } /* От 1220px и выше — вертикально, иконками, над кнопкой "Наверх" (тот же правый угол) */ @media (min-width:1220px){ /* Вертикальная панель у правого края. В начале страницы висит в правом верхнем углу; как только появляется кнопка "Наверх" — плавно съезжает вниз, вставая ровно над этой кнопкой. Обратный скролл так же плавно возвращает её наверх. Якорь всегда один и тот же (top), движение — через transform, чтобы не анимировать переход top <-> bottom (браузер это не умеет). Саму анимацию делает JS (script.js, requestAnimationFrame) — он же на каждом кадре выставляет inline transform, перекрывая значение .is-docked ниже. Оно остаётся как мгновенный fallback на случай, если JS отключён. */ .resume-actions{ left: auto; right: 20px; top: 24px; bottom: auto; transform: translateY(0); will-change: transform; flex-direction: column; gap: 4px; padding: 8px; } .resume-actions.is-docked{ transform: translateY(calc(100vh - 108px - 100%)); } .resume-actions__btn{ padding: 12px; } .resume-actions__label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } } /* === ПОДВАЛ СТРАНИЦЫ (копирайт) === Независим от .block: свои отступы и своя логика по брейкпоинтам. Floating Action Bar и "Наверх" — fixed и лежат ПОВЕРХ подвала, на одном с ним уровне. Так и задумано: это убирает и большой зазор внизу страницы, и наложение бара на блок контактов. Место под бар НЕ резервируем — кроме экранов уже 480px, где бар по центру закрывал бы половину строки копирайта: там подвал отводит полосу ровно в высоту бара. */ .page-footer{ display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 40px; padding-bottom: 32px; } @media (min-width:1920px){ .page-footer{ margin-top: 48px; padding-bottom: 40px; } } @media (max-width:1439px){ .page-footer{ margin-top: 48px; padding-bottom: 32px; } } @media (max-width:1219px){ .page-footer{ margin-top: 40px; padding-bottom: 32px; } } @media (max-width:1079px){ .page-footer{ margin-top: 32px; padding-bottom: 24px; } } @media (max-width:899px){ .page-footer{ padding-bottom: 16px; } } @media (max-width:679px){ .page-footer{ padding-bottom: 16px; } } /* Уже 480px строка копирайта короче ширины бара — отводим полосу под него: 16px отступ снизу + 53px высота бара + 8px просвет */ @media (max-width:479px){ .page-footer{ margin-top: 20px; padding-bottom: 77px; } } /* === КНОПКА "НАВЕРХ" === */ .back-to-top{ position: fixed; bottom: 8px; right: 24px; z-index: 100; width: 50px; height: 50px; border-radius: 25%; background: var(--panel); backdrop-filter: blur(14px); border: 1px solid var(--panel-line); color: var(--text); display: flex; align-items: center; justify-content: center; text-decoration: none; opacity: 0; pointer-events: none; transform: translateY(14px) scale(.9); /* появление/скрытие — плавно, с лёгким выездом снизу */ transition: opacity .32s cubic-bezier(.22,.61,.36,1), transform .32s cubic-bezier(.22,.61,.36,1), border-color .25s ease, color .25s ease, box-shadow .25s ease; will-change: opacity, transform; } .back-to-top.visible{ opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .back-to-top:hover{ border-color: rgba(166,224,138,0.5); color: var(--green); box-shadow: 0 6px 16px rgba(166,224,138,0.15); } .back-to-top:focus-visible{ outline: 2px solid var(--green); outline-offset: 3px; } .back-to-top:active{ transform: translateY(0) scale(.94); } .back-to-top svg{ width: 20px; height: 20px; } @media (max-width:479px){ /* 44x44 — минимальный размер тач-таргета, уменьшаем только отступы от края */ .back-to-top{ right: 14px; } .back-to-top svg{ width: 18px; height: 18px; } } /* === ПЕЧАТЬ / PDF: раскрываем скрытый контент, убираем интерактивные элементы === */ @media print{ .back-to-top, .resume-actions, .tool4-nav, .spoiler-toggle, #stackToggleOpen, #stackToggleClose{ display: none !important; } .spoiler-body, .tool4-extra, .spoiler-body-wide, .stack-panel{ max-height: none !important; opacity: 1 !important; overflow: visible !important; } .tool4-row{ overflow-x: visible !important; flex-wrap: wrap !important; width: auto !important; margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .tool4-card{ flex: 0 0 320px !important; } .mjs-app-wrapper{ display: none !important; } } /* ===================== ПЕРВЫЙ ЭКРАН (HERO) ===================== Перенесено из sandbox-hero-brutal-dots.html. Ниже — только те правила, которых в этом файле ещё не было: вся шапка (.top-contact-bar*), кнопка (.cta-contacts__button), :root-токены и ресет в проде уже есть и переиспользуются как есть. --gutter — единственный новый токен. Он повторяет каскад .content (1640/1440/1080/980, ниже 1080 — 20px), поэтому левый край "БАКАЛА" встаёт ровно под левый край "Профиль" и остальных секций. Проценты считаются от .hero, а она всегда во всю ширину вьюпорта — та же точка отсчёта, что у центрированной .content. */ :root{ --gutter: max(0px, calc((100% - 1440px) / 2)); } @media (min-width:1920px){ :root{ --gutter: calc((100% - 1640px) / 2); } } @media (max-width:1439px){ :root{ --gutter: calc((100% - 1080px) / 2); } } @media (max-width:1219px){ :root{ --gutter: calc((100% - 980px) / 2); } } @media (max-width:1079px){ :root{ --gutter: 20px; } } /* ===================== HERO ===================== */ /* height:100vh (не 100%): раньше высота бралась от родителя (body), который был жёстко заперт в один экран без скролла. Герой — самостоятельный полноэкранный блок независимо от того, что идёт после него (на живом сайте — "Мой опыт" и другие секции, здесь — тестовая заглушка ниже для проверки скролл-эффекта разлёта букв). */ .hero{ position:relative; width:100%; height:100vh; overflow:hidden; /* Сам градиент теперь не здесь — см. .hero-bg ниже. Здесь остаётся только сплошной --bg: тот же цвет, что и у спейсера/body под героем, поэтому даже когда .hero-bg (fixed) когда-нибудь уберут, шва по цвету всё равно не будет — обе заливки совпадают. */ background:var(--bg); } @supports (height:100dvh){ .hero{ height:100dvh; } } /* Резерв под уход закреплённой композиции — см. подробный комментарий у самого элемента в index.html и у measure()/apply() в script.js. Высоту в px всегда выставляет JS инлайном; здесь только цвет (тот же --bg, что у .hero и .stage — переход между тремя блоками не должен читаться как стык) и запрет на горизонтальный скролл от самого факта наличия блока. */ .hero-spacer{ width:100%; background:var(--bg); } /* Фон героя раньше жил здесь отдельным слоем .hero-bg. Теперь это общий для всей страницы .page-glow (см. его правило в начале файла): держать два разных слоя с разными градиентами по разные стороны первого экрана было прямой причиной того, что фон "переключался" на границе — см. комментарий там же. */ /* ---- Разлёт букв по скроллу (перенесено из демо-сценария "Time flies") ---- Каждая буква "БАКАЛА"/"ЕВГЕНИЙ" — отдельный inline-block span со своей случайной скоростью. transform требует inline-block (на строчных элементах transform не работает), поэтому только это свойство и нужно явно — цвет/шрифт/uppercase уже наследуются от .hero-name-1/.hero-name-2. */ .hero-name-1 span, .hero-name-2 span{ display:inline-block; } /* ---- Интерактивные карточки вокруг портрета (z-index:6) ---- Стеклянные плашки поверх фото (6 > 4) и поверх «ЕВГЕНИЙ» (6 > 2) — так и задумано в исходнике: они «плавают» над композицией. Каждая уезжает за курсором на свою величину (--shift), разная сила сдвига и даёт ощущение глубины. --mx/--my (диапазон -1..1) ставит скрипт внизу страницы; фолбэк 0 — карточки просто стоят на месте. Отступление от исходника: типографика приведена к шкале проекта (13px → 14px) и к токенам. Заливка/бордер — по запросу возвращены к исходному стилю: тот же нейтральный "стеклянный" вид, что и у .hero-tag (ряд тегов сразу под меню навигации) — background:var(--panel), т.е. та же rgba(255,255,255, 0.04), а не цветной акцент (пятицветную версию, где у каждой карточки был свой --plate-rgb, отменили — все пять снова выглядят одинаково, разница только в контенте). Бордер — единственное отступление от .hero-tag: там он еле заметен (var(--panel-line), альфа 0.14), здесь — выраженный (0.4), по запросу, чтобы явно читаться и на фоне героя, и на фоне того, что под карточкой (фото, «ЕВГЕНИЙ», буквы «БАКАЛА»). Заголовок и число — --text (белый), --plate__text — --text-2 (серый), как и раньше. */ /* position/top/left/opacity управляются скриптом внизу страницы напрямую (инлайн-стилями, каждый кадр скролла) — плашки появляются только при скролле, влетая каждая со своей стороны и приходя в конечную точку/ непрозрачность ровно к моменту, когда фото останавливается. position здесь смысла не имеет писать в CSS: скрипт всегда выставляет fixed сам, как только включает сценарий (см. "Скролл-пин" внизу страницы — там же объяснение, почему именно fixed, а не absolute, как было раньше). opacity:0 по умолчанию — до первого кадра скрипта (и если он выключен шириной экрана — тогда плашки и так display:none) плашек не видно. transform (параллакс за курсором, --mx/--my) — независимое свойство, скрипт его не трогает, оба складываются без конфликта. */ /* На десктопе (≥1220) полностью прозрачна для раскладки — display:contents убирает у неё собственный бокс, фото и .arc-wrapper (дуга-карусель) ведут себя так, будто лежат прямо в .hero, как и было до появления этой обёртки. На ≤1219 (см. адаптив) становится реальным position:relative-боксом размером с фото — точкой отсчёта для position:absolute у карточек. */ .hero-photo-cluster{ display:contents; } /* .arc-runway — обёртка вокруг кластера. Осталась от варианта со sticky, где давала кластеру "разгон" на прилипание и её высоту каждый resize считал JS. Сейчас пин сделан на position:fixed, высоту ей никто не задаёт; бокс сохранён потому, что на ≤1219 несёт order:6 и grid-area:photo (см. адаптив ниже) — то есть держит место фото-кластера в колонке героя. На десктопе прозрачна для раскладки. */ .arc-runway{ display:contents; } /* ===================== ПОДСКАЗКА "СКРОЛЛ" ВНИЗУ ГЕРОЯ ===================== Раньше была завязана на animation-timeline:scroll(nearest block) — той же переменной, что крутила всю страницу. Теперь у дуги свой собственный scroll-driver (см. .arc-track ниже), общего с героем больше нет, поэтому подсказка — простая статичная иконка с самостоятельным SVG-бампом, привязанная к низу героя, а не к скроллу всей страницы. */ .hero-scroll-hint{ /* top и position:fixed выставляет скролл-пин в