/* ============================================================ counselling-animations.css | Movina Values Link in Counselling.html AFTER counselling.css ============================================================ */ /* ── 1. Scroll-reveal — JS opt-in approach (no flash) ── */ [data-reveal] { 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].reveal-ready { opacity: 0; transform: translateY(32px); } [data-reveal="left"].reveal-ready { opacity: 0; transform: translateX(-40px); } [data-reveal="right"].reveal-ready { opacity: 0; transform: translateX(40px); } [data-reveal].is-visible { opacity: 1 !important; transform: none !important; } [data-delay="100"] { transition-delay: 0.10s; } [data-delay="200"] { transition-delay: 0.20s; } [data-delay="300"] { transition-delay: 0.30s; } [data-delay="400"] { transition-delay: 0.40s; } /* ── 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. Hero entrance (CSS-only, no JS dependency) ── */ .counsel-eyebrow { opacity: 0; animation: cs-slide-up 0.6s 0.15s cubic-bezier(0.22,1,0.36,1) forwards; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6D85A8; margin-bottom: 10px; } .counsel-hero-intro .tagline { opacity: 0; animation: cs-slide-up 0.7s 0.30s cubic-bezier(0.22,1,0.36,1) forwards; position: relative; display: inline-block; } .counsel-hero-intro .tagline::after { content: ""; display: block; height: 4px; width: 0; background: #FAC60A; border-radius: 999px; margin: 10px auto 0; animation: cs-underline 0.9s 1.1s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes cs-underline { to { width: 55%; } } .counsel-hero-intro .description { opacity: 0; animation: cs-slide-up 0.7s 0.48s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes cs-slide-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* ── 4. Bento cards — stagger + hover lift ── */ .bento-card.counsel-card { transition: transform 0.38s cubic-bezier(0.22,1,0.36,1), box-shadow 0.38s ease, border-color 0.3s ease, opacity 0.65s cubic-bezier(0.22,1,0.36,1); } .bento-card.counsel-card:hover { transform: translateY(-10px) !important; box-shadow: 0 28px 56px rgba(74,94,122,0.16); } /* Icon circle spin on card hover */ .bento-card.counsel-card:hover .icon-circle { animation: icon-spin 0.5s cubic-bezier(0.34,1.56,0.64,1); } @keyframes icon-spin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(-15deg) scale(1.15); } 100% { transform: rotate(0deg) scale(1); } } /* Pill badge glow on hover */ .bento-card.counsel-card:hover .pill { background: rgba(250,198,10,0.15); border-color: rgba(250,198,10,0.5); color: #92650a; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } /* ── 5. Button hover micro-lift ── */ .btn.btn-outline, .btn.btn-ghost { transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease; } .btn.btn-outline:hover, .btn.btn-ghost:hover { transform: translateY(-2px); } /* ── 6. 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; } /* ── 7. Ripple ── */ .ripple-btn { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: cs-ripple 0.55s linear; background: rgba(255,255,255,0.30); pointer-events: none; } @keyframes cs-ripple { 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.75); 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], [data-reveal].reveal-ready, .counsel-eyebrow, .counsel-hero-intro .tagline, .counsel-hero-intro .description, .footer-column { opacity: 1 !important; transform: none !important; } }