/* ══════════════════════════════════════════════════════════════════ Neighbourhood Guide — Catpuccin Theme Mocha (dark default) | Latte (light via .light on ) ══════════════════════════════════════════════════════════════════ */ @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'); /* ── Mocha (Dark) ─────────────────────────────────────────────── */ :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; } /* ── Latte (Light) ────────────────────────────────────────────── */ 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); } /* ══════════════════════════════════════════════════════════════════ BASE ══════════════════════════════════════════════════════════════════ */ 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; } /* Typography */ .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; } /* Form controls — uniform */ .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 ══════════════════════════════════════════════════════════════════ */ .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; } /* ══════════════════════════════════════════════════════════════════ LAYOUT ══════════════════════════════════════════════════════════════════ */ .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 LABELS & DIVIDER ══════════════════════════════════════════════════════════════════ */ .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; } /* ══════════════════════════════════════════════════════════════════ MICROPHONE COMPONENT (visible, styled) ══════════════════════════════════════════════════════════════════ */ /* Style the whole audio component container */ .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; } /* Style the record/stop button to be round and prominent */ .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; } /* Center audio content */ .mic-component .audio-container, .mic-component > div { display: flex !important; flex-direction: column !important; align-items: center !important; } /* Style the waveform/player area */ .mic-component audio, .mic-component .audio-player { border-radius: var(--r2) !important; width: 100% !important; } /* Hide upload button (we only want mic) */ .mic-component .upload-btn, .mic-component button[aria-label*="upload"], .mic-component button[aria-label*="Upload"] { display: none !important; } /* ══════════════════════════════════════════════════════════════════ TEXT INPUT ══════════════════════════════════════════════════════════════════ */ .text-input-wrap textarea { font-size: 0.9em !important; min-height: 50px !important; padding: 12px 14px !important; } /* ══════════════════════════════════════════════════════════════════ SUBMIT BUTTON ══════════════════════════════════════════════════════════════════ */ .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 ACTIONS ══════════════════════════════════════════════════════════════════ */ .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 ══════════════════════════════════════════════════════════════════ */ .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 (injected by JS) ══════════════════════════════════════════════════════════════════ */ .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 ══════════════════════════════════════════════════════════════════ */ .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; }