/* * Video2SRT — Design System v2.0 * Refactored: Enhanced depth, better contrast, micro-interactions * * Theme: Dark (default) + Light via [data-theme="light"] on * Brand accent: #E11D48 (rose). Semantic green for success/recording. * Fonts: Plus Jakarta Sans + Fira Code (2 families). */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500;600&display=swap'); /* ── Tokens (dark default) ────────────────────────────────────────────── */ :root { color-scheme: dark light; /* Brand */ --color-accent: #E11D48; --color-accent-hover: #BE123C; --color-accent-soft: rgba(225, 29, 72, 0.12); --color-accent-glow: rgba(225, 29, 72, 0.25); --color-accent-subtle: rgba(225, 29, 72, 0.06); /* Semantic */ --color-success: #22C55E; --color-success-soft: rgba(34, 197, 94, 0.12); --color-warning: #F59E0B; --color-warning-soft: rgba(245, 158, 11, 0.12); --color-error: #EF4444; --color-error-soft: rgba(239, 68, 68, 0.12); --color-info: #3B82F6; --color-info-soft: rgba(59, 130, 246, 0.12); /* Surfaces — Dark theme (improved contrast between layers) */ --color-bg: #050510; --color-bg-elev-1: #0C0C1E; --color-bg-elev-2: #141430; --color-bg-elev-3: #1E1E45; --color-bg-elev-4: #2A2A5A; --color-border: rgba(248, 250, 252, 0.07); --color-border-strong: rgba(248, 250, 252, 0.14); --color-border-accent: rgba(225, 29, 72, 0.25); --color-text: #F8FAFC; --color-text-muted: #CBD5E1; --color-text-subtle: #8B9AB8; /* Glass effect */ --glass-bg: rgba(12, 12, 30, 0.80); --glass-border: rgba(248, 250, 252, 0.08); --glass-blur: 12px; /* Typography */ --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Consolas, monospace; --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.55; --leading-relaxed: 1.65; /* Spacing — 8px base with more options */ --space-2xs: 0.125rem; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; /* Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 9999px; /* Shadows — Enhanced depth */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.30); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.60), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-focus: 0 0 0 3px var(--color-accent-soft); --shadow-glow-accent: 0 0 20px rgba(225, 29, 72, 0.15), 0 0 40px rgba(225, 29, 72, 0.05); --shadow-glow-success: 0 0 12px rgba(34, 197, 94, 0.20); --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.30); /* Motion */ --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 320ms; --duration-slower: 500ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Z-index scale */ --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 800; --z-dialog: 900; --z-toast: 1000; /* Layout */ --sidebar-width: 250px; --sidebar-width-collapsed: 68px; --navbar-height: 56px; --workspace-panel-width: 380px; } /* ── Light theme override ─────────────────────────────────────────────── */ :root[data-theme="light"] { color-scheme: light dark; --color-bg: #F8FAFC; --color-bg-elev-1: #FFFFFF; --color-bg-elev-2: #FFFFFF; --color-bg-elev-3: #F1F5F9; --color-bg-elev-4: #E2E8F0; --color-border: rgba(15, 23, 42, 0.08); --color-border-strong: rgba(15, 23, 42, 0.15); --color-border-accent: rgba(225, 29, 72, 0.20); --color-text: #0F172A; --color-text-muted: #475569; --color-text-subtle: #64748B; --color-accent-soft: rgba(225, 29, 72, 0.08); --color-accent-subtle: rgba(225, 29, 72, 0.04); --color-success-soft: rgba(34, 197, 94, 0.10); --color-warning-soft: rgba(245, 158, 11, 0.10); --color-error-soft: rgba(239, 68, 68, 0.10); --color-info-soft: rgba(59, 130, 246, 0.10); --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(15, 23, 42, 0.06); --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06); --shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.14), 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-glow-accent: 0 0 20px rgba(225, 29, 72, 0.08); --shadow-glow-success: 0 0 12px rgba(34, 197, 94, 0.10); --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06); } /* ── Reset ────────────────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background: var(--color-bg); min-height: 100vh; overflow-x: hidden; transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--color-text); letter-spacing: -0.02em; } h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); } h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } p { color: var(--color-text-muted); line-height: var(--leading-relaxed); } code, pre, .mono, kbd { font-family: var(--font-mono); } a { color: var(--color-accent); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--color-accent-hover); } button { font-family: inherit; cursor: pointer; } button[disabled] { cursor: not-allowed; } input, select, textarea { font-family: inherit; color: inherit; } ::selection { background: var(--color-accent); color: #FFFFFF; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); transition: background var(--duration-fast) var(--ease-out); } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); } /* ── Focus-visible — global ring ──────────────────────────────────────── */ :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* ── Skip link ────────────────────────────────────────────────────────── */ .skip-link { position: absolute; top: -40px; left: var(--space-md); background: var(--color-accent); color: #FFFFFF; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); z-index: var(--z-toast); font-weight: var(--weight-semibold); transition: top var(--duration-fast) var(--ease-out); } .skip-link:focus { top: var(--space-md); color: #FFFFFF; } /* ── Animation primitives ─────────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes recordPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.5; } } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes progressStripe { from { background-position: 1rem 0; } to { background-position: 0 0; } } @keyframes borderGlow { 0%, 100% { border-color: var(--color-accent); box-shadow: var(--shadow-glow-accent); } 50% { border-color: var(--color-accent-hover); box-shadow: 0 0 30px rgba(225, 29, 72, 0.20); } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .fade-in { animation: fadeIn var(--duration-base) var(--ease-out) both; } .fade-in-up { animation: fadeInUp var(--duration-slow) var(--ease-out) both; } .fade-in-scale { animation: fadeInScale var(--duration-base) var(--ease-out) both; } .slide-in-left { animation: slideInLeft var(--duration-slow) var(--ease-out) both; } /* Stagger animation for lists */ .stagger-item { animation: fadeInUp var(--duration-slow) var(--ease-out) both; } .stagger-item:nth-child(1) { animation-delay: 0ms; } .stagger-item:nth-child(2) { animation-delay: 50ms; } .stagger-item:nth-child(3) { animation-delay: 100ms; } .stagger-item:nth-child(4) { animation-delay: 150ms; } .stagger-item:nth-child(5) { animation-delay: 200ms; } .stagger-item:nth-child(6) { animation-delay: 250ms; } .stagger-item:nth-child(7) { animation-delay: 300ms; } .stagger-item:nth-child(8) { animation-delay: 350ms; } .stagger-item:nth-child(9) { animation-delay: 400ms; } .stagger-item:nth-child(10) { animation-delay: 450ms; } /* ── Utilities ────────────────────────────────────────────────────────── */ .text-muted { color: var(--color-text-muted) !important; } .text-subtle { color: var(--color-text-subtle) !important; } .text-accent { color: var(--color-accent) !important; } .text-success { color: var(--color-success) !important; } .text-error { color: var(--color-error) !important; } .text-warning { color: var(--color-warning) !important; } .mono { font-family: var(--font-mono); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .is-hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--color-bg-elev-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium); color: var(--color-text-muted); box-shadow: var(--shadow-xs); } /* ── Reduced motion ───────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }