Spaces:
Running
Running
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); | |
| /* | |
| * Yale University Color Palette | |
| * Primary: Yale Blue #00356b | |
| * Bright Blue: #286dc0 | |
| * Light Blue: #63aaff | |
| * Warm Gray: #978d85 | |
| * Light Gray bg: #f9f9f9 | |
| * Accent Gold: #f9be00 | |
| */ | |
| :root { | |
| --bg: #f4f4f2; | |
| --bg-secondary: #ededeb; | |
| --surface: #ffffff; | |
| --text: #111827; | |
| --text-secondary: #1f2937; | |
| --muted: #6b7280; | |
| --border: #ddd9d3; | |
| --border-light: #ebe8e3; | |
| /* Yale Primary Colors */ | |
| --primary: #00356b; | |
| --primary-mid: #286dc0; | |
| --primary-light: #63aaff; | |
| --primary-pale: #e8f0fb; | |
| --primary-subtle: rgba(0,53,107,.07); | |
| /* Yale Accent */ | |
| --accent: #bd8b13; /* Yale gold – muted for readability */ | |
| --accent-bright: #f9be00; /* Yale gold – full saturation */ | |
| --accent-hover: #a37710; | |
| /* Semantic colors (keeping semantic meaning, Yale-adjacent tones) */ | |
| --green: #2f7d32; | |
| --red: #c62828; | |
| --amber: #bd8b13; | |
| --blue: #286dc0; | |
| /* Quote type colors – adjusted for Yale palette harmony */ | |
| --full: #2f7d32; | |
| --partial: #bd8b13; | |
| --paraphrase: #0277bd; | |
| --allusion: #6a1b9a; | |
| --full-bg: rgba(47,125,50,.12); | |
| --partial-bg: rgba(189,139,19,.12); | |
| --paraphrase-bg: rgba(2,119,189,.12); | |
| --allusion-bg: rgba(106,27,154,.12); | |
| --radius: 10px; | |
| --radius-lg: 14px; | |
| --radius-sm: 7px; | |
| --shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.06); | |
| --shadow-md: 0 4px 6px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.06); | |
| --shadow-lg: 0 10px 25px rgba(0,0,0,.07), 0 4px 10px rgba(0,0,0,.05); | |
| --shadow-xl: 0 20px 40px rgba(0,0,0,.09), 0 8px 16px rgba(0,0,0,.05); | |
| --transition: .2s cubic-bezier(.4,0,.2,1); | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* ── Header ─────────────────────────────────────────────────────────── */ | |
| .header { | |
| background: var(--primary); | |
| color: #ffffff; | |
| padding: 0 32px; | |
| height: 68px; | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| box-shadow: 0 2px 12px rgba(0,53,107,.35); | |
| position: relative; | |
| z-index: 100; | |
| } | |
| /* Yale gold accent stripe at top */ | |
| .header::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: var(--accent-bright); | |
| } | |
| .header-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .header-logo { | |
| width: 36px; | |
| height: 36px; | |
| flex-shrink: 0; | |
| } | |
| .header-title { | |
| font-size: 1.1rem; | |
| font-weight: 800; | |
| letter-spacing: -.01em; | |
| color: #ffffff; | |
| } | |
| .header-subtitle { | |
| font-size: .72rem; | |
| color: rgba(255,255,255,.65); | |
| font-weight: 500; | |
| letter-spacing: .02em; | |
| } | |
| .header nav { | |
| margin-left: auto; | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .header nav a { | |
| color: rgba(255,255,255,.75); | |
| text-decoration: none; | |
| font-size: .84rem; | |
| font-weight: 500; | |
| padding: 8px 16px; | |
| border-radius: var(--radius-sm); | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .header nav a:hover { | |
| color: #fff; | |
| background: rgba(255,255,255,.12); | |
| } | |
| .header nav a.active { | |
| color: #fff; | |
| background: rgba(255,255,255,.14); | |
| } | |
| .header nav a.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 20px; | |
| height: 2px; | |
| background: var(--accent-bright); | |
| border-radius: 1px; | |
| } | |
| /* ── Buttons ────────────────────────────────────────────────────────── */ | |
| .btn { | |
| padding: 9px 20px; | |
| border-radius: var(--radius-sm); | |
| border: none; | |
| font-size: .84rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-family: inherit; | |
| line-height: 1.4; | |
| } | |
| .btn:disabled { opacity: .5; cursor: not-allowed; } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: #fff; | |
| box-shadow: 0 2px 8px rgba(0,53,107,.25); | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| background: #004a96; | |
| box-shadow: 0 4px 12px rgba(0,53,107,.35); | |
| transform: translateY(-1px); | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--muted); | |
| border: 1.5px solid var(--border); | |
| } | |
| .btn-ghost:hover { | |
| background: var(--bg); | |
| color: var(--text); | |
| border-color: #b8b3ac; | |
| } | |
| .btn-danger { | |
| background: var(--red); | |
| color: #fff; | |
| box-shadow: 0 2px 8px rgba(198,40,40,.25); | |
| } | |
| .btn-danger:hover { | |
| background: #b71c1c; | |
| transform: translateY(-1px); | |
| } | |
| .btn-accent { | |
| background: var(--primary); | |
| color: #fff; | |
| border-left: 3px solid var(--accent-bright); | |
| } | |
| .btn-sm { padding: 5px 12px; font-size: .78rem; } | |
| .btn-lg { padding: 12px 28px; font-size: .95rem; border-radius: var(--radius); } | |
| /* ── Container ──────────────────────────────────────────────────────── */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 32px 24px; | |
| } | |
| /* ── Cards ──────────────────────────────────────────────────────────── */ | |
| .card { | |
| background: var(--surface); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-sm); | |
| border: 1px solid var(--border-light); | |
| padding: 24px; | |
| transition: var(--transition); | |
| } | |
| .card:hover { box-shadow: var(--shadow-md); } | |
| .card h2 { | |
| font-size: 1rem; | |
| font-weight: 700; | |
| margin-bottom: 20px; | |
| padding-bottom: 14px; | |
| border-bottom: 2px solid var(--primary-pale); | |
| color: var(--primary); | |
| } | |
| .card h3 { | |
| font-size: .8rem; | |
| font-weight: 700; | |
| margin-bottom: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: .06em; | |
| color: var(--muted); | |
| } | |
| /* ── Forms ──────────────────────────────────────────────────────────── */ | |
| .field { margin-bottom: 18px; } | |
| .field label { | |
| display: block; | |
| font-size: .82rem; | |
| font-weight: 600; | |
| margin-bottom: 6px; | |
| color: var(--text-secondary); | |
| } | |
| .field input, .field select, .field textarea { | |
| width: 100%; | |
| padding: 10px 14px; | |
| border: 1.5px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| font-size: .9rem; | |
| font-family: inherit; | |
| color: var(--text); | |
| background: var(--surface); | |
| transition: var(--transition); | |
| } | |
| .field input:focus, .field select:focus, .field textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-mid); | |
| box-shadow: 0 0 0 3px var(--primary-subtle); | |
| } | |
| .field .hint { | |
| font-size: .74rem; | |
| color: var(--muted); | |
| margin-top: 6px; | |
| } | |
| .field .hint a { color: var(--primary-mid); text-decoration: none; } | |
| .field .hint a:hover { text-decoration: underline; } | |
| /* ── Modal ──────────────────────────────────────────────────────────── */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0,0,0,.5); | |
| backdrop-filter: blur(4px); | |
| -webkit-backdrop-filter: blur(4px); | |
| z-index: 1000; | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| overflow-y: auto; | |
| } | |
| .modal-overlay.active { display: flex; } | |
| .modal { | |
| background: var(--surface); | |
| border-radius: var(--radius-lg); | |
| padding: 32px; | |
| width: 90%; | |
| max-width: 600px; | |
| box-shadow: var(--shadow-xl); | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| animation: modalIn .25s ease-out; | |
| border-top: 4px solid var(--primary); | |
| } | |
| @keyframes modalIn { | |
| from { opacity: 0; transform: scale(.96) translateY(8px); } | |
| to { opacity: 1; transform: scale(1) translateY(0); } | |
| } | |
| .modal h2 { | |
| font-size: 1.15rem; | |
| font-weight: 700; | |
| margin-bottom: 20px; | |
| color: var(--primary); | |
| } | |
| .modal label { | |
| display: block; | |
| font-size: .82rem; | |
| font-weight: 600; | |
| margin-bottom: 6px; | |
| margin-top: 18px; | |
| color: var(--text-secondary); | |
| } | |
| .modal label:first-of-type { margin-top: 0; } | |
| .modal input, .modal textarea, .modal select { | |
| width: 100%; | |
| padding: 10px 14px; | |
| border: 1.5px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| font-size: .9rem; | |
| font-family: inherit; | |
| color: var(--text); | |
| transition: var(--transition); | |
| } | |
| .modal input:focus, .modal textarea:focus, .modal select:focus { | |
| outline: none; | |
| border-color: var(--primary-mid); | |
| box-shadow: 0 0 0 3px var(--primary-subtle); | |
| } | |
| .modal textarea { min-height: 200px; resize: vertical; } | |
| .modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; } | |
| /* ── Toast ──────────────────────────────────────────────────────────── */ | |
| .toast { | |
| position: fixed; | |
| bottom: 24px; | |
| right: 24px; | |
| padding: 14px 24px; | |
| border-radius: var(--radius); | |
| color: #fff; | |
| font-size: .88rem; | |
| font-weight: 600; | |
| box-shadow: var(--shadow-lg); | |
| z-index: 1100; | |
| transition: opacity .3s; | |
| animation: toastIn .3s ease-out; | |
| } | |
| @keyframes toastIn { | |
| from { opacity: 0; transform: translateY(12px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .toast-ok { background: var(--green); } | |
| .toast-err { background: var(--red); } | |
| /* ── Empty State ────────────────────────────────────────────────────── */ | |
| .empty-state { text-align: center; padding: 80px 20px; } | |
| .empty-state .empty-icon { width: 80px; height: 80px; margin: 0 auto 20px; opacity: .25; } | |
| .empty-state h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; color: var(--text); } | |
| .empty-state p { color: var(--muted); margin-bottom: 24px; font-size: .95rem; max-width: 400px; margin-left: auto; margin-right: auto; } | |
| /* ── Loading ────────────────────────────────────────────────────────── */ | |
| .loading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 60px; | |
| color: var(--muted); | |
| font-size: .95rem; | |
| gap: 12px; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .spinner { | |
| width: 22px; | |
| height: 22px; | |
| border: 2.5px solid var(--border); | |
| border-top-color: var(--primary-mid); | |
| border-radius: 50%; | |
| animation: spin .7s linear infinite; | |
| } | |
| /* ── Type badges ────────────────────────────────────────────────────── */ | |
| .type-badge { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-size: .68rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: .04em; | |
| } | |
| .type-full { background: rgba(47,125,50,.12); color: var(--full); } | |
| .type-partial { background: rgba(189,139,19,.12); color: var(--partial); } | |
| .type-paraphrase { background: rgba(2,119,189,.12); color: var(--paraphrase); } | |
| .type-allusion { background: rgba(106,27,154,.12); color: var(--allusion); } | |
| /* ── Type bar ───────────────────────────────────────────────────────── */ | |
| .type-bar { | |
| display: flex; | |
| height: 8px; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| background: var(--bg-secondary); | |
| } | |
| .type-bar div { min-width: 3px; transition: width .4s ease; } | |
| .type-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } | |
| .type-legend-item { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--muted); } | |
| .type-legend-swatch { width: 10px; height: 10px; border-radius: 3px; } | |
| /* ── Scrollbar ──────────────────────────────────────────────────────── */ | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: #c5bfb8; border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: #9e9891; } | |
| /* ── Selection ──────────────────────────────────────────────────────── */ | |
| ::selection { background: rgba(40,109,192,.2); } | |