/* ========================================================================= AutoAIDev — BeOS-retro design system (redesign/beos-v2) Static, framework-free extraction of the .dc.html scaffolds. No DCLogic / no / no style-hover — real CSS with :hover/:active. PALETTE silver desktop ........ #b8b8b8 (dotted 13px grid) window chrome gray .... #dcdcdc / #d8d8d8 / #e0e0e0 yellow title tab ...... #ffe873 -> #f8d33a -> #efbf14 (border #806300) blue accent / links ... #1d6fc4 (hover #0d4b91) blue button ........... #daf1ff -> #66b4f2 -> #0d55ab -> #3183d1 ink ................... #161a1e body text #3c464f muted #4d5761 TYPE body .................. "Helvetica Neue",Helvetica,Arial,sans-serif code/mono ............. "IBM Plex Mono",ui-monospace,Menlo,monospace Load IBM Plex Mono in (see assets/_shell.html). ========================================================================= */ /* ---- reset / base ------------------------------------------------------ */ html,body{margin:0;padding:0} *{box-sizing:border-box} body{ font-family:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif; color:#161a1e;background:#b8b8b8;-webkit-font-smoothing:antialiased; } a{color:#1d6fc4;text-decoration:none} a:hover{color:#0d4b91} code,.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace} h1,h2,h3,p{margin:0} img{max-width:100%} /* ---- fixed desktop background (silver dotted grid) --------------------- */ .beos-desktop{ position:fixed;inset:0;z-index:0;pointer-events:none;background-color:#b2b4b6; background-image: linear-gradient(rgba(0,0,0,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(0,0,0,.07) 1px,transparent 1px), radial-gradient(rgba(255,255,255,.5) .5px,transparent .5px), radial-gradient(120% 80% at 50% -12%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 62%); background-size:13px 13px,13px 13px,13px 13px,100% 100%; background-position:0 0,0 0,6px 6px,0 0; } /* animation layers — populated by assets/beos.js */ .beos-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} /* ---- keyframes (drifting bubbles + pulsing cells + cursor) ------------- */ @keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(14px,-30px)}100%{transform:translate(0,0)}} @keyframes sheen{0%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(340%) skewX(-18deg)}} @keyframes pulse{0%,100%{opacity:0}8%{opacity:.28}40%{opacity:.1}70%{opacity:0}} @keyframes blip{0%,100%{opacity:.2}50%{opacity:1}} @media (prefers-reduced-motion:reduce){ .beos-fx *{animation:none!important} } /* ---- page container ---------------------------------------------------- */ .beos-wrap{ position:relative;z-index:1;max-width:1180px;margin:0 auto; padding:16px clamp(12px,3vw,22px) 70px; } /* ---- top bar: brand tab + nav toolbar ---------------------------------- */ .beos-topbar{display:flex;flex-wrap:wrap;align-items:stretch;margin-bottom:22px;font-size:12.5px} .beos-brand{ display:flex;align-items:center;gap:9px; background:linear-gradient(180deg,#ffe873 0%,#f8d33a 55%,#efbf14 100%); border:1px solid #806300;border-bottom:none;padding:7px 15px; box-shadow:inset 1px 1px 0 rgba(255,255,255,1),inset -1px 0 0 rgba(0,0,0,.08); font-weight:700;color:#161a1e;white-space:nowrap; } .beos-brand:hover{color:#161a1e} .beos-brand .ai{color:#8a6f0a} .beos-brand-glyph{ width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:#fff; background:#1560ab;border:1px solid #0a3c7d;border-radius:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); font-family:"IBM Plex Mono",monospace;font-size:8px;font-weight:600; } .beos-nav{ flex:1 1 320px;display:flex;flex-wrap:wrap;align-items:center;gap:0; background:linear-gradient(180deg,#eaeaea,#cfcfcf);border:1px solid #767676; border-color:#8a8a8a #5f5f5f #5f5f5f #8a8a8a;padding:0 10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.14); } .beos-nav a{ color:#22282e;font-weight:500;white-space:nowrap;padding:8px 13px;transition:background .12s; border-left:1px solid rgba(255,255,255,.55);box-shadow:-1px 0 0 rgba(0,0,0,.08); } .beos-nav a:first-of-type{border-left:none;box-shadow:none} .beos-nav a:hover{ color:#22282e; background:linear-gradient(180deg,#e2f2ff,#b4dcf8); box-shadow:inset 1px 1px 0 rgba(255,255,255,.95); } /* current page — the pressed/inset tab */ .beos-nav a.is-active{ color:#161a1e;font-weight:700;background:#c9d4e4; box-shadow:inset 0 2px 0 #1d6fc4,inset 1px 0 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(0,0,0,.16); } .beos-nav a.is-active:hover{background:#c9d4e4} .beos-nav .spacer{flex:1} /* ---- buttons ----------------------------------------------------------- */ .beos-btn{ display:inline-block;font-weight:700;white-space:nowrap;cursor:pointer; transition:filter .12s,transform .06s,box-shadow .06s; } .beos-btn-primary{ color:#fff;border:1px solid #0a3c7d; background:linear-gradient(180deg,#4a9be8,#1663b4); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.18),1px 1px 0 rgba(16,64,120,.35); padding:12px 26px;font-size:15px; } .beos-btn-primary:hover{color:#fff;filter:brightness(1.08)} .beos-btn-primary:active{transform:translate(1px,1px);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)} .beos-btn-ghost{ color:#22282e;border:1px solid #9aa4ad; background:linear-gradient(180deg,#f5f7f9,#dee3e8); box-shadow:inset 0 1px 0 #fff,1px 1px 0 rgba(0,0,0,.22); padding:12px 24px;font-size:15px; } .beos-btn-ghost:hover{color:#22282e;filter:brightness(1.03)} .beos-btn-ghost:active{transform:translate(1px,1px);box-shadow:inset 0 1px 2px rgba(0,0,0,.22)} /* nav-corner GitHub button — same bevel recipe as the primary, at nav scale */ .beos-btn-nav{ color:#fff;font-weight:700;white-space:nowrap;padding:8px 20px;border:1px solid #0a3c7d; background:linear-gradient(180deg,#4a9be8,#1663b4); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.18); transition:filter .12s; } .beos-btn-nav:hover{color:#fff;filter:brightness(1.08)} /* keep the button's own dark bevel border, not the nav groove */ .beos-nav a.beos-btn-nav{ border-left:1px solid #0a3c7d; box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.18); } /* ---- window (title tab + inset pane) ----------------------------------- */ .beos-window{margin-bottom:40px} .beos-titlerow{display:flex;align-items:stretch} /* tab + fill overlap the pane's top border so they fuse into one outline */ .beos-titletab,.beos-titlefill{position:relative;z-index:1;margin-bottom:-1px} .beos-titletab{ display:flex;align-items:center;gap:8px; background:linear-gradient(180deg,#ffe873 0%,#f8d33a 55%,#efbf14 100%); border:1px solid #806300;border-bottom:none;padding:6px 16px; font-size:12.5px;font-weight:700;white-space:nowrap; box-shadow:inset 1px 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(128,99,0,.5); } .beos-titletab.sm{padding:5px 13px;font-size:11.5px} /* BeOS window close-box glyph on the tab (not an empty checkbox) */ .beos-titletab::before{ content:"";width:9px;height:9px;border:1px solid #8a6f0a; background:linear-gradient(180deg,#fffdf0,#e9c94a); box-shadow:inset 1px 1px 0 rgba(255,255,255,.9); } .beos-titletab.sm::before{width:8px;height:8px} /* inactive/secondary window tab — reserves the yellow tab for the main window */ .beos-titletab.inactive{ background:linear-gradient(180deg,#eee,#cfcfcf);border-color:#8a8a8a;color:#3c464f; box-shadow:inset 1px 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(0,0,0,.14); } .beos-titletab.inactive::before{border-color:#8a8a8a;background:linear-gradient(180deg,#fff,#d5d5d5)} .beos-titlerow .spacer{flex:1} /* the three fake window-control squares (used on terminal windows) */ .beos-titlefill{ flex:1;display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:0 9px; background:linear-gradient(180deg,#f4f6f8,#dbe1e6); border:1px solid #767676;border-bottom:none;border-left:none; box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.12); } .beos-ctl{ width:11px;height:11px;border:1px solid #6f7b85; background:linear-gradient(180deg,#f6f8fa,#c2ccd4);box-shadow:inset 0 1px 0 #fff; } .beos-pane{ border:1px solid #767676;border-color:#8a8a8a #5f5f5f #5f5f5f #8a8a8a; background:linear-gradient(180deg,#f6f6f6,#eceff1); box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(0,0,0,.22),3px 5px 12px rgba(0,0,0,.28); padding:clamp(32px,3.4vw,44px) clamp(20px,3.4vw,44px) 42px; } .beos-pane.tight{padding:clamp(30px,3.2vw,40px) clamp(20px,3.4vw,42px) 38px} /* ---- card (white paper panel with colored top edge + lift on hover) ---- */ .beos-card{ display:flex;flex-direction:column;height:100%; border:1px solid #767676;border-color:#8a8a8a #5f5f5f #5f5f5f #8a8a8a; background:linear-gradient(180deg,#ffffff,#f4f4f4); box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 rgba(0,0,0,.16),2px 4px 9px rgba(0,0,0,.22); padding:22px;transition:box-shadow .12s,transform .12s; } .beos-card:hover{transform:translate(-1px,-1px);box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 rgba(0,0,0,.16),3px 6px 13px rgba(0,0,0,.26)} .beos-card.accent-blue{border-top:3px solid #1d6fc4} .beos-card.accent-green{border-top:3px solid #2e8f36} .beos-card.accent-purple{border-top:3px solid #7231b8} /* push a card's CTA to a shared baseline so buttons align across the row */ .beos-card .cta{margin-top:auto;padding-top:16px} /* ---- hairline cell grid (1px gutter reveals #8f8f8f rule) -------------- */ .beos-cells{display:grid;gap:1px;background:#8f8f8f;border:1px solid #767676} .beos-cell{background:#fff;padding:26px 28px;transition:background .12s} .beos-cell:hover{background:#f4f7fa} .beos-cell.h-green:hover{background:#eef6ef} .beos-cell.h-purple:hover{background:#f2edf8} /* colored top edge unifies the cells with the .beos-card accent language */ .beos-cell.accent-blue{box-shadow:inset 0 2px 0 #1d6fc4} .beos-cell.accent-green{box-shadow:inset 0 2px 0 #2e8f36} .beos-cell.accent-purple{box-shadow:inset 0 2px 0 #7231b8} /* consistent heading + body inside a cell */ .beos-cell .cell-title{font-size:17px;font-weight:700;color:#161a1e;letter-spacing:-.01em;margin-bottom:12px} .beos-cell .cell-body{font-size:15px;line-height:1.66;color:#333b42;margin:0} /* ---- eyebrow / mono kicker -------------------------------------------- */ .beos-eyebrow{ font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.13em; text-transform:uppercase;color:#1d6fc4;font-weight:600; } .beos-index{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;color:#333b42} /* ---- colored square bullets / legend dots ----------------------------- */ .beos-dot{ display:inline-block;width:11px;height:11px;border:1px solid #0a3c7d; background:linear-gradient(180deg,#a8dcff,#1d6fc4);box-shadow:inset 1px 1px 0 rgba(255,255,255,.9); } .beos-dot.blue{background:linear-gradient(180deg,#a8dcff,#1d6fc4);border-color:#0a3c7d} .beos-dot.green{background:linear-gradient(180deg,#b6efb0,#2e8f36);border-color:#1c6323} .beos-dot.purple{background:linear-gradient(180deg,#e0c6ff,#7231b8);border-color:#4d1e83} .beos-dot.gray{background:linear-gradient(180deg,#dbe2e8,#5d6872);border-color:#3d454c} /* ---- inline code chip -------------------------------------------------- */ .beos-chip{font-size:14px;background:#fff;border:1px solid #999;padding:1px 5px} /* mono callout strip — reserved for actual command / log output */ .beos-callout{ border:1px solid #767676;background:#f4f6f8; box-shadow:inset 1px 1px 0 #fff,2px 2px 5px rgba(0,0,0,.16); padding:12px 14px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.7;color:#2a3138; } /* pull-quote — the emotional payoff line, NOT code */ .beos-pullquote{ border-left:3px solid #1d6fc4;padding:6px 0 6px 18px; font-size:18px;line-height:1.5;font-weight:500;font-style:italic;color:#1e262d; } /* ---- terminal window body --------------------------------------------- */ .beos-terminal-frame{ border:1px solid #767676;background:linear-gradient(180deg,#e9eef2,#d7dde2);padding:2px; box-shadow:inset 1px 1px 0 rgba(255,255,255,1),2px 2px 5px rgba(0,0,0,.16); } .beos-terminal{ background:linear-gradient(180deg,#1e252b,#12171b);border:1px solid #2b3339;padding:14px 16px; font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.55;color:#c9d6de; overflow-x:auto; } .beos-terminal .p{color:#5f7080} /* prompt $ */ .beos-terminal .tag{color:#7fc9ff} /* [AutoDev] */ .beos-terminal .y{color:#ffd23d} /* yellow value */ .beos-terminal .ok{color:#79d16b} /* done / success */ .beos-caret{display:inline-block;width:7px;height:13px;background:#c9d6de;vertical-align:-2px;margin-left:6px;animation:blip 1.1s steps(1,end) infinite} /* ---- typographic scale helpers ---------------------------------------- */ .beos-h1{font-size:clamp(32px,5.4vw,54px);line-height:1.04;letter-spacing:-.035em;font-weight:700;text-wrap:balance} .beos-h2{font-size:clamp(26px,3.6vw,34px);letter-spacing:-.03em;font-weight:700;text-wrap:balance} .beos-lead{font-size:16.5px;line-height:1.62;color:#333b42;max-width:34em;text-wrap:pretty} .beos-body{font-size:15.5px;line-height:1.62;color:#333b42;max-width:46em;text-wrap:pretty} .beos-accent{color:#1663b4} .beos-muted{color:#414b54} /* ---- footer ------------------------------------------------------------ */ .beos-footer{ display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px; margin-top:40px; border:1px solid #767676;border-color:#8a8a8a #5f5f5f #5f5f5f #8a8a8a; background:linear-gradient(180deg,#f0f0f0,#e0e2e4); box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(0,0,0,.18),3px 5px 12px rgba(0,0,0,.24); padding:22px clamp(18px,2.6vw,26px);font-size:12.5px;color:#414b54; } .beos-footer .fineprint{font-family:"IBM Plex Mono",monospace;font-size:12px;margin-top:6px} .beos-footer .footlinks{margin-top:8px;font-size:12px} .beos-footer .footlinks a{color:#1d6fc4} .beos-footer .footlinks a:hover{color:#0d4b91} .beos-footer .footlinks .sep{color:#9aa0a6;margin:0 7px} /* footer CTA reads as secondary, not a stray primary bar */ .beos-footer .beos-btn-primary{padding:9px 18px;font-size:13.5px} /* ---- generic grids page agents reuse ---------------------------------- */ /* top-aligned by default so a short terminal sits beside the eyebrow/H1, not floating mid-column; opt into centering with .beos-cols.center */ .beos-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(22px,3vw,38px);align-items:start} .beos-cols.center{align-items:center} .beos-cardrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px;align-items:stretch} /* each card cell is a flex column so its inner card fills the cell height */ .beos-cardrow>*{display:flex;flex-direction:column} .beos-cardrow>* .beos-card{flex:1 1 auto;height:auto} /* ---- portrait / small screens ----------------------------------------- */ @media (max-width:640px){ .beos-nav{flex-basis:100%} .beos-nav .spacer{display:none} .beos-btn-primary,.beos-btn-ghost{padding:11px 20px} }