| |
| |
| |
|
|
| :root { |
| |
| --primary: #a33e00; |
| --primary-container: #ff6600; |
| --secondary: #5d5f5a; |
| --background: #f9f9f9; |
| --surface: #ffffff; |
| --surface-variant: #eeeeee; |
| --on-surface: #1b1b1b; |
| --on-surface-variant: #5a4136; |
| --outline: #8e7164; |
| --outline-variant: #e3bfb1; |
| --error: #ba1a1a; |
| --border-yc: #E0E0E0; |
| |
| |
| --radius-sm: 0.25rem; |
| --radius-md: 0.5rem; |
| --radius-lg: 0.75rem; |
| --radius-full: 9999px; |
|
|
| |
| --font-headline: 'Hanken Grotesk', sans-serif; |
| --font-body: 'Inter', sans-serif; |
| --font-mono: 'JetBrains Mono', monospace; |
| } |
|
|
| |
| body { |
| font-family: var(--font-body); |
| background-color: var(--background); |
| color: var(--on-surface); |
| } |
|
|
| h1, h2, h3, h4, .font-headline { |
| font-family: var(--font-headline); |
| } |
|
|
| .font-mono { |
| font-family: var(--font-mono); |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: var(--outline-variant); |
| border-radius: 10px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--outline); |
| } |
|
|
| |
| .view { |
| display: none; |
| animation: fadeIn 0.3s ease-out; |
| } |
| .view.active { |
| display: block; |
| } |
|
|
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(4px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| |
| .active-nav { |
| background-color: var(--primary-container) !important; |
| color: white !important; |
| font-weight: bold; |
| } |
|
|
| .border-yc { |
| border-color: var(--border-yc); |
| } |
|
|
| |
| #toast.show { |
| opacity: 1; |
| transform: translate(-50%, 0); |
| pointer-events: auto; |
| } |
|
|
| |
| .wav-bar { |
| transition: height 0.1s ease, background 0.3s ease; |
| } |
|
|
| .wav-bar.delivering { |
| animation: wavePulse 1.2s infinite ease-in-out; |
| } |
|
|
| .wav-bar.listening { |
| animation: wavePulse 0.8s infinite ease-in-out; |
| } |
|
|
| @keyframes wavePulse { |
| 0%, 100% { transform: scaleY(1); opacity: 0.3; } |
| 50% { transform: scaleY(2); opacity: 0.8; } |
| } |
|
|
| |
| textarea { |
| line-height: 1.6; |
| } |
|
|
| |
| .text-label-caps { |
| letter-spacing: 0.05em; |
| text-transform: uppercase; |
| } |
|
|
| |
| .amd-badge { |
| background: #000000; |
| color: #FFFFFF; |
| padding: 2px 8px; |
| border-radius: 4px; |
| font-family: var(--font-mono); |
| font-size: 10px; |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| } |
| .amd-dot { |
| width: 6px; |
| height: 6px; |
| background: #ff6600; |
| border-radius: 50%; |
| box-shadow: 0 0 8px #ff6600; |
| } |
|
|
