diff --git a/frontend/src/style.css b/frontend/src/style.css index ca086b3..c4a478d 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -1,244 +1,62 @@ :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: #f4f7fb; + color: #102033; } -* { - 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: radial-gradient(circle at top left, #dff7ee, transparent 32rem), #f4f7fb; } +button, input { font: inherit; } +button { cursor: pointer; } +.loading { min-height: 100vh; display: grid; place-items: center; color: #526173; } +.launch-app { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0; } +.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr); gap: 28px; align-items: stretch; } +.hero-copy, .audit-card, .panel, .score-card { border: 1px solid rgba(16, 32, 51, 0.10); border-radius: 28px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 24px 70px rgba(28, 49, 75, 0.10); backdrop-filter: blur(14px); } +.hero-copy { padding: clamp(28px, 5vw, 58px); display: flex; flex-direction: column; justify-content: center; min-height: 430px; } +.eyebrow { margin: 0 0 12px; color: #0e8f73; font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; } +h1, h2, h3, p { margin-top: 0; } +h1 { max-width: 780px; margin-bottom: 20px; font-size: clamp(44px, 8vw, 84px); line-height: 0.92; letter-spacing: -0.075em; } +h2 { margin-bottom: 10px; font-size: clamp(30px, 4vw, 48px); line-height: 1; letter-spacing: -0.05em; } +h3 { margin-bottom: 18px; font-size: 18px; } +.lede { max-width: 720px; color: #526173; font-size: 18px; line-height: 1.7; } +.trust-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } +.trust-bar span, .pill { border-radius: 999px; padding: 8px 12px; background: #e9f8f4; color: #08725b; font-size: 13px; font-weight: 750; } +.audit-card { padding: 24px; display: grid; align-content: start; gap: 18px; } +.session-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #f1f5f9; color: #526173; } +.session-row a { color: #08725b; font-weight: 800; } +label { display: grid; gap: 8px; color: #334155; font-weight: 750; } +input { width: 100%; border: 1px solid #d5dde8; border-radius: 16px; background: white; color: #102033; padding: 14px 15px; outline: none; } +input:focus { border-color: #11a683; box-shadow: 0 0 0 4px rgba(17, 166, 131, 0.14); } +.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } +button { border: 0; border-radius: 16px; background: #102033; color: white; padding: 14px 18px; font-weight: 850; } +button.secondary { background: #e8eef6; color: #102033; } +button:disabled { opacity: 0.55; cursor: not-allowed; } +.hint { margin: 0; color: #64748b; font-size: 14px; } +.error { margin: 0; border-left: 4px solid #ef4444; border-radius: 12px; background: #fff1f2; color: #991b1b; padding: 12px 14px; } +.dashboard { display: grid; grid-template-columns: 0.75fr 1fr; gap: 22px; margin-top: 24px; } +.score-card, .panel { padding: 24px; } +.score-card { background: #102033; color: white; } +.score-card .eyebrow { color: #86efac; } +.score-card p { color: #cbd5e1; line-height: 1.6; } +.receipt { display: grid; gap: 8px; margin-top: 18px; padding: 14px; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; background: rgba(255,255,255,0.08); } +.receipt span { color: #86efac; font-weight: 800; } +.receipt code { overflow-wrap: anywhere; color: #e2e8f0; } +.checks-panel { min-height: 260px; } +.checks, .fixes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } +.check { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 14px; background: #f8fafc; color: #334155; } +.check span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 900; } +.check.pass span { background: #dcfce7; color: #15803d; } +.check.warn span { background: #fef3c7; color: #92400e; } +.evidence { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; margin: 0; } +.evidence dt { color: #64748b; font-weight: 800; } +.evidence dd { margin: 0; overflow-wrap: anywhere; } +.fixes-panel { grid-column: 1 / -1; } +.fixes li { border: 1px solid #e2e8f0; border-radius: 18px; padding: 16px; background: #fbfdff; } +.fixes strong { margin-left: 8px; text-transform: capitalize; } +.fixes p { margin: 10px 0 0; color: #475569; } +.pill.high { background: #fee2e2; color: #991b1b; } +.pill.medium { background: #fef3c7; color: #92400e; } +.pill.low { background: #e0f2fe; color: #075985; } +.empty { color: #64748b; line-height: 1.6; } +@media (max-width: 860px) { .hero, .dashboard { grid-template-columns: 1fr; } .hero-copy { min-height: auto; } .launch-app { width: min(100% - 20px, 1180px); padding: 18px 0; } }