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; } }