/* ============================================================ main.css — layout + components See BRAND_HANDOFF.md §3.4 (layout), §7 (HTML), §13 (states) ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; } body { background: var(--bg); color: var(--text); font-family: var(--font-mono); font-weight: 400; line-height: 1.65; letter-spacing: -0.01em; min-height: 100vh; overflow: hidden; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--purple); } button { background: transparent; border: none; color: inherit; font: inherit; cursor: pointer; } input, textarea { font: inherit; color: inherit; background: transparent; border: none; outline: none; } .is-hidden { display: none !important; } /* === BOOT SHELL — see BRAND_HANDOFF.md §3.7.2 === */ /* NOTE: also inlined in index.html for paint-in-50ms. This is the matching CSS for after the inline rules drop. */ #boot-shell { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; background: var(--bg); z-index: 9999; transition: opacity 400ms var(--ease); } #boot-shell .boot-build { font-size: 0.72rem; color: var(--text-faint); letter-spacing: 0.06em; } #boot-shell .boot-line { font-size: 0.95rem; color: var(--green); } #boot-shell .boot-sigil { color: var(--green); margin-right: 0.4em; } #boot-shell .boot-cursor { display: inline-block; color: var(--green); font-size: 0.95rem; animation: blink var(--blink-cycle) steps(1) infinite; } #boot-shell.is-fading { opacity: 0; pointer-events: none; } /* === SPLASH === */ .splash { position: fixed; inset: 0; background: var(--bg); z-index: 100; cursor: pointer; opacity: 0; transition: opacity 400ms var(--ease); } .splash.is-revealed { opacity: 1; } .splash.is-fading { opacity: 0; pointer-events: none; } #hand-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .splash-annotation { position: absolute; font: 400 0.7rem var(--font-mono); color: var(--blue); letter-spacing: 0.08em; opacity: 0; transition: opacity 600ms var(--ease) 400ms; pointer-events: none; } .splash-annotation.is-revealed { opacity: 0.8; } .splash-annotation[data-corner="tl"] { top: 2.5vh; left: 3vw; } .splash-annotation[data-corner="tr"] { top: 2.5vh; right: 3vw; } .splash-annotation[data-corner="bl"] { bottom: 2.5vh; left: 3vw; } .splash-annotation[data-corner="br"] { bottom: 2.5vh; right: 3vw; } .splash-cta { position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%); color: var(--green); font: 400 1rem var(--font-mono); opacity: 0; transition: opacity 600ms var(--ease) 800ms; pointer-events: none; } .splash-cta.is-revealed { opacity: 1; } /* === MAIN — outer page === */ .main { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } .main[aria-hidden="true"] { display: none; } .outer-tl, .outer-tr, .outer-bl, .outer-br { position: absolute; font: 400 0.78rem var(--font-mono); color: var(--text-dim); z-index: 2; } .outer-tl { top: 2.5vh; left: 3vw; } .outer-tr { top: 2.5vh; right: 3vw; display: flex; align-items: center; gap: 0.5rem; } .outer-bl { bottom: 2.5vh; left: 3vw; color: var(--text-faint); } .outer-br { bottom: 2.5vh; right: 3vw; color: var(--text-faint); } .wordmark--compact { color: var(--purple); font-weight: 700; letter-spacing: 0.08em; text-decoration: none; } .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .status-text { color: var(--text-dim); } /* === PILL === */ .pill { width: var(--pill-w); height: var(--pill-h); border-radius: var(--pill-radius); border: 1px solid var(--border-bright); background: var(--surface); display: flex; flex-direction: column; overflow: hidden; position: relative; } .pill-chrome { flex-shrink: 0; padding: 1.1rem 1.6rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); font-size: 0.85rem; } .pill-id { color: var(--text); display: flex; align-items: center; gap: 0.5rem; } .pill-session { color: var(--text-faint); } .pill-body { flex: 1; overflow-y: auto; padding: 1.2rem 1.6rem; display: flex; flex-direction: column; gap: 0.85rem; scrollbar-width: thin; scrollbar-color: var(--border-bright) transparent; } .pill-body::-webkit-scrollbar { width: 6px; } .pill-body::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; } /* === MESSAGES === */ .msg { display: flex; gap: 0.6rem; align-items: flex-start; line-height: 1.55; } .msg .glyph { flex-shrink: 0; width: 1rem; font-weight: 700; } .msg-content { flex: 1; word-break: break-word; } .msg-content p { margin: 0 0 0.5rem; } .msg-content p:last-child { margin-bottom: 0; } .msg-content code { background: var(--surface-2); padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.92em; } .msg--daemon .glyph { color: var(--purple); } .msg--daemon .msg-content { color: var(--text); } .msg--user .glyph { color: var(--green); } .msg--user .msg-content { color: var(--text-dim); } .msg--error .glyph { color: var(--red); } .msg--error .msg-content { color: var(--red); } .msg--loading .glyph { color: var(--purple); } .msg--loading .msg-content { color: var(--text-faint); } /* Sent slash commands read as FUNCTIONS — electric blue. */ .msg--command .glyph, .msg--command .msg-content { color: var(--blue); } /* Hybrid-typewriter caret — blinks at the reveal head while a daemon msg types. */ @keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .msg-content.is-typing::after { content: '▎'; color: var(--purple); margin-left: 1px; animation: caret-blink 1.06s steps(1) infinite; } /* Code blocks inside daemon messages (e.g. /help, /whoami output). */ .msg-content pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.9rem; overflow-x: auto; margin: 0.3rem 0; } .msg-content pre code { background: none; padding: 0; font-size: 0.85rem; line-height: 1.5; } /* === STARTER CHIPS === */ .starter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .chip { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9999px; padding: 0.3rem 0.8rem; cursor: pointer; transition: all 0.15s var(--ease); } .chip:hover { color: var(--purple); border-color: var(--purple); } /* === CHAT INPUT === */ .chat-input-form { flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.6rem 1.1rem; border-top: 1px solid var(--border); } .chat-input-form .prompt { color: var(--purple); font-weight: 700; font-size: 1rem; } .chat-input { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9999px; padding: 0.55rem 1rem; color: var(--text); caret-color: var(--purple); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .chat-input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-glow); } .chat-input::placeholder { color: var(--text-faint); } .chat-send { width: 2rem; height: 2rem; border-radius: 50%; background: var(--purple); color: var(--bg); font-weight: 700; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s var(--ease); } .chat-send:disabled { opacity: 0.4; cursor: not-allowed; } .chat-send:hover:not(:disabled) { background: var(--purple-dim); } /* === SLASH MENU === */ .slash-menu { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 4.2rem; background: var(--surface-2); border: 1px solid var(--border-bright); border-radius: 12px; max-height: 240px; overflow-y: auto; padding: 0.3rem; z-index: 5; } .slash-menu-item { display: flex; gap: 0.8rem; align-items: baseline; padding: 0.5rem 0.7rem; border-radius: 6px; font-size: 0.85rem; cursor: pointer; } .slash-menu-item.is-active, .slash-menu-item:hover { background: var(--surface); } .slash-menu-item .cmd { color: var(--blue); font-weight: 700; min-width: 6rem; } /* functions = electric blue */ .slash-menu-item .desc { color: var(--text-dim); } /* === PROJECT CARDS (tool use rich cards) === */ .tool-cards { display: grid; gap: 0.6rem; } .project-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; } .project-card-name { color: var(--purple); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; } .project-card-blurb { color: var(--text); font-size: 0.88rem; } .project-card-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; } .tag { font-size: 0.7rem; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); padding: 0.1rem 0.5rem; border-radius: 3px; } .tag--status { color: var(--green); border-color: var(--green-dim); } .project-card-link { color: var(--blue); font-size: 0.78rem; } /* === COMMAND PALETTE === */ .palette { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding-top: 18vh; } .palette-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 7, 0.7); backdrop-filter: blur(8px); } .palette-panel { position: relative; width: min(560px, 90vw); background: var(--surface); border: 1px solid var(--border-bright); border-radius: 16px; overflow: hidden; } .palette-input { width: 100%; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); color: var(--text); font-size: 0.95rem; } .palette-input::placeholder { color: var(--text-faint); } .palette-results { list-style: none; max-height: 50vh; overflow-y: auto; } /* === MOBILE === */ @media (max-width: 768px) { :root { --pill-radius: 24px; } .pill { width: 94vw; height: 78vh; } .outer-bl, .outer-br { display: none; } .palette { display: none !important; } } @media (max-width: 360px) { .pill-chrome { padding: 0.8rem 1rem; font-size: 0.78rem; } .pill-body { padding: 0.9rem 1rem; } .chat-input-form { padding: 0.6rem 1rem 0.9rem; } }