diff --git a/frontend/src/style.css b/frontend/src/style.css index ca086b3..4adcd65 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -1,244 +1,58 @@ :root { - color-scheme: dark; + color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - background: #090909; - color: #f5f5f5; + background: #f7f3ec; + color: #1e1a16; } -* { - box-sizing: border-box; -} - -body { - margin: 0; - min-height: 100vh; - background: #090909; -} - -button, -textarea { - font: inherit; -} - -button { - cursor: pointer; -} - -.loading { - min-height: 100vh; - display: grid; - place-items: center; - color: #b8b8b8; -} - -.app-shell { - min-height: 100vh; - display: grid; - grid-template-columns: minmax(260px, 340px) 1fr; -} - -.sidebar { - min-height: 100vh; - border-right: 1px solid #222; - background: #0d0d0d; - padding: 28px; - display: grid; - align-content: start; - gap: 28px; -} - -.eyebrow { - margin: 0 0 10px; - color: #8bd8c6; - font-size: 12px; - letter-spacing: 0; - text-transform: uppercase; -} - -h1, -h2, -h3, -p { - margin-top: 0; -} - -h1 { - margin-bottom: 10px; - font-size: clamp(32px, 5vw, 56px); - line-height: 0.95; - letter-spacing: 0; -} - -h2 { - margin-bottom: 0; - font-size: 30px; - letter-spacing: 0; -} - -h3 { - margin-bottom: 12px; - color: #d7d7d7; - font-size: 14px; - letter-spacing: 0; -} - -.agent-meta { - margin-bottom: 0; - color: #a6a6a6; -} - -.skill-list { - display: grid; - gap: 10px; -} - -.skill { - width: 100%; - min-height: 58px; - border: 1px solid #252525; - border-radius: 8px; - background: #121212; - color: #f3f3f3; - padding: 12px 14px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 16px; - text-align: left; -} - -.skill:hover, -.skill.active { - border-color: #5bb7a7; - background: #15201d; -} - -.skill span { - overflow-wrap: anywhere; -} - -.skill small { - color: #9d9d9d; -} - -.session { - border: 1px solid #252525; - border-radius: 8px; - padding: 14px; - color: #a6a6a6; - display: grid; - gap: 4px; -} - -.session strong { - color: #f3f3f3; - overflow-wrap: anywhere; -} - -.workbench { - padding: 28px; - display: grid; - align-content: start; - gap: 22px; -} - -.toolbar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 18px; -} - -.toolbar a, -.runner button { - border: 1px solid #e8e8e8; - border-radius: 7px; - background: #f4f4f4; - color: #111; - padding: 10px 14px; - text-decoration: none; - white-space: nowrap; -} - -.runner { - display: grid; - gap: 12px; -} - -.runner label { - display: grid; - gap: 10px; - color: #d7d7d7; -} - -.runner textarea { - width: 100%; - min-height: 170px; - resize: vertical; - border: 1px solid #252525; - border-radius: 8px; - background: #070707; - color: #eeeeee; - padding: 14px; - line-height: 1.5; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; -} - -.runner button { - justify-self: start; -} - -.runner button:disabled { - cursor: wait; - opacity: 0.72; -} - -.panels { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 16px; -} - -.panel { - min-width: 0; - border: 1px solid #252525; - border-radius: 8px; - padding: 16px; - background: #0d0d0d; -} - -pre { - min-height: 260px; - max-height: 420px; - margin: 0; - overflow: auto; - color: #dcdcdc; - line-height: 1.5; - font-size: 13px; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; -} - -.empty { - color: #aaa; -} - -@media (max-width: 820px) { - .app-shell { - grid-template-columns: 1fr; - } - - .sidebar { - min-height: auto; - border-right: 0; - border-bottom: 1px solid #222; - } - - .panels { - grid-template-columns: 1fr; - } - - .toolbar { - align-items: flex-start; - flex-direction: column; - } +* { box-sizing: border-box; } +body { margin: 0; min-height: 100vh; background: #f7f3ec; } +button, textarea, input { font: inherit; } +button { cursor: pointer; } +button:disabled { cursor: not-allowed; opacity: 0.58; } + +.loading { min-height: 100vh; display: grid; place-items: center; color: #5f554b; } +.app-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(300px, 420px) 1fr; } +.hero { background: #17120e; color: #fff8ed; padding: 34px; display: grid; align-content: start; gap: 24px; } +.eyebrow { margin: 0 0 8px; color: #b97743; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } +h1, h2, h3, p { margin-top: 0; } +h1 { margin-bottom: 16px; font-size: clamp(38px, 6vw, 72px); line-height: .92; letter-spacing: -0.06em; } +h2 { margin-bottom: 10px; font-size: 24px; letter-spacing: -0.03em; } +.lede { color: #e5d6c3; font-size: 17px; line-height: 1.65; } +.session-card, .capabilities, .panel { border: 1px solid rgba(95, 69, 43, .2); border-radius: 18px; box-shadow: 0 18px 50px rgba(38, 24, 12, .08); } +.session-card { display: grid; gap: 6px; padding: 16px; background: rgba(255, 248, 237, .08); } +.session-card span { color: #c7a987; } +.session-card strong { overflow-wrap: anywhere; } +.signin, .actions button, .upload button, .history button { justify-self: start; border: 0; border-radius: 999px; background: #c6672d; color: white; padding: 11px 16px; font-weight: 800; text-decoration: none; } +.capabilities { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; background: rgba(255,255,255,.06); } +.capabilities span { border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 10px; color: #ecd9c4; font-size: 13px; } +.studio { padding: 34px; display: grid; align-content: start; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 18px; } +.panel { background: #fffdf9; padding: 22px; } +.form { grid-column: 1 / -1; display: grid; gap: 16px; } +.row.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } +label { display: grid; gap: 8px; color: #5d5045; font-weight: 700; } +input, textarea { width: 100%; border: 1px solid #ded0bf; border-radius: 13px; background: #fffaf2; color: #1e1a16; padding: 12px 14px; } +textarea { min-height: 190px; resize: vertical; line-height: 1.55; } +.actions { display: flex; flex-wrap: wrap; gap: 10px; } +.actions button:nth-child(2), .history button { background: #33261c; } +.upload { display: grid; gap: 12px; align-content: start; } +.upload code { background: #f2e7d8; padding: 2px 5px; border-radius: 5px; } +.result { min-height: 320px; } +.result-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } +.receipt { border-radius: 999px; background: #e9f6eb; color: #21713a; padding: 7px 10px; font-size: 12px; font-weight: 800; } +.error { color: #9d2f20; background: #fff1ee; border: 1px solid #f3c5bb; padding: 12px; border-radius: 12px; } +.empty { color: #7a6e62; } +.timeline { display: grid; gap: 12px; } +.deadline { border-left: 5px solid #c6672d; background: #fff7ed; border-radius: 12px; padding: 14px; } +.deadline strong { display: block; margin-bottom: 7px; color: #2a2119; } +.deadline p { margin-bottom: 8px; color: #5b4c40; } +.deadline small { display: block; color: #77695c; line-height: 1.45; } +.history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } +.history li { display: grid; gap: 8px; } +.history span { color: #6a5e53; font-size: 14px; } + +@media (max-width: 920px) { + .app-shell { grid-template-columns: 1fr; } + .hero, .studio { padding: 24px; } + .studio, .row.two { grid-template-columns: 1fr; } }