mirror of
https://github.com/wasrusgen/wasrusgen1-crm.git
synced 2026-06-03 22:44:47 +00:00
landing: hover карточек в стиле timeweb (осветление фона + мягкая тень, скругление 20px), убран цветной прожектор
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
ada8b9ab1c
commit
0c2462eeb9
@ -106,7 +106,7 @@
|
|||||||
.problem { background: var(--bg); }
|
.problem { background: var(--bg); }
|
||||||
.problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 56px; }
|
.problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 56px; }
|
||||||
.problem-card {
|
.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;
|
padding: 32px; position: relative; overflow: hidden;
|
||||||
}
|
}
|
||||||
.problem-card::before {
|
.problem-card::before {
|
||||||
@ -121,10 +121,10 @@
|
|||||||
.features { background: linear-gradient(180deg, #0A1628 0%, var(--bg) 100%); }
|
.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; }
|
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 56px; }
|
||||||
.feature-card {
|
.feature-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: border-color 0.2s, transform 0.2s;
|
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-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 { 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; }
|
.feature-card:hover .feature-icon svg { stroke: #10B981; }
|
||||||
@ -160,7 +160,7 @@
|
|||||||
.demo { background: var(--bg); }
|
.demo { background: var(--bg); }
|
||||||
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 56px; }
|
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 56px; }
|
||||||
.demo-card {
|
.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;
|
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); }
|
.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; } }
|
@keyframes drawPulse { to { stroke-dashoffset: 0; } }
|
||||||
.pulse-chip svg polyline { stroke-dasharray: 70; stroke-dashoffset: 70; animation: drawPulse 1.4s ease-out .3s forwards; }
|
.pulse-chip svg polyline { stroke-dasharray: 70; stroke-dashoffset: 70; animation: drawPulse 1.4s ease-out .3s forwards; }
|
||||||
|
|
||||||
/* Hover-lift карточек */
|
/* Спокойный hover карточек (timeweb-style: осветление фона + мягкая тень) */
|
||||||
.problem-card, .funnel-step, .demo-card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
|
.problem-card, .funnel-step, .demo-card { transition: all .2s ease-in-out; }
|
||||||
.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); }
|
.problem-card:hover, .funnel-step:hover, .demo-card:hover { background: #233148; border-color: #3E4D66; box-shadow: 0 16px 40px rgba(0,0,0,.28); }
|
||||||
|
|
||||||
/* «Прожектор» — свечение следует за курсором (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; }
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@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; }
|
.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'});
|
}, {threshold:0.12, rootMargin:'0px 0px -8% 0px'});
|
||||||
document.querySelectorAll('.reveal').forEach(function(el){io.observe(el);});
|
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');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -106,7 +106,7 @@
|
|||||||
.problem { background: var(--bg); }
|
.problem { background: var(--bg); }
|
||||||
.problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 56px; }
|
.problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 56px; }
|
||||||
.problem-card {
|
.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;
|
padding: 32px; position: relative; overflow: hidden;
|
||||||
}
|
}
|
||||||
.problem-card::before {
|
.problem-card::before {
|
||||||
@ -121,10 +121,10 @@
|
|||||||
.features { background: linear-gradient(180deg, #0A1628 0%, var(--bg) 100%); }
|
.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; }
|
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 56px; }
|
||||||
.feature-card {
|
.feature-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: border-color 0.2s, transform 0.2s;
|
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-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 { 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; }
|
.feature-card:hover .feature-icon svg { stroke: #10B981; }
|
||||||
@ -160,7 +160,7 @@
|
|||||||
.demo { background: var(--bg); }
|
.demo { background: var(--bg); }
|
||||||
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 56px; }
|
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 56px; }
|
||||||
.demo-card {
|
.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;
|
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); }
|
.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; } }
|
@keyframes drawPulse { to { stroke-dashoffset: 0; } }
|
||||||
.pulse-chip svg polyline { stroke-dasharray: 70; stroke-dashoffset: 70; animation: drawPulse 1.4s ease-out .3s forwards; }
|
.pulse-chip svg polyline { stroke-dasharray: 70; stroke-dashoffset: 70; animation: drawPulse 1.4s ease-out .3s forwards; }
|
||||||
|
|
||||||
/* Hover-lift карточек */
|
/* Спокойный hover карточек (timeweb-style: осветление фона + мягкая тень) */
|
||||||
.problem-card, .funnel-step, .demo-card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
|
.problem-card, .funnel-step, .demo-card { transition: all .2s ease-in-out; }
|
||||||
.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); }
|
.problem-card:hover, .funnel-step:hover, .demo-card:hover { background: #233148; border-color: #3E4D66; box-shadow: 0 16px 40px rgba(0,0,0,.28); }
|
||||||
|
|
||||||
/* «Прожектор» — свечение следует за курсором (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; }
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@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; }
|
.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'});
|
}, {threshold:0.12, rootMargin:'0px 0px -8% 0px'});
|
||||||
document.querySelectorAll('.reveal').forEach(function(el){io.observe(el);});
|
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');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user