/* ============================================================ Scrived — UI styles Inspired by classic book-design aesthetics: warm cream paper, serif typography, restrained accent color, three-pane editor. ============================================================ */ :root { --bg-page: #f5f3ee; --bg-card: #ffffff; --bg-paper: #fdfbf6; --bg-rail: #efece4; --bg-rail-hover: #e6e2d6; --bg-topbar: #1d1b18; --bg-topbar-soft: #2a2723; --ink-1: #1a1a1a; --ink-2: #3a3733; --ink-3: #6a665e; --ink-4: #98948a; --ink-5: #c8c3b6; --line: #e2dcd0; --line-soft:#ece8dc; --line-strong:#d4cdba; /* Alias used across marketing.css (blog, articles, landing tables). It was referenced 20+ times but never defined, so it always fell back to the light #e2dcd0 — borders never darkened in dark mode. Aliasing it to --line makes every one of those borders theme-aware in a single place (same value in light mode, so nothing changes there). */ --line-1: var(--line); --accent: #8b6914; /* old gold */ --accent-soft: #b58a2f; --accent-bg: #f6efdb; --danger: #a93b2a; --success: #4d7a2e; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-display: 'Playfair Display', Georgia, serif; --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04); --shadow-2: 0 2px 6px rgba(0,0,0,.06), 0 12px 36px rgba(0,0,0,.08); --shadow-paper: 0 1px 0 rgba(0,0,0,.02), 0 12px 28px rgba(60,52,32,.08); --topbar-h: 56px; } /* ============================================================ Dark theme — applied via [data-theme="dark"] on . Set before render by an inline script in layout.php so there's no flash of light theme on cold loads. Only the editor chrome + writing-view manuscript darken; the preview / print / EPUB views still use the book's saved theme colors (via --pv-* vars), so WYSIWYG stays accurate. ============================================================ */ :root[data-theme="dark"] { --bg-page: #1c1a17; --bg-card: #26221d; --bg-paper: #26221d; --bg-rail: #1a1815; --bg-rail-hover: #2a2722; --bg-topbar: #131210; --bg-topbar-soft: #1d1b18; --ink-1: #ebe6d8; --ink-2: #c8c2b3; --ink-3: #968f80; --ink-4: #6c655a; --ink-5: #45403a; --line: #3a342c; --line-soft: #2d2823; --line-strong: #4d4538; --accent: #c8a042; --accent-soft: #d4a64f; --accent-bg: #322816; --danger: #d36456; --success: #84b66a; --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25); --shadow-2: 0 2px 6px rgba(0,0,0,.4), 0 12px 36px rgba(0,0,0,.5); --shadow-paper: 0 1px 0 rgba(0,0,0,.25), 0 12px 28px rgba(0,0,0,.4); } /* A handful of literal-colored values can't ride the var system directly (they're either inline styles set by JS or were typed as literal hex codes). Override them per-component in dark mode. */ :root[data-theme="dark"] body { background: var(--bg-page); } :root[data-theme="dark"] .editor-topbar { background: var(--bg-topbar); } :root[data-theme="dark"] .topbar-iconbtn:hover { background: rgba(255,255,255,.06); } :root[data-theme="dark"] .ql-toolbar.ql-snow { background: var(--bg-paper); border-color: var(--line); } :root[data-theme="dark"] .ql-toolbar.ql-snow .ql-stroke { stroke: var(--ink-2); } :root[data-theme="dark"] .ql-toolbar.ql-snow .ql-fill { fill: var(--ink-2); } :root[data-theme="dark"] .ql-toolbar.ql-snow .ql-picker-label { color: var(--ink-2); } :root[data-theme="dark"] .ql-toolbar.ql-snow button:hover .ql-stroke, :root[data-theme="dark"] .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--accent); } :root[data-theme="dark"] .ql-toolbar.ql-snow button:hover .ql-fill, :root[data-theme="dark"] .ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--accent); } :root[data-theme="dark"] .ql-snow .ql-picker-options { background: var(--bg-card); border-color: var(--line); color: var(--ink-1); } :root[data-theme="dark"] .ql-editor blockquote { color: var(--ink-2); } :root[data-theme="dark"] .ql-editor::before { color: var(--ink-4); } /* placeholder */ :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: var(--bg-paper); color: var(--ink-1); border-color: var(--line); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--ink-4); } :root[data-theme="dark"] input[type=checkbox], :root[data-theme="dark"] input[type=radio] { accent-color: var(--accent); } /* Modal / panel backgrounds were hardcoded to white in places. */ :root[data-theme="dark"] .preset-pop, :root[data-theme="dark"] .timer-popover, :root[data-theme="dark"] .tts-popover, :root[data-theme="dark"] .find-modal, :root[data-theme="dark"] .prose-panel, :root[data-theme="dark"] .bible-mention-popover, :root[data-theme="dark"] .res-link-composer, :root[data-theme="dark"] .chapter-settings-popover, :root[data-theme="dark"] .resource-detail, :root[data-theme="dark"] .bible-form, :root[data-theme="dark"] .corkboard-card, :root[data-theme="dark"] .diff-chapter, :root[data-theme="dark"] .bible-sidebar, :root[data-theme="dark"] .resources-sidebar { background: var(--bg-card); color: var(--ink-1); } /* Find-modal backdrop should be deeper in dark mode. */ :root[data-theme="dark"] .find-backdrop { background: rgba(0,0,0,.55); } /* Diff page row colors: tweak the green/red highlights so they read on dark. */ :root[data-theme="dark"] .diff-row-add { background: rgba(80, 160, 80, 0.12); } :root[data-theme="dark"] .diff-row-del { background: rgba(200, 70, 70, 0.12); } :root[data-theme="dark"] .diff-row-del .diff-row-text { color: #d49591; } :root[data-theme="dark"] .diff-row-mod { background: rgba(200, 160, 60, 0.10); } /* Prose-check and find-match highlights stay legible. */ :root[data-theme="dark"] ::highlight(prose-weasel) { background-color: rgba(200,160,60,.25); } :root[data-theme="dark"] ::highlight(prose-wordy) { background-color: rgba(90,130,210,.22); } :root[data-theme="dark"] ::highlight(prose-repeat) { background-color: rgba(200,80,80,.22); } :root[data-theme="dark"] ::highlight(prose-flash) { background-color: rgba(70,135,255,.85); color: #fff; } :root[data-theme="dark"] ::highlight(find-match) { background-color: rgba(255,200,80,.30); } :root[data-theme="dark"] ::highlight(find-current) { background-color: rgba(255,160,60,.55); } /* TOC dotted leader and page-sheet borders use ink colors that need to stay on the dark page. The fallbacks via CSS vars cover most. */ :root[data-theme="dark"] .save-status { color: var(--ink-3); } :root[data-theme="dark"] .preset-pop-row:hover { background: var(--bg-rail-hover); } /* Library cards + admin pages use the same vars, so they pick up dark mode automatically. Cover fallbacks need a lighter tint. */ :root[data-theme="dark"] .cover-fallback { background: var(--bg-rail); color: var(--ink-2); } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } /* The browser's default `[hidden] { display: none }` rule loses to any class-based display rule (e.g. `.field { display: block }`). Force it to win — most "hidden" elements in this app are toggled via the HTML `hidden` attribute and we want that to actually work. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg-page); color: var(--ink-1); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-soft); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; letter-spacing: .01em; cursor: pointer; background: #fff; color: var(--ink-1); border-color: var(--line); transition: all .15s ease; text-decoration: none; line-height: 1; } .btn:hover { background: var(--bg-rail); border-color: var(--line-strong); } .btn-primary { background: var(--ink-1); color: #fff; border-color: var(--ink-1); } .btn-primary:hover { background: #000; border-color: #000; color: #fff; } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--bg-rail); border-color: var(--line); } .btn-block { width: 100%; } .btn-lg { padding: 12px 24px; font-size: 14px; } .btn-sm { padding: 6px 12px; font-size: 12.5px; } .btn-link { background: none; border: none; padding: 0; color: var(--ink-3); font-size: 13px; cursor: pointer; font-family: inherit; } .btn-link:hover { color: var(--ink-1); } .btn-icon { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .btn-icon:hover { background: var(--bg-rail); border-color: var(--line-strong); color: var(--ink-1); } /* ---------- Form fields ---------- */ .field { display: block; margin-bottom: 14px; } .field-label { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); margin-bottom: 5px; letter-spacing: .03em; text-transform: uppercase; } .field input, .field select, .field textarea, .select { width: 100%; padding: 9px 11px; border: 1px solid var(--line); background: var(--bg-paper); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 14px; color: var(--ink-1); transition: border-color .12s ease, box-shadow .12s ease; } .field input:focus, .field select:focus, .field textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,105,20,.12); background: #fff; } /* Radios and checkboxes inside a .field (e.g. inline pickers) should keep their native size — without this they inherit the text-input width:100%. */ .field input[type="radio"], .field input[type="checkbox"] { width: auto; padding: 0; margin: 0; background: transparent; border: 0; box-shadow: none; } .field-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin: 8px 0; cursor: pointer; } .field-toggle-tight { margin: 2px 0 4px; font-size: 12px; color: var(--ink-3); } .req { color: var(--danger); } .alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px; } .alert-error { background: #fdf0ed; color: #8a2c1d; border-left: 3px solid var(--danger); } .inline-form { display: inline; } /* ============================================================ AUTH (login) ============================================================ */ .auth-body { background: var(--bg-page); } .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .auth-card { width: 100%; max-width: 400px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 40px 36px; border: 1px solid var(--line); } .auth-brand { text-align: center; margin-bottom: 28px; } .brand-mark { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin: 0; letter-spacing: .02em; color: var(--ink-1); } /* The wordmark links back to the homepage — keep the heading look, hint at clickability on hover. */ .brand-mark a { color: inherit; text-decoration: none; } .brand-mark a:hover { color: var(--accent); } .brand-tag { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--ink-3); margin: 4px 0 0; } .auth-form { margin-top: 8px; } .auth-form .btn { margin-top: 8px; } .auth-footer { text-align: center; font-size: 12px; color: var(--ink-4); margin: 24px 0 0; } /* Trust line under the register submit — same quiet tone as .auth-footer, sitting inside the form so it reads as part of the decision moment. */ .auth-trust-line { text-align: center; font-size: 12px; color: var(--ink-4); margin: 12px 0 0; } /* Buyer-intent note (?plan=lifetime): slightly more present than the trust line — it explains what the submit button will do next. */ .auth-plan-note { text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); margin: 12px 0 0; } /* Show/hide toggle for password inputs. Wrap the input in .field-reveal and add a .field-reveal-btn button after it. */ .field-reveal { position: relative; display: block; } .field-reveal input { padding-right: 40px; } .field-reveal-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; padding: 4px; line-height: 0; color: var(--ink-4); cursor: pointer; border-radius: var(--radius-sm); } .field-reveal-btn:hover { color: var(--ink-1); } .field-reveal-btn .eye-closed { display: none; } .field-reveal-btn.is-showing .eye-open { display: none; } .field-reveal-btn.is-showing .eye-closed { display: inline; } /* ============================================================ APP shell + topbar ============================================================ */ .app-body { background: var(--bg-page); min-height: 100vh; } .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .topbar { height: var(--topbar-h); background: var(--bg-topbar); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; } .topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; } .brand { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: #fff; letter-spacing: .02em; } .brand:hover { color: #fff; opacity: .85; } .user-chip { font-size: 12.5px; color: #c8c3b6; padding: 4px 10px; border: 1px solid #3a3733; border-radius: 999px; } .topbar .btn-link { color: #c8c3b6; } .topbar .btn-link:hover { color: #fff; } /* Library / shell topbar wordmark next to the gold S logo */ .topbar-wordmark { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: #fff; letter-spacing: .12em; } .topbar-signout { font-size: 12.5px; letter-spacing: .01em; } /* ============================================================ LIBRARY ============================================================ */ .library { flex: 1; padding: 40px 48px 80px; max-width: 1400px; margin: 0 auto; width: 100%; } .library-hero { display: flex; align-items: end; justify-content: space-between; margin-bottom: 32px; gap: 16px; } .library-title { font-family: var(--font-display); font-size: 36px; font-weight: 600; margin: 0 0 4px; letter-spacing: .01em; } .library-sub { margin: 0; color: var(--ink-3); font-size: 14px; } .library-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .library-search-input { width: 220px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; color: var(--ink-1); background: var(--bg-paper); transition: border-color .12s, box-shadow .12s, background .12s; } .library-search-input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(139,105,20,.12); } /* ---- Cross-book search results panel ---- */ .library-search-results { margin: 0 0 32px; } .library-search-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .library-search-title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink-1); } .library-search-empty { padding: 18px 0; color: var(--ink-3); font-style: italic; } .library-search-body { display: flex; flex-direction: column; gap: 18px; } .lsr-book { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px 14px; } .lsr-book-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; } .lsr-book-title { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--ink-1); } .lsr-book-meta { font-size: 12px; color: var(--ink-3); letter-spacing: .02em; } .lsr-chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .lsr-chapter { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; } .lsr-chapter-title { background: transparent; border: none; padding: 0; font: inherit; font-size: 13.5px; color: var(--accent); cursor: pointer; text-align: left; font-weight: 500; text-decoration: none; } .lsr-chapter-title:hover { text-decoration: underline; } .lsr-chapter-count { font-size: 11px; color: var(--ink-3); background: var(--bg-rail); padding: 1px 8px; border-radius: 999px; align-self: start; font-variant-numeric: tabular-nums; } .lsr-snippets { list-style: none; margin: 4px 0 0; padding: 0; grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; } .lsr-snippet { font-family: var(--font-serif, Georgia, serif); font-size: 13px; line-height: 1.55; color: var(--ink-2); } .lsr-snippet mark { background: rgba(255,235,170,.7); color: var(--ink-1); padding: 0 2px; border-radius: 2px; font-weight: 500; } .lsr-ctx { color: var(--ink-3); } .lsr-truncated { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-3); font-style: italic; grid-column: 1 / -1; } /* Streak + goal stats. Four pills under the "13 books · 868,884 words" line — populated client-side from /api/writing-sessions/stats. The .is-empty state mutes them so a brand new user (or one between sessions) sees a calmer row instead of four zeros at full contrast. */ .library-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .library-stats[hidden] { display: none; } .library-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px 7px 10px; background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: 999px; font-size: 13px; color: var(--ink-2); transition: opacity .15s ease; } .library-stat-icon { font-size: 14px; line-height: 1; } .library-stat-value { font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; } .library-stat-label { font-size: 12px; color: var(--ink-3); } .library-stats.is-empty .library-stat { opacity: .55; } .library-actions .select { width: 200px; } .book-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 32px 24px; } .book-card { position: relative; display: flex; flex-direction: column; } /* Drag-reorder visuals kick in on grids marked .is-draggable — every series grid, plus the standalone grid when in Manual sort. Cards stay [draggable=true] everywhere (so they can be dragged into a series), but the grab cursor + drop styling only show where a drop sticks. */ .book-grid.is-draggable .book-card { cursor: grab; } .book-card.is-dragging { opacity: .55; cursor: grabbing; } .book-grid.is-draggable .book-card.drag-over { outline: 2px dashed var(--accent); outline-offset: 4px; } /* Drag handle — six-dot grip in the top-left corner of each card. Hidden by default; revealed when the grid is in Manual sort. Positioned outside the cover-link so a click on the handle never navigates into the editor. */ .book-drag-handle { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 6px; color: var(--ink-2); cursor: grab; padding: 0; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: background .12s ease, color .12s ease; } .book-grid.is-draggable .book-drag-handle { display: inline-flex; } .book-drag-handle:hover { background: #fff; color: var(--ink-1); } .book-drag-handle:active { cursor: grabbing; } /* Series selector in the Book details modal: select + inline "New". */ .series-select-row { display: flex; gap: 8px; align-items: stretch; } .series-select-row select { flex: 1 1 auto; } .series-select-row .btn-sm { flex: 0 0 auto; white-space: nowrap; } /* ----- Series shelves ----- */ .series-shelf { margin-bottom: 38px; } .series-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .series-toggle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2, #fff); color: var(--ink-2); cursor: pointer; flex: 0 0 auto; } .series-toggle:hover { color: var(--ink-1); background: #fff; } .series-caret { transition: transform .15s ease; } .series-shelf.is-collapsed .series-caret { transform: rotate(-90deg); } .series-title { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--ink-1); } .series-count { font-size: .8rem; color: var(--ink-3, var(--ink-2)); background: var(--paper-2, #f3efe6); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; white-space: nowrap; } .series-actions { margin-left: auto; display: flex; gap: 8px; } .series-delete { color: var(--danger, #b3261e); } .series-delete:hover { color: var(--danger, #b3261e); } /* Collapsed → hide the grid but keep the header (and its drop target for dragging a book in, via the count badge / header zone). .book-grid (not .series-grid) so the standalone shelf collapses too. */ .series-shelf.is-collapsed .book-grid { display: none; } /* The standalone shelf header is lighter — it's a catch-all, not a user-named series, so no rename/delete chrome (it does collapse). */ .series-shelf.is-standalone .series-title { color: var(--ink-2); font-weight: 500; } /* Empty grids still need height so they're a reachable drop target. `.is-empty` is toggled by library.js (a CSS :empty selector wouldn't match because the PHP-rendered