diff --git a/docs/consult_landing.html b/docs/consult_landing.html index 294c6bb..260cb87 100644 --- a/docs/consult_landing.html +++ b/docs/consult_landing.html @@ -106,7 +106,7 @@ .problem { background: var(--bg); } .problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 56px; } .problem-card { - background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; + background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 32px; position: relative; overflow: hidden; } .problem-card::before { @@ -121,10 +121,10 @@ .features { background: linear-gradient(180deg, #0A1628 0%, var(--bg) 100%); } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 56px; } .feature-card { - background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; - padding: 28px; transition: border-color 0.2s, transform 0.2s; + background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; + padding: 28px; transition: all .2s ease-in-out; } - .feature-card:hover { border-color: rgba(16,185,129,0.45); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(16,185,129,.12); } + .feature-card:hover { background: #233148; border-color: #3E4D66; box-shadow: 0 16px 40px rgba(0,0,0,.28); } .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; } @@ -160,7 +160,7 @@ .demo { background: var(--bg); } .demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 56px; } .demo-card { - background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; + background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 28px; transition: all 0.2s; } .demo-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.2); } @@ -220,19 +220,9 @@ @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-lift карточек */ - .problem-card, .funnel-step, .demo-card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } - .problem-card:hover, .funnel-step:hover, .demo-card:hover { transform: translateY(-3px); border-color: rgba(16,185,129,.4); box-shadow: 0 12px 30px rgba(0,0,0,.25); } - - /* «Прожектор» — свечение следует за курсором (timeweb-style) */ - .feature-card, .demo-card, .funnel-step { overflow: hidden; } - .feature-card::after, .problem-card::after, .funnel-step::after, .demo-card::after { - content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; - border-radius: inherit; opacity: 0; transition: opacity .35s ease; - background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(16,185,129,.18), transparent 62%); - } - .feature-card:hover::after, .problem-card:hover::after, .funnel-step:hover::after, .demo-card:hover::after { opacity: 1; } - .feature-card > *, .problem-card > *, .funnel-step > *, .demo-card > * { position: relative; z-index: 1; } + /* Спокойный hover карточек (timeweb-style: осветление фона + мягкая тень) */ + .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: #3E4D66; box-shadow: 0 16px 40px rgba(0,0,0,.28); } @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; } @@ -436,20 +426,6 @@ }, {threshold:0.12, rootMargin:'0px 0px -8% 0px'}); document.querySelectorAll('.reveal').forEach(function(el){io.observe(el);}); })(); - -/* «Прожектор» за курсором на карточках */ -(function(){ - if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; - if (window.matchMedia && window.matchMedia('(hover: none)').matches) return; - var cards = document.querySelectorAll('.feature-card, .problem-card, .funnel-step, .demo-card'); - cards.forEach(function(c){ - c.addEventListener('mousemove', function(e){ - var r = c.getBoundingClientRect(); - c.style.setProperty('--mx', (e.clientX - r.left) + 'px'); - c.style.setProperty('--my', (e.clientY - r.top) + 'px'); - }); - }); -})(); diff --git a/docs/main.html b/docs/main.html index 294c6bb..260cb87 100644 --- a/docs/main.html +++ b/docs/main.html @@ -106,7 +106,7 @@ .problem { background: var(--bg); } .problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 56px; } .problem-card { - background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; + background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 32px; position: relative; overflow: hidden; } .problem-card::before { @@ -121,10 +121,10 @@ .features { background: linear-gradient(180deg, #0A1628 0%, var(--bg) 100%); } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 56px; } .feature-card { - background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; - padding: 28px; transition: border-color 0.2s, transform 0.2s; + background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; + padding: 28px; transition: all .2s ease-in-out; } - .feature-card:hover { border-color: rgba(16,185,129,0.45); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(16,185,129,.12); } + .feature-card:hover { background: #233148; border-color: #3E4D66; box-shadow: 0 16px 40px rgba(0,0,0,.28); } .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; } @@ -160,7 +160,7 @@ .demo { background: var(--bg); } .demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 56px; } .demo-card { - background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; + background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 28px; transition: all 0.2s; } .demo-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.2); } @@ -220,19 +220,9 @@ @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-lift карточек */ - .problem-card, .funnel-step, .demo-card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } - .problem-card:hover, .funnel-step:hover, .demo-card:hover { transform: translateY(-3px); border-color: rgba(16,185,129,.4); box-shadow: 0 12px 30px rgba(0,0,0,.25); } - - /* «Прожектор» — свечение следует за курсором (timeweb-style) */ - .feature-card, .demo-card, .funnel-step { overflow: hidden; } - .feature-card::after, .problem-card::after, .funnel-step::after, .demo-card::after { - content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; - border-radius: inherit; opacity: 0; transition: opacity .35s ease; - background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(16,185,129,.18), transparent 62%); - } - .feature-card:hover::after, .problem-card:hover::after, .funnel-step:hover::after, .demo-card:hover::after { opacity: 1; } - .feature-card > *, .problem-card > *, .funnel-step > *, .demo-card > * { position: relative; z-index: 1; } + /* Спокойный hover карточек (timeweb-style: осветление фона + мягкая тень) */ + .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: #3E4D66; box-shadow: 0 16px 40px rgba(0,0,0,.28); } @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; } @@ -436,20 +426,6 @@ }, {threshold:0.12, rootMargin:'0px 0px -8% 0px'}); document.querySelectorAll('.reveal').forEach(function(el){io.observe(el);}); })(); - -/* «Прожектор» за курсором на карточках */ -(function(){ - if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; - if (window.matchMedia && window.matchMedia('(hover: none)').matches) return; - var cards = document.querySelectorAll('.feature-card, .problem-card, .funnel-step, .demo-card'); - cards.forEach(function(c){ - c.addEventListener('mousemove', function(e){ - var r = c.getBoundingClientRect(); - c.style.setProperty('--mx', (e.clientX - r.left) + 'px'); - c.style.setProperty('--my', (e.clientY - r.top) + 'px'); - }); - }); -})();