OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Update CSS will-change property and add min-height to hero section; enhance JS card animation with reduced motion support

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 13:22:07 -05:00
parent ebb4b7668c
commit d8c12e3f3b
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
theme/assets/css/main.css
View File

@@ -560,7 +560,7 @@ p:last-child { margin-bottom: 0; }
animation: dc-breathe 8s ease-in-out infinite; animation: dc-breathe 8s ease-in-out infinite;
pointer-events: none; pointer-events: none;
display: block; display: block;
will-change: transform; will-change: filter;
} }
.hero-overlay { .hero-overlay {
@@ -2061,6 +2061,7 @@ p:last-child { margin-bottom: 0; }
border: none !important; border: none !important;
border-radius: 0; border-radius: 0;
aspect-ratio: unset; aspect-ratio: unset;
min-height: 300px;
padding: 0; padding: 0;
overflow: visible; overflow: visible;
position: relative; position: relative;

5
theme/assets/js/main.js
View File

@@ -119,7 +119,8 @@ document.addEventListener('DOMContentLoaded', () => {
/* ── Animate cards on scroll ────────────────────────────── */ /* ── Animate cards on scroll ────────────────────────────── */
const cards = document.querySelectorAll('.oribi-card, .feature-card, .industry-card, .pricing-card, .value-card, .platform-row'); const cards = document.querySelectorAll('.oribi-card, .feature-card, .industry-card, .pricing-card, .value-card, .platform-row');
if (cards.length && 'IntersectionObserver' in window) { if (cards.length && 'IntersectionObserver' in window &&
!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
cards.forEach(c => { c.style.opacity = '0'; c.style.transform = 'translateY(24px)'; c.style.transition = 'opacity .5s ease, transform .5s ease'; }); cards.forEach(c => { c.style.opacity = '0'; c.style.transform = 'translateY(24px)'; c.style.transition = 'opacity .5s ease, transform .5s ease'; });
const io = new IntersectionObserver((entries) => { const io = new IntersectionObserver((entries) => {
entries.forEach(entry => { entries.forEach(entry => {
@@ -129,7 +130,7 @@ document.addEventListener('DOMContentLoaded', () => {
io.unobserve(entry.target); io.unobserve(entry.target);
} }
}); });
}, { threshold: 0.1 }); }, { threshold: 0.1, rootMargin: '0px 0px 60px 0px' });
cards.forEach(c => io.observe(c)); cards.forEach(c => io.observe(c));
} }
}); });