289 lines
8.1 KiB
CSS
289 lines
8.1 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inconsolata:wght@400;600&display=swap');
|
|
|
|
/* Variables mirrored from fabula-ultima-sheet.css */
|
|
:root {
|
|
--bg: #0d0f0e;
|
|
--surface: #141816;
|
|
--surface2: #1b1f1d;
|
|
--surface3: #222826;
|
|
--border: #2e3830;
|
|
--border-bright:#3d4f47;
|
|
--teal: #4ecdc4;
|
|
--teal-dim: #2a6b66;
|
|
--gold: #c9a84c;
|
|
--gold-dim: #7a6130;
|
|
--red: #c0392b;
|
|
--text: #d4cfc4;
|
|
--text-dim: #7a8a82;
|
|
--text-bright: #ede8dc;
|
|
--font-display: 'Cinzel', serif;
|
|
--font-body: 'Crimson Text', serif;
|
|
--font-mono: 'Inconsolata', monospace;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
/* ── Base ── */
|
|
body {
|
|
background: var(--bg);
|
|
background-image:
|
|
radial-gradient(ellipse at 20% 10%, rgba(78,205,196,.04) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 80% 90%, rgba(201,168,76,.04) 0%, transparent 50%);
|
|
color: var(--text);
|
|
font-family: var(--font-body);
|
|
font-size: 17px;
|
|
line-height: 1.75;
|
|
padding: 32px;
|
|
max-width: 860px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ── Headings ── */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-display);
|
|
line-height: 1.3;
|
|
margin-top: 1.6em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.85em;
|
|
color: var(--teal);
|
|
border-bottom: 1px solid var(--border-bright);
|
|
padding-bottom: 0.3em;
|
|
margin-top: 0.4em;
|
|
}
|
|
|
|
h2 { font-size: 1.3em; color: var(--gold); }
|
|
h3 { font-size: 1.1em; color: var(--text-bright); }
|
|
h4 { font-size: 0.95em; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
h5, h6 { font-size: 0.85em; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
|
|
|
|
/* ── Body copy ── */
|
|
p { margin-bottom: 0.9em; }
|
|
p:last-child { margin-bottom: 0; }
|
|
|
|
strong, b { color: var(--text-bright); font-weight: 600; }
|
|
em, i { color: var(--text-dim); font-style: italic; }
|
|
|
|
a { color: var(--teal); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
small { font-size: 0.82em; color: var(--text-dim); }
|
|
|
|
/* ── Lists ── */
|
|
ul, ol { padding-left: 1.5em; margin-bottom: 0.9em; }
|
|
li { margin-bottom: 0.35em; }
|
|
li > p { margin-bottom: 0.3em; }
|
|
li strong { color: var(--gold); }
|
|
|
|
/* Custom bullet style used by several pages */
|
|
ul.no-bullets, .class-list, .toc-list, .ability-list { list-style: none; padding-left: 0; }
|
|
|
|
/* ── Blockquote ── */
|
|
blockquote {
|
|
border-left: 3px solid var(--teal-dim);
|
|
margin: 1em 0;
|
|
padding: 0.6em 1.2em;
|
|
color: var(--text-dim);
|
|
font-style: italic;
|
|
background: var(--surface2);
|
|
}
|
|
|
|
blockquote cite, cite { font-size: 0.85em; color: var(--text-dim); display: block; margin-top: 0.4em; }
|
|
|
|
/* ── Code ── */
|
|
code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.84em;
|
|
background: var(--surface2);
|
|
color: var(--teal);
|
|
padding: 0.05em 0.3em;
|
|
}
|
|
|
|
pre {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.84em;
|
|
background: var(--surface2);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
padding: 1em;
|
|
overflow-x: auto;
|
|
margin-bottom: 0.9em;
|
|
}
|
|
|
|
/* ── HR / dividers ── */
|
|
hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: 1.4em 0;
|
|
}
|
|
|
|
/* ── Tables ── */
|
|
table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.9em; }
|
|
th {
|
|
background: var(--surface3);
|
|
color: var(--teal);
|
|
font-family: var(--font-display);
|
|
font-size: 0.65em;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
padding: 8px 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-bright);
|
|
}
|
|
td { padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
|
|
|
|
/* ── Structural ── */
|
|
header {
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: 0.8em;
|
|
margin-bottom: 1.4em;
|
|
color: var(--text-dim);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.78em;
|
|
}
|
|
|
|
section { margin-bottom: 1.4em; }
|
|
|
|
/* .container wrappers used by some pages */
|
|
.container, .document-container, .section-container { /* inherit body max-width */ }
|
|
|
|
/* ── Metadata / footer notes ── */
|
|
.metadata, .meta-data, .metadata-box, .meta-info,
|
|
.document-footer, .page-info, .reference-note,
|
|
.source-note, .footer-note {
|
|
margin-top: 2em;
|
|
padding: 0.7em 0.9em;
|
|
border-top: 1px solid var(--border);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.76em;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* ── Section breaks ── */
|
|
.section-break, .section-divider {
|
|
border-top: 1px solid var(--border-bright);
|
|
margin: 1.6em 0;
|
|
padding-top: 1.6em;
|
|
}
|
|
|
|
/* ── Section / sub-section headings ── */
|
|
.section-header, .section-title, .subheading {
|
|
font-family: var(--font-display);
|
|
font-size: 0.65em;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--teal);
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* ── Card-style entries ── */
|
|
.weapon-entry, .skill-entry, .artifact-entry, .item-entry,
|
|
.character-card, .stat-block, .skill-card, .ability-item,
|
|
.lore-entry, .credit-entry, .choice-group,
|
|
.index-item, .equipment, .equipment-details {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-left: 3px solid var(--teal-dim);
|
|
padding: 14px 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* Entry / item titles */
|
|
.weapon-title, .artifact-title, .entry-title,
|
|
.item-name, .item-title, .item-header,
|
|
.ability-title, .skill-title, .skill-name,
|
|
.weapon-name, .effect-header, .skill-header {
|
|
font-family: var(--font-display);
|
|
font-size: 0.72em;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--gold);
|
|
display: block;
|
|
margin-bottom: 0.35em;
|
|
}
|
|
|
|
/* Stats / attributes lines */
|
|
.weapon-stats, .stats-line, .stats, .stats-block,
|
|
.stats-data, .stats-grid, .attributes,
|
|
.key-attributes, .stat-item, .stat-box, .stat-block {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.82em;
|
|
color: var(--text-dim);
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.attributes span, .stats-grid span { display: inline-block; margin-right: 1em; }
|
|
|
|
/* Damage / cost labels */
|
|
.damage-type { color: var(--red); font-weight: 600; }
|
|
.cost, .item-cost, .skill-cost, .requirements { color: var(--gold-dim); font-family: var(--font-mono); font-size: 0.85em; }
|
|
|
|
/* ── ToC ── */
|
|
.toc-list { list-style: none; padding: 0; }
|
|
.toc-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 0.5em;
|
|
padding: 4px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 0.95em;
|
|
}
|
|
.toc-item:last-child { border-bottom: none; }
|
|
.title, .section-header.title { flex: 1; }
|
|
.page-number { font-family: var(--font-mono); font-size: 0.82em; color: var(--text-dim); white-space: nowrap; }
|
|
|
|
/* ── Profile / character ── */
|
|
.profile-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px 16px;
|
|
}
|
|
|
|
.profile-attribute strong, .profile-field strong { color: var(--text-dim); font-size: 0.85em; display: block; }
|
|
.profile-attribute span { font-weight: 600; color: var(--text-bright); }
|
|
|
|
.character-info { font-size: 0.9em; color: var(--text-dim); margin-bottom: 0.5em; }
|
|
|
|
/* ── Notes / highlights / examples ── */
|
|
.highlight, .note, .info-box, .info-item, .special-rules {
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border-bright);
|
|
padding: 10px 14px;
|
|
margin: 0.8em 0;
|
|
}
|
|
|
|
.example {
|
|
border-left: 3px solid var(--gold-dim);
|
|
padding: 0.5em 1em;
|
|
color: var(--text-dim);
|
|
font-style: italic;
|
|
margin: 0.8em 0;
|
|
}
|
|
|
|
/* ── Descriptor / index groups ── */
|
|
.descriptor-group, .index-list, .class-list, .ability-list { margin-bottom: 1em; }
|
|
.index-item { display: flex; gap: 0.5em; }
|
|
.skill-classes { font-size: 0.8em; color: var(--text-dim); }
|
|
|
|
/* ── Section group ── */
|
|
.section-group { margin-bottom: 1.4em; }
|
|
|
|
/* ── Skill header layout ── */
|
|
.skill-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
margin-bottom: 0.4em;
|
|
}
|
|
|
|
/* ── Scrollbar ── */
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: var(--bg); }
|
|
::-webkit-scrollbar-thumb { background: var(--border-bright); }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--teal-dim); }
|