/* ========================================================================== FUGUE — stylesheet ========================================================================== Structure: 1. Theme variables (colours) 2. Base / reset 3. Typography 4. Homepage 5. Generic page (about, chapters index) 6. Chapter reading page 7. Chapter list (on the chapters page) 8. Theme toggle button 9. Mobile adjustments ========================================================================== */ /* 1. THEME VARIABLES -------------------------------------------------------------------------- Dark mode is the default. Light mode is enabled by adding the class "light" to the tag (the JS file handles this). --------------------------------------------------------------------------*/ :root { /* Dark theme (default) */ --bg: #1a1714; /* warm off-black, not pure black */ --text: #e8e1d4; /* warm off-white, not pure white */ --text-muted: #8a8276; /* for secondary text like chapter numbers */ --rule: #3a342d; /* subtle dividers */ --accent: #c8b88a; /* aurora-ish warm gold for links */ --accent-hover: #e2d4ad; } html.light { /* Light theme */ --bg: #f5f1e8; /* warm cream */ --text: #2a241d; /* warm near-black */ --text-muted: #6b6356; --rule: #d4ccba; --accent: #6b5a32; --accent-hover: #44391f; } /* 2. BASE / RESET ------------------------------------------------------------------------*/ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); color: var(--text); /* Smooth theme transitions */ transition: background-color 0.3s ease, color 0.3s ease; } body { font-family: 'Crimson Text', Georgia, 'Times New Roman', serif; font-size: 1.125rem; line-height: 1.7; background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); } /* 3. TYPOGRAPHY ------------------------------------------------------------------------*/ h1, h2, h3 { font-family: 'Cinzel', 'Trajan Pro', serif; font-weight: 500; letter-spacing: 0.04em; line-height: 1.3; } p + p { margin-top: 1em; } /* 4. HOMEPAGE — HUB LAYOUT ------------------------------------------------------------------------ Two-column dashboard: latest chapters on the left, author notes ("newsletter") on the right. Stacks vertically on mobile. ------------------------------------------------------------------------*/ .home-hub { max-width: 1080px; margin: 0 auto; padding: 3rem 2rem; min-height: 100vh; display: flex; flex-direction: column; } .hub-header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 1.5rem; margin-bottom: 3rem; } .hub-title { font-size: 2.5rem; letter-spacing: 0.15em; margin: 0; } .hub-nav { display: flex; gap: 2rem; } .hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-bottom: auto; } .hub-column { min-width: 0; /* prevents grid items from overflowing */ } .hub-heading { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); } /* --- Chapter list (left column) --- */ .hub-chapter-list { list-style: none; padding: 0; margin: 0 0 1.5rem 0; } .hub-chapter-list li { border-bottom: 1px solid var(--rule); } .hub-chapter-list li:last-child { border-bottom: none; } .hub-chapter-link { display: flex; align-items: baseline; gap: 1.5rem; padding: 1rem 0.25rem; color: var(--text); border-bottom: none; transition: color 0.2s, padding 0.2s; } .hub-chapter-link:hover { color: var(--accent); padding-left: 0.75rem; border-bottom: none; } .hub-chapter-num { font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.15em; color: var(--text-muted); min-width: 1.5rem; } .hub-chapter-title { font-family: 'Cinzel', serif; font-size: 0.95rem; letter-spacing: 0.05em; } .hub-see-all { text-align: right; font-size: 0.9rem; margin: 0; } .hub-see-all a { font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); border-bottom: none; } .hub-see-all a:hover { color: var(--accent); border-bottom: none; } /* --- Newsletter / notes (right column) --- */ .hub-post-list { list-style: none; padding: 0; margin: 0; } .hub-post { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); } .hub-post:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .hub-post-date { font-family: 'Cinzel', serif; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.5rem 0; } .hub-post-title { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 500; letter-spacing: 0.05em; margin: 0 0 0.75rem 0; color: var(--text); } .hub-post-body { font-size: 1rem; line-height: 1.7; } .hub-post-body p { margin-bottom: 0.7em; } .hub-post-body p:last-child { margin-bottom: 0; } /* --- Hub footer --- */ .hub-footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); text-align: center; } /* --- Hub: mobile stack --- */ @media (max-width: 760px) { .home-hub { padding: 2rem 1.25rem; } .hub-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .hub-title { font-size: 2rem; } .hub-nav { gap: 1.5rem; } .hub-grid { grid-template-columns: 1fr; /* stack to single column */ gap: 3rem; } } /* 4b. OLD HOMEPAGE STYLES (no longer used, kept for reference) ------------------------------------------------------------------------*/ .home { max-width: 540px; margin: 0 auto; padding: 6rem 1.5rem 3rem; min-height: 100vh; display: flex; flex-direction: column; } .home-header { text-align: center; margin-bottom: 4rem; } .site-title { font-size: 3.5rem; letter-spacing: 0.15em; margin-bottom: 1rem; } .tagline { font-style: italic; color: var(--text-muted); font-size: 1rem; } .home-intro { text-align: center; margin-bottom: 4rem; color: var(--text); } .home-intro p { font-size: 1.15rem; line-height: 1.8; } .home-nav { display: flex; justify-content: center; gap: 3rem; margin-bottom: auto; } .nav-link { font-family: 'Cinzel', serif; font-size: 0.95rem; letter-spacing: 0.15em; text-transform: uppercase; } .home-footer { margin-top: 4rem; text-align: center; } /* Continue reading link — only appears if reader has been here before. Sits quietly above the nav, doesn't show otherwise. */ .continue-reading { text-align: center; margin-bottom: 3rem; font-style: italic; color: var(--text-muted); font-size: 0.95rem; /* Hidden by default; JS reveals when there's something to continue */ display: none; } .continue-reading.visible { display: block; } .continue-reading a { font-style: normal; font-family: 'Cinzel', serif; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 0.5rem; } /* 5. GENERIC PAGE (about, chapters index) ------------------------------------------------------------------------*/ .page { max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem; min-height: 100vh; display: flex; flex-direction: column; } .page-nav-top { margin-bottom: 4rem; } .back-link { font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; } .page-header { margin-bottom: 3rem; text-align: center; } .page-title { font-size: 2rem; letter-spacing: 0.15em; text-transform: uppercase; } .page-body p { margin-bottom: 1.25em; } .page-footer { margin-top: auto; padding-top: 4rem; text-align: center; } /* 6. CHAPTER READING PAGE ------------------------------------------------------------------------ This is the most important part — the reading experience. Wider max width than other pages, larger text, deliberate spacing. ------------------------------------------------------------------------*/ .chapter { max-width: 660px; margin: 0 auto; padding: 3rem 1.5rem; min-height: 100vh; display: flex; flex-direction: column; } .chapter-nav-top { margin-bottom: 5rem; } .chapter-header { margin-bottom: 4rem; text-align: center; } .chapter-number { font-family: 'Cinzel', serif; font-size: 0.9rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.5rem; } .chapter-title { font-size: 1.75rem; letter-spacing: 0.05em; line-height: 1.4; } .chapter-body { font-size: 1.2rem; line-height: 1.8; } .chapter-body p { margin-bottom: 1.4em; text-align: left; /* hyphens for prettier line breaks on mobile */ hyphens: auto; -webkit-hyphens: auto; } /* First paragraph of chapter — slightly different */ .chapter-body > p:first-child { margin-top: 0; } .scene-break { border: none; text-align: center; margin: 2.5em 0; height: auto; overflow: visible; } .scene-break::before { content: "⁂"; color: var(--text-muted); font-size: 1.1rem; line-height: 1; } .chapter-footer { margin-top: 5rem; padding-top: 2rem; border-top: 1px solid var(--rule); } .chapter-nav-bottom { display: flex; justify-content: space-between; margin-bottom: 2rem; } .nav-link-subtle { font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; } /* 7. CHAPTER LIST (on the chapters page) ------------------------------------------------------------------------*/ .chapter-list { list-style: none; padding: 0; margin: 0; } .chapter-list-item { border-bottom: 1px solid var(--rule); } .chapter-list-item:first-child { border-top: 1px solid var(--rule); } .chapter-list-link { display: flex; align-items: baseline; gap: 2rem; padding: 1.25rem 0.5rem; color: var(--text); border-bottom: none; transition: color 0.2s ease, padding 0.2s ease; } .chapter-list-link:hover { color: var(--accent); padding-left: 1rem; border-bottom: none; } .chapter-list-number { font-family: 'Cinzel', serif; font-size: 0.9rem; letter-spacing: 0.15em; color: var(--text-muted); min-width: 2rem; } .chapter-list-title { font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 0.05em; } /* 7b. PERIOD LIST (on the periods page) ------------------------------------------------------------------------ Used to list periods as top-level items. Each period is a single label (no number + title split), so the styling is simpler than the chapter list — but borrows its dividers and hover behaviour for consistency. ------------------------------------------------------------------------*/ .period-list { list-style: none; padding: 0; margin: 0; } .period-list-item { border-bottom: 1px solid var(--rule); } .period-list-item:first-child { border-top: 1px solid var(--rule); } .period-list-link { display: block; padding: 1.5rem 0.5rem; color: var(--text); border-bottom: none; transition: color 0.2s ease, padding 0.2s ease; } .period-list-link:hover { color: var(--accent); padding-left: 1rem; border-bottom: none; } .period-list-number { font-family: 'Cinzel', serif; font-size: 1.1rem; letter-spacing: 0.15em; } /* 8. THEME TOGGLE BUTTON ------------------------------------------------------------------------*/ .theme-toggle { background: none; border: 1px solid var(--rule); color: var(--text-muted); font-family: 'Cinzel', serif; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.5rem 1rem; cursor: pointer; transition: color 0.2s, border-color 0.2s; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } /* 9. MOBILE ADJUSTMENTS ------------------------------------------------------------------------*/ @media (max-width: 600px) { body { font-size: 1.05rem; } .home { padding: 4rem 1.25rem 2rem; } .site-title { font-size: 2.5rem; } .home-nav { gap: 2rem; } .chapter { padding: 2rem 1.25rem; } .chapter-nav-top { margin-bottom: 3rem; } .chapter-header { margin-bottom: 2.5rem; } .chapter-title { font-size: 1.4rem; } .chapter-body { font-size: 1.1rem; line-height: 1.75; } .chapter-list-link { gap: 1.25rem; } }