tutortool/docs/design_handoff/styles.css

/* Academic / paper-inspired design system for Tutormanager */

:root {
  --paper: #f4efe6;
  --paper-2: #ebe4d6;
  --paper-3: #ded4c0;
  --rule: #c9bfa9;
  --rule-soft: #d9d0bb;
  --ink: #1f1b16;
  --ink-2: #3a342b;
  --ink-3: #6b6356;
  --ink-4: #968b7a;
  --accent: #8a2c1f;        /* oxblood */
  --accent-soft: #c66a5b;
  --highlight: #f1d36a;     /* highlighter yellow */
  --highlight-soft: #f5e3a4;
  --green: #4a6b3a;         /* present */
  --red: #8a2c1f;           /* absent / lock */
  --amber: #b07d2a;         /* open */

  --serif: "Source Serif 4", "Source Serif Pro", "EB Garamond", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Paper grain — subtle SVG noise overlay */
.paper-bg {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 25% 15%, rgba(160,140,110,0.05) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(160,140,110,0.04) 0, transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.07  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Ruled lines — like a notebook */
.ruled {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 27px,
    var(--rule-soft) 27px,
    var(--rule-soft) 28px
  );
}

* { box-sizing: border-box; }

body, .ui {
  font-family: var(--sans);
  color: var(--ink);
  font-feature-settings: "ss01", "cv11";
}

.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: var(--mono); }

.h1 { font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--ink); }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.body { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.small { font-family: var(--sans); font-size: 12px; color: var(--ink-3); }
.tiny { font-family: var(--sans); font-size: 11px; color: var(--ink-3); }

/* Underline marker — looks like a hand drawn highlight stroke */
.marker {
  background: linear-gradient(180deg, transparent 60%, var(--highlight-soft) 60%, var(--highlight-soft) 92%, transparent 92%);
  padding: 0 2px;
}

/* Status pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.pill.open { color: var(--amber); background: rgba(176,125,42,0.08); }
.pill.closed { color: var(--ink-3); }
.pill.locked { color: var(--accent); background: rgba(138,44,31,0.06); }
.pill.present { color: var(--green); background: rgba(74,107,58,0.08); }
.pill.absent { color: var(--accent); }

/* Buttons */
.btn {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: 6px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { background: rgba(0,0,0,0.04); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #f7eedc; }
.btn.sm { padding: 5px 10px; font-size: 12px; }

/* Card */
.card {
  background: #fbf7ee;
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

/* Marginalia — handwritten look. Use Caveat as marginal handwriting. */
.handwritten {
  font-family: "Caveat", "Kalam", cursive;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

/* Custom scrollbars */
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* hand-drawn underline svg accent under section titles */
.underline-stroke { display: inline-block; margin-top: 2px; }

/* Stamp — for "PRÄSENT" mark */
.stamp {
  display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent); border: 2px solid var(--accent);
  padding: 3px 8px; border-radius: 3px;
  transform: rotate(-4deg);
  background: rgba(138,44,31,0.04);
}

/* Subtle hover row */
.row-hover:hover { background: rgba(0,0,0,0.025); }

/* Tab bar */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule); }
.tab { font-family: var(--sans); font-size: 13px; padding: 10px 14px; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }

/* Input */
.input {
  font-family: var(--sans); font-size: 13px;
  padding: 8px 11px; border: 1px solid var(--rule);
  background: #fbf7ee; border-radius: 4px;
  color: var(--ink);
}
.input:focus { outline: none; border-color: var(--ink); }

/* Inline divider */
.div-h { height: 1px; background: var(--rule); width: 100%; }