/* ============================================================ fable.css — for story pages in the Cronicile Pădurii series Requires class="fable-page" on . Links after style.css; wins specificity via .fable-page scope. ============================================================ */ :root { --forest: #1b2318; --parchment: #f2ebe0; --ink: #1a120a; --ink-mid: #4a3828; --ink-faint: #9a8e7e; --parchment-rule: #c8bfaf; --fox: #8c2020; } /* ─── Page background ─── */ body.fable-page { background-image: none; } /* ─── Nav on dark background ─── */ body.fable-page nav { background: transparent; border-bottom: none; box-shadow: none; } body.fable-page nav ul li a { color: #272727 !important; font-family: 'Courier New', Courier, monospace; font-size: 0.88rem !important; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none !important; background-color: none !important; border-color: rgba(255, 235, 200, 0.4) !important; } body.fable-page nav ul li a:hover, body.fable-page nav ul li a:focus { color: #e8dfc8 !important; background: none !important; text-decoration: none !important; } /* ─── Back link ─── */ body.fable-page .back-link { display: block; text-align: center; max-width: 680px; margin: 2rem auto 0; font-family: 'Courier New', Courier, monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: #1e0000; text-decoration: none; transition: color 0.2s; border-color: rgba(40, 15, 5, 0.25) !important; } body.fable-page .back-link:hover { color: var(--fox) !important; } /* ─── The parchment article ─── */ body.fable-page article { background: var(--parchment); background-image: none; color: var(--ink); border: none; max-width: 680px; margin: 1.5rem auto 5rem; padding: 4rem 4.5rem; border-radius: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 20px 60px rgba(0, 0, 0, 0.45); font-family: Georgia, 'Times New Roman', serif; } /* ─── Story header ─── */ body.fable-page .story-header { text-align: center; margin-bottom: 2.8rem; padding-bottom: 2rem; border-bottom: 1px solid var(--parchment-rule); } body.fable-page .story-series { display: block; font-family: 'Courier New', Courier, monospace; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.1rem; } body.fable-page .story-header h1 { font-family: Georgia, serif; font-weight: normal; font-style: italic; font-size: 1.75rem; line-height: 1.35; color: var(--ink); margin: 0 0 1.2rem 0; letter-spacing: 0.01em; } body.fable-page .story-meta { font-family: 'Courier New', Courier, monospace; font-size: 0.72rem; color: var(--ink-faint); margin: 0; } /* ─── Body text ─── */ body.fable-page .story-body { font-size: 1.05rem; line-height: 1.9; color: var(--ink); } body.fable-page .story-body p { margin: 0; text-indent: 2em; } body.fable-page .chapter-section > p:first-of-type { text-indent: 0; } /* ─── Drop cap — fox red ─── */ body.fable-page .story-body .chapter-section > p:first-of-type::first-letter { font-size: 3.8em; float: left; line-height: 0.76; margin-right: 0.08em; margin-top: 0.1em; color: var(--fox); font-style: normal; font-weight: normal; } /* ─── Chapter headers ─── */ body.fable-page .chapter-section { margin-top: 3rem; } body.fable-page .chapter-section:first-of-type { margin-top: 0; } body.fable-page .chapter-section h2 { text-align: center; font-family: Georgia, serif; font-weight: normal; font-style: italic; font-size: 1.25rem; color: var(--ink-mid); letter-spacing: 0.04em; margin: 0 0 1.6rem 0; border: none !important; padding-left: 0 !important; } body.fable-page .chapter-section h2::before, body.fable-page .chapter-section h2::after { color: var(--fox); font-style: normal; } body.fable-page .chapter-section h2::before { content: "— "; } body.fable-page .chapter-section h2::after { content: " —"; } /* ─── Scene break — fox red ─── */ body.fable-page .scene-break { display: block; text-align: center; color: var(--fox); letter-spacing: 0.5em; font-size: 1.5rem; margin: 2.2rem 0; opacity: 0.75; } /* ─── Story nav ─── */ body.fable-page .story-nav { display: flex; justify-content: center; align-items: center; gap: 4rem; margin-top: 3.5rem; padding-top: 0; border-top: none; font-family: 'Courier New', Courier, monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; } body.fable-page .story-nav a { color: var(--ink-faint); text-decoration: none; transition: color 0.2s; border-color: rgba(40, 15, 5, 0.25) !important; } body.fable-page .story-nav a:hover { color: var(--fox) !important; text-decoration: none; background: none; } body.fable-page .story-nav .spacer { display: none; } body.fable-page .drop-cap { font-size: 2.8em; line-height: 0.85; color: var(--fox); vertical-align: -0.35em; font-style: normal; display: inline-block; } body.fable-page .poem-section .chapter-section:first-of-type > p:first-of-type::first-letter { font-size: 1em; float: none; color: inherit; margin: 0; } body.fable-page article footer { border-top: 1px solid #9a8e7e !important; padding-top: 1rem; } /* ─── Responsive ─── */ @media (max-width: 720px) { body.fable-page article { margin: 1rem; padding: 2rem 1.6rem; } body.fable-page .story-header h1 { font-size: 1.35rem; } body.fable-page .story-body { font-size: 0.98rem; } } /* ─── bg color per story ─── */ body.fable-page.story-1 { background: #d06224; /* terracotta — vulpea */ } body.fable-page.story-2 { background: #9caf88; /* sage green */ --fox: #6b4226; } body.fable-page.story-3 { background: #583586; --fox: #c9a84c; } .story-link-block { display: flex; align-items: center; gap: 1rem; } .card-text { display: flex; flex-direction: column; flex: 1; } .card-sprite { width: 48px; height: 48px; image-rendering: pixelated; flex-shrink: 0; }