| |
| |
| |
| |
|
|
| @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&display=swap'); |
|
|
| |
| :root, html:not(.light) { |
| --peach: #fab387; --peach-dim: #e8935a; |
| --green: #a6e3a1; --red: #f38ba8; |
| --text: #cdd6f4; --text-2: #bac2de; --text-3: #7f849c; |
| --sf2: #585b70; --sf1: #45475a; --sf0: #313244; |
| --base: #1e1e2e; --mantle: #181825; --crust: #11111b; |
| --accent: var(--peach); --accent-h: var(--peach-dim); --accent-s: rgba(250,179,135,0.12); |
| --sage: var(--green); --sage-s: rgba(166,227,161,0.1); |
| --bdr: var(--sf1); --bdr-l: var(--sf0); |
| --surf: var(--mantle); --surf-r: var(--sf0); |
| --shadow: 0 2px 8px rgba(0,0,0,0.25); |
| --r1: 10px; --r2: 14px; --r3: 18px; --rf: 999px; |
| } |
|
|
| |
| html.light { |
| --peach: #fe640b; --peach-dim: #e85d0a; |
| --green: #40a02b; --red: #d20f39; |
| --text: #4c4f69; --text-2: #5c5f77; --text-3: #8c8fa1; |
| --sf2: #acb0be; --sf1: #bcc0cc; --sf0: #ccd0da; |
| --base: #eff1f5; --mantle: #e6e9ef; --crust: #dce0e8; |
| --accent-s: rgba(254,100,11,0.08); |
| --sage-s: rgba(64,160,43,0.06); |
| --shadow: 0 2px 8px rgba(0,0,0,0.06); |
| } |
|
|
|
|
| |
| |
| |
|
|
| html, body, |
| .gradio-container, |
| .gradio-container .contain, |
| .gradio-container > div, |
| .gradio-container > div > div { |
| background: var(--base) !important; |
| color: var(--text) !important; |
| } |
| .gradio-container { |
| font-family: 'DM Sans', -apple-system, sans-serif !important; |
| -webkit-font-smoothing: antialiased; |
| } |
| .gradio-container .contain { |
| max-width: 1100px !important; |
| padding: 8px 20px 60px !important; |
| margin: 0 auto !important; |
| } |
| .gradio-container footer, |
| .gradio-container .footer { display: none !important; } |
|
|
| |
| .gradio-container *, |
| .gradio-container p, .gradio-container span, .gradio-container label, |
| .gradio-container .prose, .gradio-container .prose * { |
| font-family: 'DM Sans', sans-serif !important; |
| color: var(--text) !important; |
| } |
| .gradio-container h1, .gradio-container h2, .gradio-container h3, |
| .gradio-container .prose h1, .gradio-container .prose h2, .gradio-container .prose h3 { |
| font-family: 'Fraunces', serif !important; |
| color: var(--text) !important; |
| } |
| .gradio-container .prose strong { color: var(--accent) !important; } |
| .gradio-container .prose hr { border: none !important; border-top: 1px solid var(--bdr-l) !important; margin: 16px 0 !important; } |
|
|
| |
| .gradio-container input[type="text"], |
| .gradio-container input[type="number"], |
| .gradio-container textarea, |
| .gradio-container select, |
| .gradio-container .wrap .dropdown-container, |
| .gradio-container .wrap input { |
| font-family: 'DM Sans', sans-serif !important; |
| color: var(--text) !important; |
| background: var(--surf) !important; |
| border: 1.5px solid var(--bdr) !important; |
| border-radius: var(--r2) !important; |
| box-shadow: none !important; |
| outline: none !important; |
| } |
| .gradio-container input:focus, |
| .gradio-container textarea:focus, |
| .gradio-container select:focus, |
| .gradio-container .wrap .dropdown-container:focus-within { |
| border-color: var(--accent) !important; |
| box-shadow: 0 0 0 3px var(--accent-s) !important; |
| outline: none !important; |
| } |
| .gradio-container label, |
| .gradio-container .wrap label, |
| .gradio-container .label-wrap { |
| font-family: 'DM Sans', sans-serif !important; |
| font-weight: 600 !important; |
| font-size: 0.82em !important; |
| color: var(--text-2) !important; |
| } |
| .gradio-container button, |
| .gradio-container .wrap button { font-family: 'DM Sans', sans-serif !important; } |
| .gradio-container button.primary { |
| background: var(--accent) !important; |
| border-color: var(--accent) !important; |
| color: var(--crust) !important; |
| } |
| .gradio-container button.secondary { |
| background: var(--surf-r) !important; |
| border-color: var(--bdr) !important; |
| color: var(--text) !important; |
| } |
| .gradio-container .wrap .dropdown-container .options, |
| .gradio-container .wrap .dropdown-container .options > li { |
| background: var(--surf) !important; |
| color: var(--text) !important; |
| border-color: var(--bdr) !important; |
| } |
| .gradio-container .wrap .dropdown-container .options > li:hover, |
| .gradio-container .wrap .dropdown-container .options > li.selected { |
| background: var(--accent-s) !important; |
| color: var(--accent) !important; |
| } |
|
|
|
|
| |
| |
| |
|
|
| .hero { text-align: center; padding: 20px 0 16px; position: relative; } |
| .hero::before { |
| content: ''; position: absolute; |
| top: -30px; left: 50%; transform: translateX(-50%); |
| width: 220px; height: 220px; |
| background: radial-gradient(circle, var(--accent-s) 0%, transparent 70%); |
| pointer-events: none; opacity: 0.5; |
| } |
| .hero-badge { |
| display: inline-block; |
| background: var(--accent-s); color: var(--accent); |
| font-size: 0.6em; font-weight: 700; |
| letter-spacing: 0.1em; text-transform: uppercase; |
| padding: 3px 10px; border-radius: var(--rf); |
| margin-bottom: 8px; position: relative; |
| } |
| .hero h1 { |
| font-family: 'Fraunces', serif !important; |
| font-size: 1.7em !important; font-weight: 700 !important; |
| color: var(--text) !important; line-height: 1.1 !important; |
| letter-spacing: -0.02em; margin-bottom: 4px !important; |
| } |
| .hero h1 em { color: var(--accent) !important; font-style: italic; } |
| .hero-sub { |
| font-size: 0.85em; color: var(--text-2) !important; |
| line-height: 1.5; max-width: 260px; margin: 0 auto; |
| } |
|
|
|
|
| |
| |
| |
|
|
| .main-grid { gap: 20px !important; } |
| .col-input, .col-output { min-width: 0 !important; } |
| @media (min-width: 768px) { |
| .main-grid { display: flex !important; gap: 28px !important; } |
| .col-input { flex: 1 !important; } |
| .col-output { flex: 1 !important; position: sticky !important; top: 20px !important; align-self: flex-start !important; } |
| .hero h1 { font-size: 2.1em !important; } |
| } |
|
|
|
|
| |
| |
| |
|
|
| .section-label { |
| font-family: 'Fraunces', serif !important; |
| font-size: 0.95em !important; font-weight: 600 !important; |
| color: var(--text) !important; |
| margin: 16px 0 8px !important; |
| display: flex; align-items: center; gap: 6px; |
| } |
| .section-label .icon { font-size: 1.1em; } |
| .quick-header { margin-top: 18px !important; } |
|
|
| .divider { |
| display: flex !important; align-items: center !important; |
| gap: 12px !important; margin: 14px 0 !important; |
| color: var(--text-3) !important; |
| font-size: 0.7em !important; font-weight: 600 !important; |
| letter-spacing: 0.08em !important; text-transform: uppercase !important; |
| } |
| .divider::before, .divider::after { |
| content: '' !important; flex: 1 !important; height: 1px !important; |
| background: var(--bdr-l) !important; |
| } |
|
|
|
|
| |
| |
| |
|
|
| |
| .mic-component { |
| background: var(--surf) !important; |
| border: 1.5px solid var(--bdr) !important; |
| border-radius: var(--r3) !important; |
| padding: 12px !important; |
| margin-bottom: 4px !important; |
| } |
|
|
| |
| .mic-component button[aria-label*="ecord"], |
| .mic-component button[aria-label*="icro"], |
| .mic-component .record-btn, |
| .mic-component .audio-container > button, |
| .mic-component > div > button { |
| width: 64px !important; |
| height: 64px !important; |
| border-radius: 50% !important; |
| background: linear-gradient(145deg, var(--accent), var(--accent-h)) !important; |
| border: none !important; |
| color: var(--crust) !important; |
| font-size: 1.3em !important; |
| box-shadow: 0 3px 16px rgba(250,179,135,0.25) !important; |
| transition: transform 0.2s ease, box-shadow 0.2s ease !important; |
| margin: 8px auto !important; |
| display: flex !important; |
| align-items: center !important; |
| justify-content: center !important; |
| } |
| .mic-component button[aria-label*="ecord"]:hover, |
| .mic-component button[aria-label*="icro"]:hover, |
| .mic-component .record-btn:hover { |
| transform: scale(1.08) !important; |
| box-shadow: 0 6px 24px rgba(250,179,135,0.4) !important; |
| } |
| .mic-component button[aria-label*="ecord"]:active, |
| .mic-component button[aria-label*="icro"]:active { |
| transform: scale(0.95) !important; |
| } |
|
|
| |
| .mic-component .audio-container, |
| .mic-component > div { |
| display: flex !important; |
| flex-direction: column !important; |
| align-items: center !important; |
| } |
|
|
| |
| .mic-component audio, |
| .mic-component .audio-player { |
| border-radius: var(--r2) !important; |
| width: 100% !important; |
| } |
|
|
| |
| .mic-component .upload-btn, |
| .mic-component button[aria-label*="upload"], |
| .mic-component button[aria-label*="Upload"] { |
| display: none !important; |
| } |
|
|
|
|
| |
| |
| |
|
|
| .text-input-wrap textarea { |
| font-size: 0.9em !important; |
| min-height: 50px !important; |
| padding: 12px 14px !important; |
| } |
|
|
|
|
| |
| |
| |
|
|
| .submit-btn { |
| background: var(--accent) !important; |
| border-color: var(--accent) !important; |
| color: var(--crust) !important; |
| border-radius: var(--r2) !important; |
| font-weight: 700 !important; |
| font-size: 0.9em !important; |
| min-height: 42px !important; |
| margin-top: 4px !important; |
| transition: background 0.15s ease, transform 0.15s ease !important; |
| } |
| .submit-btn:hover { background: var(--accent-h) !important; transform: translateY(-1px) !important; } |
| .submit-btn:active { transform: translateY(0) !important; } |
|
|
|
|
| |
| |
| |
|
|
| .quick-row { gap: 6px !important; margin-bottom: 6px !important; } |
| .quick-btn { |
| flex: 1 !important; |
| background: var(--surf) !important; |
| border: 1.5px solid var(--bdr) !important; |
| border-radius: var(--r1) !important; |
| color: var(--text) !important; |
| font-size: 0.76em !important; |
| font-weight: 500 !important; |
| padding: 9px 6px !important; |
| min-height: 40px !important; |
| text-align: center !important; |
| justify-content: center !important; |
| transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease !important; |
| } |
| .quick-btn:hover { border-color: var(--sage) !important; background: var(--sage-s) !important; transform: translateY(-1px) !important; } |
| .quick-btn:active { transform: translateY(0) !important; } |
|
|
|
|
| |
| |
| |
|
|
| .response-card { |
| background: var(--surf) !important; |
| border: 1.5px solid var(--bdr) !important; |
| border-radius: var(--r3) !important; |
| padding: 18px !important; |
| min-height: 120px !important; |
| font-size: 0.9em !important; |
| line-height: 1.7 !important; |
| box-shadow: var(--shadow) !important; |
| } |
| .response-card .prose h3 { font-family: 'Fraunces', serif !important; font-size: 1em !important; margin: 16px 0 6px !important; } |
| .response-card .prose h3:first-child { margin-top: 0 !important; } |
| .response-card .prose strong { color: var(--accent) !important; } |
| .response-card .prose hr { border: none; border-top: 1px solid var(--bdr-l); margin: 14px 0; } |
| .audio-out { margin-top: 10px !important; } |
| .audio-out audio { border-radius: var(--r2) !important; } |
|
|
|
|
| |
| |
| |
|
|
| .theme-toggle { |
| position: fixed !important; top: 12px !important; right: 12px !important; |
| z-index: 9999 !important; |
| width: 38px !important; height: 38px !important; |
| border-radius: 50% !important; |
| background: var(--surf-r) !important; |
| border: 1.5px solid var(--bdr) !important; |
| cursor: pointer !important; |
| font-size: 1.1em !important; |
| display: flex !important; align-items: center !important; justify-content: center !important; |
| transition: border-color 0.2s ease !important; |
| line-height: 1 !important; color: var(--text) !important; |
| box-shadow: none !important; padding: 0 !important; |
| min-height: unset !important; min-width: unset !important; |
| } |
| .theme-toggle:hover { border-color: var(--accent) !important; background: var(--accent-s) !important; } |
|
|
|
|
| |
| |
| |
|
|
| .footer { |
| text-align: center !important; |
| padding-top: 20px !important; |
| border-top: 1px solid var(--bdr-l) !important; |
| margin-top: 20px !important; |
| } |
| .footer-text { font-size: 0.7em !important; color: var(--text-3) !important; line-height: 1.6 !important; } |
| .footer-text.sub { margin-top: 2px !important; } |
| .footer-text a { color: var(--accent) !important; text-decoration: none !important; font-weight: 500 !important; } |
| .footer-text a:hover { text-decoration: underline !important; } |
| .footer-models { display: flex !important; justify-content: center !important; gap: 6px !important; margin-top: 10px !important; flex-wrap: wrap !important; } |
| .footer-chip { font-size: 0.62em !important; color: var(--text-3) !important; background: var(--surf-r) !important; border: 1px solid var(--bdr) !important; padding: 3px 10px !important; border-radius: var(--rf) !important; } |
|
|
