/* Minimalist reading-focused theme. Three palettes — sepia (default), slate, sage — chosen with the footer picker, which sets data-style on . Light/dark is independent: theme.js toggles data-theme="dark". Each block below lists the FULL token set so a more-specific block fully overrides a less-specific one (e.g. slate+dark beats both slate-light and default-dark). All share the component CSS that follows. */ /* --- SEPIA (default) — warm paper light / pure-black dark --- */ :root, [data-style="sepia"] { --ink:#221d16; --muted:#7a7164; --rule:#e3ddd0; --accent:#a55a32; --accent-soft:#f1e4db; --bg:#f4f1ea; --card:#faf8f3; --badge-bg:#efe7da; --warn-bg:#f6ecd6; --warn-ink:#8a6300; --error-bg:#f6e3df; --error-ink:#9c2b1d; --reveal-bg:#f0ebe1; --table-head:#f7f4ee; --thumb-bg:#ece5d8; --progress-track:#e7ded0; --kw-pdf-ink:#5a6e7a; --kw-pdf-bg:#e9eef0; } [data-theme="dark"], [data-style="sepia"][data-theme="dark"] { --ink:#deddda; --muted:#b3a896; --rule:#332c22; --accent:#b5835a; --accent-soft:#241a10; --bg:#000000; --card:#14110d; --badge-bg:#1d1812; --warn-bg:#352b14; --warn-ink:#e0c074; --error-bg:#3a201c; --error-ink:#f0a99e; --reveal-bg:#16120d; --table-head:#14110d; --thumb-bg:#1d1812; --progress-track:#2a241b; --kw-pdf-ink:#9fb6c2; --kw-pdf-bg:#1a2329; } /* --- SLATE — cool gray light / near-black dark, steel-blue accent --- */ [data-style="slate"] { --ink:#1b1f24; --muted:#6b7280; --rule:#e2e5ea; --accent:#3a6ea5; --accent-soft:#e7eef5; --bg:#f4f5f7; --card:#fbfbfc; --badge-bg:#eceff3; --warn-bg:#fdf2da; --warn-ink:#8a6300; --error-bg:#fbe6e6; --error-ink:#b3271e; --reveal-bg:#f7f8fa; --table-head:#f8f9fb; --thumb-bg:#e9edf1; --progress-track:#e2e5ea; --kw-pdf-ink:#7a5fb0; --kw-pdf-bg:#efeafa; } [data-style="slate"][data-theme="dark"] { --ink:#eef1f5; --muted:#9aa4b2; --rule:#283040; --accent:#7aa6d6; --accent-soft:#16202e; --bg:#0d1117; --card:#141a22; --badge-bg:#1c2530; --warn-bg:#352b14; --warn-ink:#e2c46a; --error-bg:#3a1f1f; --error-ink:#f0a5a0; --reveal-bg:#121822; --table-head:#141a22; --thumb-bg:#1c2530; --progress-track:#222b38; --kw-pdf-ink:#b6a6e6; --kw-pdf-bg:#241f38; } /* --- SAGE — green-gray light / near-black dark, forest accent --- */ [data-style="sage"] { --ink:#1a1e19; --muted:#6c7568; --rule:#dde2d8; --accent:#41705a; --accent-soft:#e4ece6; --bg:#f1f3ee; --card:#f9faf6; --badge-bg:#e9ede5; --warn-bg:#f6eed5; --warn-ink:#83651a; --error-bg:#f4e4e0; --error-ink:#9c3a2c; --reveal-bg:#f4f6f1; --table-head:#f6f8f3; --thumb-bg:#e6ebe1; --progress-track:#dde2d8; --kw-pdf-ink:#9a6240; --kw-pdf-bg:#f1e8e0; } [data-style="sage"][data-theme="dark"] { --ink:#e8ece5; --muted:#97a394; --rule:#28302a; --accent:#7fb597; --accent-soft:#16221a; --bg:#0e120f; --card:#151a15; --badge-bg:#1c241d; --warn-bg:#332c14; --warn-ink:#dcc066; --error-bg:#371f1b; --error-ink:#eaa498; --reveal-bg:#141a15; --table-head:#151a15; --thumb-bg:#1c241d; --progress-track:#262f28; --kw-pdf-ink:#d6a47e; --kw-pdf-bg:#2a1f17; } * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif; } a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; } .muted { color:var(--muted); } .topbar { display:flex; align-items:center; gap:24px; padding:0 24px; height:56px; background:var(--card); border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:10; } .brand { font-weight:700; font-size:16px; color:var(--ink); } .topbar nav { display:flex; gap:18px; } .topbar nav a { font-weight:600; font-size:14px; } .container { max-width:1000px; margin:0 auto; padding:28px 24px 60px; } .page-head h1 { margin:0 0 4px; font-size:24px; } .page-head .muted { margin:0 0 18px; } .card-list { list-style:none; padding:0; margin:0; display:grid; gap:12px; } .card { background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:16px 18px; } .card-title { font-size:17px; font-weight:700; } .card-meta { margin-top:8px; display:flex; gap:12px; align-items:center; font-size:13px; } .badge { font:600 11px/1 ui-monospace,monospace; text-transform:uppercase; letter-spacing:.06em; padding:4px 8px; border-radius:999px; background:var(--badge-bg); color:var(--muted); } .badge-done { background:var(--accent-soft); color:var(--accent); } .badge-ranking, .badge-generating { background:var(--warn-bg); color:var(--warn-ink); } .badge-error { background:var(--error-bg); color:var(--error-ink); } .search { display:flex; gap:10px; margin:6px 0 8px; } .search input { flex:1; padding:10px 12px; border:1px solid var(--rule); border-radius:8px; font-size:15px; } .search button { padding:10px 18px; border:none; border-radius:8px; background:var(--accent); color:#fff; font-weight:600; cursor:pointer; } .search .clear { align-self:center; font-size:13px; } .result-count { margin:4px 0 14px; font-size:13px; } table.papers { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--rule); border-radius:10px; overflow:hidden; } table.papers th, table.papers td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--rule); vertical-align:top; font-size:14px; } table.papers th { background:var(--table-head); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); } .col-thumb { width:72px; padding:8px 10px; vertical-align:middle; } .thumb { width:64px; height:48px; object-fit:cover; border-radius:5px; border:1px solid var(--rule); display:block; background:var(--thumb-bg); } .t-title-block { max-width:540px; } .t-title { font-weight:600; } .t-authors { font-size:13px; margin-top:2px; } .reveal-row { background:var(--reveal-bg); } .reveal-cell { padding:0 !important; border-bottom:2px solid var(--accent-soft) !important; } .reveal-content { padding:16px 18px; } .snippet-inner { display:flex; flex-direction:column; gap:10px; } .snippet-fig { max-height:160px; max-width:100%; object-fit:contain; border:1px solid var(--rule); border-radius:6px; align-self:flex-start; } .snippet-takeaway { font-size:15px; font-weight:600; line-height:1.4; border-left:3px solid var(--accent); padding:8px 12px; background:var(--accent-soft); border-radius:0 5px 5px 0; margin:0; } .snippet-abstract { font-size:14px; line-height:1.6; margin:0; } .snippet-grid { display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; margin:0; font-size:13px; } .snippet-grid dt { font-weight:700; color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.06em; padding-top:3px; } .snippet-grid dd { margin:0; line-height:1.5; } .snippet-grid ul { margin:0; padding-left:16px; } .snippet-grid li { margin-bottom:2px; } .snippet-tags { display:flex; flex-wrap:wrap; gap:4px; } .snippet-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; } .result-bar { display:flex; justify-content:space-between; align-items:center; margin:4px 0 12px; font-size:13px; } .accent { color:var(--accent); } .pagination { display:flex; align-items:center; gap:6px; margin:14px 0 20px; flex-wrap:wrap; } .page-info { font-size:13px; } .page-num { display:inline-block; min-width:30px; text-align:center; padding:6px 6px; border-radius:6px; font-size:13px; font-weight:600; } a.page-num:hover { background:var(--accent-soft); text-decoration:none; } .page-num-current { background:var(--accent); color:#fff; } .page-gap { padding:0 2px; } .empty-state { text-align:center; padding:32px 12px !important; color:var(--muted); } .btn-back { display:inline-block; font:600 13px/1 inherit; color:var(--muted); border:1px solid var(--rule); border-radius:7px; padding:6px 12px; margin-bottom:14px; background:var(--card); text-decoration:none; } .btn-back:hover { color:var(--ink); border-color:#b0bec5; text-decoration:none; } .btn-link { display:inline-block; font:600 12px/1 inherit; padding:5px 12px; border-radius:6px; border:none; background:var(--accent); color:#fff; text-decoration:none; cursor:pointer; white-space:nowrap; } .btn-link:hover { opacity:.88; text-decoration:none; } .btn-link-secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); } .btn-link-secondary:hover { background:var(--accent-soft); } .flash { background:var(--warn-bg); color:var(--warn-ink); border:1px solid var(--rule); border-radius:8px; padding:10px 14px; margin-bottom:16px; font-size:14px; } .flash-error { background:var(--error-bg); color:var(--error-ink); } .topic-form { display:grid; gap:14px; max-width:560px; background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:20px; } .topic-form label { display:grid; gap:6px; font-weight:600; font-size:14px; } .topic-form input { padding:10px 12px; border:1px solid var(--rule); border-radius:8px; font-size:15px; } .topic-form button { justify-self:start; padding:10px 20px; border:none; border-radius:8px; background:var(--accent); color:#fff; font-weight:600; cursor:pointer; } .progress-box { background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:20px; max-width:560px; } .progress-track { height:12px; background:var(--progress-track); border-radius:999px; overflow:hidden; margin:10px 0; } .progress-bar { height:100%; background:var(--accent); transition:width .4s ease; } .ranked { list-style:none; padding:0; margin:0; counter-reset:rank; display:grid; gap:10px; } .ranked-row { display:flex; gap:16px; background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:14px 16px; } .rank-score { min-width:56px; text-align:center; } .rank-score .score { display:inline-block; font:700 16px/1 ui-monospace,monospace; color:var(--accent); background:var(--accent-soft); border-radius:8px; padding:8px 0; width:44px; } .rank-score .score-label { display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; } .rank-title { font-weight:700; font-size:16px; } .rank-authors { font-size:13px; margin-top:2px; } .rank-reason { font-size:13px; margin-top:6px; } .rank-links { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; } .papers-controls { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:4px; } .papers-controls .search { margin:0; flex:1; min-width:280px; } .summary-filter { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; } .summary-filter input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; } .t-links { display:flex; gap:6px; flex-wrap:wrap; align-items:flex-start; } .landing-hero h1 { font-size:30px; } .global-search { margin-bottom:36px; } .global-search input { font-size:17px; padding:13px 16px; } .venue-group { margin-bottom:32px; } .venue-group:last-child { margin-bottom:0; } .venue-group-title { margin:0 0 12px; padding:0; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); border:none; } .venue-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; } .venue-card { display:block; background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:20px 22px; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; } .venue-card:hover { border-color:var(--accent); box-shadow:0 2px 12px rgba(11,107,94,.08); text-decoration:none; } .venue-card:hover h3 { color:var(--accent); } .venue-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .venue-card h3 { margin:0; font-size:18px; color:var(--ink); } .venue-year { font:600 13px/1 ui-monospace,monospace; color:var(--muted); } .venue-org { margin:6px 0 0; font-size:13px; } .venue-meta { margin-top:10px; font-size:13px; } .venue-progress { margin-top:12px; } .venue-progress-track { height:5px; background:var(--progress-track); border-radius:999px; overflow:hidden; } .venue-progress-bar { height:100%; background:var(--accent); border-radius:999px; } .venue-progress-label { display:block; margin-top:6px; font-size:11px; color:var(--muted); } .venue-badge { display:inline-block; font:600 10px/1 ui-monospace,monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:3px 8px; margin-bottom:6px; text-decoration:none; } .venue-badge:hover { text-decoration:underline; } .venue-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; } .section-title { font-size:17px; margin:28px 0 12px; } .venue-select { padding:10px 12px; border:1px solid var(--rule); border-radius:8px; font-size:14px; font-weight:600; background:var(--card); color:var(--ink); cursor:pointer; min-width:140px; } .result-actions { display:flex; align-items:center; gap:12px; } .btn-sm { padding:4px 10px; font-size:11px; } .keyword-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; } .kw-tag { display:inline-block; font-size:13px; font-weight:600; color:var(--accent); background:var(--accent-soft); border:1px solid transparent; border-radius:999px; padding:5px 12px; text-decoration:none; } .kw-tag:hover { border-color:var(--accent); text-decoration:none; } .kw-tag-pdf { color:var(--kw-pdf-ink); background:var(--kw-pdf-bg); } .kw-tag-pdf:hover { border-color:var(--kw-pdf-ink); } .kw-tag-ga { color:var(--accent); background:var(--accent-soft); } .kw-source { font-size:13px; font-weight:400; } .snippet-inner .tag { display:inline-block; font-size:11px; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:2px 10px; margin:0 6px 6px 0; } .author-input { flex:0 1 160px; min-width:120px; } .paper-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; } .paper-videos { margin-bottom:24px; } .paper-video-item + .paper-video-item { margin-top:16px; } .paper-video-player { display:block; width:100%; max-width:960px; border-radius:10px; border:1px solid var(--rule); background:#000; } .paper-abstract { background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:18px 20px; font-size:15px; line-height:1.65; } .paper-abstract p { margin:0; } .related-list { margin-top:0; } .summary-badge { margin-left:8px; vertical-align:middle; font-size:10px; } .ai-summary { margin-bottom:28px; } .summary-tags { margin-bottom:14px; } .summary-figure { text-align:center; margin:0 0 18px; } .summary-figure img { max-width:100%; max-height:280px; object-fit:contain; border:1px solid var(--rule); border-radius:8px; } .summary-figure span { display:block; font-size:12px; margin-top:6px; } .summary-takeaway { font-size:18px; line-height:1.45; font-weight:600; border-left:4px solid var(--accent); background:var(--accent-soft); padding:14px 18px; border-radius:0 8px 8px 0; margin:0 0 20px; } .summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; } @media (max-width:640px) { .summary-grid { grid-template-columns:1fr; } } .summary-block { background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:14px 16px; } .summary-block h3 { font:600 11px/1 ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; } .summary-block p { margin:0; font-size:14px; line-height:1.55; } .summary-block ul { margin:0; padding-left:18px; } .summary-block li { font-size:14px; line-height:1.5; margin-bottom:4px; } .btn-bookmark.btn-bookmark-on { color:var(--warn-ink); border-color:var(--warn-ink); } .btn-bookmark-icon { padding:4px 9px; font-size:15px; line-height:1; } .col-thumb { text-align:center; } .col-thumb .btn-bookmark-icon { display:inline-block; margin-top:8px; } .rank-score .btn-bookmark-icon { display:inline-block; margin-top:12px; } .nav-badge:empty { display:none; } .nav-badge { display:inline-block; font:700 10px/1 ui-monospace,monospace; background:var(--accent); color:#fff; border-radius:999px; padding:2px 6px; margin-left:4px; vertical-align:middle; } .btn-theme { font-size:18px; line-height:1; padding:4px 8px; border:1px solid var(--rule); border-radius:6px; background:var(--card); color:var(--muted); cursor:pointer; } .btn-theme:hover { color:var(--ink); border-color:var(--accent); } .topbar nav a.is-current { color:var(--accent); border-bottom:2px solid var(--accent); padding-bottom:3px; } .btn-file { cursor:pointer; position:relative; } .btn-file input { position:absolute; inset:0; opacity:0; cursor:pointer; } .note-input { display:block; width:100%; max-width:420px; margin-top:6px; padding:5px 9px; font-size:13px; color:var(--ink); background:var(--bg); border:1px solid var(--rule); border-radius:6px; } .note-input:focus { outline:none; border-color:var(--accent); } .error-page { text-align:center; padding:60px 0; } .error-page h1 { font-size:56px; margin:0 0 8px; color:var(--muted); } .error-page p { margin:8px 0 20px; } .error-page .btn-link { margin:0 4px; } @media (max-width: 640px) { .topbar { flex-wrap:wrap; height:auto; padding:10px 16px; gap:8px 16px; } .topbar nav { flex-wrap:wrap; gap:10px 14px; align-items:center; } .container { padding:20px 14px 48px; } .papers-controls .search { flex-wrap:wrap; } .author-input { flex:1 1 120px; } /* collapse the papers table into stacked cards */ table.papers thead { display:none; } table.papers, table.papers tbody, table.papers tr, table.papers td { display:block; } table.papers td { border-bottom:none; padding:3px 10px; } table.papers tr.paper-row { border-bottom:1px solid var(--rule); padding:10px 0; } .col-thumb { width:auto; } .col-thumb:empty { display:none; } .t-title-block { max-width:none; } .summary-takeaway { font-size:16px; } } /* Venue breadcrumb + section tabs (Papers / Topics). */ .crumbs { font-size:13px; color:var(--muted); margin-bottom:12px; } .crumbs a { color:var(--muted); } .crumbs a:hover { color:var(--ink); text-decoration:none; } .crumb-sep { margin:0 7px; color:var(--rule); } .crumb-current { color:var(--ink); font-weight:600; } .venue-tabs { display:flex; align-items:center; gap:6px; margin:0 0 22px; border-bottom:1px solid var(--rule); } .venue-tab { font-weight:600; font-size:14px; color:var(--muted); padding:9px 14px; margin-bottom:-1px; border-bottom:2px solid transparent; } .venue-tab:hover { color:var(--ink); text-decoration:none; } .venue-tab.is-active { color:var(--accent); border-bottom-color:var(--accent); } .venue-tab-action { margin-left:auto; margin-bottom:8px; }