/* --------------------------------------------------------------- Cleanslate — token system Three themes, switched via [data-theme] on . Palette avoids the two AI-default looks (cream+terracotta, near-black+neon) in favor of an editorial "redaction" identity: ink/paper tones with a single muted teal accent. --------------------------------------------------------------- */ :root { --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-body: 'IBM Plex Sans', -apple-system, Segoe UI, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px -8px rgba(0,0,0,0.14); } /* Light / "paper" — default */ :root, [data-theme="paper"] { --bg: #F3EFE6; --surface: #FFFFFF; --surface-2: #EBE5D8; --border: #DCD4C2; --text: #211E1A; --text-muted: #6B6558; --accent: #3F7E78; --accent-strong: #2E5C57; --accent-contrast: #FBFBF8; --warn: #B7752E; --danger: #B8433A; } [data-theme="ink"] { --bg: #12151A; --surface: #1A1F26; --surface-2: #212832; --border: #2C3542; --text: #E9E6DD; --text-muted: #94A0AC; --accent: #5FB3AB; --accent-strong: #7FC9C1; --accent-contrast: #0C1013; --warn: #E0A458; --danger: #E27063; } [data-theme="sepia"] { /* eye-saver: warm, low blue-light */ --bg: #F4EAD3; --surface: #FBF3E1; --surface-2: #ECDFBF; --border: #DECBA0; --text: #3A2E1C; --text-muted: #7A6947; --accent: #8A5A2E; --accent-strong: #6E4622; --accent-contrast: #FBF3E1; --warn: #A6642A; --danger: #A84A3A; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); transition: background 0.25s ease, color 0.25s ease; } .theme-switch { position: fixed; top: 20px; right: 20px; display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); z-index: 10; } .theme-btn { border: none; background: transparent; color: var(--text-muted); font-family: var(--font-body); font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; } .theme-btn:hover { color: var(--text); } .theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-btn[data-active="true"] { background: var(--accent); color: var(--accent-contrast); } .app { max-width: 720px; margin: 0 auto; padding: 88px 24px 64px; } /* --- hero --- */ .hero { margin-bottom: 40px; } .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 5vw, 46px); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 16px; } .lede { font-size: 16px; line-height: 1.55; color: var(--text-muted); max-width: 52ch; margin: 0; } /* --- dropzone with redaction-sweep signature --- */ .dropzone { position: relative; overflow: hidden; border: 1.5px dashed var(--border); border-radius: var(--radius); background: var(--surface); padding: 40px 24px; text-align: center; transition: border-color 0.2s ease, background 0.2s ease; } .dropzone.drag-over { border-color: var(--accent); background: var(--surface-2); } .dropzone-title { font-size: 15px; color: var(--text-muted); margin: 0 0 12px; } .dropzone-hint { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin: 14px 0 0; } .redaction-bar { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--text); opacity: 0; pointer-events: none; } .redaction-bar.sweep { opacity: 1; animation: sweep 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes sweep { 0% { left: -100%; } 55% { left: 0%; } 100% { left: 100%; } } @media (prefers-reduced-motion: reduce) { .redaction-bar.sweep { animation: none; opacity: 0; } } /* --- inspect link (external companion tool) --- */ .inspect-link { font-size: 13px; color: var(--text-muted); margin: 14px 2px 0; } .inspect-link a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; } .inspect-link a:hover { color: var(--accent-strong); } .inspect-note { font-family: var(--font-mono); font-size: 11.5px; } /* --- controls --- */ .controls { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .btn { font-family: var(--font-body); font-size: 14px; font-weight: 600; padding: 11px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; } .btn-primary { background: var(--accent); color: var(--accent-contrast); } .btn-primary:hover { background: var(--accent-strong); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* --- results --- */ .results { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; } .file-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; } .file-row-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .file-name { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; } .status { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .status-pending { background: var(--surface-2); color: var(--text-muted); } .status-ok { background: rgba(63,126,120,0.15); color: var(--accent-strong); } .status-warn { background: rgba(183,117,46,0.15); color: var(--warn); } .status-error { background: rgba(184,67,58,0.15); color: var(--danger); } .file-detail { font-size: 13px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; } .file-actions { margin-top: 10px; } .link-btn { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; } /* --- disclosure --- */ .disclosure { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 16px; } .disclosure-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; color: var(--text); font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 0; } .chevron { transition: transform 0.2s ease; color: var(--text-muted); } .disclosure-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); } .disclosure-body { margin-top: 16px; } .disclosure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .disclosure-grid h3 { font-size: 13px; margin: 0 0 6px; } .disclosure-grid p { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 0 0 6px; } .caveat { font-style: italic; } .footer { margin-top: 56px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); } @media (max-width: 520px) { .app { padding: 76px 16px 48px; } .theme-switch { top: 12px; right: 12px; } }