/* Ovidioscope — manuscript reader. Design tokens lifted from the Claude Design "Classical" system; the rest is the reader's own layout. Fonts come from Google Fonts (see index.html). */ :root { --color-bg: #f3f2f2; --color-surface: #eae9e9; --color-surface-2: #efeeed; --color-text: #201f1d; --color-text-2: #3d3b37; --color-muted: #6f6c66; --color-muted-2: #7d7a74; --color-faint: #8b8880; --color-accent: #b68235; --color-accent-600: #a06f24; --color-accent-700: #7d5411; --color-divider: color-mix(in srgb, #201f1d 16%, transparent); --color-neutral-900: #2d2b2b; --font-heading: "Cormorant Garamond", Georgia, serif; --font-body: "Lora", Georgia, serif; --space-1: 4.6px; --space-2: 9.2px; --space-3: 13.8px; --space-4: 18.4px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px; --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent); /* Reader-specific */ --verse-scale: 1; /* multiplies the 22px verse size */ --gloss-font: italic 400 .56em/1.05 var(--font-body); --margin-font: italic 400 14.5px/1.45 var(--font-body); --rubric: oklch(.42 .125 22); --selection: rgba(182, 130, 53, .14); --hover: rgba(32, 31, 29, .035); /* Flag layers: tint (background) and line (underline / chip border). --bg-* and --ul-* are set on by app.js when a layer is on. */ --tint-gl: oklch(.9 .05 252); --line-gl: oklch(.58 .105 252); --tint-mg: oklch(.9 .05 152); --line-mg: oklch(.5 .085 152); --tint-cx: oklch(.92 .07 68); --line-cx: oklch(.56 .12 62); --tint-pn: oklch(.91 .045 332); --line-pn: oklch(.5 .11 332); --tint-rb: oklch(.91 .05 22); --line-rb: oklch(.42 .125 22); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow: hidden; } a { color: var(--color-accent-700); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--color-accent-600); } sup { font-size: .7em; line-height: 0; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(32, 31, 29, .18); border-radius: 6px; } /* ---------- design-system components ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-primary { color: var(--color-accent); border-color: var(--color-accent); } .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); } .btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-block { width: 100%; } .btn-sm { height: 28px; padding: 0 10px; font-size: 12px; } .input { min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: transparent; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline: none; } select.input { appearance: auto; } .plate { filter: sepia(.22) saturate(.82) contrast(1.05); } /* ---------- labels ---------- */ .eyebrow { font: 400 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--color-faint); } .hint { font: italic 400 12.5px/1.5 var(--font-body); color: var(--color-faint); margin: 0; } /* ---------- app frame ---------- */ .app { display: flex; flex-direction: column; height: 100vh; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 26px; height: 62px; flex: none; border-bottom: 1px solid var(--color-divider); background: var(--color-surface-2); } .brand { display: flex; align-items: baseline; gap: 14px; } .brand-name { font: 500 21px/1 var(--font-heading); letter-spacing: .14em; text-transform: uppercase; } .brand-sep { width: 1px; height: 16px; background: var(--color-divider); } .brand-sub { font: italic 400 14px/1 var(--font-body); color: var(--color-muted); } .topbar-controls { display: flex; align-items: center; gap: 10px; } .topbar-controls .input { height: 34px; min-height: 0; padding: 0 10px; font-size: 13px; } .topbar-controls select.input { min-width: 104px; } .topbar-controls input.input { width: 190px; padding: 0 12px; } .layerbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; flex: none; padding: 11px 26px; border-bottom: 1px solid var(--color-divider); } .chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px; border: 1px solid rgba(32, 31, 29, .18); border-radius: var(--radius-md); background: transparent; font: 400 13px/1 var(--font-body); color: var(--color-text); cursor: pointer; } .chip:hover { border-color: rgba(32, 31, 29, .4); } .chip[aria-pressed="true"] { background: var(--chip-tint); border-color: var(--chip-line); } .chip .swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--chip-line); } .chip[data-layer="gl"] { --chip-tint: var(--tint-gl); --chip-line: var(--line-gl); } .chip[data-layer="mg"] { --chip-tint: var(--tint-mg); --chip-line: var(--line-mg); } .chip[data-layer="cx"] { --chip-tint: var(--tint-cx); --chip-line: var(--line-cx); } .chip[data-layer="pn"] { --chip-tint: var(--tint-pn); --chip-line: var(--line-pn); } .chip[data-layer="rb"] { --chip-tint: var(--tint-rb); --chip-line: var(--line-rb); } .layerbar .hint { margin-left: auto; line-height: 1; } .workspace { display: flex; flex: 1; min-height: 0; } /* ---------- facsimile pane ---------- */ .facsimile { flex: 0 1 20%; max-width: 300px; min-width: 200px; display: flex; flex-direction: column; overflow: auto; border-right: 1px solid var(--color-divider); background: var(--color-surface); } .facsimile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--color-divider); } .facsimile-head select.input { height: 30px; min-height: 0; padding: 0 8px; font: 400 12px/1 var(--font-body); letter-spacing: .06em; min-width: 124px; max-width: 150px; } .folio-label { display: flex; flex-direction: column; gap: 3px; } .folio-label .folio { font: 400 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); } .folio-label .anchor { font: italic 400 11.5px/1 var(--font-body); color: var(--color-faint); } .folio-nav { display: flex; gap: 6px; } .facsimile-body { flex: 1; min-width: 0; min-height: 200px; padding: 20px; display: flex; overflow: hidden; } .facsimile-body .plate { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; overflow: hidden; cursor: zoom-in; background: #dcd9d5; } .facsimile-body img { width: 100%; height: 100%; object-fit: contain; display: block; } .facsimile-body .plate:empty::after { content: "No scan available for this folio"; margin: auto; padding: 0 16px; text-align: center; font: italic 400 12.5px/1.5 var(--font-body); color: var(--color-faint); } .facsimile-foot { border-top: 1px solid var(--color-divider); padding: 16px 20px 20px; } .facsimile-foot .btn { min-height: 38px; height: auto; padding: 9px 12px; font: 400 13.5px/1.3 var(--font-body); letter-spacing: .04em; text-wrap: pretty; } .facsimile-foot .hint { margin-top: 10px; } /* ---------- text panes ---------- */ .pane { flex: 1 1 0; min-width: 0; overflow: auto; background: var(--color-bg); } .pane-trans { border-left: 1px solid var(--color-divider); background: var(--color-surface-2); } .pane-inner { width: max-content; min-width: 100%; padding: 38px 34px 90px; } .pane-title { text-align: center; margin-bottom: 34px; } .pane-title .book { font: 400 19px/1 var(--font-heading); letter-spacing: .22em; text-transform: uppercase; color: var(--color-text-2); } .pane-title .kind { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--color-faint); } .pane-title .kind svg { stroke: var(--color-accent); } .rule { height: 1px; background: var(--color-divider); } .pane-title .rule { margin-top: 16px; } .pane-foot .rule { margin: 34px 0 16px; } .pane-foot .hint { font-size: 13.5px; line-height: 1.6; max-width: 62ch; } /* A verse row: number · left margin · text · right margin */ .verse { position: relative; display: grid; grid-template-columns: 40px minmax(0, 100px) minmax(min-content, 1fr) minmax(0, 130px); gap: 12px; align-items: start; cursor: pointer; border-radius: 3px; } .verse:hover { background: var(--hover); } .verse.selected { background: var(--selection); } .verse .num { text-align: right; padding-top: 2.1em; font: 400 14px/1 var(--font-body); color: var(--color-faint); font-variant-numeric: tabular-nums; } .verse .margin { padding-top: 2.2em; font: var(--margin-font); color: var(--color-muted-2); } .verse .margin-l { text-align: right; } .verse .line { padding-top: 2em; white-space: nowrap; font: 400 calc(22px * var(--verse-scale)) / 1.25 var(--font-heading); } .verse .line.plain { color: var(--color-muted); font-style: italic; } .verse .margin .ghost { visibility: hidden; } /* ---------- inline markup (see data/*.json → "markup") ---------- */ ruby { display: inline; position: relative; } rt { display: inline; position: absolute; bottom: 100%; left: 0; white-space: nowrap; font: var(--gloss-font); color: var(--color-muted); } gl { font: var(--gloss-font); color: var(--color-muted); white-space: nowrap; } init { color: var(--rubric); } u { text-decoration: none; border-bottom: 1px solid var(--rubric); } /* Flag layers: app.js sets --bg- (tint) or --ul- (line) on . */ rt, gl { background: var(--bg-gl, transparent); border-bottom: 1.5px solid var(--ul-gl, transparent); } .margin > .mg { background: var(--bg-mg, transparent); border-bottom: 1.5px solid var(--ul-mg, transparent); } cx { background: var(--bg-cx, transparent); border-bottom: 1.5px solid var(--ul-cx, transparent); } pn { background: var(--bg-pn, transparent); border-bottom: 1.5px solid var(--ul-pn, transparent); } init { background: var(--bg-rb, transparent); } /* ---------- collation dialog ---------- */ .dialog-backdrop { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 40px; background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); } .dialog { width: min(940px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; } .dialog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 20px 26px 16px; border-bottom: 1px solid var(--color-divider); } .dialog-head .title { display: flex; align-items: baseline; gap: 12px; } .dialog-head .title .eyebrow { font-size: 12px; } .dialog-head .verse-ref { font: 500 24px/1 var(--font-heading); font-variant-numeric: tabular-nums; color: var(--color-accent-700); } .dialog-head .actions { display: flex; align-items: center; gap: 8px; } .dialog-head .btn { height: 30px; padding: 0 12px; font-size: 12.5px; } .dialog-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 26px 26px; } .witness { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--color-divider); } .witness-id { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; } .witness-id .sigil { font: 500 14px/1.2 var(--font-body); letter-spacing: .1em; } .witness-id .shelf { font: italic 400 12px/1.35 var(--font-body); color: var(--color-faint); } .witness-text { font: 400 24px/1.35 var(--font-heading); text-wrap: pretty; } .witness-notes { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-left: 16px; border-left: 1px solid var(--color-divider); } .note { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 14px; align-items: baseline; } .note .kind { font: 400 10.5px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; } .note .text { font: italic 400 15px/1.45 var(--font-body); color: var(--color-text-2); } .witness .hint { margin-top: 12px; font-size: 13.5px; } .dialog-body > .hint { margin-top: 18px; line-height: 1.6; } /* ---------- full-screen facsimile viewer ---------- */ .viewer { position: fixed; inset: 0; z-index: 60; background: #14130f; color: #f3f2f2; display: flex; flex-direction: column; } .viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: none; padding: 14px 22px; border-bottom: 1px solid rgba(243, 242, 242, .14); } .viewer-head .eyebrow { font-size: 13px; color: rgba(243, 242, 242, .62); } .viewer-head .actions { display: flex; align-items: center; gap: 8px; } .viewer-btn { height: 32px; min-width: 32px; padding: 0 12px; border: 1px solid rgba(243, 242, 242, .3); border-radius: var(--radius-md); background: transparent; color: #f3f2f2; font: 400 13px/1 var(--font-body); cursor: pointer; } .viewer-btn.glyph { padding: 0; font-size: 17px; } .viewer-btn:hover { border-color: var(--color-accent); } .viewer-zoom { min-width: 56px; text-align: center; font: 400 13px/1 var(--font-body); font-variant-numeric: tabular-nums; color: rgba(243, 242, 242, .62); } .viewer-stage { flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: grab; } .viewer-stage.dragging { cursor: grabbing; } .viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; transform-origin: center center; } .viewer-foot { flex: none; padding: 10px 22px 14px; text-align: center; font: italic 400 12.5px/1 var(--font-body); color: rgba(243, 242, 242, .44); } [hidden] { display: none !important; } /* ---------- narrow screens ---------- */ @media (max-width: 900px) { .facsimile { display: none; } .pane-trans { display: none; } .topbar { padding: 0 16px; } .brand-sub { display: none; } .layerbar { padding: 11px 16px; } .pane-inner { padding: 28px 16px 60px; } }