/* Lyceum Mundi — Ghost theme additions --------------------------------------------------------------------------- Two jobs: 1. Base document styles (the prototype set these on /#root; Ghost renders in normal document flow so we set them here). 2. Tag-family colour-coding driven entirely by the tag SLUG PREFIX, so the React `fam-*` classes are no longer needed. Convention: sub-… → Subjects (oxblood) reg-… → Regions (ink / neutral) mod-… → Modes (serif italic — a different typographic register) Adding a new tag therefore needs no template or CSS change: just give it the right slug prefix in Ghost Admin and it inherits its family styling. --------------------------------------------------------------------------- */ html, body { margin: 0; padding: 0; } .lm-body { background: #FAF7F0; -webkit-font-smoothing: antialiased; } .lm { min-height: 100vh; } /* Make routed/section page wrappers behave like the prototype's flow. */ .lm img { max-width: 100%; height: auto; } /* Tag chips are now real links. The legacy `.lm-tags a { border-right }` treatment must not apply to them — the chip look comes from `.lm-tag`. */ .lm-tags a.lm-tag { padding: 0; border-right: 0; } .lm-tag { text-decoration: none; } /* "All
→" link under each homepage band. */ .lm-band-all { font-family: var(--sans); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 3px; } /* Pagination prev/next rendered as spans when there's no target. */ .lm-pagination a.pag-btn { text-decoration: none; } .lm-pagination span.pag-btn[aria-disabled] { color: var(--ink-quiet); cursor: default; } /* Editorial lede + drop-cap applied to the first paragraph of rendered post/page content (the prototype hand-applied a `.lede` class; Ghost emits plain markup, so we target the first paragraph instead). */ .lm-article .lm-content > p:first-of-type { font-size: 20px; line-height: 1.6; } .lm-article .lm-content > p:first-of-type::first-letter { font-family: var(--serif); font-weight: 500; font-size: 4.2em; line-height: 0.86; float: left; padding: 6px 10px 0 0; color: var(--accent); } /* Koenig figures/cards sit full reading-column width. */ .lm-article .lm-content figure { margin: 36px 0; } .lm-article .lm-content figure img { display: block; width: 100%; } .lm-article .lm-content figcaption { font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-mute); text-align: center; margin-top: 10px; } /* Koenig image-card widths. The reading column is ~680px and centred in the viewport, so wide/full cards break out symmetrically around viewport centre. */ .kg-width-wide, .kg-width-full { position: relative; width: 100%; } .lm-article .lm-content .kg-width-wide { width: min(1040px, 92vw); margin-left: 50%; transform: translateX(-50%); } .lm-article .lm-content .kg-width-full { width: 100vw; margin-left: 50%; transform: translateX(-50%); } .lm-article .lm-content .kg-width-full img { width: 100%; } /* ─── Tag chips (.lm-tag) ─────────────────────────────────────────────── */ .lm-tag[data-slug^="sub-"] { color: var(--accent); } .lm-tag[data-slug^="sub-"] .hash { color: rgba(107, 31, 31, 0.55); } .lm-tag[data-slug^="reg-"] { color: var(--ink-soft); } .lm-tag[data-slug^="reg-"] .hash { color: var(--ink-quiet); } .lm-tag[data-slug^="mod-"] { font-family: var(--serif); font-style: italic; font-size: 13px; letter-spacing: 0.01em; text-transform: none; } .lm-tag[data-slug^="mod-"] .hash { font-family: var(--sans); font-style: normal; font-size: 10px; letter-spacing: 0.18em; color: var(--ink-quiet); margin-right: 1px; } .lm-tag[data-slug^="mod-"]:hover { color: var(--accent); } /* ─── Mini-tags (.mini-tag — Atlas sidebar etc.) ──────────────────────── */ .mini-tag[data-slug^="sub-"] { color: var(--accent); } .mini-tag[data-slug^="sub-"] .hash { color: rgba(107, 31, 31, 0.55); } .mini-tag[data-slug^="reg-"] { color: var(--ink-soft); } .mini-tag[data-slug^="reg-"] .hash { color: var(--ink-quiet); } .mini-tag[data-slug^="mod-"] { font-family: var(--serif); font-style: italic; font-size: 12px; letter-spacing: 0.01em; text-transform: none; } .mini-tag[data-slug^="mod-"] .hash { font-family: var(--sans); font-style: normal; font-size: 9px; letter-spacing: 0.18em; margin-right: 1px; } /* ─── Tag cloud (Tag Index — mixed families) ──────────────────────────── */ .lm-tag-cloud .cloud a[data-slug^="mod-"] { font-style: italic; } /* ─── Related-tags aside (single Tag page — mixed families) ───────────── */ .lm-tag-aside .related .name[data-slug^="sub-"] { color: var(--accent); } .lm-tag-aside .related .name[data-slug^="sub-"] .hash { color: rgba(107, 31, 31, 0.55); } .lm-tag-aside .related .name[data-slug^="mod-"] { font-family: var(--serif); font-style: italic; font-size: 15px; letter-spacing: 0.01em; text-transform: none; } .lm-tag-aside .related .name[data-slug^="mod-"] .hash { font-family: var(--sans); font-style: normal; font-size: 10px; } /* Single tag-page header: family-tinted kicker, keyed on the tag slug. */ .lm-tag-head[data-tag-slug^="reg-"] .kicker { color: var(--ink); } .lm-tag-head[data-tag-slug^="mod-"] .kicker { font-family: var(--serif); font-style: italic; letter-spacing: 0.04em; font-size: 18px; text-transform: none; color: var(--ink); } .lm-tag-aside .family-siblings li[data-slug] .hash { color: var(--ink-quiet); } /* ─── Empty-state helper used on routed/section pages ─────────────────── */ .lm-empty { padding: 80px 0; text-align: center; font-family: var(--serif); font-style: italic; color: var(--ink-mute); font-size: 18px; } /* Search overlay: fix to the viewport, and make [hidden] win over the overlay's own display:flex. */ .lm-search-overlay { position: fixed; } .lm-search-overlay[hidden] { display: none !important; } /* The native members form swaps text on success; keep it on-brand. */ .lm-subscribe form.success input { opacity: 0.5; } .lm-subscribe .form-note { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--accent); margin-top: 14px; min-height: 1em; }