/* ===================================================================== vp-tome.css — Grimoire / Tome page style for Viaproxima --------------------------------------------------------------------- A reusable layer on top of vp.theme.css. Pure CSS, no JS dependencies. Apply by wrapping page content in
...
. Falls back to its own values when vp.theme.css tokens are absent so the template renders standalone (e.g. in design canvases). Required fonts (load these in if not already global): - Libre Baskerville (body) - Cinzel (display headings, formula, markers) - Cinzel Decorative (drop-cap, optional) - EB Garamond (italic tagline / eyebrow) ===================================================================== */ .vp-tome { /* Local tokens — fall back to vp.theme.css globals when present */ --tome-paper: var(--paper, #f6f0e4); --tome-paper-2: var(--panel-2, #f6edde); --tome-paper-hi: var(--panel, #fdf8ee); --tome-bg-warm: #efe6cf; --tome-ink: var(--ink, #2b241c); --tome-muted: var(--muted, #6b5b47); --tome-muted-2: var(--muted-2, #8a7a62); --tome-border: var(--border, #d5c7ad); --tome-border-2: var(--border-2, #c7b89d); --tome-gold: #a8935e; --tome-gold-soft: #c9b990; --tome-blood: #6b1f16; /* Severity ramp — use for any 5-step scale (damage, danger, mana cost…) */ --tone-1: #b5a06a; /* straw */ --tone-2: #b8782e; /* amber */ --tone-3: #8a4520; /* rust */ --tone-4: #6d1f16; /* blood */ --tone-5: #1a0c08; /* obsidian*/ position: relative; background: radial-gradient(ellipse at 30% 0%, var(--tome-paper-2) 0%, transparent 60%), radial-gradient(ellipse at 70% 100%, #ece2c8 0%, transparent 55%), var(--tome-bg-warm); color: var(--tome-ink); font-family: 'Libre Baskerville', Georgia, serif; font-size: 15px; line-height: 1.7; padding: 72px 88px 80px; box-shadow: inset 0 0 80px rgba(120, 90, 50, 0.10); } .vp-tome p { margin: 0 0 14px; max-width: 64ch; text-wrap: pretty; } .vp-tome strong { font-weight: 600; } .vp-tome em { font-family: 'EB Garamond', serif; font-style: italic; } /* -------------------------------------------------------------------- FRAME — filigree corners (drop the four SVG snippets inside .vp-tome) -------------------------------------------------------------------- */ .vp-tome__filigree { position: absolute; width: 70px; height: 70px; pointer-events: none; } .vp-tome__filigree--tl { top: 18px; left: 18px; } .vp-tome__filigree--tr { top: 18px; right: 18px; transform: scaleX(-1); } .vp-tome__filigree--bl { bottom: 18px; left: 18px; transform: scaleY(-1); } .vp-tome__filigree--br { bottom: 18px; right: 18px; transform: scale(-1,-1); } /* -------------------------------------------------------------------- PAGE HEAD — eyebrow, title, optional split title, tagline, divider -------------------------------------------------------------------- */ .vp-tome__head { text-align: center; margin-bottom: 36px; } .vp-tome__eyebrow { font-family: 'EB Garamond', serif; font-style: italic; font-size: 13px; color: var(--tome-muted-2); letter-spacing: 0.04em; } .vp-tome__title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 56px; letter-spacing: 0.04em; margin: 8px 0 10px; color: var(--tome-ink); text-shadow: 1px 1px 0 rgba(168,147,94,0.25); } /* Modifier for split titles like "Liv & Strid" */ .vp-tome__title--split { display: flex; justify-content: center; align-items: baseline; gap: 18px; } .vp-tome__title-amp { font-family: 'Cinzel Decorative', 'Cinzel', serif; font-size: 44px; font-weight: 400; color: var(--tome-gold); text-shadow: none; } .vp-tome__tagline { font-family: 'EB Garamond', serif; font-style: italic; color: var(--tome-muted); font-size: 16px; max-width: 58ch; margin: 0 auto; } .vp-tome__divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 20px auto 0; max-width: 380px; color: var(--tome-gold); } .vp-tome__divider > span:first-child, .vp-tome__divider > span:last-child { height: 1px; background: linear-gradient(90deg, transparent, var(--tome-gold) 40%, var(--tome-gold) 60%, transparent); } .vp-tome__divider-glyph { font-size: 14px; } /* -------------------------------------------------------------------- DROP-CAP — illuminated first letter; floats inside the first

-------------------------------------------------------------------- */ .vp-tome__dropcap { float: left; font-family: 'Cinzel Decorative', 'Cinzel', serif; font-weight: 700; font-size: 78px; line-height: 0.78; color: var(--tome-blood); padding: 8px 14px 0 0; margin: 6px 0 0; text-shadow: 1px 1px 0 rgba(168,147,94,0.3); } /* -------------------------------------------------------------------- SECTION HEAD — heavy horizontal rule with diamond marks -------------------------------------------------------------------- */ .vp-tome__section { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 36px 0 18px; padding: 10px 0; border-top: 1px solid var(--tome-border-2); border-bottom: 1px solid var(--tome-border-2); } .vp-tome__section-mark { color: var(--tome-gold); font-size: 12px; } .vp-tome__section-label { font-family: 'Cinzel', serif; font-weight: 700; font-size: 16px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--tome-ink); } /* -------------------------------------------------------------------- STONE — carved-stone callout for formulas, axioms, key rules -------------------------------------------------------------------- */ .vp-tome__stone { margin: 22px auto; width: max-content; position: relative; } .vp-tome__stone-inner { position: relative; background: linear-gradient(180deg, var(--tome-paper-2) 0%, #e6d6b0 100%); border: 1.5px solid var(--tome-gold); padding: 22px 56px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(120,90,40,0.4), inset 0 0 0 4px var(--tome-paper-2), inset 0 0 0 5px var(--tome-border-2); } .vp-tome__stone-inner::before, .vp-tome__stone-inner::after { content: '❦'; position: absolute; top: 50%; transform: translateY(-50%); color: var(--tome-gold); font-size: 16px; } .vp-tome__stone-inner::before { left: 16px; } .vp-tome__stone-inner::after { right: 16px; } .vp-tome__stone-text { font-family: 'Cinzel', serif; font-weight: 600; font-size: 22px; letter-spacing: 0.08em; color: var(--tome-ink); text-shadow: 1px 1px 0 rgba(255,255,255,0.5); } .vp-tome__stone::after { content: ''; display: block; height: 6px; margin-top: 2px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.20), transparent 70%); } /* -------------------------------------------------------------------- THRESHOLD — proportional-bar ranked list Use for any "X amount → category" mapping (damage, costs, time…) -------------------------------------------------------------------- */ .vp-tome__threshold { margin: 18px 0 22px; } .vp-tome__threshold-head { display: grid; grid-template-columns: 1fr 240px; gap: 24px; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tome-muted-2); padding: 8px 0; border-bottom: 1.5px solid var(--tome-gold); margin-bottom: 8px; } .vp-tome__threshold-row { display: grid; grid-template-columns: 1fr 240px; gap: 24px; align-items: center; padding: 10px 0; border-bottom: 1px dotted var(--tome-border-2); } .vp-tome__threshold-row:last-child { border-bottom: none; } .vp-tome__threshold-bar-wrap { display: flex; flex-direction: column; gap: 6px; } .vp-tome__threshold-range { font-size: 14px; color: var(--tome-ink); } .vp-tome__threshold-bar { height: 8px; background: rgba(168,147,94,0.18); border: 1px solid var(--tome-border); border-radius: 1px; overflow: hidden; } .vp-tome__threshold-fill { height: 100%; } .vp-tome__threshold-grade { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: 0.04em; font-weight: 600; color: var(--tome-ink); } /* -------------------------------------------------------------------- MARKER — diamond glyph used in tables, lists, callouts Set background to a tone or any colour. -------------------------------------------------------------------- */ .vp-tome__marker { display: inline-block; width: 10px; height: 10px; transform: rotate(45deg); margin-right: 12px; vertical-align: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); background: var(--tome-gold); /* default; override inline */ } .vp-tome__marker--lg { width: 14px; height: 14px; } /* -------------------------------------------------------------------- CARD — generic parchment sub-panel Use for examples, asides, quoted rules, captioned data. -------------------------------------------------------------------- */ .vp-tome__card { background: var(--tome-paper-hi); border: 1px solid var(--tome-border-2); border-radius: 2px; padding: 18px 24px; margin: 22px 0 8px; box-shadow: inset 0 0 0 1px var(--tome-paper-2); } .vp-tome__card-title { font-size: 14px; color: var(--tome-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .vp-tome__card-title-glyph { color: var(--tome-gold); } /* Two-column "X → Y" table style for use inside a card */ .vp-tome__pair-table { width: 100%; border-collapse: collapse; } .vp-tome__pair-table td { padding: 6px 0; font-size: 15px; border-bottom: 1px dotted var(--tome-border); } .vp-tome__pair-table tr:last-child td { border-bottom: none; } .vp-tome__pair-key { font-family: 'Cinzel', serif; font-weight: 600; font-size: 16px; width: 100px; font-variant-numeric: tabular-nums; color: var(--tome-ink); } .vp-tome__pair-arrow { width: 40px; text-align: center; color: var(--tome-gold); font-family: 'Cinzel', serif; } /* -------------------------------------------------------------------- LIST — diamond-marker description list (for rule definitions, etc.) -------------------------------------------------------------------- */ .vp-tome__list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; } .vp-tome__list-row { display: grid; grid-template-columns: 36px 200px 1fr; gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid #e3d6b8; } .vp-tome__list-row:last-child { border-bottom: none; } .vp-tome__list-marker-col { padding-top: 6px; } .vp-tome__list-name { font-family: 'Cinzel', serif; font-weight: 600; font-size: 15px; letter-spacing: 0.04em; color: var(--tome-ink); } .vp-tome__list-body { font-size: 15px; color: var(--tome-ink); line-height: 1.6; max-width: 56ch; } /* -------------------------------------------------------------------- UTILITIES — small helpers -------------------------------------------------------------------- */ .vp-tome__lead-paragraph { /* first paragraph after head, holds drop-cap */ } .vp-tome__rule { height: 1px; background: linear-gradient(90deg, transparent, var(--tome-border-2) 18%, var(--tome-border-2) 82%, transparent); margin: 24px 0; border: none; }