`agents/web-agent/app/globals.css`

178 lines
/* drvouch public-facing site — grid-first, cream-on-moss, modern editorial. */

:root {
  --cream:     #fbf7f0;
  --ink:       #1c1f1c;
  --ink-soft:  #4a504a;
  --line:      #e6dfd1;
  --moss:      #3f5f4a;
  --moss-deep: #28412f;
  --gold:      #b48a3a;
  --rose:      #c97e74;
  --header-bg: rgba(251,247,240,0.94);
  --surface:   #ffffff;
  --maxw: 1200px;
}
[data-theme="dark"] {
  --cream:     #14181a;
  --ink:       #ece7d9;
  --ink-soft:  #9ca39a;
  --line:      #2a2f2a;
  --moss:      #6a8e7a;
  --moss-deep: #8aae9c;
  --gold:      #d2a958;
  --rose:      #e09790;
  --header-bg: rgba(20,24,26,0.94);
  --surface:   #1c2123;
}
html { color-scheme: light dark; background: var(--cream); }
html[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 16px/1.6 ui-serif, "Iowan Old Style", "Apple Garamond", Garamond, "Times New Roman", serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--moss-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 50;
}
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; margin-left: 8px;
  background: transparent; border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink-soft); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.brand {
  font: 600 22px/1 ui-serif, serif;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand-dot { color: var(--moss); }
.primary-nav { display: flex; gap: 26px; font: 14px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.02em; }
.primary-nav a { color: var(--ink); }

main { min-height: calc(100vh - 220px); }
.site-footer {
  padding: 40px 32px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  font: 12px/1.4 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft); flex-wrap: wrap; gap: 14px;
}
.site-footer .muted { color: var(--ink-soft); opacity: .7; }

/* ────────────────  Hero (homepage)  ──────────────── */

.hero { padding: 72px 32px 56px; max-width: var(--maxw); margin: 0 auto; text-align: center; }
.hero h1 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0 0 20px;
}
.hero p.lead {
  font-size: 19px; line-height: 1.55; color: var(--ink-soft);
  margin: 0 auto 32px; max-width: 580px;
}

/* ────────────────  Search bar  ──────────────── */

.search-shell {
  max-width: 720px; margin: 0 auto 48px;
  display: flex; gap: 8px; padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 8px 24px -16px rgba(28,31,28,0.18);
}
.search-shell input {
  flex: 1; border: 0; padding: 14px 22px;
  font: 16px/1.4 ui-sans-serif, system-ui, sans-serif;
  background: transparent; outline: none;
}
.search-shell button {
  background: var(--moss); color: #fff; border: 0;
  padding: 14px 26px; border-radius: 999px;
  font: 600 14px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
}
.search-shell button:hover { background: var(--moss-deep); }

/* ────────────────  Stat ribbon  ──────────────── */

.stat-ribbon {
  background: var(--moss); color: #fbf7f0;
  padding: 28px 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  max-width: var(--maxw); margin: 0 auto; border-radius: 12px;
}
.stat-ribbon .stat b { display: block; font: 500 28px/1 ui-serif, serif; margin-bottom: 6px; color: #fff; }
.stat-ribbon .stat { font: 14px/1.45 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.02em; }

/* ────────────────  Card grid (the look Steve likes)  ──────────────── */

.section { max-width: var(--maxw); margin: 0 auto; padding: 64px 32px; }
.section h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 28px; font-weight: 500; letter-spacing: -0.01em; }
.eyebrow { color: var(--gold); font: 600 12px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  transition: transform .12s ease, box-shadow .12s ease;
  display: flex; flex-direction: column; gap: 8px;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -18px rgba(28,31,28,0.18); }
.card .name { font: 600 17px/1.25 ui-serif, serif; letter-spacing: -0.01em; }
.card .meta { font: 13px/1.45 ui-sans-serif, system-ui, sans-serif; color: var(--ink-soft); }
.card .badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: rgba(63,95,74,0.10); color: var(--moss-deep);
  font: 600 11px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.04em; text-transform: uppercase;
  align-self: flex-start;
}
.card .stars { color: var(--gold); font-size: 14px; letter-spacing: 0.05em; }

/* dense grid variant (search results, community) */
.dense-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.dense-grid .card { padding: 16px; gap: 4px; }
.dense-grid .card .name { font-size: 15px; }
.dense-grid .card .meta { font-size: 12px; }

@media (max-width: 720px) {
  .stat-ribbon { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .site-header { padding: 16px 22px; }
  .primary-nav { gap: 16px; font-size: 13px; }
  .hero { padding: 48px 22px 32px; }
  .section { padding: 40px 22px; }
}