/* ============================================================ EON — design system (v3: "ivory & ink", light theme only). Attribute-driven theming: . Later themes plug in as new html[data-theme="..."] blocks. Direction: quiet luxury. Warm paper whites, a single brass accent, Fraunces serif for display type, Inter for interface type. Restraint over ornament — depth comes from spacing, typography, and soft layered shadow, not decoration. Fonts are self-hosted (frontend/fonts/) — no third-party requests, so the UI renders identically offline or behind strict proxies. ============================================================ */ @font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/inter-400.woff2") format("woff2"); } @font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/inter-500.woff2") format("woff2"); } @font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/inter-600.woff2") format("woff2"); } @font-face{ font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/inter-700.woff2") format("woff2"); } @font-face{ font-family:"Inter"; font-style:normal; font-weight:800; font-display:swap; src:url("fonts/inter-800.woff2") format("woff2"); } @font-face{ font-family:"Fraunces"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/fraunces-500.woff2") format("woff2"); } @font-face{ font-family:"Fraunces"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/fraunces-600.woff2") format("woff2"); } /* ---- ivory & ink design tokens ---- */ html[data-theme="clean"]{ --bg:#FAF8F4; /* warm paper white */ --panel:#F3F0E9; --ink:#1C1813; /* warm near-black */ --ink-2:#6E6557; /* warm gray text */ --ink-3:#ABA190; /* faint warm gray */ --line:#E9E3D6; --line-2:#DCD3BF; --bubble:#F0ECE2; --hover:#EAE5D8; --gold:#A37E2C; /* brass accent — used sparingly */ --gold-deep:#7E611F; --gold-soft:#F6EFDD; --navy:#23344E; /* deep secondary accent */ --beam:#2E7DE9; /* refined tech blue (avatar glow, focus) */ --beam-2:#29BDFF; --beam-3:#14D8D0; --key:#A37E2C; /* primary accent = brass */ --danger:#C04444; --warn:#A9761F; --ok:#2E8B57; --shadow:0 1px 2px rgba(28,24,19,.05), 0 10px 30px rgba(28,24,19,.07); --shadow-lift:0 2px 4px rgba(28,24,19,.06), 0 18px 44px rgba(28,24,19,.12); --radius:16px; --radius-s:10px; --font-display:"Fraunces", Georgia, "Times New Roman", serif; --font-ui:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ease:cubic-bezier(.22,.61,.36,1); } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3{ margin:0 0 .5rem; letter-spacing:-.015em; } h1,h2{ font-family:var(--font-display); font-weight:600; } h2{ font-size:1.45rem; } h3{ font-size:1.02rem; font-weight:600; } p{ margin:.45rem 0; } .mono{ font-family:var(--font-mono); font-size:.85em; } .muted{ color:var(--ink-2); } .faint{ color:var(--ink-3); } code{ background:var(--bubble); padding:.12em .4em; border-radius:6px; font-size:.87em; border:1px solid var(--line); } ::selection{ background:var(--gold-soft); } /* refined scrollbars */ *{ scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; } *::-webkit-scrollbar{ width:9px; height:9px; } *::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; border:2px solid var(--bg); } *::-webkit-scrollbar-track{ background:transparent; } /* visible, elegant keyboard focus */ :focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; } /* quiet transitions on interactive elements */ button, select, textarea, input, a, .card, .skill-chip, .run-row{ transition:background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease); } /* ---------------- top bar ---------------- */ .topbar{ display:flex; align-items:center; gap:16px; padding:12px 22px; border-bottom:1px solid var(--line); background:rgba(250,248,244,.9); -webkit-backdrop-filter:saturate(1.1) blur(10px); backdrop-filter:saturate(1.1) blur(10px); position:sticky; top:0; z-index:40; } .wordmark{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; letter-spacing:.22em; margin-right:2px; } .wordmark .dot{ color:var(--gold); } .tagline{ font-size:.8rem; color:var(--ink-3); border-left:1px solid var(--line-2); padding-left:16px; letter-spacing:.02em; } .topbar .spacer{ flex:1; } .seg{ display:inline-flex; background:var(--bubble); border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px; } .seg button{ border:0; background:transparent; color:var(--ink-2); font:600 .8rem var(--font-ui); padding:7px 15px; border-radius:999px; cursor:pointer; letter-spacing:.02em; } .seg button:hover{ color:var(--ink); } .seg button[aria-pressed="true"]{ background:var(--ink); color:#FBF9F4; box-shadow:0 2px 8px rgba(28,24,19,.25); } .status-pill{ display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:500; color:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:6px 13px; background:#fff; } .status-pill .led{ width:8px; height:8px; border-radius:50%; background:var(--ink-3); box-shadow:0 0 0 3px var(--bubble); } .status-pill.ok .led{ background:var(--ok); box-shadow:0 0 0 3px rgba(46,139,87,.14); } .status-pill.bad .led{ background:var(--danger); box-shadow:0 0 0 3px rgba(192,68,68,.14); } .safety-link{ font-size:.84rem; font-weight:500; color:var(--ink-2); text-decoration:none; border:1px solid var(--line); padding:7px 14px; border-radius:999px; background:#fff; } .safety-link:hover{ background:var(--hover); color:var(--ink); border-color:var(--line-2); } /* ---------------- shell grid ---------------- */ .shell{ display:grid; grid-template-columns:216px minmax(0,1fr) 330px; height:calc(100dvh - 61px); } .leftnav{ border-right:1px solid var(--line); background:var(--panel); padding:16px 12px; display:flex; flex-direction:column; gap:3px; } .leftnav button{ display:flex; align-items:center; gap:11px; width:100%; border:0; background:transparent; text-align:left; cursor:pointer; font:500 .92rem var(--font-ui); color:var(--ink-2); padding:10px 13px; border-radius:var(--radius-s); position:relative; } .leftnav button .ico{ width:1.4em; height:1.4em; display:inline-flex; align-items:center; justify-content:center; flex:none; opacity:.85; } .leftnav button .ico svg{ width:1.15em; height:1.15em; } .leftnav button:hover{ background:var(--hover); color:var(--ink); } .leftnav button:hover .ico{ opacity:1; } .leftnav button[aria-current="true"]{ background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2), 0 2px 8px rgba(28,24,19,.05); font-weight:600; } .leftnav button[aria-current="true"]::before{ content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:99px; background:var(--gold); } .leftnav button[aria-current="true"] .ico{ opacity:1; color:var(--gold-deep); } .nav-foot{ margin-top:auto; font-size:.72rem; color:var(--ink-3); padding:10px 13px; letter-spacing:.02em; } .main{ overflow-y:auto; padding:30px 34px 70px; min-width:0; } .panel{ display:none; max-width:880px; animation:panelIn .28s var(--ease); } .panel.active{ display:block; } @keyframes panelIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} } .panel-head{ margin-bottom:20px; } .panel-head h2{ margin-bottom:2px; } .panel-head p{ color:var(--ink-2); margin:.3rem 0 0; max-width:64ch; font-size:.94rem; } /* ---------------- chat ---------------- */ #messages{ display:flex; flex-direction:column; gap:14px; margin-bottom:20px; } .msg{ max-width:78%; padding:12px 17px; border-radius:18px; border:1px solid var(--line); background:var(--bubble); box-shadow:0 1px 3px rgba(28,24,19,.04); animation:msgIn .25s var(--ease); } @keyframes msgIn{ from{ opacity:0; transform:translateY(5px);} to{ opacity:1; transform:none;} } .msg.user{ align-self:flex-end; background:var(--ink); color:#FBF9F4; border-color:var(--ink); border-bottom-right-radius:6px; } .msg.model{ align-self:flex-start; background:#fff; border-bottom-left-radius:6px; } .msg .who{ font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px; } .msg.user .who{ color:#C9BFAE; } .mode-badge{ display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; border:1px solid var(--line-2); border-radius:999px; padding:2px 9px; margin-left:8px; color:var(--ink-2); background:var(--panel); vertical-align:1px; } .mode-badge.local{ color:var(--beam); border-color:var(--beam); background:#fff; } .mode-badge.provider{ color:var(--gold-deep); border-color:var(--gold); background:var(--gold-soft); } .mode-badge.demo{ color:var(--warn); border-color:var(--warn); background:#fff; } .typing-dots{ display:inline-flex; gap:5px; padding:6px 2px; } .typing-dots span{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); animation:tp 1.2s infinite var(--ease); } .typing-dots span:nth-child(2){ animation-delay:.15s; } .typing-dots span:nth-child(3){ animation-delay:.3s; } @keyframes tp{ 0%,60%,100%{ transform:none; opacity:.5;} 30%{ transform:translateY(-4px); opacity:1;} } .composer{ display:flex; gap:10px; align-items:flex-end; background:#fff; border:1px solid var(--line-2); border-radius:20px; padding:8px 8px 8px 6px; box-shadow:var(--shadow); } .composer:focus-within{ border-color:var(--gold); box-shadow:var(--shadow-lift); } .composer textarea{ flex:1; resize:none; min-height:46px; max-height:160px; border:0; padding:11px 12px; font:400 .95rem var(--font-ui); background:transparent; color:var(--ink); } .composer textarea:focus{ outline:none; } .composer textarea::placeholder{ color:var(--ink-3); } .icon-btn{ border:1px solid var(--line-2); background:#fff; border-radius:50%; width:48px; height:48px; font-size:1.2rem; cursor:pointer; flex:none; display:inline-flex; align-items:center; justify-content:center; } .icon-btn:hover{ background:var(--hover); border-color:var(--ink-3); transform:translateY(-1px); } .icon-btn:active{ transform:translateY(0) scale(.96); } .icon-btn.on{ background:var(--danger); border-color:var(--danger); color:#fff; } /* mic recording state: mic icon swaps to a pulsing stop square (see voice.js) */ #mic-btn .ic-stop{ display:none; width:15px; height:15px; border-radius:4px; background:currentColor; } #mic-btn.recording .ic-mic{ display:none; } #mic-btn.recording .ic-stop{ display:block; animation:recPulse 1.3s ease-in-out infinite; } #mic-btn.recording{ background:var(--danger); border-color:var(--danger); color:#fff; } @keyframes recPulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.45; transform:scale(.86);} } #dock-toggle{ display:inline-flex; align-items:center; justify-content:center; padding:8px 11px; } .btn{ border:1px solid var(--line-2); background:#fff; color:var(--ink); font:600 .88rem var(--font-ui); padding:10px 20px; border-radius:999px; cursor:pointer; letter-spacing:.01em; } .btn:hover{ background:var(--hover); border-color:var(--ink-3); transform:translateY(-1px); box-shadow:0 4px 12px rgba(28,24,19,.08); } .btn:active{ transform:translateY(0) scale(.98); box-shadow:none; } .btn.primary{ background:var(--ink); border-color:var(--ink); color:#FBF9F4; } .btn.primary:hover{ background:#2C261D; filter:none; } .btn.ghost{ background:transparent; } .btn.small{ padding:7px 13px; font-size:.8rem; } .btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; } .btn.ok{ background:var(--ok); border-color:var(--ok); color:#fff; } .notice{ border:1px solid var(--line-2); background:#fff; border-radius:var(--radius-s); padding:11px 15px; font-size:.86rem; color:var(--ink-2); margin:12px 0; box-shadow:0 1px 3px rgba(28,24,19,.04); } .notice.warn{ border-color:var(--warn); color:#7A5A12; background:#FFFBF0; } .notice.bad{ border-color:var(--danger); color:var(--danger); background:#FDF6F6; } /* ---------------- forms / cards ---------------- */ .captain-row{ display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; } .captain-row label{ font-size:.8rem; font-weight:600; color:var(--ink-2); letter-spacing:.03em; text-transform:uppercase; } .captain-row select{ border:1px solid var(--line-2); border-radius:999px; padding:9px 14px; font:500 .88rem var(--font-ui); background:#fff; color:var(--ink); max-width:300px; cursor:pointer; } .captain-row select:hover{ border-color:var(--ink-3); } .captain-row select:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); } .captain-vibe{ font-style:italic; font-family:var(--font-display); font-size:.95rem; color:var(--ink-2); } .field{ margin:14px 0; } .field label{ display:block; font-size:.78rem; font-weight:600; color:var(--ink-2); margin-bottom:7px; letter-spacing:.04em; text-transform:uppercase; } .field input[type="text"], .field input[type="url"], .field input[type="password"], .field select, .field textarea{ width:100%; border:1px solid var(--line-2); border-radius:var(--radius-s); padding:11px 13px; font:400 .92rem var(--font-ui); background:#fff; color:var(--ink); } .field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--ink-3); } .field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); } fieldset.provider{ border:1px dashed var(--line-2); border-radius:var(--radius); padding:16px 18px; margin-top:24px; background:#fff; } fieldset.provider legend{ font-size:.76rem; font-weight:700; color:var(--ink-3); padding:0 10px; letter-spacing:.08em; text-transform:uppercase; } .grid{ display:grid; gap:16px; } .grid.cols-2{ grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); } .card{ border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; background:#fff; box-shadow:var(--shadow); } .card:hover{ box-shadow:var(--shadow-lift); transform:translateY(-2px); } .card h3{ margin-bottom:5px; font-family:var(--font-display); font-weight:600; font-size:1.08rem; } .card .meta{ font-size:.78rem; color:var(--ink-3); letter-spacing:.02em; } .tag{ display:inline-block; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--bubble); color:var(--ink-2); border:1px solid var(--line-2); margin:0 6px 4px 0; letter-spacing:.03em; } .tag.need{ background:#FFFBF0; color:var(--warn); border-color:var(--warn); } .preview-box{ border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:16px; margin:16px 0; text-align:center; } .preview-box canvas, .preview-box svg, .preview-box video, .preview-box img{ max-width:100%; border-radius:10px; box-shadow:var(--shadow); } table.audit{ width:100%; border-collapse:collapse; font-size:.86rem; margin-top:12px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-s); overflow:hidden; } table.audit th, table.audit td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); } table.audit tr:last-child td{ border-bottom:0; } table.audit th{ color:var(--ink-3); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; background:var(--panel); } .pill-allow{ color:var(--ok); font-weight:700; } .pill-deny{ color:var(--danger); font-weight:700; } /* ---------------- avatar dock ---------------- */ .avatar-dock{ border-left:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; min-height:0; } .dock-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); background:#fff; } .dock-head strong{ font-size:.74rem; letter-spacing:.18em; font-weight:700; color:var(--gold-deep); } #avatar-stage{ position:relative; flex:1; min-height:320px; background: radial-gradient(120% 90% at 50% 18%, #FFFFFF 0%, var(--panel) 72%); } #avatar-stage canvas{ display:block; width:100%; height:100%; cursor:grab; } #avatar-stage canvas:active{ cursor:grabbing; } .dock-caption{ padding:13px 18px; font-size:.78rem; color:var(--ink-3); border-top:1px solid var(--line); background:#fff; letter-spacing:.02em; } .avatar-fallback{ display:flex; align-items:center; justify-content:center; height:100%; padding:20px; } .avatar-fallback svg{ width:78%; max-width:260px; height:auto; animation:bob 3.2s ease-in-out infinite; filter:drop-shadow(0 14px 22px rgba(28,24,19,.12)); } @keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} } .speaking-hint{ color:var(--gold-deep); font-weight:600; } /* ---------------- demo banner ---------------- */ #demo-banner{ position:sticky; top:61px; z-index:30; background:#FFFBF0; border-bottom:1px solid var(--warn); color:#7A5A12; font-size:.85rem; padding:9px 18px; text-align:center; letter-spacing:.01em; } #demo-banner[hidden]{ display:none; } /* ---------------- responsive ---------------- */ @media (max-width:1120px){ .shell{ grid-template-columns:68px minmax(0,1fr); } .leftnav button span.lbl{ display:none; } .leftnav button{ justify-content:center; } .leftnav button[aria-current="true"]::before{ display:none; } .nav-foot{ display:none; } .avatar-dock{ position:fixed; right:16px; bottom:16px; width:252px; height:336px; border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow-lift); z-index:50; background:#fff; overflow:hidden; } .avatar-dock.collapsed{ display:none; } } @media (max-width:700px){ .tagline{ display:none; } .topbar{ padding:10px 14px; } .main{ padding:20px 15px 90px; } .msg{ max-width:94%; } .shell{ grid-template-columns:minmax(0,1fr); } .leftnav{ flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:8px 10px; gap:6px; } .leftnav button{ width:auto; white-space:nowrap; } .leftnav button span.lbl{ display:inline; } .leftnav button[aria-current="true"]::before{ display:none; } .composer{ border-radius:22px; } } /* ---- suggested skill chips (chat) ---- */ .skill-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; } .skill-chip{ border:1px solid var(--line-2); background:#fff; border-radius:999px; padding:6px 14px; font-size:.8rem; font-weight:500; color:var(--ink-2); cursor:pointer; box-shadow:0 1px 2px rgba(28,24,19,.04); } .skill-chip:hover{ border-color:var(--gold); color:var(--gold-deep); background:var(--gold-soft); transform:translateY(-1px); box-shadow:0 4px 10px rgba(163,126,44,.14); } /* ---- light markdown (EON.rich) ---- */ .md-h1{ font-family:var(--font-display); font-size:1.2em; font-weight:600; margin:.85em 0 .4em; } .md-h2{ font-family:var(--font-display); font-size:1.08em; font-weight:600; margin:.75em 0 .35em; } .md-h3{ font-size:1em; font-weight:700; margin:.6em 0 .3em; } .md-ul{ margin:.45em 0 .45em 1.25em; padding:0; } .md-ul li{ margin:.25em 0; } .md-oli{ margin:.25em 0; } /* ---- skill playbook modal ---- */ .skill-overlay{ position:fixed; inset:0; background:rgba(28,24,19,.42); backdrop-filter:blur(6px); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; animation:ovIn .2s var(--ease); } @keyframes ovIn{ from{ opacity:0;} to{ opacity:1;} } .skill-modal{ background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lift); max-width:660px; width:100%; max-height:82vh; display:flex; flex-direction:column; animation:modalIn .28s var(--ease); overflow:hidden; } @keyframes modalIn{ from{ opacity:0; transform:translateY(14px) scale(.985);} to{ opacity:1; transform:none;} } .skill-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--line); background:var(--panel); } .skill-modal-head h3{ margin:0; font-size:1.1rem; font-family:var(--font-display); font-weight:600; } .skill-modal-body{ padding:20px 24px; overflow-y:auto; font-size:.92rem; line-height:1.65; } .skill-modal-body .rich{ white-space:normal; } .skill-modal-body .md-h1{ font-size:20px; margin:14px 0 8px; } .skill-modal-body .md-h2{ font-size:17px; margin:13px 0 6px; } .skill-modal-body .md-h3{ font-size:15px; margin:11px 0 4px; } .skill-modal-body .md-ul{ margin:6px 0 6px 20px; padding:0; } .skill-modal-body .md-ul li{ margin:3px 0; } .skill-modal-body .md-oli{ margin:3px 0; } .skill-modal-body code{ background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:12px; } /* ---- workflow cards ---- */ .wf-params{ font-family:var(--font-mono); font-size:.84rem; } .wf-params::placeholder{ color:var(--ink-3); } .run-status{ font-size:.87rem; } .run-status p{ margin:.35rem 0; } .run-status .btn{ margin:5px 8px 0 0; } .audit-out{ font-size:.85rem; } /* ---- workflow run history ---- */ .run-history{ margin-top:20px; }.run-history h3{ font-size:.95rem; margin:0 0 10px; font-family:var(--font-display); font-weight:600; letter-spacing:.01em; } .run-row{ display:flex; align-items:center; gap:11px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; font-size:.83rem; background:#fff; box-shadow:0 1px 2px rgba(28,24,19,.03); } .run-row:hover{ border-color:var(--line-2); box-shadow:var(--shadow); } .run-row .mono{ color:var(--ink-3); } .run-row .grow{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ---- reduced motion ---- */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }