ec81dc9ddc
- Archive all existing markdown documentation files - Create comprehensive HAP_ACTION_PLAN.md with: * Analysis of current BZZZ implementation vs HAP vision * 4-phase implementation strategy * Structural reorganization approach (multi-binary) * HAP interface implementation roadmap - Preserve existing functionality while adding human agent portal - Focus on incremental migration over rewrite 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
394 lines
14 KiB
CSS
394 lines
14 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* === Teaser-aligned Global Foundation === */
|
|
/* CHORUS Proportional Typography System - 16px Base */
|
|
html { font-size: 16px; }
|
|
|
|
/* CHORUS Brand CSS Variables (8-color semantic system) */
|
|
:root {
|
|
/* Core Brand Colors */
|
|
--color-carbon: #000000;
|
|
--color-mulberry: #0b0213;
|
|
--color-walnut: #403730;
|
|
--color-nickel: #c1bfb1;
|
|
|
|
/* Semantic Tokens */
|
|
--chorus-primary: #0b0213; /* mulberry */
|
|
--chorus-secondary: #000000; /* carbon */
|
|
--chorus-accent: #403730; /* walnut */
|
|
--chorus-neutral: #c1bfb1; /* nickel */
|
|
--chorus-info: #5a6c80; /* ocean-700 */
|
|
--chorus-success: #2a3330; /* eucalyptus-950 */
|
|
--chorus-warning: #6a5c46; /* sand-900 */
|
|
--chorus-danger: #2e1d1c; /* coral-950 */
|
|
|
|
/* Theme Surfaces (dark default) */
|
|
--bg-primary: #000000; /* carbon-950 */
|
|
--bg-secondary: #0b0213; /* mulberry-950 */
|
|
--bg-tertiary: #1a1426; /* mulberry-900 */
|
|
--bg-accent: #2a2639; /* mulberry-800 */
|
|
|
|
/* Text */
|
|
--text-primary: #FFFFFF;
|
|
--text-secondary: #f0f4ff;
|
|
--text-tertiary: #dae4fe;
|
|
--text-subtle: #9aa0b8;
|
|
--text-ghost: #7a7e95;
|
|
|
|
/* Borders */
|
|
--border-invisible: #0a0a0a;
|
|
--border-subtle: #1a1a1a;
|
|
--border-defined: #2a2a2a;
|
|
--border-emphasis: #666666;
|
|
}
|
|
|
|
/* Light Theme Variables (apply when html has class 'light') */
|
|
html.light {
|
|
--bg-primary: #FFFFFF;
|
|
--bg-secondary: #f8f8f8;
|
|
--bg-tertiary: #f0f0f0;
|
|
--bg-accent: #e0e0e0;
|
|
|
|
--text-primary: #000000;
|
|
--text-secondary: #1a1a1a;
|
|
--text-tertiary: #2a2a2a;
|
|
--text-subtle: #666666;
|
|
--text-ghost: #808080;
|
|
|
|
--border-invisible: #f8f8f8;
|
|
--border-subtle: #f0f0f0;
|
|
--border-defined: #e0e0e0;
|
|
--border-emphasis: #c0c0c0;
|
|
}
|
|
|
|
/* Base Styles */
|
|
body {
|
|
font-family: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 1.6;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
font-family: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
body { @apply transition-colors duration-200; }
|
|
}
|
|
|
|
@layer components {
|
|
/* Ultra-Minimalist Button System */
|
|
.btn-primary {
|
|
@apply text-white font-semibold py-3 px-6 rounded-md transition-all duration-300 disabled:opacity-40 disabled:cursor-not-allowed;
|
|
/* Light mode: warm sand gradient */
|
|
background: linear-gradient(135deg, var(--chorus-warning) 0%, var(--chorus-neutral) 100%);
|
|
border: 2px solid var(--chorus-warning);
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-transparent text-current font-medium py-3 px-6 rounded-md transition-all duration-300 disabled:opacity-40 disabled:cursor-not-allowed;
|
|
border: 2px solid var(--border-emphasis);
|
|
}
|
|
|
|
.btn-primary:hover { transform: translateY(-2px); }
|
|
.btn-secondary:hover { transform: translateY(-2px); border-color: var(--text-primary); }
|
|
|
|
/* Dark mode: Mulberry mid-tone for stronger contrast */
|
|
html.dark .btn-primary {
|
|
background: #5b3d77; /* approx mulberry-500 */
|
|
border-color: #5b3d77;
|
|
box-shadow: 0 4px 12px rgba(11, 2, 19, 0.35);
|
|
}
|
|
html.dark .btn-primary:hover {
|
|
filter: brightness(1.08);
|
|
}
|
|
|
|
/* Teaser-aligned Form Elements */
|
|
.form-input {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
border: 2px solid var(--border-defined);
|
|
padding: 0.875rem 1rem;
|
|
font-size: 1rem;
|
|
width: 100%;
|
|
border-radius: 0.375rem;
|
|
transition: all 300ms ease-out;
|
|
}
|
|
.form-input:focus { outline: none; border-color: var(--chorus-primary); box-shadow: 0 0 0 3px rgba(11,2,19,0.1); background: var(--bg-secondary); }
|
|
.form-input::placeholder { color: var(--text-subtle); }
|
|
|
|
.btn-outline {
|
|
@apply border border-chorus-primary text-chorus-primary hover:bg-chorus-primary hover:text-white font-medium py-3 px-6 rounded-md transition-all duration-200;
|
|
}
|
|
|
|
.btn-text {
|
|
@apply bg-transparent text-chorus-secondary hover:text-white font-medium py-2 px-0 border-none transition-colors duration-200;
|
|
}
|
|
|
|
/* Clean Card System */
|
|
.card {
|
|
@apply bg-chorus-white border border-chorus-border-subtle p-8 rounded-lg transition-colors duration-200;
|
|
}
|
|
|
|
.card-elevated {
|
|
@apply bg-chorus-warm border border-chorus-border-invisible p-8 rounded-lg transition-colors duration-200;
|
|
}
|
|
|
|
/* Form Elements */
|
|
.input-field {
|
|
@apply block w-full border border-chorus-border-defined p-3 rounded-sm focus:border-chorus-secondary focus:outline-none transition-colors duration-200 bg-chorus-white text-chorus-text-primary;
|
|
}
|
|
|
|
.input-field:focus {
|
|
@apply border-chorus-secondary ring-0;
|
|
}
|
|
|
|
.label {
|
|
@apply block text-sm font-medium text-chorus-text-primary mb-2;
|
|
}
|
|
|
|
.error-text {
|
|
@apply text-red-400 text-sm mt-1;
|
|
}
|
|
|
|
.success-text {
|
|
@apply text-green-400 text-sm mt-1;
|
|
}
|
|
|
|
/* Status System */
|
|
.status-indicator {
|
|
@apply text-xs font-medium;
|
|
}
|
|
|
|
.status-online {
|
|
@apply status-indicator text-chorus-secondary;
|
|
}
|
|
|
|
.status-offline {
|
|
@apply status-indicator text-chorus-text-subtle;
|
|
}
|
|
|
|
.status-pending {
|
|
@apply status-indicator text-chorus-brown;
|
|
}
|
|
|
|
/* Progress Elements */
|
|
.progress-step {
|
|
@apply p-3 rounded-md border transition-all duration-200;
|
|
}
|
|
|
|
.progress-step-current {
|
|
@apply border-chorus-secondary bg-chorus-secondary bg-opacity-20 text-chorus-secondary;
|
|
}
|
|
|
|
.progress-step-completed {
|
|
@apply border-chorus-secondary bg-chorus-secondary bg-opacity-10 text-chorus-secondary;
|
|
}
|
|
|
|
.progress-step-accessible {
|
|
@apply border-chorus-border-defined hover:border-chorus-border-emphasis text-chorus-text-secondary;
|
|
}
|
|
|
|
.progress-step-disabled {
|
|
@apply border-chorus-border-invisible text-chorus-text-subtle cursor-not-allowed;
|
|
}
|
|
|
|
/* Typography Hierarchy */
|
|
.heading-hero {
|
|
@apply text-3xl font-semibold text-chorus-text-primary tracking-tight;
|
|
}
|
|
|
|
.heading-section {
|
|
@apply text-2xl font-semibold text-chorus-text-primary;
|
|
}
|
|
|
|
.heading-subsection {
|
|
@apply text-lg font-medium text-chorus-text-primary;
|
|
}
|
|
|
|
.text-body {
|
|
@apply text-base text-chorus-text-secondary leading-relaxed;
|
|
}
|
|
|
|
.text-small {
|
|
@apply text-sm text-chorus-text-subtle;
|
|
}
|
|
|
|
.text-ghost {
|
|
@apply text-sm text-gray-500 dark:text-gray-500;
|
|
}
|
|
}
|
|
|
|
/* Brand Panel Components */
|
|
@layer components {
|
|
.panel { @apply rounded-lg p-4 border; }
|
|
|
|
/* Info (Ocean) */
|
|
.panel-info { @apply border-ocean-200 bg-ocean-50; }
|
|
.panel-info .panel-title { @apply text-ocean-800; }
|
|
.panel-info .panel-body { @apply text-ocean-700; }
|
|
html.dark .panel-info { @apply border-ocean-700; background-color: rgba(58,70,84,0.20) !important; }
|
|
html.dark .panel-info .panel-title { @apply text-ocean-300; }
|
|
html.dark .panel-info .panel-body { @apply text-ocean-300; }
|
|
|
|
/* Note (Nickel / Neutral) */
|
|
.panel-note { background-color: #f5f4f1; border-color: #e0ddd7; }
|
|
.panel-note .panel-title { @apply text-chorus-text-primary; }
|
|
.panel-note .panel-body { @apply text-chorus-text-secondary; }
|
|
html.dark .panel-note { background-color: rgba(11,2,19,0.20) !important; border-color: var(--border-defined) !important; }
|
|
html.dark .panel-note .panel-title { @apply text-chorus-text-primary; }
|
|
html.dark .panel-note .panel-body { @apply text-chorus-text-secondary; }
|
|
|
|
/* Warning (Sand) */
|
|
.panel-warning { @apply bg-sand-100 border-sand-900; }
|
|
.panel-warning .panel-title { @apply text-sand-900; }
|
|
.panel-warning .panel-body { @apply text-sand-900; }
|
|
html.dark .panel-warning { background-color: rgba(106,92,70,0.20) !important; @apply border-sand-900; }
|
|
/* Fallback to white/neutral for readability in dark */
|
|
html.dark .panel-warning .panel-title { @apply text-white; }
|
|
html.dark .panel-warning .panel-body { color: #F1F0EF !important; }
|
|
|
|
/* Error (Coral) */
|
|
.panel-error { @apply bg-coral-50 border-coral-950; }
|
|
.panel-error .panel-title { @apply text-coral-950; }
|
|
.panel-error .panel-body { @apply text-coral-950; }
|
|
html.dark .panel-error { background-color: rgba(46,29,28,0.20) !important; @apply border-coral-950; }
|
|
html.dark .panel-error .panel-title { @apply text-white; }
|
|
html.dark .panel-error .panel-body { color: #ffd6d6 !important; }
|
|
|
|
/* Success (Eucalyptus) */
|
|
.panel-success { @apply bg-eucalyptus-50 border-eucalyptus-950; }
|
|
.panel-success .panel-title { @apply text-eucalyptus-950; }
|
|
.panel-success .panel-body { @apply text-eucalyptus-950; }
|
|
html.dark .panel-success { background-color: rgba(42,51,48,0.20) !important; @apply border-eucalyptus-950; }
|
|
html.dark .panel-success .panel-title { @apply text-white; }
|
|
html.dark .panel-success .panel-body { color: #bacfbf !important; }
|
|
}
|
|
|
|
/* Teaser-aligned color aliases */
|
|
@layer utilities {
|
|
/* 8 standard color families - key shades */
|
|
/* Ocean */
|
|
/* Ocean scale aliases (selected commonly used steps) */
|
|
.bg-ocean-700 { background-color: #5a6c80 !important; }
|
|
.text-ocean-700 { color: #5a6c80 !important; }
|
|
.border-ocean-700 { border-color: #5a6c80 !important; }
|
|
|
|
.bg-ocean-600 { background-color: #6a7e99 !important; }
|
|
.text-ocean-600 { color: #6a7e99 !important; }
|
|
.border-ocean-600 { border-color: #6a7e99 !important; }
|
|
|
|
.bg-ocean-500 { background-color: #7a90b2 !important; }
|
|
.text-ocean-500 { color: #7a90b2 !important; }
|
|
.border-ocean-500 { border-color: #7a90b2 !important; }
|
|
|
|
.bg-ocean-900 { background-color: #3a4654 !important; }
|
|
.text-ocean-900 { color: #3a4654 !important; }
|
|
.border-ocean-900 { border-color: #3a4654 !important; }
|
|
|
|
.text-ocean-800 { color: #4a5867 !important; }
|
|
.border-ocean-800 { border-color: #4a5867 !important; }
|
|
|
|
.text-ocean-300 { color: #9bb6d6 !important; }
|
|
.border-ocean-300 { border-color: #9bb6d6 !important; }
|
|
|
|
.border-ocean-200 { border-color: #abc9e8 !important; }
|
|
|
|
.bg-ocean-50 { background-color: #cbefff !important; }
|
|
.text-ocean-50 { color: #cbefff !important; }
|
|
.border-ocean-50 { border-color: #cbefff !important; }
|
|
|
|
/* Mulberry */
|
|
.bg-mulberry-950 { background-color: #0b0213 !important; }
|
|
.text-mulberry-950 { color: #0b0213 !important; }
|
|
.border-mulberry-950 { border-color: #0b0213 !important; }
|
|
|
|
/* Carbon */
|
|
.bg-carbon-950 { background-color: #000000 !important; }
|
|
.text-carbon-950 { color: #000000 !important; }
|
|
.border-carbon-950 { border-color: #000000 !important; }
|
|
|
|
/* Walnut */
|
|
.bg-walnut-900 { background-color: #403730 !important; }
|
|
.text-walnut-900 { color: #403730 !important; }
|
|
.border-walnut-900 { border-color: #403730 !important; }
|
|
|
|
/* Nickel */
|
|
.bg-nickel-500 { background-color: #c1bfb1 !important; }
|
|
.text-nickel-500 { color: #c1bfb1 !important; }
|
|
.border-nickel-500 { border-color: #c1bfb1 !important; }
|
|
|
|
/* Coral */
|
|
.bg-coral-950 { background-color: #2e1d1c !important; }
|
|
.bg-coral-50 { background-color: #ffd6d6 !important; }
|
|
.text-coral-950 { color: #2e1d1c !important; }
|
|
.border-coral-950 { border-color: #2e1d1c !important; }
|
|
|
|
/* Sand */
|
|
.bg-sand-900 { background-color: #6a5c46 !important; }
|
|
.bg-sand-100 { background-color: #F1F0EF !important; }
|
|
.text-sand-900 { color: #6a5c46 !important; }
|
|
.border-sand-900 { border-color: #6a5c46 !important; }
|
|
|
|
/* Eucalyptus */
|
|
.bg-eucalyptus-950 { background-color: #2a3330 !important; }
|
|
.bg-eucalyptus-50 { background-color: #bacfbf !important; }
|
|
.text-eucalyptus-950 { color: #2a3330 !important; }
|
|
.border-eucalyptus-950 { border-color: #2a3330 !important; }
|
|
|
|
/* Utility text/border fallbacks for theme tokens */
|
|
.text-chorus-primary { color: var(--text-primary) !important; }
|
|
.text-chorus-secondary { color: var(--text-secondary) !important; }
|
|
.text-chorus-text-primary { color: var(--text-primary) !important; }
|
|
.text-chorus-text-secondary { color: var(--text-secondary) !important; }
|
|
.text-chorus-text-tertiary { color: var(--text-tertiary) !important; }
|
|
.text-chorus-text-subtle { color: var(--text-subtle) !important; }
|
|
.text-chorus-text-ghost { color: var(--text-ghost) !important; }
|
|
.bg-chorus-primary { background-color: var(--bg-primary) !important; }
|
|
.bg-chorus-white { background-color: var(--bg-secondary) !important; }
|
|
.bg-chorus-warm { background-color: var(--bg-tertiary) !important; }
|
|
.border-chorus-border-subtle { border-color: var(--border-subtle) !important; }
|
|
.border-chorus-border-defined { border-color: var(--border-defined) !important; }
|
|
.border-chorus-border-invisible { border-color: var(--border-invisible) !important; }
|
|
}
|
|
|
|
/* CHORUS Typography utilities (subset) */
|
|
.text-h1 { font-size: 4.268rem; line-height: 6.96rem; font-weight: 100; letter-spacing: -0.02em; }
|
|
.text-h2 { font-size: 3.052rem; line-height: 4.768rem; font-weight: 700; }
|
|
.text-h3 { font-size: 2.441rem; line-height: 3.052rem; font-weight: 600; }
|
|
.text-h4 { font-size: 1.953rem; line-height: 2.441rem; font-weight: 600; }
|
|
.text-h5 { font-size: 1.563rem; line-height: 1.953rem; font-weight: 500; }
|
|
.text-h6 { font-size: 1.25rem; line-height: 1.563rem; font-weight: 500; }
|
|
|
|
/* Motion */
|
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
@keyframes slideUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } }
|
|
.animate-fade-in { animation: fadeIn 0.6s ease-out; }
|
|
.animate-slide-up { animation: slideUp 0.8s ease-out; }
|
|
|
|
/* Dark-mode heading contrast: make headings white unless panel overrides apply */
|
|
@layer base {
|
|
html.dark h1:not(.panel-title),
|
|
html.dark h2:not(.panel-title),
|
|
html.dark h3:not(.panel-title),
|
|
html.dark h4:not(.panel-title),
|
|
html.dark h5:not(.panel-title),
|
|
html.dark h6:not(.panel-title) {
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
html.dark .text-h1, html.dark .text-h2, html.dark .text-h3,
|
|
html.dark .text-h4, html.dark .text-h5, html.dark .text-h6 { color: #ffffff !important; }
|
|
}
|