/** * Login Page Animations — Dhamma Capital * Glass morphism + entrance animations + micro-interactions * * Load in Webflow Page Settings → Inside tag: * */ /* ═══════════════════════════════════════════════════════ 1. FORM SIDE — glass morphism card ═══════════════════════════════════════════════════════ */ .login-form_content { background: rgba(255, 255, 255, 0.78) !important; backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 0 2px 12px rgba(10, 25, 47, 0.06), 0 8px 32px rgba(10, 25, 47, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; will-change: transform; transform-style: preserve-3d; } /* ═══════════════════════════════════════════════════════ 2. CARD ENTRANCE ═══════════════════════════════════════════════════════ */ .login-form_content { opacity: 0; transform: translateY(44px) scale(0.97); animation: dcCardIn 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; } @keyframes dcCardIn { to { opacity: 1; transform: translateY(0) scale(1); } } /* ═══════════════════════════════════════════════════════ 3. STAGGERED FORM CHILDREN ═══════════════════════════════════════════════════════ */ .dc-animate-in > * { opacity: 0; transform: translateY(20px); animation: dcFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(0.35s + var(--dc-i, 0) * 0.09s); } @keyframes dcFadeUp { to { opacity: 1; transform: translateY(0); } } /* Secure wrap below card */ .dc-child-animate { opacity: 0; transform: translateY(16px); animation: dcFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards; } /* Secure text — monospace prevents layout shift during scramble */ .secure-text { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace; letter-spacing: 0.04em; font-size: 0.8em; } /* ═══════════════════════════════════════════════════════ 4. FORM HEADER — icon, title, subtitle ═══════════════════════════════════════════════════════ */ /* Circular icon entrance */ .login-form_header .w-embed { animation: dcIconReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; } @keyframes dcIconReveal { from { opacity: 0; transform: scale(0.65) translateY(-12px); filter: blur(6px); } to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } } /* Subtle continuous icon pulse */ .login-form_header .w-embed svg { animation: dcIconPulse 5s ease-in-out 1.5s infinite; } @keyframes dcIconPulse { 0%, 100% { filter: drop-shadow(0 0 0px rgba(48, 105, 153, 0)); } 50% { filter: drop-shadow(0 0 14px rgba(48, 105, 153, 0.18)); } } /* Gradient text on heading */ .login-header_heading { background: linear-gradient( 120deg, #182e45 0%, #2d6080 45%, #182e45 100% ); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: dcGradientShift 7s ease-in-out infinite; } @keyframes dcGradientShift { 0%, 100% { background-position: 0% center; } 50% { background-position: 200% center; } } /* ═══════════════════════════════════════════════════════ 5. INPUT FIELDS — focus glow only (no underline) ═══════════════════════════════════════════════════════ */ .uui-form_input, .w-input { transition: border-color 0.3s ease, box-shadow 0.3s ease !important; } .uui-form_input:focus, .w-input:focus { border-color: rgba(26, 58, 82, 0.3) !important; box-shadow: 0 0 0 3px rgba(26, 58, 82, 0.06), 0 2px 8px rgba(26, 58, 82, 0.07) !important; outline: none !important; } /* ═══════════════════════════════════════════════════════ 6. SUBMIT BUTTON No overflow-hidden — avoids clipping button hover lift. Shimmer contained via clip-path on the pseudo-element. ═══════════════════════════════════════════════════════ */ .submitbuttonwrapper { position: relative; border-radius: inherit; } /* Shimmer sweep — clip-path keeps it inside the button shape */ .submitbuttonwrapper::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 115deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80% ); pointer-events: none; z-index: 10; border-radius: inherit; clip-path: inset(0 round inherit); } .submitbuttonwrapper:hover::before { animation: dcShimmer 1.1s ease; } @keyframes dcShimmer { from { left: -100%; } to { left: 100%; } } /* Button itself — shadow + brightness only, no translateY */ .submitbutton, [data-portal="submit"] { transition: box-shadow 0.3s ease, filter 0.3s ease !important; cursor: pointer; } .submitbutton:hover, [data-portal="submit"]:hover { box-shadow: 0 6px 22px rgba(26, 58, 82, 0.28), 0 2px 6px rgba(26, 58, 82, 0.14) !important; filter: brightness(1.06); } .submitbutton:active, [data-portal="submit"]:active { filter: brightness(0.96); } /* Ripple effect (span injected by JS into wrapper) */ .dc-ripple { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transform: translate(-50%, -50%) scale(0); animation: dcRipple 0.65s ease-out forwards; pointer-events: none; z-index: 5; } @keyframes dcRipple { to { transform: translate(-50%, -50%) scale(36); opacity: 0; } } /* ═══════════════════════════════════════════════════════ 7. EMAIL LINK UNDERLINE ═══════════════════════════════════════════════════════ */ .text-hyperlink { position: relative; display: inline-block; } .text-hyperlink::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1.5px; background: currentColor; transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .text-hyperlink:hover::after { width: 100%; } /* ═══════════════════════════════════════════════════════ 8. ERROR MESSAGE ═══════════════════════════════════════════════════════ */ [data-portal="error"].error-message { animation: dcShakeReveal 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97); } @keyframes dcShakeReveal { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } 100% { opacity: 1; transform: translateX(0); } } /* ═══════════════════════════════════════════════════════ 9. REDUCED MOTION ═══════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .login-form_content, .dc-animate-in > *, .dc-child-animate { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } } /* ═══════════════════════════════════════════════════════ 10. RESPONSIVE ═══════════════════════════════════════════════════════ */ @media (max-width: 991px) { /* Disable 3D parallax on tablet/mobile */ .login-form_content { transform: none !important; transform-style: flat !important; } } @media (max-width: 767px) { .login-form_content { backdrop-filter: blur(16px) saturate(1.2) !important; -webkit-backdrop-filter: blur(16px) saturate(1.2) !important; } .dc-animate-in > * { animation-delay: calc(0.25s + var(--dc-i, 0) * 0.06s); } }