/* ============================================================================= TalkNova — style.css Custom design tokens + animation layer that sits on top of Tailwind (CDN). Tailwind handles layout utilities; this file owns brand color, type, theme switching (light/dark), the Playground's signature "voice ring" interaction, XP/progress motion, bookmarks, the floating support widget, and general motion design. ============================================================================= */ /* ----------------------------------------------------------------------- 1. Design tokens — LIGHT THEME (default) ----------------------------------------------------------------------- */ :root { /* Core brand */ --tn-blue: #2f5dff; --tn-blue-dark: #1a3fd6; --tn-violet: #7c4dff; --tn-ink: #1e2433; --tn-ink-soft: #4a5268; --tn-bg: #f6f8fc; --tn-surface: #ffffff; --tn-surface-rgb: 255, 255, 255; --tn-border: #e3e8f3; --tn-navbar-bg: rgba(255, 255, 255, 0.72); /* Pastel language accents (used per-language throughout the app) */ --tn-french: #ffe1ea; --tn-french-ink: #b3396b; --tn-korean: #e1ecff; --tn-korean-ink: #2a56c9; --tn-english: #e3f7e6; --tn-english-ink: #1f8a4c; --tn-bengali: #fff4d9; --tn-bengali-ink: #a5730c; --tn-japanese: #ffe4cc; --tn-japanese-ink: #b35900; --tn-chinese: #ffdada; --tn-chinese-ink: #c23b3b; /* Status accents */ --tn-gold: #f5b400; --tn-whatsapp: #22c55e; /* Motion */ --tn-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ----------------------------------------------------------------------- 1b. Design tokens — DARK THEME Activated by adding `dark` as a class on . Because every component below is already built on these CSS variables, redefining them here is enough to re-theme the entire app with no per-component overrides needed. ----------------------------------------------------------------------- */ html.dark { --tn-blue: #6d8cff; --tn-blue-dark: #4f6de0; --tn-violet: #a78bfa; --tn-ink: #eef1fb; --tn-ink-soft: #9aa7c9; --tn-bg: #0b1020; --tn-surface: #131a2e; --tn-surface-rgb: 19, 26, 46; --tn-border: #232c47; --tn-navbar-bg: rgba(11, 16, 32, 0.78); --tn-french: rgba(255, 120, 170, 0.16); --tn-french-ink: #ff9fc4; --tn-korean: rgba(109, 140, 255, 0.16); --tn-korean-ink: #9db4ff; --tn-english: rgba(52, 211, 130, 0.16); --tn-english-ink: #6ee7a8; --tn-bengali: rgba(245, 180, 0, 0.16); --tn-bengali-ink: #f7c948; --tn-japanese: rgba(255, 152, 51, 0.16); --tn-japanese-ink: #ffb366; --tn-chinese: rgba(255, 99, 99, 0.16); --tn-chinese-ink: #ff8f8f; --tn-gold: #f7c948; --tn-whatsapp: #34d17a; } /* ----------------------------------------------------------------------- 2. Base & typography ----------------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { background-color: var(--tn-bg); color: var(--tn-ink); font-family: 'Inter', 'Hind Siliguri', system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background-color 0.35s var(--tn-ease), color 0.35s var(--tn-ease); } .font-display { font-family: 'Baloo 2', 'Hind Siliguri', system-ui, sans-serif; } .font-bn { font-family: 'Hind Siliguri', 'Baloo 2', system-ui, sans-serif; } ::selection { background-color: var(--tn-blue); color: #ffffff; } /* Respect reduced-motion preferences across the whole app */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ----------------------------------------------------------------------- 3. Navbar ----------------------------------------------------------------------- */ .tn-navbar { background-color: var(--tn-navbar-bg); border-bottom: 1px solid var(--tn-border); transition: background-color 0.35s var(--tn-ease), border-color 0.35s var(--tn-ease); } .tn-nav-link { position: relative; color: var(--tn-ink-soft); transition: color 0.2s var(--tn-ease); } .tn-nav-link::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0%; height: 2px; background: linear-gradient(90deg, var(--tn-blue), var(--tn-violet)); border-radius: 2px; transition: width 0.25s var(--tn-ease); } .tn-nav-link:hover { color: var(--tn-ink); } .tn-nav-link:hover::after { width: 100%; } .tn-avatar-ring { padding: 2px; background: linear-gradient(135deg, var(--tn-blue), var(--tn-violet)); border-radius: 9999px; } .tn-avatar-ring img { border: 2px solid var(--tn-surface); border-radius: 9999px; display: block; } /* Dark mode toggle switch */ .tn-theme-toggle { position: relative; width: 3rem; height: 1.75rem; border-radius: 9999px; border: 1.5px solid var(--tn-border); background: var(--tn-bg); cursor: pointer; transition: background-color 0.3s var(--tn-ease), border-color 0.3s var(--tn-ease); flex-shrink: 0; } .tn-theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: linear-gradient(135deg, var(--tn-blue), var(--tn-violet)); display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 0.65rem; transition: transform 0.35s var(--tn-ease), background 0.35s var(--tn-ease); transform: translateX(0); } html.dark .tn-theme-toggle-knob { transform: translateX(1.25rem); } /* ----------------------------------------------------------------------- 4. Hero ----------------------------------------------------------------------- */ .tn-hero-bg { background: radial-gradient(circle at 15% 20%, rgba(47, 93, 255, 0.10), transparent 45%), radial-gradient(circle at 85% 10%, rgba(124, 77, 255, 0.12), transparent 40%), radial-gradient(circle at 75% 80%, rgba(255, 225, 234, 0.55), transparent 45%); transition: background-color 0.35s var(--tn-ease); } html.dark .tn-hero-bg { background: radial-gradient(circle at 15% 20%, rgba(109, 140, 255, 0.16), transparent 45%), radial-gradient(circle at 85% 10%, rgba(167, 139, 250, 0.16), transparent 40%), radial-gradient(circle at 75% 80%, rgba(255, 120, 170, 0.08), transparent 45%); } .tn-gradient-text { background: linear-gradient(90deg, var(--tn-blue), var(--tn-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tn-btn-primary { background: linear-gradient(90deg, var(--tn-blue), var(--tn-violet)); color: #ffffff; box-shadow: 0 10px 24px -8px rgba(47, 93, 255, 0.55); transition: transform 0.2s var(--tn-ease), box-shadow 0.2s var(--tn-ease); } .tn-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(47, 93, 255, 0.65); } .tn-btn-ghost { border: 1.5px solid var(--tn-border); color: var(--tn-ink); background-color: var(--tn-surface); transition: border-color 0.2s var(--tn-ease), background-color 0.2s var(--tn-ease); } .tn-btn-ghost:hover { border-color: var(--tn-blue); } @keyframes tn-float { 0%, 100% { transform: translateY(0px) rotate(var(--tn-rot, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--tn-rot, 0deg)); } } .tn-float { animation: tn-float 5s ease-in-out infinite; } /* ----------------------------------------------------------------------- 5. Language pills (Playground language switcher) ----------------------------------------------------------------------- */ .tn-lang-pill { border: 1.5px solid var(--tn-border); background: var(--tn-surface); color: var(--tn-ink-soft); transition: all 0.2s var(--tn-ease); } .tn-lang-pill:hover { transform: translateY(-1px); } .tn-lang-pill[data-active='true'][data-lang='french'] { background: var(--tn-french); border-color: var(--tn-french); color: var(--tn-french-ink); } .tn-lang-pill[data-active='true'][data-lang='korean'] { background: var(--tn-korean); border-color: var(--tn-korean); color: var(--tn-korean-ink); } .tn-lang-pill[data-active='true'][data-lang='english'] { background: var(--tn-english); border-color: var(--tn-english); color: var(--tn-english-ink); } .tn-lang-pill[data-active='true'][data-lang='bengali'] { background: var(--tn-bengali); border-color: var(--tn-bengali); color: var(--tn-bengali-ink); } /* ----------------------------------------------------------------------- 6. Playground — signature element: the coach card + voice ring ----------------------------------------------------------------------- */ .tn-playground-card { background: var(--tn-surface); border: 1px solid var(--tn-border); box-shadow: 0 20px 45px -20px rgba(30, 36, 51, 0.25); transition: background-color 0.35s var(--tn-ease), border-color 0.35s var(--tn-ease); } html.dark .tn-playground-card { box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.55); } /* The pulsing ring that appears around the coach avatar while speaking */ .tn-voice-ring { position: relative; } .tn-voice-ring::before, .tn-voice-ring::after { content: ''; position: absolute; inset: -6px; border-radius: 9999px; border: 2px solid var(--tn-blue); opacity: 0; } .tn-voice-ring.is-speaking::before { animation: tn-pulse-ring 1.4s var(--tn-ease) infinite; } .tn-voice-ring.is-speaking::after { animation: tn-pulse-ring 1.4s var(--tn-ease) infinite 0.4s; } @keyframes tn-pulse-ring { 0% { transform: scale(1); opacity: 0.65; } 100% { transform: scale(1.5); opacity: 0; } } .tn-word-card { transition: transform 0.35s var(--tn-ease), opacity 0.35s var(--tn-ease); } .tn-word-card.is-entering { animation: tn-card-in 0.4s var(--tn-ease); } @keyframes tn-card-in { from { opacity: 0; transform: translateX(16px) scale(0.98); } to { opacity: 1; transform: translateX(0) scale(1); } } /* Bookmark ("star") button pinned to the word card */ .tn-bookmark-btn { width: 2.25rem; height: 2.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.55); color: var(--tn-ink); font-size: 1.05rem; transition: transform 0.2s var(--tn-ease), background-color 0.2s var(--tn-ease), color 0.2s var(--tn-ease); } html.dark .tn-bookmark-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); } .tn-bookmark-btn:hover { transform: scale(1.08); } .tn-bookmark-btn[data-bookmarked='true'] { color: var(--tn-gold); background: rgba(245, 180, 0, 0.16); } /* Speed selector */ .tn-speed-btn { border: 1.5px solid var(--tn-border); color: var(--tn-ink-soft); background: var(--tn-surface); transition: all 0.2s var(--tn-ease); } .tn-speed-btn[data-active='true'] { background: var(--tn-ink); border-color: var(--tn-ink); color: var(--tn-bg); } /* Skeleton loading state */ .tn-skeleton { position: relative; overflow: hidden; background: linear-gradient(90deg, var(--tn-border) 25%, var(--tn-surface) 37%, var(--tn-border) 63%); background-size: 400% 100%; animation: tn-shimmer 1.4s ease infinite; border-radius: 0.75rem; } @keyframes tn-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ----------------------------------------------------------------------- 6b. XP / Score tracker ----------------------------------------------------------------------- */ .tn-xp-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: linear-gradient(90deg, rgba(47, 93, 255, 0.12), rgba(124, 77, 255, 0.12)); border: 1px solid var(--tn-border); color: var(--tn-ink); font-weight: 700; font-size: 0.85rem; border-radius: 9999px; padding: 0.35rem 0.9rem; position: relative; white-space: nowrap; } .tn-xp-bar-track { width: 100%; height: 0.55rem; border-radius: 9999px; background: var(--tn-border); overflow: hidden; } .tn-xp-bar-fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--tn-blue), var(--tn-violet)); width: 0%; transition: width 0.6s var(--tn-ease); position: relative; overflow: hidden; } .tn-xp-bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: translateX(-100%); animation: tn-xp-sheen 2.2s ease-in-out infinite; } @keyframes tn-xp-sheen { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(120%); } } /* Floating "+10 XP" micro-animation */ .tn-xp-float { position: absolute; top: -0.4rem; right: -0.6rem; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 0.8rem; color: var(--tn-blue); pointer-events: none; animation: tn-xp-pop 0.9s var(--tn-ease) forwards; } /* Deduction variant (low-accuracy pronunciation penalty) — same motion, red instead of blue so a loss reads as clearly different from a gain. */ .tn-xp-float--negative { color: #ef4444; } @keyframes tn-xp-pop { 0% { opacity: 0; transform: translateY(4px) scale(0.8); } 25% { opacity: 1; transform: translateY(-6px) scale(1.05); } 80% { opacity: 1; transform: translateY(-22px) scale(1); } 100% { opacity: 0; transform: translateY(-30px) scale(0.95); } } /* ----------------------------------------------------------------------- 6c. Bookmarked words grid ----------------------------------------------------------------------- */ .tn-bookmark-card { background: var(--tn-surface); border: 1px solid var(--tn-border); border-radius: 1rem; padding: 1.1rem; transition: transform 0.2s var(--tn-ease), box-shadow 0.2s var(--tn-ease), border-color 0.2s var(--tn-ease); animation: tn-card-in 0.35s var(--tn-ease); } .tn-bookmark-card:hover { transform: translateY(-3px); border-color: var(--tn-blue); box-shadow: 0 16px 32px -20px rgba(30, 36, 51, 0.3); } .tn-bookmark-remove { width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: var(--tn-ink-soft); border: 1px solid var(--tn-border); transition: all 0.2s var(--tn-ease); font-size: 0.75rem; } .tn-bookmark-remove:hover { color: #ffffff; background: #ef4444; border-color: #ef4444; } /* ----------------------------------------------------------------------- 7. Feature & pricing cards ----------------------------------------------------------------------- */ .tn-feature-card { background: var(--tn-surface); border: 1px solid var(--tn-border); transition: transform 0.25s var(--tn-ease), box-shadow 0.25s var(--tn-ease), background-color 0.35s var(--tn-ease); } .tn-feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(30, 36, 51, 0.28); } .tn-pricing-card { background: var(--tn-surface); border: 1.5px solid var(--tn-border); transition: transform 0.25s var(--tn-ease), box-shadow 0.25s var(--tn-ease), border-color 0.25s var(--tn-ease), background-color 0.35s var(--tn-ease); } .tn-pricing-card:hover { transform: translateY(-4px); border-color: var(--tn-blue); box-shadow: 0 20px 40px -22px rgba(47, 93, 255, 0.3); } .tn-pricing-card--featured { border-color: var(--tn-blue); box-shadow: 0 20px 45px -18px rgba(47, 93, 255, 0.35); } /* ----------------------------------------------------------------------- 8. Focus visibility (accessibility floor) ----------------------------------------------------------------------- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--tn-blue); outline-offset: 3px; border-radius: 6px; } /* ----------------------------------------------------------------------- 9. Utility ----------------------------------------------------------------------- */ .tn-container { max-width: 1180px; margin-left: auto; margin-right: auto; } .tn-surface-panel { background-color: rgba(var(--tn-surface-rgb), 0.98); border: 1px solid var(--tn-border); transition: background-color 0.35s var(--tn-ease), border-color 0.35s var(--tn-ease); } /* ----------------------------------------------------------------------- 10. Floating support widget ----------------------------------------------------------------------- */ .tn-support-widget { position: fixed; right: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; } .tn-support-fab { width: 3.75rem; height: 3.75rem; border-radius: 9999px; background: linear-gradient(135deg, var(--tn-blue), var(--tn-violet)); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 14px 30px -10px rgba(47, 93, 255, 0.6); transition: transform 0.3s var(--tn-ease), box-shadow 0.3s var(--tn-ease); border: none; cursor: pointer; } .tn-support-fab:hover { transform: scale(1.06); } .tn-support-fab[data-open='true'] { transform: rotate(135deg); } .tn-support-menu { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-end; transform-origin: bottom right; transition: opacity 0.25s var(--tn-ease), transform 0.25s var(--tn-ease); } .tn-support-menu[data-open='false'] { opacity: 0; transform: scale(0.85) translateY(8px); pointer-events: none; } .tn-support-menu[data-open='true'] { opacity: 1; transform: scale(1) translateY(0); } .tn-support-action { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1.1rem; border-radius: 9999px; font-weight: 700; font-size: 0.9rem; color: #ffffff; box-shadow: 0 10px 22px -8px rgba(30, 36, 51, 0.35); transition: transform 0.2s var(--tn-ease), box-shadow 0.2s var(--tn-ease); white-space: nowrap; } .tn-support-action:hover { transform: translateY(-2px) scale(1.02); } .tn-support-action--whatsapp { background: var(--tn-whatsapp); } .tn-support-action--call { background: var(--tn-blue); } @media (max-width: 480px) { .tn-support-widget { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); } .tn-support-fab { width: 3.25rem; height: 3.25rem; font-size: 1.3rem; } } /* ----------------------------------------------------------------------- 11. Toast notification Small reusable pill notification (currently used by the login button until a real auth flow exists; safe to reuse for any future feature). ----------------------------------------------------------------------- */ .tn-toast { position: fixed; top: 5.5rem; left: 50%; transform: translateX(-50%) translateY(-12px); background: var(--tn-ink); color: var(--tn-bg); font-family: 'Hind Siliguri', 'Baloo 2', system-ui, sans-serif; font-weight: 600; font-size: 0.9rem; padding: 0.7rem 1.3rem; border-radius: 9999px; box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.45); z-index: 70; opacity: 0; pointer-events: none; transition: opacity 0.25s var(--tn-ease), transform 0.25s var(--tn-ease); max-width: calc(100vw - 2.5rem); text-align: center; } .tn-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 480px) { .tn-toast { top: auto; bottom: 6.5rem; } }