/* Akbank Online Banking — custom styles on top of Tailwind */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; } /* SPA views */ .view { animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Modal pop / slide animations */ .animate-pop { animation: pop 0.22s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } .animate-slide { animation: slideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } /* Phone mockup in hero */ .phone-frame { position: relative; width: 300px; max-width: 82vw; background: #111; border-radius: 40px; padding: 12px; box-shadow: 0 30px 60px -20px rgba(227, 6, 19, 0.35), 0 20px 40px -15px rgba(0, 0, 0, 0.25); } .phone-notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 120px; height: 22px; background: #111; border-radius: 0 0 14px 14px; z-index: 2; } .phone-screen { background: #fff; border-radius: 30px; padding: 22px 16px 20px; min-height: 480px; } /* Registration form inputs */ .reg-input { width: 100%; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 0.7rem 0.9rem; font-size: 0.875rem; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; } .reg-input:focus { outline: none; border-color: #E30613; box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.15); } /* Chat bubbles */ .bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.4; word-wrap: break-word; } .bubble-agent { background: #fff; border: 1px solid #eee; border-bottom-left-radius: 4px; color: #1a1a1a; } .bubble-user { background: #E30613; color: #fff; border-bottom-right-radius: 4px; margin-left: auto; } /* Typing indicator dots */ .typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; background: #bbb; border-radius: 50%; animation: blink 1.2s infinite both; } .typing span:nth-child(2) { animation-delay: 0.2s; } .typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } } /* Hidden helper (kept for clarity; Tailwind's .hidden already does this) */ .view.hidden, .modal.hidden { display: none !important; } /* ------------------------------- Dark mode -------------------------------- */ /* Applied to via .theme-dark; overrides common Tailwind surfaces. */ html.theme-dark body { background-color: #0f1115; color: #e6e6e6; } html.theme-dark .bg-white { background-color: #1a1d24 !important; } html.theme-dark .bg-gray-50, html.theme-dark .bg-gray-50\/60, html.theme-dark .bg-gray-50\/70 { background-color: #14161c !important; } html.theme-dark .bg-gray-100 { background-color: #22262f !important; } html.theme-dark .bg-brand-50 { background-color: #2a1416 !important; } html.theme-dark .bg-brand-50\/60 { background-color: #1c1214 !important; } html.theme-dark .text-ink { color: #f2f2f2 !important; } html.theme-dark .text-gray-800, html.theme-dark .text-gray-700 { color: #d8d8d8 !important; } html.theme-dark .text-gray-600 { color: #b9b9b9 !important; } html.theme-dark .text-gray-500, html.theme-dark .text-gray-400 { color: #9a9a9a !important; } html.theme-dark .border-gray-100, html.theme-dark .border-gray-200 { border-color: #2c2f38 !important; } html.theme-dark .divide-gray-100 > * { border-color: #2c2f38 !important; } html.theme-dark input { background-color: #14161c !important; color: #e6e6e6 !important; } html.theme-dark .hover\:bg-gray-50:hover, html.theme-dark .hover\:bg-gray-100:hover { background-color: #22262f !important; } /* Keep brand gradient cards vivid in dark mode (no override needed). */