diff --git a/css/styles.css b/css/styles.css index cadcbc2..1f26106 100644 --- a/css/styles.css +++ b/css/styles.css @@ -71,6 +71,77 @@ to { width: 200px; height: 200px; opacity: 0; } } +/* ======================================== + CLASSY SCROLL ANIMATIONS — Premium Motion Design + ======================================== */ + +/* Parallax-style subtle depth shift */ +@keyframes depthShift { + 0% { transform: translateZ(0px) scale(1); } + 100% { transform: translateZ(20px) scale(1.01); } +} + +/* Smooth scale entry */ +@keyframes scaleEntry { + from { opacity: 0; transform: scale(0.92) translateY(30px); } + to { opacity: 1; transform: scale(1) translateY(0); } +} + +/* Subtle glow pulse */ +@keyframes glowPulse { + 0%, 100% { box-shadow: 0 2px 8px rgba(24, 119, 242, 0.08); } + 50% { box-shadow: 0 4px 20px rgba(24, 119, 242, 0.15); } +} + +/* Smooth counter highlight */ +@keyframes counterHighlight { + 0% { transform: scale(1); color: #fff; text-shadow: 0 0 0 rgba(24, 119, 242, 0); } + 25% { transform: scale(1.12); color: #fff; text-shadow: 0 0 20px rgba(24, 119, 242, 0.4); } + 50% { transform: scale(0.97); } + 100% { transform: scale(1); color: #fff; text-shadow: 0 0 0 rgba(24, 119, 242, 0); } +} + +/* Smooth reveal from sides */ +@keyframes revealLeft { + from { opacity: 0; transform: translateX(-40px); } + to { opacity: 1; transform: translateX(0); } +} + +@keyframes revealRight { + from { opacity: 0; transform: translateX(40px); } + to { opacity: 1; transform: translateX(0); } +} + +/* Smooth divider line animation */ +@keyframes lineExpand { + from { width: 0; } + to { width: 60px; } +} + +/* Smooth badge entrance */ +@keyframes badgeDrop { + from { opacity: 0; transform: translateY(-10px) scale(0.9); } + to { opacity: 1; transform: translateY(0) scale(1); } +} + +/* Smooth card stack entrance */ +@keyframes cardStack { + from { opacity: 0; transform: translateY(40px) rotateX(8deg); } + to { opacity: 1; transform: translateY(0) rotateX(0deg); } +} + +/* Smooth text underline reveal */ +@keyframes underlineReveal { + from { width: 0; } + to { width: 100%; } +} + +/* Smooth progress indicator */ +@keyframes progressFill { + from { width: 0%; } + to { width: var(--progress); } +} + /* Scroll reveal visible state */ .fade-in-section.visible, .section.visible { @@ -94,13 +165,174 @@ .stagger-3 { animation-delay: 0.24s !important; } .stagger-4 { animation-delay: 0.32s !important; } -/* Scroll reveal base state */ +/* Scroll reveal base state — elegant entrance */ .fade-in-section { - opacity: 1; - transform: none; + opacity: 0; + transform: translateY(30px); + transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), + transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); +} + +/* Scroll reveal visible — premium motion */ +.fade-in-section.visible, +.section.visible { + opacity: 1 !important; + transform: translateY(0) !important; + animation: scaleEntry 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +/* Section titles — slide in with underline */ +.section-title { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, + transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; +} +.section-title.visible { + opacity: 1 !important; + transform: translateY(0) !important; + position: relative; +} +.section-title.visible::after { + content: ''; + position: absolute; + bottom: -8px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 3px; + background: linear-gradient(90deg, #1877f2, #42b0ff); + border-radius: 2px; + animation: lineExpand 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; +} + +/* Hero stats — staggered counter entry */ +.stat { + opacity: 0; + transform: translateY(15px); transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } +.stat.visible { + opacity: 1 !important; + transform: translateY(0) !important; +} +.stat.visible .stat-number { + animation: counterHighlight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +/* About cards — staggered stack */ +.about-card { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), + transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); +} +.about-card.visible { + opacity: 1 !important; + transform: translateY(0) !important; + animation: cardStack 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +/* Wiki cards — staggered entrance */ +.wiki-card-new { + opacity: 0; + transform: translateY(25px); + transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), + transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); +} +.wiki-card-new.visible { + opacity: 1 !important; + transform: translateY(0) !important; + animation: cardStack 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +/* Member cards — staggered entrance */ +.member-card { + opacity: 0; + transform: translateY(25px); + transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), + transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); +} +.member-card.visible { + opacity: 1 !important; + transform: translateY(0) !important; + animation: cardStack 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +/* Date cards — staggered entrance */ +.date-card { + opacity: 0; + transform: translateY(25px); + transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), + transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); +} +.date-card.visible { + opacity: 1 !important; + transform: translateY(0) !important; + animation: cardStack 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +/* Newsletter card — elegant scale */ +.newsletter-card { + opacity: 0; + transform: scale(0.95); + transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), + transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); +} +.newsletter-card.visible { + opacity: 1 !important; + transform: scale(1) !important; + animation: scaleEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +/* Hero CTA — smooth entrance */ +.btn-cta { + opacity: 0; + transform: translateY(15px); + transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, + transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; +} +.btn-cta.visible { + opacity: 1 !important; + transform: translateY(0) !important; +} + +/* Hero title — smooth reveal */ +.hero-title { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, + transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; +} +.hero-title.visible { + opacity: 1 !important; + transform: translateY(0) !important; +} + +/* Hero subtitle — smooth reveal */ +.hero-subtitle { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s, + transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s; +} +.hero-subtitle.visible { + opacity: 1 !important; + transform: translateY(0) !important; +} + +/* About card staggered delays */ +.about-card.stagger-1 { transition-delay: 0s !important; } +.about-card.stagger-2 { transition-delay: 0.1s !important; } +.about-card.stagger-3 { transition-delay: 0.2s !important; } +.about-card.stagger-4 { transition-delay: 0.3s !important; } + +/* Wiki card staggered delays */ +.wiki-card-new.stagger-1 { transition-delay: 0s !important; } +.wiki-card-new.stagger-2 { transition-delay: 0.08s !important; } +.wiki-card-new.stagger-3 { transition-delay: 0.16s !important; } +.wiki-card-new.stagger-4 { transition-delay: 0.24s !important; } /* ======================================== BASE diff --git a/index.html b/index.html index 58d3f97..6b91749 100644 --- a/index.html +++ b/index.html @@ -301,7 +301,7 @@ About the Community
-
+
Banking

Banken & Zahlungsverkehr @@ -312,7 +312,7 @@ Experiences with Paraguayan and international banks, accounts, transfers and credit cards.

-
+
Legal

Rechtliches @@ -323,7 +323,7 @@ Corporate law, contracts, taxes, compliance and jurisprudence in Paraguay.

-
+
Taxes

Steuern & Buchhaltung diff --git a/js/main.js b/js/main.js index 4b75d00..9a34165 100644 --- a/js/main.js +++ b/js/main.js @@ -160,12 +160,52 @@ function initScrollReveal() { // Observe all sections for reveal animation document.querySelectorAll('.section, .telegram-banner, #newsletter-section').forEach(section => { - // Add initial invisible state for smooth reveal section.style.opacity = '0'; section.style.transform = 'translateY(20px)'; section.style.transition = 'opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)'; observer.observe(section); }); + + // Observe individual interactive elements for staggered reveals + const staggerElements = [ + '.section-title', + '.stat', + '.about-card', + '.wiki-card-new', + '.member-card', + '.date-card', + '.newsletter-card', + '.btn-cta', + '.hero-title', + '.hero-subtitle' + ]; + + staggerElements.forEach(selector => { + document.querySelectorAll(selector).forEach(el => { + el.style.opacity = '0'; + el.style.transition = 'opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)'; + observer.observe(el); + }); + }); + + // Hero elements fade in on load (not scroll) + if (window.location.hash === '' || window.location.hash === '#hero') { + document.querySelectorAll('.hero-title, .hero-subtitle, .btn-cta').forEach((el, i) => { + setTimeout(() => { + el.classList.add('visible'); + el.style.opacity = ''; + el.style.transform = ''; + }, 300 + i * 150); + }); + // Also observe hero stats + document.querySelectorAll('.stat').forEach((el, i) => { + setTimeout(() => { + el.classList.add('visible'); + el.style.opacity = ''; + el.style.transform = ''; + }, 400 + i * 100); + }); + } } // ======================================== @@ -655,7 +695,7 @@ function renderWikiCards(data) { sorted.forEach(item => { const card = document.createElement('div'); - card.className = 'wiki-card-new'; + card.className = 'wiki-card-new stagger-' + (idx % 4 + 1); card.setAttribute('role', 'button'); card.setAttribute('tabindex', '0'); @@ -805,7 +845,7 @@ function renderDates(events) { sorted.forEach(event => { const card = document.createElement('div'); - card.className = 'date-card'; + card.className = 'date-card stagger-' + (idx % 4 + 1); // Parse date/time from ISO string const startDate = new Date(event.start);