/* ============================================================ ROC Literary — Foundation styles Design system ported from mockup passes 1, 3, 4. Screens (book list, person detail, kanban, etc.) not yet wired up — class names are reserved here and will be applied when those views are built in Step 2+. ============================================================ */ :root { /* Slate Ink — warm paper + warm slate-grey ink. Pencil graphite on cream. The lowest-commitment palette that still has warmth and depth; reads slightly blue but stays neutral. The whole UI lives in this single warm-and-slate family; only ROYGBIV pipeline stage colors remain outside it (separate semantic system). */ --bg: #f4f1e9; --bg-rule: #e4ddca; --bg-card: #faf7ee; --bg-hover: #ebe3d0; --bg-selected: #ddd4bd; /* `--memo-paper` — the .memo-render document background for this theme. Used anywhere a control wants to read as "part of the memo paper" rather than part of the page chrome (e.g., A7 note-toggle's checked-state pill). Default (Light) theme uses the base .memo-render #ffffff; each theme block below carries its own override matching the paper color pinned in the MEMO-RENDER section at the bottom of this file. */ --memo-paper: #ffffff; --ink: #1f242c; /* deep slate-black, warm */ --ink-soft: #3e4854; --ink-muted: #76736a; --ink-faint: #aba599; --accent: #3a4754; /* warm slate — primary accent */ --accent-hover: #29333d; /* darker slate for hover/pressed */ --accent-soft: #5b6776; /* italic emphasis, ampersand, soft links */ --accent-bg: #dee1e5; /* tinted surface for active rows */ --client: #4a5664; /* slightly brighter slate — same family */ --status-active: #757265; --status-hot: #c44536; --status-submitted: #d68c3a; --status-offer: #d4a93a; --status-sold: #6b8e4e; --status-dormant: #aaa595; --stage-pitched: #c44536; --stage-reading: #d68c3a; --stage-offer: #d4a93a; --stage-acquired: #6b8e4e; --stage-optioned: #4a7c8a; --stage-passed: #6e5a8a; /* Stage-prefix label color used in the rendered memo entry title (e.g. "OFFERS", "INTEREST"). Warm terracotta — reads urgent against the cream paper without fighting the slate ink. */ --memo-stage-accent: #a85539; /* Red text — the rich-text "Red" toolbar button wraps a selection in . Same value the Gmail (inline color) and PDF (C.textRed) exporters use, so red reads identically on every surface. */ --memo-red: #c8102e; --serif: 'EB Garamond', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Logo font — Playfair Display italic for the Galley wordmark. High-contrast, editorial, slightly playful. Used only on the brand wordmark in the auth screen + side nav. */ --logo: 'Playfair Display', 'EB Garamond', Georgia, serif; --col-width: 340px; --col-detail-min: 500px; /* The "page header zone" — a fixed 80px-tall shelf running across the very top of the app. The Galley brand wordmark (in the side nav) and each primary view's page title (Memos, Library, People, Companies) both sit vertically centered inside this shelf, so their text baselines align horizontally across the row. Entity-detail views (book / person / company / memo) reuse this height too so their headers don't visually compete with the primary-page chrome. */ --page-header-height: 80px; --nav-width: 180px; --nav-collapsed: 56px; } /* ============================================================ DARK MODE Inverts background/ink ramps to a warm-paper-on-deep-slate palette. Status / stage colors are nudged a touch brighter so they still read against the darker surfaces. Activated via `` from theme.js (system pref or the user's explicit setting in the Profile page). ============================================================ */ [data-theme="dark"] { --bg: #1a1d22; --bg-rule: #2a2f37; --bg-card: #21252b; --bg-hover: #2a2f37; --bg-selected: #353c47; --memo-paper: #e3cea7; /* aged manila — matches .memo-render override */ --ink: #f0eadb; /* warm paper */ --ink-soft: #cfc8b6; --ink-muted: #8b8678; --ink-faint: #5c5950; --accent: #8aa1bc; --accent-hover: #a9bbd1; --accent-soft: #6f8298; --accent-bg: #2c343f; --client: #8aa1bc; --status-active: #8b8678; --status-hot: #e5705e; --status-submitted: #e0a25a; --status-offer: #e3c062; --status-sold: #8eb175; --status-dormant: #6e6a60; --stage-pitched: #e5705e; --stage-reading: #e0a25a; --stage-offer: #e3c062; --stage-acquired: #8eb175; --stage-optioned: #76a4b3; --stage-passed: #9483b3; /* The stage-prefix label only ever appears inside .memo-render, which stays on warm manila paper in dark mode (see the memo-render override block at the bottom of this file). So the accent is intentionally the same warm terracotta as the light theme — no dark-theme override needed. */ color-scheme: dark; } /* ============================================================ EXTRA THEMES — Sepia, Forest, Oxblood, Midnight. Opt-in only via Settings → Appearance (system mode still flips between light and dark only). Each block redefines the same ~25 tokens the dark block does, so every surface that uses var(--bg) / var(--ink) / var(--accent) etc. adapts automatically. Status + stage colors are split between light-theme tones (sepia) and dark-theme tones (forest / oxblood / midnight) so semantic colors stay readable on each surface. The memo-render card itself stays paper-toned across every theme (Approach 3: "document on a desk") — paper tones are set in the memo-render override block further down in this file. The default --memo-stage-accent terracotta carries through every theme since it reads well on paper-tone surfaces; no per-theme override needed. ============================================================ */ /* SEPIA — manila pages, walnut ink, brass-lamp warmth. Bridges light and dark; reads as "fresh document on aged desk." */ [data-theme="sepia"] { --bg: #ebdcc1; --bg-rule: #c8b896; --bg-card: #f3e8d1; --bg-hover: #ddcdb1; --bg-selected: #c4b08a; --memo-paper: #faf3e3; /* pale ivory — matches .memo-render override */ --ink: #3a2818; --ink-soft: #5d4427; --ink-muted: #84684a; --ink-faint: #a99776; --accent: #8b4513; --accent-hover: #6b3411; --accent-soft: #a06940; --accent-bg: #e0d0b5; --client: #964820; /* Sepia is a light theme — keep the warm status palette. */ --status-active: #757265; --status-hot: #c44536; --status-submitted: #d68c3a; --status-offer: #d4a93a; --status-sold: #6b8e4e; --status-dormant: #aaa595; --stage-pitched: #c44536; --stage-reading: #d68c3a; --stage-offer: #d4a93a; --stage-acquired: #6b8e4e; --stage-optioned: #4a7c8a; --stage-passed: #6e5a8a; color-scheme: light; } /* FOREST — leather library, brass lamp, wood paneling. */ [data-theme="forest"] { --bg: #1f2a25; --bg-rule: #2d3a32; --bg-card: #263530; --bg-hover: #2d3a32; --memo-paper: #efe4ca; /* warm cream — matches .memo-render override */ --bg-selected: #3a4d42; --ink: #e8dec3; --ink-soft: #c5b894; --ink-muted: #948872; --ink-faint: #65604f; --accent: #b8956a; --accent-hover: #d4b186; --accent-soft: #957658; --accent-bg: #2c3a32; --client: #b8956a; /* Dark status tones — brighter for dark surfaces. */ --status-active: #8b8678; --status-hot: #e5705e; --status-submitted: #e0a25a; --status-offer: #e3c062; --status-sold: #a8b074; --status-dormant: #6e6a60; --stage-pitched: #e5705e; --stage-reading: #e0a25a; --stage-offer: #e3c062; --stage-acquired: #a8b074; --stage-optioned: #76a4b3; --stage-passed: #9483b3; color-scheme: dark; } /* OXBLOOD — cracked red leather, gentleman's-club study. */ [data-theme="oxblood"] { --bg: #1f1612; --bg-rule: #2e2018; --bg-card: #26181a; --bg-hover: #2e2018; --memo-paper: #e8d8b7; /* aged parchment — matches .memo-render override */ --bg-selected: #3d2520; --ink: #f0ddc4; --ink-soft: #c9b196; --ink-muted: #948065; --ink-faint: #6b5a45; --accent: #b8513c; --accent-hover: #d3614a; --accent-soft: #9c4232; --accent-bg: #3d2520; --client: #d3614a; --status-active: #8b8678; --status-hot: #e58263; --status-submitted: #e0a25a; --status-offer: #e3c062; --status-sold: #9aaa68; --status-dormant: #6e6a60; --stage-pitched: #e58263; --stage-reading: #e0a25a; --stage-offer: #e3c062; --stage-acquired: #9aaa68; --stage-optioned: #76a4b3; --stage-passed: #9483b3; color-scheme: dark; } /* MIDNIGHT — late-night desk, brass lamplight, indigo paper. */ [data-theme="midnight"] { --bg: #161a26; --bg-rule: #232838; --bg-card: #1d2230; --bg-hover: #232838; --memo-paper: #e3cea7; /* aged manila — shares with Dark theme's .memo-render override */ --bg-selected: #2e3548; --ink: #e8e3d0; --ink-soft: #c5bca5; --ink-muted: #918a73; --ink-faint: #5c5644; --accent: #c8a878; --accent-hover: #dcbb8a; --accent-soft: #a48a62; --accent-bg: #2e3548; --client: #c8a878; --status-active: #8b8678; --status-hot: #e09a78; --status-submitted: #e0a25a; --status-offer: #e3c062; --status-sold: #a4b078; --status-dormant: #6e6a60; --stage-pitched: #e5705e; --stage-reading: #e0a25a; --stage-offer: #e3c062; --stage-acquired: #a4b078; --stage-optioned: #76a4b3; --stage-passed: #9483b3; color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input { font-family: inherit; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ============================================================ SIGN-IN / AUTH SCREENS ============================================================ */ .auth-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; z-index: 1000; } .auth-card { width: 100%; max-width: 400px; text-align: center; padding: 48px 32px; } /* The wordmark is now an

. The SVG carries its own underline and glyph paths, so we don't need font-family, weight, ::after pseudo, or anything else here. Just size it. */ /* Rendered via mask-image (not ) so the logo color is `background-color: var(--ink)` — automatically matching each theme's body-text color. The wordmark SVG is a pure 2-color asset (dark fill on transparent), so it makes a clean mask silhouette. Explicit height is required because mask-image doesn't establish intrinsic dimensions. */ .auth-brand { display: block; width: 220px; height: 80px; /* matches wordmark aspect ratio 2889:1051 (~2.749:1) */ margin: 0 auto 14px; background-color: var(--ink); mask-image: url(/galley-logo.svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/galley-logo.svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .auth-tagline { font-family: var(--serif); font-size: 16px; font-style: italic; color: var(--ink-muted); margin-bottom: 40px; letter-spacing: 0.005em; } .auth-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; background: var(--accent); color: var(--bg-card); border-radius: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; transition: background 120ms ease; min-width: 220px; } .auth-button:hover { background: var(--accent-hover); } .auth-button:disabled { opacity: 0.6; cursor: not-allowed; } .auth-button.secondary { background: transparent; color: var(--ink-soft); border: 1px solid var(--bg-rule); } .auth-button.secondary:hover { background: var(--bg-hover); color: var(--ink); } .auth-google-mark { width: 16px; height: 16px; display: inline-block; } .auth-status { margin-top: 28px; padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--bg-rule); border-radius: 6px; text-align: left; font-size: 13px; color: var(--ink-soft); line-height: 1.5; } .auth-status .label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); font-weight: 600; margin-bottom: 6px; } .auth-status .email { font-family: var(--serif); font-size: 15px; color: var(--ink); font-style: italic; margin-bottom: 4px; word-break: break-all; } .auth-error { margin-top: 16px; font-size: 12px; color: var(--accent); font-style: italic; font-family: var(--serif); } .auth-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; align-items: center; } .auth-loading { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; } /* ============================================================ APP SHELL ============================================================ */ .app { display: flex; height: 100vh; width: 100vw; } .app[hidden] { display: none; } /* ============================================================ SIDE NAV ============================================================ */ .nav { width: var(--nav-width); flex-shrink: 0; background: var(--bg); border-right: 1px solid var(--bg-rule); display: flex; flex-direction: column; /* No top padding — the brand wordmark's own 80px shelf (see .nav-brand) IS the page-header zone, and we want its bottom edge to sit at exactly 80px from the viewport top so the first nav item's highlight box aligns with the content column's search field on the right. No bottom padding either; the user block pins itself with margin-top: auto and any extra padding here would leave a dead strip under it. */ padding: 0; } /* Nav-side wordmark — mirrors the auth-screen brand styling so the logo reads the same in both places. Lives inside an 80px shelf at the top of the side nav, vertically centered, so its text baseline lines up horizontally with the page title in the content area. The text + underline live in an inner span (.nav- brand-text) so the underline tracks the text baseline rather than the shelf bottom. */ .nav-brand { display: flex; align-items: center; align-self: stretch; min-height: var(--page-header-height); padding: 0 20px; margin: 0; } /* Wordmark variant — shown at the default expanded nav width. Mask-image so `background-color: var(--ink)` colors the logo to match each theme's body-text color exactly. */ .nav-brand-text { display: block; width: 140px; height: 51px; /* matches wordmark aspect ratio (~2.749:1) */ background-color: var(--ink); mask-image: url(/galley-logo.svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/galley-logo.svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } /* Glyph variant — shown only when the nav collapses to icon-only (≤800px viewport, see the @media block further down). Default is hidden; the responsive rule flips display. Without the explicit `display: none`, the base `display: block` would override the element's `hidden` attribute. Uses mask-image with the favicon glyph SVG so its color also tracks --ink. */ .nav-brand-glyph { display: none; width: 32px; height: 32px; margin: 0 auto; background-color: var(--ink); mask-image: url(/galley-glyph.svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/galley-glyph.svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } /* The dark-mode filter-invert rule was retired — mask-image + `background-color: var(--ink)` handles per-theme coloring exactly across every theme, including Sepia (deep coffee brown on manila), Forest (warm cream on green), Oxblood (warm bone on wine), Midnight (warm cream on indigo). */ /* ============================================================ Dev environment brand override. When the page is served from a dev hostname (localhost, 127.0.0.1, *.local, or galley-dev-rocliterary.*), the inline