/* Student explorer: corkboard graph + list view. Design tokens, fonts, buttons, badges, and the data-table primitive live in shared.css. */ /* Corkboard background + wood-frame border now live in shared.css as `.corkboard-frame` (applied to in index.html). */ /* ---- Floating chrome (four corners) ---- */ #app-title { position: fixed; top: 2rem; left: 2rem; background-color: var(--paper); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); border-radius: 3px; padding: 0.5rem 0.9rem; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.01em; color: var(--ink); z-index: 45; pointer-events: none; transform: rotate(-1.4deg); } #legend { left: 2rem; bottom: 2rem; position: fixed; transform: rotate(1.1deg); max-width: 240px; z-index: 45; } #progress-panel { right: 2rem; bottom: 2rem; position: fixed; max-width: 320px; transform: rotate(-0.9deg); z-index: 45; } #top-right-controls { position: fixed; top: 2rem; right: 2rem; z-index: 50; display: flex; align-items: center; gap: 0.6rem; } #list-view-toggle { transform: rotate(-1deg); } #search-wrap { position: relative; } #search-input { font-family: var(--font-body); font-size: 13px; color: var(--ink); background-color: var(--paper); border: 1px solid transparent; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); border-radius: 3px; padding: 0.45rem 0.6rem; width: 220px; min-height: 40px; transform: rotate(0.6deg); } #search-input::placeholder { color: var(--ink-soft); } #search-results { position: absolute; top: calc(100% + 6px); right: 0; min-width: 100%; background-color: var(--paper); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35); border-radius: 3px; z-index: 60; list-style: none; margin: 0; padding: 0.3rem; max-height: 280px; overflow-y: auto; } #search-results.is-hidden { display: none; } #search-results li + li { margin-top: 0.15rem; } #search-results button { display: block; width: 100%; text-align: left; font-family: var(--font-body); font-size: 13px; color: var(--ink); background: none; border: none; border-radius: 3px; padding: 0.5rem; min-height: 40px; cursor: pointer; } #search-results button:hover, #search-results button:focus-visible { background-color: var(--status-neutral-bg); } #search-results .search-empty { font-family: var(--font-body); font-size: 13px; color: var(--ink-soft); font-style: italic; padding: 0.4rem 0.5rem; } #search-results .search-isolated-hint { display: block; font-size: 11px; color: var(--ink-soft); font-style: italic; } /* ---- Graph stage ---- */ main { padding: 0; } .view-hidden { display: none; } #graph-stage { position: relative; width: 100%; min-height: 78vh; overflow: visible; } #edge-layer, #pin-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 0.25s ease; } #edge-layer { z-index: 34; } #pin-layer { z-index: 35; } #edge-layer .hit-line { pointer-events: stroke; cursor: default; } #edge-layer g, #pin-layer g { transition: opacity 0.18s ease; } #edge-layer g.is-ghost-edge, #pin-layer g.is-ghost-edge { opacity: 0.6; } #edge-layer g.is-dimmed, #pin-layer g.is-dimmed { opacity: 0.12; } .node { position: absolute; transform: translateX(-50%) scale(1); transition: left var(--shift-duration) ease, top var(--shift-duration) ease, width var(--shift-duration) ease, filter var(--shift-duration) ease, opacity 0.32s ease, transform 0.15s ease; text-align: left; width: 219px; background: none; border: none; color: inherit; font: inherit; padding: 0; z-index: 5; } .node.is-hovered:not(.is-center) { z-index: 40; } .node.is-center { width: 299px; z-index: 10; cursor: default; } .node:not(.is-center):not(.is-ghost) { cursor: pointer; } .node.is-ghost { width: 150px; filter: saturate(0.4) brightness(0.97); opacity: 0.55; } .node.is-dimmed { opacity: 0.28; } .node.is-ghost.is-dimmed { opacity: 0.15; } .node-thumb { width: 100%; height: 72px; border-radius: 2px; background: #E4DBC6; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; color: var(--ink-soft); overflow: hidden; } .node-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .node.is-center .node-thumb { height: 110px; } .node.is-ghost .node-thumb { height: 52px; } .node-panel { background-color: var(--paper); background-image: radial-gradient(ellipse 140px 100px at var(--wear-x, 70%) var(--wear-y, 20%), rgba(180, 140, 90, 0.08) 0%, transparent 70%); border-radius: 3px; padding: 1.25rem; box-shadow: 0 2px 5px rgba(38, 23, 13, 0.28); transform: rotate(var(--card-rot, 0deg)); transform-origin: top center; transition: background 0.15s ease, box-shadow 0.15s ease; } .node.is-hovered .node-panel { box-shadow: 0 4px 6px rgba(38, 23, 13, 0.38); } .node-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 15px; margin: 0.45rem 0 0 0; line-height: 1.25; } .node.is-center .node-title { font-size: 22px; } .node.is-ghost .node-title { font-size: 12px; margin-top: 0.3rem; } .node-details { display: grid; grid-template-rows: 0fr; } .node:not(.is-center) .node-details { transition: grid-template-rows 0.35s ease; } .node.is-center .node-details, .node.is-hovered .node-details { grid-template-rows: 1fr; } .node-details-inner { overflow: hidden; min-height: 0; } .node-summary { font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin: 0.35rem 0 0 0; } .node-meta { font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); margin: 0.3rem 0 0 0; } .node-panel .landing-link, .node-panel .link-disabled { margin-top: 0.6rem; } #legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; } #legend li { display: flex; align-items: center; gap: 0.4rem; } #legend .swatch { width: 20px; height: 4px; border-radius: 2px; flex: none; } #legend .swatch.is-dotted { height: 0; border-top: 3px dotted; } nav.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; font-size: 13px; } nav.breadcrumb li { display: flex; align-items: center; gap: 0.35rem; } nav.breadcrumb li:not(:last-child)::after { content: "›"; color: var(--ink-soft); margin-left: 0.35rem; } nav.breadcrumb button { background: none; border: none; color: var(--ink); text-decoration: underline; cursor: pointer; font: inherit; font-family: var(--font-body); padding: 0.3rem 0.2rem; min-height: 32px; } nav.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 700; font-family: var(--font-display); } #edge-tooltip { position: fixed; display: none; max-width: 260px; background-color: var(--paper); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.35); border-radius: 3px; padding: 0.6rem 0.75rem; font-size: 13px; color: var(--ink); z-index: 100; pointer-events: none; } #edge-tooltip .tooltip-label { font-family: var(--font-display); font-weight: 700; display: block; margin-bottom: 0.25rem; } /* ---- Status / offline banners ---- */ #status-msg { color: var(--paper); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } #offline-banner-wrap { position: fixed; top: 2rem; left: 50%; transform: translateX(-50%); z-index: 55; max-width: 420px; width: calc(100% - 4rem); } #offline-banner-wrap:empty { display: none; } .class-state-panel { max-width: 480px; margin: 12vh auto 0; background-color: var(--paper); border-radius: 4px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); padding: 2rem; text-align: center; } .class-state-panel h1 { font-family: var(--font-display); font-size: 22px; margin: 0 0 0.75rem 0; } .class-state-panel p { font-family: var(--font-body); color: var(--ink-soft); line-height: 1.6; } /* ---- List view ---- */ #list-view { width: min(1200px, calc(100% - 3rem)); max-width: none; margin: 5.5rem auto 3rem; padding: 0; } #list-view h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--paper); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); margin: 0 0 1rem 0; } #doc-table { min-width: 980px; table-layout: fixed; } #doc-table col.col-title { width: 32%; } #doc-table col.col-creator { width: 26%; } #doc-table col.col-date { width: 16%; } #doc-table col.col-institution { width: 26%; } #doc-table .filter-row th { padding-top: 0; padding-bottom: 0.55rem; border-bottom: 1px solid rgba(38, 23, 13, 0.18); } .doc-link { background: none; border: none; color: var(--ink); font: inherit; font-family: var(--font-body); font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0.2rem 0; min-height: 40px; text-align: left; } .institution-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; } .institution-cell .landing-link, .institution-cell .link-disabled { font-size: 12px; padding: 0.2rem 0.5rem; } .isolated-note { display: block; font-size: 11px; color: var(--ink-soft); font-style: italic; margin-top: 0.15rem; } @media (max-width: 720px) { #app-title { top: 1rem; left: 1rem; font-size: 18px; } #top-right-controls { top: 1rem; right: 1rem; flex-wrap: wrap; justify-content: flex-end; } #search-input { width: 160px; } #legend, #progress-panel { display: none; } }