/* ========================================================================== Index Modern 2026 — additive visual enhancement layer Pure CSS overrides + scroll-reveal hooks. Safe to remove at any time. ========================================================================== */ /* ---------- Scroll reveal (only active when JS adds .js-reveal to ) -- */ html.js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } html.js-reveal .reveal.in-view { opacity: 1; transform: translateY(0); } /* Stagger children inside grids */ html.js-reveal .reveal.in-view.reveal-d1 { transition-delay: 0.08s; } html.js-reveal .reveal.in-view.reveal-d2 { transition-delay: 0.16s; } html.js-reveal .reveal.in-view.reveal-d3 { transition-delay: 0.24s; } html.js-reveal .reveal.in-view.reveal-d4 { transition-delay: 0.32s; } html.js-reveal .reveal.in-view.reveal-d5 { transition-delay: 0.40s; } /* ---------- Animated gradient text -------------------------------------- */ .text-gradient { background: linear-gradient(120deg, #2563eb, #7c3aed, #10b981, #2563eb); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 8s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ---------- Section badges ----------------------------------------------- */ .section-badge { position: relative; overflow: hidden; } .section-badge::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-20deg); animation: badgeSheen 4.5s ease-in-out infinite; } @keyframes badgeSheen { 0%, 70% { left: -75%; } 100% { left: 125%; } } /* ---------- Hero --------------------------------------------------------- */ .hero-blob { animation: blobFloat 9s ease-in-out infinite; } @keyframes blobFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(10px, -14px) scale(1.04); } 66% { transform: translate(-8px, 10px) scale(0.98); } } .hero-image-placeholder img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .hero-image-wrapper:hover .hero-image-placeholder img { transform: translateY(-6px) scale(1.015); } .hero-quote-container { position: relative; } /* ---------- Generic card lift + glow ------------------------------------- */ .benefit-card, .reassurance-card, .certificate-card, .app-feature, .testimonial-card, .video-cta-card { position: relative; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease; } .benefit-card:hover, .reassurance-card:hover, .certificate-card:hover, .app-feature:hover, .testimonial-card:hover { transform: translateY(-8px); box-shadow: 0 22px 44px -14px rgba(37, 99, 235, 0.22), 0 8px 18px -10px rgba(15, 23, 42, 0.12); } /* Gradient top accent that slides in on hover */ .benefit-card::before, .reassurance-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: linear-gradient(90deg, #2563eb, #7c3aed, #10b981); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .benefit-card:hover::before, .reassurance-card:hover::before { transform: scaleX(1); } /* Benefit icon pop */ .benefit-icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; } .benefit-card:hover .benefit-icon { transform: scale(1.12) rotate(-4deg); box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.45); } /* ---------- Article / topic cards ---------------------------------------- */ .featured-article-card, .topic-card { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .featured-article-card:hover, .topic-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.22); } .featured-article-card .article-image, .topic-card .topic-image { overflow: hidden; } .featured-article-card .article-image img, .topic-card .topic-image img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease; } .featured-article-card:hover .article-image img, .topic-card:hover .topic-image img { transform: scale(1.07); } .article-cta, .topic-cta { transition: transform 0.3s ease, color 0.3s ease; } .featured-article-card:hover .article-cta, .topic-card:hover .topic-cta { transform: translateX(4px); } .article-bookmark { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .featured-article-card:hover .article-bookmark { transform: translateY(-3px) scale(1.1); } /* ---------- Process steps ------------------------------------------------- */ .process-step { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .process-step:hover { transform: translateY(-6px); } .step-number { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; } .process-step:hover .step-number { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.12), 0 10px 24px -8px rgba(37, 99, 235, 0.4); } /* ---------- Buttons: sheen + press --------------------------------------- */ .btn-primary, .quick-start-primary, .sub-header-btn { position: relative; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .btn-primary::after, .quick-start-primary::after, .sub-header-btn::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-20deg); transition: left 0.55s ease; pointer-events: none; } .btn-primary:hover::after, .quick-start-primary:hover::after, .sub-header-btn:hover::after { left: 130%; } .btn-primary:hover, .quick-start-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(37, 99, 235, 0.55); } .btn-primary:active, .quick-start-primary:active { transform: translateY(0) scale(0.98); } .btn-whatsapp { transition: transform 0.25s ease, box-shadow 0.25s ease; } .btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(37, 211, 102, 0.5); } /* ---------- Quick start stats -------------------------------------------- */ .quick-start-stat { transition: transform 0.3s ease; } .quick-start-stat:hover { transform: translateY(-4px); } /* ---------- Partner logos ------------------------------------------------- */ .partners-grid img { transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease !important; } .partners-grid img:hover { transform: translateY(-4px) scale(1.05); } /* ---------- App feature icons -------------------------------------------- */ .app-feature .feature-icon { display: inline-block; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .app-feature:hover .feature-icon { transform: scale(1.25) rotate(-8deg); } /* ---------- About image + experience badge -------------------------------- */ .experience-badge { animation: badgeBob 5s ease-in-out infinite; } @keyframes badgeBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .image-frame img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .image-frame:hover img { transform: scale(1.02); } /* ---------- Books --------------------------------------------------------- */ .book-cover { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease; } .book-link:hover .book-cover { transform: translateY(-8px) rotate(-1deg); filter: drop-shadow(0 22px 28px rgba(15, 23, 42, 0.28)); } /* ---------- Video play button -------------------------------------------- */ .play-button { display: inline-block; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .play-button:hover { transform: scale(1.12); } .video-thumbnail { overflow: hidden; } .video-thumbnail > img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .video-featured:hover .video-thumbnail > img { transform: scale(1.05); } /* ---------- Testimonials -------------------------------------------------- */ .testimonial-card:hover .author-avatar { transform: scale(1.1); } .author-avatar { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .testimonials-nav-btn { transition: transform 0.25s ease, box-shadow 0.25s ease; } .testimonials-nav-btn:hover:not(:disabled) { transform: scale(1.1); box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.35); } /* ---------- Final CTA box ------------------------------------------------- */ .cta-box { position: relative; overflow: hidden; } .cta-box::before { content: ''; position: absolute; top: -60%; right: -20%; width: 60%; height: 160%; background: radial-gradient(circle, rgba(124, 58, 237, 0.10), transparent 65%); pointer-events: none; animation: ctaGlow 7s ease-in-out infinite alternate; } @keyframes ctaGlow { from { opacity: 0.5; transform: translateX(0); } to { opacity: 1; transform: translateX(-30px); } } .cta-stat { transition: transform 0.3s ease; } .cta-stat:hover { transform: translateY(-4px); } /* ---------- Header polish -------------------------------------------------- */ .header.scrolled { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .nav-links a { transition: color 0.25s ease; } /* ---------- Reduced motion: turn everything off --------------------------- */ @media (prefers-reduced-motion: reduce) { html.js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .text-gradient, .hero-blob, .experience-badge, .section-badge::after, .cta-box::before { animation: none !important; } *, *::before, *::after { transition-duration: 0.01ms !important; } }