From fd3034cc3e0942e09003f7d7013610dd90f6c89b Mon Sep 17 00:00:00 2001 From: wasrusgen Date: Wed, 3 Jun 2026 20:49:33 +0300 Subject: [PATCH] =?UTF-8?q?landing:=20=D0=BD=D0=B5=D0=BE=D0=BD=20=D0=B1?= =?UTF-8?q?=D0=B5=D0=B6=D0=B8=D1=82=20=D0=BF=D0=BE=20=D0=BF=D0=B5=D1=80?= =?UTF-8?q?=D0=B8=D0=BC=D0=B5=D1=82=D1=80=D1=83=20=D0=BA=D0=B0=D1=80=D1=82?= =?UTF-8?q?=D0=BE=D1=87=D0=BA=D0=B8=20(running=20fire=20=E2=80=94=20=D0=B2?= =?UTF-8?q?=D1=80=D0=B0=D1=89=D0=B0=D1=8E=D1=89=D0=B8=D0=B9=D1=81=D1=8F=20?= =?UTF-8?q?conic-gradient=20=D0=B2=20=D0=BC=D0=B0=D1=81=D0=BA=D0=B5-=D1=80?= =?UTF-8?q?=D0=B0=D0=BC=D0=BA=D0=B5,=20@property)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.8 (1M context) --- docs/consult_landing.html | 28 +++++++++++++++++++++++++--- docs/main.html | 28 +++++++++++++++++++++++++--- 2 files changed, 50 insertions(+), 6 deletions(-) diff --git a/docs/consult_landing.html b/docs/consult_landing.html index 130f531..5f2b699 100644 --- a/docs/consult_landing.html +++ b/docs/consult_landing.html @@ -124,7 +124,7 @@ background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 28px; transition: all .2s ease-in-out; } - .feature-card:hover { background: #233148; border-color: #10B981; box-shadow: 0 0 0 1px #10B981, 0 0 18px rgba(16,185,129,.5), 0 0 44px rgba(16,185,129,.22), 0 16px 40px rgba(0,0,0,.28); } + /* hover feature-card — см. общий блок «бегущий огонь» ниже */ .feature-icon { width: 48px; height: 48px; background: rgba(16,185,129,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; transition: transform .3s cubic-bezier(.2,.7,.3,1), background .3s, box-shadow .3s; } .feature-card:hover .feature-icon { transform: translateY(-2px) scale(1.08); background: rgba(16,185,129,0.18); box-shadow: 0 8px 22px rgba(16,185,129,.28); } .feature-card:hover .feature-icon svg { stroke: #10B981; } @@ -220,12 +220,34 @@ @keyframes drawPulse { to { stroke-dashoffset: 0; } } .pulse-chip svg polyline { stroke-dasharray: 70; stroke-dashoffset: 70; animation: drawPulse 1.4s ease-out .3s forwards; } - /* Спокойный hover карточек (timeweb-style: осветление фона + мягкая тень) */ + /* Hover карточек: осветление фона + мягкая тень */ .problem-card, .funnel-step, .demo-card { transition: all .2s ease-in-out; } - .problem-card:hover, .funnel-step:hover, .demo-card:hover { background: #233148; border-color: #10B981; box-shadow: 0 0 0 1px #10B981, 0 0 18px rgba(16,185,129,.5), 0 0 44px rgba(16,185,129,.22), 0 16px 40px rgba(0,0,0,.28); } + .feature-card:hover, .problem-card:hover, .funnel-step:hover, .demo-card:hover { + background: #233148; border-color: #2D3A52; + box-shadow: 0 0 26px rgba(16,185,129,.22), 0 16px 40px rgba(0,0,0,.28); + } + + /* «Бегущий огонь» — неон пробегает по периметру (вращающийся конический градиент в маске-рамке) */ + @property --nflow { syntax: ''; inherits: false; initial-value: 0deg; } + .feature-card, .problem-card, .funnel-step, .demo-card { position: relative; } + .feature-card::after, .problem-card::after, .funnel-step::after, .demo-card::after { + content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; + pointer-events: none; z-index: 2; opacity: 0; transition: opacity .25s ease; + background: conic-gradient(from var(--nflow), + transparent 0deg, transparent 250deg, + rgba(16,185,129,.25) 285deg, #10B981 320deg, #6EE7B7 340deg, #10B981 355deg, transparent 360deg); + -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); + mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); + -webkit-mask-composite: xor; mask-composite: exclude; + } + .feature-card:hover::after, .problem-card:hover::after, .funnel-step:hover::after, .demo-card:hover::after { + opacity: 1; animation: nflowRun 1.15s linear infinite; + } + @keyframes nflowRun { to { --nflow: 360deg; } } @media (prefers-reduced-motion: reduce) { .hero-content > *, .reveal, .pulse-chip, .pulse-chip svg polyline { animation: none !important; transition: none !important; opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important; } + .feature-card:hover::after, .problem-card:hover::after, .funnel-step:hover::after, .demo-card:hover::after { animation: none !important; background: #10B981; opacity: .9; } } diff --git a/docs/main.html b/docs/main.html index 130f531..5f2b699 100644 --- a/docs/main.html +++ b/docs/main.html @@ -124,7 +124,7 @@ background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 28px; transition: all .2s ease-in-out; } - .feature-card:hover { background: #233148; border-color: #10B981; box-shadow: 0 0 0 1px #10B981, 0 0 18px rgba(16,185,129,.5), 0 0 44px rgba(16,185,129,.22), 0 16px 40px rgba(0,0,0,.28); } + /* hover feature-card — см. общий блок «бегущий огонь» ниже */ .feature-icon { width: 48px; height: 48px; background: rgba(16,185,129,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; transition: transform .3s cubic-bezier(.2,.7,.3,1), background .3s, box-shadow .3s; } .feature-card:hover .feature-icon { transform: translateY(-2px) scale(1.08); background: rgba(16,185,129,0.18); box-shadow: 0 8px 22px rgba(16,185,129,.28); } .feature-card:hover .feature-icon svg { stroke: #10B981; } @@ -220,12 +220,34 @@ @keyframes drawPulse { to { stroke-dashoffset: 0; } } .pulse-chip svg polyline { stroke-dasharray: 70; stroke-dashoffset: 70; animation: drawPulse 1.4s ease-out .3s forwards; } - /* Спокойный hover карточек (timeweb-style: осветление фона + мягкая тень) */ + /* Hover карточек: осветление фона + мягкая тень */ .problem-card, .funnel-step, .demo-card { transition: all .2s ease-in-out; } - .problem-card:hover, .funnel-step:hover, .demo-card:hover { background: #233148; border-color: #10B981; box-shadow: 0 0 0 1px #10B981, 0 0 18px rgba(16,185,129,.5), 0 0 44px rgba(16,185,129,.22), 0 16px 40px rgba(0,0,0,.28); } + .feature-card:hover, .problem-card:hover, .funnel-step:hover, .demo-card:hover { + background: #233148; border-color: #2D3A52; + box-shadow: 0 0 26px rgba(16,185,129,.22), 0 16px 40px rgba(0,0,0,.28); + } + + /* «Бегущий огонь» — неон пробегает по периметру (вращающийся конический градиент в маске-рамке) */ + @property --nflow { syntax: ''; inherits: false; initial-value: 0deg; } + .feature-card, .problem-card, .funnel-step, .demo-card { position: relative; } + .feature-card::after, .problem-card::after, .funnel-step::after, .demo-card::after { + content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; + pointer-events: none; z-index: 2; opacity: 0; transition: opacity .25s ease; + background: conic-gradient(from var(--nflow), + transparent 0deg, transparent 250deg, + rgba(16,185,129,.25) 285deg, #10B981 320deg, #6EE7B7 340deg, #10B981 355deg, transparent 360deg); + -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); + mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); + -webkit-mask-composite: xor; mask-composite: exclude; + } + .feature-card:hover::after, .problem-card:hover::after, .funnel-step:hover::after, .demo-card:hover::after { + opacity: 1; animation: nflowRun 1.15s linear infinite; + } + @keyframes nflowRun { to { --nflow: 360deg; } } @media (prefers-reduced-motion: reduce) { .hero-content > *, .reveal, .pulse-chip, .pulse-chip svg polyline { animation: none !important; transition: none !important; opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important; } + .feature-card:hover::after, .problem-card:hover::after, .funnel-step:hover::after, .demo-card:hover::after { animation: none !important; background: #10B981; opacity: .9; } }