/* ===== pinkmoneyx — токены ===== */ @property --a { syntax: ""; inherits: false; initial-value: 0deg; } :root { color-scheme: dark; --ink: #0D0D0D; /* Smoky Black */ --plum: #231540; /* Dark Purple */ --indigo: #311F73; /* Persian Indigo */ --violet: #644BBF; /* Plump Purple */ --lav: #B78DF2; /* Bright Lavender */ --text: #EEE8FA; --muted: #A69BC4; --dim: #6F6590; --line: rgba(183, 141, 242, .16); --glass: rgba(255, 255, 255, .055); --display: "Fraunces", "Onest", Georgia, serif; --body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --wrap: 1240px; --gut: clamp(16px, 4vw, 40px); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; background: var(--ink); } body { overflow-anchor: none; } /* браузер не «подправляет» прокрутку при сдвигах — без дрожи */ /* своя полоса прокрутки (включает app.js на компьютере): родную скрываем */ html.smooth { scrollbar-width: none; } html.smooth::-webkit-scrollbar { display: none; } .sbar { position: fixed; z-index: 120; top: 0; right: 0; width: 14px; height: 100vh; opacity: 0; transition: opacity .5s; } .sbar.show, .sbar:hover, .sbar.drag { opacity: 1; } .sbar.none { display: none; } .sbar-thumb { position: absolute; top: 0; right: 3px; width: 6px; border-radius: 99px; will-change: transform; cursor: grab; background: linear-gradient(180deg, rgba(205, 184, 248, .75), rgba(124, 92, 255, .7)); box-shadow: 0 0 10px rgba(124, 92, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .4); transition: width .25s, right .25s, background .3s; } .sbar:hover .sbar-thumb, .sbar.drag .sbar-thumb { width: 8px; right: 3px; background: linear-gradient(180deg, #e2d6ff, #8f72ff); } .sbar.drag .sbar-thumb { cursor: grabbing; } body { margin: 0; min-height: 100vh; overflow-x: clip; background: var(--ink); color: var(--text); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } h1, h2, h3, h4, p, ul, dl, dd { margin: 0; } ul { padding: 0; list-style: none; } h2, h3 { text-wrap: balance; } ::selection { background: var(--lav); color: var(--ink); } :focus-visible { outline: 2px solid var(--lav); outline-offset: 3px; border-radius: 10px; } [hidden] { display: none !important; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); } .mono { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } /* ===== фон: аврора, сетка, зерно ===== */ .bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--ink); pointer-events: none; } .blob { position: absolute; border-radius: 50%; } .b1 { width: 58vmax; height: 58vmax; left: -18vmax; top: -22vmax; background: radial-gradient(closest-side, var(--indigo), transparent); opacity: .9; } .b2 { width: 44vmax; height: 44vmax; right: -16vmax; top: 18vh; background: radial-gradient(closest-side, var(--violet), transparent); opacity: .38; } .b3 { width: 60vmax; height: 50vmax; left: 10vw; bottom: -30vmax; background: radial-gradient(closest-side, var(--plum), transparent); opacity: .9; } @keyframes drift1 { to { transform: translate(14vw, 10vh) scale(1.15); } } @keyframes drift2 { to { transform: translate(-12vw, 24vh) scale(.85); } } .bg-grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(183, 141, 242, .16) 1px, transparent 1.4px); background-size: 28px 28px; mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 70%); } .bg::after { content: ""; position: absolute; inset: -10%; opacity: .05; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @keyframes grain { 0% { transform: translate(0, 0) } 33% { transform: translate(-3%, 2%) } 66% { transform: translate(2%, -3%) } 100% { transform: translate(-1%, 1%) } } /* курсорная подсветка */ .glow-cursor { position: fixed; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(closest-side, rgba(183, 141, 242, .16), rgba(100, 75, 191, .06) 50%, transparent); transform: translate3d(var(--x, -999px), var(--y, -999px), 0); transition: opacity .4s; } /* курсор: светящаяся искра-указатель + стеклянное кольцо с бегущим бликом, тянется за движением */ html.has-cur, html.has-cur * { cursor: none !important; } @property --spin { syntax: ""; inherits: false; initial-value: 0deg; } .cur-ring, .cur-dot { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; opacity: 0; transition: opacity .3s; } .cur-ring.on, .cur-dot.on { opacity: 1; } .cur-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e6d8ff 45%, var(--lav)); box-shadow: 0 0 6px 1px rgba(205, 184, 248, .95), 0 0 18px 4px rgba(124, 92, 255, .55); transition: opacity .3s, scale .35s var(--spring); } .cur-dot.is-hover { scale: .8; } .cur-dot.is-grab { scale: 1.3; } .cur-shape { --k: 1; position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; transform: rotate(var(--a, 0rad)) scale(calc(var(--sx, 1) * var(--k)), calc(var(--sy, 1) * var(--k))); transition: --k .45s var(--spring), background .35s, box-shadow .35s; background: radial-gradient(circle at 50% 50%, rgba(124, 92, 255, 0) 55%, rgba(124, 92, 255, .1)); box-shadow: 0 0 22px -4px rgba(124, 92, 255, .55); } /* тонкий ободок: бегущий светлый блик по кругу */ .cur-shape::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: conic-gradient(rgba(183, 141, 242, .25), #fff 12%, rgba(183, 141, 242, .9) 22%, rgba(100, 75, 191, .35) 50%, rgba(183, 141, 242, .25)); -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 exclude, linear-gradient(#000 0 0); animation: curSpin 2.6s linear infinite; /* крутим само кольцо (видеокарта), а не градиент — без перерисовки каждый кадр */ } @keyframes curSpin { to { transform: rotate(360deg); } } @property --k { syntax: ""; inherits: false; initial-value: 1; } /* над кнопкой: кольцо просто становится крупнее и ярче — без заливки и размытия, текст под ним всегда виден */ .cur-ring.is-hover .cur-shape { --k: 1.45; background: none; box-shadow: 0 0 22px -2px rgba(124, 92, 255, .9); } .cur-ring.is-hover .cur-shape::before { padding: 1.6px; animation-duration: 1.4s; } .cur-ring.is-grab .cur-shape { --k: 2; background: radial-gradient(circle, rgba(124, 92, 255, .14), rgba(124, 92, 255, .04) 70%); } .cur-ring.is-grab .cur-shape::before { animation-duration: 1.2s; } .cur-ring.is-down .cur-shape { --k: .75; } .cur-ring.is-hover.is-down .cur-shape { --k: 1.3; } .cur-label { position: absolute; left: 0; top: 46px; translate: -50% 0; font: 500 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--lav); text-shadow: 0 0 10px rgba(124, 92, 255, .9); opacity: 0; scale: .8; transition: opacity .3s, scale .4s var(--spring); } .cur-ring.is-grab .cur-label { opacity: 1; scale: 1; } @media (pointer: coarse) { .glow-cursor, .cur-ring, .cur-dot { display: none; } } /* ===== жидкое стекло ===== */ .lg { position: relative; isolation: isolate; background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, .09), transparent 45%), linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .018) 42%, rgba(183, 141, 242, .05)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .04), inset 0 0 30px rgba(183, 141, 242, .06), 0 30px 60px -28px rgba(0, 0, 0, .7); } .lg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2; background: linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .06) 32%, rgba(183, 141, 242, .08) 60%, rgba(183, 141, 242, .45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* ===== кнопки ===== */ /* одна анимация на всех: мягкая индиго-подсветка изнутри, светящаяся кромка, иконка чуть «взлетает» */ .btn { --h: 54px; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 26px; border-radius: 999px; font: 600 15px/1 var(--body); letter-spacing: .01em; white-space: nowrap; transition: transform .5s var(--spring), box-shadow .45s var(--ease), color .3s; } .btn > * { position: relative; z-index: 2; } .btn > svg:not(.arrow) { translate: 0 1px; } /* оптически: строчные буквы сидят ниже значка */ .btn svg { width: 17px; height: 17px; flex: none; transition: transform .55s var(--spring), color .3s; } .btn .liquid { display: none; } .btn::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(160deg, rgba(164, 139, 255, .42), rgba(90, 60, 200, .3)); opacity: 0; transition: opacity .45s var(--ease); } .btn:hover::after, .btn:focus-visible::after { opacity: 1; } .btn:hover svg:not(.arrow) { transform: translate(2px, -2px) rotate(-10deg); } .btn:active { transform: scale(.97); } @keyframes spin { to { transform: rotate(360deg); } } .btn-primary { color: #fff; background: linear-gradient(135deg, #8f72ff 0%, var(--violet) 55%, var(--indigo) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(183, 141, 242, .35), 0 12px 34px -12px rgba(124, 92, 255, .85); } .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(183, 141, 242, .65), 0 14px 40px -10px rgba(124, 92, 255, 1); } .btn-ghost { color: var(--text); background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(183, 141, 242, .22); } .btn-ghost::after { background: linear-gradient(160deg, rgba(124, 92, 255, .42), rgba(70, 45, 170, .5)); } .btn-ghost:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(183, 141, 242, .55), 0 8px 28px -8px rgba(124, 92, 255, .9); } .btn-ghost svg { color: var(--lav); } .btn-ghost:hover svg { color: #fff; } @keyframes rot { to { --a: 360deg; } } .btn .arrow { transition: transform .5s var(--spring), color .3s; } .btn:hover .arrow { transform: translateX(4px); } /* ===== шапка ===== */ .hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; padding-block: 10px; } .hdr-bar { position: relative; display: flex; align-items: center; gap: 20px; --in: 8px; /* отступ кнопок от края шапки — одинаковый сверху, снизу и справа */ height: 60px; padding: 0 var(--in) 0 18px; border-radius: 999px; background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), rgba(183, 141, 242, .08), transparent 45%), linear-gradient(160deg, rgba(49, 31, 115, .32), rgba(20, 12, 38, .55) 55%, rgba(35, 21, 64, .4)); transition: background .5s, box-shadow .5s; } /* тонкая светящаяся линия снизу */ .hdr-bar::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(183, 141, 242, .7), transparent); box-shadow: 0 0 14px rgba(124, 92, 255, .8); } .hdr.scrolled .hdr-bar { background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), rgba(183, 141, 242, .08), transparent 45%), linear-gradient(160deg, rgba(49, 31, 115, .5), rgba(20, 12, 38, .75) 55%, rgba(35, 21, 64, .6)); } .brand { display: inline-flex; align-items: center; gap: 11px; font: 800 19px/1 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 48; letter-spacing: .005em; } .brand-text { padding-block: .14em .22em; margin-block: -.14em -.22em; line-height: 1.1; background: linear-gradient(180deg, #E6DEFA 0%, #A796D9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand:hover .brand-text { background: linear-gradient(180deg, #fff, var(--lav)); -webkit-background-clip: text; background-clip: text; } /* знак: маленький гироскоп из колец со светящимся ядром */ .brand-mark { position: relative; flex: none; width: 32px; height: 32px; transform-style: preserve-3d; animation: markSpin 10s linear infinite; } .brand-mark i, .brand-mark b { position: absolute; inset: 0; border-radius: 50%; } .brand-mark i { border: 1.3px solid rgba(183, 141, 242, .9); box-shadow: 0 0 6px rgba(124, 92, 255, .6); transform: rotateY(var(--tilt, 0deg)); } .brand-mark i:nth-child(2) { border-color: rgba(143, 114, 255, .8); --tilt: 60deg; } .brand-mark i:nth-child(3) { border-color: rgba(217, 204, 255, .65); --tilt: 120deg; } .brand-mark b { inset: 10.5px; background: radial-gradient(circle at 35% 30%, #fff, var(--lav) 45%, var(--violet)); box-shadow: 0 0 10px var(--lav), 0 0 20px rgba(124, 92, 255, .7); animation: core 10s linear infinite; } @keyframes markSpin { from { transform: rotateX(-18deg) rotateY(0deg); } to { transform: rotateX(-18deg) rotateY(360deg); } } @keyframes core { from { transform: rotateY(0deg) scale(1); } 50% { transform: rotateY(-180deg) scale(.82); } to { transform: rotateY(-360deg) scale(1); } } .nav { position: relative; display: flex; align-items: center; gap: 2px; margin-left: auto; } .nav a { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; line-height: 1; font-size: 14px; font-weight: 500; color: #9d92bd; transition: color .3s; } .nav a:hover, .nav a.on { color: var(--text); } .nav-pill { position: absolute; z-index: 0; top: 0; height: 100%; left: 0; width: 0; border-radius: 999px; opacity: 0; background: linear-gradient(160deg, rgba(124, 92, 255, .2), rgba(49, 31, 115, .35)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(183, 141, 242, .28); transition: left .5s var(--spring), width .5s var(--spring), opacity .3s; } .hdr .btn { --h: 44px; padding: 0 20px 0 18px; font-size: 14px; } .hdr-tg { gap: 7px; color: var(--text); background: linear-gradient(160deg, rgba(124, 92, 255, .2), rgba(49, 31, 115, .35)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(183, 141, 242, .28); } .hdr-tg::after { background: linear-gradient(160deg, rgba(124, 92, 255, .42), rgba(70, 45, 170, .5)); } .hdr-tg:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(183, 141, 242, .55), 0 8px 28px -8px rgba(124, 92, 255, .9); } .hdr-tg svg { color: var(--lav); width: 16px; height: 16px; } .hdr-tg:hover svg { color: #fff; } .burger { display: none; width: 44px; height: 44px; border-radius: 50%; position: relative; } .burger span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .4s var(--spring), opacity .3s; } .burger span:nth-child(1) { top: 17px; } .burger span:nth-child(2) { top: 25px; } .hdr.open .burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); } .hdr.open .burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } .mnav { display: none; margin-top: 10px; border-radius: 28px; padding: 10px; flex-direction: column; gap: 2px; } .mnav a { padding: 14px 16px; border-radius: 18px; font-weight: 600; font-size: 17px; } .mnav a:hover { background: rgba(255, 255, 255, .06); } /* ===== hero ===== */ .hero { position: relative; padding-top: 2px; } .hero-meta { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .status { -webkit-backdrop-filter: none; backdrop-filter: none; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; } /* пульс — отдельный кружок, который растёт и гаснет (transform + opacity: без перерисовки, в отличие от анимации тени) */ .status i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lav); } .status i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(183, 141, 242, .55); animation: ping 2.4s infinite; } @keyframes ping { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(3.25); opacity: 0; } } .stage { position: relative; margin-top: 0; } /* hero: PORT [фигурка] FOLIO — стеклянный глянцевый текст */ .bust-wrap { position: relative; z-index: 1; height: clamp(520px, calc(100vh - 150px), 880px); height: clamp(520px, calc(100svh - 150px), 880px); } .pf-word { position: absolute; z-index: 0; left: 0; top: 47%; width: 100%; height: auto; translate: 0 -50%; overflow: visible; pointer-events: none; animation: pfIn .6s var(--ease) both; /* быстро: долгое проявление выглядело как «тёмный» сайт */ } @keyframes pfIn { from { opacity: 0; transform: translateY(18px) scale(1.04); } } /* без размытия — дёшево для GPU */ /* пока шрифты не загрузились, стеклянные слова не показываем: иначе после подгрузки они пересчитываются и «прыгают» */ html:not(.fonts-ok) .pf-word, html:not(.fonts-ok) .am-word, html:not(.fonts-ok) .ftr-glass { animation: none !important; opacity: 0 !important; } .pf-t { font: 900 200px/1 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; letter-spacing: -3px; } .pf-glow { opacity: .42; } .pf-sheen { mix-blend-mode: screen; } .pf-c { font: 500 22px var(--mono); letter-spacing: 9px; fill: var(--muted); } .pf-dot { fill: var(--lav); } .bust-wrap::before { content: ""; position: absolute; left: calc(50% + var(--figx, 0px)); top: 46%; width: min(760px, 120%); aspect-ratio: 1; translate: -50% -50%; z-index: -1; border-radius: 50%; /* плавный спад до нуля без резкого края — иначе на экранах Mac виден круг */ background: radial-gradient(closest-side, rgba(124, 92, 255, .48), rgba(112, 82, 236, .4) 18%, rgba(90, 64, 200, .28) 36%, rgba(66, 44, 160, .16) 54%, rgba(49, 31, 115, .07) 70%, rgba(49, 31, 115, .02) 85%, rgba(49, 31, 115, 0) 100%); animation: breathe 6s ease-in-out infinite; } @keyframes breathe { 50% { transform: scale(1.08); opacity: .8; } } /* холст больше блока: свечение, дым и пол под ногами плавно тают, без видимых границ */ #bust { position: absolute; left: calc(var(--figx, 0px) - 8%); top: -24%; width: 116%; height: 160%; display: block; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease) .2s; -webkit-mask-image: linear-gradient(transparent 0%, rgba(0,0,0,.15) 8%, rgba(0,0,0,.55) 16%, #000 26%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 6%, #000 14%, #000 86%, rgba(0,0,0,.5) 94%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent 0%, rgba(0,0,0,.15) 8%, rgba(0,0,0,.55) 16%, #000 26%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 6%, #000 14%, #000 86%, rgba(0,0,0,.5) 94%, transparent 100%); mask-composite: intersect; } .bust-zone { position: absolute; inset: 0; z-index: 1; cursor: grab; touch-action: pan-y; } .bust-zone:active { cursor: grabbing; } #bust.ready { opacity: 1; } /* лоадер стоит ровно в зазоре PORT · FOLIO: по центру заглавных букв, подпись — на линии WEB / APPS */ .bust-fallback { position: absolute; inset: 0; pointer-events: none; transition: opacity .9s var(--ease), filter .9s var(--ease); } .bust-fallback .gyro, .bust-fallback .mono { position: absolute; left: calc(50% + var(--figx, 0px)); translate: -50% -50%; } .bust-fallback .gyro { --g: clamp(64px, calc(var(--caph, 110px) * 1.12), 150px); top: var(--capy, 46%); width: var(--g); height: var(--g); transition: scale .9s var(--ease); } .bust-fallback .gyro b { inset: 38%; } .bust-fallback .mono { top: var(--capl, 56%); white-space: nowrap; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .bust-fallback.out { opacity: 0; filter: blur(8px); } .bust-fallback.out .gyro { scale: .4; } .bust-fallback[hidden] { display: none; } @media (max-width: 640px) { .bust-fallback .gyro { --g: 96px; top: 60%; } .bust-fallback .mono { top: calc(60% + 72px); } } .controls { position: absolute; z-index: 3; left: 50%; bottom: 10px; translate: -50% 0; display: flex; gap: 6px; padding: 6px; border-radius: 999px; } .chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: color .3s, background .4s, transform .4s var(--spring); } .chip svg { width: 18px; height: 18px; } .chip:hover { color: var(--text); background: rgba(255, 255, 255, .07); } .chip[aria-pressed="true"] { color: var(--ink); background: var(--lav); box-shadow: 0 6px 20px -4px rgba(183, 141, 242, .7), inset 0 1px 0 rgba(255, 255, 255, .6); } .chip:active { transform: scale(.94); } .hint { position: absolute; z-index: 2; right: 0; top: 12%; display: flex; align-items: center; gap: 10px; color: var(--muted); } .hint svg { width: 34px; height: 34px; animation: swipe 2.6s var(--ease) infinite; } @keyframes swipe { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } } /* летающие стеклянные объекты */ .floaty { position: absolute; z-index: 2; pointer-events: none; display: grid; place-items: center; font: 500 15px var(--mono); color: var(--lav); translate: calc(var(--px, 0) * var(--d, 20px)) calc(var(--py, 0) * var(--d, 20px)); transition: translate .8s var(--ease); } .floaty > .lg { display: grid; place-items: center; animation: float 7s ease-in-out infinite; } .f1 { left: 5%; top: 10%; --d: 34px; } .f1 > .lg { width: 84px; height: 84px; border-radius: 26px; rotate: -12deg; font-size: 22px; } .f2 { right: 7%; top: 70%; --d: -28px; } .f2 > .lg { width: 70px; height: 70px; border-radius: 50%; animation-delay: -2s; } .f3 { left: 12%; bottom: 20%; --d: 22px; } .f3 > .lg { padding: 10px 14px; border-radius: 14px; animation-delay: -4s; font-size: 12px; color: var(--text); } .f3 b { color: #7CF2B8; font-weight: 500; } @keyframes float { 50% { transform: translateY(-16px) rotate(6deg); } } /* под фигуркой: всё по центру, продолжает симметрию PORT · FOLIO */ .hero-foot { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 64px; padding-bottom: clamp(40px, 6vw, 84px); } .hf-lead { font: 700 clamp(24px, 2.6vw, 36px)/1.15 var(--body); letter-spacing: -.022em; max-width: 24ch; text-wrap: balance; } .hf-lead em { font-style: normal; background: linear-gradient(90deg, #D9CCFF, var(--lav) 45%, #8f72ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .hf-sub { margin-top: 12px; color: var(--muted); font-size: 16px; } /* две строки: перенос после «Беру на себя» */ @media (max-width: 700px) { .hf-sub .br-d { display: none; } } .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .hero-foot .cta { justify-content: center; margin-top: 24px; } .hf-stats { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 30px; } .hf-stats li { display: flex; align-items: baseline; gap: 9px; padding: 4px 24px; } .hf-stats li + li { border-left: 1px solid var(--line); } .hf-stats b { font: 900 26px/1 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0; font-variant-numeric: tabular-nums; color: var(--text); } .hf-stats span { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* ===== бегущие ленты ===== */ /* ленты: обрезаем только по бокам, свечение сверху и снизу свободно уходит в фон */ .ribbons { position: relative; height: 190px; margin-block: 10px 20px; overflow-x: clip; overflow-y: visible; } .ribbon { position: absolute; left: -5%; width: 110%; top: 50%; display: flex; overflow: hidden; padding-block: 16px; } .ribbon-a { rotate: -4deg; translate: 0 -50%; z-index: 1; color: #1a0f3a; background: linear-gradient(90deg, rgba(183, 141, 242, .62), rgba(214, 196, 250, .78) 50%, rgba(183, 141, 242, .62)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(255, 255, 255, .25), inset 0 -10px 22px rgba(100, 75, 191, .35), 0 0 50px -6px rgba(124, 92, 255, .65), 0 24px 70px -18px rgba(124, 92, 255, .7); } .ribbon-b { rotate: 3deg; translate: 0 -50%; color: #CDB8F8; background: linear-gradient(90deg, rgba(49, 31, 115, .32), rgba(70, 45, 170, .4) 50%, rgba(49, 31, 115, .32)); box-shadow: inset 0 1px 0 rgba(183, 141, 242, .45), inset 0 -1px 0 rgba(183, 141, 242, .2), 0 0 44px -10px rgba(124, 92, 255, .6); } .ribbon-b .track span { text-shadow: 0 0 14px rgba(183, 141, 242, .55); } /* по лентам бежит стеклянный блик */ /* блик — полоса шириной 60% ленты, её двигаем transform'ом (раньше двигался фон — лента перерисовывалась каждый кадр) */ .ribbon::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%); transform: translateX(-53%); animation: ribbonSheen 6s ease-in-out infinite; } .ribbon-b::after { animation-delay: -3s; opacity: .6; } @keyframes ribbonSheen { from { transform: translateX(-53%); } 60%, to { transform: translateX(173%); } } .track { display: flex; flex: none; gap: 0; animation: marquee 38s linear infinite; } .ribbon-b .track { animation-direction: reverse; animation-duration: 46s; } .track span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font: 800 28px/1 var(--body); letter-spacing: -.01em; white-space: nowrap; } /* один шрифт для кириллицы и латиницы */ .ribbon-b .track span { font: 500 18px/1 var(--mono); letter-spacing: .04em; } .track span::after { content: "✦"; font-size: .6em; opacity: .7; } @keyframes marquee { to { transform: translateX(-100%); } } /* ===== секции ===== */ .sec { position: relative; padding-block: clamp(48px, 6.5vw, 96px); } .sec-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 40px; align-items: end; margin-bottom: clamp(32px, 5vw, 60px); } .sec-word { font: 900 clamp(64px, 11vw, 160px)/.8 var(--display); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; letter-spacing: -.04em; color: transparent; background: linear-gradient(90deg, var(--lav), #fff 50%, var(--violet)) 0 0 / 0% 100% no-repeat, linear-gradient(rgba(183, 141, 242, .14), rgba(183, 141, 242, .14)); -webkit-background-clip: text; background-clip: text; transition: background-size 1.4s var(--ease); user-select: none; } .sec-word.lit { background-size: 100% 100%; } .sec-head h2 { font: 800 clamp(28px, 3.4vw, 44px)/1.05 var(--body); letter-spacing: -.03em; } .sec-head p { margin-top: 12px; color: var(--muted); max-width: 54ch; } /* reveal: виден в покое, анимируется только то, что ниже первого экрана */ .rv.pre { opacity: 0; transform: translateY(36px); filter: blur(6px); } .rv { transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); } /* ===== направления ===== */ .services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .svc { display: flex; flex-direction: column; gap: 14px; min-height: 340px; padding: 24px; border-radius: 30px; text-align: left; transition: transform .6s var(--spring); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); } .svc:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); } .svc .go { margin-top: auto; } .svc .count { font: 500 12px var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; } .svc h3 { font: 800 22px/1.15 var(--body); letter-spacing: -.02em; margin-top: -4px; } .svc p { color: var(--muted); font-size: 15px; line-height: 1.5; } .svc .go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--lav); } .svc .go svg { width: 16px; height: 16px; transition: transform .5s var(--spring); } .svc:hover .go svg { transform: translateX(5px); } /* мини-3D объекты в карточках */ .obj { height: 110px; display: grid; place-items: center; perspective: 600px; } .cube { position: relative; width: 58px; height: 58px; transform-style: preserve-3d; animation: tumble 12s linear infinite; } .cube i { position: absolute; inset: 0; border-radius: 12px; border: 1px solid rgba(183, 141, 242, .7); background: linear-gradient(135deg, rgba(183, 141, 242, .28), rgba(49, 31, 115, .2)); box-shadow: inset 0 0 20px rgba(183, 141, 242, .25); } .cube i:nth-child(1) { transform: translateZ(29px); } .cube i:nth-child(2) { transform: rotateY(180deg) translateZ(29px); } .cube i:nth-child(3) { transform: rotateY(90deg) translateZ(29px); } .cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(29px); } .cube i:nth-child(5) { transform: rotateX(90deg) translateZ(29px); } .cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(29px); } @keyframes tumble { to { transform: rotateX(360deg) rotateY(720deg); } } .gyro { position: relative; width: 84px; height: 84px; transform-style: preserve-3d; animation: tumble 16s linear infinite; } .gyro i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--lav); box-shadow: 0 0 14px rgba(183, 141, 242, .4); } .gyro i:nth-child(2) { transform: rotateY(60deg); border-color: var(--violet); } .gyro i:nth-child(3) { transform: rotateY(120deg); border-color: #CDAEF7; } .gyro b { position: absolute; inset: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--lav) 40%, var(--violet)); box-shadow: 0 0 20px var(--lav); } .wsphere { position: relative; width: 84px; height: 84px; transform-style: preserve-3d; animation: spinY 9s linear infinite; } .wsphere i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(183, 141, 242, .6); } .wsphere i:nth-child(1) { transform: rotateY(0deg); } .wsphere i:nth-child(2) { transform: rotateY(36deg); } .wsphere i:nth-child(3) { transform: rotateY(72deg); } .wsphere i:nth-child(4) { transform: rotateY(108deg); } .wsphere i:nth-child(5) { transform: rotateY(144deg); } .wsphere i:nth-child(6) { transform: rotateX(90deg); border-color: var(--lav); } @keyframes spinY { to { transform: rotateX(-18deg) rotateY(360deg); } } .pyr { position: relative; width: 80px; height: 70px; transform-style: preserve-3d; animation: spinY 10s linear infinite; } .pyr i { position: absolute; left: 0; bottom: 0; width: 80px; height: 70px; transform-origin: 50% 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(205, 174, 247, .7), rgba(100, 75, 191, .25)); } .pyr i:nth-child(1) { transform: translateZ(40px) rotateX(30deg); } .pyr i:nth-child(2) { transform: rotateY(90deg) translateZ(40px) rotateX(30deg); } .pyr i:nth-child(3) { transform: rotateY(180deg) translateZ(40px) rotateX(30deg); } .pyr i:nth-child(4) { transform: rotateY(270deg) translateZ(40px) rotateX(30deg); } /* ===== обо мне ===== */ /* центральная сцена ABOUT ME: надпись проявляется из свечения, вокруг всплывают 3D-фигурки */ .about-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: clamp(20px, 2vw, 30px) clamp(24px, 3vw, 40px); } #aboutShapes { position: absolute; z-index: 0; left: -25%; top: -14%; width: 150%; height: 128%; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent), linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent), linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-composite: intersect; } .about-hero > :not(canvas) { position: relative; z-index: 1; } .am-word { width: min(820px, 92%); height: auto; overflow: visible; opacity: 0; } .am-word { will-change: opacity, transform; } .am-word { transform-origin: 50% 100%; } .glass-reveal.in .am-word { animation: amIn 1.3s cubic-bezier(.2, .8, .2, 1) forwards; } /* свечение под словом разгорается следом, когда оно уже встало */ .am-word .pf-glow { opacity: 0; } .glass-reveal.in .am-word .pf-glow { animation: glowIn 1.2s ease .55s forwards; } @keyframes glowIn { to { opacity: .42; } } .glass-reveal.in .ftr-glass .pf-glow { animation-name: glowInDim; } @keyframes glowInDim { to { opacity: .18; } } @media (prefers-reduced-motion: reduce) { .am-word .pf-glow { opacity: .42; animation: none !important; } } /* появление стеклянных заголовков: только прозрачность и сдвиг — без вспышек и размытия (фильтры на SVG тормозили) */ /* слово «поднимается из пола»: откидывается из лежачего положения и встаёт, чуть перелетая */ @keyframes amIn { 0% { opacity: 0; transform: perspective(900px) translateY(46px) rotateX(78deg) scale(.94); } 45% { opacity: 1; } 72% { transform: perspective(900px) translateY(-4px) rotateX(-6deg) scale(1.005); } 100% { opacity: 1; transform: perspective(900px) translateY(0) rotateX(0deg) scale(1); } } .am-fade { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(.25s + var(--d, 0) * .12s); } .glass-reveal.in .am-fade { opacity: 1; transform: none; } .about-hi { margin-top: 22px; font: 700 clamp(21px, 2.1vw, 28px)/1.3 var(--body); letter-spacing: -.02em; max-width: 44ch; text-wrap: balance; } .about-hi em { font-style: normal; background: linear-gradient(90deg, #D9CCFF, var(--lav) 45%, #8f72ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .about-hi b { background: linear-gradient(90deg, #D9CCFF, var(--lav) 50%, #8f72ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .about-p { margin-top: 14px; color: var(--muted); font-size: 16.5px; max-width: 72ch; text-wrap: pretty; } .about-dirs { display: grid; grid-template-columns: repeat(3, 300px); justify-content: center; gap: 10px; margin-top: 52px; width: 100%; } .about-dirs > :nth-child(4) { grid-column: 2; } @media (max-width: 1000px) { .about-dirs { grid-template-columns: minmax(0, 340px); } .about-dirs > :nth-child(4) { grid-column: auto; } } .about-chip { display: flex; align-items: center; gap: 12px; padding: 13px 18px 13px 22px; border-radius: 999px; text-align: left; background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px var(--line); transition: background .45s var(--ease), box-shadow .45s var(--ease), transform .5s var(--spring); } .about-chip b { font: 700 15px/1.2 var(--body); margin-right: auto; white-space: nowrap; } .about-chip .count { white-space: nowrap; } .about-chip .count { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .about-chip svg { width: 15px; height: 15px; color: var(--lav); transition: transform .5s var(--spring); } .about-chip:hover { background: linear-gradient(160deg, rgba(124, 92, 255, .28), rgba(49, 31, 115, .35)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(183, 141, 242, .5), 0 8px 26px -10px rgba(124, 92, 255, .9); transform: translateY(-2px); } .about-chip:hover svg { transform: translateX(3px); } @media (max-width: 700px) { .about-hero { padding-block: 130px 120px; } #aboutShapes { top: -4%; height: 108%; } } @media (prefers-reduced-motion: reduce) { .am-word, .am-fade { opacity: 1; transform: none; filter: none; } }.about-block { margin-top: clamp(56px, 7vw, 96px); scroll-margin-top: 90px; } .sub-head { margin-bottom: 28px; } .sub-head .mono { color: var(--lav); } .sub-head h3 { margin-top: 8px; font: 800 clamp(24px, 2.6vw, 34px)/1.1 var(--body); letter-spacing: -.025em; } .sub-head p { margin-top: 10px; color: var(--muted); max-width: 54ch; } /* ===== проекты: заголовок + раскрывающаяся лента, всё в один экран ===== */ #work, #stack, #students { padding-block: clamp(32px, 4vw, 56px); } /* одинаковый видимый промежуток между разделами (~140px на ПК): от низа содержимого до следующего заголовка */ #about { padding-top: clamp(48px, 5.4vw, 83px); padding-bottom: clamp(72px, 7.4vw, 114px); } /* от лент до ABOUT ME — тот же ~140px */ #work { padding-bottom: clamp(48px, 5.5vw, 80px); } #stack { padding-bottom: clamp(48px, 5.8vw, 84px); } #students { padding-bottom: 0; } #contact { padding-top: clamp(24px, 2.8vw, 40px); } .pj-head { display: flex; flex-direction: column; align-items: center; text-align: center; } .pj-head .am-word { width: min(560px, 76%); } .pj-sub { margin-top: 10px; color: var(--muted); max-width: 70ch; font-size: 15px; } /* витрина: список слева, превью справа */ .showcase { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 22px; margin-top: 26px; height: clamp(440px, 58vh, 520px); } .pl { position: relative; overflow-y: auto; padding: 6px 8px 28px 4px; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); scrollbar-width: thin; scrollbar-color: rgba(183, 141, 242, .35) transparent; } .pl-group + .pl-group { margin-top: 12px; } .pl-head { display: block; padding: 0 14px 6px; font-size: 10.5px; color: var(--lav); opacity: .85; } .pl-head sup { margin-left: 5px; opacity: .6; } .pl-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 0 14px; border-radius: 12px; text-align: left; color: var(--muted); transition: color .3s; opacity: 0; transform: translateX(-14px); } .showcase.in .pl-item { opacity: 1; transform: none; transition: color .3s, opacity .6s var(--ease) calc(var(--k) * 35ms), transform .6s var(--ease) calc(var(--k) * 35ms); } .pl-num { font: 500 11px var(--mono); color: var(--dim); width: 20px; transition: color .3s; } .pl-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-item svg { width: 15px; height: 15px; color: var(--lav); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .45s var(--spring); } .pl-item:hover, .pl-item[aria-selected="true"] { color: #fff; } .pl-item[aria-selected="true"] .pl-num { color: var(--lav); } .pl-item[aria-selected="true"] svg { opacity: 1; transform: none; } .pl-ind { position: absolute; z-index: 0; left: 4px; right: 8px; top: 0; height: 36px; border-radius: 12px; pointer-events: none; background: linear-gradient(160deg, rgba(143, 114, 255, .42), rgba(70, 45, 170, .32)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(183, 141, 242, .4), 0 6px 22px -8px rgba(124, 92, 255, .9); transition: top .5s var(--spring), height .3s; } .pv { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; border-radius: 28px; overflow: hidden; background: linear-gradient(165deg, rgba(100, 75, 191, .32), rgba(35, 21, 64, .6) 55%, rgba(20, 12, 38, .8)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(183, 141, 242, .3), 0 30px 80px -30px rgba(124, 92, 255, .55); opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .8s var(--ease) .15s, transform .8s var(--ease) .15s; } .showcase.in .pv { opacity: 1; transform: none; } .pv-media { position: relative; overflow: hidden; cursor: pointer; background: var(--plum); } .pv-layer { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); } .pv-layer.show { clip-path: inset(0 0 0 0); } /* скриншот целиком поверх своей размытой копии */ .pv-blur { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(28px) brightness(.45) saturate(1.2); } .pv-main { position: absolute; inset: 6% 8%; width: 84%; height: 88%; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .6)); transform: scale(1.06); transition: transform 1.4s var(--ease); } .pv-layer.show .pv-main { transform: scale(1); } .pv-layer.contain .pv-main { inset: 18%; width: 64%; height: 64%; } .pv-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 25%, transparent 80%, rgba(20, 12, 38, .55)); } .pv-media:hover .pv-layer.show .pv-main { transform: scale(1.03); } .pv-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: end; padding: 20px 26px 22px; min-width: 0; border-top: 1px solid rgba(183, 141, 242, .18); } .pv-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .pv-side { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; } .pv-body .mono { font-size: 10.5px; color: var(--lav); } .pv-body h3 { font: 800 clamp(24px, 2.2vw, 30px)/1.05 var(--body); letter-spacing: -.025em; } .pv-sub { color: rgba(230, 222, 250, .85); font-size: 15px; font-weight: 500; } .pv-desc { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pv-stack { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .pv-stack i { font: 500 11px var(--mono); font-style: normal; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(183, 141, 242, .28); } .pv-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .pv-actions .btn { --h: 44px; padding: 0 18px; font-size: 14px; } @media (max-width: 980px) { .pv-body { grid-template-columns: 1fr; gap: 12px; } .pv-side { align-items: flex-start; } .pv-stack, .pv-actions { justify-content: flex-start; } } @media (max-width: 760px) { .showcase { grid-template-columns: 1fr; height: auto; gap: 14px; } .pl { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 4px 0; scrollbar-width: none; order: -1; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } .pl::-webkit-scrollbar { display: none; } .pl-group { display: contents; } .pl-head, .pl-ind { display: none; } .pl-item { flex: none; width: auto; height: 40px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); } .pl-item[aria-selected="true"] { background: linear-gradient(160deg, rgba(143, 114, 255, .55), rgba(70, 45, 170, .45)); box-shadow: inset 0 0 0 1px rgba(183, 141, 242, .5); } .pl-item svg { display: none; } .pv { grid-template-rows: auto auto; } .pv-media { aspect-ratio: 16 / 10; } .pv-body { padding: 18px; } } @media (prefers-reduced-motion: reduce) { .pl-item, .pv { opacity: 1; transform: none; } } /* ===== MacBook: ровная пропорциональная модель на CSS 3D ===== */ .mb { --w: min(720px, 56vw, calc((100vh - 300px) * 1.02)); --h: calc(var(--w) / 1.54); /* крышка 16:10 с рамкой */ --d: calc(var(--w) * .6); /* глубина корпуса */ position: relative; width: var(--w); height: calc(var(--h) * 1.5); margin: 18px auto 0; perspective: 5200px; perspective-origin: 50% 0%; cursor: pointer; outline: none; } .mb-body { position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); transform-style: preserve-3d; transform-origin: 50% 100%; transform: translate(-13%, -2%) rotateX(-18deg) rotateY(30deg); transition: transform .8s var(--ease); } .mb.open:hover .mb-body, .mb.open:focus-visible .mb-body { transform: translate(-13%, -3.5%) rotateX(-18deg) rotateY(30deg); } .mb-lid { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 100%; transform: rotateX(-90deg); transition: transform 1.5s cubic-bezier(.25, .9, .25, 1); } .mb.open .mb-lid { transform: rotateX(-14deg); } .mb-screen { position: absolute; inset: 0; border-radius: calc(var(--w) * .024) calc(var(--w) * .024) calc(var(--w) * .008) calc(var(--w) * .008); padding: calc(var(--w) * .016); /* как у настоящего MacBook: рамка экрана из чёрного стекла, по краю — тонкий алюминиевый кант */ background: #0b0a0e; box-shadow: inset 0 0 0 1.5px #4a4553, inset 0 0 0 2.5px #18161d, inset 0 1px 0 2px rgba(255, 255, 255, .12), 0 0 0 1px rgba(0, 0, 0, .7); backface-visibility: hidden; container-type: inline-size; } .mb-lid-back { position: absolute; inset: 0; border-radius: inherit; display: grid; place-items: center; border-radius: calc(var(--w) * .024); background: linear-gradient(175deg, #4a4357, #2a2533 55%, #1b1822); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 -12px 30px rgba(0, 0, 0, .35); transform: rotateY(180deg); backface-visibility: hidden; } .mb-apple { width: calc(var(--w) * .085); height: auto; overflow: visible; filter: drop-shadow(0 0 calc(var(--w) * .012) rgba(205, 184, 248, .35)); } .mb-notch { position: absolute; z-index: 5; left: 50%; top: calc(var(--w) * .016); translate: -50% 0; width: 13%; height: calc(var(--w) * .022); border-radius: 0 0 calc(var(--w) * .01) calc(var(--w) * .01); background: #0b0a0e; } /* «бровка» того же цвета, что и рамка */ .mb-notch::after { content: ""; position: absolute; left: 50%; top: 42%; width: 5px; height: 5px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a3d7a, #0d0a18); } .mb-glare { position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 30%, transparent 42%); } /* корпус: та же ширина, что у крышки */ .mb-deck { position: absolute; left: 0; top: 100%; width: 100%; height: var(--d); transform-origin: 50% 0; transform: rotateX(90deg); border-radius: calc(var(--w) * .006) calc(var(--w) * .006) calc(var(--w) * .03) calc(var(--w) * .03); background: linear-gradient(180deg, #24202c, #3a3446 18%, #332d3f 70%, #2a2533); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transform-style: preserve-3d; } .mb-deck::before { /* выемка петли */ content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 3%; background: rgba(0, 0, 0, .55); border-radius: 0 0 6px 6px; } .mb-keys { position: absolute; left: 9%; right: 9%; top: 8%; height: 44%; border-radius: calc(var(--w) * .006); overflow: hidden; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 15 - 2px), #120f17 calc(100% / 15 - 2px) calc(100% / 15)), repeating-linear-gradient(180deg, transparent 0 calc(100% / 6 - 2px), #120f17 calc(100% / 6 - 2px) calc(100% / 6)), linear-gradient(180deg, #1d1924, #231e2b); box-shadow: 0 0 0 2px #15121b, 0 0 22px rgba(124, 92, 255, .22); } .mb-pad { position: absolute; left: 31%; right: 31%; top: 58%; height: 34%; border-radius: calc(var(--w) * .008); background: linear-gradient(180deg, #2f2a39, #29242f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } .mb-front { position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--w) * .016); transform-origin: 50% 0; transform: rotateX(-90deg); border-radius: 0 0 calc(var(--w) * .02) calc(var(--w) * .02); background: linear-gradient(180deg, #4a4357, #1c1922); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); } .mb-front::after { content: ""; position: absolute; left: 50%; top: 0; width: 12%; height: 50%; translate: -50% 0; border-radius: 0 0 10px 10px; background: rgba(0, 0, 0, .45); } .mb-shadow { position: absolute; left: -14%; right: -14%; bottom: -8%; height: 30%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 92, 255, .26), rgba(100, 75, 191, .14) 35%, rgba(49, 31, 115, .07) 62%, transparent); filter: blur(34px); } /* экран: рабочий стол macOS в стиле сайта */ .mb-ui { position: absolute; inset: calc(var(--w) * .016); border-radius: calc(var(--w) * .01); overflow: hidden; font-size: clamp(8px, 1.5cqw, 14px); container-type: size; /* для пути курсора в долях экрана (cqw/cqh) */ background: radial-gradient(60% 70% at 25% 20%, rgba(143, 114, 255, .55), transparent 70%), radial-gradient(55% 60% at 80% 85%, rgba(183, 141, 242, .35), transparent 70%), linear-gradient(160deg, #2b1d5c, #150d2c 55%, #0c0818); opacity: 0; filter: brightness(2.4) blur(6px); transition: opacity .9s var(--ease) .9s, filter 1.2s var(--ease) .9s; } .mb.open .mb-ui { opacity: 1; filter: none; } /* чёткая плоская копия рабочего стола на конец «всасывания» (app.js двигает и масштабирует её под экран) */ .mb-ui-ov { position: fixed !important; inset: auto !important; left: 0 !important; top: 0 !important; z-index: 45; transform-origin: 0 0; border-radius: 0 !important; opacity: 0; filter: none !important; transition: none !important; pointer-events: none; } /* без will-change: браузер перерисовывает копию в нужном размере */ .mb-menubar { position: absolute; left: 0; right: 0; top: 0; height: 1.9em; display: flex; align-items: center; gap: 1.2em; padding: 0 1em; font: 600 .78em var(--body); color: rgba(255, 255, 255, .85); background: rgba(10, 6, 22, .55); } .mb-menubar b { color: var(--lav); font-size: .9em; } .mb-menubar span + span { font-weight: 500; opacity: .7; } .mb-menubar em { margin-left: auto; font-style: normal; opacity: .75; } .mb-folder { position: absolute; left: 50%; top: 46%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: .55em; } .mb-folder-ico { position: relative; width: 7.2em; height: 5.6em; border-radius: .7em; display: grid; place-items: center; background: linear-gradient(180deg, #c7b0ff, #8f72ff 60%, #6a4fd6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1em 2.4em -0.6em rgba(124, 92, 255, .9); } .mb-folder-ico::before { content: ""; position: absolute; left: .5em; top: -.7em; width: 2.8em; height: 1em; border-radius: .45em .45em 0 0; background: #a991ff; } .mb-folder-ico i { font: 800 1.5em var(--display); font-variation-settings: "SOFT" 100; font-style: normal; color: rgba(255, 255, 255, .92); } .mb-folder-name { font: 600 .95em var(--body); color: #fff; padding: .15em .6em; border-radius: .4em; background: rgba(124, 92, 255, .55); } .mb-dock { position: absolute; left: 50%; bottom: .8em; translate: -50% 0; display: flex; gap: .55em; padding: .5em .7em; border-radius: 1.1em; background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); } .mb-dock i { width: 2.2em; height: 2.2em; border-radius: .6em; background: linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(183, 141, 242, .25)); } .mb-dock i.on { background: linear-gradient(160deg, #c7b0ff, #7c5cff); } /* курсор подъезжает к папке и «кликает» — подсказка, что сюда можно нажать */ /* стоит у папки, путь проезжает сдвигом transform в долях экрана (29% ширины, 33% высоты) — раньше двигались left/top, и экран ноутбука перерисовывался каждый кадр */ .mb-cursor { position: absolute; z-index: 4; width: 2.2em; height: 2.2em; left: 51%; top: 47%; filter: drop-shadow(0 .2em .3em rgba(0, 0, 0, .5)); opacity: 0; transform: translate(29cqw, 33cqh); } .mb.open .mb-cursor { animation: cursorGo 4.2s cubic-bezier(.45, 0, .25, 1) 2.2s infinite; } @keyframes cursorGo { 0% { transform: translate(29cqw, 33cqh); opacity: 0; } 10% { opacity: 1; } 45% { transform: translate(0, 0) scale(1); } 52% { transform: translate(0, 0) scale(.82); } 58% { transform: translate(0, 0) scale(1); } 85% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(0, 0) scale(1); opacity: 0; } } .mb-ripple { position: absolute; z-index: 3; left: 51%; top: 47%; width: 5em; height: 5em; margin: -2.5em 0 0 -2.5em; border-radius: 50%; border: .15em solid rgba(255, 255, 255, .8); opacity: 0; } .mb.open .mb-ripple { animation: ripple 4.2s ease-out 2.2s infinite; } @keyframes ripple { 0%, 51% { opacity: 0; transform: scale(.3); } 53% { opacity: .9; } 75%, 100% { opacity: 0; transform: scale(1.6); } } .mb.open .mb-folder-ico { animation: folderPop 4.2s ease 2.2s infinite; } @keyframes folderPop { 0%, 51% { transform: none; } 56% { transform: scale(.92); } 64% { transform: scale(1.06); } 72%, 100% { transform: none; } } /* дорожка-стрелка с подсказкой справа от ноутбука */ .mb-hint { position: absolute; z-index: 3; left: calc(100% - var(--w) * .04); top: 6%; width: min(260px, 26vw); pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease) 1.25s, transform .5s var(--ease) 1.25s; } /* сразу, как крышка открылась (1.5s) */ .mb.open .mb-hint { opacity: 1; transform: none; } /* призыв: крупная стеклянная кнопка «Кликни» с пульсом и плавная светящаяся стрелка к ноутбуку */ .mb-hint-label { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-left: 38%; padding: 14px 30px; border-radius: 999px; font: 700 19px var(--body); letter-spacing: -.01em; color: #fff; white-space: nowrap; background: linear-gradient(160deg, #a58bff, #6a4fd6 55%, #4a2fb0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 6px rgba(30, 12, 90, .5), 0 12px 34px -8px rgba(124, 92, 255, .95), 0 0 0 1px rgba(205, 184, 248, .35); animation: hintBob 2.4s ease-in-out infinite; } .mb-hint-label::after { /* расходящийся пульс */ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 3px rgba(183, 141, 242, .5), 0 0 14px rgba(183, 141, 242, .35); animation: hintPulse 2.4s ease-out infinite; /* кольцо растёт и гаснет: transform + opacity, без перерисовки тени каждый кадр */ } @keyframes hintPulse { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(1.22, 1.6); opacity: 0; } } /* стрелка отдельно от кнопки и неподвижна */ .mb-hint-arrow { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; } @keyframes hintBob { 50% { transform: translateY(-4px); } }/* при клике: курсор и пульс на экране замирают, подсказка гаснет */ .mb.sucking .mb-cursor, .mb.sucking .mb-ripple, .mb.sucking .mb-folder-ico { animation-play-state: paused; } /* ===== окно «внутри компьютера» ===== */ .pjw { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); } .pjw-bg { position: absolute; inset: 0; background: rgba(8, 5, 16, .7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } /* во время полёта размытые тени ноутбука не рисуем: увеличенные в несколько раз, они пересчитывались бы на каждом кадре */ .mb-shadow, .mb-apple { transition: opacity .35s; } .mb.sucking .mb-shadow, .mb.sucking .mb-apple { opacity: 0; transition-duration: .2s; } /* на телефоне — без размытия фона под окном: поверх летящего ноутбука оно пересчитывается каждый кадр и даёт рывки при закрытии */ @media (max-width: 760px), (pointer: coarse) { .pjw-bg { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 5, 16, .9); } } .pjw-win { position: relative; width: min(1500px, 97vw); height: min(940px, 95vh); display: flex; flex-direction: column; padding: 14px; border-radius: 28px; background: linear-gradient(170deg, #34303d, #17151d 45%, #0f0e13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(0, 0, 0, .7), 0 60px 140px -30px rgba(124, 92, 255, .55); transform-origin: 50% 50%; will-change: transform; } .pjw-notch { position: absolute; z-index: 6; left: 50%; top: 14px; translate: -50% 0; width: 160px; height: 26px; border-radius: 0 0 14px 14px; background: #08070b; } .pjw-notch::after { content: ""; position: absolute; left: 50%; top: 45%; width: 7px; height: 7px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a3d7a, #0d0a18); } .pjw-screen { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 90% at 15% 0%, #2b1d55, #120c22 60%, #0b0815); } .pjw-bar { flex: none; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: rgba(255, 255, 255, .035); border-bottom: 1px solid rgba(183, 141, 242, .14); } .pjw-bar i { width: 12px; height: 12px; border-radius: 50%; background: #febc2e; } .pjw-bar i:first-child { background: #ff5f57; cursor: pointer; } .pjw-bar i:nth-child(3) { background: #28c840; } .pjw-bar span { margin-left: 10px; font: 500 12px var(--mono); color: rgba(217, 204, 255, .6); } .pjw-x { position: absolute; z-index: 7; right: 16px; top: 54px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, rgba(143, 114, 255, .55), rgba(70, 45, 170, .55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(183, 141, 242, .5), 0 8px 26px -8px rgba(124, 92, 255, .9); transition: transform .5s var(--spring); } .pjw-x svg { width: 22px; height: 22px; } .pjw-x:hover { transform: rotate(90deg) scale(1.06); }.pjw-win .showcase { flex: 1; min-height: 0; height: auto; margin: 0; gap: 0; grid-template-columns: 310px minmax(0, 1fr); } .pjw-win .pl { padding: 18px 12px 30px; background: rgba(255, 255, 255, .025); border-right: 1px solid rgba(183, 141, 242, .13); } .pjw-win .pv { border-radius: 0; background: none; box-shadow: none; } @media (max-width: 760px) { .pjw { padding: 0; display: block; } .pjw-win { width: 100%; height: 100%; min-width: 0; border-radius: 0; padding: 8px; } .pjw-screen, .pjw-win .showcase, .pjw-win .pv { min-width: 0; } .pjw-win .pl { max-width: 100%; } .pjw-bar span { display: none; } .pjw-notch { width: 110px; height: 20px; top: 8px; } .pjw-x { top: 8px; right: 8px; width: 46px; height: 46px; } .pjw-win .showcase { display: flex; flex-direction: column; overflow-y: auto; gap: 14px; padding: 14px 16px 24px; } .pjw-win .pl { flex: none; padding: 4px 0; background: none; border: 0; } .pjw-win .pv { flex: none; border-radius: 22px; background: linear-gradient(165deg, rgba(100, 75, 191, .32), rgba(35, 21, 64, .6)); box-shadow: inset 0 0 0 1px rgba(183, 141, 242, .3); } .mb { --w: min(80vw, 420px); margin-top: 40px; margin-bottom: 100px; } .mb-hint { left: 50%; right: auto; top: calc(100% + 34px); bottom: auto; width: max-content; translate: -50% 0; text-align: center; } .mb-hint-label { margin-left: 0; padding: 12px 26px; font-size: 17px; } .mb-hint-arrow { display: none; } } @media (prefers-reduced-motion: reduce) { .mb-lid, .mb-ui { transition: none; } .mb-cursor, .mb-ripple, .mb-folder-ico, .mb-hint-arrow .arr, .mb-hint-label, .mb-hint-label::after { animation: none !important; } } /* ===== студентам: пакет к защите + примеры + путь ===== */ .stu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; margin-top: 26px; align-items: stretch; } .stu-pack { position: relative; padding: 24px 26px 22px; border-radius: 26px; overflow: hidden; background: linear-gradient(rgba(183, 141, 242, .07) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(183, 141, 242, .07) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(165deg, rgba(100, 75, 191, .3), rgba(35, 21, 64, .6) 55%, rgba(20, 12, 38, .8)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(183, 141, 242, .3), 0 30px 70px -30px rgba(124, 92, 255, .6); } .stu-pack-head { display: flex; justify-content: space-between; align-items: baseline; } .stu-pack-head .mono { color: var(--lav); } .stu-pct { font: 900 34px/1 var(--display); font-variation-settings: "SOFT" 100; color: #fff; font-variant-numeric: tabular-nums; } .stu-pct b { font-weight: inherit; } .stu-bar { height: 6px; margin: 12px 0 14px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; } .stu-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--lav), #e0a8ff); box-shadow: 0 0 14px var(--lav); transition: width 2.3s cubic-bezier(.4, 0, .2, 1) .3s; } .stu.go .stu-bar i { width: 100%; } .stu-list { display: grid; gap: 4px; } .stu-list li { display: flex; gap: 22px; align-items: flex-start; padding: 7px 0; } .stu-list li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .stu-list b { font: 700 15.5px/1.25 var(--body); color: var(--text); } .stu-list li span:not(.stu-check) { font-size: 13.5px; color: var(--muted); line-height: 1.4; } .stu-check { position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px rgba(183, 141, 242, .55); transition: background .35s, box-shadow .35s; transition-delay: calc(.4s + var(--i) * .38s); } .stu-check::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #160d2e; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .4s var(--spring); transition-delay: calc(.5s + var(--i) * .38s); } .stu.go .stu-check { background: linear-gradient(135deg, #CDAEF7, var(--lav)); box-shadow: 0 0 12px rgba(183, 141, 242, .7); } .stu.go .stu-check::after { transform: rotate(45deg) scale(1); } .stu-stamp { position: absolute; right: 14px; bottom: 28px; padding: 8px 16px; border-radius: 10px; font: 900 26px/1 var(--display); font-variation-settings: "SOFT" 100; letter-spacing: .06em; text-transform: uppercase; color: #e0a8ff; border: 3px solid currentColor; box-shadow: 0 0 24px rgba(224, 168, 255, .45), inset 0 0 14px rgba(224, 168, 255, .3); opacity: 0; transform: rotate(-14deg) scale(2.4); pointer-events: none; transition: opacity .25s ease 2.9s, transform .45s cubic-bezier(.3, 1.6, .5, 1) 2.9s; } .stu.go .stu-stamp { opacity: .92; transform: rotate(-14deg) scale(1); } .stu-side { display: flex; flex-direction: column; gap: 16px; } .stu-block { padding: 18px 20px; border-radius: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px var(--line); } .stu-block > .mono { display: block; margin-bottom: 12px; color: var(--lav); } .stu-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .stu-ex { display: flex; flex-direction: column; gap: 3px; text-align: left; transition: transform .5s var(--spring); } .stu-ex-img { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; margin-bottom: 6px; box-shadow: inset 0 0 0 1px rgba(183, 141, 242, .3), 0 10px 24px -12px rgba(0, 0, 0, .8); } .stu-ex-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .stu-ex b { font: 700 14.5px var(--body); color: var(--text); } .stu-ex > span:last-child { font-size: 12.5px; color: var(--muted); line-height: 1.3; } .stu-ex:hover { transform: translateY(-3px); } .stu-ex:hover .stu-ex-img img { transform: scale(1.06); } .stu-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .stu-steps::before, .stu-steps::after { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 2px; border-radius: 2px; background: rgba(183, 141, 242, .18); } .stu-steps::after { right: auto; width: 0; background: linear-gradient(90deg, var(--violet), var(--lav)); box-shadow: 0 0 10px var(--lav); transition: width 1.6s var(--ease) .6s; } .stu.go .stu-steps::after { width: calc(100% - 28px); } .stu-steps li { position: relative; display: flex; flex-direction: column; gap: 3px; } .stu-node { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; font: 500 12px var(--mono); color: var(--muted); background: #1a1230; box-shadow: inset 0 0 0 1px rgba(183, 141, 242, .4); transition: background .4s, color .4s, box-shadow .4s; transition-delay: calc(.6s + var(--i) * .4s); } .stu.go .stu-node { background: var(--lav); color: var(--ink); box-shadow: 0 0 16px rgba(183, 141, 242, .8); } .stu-steps b { font: 700 14.5px var(--body); color: var(--text); } .stu-steps li > span:last-child { font-size: 12.5px; color: var(--muted); line-height: 1.35; } .stu-cta { display: flex; align-items: center; gap: 18px; padding: 4px 4px 0; } .stu-cta .btn { flex: none; } .stu-note { font-size: 13.5px; color: var(--muted); line-height: 1.45; } @media (max-width: 980px) { .stu { grid-template-columns: 1fr; } } @media (max-width: 620px) { .stu-examples { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .stu-ex > span:last-child { display: none; } .stu-steps { grid-template-columns: 1fr 1fr; row-gap: 16px; } .stu-steps::before, .stu-steps::after { display: none; } .stu-cta { flex-direction: column; align-items: flex-start; } .stu-pack { padding-bottom: 78px; } .stu-stamp { font-size: 20px; right: 18px; bottom: 20px; } } @media (prefers-reduced-motion: reduce) { .stu * { transition-delay: 0s !important; } } /* ===== как работаю: закреплённый блок, шаги меняются прокруткой ===== */ #process { padding: 0 var(--gut); } .pr-scroll { position: relative; height: 320vh; } .pr-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 58px 0 24px; } .pr-sticky .pj-head .am-word { width: min(560px, 76%); } .pr-rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(900px, 100%); margin: 26px auto 28px; } .pr-line { position: absolute; left: 12.5%; right: 12.5%; top: 18px; height: 2px; border-radius: 2px; background: rgba(183, 141, 242, .16); } .pr-line i { display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--violet), var(--lav), #e0a8ff); box-shadow: 0 0 14px var(--lav); } .pr-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; } .pr-node span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 500 12px var(--mono); color: var(--muted); background: #150e28; box-shadow: inset 0 0 0 1px rgba(183, 141, 242, .35); transition: background .45s, color .45s, box-shadow .45s, transform .5s var(--spring); } .pr-node b { font: 600 13px var(--body); color: var(--muted); transition: color .4s; } .pr-node.done span { background: linear-gradient(135deg, #CDAEF7, var(--lav)); color: var(--ink); box-shadow: 0 0 14px rgba(183, 141, 242, .6); } .pr-node.on span { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(183, 141, 242, .18), 0 0 24px rgba(183, 141, 242, .9); } .pr-node.on b, .pr-node.done b { color: var(--text); } .pr-stage { position: relative; height: clamp(300px, 40vh, 380px); } .pr-step { position: absolute; inset: 0; display: grid; grid-template-columns: clamp(170px, 19vw, 300px) minmax(0, 1fr) minmax(0, 400px); align-items: center; gap: clamp(20px, 3.5vw, 48px); opacity: 0; transform: translateY(40px) scale(.98); filter: blur(8px); pointer-events: none; transition: opacity .6s var(--ease), transform .8s var(--ease), filter .6s var(--ease); } .pr-step.past { transform: translateY(-40px) scale(.98); } .pr-step.on { opacity: 1; transform: none; filter: none; pointer-events: auto; } .pr-num { font: 900 clamp(110px, 13vw, 210px)/1 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; letter-spacing: -.04em; padding: .04em .14em .06em .02em; margin: -.04em -.14em -.06em -.02em; /* запас, чтобы градиентный текст не обрезался по краям цифр */ background: linear-gradient(180deg, #ffffff 0%, var(--lav) 45%, var(--violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(183, 141, 242, .45)); } .pr-text h3 { font: 800 clamp(26px, 2.8vw, 40px)/1.08 var(--body); letter-spacing: -.025em; text-wrap: balance; } .pr-text p { margin-top: 14px; color: var(--muted); font-size: 17px; max-width: 42ch; } .pr-vis { position: relative; padding: 18px; border-radius: 22px; height: 250px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, rgba(100, 75, 191, .3), rgba(35, 21, 64, .55) 60%, rgba(20, 12, 38, .75)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(183, 141, 242, .3), 0 30px 60px -30px rgba(124, 92, 255, .6); } .pr-step.on .pr-vis > * { animation: visIn .6s var(--ease) both; } .pr-step.on .pr-vis > *:nth-child(2) { animation-delay: .15s; } .pr-step.on .pr-vis > *:nth-child(3) { animation-delay: .3s; } .pr-step.on .pr-vis > *:nth-child(4) { animation-delay: .45s; } .pr-step.on .pr-vis > *:nth-child(5) { animation-delay: .6s; } @keyframes visIn { from { opacity: 0; transform: translateY(10px); } } .pr-chat { display: flex; flex-direction: column; gap: 8px; justify-content: center; } .pv-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; font-size: 14px; line-height: 1.4; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } .pv-msg.file { font: 500 12.5px var(--mono); color: var(--lav); } .pv-msg.out { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: linear-gradient(135deg, rgba(143, 114, 255, .6), rgba(100, 75, 191, .55)); color: #fff; } .pr-est .mono { color: var(--lav); } .pr-est ul { margin: 12px 0; display: grid; gap: 8px; } .pr-est li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; } .pr-est li i { width: 16px; height: 16px; border-radius: 5px; background: var(--lav); box-shadow: 0 0 10px rgba(183, 141, 242, .6); position: relative; } .pr-est li i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #160d2e; border-width: 0 2px 2px 0; transform: rotate(45deg); } .pr-est-row { display: flex; justify-content: space-between; padding: 9px 0 0; margin-top: 8px; border-top: 1px dashed rgba(183, 141, 242, .25); font-size: 14px; color: var(--muted); } .pr-est-row b { color: #fff; font-weight: 700; } .pr-ver { padding: 0; overflow: hidden; } .pr-ver-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(183, 141, 242, .15); } .pr-ver-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; } .pr-ver-bar i:nth-child(2) { background: #febc2e; } .pr-ver-bar i:nth-child(3) { background: #28c840; } .pr-ver-bar span { margin-left: 8px; font: 500 11px var(--mono); color: var(--muted); } .pr-ver-body { display: flex; flex-direction: column; gap: 10px; padding: 18px; } .sk { height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(183, 141, 242, .25), rgba(183, 141, 242, .1)); } .w60 { width: 60%; } .w90 { width: 90%; } .w40 { width: 40%; } .pr-ver-btn { width: 110px; height: 30px; border-radius: 999px; margin-top: 6px; background: linear-gradient(135deg, #8f72ff, var(--violet)); } .pr-ver-tag { position: absolute; right: 14px; top: 42px; padding: 5px 10px; border-radius: 999px; font: 500 11px var(--mono); color: #fff; background: rgba(143, 114, 255, .45); } .pr-ver-note { position: absolute; right: 14px; bottom: 14px; padding: 8px 12px; border-radius: 12px 12px 4px 12px; font-size: 13px; background: #f3edff; color: #1a0f3a; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); } .pr-term { padding: 0; overflow: hidden; background: #0c0816; } .pr-term-bar { display: flex; gap: 6px; height: 30px; align-items: center; padding: 0 12px; background: rgba(255, 255, 255, .04); } .pr-term-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; } .pr-term-bar i:nth-child(2) { background: #febc2e; } .pr-term-bar i:nth-child(3) { background: #28c840; } .pr-term code { display: block; padding: 6px 18px; font: 500 13.5px var(--mono); color: #e6defa; } .pr-term code:nth-of-type(1) { padding-top: 16px; } .pr-term code span { color: var(--lav); } .pr-term code.ok { color: #9ef0c8; } @media (max-width: 860px) { .pr-scroll { height: 300vh; } .pr-sticky { padding-top: 76px; } .pr-rail { margin: 16px auto 18px; } .pr-node b { font-size: 11px; text-align: center; } .pr-stage { height: auto; min-height: 430px; } .pr-step { grid-template-columns: 1fr; align-content: start; gap: 12px; } .pr-num { font-size: 72px; } .pr-text p { font-size: 15px; margin-top: 8px; } .pr-vis { min-height: 0; height: auto; } .pr-sticky .pj-sub { display: none; } } @media (prefers-reduced-motion: reduce) { .pr-step { transition: none; } } /* ===== контакт: длинная стеклянная надпись + место для чиби ===== */ .ct { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 0 10px; isolation: isolate; } .ct::before { /* мягкое свечение-подсветка сцены */ content: ""; position: absolute; z-index: -1; left: 50%; top: 55%; width: min(1100px, 120%); height: 520px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 92, 255, .38), rgba(49, 31, 115, .2) 55%, transparent 75%); filter: blur(10px); animation: breathe 7s ease-in-out infinite; } .ct-head { position: relative; width: 100%; max-width: 940px; } .ct-t { word-spacing: 34px; } .ct-word { display: block; width: 100%; } /* чиби сидит в просвете заголовка; координаты посадки считает app.js (--cx, --cy, --ch) */ /* .ct-chibi — точка посадки (середина сиденья качелей); качели раскачиваются вокруг точки подвеса высоко вверху */ .ct-chibi { --ch: 220px; --rope: calc(var(--ch) * 1.15); position: absolute; z-index: 2; left: var(--cx, 50%); top: var(--cy, 0px); width: 0; height: 0; pointer-events: none; opacity: 0; transform-origin: 0 calc(var(--rope) * -1); animation: swing 3.8s ease-in-out infinite; } @keyframes swing { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } } .ct-chibi video, .ct-chibi .ct-sprite { position: absolute; z-index: 2; left: calc(var(--ch) * -.4223); top: calc(var(--ch) * -.65); height: var(--ch); aspect-ratio: 720 / 902; display: block; /* без filter: тень по силуэту пересчитывалась на каждом кадре видео; свечение даёт ореол ::before */ } .ct-chibi::before { /* мягкий ореол за фигуркой, как у чиби в hero */ content: ""; position: absolute; z-index: -1; left: 0; top: calc(var(--ch) * -.23); width: calc(var(--ch) * .95); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 92, 255, .32), rgba(49, 31, 115, .14) 55%, transparent 75%); animation: breathe 6s ease-in-out infinite; } /* сиденье: стеклянная глянцевая планка в цвет букв */ .ct-plank { position: absolute; z-index: 1; left: 0; top: calc(var(--ch) * -.012); width: calc(var(--ch) * .58); height: calc(var(--ch) * .036); translate: -50% 0; border-radius: 999px; background: linear-gradient(180deg, #f1e9ff 0%, #b79cf5 30%, #7a5ad8 65%, #3d2690 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 3px rgba(25, 12, 70, .6), 0 0 18px rgba(124, 92, 255, .6), 0 8px 14px -6px rgba(0, 0, 0, .7); } /* верёвки: тонкие светящиеся нити, тают кверху */ .ct-rope { position: absolute; z-index: 0; bottom: calc(var(--ch) * -.004); width: 1.5px; height: var(--rope); border-radius: 2px; background: linear-gradient(0deg, rgba(222, 206, 255, .95), rgba(183, 141, 242, .6) 45%, rgba(183, 141, 242, 0)); box-shadow: 0 0 6px rgba(183, 141, 242, .6); } .ct-rope.l { left: calc(var(--ch) * -.27); } .ct-rope.r { left: calc(var(--ch) * .27); } /* лента кадров для Safari/iPhone: без filter (тень пересчитывалась бы на каждом кадре), кадр — сдвигом картинки */ .ct-chibi .ct-sprite { overflow: hidden; filter: none; contain: layout paint; } .ct-chibi .ct-sprite img { position: absolute; left: 0; top: 0; width: 1100%; height: 1100%; max-width: none; will-change: transform; backface-visibility: hidden; } /* появляется после надписи: мягко «приземляется» на своё место */ /* появление: качели спускаются сверху на верёвках, чуть пружинят и раскачиваются с затуханием, переходя в обычное покачивание */ .glass-reveal.in .ct-chibi.ready { animation: chibiDrop 1.7s cubic-bezier(.22, .9, .3, 1) .9s both, chibiSwingIn 2.6s cubic-bezier(.3, .6, .4, 1) .9s both, swing 3.8s ease-in-out 3.5s infinite; } @keyframes chibiDrop { 0% { opacity: 0; translate: 0 calc(var(--ch) * -1.4); } 25% { opacity: 1; } 62% { translate: 0 calc(var(--ch) * .05); } 80% { translate: 0 calc(var(--ch) * -.015); } 100% { opacity: 1; translate: 0 0; } } @keyframes chibiSwingIn { 0% { rotate: 0deg; } 30% { rotate: 7deg; } 52% { rotate: -5deg; } 70% { rotate: 3.2deg; } 86% { rotate: -2.2deg; } 100% { rotate: -1.5deg; } } @media (prefers-reduced-motion: reduce) { .glass-reveal.in .ct-chibi.ready, .ct-chibi { animation: none; opacity: 1; } } .pf-ru { font-family: var(--body); font-weight: 900; letter-spacing: -6px; } .ct-sub { margin-top: 22px; max-width: 60ch; color: var(--muted); font-size: 17px; } .ct-cta { justify-content: center; margin-top: 28px; } .ct-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; } .ct-tags li { padding: 8px 15px; border-radius: 999px; font: 600 13.5px var(--body); color: rgba(230, 222, 250, .8); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); } .copy { display: inline-flex; align-items: center; gap: 10px; } .copy .ok { display: none; } .copy.done .ok { display: inline; } .copy.done .nk { display: none; } /* ===== работы ===== */ .filters { position: relative; display: inline-flex; flex-wrap: nowrap; gap: 4px; padding: 6px; border-radius: 999px; margin-bottom: 28px; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .filters::-webkit-scrollbar { display: none; } .filters button { position: relative; z-index: 1; height: 42px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); transition: color .35s; white-space: nowrap; } .filters button:hover { color: var(--text); } .filters button[aria-pressed="true"] { color: var(--ink); } .filters button sup { font: 500 10px var(--mono); margin-left: 4px; opacity: .7; } .f-pill { position: absolute; z-index: 0; border-radius: 999px; background: linear-gradient(135deg, #CDAEF7, var(--lav) 50%, #9C78E8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 24px -6px rgba(183, 141, 242, .6); transition: left .55s var(--spring), top .55s var(--spring), width .55s var(--spring), height .4s; } .works { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } .card { grid-column: span 2; position: relative; display: flex; flex-direction: column; text-align: left; border-radius: 28px; overflow: hidden; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--spring), opacity .45s var(--ease), box-shadow .5s; } .card.wide { grid-column: span 3; } .card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 40px 80px -30px rgba(100, 75, 191, .7); } .card.out { opacity: 0; transform: scale(.92); } .card-media { position: relative; aspect-ratio: 16 / 10; margin: 8px 8px 0; border-radius: 21px; overflow: hidden; background: var(--plum); } .card.wide .card-media { aspect-ratio: 16 / 9; } .card-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04) translate(calc(var(--ry, 0deg) / 1deg * -1px), calc(var(--rx, 0deg) / 1deg * 1px)); transition: transform 1.1s var(--ease), filter .8s; filter: saturate(.85) brightness(.9); } .card:hover .card-media img { transform: scale(1.1); filter: saturate(1.05) brightness(1); } .card-media.contain img { object-fit: contain; padding: 14%; } .card-media.contain { background: radial-gradient(circle at 50% 40%, var(--indigo), var(--plum) 70%); } .card-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .18), transparent 40%), linear-gradient(180deg, transparent 50%, rgba(13, 13, 13, .45)); opacity: 0; transition: opacity .5s; } .card:hover .card-media::after { opacity: 1; } .card-tag { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 6px 11px; border-radius: 999px; font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text); background: rgba(20, 12, 38, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(183, 141, 242, .3); } .card-body { display: flex; align-items: center; gap: 14px; padding: 18px 20px 20px; } .card-body > div { min-width: 0; flex: 1; } .card h3 { font: 800 20px/1.15 var(--body); letter-spacing: -.02em; } .card p { color: var(--muted); font-size: 14.5px; margin-top: 4px; } .card-go { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(183, 141, 242, .25); transition: background .4s, color .4s, transform .6s var(--spring); } .card-go svg { width: 18px; height: 18px; transition: transform .6s var(--spring); } .card:hover .card-go { background: var(--lav); color: var(--ink); transform: scale(1.08); } .card:hover .card-go svg { transform: rotate(-45deg); } /* чат-заглушка для ботов */ .chat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 18px; background: radial-gradient(circle at 80% 0%, var(--indigo), var(--plum) 60%, #170d2b); font-size: 13px; } .msg { max-width: 82%; padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); animation: pop 6s var(--ease) infinite; animation-delay: calc(var(--i) * .6s); } .msg s { opacity: .55; } .msg.sys { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: rgba(183, 141, 242, .22); color: #EDE3FF; font: 500 11.5px/1.35 var(--mono); } .msg.ok { background: rgba(124, 242, 184, .16); color: #C9FBE3; } @keyframes pop { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } } /* ===== студентам ===== */ .students { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; } .st-main { padding: clamp(24px, 3.4vw, 44px); border-radius: 34px; position: sticky; top: 100px; } .st-main h3 { font: 800 clamp(26px, 2.8vw, 36px)/1.1 var(--body); letter-spacing: -.025em; } .st-main > p { color: var(--muted); margin-top: 14px; } .st-examples { margin-top: 26px; display: grid; gap: 8px; } .st-ex { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 18px; text-align: left; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); transition: background .4s, transform .5s var(--spring); } .st-ex:hover { background: rgba(183, 141, 242, .1); transform: translateX(6px); } .st-ex img { width: 54px; height: 40px; border-radius: 9px; object-fit: cover; flex: none; } .st-ex b { display: block; font-weight: 700; } .st-ex span { display: block; font-size: 13px; color: var(--muted); } .st-ex small { margin-left: auto; font: 500 11px var(--mono); color: var(--dim); text-align: right; } .st-main .btn { margin-top: 24px; } .st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .st-item { padding: 22px; border-radius: 24px; transition: transform .6s var(--spring); } .st-item:hover { transform: translateY(-4px); } .st-item .k { font: 500 11px var(--mono); color: var(--lav); letter-spacing: .08em; text-transform: uppercase; } .st-item h4 { margin: 10px 0 6px; font: 700 18px/1.2 var(--body); } .st-item p { color: var(--muted); font-size: 14.5px; line-height: 1.5; } .st-flow { grid-column: 1 / -1; padding: 22px; border-radius: 24px; } .st-flow ol { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: s; } .st-flow li { counter-increment: s; font-size: 14px; color: var(--muted); } .st-flow li b { display: block; color: var(--text); font-weight: 700; margin-bottom: 4px; } .st-flow li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%; font: 500 12px var(--mono); color: var(--ink); background: var(--lav); } /* ===== процесс ===== */ .process { position: relative; display: grid; gap: 18px; padding-left: 64px; } .process-line { position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: var(--line); border-radius: 2px; } .process-line i { position: absolute; left: 0; top: 0; width: 100%; height: var(--p, 0%); background: linear-gradient(var(--violet), var(--lav)); border-radius: 2px; box-shadow: 0 0 16px var(--lav); } .process-line b { position: absolute; left: 50%; top: var(--p, 0%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(183, 141, 242, .3), 0 0 26px 6px var(--lav); } .step { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 12px 40px; padding: 28px 30px; border-radius: 28px; transition: transform .6s var(--spring), opacity .6s; } .step::before { content: attr(data-n); position: absolute; left: -64px; top: 26px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font: 500 13px var(--mono); color: var(--muted); background: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: all .5s var(--ease); } .step.on::before { color: var(--ink); background: var(--lav); box-shadow: 0 0 24px rgba(183, 141, 242, .7); } .step h3 { font: 800 24px/1.15 var(--body); letter-spacing: -.02em; } .step p { color: var(--muted); } .step:hover { transform: translateX(8px); } /* ===== стек: шар с областями + легенда по бокам ===== */ .stack2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 40px); margin-top: 10px; } .sphere { --size: min(540px, 42vw, calc(100vh - 330px)); position: relative; width: var(--size); aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: pan-y; user-select: none; isolation: isolate; z-index: 0; } .sphere::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; z-index: -2; background: radial-gradient(circle at 35% 30%, rgba(143, 114, 255, .32), rgba(49, 31, 115, .22) 50%, transparent 72%); filter: blur(12px); } .sphere:active { cursor: grabbing; } .sphere-grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .tag { --gc: var(--lav); position: absolute; left: 50%; top: 50%; white-space: nowrap; padding: 7px 13px; border-radius: 999px; font: 500 13.5px var(--mono); color: var(--text); background: color-mix(in srgb, var(--gc) 16%, rgba(20, 12, 38, .85)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 0 0 1px color-mix(in srgb, var(--gc) 55%, transparent); will-change: transform, opacity; transition: background .3s, color .3s, filter .4s; } .tag:hover, .tag.hl { background: var(--gc); color: var(--ink); } .tag.dim { filter: saturate(.3) brightness(.55); } .tag-label { position: absolute; left: 50%; top: 50%; white-space: nowrap; font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gc); text-shadow: 0 0 12px var(--gc); pointer-events: none; } .tag-label.dim { opacity: .15 !important; } .sk-legend { display: flex; flex-direction: column; gap: 14px; } .sk-left { align-items: flex-end; } .sk-right { align-items: flex-start; } .sk-group { --gc: var(--lav); width: min(320px, 100%); min-height: 118px; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px 18px; border-radius: 22px; text-align: left; background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px var(--line); transition: background .45s var(--ease), box-shadow .45s var(--ease), transform .5s var(--spring); } .sk-top { display: flex; align-items: center; gap: 10px; } .sk-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 12px var(--gc); flex: none; } .sk-name { font: 700 16px var(--body); color: var(--text); } .sk-count { font: 500 11px var(--mono); color: var(--muted); } .sk-count { margin-left: auto; } .sk-items { display: flex; flex-wrap: wrap; gap: 5px; } .sk-items i { font: 500 11.5px var(--mono); font-style: normal; padding: 4px 9px; border-radius: 999px; color: rgba(230, 222, 250, .8); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 35%, transparent); transition: background .3s, color .3s; } .sk-items i.hl { background: var(--gc); color: var(--ink); } .sk-group:hover, .sk-group.on { background: linear-gradient(160deg, color-mix(in srgb, var(--gc) 26%, transparent), rgba(35, 21, 64, .35)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px color-mix(in srgb, var(--gc) 60%, transparent), 0 12px 34px -12px var(--gc); } .sk-left .sk-group.on { transform: translateX(-4px); } .sk-right .sk-group.on { transform: translateX(4px); } /* ===== контакт ===== */ .contact { position: relative; overflow: hidden; border-radius: 40px; padding: clamp(32px, 6vw, 80px); text-align: center; } .contact .sec-word { display: block; margin-bottom: 10px; color: var(--text); background: none; font-size: clamp(56px, 10vw, 150px); } .contact .sec-word em { font-style: italic; color: var(--lav); } .contact h2 { font: 800 clamp(26px, 3.2vw, 40px)/1.1 var(--body); letter-spacing: -.025em; } .contact p { color: var(--muted); max-width: 52ch; margin: 14px auto 0; } .contact .cta { justify-content: center; } .copy { display: inline-flex; align-items: center; gap: 10px; } .copy .ok { display: none; } .copy.done .ok { display: inline; } .copy.done .nk { display: none; } /* ===== подвал: светящийся горизонт, соцсети-пилюли, стеклянный знак ===== */ .ftr { position: relative; margin-top: 54px; padding: clamp(90px, 9vw, 130px) 0 26px; overflow: hidden; isolation: isolate; } .ftr-horizon { position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 900px; pointer-events: none; } .ftr-sky { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 520px; }/* звёзды: случайно разбросаны (app.js), каждая медленно проявляется бледной точкой и гаснет в своём ритме */ .ftr-stars { position: absolute; left: 25%; right: 25%; top: 0; height: 380px; } .ftr-stars i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #efe8ff; box-shadow: 0 0 5px rgba(205, 184, 248, .7); opacity: 0; animation: twinkle var(--d) ease-in-out var(--dl) infinite; } @keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: var(--o); transform: none; } } @media (prefers-reduced-motion: reduce) { .ftr-stars i { animation: none; opacity: calc(var(--o) * .6); } }.ftr-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .sp { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 999px; overflow: hidden; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px var(--line); transition: transform .5s var(--spring), box-shadow .45s var(--ease), background .45s var(--ease); } .sp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(143, 114, 255, .38), rgba(70, 45, 170, .3)); opacity: 0; transition: opacity .45s var(--ease); } .sp > * { position: relative; z-index: 1; } .sp-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #8f72ff, var(--violet) 60%, var(--indigo)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px -6px rgba(124, 92, 255, .9); transition: transform .55s var(--spring); } .sp-ico svg { width: 19px; height: 19px; } .sp-txt { display: flex; flex-direction: column; line-height: 1.15; } .sp-txt b { font: 700 14.5px var(--body); color: var(--text); } .sp-txt span { font: 500 11px var(--mono); color: var(--muted); letter-spacing: .02em; } .sp-arrow { width: 14px; height: 14px; color: var(--lav); opacity: 0; transform: translate(-6px, 6px); transition: opacity .35s, transform .5s var(--spring); } .sp:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(183, 141, 242, .55), 0 14px 34px -12px rgba(124, 92, 255, .9); } .sp:hover::after { opacity: 1; } .sp:hover .sp-ico { transform: rotate(-12deg) scale(1.06); } .sp:hover .sp-arrow { opacity: 1; transform: none; } .ftr-glass { display: block; width: 100%; max-width: 1240px; margin: clamp(30px, 4vw, 50px) auto 0; } /* знак в подвале приглушён, чтобы не спорить с заголовками разделов; при наведении разгорается */ .glass-reveal.in .ftr-glass { animation: amInDim 1.8s var(--ease) forwards; } @keyframes amInDim { 0% { opacity: 0; transform: perspective(900px) translateY(46px) rotateX(78deg) scale(.94); } 72% { transform: perspective(900px) translateY(-4px) rotateX(-6deg); } 100% { opacity: .42; transform: perspective(900px) translateY(0) rotateX(0deg); } } .ftr-glass .pf-glow { opacity: .18; } .ftr-glass { transition: opacity .6s var(--ease), filter .6s var(--ease); } .ftr-bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; color: var(--dim); font-size: 13px; } .up { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); transition: color .3s; } .up:hover { color: var(--text); } .up svg { width: 16px; height: 16px; transition: transform .5s var(--spring); } .up:hover svg { transform: translateY(-4px); } @media (max-width: 620px) { .ftr-social { gap: 8px; } .sp { padding: 8px 12px 8px 8px; } .sp-ico { width: 34px; height: 34px; } .sp-txt span { display: none; } } /* ===== модалка работы ===== */ .modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); } .modal-bg { position: absolute; inset: 0; background: rgba(8, 5, 16, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .45s; } .modal.show .modal-bg { opacity: 1; } .modal-panel { position: relative; width: min(1040px, 100%); max-height: 100%; border-radius: 34px; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(160deg, rgba(49, 31, 115, .55), rgba(20, 12, 38, .82) 50%, rgba(13, 13, 13, .9)); opacity: 0; transform: translateY(40px) scale(.94); filter: blur(10px); transition: opacity .5s var(--ease), transform .7s var(--spring), filter .5s var(--ease); } .modal.show .modal-panel { opacity: 1; transform: none; filter: none; } .modal-scroll { overflow-y: auto; overscroll-behavior: contain; padding: clamp(20px, 3.4vw, 40px); scrollbar-width: thin; scrollbar-color: var(--violet) transparent; } .modal-x { position: absolute; z-index: 5; right: 16px; top: 16px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; transition: transform .6s var(--spring), background .3s; } .modal-x:hover { transform: rotate(90deg); background: rgba(255, 255, 255, .1); } .modal-x svg { width: 20px; height: 20px; } .m-head { display: flex; gap: 18px; align-items: center; padding-right: 56px; } .m-logo { width: 64px; height: 64px; border-radius: 18px; flex: none; box-shadow: 0 10px 30px -8px rgba(183, 141, 242, .5); } .m-head h2 { font: 800 clamp(28px, 4vw, 46px)/1.02 var(--body); letter-spacing: -.03em; } .m-head p { color: var(--muted); margin-top: 6px; } .m-gal { margin-top: 24px; } .m-shot { position: relative; border-radius: 22px; overflow: hidden; background: var(--plum); aspect-ratio: 16 / 9; } .m-shot img { width: 100%; height: 100%; object-fit: contain; animation: fadeIn .6s var(--ease); } .m-shot.chatbox { aspect-ratio: 16 / 7; } @keyframes fadeIn { from { opacity: 0; transform: scale(1.02); } } .m-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; } .m-thumbs button { flex: none; width: 92px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; opacity: .5; box-shadow: inset 0 0 0 1px var(--line); transition: opacity .3s, transform .4s var(--spring); } .m-thumbs button img { width: 100%; height: 100%; object-fit: cover; } .m-thumbs button[aria-current="true"], .m-thumbs button:hover { opacity: 1; transform: translateY(-2px); } .m-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; margin-top: 28px; } .m-desc { font-size: 17px; line-height: 1.65; } .m-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .m-links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; background: rgba(183, 141, 242, .14); box-shadow: inset 0 0 0 1px rgba(183, 141, 242, .35); transition: background .3s, color .3s, transform .4s var(--spring); } .m-links a:hover { background: var(--lav); color: var(--ink); transform: translateY(-2px); } .m-links svg { width: 14px; height: 14px; } .m-note { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); color: var(--muted); font-size: 14px; } .m-h { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lav); margin-bottom: 12px; } .m-done li { position: relative; padding: 0 0 12px 26px; color: var(--text); font-size: 15px; line-height: 1.5; } .m-done li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 10px; border-radius: 3px; rotate: 45deg; background: linear-gradient(135deg, var(--lav), var(--violet)); box-shadow: 0 0 10px rgba(183, 141, 242, .6); } .m-stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .m-stack span { padding: 7px 12px; border-radius: 999px; font: 500 12.5px var(--mono); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); } .m-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); } .m-next { display: flex; align-items: center; gap: 14px; text-align: left; padding: 8px 18px 8px 8px; border-radius: 999px; transition: background .3s; } .m-next:hover { background: rgba(255, 255, 255, .06); } .m-next small { display: block; font: 500 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .m-next b { font-weight: 700; } .m-next i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--lav); color: var(--ink); transition: transform .5s var(--spring); } .m-next:hover i { transform: translateX(4px); } .m-next i svg { width: 18px; height: 18px; } /* ===== адаптив ===== */ @media (max-width: 1080px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc { min-height: 300px; } .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card, .card.wide { grid-column: span 1; } .students { grid-template-columns: 1fr; } .st-main { position: relative; top: 0; } .stack2 { grid-template-columns: 1fr 1fr; } .stack2 .sphere { --size: min(520px, 86vw); grid-column: 1 / -1; grid-row: 1; justify-self: center; } .sk-left, .sk-right { align-items: stretch; text-align: left; } .sk-left .sk-top { flex-direction: row; } .sk-left .sk-count { margin-right: 0; margin-left: auto; } .sk-left .sk-items { justify-content: flex-start; } .sk-group { width: 100%; } .sk-left { grid-column: 1; grid-row: 2; } .sk-right { grid-column: 2; grid-row: 2; } .f1 { left: 0; } .f2 { right: 0; } .f3 { left: 2%; } } /* шесть пунктов меню не помещаются — раньше переходим на бургер */ @media (max-width: 1060px) { .nav, .hdr-bar > .btn { display: none; } .burger { display: block; margin-left: auto; } } /* мобильное меню: раскрывается плавно — выезжает и проявляется, пункты появляются по очереди */ @media (max-width: 1060px) { /* панель лежит поверх страницы (ничего не сдвигает) и раскрывается шторкой сверху вниз: анимируются только clip-path, transform и opacity — без пересчёта высоты и без размытия фона, поэтому плавно и на iPhone */ .mnav { display: flex; position: absolute; left: var(--gut); right: var(--gut); top: 100%; margin-top: 0; -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(170deg, rgba(40, 26, 84, .97), rgba(16, 11, 30, .98) 55%, rgba(26, 17, 52, .98)); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-14px); clip-path: inset(0 0 100% 0 round 28px); -webkit-clip-path: inset(0 0 100% 0 round 28px); /* закрытие — та же шторка в обратную сторону: пункты гаснут снизу вверх, затем панель плавно сворачивается */ transition: clip-path .6s cubic-bezier(.65, 0, .35, 1) .08s, -webkit-clip-path .6s cubic-bezier(.65, 0, .35, 1) .08s, transform .6s cubic-bezier(.65, 0, .35, 1) .08s, opacity .25s ease .45s, visibility 0s linear .7s; } .hdr.open .mnav { opacity: 1; visibility: visible; pointer-events: auto; transform: none; clip-path: inset(0 0 0 0 round 28px); -webkit-clip-path: inset(0 0 0 0 round 28px); transition: clip-path .7s cubic-bezier(.16, 1, .3, 1), -webkit-clip-path .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1), opacity .25s ease, visibility 0s; } .mnav a { opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .4s cubic-bezier(.65, 0, .35, 1); } .mnav a:nth-child(6) { transition-delay: .02s; } .mnav a:nth-child(5) { transition-delay: .04s; } .mnav a:nth-child(4) { transition-delay: .06s; } .mnav a:nth-child(3) { transition-delay: .08s; } .mnav a:nth-child(2) { transition-delay: .1s; } .mnav a:nth-child(1) { transition-delay: .12s; } .hdr.open .mnav a { opacity: 1; transform: none; transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1); } .hdr.open .mnav a:nth-child(1) { transition-delay: .08s; } .hdr.open .mnav a:nth-child(2) { transition-delay: .12s; } .hdr.open .mnav a:nth-child(3) { transition-delay: .16s; } .hdr.open .mnav a:nth-child(4) { transition-delay: .2s; } .hdr.open .mnav a:nth-child(5) { transition-delay: .24s; } .hdr.open .mnav a:nth-child(6) { transition-delay: .28s; } .hdr.open .mnav a:nth-child(7) { transition-delay: .32s; } } @media (max-width: 620px) { .hdr-bar { height: 58px; padding-left: 16px; --in: 7px; } } @media (max-width: 860px) { .hero-foot { grid-template-columns: 1fr; } .sec-head { grid-template-columns: 1fr; } .step { grid-template-columns: 1fr; } .m-grid { grid-template-columns: 1fr; } .hint { display: none; } } @media (max-width: 620px) { .stack2 { grid-template-columns: 1fr; } .sk-left, .sk-right { grid-column: 1; grid-row: auto; } .services, .works, .st-grid { grid-template-columns: 1fr; } .svc { min-height: 0; } .obj { height: 90px; } .st-flow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bust-wrap { height: 600px; } .pf-word { top: 2%; translate: 0 0; } .bust-zone { top: 56px; } .controls { bottom: 4px; } .chip { padding: 0 11px; } .chip .lbl { display: none; } .floaty { display: none; } .facts div { padding: 16px 14px; } .process { padding-left: 52px; } .process-line { left: 17px; } .step { padding: 22px; } .step::before { left: -52px; width: 36px; height: 36px; } .ribbons { height: 150px; } .track span { font-size: 22px; } .ribbon-b .track span { font-size: 14px; } .m-head { flex-direction: column; align-items: flex-start; } .st-ex small { display: none; } .ftr nav { grid-template-columns: 1fr 1fr; gap: 6px 24px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } .msg { animation: none !important; opacity: 1; } } /* разделы вне экрана: все их бесконечные анимации на паузе — видеокарта не работает впустую */ .off, .off *, .off *::before, .off *::after { animation-play-state: paused !important; } .track { will-change: transform; } /* цифры под первым экраном на телефоне: три ровные колонки — цифра сверху, подпись под ней */ @media (max-width: 620px) { .hf-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 360px; margin-inline: auto; } .hf-stats li { flex-direction: column; align-items: center; gap: 6px; padding: 4px 6px; } .hf-stats b { font-size: 30px; } .hf-stats li > :not(b) { font-size: 10px; letter-spacing: .12em; } } /* фигурки «Обо мне» на телефоне не показываем: им негде встать рядом с текстом, а телефону — меньше работы */ @media (max-width: 700px) { #aboutShapes { display: none; } }