/* Chemical Engineering arxiv-radar — academic-flavored theme system. Light is default. Dark via [data-theme="dark"] on . */ :root { --bg: #fbfaf6; --surface: #ffffff; --surface-soft: #f4f3ee; --text: #1c1c1c; --text-muted: #6b6b6b; --text-faint: #9a9a9a; --accent: #1d3a8a; --accent-hover: #2c4dab; --accent-soft: #e9efff; --border: #e2dfd6; --border-soft: #efece4; --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06); --serif: ui-serif, "Source Serif Pro", "Charter", Georgia, Cambria, "Times New Roman", Times, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace; } [data-theme="dark"] { --bg: #101013; --surface: #18181c; --surface-soft: #1f1f23; --text: #c2c0b6; --text-muted: #8a8880; --text-faint: #5c5a54; --accent: #8eb1f0; --accent-hover: #b0c9f6; --accent-soft: #1e2a48; --border: #2d2d33; --border-soft: #25252b; --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.5); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--serif); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } code, kbd, pre { font-family: var(--mono); font-size: 0.9em; } /* override minima width cap, add gentle horizontal padding */ .wrapper, .page-content .wrapper { max-width: 1380px !important; padding-left: 28px; padding-right: 28px; } /* === site header === */ .site-header { background: var(--surface); border-top: none !important; border-bottom: 1px solid var(--border) !important; min-height: auto !important; } .site-header .wrapper { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; } .site-title { font-family: var(--serif); font-size: 1.35rem !important; font-weight: 600 !important; letter-spacing: -0.01em; color: var(--text) !important; line-height: 1.1 !important; border: none !important; margin: 0 !important; } .site-title:hover { text-decoration: none; } .site-subtitle { display: block; font-family: var(--sans); font-size: 0.78rem; font-weight: 400; color: var(--text-muted); letter-spacing: 0.02em; margin-top: 3px; } .theme-toggle { background: var(--surface-soft); border: 1px solid var(--border); color: var(--text-muted); font-family: var(--sans); font-size: 0.8rem; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; display: inline-flex; align-items: center; gap: 6px; } .theme-toggle:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .theme-toggle .ico { font-size: 0.95rem; line-height: 1; } .site-footer { background: var(--surface) !important; border-top: 1px solid var(--border) !important; color: var(--text-faint) !important; padding: 18px 0 !important; font-family: var(--sans); font-size: 0.78rem; } .site-footer a { color: var(--text-muted); } /* === main grid (content + sidebar) === */ .page-content { padding-top: 28px !important; padding-bottom: 60px !important; background: var(--bg) !important; } .page-content h1, .page-content h2, .page-content h3 { font-family: var(--serif); color: var(--text); letter-spacing: -0.01em; } .page-content h1 { font-size: 1.85rem; font-weight: 600; margin: 0 0 0.4em 0; } .page-content h2 { font-size: 1.35rem; font-weight: 600; margin: 1.4em 0 0.5em 0; padding-bottom: 0.25em; border-bottom: 1px solid var(--border-soft); } .page-content p { color: var(--text); } .page-content em { color: var(--text-muted); font-style: italic; } .layout-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 2.4rem; align-items: start; } .layout-grid > main { min-width: 0; } @media (max-width: 980px) { .layout-grid { grid-template-columns: 1fr; } } /* === window switcher (paper page top) === */ .page-content > main > p:first-of-type + p, .window-nav { font-family: var(--sans); font-size: 0.85rem; color: var(--text-muted); } /* === sidebar === */ .tag-sidebar { font-family: var(--sans); font-size: 0.84rem; position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow-y: auto; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); } .tag-sidebar h3 { margin: 0 0 10px 0; font-family: var(--sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--text-muted); padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .tag-list { list-style: none; padding: 0; margin: 0; } .tag-list li.tag-item { padding: 5px 0; } .tag-list li.tag-item + li.tag-item { border-top: 1px solid var(--border-soft); } .tag-list .tag-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; line-height: 1.3; } .tag-list a.tag-name { color: var(--text); text-decoration: none; font-weight: 500; } .tag-list a.tag-name:hover { color: var(--accent); } .tag-list .count { color: var(--text-faint); font-size: 0.75rem; flex-shrink: 0; font-variant-numeric: tabular-nums; } .tag-list .tag-item.active { padding: 8px 10px; background: var(--accent-soft); border-radius: 5px; margin: 4px -10px; border-top: none; } .tag-list .tag-item.active + li.tag-item { border-top: none; } .tag-list .tag-item.active strong:first-child { color: var(--accent); font-weight: 600; } .windows { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; } .windows a, .windows strong { font-size: 0.7rem; padding: 1px 6px; border-radius: 3px; text-decoration: none; color: var(--text-muted); font-family: var(--sans); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .windows a:hover { background: var(--accent-soft); color: var(--accent); } .windows strong { background: var(--accent); color: #fff; font-weight: 500; } [data-theme="dark"] .windows strong { color: #16161a; } /* === compact tag-page header === */ .tag-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0 0 1.2rem 0; padding-bottom: 0.7rem; border-bottom: 1px solid var(--border-soft); } .tag-header h1 { margin: 0; font-size: 1.6rem; line-height: 1.2; } .tag-header .paper-count { font-family: var(--sans); font-size: 0.88rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .tag-header .window-nav { font-family: var(--sans); font-size: 0.82rem; display: inline-flex; gap: 4px; flex-wrap: wrap; } .tag-header .window-nav a, .tag-header .window-nav strong { padding: 1px 7px; border-radius: 3px; text-decoration: none; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--text-muted); } .tag-header .window-nav strong { background: var(--accent); color: #fff; font-weight: 500; } [data-theme="dark"] .tag-header .window-nav strong { color: #16161a; } .tag-header .window-nav a:hover { background: var(--accent-soft); color: var(--accent); } .tag-header .back-link { margin-left: auto; font-family: var(--sans); font-size: 0.82rem; color: var(--text-muted); } .tag-header .back-link:hover { color: var(--accent); } /* === paper list table === */ table.papers { width: 100%; border-collapse: collapse; margin-top: 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); } table.papers th, table.papers td { padding: 12px 16px; vertical-align: top; text-align: left; } table.papers thead th { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); background: var(--surface-soft); } /* override minima's nth-child striping that bleeds light-gray into our table */ table.papers tr, table.papers tr:nth-child(even), table.papers tr:nth-child(odd) { background-color: transparent !important; } table.papers tr.paper td { background-color: transparent !important; border-top: 1px solid var(--border-soft); } table.papers tr.paper:first-child td { border-top: none; } table.papers td:first-child { font-family: var(--mono); font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } table.papers td:nth-child(3) { font-family: var(--sans); font-size: 0.85rem; color: var(--text-muted); } table.papers td:last-child { font-family: var(--mono); font-size: 0.82rem; } table.papers .paper-title { font-family: var(--serif); font-size: 1.02rem; font-weight: 500; line-height: 1.4; color: var(--text); } table.papers a.paper-title-link { color: var(--text); text-decoration: none; cursor: pointer; } table.papers a.paper-title-link:hover { color: var(--accent); text-decoration: none; } table.papers .paper-tags { margin-top: 5px; font-size: 0.78rem; font-family: var(--sans); color: var(--text-faint); line-height: 1.6; } table.papers .paper-tags a { color: var(--text-muted); margin-right: 4px; } table.papers .paper-tags a:hover { color: var(--accent); text-decoration: underline; } /* === abstract popup modal === */ .abstract-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 15, 18, 0.55); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 4vw; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; overflow-y: auto; } .abstract-overlay.is-open { opacity: 1; pointer-events: auto; } .abstract-modal { background: var(--surface); color: var(--text); max-width: 760px; width: 100%; border-radius: 10px; padding: 38px 44px 32px 44px; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.25); font-family: var(--serif); transform: translateY(-10px); transition: transform 0.15s ease; } .abstract-overlay.is-open .abstract-modal { transform: translateY(0); } .abstract-close { position: absolute; top: 14px; right: 18px; width: 28px; height: 28px; background: transparent; border: none; color: var(--text-muted); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0; border-radius: 4px; } .abstract-close:hover { color: var(--text); background: var(--surface-soft); } .abstract-fragment .abstract-title { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; line-height: 1.3; margin: 0 0 14px 0; color: var(--text); letter-spacing: -0.01em; } .abstract-fragment .abstract-authors { font-family: var(--serif); font-size: 0.95rem; font-style: italic; color: var(--text-muted); margin: 0 0 18px 0; line-height: 1.5; } .abstract-fragment .abstract-meta { font-family: var(--sans); font-size: 0.78rem; color: var(--text-faint); margin: 0 0 22px 0; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); letter-spacing: 0.02em; } .abstract-fragment .abstract-meta a { color: var(--text-muted); } .abstract-fragment .abstract-meta .sep { margin: 0 8px; color: var(--text-faint); } .abstract-fragment .abstract-body { font-family: var(--serif); font-size: 1rem; line-height: 1.7; color: var(--text); margin: 0 0 22px 0; text-align: justify; hyphens: auto; } .abstract-fragment .abstract-tagline { font-family: var(--sans); font-size: 0.82rem; color: var(--text-muted); margin: 0 0 8px 0; } .abstract-fragment .abstract-tagline .label { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--text-faint); margin-right: 6px; } .abstract-fragment .abstract-actions { margin: 22px 0 0 0; padding-top: 16px; border-top: 1px solid var(--border-soft); font-family: var(--sans); font-size: 0.85rem; } .abstract-fragment .abstract-actions a { margin-right: 16px; } .abstract-loading, .abstract-error { font-family: var(--sans); color: var(--text-muted); padding: 30px; text-align: center; } @media (max-width: 700px) { .abstract-modal { padding: 28px 24px 24px 24px; } .abstract-fragment .abstract-title { font-size: 1.25rem; } }