/* Utopia by UltraWeb — theme system. * One variable palette drives both themes. The app uses Tailwind arbitrary * colors (bg-[#0f1115], text-zinc-400, border-white/10, ...) heavily, so we * remap those literal utilities onto the palette variables here. Swap the * .dark class on (handled in app.js / inline boot) to switch themes; * tune a theme by editing only its variable block below. */ :root { /* Brand — UltraWeb / Utopia primary. Same in both themes. */ /* --brand-text-dark is the lighter variant used by .text-brand in dark mode (the base --brand is hard to read on a dark background). User- theme presets override both at runtime via document.documentElement. */ --brand: #145DEF; --brand-hover: #0F4BC8; --brand-text-dark: #8eb6ff; --on-brand: #ffffff; /* Light theme (default) — mirrors the new ultrawebmarketing.com site. */ --bg: #ffffff; --surface: #f6f7f9; --surface-2: #eef1f5; --fg: #15171c; --fg-muted: #5b6472; --fg-subtle: #8a93a3; --line: rgba(17, 24, 39, 0.10); --line-strong: rgba(17, 24, 39, 0.18); --hover: rgba(17, 24, 39, 0.045); --user-bubble: var(--brand); --user-bubble-fg: #ffffff; --scrollbar: rgba(17, 24, 39, 0.22); color-scheme: light; } html.dark { --bg: #0f1115; --surface: #161922; --surface-2: #1c2130; --fg: #e9ebf1; --fg-muted: #b8c0ce; --fg-subtle: #8b94a6; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16); --hover: rgba(255, 255, 255, 0.05); --user-bubble: var(--brand); --user-bubble-fg: #ffffff; --scrollbar: #2a2d36; color-scheme: dark; } html, body, #root { height: 100%; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--fg); touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* ---- Remap the app's literal Tailwind utilities onto the palette ---- */ .bg-\[\#0f1115\] { background-color: var(--bg) !important; } .bg-\[\#13151c\], .bg-\[\#13151c\]\/90 { background-color: var(--surface) !important; } .bg-\[\#16181f\] { background-color: var(--surface) !important; } .bg-\[\#1a1d26\] { background-color: var(--surface-2) !important; } .bg-\[\#171a23\] { background-color: var(--surface-2) !important; } .bg-zinc-700 { background-color: var(--surface-2) !important; } .bg-zinc-800 { background-color: var(--surface-2) !important; } /* `html ` prefix raises specificity above .text-zinc-100 so the user * bubble keeps white text on the #145DEF brand background. */ html .bg-\[\#1c3a5f\] { background-color: var(--user-bubble) !important; color: var(--user-bubble-fg) !important; } .text-zinc-50, .text-zinc-100, .text-zinc-200 { color: var(--fg) !important; } .text-zinc-300, .text-zinc-400 { color: var(--fg-muted) !important; } .text-zinc-500, .text-zinc-600 { color: var(--fg-subtle) !important; } .border-white\/5, .border-white\/10 { border-color: var(--line) !important; } .border-white\/15, .border-white\/20 { border-color: var(--line-strong) !important; } .bg-white\/5 { background-color: var(--hover) !important; } .bg-white\/10 { background-color: var(--line) !important; } .hover\:bg-white\/5:hover { background-color: var(--hover) !important; } .hover\:bg-white\/10:hover { background-color: var(--line) !important; } .hover\:bg-\[\#1a1d26\]:hover { background-color: var(--surface-2) !important; } /* Smooth scroll on the message list. */ .msg-scroll { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; scroll-behavior: smooth; } .msg-scroll::-webkit-scrollbar { width: 8px; } .msg-scroll::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; } .msg-scroll::-webkit-scrollbar-track { background: transparent; } /* "Typing" dots for the live status banner — staggered fade+scale. */ @keyframes dot-bounce { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.75); } 40% { opacity: 1; transform: scale(1); } } .dot-bounce { animation: dot-bounce 1.2s ease-in-out infinite; } /* Pulsing cursor for streaming state. */ @keyframes pulse-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } .cursor-pulse { display: inline-block; width: 8px; height: 16px; margin-left: 2px; background: currentColor; vertical-align: text-bottom; animation: pulse-cursor 1s ease-in-out infinite; border-radius: 2px; } /* Plain-text wrap for message bubbles. */ /* Bubble text — paragraphs are rendered as real

elements with a controlled margin (see BubbleText in app.js); single newlines inside a paragraph still wrap visibly. line-height tuned for chat density. */ .bubble-text { word-wrap: break-word; line-height: 1.45; } .bubble-text > p { white-space: pre-wrap; } .bubble-text > p + p { margin-top: 0.5rem; } /* Auto-grow textarea cap + iOS no zoom. */ textarea.composer { max-height: 200px; font-size: 16px; } /* Mic recording pulse — brand-glow halo. */ @keyframes mic-pulse-anim { 0% { box-shadow: 0 0 0 0 rgba(20, 93, 239, 0.50); } 70% { box-shadow: 0 0 0 12px rgba(20, 93, 239, 0); } 100% { box-shadow: 0 0 0 0 rgba(20, 93, 239, 0); } } .mic-pulse { animation: mic-pulse-anim 1.4s ease-out infinite; } /* Editorial display face for big titles + the brand wordmark. */ .font-display { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -0.005em; } /* Brand-tile lockup for the header/login/sidebar logo. */ .brand-tile { background: var(--brand); } .brand-tile img { filter: brightness(0) invert(1); } /* Dark mode: brand-colored TEXT and icons (sidebar wordmark + model line + * active nav icon, sub-page title accents, links, file chips) use a lighter, * more legible blue. Backgrounds (bg-brand buttons), borders and focus rings * keep the primary #145DEF. Light mode keeps #145DEF for contrast on white. */ html.dark .text-brand { color: var(--brand-text-dark) !important; } /* Subtle section-intro accent rule for sub-pages. */ .page-intro { border-left: 3px solid var(--brand); padding-left: 0.85rem; } /* Larger tap targets on mobile. */ @media (max-width: 768px) { button, [role="button"] { min-width: 40px; min-height: 40px; } }