/* public_html/assets/css/app.css ReleaseStacker — Base usability-first styles (Phase 1.5) Calm, editorial, professional. No hype. No gimmicks. */ /* ---------- CSS Variables (Light default) ---------- */ :root{ --bg: #ffffff; --surface: #ffffff; --surface-2: #fafafa; --text: #111111; --muted: #444444; --subtle: #666666; --border: #e6e6e6; --border-strong: #d6d6d6; --link: #111111; --focus: #2b6fff; --danger: #b42318; --radius: 12px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(0,0,0,0.05); --container: 1100px; --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 24px; --space-6: 32px; --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --fs-base: 16px; --lh: 1.65; --fs-h1: 30px; --fs-h2: 18px; --fs-h3: 16px; --editor-min-height: 420px; } /* Dark mode foundation (toggle later by setting data-theme="dark" on or ) */ [data-theme="dark"]{ --bg: #0f1115; --surface: #12151b; --surface-2: #171b22; --text: #e8e8e8; --muted: #c8c8c8; --subtle: #a7a7a7; --border: #2a2f3a; --border-strong: #3a4150; --link: #e8e8e8; --shadow: 0 1px 2px rgba(0,0,0,0.35); } /* ---------- Base Reset (Minimal) ---------- */ *{ box-sizing: border-box; } html, body{ height: 100%; } body{ margin: 0; font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img{ max-width: 100%; height: auto; } a{ color: var(--link); text-decoration: underline; text-underline-offset: 3px; } a:hover{ opacity: 0.9; } hr{ border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; } /* ---------- Layout ---------- */ .container{ max-width: var(--container); margin: 0 auto; padding: var(--space-6) 16px; } .stack > * + *{ margin-top: var(--space-4); } .header{ display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); } .brand{ font-weight: 650; letter-spacing: 0.2px; } .nav{ display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } /* ---------- Typography ---------- */ h1, h2, h3{ margin: 0 0 var(--space-2); line-height: 1.25; } h1{ font-size: var(--fs-h1); font-weight: 720; } h2{ font-size: var(--fs-h2); font-weight: 650; } h3{ font-size: var(--fs-h3); font-weight: 650; } p{ margin: 0 0 var(--space-3); color: var(--muted); } .lead{ font-size: 16px; color: var(--muted); max-width: 75ch; } .muted{ color: var(--subtle); } .content{ max-width: 75ch; } /* ---------- Surfaces ---------- */ .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow); } .card.soft{ background: var(--surface-2); } .section-title{ display:flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } /* ---------- Forms ---------- */ label{ display: block; font-weight: 600; margin: 0 0 var(--space-1); } .input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea{ width: 100%; font-family: var(--font); font-size: 16px; line-height: 1.45; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; outline: none; } textarea{ min-height: var(--editor-min-height); line-height: 1.65; resize: vertical; } input::placeholder, textarea::placeholder{ color: var(--subtle); } input:focus, select:focus, textarea:focus{ border-color: var(--focus); box-shadow: 0 0 0 3px rgba(43,111,255,0.18); } /* Compact inputs (for small fields) */ .input-sm{ padding: 8px 10px; font-size: 15px; } /* Help/error text */ .help{ margin-top: var(--space-1); font-size: 13px; color: var(--subtle); } .error{ margin-top: var(--space-1); font-size: 13px; color: var(--danger); } /* ---------- Buttons ---------- */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; font-weight: 600; line-height: 1; } .btn:hover{ background: var(--surface-2); } .btn:focus{ outline: none; box-shadow: 0 0 0 3px rgba(43,111,255,0.18); border-color: var(--focus); } .btn.primary{ background: #111; border-color: #111; color: #fff; } .btn.primary:hover{ opacity: 0.92; } .btn.danger{ background: #fff; border-color: #f2c5c5; color: var(--danger); } .btn.danger:hover{ background: #fff6f6; } .actions{ display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ---------- Theme toggle (dark mode button) ---------- */ .btn.btn-theme{ padding: 10px 12px; } /* Ensure code/text remains readable in dark mode */ [data-theme="dark"] code{ color: var(--text); } /* ---------- Tables (optional baseline) ---------- */ .table{ width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .table th, .table td{ padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } .table th{ background: var(--surface-2); font-size: 13px; color: var(--subtle); font-weight: 650; } .table tr:last-child td{ border-bottom: 0; } /* ---------- Status Pills ---------- */ .status{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; border: 1px solid transparent; font-weight: 650; } .status-draft{ background: #f3f3f3; color: #333; border-color: #e3e3e3; } .status-in-review{ background: #eef4ff; color: #1a3d7c; border-color: #d8e6ff; } .status-needs-revision{ background: #fff4e5; color: #7a4a00; border-color: #ffe1b8; } .status-approved{ background: #e9f6ec; color: #1f6b3a; border-color: #c7e8d0; } /* Dark mode tweaks for status pills */ [data-theme="dark"] .status-draft{ background:#1b1f27; color:#e8e8e8; border-color:#2a2f3a; } [data-theme="dark"] .status-in-review{ background:#142033; color:#d6e6ff; border-color:#223a63; } [data-theme="dark"] .status-needs-revision{ background:#2a1f10; color:#ffd6a3; border-color:#3d2d14; } [data-theme="dark"] .status-approved{ background:#112a1c; color:#bfe7cc; border-color:#1d3f2a; } /* ---------- Editor Helpers ---------- */ .editor{ max-width: 85ch; } .editor textarea{ min-height: 520px; /* slightly taller for press release body */ } .editor-notes textarea{ min-height: 180px; } .field{ margin-bottom: var(--space-4); } /* ---------- Footer ---------- */ .footer{ margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--subtle); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .footer a{ color: var(--subtle); } .footer a:hover{ color: var(--text); } /* ---------- Mobile ---------- */ @media (max-width: 768px){ h1{ font-size: 26px; } .container{ padding: 22px 14px; } .header{ align-items: flex-start; } .actions{ flex-direction: column; } .actions .btn{ width: 100%; } .card{ padding: 14px; } /* Tables -> make them scrollable rather than breaking layout */ .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); } .table{ min-width: 720px; } } /* ========================= Dark-mode contrast fixes (Fixes hardcoded rgba(0,0,0,...) styles used in AI + Review pages) ========================= */ /* AI panel helper text + pills + kickers */ .ai-muted, .ai-note, .ai-run-status, .ai-kicker, .muted-small{ color: var(--subtle) !important; } /* AI debug box should remain readable in dark mode */ .ai-debug{ border-color: var(--border-strong) !important; background: var(--surface-2) !important; color: var(--text) !important; } .ai-debug pre{ color: var(--text) !important; } /* AI section separators */ .ai-section{ border-top-color: var(--border) !important; } /* Pills/badges that were using rgba borders/backgrounds */ .ai-pill, .status-pill, .badge{ border-color: var(--border) !important; background: var(--surface-2) !important; color: var(--text) !important; } /* Draft status dot "muted" used rgba in inline CSS */ .dot.muted{ background: var(--border-strong) !important; } /* Ensure AI outputs are readable */ .ai-pre, pre.ai-out{ color: var(--text) !important; } /* If any legacy classes exist */ .text-muted, .help-text, .hint, .small, small{ color: var(--subtle); }