/* ============================================================================= paper-theme.css Sitewide theme system. Two palettes ("paper" light, "monitor" dark) share a single typographic structure. Toggle persists via localStorage under `slate-dashboard-theme`. Default is paper. The early-load script in header.ejs sets before paint so there's no flash on reload. Page-specific styles live inline in each page's .ejs file. ============================================================================= */ /* ── Palette ─────────────────────────────────────────────────────────── */ :root[data-theme="paper"] { --paper-ink: #1a1814; --paper-ink-soft: #5a4f3a; --paper-ink-mute: #8a7c5e; --paper-rule: rgba(26, 24, 20, .12); --paper-rule-soft: rgba(26, 24, 20, .07); --paper-gold: #b8852f; --paper-red: #b8443d; --paper-bg: #f1ead8; --paper-bg-soft: #ebe4d0; } :root[data-theme="monitor"] { --paper-ink: #ece2c8; --paper-ink-soft: #a89c80; --paper-ink-mute: #6e644d; --paper-rule: rgba(236, 226, 200, .14); --paper-rule-soft: rgba(236, 226, 200, .07); --paper-gold: #e1ae65; --paper-red: #d96860; --paper-bg: #0d0b08; --paper-bg-soft: #15110b; } /* ── Body + container ────────────────────────────────────────────────── */ :root[data-theme] body { background: var(--paper-bg); transition: background .25s ease, color .25s ease; } :root[data-theme] main.container { color: var(--paper-ink); } /* ── Nav recoloring ──────────────────────────────────────────────────── */ :root[data-theme] .slate-nav { border-bottom-color: var(--paper-rule); } :root[data-theme] .slate-nav-link { color: var(--paper-ink-mute); } :root[data-theme] .slate-nav-link:hover, :root[data-theme] .slate-nav-link.is-active { color: var(--paper-ink); } :root[data-theme] .slate-nav-link::after { background: var(--paper-gold); } :root[data-theme] .slate-brand-wordmark-text { color: var(--paper-ink); text-shadow: none; } :root[data-theme] .slate-nav-feedback { color: var(--paper-ink-mute) !important; border-color: var(--paper-rule) !important; } :root[data-theme] .slate-nav-feedback:hover { color: var(--paper-ink) !important; border-color: var(--paper-gold) !important; } :root[data-theme] .slate-nav-email { color: var(--paper-ink-soft) !important; } :root[data-theme] .slate-nav-email:hover { color: var(--paper-ink) !important; } :root[data-theme] .slate-nav-logout { color: var(--paper-ink-mute); } :root[data-theme] .slate-nav-logout:hover { color: var(--paper-ink); } :root[data-theme] .slate-nav-user-dot { background: #4f9d6b; /* keep the "online" green in both modes */ } /* ── Footer (quote line) ─────────────────────────────────────────────── */ :root[data-theme] footer, :root[data-theme] .slate-footer-quote, :root[data-theme] .slate-footer { color: var(--paper-ink-mute); } :root[data-theme="paper"] .slate-footer-quote-attribution { color: var(--paper-ink-mute); } /* ── Theme toggle (used in nav and dashboard hero) ───────────────────── */ .paper-theme-toggle { background: none; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .5rem; } .paper-theme-toggle-opt { color: var(--paper-ink-mute); transition: color .15s ease; } .paper-theme-toggle-opt.is-active { color: var(--paper-gold); } .paper-theme-toggle-sep { color: var(--paper-ink-mute); opacity: .5; } .paper-theme-toggle:hover .paper-theme-toggle-opt:not(.is-active) { color: var(--paper-ink-soft); } /* ── Shared typographic primitives (used across paper-themed pages) ──── */ .paper-greeting, .paper-title { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; line-height: .88; letter-spacing: -.015em; margin: 0; color: var(--paper-ink); text-transform: none; } .paper-greeting { font-size: clamp(56px, 8.5vw, 112px); } .paper-title { font-size: clamp(40px, 5.5vw, 72px); } .paper-sub { font-family: 'cormorant', 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.3; color: var(--paper-ink-soft); margin: 1rem 0 0; } /* Morning brief — natural-language summary that replaces the generic "Here's what's on your plate" subtitle when there's anything notable to say. Reads like a written briefing: serif italic, slightly larger line-height for breath. Max-width clamps it to a comfortable column. */ .paper-brief { font-family: 'cormorant', 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.4; color: var(--paper-ink); margin: 1.25rem 0 0; max-width: 60ch; } .paper-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink-mute); margin-bottom: 1.5rem; display: flex; align-items: center; gap: .65rem; } .paper-eyebrow-tick { display: inline-block; width: 14px; height: 1px; background: var(--paper-gold); } .paper-eyebrow-spacer { flex: 1; } .paper-rule { margin: 2.5rem 0 2rem; border: 0; border-top: 1px solid var(--paper-gold); opacity: .55; } /* Today strip — at-a-glance metrics at the top of the producer dashboard. Three tiles (two for crew, three when financials toggle is on) linking out to the surface that owns each number. Big number, small label, tiny status word. Matches the paper-card visual language. */ .paper-today-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin: 2rem 0 0; } .paper-today-tile { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.25rem; text-decoration: none; border: 1px solid var(--paper-rule); background: transparent; color: inherit; transition: border-color var(--duration-fast) var(--ease-soft), background var(--duration-fast) var(--ease-soft); } .paper-today-tile:hover { border-color: var(--paper-gold); background: rgba(184, 133, 47, .04); } :root[data-theme="monitor"] .paper-today-tile:hover { background: rgba(225, 174, 101, .04); } .paper-today-tile-static:hover { border-color: var(--paper-rule); background: transparent; cursor: default; } .paper-today-tile-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-ink-mute); } .paper-today-tile-value { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 36px; line-height: 1; color: var(--paper-ink); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .5rem; } .paper-today-tile-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--paper-ink-mute); font-variant-numeric: tabular-nums; } .paper-today-tile-pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-ink-mute); } .paper-today-tile-pct-low { color: var(--paper-ink-mute); } .paper-today-tile-pct-ok { color: var(--paper-ink); } .paper-today-tile-pct-warn { color: var(--paper-gold); } .paper-today-tile-pct-over { color: var(--paper-gold); } .paper-today-tile-pct-cooked { color: var(--paper-red); } .paper-today-tile-breakdown { display: flex; flex-wrap: wrap; gap: .5rem .75rem; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; color: var(--paper-ink-soft); font-variant-numeric: tabular-nums; } /* Recent activity — org-wide news feed in the right column. Each row is a single line with a type-mark, headline, sub-line (client/project), and a relative timestamp on the right. Reads like a streaming log. */ .paper-activity-list { list-style: none; padding: 0; margin: 0; } .paper-activity-item { border-top: 1px solid var(--paper-rule-soft); } .paper-activity-item:first-child { border-top: 0; } .paper-activity-link { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: baseline; gap: .75rem; padding: .75rem 0; text-decoration: none; color: inherit; } .paper-activity-link:hover .paper-activity-headline { color: var(--paper-gold); } .paper-activity-mark { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--paper-ink-mute); text-align: center; line-height: 1.2; } .paper-activity-mark-paid { color: #4f8b56; } .paper-activity-mark-signed { color: var(--paper-gold); } .paper-activity-mark-invoice { color: var(--paper-ink); } .paper-activity-mark-sent { color: var(--paper-gold); } .paper-activity-mark-time { color: var(--paper-ink-soft); } .paper-activity-body { min-width: 0; } .paper-activity-headline { display: block; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--paper-ink); line-height: 1.3; transition: color .15s ease; } .paper-activity-sub { display: block; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--paper-ink-soft); margin-top: .15rem; } .paper-activity-client { font-weight: 600; color: var(--paper-ink); } .paper-activity-sep { color: var(--paper-rule); margin: 0 .25rem; } .paper-activity-ago { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; color: var(--paper-ink-mute); white-space: nowrap; font-variant-numeric: tabular-nums; } .paper-col-link-static { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-ink-mute); } /* Decision queue — the producer's morning triage. One ordered list of items that need a decision today; each row has a mark (type), a reason line, and a primary action button on the right. */ .paper-queue { margin: 2.5rem 0 0; padding: 1.5rem 1.75rem; border: 1px solid var(--paper-gold); background: rgba(184, 133, 47, .03); } :root[data-theme="monitor"] .paper-queue { background: rgba(225, 174, 101, .03); } .paper-queue { padding: 1.25rem 1.75rem; } details.paper-queue[open] { padding: 1.5rem 1.75rem; } .paper-queue-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 !important; padding: 0 !important; cursor: pointer; list-style: none; background: transparent !important; border: 0 !important; border-radius: 0 !important; outline: none; } details.paper-queue[open] > .paper-queue-head { margin-bottom: 1.25rem !important; } .paper-queue-head::-webkit-details-marker { display: none; } .paper-queue-head::marker { content: ''; } .paper-queue-head::after { content: '▸' !important; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--paper-gold); margin-left: .5rem; transition: transform .15s ease; display: inline-block; /* Kill Pico's injected chevron background-image so only our character renders. */ background: none !important; background-image: none !important; width: auto !important; height: auto !important; } details.paper-queue[open] > .paper-queue-head::after { transform: rotate(90deg); } .paper-queue-expand-hint { font-size: 10px; opacity: .6; } details.paper-queue[open] > .paper-queue-head .paper-queue-expand-hint { display: none; } .paper-queue-head-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .paper-queue-headline-nudge { font-family: 'cormorant', 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 15px; color: var(--paper-ink-soft); margin: 0; line-height: 1.3; } .paper-queue-title { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink); margin: 0; } .paper-queue-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink-mute); } .paper-queue-list { list-style: none; padding: 0; margin: 0; } .paper-queue-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--paper-rule-soft); } .paper-queue-item:last-child { border-bottom: 0; } .paper-queue-mark { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 22px; text-align: center; color: var(--paper-ink-mute); } .paper-queue-item-overdue-invoice .paper-queue-mark { color: var(--paper-red); } .paper-queue-item-aging-proposal .paper-queue-mark { color: var(--paper-gold); } .paper-queue-item-deliverable-due .paper-queue-mark { color: var(--paper-ink); } .paper-queue-body { min-width: 0; } .paper-queue-headline { font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .02em; color: var(--paper-ink); margin: 0 0 .15rem; } .paper-queue-sub { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--paper-ink-soft); margin: 0; display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: baseline; } .paper-queue-client { font-weight: 600; color: var(--paper-ink); } .paper-queue-sep { color: var(--paper-rule); } .paper-queue-amount { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--paper-ink); } .paper-queue-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } .paper-queue-action { display: inline-block; padding: .55rem .9rem; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-radius: 0; border: 1px solid; cursor: pointer; text-decoration: none; transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft); } .paper-queue-action-primary { border-color: var(--paper-gold); color: var(--paper-gold); background: transparent; } .paper-queue-action-primary:hover { background: var(--paper-gold); color: var(--paper-bg); } .paper-queue-action-ghost { border-color: var(--paper-rule); color: var(--paper-ink-mute); background: transparent; } .paper-queue-action-ghost:hover { border-color: var(--paper-ink); color: var(--paper-ink); } .paper-queue-resolve-form { margin: 0; display: inline-flex; } .paper-queue-action-snooze { font-size: 10px; letter-spacing: .14em; padding: .5rem .75rem; opacity: .8; } .paper-queue-action-snooze:hover { opacity: 1; } /* Nudge line — small italic prediction stat ("Avg paid in 22d") under the sub-line. Reads as quiet context, not a competing headline. */ .paper-queue-nudge { font-family: 'cormorant', 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 13px; color: var(--paper-ink-soft); margin: .25rem 0 0; } @media (max-width: 720px) { .paper-queue-item { grid-template-columns: 32px minmax(0, 1fr); } .paper-queue-actions { grid-column: 2 / 3; flex-wrap: wrap; } } .paper-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--paper-rule); } .paper-col-title { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-ink); margin: 0; } .paper-col-link { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-ink-mute); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; } .paper-col-link:hover { color: var(--paper-gold); border-bottom-color: var(--paper-gold); } .paper-empty { font-family: 'cormorant', 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; color: var(--paper-ink-soft); padding: 1rem 0; } .paper-empty a { color: var(--paper-gold); text-decoration: none; border-bottom: 1px solid currentColor; } /* ============================================================================= Sitewide chrome overrides — pages still using the global slate-list pattern + admin tiles + contact cards need their colors flipped so text remains readable in paper mode (and stays consistent in monitor mode). These selectors target what each page already renders; no per-page edits needed. ============================================================================= */ /* ── List page titles (CONTACTS., COMPANIES., DEVELOPMENT., etc.) ──── */ :root[data-theme] .slate-list-title, :root[data-theme] .project-title, :root[data-theme] .project-form-title, :root[data-theme] .company-edit-title { color: var(--paper-ink); } :root[data-theme] .slate-list-sub { color: var(--paper-ink-mute); } /* ── List tables (contacts list, projects list, etc.) ────────────── */ :root[data-theme] .slate-list-table thead th { color: var(--paper-ink-mute); border-bottom-color: var(--paper-rule); } :root[data-theme] .slate-list-table tbody td { color: var(--paper-ink); border-bottom-color: var(--paper-rule-soft); } :root[data-theme] .slate-list-table tbody tr:hover { background: rgba(184, 133, 47, .04); } :root[data-theme="monitor"] .slate-list-table tbody tr:hover { background: rgba(225, 174, 101, .04); } :root[data-theme] .slate-list-link { color: var(--paper-ink); } :root[data-theme] .slate-list-link:hover { color: var(--paper-gold); } :root[data-theme] .slate-list-muted { color: var(--paper-ink-mute); } :root[data-theme] .slate-list-muted-link { color: var(--paper-ink-mute); } :root[data-theme] .slate-list-muted-link:hover { color: var(--paper-gold); } :root[data-theme] .slate-list-edit { color: var(--paper-gold); } :root[data-theme] .slate-list-board-link { color: var(--paper-ink-mute); } :root[data-theme] .slate-list-board-link:hover { color: var(--paper-gold); } :root[data-theme] .slate-list-deliverable-count { color: var(--paper-ink-mute); } /* Search box on list pages */ :root[data-theme] .slate-list-search { background: var(--paper-bg-soft); border-color: var(--paper-rule); color: var(--paper-ink); } :root[data-theme] .slate-list-search:focus { border-color: var(--paper-gold); } :root[data-theme] .slate-list-search::placeholder { color: var(--paper-ink-mute); } /* Filter tabs — All / Attached / Unattached pattern */ :root[data-theme] .slate-list-active-note { color: var(--paper-ink-mute); } /* ── Admin tiles (admin home + dashboard tile-grid relics) ─────────── */ :root[data-theme] .admin-tile { background: var(--paper-bg-soft); border-color: var(--paper-rule); color: var(--paper-ink); } :root[data-theme] .admin-tile:hover { border-color: var(--paper-gold); background: rgba(184, 133, 47, .04); } :root[data-theme="monitor"] .admin-tile:hover { background: rgba(225, 174, 101, .03); } :root[data-theme] .admin-tile-title { color: var(--paper-ink); } :root[data-theme] .admin-tile:hover .admin-tile-title { color: var(--paper-gold); } :root[data-theme] .admin-tile-count { color: var(--paper-ink-mute); background: transparent; border-color: var(--paper-rule); } :root[data-theme] .admin-tile-desc { color: var(--paper-ink-soft); } /* ── Contact cards (project doc + company page) ────────────────────── */ :root[data-theme] .project-doc-contact-card, :root[data-theme] .company-contact-card { background: var(--paper-bg-soft); border-color: var(--paper-rule); } :root[data-theme] .project-doc-contact-card:hover, :root[data-theme] .company-contact-card:hover { border-color: var(--paper-ink-mute); } :root[data-theme] .project-doc-contact-card.is-primary { border-color: var(--paper-gold); background: rgba(184, 133, 47, .04); } :root[data-theme="monitor"] .project-doc-contact-card.is-primary { background: rgba(225, 174, 101, .05); } :root[data-theme] .project-doc-contact-name { color: var(--paper-ink); } :root[data-theme] .project-doc-contact-role { color: var(--paper-gold); } :root[data-theme] .project-doc-contact-line { color: var(--paper-ink); } :root[data-theme] .project-doc-contact-link { color: var(--paper-ink); border-bottom-color: var(--paper-rule); } :root[data-theme] .project-doc-contact-link:hover { color: var(--paper-gold); border-bottom-color: var(--paper-gold); } :root[data-theme] .project-doc-contact-star { color: var(--paper-rule); } :root[data-theme] .project-doc-contact-star:hover, :root[data-theme] .project-doc-contact-star.is-on { color: var(--paper-gold); } /* /admin/users — the WHITNEY / NAME header and the permission checkbox labels (Financials, Contact details, Goals & targets) are hardcoded to slate-cream so they vanish on cream paper. Flip to paper-ink. */ :root[data-theme] .admin-user-name { color: var(--paper-ink); } :root[data-theme] .admin-user-email { color: var(--paper-ink-mute); } :root[data-theme] .admin-user-perm-label { color: var(--paper-ink); } :root[data-theme] .admin-user-perm-desc { color: var(--paper-ink-mute); } /* ── Headings inside body content (h2/h3 default to slate-cream) ───── */ :root[data-theme] h1, :root[data-theme] h2, :root[data-theme] h3, :root[data-theme] h4, :root[data-theme] h5, :root[data-theme] h6 { color: var(--paper-ink); } /* ── Generic muted text used in many places ─────────────────────────── */ :root[data-theme] main.container small, :root[data-theme] main.container .muted { color: var(--paper-ink-mute); } /* ============================================================================= Nav cramping fix — adding the toggle pushed STATUS BOARD onto two lines. Tighten link padding sitewide and keep labels one-line. ============================================================================= */ .slate-nav-link { padding: 0 .65rem !important; white-space: nowrap; } .slate-nav-theme-toggle { font-size: 10.5px; letter-spacing: .12em; gap: .35rem; } @media (max-width: 1200px) { .slate-nav-link { padding: 0 .5rem !important; font-size: 11px; } .slate-nav-theme-toggle { font-size: 10px; } } /* ============================================================================= Unattached delete (×) — drop the box, leave just the glyph. ============================================================================= */ :root[data-theme] .unattached-delete { background: transparent; border: 0; color: var(--paper-ink-mute); width: auto; height: auto; padding: .25rem .5rem; } :root[data-theme] .unattached-delete:hover { color: var(--paper-red); border-color: transparent; } /* ============================================================================= Status Board (/board) — same post-table chrome as the project doc's deliverables list, but lives at the page root, not inside .project-doc-page. Sitewide overrides so the page reads in both modes. ============================================================================= */ :root[data-theme] .post-cell { color: var(--paper-ink); } :root[data-theme] .post-row { border-bottom-color: var(--paper-rule-soft); cursor: pointer; } :root[data-theme] .post-row:hover { background: rgba(184, 133, 47, .05); } :root[data-theme="monitor"] .post-row:hover { background: rgba(225, 174, 101, .04); } /* Expand row — base style is rgba(0,0,0,.28) which on cream paper renders as a muddy olive. Flip to a tinted paper surface, and remap the labels inside (Notes / External links / Show on Board) so they read on cream. */ :root[data-theme="paper"] .post-row-expand { background: var(--paper-bg-soft); } :root[data-theme="monitor"] .post-row-expand { background: rgba(245, 239, 227, .03); } :root[data-theme] .post-notes-editor-label, :root[data-theme] .post-links-editor-label, :root[data-theme] .post-visibility-label { color: var(--paper-ink); } :root[data-theme] .post-notes-editor-hint, :root[data-theme] .post-links-editor-hint, :root[data-theme] .post-visibility-hint { color: var(--paper-ink-mute); } :root[data-theme] .post-visibility-eye { color: var(--paper-ink-mute); } :root[data-theme] .post-visibility-eye:hover { color: var(--paper-gold); } :root[data-theme] .post-visibility-eye.is-hidden { color: var(--paper-gold); } :root[data-theme] .post-visibility-eye.is-hidden:hover { color: var(--paper-ink); } /* Priority "!" — rest state was using --slate-line-dark which on cream paper rendered as a dark, near-engaged mark. Soften to a faint paper- rule tone so flagged rows can pop visually. Flagged + hover must beat our own rest override on specificity. */ :root[data-theme="paper"] .post-row-priority-toggle { color: var(--paper-rule); } :root[data-theme="paper"] .post-row-priority-toggle:hover { color: #b8443d; } :root[data-theme="paper"] .post-row-priority-toggle.is-priority { color: #ff5a4a; text-shadow: 0 0 6px rgba(255, 90, 74, .35); } /* DONE collapsible — Pico's default
/ chrome ships with a white card background that clashes hard against cream paper. Kill the surface; we already render our own. */ :root[data-theme] .post-section-done, :root[data-theme] .post-section-done > summary { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; } :root[data-theme] .post-table thead th { color: var(--paper-ink-mute); border-bottom-color: var(--paper-rule); background: transparent; } /* Project · client kicker — the small uppercase line above the deliverable name. Used to be gold-on-dark; in paper mode the gold doesn't have enough contrast against cream, so flip to deeper ink. */ :root[data-theme="paper"] .post-cell-project-primary { color: var(--paper-ink); } :root[data-theme="monitor"] .post-cell-project-primary { color: var(--paper-gold); } /* Deliverable name input + status note + inline selects on the Status Board need to LOOK like text boxes at rest, not invisible plain text. Subtle paper-bg-soft tint with a thin paper-rule border at rest; stronger paper-rule on hover; gold border + lighter bg on focus. */ :root[data-theme] .post-cell-deliverable-name-input, :root[data-theme] .post-input-textarea, :root[data-theme] .post-input-select { background: var(--paper-bg-soft); color: var(--paper-ink); border: 1px solid var(--paper-rule-soft); } :root[data-theme] .post-cell-deliverable-name-input:hover, :root[data-theme] .post-input-textarea:hover, :root[data-theme] .post-input-select:hover { border-color: var(--paper-rule); } :root[data-theme] .post-cell-deliverable-name-input:focus, :root[data-theme] .post-input-textarea:focus, :root[data-theme] .post-input-select:focus { background: var(--paper-bg); border-color: var(--paper-gold); outline: none; } :root[data-theme] .post-input-textarea::placeholder { color: var(--paper-ink-mute); } /* Filter chips along the top of the board */ :root[data-theme] .post-filter-chip { background: transparent; border-color: var(--paper-rule); color: var(--paper-ink-soft); } :root[data-theme] .post-filter-chip:hover { border-color: var(--paper-gold); color: var(--paper-ink); } :root[data-theme] .post-filter-chip.is-active { background: var(--paper-gold); border-color: var(--paper-gold); color: var(--paper-bg); } /* Section heads (ACTIVE / WAITING / DONE) */ :root[data-theme] .post-section-title { color: var(--paper-ink); border-bottom-color: var(--paper-rule); } :root[data-theme] .post-section-title-done { color: var(--paper-ink-mute); border-bottom-color: var(--paper-rule); } :root[data-theme] .post-section-hint, :root[data-theme] .post-section-count { color: var(--paper-ink-mute); } :root[data-theme] .post-empty { color: var(--paper-ink-mute); } /* "Confrère" assignment pill — the rounded select chip */ :root[data-theme] .post-cell-editor select, :root[data-theme] .post-cell-editor-unassigned select { color: var(--paper-ink); } /* Date cells — the columns showing rough / delivery / last-contact dates. The display span had `color: slate-cream` hardcoded, washing out on paper. Urgency backgrounds (red/orange/yellow) stay; just flip the text inside. */ :root[data-theme] .post-date-display { color: var(--paper-ink); } :root[data-theme="paper"] .post-cell-date.post-cell-red .post-date-display { color: #5c1f1f; /* deep red ink so the date reads against the pink tint */ font-weight: 600; } /* Confrère pill — assigned chip. The select has `color: slate-cream` so the name inside is invisible on cream. */ :root[data-theme] .post-cell-editor .post-input-select { color: var(--paper-ink); border-color: var(--paper-rule); } :root[data-theme] .post-cell-editor .post-input-select:hover { border-color: var(--paper-ink-mute); } :root[data-theme] .post-cell-editor .post-input-select:focus { border-color: var(--paper-gold); background: var(--paper-bg-soft); } :root[data-theme="paper"] .post-cell-editor-unassigned .post-input-select { color: #8c2d27; /* readable red on cream */ background: rgba(184, 68, 61, .08); border-color: rgba(184, 68, 61, .35); } /* Refresh button + state badges keep their existing color logic since they encode workflow state (green = active, gold = waiting, etc.). */ /* ============================================================================= Status & invoice pills — phase-tinted, paper-friendly. The phase color tokens already use blue / lavender / orange / gold / green and read on both palettes; we only need to deepen the muted defaults so they aren't washed out on cream, and re-tint the gold to paper-gold in light mode. ============================================================================= */ :root[data-theme] .status { color: var(--paper-ink-mute); } :root[data-theme="paper"] .status-development { color: #2f5c9e; } :root[data-theme="paper"] .status-pre_production { color: #6f4ea8; } :root[data-theme="paper"] .status-production { color: #b15f2f; } :root[data-theme="paper"] .status-post_production { color: var(--paper-gold); } :root[data-theme="paper"] .status-delivered { color: #4f8b56; } :root[data-theme="paper"] .status-archived { color: var(--paper-ink-mute); opacity: .6; } :root[data-theme="paper"] .status-paused { color: #b07a2a; } :root[data-theme="paper"] .status-lost { color: var(--paper-red); } :root[data-theme="paper"] .invoices-status-draft { color: var(--paper-ink-mute); } :root[data-theme="paper"] .invoices-status-sent { color: var(--paper-gold); } :root[data-theme="paper"] .invoices-status-paid { color: #4f8b56; } :root[data-theme="paper"] .invoices-status-partial { color: var(--paper-gold); } :root[data-theme="paper"] .invoices-status-void { color: var(--paper-ink-mute); opacity: .55; } :root[data-theme="paper"] .invoices-status-overdue { color: var(--paper-red); } /* ============================================================================= Invoices list (/invoices) — summary tiles + table + filter tabs ============================================================================= */ :root[data-theme] .invoices-list-summary { gap: 1.5rem; } /* ============================================================================= Summary tiles are clickable buttons — reveal a breakdown panel below showing the contributing rows. Tile chrome stays minimal; active state gets a gold underline so it's clear which panel you're looking at. ============================================================================= */ button.invoices-list-summary-cell { background: transparent; border: 0; text-align: left; padding: 0; cursor: pointer; color: inherit; font: inherit; display: flex; flex-direction: column; gap: .35rem; position: relative; transition: opacity .15s ease; } button.invoices-list-summary-cell:hover { opacity: .85; } button.invoices-list-summary-cell::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.6rem; height: 2px; background: transparent; transition: background .15s ease; } button.invoices-list-summary-cell.is-active::after { background: var(--paper-gold); } button.invoices-list-summary-cell.is-active { opacity: 1; } /* Breakdown panel — sits between the summary row and the main table. Compact list of contributing rows + total in the header. */ .invoices-breakdown-panel { margin: 0 0 1.75rem; padding: 1.25rem 0 0; border-top: 1px solid var(--paper-rule); } .invoices-breakdown-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; flex-wrap: wrap; } .invoices-breakdown-title { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-ink); margin: 0; } .invoices-breakdown-total { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--paper-ink-mute); letter-spacing: .04em; } .invoices-breakdown-empty { font-family: 'cormorant', 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 16px; color: var(--paper-ink-mute); padding: .5rem 0; } .invoices-breakdown-table { width: 100%; border-collapse: collapse; font-size: 13px; } .invoices-breakdown-table thead th { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--paper-ink-mute); text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--paper-rule); } .invoices-breakdown-table tbody td { padding: .55rem .5rem; color: var(--paper-ink); border-bottom: 1px solid var(--paper-rule-soft); } .invoices-breakdown-table tbody tr:last-child td { border-bottom: 0; } .invoices-breakdown-num { text-align: right; font-variant-numeric: tabular-nums; } .invoices-breakdown-muted { color: var(--paper-ink-mute); } .invoices-breakdown-link { color: var(--paper-ink); text-decoration: none; border-bottom: 1px dotted var(--paper-rule); } .invoices-breakdown-link:hover { color: var(--paper-gold); border-bottom-color: var(--paper-gold); } .invoices-breakdown-overflow { font-size: 12px; color: var(--paper-ink-mute); font-style: italic; margin: .75rem 0 0; } :root[data-theme] .invoices-list-summary-label { color: var(--paper-ink-mute); } :root[data-theme] .invoices-list-summary-value { color: var(--paper-ink); } :root[data-theme] .invoices-list-summary-value-signed, :root[data-theme] .invoices-list-summary-value-tbi { color: var(--paper-ink); } :root[data-theme="paper"] .invoices-list-summary-value-collected { color: #4f8b56; } :root[data-theme="paper"] .invoices-list-summary-value-outstanding { color: var(--paper-gold); } :root[data-theme] .invoices-list-table thead th { color: var(--paper-ink-mute); border-bottom-color: var(--paper-rule); } :root[data-theme] .invoices-list-table tbody td { color: var(--paper-ink); border-bottom-color: var(--paper-rule-soft); } :root[data-theme] .invoices-list-table tbody tr:hover { background: rgba(184, 133, 47, .04); } :root[data-theme="monitor"] .invoices-list-table tbody tr:hover { background: rgba(225, 174, 101, .04); } :root[data-theme] .invoices-list-sort-link { color: var(--paper-ink-mute); } :root[data-theme] .invoices-list-sort-link:hover, :root[data-theme] .invoices-list-sort-link.is-active { color: var(--paper-ink); } :root[data-theme] .invoices-year-select { background: var(--paper-bg-soft); border-color: var(--paper-rule); color: var(--paper-ink); } /* Contacts/Invoices filter tabs (All / Attached / Unattached etc.) */ :root[data-theme] .contacts-filter-tabs { border-bottom-color: var(--paper-rule); } :root[data-theme] .contacts-filter-tab { color: var(--paper-ink-mute); } :root[data-theme] .contacts-filter-tab:hover { color: var(--paper-ink); } :root[data-theme] .contacts-filter-tab.is-active { color: var(--paper-gold); border-bottom-color: var(--paper-gold); } :root[data-theme] .contacts-filter-count { color: var(--paper-ink-mute); } :root[data-theme] .contacts-filter-tab.is-active .contacts-filter-count { color: var(--paper-ink); } /* ============================================================================= Estimator (/projects/:id/estimate) — spreadsheet-dense grid. Keep the layout untouched; only flip colors so cells, inputs, and totals read on paper. Most rules already use slate-cream which becomes paper-ink via the var rebinding below. ============================================================================= */ :root[data-theme] .estimator-page, :root[data-theme] .estimator-page * { color: var(--paper-ink); } :root[data-theme] .estimator-page .project-meta, :root[data-theme] .estimator-page .project-meta a { color: var(--paper-ink-mute); } :root[data-theme] .estimator-page .project-meta a:hover { color: var(--paper-ink); } :root[data-theme] .estimator-page .estimator-table thead th, :root[data-theme] .estimator-page .phase-title, :root[data-theme] .estimator-page .phase-title-label { color: var(--paper-ink); border-color: var(--paper-rule); } :root[data-theme] .estimator-page .phase-title-subtotal { color: var(--paper-ink-soft); } :root[data-theme] .estimator-page .estimator-table td, :root[data-theme] .estimator-page .estimator-table tbody tr { border-color: var(--paper-rule-soft); } :root[data-theme] .estimator-page .qty-input, :root[data-theme] .estimator-page .unit-input, :root[data-theme] .estimator-page .unit-display, :root[data-theme] .estimator-page .cell-total { background: transparent; color: var(--paper-ink); border-color: var(--paper-rule); } /* Tier total boxes (green / gold / black) — subtle vertical gradients matching the site's brand gold button gradient (Equator → Tussock, 180deg). Same direction for green and black, lighter top to deeper bottom. Dark ink text on green + gold; cream on black. */ :root[data-theme] .estimator-page .tier-total.tier-green { background: linear-gradient(180deg, #4ea66b 0%, #2f7148 100%) !important; border-color: #2a6741 !important; } :root[data-theme] .estimator-page .tier-total.tier-green .tier-total-label, :root[data-theme] .estimator-page .tier-total.tier-green .tier-total-value { color: #ece2c8 !important; /* site cream — same tone as --paper-ink in monitor mode, warmer than slate-cream */ } :root[data-theme] .estimator-page .tier-total.tier-gold { background: var(--slate-gold-gradient) !important; border-color: var(--slate-gold-deep) !important; } :root[data-theme] .estimator-page .tier-total.tier-gold .tier-total-label, :root[data-theme] .estimator-page .tier-total.tier-gold .tier-total-value { color: #1a1814 !important; /* site ink — same value as --paper-ink in paper mode */ } :root[data-theme] .estimator-page .tier-total.tier-black { background: linear-gradient(180deg, #2a2a2e 0%, #0d0d0f 100%) !important; border-color: #3a3a40 !important; } :root[data-theme] .estimator-page .tier-total.tier-black .tier-total-label, :root[data-theme] .estimator-page .tier-total.tier-black .tier-total-value { color: #ece2c8 !important; /* warmer site cream, matches GREEN tier */ } :root[data-theme] .estimator-page .qty-input:focus, :root[data-theme] .estimator-page .unit-input:focus { border-color: var(--paper-gold); background: var(--paper-bg-soft); } :root[data-theme] .estimator-page .totals-block { background: var(--paper-bg-soft); border-color: var(--paper-rule); } :root[data-theme] .estimator-page .totals-tier-header { color: var(--paper-ink); } :root[data-theme] .estimator-page .totals-segment-row .segment-cell { color: var(--paper-ink); } /* Per-phase cards — base styles.css gives `.phase-block` a `--slate-ink-2` background that doesn't flip with theme. In paper mode the whole PRE-PRODUCTION / PRODUCTION BASE etc. panel goes dark, swallowing the dark-ink text. Flip to a soft paper surface. */ :root[data-theme] .estimator-page .phase-block { background: var(--paper-bg-soft); border: 1px solid var(--paper-rule); } :root[data-theme] .estimator-page .phase-title, :root[data-theme] .estimator-page .phase-title-label { color: var(--paper-ink); border-bottom-color: var(--paper-rule); } :root[data-theme] .estimator-page .phase-title::before { color: var(--paper-gold); } :root[data-theme] .estimator-page .estimator-table thead th { color: var(--paper-ink-mute); background: transparent; } /* Zero-qty template lines are dimmed via opacity in the base rule. In paper mode the default --pico-muted-color (white-on-dark) doesn't work — re-anchor to an ink tone so the dimmed-by-opacity text still reads against cream. */ :root[data-theme="paper"] .estimator-page .line-row.template-line:not(.line-active) .cell-label, :root[data-theme="paper"] .estimator-page .line-row.template-line:not(.line-active) .unit-display, :root[data-theme="paper"] .estimator-page .line-row.template-line:not(.line-active) .cell-total { color: var(--paper-ink-soft); } :root[data-theme] .estimator-page .clear-section, :root[data-theme] .estimator-page .clear-section-link { color: var(--paper-ink-mute); } /* ============================================================================= Proposal Builder (/projects/:id/proposal) ============================================================================= */ :root[data-theme] .proposal-builder-wide { color: var(--paper-ink); } :root[data-theme] .proposal-config, :root[data-theme] .proposal-scopes-panel { background: var(--paper-bg-soft); border-color: var(--paper-rule); color: var(--paper-ink); } :root[data-theme] .proposal-config-section { border-bottom-color: var(--paper-rule); } :root[data-theme] .proposal-config textarea, :root[data-theme] .proposal-config input[type="text"], :root[data-theme] .proposal-config select { background: var(--paper-bg); border-color: var(--paper-rule); color: var(--paper-ink); } :root[data-theme] .proposal-config textarea:focus, :root[data-theme] .proposal-config input:focus, :root[data-theme] .proposal-config select:focus { border-color: var(--paper-gold); } :root[data-theme] .proposal-section { color: var(--paper-ink); } :root[data-theme] .proposal-section-title { color: var(--paper-ink); } :root[data-theme] .proposal-pillar { background: var(--paper-bg); border-color: var(--paper-rule); } :root[data-theme] .proposal-pillar-label { color: var(--paper-ink); } :root[data-theme] .proposal-scopes-panel-head { border-bottom-color: var(--paper-rule); } /* Radio-card chrome used for proposal config */ :root[data-theme] .radio-card { background: var(--paper-bg); border-color: var(--paper-rule); color: var(--paper-ink); } :root[data-theme] .radio-card.is-selected, :root[data-theme] .radio-card:has(input:checked) { border-color: var(--paper-gold); background: rgba(184, 133, 47, .06); } /* Accordion sections inside the Proposal Builder. These use `details.config-section` with a dark slate-ink-2 background; flip the whole shell so the cream-input children stop looking floating. */ :root[data-theme] details.config-section { background: var(--paper-bg-soft); border-color: var(--paper-rule); } :root[data-theme] details.config-section > summary { color: var(--paper-ink); } :root[data-theme] details.config-section > summary::before { color: var(--paper-gold); } :root[data-theme] details.config-section[open] > summary { border-bottom-color: var(--paper-rule); } /* Labels + helpers inside the accordion */ :root[data-theme] .config-label { color: var(--paper-ink-mute); } :root[data-theme] .config-optional { color: var(--paper-ink-mute); } :root[data-theme] .config-help { color: var(--paper-ink-mute); } /* The input nested inside `.config-label input` rule was hardcoded. Flip to paper. */ :root[data-theme] .config-label input, :root[data-theme] .config-label textarea, :root[data-theme] .config-label select { background: var(--paper-bg); border-color: var(--paper-rule); color: var(--paper-ink); } :root[data-theme] .config-label input:focus, :root[data-theme] .config-label textarea:focus, :root[data-theme] .config-label select:focus { border-color: var(--paper-gold); outline: none; } /* Add-ons editor rows (scope line items in the proposal builder) */ :root[data-theme] .addons-row input { background: var(--paper-bg); border-color: var(--paper-rule); color: var(--paper-ink); } :root[data-theme] .addons-row input:focus { border-color: var(--paper-gold); } :root[data-theme] .addons-row-remove { color: var(--paper-ink-mute); } :root[data-theme] .addons-row-remove:hover { color: var(--paper-red); border-color: var(--paper-rule); } /* Checkbox-card picker (team, case studies, testimonials) */ :root[data-theme] .checkbox-card { background: var(--paper-bg); border-color: var(--paper-rule); color: var(--paper-ink); } :root[data-theme] .checkbox-card:has(input:checked) { border-color: var(--paper-gold); background: rgba(184, 133, 47, .06); } /* Pillar library row inside the North Star & Pillars accordion */ :root[data-theme] .pillar-library-select, :root[data-theme] .pillar-row input, :root[data-theme] .pillar-row textarea { background: var(--paper-bg); border-color: var(--paper-rule); color: var(--paper-ink); } /* Invoice row inline links — separate classes from .slate-list-link, so needed their own overrides. */ :root[data-theme] .invoices-list-number-link, :root[data-theme] .invoices-list-project-link { color: var(--paper-ink); border-bottom-color: var(--paper-rule); } :root[data-theme] .invoices-list-number-link:hover, :root[data-theme] .invoices-list-project-link:hover { color: var(--paper-gold); border-bottom-color: var(--paper-gold); } :root[data-theme] .invoices-list-empty { color: var(--paper-ink-mute); } :root[data-theme] .invoices-list-cap-note { color: var(--paper-ink-mute); } :root[data-theme] .invoices-list-row:hover td { background: rgba(184, 133, 47, .05) !important; } :root[data-theme="monitor"] .invoices-list-row:hover td { background: rgba(245, 239, 227, .03) !important; } /* Trix rich-text editor — toolbar + editor surface were hardcoded dark. Both flip together. The toolbar SVG masks are color-inverted from the original (designed for a dark bg), so we re-invert them when on paper so the icons appear dark. */ :root[data-theme] trix-toolbar { background: var(--paper-bg-soft); border-color: var(--paper-rule); } :root[data-theme] trix-toolbar .trix-button { color: var(--paper-ink); } :root[data-theme="paper"] trix-toolbar .trix-button::before { filter: brightness(.1); /* the original filter assumed dark bg; invert tone */ } :root[data-theme] trix-toolbar .trix-button:hover { background: rgba(184, 133, 47, .08); } :root[data-theme] trix-toolbar .trix-button.trix-active { background: rgba(184, 133, 47, .12); color: var(--paper-gold); } :root[data-theme="paper"] trix-toolbar .trix-button.trix-active::before { filter: invert(58%) sepia(38%) saturate(550%) hue-rotate(5deg) brightness(95%); } :root[data-theme] trix-toolbar .trix-dialog { background: var(--paper-bg-soft); border-color: var(--paper-rule); color: var(--paper-ink); } :root[data-theme] trix-toolbar .trix-input { background: var(--paper-bg); color: var(--paper-ink); border-color: var(--paper-rule); } :root[data-theme] trix-toolbar .trix-dialog__link-fields .trix-button { background: var(--paper-gold); color: var(--paper-bg); } :root[data-theme] trix-editor, :root[data-theme] trix-editor.rich-trix { background: var(--paper-bg); border-color: var(--paper-rule); color: var(--paper-ink) !important; } :root[data-theme] trix-editor:focus, :root[data-theme] trix-editor.rich-trix:focus { border-color: var(--paper-gold); } :root[data-theme] trix-editor[placeholder]:empty::before { color: var(--paper-ink-mute); } /* Trix's base styles.css forces `strong` inside .rich-trix to slate-cream for the dark theme. In paper mode that turns labels (HubSpot stage etc.) into invisible cream-on-cream. Flip to paper-ink. */ :root[data-theme="paper"] trix-editor strong, :root[data-theme="paper"] trix-editor.rich-trix strong { color: var(--paper-ink); } /* Trix toolbar icons — SVG masks tinted via filter. The base rule applies an invert that produces cream-on-dark. In paper mode the override at line 875 used `filter: brightness(.1)` which composed badly with the existing invert and washed the icons out. Drop the filter entirely so the masks render in the button's currentColor (paper-ink). */ :root[data-theme="paper"] trix-toolbar .trix-button::before { filter: none; } /* ============================================================================= Development (/development) — pacing hero + needs-attention tiles. The page has a heavy custom design; flip the chrome colors so the same structure reads on paper. Pacing bar fills keep their semantic colors. ============================================================================= */ :root[data-theme] .development-headline { color: var(--paper-ink); } :root[data-theme] .dev-hero-pacing .dev-pacing-amount { color: var(--paper-ink); } :root[data-theme] .dev-hero-pacing .dev-pacing-goal { color: var(--paper-ink-soft); } :root[data-theme] .dev-pacing-goal-edit { color: var(--paper-ink); } :root[data-theme="paper"] .dev-pacing-on { color: var(--paper-ink); } :root[data-theme="paper"] .dev-pacing-ahead { color: #4f8b56; } :root[data-theme="paper"] .dev-pacing-behind { color: var(--paper-red); } :root[data-theme] .dev-pacing-sep { color: var(--paper-ink-mute); } :root[data-theme] .dev-pacing-bar { background: var(--paper-rule-soft); } :root[data-theme] .dev-pacing-bar-fill { background: var(--paper-gold); } :root[data-theme] .dev-hero-stat-label { color: var(--paper-ink-mute); } :root[data-theme] .dev-hero-stat-value { color: var(--paper-ink); } :root[data-theme] .dev-hero-stat-value-empty { color: var(--paper-ink-mute); } :root[data-theme] .dev-hero-stat-meta { color: var(--paper-ink-soft); } :root[data-theme] .dev-hero-stat-meta strong { color: var(--paper-ink); } :root[data-theme="paper"] .dev-hero-stat-signed { color: var(--paper-ink); } :root[data-theme="paper"] .dev-hero-stat-collected { color: #4f8b56; } :root[data-theme="paper"] .dev-hero-stat-outstanding { color: var(--paper-gold); } :root[data-theme="paper"] .dev-hero-stat-tbi { color: var(--paper-ink); } :root[data-theme] .development-section-title { color: var(--paper-ink); border-bottom-color: var(--paper-rule); } :root[data-theme] .dev-hero-attention-empty { color: var(--paper-ink-mute); } /* Needs-attention tiles inside the development hero */ :root[data-theme] .dev-na-tile { background: var(--paper-bg-soft); border-color: var(--paper-rule); color: var(--paper-ink); } :root[data-theme] .dev-na-tile-overdue { border-left: 3px solid var(--paper-red); } :root[data-theme] .dev-na-tile-aging { border-left: 3px solid var(--paper-gold); } :root[data-theme] .dev-na-tile-drafts { border-left: 3px solid rgba(184, 133, 47, .5); } :root[data-theme] .dev-na-tile-inactive { border-left: 3px solid var(--paper-rule); } :root[data-theme] .dev-na-tile-label { color: var(--paper-ink); } :root[data-theme] .dev-na-tile-count { color: var(--paper-ink-mute); } :root[data-theme] .dev-na-list a { color: var(--paper-ink); } :root[data-theme] .dev-na-list a:hover { color: var(--paper-gold); } :root[data-theme] .dev-na-desc { color: var(--paper-ink); } :root[data-theme] .dev-na-age { color: var(--paper-ink-mute); } :root[data-theme] .dev-na-amount { color: var(--paper-ink); } /* Quarterly + projects sections at the bottom of /development */ :root[data-theme] .development-quarterly, :root[data-theme] .development-projects { color: var(--paper-ink); } :root[data-theme] .development-section-head { border-bottom-color: var(--paper-rule); } /* ============================================================================= Generic form controls used across pages — buttons, inputs, selects ============================================================================= */ :root[data-theme] .slate-btn-ghost { background: transparent; border-color: var(--paper-rule); color: var(--paper-ink); } :root[data-theme] .slate-btn-ghost:hover { border-color: var(--paper-gold); color: var(--paper-gold); } :root[data-theme] .slate-form-input, :root[data-theme] main.container input[type="text"], :root[data-theme] main.container input[type="email"], :root[data-theme] main.container input[type="number"], :root[data-theme] main.container input[type="search"], :root[data-theme] main.container select, :root[data-theme] main.container textarea { background: var(--paper-bg-soft); border-color: var(--paper-rule); color: var(--paper-ink); } :root[data-theme] main.container input:focus, :root[data-theme] main.container select:focus, :root[data-theme] main.container textarea:focus { border-color: var(--paper-gold); outline: none; } /* ============================================================================= Project value chip popover — used for both forecast/approve actions AND the new formally-signed update/revert flow. Paper bg, ink text, paper-styled inputs. ============================================================================= */ :root[data-theme] .project-value-popover { background: var(--paper-bg-soft); border-color: var(--paper-rule); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); color: var(--paper-ink); } :root[data-theme="monitor"] .project-value-popover { box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } :root[data-theme] .project-value-forecast-title { color: var(--paper-ink); } :root[data-theme] .project-value-forecast-hint { color: var(--paper-ink-soft); } :root[data-theme] .project-value-forecast-hint strong { color: var(--paper-ink); } :root[data-theme] .project-value-note-field { border-top-color: var(--paper-rule-soft); } :root[data-theme] .project-value-note-label { color: var(--paper-ink-mute); } :root[data-theme] .project-value-note-input, :root[data-theme] .project-value-forecast-custom-field, :root[data-theme] .project-value-budget-input { background: var(--paper-bg) !important; border: 1px solid var(--paper-rule) !important; color: var(--paper-ink) !important; } :root[data-theme] .project-value-note-input:focus, :root[data-theme] .project-value-forecast-custom-field:focus, :root[data-theme] .project-value-budget-input:focus { border-color: var(--paper-gold) !important; outline: none; } :root[data-theme] .project-value-forecast-opt { color: var(--paper-ink); border-color: var(--paper-rule-soft); } :root[data-theme] .project-value-forecast-opt-name { color: var(--paper-ink); } :root[data-theme] .project-value-forecast-opt-amount { color: var(--paper-ink-mute); } :root[data-theme] .project-value-approval-meta { color: var(--paper-ink-mute); } /* Primary action — gold on paper. Ghost actions inherit the global .slate-btn-ghost paper override already in this file. */ :root[data-theme] .project-value-forecast-save.slate-btn-primary { background: var(--paper-gold); border-color: var(--paper-gold); color: var(--paper-bg); } :root[data-theme] .project-value-forecast-save.slate-btn-primary:hover { filter: brightness(1.05); } :root[data-theme] .project-value-forecast-clear { color: var(--paper-ink-mute); border-color: var(--paper-rule); } :root[data-theme] .project-value-forecast-clear:hover { color: var(--paper-red); border-color: var(--paper-red); } /* Project form — retainer checkbox row. Inline label + helper text. */ .project-form-checkbox-field { display: grid; grid-template-columns: 18px 1fr; gap: .65rem; align-items: start; margin: 1.25rem 0 1.25rem; cursor: pointer; } .project-form-checkbox-field input[type="checkbox"] { width: 16px; height: 16px; margin: .2rem 0 0; cursor: pointer; } .project-form-checkbox-field strong { display: block; font-weight: 600; } :root[data-theme] .project-form-checkbox-field strong { color: var(--paper-ink); } /* ============================================================================= /admin/data-integrity — ghost / recoverable signed-project triage ============================================================================= */ .integrity-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 0 0 2rem; padding: 1.25rem 0; border-top: 1px solid var(--paper-rule); border-bottom: 1px solid var(--paper-rule); } @media (max-width: 700px) { .integrity-summary { grid-template-columns: 1fr; } } .integrity-summary-cell { display: flex; flex-direction: column; gap: .35rem; } .integrity-summary-label { font-family: 'Big Shoulders Display', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } :root[data-theme] .integrity-summary-label { color: var(--paper-ink-mute); } .integrity-summary-value { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 38px; line-height: 1; } :root[data-theme="paper"] .integrity-summary-value-bad { color: var(--paper-red); } :root[data-theme="monitor"] .integrity-summary-value-bad { color: var(--paper-red); } :root[data-theme] .integrity-summary-value-warn { color: var(--paper-gold); } .integrity-summary-hint { font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.45; } :root[data-theme] .integrity-summary-hint { color: var(--paper-ink-soft); } :root[data-theme] .integrity-summary-hint strong { color: var(--paper-ink); } .integrity-badge { display: inline-block; font-family: 'Big Shoulders Display', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 2px 7px; border: 1px solid currentColor; } :root[data-theme] .integrity-badge-bad { color: var(--paper-red); } :root[data-theme] .integrity-badge-warn { color: var(--paper-gold); } :root[data-theme="paper"] .integrity-row-ghost td { background: rgba(184, 68, 61, .04); } :root[data-theme="monitor"] .integrity-row-ghost td { background: rgba(217, 104, 96, .05); } .integrity-howto { margin: 2rem 0 0; padding: 1.25rem 1.5rem; border: 1px solid var(--paper-rule); background: var(--paper-bg-soft); } .integrity-howto h3 { font-family: 'Big Shoulders Display', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 .75rem; } :root[data-theme] .integrity-howto h3 { color: var(--paper-ink); } .integrity-howto ol { margin: 0; padding-left: 1.25rem; } .integrity-howto li { margin-bottom: .35rem; font-size: 14px; } :root[data-theme] .integrity-howto li { color: var(--paper-ink); } .integrity-howto code { background: var(--paper-bg); padding: 1px 5px; border-radius: 2px; font-size: 12px; } /* ============================================================================= Projects list — phase filter row + sortable column headers + inactive collapsible stack. Most chrome inherits from .slate-list-table and the Status Board's .post-filter-chip; new pieces are scoped here. ============================================================================= */ /* Plain inline-block flow rather than flex — sidesteps Pico's nav / role=navigation defaults and any inherited justify-content rules that were spreading the chips across the row on wider viewports. */ .projects-list-filters { display: block; margin: 0 0 1rem; line-height: 2; /* gives chips breathing room when they wrap */ } .projects-list-filters > * { display: inline-block; vertical-align: middle; margin-right: .5rem; } .projects-list-filters-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-right: .65rem; } :root[data-theme] .projects-list-filters-label { color: var(--paper-ink-mute); } /* Sortable column headers — link wraps the th text; active column gets a gold underline, arrow appended in the template. */ .projects-list-sort { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; font: inherit; cursor: pointer; } .projects-list-sort:hover { color: var(--slate-cream); } .projects-list-sort.is-active { color: var(--slate-gold); border-bottom-color: var(--slate-gold); } :root[data-theme] .projects-list-sort:hover { color: var(--paper-ink); } :root[data-theme] .projects-list-sort.is-active { color: var(--paper-gold); border-bottom-color: var(--paper-gold); } /* Inactive (paused / lost / archived) collapsible stack. Same shape as the Feedback page's "Done" pile. */ .projects-list-inactive { margin: 2.5rem 0 0; border-top: 1px solid var(--slate-line-dark); padding-top: 1.25rem; } :root[data-theme] .projects-list-inactive { border-top-color: var(--paper-rule); } .projects-list-inactive-summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .6rem; padding: .25rem 0; user-select: none; font-family: var(--pico-font-family-display); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pico-muted-color); } :root[data-theme] .projects-list-inactive-summary { color: var(--paper-ink-mute); } .projects-list-inactive-summary::-webkit-details-marker { display: none; } .projects-list-inactive-summary::before { content: '▸'; color: var(--slate-gold); opacity: .65; font-size: 10px; transition: transform .15s ease; } :root[data-theme] .projects-list-inactive-summary::before { color: var(--paper-gold); } .projects-list-inactive[open] > .projects-list-inactive-summary::before { transform: rotate(90deg); } .projects-list-inactive-label { color: inherit; } .projects-list-inactive-hint { font-family: var(--pico-font-family); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .65; margin-left: .35rem; } .projects-list-inactive[open] > .projects-list-inactive-summary .projects-list-inactive-hint { display: none; } .projects-list-inactive-table-wrap { margin-top: 1rem; opacity: .8; } .projects-list-inactive-table-wrap:hover { opacity: 1; } /* ============================================================================= Feedback form (/feedback) — the compose box was still rendering with a dark background while the rest of the page is paper-themed. ============================================================================= */ :root[data-theme] .feedback-form-v2 { background: var(--paper-bg-soft); border-color: var(--paper-rule); } :root[data-theme] .feedback-form-attribution { color: var(--paper-ink-mute); } :root[data-theme] .feedback-form-attribution strong { color: var(--paper-ink); } :root[data-theme] .feedback-form-title-input, :root[data-theme] .feedback-form-kind-select, :root[data-theme] .feedback-form-body-input { background: var(--paper-bg) !important; border-color: var(--paper-rule) !important; color: var(--paper-ink) !important; } :root[data-theme] .feedback-form-title-input:focus, :root[data-theme] .feedback-form-kind-select:focus, :root[data-theme] .feedback-form-body-input:focus { border-color: var(--paper-gold) !important; outline: none; } :root[data-theme] .feedback-form-title-input::placeholder, :root[data-theme] .feedback-form-body-input::placeholder { color: var(--paper-ink-mute); } /* The select chevron SVG is hardcoded gray; in paper mode it'd disappear on cream, so swap to an ink-toned arrow. */ :root[data-theme="paper"] .feedback-form-kind-select { background-image: url("data:image/svg+xml;utf8,"); } /* ============================================================================= /development — additional paper-theme overrides for the parts below the hero (meta line, collapsible quarterly grid, projects table, view tabs). These were defaulting to slate-cream and reading as white-on- cream until covered here. ============================================================================= */ :root[data-theme] .dev-hero-meta { color: var(--paper-ink-soft); } :root[data-theme] .dev-hero-meta strong { color: var(--paper-ink); } :root[data-theme] .dev-hero-meta-sep { color: var(--paper-rule); } /* Collapsible quarterly trajectory section */ :root[data-theme] .dev-collapsible > summary { color: var(--paper-ink); } :root[data-theme] .dev-collapsible > summary:hover { color: var(--paper-gold); } :root[data-theme] .dev-collapsible[open] > summary { color: var(--paper-ink); } :root[data-theme] .dev-collapsible > summary::after { color: var(--paper-gold); } :root[data-theme] .development-quarterly-table th, :root[data-theme] .development-quarterly-table td { color: var(--paper-ink); } :root[data-theme] .development-quarterly-label { color: var(--paper-ink); } :root[data-theme="paper"] .development-quarterly-collectedCents td, :root[data-theme="paper"] .development-quarterly-collectedCents .development-quarterly-label { color: #4f8b56; } :root[data-theme] .development-quarterly-table th.is-current-quarter, :root[data-theme] .development-quarterly-table td.is-current-quarter { background: rgba(184, 133, 47, .08); } :root[data-theme="monitor"] .development-quarterly-table th.is-current-quarter, :root[data-theme="monitor"] .development-quarterly-table td.is-current-quarter { background: rgba(225, 174, 101, .06); } :root[data-theme] .development-quarterly-unscheduled { color: var(--paper-ink-soft); } :root[data-theme] .development-quarterly-unscheduled strong { color: var(--paper-gold); } /* Projects breakdown table at the bottom */ :root[data-theme] .development-projects-table th { color: var(--paper-ink-mute); } :root[data-theme] .development-projects-table td { color: var(--paper-ink); } :root[data-theme="paper"] .development-projects-collected { color: #4f8b56; } /* View switcher tabs (By Project / By Client) */ :root[data-theme] .development-view-tab { color: var(--paper-ink-mute); } :root[data-theme] .development-view-tab:hover { color: var(--paper-ink); } :root[data-theme] .development-view-tab.is-active { color: var(--paper-gold); border-bottom-color: var(--paper-gold); } /* Top rule between the pacing block and stats row needs paper-rule. */ :root[data-theme] .dev-hero-stats { border-top-color: var(--paper-rule); } /* Pacing bar background */ :root[data-theme] .dev-pacing-bar { background: var(--paper-rule-soft); } :root[data-theme="paper"] .dev-pacing-bar-mark { background: var(--paper-ink); } /* Project edit form — secondary clients fieldset. Stacked rows with four columns each: company / role / notes / remove. Add button below. */ .project-form-secondaries { border: 0; padding: 0; margin: 1.25rem 0; } .project-form-secondaries legend { padding: 0; } .project-form-secondary-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.5fr) 32px; gap: .55rem; margin-bottom: .55rem; align-items: center; } @media (max-width: 700px) { .project-form-secondary-row { grid-template-columns: 1fr 32px; grid-template-rows: auto auto auto; } .project-form-secondary-row > input[type="text"] { grid-column: 1 / -1; } } .project-form-secondary-remove { background: transparent; border: 1px solid var(--paper-rule); color: var(--paper-ink-mute); cursor: pointer; width: 32px; height: 32px; padding: 0; font-size: 16px; line-height: 1; } .project-form-secondary-remove:hover { color: var(--paper-red); border-color: var(--paper-red); } .project-form-secondary-add { margin-top: .35rem; } /* Contacts panel — group header for secondary-company contact stacks. Renders between the primary group and each secondary group. */ .project-doc-contact-group-head { display: flex; align-items: baseline; gap: .35rem; margin: 1.5rem 0 .65rem; padding-top: 1rem; border-top: 1px solid var(--paper-rule-soft); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; } .project-doc-contact-group-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .project-doc-contact-group-role { text-transform: lowercase; font-style: italic; color: var(--paper-ink-mute); } .project-doc-contact-group-name { color: var(--paper-ink); text-decoration: none; border-bottom: 1px dotted var(--paper-rule); } .project-doc-contact-group-name:hover { color: var(--paper-gold); border-bottom-color: var(--paper-gold); } .project-doc-contact-group-sep { opacity: .5; } /* Company-edit financial-glance tiles — Signed value, Active projects, Proposals. Default fill is --slate-cream which is the paper background, so the number vanishes. Flip to --paper-ink in paper mode. */ :root[data-theme] .company-fin-value { color: var(--paper-ink); } :root[data-theme] .company-fin-label { color: var(--paper-ink-mute); } :root[data-theme] .company-fin-sub { color: var(--paper-ink-mute); } /* Recent invoices list — link color is --slate-cream which vanishes on paper. Project description + amount inherit it. Override to ink. */ :root[data-theme] .company-recent-invoice-link { color: var(--paper-ink); } :root[data-theme] .company-recent-invoice-num, :root[data-theme] .company-recent-invoice-date { color: var(--paper-ink-mute); } :root[data-theme] .company-recent-invoice-link:hover .company-recent-invoice-desc { color: var(--paper-gold); } /* Invoice detail panels — Details + Payments cards on the draft/sent invoice page. Defaults are dark (slate-ink-2 fill, slate-cream type) which all vanish on paper. Flip the whole stack to paper-card coloring. Inputs inside (Amount, Method, Received) flip too. */ :root[data-theme] .invoice-detail-panel { background: var(--paper-bg-soft); border-color: var(--paper-rule); } :root[data-theme] .invoice-detail-panel-head { border-bottom-color: var(--paper-rule); } :root[data-theme] .invoice-detail-panel-title { color: var(--paper-ink); } :root[data-theme] .invoice-detail-meta dt { color: var(--paper-ink-mute); } :root[data-theme] .invoice-detail-meta dd { color: var(--paper-ink); } /* Payments tile inside the Details panel — Invoice total / Received / Balance due labels + values. Value defaults to --slate-cream. */ :root[data-theme] .invoice-historical-balance-value { color: var(--paper-ink); } :root[data-theme] .invoice-historical-balance-label { color: var(--paper-ink-mute); } :root[data-theme] .invoice-record-label { color: var(--paper-ink-mute); } /* Shared Log Time modal — defaults are dark-card (slate-ink-2 / cream). In paper mode the whole modal stays dark, making it hard to read against the paper page underneath. Flip card + inputs + stage chips to paper tokens. */ :root[data-theme] .log-modal-card { background: var(--paper-bg); color: var(--paper-ink); border-color: var(--paper-rule); } :root[data-theme] .log-modal-title { color: var(--paper-ink); } :root[data-theme] .log-modal-field-label { color: var(--paper-ink-mute); } :root[data-theme] .log-modal-input { background: var(--paper-bg-soft); color: var(--paper-ink); border-color: var(--paper-rule); } :root[data-theme] .log-modal-input:focus { border-color: var(--paper-gold); } :root[data-theme] .log-modal-stage-opt { border-color: var(--paper-rule); color: var(--paper-ink); } :root[data-theme] .log-modal-stage-opt:hover { background: rgba(180, 140, 60, .06); } :root[data-theme] .log-modal-stage-opt:has(input[type="radio"]:checked) { border-color: var(--paper-gold); } :root[data-theme] .log-modal-stage-opt input[type="radio"] { border-color: var(--paper-rule); } :root[data-theme] .log-modal-stage-opt input[type="radio"]:checked { border-color: var(--paper-gold); } :root[data-theme] .log-modal-stage-opt input[type="radio"]:checked::after { background: var(--paper-gold); } :root[data-theme] .log-modal-stage-opt input[type="radio"]:checked + span { color: var(--paper-ink); } /* Feedback done-checkbox button — defaults use cream-on-cream which becomes invisible on paper. Flip to ink-on-paper so admins can actually see the checkbox. */ :root[data-theme] .feedback-done-btn { background: var(--paper-bg); border-color: var(--paper-ink-mute); color: var(--color-success); } :root[data-theme] .feedback-done-btn:hover { border-color: var(--paper-ink); background: var(--paper-bg-soft); } :root[data-theme] .feedback-done-btn.is-done { background: rgba(95, 140, 95, .15); border-color: var(--color-success); }