/* Early-Macintosh 1-bit skin (System 1–6). Hand-rolled from the theme addendum tokens, using self-hosted ChicagoFLF + Monaco. Strict 1-bit: pure black, pure white, grays are dither. No anti-aliasing, no blur, no gradients except pinstripe + dither, no radius except the button. */ @font-face { font-family: 'Chicago'; src: url('/vendor/fonts/ChicagoFLF.woff2') format('woff2'), url('/vendor/fonts/ChicagoFLF.woff') format('woff'); font-display: swap; } @font-face { font-family: 'Monaco'; src: url('/vendor/fonts/monaco.woff2') format('woff2'), url('/vendor/fonts/monaco.woff') format('woff'); font-display: swap; } :root { --ink: #000000; --paper: #ffffff; --border-width: 1px; --shadow-offset: 2px; --titlebar-height: 20px; --menubar-height: 20px; --button-radius: 6px; } * { box-sizing: border-box; -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; text-rendering: optimizeSpeed; } html, body { margin: 0; height: 100%; font-family: 'Chicago', 'ChicagoFLF', Geneva, Tahoma, sans-serif; font-size: 15px; color: var(--ink); background: var(--paper); overflow: hidden; cursor: default; user-select: none; } /* 50% gray DITHER — the classic Finder desktop (2px checkerboard). */ .dither-50 { background-color: var(--paper); background-image: repeating-conic-gradient(var(--ink) 0% 25%, var(--paper) 0% 50%); background-size: 2px 2px; image-rendering: pixelated; } /* Active title-bar PINSTRIPES: alternating 1px horizontal lines. */ .titlebar-active { background-image: repeating-linear-gradient( to bottom, var(--ink) 0, var(--ink) 1px, var(--paper) 1px, var(--paper) 2px ); } /* ===================== System 7 theme (toggleable, additive) ===================== Default remains the strict 1-bit screen above. Adding class `sys7` to shifts to the 1991 System 7 era: color icons + rainbow Apple (swapped in JS), a lighter platinum desktop, and faintly raised buttons. Windows + pinstripe title bars carry over unchanged. (Platinum tokens are from the theme addendum's Section 7.) */ :root { --plat-light: #dddddd; --plat-mid: #aaaaaa; --plat-dark: #808080; } body.sys7 #desktop.dither-50 { /* lighter gray dither, the softer System 7 desktop */ background-image: repeating-conic-gradient(var(--plat-mid) 0% 25%, var(--paper) 0% 50%); } body.sys7 button, body.sys7 .btn { background: var(--plat-light); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--plat-mid); /* faint raised bevel */ } body.sys7 button:active, body.sys7 .btn:active { background: var(--ink); color: var(--paper); box-shadow: none; } body.sys7 button.default { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--plat-mid), 0 0 0 1px var(--paper), 0 0 0 2px var(--ink); } /* ---------------- menu bar ---------------- */ #menubar { position: fixed; top: 0; left: 0; right: 0; height: var(--menubar-height); background: var(--paper); border-bottom: var(--border-width) solid var(--ink); display: flex; align-items: center; gap: 18px; padding: 0 10px; z-index: 10000; font-size: 13px; } #menubar .apple { font-size: 15px; } #menubar .spacer { flex: 1; } #menubar .clock { font-variant-numeric: tabular-nums; } #menubar .mb-item { padding: 0 4px; } #menubar .mb-item:hover { background: var(--ink); color: var(--paper); } /* ---------------- desktop + icons ---------------- */ #desktop { position: fixed; top: var(--menubar-height); left: 0; right: 0; bottom: 0; } .desktop-icon { position: absolute; width: 72px; text-align: center; cursor: default; } .desktop-icon .glyph { width: 32px; height: 32px; margin: 0 auto; image-rendering: pixelated; } .desktop-icon .label { display: inline-block; margin-top: 3px; padding: 0 3px; font-size: 12px; background: transparent; color: var(--ink); } .desktop-icon.selected .glyph { filter: invert(1); } body.sys7 .desktop-icon.selected .glyph { filter: brightness(0.55); } .desktop-icon.selected .label { background: var(--ink); color: var(--paper); } /* ---------------- windows ---------------- */ .win { position: absolute; background: var(--paper); border: var(--border-width) solid var(--ink); box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--ink); min-width: 240px; display: flex; flex-direction: column; } .win .titlebar { height: var(--titlebar-height); border-bottom: var(--border-width) solid var(--ink); display: flex; align-items: center; position: relative; background: var(--paper); cursor: move; } .win.active .titlebar { /* pinstripes applied via .titlebar-active too */ } .win .titlebar .close-box { width: 11px; height: 11px; border: 1px solid var(--ink); margin-left: 6px; background: var(--paper); cursor: pointer; flex: none; } .win .titlebar .close-box:active { background: var(--ink); } .win .titlebar .title { position: absolute; left: 50%; transform: translateX(-50%); background: var(--paper); padding: 0 8px; font-size: 13px; white-space: nowrap; } .win .body { flex: 1; overflow: auto; padding: 10px; background: var(--paper); } /* System 7 size box: drag the bottom-right corner to resize */ .win .grow-box { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; z-index: 3; background-color: var(--paper); background-image: repeating-linear-gradient(135deg, var(--ink) 0 1px, var(--paper) 1px 3px); border-left: var(--border-width) solid var(--ink); border-top: var(--border-width) solid var(--ink); cursor: nwse-resize; } /* ---------------- buttons (the only radius) ---------------- */ button, .btn { font-family: inherit; font-size: 13px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: var(--button-radius); padding: 2px 12px; cursor: pointer; } button:active, .btn:active { background: var(--ink); color: var(--paper); } /* invert, no transition */ button.default { box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--ink); /* heavy default ring */ } input[type=text], input[type=email], textarea { font-family: inherit; font-size: 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 3px 5px; outline: none; } /* ---------------- list rows ---------------- */ .row { border-bottom: 1px solid var(--ink); padding: 6px 2px; } .row:last-child { border-bottom: none; } .meta { font-size: 12px; } .row .meta { font-size: 12px; } .tag { border: 1px solid var(--ink); padding: 0 4px; font-size: 11px; } /* ---------------- Assistant terminal ---------------- */ .terminal { font-family: 'Monaco', monospace; font-size: 20px; color: var(--ink); background: var(--paper); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; } .terminal .line { margin: 0; } .term-input-row { position: relative; font-family: 'Monaco', monospace; font-size: 20px; } .term-input-row .prompt { margin-right: 6px; } .term-echo { white-space: pre-wrap; overflow-wrap: anywhere; } /* real input is hidden but still focusable; echo spans + block cursor are the visible UI */ .term-input-row input.hidden-input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: none; padding: 0; } /* block cursor overlays the character at the caret: inverted (ink bg, paper text), blinking. min-width keeps an end-of-line space visible as a solid block. */ .cursor { display: inline-block; min-width: 0.6em; white-space: pre; /* ~25% shorter than the full line box, bottom-aligned to the text so it reads as a caret block rather than a tall bar. */ height: 1.1em; line-height: 1.1em; vertical-align: text-bottom; overflow: hidden; background: var(--ink); color: var(--paper); animation: blink 1s steps(1) infinite; } .spinner-line { display: flex; align-items: center; } .spinner-glyph { font-family: 'Monaco', monospace; line-height: 1; display: inline-block; } /* keep ALL terminal text one readable size (20px) — no tiny meta/spinner bits */ .terminal .meta, .terminal .spinner-glyph { font-size: 20px; } /* rendered Markdown in assistant replies (modern formatting, retro skin) */ .terminal strong { font-weight: bold; } .terminal code { font-family: 'Monaco', monospace; border: 1px solid var(--ink); padding: 0 3px; } .terminal .md-h { font-weight: bold; margin: 8px 0 2px; } .terminal .md-li { padding-left: 1.4em; text-indent: -1em; } .terminal .md-sp { height: 0.5em; } /* real tables in assistant replies (e.g. the weather forecast), themed hard-edged */ .md-table { border-collapse: collapse; margin: 8px 0; font-size: 16px; } .md-table th, .md-table td { border: 1px solid var(--ink); padding: 3px 8px; text-align: left; vertical-align: top; white-space: nowrap; } .md-table th { font-weight: bold; } body.sys7 .md-table th { background: #d8d8d8; } /* thumbs on responses (Addendum 5 Phase D) — quiet, passive */ .thumbs-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; } .thumbs-row .thumb { cursor: pointer; opacity: 0.45; font-size: 16px; filter: grayscale(1); } .thumbs-row .thumb:hover, .thumbs-row .thumb.on { opacity: 1; filter: none; } .thumb-comment { display: inline-flex; gap: 6px; align-items: center; } @keyframes blink { 50% { opacity: 0; } } /* ---------------- window-open zoom (the one animation) ---------------- */ .zoom-rect { position: fixed; border: 1px solid var(--ink); background: transparent; z-index: 9999; pointer-events: none; transition: transform 200ms linear, width 200ms linear, height 200ms linear, left 200ms linear, top 200ms linear; } @media (prefers-reduced-motion: reduce) { .zoom-rect { display: none; } } /* ---------------- login ---------------- */ #login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20000; } /* when logged in, #login is empty — collapse it so it doesn't overlay & swallow all clicks */ #login:empty { display: none; } /* ---------------- mobile fallback: drop the windowing, stack panels ---------------- */ @media (max-width: 640px) { #desktop .desktop-icon { display: none; } .win { position: static !important; width: 100% !important; height: auto !important; box-shadow: none; border-left: none; border-right: none; margin-bottom: 10px; transform: none !important; } #windows { position: fixed; top: var(--menubar-height); left: 0; right: 0; bottom: 0; overflow: auto; padding: 8px; } .zoom-rect { display: none; } .win .grow-box { display: none; } } /* ============================================================================================ Addendum 5 Phase G — System 7 platinum (now the PRIMARY look). Beveled gray chrome, raised buttons, inset wells, beveled gray scrollbars. The muted accent palette is functional only; gray does most of the work. The rainbow mushroom stays the one saturated element. ============================================================================================ */ :root { /* platinum grays */ --plat-bg: #c8c8c8; /* window/chrome face */ --plat-face: #d6d6d6; /* raised button face */ --plat-hi: #ffffff; /* top-left highlight */ --plat-sh: #808080; /* bottom-right shadow */ --plat-sh2: #555555; /* deeper shadow line */ --plat-well: #e8e8e8; /* inset field/list well */ /* muted, low-saturation accent palette (256-color era), functional accents only */ --acc-blue: #5a7a9a; --acc-green: #5f7a52; --acc-red: #9a5a5a; --acc-gold: #9a8a4a; } /* desktop: soft platinum */ body.sys7 { background: var(--plat-bg); } body.sys7 #desktop.dither-50 { background-color: var(--plat-bg); background-image: repeating-conic-gradient(#bdbdbd 0% 25%, var(--plat-bg) 0% 50%); background-size: 3px 3px; } /* menu bar: raised platinum strip */ body.sys7 #menubar { background: var(--plat-face); border-bottom: 1px solid var(--plat-sh); box-shadow: inset 0 1px 0 var(--plat-hi), inset 0 -1px 0 var(--plat-sh); } /* windows: gray face, beveled outer edge, hard drop shadow */ body.sys7 .win { background: var(--plat-bg); border: 1px solid var(--plat-sh2); box-shadow: inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-sh), 3px 3px 0 0 rgba(0,0,0,0.35); } body.sys7 .win .body { background: var(--plat-bg); } /* title bar: gray pinstripe; active gets the classic horizontal lines */ body.sys7 .win .titlebar { background: var(--plat-face); border-bottom: 1px solid var(--plat-sh); box-shadow: inset 0 1px 0 var(--plat-hi); } body.sys7 .win .titlebar.titlebar-active { background-image: repeating-linear-gradient( to bottom, var(--plat-sh) 0, var(--plat-sh) 1px, var(--plat-face) 1px, var(--plat-face) 2px); } body.sys7 .win .titlebar .title { background: var(--plat-face); padding: 0 6px; } /* close box: beveled */ body.sys7 .win .titlebar .close-box { background: var(--plat-face); box-shadow: inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-sh); } /* buttons: raised platinum with light/dark bevel; pressed = inset */ body.sys7 button, body.sys7 .btn { background: var(--plat-face); border: 1px solid var(--plat-sh2); box-shadow: inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-sh); padding: 3px 12px; border-radius: 0; } body.sys7 button:active, body.sys7 .btn:active { background: #bdbdbd; color: var(--ink); box-shadow: inset 1px 1px 0 var(--plat-sh2), inset -1px -1px 0 var(--plat-hi); } body.sys7 button.default { border: 2px solid var(--ink); box-shadow: inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-sh); } /* inset wells: text fields, selects, lists, the terminal, tables */ body.sys7 input[type=text], body.sys7 input[type=email], body.sys7 input[type=password], body.sys7 select, body.sys7 textarea, body.sys7 .terminal, body.sys7 .row, body.sys7 .md-table { background: var(--plat-well); border: 1px solid var(--plat-sh); box-shadow: inset 1px 1px 0 var(--plat-sh), inset -1px -1px 0 var(--plat-hi); } body.sys7 .terminal { box-shadow: inset 1px 1px 2px rgba(0,0,0,0.25); } /* beveled gray scrollbars (webkit) */ body.sys7 .body::-webkit-scrollbar, body.sys7 .terminal::-webkit-scrollbar, body.sys7 #windows::-webkit-scrollbar { width: 15px; height: 15px; } body.sys7 .body::-webkit-scrollbar-track, body.sys7 .terminal::-webkit-scrollbar-track { background: #bdbdbd; } body.sys7 .body::-webkit-scrollbar-thumb, body.sys7 .terminal::-webkit-scrollbar-thumb { background: var(--plat-face); border: 1px solid var(--plat-sh); box-shadow: inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-sh); } /* muted functional accents */ body.sys7 .tag { background: var(--acc-blue); color: #fff; border-radius: 0; padding: 0 4px; } body.sys7 .md-h { color: var(--acc-blue); } body.sys7 .cp-status-ok { color: var(--acc-green); } /* ============================================================================ Addendum 8 — color carries meaning. One shared, curated, meaning-carrying palette (recorded in DECISIONS.md). Used by the app AND the landing. ============================================================================ */ /* Agenda category tags: each type one bold-but-era-authentic color (not neon), so the kind of item reads at a glance. More specific than `body.sys7 .tag` so the per-category color wins. */ body.sys7 .tag.tag-health { background: #2f8f3a; color: #fff; } /* Health -> green */ body.sys7 .tag.tag-reminder { background: #2f54c8; color: #fff; } /* Reminder-> blue */ body.sys7 .tag.tag-bill { background: #d99422; color: #20203a; }/* Bill -> amber */ body.sys7 .tag.tag-date { background: #7a3fb0; color: #fff; } /* Date -> purple */ body.sys7 .tag.tag-recurring { background: #7a3fb0; color: #fff; } /* Recurring (shares Date purple) */ /* Grocery-by-category row tints: color the Shopping list by category the same way Agenda colors by type. Era-authentic DITHERED soft tint (the category color checkered with white, an 8-bit technique), NOT a smooth modern pastel. Item text stays dark for readability. Unmatched items (no cat-* class) keep the neutral default witem tint. Categorizer = groceryCategory() in app.js. */ .witem.cat-produce { background-color: #fff; background-image: repeating-conic-gradient(#7ec47e 0% 25%, #fff 0% 50%); background-size: 3px 3px; image-rendering: pixelated; } .witem.cat-dairy { background-color: #fff; background-image: repeating-conic-gradient(#88b6ec 0% 25%, #fff 0% 50%); background-size: 3px 3px; image-rendering: pixelated; } .witem.cat-household { background-color: #fff; background-image: repeating-conic-gradient(#e6bb63 0% 25%, #fff 0% 50%); background-size: 3px 3px; image-rendering: pixelated; } .witem.cat-pantry { background-color: #fff; background-image: repeating-conic-gradient(#cfb585 0% 25%, #fff 0% 50%); background-size: 3px 3px; image-rendering: pixelated; } .witem .wtext { color: #1a1a2e; } /* dark text on the soft tints */ /* menu-bar hover keeps the inverted classic look but in muted blue */ body.sys7 #menubar .mb-item:hover, body.sys7 #mushroom-menu .mi:hover { background: var(--acc-blue); color: #fff; } /* Agent window layout (Addendum 6A): the body is a flex column so the terminal scrolls and the attach+model bar stays pinned at the bottom, always visible regardless of chat length. */ .win .body.agent-body { display: flex; flex-direction: column; overflow: hidden; padding: 8px; } /* the scrolling chat region — keeps its own white "paper" background so it never blends into the System 7 gray window body, and scrolls independently of the pinned bar. */ .agent-term { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: #fff; border: 1px solid var(--plat-sh,#808080); padding: 8px; } body.sys7 .agent-term { box-shadow: inset 1px 1px 2px rgba(0,0,0,0.18); } /* pinned bar, never scrolls with the chat */ .agent-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 2px 2px; border-top: 1px solid var(--plat-sh,#808080); margin-top: 6px; } body.sys7 .agent-bar { box-shadow: inset 0 1px 0 #fff; } .agent-bar select { font: inherit; }