/* ============================================================ courses-animations.css | Movina Values Link in courses.html AFTER escripts.css ============================================================ */ /* ── 1. Scroll-reveal base ── */ [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } [data-reveal="left"] { transform: translateX(-40px); opacity: 0; } [data-reveal="right"] { transform: translateX(40px); opacity: 0; } [data-reveal].is-visible { opacity: 1 !important; transform: none !important; } [data-delay="100"] { transition-delay: 0.10s; } [data-delay="150"] { transition-delay: 0.15s; } [data-delay="200"] { transition-delay: 0.20s; } [data-delay="300"] { transition-delay: 0.30s; } /* ── 2. Navbar scroll-shrink ── */ #navbar { transition: padding 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; } #navbar.scrolled { padding: 4px 0; box-shadow: 0 4px 24px rgba(0,0,0,0.08); background: rgba(255,255,255,0.97); } /* ── 3. Courses hero entrance ── */ .courses-hero-intro .brand-title { opacity: 0; animation: slide-up 0.7s 0.2s cubic-bezier(0.22,1,0.36,1) forwards; } .courses-hero-intro .tagline { opacity: 0; animation: slide-up 0.7s 0.38s cubic-bezier(0.22,1,0.36,1) forwards; } .courses-hero-intro .description { opacity: 0; animation: slide-up 0.7s 0.54s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* Animated yellow underline on hero tagline */ .courses-hero-intro .tagline { position: relative; display: inline-block; } .courses-hero-intro .tagline::after { content: ""; display: block; height: 4px; width: 0; background: #FAC60A; border-radius: 999px; margin: 10px auto 0; animation: underline-in 0.9s 1s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes underline-in { to { width: 65%; } } /* ── 4. Course cards hover lift ── */ .course-card { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease; } .course-card:hover { transform: translateY(-10px); box-shadow: 0 24px 50px rgba(74,94,122,0.13); } /* Course icon pop on hover */ .course-icon { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); } .course-card:hover .course-icon { transform: scale(1.15) rotate(-4deg); } /* ── 5. Registration section reveal ── */ .reg-promo h2 { position: relative; display: inline-block; } .reg-promo h2::after { content: ""; display: block; height: 3px; width: 0; background: #FAC60A; border-radius: 999px; margin-top: 8px; transition: width 0.8s cubic-bezier(0.22,1,0.36,1) 0.3s; } [data-reveal="left"].is-visible .reg-promo h2::after, .reg-promo.is-visible h2::after { width: 80%; } /* Form card subtle glow on focus-within */ .reg-form-card { transition: box-shadow 0.35s ease; } .reg-form-card:focus-within { box-shadow: 0 20px 50px rgba(74,94,122,0.16), 0 0 0 3px rgba(250,198,10,0.18); } /* Input focus ring */ .input-group input:focus, .input-group select:focus, .input-group textarea:focus { border-color: #FAC60A; box-shadow: 0 0 0 3px rgba(250,198,10,0.18); outline: none; } /* ── 6. Section-intro brand-title underline ── */ .section-intro .brand-title { position: relative; display: inline-block; } .section-intro .brand-title::after { content: ""; display: block; height: 3px; width: 0; background: #FAC60A; border-radius: 999px; margin: 8px auto 0; transition: width 0.8s cubic-bezier(0.22,1,0.36,1); } .section-intro.is-visible .brand-title::after { width: 60%; } /* ── 7. Footer stagger ── */ .footer-column { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .footer-column.is-visible { opacity: 1; transform: none; } /* ── 8. Ripple ── */ .ripple-btn { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple-anim 0.55s linear; background: rgba(255,255,255,0.32); pointer-events: none; } @keyframes ripple-anim { to { transform: scale(4); opacity: 0; } } /* ════════════════════════════════════════════════════════════ SHARED GLASSMORPHISM MODAL SYSTEM ════════════════════════════════════════════════════════════ */ .glass-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 28, 48, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .glass-overlay.active { opacity: 1; pointer-events: auto; } .glass-dialog { position: relative; width: min(520px, 100%); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 28px; padding: 44px 40px 36px; box-shadow: 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.35); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); color: #ffffff; text-align: center; transform: translateY(20px) scale(0.97); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); } .glass-overlay.active .glass-dialog { transform: translateY(0) scale(1); } .glass-close { position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.12); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; } .glass-close:hover { background: rgba(255,255,255,0.22); transform: rotate(10deg); } .glass-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #FAC60A; background: rgba(250,198,10,0.15); border: 1px solid rgba(250,198,10,0.35); padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; } .glass-title { font-size: 1.55rem; font-weight: 800; color: #ffffff; margin: 0 0 18px; line-height: 1.25; } .glass-divider { width: 48px; height: 3px; background: #FAC60A; border-radius: 999px; margin: 0 auto 18px; } .glass-body { font-size: 0.95rem; color: rgba(255,255,255,0.78); line-height: 1.7; margin-bottom: 28px; } .glass-pay-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 15px 24px; border-radius: 999px; background: #FAC60A; color: #1e293b; font-size: 1rem; font-weight: 800; text-decoration: none; border: none; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; margin-bottom: 10px; position: relative; overflow: hidden; } .glass-pay-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(250,198,10,0.35); } .glass-ghost-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 13px 24px; border-radius: 999px; background: transparent; color: rgba(255,255,255,0.7); font-size: 0.95rem; font-weight: 600; border: 1px solid rgba(255,255,255,0.22); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .glass-ghost-btn:hover { background: rgba(255,255,255,0.10); color: #fff; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } [data-reveal], .footer-column, .courses-hero-intro .brand-title, .courses-hero-intro .tagline, .courses-hero-intro .description { opacity: 1 !important; transform: none !important; } }